/* Veat · paleta del logotipo: violeta, lavanda y blanco perlado.
   La geometría y el comportamiento de la interfaz se mantienen.
   Verde y rojo conservan su función de estado y error.
   Los nombres heredados son aliases para las vistas y el juego existentes. */
:root {
  --n900: #100c1c;
  --n850: #151020;
  --n800: #1b142b;
  --n700: #241b37;
  --n600: #302444;
  --n500: #40305b;

  --marca-violeta: #6030aa;
  --marca-violeta-alto: #7240c9;
  --marca-violeta-vivo: #8050cc;
  --marca-lavanda: #c8b5ff;
  --marca-perla: #f6f1ff;
  --hielo: var(--marca-lavanda);
  --hielo-2: #a185f0;
  --neon: #e0bcfa;
  --neon-2: #b585de;
  --violeta: #bba2ff;
  --violeta-2: #9d7fe1;
  --ambar: #e0d4ff;
  --ambar-2: #b69bea;
  --verde: #8fd9b0;
  --verde-2: #46a67f;
  --rojo: #ff8f8a;

  --burdeos: var(--marca-violeta);
  --burdeos-alto: var(--marca-violeta-alto);
  --burdeos-vivo: var(--marca-violeta-vivo);
  --tinta: #160d29;
  --marca-burdeos: var(--marca-violeta);
  --marca-medianoche: #211638;
  --marca-hueso: var(--marca-perla);

  --tx: var(--marca-perla);
  --tx2: rgba(246,241,255,.74);
  --tx3: rgba(246,241,255,.66);
  --tx4: rgba(213,199,238,.82);

  /* Materiales */
  --vidrio:      rgba(255, 255, 255, .045);
  --vidrio-alto: rgba(255, 255, 255, .075);
  --pelo:        rgba(255, 255, 255, .085);
  --pelo-alto:   rgba(255, 255, 255, .14);
  --brillo:      inset 0 1px 0 rgba(255, 255, 255, .09);

  /* Radios concéntricos: el marco exterior y su núcleo comparten centro */
  --r-out: 1.375rem;
  --r-in:  1.0625rem;
  --r-pil: 999px;

  /* Curvas: ninguna es ease-in-out */
  --sal:   cubic-bezier(.32, .72, 0, 1);   /* la de las hojas de iOS */
  --suave: cubic-bezier(.22, .61, .36, 1);
  --salto: cubic-bezier(.34, 1.4, .64, 1);

  /* Tipos: la del sistema, que ya viene con óptica y tracking resueltos */
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
       "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --fd: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
        "Segoe UI", system-ui, sans-serif;

  /* Alturas de la mecánica */
  --h-tab: 3.625rem;
  --seg-ab: env(safe-area-inset-bottom, 0px);
  --seg-ar: env(safe-area-inset-top, 0px);

  --t1: var(--hielo);
  --t2: var(--hielo-2);
}

/* ───────────────────────────── 2. Base ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font: 400 1rem/1.5 var(--f);
  background: var(--n900);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }

/* Un botón no puede llevar <div> dentro, así que todo lo de dentro son <span>
   y hay que devolverles el comportamiento de bloque a mano. */
.bloque, .pack__cuerpo, .pack__claim, .pack__nombre,
.card__cuerpo, .card__nombre, .oferta__tit, .oferta__baj,
.linea__tx, .linea__n, .linea__p, .linea__paso,
.repartidor__tx, .repartidor__n, .fase__txt, .fase__tit, .fase__det,
.item__tx, .item__t, .item__d { display: block; }

/* [hidden] tiene que ganarle a cualquier display declarado después */
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
b, strong { font-weight: 650; }

:focus-visible {
  outline: 2px solid var(--hielo);
  outline-offset: 3px;
  border-radius: 6px;
}

.ic { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.ic--20 { width: 1.25rem; height: 1.25rem; }
.ic--18 { width: 1.125rem; height: 1.125rem; stroke-width: 1.7; }
.ic--16 { width: 1rem; height: 1rem; stroke-width: 1.8; }
.ic--14 { width: .875rem; height: .875rem; stroke-width: 2; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────── 3. Fondo: la luz de la calle ─────────────────────── */
.fondo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, #2b1948 0%, var(--n900) 58%);
}
.fondo__orbe {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
/* Luz ambiental violeta, lavanda y reflejo perlado del logotipo. */
.fondo__orbe--hielo  { width: 62vw; height: 62vw; top: -14vw; left: -20vw;
  background: radial-gradient(circle, rgba(114,64,201,.30), transparent 68%); }
.fondo__orbe--neon   { width: 78vw; height: 78vw; top: 26vh; right: -36vw;
  background: radial-gradient(circle, rgba(157,127,225,.16), transparent 68%); }
.fondo__orbe--violeta{ width: 70vw; height: 70vw; bottom: -22vh; left: -18vw;
  background: radial-gradient(circle, rgba(182,155,234,.13), transparent 68%); }

/* Grano: da textura física y mata el banding de los degradados */
.grano {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────────────────── 4. Arranque ─────────────────────────────
   Dos modos del mismo elemento:

   · BREVE (por defecto): la marca entra, el lema debajo, y fuera en 1,5 s. Es
     lo que hay en las recargas y con «movimiento reducido». Es el que estaba.
   · COMPLETO (`.arranque--completo`, solo la primera vez de cada pestaña): el
     repartidor cruza una ciudad con las persianas bajadas, aparece el lema,
     aterriza el logotipo y la pastilla de la R se expande hasta comerse la
     pantalla. Dura 3,95 s.

   Que el modo por defecto sea el BREVE no es casual: si el JavaScript del
   <head> falla o no llega a correr, la app arranca corta y usable. El modo
   largo es una mejora que se añade, nunca algo que haya que desactivar.

   Y hay un botón de saltar invisible —un toque en cualquier sitio—, porque
   esto se enseña en directo delante de gente.  */
.arranque {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: .875rem;
  background: var(--n900);
  animation: arranque-fuera .5s var(--sal) 1s forwards;
}
.arranque__marca { display: flex; align-items: center; gap: .55rem;
  animation: arranque-entra .7s var(--sal) both; }
/* Todo el decorado de la secuencia larga: en modo breve ni existe. */
.arranque__cielo, .arranque__ciudad, .arranque__suelo,
.arranque__rider, .arranque__onda { display: none; }
/* Icono Veat compartido desde assets para que todas las cabeceras lean igual.
   El pulso vive en el filtro de la imagen y no altera su caja. */
.marca-v {
  width: 1.5rem; height: 1.5rem; flex: none; display: block;
  filter: drop-shadow(0 0 10px rgba(137, 91, 255, .42));
  animation: latir-marca 3.5s ease-in-out infinite;
}
.marca-v--grande {
  width: 2.875rem; height: 2.875rem;
  filter: drop-shadow(0 0 24px rgba(137, 91, 255, .48));
  animation-duration: 1.6s;
}
/* En la escena de escritorio el icono acompaña al wordmark. */
.marca-v--media { width: 2.5rem; height: 2.5rem; }
.marca-texto--media { width: 5.25rem; height: auto; }
@keyframes latir-marca {
  50% { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(145, 105, 255, .72)); }
}
@media (prefers-reduced-motion: reduce) { .marca-v { animation: none; } }
/* Wordmark de la secuencia de entrada. */
.arranque__texto {
  display: block; width: 7.25rem; height: auto;
  filter: drop-shadow(0 0 16px rgba(137, 91, 255, .36));
}
.arranque__lema {
  font-size: .8125rem; color: var(--tx3); letter-spacing: .01em;
  animation: arranque-entra .7s var(--sal) .12s both;
}
@keyframes arranque-entra { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(6px); } }

/* ══════════ 4b. La secuencia larga ══════════
   El guion, en segundos:
     0,00  se enciende la noche
     0,15  entra la ciudad y empieza a pasar
     0,20  el repartidor entra por la izquierda
     0,85  aparece el lema
     2,25  aterriza el monograma
     2,55  entra la palabra
     3,05  la pastilla se expande
     3,95  fuera

   Aviso para quien la retoque: ningún elemento de aquí puede declarar
   `opacity: 0` en su regla base si sus fotogramas solo tienen `from`. El
   fotograma `to` que falta lo rellena el navegador con el estilo del propio
   elemento, así que se animaría de invisible a invisible. Pasó con la palabra
   de la marca y costó tres capturas entender por qué no salía nunca. */
.arranque--completo { animation: arranque-fuera .3s var(--sal) 3.72s forwards; }
.arranque--completo .arranque__cielo,
.arranque--completo .arranque__ciudad,
.arranque--completo .arranque__suelo,
.arranque--completo .arranque__rider,
.arranque--completo .arranque__onda { display: block; }

.arranque__cielo { position: absolute; inset: 0; animation: arranque-aparece .6s ease both; }
.arranque__cielo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 42%, rgba(114,64,201, .20), transparent 70%);
}
@keyframes arranque-aparece { from { opacity: 0; } }

.arranque__ciudad {
  position: absolute; left: 0; right: 0; top: 50%; height: 150px; margin-top: -86px;
  animation: arranque-ciudad .5s ease .15s both;
}
.arranque__tira {
  position: absolute; top: 0; left: 0; height: 100%; width: 200%; display: flex;
  animation: arranque-rodar 3.1s linear .2s both;
}
.arranque__tira svg { width: 50%; height: 100%; flex: none; }
@keyframes arranque-rodar { to { transform: translateX(-50%); } }
@keyframes arranque-ciudad { from { opacity: 0; } to { opacity: .62; } }

.arranque__suelo {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,241,255, .28), transparent);
  animation: arranque-aparece .5s ease .2s both;
}

/* −110px no es un número bonito: es el que hace que las ruedas PISEN la línea
   del suelo. Radio de rueda = 17/120 del ancho = 29,75 px; el eje cae a 140 px
   del alto de la caja; el suelo está a 50 % + 60. 60 − 29,75 − 140 = −110. */
.arranque__rider {
  position: absolute; top: 50%; left: 50%; width: 210px; height: 210px;
  margin-top: -110px; margin-left: -105px;
  background: url("assets/mascota-leon-ciclo.webp") 0 0 / 400% 100% no-repeat;
  animation: arranque-cruza 2.35s cubic-bezier(.16, .7, .3, 1) .2s both,
             arranque-pedalea .56s steps(1, end) .2s infinite;
}
/* Los porcentajes son el guion: entra hasta el centro (32 %), se queda
   pedaleando mientras la ciudad sigue pasando (58 %) y se va. */
@keyframes arranque-cruza {
  0%   { transform: translateX(-135%); }
  32%  { transform: translateX(0); }
  58%  { transform: translateX(0); }
  100% { transform: translateX(150%); }
}
/* Dos arreglos aquí, y los dos se ven.

   1. Con cuatro keyframes a 0/33/66/100 y steps(1, end), el último dura cero:
      steps se aplica por TRAMO y cada tramo se queda con su valor de entrada,
      así que se veían tres fotogramas de los cuatro. Ahora cada fotograma
      ocupa su cuarto entero y el ciclo está completo.

   2. Los cuatro fotogramas de la tira no están centrados entre sí. Medidos
      sobre el original (celda de 320 px), sus centros caen en 157, 165,5,
      143,5 y 136,5 — media 150,625. A 210 px de caja la escala es 0,65625,
      o sea 19,0 px de baile lateral en cada pedalada. Cada fotograma lleva
      su corrección en px absolutos; el porcentaje no sirve para esto porque
      elige el fotograma y desplazaría los dos a la vez. Las cuatro
      correcciones suman cero, así que el león no se mueve de sitio.

   Es la misma tira que usa el vídeo (mismo fichero, mismo md5), y allí lleva
   la misma corrección. Si se cambia el sprite, hay que volver a medir en los
   dos sitios. */
@keyframes arranque-pedalea {
  0%,      24.999% { background-position: calc(0%      - 4.18px) 0; }
  25%,     49.999% { background-position: calc(33.333% - 9.76px) 0; }
  50%,     74.999% { background-position: calc(66.666% + 4.68px) 0; }
  75%,       100%  { background-position: calc(100%    + 9.27px) 0; }
}
.mas__rueda  { animation: arranque-girar .42s linear infinite; transform-origin: var(--o); }
.mas__biela  { animation: arranque-girar .42s linear infinite; transform-origin: 58px 80px; }
@keyframes arranque-girar { to { transform: rotate(360deg); } }
.mas__cuerpo { animation: arranque-bote .21s ease-in-out infinite alternate; transform-origin: 56px 70px; }
@keyframes arranque-bote { to { transform: translateY(-1.2px); } }
.mas__oreja  { animation: arranque-oreja .34s ease-in-out infinite alternate; transform-origin: 75px 14px; }
@keyframes arranque-oreja { to { transform: rotate(11deg); } }
.mas__pierna-a { animation: arranque-pedal .42s linear infinite;        transform-origin: 52px 46px; }
.mas__pierna-b { animation: arranque-pedal .42s linear infinite -.21s;  transform-origin: 52px 46px; }
@keyframes arranque-pedal { 0% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } 100% { transform: rotate(-7deg); } }
.mas__viento { animation: arranque-viento .5s linear infinite; }
@keyframes arranque-viento {
  0% { opacity: 0; transform: translateX(6px); } 30% { opacity: .7; }
  100% { opacity: 0; transform: translateX(-24px); }
}

/* En modo largo la marca y el lema dejan de entrar al principio: tienen turno */
.arranque--completo .arranque__marca {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: arranque-aterriza .6s var(--salto) 2.25s both;
}
@keyframes arranque-aterriza {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.arranque--completo .arranque__texto {
  animation: arranque-palabra .45s var(--sal) 2.55s both;
}
@keyframes arranque-palabra { from { opacity: 0; transform: translateX(-12px); filter: blur(6px); } }
.arranque--completo .arranque__lema {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: 100px; text-align: center;
  font-size: .9375rem; color: var(--tx3);
  animation: arranque-entra .6s var(--sal) .85s both;
}

/* El barrido que tapa la pantalla al acabar la intro.

   Aquí había el icono de la app. Dos problemas: el icono es casi blanco, así
   que a pantalla completa era un fogonazo —justo lo que el arranque intenta
   no hacer—, y a scale(42) un PNG de 46 px se amplía 42 veces y llega
   deshecho. Un degradado no tiene resolución y es del violeta de la marca,
   que es lo que queremos que quede en la retina. La forma se conserva: sale
   del mismo cuadrado redondeado de 13 px, donde está el icono. */
.arranque__onda {
  position: absolute; top: 50%; left: 50%;
  width: 2.875rem; height: 2.875rem; margin: -1.4375rem 0 0 -1.4375rem;
  border-radius: 13px;
  background: radial-gradient(circle at 38% 30%,
    var(--marca-violeta-vivo) 0%,
    var(--marca-violeta) 58%,
    #3d1a75 100%);
  animation: arranque-onda .78s cubic-bezier(.7, 0, .3, 1) 3.05s both;
}
@keyframes arranque-onda {
  0%   { opacity: 0; transform: scale(1);  border-radius: 13px; }
  14%  { opacity: 1; }
  70%  { opacity: 1; border-radius: 0; }
  100% { opacity: 0; transform: scale(42); border-radius: 0; }
}

/* Saltar: se va en 260 ms desde donde esté, sin esperar a nada */
.arranque--saltado,
.arranque--completo.arranque--saltado { animation: arranque-fuera .26s var(--sal) forwards; }
.arranque--saltado * { animation-play-state: paused; }
@keyframes arranque-fuera { to { opacity: 0; visibility: hidden; } }
@keyframes latir { 50% { transform: scale(1.35); box-shadow: 0 0 26px 4px rgba(200,181,255,.55); } }

/* ───────────────────────────── 5. Armazón ───────────────────────────── */
.app { position: fixed; inset: 0; z-index: 2; }

.pistas { position: absolute; inset: 0; overflow: hidden; }

.pantalla { position: absolute; inset: 0; }
.pantalla[hidden] { display: none; }
.pantalla__scroll {
  height: 100%; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: calc(var(--seg-ar) + .875rem) 1.25rem
           calc(var(--h-tab) + var(--seg-ab) + 5.5rem);
  scrollbar-width: none;
}
.pantalla__scroll::-webkit-scrollbar { display: none; }

/* Entrada de pantalla: cae desde la dirección del gesto, nunca aparece seca */
.pantalla--entra-dcha .pantalla__scroll { animation: pan-dcha .34s var(--sal) both; }
.pantalla--entra-izda .pantalla__scroll { animation: pan-izda .34s var(--sal) both; }
@keyframes pan-dcha { from { opacity: 0; transform: translate3d(22px,0,0); } }
@keyframes pan-izda { from { opacity: 0; transform: translate3d(-22px,0,0); } }

/* ─────────────────── 6. Barra superior (cristal que flota) ─────────────────── */
.barra-sup {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  padding-top: var(--seg-ar);
  pointer-events: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .28s var(--suave), transform .28s var(--suave);
}
.barra-sup--on { opacity: 1; transform: none; }
.barra-sup::after {   /* borde de scroll: degradado, no una línea de 1px */
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.5rem;
  background: linear-gradient(to bottom, rgba(21,16,32,.72), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}
.barra-sup__fila {
  height: 3.125rem; display: flex; align-items: center; justify-content: center;
  background: rgba(27,20,43, .62);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
}
.barra-sup__titulo {
  font-family: var(--fd); font-size: 1.0625rem; font-weight: 620;
  letter-spacing: -.012em;
}

/* ───────────────────────── 7. Cabecera y títulos ───────────────────────── */
.cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.cabecera__marca { display: flex; align-items: center; gap: .4375rem; }
.marca-texto {
  display: block; width: 3.75rem; height: auto; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(137, 91, 255, .22));
}
.chip-demo {
  font-size: .625rem; font-weight: 640; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx3); padding: .3125rem .5625rem; border-radius: var(--r-pil);
  border: 1px solid var(--pelo); background: var(--vidrio);
  transition: color .2s var(--suave), border-color .2s var(--suave);
}
.chip-demo:active { color: var(--hielo); border-color: rgba(200,181,255,.4); }

.titulo-grande {
  font-family: var(--fd);
  font-size: clamp(2.375rem, 11vw, 3.125rem);
  font-weight: 680; line-height: .96; letter-spacing: -.045em;
  margin-bottom: 1.375rem;
  background: linear-gradient(170deg, #fff 8%, rgba(246,241,255,.68) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titulo-grande--solo { margin-top: 1.75rem; }
.subtitulo { color: var(--tx2); font-size: .9375rem; margin: -.75rem 0 1.5rem; max-width: 22rem; }

.seccion-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 2.25rem 0 .875rem;
}
.seccion-tit {
  font-family: var(--fd); font-size: 1.0625rem; font-weight: 640; letter-spacing: -.02em;
}
.enlace-mini { font-size: .8125rem; font-weight: 550; color: var(--hielo); letter-spacing: -.005em; }
.enlace-mini:active { opacity: .6; }

/* ──────────────── 8. Marco: casco exterior + núcleo (doble bisel) ──────────────── */
.marco {
  display: block; width: 100%; text-align: left;
  background: var(--vidrio);
  border: 1px solid var(--pelo);
  border-radius: var(--r-out);
  padding: .3125rem;
}
.marco__core {
  border-radius: var(--r-in);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow: var(--brillo);
  padding: 1rem 1.0625rem;
}
button.marco { transition: transform .16s var(--suave); }
button.marco:active { transform: scale(.982); }

/* ──────────────── 9. Estado en vivo: el corazón de la portada ──────────────── */
.estado {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .875rem;
  padding: 1.0625rem 1.125rem;
  border-radius: var(--r-out);
  border: 1px solid var(--pelo);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(143,217,176,.14), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: var(--brillo), 0 14px 40px -22px rgba(0,0,0,.9);
}
.estado--cerrado {
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(224,212,255,.12), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.estado__luz {
  width: .625rem; height: .625rem; border-radius: 50%; flex: none;
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(143,217,176,.5);
  animation: faro 2.4s ease-out infinite;
}
.estado--cerrado .estado__luz { background: var(--ambar); animation: none; opacity: .75; }
@keyframes faro {
  0%   { box-shadow: 0 0 0 0 rgba(143,217,176,.45), 0 0 14px 1px rgba(143,217,176,.8); }
  70%  { box-shadow: 0 0 0 .75rem rgba(143,217,176,0), 0 0 14px 1px rgba(143,217,176,.8); }
  100% { box-shadow: 0 0 0 0 rgba(143,217,176,0), 0 0 14px 1px rgba(143,217,176,.8); }
}
.estado__cuerpo { flex: 1; min-width: 0; }
.estado__titular { font-family: var(--fd); font-size: 1.0625rem; font-weight: 640; letter-spacing: -.02em; }
.estado__detalle { font-size: .8125rem; color: var(--tx2); margin-top: .0625rem; }
.estado__cuenta {
  font-variant-numeric: tabular-nums; font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--hielo); text-align: right; flex: none;
}
/* Condensación: gotas sobre el cristal frío */
.estado__gotas { position: absolute; inset: 0; pointer-events: none; }
.estado__gotas i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.4), rgba(255,255,255,.05) 60%, transparent 72%);
  filter: blur(.3px);
}
.estado__gotas i:nth-child(1) { width: 7px;  height: 7px;  top: 16%; right: 27%; opacity: .5; }
.estado__gotas i:nth-child(2) { width: 4px;  height: 4px;  top: 58%; right: 19%; opacity: .4; }
.estado__gotas i:nth-child(3) { width: 10px; height: 10px; top: 70%; right: 38%; opacity: .32; }
.estado__gotas i:nth-child(4) { width: 5px;  height: 5px;  top: 28%; right: 44%; opacity: .45; }
.estado__gotas i:nth-child(5) { width: 3px;  height: 3px;  top: 78%; right: 11%; opacity: .5; }
.estado__gotas i:nth-child(6) { width: 6px;  height: 6px;  top: 40%; right: 8%;  opacity: .28; }

/* ───────────────────────── 10. Zona y tiempo ───────────────────────── */
.zona {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; margin-top: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--r-pil);
  border: 1px solid var(--pelo);
  background: var(--vidrio);
  color: var(--tx2); font-size: .875rem;
  transition: transform .16s var(--suave), border-color .2s var(--suave);
}
.zona:active { transform: scale(.985); border-color: var(--pelo-alto); }
.zona__nombre { color: var(--tx); font-weight: 560; }
.zona__eta { color: var(--tx); font-weight: 560; font-variant-numeric: tabular-nums; }
.zona__sep { width: 1px; height: .875rem; background: var(--pelo-alto); margin: 0 .1875rem; }
.zona__chevron { margin-left: auto; color: var(--tx3); }

/* ───────────────────────── 11. Carrusel de packs ───────────────────────── */
.carrusel {
  display: flex; gap: .75rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -1.25rem; padding: .25rem 1.25rem 1rem;
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; flex: none; }

.pack {
  position: relative; overflow: hidden;
  width: 15.5rem; text-align: left;
  border-radius: var(--r-out);
  border: 1px solid var(--pelo);
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow: var(--brillo), 0 18px 42px -26px #000;
  transition: transform .18s var(--suave);
}
.pack:active { transform: scale(.975); }
.pack__luz {
  position: absolute; top: -36%; right: -26%;
  width: 11rem; height: 11rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--t1) 42%, transparent), transparent 66%);
  filter: blur(26px);
}
.pack__arte { position: relative; height: 7.25rem; display: grid; place-items: center; }
.pack__cuerpo { position: relative; padding: 0 .9375rem 1rem; }
.pack__claim {
  font-size: .625rem; font-weight: 660; letter-spacing: .13em; text-transform: uppercase;
  color: var(--t1); margin-bottom: .3125rem;
}
.pack__nombre { font-family: var(--fd); font-size: 1.0625rem; font-weight: 640; letter-spacing: -.024em; }
.pack__cont { font-size: .75rem; color: var(--tx3); line-height: 1.45; margin-top: .3125rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pack__pie { display: flex; align-items: center; gap: .4375rem; margin-top: .75rem; }
.pack__precio { font-family: var(--fd); font-size: 1.125rem; font-weight: 660; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.pack__antes { font-size: .8125rem; color: var(--tx4); text-decoration: line-through;
  font-variant-numeric: tabular-nums; }
.pack__add {
  margin-left: auto; width: 2.125rem; height: 2.125rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--t1), var(--t2));
  color: #160d29;
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--t1) 70%, transparent);
  transition: transform .18s var(--salto);
}
.pack:active .pack__add { transform: scale(1.12) rotate(90deg); }

/* ────────────────── 12. Producto dibujado (nada de fotos) ────────────────── */
.arte { display: block; overflow: visible; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.arte__vidrio { fill: color-mix(in oklab, var(--t1) 26%, transparent); }
.arte__linea  { fill: none; stroke: color-mix(in oklab, var(--t1) 85%, white 10%); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.arte__solido { fill: color-mix(in oklab, var(--t2) 70%, transparent); }
.arte__luz    { fill: rgba(255,255,255,.5); }

/* ───────────────────────── 13. El ancla de precio ───────────────────────── */
.ancla__core { padding: 1.25rem 1.125rem 1rem; }
.ancla__cols { display: flex; align-items: flex-end; gap: .875rem; }
.ancla__col { flex: 1; text-align: center; }
.ancla__vs {
  font-size: .6875rem; font-weight: 640; color: var(--tx4);
  letter-spacing: .1em; text-transform: uppercase; padding-bottom: 3.25rem;
}
.ancla__barra {
  position: relative; height: 5.5rem; width: 100%; max-width: 4.25rem; margin: 0 auto .625rem;
  border-radius: .625rem .625rem .875rem .875rem;
  border: 1px solid var(--pelo-alto);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.ancla__relleno {
  width: 100%; height: 0;
  background: linear-gradient(to top, rgba(181,160,207,.55), rgba(181,160,207,.25));
  transition: height 1.1s var(--sal);
}
.ancla__barra--nuestra .ancla__relleno {
  background: linear-gradient(to top, var(--hielo-2), var(--hielo));
  box-shadow: 0 0 24px -2px rgba(200,181,255,.55);
}
.ancla__liq { position: absolute; inset: 0; display: grid; place-items: center; }
.ancla__vol { font-size: .8125rem; font-weight: 640; letter-spacing: -.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.ancla__quien { font-size: .75rem; color: var(--tx3); }
.ancla__precio { font-family: var(--fd); font-size: 1.1875rem; font-weight: 660;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: .0625rem; }
.ancla__precio--bueno { color: var(--ambar); }   /* champán sobre granate: 9,6:1 */
.ancla__remate { font-size: .875rem; color: var(--tx2); line-height: 1.5;
  margin-top: 1.125rem; padding-top: .9375rem; border-top: 1px solid var(--pelo); }
.ancla__remate b { color: var(--tx); }
.ancla__nota { font-size: .6875rem; color: var(--tx4); margin-top: .5rem; }

/* ───────────────────────── 14. Gancho de CO₂ ───────────────────────── */
.eco-teaser { margin-top: 1.25rem; }
.eco-teaser__core { display: flex; align-items: center; gap: .875rem;
  background: linear-gradient(150deg, rgba(143,217,176,.13), rgba(255,255,255,.015)); }
.eco-teaser__ic { color: var(--verde); flex: none; }
.eco-teaser__num { font-family: var(--fd); font-size: 1.25rem; font-weight: 660;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eco-teaser__txt { font-size: .75rem; color: var(--tx2); margin-top: .0625rem; }
.eco-teaser__ch { margin-left: auto; color: var(--tx3); flex: none; }

.cierre-seccion { margin-top: 2.5rem; text-align: center; }
.cierre-seccion__txt { font-size: .75rem; color: var(--tx3); line-height: 1.7; }
.cierre-seccion__txt--tenue { color: var(--tx4); }

/* ───────────────────────── 15. Filtros y buscador ───────────────────────── */
.filtros {
  display: flex; gap: .4375rem; overflow-x: auto;
  margin: 0 -1.25rem 1.125rem; padding: .125rem 1.25rem;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; padding: .5rem .875rem; border-radius: var(--r-pil);
  border: 1px solid var(--pelo); background: var(--vidrio);
  font-size: .8125rem; font-weight: 520; color: var(--tx2); white-space: nowrap;
  transition: color .22s var(--suave), background .22s var(--suave),
              border-color .22s var(--suave), transform .16s var(--suave);
}
.filtro:active { transform: scale(.95); }
.filtro--on {
  color: #160d29; font-weight: 620;
  background: linear-gradient(150deg, var(--hielo), var(--hielo-2));
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(200,181,255,.6);
}

.buscador {
  position: relative; display: flex; align-items: center; gap: .625rem;
  padding: .6875rem .875rem; margin-bottom: 1rem;
  border-radius: var(--r-pil);
  border: 1px solid var(--pelo); background: var(--vidrio);
  transition: border-color .22s var(--suave), background .22s var(--suave);
}
.buscador:focus-within { border-color: rgba(200,181,255,.36); background: var(--vidrio-alto); }
.buscador__ic { color: var(--tx3); flex: none; }
.buscador__input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: .9375rem; color: var(--tx);
}
.buscador__input::placeholder { color: var(--tx3); }
.buscador__input::-webkit-search-cancel-button { display: none; }
.buscador__limpiar {
  width: 1.375rem; height: 1.375rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--vidrio-alto); color: var(--tx2);
}

/* Las dos píldoras de posicionamiento. Envueltas en flex-wrap porque a 320 px
   la segunda tiene que caer debajo sin desbordar la rejilla. */
.pildoras { display: flex; flex-wrap: wrap; gap: .4375rem; margin-bottom: 1.125rem; }
.sin-alcohol {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .4375rem .75rem;
  border-radius: var(--r-pil);
  border: 1px solid rgba(143,217,176,.22); background: rgba(143,217,176,.08);
  color: var(--verde); font-size: .75rem; font-weight: 550;
}
.sin-alcohol--casa {
  border-color: rgba(224,212,255,.24); background: rgba(224,212,255,.09);
  color: var(--ambar);
}

/* ───────────────────────── 16. Rejilla de catálogo ───────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 30rem) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.grupo-tit {
  grid-column: 1 / -1;
  font-family: var(--fd); font-size: .8125rem; font-weight: 620;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx3);
  margin: 1rem 0 -.125rem;
}
.grupo-tit:first-child { margin-top: 0; }

.card {
  position: relative; overflow: hidden; text-align: left;
  border-radius: var(--r-out); border: 1px solid var(--pelo);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow: var(--brillo);
  transition: transform .18s var(--suave), border-color .22s var(--suave);
  animation: card-entra .42s var(--sal) both;
}
.card:active { transform: scale(.97); border-color: var(--pelo-alto); }
@keyframes card-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.card__luz {
  position: absolute; top: -40%; right: -30%; width: 8rem; height: 8rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--t1) 34%, transparent), transparent 66%);
  filter: blur(22px);
}
.card__arte { position: relative; height: 5.625rem; display: grid; place-items: center; }
.card__cuerpo { position: relative; padding: 0 .75rem .75rem; }
/* Reserva exacta de DOS líneas (2 × line-height 1.3). Con 2.1em, un nombre de dos
   líneas empujaba el precio hacia abajo y la fila de tarjetas quedaba desalineada:
   «Pack Mañana Mejor» rompía la línea de precios de toda su fila. */
.card__nombre { font-size: .8125rem; font-weight: 580; line-height: 1.3; letter-spacing: -.012em;
  min-height: 2.6em; }
.card__pie { display: flex; align-items: center; gap: .375rem; margin-top: .5rem; }
.card__precio { font-family: var(--fd); font-size: .9375rem; font-weight: 640;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.card__add {
  margin-left: auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--t1), var(--t2)); color: #160d29;
  box-shadow: 0 5px 14px -5px color-mix(in oklab, var(--t1) 70%, transparent);
  transition: transform .2s var(--salto);
}
.card:active .card__add { transform: scale(1.14) rotate(90deg); }
.card__n {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; border-radius: var(--r-pil);
  display: grid; place-items: center;
  background: var(--hielo); color: #160d29;
  font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -3px rgba(200,181,255,.6);
  animation: globo-pop .3s var(--salto);
}
@keyframes globo-pop { from { transform: scale(0); } }

.vacio { text-align: center; color: var(--tx3); font-size: .875rem; padding: 3rem 1rem; }

/* ───────────────────────── 17. Ofertas ───────────────────────── */
.lista-ofertas { display: grid; gap: .75rem; }
.oferta {
  position: relative; overflow: hidden; text-align: left; width: 100%;
  border-radius: var(--r-out); border: 1px solid var(--pelo);
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--t1) 12%, transparent), rgba(255,255,255,.015));
  box-shadow: var(--brillo);
  padding: 1rem 1.0625rem;
  animation: card-entra .42s var(--sal) both;
  transition: transform .18s var(--suave);
}
.oferta:active { transform: scale(.982); }
.oferta__luz {
  position: absolute; top: -70%; right: -18%; width: 12rem; height: 12rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--t1) 30%, transparent), transparent 66%);
  filter: blur(30px);
}
.oferta__fila { position: relative; display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; }
.oferta__et {
  font-size: .625rem; font-weight: 680; letter-spacing: .12em; text-transform: uppercase;
  color: #160d29; background: var(--t1); padding: .25rem .5rem; border-radius: .3125rem;
}
.oferta__cuenta {
  margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--t1);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .3125rem;
}
.oferta__tit { position: relative; font-family: var(--fd); font-size: 1.0625rem;
  font-weight: 640; letter-spacing: -.025em; line-height: 1.25; }
.oferta__baj { position: relative; font-size: .8125rem; color: var(--tx2); line-height: 1.5; margin-top: .3125rem; }
.oferta__pie { position: relative; display: flex; align-items: center; gap: .625rem; margin-top: .9375rem; }
.oferta__cta {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .5rem .5rem .5rem .9375rem; border-radius: var(--r-pil);
  background: linear-gradient(150deg, var(--t1), var(--t2)); color: #160d29;
  font-size: .8125rem; font-weight: 640; letter-spacing: -.01em;
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--t1) 80%, transparent);
}
.oferta__cta i {
  width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.16);
  transition: transform .2s var(--salto);
}
.oferta:active .oferta__cta i { transform: translate(2px, -1px) scale(1.08); }
.oferta__ahorro { font-size: .75rem; color: var(--tx3); font-variant-numeric: tabular-nums; }

/* ───────────────────────── 18. Reparto ───────────────────────── */
.mapa-caja {
  position: relative; overflow: hidden;
  border-radius: var(--r-out); border: 1px solid var(--pelo);
  background: linear-gradient(170deg, #281840, #100c1c);
  box-shadow: var(--brillo), 0 20px 50px -30px #000;
  margin-bottom: .875rem;
}
.mapa { display: block; width: 100%; height: auto; }
.mapa__agua { fill: rgba(161,133,240,.09); }   /* el Pisuerga en la gama lavanda del mapa */
.mapa__via  { fill: none; stroke: rgba(246,241,255,.075); stroke-width: 1.4; stroke-linecap: round; }
.mapa__via--gorda { stroke: rgba(246,241,255,.12); stroke-width: 2.4; }
.mapa__ruta { fill: none; stroke: url(#gradRuta); stroke-width: 2.6; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(200,181,255,.55)); }
.mapa__ruta-fondo { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 2.6;
  stroke-linecap: round; stroke-dasharray: 3 6; }
.mapa__destino { fill: none; stroke: var(--ambar); stroke-width: 1.6; }
.mapa__halo { fill: rgba(224,212,255,.16); animation: halo 2.6s ease-out infinite; transform-origin: center; }
@keyframes halo { 0% { opacity: .7; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.6); } }
.mapa__bici {
  filter: drop-shadow(0 0 10px rgba(200,181,255,.85));
  transition: transform .9s linear;
}
.mapa__velo {
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(16,12,28,.92), transparent);
  pointer-events: none;
}
.mapa__pie {
  position: absolute; left: 1rem; right: 1rem; bottom: .875rem;
  display: flex; align-items: center; gap: .5rem;
}
.mapa__eco {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .625rem; border-radius: var(--r-pil);
  background: rgba(143,217,176,.14); border: 1px solid rgba(143,217,176,.24);
  color: var(--verde); font-size: .6875rem; font-weight: 600;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.fases { display: grid; gap: 0; margin: .25rem 0 0; }
.fase { display: flex; gap: .875rem; align-items: flex-start; }
.fase__carril { display: flex; flex-direction: column; align-items: center; flex: none; width: 1.25rem; }
.fase__bola {
  width: .75rem; height: .75rem; border-radius: 50%; flex: none; margin-top: .3125rem;
  border: 1.5px solid var(--tx4); background: var(--n800);
  transition: background .3s var(--suave), border-color .3s var(--suave), box-shadow .3s var(--suave);
}
.fase__hilo { width: 1.5px; flex: 1; min-height: 1.25rem; background: var(--tx4);
  transition: background .5s var(--suave); }
.fase__txt { padding-bottom: 1.125rem; }
.fase__tit { font-size: .875rem; font-weight: 560; color: var(--tx3); letter-spacing: -.01em;
  transition: color .3s var(--suave); }
.fase__det { font-size: .75rem; color: var(--tx4); margin-top: .0625rem; }
.fase--hecha .fase__bola { background: var(--verde); border-color: var(--verde); }
.fase--hecha .fase__hilo { background: color-mix(in oklab, var(--verde) 55%, transparent); }
.fase--hecha .fase__tit { color: var(--tx2); }
.fase--ahora .fase__bola {
  background: var(--hielo); border-color: var(--hielo);
  box-shadow: 0 0 0 .3125rem rgba(200,181,255,.16), 0 0 16px 1px rgba(200,181,255,.7);
  animation: latir 1.8s ease-in-out infinite;
}
.fase--ahora .fase__tit { color: var(--tx); font-weight: 620; }
.fase--ahora .fase__det { color: var(--tx2); }

.eta {
  display: flex; align-items: baseline; gap: .5rem; margin: .25rem 0 1.125rem;
}
.eta__num { font-family: var(--fd); font-size: 2.5rem; font-weight: 680;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1;
  background: linear-gradient(160deg, var(--hielo), var(--neon));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.eta__un { font-size: .9375rem; color: var(--tx2); }
.eta__et { margin-left: auto; font-size: .75rem; color: var(--tx3); }
/* Estado final: la cifra deja paso a la palabra, y desaparece el «min». */
.eta--fin .eta__num { font-size: 1.75rem; letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--verde), var(--hielo));
  -webkit-background-clip: text; background-clip: text; }
.eta--fin .eta__un { display: none; }

.repartidor { display: flex; align-items: center; gap: .75rem; }
.repartidor__av {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--neon), var(--violeta-2));
  font-family: var(--fd); font-weight: 660; font-size: 1rem; color: #fff;
}
.repartidor__n { font-size: .9375rem; font-weight: 580; letter-spacing: -.012em; }
.repartidor__d { font-size: .75rem; color: var(--tx3); display: flex; align-items: center; gap: .3125rem; }
.repartidor__acc { margin-left: auto; display: flex; gap: .5rem; }
.redondo {
  width: 2.375rem; height: 2.375rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--pelo); background: var(--vidrio); color: var(--tx2);
  transition: transform .16s var(--suave), color .2s var(--suave), border-color .2s var(--suave);
}
.redondo:active { transform: scale(.9); color: var(--hielo); border-color: rgba(200,181,255,.35); }

.sin-pedido { text-align: center; padding: 2rem 1rem 1rem; }
.sin-pedido__arte { margin: 0 auto 1.5rem; width: 8rem; opacity: .9; }
.sin-pedido__tit { font-family: var(--fd); font-size: 1.1875rem; font-weight: 640; letter-spacing: -.025em; }
.sin-pedido__txt { font-size: .875rem; color: var(--tx2); margin: .5rem auto 1.5rem; max-width: 17rem; line-height: 1.55; }

/* ───────────────────────── 19. Más ───────────────────────── */
.club {
  position: relative; overflow: hidden;
  border-radius: var(--r-out); border: 1px solid rgba(224,212,255,.2);
  background: linear-gradient(150deg, rgba(224,212,255,.14), rgba(255,255,255,.015));
  box-shadow: var(--brillo), 0 18px 44px -28px #000;
  padding: 1.125rem;
  margin-bottom: 1.5rem;
}
.club__luz { position: absolute; top: -60%; right: -20%; width: 13rem; height: 13rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,212,255,.26), transparent 66%);
  filter: blur(32px); }
.club__fila { position: relative; display: flex; align-items: center; gap: .625rem; }
.club__et { font-size: .625rem; font-weight: 680; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambar); }
.club__tit { position: relative; font-family: var(--fd); font-size: 1.25rem; font-weight: 660;
  letter-spacing: -.03em; margin-top: .3125rem; }
.club__lista { position: relative; list-style: none; padding: 0; margin: .875rem 0 0;
  display: grid; gap: .4375rem; }
.club__lista li { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--tx2); }
.club__lista svg { color: var(--ambar); }

.anillo-caja { display: flex; align-items: center; gap: 1.125rem; }
.anillo { width: 5rem; height: 5rem; flex: none; transform: rotate(-90deg); }
.anillo__base { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 7; }
.anillo__arco { fill: none; stroke: url(#gradPuntos); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--sal); }
.anillo-caja__n { font-family: var(--fd); font-size: 1.625rem; font-weight: 680;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.anillo-caja__t { font-size: .8125rem; color: var(--tx2); line-height: 1.45; margin-top: .1875rem; }

/* Contador de CO₂: es el argumento de sostenibilidad, así que ocupa lo que merece */
.co2 {
  position: relative; overflow: hidden;
  border-radius: var(--r-out); border: 1px solid rgba(143,217,176,.2);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(143,217,176,.18), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow: var(--brillo), 0 18px 44px -28px #000;
  padding: 1.25rem 1.125rem 1.125rem;
}
.co2__et { display: flex; align-items: center; gap: .4375rem; color: var(--verde);
  font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; }
.co2__cifra { display: flex; align-items: baseline; gap: .4375rem; margin-top: .625rem; }
.co2__n {
  font-family: var(--fd); font-size: 3.25rem; font-weight: 700; line-height: .92;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, #fff 10%, var(--verde) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.co2__u { font-size: 1.125rem; font-weight: 580; color: var(--tx2); letter-spacing: -.02em; }
.co2__sub { font-size: .8125rem; color: var(--tx2); margin-top: .4375rem; line-height: 1.5; }

.co2__equiv { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.125rem; }
.equiv {
  border-radius: .875rem; border: 1px solid var(--pelo);
  background: rgba(255,255,255,.03); padding: .75rem .8125rem;
}
.equiv__n { font-family: var(--fd); font-size: 1.125rem; font-weight: 660;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.equiv__t { font-size: .6875rem; color: var(--tx3); margin-top: .125rem; line-height: 1.4; }

.co2__barra {
  position: relative; height: .375rem; border-radius: var(--r-pil);
  background: rgba(255,255,255,.07); overflow: hidden; margin-top: 1.125rem;
}
.co2__barra i { position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--verde-2), var(--verde));
  box-shadow: 0 0 14px rgba(143,217,176,.6);
  transition: width 1.4s var(--sal); }
.co2__pie { display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .6875rem; color: var(--tx3); }
.co2__metodo {
  display: flex; align-items: center; gap: .375rem; margin-top: .9375rem;
  padding-top: .875rem; border-top: 1px solid var(--pelo);
  font-size: .6875rem; color: var(--tx4); text-align: left; width: 100%;
}
.co2__metodo span { text-decoration: underline; text-underline-offset: 2px; }

.lista { display: grid; gap: .0625rem; border-radius: var(--r-out); overflow: hidden;
  border: 1px solid var(--pelo); background: var(--pelo); }
.item {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  padding: .9375rem 1rem; background: #191125;
  transition: background .18s var(--suave);
}
.item:active { background: #271c3b; }
.item__ic { color: var(--tx3); flex: none; }
.item__tx { flex: 1; min-width: 0; }
.item__t { font-size: .9375rem; font-weight: 520; letter-spacing: -.012em; }
.item__d { font-size: .75rem; color: var(--tx3); margin-top: .0625rem; }
.item__v { font-size: .8125rem; color: var(--tx3); font-variant-numeric: tabular-nums; flex: none; }
.item__ch { color: var(--tx4); flex: none; }

/* Interruptor */
.sw {
  position: relative; width: 3rem; height: 1.75rem; border-radius: var(--r-pil); flex: none;
  background: rgba(255,255,255,.1); border: 1px solid var(--pelo);
  transition: background .28s var(--sal), border-color .28s var(--sal);
}
.sw i {
  position: absolute; top: 2px; left: 2px; width: 1.375rem; height: 1.375rem;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .36s var(--sal);
}
.sw--on { background: linear-gradient(150deg, var(--verde), var(--verde-2)); border-color: transparent; }
.sw--on i { transform: translateX(1.1875rem); }

/* ───────────────────────── 20. Barra de carrito ───────────────────────── */
.barra-carro {
  position: absolute; z-index: 35;
  left: 1rem; right: 1rem;
  bottom: calc(var(--h-tab) + var(--seg-ab) + .625rem);
  display: flex; align-items: center; gap: .625rem;
  padding: .6875rem .875rem .6875rem .6875rem;
  border-radius: var(--r-pil);
  /* Burdeos vivo con texto BLANCO (4,67:1). En granate el texto oscuro se
     hunde: es justo el error que la paleta azul no tenía y esta sí puede tener. */
  background: linear-gradient(150deg, var(--burdeos-vivo), var(--burdeos));
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(96,48,170,.85), inset 0 1px 0 rgba(255,255,255,.28);
  animation: carro-entra .4s var(--salto) both;
  transition: transform .16s var(--suave);
}
.barra-carro:active { transform: scale(.98); }
.barra-carro[hidden] { display: none; }
@keyframes carro-entra { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.barra-carro__n {
  min-width: 1.75rem; height: 1.75rem; padding: 0 .4375rem; border-radius: var(--r-pil);
  display: grid; place-items: center; background: rgba(0,0,0,.18);
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.barra-carro__txt { font-size: .9375rem; font-weight: 640; letter-spacing: -.015em; }
.barra-carro__total { margin-left: auto; font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ───────────────────────── 21. Barra de pestañas ───────────────────────── */
.tabbar {
  position: absolute; z-index: 40; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: var(--seg-ab);
  background: rgba(21,16,32, .72);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.07);
}
.tabbar::before {  /* la luz que engancha el borde superior del material */
  content: ''; position: absolute; left: 0; right: 0; top: -2.25rem; height: 2.25rem;
  background: linear-gradient(to top, rgba(16,12,28,.85), transparent);
  pointer-events: none;
}
.tab {
  height: var(--h-tab); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1875rem;
  color: var(--tx3);
  transition: color .24s var(--suave);
}
.tab__ico { position: relative; display: block; transition: transform .34s var(--salto); }
.tab__et { font-size: .625rem; font-weight: 560; letter-spacing: .005em; }
.tab--on { color: var(--hielo); }
.tab--on .tab__ico { transform: translateY(-1px) scale(1.06); }
.tab--on .tab__ico::after {
  content: ''; position: absolute; inset: -.5rem;
  background: radial-gradient(circle, rgba(200,181,255,.3), transparent 66%);
  filter: blur(7px); z-index: -1;
}
.tab:active .tab__ico { transform: scale(.88); }
.tab__globo {
  position: absolute; top: -.3125rem; right: -.5rem;
  min-width: 1.0625rem; height: 1.0625rem; padding: 0 .25rem; border-radius: var(--r-pil);
  display: grid; place-items: center;
  background: var(--hielo); color: #160d29;
  font-size: .625rem; font-weight: 700; font-variant-numeric: tabular-nums;
  animation: globo-pop .3s var(--salto);
}
.tab__pulso {
  position: absolute; top: -.125rem; right: -.25rem;
  width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 8px 1px rgba(143,217,176,.9);
  animation: latir 1.6s ease-in-out infinite;
}

/* ───────────────────────── 22. Hojas inferiores ───────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10,7,18, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .34s var(--sal);
}
.velo--on { opacity: 1; }
.velo[hidden] { display: none; }

.hojas { position: fixed; inset: 0; z-index: 100; pointer-events: none; }

.hoja {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  pointer-events: auto;
  border-radius: 1.75rem 1.75rem 0 0;
  background: linear-gradient(180deg, #2c2042, #1b142b 40%);
  border-top: 1px solid var(--pelo-alto);
  box-shadow: 0 -24px 60px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.hoja__agarre {
  flex: none; padding: .6875rem 0 .375rem; display: grid; place-items: center;
  cursor: grab; touch-action: none;
}
.hoja__agarre::before {
  content: ''; width: 2.25rem; height: .25rem; border-radius: var(--r-pil);
  background: rgba(255,255,255,.22);
}
.hoja__cab { flex: none; padding: .25rem 1.25rem .875rem; }
.hoja__tit { font-family: var(--fd); font-size: 1.3125rem; font-weight: 660; letter-spacing: -.032em; }
.hoja__sub { font-size: .8125rem; color: var(--tx2); margin-top: .25rem; line-height: 1.5; }
.hoja__cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 1.25rem; scrollbar-width: none;
}
.hoja__cuerpo::-webkit-scrollbar { display: none; }
.hoja__pie {
  flex: none; padding: .875rem 1.25rem calc(1.25rem + var(--seg-ab));
  background: linear-gradient(to top, #1b142b 62%, transparent);
}
.hoja__x {
  position: absolute; top: .875rem; right: 1rem; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--vidrio-alto); color: var(--tx2);
}

/* Botones */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .9375rem 1.125rem; border-radius: var(--r-pil);
  font-size: .9375rem; font-weight: 640; letter-spacing: -.015em;
  transition: transform .16s var(--suave), opacity .2s var(--suave);
}
.btn:active { transform: scale(.975); }
.btn--pri {
  background: linear-gradient(150deg, var(--burdeos-vivo), var(--burdeos)); color: #fff;
  box-shadow: 0 12px 30px -12px rgba(96,48,170,.9), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--sec { background: var(--vidrio-alto); color: var(--tx); border: 1px solid var(--pelo); }
.btn--oro {
  background: linear-gradient(150deg, var(--ambar), var(--ambar-2)); color: #211235;
  box-shadow: 0 12px 30px -12px rgba(182,155,234,.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn__t { font-variant-numeric: tabular-nums; }
.btn i { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.16); }

/* Contenido de hoja: producto */
.det__arte {
  height: 9.5rem; display: grid; place-items: center; position: relative;
  margin-bottom: .25rem;
}
.det__luz { position: absolute; width: 13rem; height: 13rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--t1) 34%, transparent), transparent 66%);
  filter: blur(34px); }
.det__desc { font-size: .9375rem; color: var(--tx2); line-height: 1.55; }
.det__cont { list-style: none; padding: 0; margin: 1.125rem 0 0; display: grid; gap: .5rem; }
.det__cont li { display: flex; align-items: center; gap: .625rem; font-size: .875rem; color: var(--tx2); }
.det__cont svg { color: var(--t1); flex: none; }
.det__nota { font-size: .75rem; color: var(--tx4); margin-top: 1.125rem;
  padding-top: .875rem; border-top: 1px solid var(--pelo); }

.paso { display: flex; align-items: center; gap: .125rem;
  border-radius: var(--r-pil); border: 1px solid var(--pelo); background: var(--vidrio); padding: .1875rem; }
.paso__b { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--tx); transition: background .18s var(--suave), transform .14s var(--suave); }
.paso__b:active { background: var(--vidrio-alto); transform: scale(.9); }
.paso__b[disabled] { opacity: .3; pointer-events: none; }
.paso__n { min-width: 2rem; text-align: center; font-size: .9375rem; font-weight: 640;
  font-variant-numeric: tabular-nums; }

/* Contenido de hoja: carrito */
.linea { display: flex; align-items: center; gap: .75rem; padding: .75rem 0;
  border-bottom: 1px solid var(--pelo); }
.linea:last-of-type { border-bottom: 0; }
.linea__arte { width: 3rem; height: 3rem; flex: none; border-radius: .875rem;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in oklab, var(--t1) 20%, transparent), rgba(255,255,255,.02));
  border: 1px solid var(--pelo); }
.linea__tx { flex: 1; min-width: 0; }
.linea__n { font-size: .875rem; font-weight: 560; letter-spacing: -.012em; }
.linea__p { font-size: .75rem; color: var(--tx3); font-variant-numeric: tabular-nums; margin-top: .0625rem; }
.linea__paso { flex: none; transform: scale(.86); transform-origin: right center; }

.progreso { margin: 1.125rem 0 .25rem; }
.progreso__tx { font-size: .8125rem; color: var(--tx2); margin-bottom: .5rem; }
.progreso__tx b { color: var(--hielo); }
.progreso__b { height: .3125rem; border-radius: var(--r-pil); background: rgba(255,255,255,.08); overflow: hidden; }
.progreso__b i { display: block; height: 100%; width: 0; border-radius: var(--r-pil);
  background: linear-gradient(90deg, var(--hielo-2), var(--hielo));
  box-shadow: 0 0 12px rgba(200,181,255,.55);
  transition: width .5s var(--sal); }

.cuentas { display: grid; gap: .5rem; margin: 1.25rem 0 .25rem;
  padding-top: 1rem; border-top: 1px solid var(--pelo); }
.cuenta { display: flex; justify-content: space-between; font-size: .875rem; color: var(--tx2); }
.cuenta b { color: var(--tx); font-variant-numeric: tabular-nums; }
.cuenta--gratis b { color: var(--verde); }
.cuenta--total { font-size: 1.0625rem; color: var(--tx); font-weight: 620;
  padding-top: .625rem; border-top: 1px solid var(--pelo); letter-spacing: -.02em; }
.cuenta--total b { font-family: var(--fd); font-size: 1.25rem; font-weight: 680; letter-spacing: -.035em; }

.aviso-min {
  display: flex; align-items: center; gap: .5rem; margin-top: .75rem;
  padding: .625rem .75rem; border-radius: .875rem;
  background: rgba(255,143,138,.1); border: 1px solid rgba(255,143,138,.22);
  color: var(--rojo); font-size: .75rem; line-height: 1.45;
}

/* Chat */
.chat { display: grid; gap: .5rem; padding: .25rem 0 1rem; }
.burbuja { max-width: 78%; padding: .625rem .8125rem; border-radius: 1.125rem;
  font-size: .875rem; line-height: 1.45;
  animation: burbuja-entra .32s var(--sal) both; }
@keyframes burbuja-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.burbuja--el { align-self: flex-start; justify-self: start;
  background: var(--vidrio-alto); border-bottom-left-radius: .375rem; color: var(--tx); }
.burbuja--yo { align-self: flex-end; justify-self: end;
  background: linear-gradient(150deg, var(--hielo), var(--hielo-2)); color: #160d29;
  border-bottom-right-radius: .375rem; font-weight: 520; }
.rapidas { display: flex; gap: .4375rem; overflow-x: auto; padding: .25rem 0 .125rem;
  margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; scrollbar-width: none; }
.rapidas::-webkit-scrollbar { display: none; }

/* Confirmación */
.exito { text-align: center; padding: 1rem 0 .5rem; }
.exito__c {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--verde), var(--verde-2)); color: #0d2a1c;
  box-shadow: 0 0 0 .625rem rgba(143,217,176,.1), 0 16px 40px -14px rgba(143,217,176,.6);
  animation: exito-pop .5s var(--salto) both;
}
@keyframes exito-pop { from { transform: scale(0) rotate(-40deg); } }
.exito__c .ic { stroke-width: 2.4; width: 2rem; height: 2rem;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: trazo .45s var(--sal) .22s forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ───────────────────────── 23. Avisos ───────────────────────── */
.tostadas {
  position: fixed; z-index: 150; left: 0; right: 0;
  bottom: calc(var(--h-tab) + var(--seg-ab) + 4.25rem);
  display: grid; justify-items: center; gap: .5rem; pointer-events: none;
  padding: 0 1rem;
}
.tostada {
  display: flex; align-items: center; gap: .5rem;
  max-width: 100%;
  padding: .6875rem .9375rem; border-radius: var(--r-pil);
  background: rgba(48,36,68, .92);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--pelo-alto);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.9);
  font-size: .8125rem; font-weight: 520; letter-spacing: -.01em;
  animation: tostada-in .38s var(--salto) both;
}
.tostada--fuera { animation: tostada-out .26s var(--suave) both; }
.tostada svg { color: var(--hielo); flex: none; }
@keyframes tostada-in  { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes tostada-out { to   { opacity: 0; transform: translateY(8px) scale(.94); } }

/* ───────────────────────── 24. Tonos ───────────────────────── */
/* Seis familias que siguen distinguiendo categorías, pero todas viven ya en el
   mundo del burdeos: el hielo sigue siendo frío —es hielo—, solo que frío
   DENTRO de esta paleta. Los dos extremos de cada degradado pasan AA (≥4,5:1)
   con --tinta encima; el original no lo cumplía en violeta ni en oscuro. */
.t-hielo   { --t1: var(--hielo);   --t2: var(--hielo-2); }
.t-neon    { --t1: var(--neon);    --t2: var(--neon-2); }
.t-violeta { --t1: var(--violeta); --t2: var(--violeta-2); }
.t-ambar   { --t1: var(--ambar);   --t2: var(--ambar-2); }
.t-verde   { --t1: var(--verde);   --t2: var(--verde-2); }
.t-oscuro  { --t1: #d1c1ee;        --t2: #a38dc7; }

/* ───────────────── 25. Accesibilidad y preferencias del sistema ───────────────── */

/* Movimiento reducido: se conserva el cambio de opacidad, que informa;
   se van el deslizamiento, el rebote y todo lo que mueva el oído interno. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .1ms !important;
    scroll-behavior: auto !important;
  }
  .pantalla--entra-dcha .pantalla__scroll,
  .pantalla--entra-izda .pantalla__scroll { animation: aparecer .18s ease both; }
  @keyframes aparecer { from { opacity: 0; } }
  .arranque { animation: none; display: none; }
  .mapa__bici { transition: none; }
  .fondo__orbe { filter: blur(70px); }
}

/* Menos transparencia: los materiales se vuelven sólidos */
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .barra-sup__fila, .tostada {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .tabbar, .barra-sup__fila { background: #151020; }
  .tostada { background: #35274e; }
  .velo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,7,18,.85); }
}

/* Más contraste: fondos casi sólidos y bordes definidos */
@media (prefers-contrast: more) {
  :root {
    --tx2: rgba(246,241,255,.86);
    --tx3: rgba(246,241,255,.68);
    /* Texto de alto contraste sobre las superficies violeta. */
    --tx4: rgba(246,241,255,.78);
    /* El acento se oscurece para aumentar el contraste del texto blanco. */
    --burdeos-vivo: #6030aa;
    --burdeos-alto: #6030aa;
    --pelo: rgba(255,255,255,.28);
    --pelo-alto: rgba(255,255,255,.4);
    --vidrio: rgba(255,255,255,.1);
  }
  .fondo__orbe { opacity: .2; }
  .titulo-grande, .co2__n, .eta__num { background: none; color: var(--tx); -webkit-text-fill-color: var(--tx); }
}


/* ═══════════════ 26. Pantallas grandes: el escenario ═══════════════
   Regla de oro: POR DEBAJO DE 640 px NO SE TOCA NADA. El móvil ya está bien y
   es donde se decide el producto.

   · < 640 px   móvil, intacto.
   · 640–1024   la columna se ensancha y se centra, sin marco.
   · ≥ 1024 px  escenario: el argumento a la izquierda y un marco de móvil real
                a la derecha, escalado para usar la altura disponible.

   Por qué no se hace un escritorio de verdad: Veat es una app de móvil.
   Rehacer cinco pantallas para un ancho que ningún cliente va a usar es trabajo
   tirado. Un escenario bien hecho parece deliberado, usa la pantalla entera y
   convierte el portátil de quien presente en una diapositiva viva.
   ═══════════════════════════════════════════════════════════════════ */

/* Tramo medio: tablet en vertical y ventanas estrechas de portátil. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  body { background: #0b0813; }
  .app {
    width: 30rem; max-width: 100%;
    left: 50%; transform: translateX(-50%);
    border-left: 1px solid rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.05);
    overflow: hidden;
  }
}

/* Oculto por defecto: en móvil el escenario no existe ni pesa. */
.escena { display: none; }

@media (min-width: 64rem) {
  :root {
    /* Medida lógica del teléfono que se finge. 390 × 812 es un iPhone real.
       Inventarse una pantalla más alta haría que el escalado saliera mejor en
       el papel y peor en la mano de quien luego abra la demo en su móvil. */
    --tel-an: 390px;
    --tel-al: 812px;
    /* Lo escribe medirEscena() en app.js: CSS no sabe dividir una longitud
       entre otra, así que el factor de escala tiene que venir de fuera. */
    --esc-k: 1;
    /* El navegador de escritorio no tiene muesca ni barra de gestos, así que
       env(safe-area-inset-*) vale 0. Dentro del marco sí hacen falta. */
    --seg-ar: 30px;
    --seg-ab: 10px;
  }

  html, body { height: 100%; }
  body {
    background:
      radial-gradient(100% 70% at 20% 0%, #2b1948 0%, transparent 58%),
      radial-gradient(80% 65% at 95% 100%, #271c3b 0%, transparent 60%),
      #0b0813;
    /* Fila flexible. .fondo, .grano y .arranque son position:fixed, y un hijo
       posicionado en absoluto NO participa en el flex: no se cuelan en la fila. */
    display: flex; align-items: center; justify-content: center;
    gap: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
  }
  .fondo { opacity: .5; }

  /* ── El argumento ── */
  .escena { display: block; flex: none; width: min(34rem, 40vw); }
  .escena__marca { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.75rem; }
  .escena__tit {
    font-family: var(--fd);
    font-size: clamp(2rem, 3.3vw, 3rem);
    font-weight: 680; line-height: 1.05; letter-spacing: -.04em;
    background: linear-gradient(170deg, #fff 6%, rgba(246,241,255,.66) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .escena__baja {
    margin-top: 1.125rem; max-width: 27rem;
    font-size: 1rem; line-height: 1.55; color: var(--tx2);
  }
  .escena__lista { margin-top: 1.5rem; display: grid; gap: .625rem; list-style: none; }
  .escena__lista li {
    display: flex; align-items: flex-start; gap: .625rem;
    font-size: .9375rem; line-height: 1.45; color: var(--tx2);
  }
  .escena__pt {
    flex: none; width: .4375rem; height: .4375rem; margin-top: .5rem;
    border-radius: 50%; background: var(--ambar);
  }
  .escena__pie {
    margin-top: 2rem; padding-top: 1.125rem;
    border-top: 1px solid var(--pelo);
    font-size: .8125rem; line-height: 1.6; color: var(--tx3);
  }

  /* ── El marco ──
     La caja mide el teléfono a tamaño lógico y se escala ENTERA. Así el interior
     sigue creyendo que vive en 390 px: ni el layout ni las media queries de
     dentro se enteran de nada, y no hay que rehacer una sola pantalla.
     El transform la saca visualmente de su caja, pero el hueco que reserva el
     flex sigue siendo 390 × 812; por eso el body lleva overflow:hidden, para
     que en ventanas bajas se recorte el hueco vacío y no el teléfono. */
  .app {
    position: relative; inset: auto; flex: none;
    width: var(--tel-an); height: var(--tel-al);
    transform: scale(var(--esc-k)); transform-origin: center center;
    border-radius: 2.75rem;
    border: 1px solid rgba(255,255,255,.1);
    overflow: hidden;
    /* El .fondo de la app es fixed y queda FUERA del marco, así que el teléfono
       necesita su propio ambiente o se vería el escritorio por debajo. */
    background: radial-gradient(120% 80% at 50% 0%, #2b1948 0%, var(--n900) 58%);
    box-shadow:
      0 0 0 11px #110d1b,
      0 0 0 12px rgba(255,255,255,.075),
      0 60px 120px -40px rgba(0,0,0,.9),
      0 0 150px -45px rgba(114,64,201,.6);
  }
  /* Muesca. Dibujada, no fotografiada: cero imágenes en toda la demo. */
  .app::after {
    content: ''; position: absolute; z-index: 300; top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 29px; border-radius: 999px;
    background: #000; pointer-events: none;
  }

  /* Estas tres viven dentro del marco. Eran fixed (= ventana); dentro de un
     ancestro con transform, fixed ya se resuelve contra .app, pero se fijan a
     absolute para dejarlo dicho y no depender de ese matiz. */
  .velo, .hojas, .tostadas { position: absolute; }
  /* 88dvh se refiere a la VENTANA, no al teléfono: la hoja se salía por arriba. */
  .hoja { max-height: 88%; }
}

/* Ventana ancha pero baja (un 1366×768 con barra de marcadores): el escalado ya
   lo resuelve medirEscena(), lo que se aprieta es el texto de al lado. */
@media (min-width: 64rem) and (max-height: 46rem) {
  .escena__baja { display: none; }
  .escena__pie { margin-top: 1.5rem; }
}

/* Funciones Veat: caben en la misma jerarquía visual del carrito y del inicio. */
#ultimoPedido { margin: .125rem 0 1rem; }
#ultimoPedido .item {
  border: 1px solid var(--pelo); border-radius: var(--r-out);
  background: linear-gradient(135deg, rgba(128,80,204,.14), #191125 72%);
}
.hoja__pie .btn + .btn { margin-top: .5rem; }
.programacion { display: grid; gap: .375rem; margin: 1.125rem 0 .5rem; }
.programacion__et { font-size: .8125rem; color: var(--tx2); font-weight: 600; }
.programacion__select {
  width: 100%; padding: .8rem .9rem; border-radius: .875rem;
  border: 1px solid var(--pelo); background: #1b142b; color: var(--tx);
  font: inherit; font-size: .875rem;
}
.programacion__select:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.programacion__nota, .grupo__nota { font-size: .6875rem; color: var(--tx4); line-height: 1.45; }
.btn--grupo { margin-top: .5rem; }
.grupo__nota { margin: .5rem .25rem 0; text-align: center; }
.progreso { display: flex; align-items: center; gap: .625rem; }
.progreso__mascota { width: 2.75rem; height: 2.4rem; flex: none; }
.progreso__cuerpo { flex: 1; min-width: 0; }
.progreso--celebra .progreso__mascota { animation: mascota-salta .48s cubic-bezier(.2,.8,.25,1.25); }
@keyframes mascota-salta {
  0%, 100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(-8px) rotate(-4deg); }
  72% { transform: translateY(1px) rotate(2deg); }
}
.carrito-vacio { display: grid; justify-items: center; gap: .5rem; padding: 1.25rem .5rem; text-align: center; }
.carrito-vacio__mascota, .pedido-programado__mascota { width: 7rem; height: 6.1rem; opacity: .9; }
.carrito-vacio p { max-width: 15rem; color: var(--tx2); font-size: .875rem; line-height: 1.5; }
.pedido-programado { display: grid; justify-items: center; }
.pedido-programado__mascota { margin: 0 auto 1rem; }