/* ============================================================================
   Bivel — web v2 · composición
   Todo valor sale de tokens.css. La referencia de lenguaje es linearity.io:
   fondo vivo, titulares grandes centrados y el producto (la interfaz, no un
   móvil) como protagonista.
   ========================================================================== */

@font-face{font-family:"Open Sauce One";font-style:normal;font-weight:400;font-display:swap;src:url(../../fonts/open-sauce-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sauce One";font-style:normal;font-weight:500;font-display:swap;src:url(../../fonts/open-sauce-one-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sauce One";font-style:normal;font-weight:600;font-display:swap;src:url(../../fonts/open-sauce-one-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sauce One";font-style:normal;font-weight:700;font-display:swap;src:url(../../fonts/open-sauce-one-latin-700-normal.woff2) format("woff2")}

/* ---------- Reset y base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font:var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-sans);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}
.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}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-2) var(--space-4);background:var(--action-primary-bg);color:var(--action-primary-fg);border-radius:var(--radius-pill)}
.skip-link:focus{top:var(--space-4)}

/* ---------- Fondo vivo ----------
   Un canvas WebGL fijo detrás de todo (site.js → Fondo) y el grano encima.
   Sin WebGL o con reduced-motion se queda el degradado estático de .bg--still. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__canvas{position:absolute;inset:0;width:100%;height:100%}
.bg--still{
  background:
    radial-gradient(52% 44% at 8% 12%,rgba(192,52,26,.85) 0%,rgba(192,52,26,.34) 50%,transparent 100%),
    radial-gradient(38% 40% at 54% 40%,rgba(232,65,42,.30) 0%,rgba(232,65,42,.10) 50%,transparent 100%),
    radial-gradient(44% 38% at 10% 90%,rgba(140,31,2,.50) 0%,rgba(140,31,2,.18) 50%,transparent 100%),
    radial-gradient(32% 30% at 92% 4%,rgba(255,239,216,.24) 0%,rgba(255,239,216,.06) 50%,transparent 100%),
    var(--bg-base);
}
.bg__grain{
  position:absolute;inset:0;
  background:url(../../img/grain.png) repeat;
  background-size:256px 256px;
  opacity:var(--bg-grain);
  mix-blend-mode:overlay;
}

.site{position:relative;z-index:1}

/* ---------- Tipos ---------- */
.display{
  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;
}
.lead{font-size:var(--fs-lead);line-height:var(--lh-relaxed);color:var(--text-secondary);text-wrap:pretty}
.caption{font-size:var(--fs-caption);color:var(--text-muted)}
.eyebrow{
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:calc(3 * var(--u));padding:0 calc(1.5 * var(--u));border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:var(--fs-ui);line-height:1;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover)}
.btn--glass{
  background:var(--glass-fill);color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
}
.btn--glass:hover{box-shadow:inset 0 0 0 1px var(--glass-edge-strong),var(--glass-shadow)}
.btn--sm{min-height:calc(2.6 * var(--u));padding:0 calc(1.2 * var(--u))}
.btn .i{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Cabecera ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:20;
  padding:var(--space-4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  transition:transform var(--dur) var(--ease);
}
.site-head.is-away{transform:translateY(-110%)}
.site-head::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-24px;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg-base) 55%,transparent);opacity:0;transition:opacity var(--dur) var(--ease)}
@media (max-width:820px){.site-head.is-stuck::before{opacity:.92}}
.site-head__brand{display:flex;align-items:center;padding:6px 0}
.site-head__brand img{height:20px;width:auto}
.site-nav{
  display:flex;align-items:center;gap:var(--space-1);
  padding:6px;border-radius:var(--radius-pill);
  background:var(--bar-fill);box-shadow:inset 0 0 0 1px var(--bar-edge),var(--bar-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
}
.site-nav a{
  padding:8px 14px;border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-size:var(--fs-ui);font-weight:var(--fw-medium);color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.site-nav a:hover{color:var(--text-strong);background:var(--panel-fill)}
.site-head__cta{display:flex;align-items:center;gap:var(--space-2)}
.site-head__toggle{display:none;width:44px;height:44px;border-radius:50%;background:var(--bar-fill);box-shadow:inset 0 0 0 1px var(--bar-edge)}
.site-head__toggle .i{width:20px;height:20px;margin:auto;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media (max-width:820px){
  .site-nav{display:none}
  .site-head.is-open .site-nav{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 4px);
    padding:var(--space-2);border-radius:var(--radius-lg);
  }
  .site-head.is-open .site-nav a{padding:12px 16px}
  .site-head__toggle{display:grid}
  .site-head__cta .btn--primary{display:none}
}

/* ---------- Hero ----------
   Orden y medidas de la referencia a 1440: titular (34 px) · caja (489×141,
   17 px después) · párrafo (max 405 px) · botones (41 px de alto). Todo en --u. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(6 * var(--u)) var(--gutter) calc(5 * var(--u));
  text-align:center;
}
.hero__title{max-width:calc(50 * var(--u));margin-bottom:calc(2.5 * var(--u))}
.hero__lead{max-width:calc(29.5 * var(--u));margin:calc(1.25 * var(--u)) auto 0;color:var(--text-muted);line-height:1.45}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(.75 * var(--u));margin-top:calc(1.25 * var(--u))}
.hero__meta{margin-top:calc(1.25 * var(--u));font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--text-faint)}
.hero__stage{width:min(100%,calc(35.68 * var(--u)));text-align:left}
.hero__cue{
  position:absolute;left:50%;bottom:calc(1.5 * var(--u));transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;
  font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--text-faint);
  transition:opacity var(--dur) var(--ease);
}
.hero__cue.is-gone{opacity:0;pointer-events:none}
.sync-strip{padding:calc(2 * var(--u)) var(--gutter) calc(4 * var(--u));text-align:center;font-family:var(--font-ui)}
.sync-strip__label{font-size:var(--fs-caption);color:var(--text-faint);margin-bottom:calc(1.2 * var(--u))}
.sync-strip__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(1 * var(--u)) calc(1.6 * var(--u))}
.sync-strip__item{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-secondary)}
.sync-strip__item img{width:calc(2 * var(--u));height:auto;border-radius:22%}
.sync-strip__arrow{color:var(--text-faint)}
/* Apple Salud o Health Connect, una por plataforma; entre Salud y Bivel, los dos sentidos.
   Por debajo de 980 px ya no cabe en una línea: va de arriba abajo, centrada, con las flechas giradas. */
.sync-strip__group{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(1 * var(--u)) calc(1.6 * var(--u))}
.sync-strip__or{font-size:var(--fs-label);color:var(--text-muted);margin:0 calc(-.8 * var(--u))}
.sync-strip__both{display:inline-grid;gap:2px;font-size:var(--fs-caption);line-height:1.3;color:var(--text-muted);white-space:nowrap}
.sync-strip__both span:first-child{text-align:left}
.sync-strip__both span:last-child{text-align:right}
.sync-strip__both i{display:inline-block;font-style:normal;color:var(--text-faint)}
@media (max-width:980px){
  .sync-strip__logos{flex-direction:column;gap:14px}
  .sync-strip__group{gap:12px 18px}
  .sync-strip__or{margin:0}
  .sync-strip__arrow,.sync-strip__both i{transform:rotate(90deg)}
  .sync-strip__both{grid-auto-flow:column;gap:28px}
}
.hero__cue .i{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(-2px);opacity:.6}50%{transform:translateY(3px);opacity:1}}

/* ---------- El composer (03.1 · Bivel IA, tema oscuro) ----------
   Cristal: relleno ink @72 %, canto crema @18 %, sombra (0,6) 14. Medidas de
   la caja de la referencia: padding 1u, radio 1,5u, alto 10,3u, botón 2,25u. */
.glass{
  background:var(--glass-fill);
  border-radius:var(--radius-xl);
  box-shadow:inset 0 0 0 1px var(--glass-edge),inset 0 1px 0 rgba(244,237,231,.10),var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
}
.composer{
  position:relative;
  font-family:var(--font-ui);
  border-radius:calc(1.5 * var(--u));
  padding:calc(1 * var(--u)) calc(3.75 * var(--u)) calc(1 * var(--u)) calc(1.15 * var(--u));
  min-height:calc(10.3 * var(--u));
  display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;
}
.composer__field{
  position:relative;flex:1;padding:0;
  font-size:max(15px,calc(1 * var(--u)));line-height:1.5;color:var(--text-primary);
  overflow-wrap:anywhere;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.composer.is-clearing .composer__field{opacity:0;transform:translateY(-6px)}
.composer__placeholder{position:absolute;inset:0;padding:0;color:var(--text-faint);transition:opacity var(--dur-fast) var(--ease)}
.composer__text .wd{display:inline-block;white-space:nowrap}
.composer__text .ch{display:inline-block;animation:ch .32s var(--ease-out) both}
@keyframes ch{from{opacity:0;transform:translateY(.25em) scale(1.06);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.composer.is-typing .composer__placeholder{opacity:0}
.composer__caret{
  display:inline-block;width:2px;height:1.1em;margin-left:1px;vertical-align:-.16em;
  background:var(--accent);border-radius:1px;
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{to{visibility:hidden}}
.composer__send{
  position:absolute;right:calc(1 * var(--u));bottom:calc(1 * var(--u));
  width:calc(2.25 * var(--u));height:calc(2.25 * var(--u));border-radius:50%;
  background:var(--action-accent-bg);color:var(--action-accent-fg);
  display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(240,85,43,.45);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease);
}
.composer__send .i{width:55%;height:55%;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.composer.is-sent .composer__send{transform:scale(.86);box-shadow:0 2px 6px rgba(240,85,43,.3)}

@media (max-width:640px){
  .hero{padding-top:calc(var(--space-9) - 8px);padding-bottom:calc(5 * var(--u))}
}

/* Modo quieto (?still): todo en su estado final, sin transiciones. */
.still *,.still *::before,.still *::after{transition:none !important;animation:none !important}

/* ---------- Entradas ---------- */
.js .reveal{opacity:0;transform:translateY(18px);filter:blur(8px)}
.js .reveal.is-in{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.js .reveal[data-reveal="words"] .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px)}
.js .reveal[data-reveal="words"].is-in .w{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);transition-delay:var(--w-delay)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal[data-reveal="words"] .w{opacity:1;transform:none;filter:none;transition:none}
    .hero__cue .i,.composer__caret,.composer__text .ch{animation:none}
}