/* ============================================================================
   biio.fit — marketing landing (VITA-first, Spanish).

   The token block below is the SAME names and the SAME values as
   app/src/styles/tokens.css, so biio.fit and app.biio.fit are one system
   rather than two that happen to agree. Keep them in sync: if a value moves
   in tokens.css, it moves here. Everything after the token block is
   landing-only — the light sections, the section rhythm, and the marketing
   components the app has no use for.

   Rules honored: lime = action/emphasis only (never lime text on white);
   blue = data state only; Oswald 700 uppercase display; Inter body; near-sharp
   corners; depth from surface steps + hairlines, not shadows.
   Dependency-free: no build, no framework.
   ========================================================================== */

:root {
  /* ---- Mirrored from app/src/styles/tokens.css ---- */

  /* Surfaces (near-monochrome, stepped) */
  --c-black: #050505;
  --c-ink: #151515;
  --c-panel: #202020;
  --c-offwhite: #f4f4f1;
  --c-white: #ffffff;

  /* Action colors */
  --c-lime: #c8ff00;   /* CTAs, emphasis, single key words. NEVER on white. */
  --c-blue: #1f5dff;   /* schedule "core" tier states only — not a general brand color */

  /* Hairlines & depth (surfaces + 1px lines, not shadows) */
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-dark: rgba(0, 0, 0, 0.14);

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; /* 700 uppercase condensed */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;      /* 500–800, never uppercase in paragraphs */

  /* Radius: near-sharp */
  --r-btn: 4px;
  --r-card: 8px;
  --r-pill: 999px; /* chips / WhatsApp FAB only */

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- Landing-only: the light sections the app never renders ---- */

  /* Secondary text. Both are measured against their own surface, not guessed:
     --c-dim on --c-offwhite is 6.1:1, --c-dim-on-dark on --c-black is 10.4:1,
     and --c-faint (fine print) still clears 6.4:1. */
  --c-dim: #5c5c5c;
  --c-line: #dcdcd8;
  --c-dim-on-dark: rgba(255, 255, 255, 0.72);
  --c-faint: rgba(255, 255, 255, 0.56);

  /* The lime CTA halo. Offset + blur only — a zero-offset ring is a border
     wearing a shadow's clothes, so it is not one of the layers. */
  --glow-lime: 0 12px 32px rgba(200, 255, 0, 0.18);

  --shell: min(1180px, 100vw - 40px);
  --section-pad: clamp(72px, 9vw, 116px);
  --topbar-h: 68px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-offwhite);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.shell { width: var(--shell); margin: 0 auto; }

/* Anchored sections must clear the fixed header, or the nav drops each
   heading underneath it. */
[id] { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }

/* Keyboard focus, same ring as the SPA (tokens.css). The landing shipped
   without one, which left every control invisible to keyboard users on the
   near-black surfaces. */
:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 2px;
  border-radius: var(--r-btn);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Bypass block (WCAG 2.4.1) — the first tab stop on a page whose nav sits
   above six long sections. */
.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 60;
  transform: translateY(-200%);
  background: var(--c-lime); color: var(--c-black);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 15px; letter-spacing: 0.02em;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn); text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- display type ---- */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; letter-spacing: 0.01em; margin: 0;
}
.lime { color: var(--c-lime); }

/* Section chip. Kept only where it carries something the heading does not —
   it identifies the product or names the concept. Where it merely restated
   the heading below it, it is gone. */
.eyebrow {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 16px; letter-spacing: 0.04em; color: var(--c-lime);
  background: var(--c-black); display: inline-block; padding: var(--sp-1) var(--sp-3);
}
.eyebrow.on-light { color: var(--c-black); background: var(--c-lime); }

/* ---- icons ----
   One authored family: 24px box, 1.75 stroke, round caps, currentColor.
   The WhatsApp mark is deliberately outside it — a brand glyph is not an
   interface icon and must keep its own shape. */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 2px solid transparent;
  border-radius: var(--r-btn); cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: var(--c-black); background: var(--c-lime); box-shadow: var(--glow-lime); }
.btn--ghost { color: var(--c-white); border-color: rgba(255, 255, 255, 0.72); background: rgba(0, 0, 0, 0.24); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn--outline { color: var(--c-ink); border-color: var(--c-ink); background: transparent; }
.btn--outline:hover { background: var(--c-ink); color: var(--c-offwhite); }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 17px; }

/* ---- fixed header ---- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.72));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.topbar .shell { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); }
/* The drawn BiiO lockup (scripts/brand/gen-logo.py). Both places it appears —
   topbar and footer — sit on a dark surface, so the letters stay white and the
   "ii" keeps the lime accent. Sized here rather than in the SVG so the footer
   can carry its own scale. */
/* min-height keeps the link a legal target (WCAG 2.2 AA 2.5.8, 24px): the
   drawn lockup is only 21px tall, where the old text wordmark got there via
   its line box. */
.wordmark { display: flex; align-items: center; text-decoration: none; min-height: 24px; }
.wordmark-svg { height: 21px; width: auto; display: block; overflow: visible; }
.wordmark .wm-letter { fill: var(--c-white); }
.wordmark .wm-accent { fill: var(--c-lime); }
.nav { display: flex; gap: var(--sp-5); align-items: center; }
.nav .navlink {
  display: inline-flex; align-items: center; min-height: 24px; padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 15px; color: rgba(255, 255, 255, 0.82); text-decoration: none;
}
.nav .navlink:hover { color: var(--c-lime); }
@media (max-width: 820px) { .nav .navlink { display: none; } }

/* ---- hero ---- */
.hero {
  position: relative; color: var(--c-white);
  background: var(--c-black);
  padding: calc(var(--topbar-h) + var(--section-pad)) 0 var(--section-pad);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 500px at 75% -10%, rgba(200, 255, 0, 0.1), transparent 60%),
    linear-gradient(180deg, #0a0a0a, var(--c-black));
}
.hero .shell { position: relative; z-index: 1; max-width: 860px; }
.hero h1 { font-size: clamp(52px, 9vw, 108px); line-height: 0.92; margin: var(--sp-4) 0 0; }
.hero .sub {
  font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; line-height: 1.5;
  color: rgba(255, 255, 255, 0.82); max-width: 620px; margin: var(--sp-5) 0 0;
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; }
/* Stacked CTAs of different label lengths read as ragged edges. On one column
   they get one width. */
@media (max-width: 520px) { .cta-row .btn { width: 100%; } }
.hero .trust {
  margin: var(--sp-4) 0 0; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-dim-on-dark);
}

/* ---- proof band ----
   Four product facts, not social proof: they are the spec of the offer.
   PRODUCT.md forbids inventing anything that reads as a trainee statistic. */
.metrics { background: var(--c-ink); color: var(--c-white); }
.metrics .grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metrics .cell { padding: var(--sp-6) var(--sp-5); border-right: 1px solid rgba(255, 255, 255, 0.12); }
.metrics .cell:last-child { border-right: 0; }
.metrics .stat {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 5vw, 54px); line-height: 0.95; color: var(--c-lime);
}
.metrics .lbl { margin-top: var(--sp-2); font-weight: 700; font-size: 14px; color: var(--c-dim-on-dark); }
@media (max-width: 720px) {
  .metrics .grid { grid-template-columns: repeat(2, 1fr); }
  .metrics .cell:nth-child(2) { border-right: 0; }
  .metrics .cell:nth-child(1), .metrics .cell:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---- generic section ---- */
.section { padding: var(--section-pad) 0; }
.section.light { background: var(--c-offwhite); color: var(--c-ink); }
.section.dark { background: var(--c-black); color: var(--c-white); }
/* The FAQ follows pricing on the same light surface — one section pad between
   them, not two. */
.section--tight-top { padding-top: 0; }
.section .head { max-width: 720px; margin-bottom: var(--sp-7); }
.section .head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section h2 { font-size: clamp(34px, 5.4vw, 64px); line-height: 0.96; }
.section .head p { font-weight: 700; font-size: 18px; color: var(--c-dim); margin: var(--sp-4) 0 0; }
.section.dark .head p { color: rgba(255, 255, 255, 0.76); }

/* Trailing context paragraph under a section's main content. */
.aside-note { margin: var(--sp-7) 0 0; max-width: 720px; font-weight: 700; color: var(--c-dim); }

/* feature cards (4-up, shared hairlines, no radius, no shadow) */
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line);
}
.feature-card { padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.feature-card .k { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--c-lime); }
.feature-card h3 { font-size: 24px; margin: var(--sp-3) 0 var(--sp-2); }
.feature-card p { margin: 0; font-weight: 700; font-size: 14px; color: var(--c-dim); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } }

/* split intro (VITA section: copy + panel) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } }
.split h2 { margin-top: var(--sp-4); }
.split-copy {
  font-weight: 700; color: rgba(255, 255, 255, 0.8); font-size: 18px;
  margin: var(--sp-4) 0 0; max-width: 520px;
}
.panel-dark { background: var(--c-panel); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card); padding: var(--sp-6); }
.panel-dark ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.panel-dark li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.panel-dark li .dot { width: 10px; height: 10px; margin-top: 7px; background: var(--c-lime); border-radius: 50%; }
.panel-dark li b { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 17px; display: block; }
.panel-dark li span { display: block; color: rgba(255, 255, 255, 0.72); font-weight: 700; font-size: 14px; line-height: 1.45; }

/* value / register list */
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); max-width: 640px; }
.value-list li { display: grid; grid-template-columns: 34px 1fr; align-items: start; font-weight: 600; }
.value-list li .chk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 2px;
  background: var(--c-lime); color: var(--c-black); border-radius: var(--r-btn);
}
.value-list li .chk .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.value-list li b { font-weight: 800; }

/* Pull quote. VITA's own promise, attributed — the page has no trainees and
   an unattributed quote would read as one. Emphasis is size and weight; the
   lime rule is the same top-edge device the price card uses. */
.pullquote {
  margin: var(--sp-7) 0 0; padding: var(--sp-5) 0 0; max-width: 680px;
  border-top: 2px solid var(--c-lime);
  font-weight: 800; font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.32; letter-spacing: -0.015em; color: var(--c-ink);
}
.pullquote p { margin: 0; }
.pullquote cite {
  display: block; margin-top: var(--sp-4);
  font-family: var(--font-display); font-style: normal; text-transform: uppercase;
  font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--c-dim);
}
.center-cta { margin-top: var(--sp-7); }

/* flow cards (how it works — the number is the sequence, and the sequence is
   the information) */
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 820px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-card { padding: var(--sp-6); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card); }
.flow-card .num { color: var(--c-lime); font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; }
.flow-card h3 { font-size: 22px; margin: var(--sp-3) 0 var(--sp-2); }
.flow-card p { margin: 0; color: rgba(255, 255, 255, 0.72); font-weight: 700; font-size: 14px; }

/* pricing (single free card) */
.price-wrap { display: flex; justify-content: center; }
.price-card {
  width: min(420px, 100%); padding: var(--sp-7) var(--sp-6);
  background: var(--c-ink); color: var(--c-white);
  border-top: 18px solid var(--c-lime); text-align: center;
}
.price-card .plan { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; }
.price-card .amount { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(54px, 8vw, 86px); line-height: 0.9; margin: var(--sp-3) 0 var(--sp-1); }
.price-card .note { color: var(--c-dim-on-dark); font-weight: 700; font-size: 14px; }
.price-card ul { list-style: none; margin: var(--sp-5) 0; padding: 0; display: grid; gap: var(--sp-3); text-align: left; }
.price-card li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.price-card li::before { content: ""; width: 9px; height: 9px; margin-top: 7px; background: var(--c-lime); border-radius: 50%; }
.price-card .btn { width: 100%; }
.price-card .fine { margin-top: var(--sp-4); font-size: 12px; color: var(--c-faint); font-weight: 700; }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) 0;
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-ink); }
.faq summary:hover .faq-mark { color: var(--c-ink); }
.faq-mark { color: var(--c-dim); stroke-width: 2; transition: color 160ms ease; }
/* + collapses to − by dropping the vertical stroke, so one drawn icon covers
   both states instead of two glyphs. */
.faq-mark .bar-v { transform-origin: 50% 50%; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.faq details[open] .faq-mark .bar-v { transform: scaleY(0); }
/* An open answer belongs to its question, so close the gap between them. */
.faq details[open] summary { color: var(--c-ink); padding-bottom: var(--sp-3); }
.faq p { margin: 0 0 var(--sp-5); font-weight: 600; color: var(--c-dim); max-width: 720px; }

/* footer */
.footer { background: var(--c-black); color: rgba(255, 255, 255, 0.7); padding: var(--sp-7) 0; }
.footer .shell { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; align-items: center; }
/* font-size did nothing once the wordmark became an SVG; the lockup scales by
   height. Slightly smaller than the topbar's 21px — the footer is a sign-off,
   not a landmark. */
.footer .wordmark-svg { height: 19px; }
.footer .links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-weight: 700; font-size: 14px; }
.footer .links a {
  display: inline-flex; align-items: center; min-height: 24px; padding: var(--sp-1) var(--sp-2);
  text-decoration: none;
}
.footer .links a:hover { color: var(--c-lime); }
.footer .fine { width: 100%; font-size: 12px; color: var(--c-faint); font-weight: 600; margin-top: var(--sp-2); }
/* The FAB is 58px + 22px of inset. Without this the fine print ends up
   underneath it at the bottom of the page, where there is nothing left to
   scroll and no way to uncover it. */
@media (max-width: 720px) { .footer { padding-bottom: 104px; } }

/* WhatsApp FAB — the one floating element */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 58px; height: 58px; border-radius: var(--r-pill);
  background: var(--c-lime); color: var(--c-black);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab svg { width: 30px; height: 30px; }