/* ====================================================================
   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 */
  --display: 'Anton', Impact, sans-serif;
  --texto:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --serif:   'Instrument Serif', 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: .55;
}

/* ====================================================================
   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); }

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

.titulo-seccion {
  font-family: var(--display);
  font-size: clamp(30px, 5.4vw, 58px);
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.005em;
  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(28px, 4vw, 42px);
  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: 25px;
  letter-spacing: .07em;
  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;
}
.cinta__pista span::before { content: '❄'; color: var(--glaciar); font-size: 11px; }
@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); }
.seccion--oscura { background: var(--grafito); color: var(--blanco); }
.seccion--oscura .bajada { color: rgba(255,255,255,.62); }
.seccion--oscura .titulo-seccion { color: var(--blanco); }

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

/* ====================================================================
   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 {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .34;
  transform: scale(1.06);
}

/* Oscurece abajo para que el texto siempre tenga contraste */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 32%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.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 h1 {
  font-family: var(--display);
  font-size: clamp(34px, min(8.6vw, 10.5vh), 104px);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
  margin-bottom: clamp(12px, 2.6vh, 24px);
}
/* Cada línea entra por separado: da sensación de composición, no de bloque. */
.hero h1 .linea {
  display: block;
  overflow: hidden;
}
.hero h1 .linea > span {
  display: block;
  transform: translateY(105%);
  animation: subirLinea 1s var(--curva) forwards;
}
.hero h1 .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; }
}
@media (max-height: 640px) { .hero__cue { display: none; } }

/* ====================================================================
   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 {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--curva);
}
.tarjeta:hover .tarjeta__media video { 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; }

/* 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 { 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
   ==================================================================== */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-6); }
.paso {
  padding: var(--sp-6);
  border-radius: var(--radio-xl);
  border: 1px solid var(--niebla);
  background: var(--blanco);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva);
}
.paso:hover { transform: translateY(-8px); box-shadow: var(--sombra-lg); }
.paso__num {
  font-family: var(--display); font-size: 60px;
  color: transparent; -webkit-text-stroke: 2px var(--glaciar);
  line-height: .9; margin-bottom: var(--sp-4);
  transition: -webkit-text-stroke-color .35s ease;
}
.paso:hover .paso__num { -webkit-text-stroke-color: var(--negro); }
.paso h3 { font-size: 21px; margin-bottom: var(--sp-3); }
.paso p { color: var(--humo); font-size: 15px; line-height: 1.7; }

/* ====================================================================
   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;
}

/* 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 .pasos,
  .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 .pasos::-webkit-scrollbar,
  .seccion--pantalla .testimonios::-webkit-scrollbar { display: none; }

  .seccion--pantalla .rejilla > *,
  .seccion--pantalla .pasos > *,
  .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 .paso { padding: var(--sp-4); }
  .seccion--pantalla .paso__num { font-size: 42px; margin-bottom: var(--sp-2); }
  .seccion--pantalla .paso h3 { font-size: 18px; margin-bottom: var(--sp-2); }
  .seccion--pantalla .paso p { font-size: 14px; line-height: 1.55; }

  .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 .pasos::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 { padding: var(--sp-5); }
  .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 .linea > span { transform: none; }
  .hero__sub, .hero__precio, .hero__botones, .hero__cue { opacity: 1; }
  #nieve { display: none; }
}