/* ═══════════════════════════════════════════════════════════════════════════
   Refresh · sistema visual
   Noche fría: negro azulado, luz de neón urbano, verdes y cianes de bebida
   helada. Densidad de app real, no de web. Todo mide en rem para que respete
   el tamaño de letra del sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. Fichas ───────────────────────────── */
:root {
  /* Fondos: casi OLED, siempre con una gota de azul dentro */
  --n900: #04070d;
  --n850: #060a12;
  --n800: #080d17;
  --n700: #0d1421;
  --n600: #141d2e;
  --n500: #1d283c;

  /* Luz */
  --hielo:   #7df9e6;
  --hielo-2: #2fb8d8;
  --neon:    #5aa9ff;
  --neon-2:  #2c5bff;
  --violeta: #a87cff;
  --violeta-2:#6d3bf5;
  --verde:   #5ceba4;
  --verde-2: #18a97a;
  --ambar:   #ffd08a;
  --ambar-2: #f0913a;
  --rojo:    #ff7a7a;

  /* Texto */
  --tx:   #e9f1fb;
  --tx2:  rgba(233, 241, 251, .64);
  --tx3:  rgba(233, 241, 251, .38);
  --tx4:  rgba(233, 241, 251, .22);

  /* 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%, #0a1526 0%, var(--n900) 58%);
}
.fondo__orbe {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.fondo__orbe--hielo  { width: 62vw; height: 62vw; top: -14vw; left: -20vw;
  background: radial-gradient(circle, rgba(125,249,230,.24), transparent 68%); }
.fondo__orbe--neon   { width: 78vw; height: 78vw; top: 26vh; right: -36vw;
  background: radial-gradient(circle, rgba(90,169,255,.20), transparent 68%); }
.fondo__orbe--violeta{ width: 70vw; height: 70vw; bottom: -22vh; left: -18vw;
  background: radial-gradient(circle, rgba(168,124,255,.17), 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 ───────────────────────────── */
.arranque {
  position: fixed; inset: 0; z-index: 200;
  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; }
.arranque__punto {
  width: .625rem; height: .625rem; border-radius: 50%;
  background: var(--hielo);
  box-shadow: 0 0 18px 2px rgba(125,249,230,.85);
  animation: latir 1.6s ease-in-out infinite;
}
.arranque__texto {
  font-family: var(--fd); font-size: 2rem; font-weight: 640;
  letter-spacing: -.045em; line-height: 1;
}
.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); } }
@keyframes arranque-fuera { to { opacity: 0; visibility: hidden; } }
@keyframes latir { 50% { transform: scale(1.35); box-shadow: 0 0 26px 4px rgba(125,249,230,.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(6,10,18,.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(8, 13, 23, .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-punto {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--hielo); box-shadow: 0 0 12px 1px rgba(125,249,230,.8);
  animation: latir 2.4s ease-in-out infinite;
}
.marca-texto {
  font-family: var(--fd); font-size: 1.1875rem; font-weight: 640;
  letter-spacing: -.045em;
}
.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(125,249,230,.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(233,241,251,.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(92,235,164,.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(90,169,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(92,235,164,.5);
  animation: faro 2.4s ease-out infinite;
}
.estado--cerrado .estado__luz { background: var(--neon); animation: none; opacity: .75; }
@keyframes faro {
  0%   { box-shadow: 0 0 0 0 rgba(92,235,164,.45), 0 0 14px 1px rgba(92,235,164,.8); }
  70%  { box-shadow: 0 0 0 .75rem rgba(92,235,164,0), 0 0 14px 1px rgba(92,235,164,.8); }
  100% { box-shadow: 0 0 0 0 rgba(92,235,164,0), 0 0 14px 1px rgba(92,235,164,.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: #04121a;
  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(120,140,170,.55), rgba(120,140,170,.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(125,249,230,.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(--hielo); }
.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(92,235,164,.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: #04121a; font-weight: 620;
  background: linear-gradient(150deg, var(--hielo), var(--hielo-2));
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(125,249,230,.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(125,249,230,.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);
}

.sin-alcohol {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .4375rem .75rem; margin-bottom: 1.125rem;
  border-radius: var(--r-pil);
  border: 1px solid rgba(92,235,164,.22); background: rgba(92,235,164,.08);
  color: var(--verde); font-size: .75rem; font-weight: 550;
}

/* ───────────────────────── 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: #04121a;
  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: #04121a;
  font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -3px rgba(125,249,230,.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: #04121a; 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: #04121a;
  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, #071120, #04070d);
  box-shadow: var(--brillo), 0 20px 50px -30px #000;
  margin-bottom: .875rem;
}
.mapa { display: block; width: 100%; height: auto; }
.mapa__agua { fill: rgba(90,169,255,.10); }
.mapa__via  { fill: none; stroke: rgba(233,241,251,.075); stroke-width: 1.4; stroke-linecap: round; }
.mapa__via--gorda { stroke: rgba(233,241,251,.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(125,249,230,.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(--hielo); stroke-width: 1.6; }
.mapa__halo { fill: rgba(125,249,230,.14); 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(125,249,230,.85));
  transition: transform .9s linear;
}
.mapa__velo {
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(4,7,13,.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(92,235,164,.14); border: 1px solid rgba(92,235,164,.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(125,249,230,.16), 0 0 16px 1px rgba(125,249,230,.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(125,249,230,.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(255,208,138,.2);
  background: linear-gradient(150deg, rgba(255,208,138,.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(255,208,138,.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(92,235,164,.2);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(92,235,164,.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(92,235,164,.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: #0a1019;
  transition: background .18s var(--suave);
}
.item:active { background: #0e1624; }
.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);
  background: linear-gradient(150deg, var(--hielo), var(--hielo-2));
  color: #04121a;
  box-shadow: 0 14px 34px -12px rgba(47,184,216,.7), inset 0 1px 0 rgba(255,255,255,.4);
  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(6, 10, 18, .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(4,7,13,.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(125,249,230,.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: #04121a;
  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(92,235,164,.9);
  animation: latir 1.6s ease-in-out infinite;
}

/* ───────────────────────── 22. Hojas inferiores ───────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2, 4, 8, .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, #0f1725, #080d16 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, #080d16 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(--hielo), var(--hielo-2)); color: #04121a;
  box-shadow: 0 12px 30px -12px rgba(47,184,216,.8), inset 0 1px 0 rgba(255,255,255,.4);
}
.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: #1c1003;
  box-shadow: 0 12px 30px -12px rgba(240,145,58,.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(125,249,230,.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,122,122,.1); border: 1px solid rgba(255,122,122,.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: #04121a;
  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: #032013;
  box-shadow: 0 0 0 .625rem rgba(92,235,164,.1), 0 16px 40px -14px rgba(92,235,164,.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(20, 29, 46, .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 ───────────────────────── */
.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: #7e90ad;        --t2: #2b3648; }

/* ───────────────── 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: #070c15; }
  .tostada { background: #182236; }
  .velo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,4,8,.85); }
}

/* Más contraste: fondos casi sólidos y bordes definidos */
@media (prefers-contrast: more) {
  :root {
    --tx2: rgba(233,241,251,.86);
    --tx3: rgba(233,241,251,.68);
    --tx4: rgba(233,241,251,.5);
    --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); }
}

/* Pantallas grandes: la app se queda en su anchura, centrada.
   Es una app de móvil; en un portátil se enseña, no se estira. */
@media (min-width: 34rem) {
  body { background: #010306; }
  .app {
    width: 26rem; 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;
  }
  .velo, .hojas { width: 26rem; max-width: 100%; left: 50%; transform: translateX(-50%); }
  .tostadas { width: 26rem; max-width: 100%; left: 50%; transform: translateX(-50%); }
}