/* ============================================================
   MI ROPERITO — TIENDA EN LÍNEA · diseño "Rosé Atelier"
   Blanco + rosa empolvado, tipografía geométrica (Outfit), títulos en
   itálica editorial (Instrument Serif) y títulos de categoría con el carácter del
   logo (Fraunces). Tarjetas de esquinas suaves y botones pastilla.

   Este archivo nació como el demo que la clienta eligió
   (mi-roperito-demo.pages.dev) y se trajo al sitio real conservando TODO
   el backend de Supabase. Al final está el bloque "COMPONENTES DE
   PRODUCCIÓN": carrito, checkout, variantes, cuenta y páginas de texto,
   que el demo no tenía porque no tenía backend.
   ============================================================ */

:root {
  /* Paleta tomada de los muestrarios de la referencia */
  --rosa:      #E27FA6;   /* acento principal (botones, precios) */
  --rosa-d:    #C9648B;   /* hover del acento */
  --rosa-l:    #F5B9CF;   /* rosa claro decorativo */
  --marca:     #F10573;   /* EL rosa del logo de la clienta (títulos fuertes) */
  --blush:     #FCE7EF;   /* paneles rosados */
  --blush-2:   #FDF5F8;   /* fondo de foto / paneles muy claros */
  --rosa-carga:#FBE1EC;   /* rosita pastel de la pantalla de carga (la pidió la clienta) */
  --rosa-carga2:#FDEFF4;  /* el mismo rosa, más claro, para el degradado */
  --white:     #FFFFFF;
  --ink:       #3A3335;   /* gris carbón de la referencia */
  --ink-2:     #6B6165;
  --muted:     #9C9296;
  --line:      #F2E1E8;
  --line-2:    #EDE9EA;
  --ok:        #3D7A55;
  --err:       #B3261E;

  --sans: "Outfit", "Segoe UI", sans-serif;
  --script: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Fraunces es la que más se parece al logotipo (serif retro con carácter):
     se usa en los TÍTULOS DE CATEGORÍA, que la clienta pidió más grandes,
     llamativos y con una tipografía que imponga más. */
  --display: "Fraunces", Georgia, serif;

  /* El contenido usa TODO el ancho de la pantalla (hasta 2000px, para que en
     monitores ultrapanorámicos no se desparrame). La regla del diseño: el
     ancho extra se convierte en MÁS COLUMNAS, no en tarjetas estiradas —
     por eso las rejillas van con auto-fill y los bloques de foto llevan tope. */
  --max: 2000px;
  --pad: clamp(16px, 3.4vw, 68px);
  --r: 26px;
  --r-s: 16px;
  --sh: 0 22px 48px -28px rgba(178, 108, 140, .45);
  --sh-s: 0 10px 26px -18px rgba(178, 108, 140, .38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Título caligráfico: el sello del diseño. Siempre en minúsculas y en rosa.
   Instrument Serif en itálica: alto de x generoso, por eso los tamaños
   son menores que los de la caligrafía que había antes. */
.script { font: italic 400 clamp(27px, 4.06vw, 45px)/1.35 var(--script); color: var(--rosa); letter-spacing: 0; }
.kick {
  display: block; margin-bottom: 4px;
  font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px;
  font: 500 14px/1 var(--sans); letter-spacing: .04em;
  background: var(--rosa); color: #fff;
  box-shadow: 0 12px 24px -14px rgba(226, 127, 166, .9);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--rosa-d); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(201, 100, 139, .9); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn--ghost:hover { background: var(--blush); color: var(--rosa-d); border-color: var(--rosa-l); box-shadow: none; }
.btn--wide { width: 100%; }
.btn--sm { padding: 10px 20px; font-size: 13px; }

/* ============ AVISO SUPERIOR (marquesina) ============ */
.tick {
  overflow: hidden; background: var(--blush); color: var(--ink-2);
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.tick__run { display: flex; width: max-content; padding: 9px 0; animation: run 46s linear infinite; }
.tick__run span { white-space: pre; }
@keyframes run { to { transform: translateX(-50%); } }

/* ============ HEADER ============ */
.hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  height: 74px; display: flex; align-items: center; gap: 18px;
}
.hd__burger { display: none; color: var(--ink); padding: 6px; margin-left: -6px; }

/* Logo: el logotipo REAL de la clienta (PNG sin fondo). Pidió que el nombre
   de la tienda se viera igual que su logo, así que en el header ya no va como
   texto. La clienta puede subir otro desde /admin > Apariencia (logo_url) y
   store.js lo cambia solo; el del repo es el de respaldo. */
.logo { display: inline-flex; align-items: center; }
.logo img { height: clamp(38px, 4.6vw, 52px); width: auto; }
.logo--ft img { height: 58px; }
.logo--drw img { height: 42px; }
/* Nombre en texto: se conserva para lectores de pantalla y buscadores
   (store.js le pone el nombre de la tienda que esté en el admin). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Desde el 27 de agosto de 2026 la barra lleva TODAS las categorías (siete
   ahora, nueve cuando vuelvan Deportiva y Playa) más "Sobre nosotras", así
   que ya no caben con una separación fija: el hueco se encoge solo con el
   ancho de la pantalla, y min-width:0 deja que la barra se apriete en vez
   de empujar al carrito fuera del header. */
.nav {
  display: flex; min-width: 0; flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 26px); margin-left: clamp(10px, 1.5vw, 22px);
}
.nav a {
  position: relative; padding: 4px 0; white-space: nowrap;
  font: 400 clamp(12.5px, 1.05vw, 14.5px)/1 var(--sans);
  color: var(--ink-2); transition: color .18s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--rosa); transition: right .28s ease;
}
.nav a:hover { color: var(--rosa-d); }
.nav a:hover::after { right: 0; }

.hd__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ibtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--ink);
  transition: background .18s, color .18s;
}
.ibtn:hover { background: var(--blush); color: var(--rosa-d); }
.hd__cta { margin-left: 8px; padding: 11px 22px; font-size: 13px; }
.dot {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--rosa); color: #fff;
  font: 600 10.5px/17px var(--sans); text-align: center;
}

/* ============ INICIO — HERO (PORTADA) ============
   BANNER ALARGADO Y LIBRE, de orilla a orilla: la foto manda y el texto va
   ENCIMA, sobre un velo que la aclara lo suficiente para leerse. NADA de
   partirlo en dos ni de meterlo en un panel: la clienta ya rechazó las dos
   cosas ("lo mandaste a un costado y del otro pusiste el texto").
   · escritorio → texto a la izquierda, velo que se disuelve hacia la derecha;
   · celular    → texto abajo, velo que sube desde el borde inferior.
   Las dos fotos (#heroMedia / #heroMedia2) las cambia la clienta desde
   /admin > Apariencia y se alternan con un fundido lento.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  width: 100%; margin: 0; border-radius: 0;
  height: clamp(440px, 44vw, 600px);
  background: var(--blush);
}
.hero__media { position: absolute; inset: 0; }
/* La foto va ESPEJEADA a propósito: en la toma original el burro de ropa está
   a la izquierda y la modelo a la derecha, y la clienta quiere que la ropa
   (que es lo importante) quede del lado limpio y el texto caiga sobre la
   modelo. Con voltearla se logra sin volver a fotografiar nada.
   OJO: con el espejo, los porcentajes de object-position se ven al revés. */
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 28%; transform: scaleX(-1);
}
/* Velo: sin él, el texto oscuro no se lee sobre la foto. Va fuerte donde cae
   el texto (la modelo) y se disuelve hacia la ropa, que queda limpia. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(253, 243, 247, .95) 0%, rgba(252, 231, 239, .88) 30%,
    rgba(252, 231, 239, .45) 52%, rgba(252, 231, 239, 0) 70%);
}
/* Segunda foto del admin: fundido lento entre las dos tomas */
.hero__img--b { opacity: 0; animation: heroFade 18s ease-in-out infinite; }
@keyframes heroFade {
  0%, 44% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero__img--b { animation: none; } }
.hero__in {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.hero__ttl {
  font: 600 clamp(32px, 4.6vw, 74px)/1.02 var(--sans);
  letter-spacing: -.02em; text-transform: uppercase; color: var(--ink);
}
.hero__ttl i {
  display: block; margin: 2px 0 0 clamp(6px, 1.6vw, 26px);
  font: italic 400 clamp(27px, 3.59vw, 55px)/1.06 var(--script);
  text-transform: none; letter-spacing: 0; color: var(--rosa);
  text-wrap: balance;
}
.hero__sub {
  max-width: 36ch; margin: clamp(12px, 2vw, 22px) 0 0;
  font: 300 clamp(15px, 1.15vw, 18px)/1.7 var(--sans); color: var(--ink-2);
}
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vw, 30px); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: clamp(20px, 3vw, 32px);
  padding-top: 18px; border-top: 1px solid rgba(226, 127, 166, .38);
  max-width: 480px;
}
.hero__facts div { min-width: 84px; }
.hero__facts b { display: block; font: 500 19px/1.2 var(--sans); color: var(--rosa-d); }
.hero__facts span { font: 400 12px/1.4 var(--sans); color: var(--ink-2); }

/* Celular: como le gusta a la clienta — la foto completa y el texto ENCIMA,
   abajo, sobre el degradado rosa que sube desde el borde inferior. Poco
   texto: titular, una línea y el botón. */
@media (max-width: 860px) {
  .hero { height: clamp(430px, 106vw, 540px); }
  .hero__img { object-position: 40% 14%; }  /* encuadre corrido hacia el burro de ropa */
  /* En celular el velo es vertical y tiene que estar ya casi sólido donde
     empieza el titular (~58%), si no el texto cae sobre la foto y no se lee. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(252, 231, 239, 0) 0%, rgba(252, 231, 239, .22) 34%,
      rgba(253, 243, 247, .9) 58%, var(--blush) 76%);
  }
  .hero__in {
    justify-content: flex-end; text-align: center; align-items: center;
    padding: 0 20px clamp(26px, 7vw, 40px);
  }
  .hero__ttl { font-size: clamp(27px, 7.6vw, 40px); }
  .hero__ttl i { margin-left: 0; font-size: clamp(26px, 7vw, 36px); }
  .hero__sub { max-width: 32ch; font-size: 14.5px; line-height: 1.6; }
  .hero .hero__acts { justify-content: center; }  /* sólo el de la portada */
  .hero__facts { display: none; }   /* en celular carga de más el panel */
  .only-pc { display: none; }       /* la 2ª frase del subtítulo */
}

/* ============ CABEZAL DE SECCIÓN ============ */
.shd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: clamp(48px, 7vw, 84px) 0 clamp(18px, 2.4vw, 28px);
}
.shd__lnk {
  flex: none; padding-bottom: 8px;
  font: 400 13.5px/1 var(--sans); color: var(--ink-2); transition: color .18s, gap .18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.shd__lnk:hover { color: var(--rosa-d); gap: 11px; }
.shd p { margin-top: 2px; font: 300 14.5px/1.6 var(--sans); color: var(--ink-2); max-width: 46ch; }

/* ============ TIRA DESLIZABLE ============ */
.strip-wrap { position: relative; }
/* OJO con dos cosas que ESTA tira tenía y la de "looks" no, que son las
   que la hacían sentirse a brincos al deslizar de lado:

   · scroll-snap-type + scroll-snap-align: al soltar el dedo, el navegador
     se iba al punto de anclaje más cercano. Con el impulso de un
     deslizamiento, ese punto cae varias prendas más allá, así que la tira
     "se saltaba" tarjetas en vez de frenar donde la dejaste.
   · scroll-behavior: smooth: convertía ese reajuste en una animación. El
     dedo dejaba de mandar y la tira se iba sola. Los botones ‹ › no lo
     necesitan aquí: piden la animación ellos mismos al llamar scrollBy.

   Se quitan las dos y la tira queda como la de "looks", que se desliza
   normal. overscroll-behavior-x evita además que, al llegar al final, el
   gesto lateral se contagie a la página. */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(178px, 15vw, 270px);
  gap: clamp(10px, 1.4vw, 18px);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px 0 10px; margin: 0 calc(var(--pad) * -1); padding-inline: var(--pad);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-nav { display: none; gap: 8px; }
.strip-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2); background: var(--white);
  transition: background .18s, color .18s, border-color .18s;
}
.strip-nav button:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }

/* ============ TARJETA DE PRODUCTO ============ */
.card {
  position: relative; display: block; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-s);
  transition: transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s, border-color .28s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--rosa-l); }
.card__m { position: relative; aspect-ratio: 3 / 4; background: var(--blush-2); overflow: hidden; }
/* Las fotos del catálogo son verticales (modelo o maniquí en la tienda), casi
   3:4: van COVER para que la tarjeta se llene de borde a borde como en la
   referencia. El encuadre se sube un poco para no cortar la cara. En la FICHA
   de producto sí van contain, ahí no se puede recortar nada. */
.card__m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .5s ease; }
.card:hover .card__m img { transform: scale(1.05); }
.card__tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 12px; border-radius: 999px; background: var(--rosa); color: #fff;
  font: 500 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.card__tag--sale { background: var(--ink); }
/* La gift card es una ilustración, no una foto: se ve completa, sin recorte */
.card--gc .card__m img { object-fit: contain; padding: 12%; }
.card__go {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 14px);
  padding: 9px 20px; border-radius: 999px; background: rgba(255, 255, 255, .95);
  font: 500 12px/1 var(--sans); letter-spacing: .06em; color: var(--rosa-d);
  opacity: 0; transition: opacity .26s, transform .26s; box-shadow: var(--sh-s); white-space: nowrap;
}
.card:hover .card__go { opacity: 1; transform: translate(-50%, 0); }
.card__i { padding: 13px 14px 15px; }
.card__c { font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card__n {
  margin: 6px 0 7px; font: 400 14.5px/1.4 var(--sans); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.card__p { font: 500 15.5px/1 var(--sans); color: var(--rosa-d); }
.card__p s { margin-left: 7px; font-weight: 400; font-size: 13px; color: var(--muted); }
/* "3 opciones": avisa desde el catálogo que la prenda viene en varios
   colores (o tallas), para no tener que entrar a la ficha a averiguarlo.
   Va como pastilla discreta: informa, pero no le pelea al precio. */
.card__opts {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--blush); color: var(--rosa-d);
  font: 500 10.5px/1.5 var(--sans); letter-spacing: .04em;
}

/* ============ REJILLA DE PRODUCTOS ============ */
/* auto-fill: en pantalla ancha caben MÁS tarjetas (7–8 en 1920px), no unas
   pocas estiradas. El tope de 260px evita que en ultrapanorámico crezcan. */
.grid {
  display: grid; gap: clamp(10px, 1vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
}
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); } }
.empty {
  padding: 54px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--blush-2); color: var(--ink-2);
}
.empty b { display: block; margin-bottom: 4px; font: italic 400 23px/1.3 var(--script); color: var(--rosa); }

/* ============ CATEGORÍAS ============ */
/* Las 5 categorías llenan el ancho completo. Para que no se vuelvan cuadrados
   gigantes en pantalla ancha, la foto NO usa aspect-ratio: lleva alto propio
   con tope y la prenda va centrada (contain). */
/* ============ TARJETAS DE CATEGORÍA ============
   Diseño que mandó la clienta (agosto 2026). La tarjeta ES la foto: se
   fue el recuadro rosa con el nombre, la frase y el conteo debajo. El
   nombre va encima de la foto, en una pastilla rosa con un corazón,
   abajo a la izquierda.

   Las formas salen medidas de su diseño:
     · celular      2 columnas, tarjetas 4:3, y la última a lo ancho
     · computadora  fila de 5 CUADRADAS (las de ropa) y fila de 4
                    apaisadas (1.42:1) debajo
   Por eso las fotos se guardan en 4:3 (herramientas/recortar-portadas.py):
   en la fila cuadrada el navegador recorta de los lados, que es pared, y
   no de arriba y abajo, que es la prenda. */
.cats { display: grid; gap: clamp(10px, 1.1vw, 18px); grid-template-columns: 1fr 1fr; }

.cat {
  position: relative; display: block; overflow: hidden;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: var(--blush-2);
  aspect-ratio: 4 / 3;
  transition: transform .28s, box-shadow .28s;
}
/* Filete rosa clarito: sobre una foto casi ni se ve, pero define el
   contorno de las portadas de fondo claro, que si no se funden con el
   blanco de la página. */
.cat { box-shadow: inset 0 0 0 1px var(--line); }
.cat:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--line), var(--sh); }
.cat__f { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.cat:hover .cat__f { transform: scale(1.05); }
/* Las categorías que todavía no tienen foto de sesión son recortes de
   producto sobre blanco: estirados a sangre se ven deformes, así que se
   muestran completos con su aire. */
.cat--recorte .cat__f { object-fit: contain; padding: 6%; }

/* La pastilla con el nombre */
.cat__pill {
  position: absolute; left: clamp(10px, 1.1vw, 16px); bottom: clamp(10px, 1.1vw, 16px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: var(--rosa); color: #fff;
  /* En celular la tarjeta mide ~174px: con la letra de escritorio, un
     nombre largo como "Pantalones" se comía dos tercios de la foto. */
  font: 500 clamp(11.5px, 1.05vw, 15.5px)/1 var(--sans);
  box-shadow: 0 6px 16px -6px rgba(58, 51, 53, .45);
  transition: background .2s;
}
.cat:hover .cat__pill { background: var(--rosa-d); }
.cat__pill svg { width: 1.05em; height: 1.05em; flex: none; }

@media (min-width: 900px) {
  .cat__pill { padding: 9px 16px 9px 13px; gap: 8px; }
}

/* La última tarjeta, cuando el número es impar, cruza a lo ancho en
   celular en vez de dejar un hueco: en el diseño es la banda de
   Novedades. Más baja, que si no queda un tarjetón. */
.cat--banner { grid-column: 1 / -1; aspect-ratio: 3.4 / 1; }

@media (min-width: 900px) {
  /* 20 columnas de apoyo: 5 tarjetas de 4 arriba y 4 tarjetas de 5 abajo,
     que es como cuadran las dos filas del diseño sin dejar huecos. */
  .cats { grid-template-columns: repeat(20, 1fr); }
  .cat--alta  { grid-column: span 4; aspect-ratio: 1 / 1; }
  .cat--ancha { grid-column: span 5; aspect-ratio: 1.42 / 1; }
  /* En computadora la banda no aplica: ahí las cuatro de abajo ya llenan
     la fila ellas solas. */
  .cat--banner { grid-column: span 5; aspect-ratio: 1.42 / 1; }
}

/* ============ BANDA "SOBRE NOSOTRAS" ============ */
.about {
  margin-top: clamp(48px, 7vw, 84px);
  background: var(--blush); border-radius: clamp(20px, 3vw, 34px);
  padding: clamp(26px, 4vw, 56px);
}
/* Tope a la foto para que en pantalla ancha no se convierta en un retrato
   gigantesco: el ancho de sobra se lo queda el texto. */
.about__g { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(22px, 3.4vw, 64px); align-items: center; }
.about__ph { position: relative; }
.about__ph img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-s);
  box-shadow: var(--sh); transform: rotate(-2deg);
}
.about__ph em {
  position: absolute; right: -10px; bottom: -14px;
  padding: 12px 18px; border-radius: 999px; background: var(--white);
  font: italic 400 17px/1 var(--script); color: var(--rosa); box-shadow: var(--sh-s); transform: rotate(3deg);
}
.about p { margin-top: 14px; font: 300 15.5px/1.8 var(--sans); color: var(--ink-2); max-width: 62ch; }
/* En pantalla ancha las tres ventajas se acomodan en fila: llenan el espacio
   sin alargar los renglones de texto. */
.about__list { margin-top: 22px; display: grid; gap: 12px; }
.about__list li { display: flex; gap: 11px; font: 300 14.5px/1.6 var(--sans); color: var(--ink-2); }
@media (min-width: 1400px) {
  .about__list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .about__list li { flex-direction: column; gap: 8px; }
}
.about__list b { color: var(--ink); font-weight: 500; }
.about__list svg { flex: none; margin-top: 3px; }

/* ============ BANDAS EDITORIALES (looks) ============ */
.looks {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 17vw, 320px);
  gap: clamp(10px, 1.4vw, 16px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 10px;
}
.looks::-webkit-scrollbar { display: none; }
.look { position: relative; display: block; overflow: hidden; border-radius: var(--r-s); background: var(--blush-2); }
/* La foto enfocaba el 14% de arriba: en una foto de cuerpo entero eso es
   la cara, así que de la prenda casi no se veía nada y lo poco que
   asomaba quedaba tapado por el velo del nombre. Al 42% el encuadre cae
   en el cuerpo, que es donde va la ropa. Y la foto crece en celular para
   que, con el velo puesto, siga quedando prenda a la vista. */
.look img { width: 100%; height: clamp(330px, 22vw, 400px); object-fit: cover; object-position: 50% 42%; transition: transform .6s; }
.look:hover img { transform: scale(1.05); }
.look__t {
  position: absolute; inset: auto 0 0 0; padding: 30px 16px 14px;
  /* El velo se queda (los títulos rosas tienen que leerse sobre cualquier
     foto), pero más bajo y entrando más tarde: antes empezaba a taparlo
     todo desde el primer tercio y se comía la prenda. */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.97) 78%);
}
/* Dos renglones como máximo: un nombre muy largo no debe comerse la foto */
.look__t h3 {
  font: italic 400 19px/1.1 var(--script); color: var(--rosa-d);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.look__t p { margin-top: 4px; font: 500 13px/1 var(--sans); color: var(--rosa-d); }

/* ============ RESEÑAS ============ */
/* Las tres reseñas + las polaroids. Las reseñas son su propia rejilla, así que
   en pantalla ancha se acomodan en fila (3 tarjetas) y llenan el espacio; en
   móvil se apilan. Las polaroids llevan tope para no volverse gigantes. */
.revs { margin-top: clamp(14px, 2vw, 22px); display: grid; grid-template-columns: 1fr minmax(300px, 560px); gap: clamp(20px, 2.6vw, 48px); align-items: center; }
.rev-list { display: grid; gap: clamp(12px, 1.2vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: start; }
/* Entre 900 y 1600px se le quita ancho a las polaroids para que las tres
   reseñas sigan cabiendo en una sola fila. */
@media (max-width: 1600px) { .revs { grid-template-columns: 1fr minmax(260px, 400px); } }
.rev {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 2.6vw, 32px); box-shadow: var(--sh-s);
}
.rev__hd { display: flex; align-items: center; gap: 13px; }
.rev__av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--blush); color: var(--rosa-d); font: 500 17px/1 var(--sans);
}
.rev__n b { display: block; font: 500 15px/1.3 var(--sans); }
.rev__n span { font: 300 12px/1.3 var(--sans); color: var(--muted); }
.rev__st { margin: 14px 0 10px; display: flex; gap: 3px; color: var(--rosa); }
.rev__q { font: 300 15px/1.8 var(--sans); color: var(--ink-2); }

/* Celular: las reseñas se agrupan en una tira que se desliza con el dedo
   (apiladas se leían como una lista larguísima) y van más compactas. */
@media (max-width: 860px) {
  .revs { grid-template-columns: 1fr; gap: 20px; }
  .rev-list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78vw;
    gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    padding: 2px 0 8px; margin: 0 calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .rev-list::-webkit-scrollbar { display: none; }
  .rev { scroll-snap-align: start; padding: 18px 18px 20px; }
  .rev__av { width: 36px; height: 36px; font-size: 15px; }
  .rev__n b { font-size: 14px; }
  .rev__st { margin: 11px 0 8px; }
  .rev__st svg { width: 12px; height: 12px; }
  .rev__q { font-size: 13.5px; line-height: 1.65; }
  .polas { height: 240px; }
}
/* Polaroids giradas (igual que el bloque de reseñas de la referencia) */
/* OJO: nada de `margin-inline:auto` aquí. Es una celda de grid y con margen
   automático deja de estirarse; como todas sus polaroids son `absolute`, su
   ancho colapsaba a 0 y desaparecían (solo quedaban los pies de foto). */
.polas { position: relative; height: clamp(280px, 24vw, 460px); }
.pola {
  position: absolute; background: #fff; padding: 10px 10px 34px; border-radius: 4px;
  box-shadow: var(--sh); transition: transform .35s;
}
.pola img { width: 100%; height: 100%; object-fit: cover; }
.pola--a { width: 56%; left: 2%;  top: 6%;  height: 78%; transform: rotate(-6deg); z-index: 2; }
.pola--b { width: 52%; right: 2%; top: 16%; height: 72%; transform: rotate(7deg); }
.pola--a:hover { transform: rotate(-3deg) translateY(-6px); z-index: 3; }
.pola--b:hover { transform: rotate(4deg) translateY(-6px); z-index: 3; }
.pola em { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: italic 400 15px/1 var(--script); color: var(--rosa); }

/* ============ CONTACTO ============ */
.cont {
  margin-top: clamp(48px, 7vw, 84px);
  background: linear-gradient(150deg, var(--blush) 0%, #FDF2F6 100%);
  border-radius: clamp(20px, 3vw, 34px); padding: clamp(26px, 4vw, 56px);
}
.cont__g { display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: clamp(24px, 3.6vw, 64px); align-items: center; }
/* Los cuatro contactos pasan a dos columnas cuando hay ancho de sobra */
.cont__rows { margin: 22px 0 26px; display: grid; gap: 12px; }
@media (min-width: 1200px) { .cont__rows { grid-template-columns: 1fr 1fr; gap: 14px 26px; max-width: 720px; } }
.cont__r { display: flex; align-items: center; gap: 14px; }
.cont__ic {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--rosa); box-shadow: var(--sh-s);
}
.cont__r b { display: block; font: 500 14px/1.3 var(--sans); }
.cont__r span { font: 300 13.5px/1.4 var(--sans); color: var(--ink-2); }
.cont__ph { position: relative; }
.cont__ph img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh); }
.cont__map {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  padding: 11px 22px; border-radius: 999px; background: var(--white); color: var(--ink);
  font: 500 13px/1 var(--sans); box-shadow: var(--sh-s); white-space: nowrap;
  transition: color .18s, transform .2s;
}
.cont__map:hover { color: var(--rosa-d); transform: translateX(-50%) translateY(-2px); }

/* ============ BENEFICIOS ============
   Franja horizontal pegada debajo del banner (referencia que mandó la
   clienta): fondo rosa muy claro, icono a la izquierda del texto y una
   línea divisoria entre cada beneficio. En celular se parte en 2x2. */
.perks {
  background: var(--blush-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 0 clamp(34px, 5vw, 60px);
}
.perks__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.perk {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 2vw, 30px);
  transition: background .2s;
}
.perk + .perk { box-shadow: inset 1px 0 0 var(--line); }
.perk:hover { background: var(--blush); }
.perk svg { flex: none; color: var(--rosa); }
.perk h3 { margin: 0 0 3px; font: 500 14.5px/1.25 var(--sans); text-transform: uppercase; letter-spacing: .04em; }
.perk p { font: 300 13px/1.5 var(--sans); color: var(--ink-2); }

@media (max-width: 900px) {
  .perks__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk:nth-child(odd) { box-shadow: none; }
  .perk:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--line); }
  .perk:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}
/* Celular: los 4 en fila, sólo icono y nombre. La frase de apoyo se va
   (apretada en 2 columnas se veía a montones) y el icono queda dentro de un
   círculo rosa para que se vea limpio. */
@media (max-width: 640px) {
  .perks { padding: 4px 0 2px; }
  .perks__in { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 6px; }
  .perk,
  .perk:nth-child(n) {
    flex-direction: column; text-align: center; gap: 7px;
    padding: 16px 4px; box-shadow: none;
  }
  .perk:hover { background: none; }
  .perk svg {
    width: 20px; height: 20px; box-sizing: content-box;
    padding: 9px; border-radius: 50%; background: var(--white);
  }
  .perk h3 { margin: 0; font-size: 10.5px; letter-spacing: .02em; line-height: 1.3; }
  .perk p { display: none; }
}

/* ============ PÁGINA DE CATEGORÍA ============ */
.crumbs { padding: 22px 0 0; font: 300 12.5px/1.6 var(--sans); color: var(--muted); }
.crumbs a:hover { color: var(--rosa-d); }
.chd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 0 clamp(18px, 2.4vw, 28px); }
.chd__n { margin-top: 2px; font: 400 13px/1 var(--sans); color: var(--muted); }
.sortbox { display: flex; align-items: center; gap: 9px; flex: none; }
.sortbox span { font: 400 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sortbox select {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 400 13.5px/1 var(--sans); cursor: pointer;
}

/* ============ FICHA DE PRODUCTO ============ */
/* La foto de la ficha tiene tope (una foto de 900px de ancho obliga a
   desplazarse para leer el precio); el resto del ancho va para los datos. */
.pdp { display: grid; grid-template-columns: minmax(300px, 560px) minmax(300px, 1fr); gap: clamp(22px, 3vw, 56px); margin: 10px 0 clamp(40px, 6vw, 70px); align-items: start; }
/* Pantalla ancha: tres columnas (foto · compra · qué debes saber) */
@media (min-width: 1400px) {
  .pdp { grid-template-columns: minmax(320px, 600px) minmax(340px, 1fr) minmax(300px, 400px); }
}
.pdp__side { background: var(--blush); border-radius: var(--r); padding: clamp(22px, 2vw, 30px); }
.pdp__side h2 { margin-bottom: 4px; font: italic 400 20px/1.2 var(--script); color: var(--rosa-d); }
.pdp__side .pdp__meta { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(226, 127, 166, .3); }
.pdp__side .btn { margin-top: 20px; }
.pdp__side b { font-weight: 500; color: var(--ink); }
.pdp__m {
  background: var(--blush-2); border-radius: var(--r); overflow: hidden;
  display: grid; place-items: center; aspect-ratio: 4 / 5;
}
.pdp__d { max-width: 62ch; }
.pdp__m img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.pdp__c { font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pdp__t { margin: 10px 0 0; font: 400 clamp(26px, 3.4vw, 40px)/1.15 var(--sans); }
.pdp__pr { margin-top: 12px; font: 500 26px/1 var(--sans); color: var(--rosa-d); }
.pdp__pr s { margin-left: 10px; font: 400 17px/1 var(--sans); color: var(--muted); }
.pdp__d { margin-top: 18px; font: 300 15.5px/1.8 var(--sans); color: var(--ink-2); }
.pdp__lbl { margin: 24px 0 10px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes button {
  min-width: 52px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font: 400 14px/1 var(--sans); transition: all .18s;
}
.sizes button:hover { border-color: var(--rosa-l); color: var(--rosa-d); }
.sizes button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pdp__acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.pdp__note { margin-top: 16px; font: 300 13px/1.7 var(--sans); color: var(--muted); }
.pdp__meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.pdp__meta div { display: flex; gap: 10px; font: 300 13.5px/1.5 var(--sans); color: var(--ink-2); }
.pdp__meta svg { flex: none; color: var(--rosa); margin-top: 2px; }
#gc-inp {
  width: 100%; max-width: 250px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--white); font: 400 14px/1 var(--sans);
}

/* ============ PÁGINA DE INFORMACIÓN ============ */
/* Página de información: historia a la izquierda, preguntas a la derecha.
   Así usa todo el ancho en escritorio en vez de ser una columna angosta. */
.doc { max-width: 1180px; margin: 0 auto clamp(40px, 6vw, 70px); }
.doc > div > p { max-width: 72ch; }
.doc__h2 { margin: 26px 0 14px; font: italic 400 clamp(20px, 2.34vw, 30px)/1.25 var(--script); color: var(--rosa); }
@media (min-width: 1100px) {
  .doc { max-width: none; display: grid; grid-template-columns: 1fr minmax(380px, 46%); gap: clamp(28px, 3.4vw, 64px); align-items: start; }
  .doc__h2 { margin-top: 60px; }
}
@media (min-width: 1600px) { .faq { grid-template-columns: 1fr 1fr; align-items: start; } }
.doc h2 { margin: clamp(30px, 4vw, 46px) 0 12px; font: italic 400 clamp(20px, 2.65vw, 30px)/1.25 var(--script); color: var(--rosa); }
.doc p { margin-top: 13px; font: 300 15.5px/1.8 var(--sans); color: var(--ink-2); }
.doc p a { color: var(--rosa-d); border-bottom: 1px solid var(--rosa-l); }
.doc__hero { margin: 18px 0 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.faq { margin-top: 8px; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); overflow: hidden; }
.faq details[open] { background: var(--blush-2); border-color: var(--rosa-l); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; cursor: pointer; font: 400 15px/1.4 var(--sans); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 22px/1 var(--sans); color: var(--rosa); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 20px 18px; margin: 0; font: 300 14.5px/1.75 var(--sans); color: var(--ink-2); }
.docgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 18px; }
.doccard { padding: 22px; border-radius: var(--r-s); background: var(--blush); }
.doccard h3 { font: italic 400 20px/1.1 var(--script); color: var(--rosa-d); }
.doccard p { margin-top: 7px; font-size: 14px; }

/* ============ CUENTA (maqueta) ============ */
.auth { max-width: 470px; margin: 12px auto clamp(40px, 6vw, 70px); text-align: center; }
.auth__card { padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-s); }
.tabs { display: flex; gap: 6px; margin: 22px 0 20px; padding: 5px; background: var(--blush-2); border-radius: 999px; }
.tabs button { flex: 1; padding: 10px; border-radius: 999px; font: 400 13.5px/1 var(--sans); color: var(--ink-2); transition: all .2s; }
.tabs button.on { background: var(--white); color: var(--rosa-d); box-shadow: var(--sh-s); }
.fld { display: block; text-align: left; margin-bottom: 13px; }
.fld span { display: block; margin-bottom: 6px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fld input {
  width: 100%; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font: 400 14.5px/1 var(--sans);
}
.fld input:focus { outline: none; border-color: var(--rosa); }
.auth__note { margin-top: 16px; font: 300 12px/1.6 var(--sans); color: var(--muted); }
.dash { display: grid; grid-template-columns: 300px 1fr; gap: clamp(18px, 3vw, 34px); margin: 12px 0 clamp(40px, 6vw, 70px); align-items: start; }
.dash__side { padding: 24px; border-radius: var(--r); background: var(--blush); }
.dash__me { display: flex; align-items: center; gap: 14px; }
.dash__av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--rosa); color: #fff; font: 500 21px/1 var(--sans); }
.dash__me b { display: block; font: 500 15px/1.4 var(--sans); }
.dash__me span { display: block; font: 300 12.5px/1.5 var(--sans); color: var(--ink-2); word-break: break-all; }
.dash__out { margin-top: 20px; width: 100%; padding: 11px; border: 1px solid var(--rosa-l); border-radius: 999px; font: 400 13px/1 var(--sans); color: var(--rosa-d); background: var(--white); transition: all .18s; }
.dash__out:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.ord { border: 1px solid var(--line); border-radius: var(--r-s); padding: 18px; margin-bottom: 12px; }
.ord__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ord__t b { font: 500 15px/1.3 var(--sans); }
.ord__t span { display: block; font: 300 12px/1.4 var(--sans); color: var(--muted); }
/* (Los estados de pedido en producción usan .tag, más abajo; la .chip del
   sitio es la pestaña Entrar / Crear cuenta.) */
.ord ul { margin: 13px 0; display: grid; gap: 5px; }
.ord li { font: 300 13.5px/1.5 var(--sans); color: var(--ink-2); }
.ord__f { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font: 400 13.5px/1 var(--sans); }
.ord__f b { font-weight: 500; color: var(--rosa-d); }

/* ============ FOOTER ============ */
.ft { margin-top: clamp(40px, 6vw, 70px); border-top: 1px solid var(--line); background: var(--blush-2); }
.ft__g {
  max-width: var(--max); margin: 0 auto; padding: clamp(34px, 5vw, 58px) var(--pad) clamp(20px, 3vw, 34px);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: clamp(20px, 3vw, 40px);
}
.ft__slog { margin: 14px 0 18px; max-width: 30ch; font: 300 14px/1.7 var(--sans); color: var(--ink-2); }
.soc { display: flex; gap: 9px; }
.soc a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--rosa); box-shadow: var(--sh-s); transition: background .18s, color .18s, transform .18s;
}
.soc a:hover { background: var(--rosa); color: #fff; transform: translateY(-2px); }
.ft__t {
  display: block; width: 100%; text-align: left; padding: 0 0 14px;
  font: italic 400 19px/1 var(--script); color: var(--rosa-d);
}
.ft__t svg { display: none; }
.ft__col ul { display: grid; gap: 9px; }
.ft__col li, .ft__body p { font: 300 13.5px/1.6 var(--sans); color: var(--ink-2); }
.ft__col a:hover { color: var(--rosa-d); }
.ft__body p + p { margin-top: 9px; }
.ft__map { display: inline-block; margin-top: 14px; font: 500 13px/1 var(--sans); color: var(--rosa-d); }
.ft__map:hover { text-decoration: underline; }
.ft__end {
  max-width: var(--max); margin: 0 auto; padding: 16px var(--pad) 22px;
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font: 300 12px/1.6 var(--sans); color: var(--muted);
}
.ft__end a { color: var(--rosa-d); }

/* ============ NAV INFERIOR (móvil) ============ */
.bnav { display: none; }
.bnav-pad { display: none; }

/* ============ BURBUJA WHATSAPP ============ */
.wa {
  position: fixed; right: 18px; bottom: 20px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rosa); color: #fff; box-shadow: 0 14px 30px -12px rgba(201, 100, 139, .95);
  transition: transform .2s, background .2s;
}
.wa:hover { background: var(--rosa-d); transform: scale(1.06); }

/* ============ OVERLAYS Y PANELES ============ */
.ov {
  position: fixed; inset: 0; z-index: 90; display: flex;
  background: rgba(58, 51, 53, .34); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.ov.on { opacity: 1; pointer-events: auto; }
.pnl {
  display: flex; flex-direction: column; width: min(400px, 92vw); height: 100%;
  background: var(--white); transition: transform .34s cubic-bezier(.22,.7,.3,1);
}
.pnl--l { margin-right: auto; transform: translateX(-102%); }
.pnl--r { margin-left: auto; transform: translateX(102%); }
.ov.on .pnl { transform: none; }
.pnl__hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pnl__t { font: italic 400 21px/1 var(--script); color: var(--ink); }
.pnl__t i { font-style: normal; color: var(--rosa); }
.x { width: 34px; height: 34px; border-radius: 50%; font: 300 26px/1 var(--sans); color: var(--ink-2); display: grid; place-items: center; }
.x:hover { background: var(--blush); color: var(--rosa-d); }
.pnl__bd { flex: 1; overflow-y: auto; padding: 12px 8px; }
.pnl__ft { padding: 16px 20px; border-top: 1px solid var(--line); font: 300 12.5px/1.7 var(--sans); color: var(--muted); }
/* MENÚ DE CATEGORÍAS (el que abre el hamburguesa y el botón "Categorías" de la
   barra inferior). La clienta dijo que estos títulos se veían muy simples: los
   quería MÁS GRANDES, llamativos, en rosita y con una tipografía que imponga
   más → Fraunces 700 en el rosa del logo, a 27px. */
.drw-l {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  font: 700 clamp(23px, 6.2vw, 28px)/1.15 var(--display); color: var(--marca);
  font-optical-sizing: auto; transition: background .18s, color .18s;
}
.drw-l:hover, .drw-l:focus-visible { background: var(--blush); color: var(--rosa-d); }
.drw-l span { flex: none; font: 400 20px/1 var(--sans); color: var(--rosa); }
.drw-h { display: block; padding: 16px 14px 8px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* Enlace suelto del menú (WhatsApp, cuenta…): sin el peso de una categoría */
.drw-x { display: block; padding: 12px 14px; border-radius: 12px; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.drw-x:hover { background: var(--blush-2); color: var(--rosa-d); }

/* ---------- Carrito ---------- */
.pnl__cart { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cart-ls { flex: 1; overflow-y: auto; padding: 14px 18px; }
.cart-l { display: grid; grid-template-columns: 66px 1fr auto; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cart-l img { width: 66px; height: 84px; object-fit: contain; background: var(--blush-2); border-radius: 10px; padding: 5px; }
.cart-l__n { font: 400 14px/1.4 var(--sans); }
.cart-l__p { margin-top: 3px; font: 300 12.5px/1 var(--sans); color: var(--muted); }
.qty { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.qty button { width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line); font: 400 15px/1 var(--sans); color: var(--ink-2); }
.qty button:hover { border-color: var(--rosa); color: var(--rosa-d); }
.qty b { min-width: 20px; text-align: center; font: 500 13.5px/1 var(--sans); }
.qty .del { width: auto; padding: 0 10px; border: 0; font: 300 12px/1 var(--sans); color: var(--muted); }
.qty .del:hover { color: var(--rosa-d); text-decoration: underline; }
.cart-l__t { font: 500 14px/1 var(--sans); }
.cart-tot { padding: 18px; border-top: 1px solid var(--line); background: var(--blush-2); }
.cart-tot__r { display: flex; justify-content: space-between; margin-bottom: 8px; font: 300 14px/1.4 var(--sans); color: var(--ink-2); }
.cart-tot__r--b { padding-top: 10px; border-top: 1px solid var(--line); font: 500 18px/1 var(--sans); color: var(--ink); }
.paytabs { display: flex; gap: 6px; margin: 14px 0 12px; padding: 5px; background: var(--white); border-radius: 999px; border: 1px solid var(--line); }
.paytabs button { flex: 1; padding: 9px; border-radius: 999px; font: 400 13px/1 var(--sans); color: var(--ink-2); transition: all .2s; }
.paytabs button.on { background: var(--rosa); color: #fff; }
.pay-card { padding: 14px 16px; border: 1px dashed var(--rosa-l); border-radius: var(--r-s); background: var(--white); margin-bottom: 10px; }
.pay-card__r { display: flex; justify-content: space-between; gap: 12px; font: 300 13px/1.9 var(--sans); color: var(--ink-2); }
.pay-card__r b { font-weight: 500; color: var(--ink); }
.pay-note { margin-bottom: 12px; font: 300 12px/1.6 var(--sans); color: var(--muted); }
.cart-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; }
.cart-empty b { font: italic 400 23px/1.2 var(--script); color: var(--rosa); }
.cart-empty p { font: 300 14px/1.6 var(--sans); color: var(--ink-2); }

/* ---------- Buscador ---------- */
.srch {
  width: min(640px, 94vw); margin: clamp(50px, 12vh, 120px) auto auto; align-self: flex-start;
  background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  transform: translateY(-16px); transition: transform .3s;
}
.ov.on .srch { transform: none; }
.srch__top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.srch__top input { flex: 1; border: 0; outline: none; font: 400 16px/1 var(--sans); background: none; }
.srch__res { max-height: min(56vh, 440px); overflow-y: auto; padding: 8px; }
.srch__i { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; }
.srch__i:hover { background: var(--blush-2); }
.srch__i img { width: 46px; height: 58px; object-fit: contain; background: var(--blush-2); border-radius: 8px; padding: 3px; }
.srch__i-n { font: 400 14.5px/1.35 var(--sans); }
.srch__i-c { font: 300 12px/1.4 var(--sans); color: var(--muted); }
.srch__i-p { font: 500 14px/1 var(--sans); color: var(--rosa-d); }
.srch__hint { padding: 24px 16px; text-align: center; font: 300 14px/1.6 var(--sans); color: var(--muted); }

/* Enlaces con forma de botón de texto (¿olvidaste tu contraseña?) */
.link-btn {
  display: block; width: 100%; margin-top: 12px; padding: 4px;
  background: none; border: 0; cursor: pointer;
  font: 400 13px/1.4 var(--sans); color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.link-btn:hover { color: var(--rosa-d); }

/* Acuse de recibo al volver de la pasarela de pago */
.thanks-txt { margin: 0 0 20px; font: 300 15px/1.7 var(--sans); color: var(--ink); }
.thanks-txt strong { font-weight: 600; color: var(--rosa-d); }

/* Resumen de la compra dentro del acuse */
.ord-sum { margin-bottom: 20px; text-align: left; }
.ord-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ord-img { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.ord-img--none { background: var(--bg); }
.ord-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ord-info strong { font: 500 14px/1.35 var(--sans); color: var(--ink); }
.ord-info span { font: 300 12px/1.3 var(--sans); color: var(--muted); }
.ord-price { font: 500 14px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.ord-tot { padding-top: 12px; margin-top: 4px; }
.ord-tot + .ord-tot { border-top: 1px solid var(--line); margin-top: 12px; }
.ord-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; font: 300 13px/1.5 var(--sans); color: var(--muted); }
.ord-row > span { white-space: nowrap; } /* que "Envío a" no se parta en dos renglones */
.ord-row b { font-weight: 500; color: var(--ink); text-align: right; }
.ord-row--tot { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 15px; }
.ord-row--tot b { font-weight: 600; font-size: 18px; color: var(--rosa-d); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 120; transform: translate(-50%, 22px);
  padding: 13px 24px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 400 14px/1 var(--sans); box-shadow: var(--sh);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============ ENTRADA ESCALONADA ============ */
.rv { animation: rise .6s cubic-bezier(.22,.7,.3,1) both; }
.rv:nth-child(2) { animation-delay: .06s; }
.rv:nth-child(3) { animation-delay: .12s; }
.rv:nth-child(4) { animation-delay: .18s; }
.rv:nth-child(5) { animation-delay: .24s; }
.rv:nth-child(6) { animation-delay: .3s; }
.rv:nth-child(7) { animation-delay: .36s; }
.rv:nth-child(n+8) { animation-delay: .42s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ============ RESPONSIVO ============ */

/* Escritorio: flechas de las tiras */
@media (min-width: 900px) { .strip-nav { display: flex; } }

/* Tabletas anchas */
@media (max-width: 1040px) {
  .ft__g { grid-template-columns: 1fr 1fr; }
}

/* El header se cambia a hamburguesa ANTES que el resto del diseño (1060 y no
   900) porque desde el 27 de agosto de 2026 la barra lleva las ocho entradas,
   no cuatro: por debajo de eso "Sobre nosotras" se le echaba encima a la lupa
   y al botón de WhatsApp. Se comprobó midiendo la barra a 1440, 1100, 1000,
   981 y 979 px. Debajo de 1060 las categorías siguen todas a un toque, en el
   menú lateral, que se pinta de la misma lista (NAV_CATS). Las tres reglas
   van juntas: si el nav se esconde, tiene que salir el hamburguesa y el logo
   se recentra. */
@media (max-width: 1060px) {
  .hd__burger { display: grid; place-items: center; }
  .nav { display: none; }
  .logo { margin: 0 auto 0 4px; }
}

/* Tabletas: el resto del diseño pasa a una columna */
@media (max-width: 900px) {
  .about__g, .cont__g, .revs, .pdp, .dash { grid-template-columns: 1fr; }
  .about__ph img { aspect-ratio: 16 / 10; }
  .cont__ph img { aspect-ratio: 16 / 10; }
  .polas { height: 240px; }
  .dash__side { order: 2; }
}

/* Móvil: nav inferior, footer en acordeón */
@media (max-width: 820px) {
  .hd__cta { display: none; }
  .hd__acc { display: none; }
  .hd__in { height: 64px; gap: 10px; }

  .bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .bnav a, .bnav button {
    position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 2px 10px;
    font: 400 10px/1 var(--sans); color: var(--ink-2);
  }
  .bnav .on-r { color: var(--rosa-d); }
  .dot--bn { top: 4px; right: 50%; margin-right: -20px; }
  .bnav-pad { display: block; height: 60px; }
  .wa { bottom: 78px; width: 48px; height: 48px; }

  /* ---- Pie compacto en celular ----
     Ocupaba casi una pantalla entera de alto. Ahora: el bloque de marca se
     encoge, los tres apartados van plegados (se abren al tocarlos) y el
     renglón final va en una sola línea. */
  .ft { margin-top: clamp(28px, 5vw, 40px); }
  .ft__g { grid-template-columns: 1fr; gap: 0; padding: 22px var(--pad) 8px; }
  .ft__g > div:first-child { margin-bottom: 14px; }
  .logo--ft img { height: 34px; }
  /* El eslogan ya está dicho arriba en la portada: en celular estorba */
  .ft__slog { display: none; }
  .soc { gap: 8px; }
  .soc a { width: 34px; height: 34px; }
  .soc a svg { width: 16px; height: 16px; }

  .ft__t {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px;
  }
  .ft__t svg { display: block; transition: transform .25s; }
  .ft__col ul, .ft__body { display: none; padding: 2px 0 12px; }
  .ft__col.open ul, .ft__col.open .ft__body { display: grid; }
  .ft__col.open .ft__t svg { transform: rotate(180deg); }
  .ft__col.open .ft__t { border-bottom: 0; }

  .ft__end {
    flex-direction: row; align-items: center; justify-content: center;
    text-align: center; gap: 4px 12px; padding: 12px var(--pad) 16px; font-size: 11.5px;
  }
}

/* Móvil chico */
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .card__i { padding: 11px 11px 13px; }
  .card__n { font-size: 13.5px; }
  .card__p { font-size: 14.5px; }
  .chd { flex-direction: column; align-items: stretch; }
  .sortbox { justify-content: space-between; }
  .sortbox select { flex: 1; }
  .shd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .shd__lnk { padding-bottom: 0; }
  .perks { grid-template-columns: 1fr; }
  .hero__facts { gap: 10px 18px; }
  .toast { left: 12px; right: 12px; bottom: 88px; transform: translateY(16px); text-align: center; }
  .toast.on { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   COMPONENTES DE PRODUCCIÓN
   Todo lo que el demo no tenía porque no tenía backend: aviso de la
   barra superior, carrito real, checkout (envío, pago, cupón, gift
   card), variantes de producto, cuenta de clienta y páginas de texto.
   Mismo lenguaje visual del demo: blanco, rosa empolvado, esquinas
   suaves y botones pastilla.
   ============================================================ */

/* ---------- Barra de aviso (la arma config.js: .track > .grp) ---------- */
.announcement {
  overflow: hidden; background: var(--blush); color: var(--ink-2);
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.announcement[hidden] { display: none; }
.announcement .track { display: flex; width: max-content; padding: 9px 0; animation: run 46s linear infinite; }
.announcement .grp { display: flex; align-items: center; white-space: pre; }
.announcement .grp span { white-space: pre; }
.announcement .grp em { margin: 0 18px; font-style: normal; color: var(--rosa); }

/* ---------- Botones heredados del backend ---------- */
/* store.js/product.js/cuenta.js pintan .btn-primary y .btn-ghost: se mapean
   a los botones pastilla del diseño para no tocar ese código. */
.btn-primary { background: var(--rosa); color: #fff; border: 0; }
.btn-primary:hover { background: var(--rosa-d); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--blush); color: var(--rosa-d); border-color: var(--rosa-l); box-shadow: none; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.back-link {
  display: inline-block; margin: 22px 0 6px;
  font: 400 13.5px/1 var(--sans); color: var(--muted);
}
.back-link:hover { color: var(--rosa-d); }
.empty-state {
  grid-column: 1 / -1;
  padding: 46px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--blush-2); color: var(--ink-2); font: 300 14.5px/1.7 var(--sans);
}
.empty-state a { color: var(--rosa-d); border-bottom: 1px solid var(--rosa-l); }

/* ---------- Overlays de producción ----------
   OJO: el JS del backend los abre y cierra con el atributo `hidden`
   (no con una clase), así que aquí se respeta ese mecanismo. */
.overlay {
  position: fixed; inset: 0; z-index: 90; display: flex;
  background: rgba(58, 51, 53, .34); backdrop-filter: blur(3px);
  animation: ovIn .22s ease both;
}
.overlay[hidden] { display: none; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }

/* Carrito lateral */
.drawer {
  display: flex; flex-direction: column; width: min(420px, 92vw); height: 100%;
  margin-left: auto; background: var(--white);
  animation: drwIn .3s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes drwIn { from { transform: translateX(102%); } to { transform: none; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font: italic 400 21px/1 var(--script); color: var(--ink); }
.drawer-items { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-foot { padding: 18px; border-top: 1px solid var(--line); background: var(--blush-2); }
.modal-close {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  font: 300 26px/1 var(--sans); color: var(--ink-2); display: grid; place-items: center;
}
.modal-close:hover { background: var(--blush); color: var(--rosa-d); }

/* Línea del carrito */
.cart-item { display: grid; grid-template-columns: 66px 1fr auto; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 66px; height: 84px; object-fit: cover; background: var(--blush-2); border-radius: 10px; }
.thumb-ph, .search-ph {
  width: 66px; height: 84px; border-radius: 10px; background: var(--blush);
  display: grid; place-items: center; color: var(--rosa); font-size: 20px;
}
.ci-name { font: 400 14px/1.4 var(--sans); }
.ci-variant { color: var(--muted); font-weight: 300; }
.ci-price { margin-top: 3px; font: 300 12.5px/1 var(--sans); color: var(--muted); }
.qty { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.qty button {
  width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line);
  font: 400 15px/1 var(--sans); color: var(--ink-2);
}
.qty button:hover { border-color: var(--rosa); color: var(--rosa-d); }
.qty span { min-width: 20px; text-align: center; font: 500 13.5px/1 var(--sans); }
.ci-remove { align-self: start; font: 300 12px/1 var(--sans); color: var(--muted); }
.ci-remove:hover { color: var(--rosa-d); text-decoration: underline; }

/* Totales */
.totals .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 300 14px/1.5 var(--sans); color: var(--ink-2); }
.totals .row.total { padding-top: 10px; border-top: 1px solid var(--line); font: 500 18px/1 var(--sans); color: var(--ink); }
.totals .row.discount { color: var(--ok); }
.drawer-foot .btn { margin-top: 12px; }

/* Modal del checkout */
.modal {
  position: relative; margin: auto; width: min(520px, 94vw); max-height: 92vh; overflow-y: auto;
  background: var(--white); border-radius: var(--r); padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--sh); animation: mdIn .3s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes mdIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.modal .modal-close { position: absolute; top: 12px; right: 12px; }
.modal-title { margin-bottom: 18px; font: italic 400 clamp(23px, 3.12vw, 31px)/1.15 var(--script); color: var(--rosa); }

/* Formularios */
.form label { display: block; margin-bottom: 13px; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea, .form select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white);
  font: 400 14.5px/1.4 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0;
}
.form textarea { border-radius: 16px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--rosa); }
.form .btn { margin-top: 6px; }
.form-hint { margin-top: 10px; font: 300 12.5px/1.6 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; }

/* Envío y pago */
.shipping-box { margin: 6px 0 16px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: var(--r-s); }
.shipping-box legend { padding: 0 8px; font: 500 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* Dirección desglosada: dos columnas, y a lo ancho los campos largos
   (calle, colonia, estado). En móvil cae a una sola columna. */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.addr-grid .addr-wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .addr-grid { grid-template-columns: 1fr; } }
/* `.form label` va en mayúsculas (son las etiquetas de los campos), pero estas
   opciones TAMBIÉN son <label>: se necesita más especificidad para que el
   nombre del método de envío se lea normal. */
.ship-opt, .form label.ship-opt {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font: 400 14px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.ship-opt.selected { border-color: var(--rosa); background: var(--blush-2); }
.ship-opt input { width: auto; margin: 0; accent-color: var(--rosa); }
.ship-name { flex: 1; }
.ship-cost { font-weight: 500; color: var(--rosa-d); }
.pay-info {
  margin-bottom: 16px; padding: 15px 17px; border: 1px dashed var(--rosa-l);
  border-radius: var(--r-s); background: var(--blush-2);
  font: 300 13px/1.8 var(--sans); color: var(--ink-2);
}
.pay-info[hidden] { display: none; }
.pay-info strong { display: block; margin-bottom: 6px; font: 500 14px/1 var(--sans); color: var(--ink); }
.pay-info code { font: 500 13px/1 var(--sans); color: var(--marca); }

/* Cupón y gift card */
.coupon-box { margin-bottom: 14px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font: 400 14px/1 var(--sans);
}
.coupon-row input:focus { outline: none; border-color: var(--rosa); }
.coupon-row .btn { margin: 0; flex: none; }
.gift-box { margin-bottom: 14px; padding: 13px 16px; border-radius: var(--r-s); background: var(--blush); }
.gift-check, .form label.gift-check { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 13.5px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.gift-check input { width: auto; margin: 0; accent-color: var(--rosa); }

/* Buscador */
.search-overlay { align-items: flex-start; }
.search-panel {
  width: min(640px, 94vw); margin: clamp(50px, 12vh, 120px) auto auto;
  background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  animation: mdIn .28s cubic-bezier(.22,.7,.3,1) both;
}
.search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--rosa); }
.search-bar input { flex: 1; border: 0; outline: none; background: none; font: 400 16px/1 var(--sans); color: var(--ink); }
.search-results { max-height: min(56vh, 440px); overflow-y: auto; padding: 8px; }
.search-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; }
.search-item:hover { background: var(--blush-2); }
.search-item img { width: 46px; height: 58px; object-fit: cover; background: var(--blush-2); border-radius: 8px; }
.search-item .search-ph { width: 46px; height: 58px; font-size: 15px; }
.search-item-info { display: grid; }
.search-item-name { font: 400 14.5px/1.35 var(--sans); }
.search-item-cat { font: 300 12px/1.4 var(--sans); color: var(--muted); }
.search-item-price { font: 500 14px/1 var(--sans); color: var(--rosa-d); }
.search-hint { padding: 24px 16px; text-align: center; font: 300 14px/1.6 var(--sans); color: var(--muted); }

/* Aviso flotante (toast) — el backend lo abre con el atributo hidden */
.toast[hidden] { display: none; }
.toast:not([hidden]) { opacity: 1; transform: translate(-50%, 0); animation: tstIn .3s cubic-bezier(.22,.7,.3,1) both; }
@keyframes tstIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* En móvil el aviso va de lado a lado (left/right, sin centrado por
   transform). La regla de arriba es posterior a la de la media query y con
   la misma especificidad, así que le reponía el translateX(-50%) y lo
   empujaba media pantalla fuera: solo se veía la mitad del texto. */
@media (max-width: 560px) {
  .toast:not([hidden]) { transform: none; animation-name: tstInMovil; }
  @keyframes tstInMovil { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* Burbuja de WhatsApp (mismo aspecto que .wa del demo) */
.wa-bubble {
  position: fixed; right: 18px; bottom: 20px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rosa); color: #fff; box-shadow: 0 14px 30px -12px rgba(201, 100, 139, .95);
  transition: transform .2s, background .2s;
}
.wa-bubble svg { width: 25px; height: 25px; }
.wa-bubble:hover { background: var(--rosa-d); transform: scale(1.06); }

/* Menú lateral de categorías (lo inyecta db.js con la clase .is-on) */
.ov.is-on { opacity: 1; pointer-events: auto; }
.ov.is-on .pnl { transform: none; }

/* Barra inferior en móvil (la inyecta db.js) */
.bottom-nav { display: none; }

/* ============ PÁGINA DE CATEGORÍA ============ */
.cat-page, .product-page, .account-page, .page-doc {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(40px, 6vw, 70px);
}
.cat-page-head { margin: 4px 0 clamp(18px, 2.4vw, 28px); }
.cat-page-head h1 {
  font: 700 clamp(32px, 4.4vw, 60px)/1.1 var(--display); color: var(--marca);
  font-optical-sizing: auto;
}
.cat-page-head p { margin-top: 6px; font: 400 13.5px/1 var(--sans); color: var(--muted); }

/* Mosaico de subcategorías (Ropa → Blusas, Vestidos, …) */
.subcat-grid {
  display: grid; gap: clamp(10px, 1.1vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.subcat-grid[hidden] { display: none; }
.subcat-tile {
  display: block; overflow: hidden; border-radius: var(--r-s); background: var(--blush);
  transition: transform .28s, box-shadow .28s;
}
.subcat-tile:nth-child(even) { background: var(--blush-2); }
.subcat-tile:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.subcat-tile img { width: 100%; height: clamp(160px, 14vw, 240px); object-fit: contain; padding: 10%; }
.subcat-tile-t, .subcat-tile__t { padding: 0 16px 20px; text-align: center; }
.subcat-tile-t h3, .subcat-tile__t h3 {
  font: 700 clamp(18px, 1.4vw, 23px)/1.15 var(--display); color: var(--marca); font-optical-sizing: auto;
}
.subcat-tile-t span, .subcat-tile__t span {
  display: block; margin-top: 7px;
  font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ============ FICHA DE PRODUCTO ============ */
.product-detail {
  display: grid; grid-template-columns: minmax(300px, 620px) minmax(300px, 1fr);
  gap: clamp(22px, 3.4vw, 60px); margin-top: 10px; align-items: start;
}
/* Galería: tira de miniaturas a la izquierda y la foto grande al lado */
.pd-gallery { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start; }
.pd-gallery:has(.pd-stage:only-child) { grid-template-columns: 1fr; }
.pd-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.pd-thumb {
  padding: 0; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--blush-2); cursor: pointer; transition: border-color .18s;
}
.pd-thumb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pd-thumb:hover { border-color: var(--rosa-l); }
.pd-thumb.selected { border-color: var(--rosa); }
.pd-stage { position: relative; }
.pd-zoom {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--white); color: var(--rosa-d); box-shadow: var(--sh); cursor: pointer;
  transition: transform .18s;
}
.pd-zoom:hover { transform: scale(1.08); }
.pd-img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain; padding: 6%;
  background: var(--blush-2); border-radius: var(--r);
}
/* Foto ampliada */
.zoom-overlay { display: grid; place-items: center; padding: 40px 20px; }
.zoom-overlay img { max-width: min(92vw, 900px); max-height: 88vh; border-radius: var(--r); background: var(--blush-2); }
.zoom-overlay .modal-close { position: fixed; top: 22px; right: 26px; z-index: 2; }

/* Botón de texto "Guía de tallas", junto a las tallas */
.size-guide {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--sans); color: var(--rosa-d);
}
.size-guide:hover { text-decoration: underline; text-underline-offset: 3px; }
.size-table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font: 400 14px/1 var(--sans); }
.size-table th, .size-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.size-table th { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.size-table td:first-child { font-weight: 500; color: var(--rosa-d); }

/* Carruseles de recomendaciones */
.pdp-rail { margin-top: clamp(34px, 4.5vw, 58px); }
.pdp-rail h2 { margin: 0 0 16px; font: 400 clamp(21px, 2.4vw, 27px)/1.2 var(--sans); }
.rail-wrap { position: relative; }
/* Flex con flex-shrink 0: en grid, los anchos en % dejaban que las tarjetas
   se encogieran cuando había muchas, y un carrusel de 2 salía gigante al
   lado de uno de 12. Así todas miden igual, haya las que haya. */
.rail {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 6px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card {
  flex: 0 0 190px;
  display: block; text-decoration: none; color: inherit;
}
@media (min-width: 900px)  { .rail-card { flex-basis: calc(25% - 12px); } }
@media (min-width: 1500px) { .rail-card { flex-basis: calc(16.666% - 14px); } }
.rail-card img, .rail-ph {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 14px; background: var(--blush-2); transition: transform .3s;
}
.rail-ph { display: grid; place-items: center; font-size: 30px; color: var(--rosa-l); }
.rail-card:hover img { transform: scale(1.03); }
/* nombre y precio a la izquierda, el "+" alineado a la derecha */
.rail-meta {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 10px; padding: 10px 2px 0;
}
.rail-name { grid-column: 1; font: 400 13.5px/1.4 var(--sans); color: var(--ink); text-decoration: none; }
.rail-name:hover { color: var(--rosa-d); }
.rail-price { grid-column: 1; font: 500 14px/1 var(--sans); color: var(--rosa-d); margin-top: 3px; }
/* La pastilla de opciones puede añadir una tercera fila, así que el botón
   "+" se estira hasta el final en vez de hasta la fila 3 fija. */
/* justify-self: dentro de un grid la pastilla se estiraría a todo el ancho
   de la columna y dejaría de parecer una pastilla. */
.rail-meta .card__opts { grid-column: 1; justify-self: start; margin-top: 6px; }
.rail-add {
  grid-column: 2; grid-row: 1 / -1; width: 30px; height: 30px;
  display: grid; place-items: center; border: 1px solid var(--rosa-l); border-radius: 50%;
  background: var(--white); color: var(--rosa-d); font: 400 17px/1 var(--sans); cursor: pointer;
  transition: all .18s;
}
.rail-add:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.rail-arrow {
  position: absolute; top: 38%; z-index: 2; width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--rosa); color: #fff; box-shadow: var(--sh); cursor: pointer;
  transition: transform .18s;
}
.rail-arrow:hover { transform: scale(1.08); }
.rail-arrow--prev { left: -14px; }
.rail-arrow--next { right: -14px; }
@media (max-width: 720px) { .rail-arrow { display: none; } }

/* Garantías de la tienda */
.pdp-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: clamp(34px, 4.5vw, 58px) 0 0; padding: clamp(20px, 2.2vw, 26px) 0;
  background: var(--blush); border-radius: var(--r);
}
.trust { display: flex; align-items: center; gap: 12px; padding: 4px clamp(14px, 1.8vw, 26px); }
.trust + .trust { border-left: 1px solid rgba(226, 127, 166, .3); }
.trust svg { width: 26px; height: 26px; flex: none; color: var(--rosa); }
.trust strong { display: block; font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.trust span { font: 300 12px/1.45 var(--sans); color: var(--ink-2); }

@media (max-width: 860px) {
  .pdp-trust { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .trust:nth-child(odd) + .trust { border-left: 1px solid rgba(226, 127, 166, .3); }
  .trust:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-thumbs { flex-direction: row; max-height: none; overflow-x: auto; order: 2; }
  .pd-thumb { flex: none; width: 66px; }
}
.pd-img.placeholder { display: grid; place-items: center; font-size: 46px; color: var(--rosa); }
.pm-cat { display: block; font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pm-name { margin: 10px 0 0; font: 400 clamp(26px, 3.4vw, 40px)/1.15 var(--sans); }
.card-prices { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price { font: 500 26px/1 var(--sans); color: var(--rosa-d); }
.price-old { font: 400 17px/1 var(--sans); color: var(--muted); text-decoration: line-through; }
.badge-sale { padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 10.5px/1 var(--sans); letter-spacing: .1em; }
.badge-out { display: inline-block; margin-top: 18px; padding: 11px 22px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font: 500 13px/1 var(--sans); }
.pm-desc { margin-top: 18px; max-width: 62ch; font: 300 15.5px/1.8 var(--sans); color: var(--ink-2); }
.variant-picker { margin-top: 24px; }
.variant-label { display: block; margin-bottom: 10px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.variant-label strong { color: var(--ink); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.variant-list { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-opt {
  display: grid; gap: 6px; justify-items: center; width: 84px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white);
  font: 400 11.5px/1.3 var(--sans); color: var(--ink-2); transition: all .18s;
}
.variant-opt img { width: 100%; height: 74px; object-fit: cover; border-radius: 10px; background: var(--blush-2); }
/* Color sin foto: círculo con el color, o su inicial si no lo reconocemos */
.swatch {
  width: 46px; height: 46px; margin: 14px 0; border-radius: 50%;
  border: 1px solid rgba(33, 26, 31, .16); box-shadow: inset 0 -2px 6px rgba(33, 26, 31, .08);
}
.swatch--letra {
  display: grid; place-items: center; background: var(--blush-2);
  font: 500 17px/1 var(--sans); color: var(--rosa-d); box-shadow: none;
}
.variant-opt:hover { border-color: var(--rosa-l); }
.variant-opt.selected { border-color: var(--rosa); background: var(--blush-2); color: var(--ink); }
.variant-opt.soldout { opacity: .45; }
.size-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips de talla: cuadrados de esquinas suaves, el elegido en fucsia */
.size-opt {
  min-width: 48px; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--white); font: 500 14px/1 var(--sans); color: var(--ink-2); transition: all .18s;
}
.size-opt:hover { border-color: var(--rosa-l); color: var(--rosa-d); }
.size-opt.selected { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.size-opt.soldout, .size-opt:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.gc-input {
  width: 100%; max-width: 250px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--white); font: 400 14px/1 var(--sans);
}
/* Gift card de regalo: datos de a quién se le manda */
.gc-gift {
  margin-top: 22px; padding: 16px 18px; border-radius: 16px;
  background: var(--rosa-bg, #fdf1f6); border: 1px solid var(--line);
}
.gc-gift-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font: 500 14px/1.4 var(--sans); color: var(--ink);
}
.gc-gift-check input { width: 18px; height: 18px; accent-color: var(--rosa); cursor: pointer; }
.gc-gift-hint { margin: 12px 0 4px; font: 400 12.5px/1.6 var(--sans); color: var(--ink-2); }
/* Solo los campos de adentro llevan el estilo de etiqueta en mayúsculas: si
   se aplica a todo .gc-gift label, la casilla de arriba también lo hereda y
   se acomoda en columna, con el texto en mayúsculas. */
.gc-gift #gcGiftFields label {
  display: flex; flex-direction: column; gap: 5px; margin-top: 12px;
  font: 500 12px/1.4 var(--sans); color: var(--ink-2);
  letter-spacing: .04em; text-transform: uppercase;
}
.gc-gift .gc-opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.gc-gift input[type="text"], .gc-gift input[type="email"], .gc-gift textarea {
  width: 100%; padding: 11px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); font: 400 14px/1.5 var(--sans); color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.gc-gift textarea { resize: vertical; min-height: 66px; }
.gc-gift input:focus, .gc-gift textarea:focus {
  outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(229,56,127,.12);
}

.pd-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.pd-actions .btn { padding: 13px 30px; border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: .04em; }
.pd-stock { margin-top: 12px; font: 500 13px/1 var(--sans); color: var(--marca); }
/* Acordeones de la ficha (envíos, tallas, cambios) */
.pdp-details { margin-top: 28px; display: grid; gap: 10px; }
.pdp-details details { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); overflow: hidden; }
.pdp-details details[open] { background: var(--blush-2); border-color: var(--rosa-l); }
.pdp-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; cursor: pointer; font: 400 14.5px/1.4 var(--sans); list-style: none;
}
.pdp-details summary::-webkit-details-marker { display: none; }
.pdp-details summary::after { content: "+"; flex: none; font: 300 21px/1 var(--sans); color: var(--rosa); }
.pdp-details details[open] summary::after { content: "–"; }
.pdp-details .d-body { padding: 0 18px 16px; font: 300 14px/1.75 var(--sans); color: var(--ink-2); }

/* ============ CUENTA DE CLIENTA ============ */
.account-page h1 { font: italic 400 clamp(27px, 3.59vw, 41px)/1.15 var(--script); color: var(--rosa); }
.account-page h1 em { font-style: normal; color: var(--rosa-d); }
.account-page > #authPane { max-width: 470px; margin: 0 auto; }
.chips { display: flex; gap: 6px; margin: 20px 0; padding: 5px; background: var(--blush-2); border-radius: 999px; }
.chip { flex: 1; padding: 10px; border-radius: 999px; font: 400 13.5px/1 var(--sans); color: var(--ink-2); transition: all .2s; }
.chip.active { background: var(--white); color: var(--rosa-d); box-shadow: var(--sh-s); }
.profile-card {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  margin: 20px 0 30px; padding: 22px 24px; border-radius: var(--r); background: var(--blush);
  font: 300 13.5px/1.6 var(--sans); color: var(--ink-2);
}
.profile-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--rosa); color: #fff; font: 500 21px/1 var(--sans);
}
.profile-card strong, .profile-card b { display: block; font: 500 16px/1.4 var(--sans); color: var(--ink); }
.orders-title { margin: 34px 0 14px; font: italic 400 clamp(20px, 2.5vw, 27px)/1.2 var(--script); color: var(--rosa); }
.my-orders { display: grid; gap: 12px; }
.my-order { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-s); }
.my-order.gift-total { background: var(--blush); border-color: var(--rosa-l); }
.mo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mo-head strong { font: 500 15px/1.3 var(--sans); }
.mo-total { margin-left: auto; font: 500 16px/1 var(--sans); color: var(--rosa-d); }
.mo-items { margin-top: 11px; font: 300 13.5px/1.7 var(--sans); color: var(--ink-2); }
.mo-date { margin-top: 9px; font: 300 12px/1 var(--sans); color: var(--muted); }
.tag { padding: 6px 13px; border-radius: 999px; font: 500 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; background: var(--line-2); color: var(--ink-2); }
.tag.pagado, .tag.confirmado { background: #EAF6EF; color: var(--ok); }
.tag.enviado, .tag.entregado { background: var(--blush); color: var(--rosa-d); }
.tag.pendiente { background: #FBF3E6; color: #96702C; }
.tag.cancelado { background: #FBECEA; color: var(--err); }
.gift-redeem { margin-bottom: 14px; }
.profile-actions { margin-top: 34px; display: grid; gap: 10px; max-width: 420px; }

/* ============ PÁGINAS DE TEXTO (nosotros / preguntas) ============ */
.page-doc { max-width: 1180px; }
.page-sub { margin-top: 22px; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.page-doc h1 { margin-top: 6px; font: italic 400 clamp(30px, 3.59vw, 50px)/1.12 var(--script); color: var(--rosa); }
.page-doc h1 em { font-style: normal; color: var(--rosa-d); }
.page-doc h2 { margin: clamp(30px, 4vw, 46px) 0 12px; font: italic 400 clamp(20px, 2.65vw, 30px)/1.25 var(--script); color: var(--rosa); }
.page-doc p, .page-doc li { margin-top: 13px; font: 300 15.5px/1.8 var(--sans); color: var(--ink-2); }
.page-doc p a, .page-doc li a { color: var(--rosa-d); border-bottom: 1px solid var(--rosa-l); }
.page-doc strong { color: var(--ink); font-weight: 500; }
.page-doc ul { display: grid; gap: 4px; }
.page-doc ul li { position: relative; padding-left: 20px; }
.page-doc ul li::before { content: "♡"; position: absolute; left: 0; top: 2px; color: var(--rosa); font-size: 13px; }
.doc-intro { display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: clamp(22px, 3.4vw, 56px); align-items: start; }
.doc-intro__foto { margin: 0; }
.doc-intro__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh); }
/* La guía de preguntas usa .faq (mismo estilo del demo) */
.page-doc .faq { margin-top: 10px; }
@media (min-width: 1100px) { .page-doc .faq { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ============ RESPONSIVO DE LOS COMPONENTES DE PRODUCCIÓN ============ */
@media (max-width: 900px) {
  .product-detail, .doc-intro { grid-template-columns: 1fr; }
  .doc-intro__foto img { aspect-ratio: 16 / 10; }
}
@media (max-width: 820px) {
  /* Barra inferior: mismo diseño que la del demo */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a, .bottom-nav button {
    display: grid; justify-items: center; gap: 3px; padding: 9px 2px 10px;
    font: 400 10px/1 var(--sans); color: var(--ink-2);
  }
  .bottom-nav .on { color: var(--rosa-d); }
  .wa-bubble { bottom: 78px; width: 48px; height: 48px; }
  body { padding-bottom: 60px; }
  .drawer { width: 100%; }

  /* Enlaces de texto ("Ver todo", "Volver a la tienda", el correo y los
     telefonos del pie): con el dedo se fallan. El texto se ve igual; lo
     que crece es la zona que responde al toque, que estaba en 13-15px
     cuando lo comodo son 44. El margen negativo evita que ese aire
     extra descuadre lo que tienen alrededor. */
  .shd__lnk, .back-link,
  .ft a, .cont__rows a, .doccard a {
    padding-top: 10px; padding-bottom: 10px;
    margin-top: -10px; margin-bottom: -10px;
  }
  .shd__lnk { padding-bottom: 14px; margin-bottom: -6px; }
  /* "¿Olvidaste tu contraseña?" es un boton de verdad, no un pie de nota */
  .link-btn { padding-top: 12px; padding-bottom: 12px; }
  /* OJO: los enlaces DENTRO de un parrafo (las preguntas frecuentes, por
     ejemplo) se quedan como estan a proposito: darles aire vertical
     descuadraria el interlineado del texto que los rodea. */
}
@media (max-width: 560px) {
  .modal { border-radius: 22px 22px 0 0; margin: auto 0 0; width: 100%; max-height: 94vh; }
  .coupon-row { flex-direction: column; }
  .coupon-row .btn { width: 100%; }
  .variant-opt { width: 74px; }
  .variant-opt img { height: 64px; }
}

/* Corazón que acompaña a los títulos de sección (va en el diseño nuevo
   de categorías). En SVG y no como emoji, para que se vea igual en todos
   los teléfonos y tome el color del texto. */
.h-heart {
  width: .72em; height: .72em; flex: none;
  display: inline-block; vertical-align: baseline;
  margin-left: .28em; color: var(--marca);
}