/* ====================================================================
   COPO · Sistema de diseño
   Monocromo (negro / blanco / plata) con azul glaciar de acento.
   La plata es SOLO para precios: un gris plano se ve barato, el
   degradado con background-clip es lo que lo hace leer como metal.

   Ritmo: las secciones narrativas ocupan la pantalla completa y el
   scroll se acomoda a ellas. Las de contenido (catálogo, formularios)
   crecen libres — forzarlas rompería la lectura.
   ==================================================================== */

:root {
  /* Base monocroma */
  --negro:      #000000;
  --grafito:    #0E1114;
  --carbon:     #1A1F24;
  --humo:       #8C939A;
  --niebla:     #E5E7EB;
  --perla:      #F4F7F9;
  --blanco:     #FFFFFF;

  /* Acento */
  --glaciar:    #5B8FA8;
  --glaciar-osc:#3E6D84;
  --hielo:      #CFE0EA;

  /* Utilidad */
  --whatsapp:   #25D366;
  --exito:      #1B7F4C;
  --error:      #B42318;

  /* Tipografía
     ------------------------------------------------------------------
     Antes: Anton (una condensada de cartel, gruesa y gritona) con Space
     Grotesk. Ahora una pareja seria: un serif editorial para los
     titulares y una sans neutra para leer.

     Bodoni Moda: es la equivalente LIBRE mas cercana a Parmigiano, que
     es de Typotheque y de pago. Las dos son didonas: mismo contraste
     brutal entre el trazo grueso y el fino, mismos remates rectos.

     Es variable y trae eje optico (opsz): a tamaño de titular saca los
     finos de pelo que le dan el aire caro, y a tamaño chico los engorda
     sola para que no desaparezcan. Eso es justo lo que hace falta aqui,
     porque el fondo es negro y un fino de pelo sobre negro se corta.
     Se le pasa font-optical-sizing: auto para que ese eje funcione.

     Inter: pensada para pantalla. A 13-15 px se lee limpia y tiene
     todos los acentos y la eñe, que es lo que aqui hace falta.

     Dos familias y no tres: Playfair en cursiva hace el papel que hacia
     Instrument Serif, y cada familia menos es una descarga menos. */
  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', Georgia, serif;
  --texto:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:   'Bodoni Moda', Georgia, serif;

  /* Espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radio:    8px;
  --radio-lg: 18px;
  --radio-xl: 28px;
  --ancho:    1280px;
  --header-h: 68px;

  --sombra-sm: 0 2px 8px rgba(14,17,20,.06);
  --sombra:    0 10px 30px rgba(14,17,20,.08);
  --sombra-lg: 0 26px 70px rgba(14,17,20,.16);

  /* Curva de salida: arranca rápido y frena suave. Es lo que hace que
     el movimiento se sienta físico en vez de mecánico. */
  --curva: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* "proximity" acomoda la sección cuando el scroll queda cerca, pero
     no secuestra el gesto como haría "mandatory". */
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--grafito);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--glaciar);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (max-width: 560px) { .contenedor { padding: 0 var(--sp-4); } }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ====================================================================
   NIEVE — el hilo de marca, sobre toda la página
   ==================================================================== */
#nieve {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 60;
  opacity: .75;
}

/* ====================================================================
   REVELADO AL HACER SCROLL
   ==================================================================== */
/* Ojo con el ".js": el contenido solo arranca invisible si el JavaScript
   esta vivo para revelarlo. Sin esa condicion, un error de script deja
   la pagina entera en blanco. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   .9s var(--curva) var(--retraso, 0ms),
    transform .9s var(--curva) var(--retraso, 0ms);
  will-change: opacity, transform;
}
.js [data-revelar].visible { opacity: 1; transform: none; }

.js [data-revelar="izquierda"] { transform: translateX(-38px); }
.js [data-revelar="derecha"]   { transform: translateX(38px); }
.js [data-revelar="escala"]    { transform: scale(.94); }

/* En un celular de 375px, un titular a todo lo ancho desplazado 38px
   se sale de la pantalla mientras espera a ser revelado. No llegaba a
   verse porque el body lo recorta, pero depender de ese recorte es
   fragil: basta con que alguien lo quite para que aparezca una barra
   horizontal. Ademas, deslizar de lado un texto que ocupa todo el
   ancho no se lee como entrada, se lee como que el texto se corrio.
   Abajo de 640px entran desde abajo, como el resto. */
@media (max-width: 640px) {
  .js [data-revelar="izquierda"],
  .js [data-revelar="derecha"] { transform: translateY(26px); }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 700; }

.titulo-seccion {
  font-family: var(--display);
  /* Bajado desde 58px: Playfair ocupa bastante mas ancho que Anton al
     mismo tamaño, y «Lo que mas se lleva» se salia del contenedor. */
  font-size: clamp(27px, 4.4vw, 46px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: .015em;
  margin-bottom: var(--sp-3);
}

.bajada {
  color: var(--humo);
  font-size: clamp(15px, 2vw, 18.5px);
  max-width: 58ch;
  line-height: 1.7;
}

/* Marca de sección: un copo pequeño antes del título */
.marca-seccion {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--glaciar);
  margin-bottom: var(--sp-4);
}
.marca-seccion::before {
  content: '';
  width: 34px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.cursiva { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Parrafos de cuerpo dentro de las secciones narrativas */
.parrafo { line-height: 1.8; color: var(--carbon); margin-bottom: var(--sp-5); }
.parrafo-fuerte { line-height: 1.8; font-size: 17.5px; margin-bottom: var(--sp-4); }
.seccion--oscura .parrafo { color: rgba(255,255,255,.66); }

/* ====================================================================
   PRECIOS — plata metálica
   ==================================================================== */
.precio {
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 38px);
  /* Peso alto a proposito: el degradado de plata se recorta SOBRE las
     letras, y con el trazo fino de un serif quedaba deslavado y casi
     no se leia el precio. */
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(155deg, #FFFFFF 0%, #DCE8EF 42%, #93A9B7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(201,222,235,.28));
}

/* Flotando: 4.5s, infinito. Le da vida al dato más importante. */
.precio--flota { animation: flotar 4.5s ease-in-out infinite; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Sobre fondo claro el degradado plata desaparece: ahí va negro sólido. */
.precio--claro {
  background: none;
  -webkit-text-fill-color: var(--negro);
  color: var(--negro);
  filter: none;
}

.precio-antes {
  font-family: var(--texto);
  font-size: .5em;
  color: var(--humo);
  text-decoration: line-through;
  text-decoration-color: var(--glaciar);
  text-decoration-thickness: 2px;
  margin-right: var(--sp-2);
  font-weight: 500;
}

.etiqueta-off {
  display: inline-block;
  background: var(--glaciar);
  color: var(--blanco);
  font-size: 13px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: middle;
}

/* ====================================================================
   BOTONES
   ==================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform .28s var(--curva), background .25s ease,
              color .25s ease, box-shadow .28s var(--curva),
              border-color .25s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primario { background: var(--negro); color: var(--blanco); }
.btn--primario:hover { background: var(--carbon); }

.btn--glaciar { background: var(--glaciar); color: var(--blanco); }
.btn--glaciar:hover { background: var(--glaciar-osc); }

.btn--borde { background: transparent; color: var(--negro); border-color: currentColor; }
.btn--borde:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

.btn--claro { background: var(--blanco); color: var(--negro); }
.btn--claro:hover { background: var(--hielo); }

.btn--whatsapp { background: var(--whatsapp); color: #04301A; }
.btn--whatsapp:hover { filter: brightness(1.06); }

.btn--bloque { width: 100%; }
/* "sm" es visualmente más compacto, pero nunca por debajo de 44px:
   ese es el mínimo para que un dedo acierte. */
.btn--sm { min-height: 46px; padding: 10px 20px; font-size: 14px; }

/* ====================================================================
   HEADER — flotante, se esconde al bajar y vuelve al subir
   ==================================================================== */
.header {
  position: fixed;
  top: var(--sp-3); left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  /* width:auto -> la capsula mide lo que miden logo, menu e iconos.
     Nada de estirarla a 1280px llena de aire. */
  width: auto;
  max-width: calc(100% - 2 * var(--sp-4));
  border-radius: 999px;
  background: rgba(10, 13, 16, .55);
  /* El desenfoque es lo que lo hace leer como cristal y no como barra. */
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--blanco);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  /* Al VOLVER es rapido: si tardara, el usuario sube y no encuentra el menu. */
  transition: transform .4s var(--curva), opacity .3s ease, background .35s ease;
}

/* Al bajar se va hacia arriba y se difumina, despacio: 3 segundos.
   La lentitud va solo en la salida, no en el regreso. */
.header--oculto {
  transform: translateX(-50%) translateY(calc(-100% - var(--sp-5)));
  opacity: 0;
  pointer-events: none;
  transition: transform 3s var(--curva), opacity 3s ease;
}

/* Ya fuera del hero se opaca un poco para que el texto no compita. */
.header--solido { background: rgba(10, 13, 16, .82); }

.header__barra {
  display: flex; align-items: center;
  gap: var(--sp-3);
  height: var(--header-h);
  padding: 0 var(--sp-2) 0 var(--sp-5);
}
@media (max-width: 560px) { .header__barra { padding: 0 var(--sp-2) 0 var(--sp-4); } }

.logo {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--blanco);
  display: flex; align-items: center; gap: var(--sp-2);
  flex-shrink: 0;
  min-height: 44px;
  transition: opacity .2s ease;
}
.logo:hover { opacity: .78; }
.logo__copo {
  color: var(--hielo);
  font-size: 19px;
  display: inline-block;
  animation: girar 14s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Sin flex:1 — el menú ocupa lo suyo y no estira la cápsula. */
.header__nav { display: flex; gap: var(--sp-5); margin-left: var(--sp-4); }
.header__nav a {
  position: relative;
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.72);
  padding: 8px 0;
  transition: color .2s ease;
}
.header__nav a::after {
  content: '';
  position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 2px;
  background: var(--glaciar);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--curva);
}
.header__nav a:hover { color: var(--blanco); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__nav a.activo { color: var(--blanco); }
.header__nav a.activo::after { transform: scaleX(1); }

.header__acciones { display: flex; align-items: center; gap: var(--sp-1); }

.icono-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  min-width: 44px; height: 44px;
  padding: 0 10px;
  color: var(--blanco);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background .2s ease, transform .2s var(--curva);
}
.icono-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }

/* ====================================================================
   MENÚ DE CUENTA
   ==================================================================== */
.cuenta { position: relative; }

.cuenta__boton {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 10px 0 6px;
  border-radius: 999px;
  color: var(--blanco);
  font-size: 14px; font-weight: 600;
  transition: background .2s ease;
}
.cuenta__boton:hover { background: rgba(255,255,255,.12); }
.cuenta__boton[aria-expanded="true"] { background: rgba(255,255,255,.16); }

.cuenta__avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--glaciar);
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 15px; letter-spacing: .04em;
}
.cuenta__avatar--grande { width: 42px; height: 42px; font-size: 19px; }

.cuenta__icono {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
}

.cuenta__nombre { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cuenta__flecha { display: flex; opacity: .6; transition: transform .3s var(--curva); }
.cuenta__boton[aria-expanded="true"] .cuenta__flecha { transform: rotate(180deg); }

/* ---------- El panel ---------- */
.cuenta__panel {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  z-index: 120;
  width: 264px;
  padding: var(--sp-3);
  background: var(--blanco);
  color: var(--grafito);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);

  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(.97);
  transform-origin: top right;
  transition: opacity .22s ease, transform .3s var(--curva), visibility .22s;
}
.cuenta__panel.abierto { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.cuenta__cabeza {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--niebla);
  margin-bottom: var(--sp-2);
}
.cuenta__cabeza--invitado { flex-direction: column; align-items: flex-start; gap: 3px; }
.cuenta__cabeza--invitado strong { font-size: 15px; }
.cuenta__cabeza--invitado span { font-size: 12.5px; color: var(--humo); line-height: 1.45; }

.cuenta__datos { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cuenta__datos strong {
  font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cuenta__datos span {
  font-size: 12px; color: var(--humo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cuenta__opcion {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: 11px var(--sp-3);
  border-radius: var(--radio);
  font-size: 14.5px; text-align: left;
  color: var(--carbon);
  transition: background .18s ease, color .18s ease;
}
.cuenta__opcion:hover { background: var(--perla); color: var(--negro); }
.cuenta__opcion > span:first-child { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

/* Aviso de pedidos por pagar: el dato que más le importa al cliente */
.cuenta__marca {
  margin-left: auto;
  background: var(--glaciar); color: var(--blanco);
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}

.cuenta__linea { height: 1px; background: var(--niebla); margin: var(--sp-2) 0; }

.cuenta__salir { margin: 0; }
.cuenta__opcion--salir { color: var(--error); font-weight: 600; }
.cuenta__opcion--salir:hover { background: #FDECEA; color: var(--error); }

/* Botón "cerrar sesión" del pie: se ve como enlace, no como botón */
.pie__salir {
  color: rgba(255,255,255,.66);
  padding: 11px 0; min-height: 44px;
  font-size: 14px; text-align: left;
  transition: color .2s ease, padding-left .25s var(--curva);
}
.pie__salir:hover { color: var(--blanco); padding-left: 5px; text-decoration: underline; }

@media (max-width: 560px) {
  /* En móvil el nombre no cabe: queda solo el avatar */
  .cuenta__nombre { display: none; }
  .cuenta__boton { padding: 0 4px; gap: 4px; }
  /* El panel se ancla a la pantalla, no al botón, para no salirse */
  .cuenta__panel {
    position: fixed;
    top: calc(var(--header-h) + var(--sp-5));
    left: var(--sp-4); right: var(--sp-4);
    width: auto;
  }
}

.globito {
  position: absolute; top: 3px; right: 0;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--glaciar); color: var(--blanco);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: 2px solid var(--grafito);
}
.globito[data-cuenta="0"] { display: none; }
/* Late cuando cambia: confirma la acción sin necesidad de leer nada. */
.globito--late { animation: latir .45s var(--curva); }
@keyframes latir {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.hamburguesa { display: none; }

/* Empuja el contenido en las páginas que no tienen hero a pantalla completa */
.con-espacio-header { padding-top: calc(var(--header-h) + var(--sp-7)); }

/* ====================================================================
   CINTA de garantías — se desliza sola
   ==================================================================== */
.cinta {
  background: var(--grafito);
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  overflow: hidden;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cinta__pista {
  display: flex; gap: var(--sp-7);
  width: max-content;
  animation: desfilar 34s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista span {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; letter-spacing: .04em;
}
/* Antes aqui iba un ❄ de texto. Se cambia por una linea: el caracter
   lo pinta cada sistema a su manera y en varios sale como emoji de
   color, que es justo lo que rompia el tono. */
.cinta__pista span::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--glaciar);
  flex: none;
}
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====================================================================
   AVISOS
   ==================================================================== */
.aviso {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radio-lg);
  margin-bottom: var(--sp-4);
  font-size: 15px;
  border-left: 4px solid;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  animation: entrar .5s var(--curva);
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.aviso--exito { background: #E7F5EE; border-color: var(--exito); color: #0E5133; }
.aviso--error { background: #FDECEA; border-color: var(--error); color: #8A1C13; }
.aviso--info  { background: var(--perla); border-color: var(--glaciar); color: var(--grafito); }

/* ====================================================================
   SECCIONES
   ==================================================================== */
.seccion { padding: var(--sp-9) 0; position: relative; }

/* Ocupa la pantalla y se acomoda al hacer scroll.
   min-height, no height: si el contenido no cabe (celular angosto),
   la seccion crece en vez de recortarlo. */
.seccion--pantalla {
  min-height: 100svh;
  display: flex; align-items: center;
  scroll-snap-align: start;
  padding: calc(var(--header-h) + var(--sp-6)) 0 var(--sp-6);
}
.seccion--pantalla > .contenedor { width: 100%; }

/* Dentro de una seccion a pantalla completa, la tarjeta se compacta
   para que la rejilla entera quepa sin recortar el titular. */
.seccion--pantalla .tarjeta__media { aspect-ratio: 3 / 2; }
.seccion--pantalla .tarjeta__cuerpo { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.seccion--pantalla .rejilla { gap: var(--sp-4); }

/* Cabeza con el enlace del catalogo al lado, no debajo: ahorra una fila */
.cabeza-fila {
  display: flex; justify-content: space-between;
  align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap;
}

.seccion--perla  { background: var(--perla); }

/* Negro puro, no grafito: el inicio va todo en negro y el video del
   hero, la foto de la portada y las secciones tienen que ser el mismo
   fondo. Con #0E1114 se veia el corte entre una seccion y la de al lado
   como una franja gris mas clara. */
.seccion--oscura { background: var(--negro); color: var(--blanco); }
.seccion--oscura .bajada { color: rgba(255,255,255,.66); }
.seccion--oscura .titulo-seccion { color: var(--blanco); }
.seccion--oscura .parrafo { color: rgba(255,255,255,.7); }

/* ---- Lo que vive DENTRO de una seccion oscura -------------------
   Estas piezas nacieron para fondo claro: llevan fondo blanco y letra
   negra. Sobre negro habria que leerlas a ciegas, asi que aqui se
   invierten. Se hace con el descendiente .seccion--oscura y no
   cambiando la pieza, para que sigan sirviendo en las paginas claras
   (productos.php, carrito, la ficha) que NO se tocan. */

/* Las tarjetas del catalogo */
.seccion--oscura .tarjeta {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.14);
  color: var(--blanco);
}
.seccion--oscura .tarjeta:hover { border-color: rgba(207,224,234,.42); }
.seccion--oscura .tarjeta__nombre,
.seccion--oscura .tarjeta__nombre a { color: var(--blanco); }
.seccion--oscura .tarjeta__gancho { color: rgba(255,255,255,.66); }
.seccion--oscura .tarjeta__anticipo { color: rgba(255,255,255,.72); }
.seccion--oscura .tarjeta__anticipo strong { color: var(--blanco); }

/* El precio tachado: sobre negro, el gris de antes desaparecia */
.seccion--oscura .precio-antes { color: rgba(255,255,255,.45); }

/* La caja del mapa de cobertura */
.seccion--oscura .cobertura__caja { color: var(--blanco); }

/* Botones de borde: el borde negro sobre negro no existia */
.seccion--oscura .btn--borde {
  border-color: rgba(255,255,255,.38);
  color: var(--blanco);
}
.seccion--oscura .btn--borde:hover {
  background: var(--blanco);
  color: var(--negro);
}

/* Las capturas de WhatsApp llevan marco blanco: sobre negro se
   quedan, pero el marco se suaviza para que no deslumbre. */
.seccion--oscura .prueba-chat { border-color: rgba(255,255,255,.12); }

.seccion__cabeza { margin-bottom: var(--sp-7); }

/* ====================================================================
   PORTADA — la imagen de marca, una pantalla exacta
   ====================================================================
   La imagen es HORIZONTAL 16:9 (1672x941). Va con object-fit: cover, no
   contain: cover la hace llenar la pantalla entera sin borde.

   Lo que cover recorta es distinto segun el aparato, y por eso funciona:
     - En escritorio (tambien ~16:9) practicamente no recorta nada.
     - En movil, que es vertical, recorta por los LADOS. Y lo que hay a
       los lados son los arboles del fondo: el logo, el lema y los
       productos estan CENTRADOS, asi que se quedan.
   Si se usara contain, en un movil de 375 px la imagen mediria 211 px de
   alto y dejaria 600 px de negro vacio.

   El fondo casi negro se mantiene: se ve durante el instante en que la
   imagen aun no ha cargado, y coincide con sus esquinas.
   ==================================================================== */
.portada {
  position: relative;
  /* svh y no vh: con vh, la barra del navegador movil se come el borde
     de abajo y el "Desliza" queda fuera de la pantalla. */
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--negro);
  scroll-snap-align: start;
  overflow: hidden;
}

/* <picture> es un contenedor en linea: sin esto no ocupa nada y la
   imagen no se coloca donde debe. */
.portada picture {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ---- COMPUTADOR ----------------------------------------------------
   La imagen ya viene con la medida buena (1672x941), asi que NO se
   estira a la fuerza: se le da el ancho completo de la pantalla y la
   altura la calcula sola manteniendo la proporcion.

   Que significa en la practica:
     - En una ventana de 1672px o menos, se ve a tamaño natural o menor.
       Nitida, sin inventar pixeles.
     - En una mas ancha, se agranda SOLO lo justo para cubrir el ancho,
       que es lo unico que no puede quedar corto.
   Nunca se amplia mas alla de eso, al reves que object-fit: cover, que
   estiraba hasta llenar tambien el alto y la dejaba blanda. */
.portada__img {
  width: 100%;
  height: auto;
  /* Si la altura resultante pasa de la pantalla, el sobrante se recorta
     por arriba y por abajo a partes iguales — la seccion es flex y
     centra, y lleva overflow:hidden. */
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---- CELULAR -------------------------------------------------------
   Aqui entra herocel.jpg, que es vertical (1024x1536) igual que la
   pantalla. Con cover llena de lado a lado y de arriba abajo; lo poco
   que recorta son los bordes, y el logo y los productos van centrados,
   asi que se quedan. Con la regla de escritorio quedaria una franja
   negra enorme arriba y abajo. */
@media (max-width: 720px) {
  .portada__img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

/* Un velo muy suave abajo. No es decoracion: el "Desliza" es blanco y
   sobre la parte clara de la foto (la nieve, las luces) se perdia. */
.portada::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.6));
  pointer-events: none;
}

/* El pie de la portada: boton y flecha, uno sobre otro y centrados.
   Van juntos en un contenedor y no sueltos con position:absolute cada
   uno, porque asi la separacion entre ellos es la misma en cualquier
   pantalla y no hay que recalcular dos "bottom" distintos. */
.portada__pie {
  position: absolute;
  left: 50%;
  /* safe-area: en los iPhone con barra de gestos, esa franja de abajo
     se dibuja ENCIMA de la pagina. Sin esto, el indicador queda sobre
     el boton y el primer toque lo recoge el sistema, no el enlace. */
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px);
}

.portada__cta {
  /* Sombra proyectada ademas del color: sobre una foto, un boton claro
     sin sombra se confunde con la nieve y las luces del fondo. */
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  padding-inline: var(--sp-4);
  white-space: nowrap;
  opacity: 0;
  animation: aparecer .9s ease .7s forwards;
}

/* La flecha de "Desliza" SI se queda aqui, al reves que en el hero:
   dice que la pagina sigue hacia abajo, que el boton no cuenta porque
   lleva a otro sitio. */
.portada__cue {
  position: static;
  transform: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
  opacity: 0;
  animation: aparecer 1s ease 1.4s forwards;
  pointer-events: none;
}

/* En movil el boton manda y la flecha sobra: el pulgar ya sabe que se
   desliza, y las dos cosas juntas empujan el boton demasiado arriba. */
@media (max-width: 720px) {
  .portada__cue { display: none; }
  .portada__cta { font-size: 15px; }
}
.portada__cue i {
  width: 1px; height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), transparent);
  animation: caer 2.1s ease-in-out infinite;
}

/* Quien pidio menos movimiento no ve ni la aparicion ni la gota. */
@media (prefers-reduced-motion: reduce) {
  .portada__cue { animation: none; opacity: 1; }
  .portada__cue i { animation: none; }
  /* Sin esto el boton se quedaria invisible para siempre: su opacidad
     de partida es 0 y quien la sube es la animacion. */
  .portada__cta { animation: none; opacity: 1; }
}

/* ====================================================================
   HERO — exactamente una pantalla
   ==================================================================== */
.hero {
  position: relative;
  /* min-height, NUNCA height: con altura fija, el overflow:hidden que
     recorta el video de fondo recortaba tambien el contenido cuando no
     cabia. Asi la seccion mide una pantalla y crece si hace falta.
     svh = la altura chica del viewport: con vh, la barra del navegador
     movil se come el ultimo boton. */
  min-height: 100svh;
  display: flex; align-items: center;
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
  scroll-snap-align: start;
}

/* .hero__video ya no existe: el video de fondo se quito porque el
   archivo al que apuntaba no estaba en el servidor.

   El velo de ::after tambien se va con el. Estaba para que el texto
   tuviera contraste SOBRE el video; sin video, el fondo ya es negro
   puro y ese degradado solo aclaraba el centro de la seccion, que la
   dejaba mas clara que las de al lado y se veia el corte. */

.hero__contenido {
  position: relative; z-index: 2;
  width: 100%;
  text-align: center;
  padding: calc(var(--header-h) + clamp(20px, 4.4vh, 44px)) 0 clamp(46px, 7.6vh, 78px);
}

/* ====================================================================
   HERO A DOS COLUMNAS · mensaje a la izquierda, foto y ofertas a la derecha
   ==================================================================== */
.hero__caja {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: calc(var(--header-h) + clamp(12px, 2.4vh, 28px)) 0 clamp(26px, 4vh, 44px);
}

/* ---------- Izquierda ---------- */
.hero__texto { text-align: left; }

.hero__texto h1 {
  font-family: var(--display);
  /* Ojo al bajarlo más: con la columna a la mitad del ancho, cada línea
     de este titular se parte, y cada partición cuesta ~60 px de alto
     que luego le faltan a las cifras.
     Los números bajaron respecto a Anton porque Playfair es MUCHO más
     ancha: con el tamaño de antes, este titular se iba a cuatro líneas
     y se comía las cifras de abajo. */
  font-size: clamp(26px, min(3vw, 4.8vh), 44px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.06;
  /* Un serif en mayúsculas pide aire entre letras: pegadas se leen
     como un bloque. Es lo que le da el aire de marca cara. */
  letter-spacing: .015em;
  margin-bottom: clamp(12px, 2.4vh, 22px);
}

/* "Pero todos los días": el giro de la frase, en cursiva y con aire */
.hero__pero {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, min(2.4vw, 3.4vh), 32px);
  color: var(--hielo);
  margin-bottom: clamp(18px, 3.4vh, 34px);
  opacity: 0;
  animation: aparecer .9s var(--curva) .42s forwards;
}

.hero__lista {
  list-style: none;
  display: flex; flex-direction: column;
  gap: clamp(9px, 1.7vh, 16px);
  opacity: 0;
  animation: aparecer .9s var(--curva) .58s forwards;
}
.hero__lista li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: clamp(14.5px, min(1.25vw, 2.1vh), 18px);
  color: rgba(255,255,255,.9);
  font-weight: 500;
}

.hero__tic {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glaciar);
  color: var(--blanco);
}
.hero__tic svg { width: 13px; height: 13px; }

/* ---------- La lista y las cifras, lado a lado ---------- */
.hero__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 54px);
  align-items: center;
}

/* ---------- Cifras: flotan, sin caja ----------
   No hay recuadro ni fondo. Lo que las mantiene ordenadas es la rejilla
   2×2 y que todas comparten línea base. Lo que las hace "flotar" es que
   suben y bajan muy despacio, cada una con su propio desfase. */
.hero__cifras {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.6vh, 30px) clamp(12px, 1.6vw, 26px);
}

.hero__cifras li {
  display: flex; flex-direction: column;
  gap: 3px;
  opacity: 0;
  animation:
    entrarCifra .8s var(--curva) calc(820ms + var(--orden) * 130ms) forwards,
    flotarCifra 6s ease-in-out calc(1.7s + var(--orden) * 400ms) infinite;
}

@keyframes entrarCifra {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes flotarCifra {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.hero__cifras strong {
  font-family: var(--display);
  font-size: clamp(24px, min(2.7vw, 4vh), 42px);
  line-height: 1;
  letter-spacing: .01em;
  background: linear-gradient(155deg, #FFFFFF 0%, #DCE8EF 42%, #93A9B7 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* El halo frío es lo que las despega del fondo sin necesitar caja */
  filter: drop-shadow(0 0 20px rgba(201,222,235,.35));
}

.hero__cifras span {
  font-size: clamp(9.5px, min(.8vw, 1.5vh), 11.5px);
  line-height: 1.35;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ---------- Derecha ---------- */
.hero__figura {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;

  /* Pegada arriba y subida un poco más: con los aros grandes, la foto
     centrada quedaba tapada casi hasta la barbilla. Al subirla, las
     caras quedan por encima de los aros y se ven completas. */
  align-self: start;
  margin-top: clamp(-56px, -4.6vh, -22px);

  opacity: 0;
  animation: aparecer 1s var(--curva) .3s forwards;
}

.hero__foto {
  /* Más ancha SIN crecer de alto.
     La foto original es vertical (1024×1536). Para ensancharla sin
     deformar a las personas, se le da una caja más ancha y se recorta
     arriba y abajo con object-fit: cover. El recorte se va sobre el
     fondo vacío y el vestido, no sobre las caras: por eso el encuadre
     se corre al 30% de la altura. */
  width: clamp(300px, 38vw, 560px);
  max-width: none;                 /* puede pasarse de la columna */
  /* Cede alto para que las cifras quepan dentro del hero sin que la
     sección se pase de una pantalla. */
  height: clamp(230px, 47vh, 460px);
  object-fit: cover;
  /* Anclada arriba: el pelo del hombre empieza casi en el borde de la
     foto original, así que cualquier recorte superior se lo come. Todo
     el recorte se va abajo, donde solo hay vestido y fondo — y encima
     esa zona ya va difuminada por la máscara. */
  /* 5%: se lleva el fondo vacio que hay encima del pelo, asi las caras
     suben dentro del encuadre y quedan lejos de los aros. Mas alto que
     esto empieza a cortar el pelo del hombre. */
  object-position: 50% 5%;

  /* Difuminada por abajo Y por los lados. Dos degradados que se
     multiplican: uno vertical y otro horizontal. Así la foto no
     termina en un borde recto y se siente parte de la página, no
     una estampa pegada encima. */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 68%, transparent 98%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(180deg, #000 0%, #000 68%, transparent 98%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;   /* Safari y Chrome antiguos */
  mask-composite: intersect;           /* estándar */
}

.hero__ofertas {
  position: relative;
  z-index: 2;                      /* por encima del borde difuminado */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 40px);
  width: 100%;
  max-width: 430px;
  /* Suben sobre la foto: se leen como si colgaran de cada modelo, y de
     paso recuperan el alto que ganó la imagen. */
  margin-top: clamp(-58px, -5.2vh, -18px);
}

.oferta {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}

/* El enlace a la ficha: envuelve aro, nombre y precio.
   Es un flex igual que .oferta para que la columna se vea igual que
   antes. No se usa display:contents porque hay navegadores que le
   quitan el papel de enlace al elemento y entonces un lector de
   pantalla deja de anunciarlo como algo que se puede pulsar. */
.oferta__enlace {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  color: inherit; text-decoration: none;
  cursor: pointer;
}
.oferta__enlace:focus-visible { outline: 3px solid var(--glaciar); outline-offset: 6px;
                                border-radius: 18px; }

/* El aro con el video */
.oferta__aro {
  display: block;
  position: relative;
  width: clamp(112px, min(13vw, 20vh), 182px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--carbon);

  /* Tres capas para que se despegue de la foto que tiene detrás:
     un aro claro, un anillo de aire oscuro y un halo frío. Sobre una
     imagen con gente el borde fino de antes se perdía. */
  border: 3px solid rgba(255,255,255,.72);
  box-shadow:
    0 0 0 7px rgba(10,13,16,.55),
    0 0 34px 6px rgba(91,143,168,.45),
    0 18px 44px rgba(0,0,0,.6);

  transition: transform .4s var(--curva), border-color .3s ease, box-shadow .4s ease;
}
.oferta__aro video { width: 100%; height: 100%; object-fit: cover; }

/* Brillo lento que recorre el borde: llama el ojo sin ser un parpadeo */
.oferta__aro::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 22px rgba(255,255,255,.28);
  pointer-events: none;
}

.oferta:hover .oferta__aro,
.oferta__enlace:focus-visible .oferta__aro {
  transform: translateY(-5px) scale(1.05);
  border-color: var(--blanco);
  box-shadow:
    0 0 0 7px rgba(10,13,16,.55),
    0 0 46px 10px rgba(91,143,168,.7),
    0 22px 52px rgba(0,0,0,.65);
}

.oferta__nombre {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  line-height: 1.25;
}

.oferta__precio {
  font-size: clamp(20px, min(2.2vw, 3.2vh), 30px) !important;
  line-height: 1.05;
}

.oferta form { width: 100%; margin-top: 2px; }

/* ---------- Hero a dos columnas en pantallas medianas y celular ---------- */
@media (max-width: 900px) {
  .hero__caja {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(10px, 2vh, 22px);
    padding-top: calc(var(--header-h) + var(--sp-4));
    padding-bottom: clamp(38px, 6vh, 56px);
  }
  .hero__texto { text-align: center; }
  .hero__texto h1 { font-size: clamp(27px, min(8vw, 6vh), 44px); }
  .hero__pero { font-size: clamp(17px, min(5vw, 3vh), 24px); margin-bottom: clamp(12px, 2vh, 20px); }

  /* La lista pasa a dos columnas: cinco líneas seguidas se comen
     el alto que necesitan la foto y los botones. */
  .hero__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 1.2vh, 11px) var(--sp-3);
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
  }
  .hero__lista li { font-size: clamp(12.5px, 3.2vw, 15px); gap: var(--sp-2); }
  .hero__tic { width: 19px; height: 19px; }
  .hero__tic svg { width: 11px; height: 11px; }

  /* ---------- La foto pasa a ser el fondo del hero ----------
     En celular no hay dos columnas: la foto ocupa toda la pantalla por
     detrás y el texto va encima. display:contents disuelve el envoltorio
     para que la foto pueda anclarse al hero completo y las ofertas
     sigan fluyendo con el resto. */
  /* La lista y las cifras dejan de ir lado a lado */
  .hero__fila { grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2vh, 20px); justify-items: center; }
  .hero__cifras { max-width: 320px; text-align: center; gap: clamp(8px, 1.4vh, 16px) var(--sp-3); }
  .hero__cifras li { align-items: center; }

  .hero__figura { display: contents; }

  .hero__foto {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    object-position: 50% 14%;      /* deja las dos caras a la vista */
    z-index: 0;
    opacity: .58;                  /* para que el texto se lea encima */
    /* Sin la máscara de bordes: como fondo tiene que llegar a las orillas */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* El velo oscuro se refuerza y se pone por encima de la foto */
  .hero::after {
    z-index: 1;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.72) 100%),
      linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 38%, rgba(0,0,0,.85) 100%);
  }

  /* La caja deja de ser el ancla: si sigue posicionada, la foto se
     estira solo hasta ella y queda corta contra el hero. Al pasarla a
     static, el ancla de la foto pasa a ser .hero y sí cubre todo.
     A cambio, el texto necesita su propio z-index para no quedar
     debajo de la imagen. */
  .hero__caja { position: static; }
  .hero__texto { position: relative; z-index: 2; }

  /* Ya no cuelgan de la foto: van después del texto, sin solaparse */
  .hero__ofertas { max-width: 360px; margin-top: clamp(10px, 2vh, 22px); }

  /* Las cifras se quedan dentro del hero, encima de la foto */
  .hero__cifras {
    position: relative; z-index: 2;
    margin-top: clamp(10px, 2vh, 20px);
    padding-top: clamp(10px, 1.8vh, 18px);
    max-width: 420px;
    margin-inline: auto;
  }
  .hero__cifras li { padding: 0 var(--sp-2); gap: 2px; }
  .hero__cifras strong { font-size: clamp(17px, 5vw, 24px); }
  .hero__cifras span { font-size: clamp(7.5px, 2.1vw, 9.5px); letter-spacing: .08em; }
}

@media (max-width: 420px) {
  /* En una sola columna la lista crece cinco líneas: hay que devolverle
     ese alto a la foto y a los márgenes, o el hero se pasa de pantalla. */
  .hero__lista { grid-template-columns: 1fr; max-width: 260px; gap: 7px; }
  .hero__cifras strong { font-size: clamp(19px, 5.4vw, 26px); }
  /* El relleno de abajo se recorta: con la lista en una sola columna
     y los aros del kit y el combo, la pila de contenido terminaba unos
     11px por debajo del borde de la pantalla y el hero dejaba de ser
     una pantalla exacta. */
  .hero__caja { padding-bottom: clamp(10px, 1.6vh, 22px); gap: clamp(5px, 0.9vh, 11px); }
  /* La foto sigue de fondo: aquí solo se ajusta el encuadre */
  .hero__foto { object-position: 50% 12%; }
  .hero__ofertas { margin-top: clamp(8px, 1.6vh, 16px); }
  .oferta__nombre { font-size: 10.5px; }
  .oferta__aro { width: clamp(88px, 25.5vw, 118px); }
}

/* --------------------------------------------------------------------
   CELULAR BAJITO
   Un Android de 740px de alto tiene casi 100px menos que un iPhone
   moderno. Con las medidas de arriba la pila de contenido se pasaba 48px
   y los botones de apartar quedaban fuera de la pantalla: el hero dejaba
   de ser una pantalla exacta justo en los telefonos mas comunes del pais.

   Se recorta por altura, no por ancho: el problema es el alto, y un
   telefono angosto pero largo no tiene por que perder tamaño de letra.
   -------------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 780px) {
  .hero h1 { margin-bottom: clamp(6px, 1.1vh, 12px); }
  .hero__pero { margin-bottom: clamp(6px, 1vh, 11px); }

  .hero__cifras {
    margin-top: clamp(5px, 0.9vh, 11px);
    padding-top: clamp(5px, 0.9vh, 11px);
  }
  .hero__cifras strong { font-size: clamp(16px, 4.6vw, 21px); }

  /* El aro se encoge, pero nunca por debajo de 72px: mas pequeño deja
     de leerse que dentro hay un video, y deja de invitar a tocarlo. */
  .oferta__aro { width: clamp(72px, 21vw, 96px); }
  .hero__ofertas { margin-top: clamp(4px, 0.8vh, 10px); }
}

/* Esta regla va DESPUES de .hero__texto h1 y tiene la misma
   especificidad, asi que es la que manda. Los dos bloques se dejan
   iguales a proposito: si alguien cambia uno solo, no pasa nada raro. */
.hero h1 {
  font-family: var(--display);
  /* Se calcula contra el alto tambien: la columna es la mitad del ancho,
     y cada linea que se parte cuesta ~60 px que le faltan a las cifras.
     Bajado desde 60px al cambiar Anton (condensada) por Playfair
     (ancha): al mismo tamaño el titular se iba a cuatro lineas. */
  font-size: clamp(26px, min(3vw, 4.8vh), 44px);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: .015em;
  margin-bottom: clamp(12px, 2.6vh, 24px);
}
/* Cada línea entra por separado: da sensación de composición, no de bloque. */
/* Se llama hero__linea y NO «linea»: esa otra clase existe y es la fila
   del carrito, que lleva border-bottom. Al compartir nombre, ese borde
   salia pintado como una raya debajo del titular del hero. */
.hero h1 .hero__linea {
  display: block;
  /* overflow:hidden recorta la linea mientras sube desde abajo. El
     padding le da un pelo de aire: sin el, las colas de la «j» y la «p»
     quedaban cortadas al terminar la animacion. */
  overflow: hidden;
  padding-bottom: .06em;
}
.hero h1 .hero__linea > span {
  display: block;
  transform: translateY(105%);
  animation: subirLinea 1s var(--curva) forwards;
}
.hero h1 .hero__linea:nth-child(2) > span { animation-delay: .13s; }
@keyframes subirLinea { to { transform: translateY(0); } }

.hero__sub {
  font-size: clamp(14.5px, min(2.1vw, 2.2vh), 19px);
  color: rgba(255,255,255,.76);
  max-width: 56ch;
  margin: 0 auto clamp(16px, 3.4vh, 32px);
  opacity: 0;
  animation: aparecer .9s var(--curva) .42s forwards;
}
@keyframes aparecer { to { opacity: 1; } }

.hero__precio {
  margin-bottom: clamp(16px, 3.4vh, 32px);
  opacity: 0;
  animation: aparecer .9s var(--curva) .58s forwards;
}
.hero__precio .precio { font-size: clamp(34px, min(7.4vw, 8.6vh), 76px); }

.hero__botones {
  display: flex; gap: var(--sp-3);
  justify-content: center; flex-wrap: wrap;
  opacity: 0;
  animation: aparecer .9s var(--curva) .74s forwards;
}

/* Señal de que hay más abajo */
.hero__cue {
  position: absolute;
  left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  opacity: 0;
  animation: aparecer 1s ease 1.3s forwards;
}
.hero__cue i {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  animation: caer 2.1s ease-in-out infinite;
}
@keyframes caer {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
/* La flecha "Desliza" es un adorno: donde el hero va justo de alto,
   estorba. Se quita antes de que se monte sobre los botones — que sí
   son lo que hace vender. */
.hero__cue { display: none; }   /* el pie del hero ahora lo ocupan las cifras */

/* ====================================================================
   MARCO DE VIDEO — se adapta al dispositivo sin desbordar
   ==================================================================== */
.media-marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: var(--grafito);
  aspect-ratio: 4 / 5;
  max-height: 62svh;
  box-shadow: var(--sombra-lg);
}
.media-marco video {
  width: 100%; height: 100%;
  object-fit: cover;              /* nunca deforma ni desborda */
}
@media (min-width: 861px) {
  .media-marco { aspect-ratio: 3 / 4; max-height: 74svh; }
}

/* Etiqueta flotante sobre el video */
.media-nota {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  background: rgba(10,13,16,.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--blanco);
  padding: 9px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.media-nota::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--glaciar);
  animation: pulso 2s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(91,143,168,.6); }
  50%      { opacity: .7; box-shadow: 0 0 0 7px rgba(91,143,168,0); }
}

/* ====================================================================
   TARJETA DE PRODUCTO
   ==================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: var(--sp-5);
}

.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .45s var(--curva), transform .45s var(--curva),
              border-color .35s ease;
}
.tarjeta:hover {
  box-shadow: var(--sombra-lg);
  transform: translateY(-7px);
  border-color: transparent;
}

.tarjeta__media {
  position: relative;
  /* 4:3 en vez de cuadrado: el video se ve igual (va recortado con
     object-fit) y la tarjeta baja unos 40px de una. */
  aspect-ratio: 4 / 3;
  background: var(--grafito);
  overflow: hidden;
}
.tarjeta__media video,
.tarjeta__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--curva);
}
.tarjeta:hover .tarjeta__media video,
.tarjeta:hover .tarjeta__media img { transform: scale(1.07); }

.tarjeta__cinta {
  position: absolute; top: 9px; left: 9px;
  background: rgba(10,13,16,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--blanco);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase;
}
.tarjeta__cinta--off { background: var(--glaciar); letter-spacing: .02em; }

/* Últimas unidades: va abajo a la derecha para no chocar con el -33% */
.tarjeta__cinta--pocas {
  top: auto; left: auto;
  bottom: 9px; right: 9px;
  background: var(--error);
  letter-spacing: .02em;
  animation: latirPocas 2.4s ease-in-out infinite;
}
@keyframes latirPocas {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Envío gratis por promoción de bienvenida: con cuenta regresiva */
.tarjeta__envio--promo {
  display: inline-block;
  background: var(--exito); color: var(--blanco);
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .02em;
}

/* El envío gratis pasa a ser una etiqueta sobre el video: informa
   igual y ya no gasta una línea del cuerpo. */
.tarjeta__envio {
  position: absolute; bottom: 9px; left: 9px;
  background: rgba(255,255,255,.94);
  color: var(--exito);
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}

.tarjeta__cuerpo {
  padding: var(--sp-4);
  display: flex; flex-direction: column; flex: 1; gap: 6px;
}

.tarjeta__nombre { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.tarjeta__nombre a { transition: color .2s ease; }
.tarjeta__nombre a:hover { color: var(--glaciar); }
/* Toda la tarjeta es el enlace al producto. Va sobre el video y el
   texto, pero por debajo del botón Apartar (que lleva z-index mayor). */
.tarjeta__nombre a::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
}

/* Precio anterior y precio en la misma línea */
.tarjeta__precio {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}
.tarjeta__precio .precio { font-size: 25px; line-height: 1.1; }
.tarjeta__precio .precio-antes { font-size: 13px; margin-right: 0; }

.tarjeta__anticipo {
  font-size: 12.5px; color: var(--humo);
  line-height: 1.3;
}
.tarjeta__anticipo strong { color: var(--negro); font-weight: 700; }

.tarjeta__acciones { position: relative; z-index: 2; margin-top: var(--sp-3); }

/* ====================================================================
   PRODUCTO INDIVIDUAL
   ==================================================================== */
.miga { font-size: 13px; color: var(--humo); padding: var(--sp-5) 0; }
.miga a { transition: color .2s ease; }
.miga a:hover { color: var(--glaciar); text-decoration: underline; }
.miga span { margin: 0 7px; }

.producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-7);
  align-items: start;
  padding-bottom: var(--sp-9);
}

.galeria__principal {
  position: relative;
  background: var(--grafito);
  border-radius: var(--radio-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 72svh;
  box-shadow: var(--sombra);
}
.galeria__principal video,
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

.galeria__miniaturas { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.galeria__mini {
  width: 78px; height: 78px;
  border: 2px solid var(--niebla);
  border-radius: var(--radio);
  overflow: hidden; cursor: pointer;
  background: var(--grafito);
  padding: 0;
  transition: border-color .25s ease, transform .25s var(--curva);
}
.galeria__mini video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.galeria__mini.activa { border-color: var(--negro); }
.galeria__mini:hover { border-color: var(--glaciar); transform: translateY(-3px); }

.producto__info h1 {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 46px);
  text-transform: uppercase;
  line-height: .98;
  margin: var(--sp-3) 0;
}
.producto__gancho {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2.6vw, 23px);
  color: var(--carbon);
  line-height: 1.45;
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--glaciar);
}
.producto__desc p { margin-bottom: var(--sp-4); color: var(--carbon); line-height: 1.78; }

.ficha { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: 15px; }
.ficha th, .ficha td { text-align: left; padding: 13px var(--sp-3); border-bottom: 1px solid var(--niebla); }
.ficha th { width: 42%; color: var(--humo); font-weight: 500; }
.ficha td { font-weight: 600; }
.ficha tr { transition: background .2s ease; }
.ficha tr:hover { background: var(--perla); }

/* Caja de compra */
.caja-compra {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  border: 1px solid var(--niebla);
  border-radius: var(--radio-xl);
  padding: var(--sp-6);
  background: var(--blanco);
  box-shadow: var(--sombra);
}
.caja-compra .precio { display: block; }

.caja-compra__anticipo {
  background: var(--grafito);
  color: var(--blanco);
  border-radius: var(--radio-lg);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.caja-compra__anticipo .fila {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; padding: 4px 0;
  color: rgba(255,255,255,.72);
}
.caja-compra__anticipo .fila strong {
  font-size: 20px; font-family: var(--display);
  letter-spacing: .02em; color: var(--blanco);
}
.caja-compra__anticipo .nota {
  font-size: 12px; color: rgba(255,255,255,.5);
  margin-top: var(--sp-3); line-height: 1.55;
}

.cantidad { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cantidad label { font-size: 14px; color: var(--humo); }
.cantidad__control {
  display: flex; align-items: center;
  border: 1px solid var(--niebla); border-radius: 999px;
  overflow: hidden;
}
.cantidad__control button {
  width: 44px; height: 46px;
  font-size: 19px; font-weight: 700;
  transition: background .2s ease;
}
.cantidad__control button:hover { background: var(--perla); }
.cantidad__control input {
  width: 50px; height: 46px; text-align: center; border: none;
  font-weight: 700; -moz-appearance: textfield;
  background: transparent;
}
.cantidad__control input::-webkit-outer-spin-button,
.cantidad__control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.confianza { list-style: none; margin-top: var(--sp-5); font-size: 13.5px; }
.confianza li {
  display: flex; gap: var(--sp-3); padding: 11px 0;
  color: var(--carbon); border-top: 1px solid var(--niebla);
  align-items: flex-start;
}
.confianza li:first-child { border-top: none; }
.confianza b { color: var(--negro); }
.seccion--oscura .confianza li { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.1); }
.seccion--oscura .confianza b { color: var(--blanco); }

/* ====================================================================
   FILTROS
   ==================================================================== */
.catalogo {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--sp-7); padding-bottom: var(--sp-9);
}

.filtros { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.filtros__grupo {
  border-bottom: 1px solid var(--niebla);
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
}
.filtros__titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--glaciar); margin-bottom: var(--sp-3); font-weight: 700;
}
.filtros a {
  display: flex; align-items: center; min-height: 44px;
  padding: 6px 0; font-size: 15px; color: var(--carbon);
  transition: color .2s ease, padding-left .25s var(--curva);
}
.filtros a:hover { color: var(--glaciar); padding-left: 6px; }
.filtros a.activo { font-weight: 700; color: var(--negro); }
.filtros a .cuenta { color: var(--humo); font-size: 13px; font-weight: 400; margin-left: 5px; }

.barra-orden {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--niebla);
}
.barra-orden__conteo { font-size: 14px; color: var(--humo); }
.barra-orden select {
  height: 46px; padding: 0 var(--sp-4);
  border: 1px solid var(--niebla); border-radius: 999px;
  background: var(--blanco); cursor: pointer;
}

/* ====================================================================
   FORMULARIOS
   ==================================================================== */
.caja-form {
  max-width: 460px; margin: var(--sp-8) auto;
  border: 1px solid var(--niebla); border-radius: var(--radio-xl);
  padding: var(--sp-7); box-shadow: var(--sombra);
  background: var(--blanco);
}
.caja-form h1 {
  font-family: var(--display); font-size: 36px;
  text-transform: uppercase; margin-bottom: var(--sp-2);
}
.caja-form .bajada { margin-bottom: var(--sp-6); font-size: 15px; }

/* Formulario largo: agrupar por tema hace que se vea corto.
   Tres bloques de cuatro campos se leen mejor que doce seguidos. */
.caja-form--ancha { max-width: 660px; }

.grupo {
  border: none;
  border-top: 1px solid var(--niebla);
  padding: var(--sp-5) 0 var(--sp-2);
  margin-bottom: var(--sp-2);
}
.grupo:first-of-type { border-top: none; padding-top: 0; }
.grupo legend {
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--glaciar);
  padding: 0 0 var(--sp-3);
}

.casilla {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: var(--perla);
  border-radius: var(--radio);
  font-size: 14px; line-height: 1.55;
  cursor: pointer;
  margin: var(--sp-4) 0;
}
.casilla input {
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--glaciar);
  flex-shrink: 0;
  cursor: pointer;
}

.nota-legal {
  font-size: 12.5px; color: var(--humo);
  margin-top: var(--sp-4); line-height: 1.6; text-align: center;
}
.nota-legal a { text-decoration: underline; color: var(--carbon); }

.pie-form {
  margin-top: var(--sp-6); text-align: center;
  font-size: 15px; color: var(--humo);
  border-top: 1px solid var(--niebla); padding-top: var(--sp-5);
}
.pie-form a { color: var(--glaciar); font-weight: 700; text-decoration: underline; }

.campo { margin-bottom: var(--sp-4); }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 52px;
  padding: 14px var(--sp-4);
  border: 1px solid var(--niebla); border-radius: var(--radio);
  background: var(--perla);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--glaciar);
  box-shadow: 0 0 0 4px rgba(91,143,168,.14);
  background: var(--blanco);
  outline: none;
}
.campo .ayuda { font-size: 13px; color: var(--humo); margin-top: 6px; }
.campo .error { font-size: 13px; color: var(--error); margin-top: 6px; font-weight: 600; }
.campo input[aria-invalid="true"] { border-color: var(--error); background: #FDF3F2; }

.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* ---------- Campo de contraseña con ojito ----------
   El envoltorio rodea SOLO al input (no al label ni a la ayuda), para
   que el botón quede centrado sobre la casilla y no sobre el bloque. */
.campo-clave { position: relative; display: block; }
/* Espacio a la derecha para que el texto no pase por debajo del botón */
.campo-clave input { padding-right: 54px; }

.ojito {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--humo);
  transition: color .2s ease, background .2s ease;
}
.ojito:hover { color: var(--negro); background: rgba(0,0,0,.05); }
.ojito svg { width: 21px; height: 21px; pointer-events: none; }
/* Solo se ve uno de los dos iconos a la vez */
.ojito .tachado { display: none; }
.ojito[aria-pressed="true"] .abierto { display: none; }
.ojito[aria-pressed="true"] .tachado { display: block; }
.ojito[aria-pressed="true"] { color: var(--glaciar); }

/* ====================================================================
   CARRITO
   ==================================================================== */
.carrito {
  display: grid; grid-template-columns: minmax(0,1fr) 360px;
  gap: var(--sp-7); padding-bottom: var(--sp-9); align-items: start;
}

.linea {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) auto;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--niebla);
  align-items: center;
  transition: opacity .35s ease, transform .35s var(--curva);
}
.linea--saliendo { opacity: 0; transform: translateX(-24px); }
.linea__media {
  width: 104px; height: 104px;
  border-radius: var(--radio-lg); overflow: hidden; background: var(--grafito);
}
.linea__media video { width: 100%; height: 100%; object-fit: cover; }
.linea__nombre { font-weight: 600; margin-bottom: 4px; font-size: 16px; }
.linea__nombre a:hover { color: var(--glaciar); }
.linea__meta { font-size: 13px; color: var(--humo); }
.linea__derecha {
  text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--sp-2);
}
.linea__total { font-weight: 700; font-size: 19px; white-space: nowrap; }
.linea__quitar {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--humo); text-decoration: underline;
  transition: color .2s ease;
}
.linea__quitar:hover { color: var(--error); }

.resumen {
  position: sticky; top: calc(var(--header-h) + var(--sp-5));
  border: 1px solid var(--niebla); border-radius: var(--radio-xl);
  padding: var(--sp-6); background: var(--blanco); box-shadow: var(--sombra);
}
.resumen h2 {
  font-family: var(--display); font-size: 24px;
  text-transform: uppercase; margin-bottom: var(--sp-4);
}
.resumen__fila { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; gap: var(--sp-3); }
.resumen__fila--total {
  border-top: 2px solid var(--negro); margin-top: var(--sp-3); padding-top: var(--sp-4);
  font-size: 19px; font-weight: 700;
}
.resumen__pagar {
  background: var(--grafito); color: var(--blanco);
  border-radius: var(--radio-lg); padding: var(--sp-5); margin: var(--sp-5) 0;
}
.resumen__pagar .fila {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; font-size: 14px; color: rgba(255,255,255,.72);
}
.resumen__pagar .destacado {
  font-family: var(--display); font-size: 26px;
  letter-spacing: .02em; color: var(--blanco);
}
.resumen__pagar .fila strong { color: var(--blanco); }
.resumen__pagar .nota {
  font-size: 12px; color: rgba(255,255,255,.5);
  margin-top: var(--sp-3); line-height: 1.6;
}

/* Empujón al envío gratis */
.empujon {
  background: var(--perla); border-left: 4px solid var(--glaciar);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radio);
  font-size: 14px; margin-bottom: var(--sp-5); line-height: 1.6;
}
.empujon strong { color: var(--negro); }
.empujon--listo { border-left-color: var(--exito); background: #E7F5EE; color: #0E5133; }

.barra-progreso {
  height: 7px; background: var(--niebla); border-radius: 999px;
  overflow: hidden; margin-top: var(--sp-3);
}
.barra-progreso__relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--glaciar), var(--hielo));
  border-radius: 999px;
  transition: width .7s var(--curva);
}

.vacio { text-align: center; padding: var(--sp-9) var(--sp-4); }
.vacio h2 {
  font-family: var(--display); font-size: 34px;
  text-transform: uppercase; margin-bottom: var(--sp-3);
}
.vacio p { color: var(--humo); margin-bottom: var(--sp-6); }

/* ====================================================================
   PASOS
   ==================================================================== */
/* Sin tarjetas: los pasos flotan sobre el fondo, unidos por una línea
   de puntos que se dibuja al aparecer. */
.pasos {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-2);
}

/* La línea que cruza los cuatro. Va detrás de los aros.
   No se puede usar 12.5% (el centro "teórico" de la primera columna):
   con gap entre columnas el porcentaje se corre unos píxeles y la línea
   no nace en el aro. Con 4 columnas iguales y 3 huecos:
       ancho de columna = (100% - 3·gap) / 4
       centro de la 1ª  = ancho / 2 = (100% - 3·gap) / 8
   Eso es exactamente donde está el aro. */
.pasos::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-2) + 39px);          /* padding-top + medio aro */
  left:  calc((100% - 3 * var(--sp-5)) / 8);
  right: calc((100% - 3 * var(--sp-5)) / 8);
  height: 2px;
  background: repeating-linear-gradient(
    90deg, var(--hielo) 0 7px, transparent 7px 15px
  );
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--curva) .35s;
}
.pasos.visible::before,
.seccion--pantalla .visible ~ .pasos::before { transform: scaleX(1); }

.paso {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--sp-2);
}

/* El aro: círculo con degradado y el icono en blanco */
.paso__aro {
  position: relative;
  /* flex, no inline-flex: como elemento en línea se apoya en la línea
     base del texto y eso le mete unos 25px de aire por encima, que
     desalineaban el aro de la línea que une los pasos. */
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  color: var(--blanco);
  background: linear-gradient(150deg, var(--glaciar) 0%, var(--glaciar-osc) 100%);
  box-shadow: 0 14px 34px rgba(91,143,168,.28);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.paso__aro svg { width: 33px; height: 33px; }

/* Halo que late, para que el bloque no se sienta estático */
.paso__aro::after {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 2px solid var(--glaciar);
  opacity: 0;
  animation: aroLatir 3.4s ease-out infinite;
  animation-delay: var(--retraso, 0ms);
}
@keyframes aroLatir {
  0%   { transform: scale(.86); opacity: .55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.paso:hover .paso__aro {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 20px 44px rgba(91,143,168,.4);
}

/* El número queda de marca de agua sobre el aro */
.paso__num {
  display: block;
  font-family: var(--display);
  font-size: 13px; letter-spacing: .22em;
  color: var(--glaciar);
  margin-bottom: 6px;
}

.paso h3 {
  font-family: var(--display);
  font-size: clamp(18px, 2.1vw, 23px);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: var(--sp-3);
}
.paso p {
  color: var(--humo); font-size: 14.5px; line-height: 1.6;
  max-width: 30ch; margin: 0 auto;
}

/* ---------- Los pasos en celular ----------
   Apilados, y cada uno en fila: el aro a la izquierda y el texto a la
   derecha. Tres bloques centrados uno debajo de otro ocuparían casi el
   doble de alto y no cabrían en una pantalla. */
@media (max-width: 860px) {
  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-top: 0;
  }

  /* La línea horizontal se vuelve vertical: ahora sí une los tres. */
  .pasos::before {
    top: 26px; bottom: 26px; left: 27px;
    right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(
      180deg, var(--hielo) 0 7px, transparent 7px 15px
    );
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s var(--curva) .3s;
  }
  .pasos.visible::before { transform: scaleY(1); }

  .paso {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
    text-align: left;
    padding: 0;
  }

  .paso__aro {
    grid-row: 1 / span 3;
    width: 56px; height: 56px;
    margin-bottom: 0;
    box-shadow: 0 8px 20px rgba(91,143,168,.26);
  }
  .paso__aro svg { width: 25px; height: 25px; }
  .paso__aro::after { inset: -6px; }

  .paso__num { font-size: 11px; margin-bottom: 2px; letter-spacing: .18em; }
  .paso h3 { font-size: 19px; margin-bottom: 5px; }
  .paso p { font-size: 14px; line-height: 1.55; max-width: none; margin: 0; }
}

@media (max-width: 400px) {
  .paso { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-3); }
  .paso__aro { width: 48px; height: 48px; }
  .paso__aro svg { width: 21px; height: 21px; }
  .pasos::before { left: 23px; }
  .paso h3 { font-size: 17.5px; }
  .paso p { font-size: 13.5px; }
}

/* ====================================================================
   CAPTURAS DE WHATSAPP
   ==================================================================== */
.pruebas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.prueba-chat {
  position: relative;
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--grafito);
  box-shadow: var(--sombra);
  aspect-ratio: 9 / 16;
  transition: transform .4s var(--curva), box-shadow .4s var(--curva);
}
.prueba-chat:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--sombra-lg); }

.prueba-chat img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Se baja la imagen para que la franja del nombre quede fuera de
     cuadro: ahí aparece el usuario del cliente y no es nuestro. */
  object-position: 50% 12%;
}

/* Banda que tapa la cabecera del chat.
   Ahí sale el usuario del cliente (@fulanito) y publicarlo sin permiso
   sería exponer un dato personal. El recorte por sí solo no basta: esa
   franja mide ~75 px de 1600, así que esta banda la cubre con margen. */
.prueba-chat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 13%;
  background: linear-gradient(180deg,
    var(--grafito) 0%, var(--grafito) 62%, transparent 100%);
  z-index: 2;
}

.llego__cta {
  margin-top: clamp(20px, 3.4vh, 40px);
  text-align: center;
}
.llego__cta p {
  color: var(--humo); font-size: 15px;
  margin-bottom: var(--sp-4);
}

@media (max-width: 900px) {
  /* Cinco capturas no caben: se deslizan con el dedo */
  .pruebas {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
  }
  .pruebas::-webkit-scrollbar { display: none; }
  .prueba-chat { flex: 0 0 auto; width: min(52vw, 210px); scroll-snap-align: start; }
}

/* ====================================================================
   CARRUSEL DE PRODUCTOS
   Tres a la vista. El del centro manda: se agranda y se ilumina; los
   de los lados se encogen y se apagan un poco para no competir.
   ==================================================================== */
.giro {
  position: relative;
  /* Las tarjetas laterales se asoman a propósito, pero no deben salirse
     de la pantalla: eso creaba scroll horizontal en celular.
     "clip" recorta sin volverlo un contenedor desplazable, así la sombra
     de la tarjeta central sigue viéndose por arriba y por abajo. */
  overflow-x: clip;
  overflow-clip-margin: 30px;
}

/* SIN JavaScript queda como rejilla normal: nadie se queda sin ver los
   productos porque un script no cargó. */
.giro__pista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
}
.giro__flecha, .giro__puntos { display: none; }

/* Con JavaScript, el carrusel de verdad */
.js .giro[data-listo] .giro__pista {
  display: block;
  position: relative;
  height: var(--alto-giro, 400px);
  perspective: 1400px;
}
.js .giro[data-listo] .giro__flecha,
.js .giro[data-listo] .giro__puntos { display: flex; }

.js .giro[data-listo] .giro__item {
  position: absolute;
  top: 0; left: 50%;
  width: var(--ancho-giro, 300px);
  /* La transición es lo que hace el efecto: el centro crece mientras
     se desplaza, no salta de una posición a otra. */
  transition:
    transform .85s var(--curva),
    opacity .6s ease,
    filter .6s ease;
  will-change: transform, opacity;
}

/* Estados: los pone el JavaScript */
.js .giro__item[data-pos="centro"] { z-index: 3; opacity: 1; filter: none; }
/* Los lados se apagan bastante: el ojo tiene que irse al del centro
   sin dudarlo. Siguen legibles, pero claramente en segundo plano. */
.js .giro__item[data-pos="izq"],
.js .giro__item[data-pos="der"] { z-index: 2; opacity: .45; filter: saturate(.4); }
.js .giro__item[data-pos="izq"]:hover,
.js .giro__item[data-pos="der"]:hover { opacity: .75; filter: saturate(.8); cursor: pointer; }
.js .giro__item[data-pos="fuera"] { z-index: 1; opacity: 0; pointer-events: none; }

/* La tarjeta del centro se levanta */
.js .giro__item[data-pos="centro"] .tarjeta {
  box-shadow: var(--sombra-lg);
  border-color: transparent;
}
.js .giro__item:not([data-pos="centro"]) .tarjeta { box-shadow: none; }

/* Flechas */
.giro__flecha {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--niebla);
  color: var(--negro);
  box-shadow: var(--sombra);
  transition: background .2s ease, color .2s ease, transform .2s var(--curva);
}
.giro__flecha svg { width: 20px; height: 20px; }
.giro__flecha:hover { background: var(--negro); color: var(--blanco); transform: translateY(-50%) scale(1.08); }
.giro__flecha--izq { left: 0; }
.giro__flecha--der { right: 0; }

/* Puntos */
.giro__puntos {
  justify-content: center; gap: 7px;
  margin-top: var(--sp-5);
}
.giro__punto {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--niebla);
  transition: width .35s var(--curva), background .3s ease;
}
.giro__punto[aria-selected="true"] { width: 26px; background: var(--negro); }

/* Barra que muestra cuánto falta para el siguiente giro */
.giro__tiempo {
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  width: 120px; height: 2px;
  background: var(--niebla);
  border-radius: 999px; overflow: hidden;
}
.giro__tiempo i {
  display: block; height: 100%; width: 0;
  background: var(--glaciar);
}
.giro__tiempo.corriendo i { animation: giroTiempo 4s linear forwards; }
@keyframes giroTiempo { to { width: 100%; } }

@media (max-width: 860px) {
  .giro__flecha { width: 40px; height: 40px; }
  .giro__flecha--izq { left: -6px; }
  .giro__flecha--der { right: -6px; }
}

/* ====================================================================
   COBERTURA · mapa de Colombia
   ==================================================================== */
.cobertura__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--sp-8);
  align-items: center;
}

.cobertura__mapa { position: relative; display: flex; justify-content: center; }

.mapa-col { position: relative; width: 100%; max-width: 380px; }
.mapa-col__svg { width: 100%; height: auto; overflow: visible; }

/* La silueta se dibuja sola al entrar en pantalla */
.mapa-col__silueta {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}
.visible .mapa-col__silueta { animation: trazarPais 2.6s var(--curva) forwards; }
@keyframes trazarPais { to { stroke-dashoffset: 0; } }

/* Las rutas salen de Bogotá, una tras otra */
.mapa-col__ruta {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  opacity: .5;
}
.visible .mapa-col__ruta {
  animation: trazarRuta 1.5s var(--curva) forwards;
  animation-delay: calc(1.1s + var(--orden) * .22s);
}
@keyframes trazarRuta { to { stroke-dashoffset: 0; } }

/* Las ciudades aparecen después de su ruta */
.mapa-col__punto {
  fill: var(--glaciar);
  transform-box: fill-box; transform-origin: center;
  transform: scale(0);
}
.mapa-col__ciudad.es-grande .mapa-col__punto { fill: var(--negro); }
.visible .mapa-col__punto {
  animation: brotarPunto .55s var(--curva) forwards;
  animation-delay: calc(1.5s + var(--orden) * .055s);
}
@keyframes brotarPunto { to { transform: scale(1); } }

/* Halo que late en las capitales grandes */
.mapa-col__pulso {
  fill: none; stroke: var(--glaciar); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
}
.visible .mapa-col__pulso {
  animation: pulsoCiudad 2.6s ease-out infinite;
  animation-delay: calc(2.2s + var(--orden) * .3s);
}
@keyframes pulsoCiudad {
  0%   { transform: scale(.5); opacity: .8; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Nombres de las capitales, en HTML sobre el SVG */
.mapa-col__nombres { list-style: none; position: absolute; inset: 0; pointer-events: none; }
.mapa-col__nombres li {
  position: absolute;
  transform: translate(10px, -50%);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--carbon);
  white-space: nowrap;
  background: rgba(255,255,255,.82);
  padding: 1px 6px; border-radius: 999px;
  opacity: 0;
}
.visible .mapa-col__nombres li {
  animation: aparecer .7s ease forwards;
  animation-delay: 2.4s;
}

/* Cifras */
.cifras { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.cifra { display: flex; flex-direction: column; }
.cifra strong {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1;
  color: var(--negro);
}
.cifra span {
  font-size: 12px; color: var(--humo);
  text-transform: uppercase; letter-spacing: .08em;
  /* Subido de 15ch a 18ch al cambiar de tipografia. La unidad «ch» mide
     el ancho del cero de la fuente en uso, y el de Inter es mas estrecho
     que el de Space Grotesk: los mismos 15ch pasaron a ser menos pixeles
     y «DEPARTAMENTOS» dejo de caber, desbordando la seccion entera. */
  margin-top: 5px; max-width: 18ch; line-height: 1.4;
}

@media (max-width: 860px) {
  .cobertura__caja { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  /* El mapa va primero: es lo que llama la atención */
  .cobertura__mapa { order: -1; }
  .mapa-col { max-width: 178px; }
  .mapa-col__nombres li { font-size: 7.5px; padding: 0 4px; }
  .cifras { gap: var(--sp-4); }
  .cifra strong { font-size: 26px; }
  .cifra span { font-size: 9.5px; letter-spacing: .05em; margin-top: 3px; }

  /* La lista de confianza sobra en móvil: lo mismo se dice en las
     cifras y en el resto de la página. Quitarla es lo que hace que
     la sección quepa en una pantalla. */
  .cobertura .confianza { display: none; }
  .cobertura .bajada { margin-bottom: var(--sp-3) !important; }
  .cobertura .titulo-seccion br { display: none; }
}

/* ====================================================================
   BLOQUE PARTIDO (video + texto), con desfase
   ==================================================================== */
.partido {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--sp-8);
  align-items: center;
}
.partido--invertido > *:first-child { order: 2; }

/* ====================================================================
   TESTIMONIOS
   ==================================================================== */
.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
.testimonio {
  position: relative;
  background: var(--blanco); border: 1px solid var(--niebla);
  border-radius: var(--radio-xl); padding: var(--sp-6);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva);
}
.testimonio:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.testimonio::before {
  content: '"';
  position: absolute; top: 8px; right: 22px;
  font-family: var(--serif); font-size: 76px; line-height: 1;
  color: var(--niebla);
}
.testimonio p {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  line-height: 1.5; margin-bottom: var(--sp-4); position: relative;
}
.testimonio cite { font-size: 12.5px; color: var(--humo); font-style: normal; letter-spacing: .04em; }

/* ====================================================================
   ENTREGA · elegir domicilio u oficina
   ==================================================================== */
.opciones-entrega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 560px) { .opciones-entrega { grid-template-columns: 1fr; } }

.opcion-entrega { cursor: pointer; display: block; }
/* El radio se oculta pero sigue existiendo: el teclado y los lectores
   de pantalla lo necesitan. Nada de display:none. */
.opcion-entrega input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}

.opcion-entrega__cuerpo {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 2px solid var(--niebla);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  transition: border-color .25s ease, background .25s ease, transform .25s var(--curva);
  height: 100%;
}
.opcion-entrega:hover .opcion-entrega__cuerpo { border-color: var(--hielo); }
.opcion-entrega input:checked + .opcion-entrega__cuerpo {
  border-color: var(--negro);
  background: var(--perla);
}
.opcion-entrega input:focus-visible + .opcion-entrega__cuerpo {
  outline: 3px solid var(--glaciar); outline-offset: 2px;
}

.opcion-entrega__icono {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--perla); color: var(--glaciar);
  transition: background .25s ease, color .25s ease;
}
.opcion-entrega input:checked + .opcion-entrega__cuerpo .opcion-entrega__icono {
  background: var(--negro); color: var(--blanco);
}
.opcion-entrega__cuerpo strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
.opcion-entrega__cuerpo em {
  font-style: normal; font-size: 12.5px; color: var(--humo); line-height: 1.45;
  display: block;
}

/* ---------- Panel desplegable ---------- */
.panel-entrega {
  display: none;
  border: 1px solid var(--niebla);
  border-radius: var(--radio-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--blanco);
}
.panel-entrega.abierto {
  display: block;
  animation: desplegar .4s var(--curva);
}
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.panel-entrega__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.panel-entrega__cabeza strong { font-size: 15px; }

.panel-entrega__estado {
  font-size: 13.5px; color: var(--carbon);
  margin-top: var(--sp-3); line-height: 1.55;
  padding: 10px 13px; border-radius: var(--radio);
  background: var(--perla);
  border-left: 3px solid var(--niebla);
}
.panel-entrega__estado.es-ok    { background: #E7F5EE; border-left-color: var(--exito); color: #0E5133; }
.panel-entrega__estado.es-aviso { background: #FFF7E6; border-left-color: #B8860B; color: #6B4E00; }
.panel-entrega__estado.es-error { background: #FDECEA; border-left-color: var(--error); color: #8A1C13; }

.panel-entrega__ayuda {
  font-size: 12.5px; color: var(--humo);
  margin-top: var(--sp-2); line-height: 1.5;
}

/* Medios de pago que acepta Wompi */
.medios-pago {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-top: var(--sp-3);
}
.medios-pago span {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--humo);
  border: 1px solid var(--niebla);
  padding: 5px 11px; border-radius: 999px;
}

/* ---------- Buscador dentro del panel ---------- */
.buscador-mapa {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.buscador-mapa input {
  flex: 1; min-width: 0;
  min-height: 46px;
  padding: 10px var(--sp-4);
  border: 1px solid var(--niebla); border-radius: 999px;
  background: var(--perla);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.buscador-mapa input:focus {
  border-color: var(--glaciar);
  box-shadow: 0 0 0 4px rgba(91,143,168,.14);
  background: var(--blanco);
  outline: none;
}
.buscador-mapa .btn { flex-shrink: 0; }

.resultados-mapa { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.resultados-mapa:empty { display: none; }

.resultado-mapa {
  text-align: left;
  padding: 11px var(--sp-4);
  min-height: 44px;
  border: 1px solid var(--niebla);
  border-radius: var(--radio);
  font-size: 13.5px; line-height: 1.4;
  color: var(--carbon);
  background: var(--blanco);
  transition: border-color .2s ease, background .2s ease;
}
.resultado-mapa:hover { border-color: var(--negro); background: var(--perla); }

.resultados-mapa__vacio {
  font-size: 13px; color: var(--humo);
  padding: 10px var(--sp-3); line-height: 1.5;
}

/* ---------- Mapa ---------- */
.mapa-caja { position: relative; }

.mapa {
  width: 100%;
  height: 300px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--perla);
  /* Leaflet pinta encima; este z-index lo mantiene por debajo del
     header flotante, que va en 100. */
  position: relative; z-index: 1;
  cursor: crosshair;
}
#mapa-oficinas { margin-top: var(--sp-3); cursor: grab; }
@media (max-width: 560px) { .mapa { height: 250px; } }

/* Pista sobre el mapa: se ve sin tapar el contenido */
.mapa-pista {
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(10,13,16,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--blanco);
  font-size: 11.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Dirección que devuelve el mapa ---------- */
.direccion-mapa {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--glaciar);
  border-radius: var(--radio);
  background: rgba(91,143,168,.07);
}
.direccion-mapa[hidden] { display: none; }
.direccion-mapa__titulo {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--glaciar);
}
.direccion-mapa__texto { font-size: 14.5px; color: var(--carbon); line-height: 1.45; }

/* Los controles de Leaflet no deben taparse con el header */
.leaflet-container { font-family: var(--texto); }
.leaflet-top, .leaflet-bottom { z-index: 2; }

/* Leaflet trae botones de zoom de 30px. En un celular eso es poco:
   se suben a 44, que es el mínimo para acertar con el dedo. */
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  width: 44px; height: 44px;
  line-height: 44px;
  font-size: 20px;
}
.leaflet-bar a:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.leaflet-bar a:last-child  { border-radius: 0 0 var(--radio) var(--radio); }
.leaflet-control-attribution { font-size: 10px; }

/* ---------- Lista de oficinas ---------- */
.oficinas {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-height: 300px; overflow-y: auto;
}
.oficinas:empty { display: none; }

.oficina { cursor: pointer; display: block; }
.oficina input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.oficina__cuerpo {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--niebla);
  border-radius: var(--radio);
  transition: border-color .2s ease, background .2s ease;
}
.oficina:hover .oficina__cuerpo { border-color: var(--hielo); }
.oficina.elegida .oficina__cuerpo { border-color: var(--negro); background: var(--perla); }
.oficina input:focus-visible + .oficina__cuerpo {
  outline: 3px solid var(--glaciar); outline-offset: 2px;
}
.oficina__cuerpo strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.oficina__cuerpo span {
  display: block; font-size: 13px; color: var(--humo); line-height: 1.45;
}
.oficina__cuerpo em {
  display: block; font-style: normal; font-size: 12px;
  color: var(--glaciar); margin-top: 3px;
}

/* ====================================================================
   CONTACTO · canales y preguntas
   ==================================================================== */
.canales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
}

.canal {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-xl);
  background: var(--blanco);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva),
              border-color .3s ease;
}
.canal:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: transparent; }
/* El bloque de horario no es un enlace: no debe moverse al pasar el mouse. */
.canal--info { cursor: default; }
.canal--info:hover { transform: none; box-shadow: none; border-color: var(--niebla); }

.canal__icono {
  flex-shrink: 0;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--perla);
  color: var(--glaciar);
}
.canal--wa .canal__icono { background: rgba(37,211,102,.14); color: #128C4B; }

.canal__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.canal__texto strong { font-size: 16px; }
.canal__texto span { font-size: 14.5px; color: var(--carbon); word-break: break-word; }
.canal__texto em {
  font-style: normal; font-size: 12.5px; color: var(--humo);
  letter-spacing: .02em;
}

/* ---------- Acordeón de preguntas ---------- */
.preguntas { display: flex; flex-direction: column; gap: var(--sp-3); }

.pregunta {
  background: var(--blanco);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.pregunta[open] { box-shadow: var(--sombra); border-color: transparent; }

.pregunta summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  min-height: 44px;
  cursor: pointer;
  font-weight: 600; font-size: 16.5px;
  list-style: none;
  transition: color .2s ease;
}
/* Quitar el triangulito nativo para poner el nuestro */
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::marker { content: ''; }
.pregunta summary:hover { color: var(--glaciar); }

/* Signo + que gira hasta volverse × */
.pregunta__signo {
  position: relative;
  flex-shrink: 0;
  width: 22px; height: 22px;
  transition: transform .35s var(--curva);
}
.pregunta__signo::before,
.pregunta__signo::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: var(--glaciar);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.pregunta__signo::before { width: 15px; height: 2px; }
.pregunta__signo::after  { width: 2px; height: 15px; transition: opacity .3s ease; }
.pregunta[open] .pregunta__signo { transform: rotate(180deg); }
.pregunta[open] .pregunta__signo::after { opacity: 0; }

.pregunta__cuerpo { padding: 0 var(--sp-5) var(--sp-5); }
.pregunta__cuerpo p {
  color: var(--carbon); line-height: 1.8; font-size: 15.5px;
  max-width: 68ch;
}
.pregunta__cuerpo strong { color: var(--negro); }

@media (max-width: 560px) {
  .canal { padding: var(--sp-4); gap: var(--sp-3); }
  .canal__icono { width: 46px; height: 46px; }
  .pregunta summary { padding: var(--sp-4); font-size: 15.5px; }
  .pregunta__cuerpo { padding: 0 var(--sp-4) var(--sp-4); }
  .pregunta__cuerpo p { font-size: 14.5px; line-height: 1.7; }
}

/* ====================================================================
   PIE
   ==================================================================== */
.pie { background: var(--negro); color: rgba(255,255,255,.66); padding: var(--sp-9) 0 var(--sp-6); font-size: 14px; position: relative; z-index: 2; }
.pie__rejilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); }
.pie h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--glaciar); margin-bottom: var(--sp-4);
}
.pie a {
  color: rgba(255,255,255,.66); display: block;
  padding: 11px 0; min-height: 44px;
  transition: color .2s ease, padding-left .25s var(--curva);
}
.pie a:hover { color: var(--blanco); padding-left: 5px; }
.pie__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--sp-5);
  font-size: 12.5px; color: rgba(255,255,255,.42); line-height: 1.8;
}

/* ====================================================================
   CTA · botón grande y nota de apoyo
   ==================================================================== */
.btn--grande {
  min-height: 58px;
  font-size: 16.5px;
  letter-spacing: .01em;
}

.cta-nota {
  font-size: 12.5px; color: var(--humo);
  text-align: center; line-height: 1.5;
  margin-top: var(--sp-3);
}

/* ---------- Barra fija de compra (solo celular) ---------- */
.barra-compra {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 94;
  align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--niebla);
  box-shadow: 0 -8px 28px rgba(14,17,20,.1);
}
.barra-compra__datos { display: flex; flex-direction: column; min-width: 0; }
.barra-compra__nombre {
  font-size: 12px; color: var(--humo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-compra__precio { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.barra-compra .btn { flex-shrink: 0; }

@media (max-width: 860px) {
  .barra-compra { display: flex; }

  /* El botón de WhatsApp sube para no quedar encima de la barra.
     Va con "body" delante a propósito: la regla base de .wa-flotante
     está más abajo en este archivo y, con la misma especificidad,
     ganaría ella y el botón se quedaría pegado al borde. */
  body .wa-flotante { bottom: 88px; }

  /* Y el pie deja aire, o la barra tapa los enlaces legales */
  .pie { padding-bottom: 90px; }
}

/* Botón flotante de WhatsApp */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp); color: #04301A;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 34px rgba(37,211,102,.36);
  transition: transform .3s var(--curva), box-shadow .3s ease;
}
.wa-flotante:hover { transform: scale(1.1) rotate(-6deg); box-shadow: 0 14px 42px rgba(37,211,102,.5); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1024px) {
  .producto { grid-template-columns: minmax(0,1fr) 320px; gap: var(--sp-6); }
  .catalogo { grid-template-columns: 208px minmax(0,1fr); gap: var(--sp-5); }
  .carrito  { grid-template-columns: minmax(0,1fr) 320px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .partido { gap: var(--sp-6); }
}

@media (max-width: 860px) {
  .hamburguesa { display: inline-flex; }

  .header__nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: rgba(10,13,16,.94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radio-xl);
    flex-direction: column; gap: 0;
    margin: 0; padding: var(--sp-3) var(--sp-5) var(--sp-4);
    opacity: 0; visibility: hidden;
    transform: translateY(-12px) scale(.97);
    transition: opacity .3s ease, transform .35s var(--curva), visibility .3s;
    box-shadow: var(--sombra-lg);
  }
  /* La cápsula es angosta en móvil; el desplegable necesita ancho propio
     para que los enlaces no queden apretados contra los bordes. */
  .header__nav { min-width: 240px; }
  .header__nav.abierto { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .header__nav a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 17px; }
  .header__nav a:last-child { border-bottom: none; }
  .header__nav a::after { display: none; }

  .producto, .carrito { grid-template-columns: minmax(0,1fr); }
  .caja-compra, .resumen { position: static; }

  /* El catálogo pasa a filtros arriba, en horizontal */
  .catalogo { grid-template-columns: minmax(0,1fr); }
  .filtros { position: static; border-bottom: 1px solid var(--niebla); padding-bottom: var(--sp-4); }
  .filtros__grupo { border-bottom: none; padding-bottom: 0; margin-bottom: var(--sp-4); }
  .filtros__lista { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
  .filtros__lista::-webkit-scrollbar { display: none; }
  .filtros__lista a {
    white-space: nowrap; padding: 10px 18px; min-height: 44px;
    border: 1px solid var(--niebla); border-radius: 999px; font-size: 14px;
  }
  .filtros__lista a:hover { padding-left: 18px; }
  .filtros__lista a.activo { background: var(--negro); color: var(--blanco); border-color: var(--negro); }

  /* Los bloques partidos se apilan: el video primero, siempre */
  .partido { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); }
  .partido--invertido > *:first-child { order: 0; }

  .seccion { padding: var(--sp-8) 0; }
  .seccion--pantalla { padding: calc(var(--header-h) + var(--sp-5)) 0 var(--sp-5); }
}

/* ====================================================================
   MOVIL · que cada seccion quepa en una pantalla
   En vertical no hay alto para tres tarjetas apiladas mas un titular.
   La solucion no es encoger la letra hasta que no se lea, sino pasar
   las rejillas a carrusel horizontal: una fila en vez de dos.
   ==================================================================== */
@media (max-width: 860px) {
  .seccion--pantalla { padding: calc(var(--header-h) + var(--sp-4)) 0 var(--sp-4); }
  .seccion--pantalla .seccion__cabeza { margin-bottom: var(--sp-4); }
  .seccion--pantalla .titulo-seccion { font-size: clamp(26px, 7.4vw, 40px); }
  .seccion--pantalla .marca-seccion { margin-bottom: var(--sp-2); font-size: 11px; }
  .seccion--pantalla .bajada { font-size: 14.5px; line-height: 1.55; }

  /* Carrusel: se desliza con el dedo y cada tarjeta se acomoda sola */
  .seccion--pantalla .rejilla,
  .seccion--pantalla .testimonios {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-3);
    margin: 0 calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .seccion--pantalla .rejilla::-webkit-scrollbar,
  .seccion--pantalla .testimonios::-webkit-scrollbar { display: none; }

  .seccion--pantalla .rejilla > *,
  .seccion--pantalla .testimonios > * {
    flex: 0 0 auto;
    width: min(74vw, 290px);
    scroll-snap-align: start;
  }

  /* El video de la tarjeta se hace más apaisado: es lo que le sobra
     a la sección de productos para caber en una pantalla. */
  .seccion--pantalla .tarjeta__media { aspect-ratio: 16 / 10; }



  .seccion--pantalla .testimonio { padding: var(--sp-4); }
  .seccion--pantalla .testimonio p { font-size: 16.5px; margin-bottom: var(--sp-3); }

  .seccion--pantalla .media-marco { max-height: 40svh; aspect-ratio: 16 / 11; }
  .seccion--pantalla .confianza { margin-top: var(--sp-3) !important; font-size: 12.5px; }
  .seccion--pantalla .confianza li { padding: 6px 0; }
  .seccion--pantalla .partido { gap: var(--sp-4); }
  .seccion--pantalla .parrafo { font-size: 14.5px; line-height: 1.6; margin-bottom: var(--sp-3); }
  .seccion--pantalla .parrafo-fuerte { font-size: 15.5px; line-height: 1.6; margin-bottom: var(--sp-3); }

  /* Pista visual de que hay mas al lado */
  .seccion--pantalla .rejilla::after,
  .seccion--pantalla .testimonios::after {
    content: ''; flex: 0 0 var(--sp-1);
  }
}

@media (max-width: 560px) {
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
  .tarjeta { border-radius: var(--radio-lg); }
  .tarjeta__cuerpo { padding: var(--sp-3); gap: 5px; }
  .tarjeta__nombre { font-size: 14px; }
  .tarjeta__precio .precio { font-size: 21px; }
  .tarjeta__anticipo { font-size: 11.5px; }

  .linea { grid-template-columns: 76px minmax(0,1fr); gap: var(--sp-3); }
  .linea__media { width: 76px; height: 76px; }
  .linea__derecha {
    grid-column: 1 / -1; flex-direction: row;
    justify-content: space-between; align-items: center; width: 100%;
  }

  .form-fila { grid-template-columns: 1fr; gap: 0; }
  .caja-form { margin: var(--sp-6) auto; padding: var(--sp-5) var(--sp-4); border: none; box-shadow: none; }
  .pie__rejilla { grid-template-columns: 1fr; gap: var(--sp-5); }
  .galeria__principal { aspect-ratio: 1 / 1; }
  .media-marco { max-height: 56svh; }
  /* .paso ya no lleva relleno: dejó de ser tarjeta. El que había aquí
     desalineaba los aros de la línea que los une. */
  .seccion__cabeza { margin-bottom: var(--sp-5); }
}

/* Pantallas bajas (celular apaisado): el hero no puede exigir 560px */
@media (max-height: 560px) {
  .hero { min-height: 100svh; }
  .hero__contenido { padding-top: calc(var(--header-h) + var(--sp-4)); }
}

/* ====================================================================
   Respeta a quien pidió menos movimiento en el sistema operativo.
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-snap-type: none; }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
  .hero h1 .hero__linea > span { transform: none; }
  .hero__sub, .hero__precio, .hero__botones, .hero__cue { opacity: 1; }
  #nieve { display: none; }
}

/* ============================================================
   GUÍA DE COMPRA — los letreros que acompañan al cliente
   ============================================================
   Aparecen junto a lo que le toca mirar, se quedan unos segundos y se
   van difuminándose hacia abajo. Nunca tapan un botón ni piden un clic:
   se pueden ignorar por completo y la página sigue funcionando igual.
   ------------------------------------------------------------ */

.guia {
  position: absolute;
  z-index: 70;                 /* por debajo del header (100) */
  max-width: min(310px, 84vw);
  padding: 13px 17px;
  border-radius: 16px;
  border: 1px solid rgba(207, 224, 234, .55);

  /* Vidrio frío, del mismo material que el header. */
  background: linear-gradient(160deg, rgba(30, 58, 71, .95), rgba(20, 24, 27, .95));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 26px rgba(91, 143, 168, .22);

  color: #F4F8FA;
  font-family: var(--fuente-texto, 'Space Grotesk', system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: .1px;
  text-wrap: balance;

  /* Es un cartel, no una capa: los clics pasan de largo hacia el botón
     que hay debajo. Si interceptara el puntero, el letrero que sirve
     para animar a comprar sería justo lo que impide comprar. */
  pointer-events: none;

  opacity: 0;
  transform: translateY(14px) scale(.97);
  filter: blur(6px);
  transition: opacity .5s ease, transform .5s var(--curva, cubic-bezier(.22, 1, .36, 1)), filter .5s ease;
}

.guia b { color: #CFE0EA; font-weight: 700; }

/* El copo hace de viñeta: firma de marca en cada letrero. */
.guia::before {
  content: '\2744';
  margin-right: 8px;
  color: var(--glaciar, #5B8FA8);
  font-size: 13px;
}

/* La punta que señala el elemento. */
.guia::after {
  content: '';
  position: absolute;
  left: var(--punta, 50%);
  width: 12px; height: 12px;
  margin-left: -6px;
  background: rgba(20, 24, 27, .95);
  border: 1px solid rgba(207, 224, 234, .55);
  transform: rotate(45deg);
}
.guia--arriba::after { bottom: -7px; border-top: 0;    border-left: 0; }
.guia--abajo::after  { top: -7px;    border-bottom: 0; border-right: 0; }

/* Entrada: sube al lugar y se enfoca. */
.guia.esta-viendose {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Salida: se difumina y se va hacia abajo, como pediste. */
.guia.se-va {
  opacity: 0;
  transform: translateY(26px) scale(.97);
  filter: blur(8px);
  transition-duration: .62s;
}

/* Quien pide menos movimiento igual lee el texto: solo se le quita el
   viaje y el desenfoque. */
@media (prefers-reduced-motion: reduce) {
  .guia { transform: none; filter: none; transition: opacity .3s linear; }
  .guia.esta-viendose { transform: none; }
  .guia.se-va { transform: none; filter: none; }
}

@media (max-width: 640px) {
  .guia { font-size: 13.5px; padding: 11px 14px; max-width: 78vw; }
}

/* ====================================================================
   DÓNDE VA MI PEDIDO
   La línea de tiempo que ve el cliente en su cuenta. Es la respuesta a
   la pregunta que más llega por WhatsApp, puesta donde puede mirarla
   solo sin tener que escribir.
   ==================================================================== */

.estado-pastilla {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--perla);
  color: var(--humo);
  white-space: nowrap;
}
.estado-pastilla--bien   { background: #E4F4EB; color: #14603A; }
.estado-pastilla--espera { background: #FFF4E2; color: #7A4E11; }
.estado-pastilla--frio   { background: #E6F0F6; color: #1E3A47; }
.estado-pastilla--mal    { background: #FBE9E8; color: #8E2A25; }

.rastro {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--perla);
}

.rastro__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  counter-reset: paso;
}

.rastro__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* La línea que une los puntos. Va detrás del punto, de un paso al
   siguiente, y el último no la lleva. */
.rastro__paso::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--niebla);
}
.rastro__paso:last-child::before { display: none; }
.rastro__paso.esta-hecho::before { background: var(--glaciar); }

.rastro__punto {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blanco);
  border: 2px solid var(--niebla);
  flex: none;
}
.rastro__paso.esta-hecho .rastro__punto {
  background: var(--glaciar);
  border-color: var(--glaciar);
}

/* El paso en el que está AHORA se marca aparte del resto de los hechos:
   sin esto, «entregado» y «va en camino» se ven igual de azules y no se
   sabe cuál es el de hoy. */
.rastro__paso.es-ahora .rastro__punto {
  background: var(--glaciar-osc);
  border-color: var(--glaciar-osc);
  box-shadow: 0 0 0 4px rgba(62, 109, 132, .2);
}

.rastro__nombre {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--humo);
  font-weight: 600;
}
.rastro__paso.esta-hecho .rastro__nombre { color: var(--glaciar-osc); }
.rastro__paso.es-ahora .rastro__nombre { color: var(--negro); font-weight: 700; }

.rastro__dice {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--carbon);
}

.rastro__guia {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--niebla);
  font-size: 13.5px;
  color: var(--humo);
  font-variant-numeric: tabular-nums;
}
.rastro__guia strong { color: var(--negro); }

.rastro__detalle { margin-top: 10px; }
.rastro__detalle summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--glaciar);
  cursor: pointer;
  padding: 4px 0;
}
.rastro__detalle summary:hover { text-decoration: underline; }

.rastro__historial {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--niebla);
}
.rastro__historial li { padding: 7px 0; font-size: 13.5px; }
.rastro__historial li strong { display: block; color: var(--negro); }
.rastro__historial li span { font-size: 12.5px; color: var(--humo); }
.rastro__historial li p { margin: 4px 0 0; font-size: 13px; color: var(--carbon); }

@media (max-width: 560px) {
  /* Cuatro pasos no caben en horizontal en un celular sin quedar en
     letra ilegible: pasan a columna. */
  .rastro__pasos { grid-template-columns: 1fr; gap: 0; }
  .rastro__paso {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding-bottom: 12px;
  }
  .rastro__paso::before {
    top: 16px; left: 7px;
    width: 2px; height: 100%;
  }
  .rastro__nombre { font-size: 13.5px; padding-top: 1px; }
}

/* ====================================================================
   FRANJA — la tira que separa dos secciones del inicio
   ====================================================================
   Se desplaza sola de derecha a izquierda. El truco: el contenido va
   DUPLICADO dentro de .franja__pista y la animacion mueve la pista
   exactamente el 50% de su ancho. Cuando la primera copia termina de
   salir, la segunda esta justo donde estaba la primera, asi que el
   salto al reiniciar no se ve.

   No usa scroll-snap-align: es una tira de 52px, no una pantalla. Si
   snapeara, el scroll se quedaria clavado en ella.
   ==================================================================== */
.franja {
  position: relative;
  overflow: hidden;
  /* Negro como todo lo demas. Lo que la separa de las secciones no es
     el color de fondo sino las dos lineas de hielo de arriba y abajo,
     que aqui pesan mas que antes justamente por eso. */
  background: var(--negro);
  color: #fff;
  padding: 15px 0;
  /* La linea de hielo arriba y abajo la separa de las dos secciones
     sin necesidad de margen: pegada se lee como parte de la tira. */
  border-block: 1px solid rgba(207, 224, 234, .28);
  user-select: none;
}

.franja__pista {
  display: flex;
  width: max-content;
  animation: franja-correr 38s linear infinite;
}

.franja__grupo { display: flex; }

.franja__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 var(--sp-4, 32px);
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
}

.franja__item i { font-style: normal; font-size: 16px; }

/* Sin iconos, las frases repetidas se pegaban unas a otras y no se
   sabia donde acababa una. Una linea fina de hielo antes de cada una
   hace de separador sin meter ningun simbolo. */
.franja__item::before {
  content: '';
  width: 18px; height: 1px;
  background: rgba(207,224,234,.5);
  flex: none;
}

/* El reloj solo aparece cuando el descuento tiene fecha de fin de
   verdad. Ver descuento_segundos(). */
.franja__reloj {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
}

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

/* Al pasar el raton se para: si no, no da tiempo a leerla entera. */
.franja:hover .franja__pista { animation-play-state: paused; }

/* Movil: mas rapida y letra algo menor, si no cabe una sola frase. */
@media (max-width: 720px) {
  .franja { padding: 12px 0; }
  .franja__item { font-size: 13.5px; padding: 0 20px; gap: 8px; }
  .franja__pista { animation-duration: 26s; }
}

/* Quien pidio menos movimiento no ve la tira correr: se queda quieta
   y se puede desplazar a mano. Sin esto, una animacion infinita puede
   provocar mareo a quien es sensible al movimiento. */
@media (prefers-reduced-motion: reduce) {
  .franja__pista { animation: none; width: 100%; }
  .franja { overflow-x: auto; }
  .franja__grupo:nth-child(2) { display: none; }
}

/* ====================================================================
   PAGINA NEGRA — el inicio va entero en negro
   ====================================================================
   Solo la marca includes/header.php cuando la pagina pone
   $fondoNegro = true. Se hace con una clase en el <body> y no
   cambiando --blanco, porque el resto del sitio (catalogo, ficha,
   carrito, checkout, panel) sigue siendo claro y comparte esa
   variable.
   ==================================================================== */
body.pagina-negra {
  background: var(--negro);
  color: var(--blanco);
}

/* El rebote del scroll en movil: sin esto asoma blanco por arriba y
   por abajo al llegar al final y seguir arrastrando. */
html:has(body.pagina-negra) { background: var(--negro); }

/* El velo del scroll-snap y cualquier hueco entre secciones */
body.pagina-negra main { background: var(--negro); }

/* ====================================================================
   CORRECCIONES DE CONTRASTE SOBRE FONDO NEGRO
   ====================================================================
   Cada una salio de medir el contraste real en la pagina, no de mirarla.
   El minimo de la norma (WCAG AA) es 4.5:1 para texto normal y 3:1 para
   titulares grandes.
   ==================================================================== */

/* «Despachamos a los 32 departamentos»: el <strong> dentro de .bajada
   heredaba negro y quedaba NEGRO SOBRE NEGRO, ilegible del todo.
   Medido: 1.0 (lo peor posible). */
.seccion--oscura .bajada strong,
body.pagina-negra .bajada strong { color: var(--blanco); }

/* El contador del mapa de cobertura, mismo problema: negro sobre negro. */
.seccion--oscura .cifra strong,
body.pagina-negra .cifra strong { color: var(--blanco); }
.seccion--oscura .cifra span,
body.pagina-negra .cifra span { color: rgba(255,255,255,.62); }

/* La cinta de «-30%»: blanco sobre azul glaciar daba 3.54, por debajo
   del 4.5 que pide un texto pequeño. Se oscurece el azul hasta el
   profundo de la paleta, que con blanco sube a 9.6. El color sigue
   siendo de la marca; lo unico que cambia es cual de los dos azules. */
.tarjeta__cinta--off { background: var(--profundo); letter-spacing: .02em; }

/* «Envío gratis» iba en verde sobre una pastilla casi blanca: 4.43,
   justo por debajo del minimo. Se oscurece el verde. */
.tarjeta__envio { color: #14663D; }

/* «precio--claro» apaga el degradado de plata y deja el numero en negro:
   nacio para las tarjetas sobre fondo blanco. Ahora esas tarjetas viven
   sobre negro y el precio quedaba NEGRO SOBRE NEGRO — medido 1.07, o
   sea invisible. Y el precio es lo que mas importa que se vea: es la
   regla numero uno del negocio.
   -webkit-text-fill-color hace falta ademas de color: es lo que gana
   cuando el elemento viene de un texto con degradado recortado. */
.seccion--oscura .precio--claro,
body.pagina-negra .precio--claro {
  -webkit-text-fill-color: var(--blanco);
  color: var(--blanco);
}

/* El precio tachado se quedaba en 4.41, un pelo por debajo del 4.5.
   Subir la opacidad al 58% lo deja en 5.4 sin que compita con el
   precio nuevo, que es lo que tiene que destacar. */
.seccion--oscura .precio-antes,
body.pagina-negra .precio-antes { color: rgba(255,255,255,.58); }

/* ====================================================================
   EJE OPTICO DE BODONI MODA
   ====================================================================
   Bodoni Moda es variable y trae eje «opsz» (optical size). Con
   font-optical-sizing: auto, el navegador le pide a la fuente el dibujo
   pensado para el tamaño al que se esta pintando:

     - En un titular de 44px saca los finos de pelo, que es lo que le da
       el aire de didona cara.
     - En una etiqueta de 12px los engorda sola, para que no se corten.

   Sobre fondo NEGRO esto pasa de detalle a necesidad: un fino de pelo
   claro sobre negro se rompe y la letra se ve mordida.
   ==================================================================== */
html { font-optical-sizing: auto; }

/* Los titulares grandes piden el peso alto: una didona a peso 400 y
   tamaño grande se ve floja, y sobre negro directamente deslavada. */
.titulo-seccion,
.hero h1,
.hero__texto h1 { font-weight: 700; }

/* Las piezas chicas en tipografia de titular (logo, avatar, precio de
   la barra) van al reves: peso medio y algo mas de espacio entre
   letras, o a 15px la didona se empasta. */
.logo { font-weight: 500; letter-spacing: .16em; }