/* Sepia landing: the app's colours (docs/DESIGN.md). Every token it shares with src/styles/tokens.css has the same
   value (npm run check:tokens compares them). "Cristal para el marco, papel para el contenido": glass only for the bar;
   the recordings sit in solid device frames so nothing blurs behind them.
   Type, upright only (fonts/OFL.txt): one face, Inter, with its optical-size axis, so the text tightens by itself
   from 17 px body to 76 px headlines. Only the latin subset loads for Spanish (about 53 KB, preloaded). */
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-opsz-wght.woff2) format('woff2-variations'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-ext-opsz-wght.woff2) format('woff2-variations'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Until Inter arrives (or where it cannot), a local sans scaled to Inter's width so the swap does not reflow: Segoe UI
   on Windows, Roboto on Android, Arial or Liberation Sans elsewhere; Apple's own system face for text and Helvetica
   Neue for headlines. Inter's optical size makes it narrower at headline sizes, so headlines (600 only) and text get
   their own scale. The metric overrides are Inter's ascent and descent divided by that scale. local() names a single
   face and font-synthesis is off. */
@font-face { font-family: 'Inter Display Apple'; font-weight: 600 800; src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'); ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Display Segoe'; font-weight: 600 800; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); size-adjust: 100%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Display Roboto'; font-weight: 600 800; src: local('Roboto Medium'), local('Roboto-Medium'); size-adjust: 100%; ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Display Arial'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); size-adjust: 94%; ascent-override: 103.1%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Segoe'; font-weight: 400 500; src: local('Segoe UI'), local('SegoeUI'); size-adjust: 106%; ascent-override: 91.4%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Segoe'; font-weight: 600 800; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); size-adjust: 105%; ascent-override: 92.3%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Roboto'; font-weight: 400 500; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 106%; ascent-override: 91.4%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Roboto'; font-weight: 600 800; src: local('Roboto Medium'), local('Roboto-Medium'); size-adjust: 106%; ascent-override: 91.4%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Arial'; font-weight: 400 500; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); size-adjust: 105%; ascent-override: 92.3%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Text Arial'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); size-adjust: 99%; ascent-override: 97.9%; descent-override: 24.4%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --canvas: #F3F1EC;
  --paper: #FFFFFF;
  --ink: #1C1C1E;
  --ink-2: #6B6A67;
  --line: rgba(40, 36, 30, 0.10);
  --fill: rgba(40, 36, 30, 0.05);
  --accent: #0E6B63;
  --accent-hover: #0B5C55;
  --accent-soft: rgba(14, 107, 99, 0.10);
  --on-accent: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.60);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.80);
  --glass-stroke: rgba(30, 25, 20, 0.10);
  --glass-blur: blur(22px) saturate(180%);
  --ambient-1: rgba(14, 107, 99, 0.16);
  --ambient-2: rgba(214, 170, 110, 0.22);
  --e1: 0 1px 2px rgba(40, 30, 20, 0.06), 0 6px 20px rgba(40, 30, 20, 0.04);
  --e2: 0 10px 30px rgba(40, 30, 20, 0.10), 0 1px 2px rgba(40, 30, 20, 0.06);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Landing only */
  --btn-edge: rgba(40, 36, 30, 0.48);   /* the outline of a secondary button or a recording's play button */
  --bezel: #1D1D1F;                     /* the device frame around a recording */
  --bezel-edge: rgba(255, 255, 255, 0.10);
  --device-shadow: 0 2px 4px rgba(40, 30, 20, 0.08), 0 30px 60px -12px rgba(40, 30, 20, 0.28), 0 18px 36px -18px rgba(40, 30, 20, 0.30);
  --display: 'Inter', 'Inter Display Apple', 'Inter Display Segoe', 'Inter Display Roboto', 'Inter Display Arial', sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Inter Text Segoe', 'Inter Text Roboto', 'Inter Text Arial', sans-serif;
  --margin: 20px;
  --max: 1180px;
  --section: 112px;         /* the space that opens a section or a band */
  --phone: min(320px, 82vw); /* a phone recording's frame */
}
@media (min-width: 768px) { :root { --margin: 32px; --section: 152px; } }
@media (min-width: 1024px) { :root { --margin: 48px; --section: 184px; } }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #0E0F11;
    --paper: #18191C;
    --ink: #F2F1EE;
    --ink-2: #A09E99;
    --line: rgba(255, 255, 255, 0.08);
    --fill: rgba(255, 255, 255, 0.06);
    --accent: #4FB8AC;
    --accent-hover: #63C6BA;
    --accent-soft: rgba(79, 184, 172, 0.16);
    --on-accent: #06201D;
    --glass: rgba(30, 31, 35, 0.58);
    --glass-strong: rgba(30, 31, 35, 0.80);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --glass-stroke: rgba(255, 255, 255, 0.08);
    --ambient-1: rgba(79, 184, 172, 0.10);
    --ambient-2: rgba(214, 170, 110, 0.07);
    --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e2: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --btn-edge: rgba(255, 255, 255, 0.40);
    --bezel: #34353A;
    --bezel-edge: rgba(255, 255, 255, 0.22);
    --device-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 70px -10px rgba(0, 0, 0, 0.7);
  }
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--canvas); color: var(--ink);
  font: 17px/1.55 var(--text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 12px 16px; border-radius: 12px;
  background: var(--paper); box-shadow: var(--e2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.ambient { position: absolute; inset: 0 0 auto; height: 1000px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 6% -6%, var(--ambient-1), transparent 70%),
              radial-gradient(50% 44% at 96% 0%, var(--ambient-2), transparent 70%); }
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-stroke); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-stroke), var(--e2); }
.glass-strong { background: var(--glass-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-strong); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.wrap { width: min(var(--max), calc(100% - 2 * var(--margin))); margin-inline: auto; }
/* A band: a full-width sheet of paper that makes a chapter of the page. */
.band { margin-top: var(--section); padding: var(--section) 0; background: var(--paper); }

/* ── Type ────────────────────────────────────────────────
   Every heading in Inter semibold: display 40→76, title 32→48 (long answers, statement and closing 56). Its optical size
   already tightens it at display sizes, so the tracking follows the size alone: -0.015em on a phone (32-36 px),
   -0.02em from 38 to 48, -0.022em from 56 up. The rest in Inter regular and medium: lead 18→21, body 17, caption 14
   (13 on a phone). One short sentence under each heading. */
h1, h2 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 1.08; letter-spacing: -0.015em; }
@media (min-width: 480px) { h2 { font-size: 38px; letter-spacing: -0.02em; } }
@media (min-width: 1024px) { h2 { font-size: 48px; } }
.lead { font-size: 18px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 1024px) { .lead { font-size: 21px; line-height: 1.45; } }

/* ── Bar: both ways in, always one tap away ──────────── */
.bar { position: sticky; top: 10px; z-index: 10; width: min(calc(var(--max) + 24px), calc(100% - 2 * var(--margin) + 24px));
  margin: 10px auto 0; display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 14px; border-radius: 999px; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-height: 44px; padding-right: 8px;
  font: 600 19px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand img { width: 24px; height: 24px; }
.brand--small { font-size: 17px; margin: 0; }
.brand--small img { width: 20px; height: 20px; }
@media (max-width: 359px) { .bar .brand span { display: none; } .bar .brand { min-width: 44px; justify-content: center; padding-right: 0; } .bar .btn--sm { padding: 0 12px; } }

/* ── Buttons: pills, verb first ──────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 26px;
  border-radius: 999px; font: 600 17px/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 16px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--btn-edge); }
.btn--line:hover { background: var(--fill); }
.btn--plain { color: var(--accent); }
.btn--plain:hover { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 8px; color: var(--accent);
  font-weight: 600; text-decoration: none; }
.more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms var(--ease); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.more:hover svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .more svg { transition: none; } }

/* ── Hero: the pain in one line, the two ways in, then the recording that answers it.
   On a phone everything reads from the left and the buttons sit above the recording; on a desktop it is centred. ── */
.hero { padding-top: 40px; display: grid; }
.kicker { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.hero h1 { margin-top: 10px; }
.hero .lead { margin-top: 16px; max-width: 32em; }
.hero .actions { margin-top: 24px; }
.hero .clip { margin-top: 48px; }
@media (max-width: 479px) {
  .hero .actions { flex-wrap: nowrap; gap: 8px; }
  .hero .actions .btn { flex: 1 1 auto; padding: 0 10px; font-size: 15px; }
}
@media (max-width: 359px) { .hero .actions { flex-wrap: wrap; } }
@media (min-width: 768px) {
  .hero { padding-top: 64px; justify-items: center; text-align: center; }
  .hero__copy { display: grid; justify-items: center; }
  .kicker { font-size: 17px; }
  .hero h1 { margin-top: 14px; font-size: clamp(56px, 5.3vw, 76px); letter-spacing: -0.022em; }
  .hero h1 .line { display: block; }
  .hero .lead { margin-top: 20px; max-width: 30em; text-wrap: balance; }
  .hero .actions { justify-content: center; margin-top: 30px; }
  .hero .clip { margin-top: 72px; width: 100%; }
}

/* ── Long answers: heading and one line, then the desktop app across the band ── */
.wide__head p { margin-top: 20px; max-width: 32em; color: var(--ink-2); text-wrap: pretty; }
.wide .clip { margin-top: 56px; }
@media (min-width: 1024px) {
  .wide__head { display: grid; justify-items: center; text-align: center; }
  .wide__head h2 { font-size: 56px; letter-spacing: -0.022em; }
  .wide__head p { font-size: 21px; line-height: 1.45; }
  .wide .clip { margin-top: 80px; }
}

/* ── A moment: when it hurts, one line on what Sepia does, and the recording of it.
   On a desktop the words sit beside the phone, level with its top, the pair centred on the page; while the phone
   scrolls past, the words stay in view beside it. ── */
.moment { display: grid; gap: 40px; padding-top: var(--section); }
.moment__copy > p { margin-top: 20px; max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 1024px) {
  :root { --words: 600px; --pair: calc(var(--words) + 80px + var(--phone)); } /* a moment's words, its gap and its phone */
  .moment { grid-template-columns: minmax(0, var(--words)) auto; justify-content: center; align-items: start; column-gap: 80px; }
  .moment h2 { font-size: 44px; }
  .moment__copy { position: sticky; top: 30vh; padding-top: 48px; }
  .moment__copy > p { font-size: 19px; line-height: 1.5; }
  .moment--flip { grid-template-columns: auto minmax(0, var(--words)); }
  .moment--flip .moment__copy { order: 2; }
}

/* Two short moments side by side on a desktop, on one band: words above, phones on the same line, one left edge. */
.duo .moment:first-child { padding-top: 0; }
@media (min-width: 1024px) {
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 64px; max-width: var(--pair); }
  .duo .moment { grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: none; justify-content: stretch;
    align-items: start; row-gap: 44px; padding-top: 0; }
  .duo .moment__copy { position: static; padding-top: 0; max-width: 26em; }
  .duo h2 { font-size: 40px; }
  .duo .clip { justify-items: start; }
}

/* ── Recordings: the app inside a device frame; the poster shows until the video plays ── */
.clip { display: grid; justify-items: center; gap: 16px; }
.clip__frame { width: var(--phone); padding: 9px; border-radius: 50px; background: var(--bezel);
  box-shadow: inset 0 0 0 1px var(--bezel-edge), var(--device-shadow); }
.clip__screen { position: relative; overflow: hidden; border-radius: 41px; background: var(--canvas); aspect-ratio: 390 / 844; }
.clip__screen img { width: 100%; height: 100%; object-fit: cover; }
.clip__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 240ms var(--ease); }
.clip.is-live video { opacity: 1; }
/* The attendance recording opens on a sheet: the page's title peeks out above it, so the screen starts at the sheet. */
.clip--sheet .clip__screen { aspect-ratio: 390 / 770; }
.clip--sheet .clip__screen img, .clip--sheet .clip__screen video { object-position: 50% 100%; }
/* The hero and the history exam: a shorter phone screen, the whole width on a phone; the desktop app on a desktop. */
.clip--hero .clip__frame, .clip--wide .clip__frame { width: 100%; max-width: 440px; padding: 7px; border-radius: 34px; }
.clip--hero .clip__screen, .clip--wide .clip__screen { aspect-ratio: 390 / 660; border-radius: 27px; }
@media (min-width: 1024px) {
  :root { --phone: 330px; }
  .clip--hero .clip__frame, .clip--wide .clip__frame { max-width: 100%; padding: 8px; border-radius: 22px; }
  .clip--hero .clip__screen, .clip--wide .clip__screen { aspect-ratio: 1024 / 640; border-radius: 14px; }
}
.clip figcaption { display: flex; align-items: center; gap: 12px; width: 100%; max-width: var(--phone); font-size: 14px; line-height: 1.45;
  color: var(--ink-2); text-align: left; text-wrap: pretty; }
.clip--hero figcaption, .clip--wide figcaption { max-width: 440px; }
@media (max-width: 479px) { .clip figcaption { font-size: 13px; } }
@media (min-width: 1024px) { .clip--hero figcaption, .clip--wide figcaption { max-width: 40em; } }
.clip__toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--btn-edge); color: var(--ink); cursor: pointer;
  transition: background-color 160ms var(--ease); }
.clip__toggle:hover { background: var(--fill); }
.clip__toggle[hidden] { display: none; }
.clip__toggle svg { width: 15px; height: 15px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .clip__screen video, .clip__toggle { transition: none; } }

/* ── The last word: one centred statement ── */
.statement { padding-top: var(--section); display: grid; justify-items: start; }
.statement p { margin-top: 20px; max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
.statement .more { margin-top: 16px; }
@media (min-width: 768px) { .statement { justify-items: center; text-align: center; } }
@media (min-width: 1024px) {
  .statement h2 { font-size: 56px; letter-spacing: -0.022em; }
  .statement p { font-size: 21px; line-height: 1.45; }
}

/* ── Closing: one sheet of paper with the two ways in ── */
.closing { margin-top: var(--section); }
.closing__panel { background: var(--paper); border-radius: 28px; box-shadow: var(--e1), 0 0 0 0.5px var(--line); padding: 40px 24px; }
.closing h2 { font-size: 36px; }
.closing__panel > p { margin-top: 20px; max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
.closing .actions { margin-top: 32px; }
@media (max-width: 479px) { .closing .actions { flex-direction: column; } }
@media (min-width: 768px) {
  .closing__panel { padding: 72px 48px; text-align: center; display: grid; justify-items: center; }
  .closing h2 { font-size: 48px; }
  .closing .actions { justify-content: center; }
}
@media (min-width: 1024px) {
  .closing__panel { padding: 96px 64px; }
  .closing h2 { font-size: 56px; letter-spacing: -0.022em; }
  .closing__panel > p { font-size: 21px; line-height: 1.45; }
}

/* ── Footer ──────────────────────────────────────────── */
.foot { width: min(var(--max), calc(100% - 2 * var(--margin))); margin: 96px auto 0;
  padding: 20px 0 calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; color: var(--ink-2); font-size: 14px; }
.foot .brand { color: var(--ink); }
.foot__legal { display: flex; gap: 20px; margin-left: auto; }
.foot__legal a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.foot__legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal a[aria-current] { color: var(--ink); }
@media (max-width: 599px) { .foot__legal { margin-left: 0; } }

/* ── Legal pages (privacidad.html, aviso-legal.html): a reading column on one sheet of paper ── */
.legal { max-width: 720px; padding-top: 48px; }
.legal h1 { font-size: clamp(40px, 10vw, 56px); }
.legal .lead { margin-top: 12px; }
.legal__sheet { margin-top: 32px; padding: 8px 22px 28px; border-radius: 24px; background: var(--paper); box-shadow: var(--e1), 0 0 0 0.5px var(--line); }
.legal h2 { font-family: var(--text); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal p, .legal li { color: var(--ink-2); text-wrap: pretty; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--accent); }
.legal b { color: var(--ink); }
.legal a { color: var(--accent); text-underline-offset: 3px; }
@media (min-width: 768px) { .legal__sheet { padding: 20px 48px 44px; } }
@media (min-width: 1024px) { .legal { padding-top: 80px; } }