/* ==========================================================================
   BONITA BOUTIQUE — catálogo
   Editorial, coral y azul marino. Primero el celular.
   ========================================================================== */

:root{
  --coral:#F55068;
  --coral-hondo:#D2354D;
  --coral-luz:#FFEDEF;
  --navy:#1E2454;
  --navy-medio:#323B91;
  --navy-luz:#EEEFF8;
  --crema:#FBF7F2;
  --crema-hondo:#F2EAE0;
  --tinta:#1A1720;
  --gris:#7D7883;
  --linea:#E7DFD6;
  --blanco:#fff;
  --ws:#25D366;

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Jost', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r:16px;
  --r-s:10px;
  --header:66px;
  --ancho:1340px;
  --sombra:0 4px 30px rgba(30,36,84,.09);
  --sombra-alta:0 18px 50px rgba(30,36,84,.18);
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--tinta);background:var(--crema);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.1}
select{font:inherit}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 16px}
@media(min-width:900px){.envoltorio{padding:0 32px}}

.display{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.rotulo{font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}

/* ===================== ANIMACIONES ===================== */

@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes crecer{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes cortina{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes deslizar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes late{0%,100%{transform:scale(1)}42%{transform:scale(1.3)}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Lo que entra al hacer scroll.
   IMPORTANTE: solo se esconde si el navegador tiene JavaScript encendido
   (la clase "js" la pone un guion diminuto en la cabecera). Si no lo tiene,
   se ve TODO desde el principio: nunca una página en blanco. */
.js .revela{opacity:0}
.revela.visible{animation:subir .8s var(--curva) both}
.revela.visible.corta{animation-name:cortina;animation-duration:1s}
.revela.visible.crece{animation-name:crecer}
[data-retraso="1"]{animation-delay:.08s}
[data-retraso="2"]{animation-delay:.16s}
[data-retraso="3"]{animation-delay:.24s}
[data-retraso="4"]{animation-delay:.32s}
[data-retraso="5"]{animation-delay:.40s}
[data-retraso="6"]{animation-delay:.48s}
[data-retraso="7"]{animation-delay:.56s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .revela{opacity:1}
}

/* ===================== CINTA SUPERIOR ===================== */
/* Cambia de frase cada 5 segundos con un fundido. NO corre de lado:
   Jael lo pidio asi, dice que asi es mas elegante (y tiene razon). */

.cinta{
  background:var(--navy);color:#fff;position:relative;
  height:34px;overflow:hidden;
}
.cinta-frases{position:relative;height:100%}
.cinta-frases span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  padding:0 16px;text-align:center;
  opacity:0;transform:translateY(6px);
  /* La que sale se va rapido; la que entra espera a que la otra se haya ido.
     Si se cruzan a la vez, las dos frases se leen encimadas y queda sucio. */
  transition:opacity .3s var(--curva), transform .3s var(--curva);
  pointer-events:none;
}
.cinta-frases span.puesta{
  opacity:1;transform:none;
  transition:opacity .45s var(--curva) .3s, transform .45s var(--curva) .3s;
}
/* Sin JavaScript se ve la primera y ya: nunca una cinta vacia. */
html:not(.js) .cinta-frases span:first-child{opacity:1;transform:none}
/* ===================== CABECERA ===================== */

.cabecera{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,242,.88);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.cabecera.pegada{border-bottom-color:var(--linea);background:rgba(251,247,242,.97)}
.cabecera-fila{
  height:var(--header);display:flex;align-items:center;gap:10px;
  max-width:var(--ancho);margin:0 auto;padding:0 12px;
}
@media(min-width:900px){.cabecera-fila{padding:0 32px;gap:28px}}

.logo img{height:44px;width:auto;transition:transform .3s var(--curva)}
.logo:hover img{transform:scale(1.05)}
@media(min-width:900px){.logo img{height:54px}}

.menu{display:none}
@media(min-width:1000px){
  /* ⚠️ Hacen falta LAS DOS:
     · align-self:stretch  → el menú llega de arriba abajo de la cabecera.
       La cabecera es flex con align-items:center, así que sin esto el menú
       mide solo lo que mide su texto (33px de 66, medido).
     · align-items:center  → y dentro, los enlaces siguen centrados.
     Si el menú no se estira, "La tienda" tampoco puede, y vuelve la franja
     muerta entre el botón y el panel. */
  .menu{display:flex;gap:28px;margin-left:10px;flex:1;align-self:stretch;align-items:center}
  .menu a{
    font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    padding:8px 0;position:relative;color:var(--tinta);transition:color .2s;
  }
  .menu a::after{
    content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--coral);
    transform:scaleX(0);transform-origin:left;transition:transform .32s var(--curva);
  }
  .menu a:hover{color:var(--coral)}
  .menu a:hover::after,.menu a.activo::after{transform:scaleX(1)}
  .menu a.activo{color:var(--coral)}
}
.acciones{margin-left:auto;display:flex;align-items:center;gap:4px}
.boton-icono{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  position:relative;color:var(--navy);transition:background .2s,color .2s;
}
.boton-icono:hover{background:var(--crema-hondo);color:var(--coral)}
.boton-icono svg{width:21px;height:21px}
.contador{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;
  background:var(--coral);color:#fff;border-radius:9px;font-size:10px;font-weight:600;
  display:none;place-items:center;line-height:1;border:2px solid var(--crema);
}
.contador.visible{display:grid;animation:crecer .3s var(--curva)}
.hamburguesa{display:grid}
@media(min-width:1000px){.hamburguesa{display:none}}

.menu-movil{
  position:fixed;inset:0;z-index:100;background:var(--crema);
  transform:translateX(-100%);transition:transform .38s var(--curva);
  display:flex;flex-direction:column;
}
.menu-movil.abierto{transform:none}
.menu-movil-cabecera{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--linea)}
.menu-movil-cabecera img{height:42px}
.menu-movil nav{padding:8px 0;overflow-y:auto;flex:1}
.menu-movil nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 20px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;border-bottom:1px solid var(--crema-hondo);
}
.menu-movil nav a em{font-style:normal;color:var(--gris);font-size:12px;letter-spacing:0}
.menu-movil-pie{padding:18px 20px;border-top:1px solid var(--linea)}

/* ===================== BOTONES ===================== */

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:100px;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;border:1.5px solid transparent;
  transition:all .25s var(--curva);text-align:center;position:relative;overflow:hidden;
}
.boton svg{width:18px;height:18px;flex:none}
.boton-coral{background:var(--coral);color:#fff}
.boton-coral:hover{background:var(--coral-hondo);transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,80,104,.34)}
.boton-navy{background:var(--navy);color:#fff}
.boton-navy:hover{background:var(--navy-medio);transform:translateY(-2px)}
.boton-linea{border-color:currentColor;color:var(--navy)}
.boton-linea:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.boton-claro{border-color:rgba(255,255,255,.55);color:#fff}
.boton-claro:hover{background:#fff;color:var(--navy);border-color:#fff}
.boton-ws{background:var(--ws);color:#fff}
.boton-ws:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.36)}
.boton-ancho{width:100%}
.boton-grande{padding:18px 34px;font-size:13px}

/* ===================== PORTADA: COLLAGE ===================== */

/* con 4 fotos basta */
/* Nada de zoom sobre las fotos: recortaba a la modelo o a la prenda. */

/* velo para que el texto se lea siempre */
@media(min-width:900px){
  /* En computadora son 4 columnas de 25vw -> hace falta 25 x 1.667 = 42vw.
     Se pide 44vw para que sobre un poco. */
}



@media(max-width:759px){
  /* 2 x 2 en vez de 2 columnas altisimas: asi cada hueco vuelve a ser 3:5 y
     no hay que recortar nada. Ademas se ven las 4 fotos, no solo 2. */
}

/* ===================== SECCIONES ===================== */

.seccion{padding:52px 0}
@media(min-width:900px){.seccion{padding:72px 0}}
.seccion.apretada{padding-top:0}
.seccion-crema{background:var(--crema-hondo)}

.seccion-cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:22px;position:relative;
}
.seccion-cabecera .numero{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(52px,10vw,110px);color:var(--coral);opacity:.13;
  position:absolute;left:-8px;top:-42px;z-index:0;pointer-events:none;line-height:1;
}
.seccion-cabecera .texto{position:relative;z-index:1}
.seccion-cabecera h2{
  font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);
  font-size:clamp(28px,5.4vw,46px);letter-spacing:-.02em;
}
.seccion-cabecera p{margin:7px 0 0;font-size:13.5px;color:var(--gris)}
.enlace-ver{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;position:relative;z-index:1;
}
.enlace-ver svg{width:15px;height:15px;transition:transform .3s var(--curva)}
.enlace-ver:hover svg{transform:translateX(5px)}

/* ===================== TARJETAS ===================== */

.rejilla{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.rejilla{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1080px){.rejilla{grid-template-columns:repeat(4,1fr);gap:18px}}

.tarjeta{position:relative}
.tarjeta-foto{
  position:relative;aspect-ratio:3/5;overflow:hidden;background:var(--crema-hondo);
  border-radius:var(--r-s);display:block;
}
.tarjeta-foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--curva),opacity .5s var(--curva);
}
/* Sin zoom al pasar el mouse: cortaba la foto. */
.tarjeta-foto img.segunda{position:absolute;inset:0;opacity:0}
.tarjeta:hover .tarjeta-foto img.segunda{opacity:1}

.tarjeta-ver{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  background:rgba(251,247,242,.95);backdrop-filter:blur(6px);color:var(--navy);
  text-align:center;padding:11px;border-radius:100px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transform:translateY(calc(100% + 14px));opacity:0;
  transition:transform .42s var(--curva),opacity .3s;
}
.tarjeta:hover .tarjeta-ver{transform:none;opacity:1}
@media(hover:none){.tarjeta-ver{display:none}}

.etiqueta{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--navy);color:#fff;font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:6px 11px;border-radius:100px;
}
.etiqueta.oferta{background:var(--coral)}
.etiqueta.vendida{background:var(--coral)}

.corazon{
  position:absolute;top:8px;right:8px;z-index:3;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,247,242,.9);backdrop-filter:blur(6px);color:var(--gris);
  transition:all .25s var(--curva);
}
.corazon svg{width:17px;height:17px}
.corazon:hover{background:#fff;color:var(--coral);transform:scale(1.12)}
.corazon.activo{color:var(--coral)}
.corazon.activo svg{fill:var(--coral)}
.corazon.late{animation:late .42s var(--curva)}

/* ================= SOLO EN EL TELEFONO ==================
   Jael, 02-sep-2026: "estas mejoras que te digo son para el telefono... en la
   compu dejalo como esta". Por eso todo va dentro de este @media y NADA se
   toca por encima de 640px.

   Lo que se midio antes de tocar, a 390px:
     · la etiqueta "Nuevo" ocupaba 63px de ancho en una tarjeta de 175. Mas de
       un tercio, y arriba a la izquierda le caia encima a la modelo.
     · el corazon era un circulo de 36px, uno de cada cinco de ancho.

   La etiqueta va DENTRO de .tarjeta-foto, que es position:relative. Por eso
   "abajo" es el bajo de la FOTO y no de la tarjeta entera: si se colocara
   respecto a .tarjeta caeria encima del precio y las bolitas de color. */
@media(max-width:639px){

  .etiqueta{font-size:8px;letter-spacing:.14em;padding:4px 9px;top:8px;left:8px}

  /* Solo la de "Nuevo" baja a la derecha. Las de rebaja (-50%) se quedan
     arriba a la izquierda a proposito: son las que la clienta va cazando de
     un vistazo mientras baja, y moverlas seria esconderlas. */
  .etiqueta:not(.oferta):not(.vendida){top:auto;bottom:8px;left:auto;right:8px}

  .corazon{width:30px;height:30px;top:8px;right:8px}
  .corazon svg{width:15px;height:15px}
}

/* El corazon es un <button>, y el navegador le mete de suyo padding:1px 6px.
   Ahora mismo sale centrado igual (el grid reparte lo que sobra), pero es una
   casualidad que se apoya en la cuenta, no en el CSS. Se pone a cero para que
   el centrado sea de verdad y no dependa de la medida que tenga el circulo. */
.corazon{padding:0;border:0;line-height:0}

.tarjeta-info{display:block;padding:11px 3px 2px}
.tarjeta-tipo{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.tarjeta-nombre{
  font-size:13.5px;font-weight:400;line-height:1.35;color:var(--tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tarjeta-precio{margin-top:5px;display:flex;align-items:baseline;gap:8px}
.tarjeta-precio .ahora{font-size:14.5px;font-weight:600;color:var(--navy);font-family:var(--serif);font-style:italic}
.tarjeta-precio .antes{font-size:12px;color:var(--gris);text-decoration:line-through}
.tarjeta-colores{display:flex;gap:5px;margin-top:8px;align-items:center;flex-wrap:wrap}
.punto{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);background-size:cover;background-position:center;flex:none}
/* Sin text-transform: los nombres ya vienen bien escritos y "capitalize"
   los rompia ("Blanco y rojo" salia como "Blanco Y Rojo"). */
.colores-nombre{font-size:11.5px;color:var(--gris);margin-left:3px;line-height:1.3}

/* ===================== MOSAICO DE CATEGORÍAS ===================== */

.categorias{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.categorias{grid-template-columns:repeat(var(--cuantas,5),1fr);gap:12px}}
.tile{position:relative;aspect-ratio:3/5;overflow:hidden;border-radius:var(--r-s);background:var(--crema-hondo);display:block}
@media(min-width:820px){.tile{aspect-ratio:3/5}}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
/* Sin zoom: la foto se queda quieta y entera. */
.tile::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,24,58,.82) 0%,rgba(20,24,58,.20) 46%,rgba(20,24,58,.04) 74%);
  transition:background .4s;
}
.tile:hover::after{background:linear-gradient(to top,rgba(210,53,77,.86) 0%,rgba(20,24,58,.28) 52%,rgba(20,24,58,.06) 78%)}
.tile-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 12px;text-align:center;color:#fff}
.tile-num{
  font-family:var(--serif);font-style:italic;font-weight:700;font-size:13px;
  color:rgba(255,255,255,.6);display:block;margin-bottom:3px;
}
.tile-texto b{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.tile-texto span{display:block;font-size:10.5px;letter-spacing:.12em;opacity:.78;margin-top:3px}

/* ===================== FRANJA DE PROMESAS ===================== */

.promesas{background:var(--navy);color:#fff}
.promesas-fila{display:grid;grid-template-columns:1fr;padding:4px 0}
@media(min-width:820px){.promesas-fila{grid-template-columns:repeat(3,1fr)}}
.promesa{display:flex;align-items:center;gap:15px;padding:19px 10px;position:relative}
@media(min-width:820px){.promesa+.promesa::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.16)}}
.promesa svg{width:27px;height:27px;color:var(--coral);flex:none}
.promesa b{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.promesa span{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.45}

/* ===================== BANDA EDITORIAL ===================== */

.banda{position:relative;overflow:hidden;background:var(--coral-luz)}
.banda-rejilla{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.banda-rejilla{grid-template-columns:1.05fr .95fr;align-items:center}}
.banda-texto{padding:48px 20px}
@media(min-width:900px){.banda-texto{padding:76px 8%}}
.banda-texto h2{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);font-size:clamp(30px,5.6vw,52px);line-height:1.04;letter-spacing:-.02em}
.banda-texto h2 em{font-style:italic;color:var(--coral)}
.banda-texto p{font-size:15.5px;line-height:1.72;color:#5B5560;max-width:42ch;margin:18px 0 0}
.banda-texto .boton{margin-top:26px}
.banda-fotos{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 20px 48px}
@media(min-width:900px){.banda-fotos{padding:0 6% 0 0;gap:10px}}
.banda-fotos a{display:block;overflow:hidden;border-radius:var(--r-s);background:var(--crema-hondo)}
.banda-fotos a:nth-child(1){aspect-ratio:3/5}
.banda-fotos a:nth-child(2){aspect-ratio:3/5;margin-top:32px}
.banda-fotos img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
/* Sin zoom. */

/* ===================== VISÍTANOS ===================== */

.visita{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.visita{grid-template-columns:1fr 1fr}}
.visita-texto{padding:44px 20px;background:var(--navy);color:#fff;position:relative;overflow:hidden}
@media(min-width:900px){.visita-texto{padding:66px 7%}}
.visita-texto h2{font-family:var(--serif);font-style:italic;font-weight:700;color:#fff;font-size:clamp(28px,4.8vw,44px);margin-top:6px}
.visita-texto .rotulo{color:rgba(255,255,255,.55)}
.visita-dato{display:flex;gap:14px;margin-top:22px;align-items:flex-start}
.visita-dato svg{width:19px;height:19px;color:var(--coral);flex:none;margin-top:3px}
.visita-dato b{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:4px}
.visita-dato span{font-size:14.5px;line-height:1.6}
.visita-mapa{min-height:300px;background:var(--crema-hondo);position:relative}
.visita-mapa iframe{width:100%;height:100%;min-height:300px;border:0;display:block;filter:grayscale(.28);position:relative;z-index:2}
/* respaldo por si el mapa de Google no carga: nunca un hueco vacío */
.mapa-respaldo{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  background:var(--crema-hondo);color:var(--navy);
}
.mapa-respaldo svg{width:30px;height:30px;color:var(--coral)}
.mapa-respaldo b{font-size:16px;font-weight:600}
.mapa-respaldo span{font-size:13.5px;color:var(--gris)}
.mapa-respaldo .boton{margin-top:10px}

/* ===================== PIE ===================== */

.pie{background:var(--crema-hondo);padding:52px 0 24px;border-top:1px solid var(--linea)}
.pie-rejilla{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.pie-rejilla{grid-template-columns:1.5fr 1fr 1fr}}
.pie img.logo-pie{height:58px;margin-bottom:14px}
.pie p{margin:0 0 16px;font-size:13.5px;color:var(--gris);line-height:1.65;max-width:34ch}
.pie h4{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--navy);margin-bottom:14px;font-weight:600}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:9px;font-size:13.5px;color:var(--gris)}
.pie li a{transition:color .2s}
.pie li a:hover{color:var(--coral)}
.pie-redes{display:flex;gap:9px}
.pie-redes a{width:40px;height:40px;border-radius:50%;background:var(--crema);display:grid;place-items:center;color:var(--navy);transition:all .25s var(--curva)}
.pie-redes a:hover{background:var(--coral);color:#fff;transform:translateY(-3px)}
.pie-redes svg{width:19px;height:19px}
.pie-abajo{margin-top:34px;padding-top:18px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:11.5px;color:var(--gris)}

/* ===================== CATEGORÍA Y FILTROS ===================== */

.migas{padding:16px 0 2px;font-size:11.5px;color:var(--gris);letter-spacing:.04em}
.migas a{transition:color .2s}
.migas a:hover{color:var(--coral)}
.migas i{font-style:normal;margin:0 7px;opacity:.45}

.cabecera-cat{padding:14px 0 22px}
.cabecera-cat h1{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);font-size:clamp(34px,7vw,64px);letter-spacing:-.025em}
.cabecera-cat p{margin:8px 0 0;font-size:14px;color:var(--gris);max-width:52ch}

/* Jael (02-sep-2026): la barra de filtros NO se queda pegada al bajar.
   Lo único que sigue a la clienta es la cabecera con Vestidos, Blusas,
   Pantalones y demás. Los colores persiguiéndola por la pantalla molestan. */
.barra-filtros{
  background:var(--crema);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  margin-bottom:22px;
}
.filtros-fila{display:flex;align-items:center;gap:10px;padding:11px 0;flex-wrap:wrap}
.filtros-grupo{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.filtros-grupo>.rotulo{margin-right:2px}

.chip{
  padding:8px 16px;border-radius:100px;border:1px solid var(--linea);background:var(--blanco);
  font-size:12.5px;font-weight:400;transition:all .22s var(--curva);white-space:nowrap;
}
.chip:hover{border-color:var(--navy)}
.chip.activo{background:var(--navy);border-color:var(--navy);color:#fff}

.chip-color{
  display:inline-flex;align-items:center;gap:8px;padding:6px 15px 6px 7px;
  border-radius:100px;border:1px solid var(--linea);background:var(--blanco);
  font-size:12.5px;transition:all .22s var(--curva);white-space:nowrap;
}
.chip-color i{width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);flex:none}
.chip-color:hover{border-color:var(--navy)}
.chip-color.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-color.activo i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

.orden{
  margin-left:auto;display:flex;align-items:center;gap:8px;
}
.orden select{
  appearance:none;-webkit-appearance:none;
  padding:9px 34px 9px 15px;border-radius:100px;border:1px solid var(--linea);
  background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D7883' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;
  font-size:12.5px;color:var(--tinta);cursor:pointer;transition:border-color .2s;
}
.orden select:hover{border-color:var(--navy)}

.filtros-resumen{display:flex;align-items:center;gap:12px;padding:0 0 14px;font-size:12.5px;color:var(--gris);flex-wrap:wrap}
.limpiar{color:var(--coral);border-bottom:1px solid currentColor;font-size:12px}
.nota-tallas{margin:0;font-size:12.5px;color:var(--gris)}
.nota-tallas b{color:var(--navy);font-weight:600}

.sin-resultados{padding:64px 20px;text-align:center;display:none}
.sin-resultados.visible{display:block;animation:subir .5s var(--curva) both}
.sin-resultados h3{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--navy);margin-bottom:8px}
.sin-resultados p{color:var(--gris);font-size:14px;margin:0 0 20px}

.tarjeta.oculta{display:none}

/* ===================== FICHA ===================== */

.ficha{display:grid;grid-template-columns:1fr;gap:22px;padding-bottom:6px}
@media(min-width:900px){.ficha{grid-template-columns:.92fr 1.08fr;gap:52px;padding:6px 0 24px}}

/* ⚠️ min-width:0 ES OBLIGATORIO.
   En una rejilla, una columna NO encoge por debajo de lo que mide su
   contenido. La fila de miniaturas es un flex de 68px por foto: con 15 fotos
   pedía 1125px, ensanchaba la columna y la ficha entera se salía de la
   pantalla. La foto grande llegó a medir 1863px de alto.
   Lo cazó Jael el 02-sep-2026 en la Camisa Satinada Oversize, la única con 15
   fotos. Con min-width:0 la columna encoge y las miniaturas se desplazan, que
   es justo para lo que tienen overflow-x:auto. */
.galeria{position:relative;min-width:0}
.galeria-principal{position:relative;aspect-ratio:3/5;overflow:hidden;border-radius:var(--r);background:var(--crema-hondo);cursor:zoom-in}
.galeria-principal img{width:100%;height:100%;object-fit:cover;animation:aparecer .5s both}
.galeria-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;background:rgba(251,247,242,.9);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--navy);box-shadow:var(--sombra);transition:all .25s var(--curva);
}
.galeria-flecha:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.galeria-flecha svg{width:19px;height:19px}
.galeria-flecha.izq{left:12px}
.galeria-flecha.der{right:12px}
.galeria-contador{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(20,24,58,.72);backdrop-filter:blur(6px);color:#fff;
  font-size:10.5px;letter-spacing:.14em;padding:5px 13px;border-radius:100px;
}
.miniaturas{display:flex;gap:7px;margin-top:7px;overflow-x:auto;padding-bottom:2px}
.miniaturas button{
  flex:none;width:58px;aspect-ratio:3/5;border-radius:8px;overflow:hidden;
  border:2px solid transparent;background:var(--crema-hondo);transition:border-color .25s;opacity:.68;
}
@media(min-width:900px){.miniaturas button{width:68px}}
.miniaturas button img{width:100%;height:100%;object-fit:cover}
.miniaturas button.activa{border-color:var(--coral);opacity:1}
.miniaturas button:hover{opacity:1}

.ficha-datos{display:flex;flex-direction:column;min-width:0}
@media(min-width:900px){.ficha-datos{position:sticky;top:calc(var(--header) + 20px);align-self:start}}
.ficha-datos h1{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);font-size:clamp(28px,5.6vw,44px);margin:8px 0 0;letter-spacing:-.02em}
.ficha-precio{display:flex;align-items:baseline;gap:12px;margin:14px 0 0;flex-wrap:wrap}
.ficha-precio .ahora{font-size:28px;font-weight:600;color:var(--tinta);font-family:var(--serif);font-style:italic}
.ficha-precio .antes{font-size:16px;color:var(--gris);text-decoration:line-through}
.ficha-precio .ahorro{background:var(--coral);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.ficha-nota{font-size:12.5px;color:var(--gris);margin:7px 0 0}

.opcion{margin-top:26px}
.opcion-titulo{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.opcion-titulo .rotulo{color:var(--navy)}
.opcion-titulo .elegido{font-size:13px;color:var(--gris)}

.colores{display:flex;flex-wrap:wrap;gap:10px}
.color{
  width:42px;height:42px;border-radius:50%;position:relative;
  border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.13);
  background-size:cover;background-position:center;transition:transform .25s var(--curva);
}
.color:hover{transform:scale(1.09)}
.color.elegido{border-color:var(--coral)}
.color.elegido::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--coral);opacity:.45}

.tallas{display:flex;flex-wrap:wrap;gap:8px}
.talla{
  min-width:54px;padding:12px 17px;border-radius:var(--r-s);border:1px solid var(--linea);
  background:var(--blanco);font-size:13.5px;text-align:center;transition:all .22s var(--curva);
}
.talla:hover{border-color:var(--navy)}
.talla.elegida{border-color:var(--navy);background:var(--navy);color:#fff}

.ficha-acciones{display:flex;gap:10px;margin-top:28px}
.ficha-acciones .boton{flex:1}
.boton-corazon{
  width:58px;flex:none;border:1px solid var(--linea);border-radius:100px;background:var(--blanco);
  display:grid;place-items:center;color:var(--gris);transition:all .25s var(--curva);
}
.boton-corazon svg{width:22px;height:22px}
.boton-corazon:hover{border-color:var(--coral);color:var(--coral)}
.boton-corazon.activo{border-color:var(--coral);color:var(--coral);background:var(--coral-luz)}
.boton-corazon.activo svg{fill:var(--coral)}

.ficha-envio{display:flex;gap:13px;align-items:flex-start;margin-top:18px;padding:16px 18px;background:var(--coral-luz);border-radius:var(--r)}
.ficha-envio svg{width:20px;height:20px;color:var(--coral);flex:none;margin-top:2px}
.ficha-envio b{display:block;font-size:13px;color:var(--navy);font-weight:600}
.ficha-envio span{font-size:12.5px;color:var(--gris);line-height:1.5}

.pasos{margin-top:16px;padding:20px 22px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
.pasos .rotulo{color:var(--navy);display:block;margin-bottom:14px}
.pasos ol{margin:0;padding-left:19px}
.pasos li{font-size:13.5px;color:#5B5560;line-height:1.6;margin-bottom:10px}
.pasos li b{color:var(--tinta);font-weight:600}
.pasos p{margin:14px 0 0;font-size:12.5px;color:var(--gris);line-height:1.55}
.pasos p a{color:var(--coral);border-bottom:1px solid currentColor}

.desplegables{margin-top:24px;border-top:1px solid var(--linea)}
.desplegable{border-bottom:1px solid var(--linea)}
.desplegable summary{
  padding:17px 2px;cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
}
.desplegable summary::-webkit-details-marker{display:none}
.desplegable summary svg{width:15px;height:15px;color:var(--gris);transition:transform .3s var(--curva);flex:none}
.desplegable[open] summary svg{transform:rotate(180deg)}
.desplegable-cuerpo{padding:0 2px 19px;font-size:14px;color:#5B5560;line-height:1.72}
.desplegable-cuerpo p{margin:0 0 10px}
.desplegable-cuerpo p:last-child{margin:0}
.desplegable-cuerpo ul{margin:0;padding-left:18px}
.desplegable-cuerpo li{margin-bottom:6px}

/* ===================== VISOR ===================== */

.visor{position:fixed;inset:0;z-index:200;background:rgba(16,14,22,.95);display:none;align-items:center;justify-content:center;padding:16px}
.visor.abierto{display:flex;animation:aparecer .25s both}
.visor img{max-width:100%;max-height:92vh;width:auto;object-fit:contain;border-radius:6px}
.visor-cerrar{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .2s}
.visor-cerrar:hover{background:rgba(255,255,255,.28)}
.visor-cerrar svg{width:22px;height:22px}
.visor-flecha{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .2s}
.visor-flecha:hover{background:rgba(255,255,255,.28)}
.visor-flecha svg{width:22px;height:22px}
.visor-flecha.izq{left:14px}
.visor-flecha.der{right:14px}

/* ===================== FAVORITOS ===================== */

.fav-vacio{text-align:center;padding:76px 20px}
.fav-vacio svg{width:58px;height:58px;color:#E4D9CE;margin:0 auto 18px;animation:flotar 3.4s ease-in-out infinite}
.fav-vacio h2{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--navy);margin-bottom:10px}
.fav-vacio p{color:var(--gris);font-size:14.5px;margin:0 0 26px;line-height:1.65}

.fav-lista{border-top:1px solid var(--linea)}
.fav-fila{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--linea);align-items:flex-start;animation:subir .5s var(--curva) both}
.fav-fila img{width:86px;aspect-ratio:3/5;object-fit:cover;border-radius:var(--r-s);flex:none;background:var(--crema-hondo)}
@media(min-width:640px){.fav-fila img{width:106px}}
.fav-cuerpo{flex:1;min-width:0}
.fav-cuerpo h3{font-size:15.5px;font-weight:500;color:var(--navy);line-height:1.3}
.fav-elegido{font-size:12.5px;color:var(--gris);margin-top:5px}
.fav-precio{font-size:16px;font-weight:600;color:var(--tinta);margin-top:7px;font-family:var(--serif);font-style:italic}
.fav-quitar{font-size:12px;color:var(--gris);margin-top:9px;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.fav-quitar:hover{color:var(--coral)}
.fav-quitar svg{width:13px;height:13px}

.fav-resumen{margin:26px 0 10px;padding:24px;background:var(--navy);color:#fff;border-radius:var(--r)}
.fav-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.fav-total b{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:600}
.fav-total span{font-size:28px;font-weight:600;font-family:var(--serif);font-style:italic}
.fav-resumen small{display:block;font-size:12px;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:18px}

/* ===================== PÁGINA DE TEXTO ===================== */

.pagina-texto{max-width:700px;margin:0 auto;padding:26px 0 16px}
.pagina-texto h1{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--navy);font-size:clamp(34px,7vw,58px);margin-bottom:18px;letter-spacing:-.025em}
.pagina-texto h2{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--navy);margin:36px 0 12px}
.pagina-texto p{font-size:15.5px;line-height:1.8;color:#5B5560;margin:0 0 16px}
.pagina-texto .destacado{font-size:19px;line-height:1.65;color:var(--navy);font-family:var(--serif);font-style:italic}

/* ===================== NOSOTRAS ===================== */

.portada-nosotras{position:relative;overflow:hidden;background:var(--navy)}
.portada-nosotras-fotos{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}
.portada-nosotras-fotos img{width:100%;height:100%;object-fit:cover;animation:crecer 1.5s var(--curva) both}
.portada-nosotras-fotos img:nth-child(2){animation-delay:.14s}
.portada-nosotras-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,58,.62) 0%,rgba(20,24,58,.80) 55%,rgba(20,24,58,.92) 100%);
}
.portada-nosotras-texto{
  position:relative;z-index:2;min-height:46vh;padding:70px 20px 54px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;
}
@media(min-width:900px){.portada-nosotras-texto{min-height:56vh;padding:90px 32px}}
.portada-nosotras-texto .rotulo{color:rgba(255,255,255,.66);animation:aparecer 1s .3s both}
.portada-nosotras-texto h1{
  font-family:var(--serif);font-style:italic;font-weight:700;color:#fff;
  font-size:clamp(38px,8vw,84px);line-height:1;letter-spacing:-.025em;
  animation:subir 1s .16s both;
}
.portada-nosotras-texto p{margin:0;color:rgba(255,255,255,.82);font-size:15.5px;animation:subir 1s .4s both}

.lista-lineas{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lista-lineas li{
  padding:9px 18px;border-radius:100px;background:var(--coral-luz);color:var(--navy);
  font-size:13px;letter-spacing:.06em;border:1px solid #F7DDE1;
}

.manifiesto{background:var(--navy);color:#fff;padding:64px 0}
@media(min-width:900px){.manifiesto{padding:88px 0}}
.manifiesto .rotulo{color:rgba(255,255,255,.55);margin-bottom:18px;display:block}
.manifiesto blockquote{
  margin:0 0 46px;font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(28px,5.4vw,54px);line-height:1.12;letter-spacing:-.02em;max-width:20ch;
}
.manifiesto blockquote em{font-style:italic;color:var(--coral)}
.manifiesto-tres{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:820px){.manifiesto-tres{grid-template-columns:repeat(3,1fr);gap:44px}}
.manifiesto-tres span{
  font-family:var(--serif);font-style:italic;font-weight:700;font-size:32px;
  color:var(--coral);display:block;margin-bottom:10px;
}
.manifiesto-tres b{display:block;font-size:16px;font-weight:600;margin-bottom:8px}
.manifiesto-tres p{margin:0;font-size:14px;line-height:1.68;color:rgba(255,255,255,.72)}

/* ===================== AVISO Y FLOTANTE ===================== */

.aviso{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,22px);z-index:150;
  background:var(--navy);color:#fff;padding:13px 22px;border-radius:100px;font-size:13.5px;
  box-shadow:var(--sombra-alta);opacity:0;pointer-events:none;
  transition:all .34s var(--curva);display:flex;align-items:center;gap:10px;max-width:90vw;
}
.aviso.visible{opacity:1;transform:translate(-50%,0)}
.aviso svg{width:17px;height:17px;color:var(--coral);flex:none}

.ws-flotante{
  position:fixed;right:16px;bottom:16px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:var(--ws);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .28s var(--curva);
}
.ws-flotante:hover{transform:scale(1.09)}
.ws-flotante svg{width:29px;height:29px}
@media(min-width:900px){.ws-flotante{right:26px;bottom:26px}}
body[data-pagina="favoritos"] .ws-flotante{display:none}

/* ===================== TECLADO ===================== */
/* Para quien navega sin mouse (con el tabulador). Sin esto no se ve donde
   estas parado y la web es inusable. Solo sale con teclado, no al hacer clic. */
:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:4px;
}
.visita-texto :focus-visible,
.manifiesto :focus-visible,
.promesas :focus-visible,
.fav-resumen :focus-visible{outline-color:#fff}

/* Saltar al contenido: lo primero que encuentra quien usa teclado */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.saltar:focus{left:0}

/* Boton de "ver mas prendas" al pie de la cuadricula */
/* Medido: 34px por arriba y 6px por abajo. El botón quedaba pegado al
   bloque azul de abajo (Jael, 02-sep-2026). Ahora respira por los dos lados. */
.ver-mas-caja{display:flex;justify-content:center;padding:34px 0 44px}
.ver-mas-caja button[hidden]{display:none}

/* Fotos que NO son 3:5 (hay 58 cuadradas y 55 en 4:5).
   En vez de recortarlas y cortarle la cabeza a la modelo, se enseñan enteras
   sobre fondo crema. Se nota mucho menos que un recorte mal hecho. */
.galeria-principal.foto-entera{background:var(--crema-hondo)}
/* Lo mismo en la ficha: la foto más alta que el marco se rellena y se
   centra; la más ancha se enseña entera. */
.galeria-principal.foto-alta img{object-fit:cover;object-position:50% 50%}
.galeria-principal.foto-entera img{object-fit:contain}
.miniaturas button.foto-entera img{object-fit:contain}

/* ===================== SEGUNDA FILA DE CATEGORIAS ===================== */
/* Con 10 categorías más las secciones no cabía todo en una fila. */
.cabecera-cats{border-top:1px solid var(--linea);background:rgba(251,247,242,.92);display:none}
@media(min-width:1000px){.cabecera-cats{display:block}}
.cats-fila{
  max-width:var(--ancho);margin:0 auto;padding:11px 32px;
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
}
.cats-fila a{
  font-size:13px;color:var(--gris);font-family:var(--serif);font-style:italic;
  transition:color .2s;white-space:nowrap;
}
.cats-fila a:hover{color:var(--coral)}
.cats-fila a.activo{color:var(--navy);border-bottom:1px solid var(--navy)}

.menu a.rebajas{color:var(--coral)}
.menu a.rebajas.activo{color:var(--coral)}

/* ===================== MI TALLA (solo rebajas) ===================== */
.mi-talla{background:var(--coral-luz);border-bottom:1px solid #F7DDE1}
.mi-talla .envoltorio{display:flex;align-items:center;gap:10px;padding:13px 16px;flex-wrap:wrap}
@media(min-width:900px){.mi-talla .envoltorio{padding:13px 32px}}
.chip-talla{
  padding:8px 16px;border-radius:100px;border:1px solid #F0CDD3;background:#fff;
  font-size:13px;transition:all .2s var(--curva);display:inline-flex;align-items:center;gap:7px;
}
.chip-talla span{font-size:11.5px;color:var(--gris)}
.chip-talla:hover{border-color:var(--coral)}
.chip-talla.activo{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-talla.activo span{color:rgba(255,255,255,.65)}
.mi-talla-nota{font-size:12px;color:var(--gris);margin-left:6px}

/* ===================== LA TIENDA ===================== */
.tienda-rejilla{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);padding-bottom:10px}
@media(min-width:760px){.tienda-rejilla{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1080px){.tienda-rejilla{grid-template-columns:repeat(4,1fr)}}
.tienda-tile{display:block;text-align:center}
.tienda-tile .marco{aspect-ratio:3/5;overflow:hidden;border-radius:var(--r-s);background:var(--crema-hondo)}
.tienda-tile img{width:100%;height:100%;object-fit:cover}
.tienda-tile b{
  display:block;margin-top:14px;font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:20px;color:var(--navy);
}
.tienda-tile span{display:block;margin-top:4px;font-size:12.5px;color:var(--gris)}
.tienda-tile:hover b{color:var(--coral)}

/* El precio tachado y el nuevo, en la ficha y en la tarjeta */
.etiqueta.oferta{background:var(--coral);letter-spacing:.12em}
.nota-talla{margin:12px 0 0;font-size:12.5px;color:var(--gris);line-height:1.5}

/* ===================== BUSCADOR ===================== */
.buscador{
  position:fixed;inset:0;z-index:120;
  background:rgba(20,24,58,.55);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:0;
  animation:aparecer .2s both;
}
.buscador[hidden]{display:none}
.buscador-caja{
  width:100%;max-width:760px;background:var(--crema);
  display:flex;flex-direction:column;max-height:100vh;
  box-shadow:var(--sombra-alta);
}
@media(min-width:760px){
  .buscador{padding:70px 20px 40px}
  .buscador-caja{border-radius:var(--r);max-height:calc(100vh - 110px)}
}
.buscador-arriba{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--linea);flex:none;
}
.buscador-arriba svg{width:22px;height:22px;color:var(--gris);flex:none}
.buscador-arriba input{
  flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--tinta);
  padding:8px 0;outline:none;
}
.buscador-arriba input::placeholder{color:#B3ADB8}
.buscador-resultados{overflow-y:auto;padding:8px 0 14px}
.buscador-pista{padding:34px 24px;text-align:center;color:var(--gris);font-size:14px;line-height:1.6}
.buscador-cuenta{padding:12px 20px 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}

.resultado{display:flex;gap:14px;padding:10px 18px;align-items:center;transition:background .15s}
.resultado:hover{background:var(--crema-hondo)}
.resultado img{width:58px;aspect-ratio:3/5;object-fit:cover;border-radius:8px;flex:none;background:var(--crema-hondo)}
.resultado-datos{min-width:0;flex:1}
.resultado-datos b{display:block;font-size:15px;font-weight:500;color:var(--navy);line-height:1.3}
.resultado-datos>span{display:block;font-size:12px;color:var(--gris);margin-top:2px}
.resultado-precio{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.resultado-precio em{font-style:italic;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--tinta)}
.resultado-precio .antes{font-style:normal;font-size:12.5px;color:var(--gris);text-decoration:line-through}
.resultado-precio u{
  text-decoration:none;background:var(--coral);color:#fff;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:100px;letter-spacing:.08em;
}

/* ===================== MOSAICO A SANGRE ===================== */
/* "A sangre" = las fotos llegan hasta el borde de la pantalla, sin margen
   blanco alrededor y pegadas unas a otras. Es lo que hace que se vea de
   revista y no de plantilla. */
.mosaico{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media(min-width:900px){.mosaico{grid-template-columns:repeat(4,1fr)}}
.mosaico a{position:relative;display:block;aspect-ratio:3/5;overflow:hidden;background:var(--crema-hondo)}
.mosaico img{width:100%;height:100%;object-fit:cover}
/* ⚠️ SIN VELO de serie: la foto se ve limpia. El efecto solo aparece al pasar
   el ratón (Jael, 02-sep-2026). El nombre se lee igual porque lleva su
   propia sombra de texto, que es lo único que hace falta. */
.mosaico a::after{
  content:'';position:absolute;inset:0;
  background:transparent;
  transition:background .35s;
}
.mosaico a:hover::after{background:linear-gradient(180deg,rgba(210,53,77,.24) 0%,rgba(20,24,58,.20) 40%,rgba(20,24,58,.74) 100%)}
.mosaico b{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  /* Sin velo detrás, la sombra del texto es lo único que lo separa de la
     foto. Dos capas: una pegada para el contorno y otra amplia de apoyo. */
  text-shadow:0 1px 3px rgba(10,12,32,.9), 0 2px 18px rgba(10,12,32,.75);
}
@media(min-width:900px){.mosaico b{bottom:32px;font-size:15px}}
.mosaico b small{
  display:block;font-size:11px;letter-spacing:.14em;font-weight:400;
  opacity:.85;margin-top:5px;text-transform:none;
}
.mosaico a.destacado b{color:#fff}
/* ⚠️ NO pintar aquí de coral. El coral es lo que dice "tengo el ratón
   encima", y estas dos celdas lo llevaban SIEMPRE: parecían tocadas sin
   que nadie las tocara (Jael lo vio el 02-sep-2026). Se distinguen por su
   nombre y su pie, que ya es bastante. */
.mosaico a.destacado::after{background:transparent}
/* ⚠️ Nuevo y Rebajas necesitan SU PROPIA regla de hover. La de arriba tiene
   la misma fuerza que .mosaico a:hover::after y va después, así que se la
   comía: esas dos celdas no se resaltaban al pasar el ratón y todas las
   demás sí (Jael lo vio el 02-sep-2026). */
.mosaico a.destacado:hover::after{background:linear-gradient(180deg,rgba(210,53,77,.24) 0%,rgba(20,24,58,.20) 40%,rgba(20,24,58,.78) 100%)}

/* El dúo grande de abajo, también a sangre */
.duo{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.duo a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--crema-hondo)}
/* ⚠️ EL MARCO CORTABA LA CABEZA (Jael, 02-sep-2026).
   Estaba en 3/3.4 = 0,882 de ancho/alto, y las fotos son 0,750 (3:4) y
   0,600 (3:5): mucho más estrechas. Para llenar un marco más ancho hay
   que ampliarlas, y eso se comía el 32% por arriba y por abajo.
   Ahora el marco es 3/4 = 0,750, que es EXACTO para la foto del vestido
   fucsia (no pierde nada), y la de 3:5 recorta solo un 20%.
   Y object-position lo saca casi todo POR ABAJO, no por la cabeza. */
@media(min-width:760px){.duo a{aspect-ratio:3/4}}
.duo img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}   /* pegada arriba: el recorte se lo lleva todo la parte de abajo */
.duo a::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 32%,rgba(20,24,58,.78) 100%)}
.duo-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 40px 44px;color:#fff}
@media(min-width:900px){.duo-texto{padding:0 56px 56px}}
.duo-texto h3{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(30px,4.4vw,48px);letter-spacing:-.02em;line-height:1;
}
.duo-texto span{display:block;margin-top:12px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.88}

/* Un color deducido del nombre de la prenda no se puede elegir: no lleva
   borde de "elegido" ni cambia el puntero. Es un dato, no un botón. */
.color.solo{cursor:default;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* ===================== LAS SECCIONES AL PASAR EL MOUSE =====================
   Jael (02-sep-2026): "en la página de inicio no tienen por qué estar las
   secciones ahí. Pueden aparecer cuando pases el mouse por La tienda, como en
   Kramba." Antes ocupaban una fila fija debajo del menú, en TODAS las páginas.

   En celular no hay mouse: ahí no se usa esto, las secciones siguen estando en
   el menú de la hamburguesa. */
/* ⚠️ El panel NO se ancla al enlace: "La tienda" está pegado a la izquierda y
   un panel de 800px centrado en él se salía media pantalla por el borde.
   Se ancla a la CABECERA entera (que es sticky, o sea que sirve de marco) y
   por dentro se centra con el mismo ancho que el resto de la web. */
/* El contenedor ocupa TODO el alto de la cabecera. Si mide solo lo que
   mide el texto, entre él y el panel queda una franja que no es de
   ninguno de los dos, y al pasar por ahí el menú se cierra. */
.con-secciones{position:static;display:flex;align-items:center;align-self:stretch;height:100%}

.secciones{
  position:absolute;top:100%;left:0;right:0;
  z-index:70;padding:0 12px 0;   /* 0 arriba: hueco muerto de 0px */
  opacity:0;visibility:hidden;transform:translateY(6px);
  /* ⚠️ SIEMPRE none, abierto o cerrado. Esta capa ocupa todo el ancho para
     poder centrar la caja, y si recibe el ratón se convierte en una lámina
     invisible: el menú no se cerraba al salir y encima tapaba los clics del
     mosaico que hay debajo. Quien recibe el ratón es .secciones-caja. */
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.secciones-caja{
  pointer-events:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  max-width:660px;margin:10px auto 0;
  background:var(--crema);border:1px solid var(--linea);border-radius:16px;
  padding:12px;box-shadow:0 24px 60px rgba(30,36,84,.16);
  max-height:calc(100vh - var(--header) - 40px);overflow:auto;   /* que nunca se salga de la pantalla */
}
.secciones-caja a{
  display:block;padding:6px;border-radius:10px;text-decoration:none;
  transition:background .18s ease;
}
.secciones-caja a:hover{background:var(--crema-hondo)}
.secciones-caja a.activo b{color:var(--coral)}
/* ⚠️ Con las fotos en 3/5 el panel no cabía en una pantalla de portátil
   (Jael: "no cabe por completo en la página"). Con 3/4 y menos aire cabe
   entero y la prenda se sigue reconociendo, que es para lo que está. */
/* Jael quiere las fotos en 3:5 como en el resto de la web. Para que el
   panel siga cabiendo, lo que se achica son las celdas, no la foto. */
.secciones-caja img{
  width:100%;aspect-ratio:3/5;object-fit:cover;object-position:50% 14%;
  border-radius:8px;display:block;margin-bottom:6px;background:var(--crema-hondo);
}
/* ⚠️ min-height de dos líneas: "Corsés y tops" ocupa dos, y sin esto la cuenta
   de esa celda caía más abajo que las demás y descuadraba toda la fila. */
.secciones-caja b{
  display:block;font-size:12px;font-weight:500;color:var(--navy);
  font-family:var(--serif);font-style:italic;min-height:2.4em;
}
.secciones-caja em{font-style:normal;font-size:11px;color:var(--gris)}

/* El "Ver todo" ocupa la fila entera, debajo de las diez secciones */
.secciones-todo{
  grid-column:1 / -1;display:flex !important;align-items:center;gap:7px;
  justify-content:center;margin-top:6px;padding:10px !important;
  border-top:1px solid var(--linea);border-radius:0 !important;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);font-weight:500;
}
.secciones-todo svg{width:14px;height:14px}

/* Se abre al pasar el mouse por CUALQUIER parte del bloque (el enlace o el
   propio desplegable), y también con el teclado (Tab). */
/* ⚠️ Ya NO se abre con :hover de CSS. Con CSS siempre queda alguna
   trayectoria que lo cierra: la gente no baja en línea recta hacia el
   panel, baja en diagonal y se sale del bloque un instante.
   Lo abre y lo cierra bonita.js, con 250 ms de perdón al salir.
   El :focus-within se queda para quien navega con el teclado. */
@media(min-width:900px){
  .con-secciones.abierto .secciones,
  .con-secciones:focus-within .secciones{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .con-secciones.abierto .secciones-caja,
  .con-secciones:focus-within .secciones-caja{ pointer-events:auto }
}
@media(max-width:899px){ .secciones{display:none} }

/* Para Google: la portada ya no existe, pero la página necesita un título. */
.solo-para-google{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* En el pie, "Mis favoritos" y "Nosotras" no son secciones de ropa: iban
   colgando del final de la lista de prendas y parecían una categoría más
   (Jael, 02-sep-2026). Van en su propio grupo, con una línea que los separa. */
.pie-aparte{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(251,247,242,.16);
}

/* En el menú del celular, igual que en el pie: estos dos no son ropa. */
.menu-movil nav a.aparte{
  margin-top:12px;padding-top:18px;
  border-top:1px solid var(--linea);
}

/* ===================== COMPRA EL LOOK =====================
   Las combinaciones que arma Bonita. Cada una enseña UNA foto (la del look
   completo puesto) y al lado las prendas con su precio, el total y un botón
   que manda el look entero por WhatsApp. Eso es lo que hace que se vendan dos
   prendas en vez de una.

   ⚠️ La tarjeta es HORIZONTAL a propósito. Con la foto arriba a todo lo ancho
   quedaba de casi mil píxeles de alto: enorme y borrosa (Jael, 02-sep-2026).
   Así la foto mide como un cuarto de pantalla y se ve nítida. */

.looks{display:grid;gap:22px}
@media(min-width:900px){.looks{grid-template-columns:1fr 1fr;gap:26px}}

.look{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;display:flex;
  transition:box-shadow .35s var(--curva),border-color .35s;
}
.look:hover{box-shadow:var(--sombra-alta);border-color:transparent}

/* ⚠️ 3:5, como el resto de la web. Jael: "así como está ahora no se ve el
   look completo". Con 3/4 se le cortaba a la modelo de las rodillas para
   abajo, y en un look lo que importa es ver el conjunto entero puesto.
   La proporción fija hace además que todas las tarjetas midan lo mismo,
   tengan una prenda o dos. */
.look-foto{
  flex:0 0 40%;max-width:40%;aspect-ratio:3/5;
  overflow:hidden;background:var(--crema-hondo);display:block;
}
/* Pegada arriba: el marco 3/4 es más ancho que las fotos 3:5, así que sobra
   alto. Que se recorte por abajo, nunca por la cabeza. */
.look-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
/* ⚠️ Casi todas las fotos son 3:5, pero alguna llega en otro formato.
   · MÁS ALTA que 3:5 (el "Pantalón Sastre Ancho" viene en 9:16): rellena el
     marco y se centra. Solo pierde un 6% de alto, 3% por arriba y 3% por
     abajo, así que no se va ni la cabeza ni el bajo del pantalón.
   · MÁS ANCHA que 3:5 (cuadrada, 1.25, 3:4): esa NO se rellena. Rellenarla
     le comería del 20% al 40% del ancho. Se enseña entera con borde. */
.look-foto.alta img{object-fit:cover;object-position:50% 50%}
.look-foto.entera img{object-fit:contain}

/* El texto va CENTRADO de arriba abajo. Con la lista estirada (flex:1) el
   hueco se juntaba todo en medio y quedaba un vacío raro entre las prendas y
   el precio (Jael, 02-sep-2026). */
.look-datos{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:14px;flex:1;min-width:0}
.look-datos .rotulo{margin:0}

.look-lista{list-style:none;margin:0;padding:0}
.look-lista li{border-bottom:1px solid var(--linea)}
.look-lista li:last-child{border-bottom:0}
.look-lista a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:13.5px;color:var(--tinta);transition:color .2s;
}
.look-lista a:hover{color:var(--coral)}
.look-lista span{min-width:0}
.look-lista b{
  font-family:var(--serif);font-style:italic;font-weight:700;
  color:var(--navy);font-size:14px;white-space:nowrap;
}

.look-pie{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.look-total{font-size:12px;color:var(--gris)}
.look-total b{
  font-family:var(--serif);font-style:italic;font-weight:700;
  color:var(--navy);font-size:18px;margin-left:4px;
}
.look-pie .boton{padding:11px 18px;font-size:10.5px;width:100%;justify-content:center}

/* En celular la tarjeta se pone en vertical: al lado no cabe. */
@media(max-width:559px){
  .look{flex-direction:column}
  .look-foto{flex:none;max-width:none;aspect-ratio:3/4}
}

/* Los grupos de looks van más juntos: son cinco seguidos y con el aire normal
   de sección (144px entre uno y otro) la página quedaba vacía por dentro. */
.seccion-looks{padding:34px 0}
@media(min-width:900px){.seccion-looks{padding:40px 0}}
.seccion-looks .seccion-cabecera{margin-bottom:18px}

/* ⚠️ Un grupo con un número IMPAR de looks (De noche tiene 3) dejaba la última
   tarjeta sola con media fila vacía al lado. Centrada parece a propósito. */
@media(min-width:900px){
  .looks .look:last-child:nth-child(odd){
    grid-column:1 / -1;
    /* ⚠️ width, no max-width: con max-width la tarjeta se encoge a lo que mide
       su contenido (medido: 399px en vez de 625) y se ve más pequeña que las
       demás. Jael lo vio el 02-sep-2026. */
    width:calc(50% - 13px);
    margin:0 auto;
  }
}

/* El "plus code" de Google: la clienta lo copia y pega y le lleva a la puerta.
   Va en monoespaciada porque es un código, no una frase. */
.plus-code{
  font-style:normal;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:12px;letter-spacing:.06em;opacity:.75;
}