/* ============================================================
   DAMASA · e-commerce de belleza
   Editorial de revista: Didone + geométrica, oro sobre carbón,
   catálogo sobre crema.
   ============================================================ */

:root{
  /* ============================================================
     PALETA · solo negro, blanco, rosado y dorado.
     Los neutros llevan un punto de rosa para que el conjunto
     se lea como un sistema y no como gris de plantilla.
     ============================================================ */

  /* negro */
  --carbon:      oklch(14% 0.004 350);
  --carbon-alto: oklch(20% 0.006 350);

  /* blanco */
  --crema:       oklch(99% 0.003 350);
  --crema-hueso: oklch(95.5% 0.022 350);
  /* velo rosa: fondo de secciones enteras, no solo de detalles */
  --rosa-velo:   oklch(93% 0.038 350);

  /* negro para texto + sus grises (negro sobre blanco) */
  --tinta:       oklch(18% 0.006 350);
  --tinta-suave: oklch(48% 0.008 350);

  /* dorado */
  --oro:       oklch(78% 0.115 88);
  --oro-claro: oklch(88% 0.075 90);
  --oro-hondo: oklch(62% 0.110 80);

  /* rosado */
  --rosa:       oklch(75% 0.115 350);
  --rosa-claro: oklch(90% 0.050 350);
  --rosa-hondo: oklch(56% 0.150 356);
  /* rosa casi tinta: para texto sobre el velo rosa, donde
     --rosa-hondo se queda en 4,05 y no llega a AA */
  --rosa-tinta: oklch(38% 0.140 356);
  /* dorado profundo: el --oro normal sobre superficie clara
     se queda en 2,95 y no es legible como texto */
  --oro-tinta:  oklch(47% 0.110 74);

  /* verde oficial de WhatsApp: es una marca ajena, no se repinta */
  --whatsapp:      #25D366;
  --whatsapp-hover:#1EBE5A;

  /* estados, dentro de la misma paleta */
  --exito: var(--oro-hondo);
  --malo:  var(--rosa-hondo);

  --linea-oro:   color-mix(in oklch, var(--oro) 38%, transparent);
  --linea-rosa:  color-mix(in oklch, var(--rosa) 42%, transparent);
  --linea-tinta: color-mix(in oklch, var(--tinta) 14%, transparent);

  /* --- tipografía --- */
  --display: "Bodoni Moda", Didot, Georgia, serif;
  --texto:   Jost, Futura, system-ui, sans-serif;

  --t-xs:  clamp(.68rem, .65rem + .14vw, .75rem);
  --t-sm:  clamp(.82rem, .79rem + .16vw, .9rem);
  --t-md:  clamp(.95rem, .92rem + .18vw, 1.05rem);
  --t-lg:  clamp(1.2rem, 1.05rem + .7vw, 1.65rem);
  --t-xl:  clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem);
  --t-2xl: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);

  /* --- ritmo espacial: recortado, el sitio respiraba de más --- */
  --s-1: clamp(.4rem, .35rem + .2vw, .6rem);
  --s-2: clamp(.75rem, .6rem + .5vw, 1.1rem);
  --s-3: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  --s-4: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --s-5: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);

  --ancho: 78rem;
  --alto-header: 4.5rem;

  /* --- motion --- */
  --sal: cubic-bezier(.16,1,.3,1);
  --t-rapido: 170ms;
  --t-medio:  300ms;
  --t-lento:  520ms;

  --z-header: 100;
  --z-panel:  200;
  --z-visor:  300;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:light;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* el header flota encima: sin esto las anclas quedan tapadas */
:target, section[id], main[id]{ scroll-margin-top:calc(var(--alto-header) + 1rem); }

body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:var(--t-md); font-weight:400;
  line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--rosa-hondo); outline-offset:3px; border-radius:2px; }

a, button, input, select, summary, .chip, .ficha__foto{
  touch-action:manipulation;
  -webkit-tap-highlight-color:color-mix(in oklch, var(--rosa) 20%, transparent);
}

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.06; margin:0; }

.env{ width:min(100% - 2rem, var(--ancho)); margin-inline:auto; }
@media (min-width:768px){ .env{ width:min(100% - 4rem, var(--ancho)); } }
.env.estrecho{ width:min(100% - 2rem, 34rem); }

.salto{ position:absolute; left:-9999px; top:0; }
.salto:focus{
  left:var(--s-2); top:var(--s-2); z-index:999;
  background:var(--oro); color:var(--carbon); padding:.7rem 1.2rem;
}

.rotulo{
  font-size:var(--t-xs); letter-spacing:.3em; text-transform:uppercase;
  font-weight:500; color:var(--rosa-hondo);
  display:flex; align-items:center; gap:var(--s-2); margin:0 0 var(--s-1);
}
.rotulo::after{ content:""; flex:1; height:1px; background:var(--linea-rosa); }
.seccion--oscura .rotulo, .cierre .rotulo{ color:var(--rosa); }

/* ============================ HEADER ============================ */
/* Contenedor sobrepuesto que se retira al bajar y vuelve al subir. */
.header{
  position:fixed; z-index:var(--z-header);
  inset:calc(var(--s-2) + env(safe-area-inset-top)) 0 auto;
  padding-inline:calc(var(--s-2) + env(safe-area-inset-left));
  transition:transform var(--t-medio) var(--sal), opacity var(--t-rapido) linear;
  will-change:transform;
}
.header[data-oculto="si"]{
  transform:translateY(calc(-100% - var(--s-2) - 1rem));
  opacity:0;
  pointer-events:none;
}

.header__caja{
  width:min(100% - .5rem, var(--ancho)); margin-inline:auto;
  display:flex; align-items:center; gap:var(--s-2);
  padding:.55rem clamp(.8rem,2vw,1.4rem);
  border-radius:2px; border:1px solid transparent; background:transparent;
  transition:background var(--t-medio) var(--sal),
             border-color var(--t-medio) var(--sal),
             box-shadow var(--t-medio) var(--sal);
}
.header[data-scroll="si"] .header__caja,
.header--solido .header__caja{
  background:color-mix(in oklch, var(--carbon) 78%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-color:var(--linea-rosa);
  box-shadow:0 10px 34px -18px oklch(0% 0 0 / .65);
}

.header__logo{ flex:none; }
.header__logo img{ height:clamp(30px,4vw,40px); width:auto; }

.nav{ display:none; gap:clamp(.9rem,2vw,1.8rem); margin-inline:auto; }
@media (min-width:980px){ .nav{ display:flex; } }
.nav a{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--crema); position:relative; padding-block:.3rem; opacity:.82;
  transition:opacity var(--t-rapido) var(--sal);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--rosa); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-medio) var(--sal);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* la sección en la que estamos queda subrayada, no solo al pasar */
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.header__acciones{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
@media (min-width:980px){ .header__acciones{ margin-left:0; } }

.icono-btn{
  position:relative; width:44px; height:44px;
  display:grid; place-items:center; color:var(--crema); opacity:.85;
  transition:opacity var(--t-rapido) var(--sal), color var(--t-rapido) var(--sal);
}
.icono-btn:hover{ opacity:1; color:var(--rosa); }
.icono-btn .punto{
  position:absolute; right:10px; top:10px; width:5px; height:5px;
  background:var(--rosa); border-radius:50%;
}
.globo{
  position:absolute; right:4px; top:4px; min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; border-radius:99px;
  background:var(--rosa); color:var(--carbon);
  font-size:.62rem; font-weight:500; line-height:1;
}
.globo.late{ animation:latir 380ms var(--sal); }
@keyframes latir{ 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---------- panel de cuenta: contenedor sobrepuesto ---------- */
.cuenta-menu{ position:relative; }

.cuenta{
  position:absolute; top:calc(100% + .6rem); right:0; z-index:5;
  width:min(19rem, calc(100vw - 2rem));
  display:grid; gap:var(--s-2);
  padding:var(--s-3);
  /* fondo sólido a propósito: el header ya lleva backdrop-filter y un blur
     anidado deja translucir el contenido de abajo */
  background:var(--carbon);
  border:1px solid var(--linea-rosa);
  box-shadow:0 22px 60px -24px oklch(0% 0 0 / .85);
  color:var(--crema);
  max-height:calc(100svh - var(--alto-header) - 2rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t-medio) var(--sal),
             transform var(--t-medio) var(--sal),
             visibility var(--t-medio);
}
.cuenta[data-abierto="si"]{ opacity:1; visibility:visible; transform:none; }

/* en móvil se ancla al ancho de la pantalla, no al icono */
@media (max-width:480px){
  /* anclado a la pantalla, no al icono: top explícito, nunca 'auto' */
  .cuenta{
    position:fixed;
    top:calc(var(--alto-header) + env(safe-area-inset-top));
    right:var(--s-2); left:var(--s-2); width:auto;
  }
}

.cuenta__cab{ display:flex; align-items:center; gap:var(--s-2); }
.cuenta__cab--anon{ display:grid; gap:.2rem; }
.cuenta__inicial{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:var(--rosa); color:var(--carbon);
  font-family:var(--display); font-size:1.15rem;
}
.cuenta__nombre{ margin:0; font-family:var(--display); font-size:var(--t-md); line-height:1.2; }
.cuenta__dato{
  margin:0; font-size:var(--t-xs); line-height:1.45;
  color:color-mix(in oklch,var(--crema) 58%,var(--carbon));
  overflow-wrap:anywhere;
}

.cuenta__cifras{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0;
  background:var(--linea-rosa); border:1px solid var(--linea-rosa);
}
.cuenta__cifras > div{ background:var(--carbon); padding:.55rem .4rem; text-align:center; }
.cuenta__cifras dt{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in oklch,var(--crema) 50%,var(--carbon));
}
.cuenta__cifras dd{
  margin:.15rem 0 0; font-family:var(--display); font-size:var(--t-lg);
  color:var(--rosa-claro); font-variant-numeric:tabular-nums; line-height:1;
}

.cuenta__aviso{
  margin:0; font-size:var(--t-xs); color:var(--rosa-claro);
  border-left:2px solid var(--linea-rosa); padding-left:.6rem;
}

.cuenta__enlaces{ display:grid; gap:.1rem; }
.cuenta__enlaces a{
  padding:.45rem 0; font-size:var(--t-sm);
  color:color-mix(in oklch,var(--crema) 76%,var(--carbon));
  transition:color var(--t-rapido) var(--sal);
}
.cuenta__enlaces a:hover{ color:var(--rosa); }

.cuenta__admin{
  display:grid; gap:.1rem;
  padding-top:var(--s-2); border-top:1px solid var(--linea-rosa);
}
.cuenta__admin a{
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem 0; font-size:var(--t-sm); color:var(--rosa-claro);
  transition:color var(--t-rapido) var(--sal);
}
.cuenta__admin a:hover{ color:var(--rosa); }

.cuenta__salir{
  padding-top:var(--s-2); border-top:1px solid var(--linea-rosa);
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in oklch,var(--crema) 52%,var(--carbon));
  transition:color var(--t-rapido) var(--sal);
}
.cuenta__salir:hover{ color:var(--rosa); }

.cuenta__nota{
  margin:0; font-size:var(--t-xs);
  color:color-mix(in oklch,var(--crema) 48%,var(--carbon));
}
.cuenta .btn{ min-height:44px; }

.btn-menu{ display:grid; place-items:center; width:44px; height:44px; color:var(--crema); }
@media (min-width:980px){ .btn-menu{ display:none; } }
.btn-menu span{ display:block; width:19px; height:1px; background:currentColor; position:relative; }
.btn-menu span::before,.btn-menu span::after{
  content:""; position:absolute; left:0; width:19px; height:1px; background:currentColor;
}
.btn-menu span::before{ top:-6px; }
.btn-menu span::after{ top:6px; }

.panel{
  position:fixed; inset:0; z-index:var(--z-panel);
  background:var(--carbon); color:var(--crema);
  display:grid; place-content:center; gap:var(--s-2); text-align:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-medio) var(--sal), visibility var(--t-medio);
}
.panel[data-abierto="si"]{ opacity:1; visibility:visible; }
.panel a{ font-family:var(--display); font-size:var(--t-lg); }
.panel__cerrar{ position:absolute; top:var(--s-2); right:var(--s-2); width:44px; height:44px; font-size:1.6rem; color:var(--crema); }

/* ============================ HERO ============================ */
/* Foto a sangre con el texto encima. Ocupa la pantalla completa:
   el primer scroll ya entrega el frame, no más hero.

   La legibilidad no se deja al azar. La foto es oscura pero no
   uniforme, así que va un velo por debajo del texto: en vertical
   sube desde abajo, en horizontal entra desde la izquierda, que
   es justo el lado que la modelo deja libre. */
.hero{
  position:relative; isolation:isolate;
  background:var(--carbon); color:var(--crema); overflow:hidden;
  min-height:100svh;
  display:grid; align-items:end;
  /* abajo se reserva sitio para el botón flotante de WhatsApp: si no,
     se sienta justo encima de la última categoría */
  padding-block:calc(var(--alto-header) + var(--s-3)) calc(var(--s-3) + 3.6rem);
}

.hero__foto{ position:absolute; inset:0; z-index:-2; display:block; }
.hero__foto img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 20%;
  /* En un teléfono real (9:19,5) la foto 2:3 solo se recorta de lado:
     el eje vertical no sobra, así que object-position no la sube. Se
     amplía desde abajo para que el rostro gane altura y el texto caiga
     sobre el cabello, que es oscuro. */
  transform:scale(1.28); transform-origin:50% 100%;
}

/* Velo de legibilidad. Medido, no a ojo: sobre el pómulo iluminado
   el fondo llega a 140 de luminancia y el rótulo rosa se quedaba en
   1,41 de contraste. La banda del texto necesita al menos un 60 %
   de carbón encima. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top,
      var(--carbon) 2%,
      color-mix(in oklch,var(--carbon) 94%,transparent) 32%,
      color-mix(in oklch,var(--carbon) 72%,transparent) 56%,
      color-mix(in oklch,var(--carbon) 34%,transparent) 74%,
      transparent 92%),
    linear-gradient(to bottom, color-mix(in oklch,var(--carbon) 70%,transparent), transparent 22%);
}

.hero__rejilla{
  position:relative;
  display:grid; gap:var(--s-3);
  grid-template-columns:minmax(0,1fr); align-items:center;
}

.hero__marca{
  font-size:var(--t-xs); letter-spacing:.38em; text-transform:uppercase;
  /* rosa claro y no rosa: es la línea más alta, donde el velo pesa
     menos, y sobre el pómulo el rosa normal se quedaba en 2,88 */
  color:var(--rosa-claro); margin:0 0 var(--s-2);
}
.hero__marca::after{
  content:""; display:block; width:5.5rem; height:1px; margin-top:var(--s-2);
  background:linear-gradient(90deg, var(--rosa), transparent);
}
.hero h1{ font-size:var(--t-2xl); letter-spacing:-.015em; text-wrap:balance; max-width:15ch; }
.hero h1 em{ font-style:italic; color:var(--rosa-claro); }
.hero__bajada{ max-width:38ch; color:color-mix(in oklch,var(--crema) 80%,var(--carbon)); margin:var(--s-2) 0 0; }

/* Velo propio del bloque de texto, solo en vertical.
   En un teléfono el texto cae sobre el pómulo iluminado y el velo
   general no alcanza: el rótulo se quedaba en 3,16 de contraste.
   Oscurecer el hero entero apagaría la foto, así que se oscurece
   solo la banda del texto, difuminada arriba y abajo para que no
   se vea el borde. Con esto el rótulo sube a 4,9 y el titular a 8,8. */
@media (max-width:59.99rem){
  .hero__texto{ position:relative; }
  .hero__texto::before{
    content:""; position:absolute; z-index:-1;
    inset-block:-1.6rem -.8rem; inset-inline:-50vw;
    background:linear-gradient(to bottom,
      transparent,
      color-mix(in oklch,var(--carbon) 42%,transparent) 16%,
      color-mix(in oklch,var(--carbon) 42%,transparent) 88%,
      transparent);
  }
}
.hero__acciones{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2); margin-top:var(--s-3); }

/* ---------- accesos por categoría ----------
   Vertical: una fila de cuatro al pie.
   Horizontal: columna a la derecha, donde la foto ya no aporta. */
.hero__atajos{
  list-style:none; margin:var(--s-2) 0 0; padding:var(--s-3) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-1);
  border-top:1px solid color-mix(in oklch,var(--crema) 15%,transparent);
}
.hero__atajos a{
  display:grid; justify-items:center; gap:.4rem; text-align:center;
  padding:.2rem; border-radius:3px;
  transition:color var(--t-rapido) var(--sal);
}
.hero__icono{
  width:clamp(2.4rem,9vw,3rem); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid color-mix(in oklch,var(--rosa) 50%,transparent);
  color:var(--rosa-claro);
  transition:border-color var(--t-rapido) var(--sal), background var(--t-rapido) var(--sal);
}
.hero__icono svg{ width:55%; height:55%; }
.hero__cifra{
  font-family:var(--display); font-size:var(--t-lg); line-height:1;
  color:var(--crema); font-variant-numeric:tabular-nums;
}
.hero__cat{
  /* .2em desbordaba la columna en un teléfono: "Maquillaje" medía
     82 px en un hueco de 81. En horizontal sí hay sitio de sobra. */
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in oklch,var(--rosa-claro) 72%,var(--crema));
}
.hero__atajos a:hover .hero__icono{
  border-color:var(--rosa); background:color-mix(in oklch,var(--rosa) 16%,transparent);
}

@media (min-width:60rem){
  .hero{ align-items:center; padding-block:calc(var(--alto-header) + var(--s-4)) var(--s-4); }
  .hero__cat{ letter-spacing:.2em; }
  .hero__foto img{ object-position:68% 40%; transform:none; }  /* horizontal: la modelo, a la derecha */
  .hero::before{
    background:
      linear-gradient(to right,
        var(--carbon) 6%,
        color-mix(in oklch,var(--carbon) 80%,transparent) 32%,
        color-mix(in oklch,var(--carbon) 24%,transparent) 60%,
        transparent 82%),
      linear-gradient(to top, color-mix(in oklch,var(--carbon) 50%,transparent), transparent 28%);
  }
  .hero__rejilla{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s-4); }

  .hero__atajos{
    grid-template-columns:minmax(0,1fr); gap:0;
    justify-self:end; min-width:12.5rem;
    margin:0; padding:0; border-top:0;
  }
  .hero__atajos li + li{ border-top:1px solid color-mix(in oklch,var(--crema) 15%,transparent); }
  .hero__atajos a{
    grid-template-columns:auto minmax(0,1fr);
    justify-items:start; text-align:left;
    column-gap:var(--s-2); row-gap:.1rem;
    padding:var(--s-2) .2rem;
  }
  .hero__icono{ grid-row:1 / span 2; width:2.9rem; }
  .hero__cifra{ align-self:end; }
  .hero__cat{ align-self:start; }
}

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; padding:.75rem 1.5rem;
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  border-radius:1px; position:relative; overflow:hidden;
  transition:color var(--t-medio) var(--sal), border-color var(--t-medio) var(--sal), opacity var(--t-rapido) linear;
}
.btn span{ position:relative; }
.btn[disabled]{ opacity:.5; cursor:default; }
.btn--ancho{ width:100%; }

/* Pastilla: la forma que llevan los botones del hero.
   Los iconos van sobre el barrido de color, no debajo. */
.btn--pastilla{ border-radius:999px; padding-inline:1.7rem; }
.btn > svg{ position:relative; flex:none; }
.btn__i{ width:18px; height:18px; }
.btn__f{ width:17px; height:17px; transition:transform var(--t-medio) var(--sal); }
.btn:hover .btn__f{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .btn:hover .btn__f{ transform:none; } }

.btn--oro{ background:var(--rosa); color:var(--carbon); }
.btn--oro::before{
  content:""; position:absolute; inset:0; background:var(--rosa-claro);
  transform:scaleX(0); transform-origin:right; transition:transform var(--t-medio) var(--sal);
}
.btn--oro:hover:not([disabled])::before{ transform:scaleX(1); transform-origin:left; }

.btn--linea{ border:1px solid var(--linea-rosa); color:var(--rosa-claro); }
.btn--linea:hover{ border-color:var(--rosa); color:var(--rosa); }
.pag .btn--linea, .cierre--suelto .btn--linea{
  border-color:color-mix(in oklch,var(--tinta) 26%,transparent); color:var(--tinta);
}
.pag .btn--linea:hover{ border-color:var(--rosa-hondo); color:var(--rosa-hondo); }

.fila-btn{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2); }
.enlace-mas{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--rosa);
  border-bottom:1px solid var(--linea-rosa); padding-bottom:2px; white-space:nowrap;
}
.pag .enlace-mas, .seccion:not(.seccion--oscura) .enlace-mas{ color:var(--rosa-hondo); }

/* ============================ CINTA ============================ */
/* La línea que corre entre sección y sección. Sustituye a los
   frames, que ocupaban 59 px de alto para decir una sola cosa.
   Esta mide ~36 px y va soltando avisos uno tras otro.

   El bucle no se hace con JavaScript: la pista lleva la misma
   tanda dos veces y se desplaza media pista. Al llegar al 50 %
   la imagen es idéntica al punto de partida, así que el salto
   no se ve. */
.cinta{
  --cinta-paso:48s;              /* lo recalcula el JS según el ancho real */
  position:relative; display:flex; align-items:stretch;
  background:var(--crema); color:var(--tinta);
  border-block:1px solid color-mix(in oklch, var(--oro) 30%, transparent);
  overflow:hidden;
}

.cinta__ventana{
  flex:1; min-width:0; overflow:hidden;
  /* los extremos se desvanecen: si no, los avisos aparecen y
     desaparecen de golpe contra el borde */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5rem,
                                      #000 calc(100% - 2.5rem), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 2.5rem,
                                      #000 calc(100% - 2.5rem), transparent);
}
.cinta__pista{
  display:flex; width:max-content;
  animation:cinta-corre var(--cinta-paso) linear infinite;
}
.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista,
.cinta[data-quieta="si"] .cinta__pista{ animation-play-state:paused; }

@keyframes cinta-corre{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.cinta__tanda{ display:flex; align-items:center; flex:none; }

.cinta__x{
  display:inline-flex; align-items:center; gap:.45rem;
  padding-block:.5rem; margin-inline:.9rem;
  font-size:var(--t-xs); letter-spacing:.05em; white-space:nowrap;
  color:var(--tinta-suave);
  transition:color var(--t-rapido) var(--sal);
}
.cinta__x b{ color:var(--tinta); font-weight:500; }
/* el precio viejo va atenuado, pero .6 lo dejaba en 3,76 de
   contraste real: sigue siendo texto y tiene que leerse */
.cinta__x s{ opacity:.82; }
.cinta__i{ width:14px; height:14px; flex:none; color:var(--oro-tinta); }

/* separador entre avisos */
.cinta__x::after{
  content:""; width:3px; height:3px; border-radius:50%; flex:none;
  background:color-mix(in oklch, var(--rosa) 55%, transparent);
  margin-left:.9rem;
}

a.cinta__x:hover{ color:var(--tinta); }
a.cinta__x:hover b{ text-decoration:underline; text-underline-offset:3px; }

/* un descuento no puede leerse igual que un dato de envío */
.cinta__x--oferta{ color:var(--rosa-tinta); }
.cinta__x--oferta .cinta__i{ color:var(--rosa-hondo); }
.cinta__x--oferta b{
  color:var(--carbon); background:var(--rosa);
  padding:.1rem .45rem; border-radius:99px; font-variant-numeric:tabular-nums;
}
.cinta__x--urgencia{ color:var(--rosa-tinta); }
.cinta__x--urgencia b{ color:var(--rosa-tinta); font-weight:500; }
.cinta__x--urgencia .cinta__i{ color:var(--rosa-hondo); }

@media (prefers-reduced-motion:reduce){
  .cinta__pista{ animation:none; }
  .cinta__ventana{ overflow-x:auto; scrollbar-width:none; }
  .cinta__ventana::-webkit-scrollbar{ display:none; }
  .cinta__tanda[aria-hidden="true"]{ display:none; }
}

/* ============================ SECCIONES ============================ */
.seccion{ padding-block:var(--s-4); }
.seccion--oscura{ background:var(--carbon); color:var(--crema); }

/* cada sección de la portada cabe en una pantalla, sin recortar nada */
.seccion--ajuste{
  min-height:calc(100svh - 3.5rem);
  display:grid; align-content:center;
  /* sin esto la columna se dimensiona a max-content y el carrusel
     (2000px+ de ancho intrínseco) ensancha la sección y la página entera */
  grid-template-columns:minmax(0,1fr);
}
@media (max-height:640px){ .seccion--ajuste{ min-height:0; } }

.seccion__cab{ display:grid; gap:var(--s-1); margin-bottom:var(--s-3); }
.seccion__cab h2{ font-size:var(--t-xl); letter-spacing:-.01em; text-wrap:balance; max-width:20ch; }
.seccion__cab p{ max-width:54ch; color:var(--tinta-suave); margin:0; }
.seccion--oscura .seccion__cab p{ color:color-mix(in oklch,var(--crema) 66%,var(--carbon)); }
@media (min-width:820px){
  .seccion__cab--fila{ grid-template-columns:1fr auto; align-items:end; gap:var(--s-2); }
}

/* ---------- carrusel: las flechas van a los lados ----------
   Antes vivían en el encabezado de la sección, lejos de lo que
   mueven. Ahora flanquean el carrusel: se ve qué controlan. */
.carrusel{ position:relative; }
.carrusel__flecha{
  position:absolute; top:50%; translate:0 -50%; z-index:4;
  width:clamp(34px, 8vw, 44px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid var(--linea-tinta); border-radius:50%;
  background:color-mix(in oklch, var(--crema) 88%, transparent);
  color:var(--tinta);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer;
  transition:border-color var(--t-rapido) var(--sal),
             background var(--t-rapido) var(--sal),
             color var(--t-rapido) var(--sal);
}
.carrusel__flecha svg{ width:45%; height:45%; }
/* En teléfono van por dentro, superpuestas: sacarlas hacia afuera
   con margen negativo desbordaba la página 14 px. En computador hay
   margen de sobra en el contenedor y se sacan un poco. */
.carrusel__flecha--izq{ left:.25rem; }
.carrusel__flecha--der{ right:.25rem; }
@media (min-width:60rem){
  .carrusel__flecha--izq{ left:-.9rem; }
  .carrusel__flecha--der{ right:-.9rem; }
}
.carrusel__flecha:hover{
  border-color:var(--rosa-hondo); color:var(--rosa-hondo);
  background:var(--crema);
}
.carrusel__flecha[hidden]{ display:none; }

/* sobre fondo oscuro se invierten: negro translúcido con filete rosa */
.seccion--oscura .carrusel__flecha,
.cierre .carrusel__flecha{
  border-color:var(--linea-rosa); color:var(--crema);
  background:color-mix(in oklch, var(--carbon) 72%, transparent);
}
.seccion--oscura .carrusel__flecha:hover,
.cierre .carrusel__flecha:hover{
  border-color:var(--rosa); color:var(--rosa-claro);
  background:color-mix(in oklch, var(--rosa) 22%, var(--carbon));
}

/* ---------- ficha de producto ---------- */
.ficha{ display:grid; gap:.35rem; align-content:start; position:relative; }
.ficha__foto{
  position:relative; aspect-ratio:1; overflow:hidden; background:#fff;
  border:1px solid var(--linea-tinta);
  transition:border-color var(--t-medio) var(--sal);
}
.ficha__foto img{
  width:100%; height:100%; object-fit:contain; padding:6%;
  transition:transform var(--t-lento) var(--sal), opacity var(--t-medio) var(--sal);
}
.ficha__foto img + img{ position:absolute; inset:0; opacity:0; }
.ficha:hover .ficha__foto img + img{ opacity:1; }
.ficha:hover .ficha__foto img{ transform:scale(1.04); }
.ficha:hover .ficha__foto{ border-color:var(--rosa); }
.ficha__sin{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:12%; color:var(--tinta-suave); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase;
}
.ficha__marca{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-hondo); margin:.3rem 0 0; }
.ficha__nombre{ font-family:var(--display); font-size:var(--t-md); line-height:1.25; }
.ficha__pie{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-1); }
.ficha__precio{ font-variant-numeric:tabular-nums; font-weight:500; }
.ficha__precio--consultar{ font-size:var(--t-sm); color:var(--tinta-suave); font-weight:400; letter-spacing:.05em; }
.ficha__antes{ font-size:var(--t-sm); color:var(--tinta-suave); text-decoration:line-through; margin-right:.35rem; font-weight:400; }
.ficha__ver{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-hondo); opacity:0; transition:opacity var(--t-medio) var(--sal); }
.ficha:hover .ficha__ver, .ficha:focus-within .ficha__ver{ opacity:1; }

.etiqueta{
  position:absolute; top:.5rem; left:.5rem; z-index:2;
  background:var(--carbon); color:var(--rosa);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  padding:.25rem .55rem;
}
.etiqueta--oferta{ background:var(--rosa); color:var(--carbon); }

/* ---------- marcas ---------- */
.marcas{ display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.marca{
  display:grid; gap:.3rem; padding:var(--s-2); align-content:start;
  border:1px solid color-mix(in oklch,var(--crema) 14%,transparent);
  transition:border-color var(--t-medio) var(--sal), background var(--t-medio) var(--sal);
}
.marcas--claro .marca{ border-color:var(--linea-tinta); }
.marca:hover{ border-color:var(--linea-rosa); background:color-mix(in oklch,var(--rosa) 7%,transparent); }
.marca__foto{ aspect-ratio:1; background:#fff; display:grid; place-items:center; overflow:hidden; }
.marca__foto img{ width:100%; height:100%; object-fit:contain; padding:10%; transition:transform var(--t-lento) var(--sal); }
.marca:hover .marca__foto img{ transform:scale(1.06); }
/* Marca que todavía no tiene ni una foto: en vez del cuadro blanco,
   su nombre. Va en --rosa-tinta y no en --rosa-hondo porque el .5 de
   opacidad dejaba el contraste en 2,11 sobre el blanco del marco;
   así queda igual de tenue y en 6,24. */
.marca__sin{
  font-family:var(--display); font-size:var(--t-lg); color:var(--rosa-tinta);
  opacity:.78; padding:10%; text-align:center; line-height:1.1;
}
.marca__nombre{ font-family:var(--display); font-size:var(--t-md); }
.marca__meta{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:color-mix(in oklch,var(--crema) 52%,var(--carbon)); }
.marcas--claro .marca__meta{ color:var(--tinta-suave); }

/* ---------- confianza ---------- */
.confianza{ display:grid; gap:var(--s-3) var(--s-2); grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.pilar{ display:grid; gap:.3rem; align-content:start; border-top:1px solid var(--linea-rosa); padding-top:var(--s-2); }
.pilar__n{ font-family:var(--display); font-size:var(--t-lg); color:var(--rosa-hondo); margin:0; }
.pilar h3{ font-size:var(--t-md); font-family:var(--texto); font-weight:500; letter-spacing:.01em; }
.pilar p{ margin:0; color:var(--tinta-suave); font-size:var(--t-sm); }
.seccion--oscura .pilar p{ color:color-mix(in oklch,var(--crema) 62%,var(--carbon)); }

/* ---------- cierre ---------- */
.cierre{ position:relative; background:var(--carbon); color:var(--crema); overflow:hidden; padding-block:var(--s-5); }
.cierre::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 22% 50%, color-mix(in oklch,var(--rosa) 14%,transparent), transparent 70%);
}
.cierre__caja{ position:relative; display:grid; gap:var(--s-3); max-width:46rem; width:min(100% - 2rem, var(--ancho)); margin-inline:auto; }
.cierre h2{ font-size:var(--t-xl); text-wrap:balance; }
.cierre h2 em{ font-style:italic; color:var(--rosa-claro); }
.cierre__bajada{ color:color-mix(in oklch,var(--crema) 70%,var(--carbon)); margin:var(--s-1) 0 0; max-width:48ch; }
.cierre--suelto{ margin-top:var(--s-4); }

/* ============================ PÁGINAS INTERNAS ============================ */
.pag{ padding-block:calc(var(--alto-header) + var(--s-3)) var(--s-5); }
.pag__cab{ margin-bottom:var(--s-3); }
.pag__cab h1{ font-size:var(--t-xl); text-wrap:balance; max-width:22ch; }
.pag__cab--ancho h1{ max-width:16ch; font-size:var(--t-2xl); }
.pag__bajada{ color:var(--tinta-suave); margin:var(--s-1) 0 0; max-width:56ch; }
.pag__bajada--grande{ font-size:var(--t-lg); font-family:var(--display); color:var(--tinta); line-height:1.3; }

.miga{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:var(--s-2);
}
.miga a:hover{ color:var(--rosa-hondo); }
.miga [aria-current]{ color:var(--tinta); }

.conteo{ font-size:var(--t-sm); color:var(--tinta-suave); margin:0 0 var(--s-2); }

.grupo{ margin-bottom:var(--s-4); }
.grupo__cab{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s-1); margin-bottom:var(--s-2); padding-bottom:.4rem;
  border-bottom:1px solid var(--linea-rosa);
}
.grupo__cab h2{ font-size:var(--t-lg); }
.grupo__cab a{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-hondo); }
.grupo--rel{ margin-top:var(--s-5); }

.rejilla{ display:grid; gap:var(--s-3) var(--s-2); grid-template-columns:repeat(auto-fill,minmax(min(100%,145px),1fr)); }
@media (min-width:560px){ .rejilla{ grid-template-columns:repeat(auto-fill,minmax(min(100%,185px),1fr)); } }
.rejilla .ficha{ content-visibility:auto; contain-intrinsic-size:auto 300px; }

/* ---------- filtros ---------- */
.filtros{ margin-bottom:var(--s-3); }
.filtros__buscar{ position:relative; }
.filtros__buscar input{
  width:100%; min-height:50px; padding:.75rem 1rem .75rem 2.7rem; font:inherit;
  border:1px solid var(--linea-tinta); border-radius:1px; background:#fff; color:var(--tinta);
  transition:border-color var(--t-rapido) var(--sal);
}
.filtros__buscar input:focus{ border-color:var(--rosa-hondo); }
.filtros__buscar svg{ position:absolute; left:.95rem; top:50%; translate:0 -50%; color:var(--tinta-suave); pointer-events:none; }

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chips--filtro{ margin-bottom:var(--s-2); }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:40px; padding:.4rem .95rem;
  font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--linea-tinta); border-radius:999px; color:var(--tinta-suave);
  transition:border-color var(--t-rapido) var(--sal), color var(--t-rapido) var(--sal), background var(--t-rapido) var(--sal);
}
.chip span{ opacity:.6; font-variant-numeric:tabular-nums; }
.chip:hover{ border-color:var(--rosa-hondo); color:var(--rosa-hondo); }
.chip[aria-pressed="true"]{ background:var(--carbon); border-color:var(--carbon); color:var(--rosa); }

/* ---------- vacío ---------- */
.vacio{ padding:var(--s-4) 0; display:grid; gap:var(--s-2); justify-items:start; }
.vacio h2, .vacio h3{ font-size:var(--t-lg); }
.vacio p{ color:var(--tinta-suave); margin:0; max-width:48ch; }

/* ---------- notas ---------- */
.nota{
  padding:.75rem 1rem; border-left:2px solid var(--linea-tinta);
  background:var(--crema-hueso); font-size:var(--t-sm); margin:0 0 var(--s-2);
}
.nota p{ margin:0 0 .4rem; }
.nota p:last-child{ margin:0; }
.nota a{ color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); }
.nota--error{ border-color:var(--malo); color:var(--malo); background:color-mix(in oklch,var(--malo) 7%,var(--crema)); }
.nota--aviso{ border-color:var(--rosa-hondo); }
.nota code{ font-size:.85em; background:color-mix(in oklch,var(--tinta) 8%,transparent); padding:.1em .35em; }

/* ============================ FICHA DE PRODUCTO ============================ */
.prod{ display:grid; gap:var(--s-3); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .prod{ grid-template-columns:1.05fr .95fr; gap:var(--s-4); }
  .galeria{ position:sticky; top:calc(var(--alto-header) + 1rem); }
}

/* ---------- galería ---------- */
.galeria__marco{
  position:relative; aspect-ratio:1; background:#fff;
  border:1px solid var(--linea-tinta); overflow:hidden;
}
.galeria__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:5%;
  opacity:0; visibility:hidden; cursor:zoom-in;
  transition:opacity var(--t-medio) var(--sal), visibility var(--t-medio);
}
.galeria__foto.es-activa{ opacity:1; visibility:visible; }
.galeria__sin{ position:absolute; inset:0; display:grid; place-items:center; color:var(--tinta-suave); font-size:var(--t-sm); margin:0; }
.galeria__lupa{
  position:absolute; right:.6rem; bottom:.6rem; z-index:3;
  width:40px; height:40px; display:grid; place-items:center;
  background:color-mix(in oklch,var(--carbon) 80%, transparent); color:var(--rosa);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:50%;
  transition:background var(--t-rapido) var(--sal);
}
.galeria__lupa:hover{ background:var(--carbon); }

.galeria__tiras{
  display:grid; grid-auto-flow:column; grid-auto-columns:72px;
  gap:.5rem; margin-top:.5rem; overflow-x:auto;
  scrollbar-width:thin; scrollbar-color:var(--linea-tinta) transparent;
}
.tira{
  aspect-ratio:1; background:#fff; overflow:hidden; padding:0;
  border:1px solid var(--linea-tinta);
  transition:border-color var(--t-rapido) var(--sal), opacity var(--t-rapido) var(--sal);
  opacity:.65;
}
.tira img{ width:100%; height:100%; object-fit:contain; padding:8%; }
.tira:hover{ opacity:1; }
.tira.es-activa{ border-color:var(--rosa); opacity:1; }

/* ---------- visor ---------- */
.visor{
  position:fixed; inset:0; z-index:var(--z-visor);
  background:color-mix(in oklch,var(--carbon) 94%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:var(--s-3);
}
.visor[hidden]{ display:none; }
.visor img{ max-width:min(92vw,880px); max-height:86svh; object-fit:contain; background:#fff; }
.visor__cerrar{
  position:absolute; top:var(--s-2); right:var(--s-2);
  width:48px; height:48px; font-size:1.9rem; color:var(--crema); line-height:1;
}
.visor__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:52px; height:52px; font-size:2rem; color:var(--crema);
  background:color-mix(in oklch,var(--carbon) 60%, transparent); border-radius:50%;
  transition:background var(--t-rapido) var(--sal), color var(--t-rapido) var(--sal);
}
.visor__nav:hover{ background:var(--rosa); color:var(--carbon); }
.visor__nav--prev{ left:var(--s-2); }
.visor__nav--next{ right:var(--s-2); }

/* ---------- datos del producto ---------- */
.prod__info{ display:grid; gap:var(--s-2); align-content:start; }
.prod__marca{
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa);
  justify-self:start; padding-bottom:2px;
}
.prod__info h1{ font-size:var(--t-xl); text-wrap:balance; }
.prod__clasif{ font-size:var(--t-sm); color:var(--tinta-suave); margin:0; }
.prod__precio{ display:flex; align-items:baseline; gap:.5rem; font-variant-numeric:tabular-nums; }
.prod__precio strong{ font-size:var(--t-lg); font-weight:500; }
.prod__consultar{ font-size:var(--t-md); color:var(--tinta-suave); }
.prod__stock{ margin:0; font-size:var(--t-sm); color:var(--rosa-hondo); }
.prod__stock--no{ color:var(--malo); }
.prod__compra{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:stretch; }
.prod__aviso{ margin:0; font-size:var(--t-sm); color:var(--tinta-suave); min-height:1.3em; }
.prod__aviso[data-tipo="ok"]{ color:var(--exito); }
.prod__aviso[data-tipo="error"]{ color:var(--malo); }
.prod__aviso a{ color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); }
.prod__pendiente{ font-size:var(--t-sm); color:var(--tinta-suave); margin:0; }
.prod__pendiente a{ color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); }

/* ---------- selector de cantidad ---------- */
.cantidad{ display:flex; align-items:stretch; border:1px solid var(--linea-tinta); border-radius:1px; }
.cantidad__btn{ width:44px; display:grid; place-items:center; font-size:1.1rem; color:var(--tinta-suave); transition:color var(--t-rapido) var(--sal); }
.cantidad__btn:hover{ color:var(--rosa-hondo); }
.cantidad input{
  width:48px; text-align:center; border:0; background:none; font:inherit;
  font-variant-numeric:tabular-nums; color:var(--tinta);
  -moz-appearance:textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- acordeón ---------- */
.acordeon{ display:grid; margin-top:var(--s-2); border-top:1px solid var(--linea-tinta); }
.acordeon--ancho{ max-width:46rem; border-top:0; }
.acordeon--duo{ border-top:0; }
@media (min-width:860px){
  .acordeon--duo{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s-4); }
}
.acordeon details{ border-bottom:1px solid var(--linea-tinta); }
.acordeon summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  padding:.85rem 0; cursor:pointer; list-style:none;
  font-size:var(--t-sm); letter-spacing:.06em; font-weight:500;
}
.acordeon summary::-webkit-details-marker{ display:none; }
.acordeon summary::after{
  content:"+"; font-size:1.15rem; color:var(--rosa-hondo); line-height:1;
  transition:transform var(--t-medio) var(--sal);
}
.acordeon details[open] summary::after{ transform:rotate(45deg); }
.acordeon__cuerpo{ padding-bottom:var(--s-2); font-size:var(--t-sm); color:var(--tinta-suave); }
.acordeon__cuerpo p{ margin:0; }
.lista-puntos{ margin:0; padding-left:1.1rem; display:grid; gap:.3rem; }

/* ============================ CARRITO ============================ */
.carro{ display:grid; gap:var(--s-3); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .carro{ grid-template-columns:1fr 20rem; gap:var(--s-4); } }

.carro__lista{ display:grid; }
.linea{
  display:grid; gap:var(--s-2);
  grid-template-columns:72px 1fr; grid-template-areas:"foto datos" "cant total";
  align-items:center; padding:var(--s-2) 0; border-bottom:1px solid var(--linea-tinta);
  transition:opacity var(--t-medio) var(--sal), transform var(--t-medio) var(--sal);
}
@media (min-width:640px){
  .linea{ grid-template-columns:84px 1fr auto auto; grid-template-areas:"foto datos cant total"; gap:var(--s-2) var(--s-3); }
}
.linea[data-ocupada="si"]{ opacity:.55; }
.linea[data-saliendo="si"]{ opacity:0; transform:translateX(-14px); }
.linea__foto{ grid-area:foto; aspect-ratio:1; background:#fff; border:1px solid var(--linea-tinta); overflow:hidden; }
.linea__foto img{ width:100%; height:100%; object-fit:contain; padding:7%; }
.linea__datos{ grid-area:datos; display:grid; gap:.15rem; }
.linea__nombre{ font-family:var(--display); font-size:var(--t-md); line-height:1.25; }
.linea__unitario{ font-size:var(--t-sm); color:var(--tinta-suave); margin:0; font-variant-numeric:tabular-nums; }
.linea__cant{ grid-area:cant; display:flex; align-items:center; gap:var(--s-2); }
.linea__quitar{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); transition:color var(--t-rapido) var(--sal); }
.linea__quitar:hover{ color:var(--malo); }
.linea__total{ grid-area:total; margin:0; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- resumen ---------- */
.resumen{
  display:grid; gap:var(--s-2); align-content:start;
  padding:var(--s-3); background:var(--crema-hueso); border:1px solid var(--linea-tinta);
}
@media (min-width:900px){ .resumen{ position:sticky; top:calc(var(--alto-header) + 1rem); } }
.resumen h2{ font-size:var(--t-lg); }
.resumen__items{ list-style:none; margin:0; padding:0 0 var(--s-2); display:grid; gap:.4rem; border-bottom:1px solid var(--linea-tinta); font-size:var(--t-sm); }
.resumen__items li{ display:flex; justify-content:space-between; gap:var(--s-2); }
.resumen__items li span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.resumen__lista{ margin:0; display:grid; gap:.35rem; font-size:var(--t-sm); }
.resumen__lista > div{ display:flex; justify-content:space-between; gap:var(--s-2); }
.resumen__lista dt{ color:var(--tinta-suave); }
.resumen__lista dd{ margin:0; font-variant-numeric:tabular-nums; }
.resumen__falta{ font-size:var(--t-sm); color:var(--rosa-hondo); margin:0; }
.resumen__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2);
  margin:0; padding-top:var(--s-2); border-top:1px solid var(--linea-rosa);
}
.resumen__total strong{ font-size:var(--t-lg); font-weight:500; font-variant-numeric:tabular-nums; }
.resumen__nota{ font-size:var(--t-xs); color:var(--tinta-suave); margin:0; line-height:1.5; }

/* ============================ FORMULARIOS ============================ */
.form{ display:grid; gap:var(--s-2); }
.form__fila{ display:grid; gap:var(--s-2); grid-template-columns:1fr; }
@media (min-width:600px){ .form__fila{ grid-template-columns:1fr 1fr; } }

.campo{ display:grid; gap:.3rem; }
.campo label{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); }
.campo__opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.campo input, .campo select{
  min-height:48px; padding:.7rem .85rem; font:inherit; font-size:var(--t-sm);
  color:var(--tinta); background:#fff;
  border:1px solid var(--linea-tinta); border-radius:1px; width:100%;
  transition:border-color var(--t-rapido) var(--sal);
}
.campo input:focus, .campo select:focus{ border-color:var(--rosa-hondo); }
.campo input::placeholder{ color:color-mix(in oklch,var(--tinta) 40%,transparent); }
.campo__ayuda{ font-size:var(--t-xs); color:var(--tinta-suave); margin:0; }
.campo__error{ font-size:var(--t-xs); color:var(--malo); margin:0; min-height:1em; }
.campo__clave{ position:relative; display:flex; }
.ver-clave{
  position:absolute; right:.6rem; top:50%; translate:0 -50%;
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-suave); padding:.5rem;
}
.ver-clave:hover{ color:var(--rosa-hondo); }

.pie-form{ margin:var(--s-2) 0 0; font-size:var(--t-sm); color:var(--tinta-suave); }
.pie-form a{ color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); }
.pie-form--tenue{ font-size:var(--t-xs); }

/* ============================ CHECKOUT ============================ */
.checkout{ display:grid; gap:var(--s-3); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .checkout{ grid-template-columns:1fr 20rem; gap:var(--s-4); } }

.pago{ display:grid; gap:var(--s-2); }
.pago__ref{ margin:0; font-size:var(--t-sm); color:var(--tinta-suave); }
.pago__ref strong{ color:var(--tinta); letter-spacing:.06em; }
.pago__envio{ margin:0; font-size:var(--t-sm); color:var(--tinta-suave); }
.pago__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2);
  margin:var(--s-2) 0; padding-block:var(--s-2); border-block:1px solid var(--linea-rosa);
}
.pago__total strong{ font-size:var(--t-xl); font-weight:400; font-family:var(--display); font-variant-numeric:tabular-nums; }
.pago__medios{ font-size:var(--t-xs); color:var(--tinta-suave); margin:0; letter-spacing:.06em; }
.pago__volver{ margin:var(--s-2) 0 0; font-size:var(--t-sm); }
.pago__volver a{ color:var(--tinta-suave); }
.pago__volver a:hover{ color:var(--rosa-hondo); }

/* ---------- mapa de entrega ----------
   En Colombia la dirección escrita no alcanza: "Calle 10 # 5-20"
   existe en cuarenta barrios. El mapa pone la coordenada, que es lo
   que el mensajero abre en su teléfono; el número de la puerta lo
   sigue poniendo quien compra, porque el mapa conoce las calles y
   no las puertas. */
.mapa{
  display:grid; gap:var(--s-2);
  padding:var(--s-2); background:var(--crema-hueso);
  border:1px solid var(--linea-tinta);
}
.mapa__cab{ display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between; gap:var(--s-1) var(--s-2); }
.mapa__titulo{
  margin:0; font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.mapa__bajada{ margin:.25rem 0 0; font-size:var(--t-sm); color:var(--tinta-suave); max-width:44ch; line-height:1.45; }
.mapa__aqui{ min-height:40px; padding:.5rem 1rem; flex:none; }

/* buscador: el campo manda y el botón ocupa lo suyo */
.mapa__buscar{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mapa__buscar input{
  flex:1 1 14rem; min-width:0;
  padding:.7rem .85rem; font:inherit; font-size:var(--t-sm); color:var(--tinta);
  background:var(--crema); border:1px solid var(--linea-tinta); border-radius:1px;
  transition:border-color var(--t-medio) var(--sal);
}
.mapa__buscar input:focus{ border-color:var(--rosa-hondo); }
.mapa__buscar .btn{ min-height:auto; padding-inline:1.2rem; flex:none; }

.mapa__sug{ list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--linea-tinta); background:var(--crema); }
.mapa__sug li + li{ border-top:1px solid var(--linea-tinta); }
.mapa__sugbtn{
  display:block; width:100%; text-align:left;
  padding:.6rem .8rem; font-size:var(--t-sm); line-height:1.4; color:var(--tinta);
  transition:background var(--t-rapido) linear;
}
.mapa__sugbtn:hover{ background:var(--rosa-velo); }

.mapa__marco{
  position:relative; border:1px solid var(--linea-tinta);
  transition:border-color var(--t-medio) var(--sal);
}
/* con el cursor encima la rueda hace zoom: se avisa con el borde */
.mapa[data-activo="si"] .mapa__marco{ border-color:var(--rosa-hondo); }
.mapa__lienzo{
  height:clamp(15rem, 44vh, 26rem);
  background:var(--crema-hueso);
}
.mapa__lienzo:focus-visible{ outline:2px solid var(--rosa-hondo); outline-offset:-2px; }

/* El zoom propio de Leaflet mide 26 px y se pierde sobre el mapa.
   Estos miden 44, van en blanco sólido y con borde oscuro, que es
   lo único que se lee igual sobre una calle, un parque y el mar. */
.mapa__zoom{ position:absolute; top:.6rem; right:.6rem; z-index:1000; display:grid; gap:.4rem; }
.mapa__zoom button{
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--crema); color:var(--tinta);
  border:1px solid color-mix(in oklch, var(--tinta) 34%, transparent);
  border-radius:2px; box-shadow:0 2px 10px -4px oklch(0% 0 0/.5);
  transition:color var(--t-rapido) linear, border-color var(--t-rapido) linear;
}
.mapa__zoom button:hover{ color:var(--rosa-hondo); border-color:var(--rosa-hondo); }
.mapa__zoom svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* el pin se dibuja, no se descarga: sin PNG y en los colores de casa */
.mapa__pin svg{ width:32px; height:44px; display:block; filter:drop-shadow(0 3px 6px oklch(0% 0 0/.45)); }
.mapa__pin svg path{ fill:var(--rosa-hondo); stroke:var(--carbon); stroke-width:1.6; }
.mapa__pin svg circle{ fill:var(--crema); }
.leaflet-marker-draggable{ cursor:grab; }
.leaflet-dragging .leaflet-marker-draggable{ cursor:grabbing; }

.mapa__estado{ margin:0; font-size:var(--t-sm); line-height:1.45; color:var(--tinta-suave); }
/* --oro-tinta y --rosa-tinta, no --oro y --malo: sobre el hueso del
   bloque los normales se quedan en 2,6 y 4,3. */
.mapa__estado.es-bien{ color:var(--oro-tinta); }
.mapa__estado.es-mal{ color:var(--rosa-tinta); }
.mapa__pista{ margin:0; font-size:var(--t-xs); color:var(--tinta-suave); line-height:1.5; }
.campo__ayuda--ojo{ color:var(--rosa-tinta); }

/* Leaflet trae su propia tipografía y su propio azul de enlace */
.leaflet-container{ font-family:var(--texto); background:var(--crema-hueso); }
.leaflet-control-attribution{
  background:color-mix(in oklch, var(--crema) 88%, transparent) !important;
  font-size:10px; color:var(--tinta-suave);
}
.leaflet-control-attribution a{ color:var(--rosa-tinta); }

/* ---------- resultado del pago ---------- */
.resultado{ display:grid; gap:var(--s-2); justify-items:start; padding-block:var(--s-3); }
.resultado svg{ color:var(--rosa-hondo); }
.resultado--ok svg{ color:var(--exito); }
.resultado h1{ font-size:var(--t-xl); }
.resultado p{ margin:0; color:var(--tinta-suave); max-width:52ch; }
.resultado p strong{ color:var(--tinta); }
.resultado__ref{ font-size:var(--t-sm); }
.resultado .fila-btn{ margin-top:var(--s-2); }

/* ============================ CUENTA ============================ */
.pedidos{ display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.pedido{ display:grid; gap:.35rem; padding:var(--s-2); border:1px solid var(--linea-tinta); align-content:start; }
.pedido__cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-1); }
.pedido__ref{ margin:0; font-size:var(--t-sm); font-weight:500; letter-spacing:.05em; }
.pedido__meta{ margin:0; font-size:var(--t-xs); color:var(--tinta-suave); }
.pedido__total{ margin:.2rem 0 0; font-size:var(--t-lg); font-family:var(--display); font-variant-numeric:tabular-nums; }
.pedido__accion{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-hondo); }

.estado{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; padding:.2rem .5rem; white-space:nowrap; }
.estado--ok{ background:color-mix(in oklch,var(--oro) 22%,transparent); color:var(--oro-hondo); }
.estado--mal{ background:color-mix(in oklch,var(--malo) 14%,transparent); color:var(--malo); }
.estado--espera{ background:color-mix(in oklch,var(--tinta) 8%,transparent); color:var(--tinta-suave); }

/* ============================ QUIÉNES SOMOS ============================ */
.somos__lead{
  margin:0 0 var(--s-3); max-width:68ch;
  font-size:var(--t-md); line-height:1.5; color:var(--tinta-suave);
}
.somos__lead strong{ color:var(--tinta); font-weight:500; }

/* Franja de tres, no columna al costado: en columna el texto de al lado
   se estiraba y dejaba un hueco muerto de 250 px. */
.somos__cifras{
  display:grid; gap:var(--s-2); align-content:start;
  margin-bottom:var(--s-4);
}
@media (min-width:640px){
  .somos__cifras{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3); }
}
.somos__cifras div{ border-top:1px solid var(--linea-rosa); padding-top:var(--s-1); }
.somos__cifras strong{ display:block; font-family:var(--display); font-size:var(--t-xl); font-weight:400; color:var(--oro-hondo); font-variant-numeric:tabular-nums; }
.somos__cifras span{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); }

/* ============================ FOOTER ============================ */
.footer{ background:var(--carbon-alto); color:color-mix(in oklch,var(--crema) 70%,var(--carbon)); padding-block:var(--s-4) var(--s-3); }
.footer__rejilla{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
.footer__col h4{ font-size:var(--t-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--rosa); margin:0 0 var(--s-1); font-weight:500; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.footer__col a{ font-size:var(--t-sm); transition:color var(--t-rapido) var(--sal); }
.footer__col a:hover{ color:var(--rosa-claro); }
.footer__logo img{ height:48px; width:auto; margin-bottom:var(--s-1); }
.footer__logo p{ font-size:var(--t-sm); margin:0; max-width:26ch; }
.footer__pago{ font-size:var(--t-xs); margin:var(--s-2) 0 0; color:color-mix(in oklch,var(--crema) 50%,var(--carbon)); }
.footer__legal{
  margin-top:var(--s-3); padding-top:var(--s-2);
  border-top:1px solid color-mix(in oklch,var(--crema) 10%,transparent);
  display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2); justify-content:space-between;
  font-size:var(--t-xs); color:color-mix(in oklch,var(--crema) 45%,var(--carbon));
}

/* ---------- whatsapp flotante ---------- */
.wa{
  position:fixed; z-index:90;
  right:calc(var(--s-2) + env(safe-area-inset-right));
  bottom:calc(var(--s-2) + env(safe-area-inset-bottom));
  width:54px; height:54px; display:grid; place-items:center;
  background:var(--whatsapp); color:#fff; border-radius:50%;
  box-shadow:0 10px 28px -10px oklch(0% 0 0/.5);
  transition:transform var(--t-medio) var(--sal), background var(--t-rapido) var(--sal);
}
.wa:hover{ transform:scale(1.06); background:var(--whatsapp-hover); }
.wa:focus-visible{ outline:2px solid var(--whatsapp); outline-offset:3px; }

/* ============================ MOVIMIENTO REDUCIDO ============================ */
@media (prefers-reduced-motion:reduce){
  .header{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================ ADMINISTRACIÓN ============================ */
.admin-nav{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-bottom:var(--s-3); padding-bottom:var(--s-2);
  border-bottom:1px solid var(--linea-tinta);
}
.admin-nav a{
  min-height:40px; display:inline-flex; align-items:center; padding:.4rem 1rem;
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--linea-tinta); border-radius:999px; color:var(--tinta-suave);
  transition:border-color var(--t-rapido) var(--sal), color var(--t-rapido) var(--sal), background var(--t-rapido) var(--sal);
}
.admin-nav a:hover{ border-color:var(--rosa-hondo); color:var(--rosa-hondo); }
.admin-nav a[aria-current]{ background:var(--carbon); border-color:var(--carbon); color:var(--rosa); }

/* tarjetas de cifras */
.tarjetas{ display:grid; gap:1px; background:var(--linea-tinta); border:1px solid var(--linea-tinta);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr)); }
.tarjeta{ background:var(--crema); padding:var(--s-2); display:grid; gap:.2rem; align-content:start; }
.tarjeta--ancha{ grid-column:span 2; }
@media (max-width:420px){ .tarjeta--ancha{ grid-column:span 1; } }
.tarjeta span{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); }
.tarjeta strong{ font-family:var(--display); font-size:var(--t-lg); font-weight:400; font-variant-numeric:tabular-nums; }

/* tablas */
.tabla-env{ overflow-x:auto; overscroll-behavior-x:contain; }
.tabla{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tabla th, .tabla td{ padding:.6rem .7rem; text-align:left; border-bottom:1px solid var(--linea-tinta); }
.tabla th{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:500; white-space:nowrap;
}
.tabla td.num, .tabla th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabla td.tenue{ color:var(--tinta-suave); font-size:var(--t-xs); }
.tabla tbody tr:hover{ background:var(--crema-hueso); }

/* embudo */
.embudo{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr);
  gap:var(--s-2); overflow-x:auto; padding-bottom:var(--s-2);
  overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--linea-tinta) transparent;
}
.etapa{ display:grid; gap:.4rem; align-content:start; padding:var(--s-2); border:1px solid var(--linea-tinta); }
.etapa__cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-1); }
.etapa__cab h2{ font-size:var(--t-md); font-family:var(--texto); font-weight:500; }
.etapa__n{
  font-size:var(--t-xs); min-width:22px; height:22px; padding:0 .4rem;
  display:grid; place-items:center; border-radius:999px;
  background:var(--crema-hueso); color:var(--tinta-suave); font-variant-numeric:tabular-nums;
}
.etapa__valor{ margin:0; font-family:var(--display); font-size:var(--t-lg); color:var(--rosa-hondo); font-variant-numeric:tabular-nums; }
.etapa__lista{ display:grid; gap:.4rem; margin-top:var(--s-1); }
.etapa__vacia{ margin:0; font-size:var(--t-xs); color:var(--tinta-suave); }
.deal{ display:grid; gap:.15rem; padding:.6rem; background:var(--crema-hueso); border-left:2px solid var(--linea-rosa); }
.deal__titulo{ margin:0; font-size:var(--t-sm); }
.deal__valor{ margin:0; font-size:var(--t-sm); font-weight:500; font-variant-numeric:tabular-nums; }
.deal__meta{ margin:0; font-size:var(--t-xs); color:var(--tinta-suave); }

/* guía lateral */
.admin-dos{ display:grid; gap:var(--s-4); grid-template-columns:1fr; align-items:start; }
@media (min-width:980px){ .admin-dos{ grid-template-columns:1fr 23rem; } }
.admin-guia{
  padding:var(--s-3); background:var(--crema-hueso);
  border:1px solid var(--linea-tinta); border-top:2px solid var(--rosa);
  display:grid; gap:var(--s-2); align-content:start;
}
.admin-guia h2{ font-size:var(--t-lg); }
.admin-guia h3{ font-size:var(--t-sm); font-family:var(--texto); font-weight:500; letter-spacing:.06em; margin-top:var(--s-1); }
.admin-guia p{ margin:0; font-size:var(--t-sm); color:var(--tinta-suave); }
.admin-guia code{ font-size:.82em; background:color-mix(in oklch,var(--tinta) 8%,transparent); padding:.12em .35em; overflow-wrap:anywhere; }
.admin-guia__nota{ border-left:2px solid var(--linea-rosa); padding-left:.7rem; }
.guia{ margin:0; padding-left:1.2rem; display:grid; gap:.55rem; font-size:var(--t-sm); color:var(--tinta-suave); }
.guia strong{ color:var(--tinta); }
.guia em{ font-style:normal; color:var(--tinta); }

/* estado con punto */
.lista-estado{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:var(--t-sm); color:var(--tinta-suave); }
.lista-estado li{ display:flex; align-items:center; gap:.5rem; }
.lista-estado strong{ color:var(--tinta); font-weight:500; }
.punto-estado{
  flex:none; width:8px; height:8px; border-radius:50%;
  background:color-mix(in oklch,var(--tinta) 25%,transparent);
}
.punto-estado.es-ok{ background:var(--oro); }

/* ---------- CRM: acciones, alertas, línea de tiempo ---------- */
.barra-acciones{ display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2); align-items:center; margin-bottom:var(--s-3); }
.en-linea{ display:inline; }
.enlace-boton{
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); padding-bottom:1px;
}
.enlace-boton:hover{ color:var(--rosa-hondo); border-color:var(--linea-rosa); }

.alertas{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea-tinta); border:1px solid var(--linea-tinta); }
.alerta{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-2);
  background:var(--crema); padding:.7rem var(--s-2); font-size:var(--t-sm);
  border-left:3px solid var(--linea-tinta);
}
.alerta--estancado{ border-left-color:var(--oro); }
.alerta--vencido{ border-left-color:var(--rosa-hondo); }
.alerta--sin_negocio{ border-left-color:var(--rosa); }
.alerta a{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-hondo); white-space:nowrap; }

.linea-tiempo{ list-style:none; margin:var(--s-2) 0 0; padding:0 0 0 var(--s-2); display:grid; gap:var(--s-2); border-left:1px solid var(--linea-tinta); }
.linea-tiempo li{ position:relative; }
.linea-tiempo li::before{
  content:""; position:absolute; left:calc(var(--s-2) * -1 - 4px); top:.45rem;
  width:7px; height:7px; border-radius:50%; background:var(--rosa);
}
.linea-tiempo__tipo{ font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-hondo); }
.linea-tiempo p{ margin:.15rem 0 0; font-size:var(--t-sm); }
.linea-tiempo__meta{ color:var(--tinta-suave); font-size:var(--t-xs) !important; }

/* etapas por color de marca, no por hex arbitrario */
.etapa--oro{ border-top:2px solid var(--oro); }
.etapa--rosa{ border-top:2px solid var(--rosa); }
.etapa--neutro{ border-top:2px solid var(--linea-tinta); }
.deal--frio{ border-left-color:var(--oro); }
.deal__alerta{ margin:0; font-size:var(--t-xs); color:var(--rosa-hondo); }
a.deal__titulo{ display:block; }
a.deal__titulo:hover{ color:var(--rosa-hondo); }
.deal__mover{ margin-top:.35rem; }
.deal__mover select{
  width:100%; min-height:34px; padding:.25rem .4rem; font:inherit; font-size:var(--t-xs);
  color:var(--tinta-suave); background:var(--crema);
  border:1px solid var(--linea-tinta); border-radius:1px;
}
.deal__mover select:focus{ border-color:var(--rosa-hondo); }

/* campos extra */
.campo textarea{
  min-height:80px; padding:.7rem .85rem; font:inherit; font-size:var(--t-sm);
  color:var(--tinta); background:#fff; width:100%; resize:vertical;
  border:1px solid var(--linea-tinta); border-radius:1px;
}
.campo textarea:focus{ border-color:var(--rosa-hondo); }
.campo__fijo{ margin:0; font-size:var(--t-sm); }
.campo__fijo a{ color:var(--rosa-hondo); border-bottom:1px solid var(--linea-rosa); }
.form--compacto{ padding:var(--s-2); background:var(--crema-hueso); border:1px solid var(--linea-tinta); }

/* ============================ CARRUSEL PROTAGONISTA ============================ */
/* Un producto al centro, un vecino a cada lado, el resto fuera de vista. */
.giro{
  position:relative; height:clamp(340px, 46vh, 460px);
  perspective:1200px; overflow:hidden;
  margin-inline:calc(var(--s-2) * -1); padding-inline:var(--s-2);
}
.giro:focus-visible{ outline:2px solid var(--rosa-hondo); outline-offset:4px; }
.giro__pista{ position:relative; height:100%; }

.giro__item{
  position:absolute; top:0; left:50%; width:clamp(190px, 24vw, 250px);
  transform-origin:center;
  transition:transform var(--t-lento) var(--sal), opacity var(--t-lento) var(--sal);
  will-change:transform, opacity;
}
/* el protagonista */
.giro__item[data-pos="0"]{ transform:translateX(-50%) scale(1); opacity:1; z-index:3; }
/* los vecinos: se ven, se sabe que hay más, pero no compiten */
.giro__item[data-pos="-1"]{ transform:translateX(-142%) scale(.78); opacity:.45; z-index:2; cursor:pointer; }
.giro__item[data-pos="1"] { transform:translateX(42%)   scale(.78); opacity:.45; z-index:2; cursor:pointer; }
/* el borde: apenas asoma, da profundidad */
.giro__item[data-pos="-2"]{ transform:translateX(-215%) scale(.62); opacity:.14; z-index:1; }
.giro__item[data-pos="2"] { transform:translateX(115%)  scale(.62); opacity:.14; z-index:1; }
/* escondidos */
.giro__item[data-pos="fuera"]{ transform:translateX(-50%) scale(.5); opacity:0; z-index:0; pointer-events:none; }

.giro__item:not([data-pos="0"]) .ficha__ver{ opacity:0 !important; }
.giro__item[data-pos="0"] .ficha__foto{ border-color:var(--linea-rosa); }
.giro__estado{ position:absolute; left:-9999px; }

.giro__puntos{ display:flex; justify-content:center; gap:.45rem; margin-top:var(--s-2); }
.giro__puntos button{
  width:26px; height:24px; display:grid; place-items:center;
}
.giro__puntos button::after{
  content:""; width:100%; height:2px; background:var(--linea-tinta);
  transition:background var(--t-medio) var(--sal);
}
.giro__puntos button[aria-selected="true"]::after{ background:var(--rosa); }
.giro__puntos button:hover::after{ background:var(--rosa-hondo); }


@media (max-width:560px){
  .giro{ height:clamp(300px, 52vh, 380px); }
  .giro__item{ width:clamp(160px, 52vw, 200px); }
  .giro__item[data-pos="-1"]{ transform:translateX(-128%) scale(.7); opacity:.35; }
  .giro__item[data-pos="1"] { transform:translateX(28%)   scale(.7); opacity:.35; }
  .giro__item[data-pos="-2"],
  .giro__item[data-pos="2"]{ opacity:0; }
}

/* ============================ CARRUSEL DE MARCAS ============================ */
.rueda{ position:relative; display:grid; }
.rueda:focus-visible{ outline:2px solid var(--rosa); outline-offset:4px; }
.rueda__pagina{
  grid-area:1/1; display:grid; gap:var(--s-2); align-content:start;
  /* Columnas fijas, no auto-fit. Todas las paginas comparten la misma
     celda del grid, asi que la fila mide lo que la mas alta. Con
     auto-fit la ultima pagina (2 marcas) armaba 2 columnas enormes,
     y como .marca__foto es aspect-ratio 1, esa pagina median 568 px
     de alto y estiraba las tarjetas de todas las demas. */
  grid-template-columns:repeat(5, minmax(0,1fr));
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--t-lento) var(--sal),
             transform var(--t-lento) var(--sal),
             visibility var(--t-lento);
}
.rueda__pagina.es-activa{ opacity:1; visibility:visible; transform:none; }

/* En teléfono son 4 por vista, y van en dos filas de dos. Con
   auto-fit caían en una sola columna: 1.741 px de alto para una
   pantalla de 843. */
@media (max-width:60rem){
  .rueda__pagina{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* contenedores más grandes que en el catálogo */
.marca--grande{ padding:var(--s-3) var(--s-2); gap:var(--s-1); }
.marca--grande .marca__foto{ margin-bottom:.35rem; }
.marca--grande .marca__nombre{ font-size:var(--t-lg); }
.marca--grande .marca__meta{ font-size:var(--t-xs); }

.rueda__puntos{ display:flex; justify-content:center; gap:.45rem; margin-top:var(--s-3); }
.rueda__puntos button{ width:30px; height:24px; display:grid; place-items:center; }
.rueda__puntos button::after{
  content:""; width:100%; height:2px;
  background:color-mix(in oklch, var(--crema) 22%, transparent);
  transition:background var(--t-medio) var(--sal);
}
.rueda__puntos button[aria-selected="true"]::after{ background:var(--rosa); }
.rueda__puntos button:hover::after{ background:var(--rosa); }

/* ============================ RESEÑAS ============================ */
.resenas__promedio{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:var(--s-1) 0 0; font-size:var(--t-sm); color:var(--tinta-suave);
}
.resenas__promedio strong{ color:var(--tinta); font-size:var(--t-md); font-variant-numeric:tabular-nums; }

.estrellas{ display:inline-flex; gap:2px; color:var(--oro-hondo); flex:none; }
.estrella{ width:15px; height:15px; }
.estrella:not(.es-llena){ color:color-mix(in oklch, var(--tinta) 30%, transparent); }

.resenas{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.resena{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--linea-tinta); background:var(--crema);
  transition:border-color var(--t-medio) var(--sal), transform var(--t-medio) var(--sal);
}
.resena:hover{ border-color:var(--linea-rosa); transform:translateY(-2px); }

/* la foto del producto arriba, la reseña debajo */
/* 4/3: los packshots son cuadrados, un marco más ancho los deja nadando en blanco */
.resena__foto{ aspect-ratio:4/3; background:#fff; overflow:hidden; display:block; border-bottom:1px solid var(--linea-tinta); }
.resena__foto img{
  width:100%; height:100%; object-fit:contain; padding:4%;
  transition:transform var(--t-lento) var(--sal);
}
.resena:hover .resena__foto img{ transform:scale(1.05); }

.resena__cuerpo{ display:grid; gap:.45rem; align-content:start; padding:var(--s-2); }
.resena__producto{ margin:0; display:grid; gap:.1rem; font-size:var(--t-sm); }
.resena__marca{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-hondo); }
.resena__producto a{ font-family:var(--display); font-size:var(--t-md); line-height:1.2; }
.resena__producto a:hover{ color:var(--rosa-hondo); }

.resena__texto{
  margin:0; font-size:var(--t-sm); color:var(--tinta-suave); line-height:1.55;
  border-left:2px solid var(--linea-rosa); padding-left:.7rem;
}
.resena__pie{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem; margin:.2rem 0 0; font-size:var(--t-xs); color:var(--tinta-suave);
}
.resena__autora{ color:var(--tinta); letter-spacing:.06em; }
.resena__pie time{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .giro__item, .rueda__pagina{ transition:none; }
}

/* casilla de verificación con etiqueta clicable */
.casilla{
  display:flex; align-items:center; gap:.5rem; min-height:48px;
  font-size:var(--t-sm); letter-spacing:0; text-transform:none; color:var(--tinta);
  cursor:pointer;
}
.casilla input{ width:18px; height:18px; min-height:0; accent-color:var(--rosa); flex:none; }
button.estado{ cursor:pointer; border:0; }


/* ---------- marcado de contenido de ejemplo ---------- */
.nota--demo{ border-left-color:var(--rosa); background:color-mix(in oklch,var(--rosa) 8%, var(--crema)); }
.resena--demo{ border-style:dashed; }
.resena__cinta{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  background:var(--rosa); color:var(--carbon);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  padding:.2rem .5rem;
}
.resena{ position:relative; }

/* ---------- galería de reseñas: 4 por vista ---------- */
.vitrina{ position:relative; display:grid; }
.vitrina:focus-visible{ outline:2px solid var(--rosa-hondo); outline-offset:4px; }
.vitrina__pagina{
  grid-area:1/1; display:grid; gap:var(--s-2);
  grid-template-columns:repeat(4, minmax(0, 1fr));
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--t-lento) var(--sal),
             transform var(--t-lento) var(--sal),
             visibility var(--t-lento);
}
.vitrina__pagina.es-activa{ opacity:1; visibility:visible; transform:none; }

/* a menos ancho, menos columnas: 4 tarjetas no caben en un teléfono */
@media (max-width:1040px){
  .vitrina__pagina{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* En dos columnas la tarjeta mide el doble de ancho, y con 4/3 la
     foto sola se lleva 350 px: la sección se salía de la pantalla. */
  .resena__foto{ aspect-ratio:16/9; }
}
@media (max-width:560px){  .vitrina__pagina{ grid-template-columns:1fr; } }

.vitrina__puntos{ display:flex; justify-content:center; gap:.45rem; margin-top:var(--s-3); }
.vitrina__puntos button{ width:30px; height:24px; display:grid; place-items:center; }
.vitrina__puntos button::after{
  content:""; width:100%; height:2px; background:var(--linea-tinta);
  transition:background var(--t-medio) var(--sal);
}
.vitrina__puntos button[aria-selected="true"]::after{ background:var(--rosa); }
.vitrina__puntos button:hover::after{ background:var(--rosa-hondo); }

@media (prefers-reduced-motion:reduce){ .vitrina__pagina{ transition:none; } }


/* ============================================================
   EL ROSADO COMO SUPERFICIE
   Reparto buscado: 30% negro · 30% rosado · 30% blanco · 10% oro.
   Con el rosado solo en detalles no llegaba ni al 5%, así que
   toma secciones completas.
   ============================================================ */

.seccion--rosa{ background:var(--rosa-velo); }
.seccion--rosa .ficha__foto,
.seccion--rosa .resena__foto{ background:#fff; }

/* cajas de resumen (carrito, checkout) sobre rosa */
.resumen{ background:var(--rosa-velo); border-color:color-mix(in oklch,var(--rosa) 35%,transparent); }
.resumen__total{ border-top-color:color-mix(in oklch,var(--rosa) 55%,transparent); }

/* formularios destacados */
.form--compacto{ background:var(--rosa-velo); border-color:color-mix(in oklch,var(--rosa) 30%,transparent); }
.admin-guia{ background:var(--rosa-velo); border-top-color:var(--rosa); }

/* tarjetas de cifras alternadas: rompe el blanco corrido */
.tarjeta:nth-child(even){ background:var(--rosa-velo); }

/* las reseñas viven sobre rosa; la tarjeta blanca las recorta */
.seccion--rosa .resena{ background:var(--crema); }

/* ---------- el dorado se repliega al 10% ----------
   Se queda donde de verdad aporta: el logo, las estrellas de las
   reseñas, el estado "pagado" y los filetes de cierre de sección. */
.estrellas{ color:var(--oro-hondo); }
.seccion--oscura .estrellas, .cierre .estrellas{ color:var(--oro); }
.footer__legal{ border-top-color:color-mix(in oklch, var(--oro) 22%, transparent); }
.resumen__lista{ color:inherit; }

/* marcas sobre claro: sus tarjetas necesitan filete de tinta, no de crema */
.rueda--claro .marca{ border-color:var(--linea-tinta); }
.rueda--claro .marca__meta{ color:var(--tinta-suave); }
.rueda--claro .marca:hover{ border-color:var(--linea-rosa); background:color-mix(in oklch,var(--rosa) 8%,transparent); }
.rueda--claro ~ .rueda__puntos button::after{ background:var(--linea-tinta); }
.rueda--claro ~ .rueda__puntos button[aria-selected="true"]::after{ background:var(--rosa); }


/* ---------- legibilidad sobre superficie rosa ---------- */
.seccion--rosa .ficha__marca,
.seccion--rosa .resena__marca,
.seccion--rosa .enlace-mas,
.seccion--rosa .rotulo{ color:var(--rosa-tinta); }

/* estrellas: son gráfico, no texto, pero 2,95 no alcanzaba ni el 3:1 */
.estrellas{ color:oklch(54% 0.125 76); }
.seccion--oscura .estrellas, .cierre .estrellas{ color:var(--oro); }

/* ============================================================
   PORTADA: un solo fondo negro (el hero) y frames en blanco.
   Las secciones pasan al velo rosa para que las bandas blancas
   se lean como separadores; si todo fuera blanco, desaparecerían.
   ============================================================ */

/* el cierre deja el negro: queda sobre rosa, con el texto en tinta */
.cierre--rosa{ background:var(--rosa-velo); color:var(--tinta); }
.cierre--rosa::before{
  background:radial-gradient(50% 60% at 22% 50%, color-mix(in oklch,var(--oro) 12%,transparent), transparent 70%);
}
.cierre--rosa .rotulo{ color:var(--rosa-tinta); }
.cierre--rosa .rotulo::after{ background:color-mix(in oklch,var(--rosa-tinta) 35%,transparent); }
.cierre--rosa h2{ color:var(--tinta); }
.cierre--rosa h2 em{ color:var(--oro-tinta); }
.cierre--rosa .cierre__bajada{ color:var(--tinta-suave); }
.cierre--rosa .btn--linea{
  border-color:color-mix(in oklch,var(--tinta) 26%,transparent); color:var(--tinta);
}
.cierre--rosa .btn--linea:hover{ border-color:var(--rosa-tinta); color:var(--rosa-tinta); }

/* ============================================================
   TÍTULOS EN DORADO
   Sobre negro el oro es el color del logo: ahí manda.
   ============================================================ */

.hero h1{ color:var(--oro-claro); }
/* El acento sigue siendo rosa. Sin subrayado: sobre la foto el
   filete se pierde y solo ensucia la bajante de la itálica. */
.hero h1 em{ color:var(--rosa-claro); }

.seccion--oscura h2,
.cierre:not(.cierre--rosa) h2,
.footer__col h4{ color:var(--oro-claro); }
.seccion--oscura h2 em,
.cierre:not(.cierre--rosa) h2 em{ color:var(--rosa-claro); }

/* sobre claro el oro pierde contraste en texto grande fino:
   se reserva para la palabra acentuada, no para el título entero */
.seccion--rosa h2 em,
.pag__cab h1 em{ color:var(--oro-tinta); }

/* ============================================================
   PORTADA ÍNTEGRAMENTE NEGRA
   El fondo es uno solo de arriba abajo; las únicas bandas claras
   son los cuatro frames, que por contraste hacen de separadores.
   ============================================================ */

.index-oscuro{ background:var(--carbon); color:var(--crema); }
.index-oscuro .seccion--oscura{ background:transparent; }
.index-oscuro .hero{ background:transparent; }
.index-oscuro .cierre{ background:transparent; }

/* ---------- textos de sección sobre negro ---------- */
.index-oscuro .seccion__cab p{ color:color-mix(in oklch,var(--crema) 66%,var(--carbon)); }
.index-oscuro .conteo{ color:color-mix(in oklch,var(--crema) 55%,var(--carbon)); }

/* ---------- fichas de producto sobre negro ---------- */
.index-oscuro .ficha__foto{ border-color:color-mix(in oklch,var(--crema) 16%,transparent); }
.index-oscuro .ficha__marca{ color:var(--rosa); }
.index-oscuro .ficha__nombre{ color:var(--crema); }
.index-oscuro .ficha__precio{ color:var(--crema); }
.index-oscuro .ficha__precio--consultar,
.index-oscuro .ficha__antes{ color:color-mix(in oklch,var(--crema) 55%,var(--carbon)); }
.index-oscuro .ficha__ver{ color:var(--rosa); }

/* ---------- reseñas sobre negro ---------- */
.index-oscuro .resena{
  background:var(--carbon-alto);
  border-color:color-mix(in oklch,var(--crema) 14%,transparent);
}
.index-oscuro .resena:hover{ border-color:var(--linea-rosa); }
.index-oscuro .resena__foto{ border-bottom-color:color-mix(in oklch,var(--crema) 14%,transparent); }
.index-oscuro .resena__marca{ color:var(--rosa); }
.index-oscuro .resena__producto a{ color:var(--crema); }
.index-oscuro .resena__producto a:hover{ color:var(--rosa-claro); }
.index-oscuro .resena__texto{
  color:color-mix(in oklch,var(--crema) 74%,var(--carbon));
  border-left-color:var(--linea-rosa);
}
.index-oscuro .resena__pie{ color:color-mix(in oklch,var(--crema) 62%,var(--carbon)); }
.index-oscuro .resena__autora{ color:var(--crema); }
.index-oscuro .estrellas{ color:var(--oro); }
.index-oscuro .resenas__promedio{ color:color-mix(in oklch,var(--crema) 62%,var(--carbon)); }
.index-oscuro .resenas__promedio strong{ color:var(--oro-claro); }
.index-oscuro .resena__cinta{ background:var(--rosa); color:var(--carbon); }
.index-oscuro .nota--demo{
  background:color-mix(in oklch,var(--rosa) 14%,var(--carbon));
  border-left-color:var(--rosa);
  color:var(--crema);
}

/* ---------- controles y puntos sobre negro ---------- */
/* sobre negro, un relleno de carbón translúcido es invisible y el
   filete al 22 % se quedaba en 1,83 de contraste: el botón no tenía
   borde perceptible. Se sube el filete y el relleno se aclara. */
.index-oscuro .carrusel__flecha{
  border-color:color-mix(in oklch,var(--crema) 45%,transparent); color:var(--crema);
  background:color-mix(in oklch,var(--crema) 10%,var(--carbon));
}
.index-oscuro .carrusel__flecha:hover{
  border-color:var(--rosa); color:var(--rosa-claro);
  background:color-mix(in oklch,var(--rosa) 24%,var(--carbon));
}
.index-oscuro .giro__puntos button::after,
.index-oscuro .vitrina__puntos button::after{ background:color-mix(in oklch,var(--crema) 22%,transparent); }
.index-oscuro .giro__puntos button[aria-selected="true"]::after,
.index-oscuro .vitrina__puntos button[aria-selected="true"]::after{ background:var(--rosa); }
.index-oscuro .giro__item[data-pos="0"] .ficha__foto{ border-color:var(--linea-rosa); }

/* ---------- el cierre vuelve al negro ---------- */
.index-oscuro .cierre h2{ color:var(--oro-claro); }
.index-oscuro .cierre h2 em{ color:var(--rosa-claro); }
.index-oscuro .cierre__bajada{ color:color-mix(in oklch,var(--crema) 70%,var(--carbon)); }

/* ============================================================
   CONSENTIMIENTO
   Banda dentro de la página, no ventana emergente. Las dos
   opciones ocupan lo mismo y cuestan un clic: si rechazar fuera
   más difícil que aceptar, el consentimiento no sería libre.
   ============================================================ */
.consenso{
  position:fixed; inset:auto 0 0; z-index:150;
  background:color-mix(in oklch, var(--carbon) 96%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea-rosa);
  color:var(--crema);
  padding-block:var(--s-2);
  animation:consenso-entra var(--t-lento) var(--sal);
}
@keyframes consenso-entra{ from{ transform:translateY(100%); } }
.consenso.se-va{ transform:translateY(100%); transition:transform .25s var(--sal); }

.consenso__caja{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s-2) var(--s-3); justify-content:space-between;
}
.consenso__texto{
  flex:1 1 22rem; margin:0; max-width:62ch;
  font-size:var(--t-sm); line-height:1.55;
  color:color-mix(in oklch, var(--crema) 82%, var(--carbon));
}
.consenso__texto strong{ color:var(--crema); font-weight:500; }
.consenso__texto a{
  color:var(--rosa-claro); border-bottom:1px solid var(--linea-rosa);
  white-space:nowrap;
}
.consenso__texto a:hover{ border-bottom-color:var(--rosa); }

.consenso__botones{ display:flex; gap:var(--s-1); flex:0 0 auto; }
/* mismo tamaño las dos: ninguna se esconde */
.consenso__botones .btn{ flex:1; min-width:11rem; padding-inline:1.2rem; }

@media (max-width:40rem){
  .consenso__botones{ width:100%; }
  .consenso__botones .btn{ min-width:0; }
}
@media (prefers-reduced-motion:reduce){
  .consenso{ animation:none; }
  .consenso.se-va{ transition:none; }
}

/* ============================================================
   PÁGINA LEGAL
   Un documento para leer, no para decorar: una columna angosta,
   jerarquía clara y nada que distraiga.
   ============================================================ */
.pag--legal .env{ max-width:52rem; }

.legal__alerta{
  border:1px solid var(--rosa-hondo);
  background:color-mix(in oklch, var(--rosa) 10%, var(--crema));
  border-radius:4px; padding:var(--s-3); margin-bottom:var(--s-4);
}
.legal__alerta h2{ font-size:var(--t-md); margin:0 0 var(--s-1); color:var(--rosa-tinta); }
.legal__alerta p{ font-size:var(--t-sm); margin:0 0 var(--s-1); }
.legal__alerta ul{ margin:0 0 var(--s-2); padding-left:1.2rem; font-size:var(--t-sm); }
.legal__alerta code{
  font-size:.92em; background:color-mix(in oklch,var(--tinta) 8%,transparent);
  padding:.1rem .3rem; border-radius:2px;
}
.legal__alerta__pie{ font-size:var(--t-xs) !important; color:var(--tinta-suave); }

/* el hueco sin llenar tiene que doler a la vista */
mark.falta{
  background:var(--rosa-hondo); color:var(--crema);
  padding:.05rem .4rem; border-radius:2px;
  font-size:.92em; letter-spacing:.04em; white-space:nowrap;
}

.legal__aviso{
  border:1px solid var(--linea-oro);
  background:var(--crema-hueso);
  border-radius:4px; padding:var(--s-3); margin-bottom:var(--s-3);
}
.legal__aviso h2{ font-size:var(--t-md); margin:0 0 var(--s-2); }
.legal__aviso p{ font-size:var(--t-sm); margin:0 0 var(--s-1); }
.legal__aviso p:last-child{ margin-bottom:0; }

.legal__indice{
  border-block:1px solid var(--linea-tinta);
  padding-block:var(--s-2); margin-bottom:var(--s-4);
}
.legal__indice h2{
  font-family:var(--texto); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-suave);
  margin:0 0 var(--s-1);
}
.legal__indice ol{
  columns:2; column-gap:var(--s-3);
  margin:0; padding-left:1.2rem; font-size:var(--t-sm);
}
.legal__indice li{ break-inside:avoid; margin-bottom:.2rem; }
@media (max-width:38rem){ .legal__indice ol{ columns:1; } }

.legal section{ margin-bottom:var(--s-4); scroll-margin-top:calc(var(--alto-header) + var(--s-3)); }
.legal h2{
  font-size:var(--t-lg); font-weight:400; letter-spacing:-.01em;
  margin:0 0 var(--s-2); padding-bottom:var(--s-1);
  border-bottom:1px solid var(--linea-rosa);
}
.legal h3{
  font-family:var(--texto); font-size:var(--t-sm); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rosa-tinta);
  margin:var(--s-3) 0 var(--s-1);
}
.legal p{ margin:0 0 var(--s-2); line-height:1.7; }
.legal a{ color:var(--rosa-tinta); border-bottom:1px solid var(--linea-rosa); }
.legal a:hover{ border-bottom-color:var(--rosa-hondo); }

.legal__lista{ margin:0 0 var(--s-2); padding-left:1.2rem; }
.legal__lista li{ margin-bottom:.45rem; line-height:1.65; }
.legal__lista li::marker{ color:var(--rosa-hondo); }

.legal__destaque{
  border-left:3px solid var(--oro);
  background:var(--crema-hueso);
  padding:var(--s-2) var(--s-3); border-radius:0 3px 3px 0;
}

.legal__ficha{ margin:0 0 var(--s-2); display:grid; gap:.1rem; }
.legal__ficha > div{
  display:grid; grid-template-columns:12rem minmax(0,1fr); gap:var(--s-2);
  padding:.55rem 0; border-bottom:1px solid var(--linea-tinta);
}
.legal__ficha--ancha > div{ grid-template-columns:10rem minmax(0,1fr); }
.legal__ficha dt{
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.legal__ficha dd{ margin:0; font-size:var(--t-sm); line-height:1.6; }
.legal__nota{ color:var(--tinta-suave); font-weight:400; text-transform:none; letter-spacing:0; }
@media (max-width:38rem){
  .legal__ficha > div, .legal__ficha--ancha > div{ grid-template-columns:1fr; gap:.15rem; }
}

.legal__pie{
  border-top:1px solid var(--linea-oro);
  padding-top:var(--s-3); margin-top:var(--s-4);
  font-size:var(--t-sm); color:var(--tinta-suave);
}

/* ============ tarjetas luxury: más grandes + franja dorada al hover ============ */
.rejilla{ gap:var(--s-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); }
@media (min-width:560px){ .rejilla{ grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr)); } }
.rejilla .ficha{ contain-intrinsic-size:auto 380px; }
.marcas{ gap:var(--s-3); grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); }

.ficha, .marca{
  position:relative; overflow:hidden; isolation:isolate;
  padding:.75rem; border:1px solid var(--linea-tinta);
  background:color-mix(in oklch,var(--crema) 40%,#fff);
  transition:border-color var(--t-medio) var(--sal), box-shadow var(--t-medio) var(--sal), transform var(--t-medio) var(--sal);
}
.index-oscuro .ficha{ background:color-mix(in oklch,var(--crema) 5%,transparent); border-color:color-mix(in oklch,var(--crema) 16%,transparent); }
.ficha:hover, .marca:hover{
  border-color:#c9a24d; transform:translateY(-3px);
  box-shadow:0 14px 34px -18px rgba(150,110,30,.55);
}
.ficha::after, .marca::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 38%, rgba(232,196,110,.18) 44%, rgba(255,226,150,.55) 50%,
    rgba(232,196,110,.18) 56%, transparent 62%);
  background-size:300% 100%; background-position:100% 0;
  filter:blur(3px); opacity:0; transition:opacity .3s ease;
}
.ficha:hover::after, .marca:hover::after{
  opacity:1; animation:franjaDorada 6.4s ease-in-out infinite;
}
/* 1.2 s cruzando, 2 s de espera en cada lado */
@keyframes franjaDorada{
  0%      { background-position:100% 0; }
  18.75%  { background-position:0% 0; }
  50%     { background-position:0% 0; }
  68.75%  { background-position:100% 0; }
  100%    { background-position:100% 0; }
}
@media (prefers-reduced-motion:reduce){
  .ficha:hover::after, .marca:hover::after{ animation:none; opacity:0; }
  .ficha:hover, .marca:hover{ transform:none; }
}

/* ---------- checkout: separador Wompi / contra entrega ---------- */
.pago__o{ display:flex; align-items:center; gap:var(--s-2); margin:var(--s-2) 0; color:var(--tinta-suave); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; }
.pago__o::before, .pago__o::after{ content:""; flex:1; height:1px; background:var(--linea-tinta); }
.pago__botones{ display:grid; gap:var(--s-1); grid-template-columns:1fr; }
@media (min-width:520px){ .pago__botones{ grid-template-columns:1fr 1fr; } }