/* ============================================================================
   Bivel — Web
   Composición de la web sobre las primitivas de base.css. Ningún color, tamaño
   ni duración se escribe a mano aquí: todo sale de tokens.css.
   ========================================================================== */

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

.link{
  color:var(--text-link);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--dur-fast) var(--ease-standard);
}
.link:hover{color:var(--text-link-hover)}

/* ============================================================================
   Cabecera
   ========================================================================== */

.site-head{
  position:fixed;top:var(--space-4);left:0;right:0;z-index:50;
  padding-inline:var(--gutter-page);
  transition:top var(--dur-base) var(--ease-standard);
}
.site-head__bar{
  display:flex;align-items:center;gap:var(--space-5);
  max-width:var(--width-page-max);margin-inline:auto;
  padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius:var(--radius-pill);
  transition:background-image var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.site-head.is-stuck .site-head__bar{
  background-image:var(--glass-fill-raised);
  border-color:var(--glass-border-strong);
}

.site-head__mark{display:flex;align-items:center;padding-block:var(--space-2)}
.site-head__mark img{width:74px;height:auto}

.site-nav{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.site-nav a{
  font:var(--fw-medium) var(--fs-label)/1 var(--font-body);
  color:var(--text-secondary);padding-block:var(--space-2);
  transition:color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover,.site-nav a.is-active{color:var(--cream-050)}

.site-head__cta{flex:none}

/* Botón de menú: dos trazos que se cruzan. */
.site-head__toggle{
  display:none;width:var(--size-control);height:var(--size-control);
  margin-left:auto;border-radius:var(--radius-pill);
  position:relative;flex:none;
}
.site-head__toggle span{
  position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;
  background:var(--cream-100);
  transition:transform var(--dur-base) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.site-head__toggle span:first-child{top:20px}
.site-head__toggle span:last-child{top:27px}
.site-head__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.site-head__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.site-menu[hidden]{display:none}
.site-menu{
  display:grid;gap:var(--space-1);
  max-width:var(--width-page-max);margin:var(--space-2) auto 0;
  padding:var(--space-4);border-radius:var(--radius-xl);
}
/* Solo los enlaces de navegación: el botón del final es un .btn y con su propio
   color, forma y peso. Sin el :not(.btn), esta regla le ganaba por especificidad
   y el botón salía crema sobre crema, sin texto (visto en un iPhone el 8 sep). */
.site-menu a:not(.btn){
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font:var(--fw-medium) var(--fs-body-lg)/1.2 var(--font-body);
  color:var(--text-secondary);
}
.site-menu a:not(.btn):hover{color:var(--cream-050);background:var(--surface-control)}
.site-menu .btn{margin-top:var(--space-3)}

@media (max-width:900px){
  .site-nav,.site-head__cta{display:none}
  .site-head__toggle{display:block}
}

/* ============================================================================
   Hero
   ========================================================================== */

/* --foto y --foto-eje viven aquí y no en .hero__device: el alto del propio hero
   se calcula a partir del ancho de la foto, y una custom property solo baja. */
.hero{
  position:relative;padding-top:calc(var(--space-12) + var(--space-10));
  padding-bottom:0;overflow:hidden;
  --foto:min(600px,76vw,max(280px,calc((100svh - 30rem) * 1.32)));
  /* El móvil no está en el centro del recorte: el antebrazo entra por abajo a la
     izquierda y equilibra el encuadre, así que el sujeto queda escorado. Medido
     sobre el PNG, en las filas que no tapan los dedos el marco va de x 256 a 632
     de 720: centro 444, no 360 — un 11,7% a la derecha. Centrar el <img> deja el
     móvil descentrado respecto a la copy, y se nota. Esto lo devuelve al eje. */
  --foto-eje:calc(var(--foto) * -.117);
}
@media (min-width:981px){
  /* Más alto que la ventana, a propósito. El hero sube con el scroll hasta que
     su pie toca el pie de la ventana, y ahí se queda fijo — por eso el `top` va
     en negativo. Así a scroll 0 la ventana corta la foto, que es el gesto de la
     referencia, pero bajando un poco se ve el móvil entero en vez de quedar
     tapado para siempre.
     El alto es copy (30rem) + foto + un respiro. El 1,31667 es 948/720, la
     proporción del recorte: si se cambia el asset, se cambia aquí.
     El max() lo protege: en una ventana muy alta el hero no baja de 100svh y el
     `top` no se vuelve positivo, que dejaría el hero clavado más abajo. */
  .hero{
    --hero-alto:max(100svh,calc(30rem + var(--foto) * 1.31667 + clamp(24px,4svh,64px)));
    position:sticky;top:calc(100svh - var(--hero-alto));
    height:var(--hero-alto);padding-top:0;
    display:grid;align-items:stretch;
  }
  .hero__stage{width:100%;height:100%}
  /* La cabecera va fija, acaba a 70px del borde (16 de top + 54 de barra) y no
     se mueve mientras se ve el hero. El minimo de este clamp tiene que dejar
     aire de verdad por debajo, no rozarla: con 72px el eyebrow quedaba a 1,7px
     de la barra y se leia pegado. */
  .hero__inner{min-height:0;height:100%;padding-block:clamp(104px,10svh,132px) 0}
}
.hero__scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(20,7,5,.66) 0%,
      rgba(20,7,5,.34) 38%,
      rgba(20,7,5,0) 66%),
    linear-gradient(to top,rgba(20,7,5,.74) 0%,rgba(20,7,5,0) 42%);
}
@media (max-width:980px){
  /* En columna la copy ya no está a un lado: se protege de arriba abajo. */
  /* Hasta abajo del todo no: el velo tiene que morir en cero. Si acaba con
     alfa, la sección siguiente arranca con su propio halo y el salto de oscuro
     a claro dibuja una raya recta a todo lo ancho, justo por donde acaba la
     foto — y la mano se lee cortada por ella. */
  .hero__scrim{background:linear-gradient(180deg,rgba(20,7,5,.42) 0%,rgba(20,7,5,.62) 40%,rgba(20,7,5,.26) 80%,rgba(20,7,5,0) 100%)}
}
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  justify-items:center;text-align:center;
  gap:clamp(10px,1.4vw,20px);
  min-height:min(78svh,760px);
  padding-bottom:0;
}
.hero__copy{display:grid;gap:var(--space-6);justify-items:center;max-width:720px}
.hero__title{margin-block:var(--space-1) var(--space-1)}
.hero__lede{max-width:52ch;margin-inline:auto}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}
.hero__meta{color:var(--text-muted)}

/* La app en la mano. Sube desde abajo y el borde del hero la corta, como en la
   referencia: el recorte va sin marco y sin halo detrás. Lo único que la separa
   del fondo es su propia luz y el desvanecido del antebrazo — el halo que había
   aquí colgaba de .hero__device, que ocupa todo el ancho del hero, así que no
   era un resplandor detrás del móvil sino una mancha clara cruzando la sección.
   Nada de filtros aquí: va dentro de .hero__stage, que anima su opacidad. */
.hero__device{position:relative;align-self:start;display:flex;justify-content:center;width:100%}
/* <picture> solo elige la fuente: que no meta caja propia ni el hueco de línea
   que deja una imagen en flujo inline, o la foto baja unos píxeles y el hero
   la corta antes de tiempo. */
.hero__device picture{display:contents}
.hero__shot{
  position:relative;z-index:1;display:block;height:auto;
  width:var(--foto);
  translate:var(--foto-eje) 0;
}


@media (max-width:980px){
  /* Sin hero fijo no hay alto que repartir: las dos filas se miden por su
     contenido y la foto cabe entera debajo de la copy, sin cortarse. */
  /* Aire por debajo de la foto: si la costura de sección cae justo donde muere
     el antebrazo, el corte se ve aunque el degradado esté bien. */
  /* El aire de arriba lo pone el inner, como en escritorio, no el hero: así
     se mide desde el borde de la ventana y se sabe cuánto queda por debajo de
     la cabecera. Con los 160px del hero más los 24 de aquí quedaban 107px en
     blanco entre la barra y el titular. */
  .hero__inner{min-height:0;padding-top:clamp(112px,16svh,132px);padding-bottom:clamp(56px,12vw,88px);grid-template-rows:auto auto}
  /* Aquí no hay hero que corte: la foto cabe entera y lo que se ve por abajo es
     el borde del render. El recorte ya trae un desvanecido en su último 10 %,
     pero a este tamaño son 39 px y se queda corto; esto lo alarga. */
  .hero__shot{
    -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
  }
  /* Aquí el techo no es estético: con el móvil desplazado un 11,7% a la
     izquierda, por encima de ~81vw la mano se saldría del borde y aparecería
     scroll horizontal. 76vw deja margen. */
  .hero{--foto:min(420px,76vw);padding-top:0}
  .hero__device{margin-top:var(--space-6)}
}

/* ============================================================================
   Dispositivo — iOS 393 × 780, el lienzo del design system.
   Todo el interior se mide en --u (1 px de app), así la pantalla escala sin
   perder proporciones.

   SIN USO desde que el hero lleva foto (ver README, «La imagen del hero»).
   No lo referencia ningún HTML. Se queda por si esta pantalla vuelve en otra
   sección; si no vuelve, este bloque entero se borra.
   ========================================================================== */

.phone{
  /* --pw es el ancho del lienzo de la app (393 px). --u es 1 px de app: todo
     el interior se mide con él, así la pantalla escala sin deformarse. */
  --pw:min(340px,84vw);
  --u:calc(var(--pw) / 393);
  width:var(--pw);height:calc(var(--pw) * 780 / 393);
  position:relative;z-index:1;
  border-radius:calc(54 * var(--u));
  padding:calc(11 * var(--u));
  background:linear-gradient(160deg,#4a4a4c 0%,#141416 34%,#0b0b0c 62%,#3a3a3d 100%);
  box-shadow:var(--shadow-overlay),0 0 0 1px rgba(255,255,255,.08);
}
.phone__screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(44 * var(--u));
  background-color:var(--ink-deep);
  background-image:var(--gradient-app);
  background-size:cover;
  padding:calc(14 * var(--u)) calc(20 * var(--u)) 0;
  display:grid;gap:calc(16 * var(--u));
  align-content:start;
  font-size:calc(15 * var(--u));
}
.phone__screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzMnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size:var(--grain-size) var(--grain-size);
}

.ph-status{
  display:flex;align-items:center;justify-content:space-between;
  font:var(--fw-semibold) calc(13 * var(--u))/1 var(--font-body);
  color:var(--cream-050);padding-inline:calc(4 * var(--u));
}
.ph-status__icons{display:flex;gap:calc(4 * var(--u));align-items:center}
.ph-status__icons i{
  display:block;width:calc(13 * var(--u));height:calc(9 * var(--u));
  border-radius:calc(2 * var(--u));background:rgba(247,242,223,.7);
}

/* Cabecera de la app: el saludo a la izquierda, la marca a la derecha. */
.ph-head{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u))}
.ph-hello{font:var(--fw-regular) calc(19 * var(--u))/1 var(--font-body);color:var(--text-secondary)}
.ph-hello b{font-weight:var(--fw-bold);color:var(--cream-050)}
.ph-brand{width:calc(58 * var(--u));height:auto;opacity:.92}

/* Selector de día: manda la píldora, las flechas se quedan fuera. */
.ph-datebar{
  display:flex;align-items:center;justify-content:center;
  gap:calc(14 * var(--u));color:var(--text-muted);
}
.ph-datebar > .icon{width:calc(15 * var(--u));height:calc(15 * var(--u))}
.ph-datepill{
  display:inline-flex;align-items:center;gap:calc(7 * var(--u));
  padding:calc(8 * var(--u)) calc(14 * var(--u));
  border-radius:var(--radius-pill);
  background-image:var(--glass-fill-sunk);
  border:1px solid var(--glass-border);
  font:var(--fw-semibold) calc(14 * var(--u))/1 var(--font-body);
  color:var(--cream-050);
}
.ph-datepill .icon{width:calc(13 * var(--u));height:calc(13 * var(--u));color:var(--text-muted)}

.ph-panel{
  display:grid;gap:calc(14 * var(--u));
  padding:calc(16 * var(--u));
  border-radius:var(--radius-lg);
  background-image:var(--glass-fill);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.ph-panel--ring{justify-items:center;gap:calc(14 * var(--u));padding-top:calc(18 * var(--u))}

.ph-label{
  display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));
  font:var(--fw-semibold) calc(11 * var(--u))/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cream-050);
}
.ph-label em{
  font-style:normal;text-transform:none;letter-spacing:var(--ls-body);
  font-weight:var(--fw-regular);color:var(--text-muted);
}
/* La marca roja de sección de la app. */
.ph-label--tick{position:relative;padding-left:calc(10 * var(--u))}
.ph-label--tick::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:calc(3 * var(--u));height:calc(13 * var(--u));
  border-radius:var(--radius-pill);background:var(--red-400);
}

/* Anillo de calorías: 60 % de 2.409 kcal todavía por gastar. */
.ring{position:relative;width:calc(190 * var(--u));aspect-ratio:1}
.ring__svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:rgba(255,255,255,.15);stroke-width:6.5}
.ring__fill{
  fill:none;stroke:url(#ringFade);stroke-width:6.5;stroke-linecap:round;
  stroke-dasharray:314.16;stroke-dashoffset:125.66; /* 60 % */
}
.ring__inner{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:calc(2 * var(--u));text-align:center;
}
.ring__value{
  font:var(--fw-light) calc(48 * var(--u))/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
}
.ring__label{font:var(--fw-regular) calc(12.5 * var(--u))/1 var(--font-body);color:var(--text-secondary)}
.ring__sub{
  margin-top:calc(5 * var(--u));
  font:var(--fw-regular) calc(10.5 * var(--u))/1 var(--font-body);color:var(--text-muted);
}

.ph-row{display:flex;gap:calc(8 * var(--u));justify-content:center}
.ph-chip{
  display:inline-flex;align-items:center;gap:calc(6 * var(--u));
  padding:calc(7 * var(--u)) calc(12 * var(--u));
  border-radius:var(--radius-pill);
  background-image:var(--glass-fill-sunk);
  border:1px solid var(--glass-border);
  font:var(--fw-medium) calc(11 * var(--u))/1 var(--font-body);
  color:var(--text-secondary);
}
/* Lo seleccionado sube el glass — el rojo ya significa carbohidratos. */
.ph-chip.is-selected{
  background-image:var(--glass-fill-raised);
  border-color:var(--glass-border-strong);color:var(--cream-050);
}
/* El acento del sistema es glass teñido, nunca un botón rojo macizo. */
.ph-chip--accent{
  background-image:var(--glass-fill-accent);
  border-color:rgba(233,96,60,.34);color:var(--red-200);
}
.ph-chip .icon{width:calc(12 * var(--u));height:calc(12 * var(--u))}

/* La acción principal de la app: apuntar lo que comes. */
.ph-actions{display:grid;grid-template-columns:1fr auto;gap:calc(10 * var(--u))}
.ph-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));
  height:calc(46 * var(--u));border-radius:calc(20 * var(--u));
  background-image:var(--glass-fill-raised);
  border:1px solid var(--glass-border-strong);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
  font:var(--fw-semibold) calc(15 * var(--u))/1 var(--font-body);
  color:var(--cream-050);
}
.ph-cta .icon{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.ph-iconbtn{
  display:grid;place-items:center;
  width:calc(46 * var(--u));height:calc(46 * var(--u));
  border-radius:calc(20 * var(--u));
  background-image:var(--glass-fill-sunk);
  border:1px solid var(--glass-border);
  color:var(--cream-050);
}
.ph-iconbtn .icon{width:calc(17 * var(--u));height:calc(17 * var(--u))}

/* Macros: tres tarjetas en fila, un hue por macro. */
.ph-block{display:grid;gap:calc(11 * var(--u))}
.ph-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(9 * var(--u))}
.ph-macro{
  display:grid;gap:calc(4 * var(--u));align-content:start;
  padding:calc(11 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-radius:var(--radius-md);
  background-image:var(--glass-fill);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.ph-macro__name{
  font:var(--fw-semibold) calc(9.5 * var(--u))/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--macro);
}
.ph-macro__n{
  font:var(--fw-bold) calc(24 * var(--u))/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
}
.ph-macro__of{font:var(--fw-regular) calc(10 * var(--u))/1 var(--font-body);color:var(--text-muted)}
.ph-macro__track{
  display:block;margin-top:calc(4 * var(--u));height:calc(4 * var(--u));
  border-radius:var(--radius-pill);background:var(--surface-track);overflow:hidden;
}

/* Las dos cifras del día. Asoman por debajo de la barra de pestañas, igual
   que en la app: la píldora flota, no cierra la pantalla. */
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u))}
.ph-stat{
  display:grid;gap:calc(4 * var(--u));align-content:start;
  padding:calc(11 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border-radius:var(--radius-md);
  background-image:var(--glass-fill-sunk);
  border:1px solid var(--glass-border);
}
.ph-stat__k{
  font:var(--fw-semibold) calc(9.5 * var(--u))/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.ph-stat__v{
  font:var(--fw-bold) calc(21 * var(--u))/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
}
.ph-stat__v em{
  font-style:normal;font-weight:var(--fw-regular);
  font-size:calc(11 * var(--u));color:var(--text-secondary);
}
.ph-stat__s{font:var(--fw-regular) calc(10 * var(--u))/1 var(--font-body);color:var(--text-muted)}

/* La barra de pestañas flota: píldora de glass con aire a los lados. */
.ph-tabbar{
  position:absolute;left:calc(20 * var(--u));right:calc(20 * var(--u));
  bottom:calc(16 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10 * var(--u)) calc(18 * var(--u));
  border-radius:var(--radius-pill);
  background-image:var(--glass-fill-raised);
  backdrop-filter:blur(var(--blur-tabbar)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--blur-tabbar)) saturate(var(--glass-saturate));
  border:1px solid var(--glass-border-strong);
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow);
  color:var(--text-muted);
}
.ph-tabbar .icon{width:calc(19 * var(--u));height:calc(19 * var(--u))}
/* La B, en su disco rojo. Es lo único macizo de toda la pantalla. */
.ph-tabbar__b{
  display:grid;place-items:center;
  width:calc(40 * var(--u));height:calc(40 * var(--u));
  border-radius:var(--radius-circle);
  background-image:var(--gradient-brand-mark);
  background-color:var(--red-600);
  color:var(--cream-100);
  box-shadow:0 0 0 1px rgba(255,255,255,.2),
             0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(174,40,2,.5);
}
.ph-tabbar__b .icon{width:calc(30 * var(--u));height:calc(30 * var(--u))}
.ph-tabbar__me{
  display:grid;place-items:center;
  width:calc(26 * var(--u));height:calc(26 * var(--u));
  border-radius:var(--radius-circle);
  background-image:var(--glass-fill-raised);
  border:1px solid var(--red-400);
  color:var(--text-secondary);
}
.ph-tabbar__me .icon{width:calc(13 * var(--u));height:calc(13 * var(--u))}

/* ============================================================================
   Cómo funciona
   ========================================================================== */

.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--space-5);
}
.step{display:grid;gap:var(--space-3);padding:clamp(24px,2.4vw,32px);align-content:start}
.step__n{
  font:var(--fw-light) 40px/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--red-300);
  margin-bottom:var(--space-2);
}

/* ============================================================================
   Pilares
   ========================================================================== */

.pillar{padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--divider)}
.pillar:first-of-type{border-top:0;padding-top:0}

/* El número y el texto siguen siendo dos columnas —el 01 pegado al titular es
   la marca del bloque— pero el par entero va centrado en la página. */
.pillar__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-6);align-items:start;text-align:center;
  margin-bottom:clamp(32px,4vw,52px);
  width:max-content;max-width:min(920px,100%);margin-inline:auto;
}
.pillar__head .lede{max-width:56ch}
.pillar__n{
  font:var(--fw-light) clamp(40px,5vw,68px)/.85 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--red-300);
}
.pillar__head h3{margin-bottom:var(--space-3)}

.pillar__body{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,48px);align-items:start;
}
.pillar--alt .pillar__body{direction:rtl}
.pillar--alt .pillar__body > *{direction:ltr}

.cards{display:grid;gap:var(--space-4)}
.card{display:grid;gap:var(--space-3);padding:clamp(20px,2vw,26px);align-content:start}
.card__icon{color:var(--red-300);margin-bottom:var(--space-1)}

/* La tira de sincronización. Los logos son ajenos al sistema y vienen a todo
   color, así que se meten en un panel: contenidos se leen como lo que son
   —marcas de terceros— y no como manchas sueltas sobre el gradiente. Relleno
   plano, no .glass: esto vive dentro de una tarjeta que ya es glass, y glass
   dentro de glass no existe (ver base.css). */
.sync{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  /* Ceñido al contenido: estirado a todo el ancho de la tarjeta dejaba medio
     panel vacío a la derecha y se leía como un contenedor roto, no como una
     pieza. En pantallas estrechas el max-width lo deja envolver. */
  width:max-content;max-width:100%;
  padding:var(--space-3);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
}
/* 10px sobre 44 es la proporción de esquina de un icono de app de iOS: menos
   se lee cuadrado y más se lee botón. */
.sync__logo{width:44px;height:44px;flex:none;display:block;border-radius:var(--radius-sm)}
.sync__flecha{color:var(--text-muted);margin-inline:var(--space-1)}
@media (max-width:420px){
  .sync{gap:var(--space-1);padding:var(--space-2)}
  .sync__logo{width:38px;height:38px}
  .sync__flecha{margin-inline:0}
}

@media (max-width:900px){
  .pillar__body{grid-template-columns:1fr}
  .pillar--alt .pillar__body{direction:ltr}
  .pillar__head{grid-template-columns:1fr;gap:var(--space-3)}
}

/* ============================================================================
   Fragmentos de la app
   Trozos reales de pantalla flotando sobre el gradiente. Se apoyan en .glass,
   así que dentro no hay más glass: solo rellenos planos.
   ========================================================================== */

.frag{
  position:relative;
  display:grid;gap:var(--space-4);
  padding:clamp(20px,2vw,26px);
  border-radius:var(--radius-xl);
}

.frag__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.frag__title{font:var(--type-label);color:var(--cream-050)}
.frag__meta{font:var(--type-caption);color:var(--text-muted)}
.frag__label{
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}

.frag__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-3);
  padding:var(--space-3);border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
}
.frag__thumb{
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:var(--radius-sm);background:rgba(255,255,255,.09);color:var(--text-muted);
}
.frag__name{
  display:grid;gap:2px;min-width:0;
  font:var(--fw-medium) var(--fs-caption)/1.25 var(--font-body);color:var(--cream-050);
}
.frag__name em{font-style:normal;font-weight:var(--fw-regular);font-size:var(--fs-micro);color:var(--text-muted)}
.frag__kcal{font:var(--fw-medium) var(--fs-caption)/1 var(--font-body);color:var(--text-secondary)}

/* Una superficie teñida de rojo es la única señal de que la IA lo lee. */
.frag__ai{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
  font:var(--type-caption);color:var(--text-muted);
}
.frag__ai--accent{
  background-image:var(--glass-fill-accent);
  border-color:rgba(233,96,60,.34);color:var(--cream-100);
}
.frag__ai .icon{color:var(--red-300);flex:none}

.sports{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
.sport{
  display:grid;gap:var(--space-2);justify-items:start;
  padding:var(--space-4);border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);border:1px solid var(--border-hairline);
  font:var(--fw-medium) var(--fs-caption)/1 var(--font-body);color:var(--text-secondary);
}
.sport .icon{color:var(--text-muted)}
/* Al seleccionar sube el glass; nunca se pinta de rojo. */
.sport.is-selected{
  background:rgba(255,255,255,.14);border-color:var(--glass-border-strong);
  color:var(--cream-050);box-shadow:inset 0 1px 0 var(--glass-highlight);
}
.sport.is-selected .icon{color:var(--cream-050)}

.frag__result{
  display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;
  padding-top:var(--space-2);
}
.frag__result-n{
  font:var(--fw-light) var(--fs-metric-sm)/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
}
.frag__result-u{font:var(--type-label);color:var(--text-secondary)}
.frag__result-s{font:var(--type-caption);color:var(--text-muted);margin-left:auto}

.spark{width:100%;height:96px;overflow:visible}
.spark__line{fill:none;stroke:var(--cream-100);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Redondo aunque el lienzo vaya estirado. Un <circle> con
   preserveAspectRatio="none" sale ovalado —el eje X va casi al doble—; un
   trazo de longitud cero con remate redondo mide lo mismo en los dos ejes. */
.spark__dot{fill:none;stroke:var(--cream-050);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}

.frag__stats{display:flex;gap:var(--space-7);flex-wrap:wrap}
.frag__stats span{display:grid;gap:2px}
.frag__stats b{
  font:var(--fw-light) var(--fs-metric-sm)/1 var(--font-numeric);
  letter-spacing:var(--ls-metric);color:var(--cream-050);
}
.frag__stats em{font:var(--type-caption);font-style:normal;color:var(--text-muted)}

.frag__summary{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-4);border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
}
.frag__summary .icon{color:var(--red-300);flex:none;margin-top:2px}
.frag__summary p{font:var(--type-caption);color:var(--text-secondary)}

/* ============================================================================
   Corte editorial
   ========================================================================== */

.editorial{position:relative;isolation:isolate;overflow:hidden;min-height:min(76svh,660px);display:grid;align-items:end}

/* La foto entra en paleta: Bivel Red en multiply se come el amarillo del foco
   sin retocar el archivo. Encima van los degradados de protección del sistema. */
.editorial__photo{
  position:absolute;inset:-14% 0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(82% 92% at 64% 34%,#f2a38b 0%,#e6764f 32%,#c33a10 62%,#8c1f02 100%),
    url("../img/editorial-runner.jpg");
  background-color:var(--ink-deep);
  background-blend-mode:multiply,normal;
  background-size:cover,cover;
  background-position:center,48% 38%;
  background-repeat:no-repeat;
}
.editorial__scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    var(--scrim-bottom),
    linear-gradient(to bottom,rgba(20,7,5,.82) 0%,rgba(20,7,5,.22) 18%,rgba(20,7,5,0) 40%),
    linear-gradient(90deg,rgba(20,7,5,.62) 0%,rgba(20,7,5,.12) 50%,rgba(20,7,5,0) 100%);
}
.editorial__copy{
  position:relative;z-index:1;padding-block:clamp(56px,8vw,104px);
  display:grid;justify-items:center;text-align:center;
}
.editorial__copy .h1{max-width:16ch}

/* ============================================================================
   Precio
   ========================================================================== */

/* Los tres pasos de la prueba, tal como los cuenta el muro de pago de la app. */
/* Va con el tipo delante a propósito: base.css hace `ol[class]{padding:0}`,
   que con (0,1,1) le gana a un `.trial` a secas. Sin igualar especificidad el
   padding se pierde, y los puntos se van 24px a la izquierda del carril. */
/* Ceñida y centrada: los tres pasos son una pieza, no una columna de página. */
ol.trial{
  position:relative;display:grid;gap:var(--space-4);
  margin-bottom:var(--space-8);padding-left:var(--space-6);
  width:max-content;max-width:100%;margin-inline:auto;
}
.trial::before{
  content:"";position:absolute;left:4px;top:.6em;bottom:.6em;width:1px;
  background:linear-gradient(180deg,var(--red-400) 0%,rgba(255,255,255,.14) 100%);
}
/* Dos columnas y no un flex que envuelve: envolviendo, el primer paso cabía en
   una línea y los otros dos partían el día del texto con un hueco de 24px en
   medio. En rejilla el texto se parte dentro de su columna y los tres pasos
   se leen igual. */
.trial__step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:baseline}
.trial__step::before{
  content:"";position:absolute;left:calc(-1 * var(--space-6));top:.42em;
  width:9px;height:9px;border-radius:var(--radius-circle);background:var(--surface-track);
}
.trial__step.is-now::before{background:var(--red-400);box-shadow:0 0 0 4px rgba(196,58,16,.22)}
.trial__when{min-width:6ch;font:var(--type-label);color:var(--text-muted)}
.trial__step.is-now .trial__when{color:var(--red-200)}
.trial__what{color:var(--text-primary)}

.plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--space-5);align-items:stretch;
}
.plan{
  position:relative;display:grid;gap:var(--space-4);align-content:start;
  padding:clamp(24px,2.6vw,36px);border-radius:var(--radius-2xl);
}
.plan__name{
  font:var(--fw-semibold) var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.plan__price{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.plan__price .metric{font-size:clamp(40px,4.4vw,60px)}
.plan__price em{font:var(--type-label);font-style:normal;color:var(--text-secondary)}
.plan__note{font:var(--type-caption);color:var(--text-muted)}
.plan__list{display:grid;gap:var(--space-3);margin-top:var(--space-2)}
.plan__list li{
  display:flex;align-items:center;gap:var(--space-3);
  font:var(--type-body);font-size:var(--fs-label);color:var(--text-secondary);
}
.plan__list .icon{color:var(--semantic-success)}
/* El ahorro es el argumento del plan anual, así que se dice fuerte: pastilla
   rellena de marca, montada sobre el borde y centrada. Antes iba en crema y a
   la derecha, y se leía como una etiqueta más. */
.plan__badge{
  position:absolute;top:0;left:50%;translate:-50% -50%;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  background:var(--red-500);color:var(--cream-050);
  font:var(--fw-bold) var(--fs-micro)/1 var(--font-body);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(174,40,2,.85);
}
/* El borde de acento lo pinta el propio plan: el glass trae el suyo y hay que
   ganarle sin subir la especificidad a martillazos. */
.plan--featured{
  border-color:rgba(212,80,31,.55);
  box-shadow:0 0 0 1px rgba(212,80,31,.28),0 24px 60px -28px rgba(174,40,2,.7);
}
.plan--featured .plan__name{color:var(--text-accent)}
.plan--featured .plan__price .metric{color:var(--red-300)}
/* La pastilla se monta sobre el borde, así que el nombre necesita aire por
   arriba o se le echa encima. */
.plan--featured{padding-top:calc(clamp(24px,2.6vw,36px) + var(--space-3))}

/* La letra pequeña y la llamada, apiladas y centradas. Separadas a los dos
   extremos quedaban a 1.200px de distancia y no se leían como una sola cosa. */
.plans__foot{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-5);margin-top:var(--space-8);
}
.plans__foot .caption{max-width:56ch}

/* ============================================================================
   Lista de espera
   ========================================================================== */

.waitlist{display:grid;gap:var(--space-5);justify-items:start}
.waitlist .lede{max-width:56ch}

.wl-form{display:flex;gap:var(--space-3);width:100%;max-width:520px;flex-wrap:wrap}
.wl-form .field{flex:1 1 240px;min-width:0}
.wl-form .btn{flex:none}
#wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.msg{min-height:1.4em;font:var(--type-caption)}
.msg.ok{color:var(--semantic-success)}
.msg.err{color:var(--semantic-danger)}

/* ============================================================================
   Contacto
   ========================================================================== */

.contact{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-7);flex-wrap:wrap;
  padding:clamp(28px,3.2vw,44px);border-radius:var(--radius-2xl);
}
.contact .body{margin-top:var(--space-2);max-width:52ch}
.contact__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ============================================================================
   Pie
   ========================================================================== */

.site-foot{position:relative;z-index:2;padding-block:var(--space-10) var(--space-9);border-top:1px solid var(--divider)}
.site-foot__inner{
  position:relative;z-index:1;
  display:grid;gap:var(--space-6);
  grid-template-columns:auto minmax(0,1fr);align-items:center;
}
.site-foot__mark img{width:92px;height:auto}
.site-foot__nav{display:flex;gap:var(--space-6);flex-wrap:wrap;justify-content:flex-end}
.site-foot__nav a{
  font:var(--fw-medium) var(--fs-label)/1 var(--font-body);color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-standard);
}
.site-foot__nav a:hover{color:var(--cream-050)}
.site-foot__legal{grid-column:1/-1;color:var(--text-muted);padding-top:var(--space-5);border-top:1px solid var(--divider)}

@media (max-width:640px){
  .site-foot__inner{grid-template-columns:1fr}
  .site-foot__nav{justify-content:flex-start}
}

/* ============================================================================
   Páginas de contenido — soporte y legales
   ========================================================================== */

/* Relativo porque también lleva halo: sin esto el ::before de .glow se colgaba
   del bloque inicial y medía la ventana, no la portadilla. */
.page-head{position:relative;padding-top:calc(var(--space-12) + var(--space-11));padding-bottom:var(--stack-web)}
.page-head__inner{display:grid;gap:var(--space-5);justify-items:start;position:relative;z-index:1}
.page-head .lede{max-width:56ch}

.prose{max-width:var(--width-prose-max);display:grid;gap:var(--space-5)}
.prose h2{
  font:var(--fw-semibold) clamp(20px,1.8vw,26px)/1.2 var(--font-display);
  letter-spacing:var(--ls-heading);color:var(--cream-050);
  margin-top:var(--space-8);
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font:var(--type-h3);letter-spacing:var(--ls-heading);color:var(--cream-050);
  margin-top:var(--space-5);
}
.prose p,.prose li{color:var(--text-secondary)}
.prose ul{display:grid;gap:var(--space-3);padding-left:var(--space-5);list-style:disc}
.prose ul li::marker{color:var(--red-300)}
.prose dl{display:grid;gap:var(--space-2)}
.prose dt{font:var(--type-label);color:var(--cream-050)}
.prose dd{margin:0;color:var(--text-secondary)}
.prose strong{color:var(--cream-050);font-weight:var(--fw-semibold)}

.notice{
  display:flex;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-5);border-radius:var(--radius-lg);
}
.notice .icon{color:var(--red-300);flex:none;margin-top:2px}
.notice p{font:var(--type-body);font-size:var(--fs-label);color:var(--text-secondary)}

.updated{font:var(--type-caption);color:var(--text-muted)}

/* Preguntas frecuentes */
.faq{display:grid;gap:var(--space-3)}
.faq__item{padding:0;border-radius:var(--radius-lg);overflow:hidden}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%;padding:var(--space-5);text-align:left;
  font:var(--type-h3);font-size:var(--fs-body-lg);color:var(--cream-050);
  transition:color var(--dur-fast) var(--ease-standard);
}
.faq__q .icon{color:var(--text-muted);flex:none;transition:transform var(--dur-base) var(--ease-standard)}
.faq__item[open] .faq__q .icon{transform:rotate(180deg)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__a{padding:0 var(--space-5) var(--space-5);display:grid;gap:var(--space-4)}
.faq__a p,.faq__a li{color:var(--text-secondary);font-size:var(--fs-label)}
.faq__a ul{display:grid;gap:var(--space-2);padding-left:var(--space-5);list-style:disc}

/* Índice lateral de las legales */
.legal{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;position:relative;z-index:1;
}
.legal__toc{position:sticky;top:120px;display:grid;gap:var(--space-2)}
.legal__toc a{
  font:var(--fw-medium) var(--fs-caption)/1.3 var(--font-body);
  color:var(--text-muted);padding:var(--space-2) 0;
  transition:color var(--dur-fast) var(--ease-standard);
}
.legal__toc a:hover,.legal__toc a.is-active{color:var(--cream-050)}
@media (max-width:900px){
  .legal{grid-template-columns:1fr}
  .legal__toc{position:static;display:none}
}

.contact-line{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  font:var(--type-h3);color:var(--cream-050);
}
.contact-line .icon{color:var(--red-300)}

/* ---------- Ajustes de ritmo ---------- */
.section--tight{padding-top:0}
#contacto{padding-top:clamp(24px,4vw,56px)}
.page-head--legal{padding-bottom:clamp(48px,6vw,80px)}

/* ---------- <details> como acordeón ---------- */
.faq__item{overflow:hidden}
.faq__q{list-style:none;cursor:pointer}
.faq__q::-webkit-details-marker{display:none}
.faq__item[open]{background-image:var(--glass-fill-raised)}

/* ============================================================================
   Pantallas estrechas
   En las columnas con justify-items:start los hijos se miden por su contenido,
   así que hay que devolverlos al ancho de la columna. Y por debajo de 420px
   ningún botón cabe en una línea: se deja envolver.
   ========================================================================== */
.hero__copy > *,
.waitlist > *,
.page-head__inner > *{max-width:100%}

@media (max-width:520px){
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1 1 100%}
  .wl-form .btn{flex:1 1 100%}
  .plans__foot{align-items:stretch}
  .plans__foot .btn{width:100%}
  .contact__actions{width:100%}
  .contact__actions .btn{flex:1 1 100%}
}

@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.2}
  .btn--lg{padding-inline:var(--space-5);font-size:var(--fs-body)}
}

/* Un campo de IA de tres líneas ya no es una píldora. */
@media (max-width:520px){
  .frag__ai{border-radius:var(--radius-lg)}
}

/* ============================================================================
   El hero se retira
   Se queda fijo arriba y el resto del documento pasa por encima, encogiendo,
   apagándose y desenfocándose. El velo de .page-flow lleva el gradiente de la
   app, así que tapa el hero sin dejar ver nada por debajo.
   ========================================================================== */

/* Solo la capa. La posición la fijan la regla base y la media query de
   arriba: repetirla aquí anulaba el position:sticky y el hero no se fijaba. */
.hero{z-index:0}
.hero__stage{
  transform:scale(var(--hero-scale,1)) translate3d(0,var(--hero-y,0px),0);
  opacity:var(--hero-fade,1);
  transform-origin:50% 42%;
}
/* El relevo: el copy se apaga mientras el móvil se revela, antes y más rápido
   que la foto, para no quedarse asomando detrás de la cabecera el resto del
   recorrido. La cuenta la lleva site.js; aquí solo está la capa.
   data-ido lo pone el JS al llegar a cero: invisible pero enfocable es peor
   que invisible. */
.hero__copy{opacity:var(--copy-fade,1)}
.hero__copy[data-ido]{visibility:hidden}
/* La opacidad cambia en cada frame. Sin promocionar la capa, el navegador
   repinta todo el hero —teléfono, glass y grano— en cada uno; promocionada, la
   compone la GPU. Solo donde el hero se retira: en móvil no se paga.
   Va de la mano de la regla de abajo: promocionar una capa con backdrop-filter
   dentro es justo lo que congelaba el compositor. */
@media (min-width:981px){
  .hero__stage{will-change:transform,opacity}
  .hero__copy{will-change:opacity}
}
@media (prefers-reduced-motion:reduce){
  /* Sin movimiento el hero no se retira: vuelve a fluir con el documento. */
  .hero{
    position:relative;height:auto;min-height:0;
    padding-top:calc(var(--space-12) + var(--space-10));
  }
  .hero__stage{transform:none;opacity:1}
}

/* Un backdrop-filter debajo de una capa cuya opacidad cambia obliga al
   compositor a rehacer la escena entera en cada frame. Dentro del hero, que se
   apaga al retirarse, el glass se queda en relleno plano: sobre el gradiente
   del propio hero el blur no aportaba nada visible. */
.hero__stage .btn--glass,
.hero__stage .ph-tabbar{backdrop-filter:none;-webkit-backdrop-filter:none}
.hero__stage .btn--glass{background-image:var(--glass-fill-raised)}

.page-flow{position:relative;z-index:1}
/* Un velo por tramo, y el corte editorial parte el flujo en dos: el gradiente
   corre, se acaba en la foto y vuelve a empezar después. El tramo es el bloque
   contenedor del sticky, así que el velo no se escapa al tramo siguiente. */
/* flow-root, no un div a secas: el velo entra con margen superior negativo
   para solapar lo de arriba, y ese margen se colapsaba con el del tramo y le
   subía el contenido entero 234px. Con contexto de formato propio el margen ya
   no atraviesa: sube el velo y el tramo se queda donde estaba. */
.flow-tramo{position:relative;display:flow-root}
/* El único que se funde con lo de arriba: el hero. */
.flow-tramo--primero .page-flow__veil{--entrada:clamp(180px,26svh,320px)}

/* El velo: una lámina del alto de la ventana que viaja con el flujo. Hace lo
   mismo que un fondo fijo, pero sin background-attachment (que iOS ignora).

   La entrada es lo que evita el corte. Antes el velo empezaba en el canto del
   tramo, opaco de golpe y con una línea clara de 1px encima: bajando, esa raya
   cruzaba la palma de la mano. Ahora el velo arranca --entrada más arriba,
   solapando el hero, y una máscara lo hace cuajar de transparente a opaco en
   ese tramo. Cuando queda fijo, la parte transparente está por encima del
   borde de la ventana y no se ve. Las tres cifras (top, margen y alto) se
   mueven juntas: el aporte al flujo tiene que seguir siendo cero. */
.page-flow__veil{
  /* Sin entrada por defecto: el velo cuaja en el canto del tramo. Es lo que
     se quiere después del corte editorial —ahí la foto manda y el gradiente
     arranca de nuevo, limpio— y solo el primer tramo la necesita, que es el
     que se funde con la mano. */
  --entrada:0px;
  position:sticky;top:calc(-1 * var(--entrada));
  height:calc(100svh + var(--entrada));
  margin-top:calc(-1 * var(--entrada));
  margin-bottom:-100svh;
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--entrada));
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--entrada));
  background-color:var(--ink-deep);
  background-image:
    radial-gradient(70% 40% at 80% 16%, rgba(255,250,235,.24) 0%, rgba(255,250,235,0) 62%),
    radial-gradient(104% 50% at 56% 8%, rgba(174,40,2,.62) 0%, rgba(140,31,2,.24) 52%, rgba(107,23,1,0) 84%),
    linear-gradient(180deg,#200903 0%,#320e05 12%,#1d0803 32%,var(--ink-deep) 52%,#100609 76%,#0a1114 100%);
  /* Las dos luces se pintan en una caja más alta que el velo para tener sitio
     por donde moverse; la base oscura no se mueve, así el tono es estable y lo
     que viaja es la luz. --velo-p lo lleva site.js: 0 al entrar el tramo, 1 al
     salir. Sin JS se queda en 0 y esto es el fondo de siempre. */
  background-size:100% 170%,100% 170%,100% 100%;
  background-repeat:no-repeat;
  background-position:
    50% calc(var(--velo-p,0) * 46%),
    50% calc(var(--velo-p,0) * 30%),
    50% 0%;
}
.page-flow__veil::after{
  content:"";position:absolute;inset:0;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzMnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size:var(--grain-size) var(--grain-size);
}

/* ============================================================================
   Cabecera que se aparta
   Bajando estorba; subiendo hace falta. Se va con el mismo push de pantalla
   que usa la app.
   ========================================================================== */

.site-head{
  transform:translate3d(0,var(--head-y,0),0);
  transition:transform var(--dur-screen) var(--ease-out);
}
.site-head.is-away{--head-y:calc(-100% - var(--space-6))}
.site-head.is-open{--head-y:0}

/* ============================================================================
   Estados de puntero
   Lo que responde al ratón sube el glass, nunca se pinta de rojo.
   ========================================================================== */

.card,.step,.plan,.faq__item{
  transition:transform var(--dur-base) var(--ease-standard),
             background-image var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
@media (hover:hover){
  .card:hover,.step:hover,.plan:hover{
    transform:translateY(-4px);
    background-image:var(--glass-fill-raised);
    border-color:var(--glass-border-strong);
  }
  .faq__item:hover{background-image:var(--glass-fill-raised)}
  .sport,.frag__row{transition:var(--transition-control)}
}

/* El número de cada pilar acompaña al scroll. */
.pillar__n{
  display:inline-block;
  transition:color var(--dur-slow) var(--ease-standard);
}

/* El punto final de la línea de evolución llega cuando el trazo termina. */
.spark__dot{opacity:0;transition:opacity var(--dur-base) var(--ease-standard) 1000ms}
.js .is-in .spark__dot{opacity:1}
@media (prefers-reduced-motion:reduce){.spark__dot{opacity:1;transition:none}}

/* El pie va fuera del flujo (el <footer> es hermano de <main>, no hijo), así
   que lleva su propia cola del gradiente. Es la zona donde el velo ya está
   apagado, así que la costura no se ve. */
.site-foot{
  background-color:var(--ink-deep);
  background-image:linear-gradient(180deg,#0d0709 0%,#0a1114 100%);
}


/* ============================================================================
   Vuelta deportiva (9 sep 2026): capturas reales. (La banda que corría entre el
   hero y «Cómo funciona» se quitó ese mismo día, a petición de Daniel.)
   Las parejas van dentro del marco .phone de arriba (el que quedó sin uso), con
   la inclinación y la brasa de la portada antigua. Sin escalar nada a mano: el
   marco mide en --u y la captura llena la pantalla con object-fit.
   ========================================================================== */

.shots{display:flex;align-items:flex-start;justify-content:center;padding-block:var(--space-3)}
.shots .phone{
  --pw:min(272px,64vw);flex:none;margin:0;rotate:-2.4deg;
  box-shadow:var(--shadow-overlay),0 0 0 1px rgba(255,255,255,.08),
    0 0 90px color-mix(in srgb,var(--red-500) 30%,transparent);
}
.shots .phone--b{
  --pw:min(212px,50vw);margin-left:-56px;margin-top:72px;rotate:3.2deg;z-index:0;
  filter:brightness(.86);
}
.phone--shot .phone__screen{padding:0;display:block}
.phone__shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:900px){
  .shots{padding-block:var(--space-5)}
  .shots .phone{--pw:min(240px,58vw)}
  .shots .phone--b{--pw:min(180px,44vw);margin-left:-48px}
}


/* ============================================================================
   Vuelta deportiva (9 sep 2026), segunda tanda: seis funciones en el hero.
   En escritorio ancho flanquean la mano (tres y tres); entre 981 y 1119 px van
   por encima en dos filas de tres, porque ahí el hero corta la mano por abajo
   y nada de lo que quede debajo se vería; en móvil, lista debajo de la mano.
   ========================================================================== */

.hero__feats{display:grid;gap:var(--space-4);list-style:none;margin:0;padding:0}
.feat{display:flex;gap:var(--space-3);align-items:flex-start;max-width:300px}
.feat__icon{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--red-300);
  background:color-mix(in srgb,var(--red-500) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--red-300) 22%,transparent);
}
.feat__icon .icon{width:20px;height:20px}
.feat__text{display:grid;gap:2px;text-align:left}
.feat__text b{font:var(--type-label);color:var(--cream-050)}
.feat__text span{font:var(--type-caption);color:var(--text-secondary)}

@media (min-width:1120px){
  .hero__device{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:start;column-gap:clamp(16px,2vw,32px);
  }
  .hero__feats{padding-top:clamp(16px,3vw,48px)}
  .hero__feats--l{justify-self:end}
  .hero__feats--l .feat{flex-direction:row-reverse}
  .hero__feats--l .feat__text{text-align:right}
  .hero__feats--r{justify-self:start}
}
@media (max-width:1119px){
  .hero__device{display:grid;grid-template-columns:1fr;justify-items:center;row-gap:var(--space-6)}
  .hero__feats{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:960px}
  .feat{max-width:none}
}
@media (min-width:981px) and (max-width:1119px){
  .hero__feats--l,.hero__feats--r{order:-1}
}
@media (max-width:980px){
  .hero__feats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
}
@media (max-width:640px){
  .hero__feats{grid-template-columns:1fr;gap:var(--space-4)}
  .feat__icon{width:36px;height:36px}
}


/* El <picture> del hero va en display:contents, y eso deja a su <source> como hijo
   directo de la rejilla: un item vacio de 0 px que se colaba en la columna del medio
   y mandaba la lista derecha a una segunda fila, fuera del hero (medido el 9 sep a
   1890 px: cols 520/0/520). Fuera del flujo, y cada pieza con su columna fija. */
.hero__device source{display:none}
@media (min-width:1120px){
  .hero__feats--l{grid-column:1}
  .hero__shot{grid-column:2}
  .hero__feats--r{grid-column:3}
}