/* Puntualímetro · landing. Tokens from design/tokens.json (regenerate the :root blocks if the JSON changes). */
:root {
  --bg: #FFF6E9;
  --surface: #FFFDF9;
  --ink: #2B2118;
  --muted: #7B6B5C;
  --line: #EBDCC8;
  --soft: #F6EBDB;
  --sun: #F6B73C;
  --a: #2B7BD9;
  --b: #E85D75;
  --ok: #2E9E5B;
  --late: #E0702B;
  --fur: #C58F5A;
  --fur2: #9E6E3F;
  --belly: #F3D9AE;
  --cheek: #F29B8A;
  --shirt: #FFFFFF;
  --stripe: #2B2118;
  --paper: #FFFFFF;
  --mtn1: #9CC4B4;
  --mtn2: #5F9587;
  --snow: #FFFFFF;
  --pine: #3E7A66;
  --face: #FFFDF6;
  --face-ink: #2B2118;
  --drop: #6EC1F2;
}
:root[data-theme="dark"] {
  --bg: #1C1713;
  --surface: #2A221C;
  --ink: #F5EBDD;
  --muted: #B8A692;
  --line: #3E342B;
  --soft: #342B24;
  --sun: #F8C65A;
  --a: #6AA8F0;
  --b: #F58AA0;
  --ok: #4CC27A;
  --late: #F2904F;
  --fur: #C58F5A;
  --fur2: #8E6239;
  --belly: #EBCB9E;
  --cheek: #E0877A;
  --shirt: #F2EBE0;
  --stripe: #2B2118;
  --paper: #F7F1E6;
  --mtn1: #3F5E57;
  --mtn2: #2B433D;
  --snow: #E6E0D6;
  --pine: #2F5A4B;
  --face: #F6F0E4;
  --face-ink: #2B2118;
  --drop: #7CCBFA;
}

/* Self-hosted variable fonts (OFL, see fonts/OFL-*.txt): no request to Google. */
@font-face { font-family: Fredoka; src: url("fonts/fredoka-variable.ttf") format("truetype-variations"); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: Figtree; src: url("fonts/figtree-variable.ttf") format("truetype-variations"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: Figtree; src: url("fonts/figtree-italic-variable.ttf") format("truetype-variations"); font-weight: 300 900; font-style: italic; font-display: swap; }

/* Fallback faces sized to the web fonts (ratios measured with canvas.measureText on the loaded fonts), one per weight range,
   so the text keeps its line breaks when Fredoka and Figtree arrive. */
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 500; size-adjust: 99.5%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 95.7%; }
@font-face { font-family: "Fredoka Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 500 700; size-adjust: 94.5%; }

:root {
  --f-display: Fredoka, "Fredoka Fallback", sans-serif;
  --f-body: Figtree, "Figtree Fallback", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 80px; } /* sticky header */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--f-body);
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(32px, 6vw, 44px); }
h2 { font-size: clamp(24px, 4vw, 30px); }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.muted { color: var(--muted); }
.wrap { width: min(100% - 32px, 760px); margin-inline: auto; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 60px; flex-wrap: wrap; padding-block: 6px; }
.brand { font: 600 22px var(--f-display); text-decoration: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brand img { width: 34px; height: 33px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; margin-inline: -8px; }
.nav a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted); padding: 8px 10px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav a:hover { background: var(--soft); color: var(--ink); }
/* Theme toggle: one button, two glyphs; the active theme hides its own glyph. */
.theme { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; width: 44px; height: 44px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; margin-left: 4px; }
.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme .moon, :root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
.cta { display: grid; gap: 6px; justify-items: center; }
.btn-primary { background: var(--sun); color: #2B2118; font-size: 16px; padding: 12px 22px; }
.btn-primary:hover { filter: brightness(1.04); }
.cta small { color: var(--muted); font-size: 13px; }
/* Narrow screens: brand on its own row, links in one compact row below. */
@media (max-width: 560px) {
  .top .wrap { flex-direction: column; align-items: flex-start; gap: 0; position: relative; }
  .theme { position: absolute; right: 0; top: 8px; }
  .nav { justify-content: flex-start; width: calc(100% + 16px); }
  .nav a { font-size: 13px; padding: 6px 8px; min-height: 40px; }
  section[id] { scroll-margin-top: 112px; }
}

/* Hero */
.hero { padding: 32px 0 12px; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.stage { position: relative; height: 220px; background: linear-gradient(var(--bg), var(--soft)); overflow: hidden; }
.stage .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.cast { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; justify-items: center; padding: 0 8px 6px; }
.cast .player { width: min(104px, 26vw); height: auto; }
.cast .mascot { width: min(132px, 34vw); height: auto; }
.hero-text { padding: 22px 20px 24px; display: grid; gap: 14px; text-align: center; }
.hero-text p { max-width: 54ch; margin-inline: auto; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center;
  background: var(--sun); color: #2B2118; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 999px;
}

/* Sections */
section { padding: 36px 0; }
.sec-head { display: grid; gap: 8px; margin-bottom: 20px; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  display: grid; gap: 10px; align-content: start;
}
.card img { width: 84px; height: auto; }
.step { font: 700 12px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.split { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 640px) { .split { grid-template-columns: 1.1fr .9fr; } }
.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
  display: grid; gap: 10px; font-size: 15px;
}
.quote .who { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.quote .who img { width: 44px; height: auto; }
.quote p + p { margin-top: 6px; }

.badges { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.badge { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.badge img { width: 56px; height: 56px; }
.badge b { font-family: var(--f-display); font-weight: 600; }
.badge small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.badge.shame small::before { content: "Mejor evitarlo · "; }

.privacy-brief ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 700; text-decoration: none; font-size: 15px;
}

footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 14px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

/* Privacy page */
.prose { display: grid; gap: 14px; padding: 28px 0 40px; max-width: 68ch; }
.prose h2 { font-size: 22px; margin-top: 12px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.notice { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .top { backdrop-filter: none; } }