/*
Theme Name: Gatetens Guapens
Theme URI: https://gatetens.com
Author: Gatetens
Description: Tema a medida para la tienda Gatetens Guapens. Disenado movil primero, con cabecera que se compacta al bajar y zonas tactiles de 44px.
Version: 1.15.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: gatetens
*/
/* --------------------------------------------------------------------------
Los estilos vienen tal cual del diseno aprobado en HTML. No se han tocado al
pasarlos al tema, para que lo validado sea exactamente lo que se ve.
style.css vive en la raiz del tema, asi que las rutas assets/... siguen
resolviendo igual que antes.
-------------------------------------------------------------------------- */
/* Gatetens Guapens - hoja de estilos compartida
Extraida de index.html para que todas las paginas usen la misma.
Editar aqui cambia la web entera. */
:root{
/* Gama 02 · Leopardo — paleta por defecto elegida por el cliente */
--ink:#1E1B18; --jungle:#1E1B18; --jungle-2:#4A3F35;
--coral:#8C5A2B; --coral-dark:#1E1B18; --mustard:#C98A3E;
--paper:#F0E7DA; --card:#FFFFFF; --line:rgba(30,27,24,.14);
--shadow:0 10px 30px -12px rgba(30,27,24,.28); --radius:18px; --btn-text:#fff;
--stamp-border:rgba(240,231,218,.55); --ghost-border:rgba(240,231,218,.5);
--ghost-hover:rgba(240,231,218,.12); --social-border:rgba(240,231,218,.3);
--footbottom-border:rgba(240,231,218,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
/* AQUI NO PUEDE IR NINGUN overflow.
position:sticky deja de funcionar si CUALQUIER antepasado tiene un overflow
distinto de visible, y html lo es de la cabecera. Se probo con clip para
quitar un arrastre lateral de 13px que provoca el menu cerrado, y el
resultado fue perder la cabecera pegajosa entera: mal cambio.
El arrastre se ataca en el propio menu, mas abajo. */
html{scroll-behavior:smooth;}
/* OJO: aqui NO puede ir overflow-x:hidden. Al ponerlo, el navegador convierte
el overflow-y del body en auto, el body pasa a ser contenedor de scroll y
eso ROMPE el position:sticky de la cabecera. Del recorte lateral ya se
encarga el overflow-x:clip de html, que es donde debe estar. */
body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Bricolage Grotesque', sans-serif; line-height:1.02; letter-spacing:-0.02em;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font:inherit; cursor:pointer; border:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 20px;}
.banner-note{background:var(--ink); color:var(--paper); text-align:center; font-size:12px; padding:8px 14px; letter-spacing:.03em;}
.banner-note b{color:var(--coral);}
/* Header */
header{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden;}
/* Patron de gatos de fondo, al 40% de opacidad. Va en un ::before para que
el logo y el menu se mantengan totalmente opacos y legibles encima. */
header::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:.4; background-repeat:no-repeat; background-position:center; background-size:cover;
background-image:url('assets/patron-cabecera.png');}
.header-row{display:flex; align-items:center; max-width:1080px; margin:0 auto; position:relative; z-index:1;}
/* SIN TRANSICION A PROPOSITO.
Antes el logo grande se desvanecia en .2s pero su hueco tardaba .3s en
cerrarse: durante ese rato quedaba una franja invisible de 130px ocupando
sitio, con el logo pequeno ya visible encima. Se veia como si la cabecera
se quedara pillada, y al cruzar el umbral repetidamente, parpadeaba.
El cambio instantaneo no tiene fotograma intermedio, asi que no parpadea. */
.header-top{justify-content:center; padding:16px 20px 2px; overflow:hidden; max-height:130px;}
.header-bottom{justify-content:center; gap:16px; padding:2px 20px 8px;}
.logo-mark{height:72px; width:auto; border-radius:8px;}
/* Estado compacto (al bajar): la fila del logo grande se pliega y en su lugar
aparece un logo pequeno junto a los iconos. La barra queda en ~60px en vez
de 149px, que en un movil de 812px era casi la cuarta parte de la pantalla. */
header.compact .header-top{max-height:0; padding-top:0; padding-bottom:0; opacity:0;}
.logo-mini{display:none; margin-right:auto; align-items:center; min-height:44px;}
.logo-mini img{height:36px; width:auto; border-radius:6px;}
header.compact .logo-mini{display:flex;}
.nav-desktop{display:none; gap:28px; font-size:16.5px; font-weight:500;}
.nav-desktop a:hover{color:var(--coral);}
.header-actions{display:flex; align-items:center; gap:14px;}
/* 44px es el minimo tactil recomendado; el circulo visible se mantiene mas
pequeno con el :hover, asi que se gana zona de toque sin engordar el diseno. */
.icon-btn{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; background:transparent;}
.icon-btn:hover{background:var(--line);}
.icon-btn svg{width:20px; height:20px;}
.cart-badge{position:absolute; top:5px; right:4px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;}
.cart-badge.pulse{animation:pulse .35s ease;}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.burger{display:flex;}
.drawer-overlay{position:fixed; inset:0; background:rgba(0,18,25,.55); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s;}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
/* Cerrado se saca de pantalla, pero ademas se oculta con visibility para que
no cuente como contenido y no genere arrastre lateral. Se ataca aqui, en el
propio menu, y no con overflow en html o body: ahi romperia el sticky de la
cabecera. La visibilidad se retrasa hasta que acaba la animacion de cierre. */
.drawer{position:fixed; top:0; right:0; height:100%; width:78%; max-width:320px; background:var(--paper); z-index:61; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; padding:22px 24px; box-shadow:var(--shadow); visibility:hidden;}
.drawer.open{transform:translateX(0); visibility:visible; transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s;}
.drawer-close{margin-left:auto; display:flex; width:44px; height:44px;}
.drawer nav{display:flex; flex-direction:column; gap:4px; margin-top:20px;}
.drawer nav a{font-size:19px; font-weight:600; padding:12px 4px; border-bottom:1px solid var(--line);}
/* Hero - carrusel de anuncios */
.hero{background:var(--jungle); color:var(--paper); position:relative; overflow:hidden;}
.hero-track{position:relative;}
/* EL RELEVO ENTRE ANUNCIOS, Y POR QUE HABIA QUE TOCARLO
---------------------------------------------------------------
La clase .active cambiaba tres cosas a la vez, pero no al mismo ritmo:
position y pointer-events saltaban EN EL ACTO, mientras que la opacidad
tardaba 0,45 s en cruzarse. Durante ese medio segundo pasaban dos cosas:
1. Se veian los dos anuncios superpuestos, con los dos titulares y los
dos precios encima uno de otro, ilegible.
2. Peor: el anuncio que SE VEIA ya no admitia toques, y el que aun era
invisible si los admitia. Un dedo que iba al bolso acababa en la
hucha, o no pasaba nada.
La solucion es encadenar la visibilidad al fundido, con el mismo retardo,
para que en cada instante haya UNO Y SOLO UNO visible. Y se quita
pointer-events: sobra, porque visibility:hidden ya impide el toque, y ese
era justo el que iba por libre. De paso, el lector de pantalla deja de
leer dos veces el catalogo entero.
Linea de tiempo de un cambio (A sale, B entra):
0,00-0,22 s A se desvanece, y sigue siendo el que recibe los toques.
0,22 s A desaparece y B aparece. Relevo limpio.
0,22-0,50 s B aparece del todo, y es el que recibe los toques. */
.hero-slide{width:100%; display:flex; align-items:center; position:absolute; inset:0;
opacity:0; visibility:hidden;
transition:opacity .22s ease, visibility 0s linear .22s;}
.hero-slide.active{position:relative; opacity:1; visibility:visible;
transition:opacity .28s ease .22s, visibility 0s linear .22s;}
/* Textura de pelo de fondo en cada slide, al 40%. En un ::before para que
el texto y las fotos de producto queden totalmente opacos encima.
Se alternan dos texturas para dar variacion al pasar de un anuncio a otro. */
.hero-slide::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
opacity:.4; background-size:cover; background-position:center; background-repeat:no-repeat;
background-image:url('assets/textura-pelo-1.webp');}
.hero-slide:nth-child(2)::before{
background-image:url('assets/textura-pelo-2.webp');}
.hero .wrap{padding:36px 20px 54px; display:flex; flex-direction:column; gap:26px; width:100%; position:relative; z-index:1;}
.hero .hero-slide .wrap.hero-reverse{flex-direction:column;}
.hero .hero-slide .wrap.hero-centered{align-items:center; text-align:center;}
.hero .hero-slide .wrap.hero-centered .hero-price-row{justify-content:center;}
.hero .hero-slide .wrap.hero-centered .lede{max-width:34ch;}
.hero-visual.small{max-width:170px;}
.stamp{display:inline-flex; align-items:center; gap:6px; border:1.5px dashed var(--stamp-border); border-radius:999px; padding:6px 14px; font-size:12px; font-weight:600; letter-spacing:.06em; transform:rotate(-3deg); width:fit-content; font-family:'IBM Plex Mono',monospace;}
.stamp.solid{background:var(--coral); border:none; color:#fff;}
.hero h1{font-size:clamp(34px,8vw,58px); font-weight:700; margin-top:12px;}
.hero h1 span{color:var(--coral);}
.hero p.lede{font-size:15.5px; opacity:.85; max-width:38ch; margin-top:10px;}
.hero-price-row{display:flex; align-items:center; gap:18px; margin-top:6px;}
.price-big{font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:500;}
.btn{background:var(--coral); color:var(--btn-text,#fff); padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, background .15s, color .15s;}
.btn:hover{background:var(--coral-dark); transform:translateY(-2px);}
.btn.ghost{background:transparent; border:1.5px solid var(--ghost-border); color:var(--paper);}
.btn.ghost:hover{background:var(--ghost-hover);}
.hero-visual{align-self:center; width:100%; max-width:300px; position:relative; transform:rotate(2deg);}
.hero-visual .frame{background:var(--paper); border-radius:20px; padding:14px; box-shadow:var(--shadow);}
.hero-visual img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;}
.hero-stats{display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; opacity:.8;}
.hero-stats span{display:flex; align-items:center; gap:6px;}
.hero-stats svg{width:14px; height:14px;}
.zz{width:100%; height:24px; display:block; color:var(--paper);}
/* En movil las flechas caian justo encima de la linea de "+500 clientas" y
ademas eran de 38px. Se ocultan: en tactil se pasa de anuncio deslizando o
con los puntos, y reaparecen en escritorio, donde si hacen falta. */
.hero-arrow{display:none; position:absolute; top:42%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,18,25,.28); color:var(--paper); align-items:center; justify-content:center; font-size:20px; z-index:6; line-height:1;}
.hero-arrow:hover{background:rgba(0,18,25,.48);}
.hero-arrow.prev{left:12px;}
.hero-arrow.next{right:12px;}
/* Los puntos siguen viendose pequenos, pero cada uno lleva una zona de toque
invisible de 44px de alto que llega justo hasta el vecino, sin solaparse. */
.hero-dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:6;}
.hero-dots .dot{position:relative; width:10px; height:10px; border-radius:50%; background:rgba(251,243,231,.45); padding:0; transition:width .2s, background .2s;}
.hero-dots .dot::after{content:''; position:absolute; inset:-17px -6px;}
.hero-dots .dot.active{background:var(--paper); width:24px; border-radius:5px;}
.section{padding:52px 0;}
/* Dos secciones seguidas no suman su espacio: la de abajo pierde el superior.
Asi el ritmo entre secciones es constante y las que van tras un bloque a
sangre (banner, hero) conservan su aire por arriba. */
.section + .section{padding-top:0;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--coral); font-weight:600; margin-bottom:8px; text-transform:uppercase;}
.section h2{font-size:clamp(24px,5vw,34px); font-weight:700; margin-bottom:24px;}
/* Colecciones */
/* Filtros y grid con FOTOS REALES */
/* En movil los cuatro filtros no caben en una linea y saltaban a una segunda
fila. Se pasan a carrusel horizontal: ocupan una sola linea y se deslizan. */
.filters{display:flex; gap:10px; margin-bottom:24px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
.filters::-webkit-scrollbar{display:none;}
.filter-btn{flex:0 0 auto; background:var(--card); border:1.5px solid var(--line); padding:12px 18px; min-height:44px; border-radius:999px; font-size:13.5px; font-weight:600;}
.filter-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.card.hidden{display:none;}
.card-media{aspect-ratio:1/1; background:var(--jungle-2); position:relative; overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover;}
/* Hueco para productos sin foto todavia */
.media-placeholder{position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:8px; color:var(--paper); padding:14px; text-align:center;}
.media-placeholder .ico{font-size:26px; opacity:.8;}
.media-placeholder .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; opacity:.7; text-transform:uppercase;}
.card-badge{position:absolute; top:10px; left:10px; background:var(--paper); color:var(--ink); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; transform:rotate(-4deg); font-family:'IBM Plex Mono',monospace;}
.card-body{padding:16px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-body h3{font-size:15.5px; font-weight:600; font-family:'Inter',sans-serif;}
/* El recorte lo hace el navegador segun el ancho real. Antes venia escrito a
mano con "…" y cortaba a mitad de palabra en cuanto cambiaba la pantalla. */
.card-body p{font-size:12.5px; color:#6b675f; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.card-price{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px;}
.add-btn{width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; flex:0 0 auto;}
.add-btn:hover{background:var(--coral); color:var(--btn-text,#fff);}
.add-btn svg{width:17px; height:17px;}
.wild-banner{background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--paper); padding:48px 20px; position:relative;}
.wild-inner{display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center;}
.wild-copy h2{font-size:clamp(28px,7vw,46px); font-weight:800;}
.wild-copy p{max-width:36ch; margin:14px auto 22px; opacity:.9; font-size:14.5px;}
.wild-visual{width:100%; max-width:190px;}
.wild-visual .frame{background:var(--paper); padding:8px; border-radius:20px; box-shadow:var(--shadow); transform:rotate(-3deg);}
.wild-visual img{width:100%; border-radius:12px; display:block;}
.reviews{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px;}
.reviews::-webkit-scrollbar{display:none;}
.review-card{scroll-snap-align:start; flex:0 0 78%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.stars{color:var(--coral); margin-bottom:12px; font-size:14px;}
.review-card p{font-size:14.5px; line-height:1.5; margin-bottom:16px;}
.reviewer{display:flex; align-items:center; gap:10px;}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--jungle); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.reviewer .rname{font-weight:600; font-size:13.5px;}
.reviewer .rloc{font-size:12px; color:#6b675f;}
.social-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.social-head h2{margin-bottom:0;}
.social-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.social-tile{aspect-ratio:1/1; overflow:hidden; position:relative; border-radius:8px;}
.social-tile img{width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.social-tile:hover img{transform:scale(1.06);}
.social-tile .ig-overlay{position:absolute; inset:0; background:rgba(0,18,25,0); display:flex; align-items:center; justify-content:center; gap:6px; color:#fff; font-weight:700; font-size:13px; opacity:0; transition:.2s;}
.social-tile:hover .ig-overlay{background:rgba(0,18,25,.45); opacity:1;}
.social-tile .ig-overlay svg{width:16px; height:16px;}
.blog-grid{display:grid; grid-template-columns:1fr; gap:18px;}
.blog-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s;}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.blog-media{aspect-ratio:16/10; overflow:hidden; background:var(--jungle-2); position:relative;}
.blog-media img{width:100%; height:100%; object-fit:cover;}
.blog-tag{position:absolute; top:10px; left:10px; background:var(--paper); color:var(--ink); font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; transform:rotate(-3deg); font-family:'IBM Plex Mono',monospace;}
.blog-body{padding:18px; display:flex; flex-direction:column; gap:8px;}
.blog-body h3{font-size:17px; font-weight:700;}
.blog-body p{font-size:13.5px; color:#6b675f; line-height:1.5;}
.blog-read{margin-top:6px; font-size:13px; font-weight:700; color:var(--coral); display:inline-flex; align-items:center; gap:5px;}
.blog-cta{text-align:center; margin-top:28px;}
/* Libros a la venta en Amazon */
.books-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.book-card{display:flex; flex-direction:column; gap:12px; text-align:center;}
.book-cover{aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--jungle-2); box-shadow:var(--shadow); position:relative; transition:transform .2s;}
.book-card:hover .book-cover{transform:translateY(-5px);}
.book-cover img{width:100%; height:100%; object-fit:cover;}
.book-cover .cover-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; color:var(--paper);}
.book-cover .cover-placeholder .ico{font-size:30px; opacity:.85;}
.book-cover .cover-placeholder .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; opacity:.7; text-transform:uppercase;}
.book-title{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:15.5px; line-height:1.15;}
.book-sub{font-size:12.5px; color:#6b675f; line-height:1.4; margin-top:4px;}
.book-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--ink); color:var(--paper); font-size:12.5px; font-weight:700; padding:10px 14px; border-radius:999px; transition:background .15s, transform .15s;}
.book-btn:hover{background:var(--coral); color:var(--btn-text,#fff); transform:translateY(-2px);}
.book-btn svg{width:13px; height:13px;}
@media(min-width:760px){ .books-grid{grid-template-columns:repeat(4,1fr); gap:28px;} .book-title{font-size:16.5px;} }
.trust{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.trust-pill{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); padding:10px 16px; border-radius:999px; font-size:12.5px; font-weight:600;}
.trust-pill svg{width:15px; height:15px; color:var(--coral);}
.newsletter{background:var(--mustard); padding:50px 20px; text-align:center;}
.newsletter h2{font-size:clamp(22px,5vw,30px); margin-bottom:8px;}
.newsletter p{font-size:14px; margin-bottom:20px; opacity:.85;}
.nl-form{display:flex; flex-direction:column; gap:10px; max-width:400px; margin:0 auto;}
.nl-form input{padding:14px 18px; border-radius:999px; border:1.5px solid var(--ink); font-size:14px; background:var(--paper);}
.nl-form button{background:var(--ink); color:var(--paper); padding:14px; border-radius:999px; font-weight:700;}
.nl-toast{margin-top:12px; font-size:13px; font-weight:600; font-family:'IBM Plex Mono',monospace; opacity:0; transition:opacity .25s;}
.nl-toast.show{opacity:1;}
footer{background:var(--jungle); color:var(--paper); padding:44px 20px 84px;}
.foot-grid{display:flex; flex-direction:column; gap:28px;}
.foot-brand img{height:34px; margin-bottom:10px; border-radius:6px;}
.foot-brand p{font-size:13.5px; opacity:.75; max-width:32ch;}
.foot-cols{display:flex; flex-direction:column; gap:20px;}
.foot-col h4{font-size:12px; margin-bottom:10px; opacity:.6; letter-spacing:.06em; font-family:'IBM Plex Mono',monospace;}
.foot-col a{display:flex; align-items:center; min-height:44px; font-size:14px; opacity:.9;}
.foot-col a:hover{color:var(--coral);}
.socials{display:flex; gap:10px; margin-top:14px;}
.socials a{width:44px; height:44px; border-radius:50%; border:1px solid var(--social-border); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.foot-bottom{border-top:1px solid var(--footbottom-border); margin-top:30px; padding-top:18px; font-size:12px; opacity:.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.mobile-cart-bar{position:fixed; bottom:0; left:0; right:0; z-index:55; background:var(--ink); color:var(--paper); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; transform:translateY(120%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:0 -8px 24px rgba(0,0,0,.2);}
.mobile-cart-bar.show{transform:translateY(0);}
.mobile-cart-bar .info{font-size:13px;}
.mobile-cart-bar .info b{font-family:'IBM Plex Mono',monospace; color:var(--coral);}
.mobile-cart-bar button{background:var(--coral); color:var(--btn-text,#fff); padding:11px 20px; border-radius:999px; font-weight:700; font-size:13.5px;}
/* Selector de paletas (solo boceto) */
.palette-switcher{position:fixed; left:14px; right:14px; bottom:84px; z-index:70; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 10px 6px 6px; display:flex; gap:7px; align-items:center; box-shadow:var(--shadow); overflow-x:auto; -webkit-overflow-scrolling:touch;}
.palette-switcher::-webkit-scrollbar{display:none;}
.palette-switcher .ps-label{font-size:10px; font-weight:700; font-family:'IBM Plex Mono',monospace; color:var(--ink); white-space:nowrap; letter-spacing:.03em; flex:0 0 auto;}
.palette-switcher button{width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; flex:0 0 auto;}
.palette-switcher button.active{border-color:var(--ink); transform:scale(1.1);}
/* Plegable: flotando sobre la pagina tapaba las tarjetas de producto. Plegado
se queda en un boton redondo en la esquina y no estorba al revisar el diseno. */
.ps-toggle{background:var(--paper); border:1.5px solid var(--line) !important; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;}
.palette-switcher.plegado{left:auto; right:14px; padding:6px; gap:0;}
.palette-switcher.plegado .ps-label,
.palette-switcher.plegado button[data-variant]{display:none;}
@media (min-width:760px){ .palette-switcher{bottom:22px; left:50%; transform:translateX(-50%); right:auto; max-width:90vw;} }
@media (min-width:760px){
.header-top{padding:20px 64px 4px;}
.header-bottom{padding:8px 64px 18px; gap:32px;}
.logo-mark{height:86px;}
.burger{display:none;}
.nav-desktop{display:flex;}
.hero .wrap{flex-direction:row; align-items:center; justify-content:center; gap:64px; padding:64px 20px 84px;}
.hero .hero-slide .wrap.hero-reverse{flex-direction:row-reverse;}
.hero .hero-slide .wrap.hero-centered{flex-direction:column !important;}
.hero-copy{flex:0 1 440px;}
.hero-visual{flex:0 0 320px; max-width:320px;}
.hero-visual.small{flex:0 0 200px; max-width:200px;}
.hero-arrow{display:flex; width:48px; height:48px;}
.hero-arrow.prev{left:24px;}
.hero-arrow.next{right:24px;}
.wild-inner{flex-direction:row; text-align:left; justify-content:center; align-items:center; gap:56px;}
.wild-copy{flex:0 1 420px;}
.wild-copy p{margin:14px 0 22px;}
.wild-visual{flex:0 0 190px; max-width:190px;}
.grid{grid-template-columns:repeat(4,1fr);}
.blog-grid{grid-template-columns:repeat(3,1fr);}
.review-card{flex:0 0 32%;}
.foot-grid{flex-direction:row; justify-content:space-between;}
.foot-cols{flex-direction:row; gap:60px;}
.mobile-cart-bar{display:none;}
.section{padding:76px 0;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important;} }
/* --- Estilos adicionales compartidos (paginas internas) --- */
.nav-desktop a.active{color:var(--coral);}
.breadcrumb{font-size:12.5px; color:#6b675f; margin:18px 0 4px;}
.breadcrumb a{color:var(--ink); font-weight:600;}
.breadcrumb a:hover{color:var(--coral);}
.page-hero{background:var(--jungle); color:var(--paper); padding:40px 20px; text-align:center;}
.page-hero h1{font-size:clamp(28px,7vw,44px); font-weight:800;}
.page-hero p{opacity:.85; margin-top:8px; font-size:14px;}
.pd-wrap{display:flex; flex-direction:column; gap:30px; padding:28px 0 12px;}
.pd-gallery .frame{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.pd-gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px;}
.pd-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none;}
.pd-thumbs::-webkit-scrollbar{display:none;}
.pd-thumb{flex:0 0 62px; width:62px; padding:0; border-radius:9px; overflow:hidden;
border:2px solid transparent; background:var(--card); cursor:pointer; transition:border-color .15s, transform .15s;}
.pd-thumb:hover{transform:translateY(-2px);}
.pd-thumb.active{border-color:var(--coral);}
.pd-thumb img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:0;}
.pd-info h1{font-size:clamp(24px,6vw,36px); margin:8px 0;}
.pd-price{font-family:'IBM Plex Mono',monospace; font-size:25px; font-weight:600; margin:10px 0;}
.pd-desc{font-size:14.5px; line-height:1.6; color:#4a473f; margin-bottom:20px;}
.pd-qty{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.pd-qty button{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); font-size:18px; color:var(--ink);}
.pd-qty span{font-family:'IBM Plex Mono',monospace; font-weight:600; min-width:20px; text-align:center;}
.pd-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; margin-top:22px; color:#6b675f;}
.pd-related h2{font-size:20px; margin:44px 0 18px;}
@media(min-width:760px){ .pd-wrap{flex-direction:row; gap:56px;} .pd-gallery{flex:0 0 400px;} .pd-info{flex:1;} }
.cart-wrap{display:flex; flex-direction:column; gap:28px; padding:28px 0 60px;}
.cart-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-item img{width:74px; height:74px; border-radius:12px; object-fit:cover; background:var(--jungle-2);}
.cart-item .ci-info{flex:1;}
.cart-item .ci-name{font-weight:700; font-size:14.5px;}
.cart-item .ci-price{font-family:'IBM Plex Mono',monospace; font-size:13px; color:#6b675f; margin-top:2px;}
.cart-qty{display:flex; align-items:center; gap:8px; margin-top:8px;}
.cart-qty button{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--card); font-size:13px;}
.cart-remove{font-size:12px; color:var(--coral); font-weight:600; margin-top:6px; cursor:pointer; background:none; padding:0;}
.cart-summary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; align-self:flex-start;}
.cart-summary .row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px;}
.cart-summary .total{font-weight:700; font-size:17px; border-top:1px solid var(--line); padding-top:12px; margin-top:6px;}
.cart-empty{text-align:center; padding:60px 20px; opacity:.7;}
@media(min-width:760px){ .cart-wrap{flex-direction:row; align-items:flex-start;} .cart-items{flex:1;} .cart-summary{flex:0 0 320px;} }
.auth-wrap{display:flex; flex-direction:column; gap:22px; padding:36px 0 60px; max-width:920px; margin:0 auto;}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.auth-card h2{font-size:21px; margin-bottom:4px;}
.auth-card p.sub{font-size:13px; color:#6b675f; margin-bottom:18px;}
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.form-field label{font-size:12.5px; font-weight:600;}
.form-field input,.form-field textarea{padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:14px; font-family:inherit; background:var(--paper); width:100%;}
.form-field textarea{min-height:100px; resize:vertical;}
.form-submit{width:100%; justify-content:center; margin-top:6px;}
@media(min-width:760px){ .auth-wrap{flex-direction:row;} .auth-card{flex:1;} }
.prose{max-width:720px; margin:0 auto; padding:36px 0 60px; font-size:14.5px; line-height:1.7; color:#3a372f;}
.prose h1{font-size:clamp(26px,6vw,38px); margin-bottom:18px; color:var(--ink);}
.prose h2{font-size:19px; margin:32px 0 10px; scroll-margin-top:90px; color:var(--ink);}
.prose p{margin-bottom:12px;}
.prose .legal-note{font-size:12px; background:var(--paper); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; margin:20px 0 30px; color:#6b675f;}
.article-media{aspect-ratio:16/9; overflow:hidden;}
.article-media img{width:100%; height:100%; object-fit:cover;}
.article-body{max-width:680px; margin:0 auto; padding:30px 0 20px;}
.article-body .meta{font-size:12.5px; color:#6b675f; margin-bottom:10px; font-family:'IBM Plex Mono',monospace;}
.article-body h1{font-size:clamp(26px,6vw,40px); margin-bottom:16px;}
.article-body p{font-size:15px; line-height:1.75; margin-bottom:16px; color:#3a372f;}
.related-posts{max-width:920px; margin:20px auto 60px; padding:0 20px;}
.related-posts h2{font-size:20px; margin-bottom:16px;}
.related-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:760px){ .related-grid{grid-template-columns:repeat(3,1fr);} }
.placeholder-page{text-align:center; padding:70px 20px 90px;}
.placeholder-page .icon{font-size:44px; margin-bottom:14px;}
.placeholder-page h1{font-size:26px; margin-bottom:10px;}
.placeholder-page p{color:#6b675f; margin-bottom:22px; max-width:44ch; margin-left:auto; margin-right:auto;}
/* ================= PAGINA DE TIENDA ================= */
/* Buscador y ordenacion. En movil van apilados; a partir de 760px, en linea. */
.shop-tools{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}
.shop-search{position:relative; flex:1;}
.shop-search input{width:100%; padding:13px 44px 13px 18px; min-height:48px; border-radius:999px;
border:1.5px solid var(--line); background:var(--card); font-size:15px; font-family:inherit; color:var(--ink);}
.shop-search input:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;}
.shop-search .lupa{position:absolute; right:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#6b675f; pointer-events:none;}
.sort-wrap{display:flex; align-items:center; gap:8px;}
.sort-wrap label{font-size:12.5px; color:#6b675f; white-space:nowrap;}
.sort-wrap select{flex:1; min-height:48px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line);
background:var(--card); font-size:14px; font-family:inherit; color:var(--ink); cursor:pointer;}
.shop-count{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#6b675f; margin-bottom:14px;}
/* Muestras de color en la tarjeta. Son informativas, no se pulsan: asi no hace
falta que midan 44px y la tarjeta entera sigue siendo un unico enlace. */
.card-colors{display:flex; align-items:center; gap:5px; margin-top:2px;}
.color-dot{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:0 0 auto;}
.color-more{font-size:11px; color:#6b675f; font-family:'IBM Plex Mono',monospace;}
/* Agotado: la tarjeta se apaga pero se sigue viendo, para no esconder catalogo. */
.card.agotado .card-media img{opacity:.45; filter:grayscale(.7);}
.card-badge.badge-agotado{background:var(--ink); color:var(--paper);}
.card-badge.badge-pronto{background:var(--mustard); color:var(--ink);}
.card .sin-stock{font-size:12px; font-weight:700; color:#6b675f; font-family:'IBM Plex Mono',monospace;}
/* Paginacion */
.pagination{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:34px; flex-wrap:wrap;}
.page-btn{min-width:44px; min-height:44px; padding:0 12px; border-radius:12px; border:1.5px solid var(--line);
background:var(--card); font-size:14.5px; font-weight:600; font-family:'IBM Plex Mono',monospace;
display:flex; align-items:center; justify-content:center; color:var(--ink);}
.page-btn:hover:not(:disabled){border-color:var(--coral); color:var(--coral);}
.page-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.page-btn:disabled{opacity:.35; cursor:not-allowed;}
/* Sin resultados */
.empty-state{display:none; text-align:center; padding:56px 20px;}
.empty-state.show{display:block;}
.empty-state .ico{font-size:40px; margin-bottom:12px;}
.empty-state h3{font-size:19px; margin-bottom:8px;}
.empty-state p{font-size:14px; color:#6b675f; margin-bottom:20px;}
@media(min-width:760px){
.shop-tools{flex-direction:row; align-items:center; gap:16px;}
.shop-search{max-width:420px;}
.sort-wrap{margin-left:auto;}
.sort-wrap select{min-width:210px; flex:0 0 auto;}
}
/* Titulo de pagina interna, sobre el fondo claro. Sustituye al bloque oscuro
.page-hero, que se conserva mas arriba por si hace falta en otra pagina. */
.page-title{font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
font-size:clamp(32px,9vw,54px); line-height:1.02; letter-spacing:-0.03em;
margin:6px 0 2px;}
/* Contador + ordenacion en una sola linea. Se retiro el bloque de buscador y
ordenacion por ocupar demasiado alto; la ordenacion vuelve aqui, aprovechando
una fila que ya existia, asi que no cuesta ni un pixel de alto extra. */
.shop-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.shop-bar .shop-count{margin-bottom:0;}
.sort-mini{position:relative; display:flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--ink);}
.sort-mini .ico-sort{width:15px; height:15px; pointer-events:none; opacity:.75;}
/* El desplegable es nativo a proposito: en movil abre el selector del sistema,
se maneja con teclado y lo leen los lectores de pantalla sin trabajo extra. */
.sort-mini select{appearance:none; -webkit-appearance:none; background:transparent; border:0;
font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--ink);
padding:12px 4px; min-height:44px; cursor:pointer; text-align:right;}
.sort-mini select:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:6px;}
/* En la tienda los filtros van justo debajo del titulo de pagina, no detras de
un titular de seccion como en la portada, asi que los 52px de aire heredados
sobraban. Se recorta solo aqui: la portada mantiene su ritmo intacto. */
.section-tienda{padding-top:20px;}
.section-tienda .filters{margin-bottom:14px;}
/* ================= FICHA DE PRODUCTO ================= */
.pd-badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
.pd-rating{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#6b675f; margin:2px 0 6px;}
.pd-rating .estrellas{color:var(--coral); letter-spacing:1px; font-size:14px;}
/* Selectores de variante. Cada opcion mide 44px porque son lo mas pulsado de
toda la web: si aqui se falla un toque, se pierde la venta. */
.pd-variantes{display:flex; flex-direction:column; gap:18px; margin:22px 0;}
.variante{display:flex; flex-direction:column; gap:9px;}
.variante-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.variante-cab .etq{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace;}
.variante-cab .elegido{font-size:13.5px; color:#6b675f; font-weight:500;}
.variante-ops{display:flex; gap:9px; flex-wrap:wrap;}
/* Color: circulo con el color real dentro, aro exterior al seleccionar */
.op-color{width:44px; height:44px; border-radius:50%; padding:4px; background:transparent;
border:2px solid transparent; position:relative; transition:border-color .15s;}
.op-color i{display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,.18);}
.op-color[aria-checked="true"]{border-color:var(--ink);}
.op-color:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
/* Talla: pastilla de texto */
.op-talla{min-width:52px; min-height:44px; padding:0 14px; border-radius:12px;
border:1.5px solid var(--line); background:var(--card); color:var(--ink);
font-size:14px; font-weight:600; font-family:'IBM Plex Mono',monospace; transition:.15s;}
.op-talla[aria-checked="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.op-talla:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
/* Agotado: se ve pero se nota que no esta. Tachado en diagonal, no escondido:
asi la clienta entiende que existe y puede preguntar por el. */
.op-color.agotada, .op-talla.agotada{opacity:.4; cursor:not-allowed; position:relative;}
.op-color.agotada::after, .op-talla.agotada::after{content:''; position:absolute; left:12%; right:12%; top:50%;
height:1.5px; background:currentColor; transform:rotate(-24deg);}
.guia-tallas{background:none; border:0; padding:6px 0; font-size:12.5px; font-weight:600;
color:var(--coral); text-decoration:underline; cursor:pointer; min-height:44px;}
/* Aviso de existencias */
.aviso-stock{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
font-family:'IBM Plex Mono',monospace; margin:2px 0 14px; min-height:20px;}
.aviso-stock .punto{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.aviso-stock.hay{color:#2E7D46;} .aviso-stock.hay .punto{background:#2E7D46;}
.aviso-stock.pocas{color:#B4632B;} .aviso-stock.pocas .punto{background:#B4632B;}
.aviso-stock.nada{color:#9B2C2C;} .aviso-stock.nada .punto{background:#9B2C2C;}
.aviso-stock.elige{color:#6b675f;} .aviso-stock.elige .punto{background:#b8b2a6;}
.pd-comprar{display:flex; flex-direction:column; gap:12px;}
.btn-comprar{width:100%; justify-content:center; min-height:54px; font-size:16px;}
.btn-comprar:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.pd-garantias{display:flex; flex-direction:column; gap:9px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line);}
.pd-garantias div{display:flex; align-items:center; gap:9px; font-size:13px; color:#4a473f;}
.pd-garantias svg{width:16px; height:16px; color:var(--coral); flex:0 0 auto;}
/* Desplegables de detalle */
.pd-detalles{margin-top:28px; border-top:1px solid var(--line);}
.pd-detalles details{border-bottom:1px solid var(--line);}
.pd-detalles summary{cursor:pointer; padding:16px 2px; font-weight:700; font-size:14.5px;
min-height:44px; display:flex; align-items:center; justify-content:space-between; list-style:none;}
.pd-detalles summary::-webkit-details-marker{display:none;}
.pd-detalles summary::after{content:'+'; font-size:20px; font-weight:400; color:var(--coral);}
.pd-detalles details[open] summary::after{content:'−';}
.pd-detalles .cuerpo{padding:0 2px 18px; font-size:14px; line-height:1.65; color:#4a473f;}
.pd-detalles .cuerpo ul{padding-left:18px; margin-top:6px;}
/* Ventana de la guia de tallas */
.modal-fondo{position:fixed; inset:0; background:rgba(0,18,25,.55); z-index:80; opacity:0;
pointer-events:none; transition:opacity .25s; display:flex; align-items:flex-end; justify-content:center;}
.modal-fondo.abierta{opacity:1; pointer-events:auto;}
.modal-caja{background:var(--paper); width:100%; max-width:560px; max-height:86vh; overflow-y:auto;
border-radius:20px 20px 0 0; padding:22px; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);}
.modal-fondo.abierta .modal-caja{transform:translateY(0);}
.modal-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.modal-cab h3{font-size:19px;}
.tabla-tallas{width:100%; border-collapse:collapse; font-size:13.5px;}
.tabla-tallas th, .tabla-tallas td{padding:11px 8px; text-align:left; border-bottom:1px solid var(--line);}
.tabla-tallas th{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#6b675f;}
.tabla-tallas tbody tr:last-child td{border-bottom:0;}
@media(min-width:760px){
.modal-fondo{align-items:center;}
.modal-caja{border-radius:20px; transform:translateY(16px) scale(.98);}
.modal-fondo.abierta .modal-caja{transform:none;}
}
/* ================= CARRITO ================= */
/* Progreso hacia el envio gratis. El importe que falta va en grande porque es
la cifra que decide si se anade un producto mas; el resto es solo contexto. */
.envio-progreso{background:var(--card); border:1.5px solid var(--coral); border-radius:var(--radius);
padding:13px 15px; margin-bottom:20px; transition:border-color .4s;}
.envio-progreso.completo{border-color:#2E7D46;}
/* Todo en un solo renglon. Los tamanos estan ajustados para que el caso mas
largo ("Te faltan 40,01 € para el envío gratis") quepa a 375px sin partirse. */
.envio-texto{display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap;
white-space:nowrap; line-height:1.25;}
.envio-titular{font-size:13px; font-weight:600;}
.envio-cantidad{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600;
color:var(--coral); letter-spacing:-0.02em;}
.envio-cola{font-size:13px; font-weight:600;}
.envio-listo{font-weight:700; font-size:14.5px; color:#2E7D46;}
.envio-barra{height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:11px;}
.envio-relleno{height:100%; border-radius:999px; background:var(--coral); width:0;
transition:width .45s cubic-bezier(.4,0,.2,1), background .4s;}
.envio-progreso.completo .envio-relleno{background:#2E7D46;}
@media (prefers-reduced-motion: reduce){ .envio-relleno{transition:none;} }
.cart-item .ci-variante{font-size:12.5px; color:#6b675f; margin-top:3px; font-family:'IBM Plex Mono',monospace;}
.cart-item .ci-linea{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14.5px; white-space:nowrap;}
.cart-item .ci-derecha{display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin-left:auto;}
.cart-qty button{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--card); font-size:17px; color:var(--ink); display:flex; align-items:center; justify-content:center;}
.cart-qty span{font-family:'IBM Plex Mono',monospace; font-weight:600; min-width:26px; text-align:center;}
.cart-remove{min-height:44px; display:inline-flex; align-items:center;}
.cupon{display:flex; gap:8px; margin:22px 0 6px;}
.cupon input{flex:1; min-height:48px; padding:12px 16px; border-radius:12px; border:1.5px solid var(--line);
background:var(--card); font-size:14px; font-family:inherit; color:var(--ink); text-transform:uppercase;}
.cupon input:focus{outline:2px solid var(--coral); outline-offset:1px;}
.cupon button{min-height:48px; padding:0 20px; border-radius:12px; border:1.5px solid var(--ink);
background:transparent; color:var(--ink); font-weight:700; font-size:13.5px;}
.cupon button:hover{background:var(--ink); color:var(--paper);}
.cupon-aviso{font-size:12.5px; font-family:'IBM Plex Mono',monospace; min-height:18px;}
.cupon-aviso.ok{color:#2E7D46;} .cupon-aviso.mal{color:#9B2C2C;}
.cart-summary .row.descuento{color:#2E7D46;}
.btn-pagar{width:100%; justify-content:center; min-height:54px; font-size:16px; margin-top:16px;}
.seguir-comprando{display:block; text-align:center; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--coral); min-height:44px; line-height:44px;}
.cart-empty .ico{font-size:44px; margin-bottom:14px;}
.cart-empty h2{font-size:21px; margin-bottom:8px;}
.cart-empty p{margin-bottom:22px;}
/* El atributo hidden lo pisa cualquier regla con display (por ejemplo .row, que
es flex). Sin esto, ocultar algo con hidden no funciona y se cuelan filas
como la del descuento cuando no hay cupon. */
[hidden]{display:none !important;}
/* ================= FINALIZAR COMPRA ================= */
/* Pasos. Orientan sobre cuanto queda, que reduce el abandono a medio camino. */
.pasos{display:flex; align-items:center; gap:8px; margin:4px 0 22px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;}
.paso{display:flex; align-items:center; gap:6px; color:#6b675f;}
.paso .bola{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto;}
.paso.hecho{color:var(--ink);}
.paso.hecho .bola{background:#2E7D46; border-color:#2E7D46; color:#fff;}
.paso.actual{color:var(--ink); font-weight:700;}
.paso.actual .bola{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.pasos .flecha{color:var(--line); flex:0 0 auto;}
/* Resumen plegable: en movil ocupa una linea hasta que se toca. */
.resumen-plegable{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:22px; overflow:hidden;}
.resumen-plegable summary{cursor:pointer; padding:15px 18px; min-height:52px; display:flex;
align-items:center; justify-content:space-between; gap:12px; list-style:none; font-weight:600; font-size:14px;}
.resumen-plegable summary::-webkit-details-marker{display:none;}
.resumen-plegable summary .importe{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px; white-space:nowrap;}
.resumen-plegable summary .flechita{color:var(--coral); transition:transform .25s;}
.resumen-plegable[open] summary .flechita{transform:rotate(180deg);}
.resumen-cuerpo{padding:0 18px 18px; border-top:1px solid var(--line);}
.resumen-linea{display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line);}
.resumen-linea img{width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--jungle-2); flex:0 0 auto;}
.resumen-linea .ficha{flex:1; min-width:0;}
.resumen-linea .nom{font-size:13.5px; font-weight:600;}
.resumen-linea .var{font-size:12px; color:#6b675f; font-family:'IBM Plex Mono',monospace;}
.resumen-linea .imp{font-family:'IBM Plex Mono',monospace; font-size:13.5px; font-weight:600; white-space:nowrap;}
.resumen-totales{padding-top:14px;}
.resumen-totales .row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:9px;}
.resumen-totales .row.total{font-weight:700; font-size:17px; border-top:1px solid var(--line); padding-top:12px; margin-top:4px;}
.checkout-seccion{margin-bottom:30px;}
.checkout-seccion h2{font-size:17px; margin-bottom:4px;}
.checkout-seccion .ayuda{font-size:12.5px; color:#6b675f; margin-bottom:16px;}
.campo-fila{display:flex; flex-direction:column; gap:0;}
@media(min-width:560px){ .campo-fila{flex-direction:row; gap:14px;} .campo-fila .form-field{flex:1;} }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;}
.form-field select{padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:14px;
font-family:inherit; background:var(--paper); width:100%; min-height:48px; color:var(--ink);}
.form-field input{min-height:48px;}
/* Opciones de envio y pago */
.opciones{display:flex; flex-direction:column; gap:10px;}
.opcion{display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:60px;
border:1.5px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; transition:border-color .15s, background .15s;}
.opcion:hover{border-color:var(--coral);}
.opcion:has(input:checked){border-color:var(--ink); background:var(--paper);}
.opcion input{width:20px; height:20px; accent-color:var(--coral); flex:0 0 auto;}
.opcion .cuerpo{flex:1; min-width:0;}
.opcion .tit{font-size:14px; font-weight:600;}
.opcion .sub{font-size:12.5px; color:#6b675f; margin-top:2px;}
.opcion .precio{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; white-space:nowrap;}
.opcion .precio.gratis{color:#2E7D46;}
.nota-pasarela{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:#4a473f;
background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:13px 15px; margin-top:14px;}
.nota-pasarela svg{width:16px; height:16px; color:var(--coral); flex:0 0 auto; margin-top:1px;}
/* Aceptacion de condiciones: obligatoria y sin marcar por defecto */
.legal-check{display:flex; gap:11px; align-items:flex-start; padding:15px; border-radius:12px;
background:var(--card); border:1.5px solid var(--line); margin:22px 0 16px; cursor:pointer;}
.legal-check input{width:22px; height:22px; accent-color:var(--coral); flex:0 0 auto; margin-top:1px;}
.legal-check span{font-size:13px; line-height:1.5;}
.legal-check a{color:var(--coral); text-decoration:underline; font-weight:600;}
.legal-check.falta{border-color:#9B2C2C; background:rgba(155,44,44,.04);}
.btn-pagar-final{width:100%; justify-content:center; min-height:56px; font-size:16.5px;}
.btn-pagar-final:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.aviso-pago{font-size:12px; color:#6b675f; text-align:center; margin-top:10px; line-height:1.5;}
/* En movil el resumen va ARRIBA: si queda debajo del boton de pagar, se rellena
todo el formulario sin ver que se esta comprando. En escritorio pasa a la
columna lateral y se queda fijo mientras se rellenan los datos. */
.checkout-wrap{display:flex; flex-direction:column;}
.checkout-lado{order:-1;}
@media(min-width:900px){
.checkout-wrap{flex-direction:row; gap:56px; align-items:flex-start;}
.checkout-form{flex:1; min-width:0;}
.checkout-lado{order:0; flex:0 0 340px; position:sticky; top:96px;}
.resumen-plegable summary{cursor:default;}
}
/* ================= PAGINAS LEGALES Y DE AYUDA ================= */
/* Aviso de que el texto esta sin revisar. Deliberadamente llamativo: tiene que
dar reparo publicar sin haberlo sustituido. */
.aviso-borrador{background:#FFF4E0; border:2px dashed #B4632B; border-radius:var(--radius);
padding:16px 18px; margin:6px 0 26px; font-size:13.5px; line-height:1.6; color:#5a3a17;}
.aviso-borrador b{color:#8a3d0b;}
/* Hueco por rellenar con datos reales.
POR QUE YA NO LLEVA white-space:nowrap
Lo llevaba, y para un hueco corto tipo [RELLENAR: medidas] tenia sentido:
que no se partiera en dos lineas. Pero en la historia del bolso se marco con
esta clase una frase entera: 501 px de texto dentro de un parrafo de 320. Y
nowrap prohibe partir la linea, asi que se salia 181 px por la derecha y
arrastraba con ella a la pagina entera. Sintoma en el movil: deslizas el
dedo y la pantalla se mueve de lado dejando una franja vacia a la derecha.
Que un dato pendiente de rellenar rompa la maquetacion de toda la web es un
precio absurdo por no partir una linea. Ahora parte donde haga falta, y con
box-decoration-break el recuadro amarillo se dibuja entero en cada trozo. */
.hueco{background:#FFE9A8; border-bottom:2px solid #B4632B; padding:1px 6px; border-radius:3px;
font-family:'IBM Plex Mono',monospace; font-size:.92em; font-weight:600; color:#5a3a17;
overflow-wrap:anywhere; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
/* Indice de apartados */
.legal-nav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px;}
.legal-nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
border:1.5px solid var(--line); border-radius:999px; background:var(--card);
font-size:13px; font-weight:600;}
.legal-nav a:hover{border-color:var(--coral); color:var(--coral);}
.prose h2{border-top:1px solid var(--line); padding-top:26px; margin-top:38px;}
.prose h2:first-of-type{border-top:0; padding-top:0; margin-top:0;}
.prose h3{font-family:'Inter',sans-serif; font-size:15.5px; font-weight:700; margin:22px 0 8px; color:var(--ink);}
.prose ul, .prose ol{padding-left:20px; margin-bottom:14px;}
.prose li{margin-bottom:7px;}
.prose table{width:100%; border-collapse:collapse; font-size:13.5px; margin:14px 0 18px;}
.prose th, .prose td{padding:11px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
.prose th{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#6b675f;}
.prose .actualizado{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#6b675f; margin-bottom:26px;}
/* Formulario modelo de desistimiento, para copiar */
.formulario-modelo{background:var(--card); border:1px solid var(--line); border-radius:12px;
padding:18px; margin:16px 0; font-size:13.5px; line-height:1.7;}
.formulario-modelo p{margin-bottom:10px;}
/* ================= BANNER DE COOKIES ================= */
/* Rechazar tiene que ser tan facil como aceptar: mismo tamano, misma jerarquia
visual y a un solo toque. Un "rechazar" escondido no es consentimiento valido. */
.cookies{position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--paper);
border-top:2px solid var(--ink); padding:18px 20px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -10px 30px -12px rgba(0,0,0,.25); transform:translateY(110%);
transition:transform .35s cubic-bezier(.4,0,.2,1);}
.cookies.visible{transform:translateY(0);}
.cookies-caja{max-width:1000px; margin:0 auto;}
.cookies h2{font-size:16px; margin-bottom:7px;}
.cookies p{font-size:13.5px; line-height:1.55; margin-bottom:14px; color:#4a473f;}
.cookies p a{color:var(--coral); text-decoration:underline; font-weight:600;}
.cookies-botones{display:flex; flex-direction:column; gap:9px;}
.cookies-botones button{min-height:48px; border-radius:999px; font-weight:700; font-size:14.5px; padding:0 22px;}
.ck-aceptar{background:var(--ink); color:var(--paper);}
.ck-rechazar{background:transparent; color:var(--ink); border:1.5px solid var(--ink) !important;}
.ck-ajustes{background:transparent; color:var(--coral); text-decoration:underline; min-height:44px !important; font-weight:600 !important; font-size:13px !important;}
@media(min-width:620px){
.cookies-caja{display:flex; align-items:center; gap:26px;}
.cookies-texto{flex:1;}
.cookies p{margin-bottom:0;}
.cookies-botones{flex-direction:row; align-items:center; flex:0 0 auto;}
}
/* --- El aviso de cookies en un telefono ---
Medido en una pantalla de 375x812: ocupaba 265 px, un TERCIO de la pantalla,
y mientras estaba puesto se tragaba entera la tira de libros y el boton de
"Verlos todos". Quien entraba por primera vez se encontraba con que el
tercio de abajo de la web no respondia.
No se toca ni una palabra del texto legal: solo se aprieta la caja. Los dos
botones pasan a compartir fila (siguen midiendo 48 px de alto, que es lo que
pide un dedo) y el texto respira un poco menos. Baja de 265 a unos 170 px. */
@media(max-width:619px){
.cookies{padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
.cookies h2{font-size:15px; margin-bottom:5px;}
.cookies p{font-size:13px; line-height:1.45; margin-bottom:11px;}
.cookies-botones{flex-direction:row; gap:10px;}
.cookies-botones button{flex:1 1 0; min-width:0; padding:0 10px; font-size:13.5px;}
}
/* Consentimiento de la newsletter. Va sobre el fondo mostaza, asi que el texto
se mantiene en tinta para conservar el contraste. */
.nl-consent{display:flex; gap:10px; align-items:flex-start; text-align:left;
padding:4px 6px; cursor:pointer; color:var(--ink);}
.nl-consent input{width:22px; height:22px; accent-color:var(--ink); flex:0 0 auto; margin-top:1px;}
.nl-consent span{font-size:12.5px; line-height:1.45;}
.nl-consent a{text-decoration:underline; font-weight:600;}
.nl-form button:disabled{opacity:.5; cursor:not-allowed;}
/* ================= AJUSTES PROPIOS DE WORDPRESS ================= */
/* WordPress pinta la paginacion con .page-numbers, no con .page-btn.
Se le da el mismo aspecto que al resto de la web. */
.pagination .page-numbers{min-width:44px; min-height:44px; padding:0 12px; border-radius:12px;
border:1.5px solid var(--line); background:var(--card); font-size:14.5px; font-weight:600;
font-family:'IBM Plex Mono',monospace; display:inline-flex; align-items:center;
justify-content:center; color:var(--ink);}
.pagination .page-numbers:hover{border-color:var(--coral); color:var(--coral);}
.pagination .page-numbers.current{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pagination .page-numbers.dots{border:0; background:transparent;}
/* La barra de administracion de WordPress desplaza la pagina 32px hacia abajo;
sin esto, la cabecera pegajosa se queda por debajo y tapa contenido. */
/* La barra de administracion desplaza la pagina, y cuanto depende del ancho:
- mas de 782px: fija, 32px de alto
- de 601 a 782: fija, 46px
- 600 o menos: NO es fija, se va con el scroll, asi que el desplazamiento
es CERO. Si aqui se deja 46px, la cabecera se queda flotando con un hueco
encima por el que se ve pasar el contenido: parece que parpadea. */
.admin-bar header{top:32px;}
@media screen and (max-width:782px){ .admin-bar header{top:0;} }
/* El editor de WordPress mete estas clases en imagenes y titulares */
.prose img{border-radius:12px; margin:14px 0;}
.prose .aligncenter{margin-left:auto; margin-right:auto;}
.prose figure{margin:18px 0;}
.prose figcaption{font-size:12.5px; color:#6b675f; margin-top:6px; text-align:center;}
/* ================= PIEL PARA WOOCOMMERCE ================= */
/* Woo pone su propio marcado. Aqui se le da el aspecto del diseno aprobado
sin tocar su logica de variantes y existencias, que es la que sabe que
combinaciones de talla y color tienen stock. */
/* Selectores de talla y color */
.woocommerce div.product form.cart .variations{margin:22px 0; border:0; width:100%;}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{display:block; width:100%; padding:0; text-align:left; border:0;}
.woocommerce div.product form.cart .variations th.label label{font-size:12.5px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; font-family:'IBM Plex Mono',monospace; margin-bottom:8px; display:block;}
.woocommerce div.product form.cart .variations td.value{margin-bottom:18px;}
.woocommerce div.product form.cart .variations select{width:100%; min-height:52px; padding:12px 16px;
border-radius:12px; border:1.5px solid var(--line); background:var(--card); font-size:15px;
font-family:inherit; color:var(--ink); cursor:pointer;}
.woocommerce div.product form.cart .variations select:focus{outline:2px solid var(--coral); outline-offset:1px;}
.woocommerce div.product form.cart .reset_variations{font-size:12.5px; color:var(--coral); font-weight:600;
display:inline-flex; align-items:center; min-height:44px;}
/* Cantidad y boton de compra */
.woocommerce div.product form.cart{display:flex; flex-direction:column; gap:14px;}
.woocommerce .quantity .qty{width:88px; min-height:52px; padding:10px; border-radius:12px;
border:1.5px solid var(--line); background:var(--card); font-family:'IBM Plex Mono',monospace;
font-weight:600; font-size:16px; text-align:center; color:var(--ink);}
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{background:var(--coral); color:var(--btn-text,#fff);
border-radius:999px; font-weight:600; font-size:15px; padding:14px 26px; min-height:52px;
transition:transform .15s, background .15s;}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--coral-dark); transform:translateY(-2px);}
.woocommerce div.product form.cart .single_add_to_cart_button{width:100%; justify-content:center; min-height:56px; font-size:16.5px;}
.woocommerce div.product form.cart .button:disabled{opacity:.45; cursor:not-allowed; transform:none;}
/* Precio y descripcion corta */
.woocommerce div.product p.price, .woocommerce div.product span.price{font-family:'IBM Plex Mono',monospace;
font-size:25px; font-weight:600; color:var(--ink); margin:10px 0;}
.woocommerce div.product p.price del{opacity:.5; font-size:19px; margin-right:8px;}
.woocommerce div.product p.price ins{text-decoration:none; color:var(--coral);}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:14.5px;
line-height:1.6; color:#4a473f; margin-bottom:14px;}
/* Valoraciones */
.woocommerce .star-rating span::before, .woocommerce p.stars a::before{color:var(--coral);}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:10px; font-size:12.5px;}
/* Galeria */
.woocommerce div.product div.images img{border-radius:12px;}
.woocommerce div.product div.images .flex-control-thumbs li{width:22%; margin:8px 8px 0 0;}
.woocommerce div.product div.images .flex-control-thumbs img{border-radius:9px; border:2px solid transparent;}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{border-color:var(--coral);}
/* Pestanas de descripcion, mas sobrias */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:34px 0 0; border-bottom:1px solid var(--line);}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent; border:0; border-radius:0; margin:0 18px 0 0; padding:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-weight:700; font-size:14.5px; padding:14px 0; color:#6b675f;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink); box-shadow:inset 0 -2px 0 var(--coral);}
.woocommerce div.product .woocommerce-tabs .panel{font-size:14.5px; line-height:1.65; color:#4a473f; padding-top:18px;}
/* Avisos de Woo: anadido al carrito, errores, informacion */
.woocommerce-message, .woocommerce-info, .woocommerce-error{border-radius:var(--radius);
border:1.5px solid var(--line); border-top:0; background:var(--card); font-size:14px;
padding:16px 18px 16px 52px; color:var(--ink);}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{top:17px; left:18px;}
.woocommerce-message{border-color:#2E7D46;}
.woocommerce-message::before{color:#2E7D46;}
.woocommerce-error{border-color:#9B2C2C;}
.woocommerce-error::before{color:#9B2C2C;}
.woocommerce-info{border-color:var(--coral);}
.woocommerce-info::before{color:var(--coral);}
/* Carrito y pago */
.woocommerce table.shop_table{border-radius:var(--radius); border-color:var(--line);}
.woocommerce table.shop_table th{font-family:'IBM Plex Mono',monospace; font-size:11.5px;
text-transform:uppercase; letter-spacing:.05em; color:#6b675f;}
.woocommerce table.shop_table td{font-size:14px; padding:14px 12px;}
.woocommerce-cart table.cart img{width:74px; border-radius:12px;}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading{font-family:'Bricolage Grotesque',sans-serif; font-size:19px; margin-bottom:14px;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container--default .select2-selection--single{
min-height:48px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
background:var(--paper); font-size:14px; font-family:inherit; color:var(--ink);}
.woocommerce form .form-row label{font-size:12.5px; font-weight:600; margin-bottom:6px;}
.woocommerce-checkout #payment{background:var(--card); border-radius:var(--radius); border:1px solid var(--line);}
.woocommerce-checkout #payment div.payment_box{background:var(--paper); border-radius:12px; font-size:13px;}
.woocommerce #payment #place_order{width:100%; min-height:56px; font-size:16.5px;}
/* ================= IMAGENES EN PAGINAS DE WOOCOMMERCE =================
WooCommerce trae esta regla:
.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }
Pesa mas que las nuestras (combina una clase y un elemento, frente a solo
una clase), asi que en tienda, ficha, carrito, pago y mi cuenta anulaba
todas las alturas del diseno. El sintoma visible fue el logo saliendo a su
tamano natural, pero se llevaba por delante tambien las fotos de producto,
el hero y el blog.
Aqui se reafirman esas alturas con mas peso, anadiendo el contenedor al
selector. No hace falta !important: basta con ser mas concreto.
====================================================================== */
.header-top .logo-mark{height:72px; width:auto;}
.header-bottom .logo-mini img{height:36px; width:auto;}
.foot-brand a img{height:34px; width:auto;}
.grid .card .card-media img{width:100%; height:100%; object-fit:cover;}
.hero-visual .frame img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;}
.blog-card .blog-media img{width:100%; height:100%; object-fit:cover;}
.social-grid .social-tile img{width:100%; height:100%; object-fit:cover;}
.books-grid .book-cover img{width:100%; height:100%; object-fit:cover;}
.pd-gallery .frame img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;}
.pd-thumbs .pd-thumb img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;}
.cart-items .cart-item img{width:74px; height:74px; object-fit:cover;}
.resumen-cuerpo .resumen-linea img{width:52px; height:52px; object-fit:cover;}
@media(min-width:760px){
.header-top .logo-mark{height:86px;}
}
/* ================= BLOG ================= */
.blog-lede{font-size:15px; color:#6b675f; margin:6px 0 4px; max-width:52ch; line-height:1.5;}
/* Solo para lectores de pantalla */
.sr-solo-lectores{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
/* Fecha, categoria y tiempo de lectura */
.meta-entrada{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#6b675f; margin-bottom:8px;}
.meta-cat{background:var(--coral); color:var(--btn-text,#fff); padding:4px 10px; border-radius:999px;
font-weight:700; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;}
/* Entrada destacada: la ultima, a lo ancho. Da jerarquia y evita que un blog
con pocas entradas parezca vacio. */
.post-destacado{display:flex; flex-direction:column; background:var(--card);
border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
margin-bottom:22px; transition:transform .2s, box-shadow .2s;}
.post-destacado:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.post-destacado .pd-media{aspect-ratio:16/10; overflow:hidden; background:var(--jungle-2);}
.post-destacado .pd-media img{width:100%; height:100%; object-fit:cover;}
.post-destacado .pd-texto{padding:22px;}
.post-destacado h2{font-size:clamp(21px,4.5vw,30px); margin-bottom:10px;}
.post-destacado p{font-size:14.5px; line-height:1.6; color:#6b675f; margin-bottom:12px;}
@media(min-width:760px){
.post-destacado{flex-direction:row; align-items:stretch;}
.post-destacado .pd-media{flex:0 0 50%; aspect-ratio:auto;}
.post-destacado .pd-texto{flex:1; padding:34px; display:flex; flex-direction:column; justify-content:center;}
}
/* Etiquetas al final de la entrada */
.etiquetas-entrada{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0;}
.etiquetas-entrada a{display:inline-flex; align-items:center; min-height:36px; padding:0 13px;
border-radius:999px; background:var(--card); border:1px solid var(--line);
font-size:12.5px; font-weight:600; color:#6b675f; font-family:'IBM Plex Mono',monospace;}
.etiquetas-entrada a:hover{border-color:var(--coral); color:var(--coral);}
/* Compartir */
.compartir-entrada{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px;}
.compartir-entrada span{color:#6b675f; font-weight:600;}
.compartir-entrada a{display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
border-radius:999px; border:1.5px solid var(--line); font-size:13px; font-weight:600;}
.compartir-entrada a:hover{border-color:var(--coral); color:var(--coral);}
/* Anterior y siguiente */
.nav-entradas{display:flex; flex-direction:column; gap:12px; margin:34px 0 10px;}
.nav-ent{display:flex; flex-direction:column; gap:5px; padding:16px 18px; min-height:44px;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
transition:border-color .15s, transform .15s;}
.nav-ent:hover{border-color:var(--coral); transform:translateY(-2px);}
.nav-ent .etq{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--coral); font-weight:700;}
.nav-ent .tit{font-weight:600; font-size:14.5px; line-height:1.35;}
.nav-ent.siguiente{text-align:right;}
@media(min-width:760px){
.nav-entradas{flex-direction:row;}
.nav-ent{flex:1;}
}
/* Pagina 404 */
.salidas-404{display:flex; flex-direction:column; gap:10px; align-items:center; margin-bottom:26px;}
.buscador-404{max-width:400px; margin:0 auto;}
@media(min-width:560px){ .salidas-404{flex-direction:row; justify-content:center;} }
/* El cuerpo del articulo hereda el ancho de lectura comodo */
.article-body h2{font-family:'Bricolage Grotesque',sans-serif; font-size:23px; margin:30px 0 10px;}
.article-body h3{font-size:18px; font-weight:700; margin:24px 0 8px;}
.article-body ul, .article-body ol{padding-left:20px; margin-bottom:16px;}
.article-body li{margin-bottom:8px; font-size:15px; line-height:1.7;}
.article-body img{border-radius:12px; margin:18px 0;}
.article-body blockquote{border-left:3px solid var(--coral); padding:4px 0 4px 18px; margin:22px 0;
font-size:16px; line-height:1.6; color:#4a473f; font-style:italic;}
.article-body a{color:var(--coral); text-decoration:underline;}
/* ================= BANDA DE PRODUCTOS EN EL BLOG ================= */
/* Va al final de cada articulo. Se separa del texto con un fondo distinto
para que se lea como "otra cosa" y no como parte de la lectura: quien
quiera seguir leyendo la salta de un vistazo, y quien haya terminado
tiene la tienda a un toque. */
.banner-tienda{background:var(--card); border-top:1px solid var(--line);
border-bottom:1px solid var(--line); padding:34px 0 38px; margin:40px 0 0;}
.banner-tienda .bt-cab{display:flex; flex-direction:column; gap:14px; margin-bottom:22px;}
.banner-tienda .eyebrow{margin-bottom:6px;}
.banner-tienda h2{font-size:clamp(21px,4.5vw,27px); margin:0;}
.banner-tienda .bt-vertodo{align-self:flex-start; background:var(--ink);}
/* En movil, dos columnas como en el resto de la web */
.banner-tienda .grid{grid-template-columns:1fr 1fr;}
@media(min-width:760px){
.banner-tienda .bt-cab{flex-direction:row; align-items:flex-end; justify-content:space-between;}
.banner-tienda .bt-vertodo{align-self:auto; flex:0 0 auto;}
.banner-tienda .grid{grid-template-columns:repeat(4,1fr);}
}
/* Separador dentro del articulo.
Sin esta regla el navegador pinta su
por defecto: gris 808080 y sin
margenes, que se queda pegado al texto de abajo y desentona con la paleta. */
.article-body hr,
.article-body .wp-block-separator{border:0; border-top:1px solid var(--line);
margin:32px 0 26px; height:0;}
/* Cara "todavia no hay productos" de la banda de tienda.
Sin la parrilla, la cabecera se queda sola: se le da un poco de aire y se
deja el texto explicativo con el ancho de lectura, no a todo lo largo. */
.banner-tienda--vacia{padding:30px 0 32px;}
.banner-tienda--vacia .bt-cab{margin-bottom:0;}
.banner-tienda .bt-aviso{font-size:14.5px; line-height:1.6; color:#6b675f;
margin:8px 0 0; max-width:52ch;}
/* ================= LIBROS ================= */
/* La barra de la portada y la pagina /libros/ comparten tarjeta. En movil la
fila se desplaza en horizontal: se ve media portada asomando por el borde
derecho, que es lo que le dice al dedo que hay mas a la derecha. */
.seccion-libros{padding:44px 0 48px;}
.libros-cab{display:flex; flex-direction:column; gap:14px; margin-bottom:20px;}
.libros-cab h2{font-size:clamp(21px,4.5vw,27px); margin:0;}
.libros-vertodo{align-self:flex-start; background:var(--ink);}
/* EL position:relative DE AQUI NO ES DECORATIVO: SIN EL, LA PAGINA SE MUEVE DE LADO.
Cada ficha de libro lleva dentro un , el
texto invisible que le dice al lector de pantalla adonde lleva el enlace.
Esa clase es position:absolute, y un elemento absoluto se coloca respecto a
su antepasado POSICIONADO mas cercano. Aqui no habia ninguno: ni la ficha ni
la tira lo estaban. Asi que su referencia acababa siendo la pagina entera.
Y ese es el detalle que lo rompia todo: overflow-x:auto solo recorta a los
descendientes cuyo bloque contenedor esta dentro. Los seis spans se le
escapaban y se plantaban en las coordenadas absolutas de sus fichas, incluida
la sexta, en x=733. El documento pasaba a medir 733 px de ancho sobre una
pantalla de 360, y en el movil se podia arrastrar la pagina de lado hasta
una franja vacia con el color de fondo. Seis pixeles invisibles.
Con la tira posicionada, esos spans pasan a medirse respecto a ella y ya si
los recorta. Va en la tira y no en la ficha a proposito: asi queda protegido
cualquier hijo que se anada aqui en el futuro, no solo los de ahora. */
.libros-fila{position:relative;
display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; padding-bottom:6px;
scrollbar-width:none;}
.libros-fila::-webkit-scrollbar{display:none;}
.libros-fila > *{flex:0 0 150px; scroll-snap-align:start;}
/* --- La tira de libros en un telefono ---
Medido en 375 px: la tira mide 335 y las fichas 150. Entraban dos enteras y
de la tercera asomaban SIETE pixeles. Sin barra de desplazamiento (se oculta
a proposito) y sin flechas, esos 7 px no le dicen a nadie que aquello se
arrastra: cuatro de los seis libros no existian para quien entra con el movil.
Estrechando la ficha a 126 px asoma casi media tercera portada. Una portada
cortada por la mitad se lee como "aqui hay mas, arrastra", que es justo lo
que hace falta. No se toca el escritorio, donde caben las seis. */
@media(max-width:759px){
.libros-fila > *{flex-basis:126px;}
.libros-fila{scroll-padding-left:0;}
}
.libros-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px;}
.libro-card{display:flex; flex-direction:column; background:var(--card);
border:1px solid var(--line); border-radius:14px; overflow:hidden;
text-decoration:none; color:inherit; transition:transform .15s ease;}
a.libro-card:hover{transform:translateY(-3px);}
.libro-portada{aspect-ratio:2/3; background:#e9e3d8; display:flex;
align-items:center; justify-content:center; overflow:hidden;}
.libro-portada img, .seccion-libros .libro-portada img, .libros-grid .libro-portada img{
width:100%; height:100%; object-fit:cover; display:block; border-radius:0; margin:0;}
.libro-sinportada{font-size:34px; opacity:.4;}
.libro-datos{padding:11px 12px 13px; display:flex; flex-direction:column; gap:3px;}
.libro-datos h3{font-size:14px; line-height:1.3; margin:0; font-weight:700;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.libro-autor{font-size:12.5px; color:#6b675f; margin:0;}
.libro-sumario{font-size:12.5px; line-height:1.5; color:#6b675f; margin:4px 0 0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.libro-ver{display:inline-flex; align-items:center; gap:5px; margin-top:8px;
font-size:12.5px; font-weight:700; color:var(--coral);}
.libros-vacio{color:#6b675f; font-size:15px; padding:8px 0 40px;}
.page-sub{color:#6b675f; font-size:15px; margin:-6px 0 22px;}
@media(min-width:760px){
.libros-cab{flex-direction:row; align-items:flex-end; justify-content:space-between;}
.libros-vertodo{align-self:auto; flex:0 0 auto;}
.libros-fila > *{flex-basis:170px;}
.libros-grid{grid-template-columns:repeat(4,1fr); gap:20px;}
.libro-datos h3{font-size:15px;}
}
/* Texto solo para lectores de pantalla.
Faltaba en el tema. WordPress la emite por su cuenta en la paginacion y en
el buscador, asi que sin esta regla salian palabras sueltas ("Página",
"Buscar:") escritas en medio de la pagina. */
.screen-reader-text{position:absolute !important; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
white-space:nowrap; border:0;}
.screen-reader-text:focus{position:static !important; width:auto; height:auto;
margin:0; clip:auto; white-space:normal;}
/* Los dos botones del banner GRRR.
En movil se centran bajo el texto y pueden partirse a dos lineas; en
escritorio van en fila a la izquierda, como el resto del bloque. El de
comprar va relleno y el de la historia en hueco, para que no compitan. */
.wild-botones{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.wild-botones .btn{flex:0 1 auto;}
@media(min-width:900px){
.wild-botones{justify-content:flex-start;}
}
/* Llamada a comprar al final de una historia de producto.
Se diferencia de la banda generica del blog: quien ha leido la historia
entera ya sabe lo que quiere, asi que aqui va un solo boton y sin ruido. */
.cta-producto{background:var(--card); border-top:1px solid var(--line);
border-bottom:1px solid var(--line); padding:34px 0 38px; margin:40px 0 0;
text-align:center;}
.cta-producto h2{font-size:clamp(21px,4.5vw,27px); margin:0 0 18px;}
.cta-producto .eyebrow{margin-bottom:6px;}
/* Vídeo en el banner GRRR, en sustitución de los GIF.
El vídeo va detrás de todo; la capa oscura, que antes formaba parte del
background-image, pasa aquí a un ::after para poder quedar POR ENCIMA del
vídeo. Sin eso el texto blanco no se leería. */
.wild-video{position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; z-index:0; pointer-events:none;}
.wild-banner.con-video::after{content:''; position:absolute; inset:0;
background:rgba(0,18,25,.6); z-index:1; pointer-events:none;}
.wild-banner .wild-inner{position:relative; z-index:2;}
/* El vídeo del marco se comporta igual que la foto que sustituye */
.wild-visual video{width:100%; border-radius:12px; display:block;}
/* Quien pide menos movimiento en su sistema ve la imagen fija del cartel.
No es un capricho: a algunas personas el movimiento en bucle les provoca
mareo o migraña. */
@media (prefers-reduced-motion: reduce){
.wild-video{display:none;}
.wild-banner.con-video::after{background:rgba(0,18,25,.6);}
.wild-visual video{display:none;}
}
/* ---- Remates de la ficha de producto ----
Escritos ya con un producto de verdad delante. Antes la plantilla no
envolvia el producto en div.product y no aplicaba ninguna regla. */
/* Las miniaturas no deben heredar el 3/4 de la foto grande */
.pd-gallery .flex-control-thumbs img{aspect-ratio:1/1; border-radius:9px;}
/* La galeria, contenida. Sin esto el carrusel apila las diapositivas */
.pd-gallery .woocommerce-product-gallery{width:100%; margin:0;}
.pd-gallery .woocommerce-product-gallery__wrapper{margin:0;}
/* SKU, categoria y etiquetas: salian en crudo pegados a las garantias */
.woocommerce div.product .product_meta{margin-top:18px; padding-top:16px;
border-top:1px solid var(--line); font-size:12.5px; color:#6b675f;
display:flex; flex-wrap:wrap; gap:4px 16px;}
.woocommerce div.product .product_meta > span{display:block;}
.woocommerce div.product .product_meta a{color:#6b675f; text-decoration:underline;}
/* La etiqueta "Color" iba pegada al desplegable */
.woocommerce div.product form.cart .variations th.label{padding-bottom:7px;}
/* Enlace de limpiar la seleccion de variante */
.woocommerce div.product form.cart .reset_variations{display:inline-block;
margin-top:8px; font-size:12.5px; color:var(--coral);}
/* ---- Galería de producto en rejilla, sin carrusel ----
Sustituye a FlexSlider. La primera foto ocupa el ancho completo y el resto
van de dos en dos. Todo con CSS: nada que medir al arrancar, nada que se
descoloque. Estas reglas van despues de las antiguas y las anulan. */
.pd-gallery .frame{padding:12px; overflow:hidden;}
.pd-gallery .woocommerce-product-gallery{width:100%; margin:0; opacity:1 !important;}
.pd-gallery .woocommerce-product-gallery__wrapper{display:grid;
grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; width:100%; float:none;}
.pd-gallery .woocommerce-product-gallery__image{width:100%; margin:0; float:none; list-style:none;}
.pd-gallery .woocommerce-product-gallery__image:first-child{grid-column:1 / -1;}
.pd-gallery .woocommerce-product-gallery__image a{display:block;}
.pd-gallery .woocommerce-product-gallery__image img{width:100%; height:auto;
aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; margin:0;}
.pd-gallery .woocommerce-product-gallery__image:first-child img{aspect-ratio:4/5;}
/* Restos del carrusel, por si algun dia se reactiva sin querer */
.pd-gallery .flex-viewport, .pd-gallery .flex-control-thumbs{display:none;}
/* ================= FICHA DE PRODUCTO · MAQUETACIÓN ================= */
/* Escrito con medidas reales: la galería ocupaba 400 px y la columna de texto
664. En una ficha manda la foto, así que se invierte la proporción. */
/* Fuera el marco blanco: que manden las fotos, no la caja que las rodea */
.pd-gallery .frame{background:transparent; border:0; padding:0; overflow:visible;}
/* --- MÓVIL: tira horizontal en vez de columna interminable ---
Con 8 fotos apiladas había que bajar 1.000 px para llegar al precio. Así se
ve la primera foto entera, se pasan las demás con el dedo, y el botón de
comprar queda a un palmo. Con scroll-snap de CSS: nada de JavaScript. */
@media(max-width:759px){
.pd-gallery .woocommerce-product-gallery__wrapper{display:flex; gap:10px;
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
padding-bottom:6px; scrollbar-width:none;}
.pd-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar{display:none;}
.pd-gallery .woocommerce-product-gallery__image{flex:0 0 80%; scroll-snap-align:start;}
.pd-gallery .woocommerce-product-gallery__image:first-child{flex-basis:88%;}
.pd-gallery .woocommerce-product-gallery__image img,
.pd-gallery .woocommerce-product-gallery__image:first-child img{aspect-ratio:4/5;}
}
/* --- ESCRITORIO: la foto manda y la compra se queda a la vista --- */
@media(min-width:900px){
.pd-wrap{gap:48px; align-items:flex-start;}
.pd-gallery{flex:1 1 auto; min-width:0;}
.pd-info{flex:0 0 420px; max-width:420px;
position:sticky; top:96px;}
}
/* --- La columna de compra, más apretada --- */
.woocommerce div.product .pd-info > p.price{font-size:30px; margin:4px 0 16px;}
.woocommerce-product-details__short-description{font-size:15px; line-height:1.65;
color:#4a473f; margin:0 0 20px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.woocommerce div.product form.cart{margin-bottom:26px;}
.woocommerce div.product form.cart .variations{margin:0 0 4px;}
.woocommerce div.product form.cart .variations td.value{margin-bottom:14px;}
.woocommerce div.product .single_variation_wrap{margin-top:4px;}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:14px;}
/* Cantidad y botón en la misma fila: antes iban apilados con un hueco enorme */
.woocommerce-variation-add-to-cart{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch;}
.woocommerce-variation-add-to-cart .quantity{flex:0 0 auto; margin:0;}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 190px; width:auto;}
/* ---- Ficha de producto: aire por fuera, compacto por dentro ----
La composición estaba estirada de lado a lado y las dos columnas muy
separadas entre sí. Se estrecha el contenedor y se acerca la galería al
bloque de compra, para que se lean como una sola pieza y no como dos
bloques sueltos en la página. */
.pd-producto > .wrap{padding-left:28px; padding-right:28px;}
.pd-wrap{gap:24px;}
@media(min-width:900px){
.pd-producto > .wrap{max-width:1060px; padding-left:40px; padding-right:40px;}
.pd-wrap{gap:30px;}
.pd-info{flex:0 0 400px; max-width:400px;}
}
/* Y que la descripción larga de abajo respire igual */
.pd-producto .woocommerce-tabs, .pd-producto .related, .pd-producto .upsells{
padding-left:0; padding-right:0;}
/* ---- Ganarle a WooCommerce en la galería ----
Woo trae estas dos reglas, y son mas especificas que las nuestras:
.woocommerce div.product div.images {width:48%; float:left}
... .woocommerce-product-gallery__image:nth-child(n+2) {width:25%}
Por eso la galeria salia a 264 px dentro de una columna de 550, y las fotos
2 a 8 a 32 px. Aqui hace falta !important: no es pereza, es que estamos
sustituyendo la maquetacion de un plugin a proposito. */
.woocommerce div.product .pd-gallery .woocommerce-product-gallery{
width:100% !important; float:none !important; margin:0 !important;}
.woocommerce div.product .pd-gallery .woocommerce-product-gallery__image{
width:auto !important; float:none !important; display:block !important; margin:0 !important;}
/* Tres columnas para las secundarias: con dos, la galeria se iba a 1.800 px
de alto y descompensaba la ficha entera. */
@media(min-width:900px){
.pd-gallery .woocommerce-product-gallery__wrapper{grid-template-columns:repeat(3,1fr);}
.pd-gallery .woocommerce-product-gallery__image:first-child{grid-column:1 / -1;}
}
/* Red de seguridad: que ningun texto pueda volver a salirse de su columna,
ni aunque venga lleno de espacios duros pegados desde otro sitio. */
.pd-info, .pd-info p, .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p{overflow-wrap:anywhere;}
/* ---- Portadas de libro: cuadradas y enteras ----
Estaban a 2/3, la proporcion de una novela. Los libros de Gatetens son
cuadrados (1000x1000, formato 21,6 cm) y el recorte les comia los laterales:
se perdian los titulos de las cubiertas.
Ademas 'contain' en vez de 'cover': si algun dia entra una portada que no sea
cuadrada, se vera entera sobre el fondo en lugar de recortada. Mas vale una
banda de color que un titulo cortado. */
.libro-portada{aspect-ratio:1/1;}
.libro-card .libro-portada img,
.seccion-libros .libro-portada img,
.libros-grid .libro-portada img{object-fit:contain; width:100%; height:100%;}
/* Sobre la regla .admin-bar header de mas arriba:
la barra de WordPress solo es FIJA por encima de 782 px. Por debajo se va con
el scroll, asi que la cabecera tiene que pegarse a 0. Antes se pegaba a 46 px
y dejaba una franja vacia permanente encima al hacer scroll, visible solo
para quien esta identificado y entre 601 y 782 px de ancho: es decir, movil
en horizontal o tableta. Un visitante normal nunca lo veia. */
/* ================= CAJÓN DEL MENÚ, VERSIÓN BLINDADA =================
Se recupera la hamburguesa en móvil (va a haber más apartados), pero
reescrita para quitar de en medio todo lo que podía fallar. */
/* 1 · POR ENCIMA DE TODO. El banner de cookies está en z-index 90 y el cajón
estaba en 61: al abrir el menú, el banner le tapaba la mitad inferior en un
móvil. Ahora el cajón manda sobre cualquier otra capa. */
.drawer-overlay{z-index:95;}
.drawer{z-index:96;}
/* 2 · SIN DEPENDER DE 'visibility'. Antes el cajón se ocultaba con una
transición de visibility retardada; si esa transición no llegaba a
completarse, el elemento quedaba en un estado intermedio. Ahora se aparta
con transform y se desactiva con pointer-events, que no tienen estados a
medias. */
.drawer{visibility:visible; pointer-events:none; transition:transform .28s cubic-bezier(.4,0,.2,1);}
.drawer.open{pointer-events:auto;}
/* 3 · Mientras el cajón está abierto, la página de detrás no se mueve. */
body.menu-abierto{overflow:hidden;}
/* ============ MENÚ A PANTALLA COMPLETA EN MÓVIL ============
POR QUÉ, que esto costó encontrarlo:
El cajón se anclaba con right:0, es decir al borde derecho del LIENZO de la
página. En móvil el lienzo y la ventana visible no siempre coinciden: en la
portada el lienzo medía 854 px y la pantalla 375, así que el cajón se abría
entre 534 y 854 — completamente fuera de lo que se ve. La capa oscura sí se
notaba, porque esa cubre todo el lienzo. Sintoma exacto: pulsas las tres
rayas, la pantalla se oscurece y no aparece ningun menu.
La solución no es perseguir por qué el lienzo mide lo que mide, sino que el
menú deje de depender de ello: a todo lo ancho y bajando desde arriba. Sin
borde derecho al que agarrarse, no hay forma de que se salga. */
@media(max-width:759px){
.drawer{
left:0; right:0; width:100%; max-width:none;
height:auto; max-height:100%;
transform:translateY(-100%);
padding:18px 22px 26px;
border-radius:0 0 20px 20px;
overflow-y:auto;
}
.drawer.open{transform:translateY(0);}
.drawer nav{margin-top:8px;}
.drawer nav a{font-size:20px; padding:14px 4px;}
.drawer-close{margin-left:auto;}
}
/* ---- Panel del buscador ----
El botón de la lupa era decorativo: no tenía manejador ni destino. Ahora
despliega este panel. Va fuera del porque la cabecera lleva
overflow:hidden para poder plegarse y aquí dentro quedaría recortado. */
.panel-buscar{max-height:0; overflow:hidden; background:var(--card);
border-bottom:1px solid transparent; transition:max-height .25s ease, border-color .25s;}
.panel-buscar.abierto{max-height:120px; border-bottom-color:var(--line);}
.panel-buscar .wrap{padding-top:14px; padding-bottom:14px;}
.panel-buscar form{display:flex; gap:8px;}
.panel-buscar input[type="search"], .panel-buscar input[name="s"]{flex:1; min-height:48px;
padding:12px 16px; border:1px solid var(--line); border-radius:12px; font-size:16px;
background:var(--paper); color:var(--ink);}
.panel-buscar button{min-height:48px; padding:0 20px; border-radius:12px;
background:var(--ink); color:var(--paper); font-weight:700; white-space:nowrap;}
/* ---- Tarjeta de producto: pulsable entera ----
Antes solo enlazaban la foto y el título. Al tocar la descripción, el precio
o el hueco de al lado no pasaba nada, y se interpretaba como que el enlace
estaba roto. Ahora toda la tarjeta lleva al producto; el botón de añadir al
carrito se queda por encima para que siga siendo pulsable aparte. */
.card{position:relative;}
.card .card-body > a[href]::after{content:""; position:absolute; inset:0; z-index:1;}
.card .card-foot, .card .add-btn, .card .card-colors{position:relative; z-index:2;}
/* ============ CABECERA MÓVIL: PEQUEÑA DESDE EL PRINCIPIO ============
POR QUÉ SE QUITA EL PLEGADO EN MÓVIL
La cabecera se plegaba con JavaScript: un escuchador de scroll, dos umbrales
y un cambio de altura de 90 px que reajusta la posición de la página. Esa
maquinaria ha dado problemas una y otra vez, y cada arreglo dependía de
cuánto midiera la cabecera en ese momento.
En un teléfono no hace falta nada de eso: basta con que la cabecera YA sea
pequeña. Una sola fila con el logo a la izquierda y los iconos a la derecha,
siempre igual, ocupando 60 px. No hay nada que plegar, así que no hay nada
que se pueda plegar mal.
El plegado sigue vivo en escritorio, donde el logo grande sí tiene sentido y
donde nunca ha fallado.
Menos JavaScript, altura constante, y la página no da saltos al hacer scroll. */
@media(max-width:759px){
/* La fila del logo grande desaparece: en móvil no aporta y es la que se plegaba */
.header-top{display:none !important;}
/* La fila de acciones pasa a ser LA cabecera, con el logo pequeño siempre visible */
.logo-mini{display:flex !important;}
.header-bottom{padding:8px 16px; gap:10px; min-height:60px;}
.logo-mini img{height:34px;}
/* Sin cambios de altura, la cabecera no necesita recortar nada */
header{overflow:visible;}
}