/* ─────────────────────────────────────────────────────────
   Manifiesto · site styles
   Editorial luminous botanical. Quiet forest at twilight,
   breathing aurora, drifting fireflies. Fern + wordmark are
   the brand. Calm, financial, organic.

   Brand source: mobile/theme/palette.ts + auth-launch-splash.
   ───────────────────────────────────────────────────────── */

/* Fraunces stays only for the wordmark monument + italic accents in
   headings. Everything else uses Apple's system stack so the site
   reads as "made by the same hand" as the iOS app (which uses SF Pro
   by default in React Native). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..800,0..100,0..1&display=swap');

:root {
  /* Canvas — canonical app splash dark green */
  --welcome-bg: #0E3A26;
  --ink-900: #08221A;
  --ink-800: #102E22;

  /* Brand greens */
  --brand-deep: #1F590D;
  --brand-strong: #297811;
  --brand: #329315;
  --brand-300: #A6EF8F;
  --brand-400: #77E755;        /* primary-400, saturated mint, particles */
  --leaf: #A9D57F;             /* the fern leaves */
  --soft-green: #C7EE9C;       /* aurora + 2/3 of fireflies */

  /* The warm accent — this is the brand peach used on the dot */
  --peach: #F2B58A;
  --peach-soft: #FADFC8;
  --peach-deep: #B84014;

  /* Paper */
  --cream: #FFFBF2;            /* canonical surfaceCream from palette */
  --paper: #F4FDF2;
  --paper-warm: #FAF8EE;

  /* Text */
  --text-ink: #0E1A12;
  --text-muted: #4A5A4F;
  --text-soft: #738174;
  --text-on-dark: #FFFBF2;
  --text-on-dark-muted: rgba(255, 251, 242, 0.62);
  --text-on-dark-soft: rgba(255, 251, 242, 0.40);

  /* Lines */
  --line-warm: rgba(20, 42, 30, 0.10);
  --line-strong: rgba(20, 42, 30, 0.18);
  --line-on-dark: rgba(255, 251, 242, 0.12);

  /* Type — iOS-first.
     --font-sans: Apple's system stack. Picks SF Pro Text on macOS/iOS,
                  Segoe on Windows, Roboto on Android, system-ui elsewhere.
     --font-display: same stack, used semantically for section titles
                  (lets us tune weight + tracking separately).
     --font-serif: Fraunces, ONLY for the wordmark monument and italic
                  accent words inside headings (the brand seal). */
  --font-sans:
    -apple-system, BlinkMacSystemFont,
    'SF Pro Text', 'SF Pro Display',
    system-ui, 'Segoe UI', Roboto,
    'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  --font-display: var(--font-sans);
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono:
    ui-monospace, 'SF Mono', 'Menlo', 'Roboto Mono',
    'Liberation Mono', 'Courier New', monospace;

  /* Rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --shell-max: 1200px;
  --reading-max: 68ch;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion — custom Emil curves; never use stock ease-in for UI */
  --ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-soft:        cubic-bezier(0.45, 0, 0.55, 1);  /* sine-in-out feel */
  --ease-out:         var(--ease-out-expo);
  --ease-in-out:      cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-ios-spring:  cubic-bezier(0.32, 0.72, 0, 1);  /* Ionic / iOS modal */

  /* iOS safe areas — picked up on iPhone with notch/Dynamic Island */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--welcome-bg);
  color: var(--text-ink);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* iOS Safari: keep momentum scrolling, prevent overscroll bounce
     from showing the dark welcomeBg behind the cream body. */
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-sans);
  /* Mobile-first body: 17px is iOS Body in Dynamic Type baseline.
     Below 1545px viewport we hold 16-17 for readability; above that
     stays at 17. iOS native body is always 17. */
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  background: var(--cream);
  color: var(--text-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* iOS Safari tap highlight feels old; we have :active states */
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--peach); color: var(--ink-900); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────
   Shell + grid
   ───────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.on-dark .eyebrow { color: var(--peach); }

/* ─────────────────────────────────────────────────────────
   Site nav · transparent on dark hero → glass when paper
   ───────────────────────────────────────────────────────── */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Safe-area-aware top padding so the nav clears the iPhone notch / Dynamic Island
     without leaving an ugly white bar above it. */
  padding: calc(12px + var(--safe-top)) var(--safe-right) 12px var(--safe-left);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    background-color 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    backdrop-filter 320ms var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-nav.is-glass {
  background: rgba(8, 34, 26, 0.74);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-on-dark);
}

.site-nav.is-glass--paper {
  background: rgba(255, 251, 242, 0.86);
  border-bottom-color: var(--line-warm);
}

.site-nav__inner {
  pointer-events: auto;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* SF Pro Display, semibold, tight tracking — matches the app */
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.022em;
  color: var(--text-on-dark);
  transition: color 320ms var(--ease-out);
  /* Touch target ≥44pt; padding-block sneaks vertical area without
     visually shifting layout */
  padding-block: 8px;
  min-height: 44px;
}

.site-nav.is-glass--paper .site-nav__brand { color: var(--text-ink); }

.site-nav__brand-mark {
  width: 22px;
  height: 22px;
  color: var(--text-on-dark);
  transition: color 320ms var(--ease-out);
}

.site-nav.is-glass--paper .site-nav__brand-mark { color: var(--brand-strong); }
.site-nav__brand-dot { color: var(--peach); }

.site-nav__links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-on-dark-muted);
  transition: color 320ms var(--ease-out);
}

.site-nav.is-glass--paper .site-nav__links { color: var(--text-muted); }

.site-nav__links a {
  position: relative;
  /* Tappable 44pt+ on iOS — padding does the work without changing
     visible spacing because the gap above already separates them. */
  padding: 10px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  transition: color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}

.site-nav__links a:active {
  background: rgba(255, 251, 242, 0.08);
}
.site-nav.is-glass--paper .site-nav__links a:active {
  background: rgba(14, 26, 18, 0.05);
}

.site-nav__links a:hover { color: var(--text-on-dark); }
.site-nav.is-glass--paper .site-nav__links a:hover { color: var(--text-ink); }

.site-nav__links a::after {
  content: '';
  position: absolute;
  inset: auto 12px 6px 12px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__links a:hover::after { transform: scaleX(1); }
  .site-nav__links a:hover { color: var(--text-on-dark); }
  .site-nav.is-glass--paper .site-nav__links a:hover { color: var(--text-ink); }
}

.site-nav__links a[aria-current="page"] { color: var(--peach); }
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--peach); }

/* Mobile-first: hide the "Sobre" anchor on the narrowest screens; the
   nav has Privacidad + Términos which is the page's purpose anyway. */
@media (max-width: 420px) {
  .site-nav__links { gap: 2px; font-size: 13px; }
  .site-nav__links a[href^="#"] { display: none; }
}

/* ─────────────────────────────────────────────────────────
   HERO · monumental brand stack, aurora + fireflies
   Centered, vertical, fern behind wordmark, peach dot.
   ───────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  background: var(--welcome-bg);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* Atmospheric base — keeps the welcomeBg from feeling flat without
   competing with the aurora. Subtle gradient + grain dots. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(166, 239, 143, 0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 0%, rgba(14, 58, 38, 0), rgba(8, 34, 26, 0.45) 70%),
    linear-gradient(180deg, rgba(14, 58, 38, 0.0), rgba(8, 34, 26, 0.65));
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 251, 242, 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.14;
  pointer-events: none;
  z-index: 1;
}

/* Aurora layer — 2 large soft blobs that breathe slowly.
   Peach top-zone + soft-green bottom-zone, same as app. */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform, opacity;
  animation: aurora-breath 13s var(--ease-soft) infinite alternate;
}

.aurora__blob--top {
  left: 18%;
  top: 6%;
  width: clamp(280px, 36vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(242, 181, 138, 0.36), transparent 72%);
  animation-duration: 11s;
}

.aurora__blob--bottom {
  left: 56%;
  top: 52%;
  width: clamp(300px, 42vw, 600px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(199, 238, 156, 0.28), transparent 72%);
  animation-duration: 13s;
  animation-delay: -5.5s;
}

@keyframes aurora-breath {
  0%   { transform: translate3d(0, 0, 0) scale(0.94); opacity: 0.32; }
  100% { transform: translate3d(4vw, -3vh, 0) scale(1.10); opacity: 0.50; }
}

/* Firefly layer — JS injects N <i.firefly> with --mx/--my/--dur/--delay.
   Each fly drifts on a multi-waypoint keyframe so the field
   looks asynchronous without 24 unique animations. */
.fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.firefly {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--fc, #C7EE9C);
  color: var(--fc, #C7EE9C);
  box-shadow:
    0 0 6px currentColor,
    0 0 14px currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation:
    firefly-drift var(--fdur, 11s) var(--ease-soft) infinite alternate,
    firefly-twinkle calc(var(--fdur, 11s) / 2.7) var(--ease-soft) infinite alternate;
  animation-delay: var(--fdelay, 0s);
}

.firefly--bright {
  width: 3px;
  height: 3px;
  box-shadow:
    0 0 8px currentColor,
    0 0 22px currentColor,
    0 0 36px rgba(255, 251, 242, 0.3);
}

@keyframes firefly-drift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(calc(var(--fmx, 24px) * 1),    calc(var(--fmy, 28px) * -0.4), 0); }
  45%  { transform: translate3d(calc(var(--fmx, 24px) * -0.6), calc(var(--fmy, 28px) * -1.0), 0); }
  70%  { transform: translate3d(calc(var(--fmx, 24px) * 0.8),  calc(var(--fmy, 28px) * -0.7), 0); }
  100% { transform: translate3d(calc(var(--fmx, 24px) * -0.3), calc(var(--fmy, 28px) * 0.2),  0); }
}

@keyframes firefly-twinkle {
  0%   { opacity: 0.12; }
  25%  { opacity: 0.55; }
  60%  { opacity: 0.85; }
  100% { opacity: 0.18; }
}

/* Hero composition · single column, vertical, fern behind wordmark.
   Mobile-first padding accounts for nav (~60px) + safe-area top so the
   monument never collides with the notch / Dynamic Island. */
.hero__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding:
    calc(110px + var(--safe-top))
    max(var(--gutter), var(--safe-right))
    calc(72px + var(--safe-bottom))
    max(var(--gutter), var(--safe-left));
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

@media (min-width: 720px) {
  .hero__stage {
    padding-top:    clamp(130px, 16vh, 180px);
    padding-bottom: clamp(90px, 12vh, 120px);
  }
}

.hero__eyebrow {
  margin-bottom: 28px;
  position: relative;
  padding-inline: 32px;
  font-size: 10px;
}

@media (min-width: 720px) {
  .hero__eyebrow { margin-bottom: 36px; font-size: 11px; }
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.hero__eyebrow::before { left: 0; }
.hero__eyebrow::after  { right: 0; }

/* The monument: fern + wordmark composed as a single brand mark */
.hero__monument {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
}

/* Fern sits above the wordmark. Mobile keeps it compact so the
   wordmark dominates; desktop lets it breathe. */
.hero__fern {
  position: relative;
  width: clamp(180px, 56vw, 220px);
  aspect-ratio: 1;
  color: var(--cream);
  --fern-leaf: var(--leaf);
  filter: drop-shadow(0 24px 60px rgba(8, 34, 26, 0.45));
  z-index: 1;
  will-change: transform;
}

@media (min-width: 720px) {
  .hero__fern { width: clamp(260px, 28vw, 420px); }
}

.hero__fern svg { width: 100%; height: 100%; display: block; }

.fern-silhouette { transition: opacity 800ms var(--ease-out); }
.fern-leaf       { transform-box: fill-box; }

/* Halo behind the fern — gives the leaves a luminous edge */
.hero__monument::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: radial-gradient(closest-side, rgba(166, 239, 143, 0.32), transparent 72%);
  filter: blur(36px);
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}

/* Wordmark sits BELOW the fern, monumental, with peach dot.
   Mobile floor at 48px keeps "Manifiesto." inside a 320px viewport.
   The mark stays in Fraunces (the brand seal) — everything else
   uses SF Pro per iOS-first. */
.hero__wordmark {
  position: relative;
  z-index: 2;
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-weight: 350;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  font-size: clamp(48px, 13.5vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}

.hero__wordmark .letter {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__wordmark .dot {
  display: inline-block;
  color: var(--peach);
  transform: translate(0.02em, -0.04em);
  position: relative;
}

/* Faint peach glow behind the dot */
.hero__wordmark .dot::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(242, 181, 138, 0.55), transparent 65%);
  filter: blur(10px);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

/* Tagline — keep the italic Fraunces feel (it's the soft brand
   gesture next to the monumental wordmark). */
.hero__tagline {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
  font-size: clamp(17px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-on-dark-muted);
  max-width: 28ch;
  padding-inline: 8px;
}

@media (min-width: 720px) {
  .hero__tagline { margin-top: 28px; padding-inline: 0; }
}

.hero__cta-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: stretch;
  margin-top: 40px;
  width: 100%;
  max-width: 360px;
}

@media (min-width: 560px) {
  .hero__cta-row {
    flex-direction: row;
    align-items: center;
    max-width: none;
    width: auto;
    margin-top: 56px;
    gap: 12px;
  }
}

.cta {
  --bg: var(--cream);
  --fg: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  min-height: 50px;            /* iOS HIG: 44pt min; we go 50 for comfort */
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 600;            /* SF Pro semibold matches iOS buttons */
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  transition:
    transform 220ms var(--ease-out),
    background 260ms var(--ease-out),
    color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}

/* Emil: buttons must feel responsive. Press feedback at 140ms ease-out
   with iOS spring curve. Scale 0.97 = strong enough to feel tactile,
   subtle enough to not feel toy-like. */
.cta:active {
  transform: scale(0.97);
  transition-duration: 140ms;
  transition-timing-function: var(--ease-ios-spring);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { box-shadow: 0 18px 40px -20px rgba(8, 34, 26, 0.5); }
}

.cta--ghost {
  --bg: transparent;
  --fg: var(--text-on-dark);
  border-color: var(--line-on-dark);
}

.cta--ghost:hover {
  background: rgba(255, 251, 242, 0.06);
  border-color: rgba(255, 251, 242, 0.28);
}

.cta__arrow {
  width: 14px;
  height: 14px;
  transition: transform 220ms var(--ease-out);
}

.cta:hover .cta__arrow { transform: translateX(3px); }

/* Scroll cue */
.hero__cue {
  position: absolute;
  inset: auto 0 28px 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-on-dark-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, var(--peach));
  position: relative;
  overflow: hidden;
}

.hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, var(--cream));
  animation: cue-rain 2.4s var(--ease-soft) infinite;
}

@keyframes cue-rain {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────
   Page transition — the dark hero "lifts" into cream paper
   with a soft horizon glow at the seam.
   ───────────────────────────────────────────────────────── */

.horizon {
  position: relative;
  height: 80px;
  margin-top: -80px;
  background: linear-gradient(180deg, transparent, var(--cream));
  z-index: 2;
}

.horizon::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80vw;
  max-width: 1100px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--peach), transparent);
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────
   Section primitives — cream paper
   ───────────────────────────────────────────────────────── */

main { background: var(--cream); position: relative; }

.section {
  padding-block: clamp(80px, 14vh, 160px);
  position: relative;
}

.section--soft { background: var(--paper-warm); }

.section__head {
  max-width: 64ch;
  margin: 0 0 64px;
}

/* SF Pro Display heavy + tight tracking — the same density as iOS's
   Large Title in Settings. Mobile-first: 28px floor reads as a real
   "Title" at iPhone width. */
.section__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 18px 0 20px;
  color: var(--text-ink);
}

/* The `em` accent stays in Fraunces italic — keeps the editorial
   gesture alive without competing with the SF Pro structure. */
.section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
  color: var(--brand-strong);
  letter-spacing: -0.02em;
}

.section__lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   About — typographic, side meta · NOT a card grid
   ───────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
}

.about-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line-warm);
  padding-top: 28px;
  position: relative;
}

.about-meta::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 1px;
  background: var(--peach);
}

.about-meta__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: baseline;
}

@media (max-width: 380px) {
  .about-meta__row { grid-template-columns: 1fr; gap: 4px; }
}

.about-meta__label {
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 10px;
  color: var(--text-soft);
}

.about-meta__value {
  color: var(--text-ink);
  font-family: var(--font-sans);
  font-size: 14px;
}

.about-meta__value a {
  color: var(--brand-strong);
  text-decoration: underline;
  text-decoration-color: rgba(31, 89, 13, 0.32);
  text-underline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────
   Legal documents — ASYMMETRIC, monumental index numerals
   The "01" / "02" are the visual anchors, set in Fraunces
   italic huge. Hover lifts the card AND tilts the numeral.
   ───────────────────────────────────────────────────────── */

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 720px) {
  .legal-grid { grid-template-columns: 1fr; }
}

/* iOS card feel: larger radius (~24-28px = squircle approximation),
   subtle elevation only on hover, no harsh shadows at rest. */
.legal-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 28px 24px 24px;
  min-height: 280px;
  border-radius: 24px;
  background: var(--cream);
  border: 1px solid var(--line-warm);
  color: var(--text-ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 360ms var(--ease-out),
    border-color 360ms var(--ease-out),
    box-shadow 360ms var(--ease-out);
  isolation: isolate;
}

@media (min-width: 720px) {
  .legal-card {
    gap: 18px;
    padding: 40px 32px 28px;
    min-height: 360px;
    border-radius: 28px;
  }
}

/* Subtle aurora wash on hover — peach for card 1, mint for card 2 */
.legal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 100% 0%, rgba(242, 181, 138, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  z-index: -1;
}

.legal-card:nth-child(2)::before {
  background: radial-gradient(70% 60% at 100% 0%, rgba(166, 239, 143, 0.22), transparent 65%);
}

@media (hover: hover) and (pointer: fine) {
  .legal-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-strong);
    box-shadow: 0 30px 70px -36px rgba(31, 89, 13, 0.32);
  }
  .legal-card:hover::before { opacity: 1; }
  .legal-card:hover .legal-card__index { transform: rotate(-2deg) translateY(-2px); }
}

/* iOS-style press feedback — scale + transient peach wash. Lands
   instantly on tap (no hover required for touch). */
.legal-card:active {
  transform: scale(0.985);
  transition-duration: 140ms;
  transition-timing-function: var(--ease-ios-spring);
}
.legal-card:active::before { opacity: 1; }

/* Numeral stays in Fraunces italic — the brand's editorial gesture
   used sparingly as visual anchor. Mobile floor at 48px keeps the
   card from feeling cramped on a 320px viewport. */
.legal-card__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-strong);
  margin: 0;
  transform-origin: bottom left;
  transition: transform 380ms var(--ease-out);
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
}

.legal-card__index .index-dot { color: var(--peach); }

.legal-card__body { display: grid; gap: 10px; }

.legal-card__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* SF Pro Display semibold — iOS Title 2 feel */
.legal-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--text-ink);
}

.legal-card__lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.legal-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-strong);
  align-self: end;
}

.legal-card__arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 240ms var(--ease-out);
}

.legal-card:hover .legal-card__arrow svg { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--welcome-bg);
  color: var(--text-on-dark);
  padding:
    clamp(56px, 9vh, 110px)
    max(var(--gutter), var(--safe-right))
    calc(28px + var(--safe-bottom))
    max(var(--gutter), var(--safe-left));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 720px) {
  .site-footer { padding-top: clamp(72px, 9vh, 110px); }
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--peach), transparent);
  opacity: 0.45;
}

/* Footer aurora — soft, single blob, no animation (save GPU on the bottom) */
.site-footer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -50%;
  width: 90vw;
  max-width: 1100px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(166, 239, 143, 0.10), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* Mobile-first: stack. Tablet+: 3 cols with the brand block wider. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

@media (min-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}

@media (min-width: 880px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; margin-bottom: 64px; }
}

/* Footer brand stays in Fraunces — same monumental seal as the hero,
   just smaller. It's the only place outside the hero where the
   wordmark appears at scale, so consistency wins. */
.footer__brand {
  font-family: var(--font-serif);
  font-weight: 350;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

@media (min-width: 720px) {
  .footer__brand { font-size: 36px; }
}

.footer__brand .dot { color: var(--peach); }

.footer__tag {
  font-size: 14px;
  color: var(--text-on-dark-muted);
  max-width: 38ch;
  margin: 0;
  line-height: 1.6;
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin: 0 0 16px;
}

.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }

.footer__col a {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  color: var(--text-on-dark-muted);
  padding-block: 8px;
  min-height: 36px;
  transition: color 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover { color: var(--peach); }
}
.footer__col a:active { color: var(--peach); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-soft);
}

.footer-bottom span { display: inline-flex; gap: 10px; align-items: center; }

/* ─────────────────────────────────────────────────────────
   "Cómo funciona" — 3-step flow
   Numbered list reads as editorial spread. Each step shares
   the same skeleton but the typography does the heavy lift.
   ───────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.step {
  position: relative;
  padding: 32px 28px 30px;
  background: var(--cream);
  border: 1px solid var(--line-warm);
  border-radius: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  isolation: isolate;
}

.step::before {
  content: '';
  position: absolute;
  inset: auto 28px 0 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-strong), transparent);
  opacity: 0.4;
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 480ms var(--ease-out);
}

@media (min-width: 720px) {
  .step { padding: 36px 28px 32px; border-radius: 24px; }
}

@media (hover: hover) and (pointer: fine) {
  .step:hover::before { transform: scaleX(1); }
}

.step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-strong);
  margin-bottom: 4px;
}

.step__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--text-ink);
}

.step__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   "Producto" — stylized iPhone + features list
   The device is illustrated, not a real screenshot. It hints
   at the Home pattern (cupo card, expense rows, tabbar) so
   the user understands the product shape without us shipping
   stale or fake pixels.
   ───────────────────────────────────────────────────────── */

.section--showcase {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.section--showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(166, 239, 143, 0.10), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(242, 181, 138, 0.10), transparent 70%);
  pointer-events: none;
}

.section--showcase > .shell { position: relative; }

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

@media (min-width: 880px) {
  .showcase-grid {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

/* ── Device frame (stylized iPhone) ────────────────────────── */

.device {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  aspect-ratio: 9 / 19;
}

@media (min-width: 880px) {
  .device { max-width: none; }
}

.device__glow {
  position: absolute;
  inset: -20% -10% -15% -10%;
  background:
    radial-gradient(50% 40% at 50% 50%, rgba(166, 239, 143, 0.22), transparent 70%),
    radial-gradient(40% 30% at 30% 70%, rgba(242, 181, 138, 0.18), transparent 70%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

.device__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1B1F1C, #0D1310);
  border-radius: 42px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 251, 242, 0.06),
    0 30px 80px -32px rgba(8, 34, 26, 0.45);
}

.device__notch {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 90px;
  height: 24px;
  background: #000;
  border-radius: 14px;
  transform: translateX(-50%);
  z-index: 2;
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--cream);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 50px 16px 12px;
  gap: 14px;
}

.device__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-ink);
  padding: 0 6px;
}

.device__status-icons { display: inline-flex; gap: 4px; }
.device__status-icons .dot {
  width: 5px; height: 5px;
  background: var(--text-ink);
  border-radius: 50%;
  opacity: 0.7;
}

/* Hero card inside the device — mimics the home cupo summary */
.device__hero {
  background: linear-gradient(180deg, var(--brand-strong), var(--brand-deep));
  color: var(--text-on-dark);
  border-radius: 22px;
  padding: 18px 18px 16px;
  display: grid;
  gap: 10px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.device__hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(166, 239, 143, 0.30), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}

.device__hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 251, 242, 0.7);
}

.device__hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(242, 181, 138, 0.16);
  color: var(--peach);
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.device__hero-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-serif);
  font-weight: 350;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  letter-spacing: -0.04em;
  line-height: 1;
}

.device__currency { font-size: 18px; color: rgba(255, 251, 242, 0.7); }
.device__amount   { font-size: 38px; color: var(--text-on-dark); }
.device__per      {
  font-family: var(--font-sans); font-style: normal;
  font-size: 12px; font-weight: 500;
  color: rgba(255, 251, 242, 0.6);
  margin-left: 2px;
  letter-spacing: -0.01em;
}

.device__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 251, 242, 0.16);
  overflow: hidden;
  margin-top: 4px;
}

.device__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-bright), var(--peach));
  border-radius: 3px;
  transform-origin: left;
  animation: bar-fill 1.6s var(--ease-out) 1.2s both;
}

@keyframes bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.device__hero-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255, 251, 242, 0.7);
  letter-spacing: -0.005em;
}

/* Expense / fixed rows */
.device__cards {
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.device__card {
  background: rgba(255, 251, 242, 0.6);
  border: 1px solid var(--line-warm);
  border-radius: 14px;
  padding: 10px 12px;
}

.device__card--fixed {
  background: rgba(242, 181, 138, 0.10);
  border-color: rgba(242, 181, 138, 0.3);
}

.device__card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device__card-emoji {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 251, 242, 0.9);
  border-radius: 10px;
  font-size: 16px;
}

.device__card-info {
  flex: 1;
  display: grid;
  gap: 1px;
  min-width: 0;
}

.device__card-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}

.device__card-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-soft);
}

.device__card-amount {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}

.device__card--fixed .device__card-amount { color: var(--peach-deep); }

/* Tabbar */
.device__tabbar {
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 6px;
  border-top: 1px solid var(--line-warm);
  margin: 4px -16px -12px;
  background: rgba(255, 251, 242, 0.6);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.device__tab {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}

.device__tab.is-active { color: var(--brand-strong); font-weight: 700; }

/* ── Features list ────────────────────────────────────────── */

.features { max-width: 60ch; }

.features__list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .features__list { gap: 28px; }
}

.features__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--line-warm);
}

.features__item:first-child { border-top: 0; padding-top: 0; }

.features__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 350;
  font-size: 22px;
  line-height: 1;
  color: var(--peach);
  margin-top: 2px;
}

.features__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.018em;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--text-ink);
}

.features__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   Principios — 2x2 grid of editorial blocks
   ───────────────────────────────────────────────────────── */

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 720px) {
  .principles { grid-template-columns: 1fr 1fr; gap: 36px 48px; }
}

.principle {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid var(--brand-strong);
}

.principle__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--text-ink);
}

.principle__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 48ch;
}

/* ─────────────────────────────────────────────────────────
   FAQ · native <details> styled cleanly
   ───────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: 0;
  max-width: 760px;
  border-top: 1px solid var(--line-warm);
}

.faq__item {
  border-bottom: 1px solid var(--line-warm);
  padding-block: 4px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.018em;
  color: var(--text-ink);
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { display: none; }

.faq__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-strong);
  transition: transform 280ms var(--ease-out);
}

.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__item p {
  margin: 0 4px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
}

/* Subtle expand animation. Note: native details doesn't animate
   height by default; we fade-in the content for a soft entrance. */
.faq__item[open] p {
  animation: faq-fade 360ms var(--ease-out);
}

@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────
   Policy pages (privacy + terms)
   Smaller hero, fireflies still drift across the top.
   ───────────────────────────────────────────────────────── */

.policy-hero {
  position: relative;
  background: var(--welcome-bg);
  color: var(--text-on-dark);
  padding:
    calc(110px + var(--safe-top))
    0
    clamp(48px, 9vh, 100px);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 720px) {
  .policy-hero { padding-top: clamp(130px, 18vh, 200px); }
}

.policy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(242, 181, 138, 0.10), transparent 65%),
    radial-gradient(50% 60% at 90% 100%, rgba(166, 239, 143, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.policy-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 251, 242, 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

.policy-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 22px;
}

.policy-hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
}

.policy-hero__meta strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-on-dark);
  margin-top: 4px;
}

.policy-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: 4px;
  transition: color 240ms var(--ease-out);
}

.policy-hero__back:hover { color: var(--peach); }
.policy-hero__back svg { width: 14px; height: 14px; transition: transform 240ms var(--ease-out); }
.policy-hero__back:hover svg { transform: translateX(-3px); }

/* Policy hero title — SF Pro Display heavy for the structure word
   ("Política de", "Términos") + Fraunces italic for the accent word
   ("privacidad", "de uso"). Same pattern as section titles. */
.policy-hero__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 6.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 4px 0 8px;
  color: var(--text-on-dark);
}

.policy-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--peach);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.policy-hero__lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  max-width: 60ch;
  margin: 0;
}

/* Policy body */

.policy-body {
  background: var(--cream);
  padding-block: clamp(64px, 10vh, 120px) clamp(80px, 12vh, 160px);
  position: relative;
}

.policy-grid {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
}

@media (max-width: 880px) {
  .policy-grid { grid-template-columns: 1fr; gap: 32px; }
}

.policy-toc {
  position: sticky;
  top: 92px;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
  border-left: 1px solid var(--line-warm);
}

@media (max-width: 880px) {
  .policy-toc {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--line-warm);
    padding: 14px 0;
  }
}

.policy-toc__title {
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 10px;
  color: var(--brand-strong);
  padding-left: 18px;
  margin-bottom: 14px;
}

.policy-toc ol {
  list-style: none;
  padding: 0 0 0 18px;
  margin: 0;
  display: grid;
  gap: 8px;
  counter-reset: toc;
}
.policy-toc li { counter-increment: toc; }

.policy-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-muted);
  transition: color 220ms var(--ease-out);
}

.policy-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.1em;
}

.policy-toc a:hover { color: var(--brand-strong); }
.policy-toc a.is-active { color: var(--brand-strong); font-weight: 600; }

.policy-content {
  max-width: var(--reading-max);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  color: var(--text-ink);
}

.policy-content h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 56px 0 18px;
  scroll-margin-top: 100px;
  color: var(--text-ink);
  display: grid;
  gap: 6px;
}

.policy-content h2:first-of-type { margin-top: 0; }

.policy-content h2 .h-index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--peach-deep);
  font-weight: 500;
}

.policy-content h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
  color: var(--text-ink);
}

.policy-content p { margin: 0 0 16px; color: var(--text-ink); }
.policy-content p + p { margin-top: 0; }

.policy-content ul, .policy-content ol {
  padding-left: 22px;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: var(--text-ink);
}

.policy-content li { line-height: 1.65; }
.policy-content li::marker { color: var(--brand-strong); }

.policy-content a {
  color: var(--brand-strong);
  text-decoration: underline;
  text-decoration-color: rgba(31, 89, 13, 0.32);
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms var(--ease-out);
}

.policy-content a:hover { text-decoration-color: var(--brand-strong); }

.policy-content strong { color: var(--text-ink); font-weight: 600; }

.policy-content blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 2px solid var(--brand-strong);
  background: var(--paper);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.policy-content blockquote strong { color: var(--brand-strong); }

.policy-content .callout {
  margin: 32px 0;
  padding: 22px 26px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-md);
  background: var(--paper);
  display: grid;
  gap: 6px;
}

.policy-content .callout-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--peach-deep);
}

.policy-content .callout p:last-child { margin-bottom: 0; }

.policy-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--brand-strong);
}

/* ─────────────────────────────────────────────────────────
   Reveal motion (scroll triggered) — JS sets opacity 0 + lift.
   No-JS fallback always shows content.
   ───────────────────────────────────────────────────────── */

.reveal { will-change: opacity, transform; }
.no-js .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* Keep opacity transitions, drop motion. Aurora opacity-only.
     Fireflies stay but stop drifting. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .firefly { animation: firefly-twinkle-fallback 4s ease-in-out infinite alternate !important; }
  .aurora__blob { animation: none !important; opacity: 0.4 !important; }
  .hero__cue-line::after { animation: none !important; }
}

@keyframes firefly-twinkle-fallback {
  0%   { opacity: 0.18; }
  100% { opacity: 0.55; }
}