/* ============================================================
   VUELOBUENO.COM · Sistema de diseño
   "Todo sobre volar bien" — la autoridad en vuelos en español
   ============================================================ */

/* ---- Fuentes (self-hosted, subconjunto latino) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallback con métricas ajustadas → cero salto de diseño (CLS) */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* ===================== TOKENS ===================== */
:root {
  /* Marca · cielo del amanecer */
  --ink:        #0b1020;
  --ink-2:      #111a38;
  --navy:       #15224f;
  --sky:        #2563eb;
  --sky-deep:   #1746a8;
  --sky-bright: #38bdf8;
  --sky-soft:   #dbe7ff;
  --sunset:     #ff7a3c;
  --gold:       #f4b740;
  --mint:       #10b981;
  --coral:      #dc2050;
  --grape:      #7c5cff;

  /* Neutros */
  --paper:   #ffffff;
  --cloud:   #f3f6fc;
  --cloud-2: #e9f0fb;
  --mist:    #d8e3f4;
  --line:    #e3eaf6;
  --text:      #18203a;
  --text-soft: #46526f;
  --text-mute: #5f6a85;
  --on-dark:      #eef2fd;
  --on-dark-soft: #b6c2de;
  --on-dark-mute: #9aa6c6;

  /* Tipografía */
  --font-sans: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Fraunces-fallback', Georgia, 'Times New Roman', serif;

  /* Escala fluida */
  --fs-xs:  0.78rem;
  --fs-sm:  0.875rem;
  --fs-base: 1rem;
  --fs-md:  clamp(1.06rem, 1.01rem + 0.25vw, 1.2rem);
  --fs-lg:  clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-xl:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --fs-3xl: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --fs-4xl: clamp(3rem, 2rem + 5vw, 6rem);

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Radios */
  --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(15,27,58,.06);
  --sh-sm: 0 4px 14px -6px rgba(15,27,58,.14);
  --sh:    0 14px 34px -12px rgba(15,27,58,.20);
  --sh-lg: 0 30px 60px -20px rgba(15,27,58,.32);
  --sh-glow: 0 18px 50px -16px rgba(37,99,235,.46);

  --maxw: 1208px;
  --prose: 720px;
  --header-h: 70px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt";
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--cloud-2); }
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { padding: 0; list-style-position: inside; }
:focus-visible {
  outline: 3px solid var(--sky-bright);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--sunset); color: #fff; }
::-moz-selection { background: var(--sunset); color: #fff; }
strong, b { font-weight: 700; }

/* ===================== TIPOGRAFÍA ===================== */
h1, h2, h3, h4 { line-height: 1.14; font-weight: 600; letter-spacing: -.018em; color: var(--text); }
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.022em; }
.eyebrow {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sky);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--sunset));
}
.eyebrow.on-dark { color: var(--sky-bright); }
.lede { font-size: var(--fs-md); color: var(--text-soft); line-height: 1.6; }

/* ===================== LAYOUT ===================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.wrap-narrow { max-width: 880px; }
.section { padding-block: clamp(3.4rem, 7vw, 6.4rem); }
.section-sm { padding-block: clamp(2.4rem, 5vw, 4rem); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem;
  border-radius: var(--r-sm); font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; text-decoration: none; }
.center { text-align: center; }
.section-head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; }
.section-head h2 { font-size: var(--fs-2xl); margin-top: .5rem; }
.section-head p { margin-top: .9rem; font-size: var(--fs-md); color: var(--text-soft); }
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.7rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.bg-cloud { background: var(--cloud); }
.bg-soft  { background: linear-gradient(180deg, var(--paper), var(--cloud)); }
.bg-ink {
  background:
    radial-gradient(900px 540px at 78% -8%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(760px 520px at 8% 108%, rgba(255,122,60,.20), transparent 62%),
    linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 50%, var(--navy) 100%);
  color: var(--on-dark);
}
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
.bg-ink .lede, .bg-ink p { color: var(--on-dark-soft); }

/* ===================== HEADER ===================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -22px rgba(15,27,58,.5);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.4rem; width: 100%; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.32rem;
  color: var(--ink); letter-spacing: -.02em;
}
.brand-name b { color: var(--sky); font-weight: 600; }
.nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav a {
  color: var(--text-soft); font-weight: 600; font-size: .95rem;
  padding: .55rem .8rem; border-radius: var(--r-sm);
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--ink); background: var(--cloud-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--sky); }
.nav-cta { margin-left: .5rem; }
.nav-toggle {
  display: none; width: 44px; height: 44px; margin-left: auto;
  border-radius: var(--r-sm); color: var(--ink);
}
.nav-toggle svg { margin-inline: auto; }
@media (max-width: 940px) {
  .nav-toggle { display: flex; align-items: center; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--paper); padding: 1rem clamp(1.1rem,4vw,2.5rem) 1.6rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh);
    transform: translateY(-130%); transition: transform .34s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: .85rem .7rem; font-size: 1.05rem; }
  .nav-cta { margin: .6rem 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ===================== BOTONES ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: .96rem; line-height: 1;
  padding: .95em 1.5em; border-radius: var(--r-pill);
  transition: transform .16s var(--ease), box-shadow .2s, background .2s, color .2s;
  white-space: nowrap; text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary {
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  color: #fff; box-shadow: var(--sh-glow);
}
.btn-primary:hover { box-shadow: 0 22px 56px -16px rgba(37,99,235,.62); }
.btn-sun {
  background: linear-gradient(135deg, var(--sunset) 0%, #ff5e7a 100%);
  color: #1a1205; box-shadow: 0 16px 44px -16px rgba(255,122,60,.6);
}
.btn-ghost {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1.6px var(--mist);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.6px var(--sky); color: var(--sky); }
.btn-on-dark {
  background: rgba(255,255,255,.1); color: #fff;
  box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.26);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover { background: rgba(255,255,255,.2); }
.btn-lg { padding: 1.1em 1.9em; font-size: 1.04rem; }
.btn-sm { padding: .68em 1.1em; font-size: .86rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; color: var(--sky);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ===================== PÍLDORAS / BADGES ===================== */
.pill {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  padding: .42em .82em; border-radius: var(--r-pill);
  background: var(--cloud-2); color: var(--text-soft);
}
.pill svg { width: 1em; height: 1em; }
.pill-sky   { background: var(--sky-soft); color: var(--sky-deep); }
.pill-sun   { background: #ffe7d6; color: #c44a16; }
.pill-mint  { background: #d4f5e9; color: #0a6b49; }
.pill-coral { background: #ffe0e7; color: #c81e44; }
.pill-gold  { background: #fdeec3; color: #9a6f00; }
.pill-grape { background: #e7e2ff; color: #5a3ed6; }
.pill.on-dark { background: rgba(255,255,255,.12); color: var(--on-dark); }
.tag {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ===================== HERO HOME ===================== */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(56,189,248,.28), transparent 58%),
    radial-gradient(900px 680px at 6% 112%, rgba(255,122,60,.26), transparent 60%),
    linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 46%, var(--navy) 78%, #1d3a86 100%);
  color: var(--on-dark);
}
.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-sky svg { width: 100%; height: 100%; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(1.5rem, 4vw, 3.4rem); align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-3xl); color: #fff; letter-spacing: -.025em;
  margin-top: 1.1rem;
}
.hero h1 .grad {
  background: linear-gradient(105deg, var(--sky-bright) 12%, var(--sunset) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { color: var(--on-dark-soft); margin-top: 1.2rem; max-width: 32em; font-size: var(--fs-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.2rem; }
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust dt { font-family: var(--font-display); font-size: 1.9rem; color: #fff; font-weight: 600; }
.hero-trust dd { font-size: var(--fs-sm); color: var(--on-dark-mute); }

/* tarjeta visual del hero */
.hero-card {
  position: relative; background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg);
  padding: 1.4rem; backdrop-filter: blur(8px);
  box-shadow: var(--sh-lg);
}
.hero-card-map { width: 100%; height: auto; border-radius: var(--r); }
.hero-routes { margin-top: 1rem; display: grid; gap: .55rem; }
.hero-route {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255,255,255,.06); border-radius: var(--r-sm);
  padding: .62rem .8rem; font-size: var(--fs-sm);
}
.hero-route .r-path { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; }
.hero-route .r-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky-bright); }
.hero-route .r-line { width: 26px; height: 2px; background: linear-gradient(90deg,var(--sky-bright),var(--sunset)); border-radius: 2px; }
.hero-route .r-price { margin-left: auto; font-weight: 800; color: var(--gold); }
.hero-route .r-prog { font-size: var(--fs-xs); color: var(--on-dark-mute); }

/* ===================== CARDS BASE ===================== */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.5rem;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.card-link:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--mist); text-decoration: none; }
a.card:hover { text-decoration: none; }

/* Pilares */
.pillar {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.7rem; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .22s;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--sh); text-decoration: none; }
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--sky), var(--sunset));
}
.pillar-ico { width: 54px; height: 54px; }
.pillar h3 { font-size: var(--fs-lg); }
.pillar p { color: var(--text-soft); font-size: var(--fs-sm); flex: 1; }
.pillar .link-arrow { margin-top: .3rem; }
.pillar .pill { align-self: flex-start; }

/* Tarjeta de guía */
.guide-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.guide-card:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--mist); text-decoration: none; }
.guide-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.guide-thumb svg { width: 100%; height: 100%; }
.guide-thumb .pill { position: absolute; top: .8rem; left: .8rem; }
.guide-body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.guide-body h3 { font-size: var(--fs-md); letter-spacing: -.02em; }
.guide-card:hover h3 { color: var(--sky); }
.guide-body p { font-size: var(--fs-sm); color: var(--text-soft); flex: 1; }
.guide-meta {
  display: flex; align-items: center; gap: .8rem;
  font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600;
  margin-top: .3rem;
}
.guide-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mist); }

/* Tarjeta de programa */
.prog-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.5rem; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .22s;
}
.prog-card:hover { transform: translateY(-5px); box-shadow: var(--sh); text-decoration: none; }
.prog-top { display: flex; align-items: center; gap: .8rem; }
.prog-emblem { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.prog-card h3 { font-size: var(--fs-md); }
.prog-card .prog-sub { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; }
.prog-card p { font-size: var(--fs-sm); color: var(--text-soft); flex: 1; }
.rating { display: flex; align-items: center; gap: .3rem; }
.rating .stars { display: inline-flex; gap: 1px; }
.rating .stars svg { width: 15px; height: 15px; }
.rating .score { font-weight: 800; font-size: var(--fs-sm); }

/* ===================== STATS ===================== */
.stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width: 760px) { .stat-band { grid-template-columns: repeat(2,1fr); } }
.stat {
  text-align: center; padding: 1.4rem 1rem;
  border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line);
}
.stat .num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem,1.4rem+2.4vw,3rem); line-height: 1;
  background: linear-gradient(120deg, var(--sky), var(--sunset));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .4rem; font-weight: 600; }
.bg-ink .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.bg-ink .stat .lbl { color: var(--on-dark-soft); }

/* ===================== CALLOUTS ===================== */
.callout {
  display: flex; gap: .95rem; padding: 1.15rem 1.3rem;
  border-radius: var(--r); margin-block: 1.6rem;
  background: var(--cloud); border: 1px solid var(--line);
  border-left: 4px solid var(--sky);
}
.callout-ico { flex-shrink: 0; width: 26px; height: 26px; color: var(--sky); }
.callout-body { font-size: var(--fs-sm); }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body strong { color: var(--text); }
.callout-title { display: block; font-weight: 800; color: var(--text); margin-bottom: .25rem; letter-spacing: -.01em; }
.callout-tip   { background: #eaf6ff; border-left-color: var(--sky); }
.callout-tip .callout-ico { color: var(--sky); }
.callout-warn  { background: #fff4ed; border-left-color: var(--sunset); }
.callout-warn .callout-ico { color: #e0561c; }
.callout-danger{ background: #fff0f3; border-left-color: var(--coral); }
.callout-danger .callout-ico { color: var(--coral); }
.callout-sweet { background: #fff8e3; border-left-color: var(--gold); }
.callout-sweet .callout-ico { color: #c98f00; }
.callout-source{ background: var(--cloud); border-left-color: var(--text-mute); font-size: var(--fs-xs); }
.callout-source .callout-ico { color: var(--text-mute); }

/* ===================== PROSE (cuerpo de guías) ===================== */
.prose { font-size: var(--fs-md); color: var(--text); line-height: 1.75; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-xl); margin-top: 2.8rem; scroll-margin-top: 90px;
  letter-spacing: -.02em; line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: 2rem; scroll-margin-top: 90px; }
.prose h4 { font-size: var(--fs-md); margin-top: 1.6rem; color: var(--text); }
.prose p { color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sky-soft); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--sky); }
.prose ul, .prose ol { padding-left: 1.3rem; list-style-position: outside; color: var(--text-soft); }
.prose li { margin-top: .5rem; padding-left: .3rem; }
.prose li::marker { color: var(--sky); font-weight: 700; }
.prose blockquote {
  border-left: 4px solid var(--sunset);
  background: var(--cloud); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 1rem 1.3rem; font-style: italic; color: var(--text);
}
.prose blockquote cite { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--text-mute); margin-top: .5rem; font-weight: 600; }
.prose hr { border: none; height: 1px; background: var(--line); margin-block: 2.2rem; }
.prose figure { margin-block: 2rem; }
.prose figcaption { font-size: var(--fs-sm); color: var(--text-mute); margin-top: .6rem; text-align: center; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--cloud-2); padding: .12em .42em;
  border-radius: 5px; color: var(--sky-deep);
}
.lead-answer {
  font-size: var(--fs-lg); color: var(--text); font-weight: 500;
  font-family: var(--font-display); line-height: 1.5;
  padding-left: 1.1rem; border-left: 3px solid var(--sky);
}

/* ===================== TABLAS ===================== */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r); margin-block: 1.8rem;
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  min-width: 520px;
}
table.data caption {
  text-align: left; font-weight: 700; color: var(--text-mute);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  padding: .9rem 1rem .3rem;
}
table.data th, table.data td { padding: .8rem 1rem; text-align: left; }
table.data thead th {
  background: var(--ink); color: #fff; font-weight: 700;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
table.data thead th:first-child { border-top-left-radius: 0; }
table.data tbody tr { border-top: 1px solid var(--line); }
table.data tbody tr:nth-child(even) { background: var(--cloud); }
table.data tbody tr:hover { background: var(--sky-soft); }
table.data td strong { color: var(--text); }
table.data .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.cell-good { color: #0a6b49; font-weight: 700; }
.cell-bad  { color: var(--coral); font-weight: 700; }

/* ===================== FAQ (details nativo) ===================== */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq details[open] { box-shadow: var(--sh-sm); border-color: var(--mist); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem; font-weight: 700; font-size: var(--fs-md);
  color: var(--text); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sky); }
.faq summary .q-mark {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--sky-soft); color: var(--sky-deep);
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 600; font-size: 1rem;
}
.faq summary .chev {
  margin-left: auto; flex-shrink: 0; width: 22px; height: 22px;
  color: var(--text-mute); transition: transform .25s var(--ease);
}
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .faq-a { padding: 0 1.3rem 1.25rem 4rem; }
.faq .faq-a p { color: var(--text-soft); font-size: var(--fs-sm); }
.faq .faq-a > :first-child { margin-top: 0; }
@media (max-width: 540px) { .faq .faq-a { padding-left: 1.3rem; } }

/* ===================== GUÍA: layout TOC ===================== */
.guide-layout {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
}
@media (max-width: 960px) { .guide-layout { grid-template-columns: 1fr; } }
.toc {
  position: sticky; top: calc(var(--header-h) + 18px);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem 1.1rem; background: var(--paper);
}
.toc-title {
  font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-mute); margin-bottom: .7rem;
}
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: 7px;
  font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600;
  line-height: 1.4;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--text-mute); font-variant-numeric: tabular-nums;
  font-weight: 700; flex-shrink: 0;
}
.toc a:hover { background: var(--cloud); color: var(--ink); text-decoration: none; }
.toc a.active { background: var(--sky-soft); color: var(--sky-deep); }
.toc a.active::before { color: var(--sky); }
@media (max-width: 960px) {
  .toc { position: static; }
  .toc-collapsible summary {
    cursor: pointer; font-weight: 800; list-style: none;
    display: flex; align-items: center; gap: .5rem;
  }
  .toc-collapsible summary::-webkit-details-marker { display: none; }
}

/* ===================== BREADCRUMB ===================== */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-sm); align-items: center; }
.crumbs a { color: var(--text-mute); font-weight: 600; }
.crumbs a:hover { color: var(--sky); }
.crumbs .sep { color: var(--mist); }
.crumbs span[aria-current] { color: var(--text-soft); font-weight: 700; }
.bg-ink .crumbs a { color: var(--on-dark-mute); }
.bg-ink .crumbs a:hover { color: var(--sky-bright); }
.bg-ink .crumbs span[aria-current] { color: var(--on-dark-soft); }
.bg-ink .crumbs .sep { color: rgba(255,255,255,.22); }

/* ===================== HERO de guía / hub ===================== */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(2.4rem,5vw,3.8rem) clamp(2.6rem,6vw,4.2rem); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-2xl); color: #fff; margin-top: 1rem; max-width: 18ch;
}
.page-hero .lede { color: var(--on-dark-soft); margin-top: 1rem; max-width: 56ch; }
.page-hero-deco { position: absolute; inset: 0; z-index: 0; opacity: .9; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; margin-top: 1.5rem;
  font-size: var(--fs-sm); color: var(--on-dark-soft);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta svg { width: 1.05em; height: 1.05em; color: var(--sky-bright); }

/* ===================== KEY FACTS / verdict box ===================== */
.factbox {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); overflow: hidden;
}
.factbox-head {
  background: var(--ink); color: #fff; padding: 1rem 1.3rem;
  font-weight: 700; display: flex; align-items: center; gap: .6rem;
}
.factbox-head svg { width: 1.2em; height: 1.2em; color: var(--gold); }
.factbox dl { display: grid; grid-template-columns: auto 1fr; }
.factbox dt, .factbox dd { padding: .8rem 1.3rem; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.factbox dt { font-weight: 700; color: var(--text-mute); background: var(--cloud); white-space: nowrap; }
.factbox dd { color: var(--text); }
.factbox dl > :nth-child(1), .factbox dl > :nth-child(2) { border-top: none; }

.verdict {
  border-radius: var(--r); padding: 1.5rem; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--cloud), var(--paper));
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
}
.verdict-score {
  width: 84px; height: 84px; border-radius: 20px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--sky), var(--sky-deep));
  font-family: var(--font-display);
}
.verdict-score b { font-size: 2rem; font-weight: 600; line-height: 1; }
.verdict-score span { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.verdict h2 { font-size: var(--fs-md); }
.verdict p { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .3rem; }
@media (max-width:520px){ .verdict { grid-template-columns: 1fr; text-align: center; } .verdict-score { margin-inline: auto; } }

/* ===================== PROS / CONTRAS ===================== */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .pc-grid { grid-template-columns: 1fr; } }
.pc {
  border-radius: var(--r); padding: 1.3rem; border: 1px solid var(--line);
}
.pc h3 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); }
.pc ul { list-style: none; padding: 0; margin-top: .8rem; display: grid; gap: .6rem; }
.pc li { display: flex; gap: .6rem; font-size: var(--fs-sm); color: var(--text-soft); }
.pc li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.pc-pro { background: #f0fbf6; border-color: #c5ecd9; }
.pc-pro h3 { color: #0a6b49; }
.pc-pro li svg { color: var(--mint); }
.pc-con { background: #fff3f5; border-color: #f7d2da; }
.pc-con h3 { color: var(--coral); }
.pc-con li svg { color: var(--coral); }

/* ===================== DATA VIZ ===================== */
.viz {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); padding: 1.5rem; margin-block: 1.8rem;
}
.viz-title { font-weight: 800; font-size: var(--fs-md); letter-spacing: -.01em; }
.viz-sub { font-size: var(--fs-sm); color: var(--text-mute); margin-top: .2rem; margin-bottom: 1.1rem; }
.viz figcaption { text-align: left; }
/* barras comparativas */
.bars { display: grid; gap: .9rem; }
.bar-row { display: grid; grid-template-columns: 130px 1fr; gap: .8rem; align-items: center; }
.bar-row .bar-lbl { font-size: var(--fs-sm); font-weight: 700; }
.bar-track { background: var(--cloud-2); border-radius: var(--r-pill); height: 30px; position: relative; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .7rem; color: #fff; font-weight: 800; font-size: var(--fs-sm);
  min-width: max-content;
}
.bar-fill.good { background: linear-gradient(90deg, #10b981, #066647); }
.bar-fill.bad  { background: linear-gradient(90deg, #f0531e, #b01838); }
.bar-fill.mid  { background: linear-gradient(90deg, var(--sky-bright), var(--sky)); }
@media (max-width:520px){ .bar-row { grid-template-columns: 1fr; gap: .25rem; } }

/* timeline */
.timeline { position: relative; padding-left: 1.7rem; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--sky), var(--sunset));
}
.tl-item { position: relative; padding-bottom: 1.3rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -1.7rem; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--sky);
}
.tl-item.warn::before { border-color: var(--coral); }
.tl-date { font-weight: 800; font-size: var(--fs-sm); color: var(--sky-deep); }
.tl-item.warn .tl-date { color: var(--coral); }
.tl-item p { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .2rem; }

/* comparador de transferencias */
.flowmap { display: grid; gap: .6rem; }
.flow-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center;
  background: var(--cloud); border-radius: var(--r-sm); padding: .7rem .9rem;
}
.flow-node { font-weight: 700; font-size: var(--fs-sm); }
.flow-arrow { display: flex; align-items: center; gap: .35rem; color: var(--sky); font-weight: 800; font-size: var(--fs-xs); }
.flow-arrow svg { width: 30px; height: 12px; }

/* ===================== CTA / EMAIL ===================== */
.cta-band { position: relative; overflow: hidden; }
.cta-card {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  padding: clamp(2rem, 5vw, 3.6rem);
  background:
    radial-gradient(700px 400px at 88% 0%, rgba(56,189,248,.3), transparent 62%),
    radial-gradient(600px 420px at 0% 110%, rgba(255,122,60,.28), transparent 60%),
    linear-gradient(150deg, var(--ink), var(--navy));
  color: var(--on-dark);
}
.cta-card h2 { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); }
.cta-card p { color: var(--on-dark-soft); margin-top: .7rem; max-width: 46ch; }
.signup {
  display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; max-width: 480px;
}
.signup input {
  flex: 1; min-width: 200px; padding: .9rem 1.1rem; border-radius: var(--r-pill);
  border: 1.6px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  color: #fff; font-size: .95rem;
}
.signup input::placeholder { color: var(--on-dark-mute); }
.signup input:focus-visible { outline-color: var(--sky-bright); }
.form-note { font-size: var(--fs-xs); color: var(--on-dark-mute); margin-top: .7rem; }
.form-ok { font-size: var(--fs-sm); color: var(--mint); font-weight: 700; margin-top: .8rem; display: none; }
.form-ok.show { display: block; }

/* picker de ciudades */
.city-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.city-chip {
  padding: .5rem .95rem; border-radius: var(--r-pill); font-weight: 700;
  font-size: var(--fs-sm); background: rgba(255,255,255,.08);
  color: var(--on-dark); border: 1.4px solid rgba(255,255,255,.16);
  transition: background .18s, border-color .18s, transform .15s;
}
.city-chip:hover { transform: translateY(-2px); }
.city-chip[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: #fff; }

/* ===================== DEALS ===================== */
.deal {
  display: flex; flex-direction: column; gap: .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); padding: 1.3rem; position: relative;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.deal:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.deal-route { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: var(--fs-md); }
.deal-route svg { width: 20px; height: 20px; color: var(--sky); }
.deal-price { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--ink); }
.deal-price small { font-size: .9rem; color: var(--text-mute); font-family: var(--font-sans); font-weight: 600; }
.deal-meta { font-size: var(--fs-xs); color: var(--text-mute); font-weight: 600; }
.deal-disc {
  position: absolute; top: 1rem; right: 1rem;
  background: #066647; color: #fff; font-weight: 800; font-size: var(--fs-xs);
  padding: .3rem .6rem; border-radius: var(--r-pill);
}

/* ===================== FOOTER ===================== */
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.09);
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { font-size: var(--fs-sm); color: var(--on-dark-mute); margin-top: .8rem; max-width: 32ch; }
.footer-col h2 {
  color: #fff; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: .9rem; font-weight: 800;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--sky-bright); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; padding-top: 1.8rem; font-size: var(--fs-xs); color: var(--on-dark-mute);
}
.footer-bottom a { color: var(--on-dark-mute); }
.footer-bottom a:hover { color: var(--sky-bright); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); display: grid; place-items: center;
}
.footer-social a:hover { background: var(--sky); }
.footer-social svg { width: 18px; height: 18px; color: var(--on-dark); }
.footer-disc {
  font-size: var(--fs-xs); color: var(--on-dark-mute); margin-top: 1.5rem;
  padding: 1rem 1.2rem; background: rgba(255,255,255,.04); border-radius: var(--r-sm);
  line-height: 1.6;
}

/* ===================== MISC ===================== */
.related-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 760px) { .related-strip { grid-template-columns: 1fr; } }
.mini-card {
  display: flex; gap: .9rem; align-items: center; padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); text-decoration: none; }
.mini-card .mc-ico { width: 42px; height: 42px; flex-shrink: 0; }
.mini-card h3 { font-size: var(--fs-sm); }
.mini-card p { font-size: var(--fs-xs); color: var(--text-mute); }

.note-updated {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-mute);
}
.note-updated .ping { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); position: relative; }
.note-updated .ping::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--mint); opacity:.5;
}

.divider-plane { display: flex; align-items: center; gap: 1rem; color: var(--mist); margin-block: 2rem; }
.divider-plane::before, .divider-plane::after { content:""; flex:1; height:1px; background: var(--line); }
.divider-plane svg { width: 26px; height: 26px; color: var(--sky); }

.author-box {
  display: flex; gap: 1rem; align-items: center; padding: 1.2rem;
  background: var(--cloud); border-radius: var(--r); border: 1px solid var(--line);
}
.author-box .av { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.author-box .a-name { font-weight: 800; font-size: var(--fs-sm); }
.author-box .a-role { font-size: var(--fs-xs); color: var(--text-mute); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.prog-mini {
  font-weight: 700; font-size: var(--fs-sm); color: var(--text-soft);
  display: inline-flex; align-items: center; gap: .5rem;
}
.prog-mini::before {
  content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(135deg, var(--sky), var(--sunset));
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Glosario */
.glossary { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.glossary > div {
  padding: 1.15rem 1.4rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 230px 1fr; gap: .4rem 1.6rem; align-items: baseline;
  scroll-margin-top: 90px;
}
.glossary > div:first-child { border-top: none; }
.glossary > div:target { background: var(--sky-soft); }
.glossary dt { font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.glossary dt small { display: block; font-weight: 600; font-size: var(--fs-xs); color: var(--sky); margin-top: .15rem; }
.glossary dd { margin: 0; color: var(--text-soft); font-size: var(--fs-sm); }
.glossary dd a { font-weight: 600; }
@media (max-width: 620px) { .glossary > div { grid-template-columns: 1fr; } }

.az-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.az-nav a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; background: var(--cloud-2); color: var(--text-soft);
  font-weight: 800; font-size: var(--fs-sm);
}
.az-nav a:hover { background: var(--sky); color: #fff; text-decoration: none; }

/* utilidades */
.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:2rem}.mt-8{margin-top:3rem}
.mb-0{margin-bottom:0}
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}
.text-mute{color:var(--text-mute)}.text-soft{color:var(--text-soft)}
.fs-sm{font-size:var(--fs-sm)}.fw-700{font-weight:700}
.hide-mobile{}@media(max-width:600px){.hide-mobile{display:none}}
.full-bleed-card{grid-column:1/-1}

/* ===================== ANIMACIONES ===================== */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }
.js .reveal.d4 { transition-delay: .32s; }

@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes drift-x { 0%{transform:translateX(-30px)} 100%{transform:translateX(calc(100vw + 60px))} }
@keyframes twinkle { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes dash { to { stroke-dashoffset: -1000; } }
@keyframes plane-arc { to { offset-distance: 100%; } }
.anim-float { animation: float-y 7s ease-in-out infinite; }
.anim-twinkle { animation: twinkle 4s ease-in-out infinite; }
.flight-dash { stroke-dasharray: 6 9; animation: dash 26s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===================== PRINT ===================== */
@media print {
  .site-header, .site-footer, .nav-toggle, .toc, .cta-band, .hero-sky, .page-hero-deco { display: none !important; }
  body { color: #000; }
  .bg-ink, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .bg-ink h1,.bg-ink h2,.hero h1,.page-hero h1 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}