/* ============================================================================
   Bivel — web v2 · secciones (todo lo que va después del hero)
   Todo valor sale de tokens.css. Los elementos de la app se reconstruyen en
   HTML con el cristal del tema oscuro: relleno ink @72 %, canto crema @18 %,
   y dentro paneles planos (blanco @6 %, borde crema @10 %). Nunca cristal
   sobre cristal.
   ========================================================================== */

.h1{
  font-family:var(--font-sans);font-weight:var(--fw-regular);
  font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  color:var(--text-strong);text-wrap:balance;
}
.section__head{max-width:calc(50 * var(--u));margin:0 auto calc(2.5 * var(--u));text-align:center}
.section__head .eyebrow{margin-bottom:calc(1 * var(--u))}
.section__head .lead{max-width:calc(29.5 * var(--u));margin:calc(1.25 * var(--u)) auto 0;color:var(--text-muted)}
.link{color:var(--text-primary);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--text-faint)}
.link:hover{text-decoration-color:var(--accent)}
.hero__actions--left{justify-content:flex-start}

/* ---------- Escenas fijas (Qué hace) ----------
   Cada escena mide 220vh; el interior se queda fijo un viewport entero. site.js
   pone --p (0→1) según el recorrido: los paneles suben con el scroll y se
   apagan en los extremos. */
.scene{height:330vh;position:relative}
.scene + .scene,#que-hace + .how{margin-top:-100vh}
.scene__pin{opacity:clamp(0,calc((1 - var(--p,0)) * 14),1)}
.scene__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;padding:0 var(--gutter);
  pointer-events:none;
}
/* Recorrido (--p): 0-.2 el texto solo en el centro · .2-.45 se va a su lado
   (--side: -1 izquierda, 1 derecha) y entra la rueda por el otro · .45-1 la rueda gira. */
.scene__copy{
  position:relative;z-index:2;text-align:center;max-width:calc(50 * var(--u));
  --s:clamp(0,calc((var(--p,0) - .2) / .25),1);
  transform:translate3d(calc(var(--side,-1) * 23vw * var(--s)),0,0);
}
.scene__copy .eyebrow{margin-bottom:calc(1 * var(--u))}
.scene__lead{max-width:calc(29.5 * var(--u));margin:calc(1.25 * var(--u)) auto 0;color:var(--text-muted)}
.mark{position:relative;display:inline-block}
.mark::after{
  content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.09em;border-radius:1em;
  background:linear-gradient(90deg,var(--accent-soft),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .5s;
}
.scene.is-live .mark::after{transform:scaleX(1)}
/* La rueda: un punto fuera del cuadro, al lado contrario del texto; los paneles
   cuelgan de él a --R y giran con el scroll. --dir invierte el giro para que en
   los dos lados los paneles suban. */
.scene__panels{
  position:absolute;top:50%;left:calc(50% - var(--side,-1) * 62vw);width:0;height:0;
  pointer-events:none;
  --R:max(560px,min(46vw,64vh));
  --dir:calc(-1 * var(--side,-1));
  --base:calc(90deg - var(--side,-1) * 90deg);
  --s:clamp(0,calc((var(--p,0) - .2) / .25),1);
  --w:clamp(0,calc((var(--p,0) - .45) / .55),1);
  --rot:calc(var(--dir) * (-16deg * (1 - var(--s)) + 22deg * var(--w)));
  opacity:var(--s);
}
.wheel__rings{
  position:absolute;left:0;top:0;width:calc(var(--R) * 2.2);height:calc(var(--R) * 2.2);
  transform:translate(-50%,-50%) rotate(calc(var(--rot) * 1.4));
}
.scene__panels .panel{
  position:absolute;left:0;top:0;width:var(--w);
  transform:rotate(calc(var(--base) + var(--side,-1) * var(--a) + var(--rot))) translateX(var(--R)) rotate(calc(-1 * (var(--base) + var(--side,-1) * var(--a) + var(--rot)))) translate(-50%,-50%);
  will-change:transform;
}
/* Cuerpo: aquí el cristal es más denso que en la app, porque flota sobre el fondo vivo. */
.scene__panels .panel.ui{
  background:rgba(37,21,17,.88);
  box-shadow:inset 0 0 0 1px var(--glass-edge-strong),inset 0 1px 0 rgba(244,237,231,.14),0 24px 48px -12px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.macro{display:grid;gap:6px;padding:12px;border-radius:16px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.macro .ui__big{font-size:26px}
/* En móvil la escena también se fija y los paneles (todos del mismo ancho) van
   en una rueda vertical: cuelgan de un centro a --Rm por debajo de la tarjeta y
   giran con el scroll de la página, de uno en uno con una parada en cada uno
   (site.js pone --k, 0 → n-1). La activa queda arriba, recta; las vecinas asoman
   inclinadas por los lados. Nada responde al dedo en horizontal. */
@media (max-width:820px){
  .scene{height:260svh}
  .scene + .scene,#que-hace + .how{margin-top:0}
  .scene__pin{
    position:sticky;top:0;height:100svh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;place-items:initial;
    padding:calc(var(--space-8) + 8px) 0 var(--space-6);opacity:1;pointer-events:auto;
  }
  .scene__copy{margin:0 auto;padding:0 var(--gutter);transform:none}
  .scene__panels{
    position:relative;left:auto;top:auto;width:100%;max-width:100%;height:auto;opacity:1;
    display:grid;justify-items:center;align-items:start;
    margin-top:var(--space-6);padding:4px 0 24px;overflow:visible;
    /* Radio y paso: las vecinas asoman unos 60 px por los lados; al cruzarse se
       solapan un poco y la más cercana va delante (z-index desde site.js). El
       recorte lateral lo pone el pin. */
    --Rm:560px;--step:30deg;
  }
  .wheel__rings{display:none}
  .scene__panels .panel{
    position:static;grid-area:1/1;width:calc(100vw - 2 * var(--gutter) - 28px);max-width:none;min-width:0;
    align-content:start;
    transform-origin:50% calc(100% + var(--Rm));
    transform:rotate(calc((var(--i,0) - var(--k,0)) * var(--step)));
    will-change:transform;
  }
  /* Sin sombra oscura en el móvil: solo el canto. */
  .scene__panels .panel.ui{box-shadow:inset 0 0 0 1px var(--glass-edge-strong),inset 0 1px 0 rgba(244,237,231,.14)}
  .js .scene__panels .panel{opacity:0;filter:blur(6px);transition:opacity .8s var(--ease-out),filter .8s var(--ease-out);transition-delay:var(--stagger,0ms)}
  .js .scene__panels .panel.is-in{opacity:1;filter:none}
  .scene__panels .panel.ui--chips{flex-wrap:wrap;justify-content:center;align-content:center;border-radius:var(--radius-lg)}
  .mark::after{transition-delay:.3s}
}
@media (max-width:820px) and (max-height:700px){
  .scene__pin{padding-top:var(--space-7)}
  .scene__lead{display:none}
}

/* ---------- Elementos de la app en HTML ---------- */
.ui{
  font-family:var(--font-ui);font-size:14px;line-height:1.35;color:var(--text-primary);
  display:grid;gap:10px;
}
.panel.ui{padding:18px 20px;border-radius:var(--radius-lg)}
.ui__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui__h{font-weight:var(--fw-semibold);font-size:16px}
.ui__dim{color:var(--text-muted);font-size:13px}
.ui__dim b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.ui__lab{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ui__big{font-size:30px;font-weight:var(--fw-bold);line-height:1}
.ui__kcal{display:flex;align-items:baseline;gap:6px}
.ui__kcal b{font-size:40px;font-weight:var(--fw-light);letter-spacing:-.03em;line-height:1}
.ui__kcal > span{color:var(--text-muted);font-size:14px}
.ui__sep{height:1px;background:var(--panel-edge)}
.ui__plus{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ui__plus .i,.ui__ico .i{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ui__ico{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);color:var(--accent)}
.ui__ico .i{width:18px;height:18px}
.ui__macros{font-size:13px;font-weight:var(--fw-medium);padding:6px 12px;border-radius:var(--radius-pill);background:var(--panel-fill);width:max-content}
.ui__item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ui__item small{display:block;font-size:12px;margin-top:2px}
.ui__item em{font-style:normal;color:var(--text-muted);white-space:nowrap}
.ui__sport{display:flex;align-items:center;gap:12px;font-weight:var(--fw-medium)}
.ui__sport small{display:block;font-weight:var(--fw-regular);color:var(--text-muted);font-size:12px}
.ui__p{font-size:14px;line-height:1.45}
.ui__p b{font-weight:var(--fw-semibold)}
.ui__title{font-size:22px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.15}
.ui__greet{font-size:20px;letter-spacing:.06em;color:var(--text-muted);text-transform:uppercase}
.ui__greet b{letter-spacing:-.02em;font-size:30px;color:var(--text-strong);font-weight:var(--fw-semibold);margin-left:6px;text-transform:none}
.ui__brand{height:16px;width:auto}
i.mp,i.mc,i.mg,i.ma{font-style:normal;font-weight:var(--fw-semibold)}
.mp{color:var(--data-protein)}.mc{color:var(--data-carbs)}.mg{color:var(--data-fat)}.ma{color:var(--accent)}
.ui__lab.mp{color:var(--data-protein)}.ui__lab.mc{color:var(--data-carbs)}.ui__lab.mg{color:var(--data-fat)}.ui__lab.ma{color:var(--accent)}

.bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.bar i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:3px;transform-origin:left;transform:scaleX(var(--draw,1));transition:transform 1.1s var(--ease-out)}
.bar--p i{background:linear-gradient(90deg,var(--data-protein-tint),var(--data-protein));box-shadow:0 2px 6px rgba(47,163,124,.35)}
.bar--c i{background:linear-gradient(90deg,var(--data-carbs-tint),var(--data-carbs));box-shadow:0 2px 6px rgba(242,169,59,.35)}
.bar--g i{background:linear-gradient(90deg,var(--data-fat-tint),var(--data-fat));box-shadow:0 2px 6px rgba(77,157,255,.35)}
.bar--a i{background:linear-gradient(90deg,var(--accent-soft),var(--accent));box-shadow:0 2px 6px rgba(240,85,43,.35)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips--tight{gap:6px}.chips--center{justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:0 13px;border-radius:var(--radius-pill);
  background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);
  font-family:var(--font-ui);font-size:13px;font-weight:var(--fw-medium);color:var(--text-secondary);white-space:nowrap;
}
.chip .i{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chip--kcal{background:var(--action-tint-bg);box-shadow:none;color:var(--accent)}
.panel.ui--chips{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;padding:14px;border-radius:var(--radius-lg)}

/* «Esta semana» (WeekDots de E01): punto de 30 en un aro de 38; hecho = crema con
   check; hoy = aro de acento a 4 px. Debajo, las dos baldosas de días y entrenos. */
.ui__share{width:15px;height:15px;stroke:var(--text-muted);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wk{display:flex;justify-content:space-between}
.wk__d{display:grid;justify-items:center;gap:6px;font-size:11px;font-weight:var(--fw-semibold);color:#b4ada8}
.wk__d i{width:30px;height:30px;margin:4px;border-radius:50%;display:grid;place-items:center;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);color:#1a1817}
.wk__d .i{width:15px;height:15px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wk__d.is-done i{background:#f4ede7;box-shadow:none}
.wk__d.is-today{color:#f6f2ef}
.wk__d.is-today i{outline:2px solid var(--accent);outline-offset:4px}
.wk__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wk__tiles span{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-size:11px;color:#b4ada8}
.wk__tiles b{font-size:20px;font-weight:var(--fw-bold);line-height:1.25;color:#f6f2ef}

.note{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.note p{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;margin:0}
.note b{font-weight:var(--fw-semibold)}
.note__i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.note__i .i{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.note--ok{background:rgba(47,163,124,.10)}.note--ok .note__i{background:rgba(47,163,124,.22);color:var(--data-protein-tint)}
.note--warn{background:rgba(242,169,59,.10)}.note--warn .note__i{background:rgba(242,169,59,.22);color:var(--data-carbs-tint)}
.note--tip .note__i{background:var(--action-tint-bg);color:var(--accent)}

.spark{width:100%;height:70px;margin-top:4px}
.spark__line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spark__dot{fill:var(--accent)}
.spark__lab{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}

/* Recorrido (E03): el lienzo de la ficha del entreno; el punto llega al acabar el trazo. */
.route{padding:4px;border-radius:14px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.route svg{display:block;width:100%;height:auto;aspect-ratio:375/250}
.route__line{fill:none;stroke:var(--accent);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.route__dot{fill:var(--text-strong)}
.js .route__dot{opacity:0;transition:opacity .5s var(--ease-out) 1.1s}
.js .is-drawn + .route__dot{opacity:1}

/* ---------- Amigos (en el lienzo, con el formato de Cómo funciona) ----------
   Publicaciones del muro (A01): foto de ejemplo con su aro, título con insignia,
   celdas y el pie con me gusta y comentarios. Arriba, tu tarjeta con Publicar y
   las pestañas Siguiendo / Explorar; en A13 y A14, grupos de interruptores. */
.post__head{display:flex;align-items:center;gap:12px}
.av{flex:none;width:40px;height:40px;border-radius:50%;padding:2px;background:var(--ring,#2c2926)}
.av i{display:grid;place-items:end center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--photo,#2c2926);box-shadow:inset 0 0 0 2px #231410}
.av svg{width:80%;height:80%;fill:#fff}
.av--me{width:48px;height:48px}
.post__who{display:grid;gap:1px;font-size:16px;font-weight:var(--fw-semibold);line-height:1.25}
.post__who small{font-size:13px;font-weight:var(--fw-regular);color:var(--text-muted)}
.post__more{margin-left:auto;align-self:flex-start;width:20px;height:20px;margin-top:4px;stroke:var(--text-muted);stroke-width:3;fill:none;stroke-linecap:round}
.post__when{text-transform:none;letter-spacing:0;font-weight:var(--fw-medium)}
.post__title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.01em}
.post__badge{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(240,85,43,.22);color:var(--accent)}
.post__badge .i{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.post__cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.post__cells span{display:grid;gap:2px;padding:8px 12px;border-radius:14px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.post__cells b{font-size:16px;font-weight:var(--fw-bold);line-height:1.2}
.post__cells small{font-size:10px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.post__foot{display:flex;gap:20px;padding-top:10px;border-top:1px solid var(--panel-edge);font-size:14px;color:var(--text-muted)}
.post__foot span{display:flex;align-items:center;gap:8px}
.post__foot .i{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.amg__btns{display:flex;gap:8px}
.amg__btn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.amg__btn .i{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.amg__btn.has-dot::after{content:"";position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.amg__card{border-radius:24px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.amg__me{display:flex;align-items:center;gap:12px;padding:12px 14px}
.amg__me .post__who{font-size:18px;font-weight:var(--fw-bold)}
.amg__pub{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:var(--fw-semibold)}
.amg__pub .i{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.amg__tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-size:14px;font-weight:var(--fw-semibold);color:#b4ada8;text-align:center}
.amg__tabs span{padding:8px 0;border-radius:999px}
.amg__tabs .is-on{background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);color:#f6f2ef;font-weight:var(--fw-bold)}
.amg__post{display:grid;gap:8px;padding:16px}
.amg__title{font-size:17px;font-weight:var(--fw-bold);letter-spacing:-.01em}
.amg__item{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.amg__item small{margin-left:6px;font-size:13px;color:var(--text-muted)}
.amg__item em{font-style:normal;color:var(--text-muted)}
.amg__cells{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.amg__cells span{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.amg__cells b{font-size:15px;font-weight:var(--fw-bold)}
.amg__cells small{font-size:9.5px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
/* Las secciones de los ajustes: etiqueta con la marca de acento, como en la app. */
.amg__sec{display:flex;align-items:center;gap:8px;margin-top:4px}
.amg__sec::before{content:"";width:3px;height:12px;border-radius:1px;background:var(--accent)}
.amg__group{display:grid;padding:0 16px}
.amg__set{display:flex;align-items:center;gap:12px;padding:11px 0}
.amg__set + .amg__set{border-top:1px solid var(--panel-edge)}
.amg__set > span:first-child{display:grid;gap:2px;font-size:15px;font-weight:var(--fw-semibold)}
.amg__set small{font-size:12px;font-weight:var(--fw-regular);line-height:1.35;color:var(--text-muted)}
/* El interruptor de iOS de A14, encendido (verde de la app). */
.switch{flex:none;position:relative;width:44px;height:26px;margin-left:auto;border-radius:13px;background:rgba(120,120,128,.32)}
.switch i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.switch.is-on{background:#35c08f}
.switch.is-on i{transform:translateX(18px)}

/* ---------- Widgets (Widgets · inicio y bloqueo, 22 oct) ----------
   Cada widget es un trozo de Inicio: el fondo de Bivel (las cinco manchas
   radiales de BivelBackground, de abajo arriba al revés que en Figma) con su
   grano, el anillo, las barras y las PillButton. Medidas de iOS en un teléfono
   de 393: pequeño 158, mediano 338 × 158, radio 22. */
.widgets{padding:calc(8 * var(--u)) var(--gutter);text-align:center}
.wgrid,.lock{font-family:var(--font-ui)}
.wgrid{display:grid;gap:20px;justify-content:center}
.wrow{display:flex;gap:20px;justify-content:center}
.wdg{
  position:relative;overflow:hidden;display:grid;align-content:start;
  height:158px;padding:16px;border-radius:22px;text-align:left;color:#f6f2ef;
  background:
    radial-gradient(76% 88% at 50.9% 50.5%,rgba(0,0,0,.55),rgba(0,0,0,.22) 50%,rgba(0,0,0,0)),
    radial-gradient(70% 67% at 91.6% 2.3%,rgba(255,239,216,.24),rgba(255,239,216,.06) 50%,rgba(255,239,216,0)),
    radial-gradient(97% 88% at 15.3% 84.5%,rgba(140,31,2,.5),rgba(140,31,2,.18) 50%,rgba(140,31,2,0)),
    radial-gradient(88% 97% at 106.9% 44.6%,rgba(232,65,42,.3),rgba(232,65,42,.1) 50%,rgba(232,65,42,0)),
    radial-gradient(97% 99% at 10.2% 14.1%,rgba(192,52,26,.85),rgba(192,52,26,.34) 50%,rgba(192,52,26,0)),
    #0e0a09;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.55);
}
.wdg::before{content:"";position:absolute;inset:0;background:url(../../img/grain.png) repeat;opacity:.3;pointer-events:none}
.wdg > *{position:relative}
.wdg--s{width:158px}
.wdg--m{width:338px}
.wdg .bar{background:#2c2926}
/* El anillo de calorías (CalorieRing de 01 · Inicio a 126): 835 de 2053, 146°. */
.wring{position:relative;flex:none;width:126px;height:126px}
.wring svg{display:block;width:100%;height:100%;overflow:visible}
.wring__track{fill:none;stroke:#2c2926;stroke-width:8}
.wring__arc{fill:none;stroke:url(#wring-g);stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(240,85,43,.55))}
.wring__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.wring__c b{font-size:34px;font-weight:var(--fw-bold);letter-spacing:-1px;line-height:1.2}
.wring__c span{font-size:12px;color:#b4ada8}
.wdg--day{display:flex;align-items:center;gap:20px}
.wmacros{flex:1;display:grid;gap:14px}
.wmacro{display:grid;gap:6px}
.wmacro__row{display:flex;align-items:baseline;gap:3px}
.wmacro__row i{margin-right:auto;font-style:normal;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.8px}
.wmacro__row b{font-size:13px;font-weight:var(--fw-semibold)}
.wmacro__row small{font-size:11px;color:#8a827c}
.wtitle{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:var(--fw-bold)}
.wtitle::before{content:"";width:4px;height:15px;border-radius:1px;background:var(--accent)}
.wval{display:flex;align-items:baseline;gap:4px}
.wval b{font-size:34px;font-weight:var(--fw-bold);letter-spacing:-1px;line-height:1.24}
.wval span{font-size:13px;color:#b4ada8}
.wdg--water .wval{margin-top:12px}
.wdg--water .bar{margin-top:10px}
.wwater{display:flex;gap:8px;margin-top:7px}
.wwater span{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;height:32px;border-radius:999px;background:rgba(240,85,43,.14);font-size:11px;font-weight:var(--fw-medium);color:#b4ada8}
.wwater .i{width:14px;height:14px;stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round}
.wadd__head{display:flex;align-items:center;justify-content:space-between}
.wadd__head .wval{gap:6px}
.wadd__head .wval span{font-weight:var(--fw-medium)}
.wstreak{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-size:12px;font-weight:var(--fw-semibold);color:#b4ada8}
.wstreak .i{width:12px;height:12px;fill:var(--accent);stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
.wdg--add .bar{margin-top:8px}
.wadd__eaten{margin-top:6px;font-size:11px;color:#b4ada8}
.wadd__eaten i{font-style:normal;color:#8a827c}
.wpills{display:flex;gap:8px;margin-top:14px}
.wpill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 8px;border-radius:999px;background:#1a1817;box-shadow:inset 0 0 0 1px #2c2926;font-size:13px;font-weight:var(--fw-semibold);color:#f6f2ef;white-space:nowrap}
.wpill .i{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wpill--go{flex:none;padding:0 14px}
.wpill--go .i{fill:currentColor;stroke:none}
.wtoday__eyebrow{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent)}
.wtoday__name{margin-top:2px;font-size:22px;font-weight:var(--fw-bold);line-height:1.23}
.wtoday__meta{margin-top:2px;font-size:12px;color:#b4ada8}
.wtoday__foot{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.wweek{display:flex;gap:5px}
.wweek i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:var(--fw-semibold);color:#b4ada8;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.wweek i.is-done{background:#f4ede7;box-shadow:none;color:#1a1817}
.wweek i.is-today{color:#f6f2ef;box-shadow:inset 0 0 0 2px var(--accent)}
.wweek .i{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* La pantalla de bloqueo: la fecha con el widget en línea, la hora y una fila
   con dos circulares y uno rectangular (los cuatro huecos que da iOS). */
.lock{display:grid;justify-items:center;margin-top:calc(4 * var(--u));color:#fff}
.lock__date,.lock__time{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif}
.lock__date{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600}
.lock__date span{display:inline-flex;align-items:center;gap:4px}
.lock__date .i{width:16px;height:16px;fill:#fff;stroke:#fff;stroke-width:1.2;stroke-linejoin:round}
.lock__time{margin:2px 0 16px;font-size:96px;font-weight:600;letter-spacing:-.02em;line-height:1}
.lock__row{display:flex;align-items:center;gap:12px}
.lwc{position:relative;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lwc > svg{position:absolute;inset:0;width:100%;height:100%}
.lwc__track{fill:none;stroke:rgba(255,255,255,.28);stroke-width:5}
.lwc__arc{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.lwc__c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;line-height:1.15}
.lwc__c small{font-size:10px;font-weight:var(--fw-medium);color:rgba(255,255,255,.72)}
.lwc__c b{font-size:15px;font-weight:var(--fw-semibold)}
.lwc__c .i{width:12px;height:12px;fill:#fff;stroke:none}
.lwr{display:grid;align-content:center;gap:8px;width:160px;height:72px;text-align:left}
.lwr__kcal{display:flex;align-items:baseline;gap:5px;font-size:11px;color:rgba(255,255,255,.72)}
.lwr__kcal b{font-size:22px;font-weight:var(--fw-bold);color:#fff}
.lwr__macros{display:flex;gap:8px}
.lwr__macros span{flex:1;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:var(--fw-bold);color:rgba(255,255,255,.72)}
.lwr__macros i{flex:1;height:4px;border-radius:2px;background:linear-gradient(90deg,#fff calc(max(var(--v),.14) * 100%),rgba(255,255,255,.28) 0)}
@media (max-width:820px){
  .wrow{flex-wrap:wrap}
  .wdg--day{order:-1}
  .lock__time{font-size:76px}
}

/* Trazos que se dibujan y barras que crecen al entrar */
.js [data-draw]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.4s var(--ease-out)}
.js [data-draw].is-drawn{stroke-dashoffset:0}
.js .bar i{--draw:0}
.js .bar.is-drawn i{--draw:1}

/* ---------- Cómo funciona ---------- */
.how{position:relative;height:380vh}
.how__pin{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:calc(4 * var(--u));align-items:center;
  padding:0 var(--gutter);max-width:var(--page-max);margin:0 auto;
}
/* El lienzo entra solo y centrado; con el scroll (--pin 0→1) se va a su columna
   de la derecha y destapa la copia. --shift lo mide site.js (px hasta el centro). */
.how__canvas{
  position:relative;aspect-ratio:1/1;max-height:80vh;width:100%;
  border-radius:calc(2 * var(--u));overflow:hidden;
  transform:translate3d(calc(var(--shift,0px) * (1 - var(--pin,0))),0,0) scale(calc(.96 + .04 * var(--in,1)));
  opacity:var(--in,1);
  will-change:transform;
}
.how__copy{
  opacity:var(--pin,0);
  transform:translate3d(calc(-24px * (1 - var(--pin,0))),0,0);
  filter:blur(calc(6px * (1 - var(--pin,0))));
}
.how__screen{
  position:absolute;inset:0;display:grid;place-items:center;padding:calc(2.4 * var(--u));
  opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out);
}
.how__screen.is-on{opacity:1;transform:none;filter:none}
.ui--flat{width:min(100%,360px);gap:10px}
.ui--flat .ui__title{margin:2px 0 6px}
.opt{
  display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:18px;
  background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-weight:var(--fw-medium);font-size:15px;
}
.opt__r{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--panel-edge);display:grid;place-items:center}
.opt__r .i{width:12px;height:12px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.opt.is-sel{background:var(--action-tint-bg);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.opt.is-sel .ui__ico{background:rgba(240,85,43,.18);box-shadow:none}
.opt.is-sel .opt__r{background:var(--accent);color:#fff;box-shadow:none}
.ringcard{display:grid;gap:14px;justify-items:center;padding:20px 20px 18px;border-radius:26px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.ring{position:relative;width:200px;height:200px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:7}
.ring__arc{fill:none;stroke:url(#ring-g);stroke-width:7;stroke-linecap:round;stroke-dasharray:552.9;stroke-dashoffset:calc(552.9 * (1 - var(--v) * var(--draw,1)));filter:drop-shadow(0 0 8px rgba(240,85,43,.5));transition:stroke-dashoffset 1.4s var(--ease-out)}
.js .ring__arc{--draw:0}.js .is-on .ring__arc{--draw:1}
.ring__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.ring__c b{font-size:52px;font-weight:var(--fw-light);letter-spacing:-.03em;line-height:1}
.ring__c span{font-size:14px;color:var(--text-secondary)}
.ring__c small{font-size:11px;color:var(--text-muted)}
.ui__row--add{gap:10px}
.addfood{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:18px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.addcam{flex:none;width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.addfood .i,.addcam .i{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bubble{display:grid;gap:10px;padding:14px;border-radius:22px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.composer--mini{min-height:54px;padding:0 60px 0 18px;border-radius:27px;justify-content:flex-start;text-align:left;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px}
.composer--mini .composer__placeholder{position:static;padding:0;align-self:center}
.composer--mini .composer__send{width:40px;height:40px;right:7px;bottom:7px}
/* La barra de pestañas del 21 oct (BivelTabBar · Oscuro, Activa=Inicio): 279 de
   pastilla + 10 de aire + 64 de cúpula. La activa es una píldora de 118 con icono
   y etiqueta; las otras, 51. Solo va en Inicio: en el chat no cabe en el lienzo. */
.tabbar{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;margin-top:6px}
/* Las pestañas encogen a la vez si el lienzo es más estrecho que 353 (móvil). */
.tabbar__bar{flex:0 1 279px;min-width:0;display:flex;align-items:center;height:64px;padding:0 4px;border-radius:999px;background:rgba(16,14,13,.66);box-shadow:0 8px 24px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.tabbar__tab{flex:1 1 51px;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;height:64px;color:#8a827c}
.tabbar__tab.is-on{flex-basis:118px;height:56px;border-radius:999px;background:rgba(246,242,239,.12);color:#f6f2ef;font-size:13px;font-weight:var(--fw-medium)}
.tabbar__tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* La cúpula de Bivel IA: bisel angular (crema a los lados, rojo arriba y abajo),
   aro oscuro solo arriba y abajo, cuerpo radial, luz desde la derecha y la B. */
.tabbar__ia{
  position:relative;flex:none;width:64px;height:64px;border-radius:50%;
  background:conic-gradient(from 90deg,#f4ede7,#f1d3ca 8%,#ec6a52 17%,#e8553a 25%,#ea6249 33%,#efcdc3 42%,#f4ede7 50%,#efcfc5 58%,#e65840 67%,#e64a2e 75%,#e9634b 83%,#f1d6cd 92%,#f4ede7);
  box-shadow:-1.3px 1.7px 3.2px rgba(0,0,0,.55),-3.5px 5.1px 20.5px -4.5px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(244,237,231,.6);
}
.tabbar__ia::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(138,28,8,0) 92%,rgba(138,28,8,.72) 98%,rgba(138,28,8,.61));
  -webkit-mask:conic-gradient(from 90deg,transparent 8%,rgba(0,0,0,.45) 17%,rgba(0,0,0,.62) 25%,rgba(0,0,0,.45) 33%,transparent 42%,transparent 58%,rgba(0,0,0,.8) 67%,#000 75%,rgba(0,0,0,.8) 83%,transparent 92%);
          mask:conic-gradient(from 90deg,transparent 8%,rgba(0,0,0,.45) 17%,rgba(0,0,0,.62) 25%,rgba(0,0,0,.45) 33%,transparent 42%,transparent 58%,rgba(0,0,0,.8) 67%,#000 75%,rgba(0,0,0,.8) 83%,transparent 92%);
}
.tabbar__ia::after{
  content:"";position:absolute;inset:2.5px;border-radius:50%;
  background:
    linear-gradient(90deg,rgba(80,20,10,.09),rgba(80,20,10,0) 50%,rgba(244,237,231,0) 50%,rgba(244,237,231,.12)),
    radial-gradient(closest-side,#d02f13,#d33417 11%,#e6381a 33%,#e84c30 54%,#eb644c 76%,#ed745e 87%,#ee7c67 93%,#ed705a);
}
.tabbar__ia svg{position:absolute;z-index:1;left:21px;top:21px;width:22px;height:22px;fill:#f4ede7;filter:drop-shadow(-.3px .3px .3px rgba(248,226,218,.95)) drop-shadow(.3px -.3px .6px rgba(120,25,10,.18))}

.how__copy .eyebrow{margin-bottom:calc(1 * var(--u))}
.how__copy .h1{max-width:calc(30 * var(--u))}
.how__copy .hero__actions{margin-top:calc(1.5 * var(--u))}
ol.steps{margin-top:calc(2.5 * var(--u));display:grid;gap:10px;max-width:calc(30 * var(--u))}
.step{border-radius:18px;background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-edge);transition:box-shadow var(--dur) var(--ease)}
.step.is-on{box-shadow:inset 0 0 0 1px var(--glass-edge-strong)}
.step__head{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;text-align:left;font-family:var(--font-ui);font-size:15px;font-weight:var(--fw-semibold);color:var(--text-primary)}
.step__n{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);font-size:12px;color:var(--text-muted);transition:all var(--dur) var(--ease)}
.step.is-on .step__n{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.step__body{
  padding:0 18px 0 66px;font-size:var(--fs-body);line-height:1.5;color:var(--text-muted);
  max-height:0;overflow:hidden;opacity:0;transition:max-height var(--dur-slow) var(--ease),opacity var(--dur) var(--ease),padding var(--dur-slow) var(--ease);
}
.step.is-on .step__body{max-height:160px;opacity:1;padding-bottom:16px}
@media (max-width:980px){
  .how{height:auto}
  .how__pin{position:static;height:auto;grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-7) var(--gutter) var(--space-9)}
  .how__canvas{aspect-ratio:auto;height:auto;max-height:none;order:-1;transform:none;opacity:1}
  .how__screen{position:relative;inset:auto;display:none;padding:calc(1.6 * var(--u)) calc(1.2 * var(--u));opacity:1;transform:none;filter:none}
  .how__screen.is-on{display:grid}
  .how__copy{opacity:1;transform:none;filter:none}
  .how__copy .h1,ol.steps{max-width:none}
}

/* ---------- Privacidad ---------- */
.claim{position:relative;min-height:90vh;display:grid;place-items:center;padding:calc(8 * var(--u)) var(--gutter);overflow:hidden}
.claim__arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.claim__arc path{fill:none;stroke:url(#arc-g);stroke-width:64;stroke-linecap:round;opacity:.9}
.js .claim__path{stroke-dasharray:var(--len,3000);stroke-dashoffset:calc(var(--len,3000) * (1 - var(--p,0)))}
.claim__copy{position:relative;text-align:center;max-width:calc(50 * var(--u))}
.claim__copy .eyebrow{margin-bottom:calc(1 * var(--u))}
.claim__copy .lead{max-width:calc(29.5 * var(--u));margin:calc(1.25 * var(--u)) auto 0;color:var(--text-muted)}
.claim__copy .hero__actions{margin-top:calc(1.5 * var(--u))}

/* ---------- Precio ---------- */
.price{padding:calc(8 * var(--u)) var(--gutter);max-width:var(--page-max);margin:0 auto}
ol.trial{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:calc(48 * var(--u));margin:0 auto calc(2.5 * var(--u));font-family:var(--font-ui)}
.trial li{padding:14px 16px;border-radius:16px;background:var(--panel-fill);box-shadow:inset 0 0 0 1px var(--panel-edge);display:grid;gap:4px;font-size:var(--fs-caption);color:var(--text-muted)}
.trial b{color:var(--text-primary);font-size:var(--fs-label)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:calc(48 * var(--u));margin:0 auto}
.plan{position:relative;padding:calc(1.8 * var(--u));border-radius:calc(1.5 * var(--u));display:grid;gap:12px;align-content:start;font-family:var(--font-ui)}
.plan--best{box-shadow:inset 0 0 0 1px var(--accent),var(--glass-shadow)}
.plan__badge{position:absolute;top:calc(1.2 * var(--u));right:calc(1.2 * var(--u));padding:6px 12px;border-radius:var(--radius-pill);background:var(--action-tint-bg);color:var(--accent);font-size:12px;font-weight:var(--fw-semibold)}
.plan__name{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-muted)}
.plan__price{display:flex;align-items:baseline;gap:6px}
.plan__price b{font-family:var(--font-sans);font-size:max(36px,calc(3 * var(--u)));font-weight:var(--fw-light);letter-spacing:-.03em;line-height:1}
.plan__price span{color:var(--text-muted)}
ul.plan__list{display:grid;gap:8px;margin:8px 0 12px;font-size:var(--fs-body);color:var(--text-secondary)}
.plan__list li{padding-left:22px;position:relative}
.plan__list li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.plan .btn{justify-self:start}
.price__note{max-width:calc(40 * var(--u));margin:calc(1.5 * var(--u)) auto 0;text-align:center;color:var(--text-faint)}
@media (max-width:640px){.trial,.plans{grid-template-columns:1fr}}

/* ---------- Lista de espera ---------- */
.wait{padding:calc(8 * var(--u)) var(--gutter);text-align:center}
.wl-form{display:flex;gap:8px;padding:8px;border-radius:var(--radius-pill);max-width:calc(32 * var(--u));margin:0 auto}
.wl-form__field{flex:1;min-width:0;background:none;border:0;padding:0 18px;font:inherit;font-family:var(--font-ui);font-size:var(--fs-body);color:var(--text-primary)}
.wl-form__field::placeholder{color:var(--text-faint)}
.wl-form__field:focus{outline:none}
#wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{min-height:1.6em;margin-top:12px;font-family:var(--font-ui);font-size:var(--fs-label);color:var(--text-secondary)}
.msg.err{color:var(--accent-soft)}.msg.ok{color:var(--data-protein-tint)}
.wait .caption{margin-top:6px;color:var(--text-faint)}
@media (max-width:480px){.wl-form{flex-direction:column;border-radius:24px}.wl-form__field{min-height:44px}}

/* ---------- Preguntas ---------- */
.faq{padding:calc(8 * var(--u)) var(--gutter);max-width:calc(44 * var(--u));margin:0 auto;text-align:center}
.faq__copy .eyebrow{margin-bottom:calc(1 * var(--u))}
.faq__copy .lead{margin:calc(1.25 * var(--u)) auto calc(2.5 * var(--u));color:var(--text-muted);max-width:calc(29.5 * var(--u))}
.faq__list{display:grid;gap:8px;text-align:left}
.q{border-radius:16px;background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-edge);font-family:var(--font-ui)}
.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-primary)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-size:18px;color:var(--text-muted);transition:transform var(--dur) var(--ease)}
.q[open] summary::after{transform:rotate(45deg)}
.q p{padding:0 18px 16px;font-size:var(--fs-body);line-height:1.55;color:var(--text-muted)}


/* ---------- Pie ---------- */
.site-foot{padding:calc(4 * var(--u)) var(--gutter) calc(2 * var(--u));max-width:var(--page-max);margin:0 auto;border-top:1px solid var(--panel-edge);font-family:var(--font-ui)}
.site-foot__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot__brand{height:22px;width:auto}
.site-foot__tag{color:var(--text-muted);font-size:var(--fs-label)}
.site-foot__nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:calc(2 * var(--u));font-size:var(--fs-label);color:var(--text-secondary)}
.site-foot__nav a:hover{color:var(--text-strong)}
.site-foot__legal{margin-top:calc(1.5 * var(--u));font-size:var(--fs-caption);color:var(--text-faint)}