/* =========================================================
   English with Purpose — landing
   Identity taken from the original material (PDF "Refranes C1",
   study plan, verb-patterns worksheet): navy #1E3175, lavender sky,
   watercolour blue, compass coral, gold rules. Lato + Cormorant.
   ========================================================= */

:root {
  /* colour */
  --navy: #1E3175;
  --night: #0E1838;
  --night-2: #16224A;
  --ink: #16204A;
  --ink-soft: #4E5781;
  --mist: #EEF0FC;
  --mist-2: #DADEF8;
  --lavender: #C9CDF3;
  --cloud: #F7F8FE;
  --sky: #9CC6EC;
  --signal: #E0542C;      /* compass centre dot */
  --amber: #F2B632;       /* "prioridad media" */
  --green: #6AA431;       /* "contenido complementario" */
  --slate: #5F6B8A;       /* "repaso, simulacro" */
  --wine: #8F2A2A;        /* FASE 4 */
  --gold: #A97B2E;
  --gold-light: #C9A464;
  --asphalt: #2B3352;
  --white: #FFFFFF;
  --line: rgba(30, 49, 117, .14);
  --line-light: rgba(232, 234, 251, .16);

  /* type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(88px, 12vw, 168px);
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 76px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; text-wrap: balance; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--navy); color: var(--white); }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.skip-link:focus { top: 16px; }

/* compass dot — the period of every headline */
.dot { display: inline-block; width: .15em; height: .15em; margin-left: .06em; border-radius: 50%; background: var(--signal); vertical-align: .02em; }
.dot--pulse { box-shadow: 0 0 0 0 rgba(224, 84, 44, .55); animation: dot-pulse 2.8s ease-out infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 84, 44, .5); } 70%, 100% { box-shadow: 0 0 0 .5em rgba(224, 84, 44, 0); } }

/* navigation-chart grid */
.chart-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 35%, #000 20%, transparent 75%);
          mask-image: radial-gradient(80% 70% at 70% 35%, #000 20%, transparent 75%);
  opacity: .55;
}
.chart-grid--dark { background-image: linear-gradient(var(--line-light) 1px, transparent 1px), linear-gradient(90deg, var(--line-light) 1px, transparent 1px); opacity: .5; }

/* ---------- shared type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
}
.eyebrow__num { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; color: var(--signal); }
.eyebrow__num::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold-light); margin-left: 12px; vertical-align: middle; }
.eyebrow--light { color: var(--lavender); }

.display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: .98; letter-spacing: -.012em; color: var(--ink);
}
.display em { font-style: italic; font-weight: 500; color: var(--navy); }
.display--light { color: var(--white); }
.display--light em { color: var(--lavender); }
.display--xl { font-size: clamp(3rem, 8vw, 7.4rem); }

.section-head { display: grid; gap: 24px; margin-bottom: clamp(48px, 7vw, 96px); }
.section-head--split { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; }
.section-head--split .eyebrow { padding-top: .9em; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } .section-head--split .eyebrow { padding-top: 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 700 14px/1 var(--font-body); letter-spacing: .06em; text-decoration: none;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--navy); color: var(--white); box-shadow: 0 14px 30px -16px rgba(30, 49, 117, .8); }
.btn--primary:hover { background: var(--night); transform: translateY(-2px); }
.btn--ghost { color: var(--navy); border-color: rgba(30, 49, 117, .35); background: rgba(255, 255, 255, .4); }
.btn--ghost:hover { border-color: var(--navy); background: rgba(255, 255, 255, .8); }
.btn--lg { padding: 20px 34px; font-size: 15px; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.site-header.is-scrolled {
  background: rgba(238, 240, 252, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__emblem { width: 44px; height: auto; }
.brand__text { display: grid; justify-items: start; line-height: 1.1; }
/* wordmark as in María's logo: tracked Garamond capitals over a light humanist sans */
.brand__name { font: 600 15px/1.1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #1C2541; }
.brand__sub { font: 400 12px/1.3 var(--font-body); letter-spacing: .04em; color: #6F7FA0; }
.brand__tag { margin-top: 2px; padding-top: 3px; border-top: 1px solid #D5DAE8; font: 400 7.5px/1.3 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: #6F7FA0; }
@media (max-width: 420px) { .brand__tag { display: none; } }

.site-nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.site-nav a {
  position: relative; display: inline-block; padding: 6px 0;
  font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.site-nav a:not(.site-nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav__cta { padding: 11px 18px !important; border: 1px solid var(--navy); border-radius: 999px; transition: background-color .3s, color .3s; }
.site-nav__cta:hover { background: var(--navy); color: var(--white) !important; }

.nav-toggle { display: none; position: relative; z-index: 2; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { position: absolute; left: 50%; width: 18px; height: 1.5px; margin-left: -9px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; content: ""; }
.nav-toggle__bars { top: 50%; }
.nav-toggle__bars::before { top: -6px; left: 0; margin: 0; }
.nav-toggle__bars::after { top: 6px; left: 0; margin: 0; }
.nav-open .nav-toggle { background: transparent; border-color: var(--line-light); }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); background: var(--white); }
.nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); background: var(--white); }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 0; z-index: 1;
    display: flex; align-items: center;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    background: var(--night);
    visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .nav-open .site-nav { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 6px; }
  .site-nav a { font: 500 clamp(2.2rem, 9vw, 3.2rem)/1.15 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--white); }
  .site-nav a::after { background: var(--signal); }
  .site-nav__cta { margin-top: 18px; border-color: var(--line-light) !important; padding: 14px 24px !important; font: 700 13px/1 var(--font-body) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
  .nav-open .brand__name { color: var(--white); }
  .nav-open .brand__sub, .nav-open .brand__tag { color: var(--lavender); border-color: var(--line-light); }
  .nav-open .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .brand { position: relative; z-index: 2; }
}
.nav-open { overflow: hidden; }

/* =========================================================
   1 · HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(100svh, 1000px);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 48px) 0 96px;
  background:
    radial-gradient(60% 55% at 74% 18%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 80% at 20% 100%, var(--mist-2) 0%, rgba(218, 222, 248, 0) 70%),
    linear-gradient(180deg, var(--mist) 0%, #E4E7FB 100%);
}
.hero__inner { display: grid; gap: 28px; }
.hero__inner > :not(.hero__art) { position: relative; z-index: 2; max-width: min(100%, 58vw); }
@media (max-width: 920px) { .hero__inner > :not(.hero__art) { max-width: none; } }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font: 700 11px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.coord { font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; color: var(--navy); }
.hero__meta-sep { width: 36px; height: 1px; background: var(--gold-light); }

.hero__title {
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(3rem, 6.6vw, 7.4rem); line-height: .88; letter-spacing: -.015em; color: var(--ink);
}
.hero__line { display: block; }
.hero__line--shift { padding-left: 1.05em; }
.hero__line--serif .dot { margin-left: 0; }
.hero__line--serif { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.2em; line-height: .86; letter-spacing: -.005em; color: var(--navy); }
.hero__word { display: inline-block; white-space: nowrap; }

.hero__copy { display: grid; gap: 20px; width: min(34rem, 40vw); margin-left: clamp(0px, 7vw, 8.5rem); margin-top: 12px; }
.hero__lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--ink); }
.hero__note { padding-left: 18px; border-left: 1px solid var(--gold-light); color: var(--ink-soft); font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* art: washed tower + original emblem in front */
.hero__art { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: min(46vw, 760px); pointer-events: none; }
.hero__tower {
  position: absolute; right: 0; top: 2%; height: 104%; width: auto; max-width: none;
  mix-blend-mode: multiply; opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%);
          mask-composite: intersect;
}
.hero__lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__lights path { fill: none; stroke: #FFFFFF; stroke-width: 1.3; opacity: .9; stroke-dasharray: 220 520; animation: light-sweep 11s linear infinite; }
.hero__lights path:nth-child(2) { animation-duration: 14s; animation-delay: -5s; }
.hero__lights path:nth-child(3) { animation-duration: 17s; animation-delay: -9s; opacity: .7; }
.hero__lights path:nth-child(4) { animation-duration: 13s; animation-delay: -3s; opacity: .6; }
.hero__lights path:nth-child(5) { animation-duration: 19s; animation-delay: -12s; opacity: .5; }
@keyframes light-sweep { from { stroke-dashoffset: 740; } to { stroke-dashoffset: 0; } }

.hero__rose { position: absolute; left: 40%; top: 60%; width: clamp(220px, 19vw, 280px); transform: translate(-50%, -50%); }
.hero__rose::before { content: ""; position: absolute; left: 51%; top: 51%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55) 60%, rgba(255, 255, 255, 0)); }
.hero__emblem { position: relative; width: 100%; height: auto; }
.hero__card { position: absolute; left: 51.1%; top: 51.4%; width: 172%; height: auto; transform: translate(-50%, -50%); overflow: visible; color: var(--navy); }
.hero__ticks { transform-box: fill-box; transform-origin: center; animation: spin 160s linear infinite; }
.hero__pulse circle { fill: none; stroke: var(--signal); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: radio 4.8s ease-out infinite; }
.hero__pulse circle:nth-child(2) { animation-delay: -1.6s; }
.hero__pulse circle:nth-child(3) { animation-delay: -3.2s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes radio { 0% { transform: scale(.45); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }

.hero__chart-caption { position: absolute; right: var(--gutter); bottom: 32px; display: flex; gap: 18px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-soft); }

.scroll-cue { position: absolute; z-index: 2; left: var(--gutter); bottom: 0; width: 1px; height: 72px; overflow: hidden; }
.scroll-cue__line { position: absolute; inset: 0; background: linear-gradient(var(--navy), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* entrance */
.js .hero__word { opacity: 0; transform: translateY(.35em); }
.is-loaded .hero__word { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.is-loaded .hero__line:nth-child(1) .hero__word:nth-child(2) { transition-delay: .08s; }
.is-loaded .hero__line:nth-child(2) .hero__word:nth-child(1) { transition-delay: .16s; }
.is-loaded .hero__line:nth-child(2) .hero__word:nth-child(2) { transition-delay: .22s; }
.is-loaded .hero__line:nth-child(3) .hero__word { transition-delay: .32s; }
.js .hero__art { opacity: 0; }
.is-loaded .hero__art { opacity: 1; transition: opacity 1.6s var(--ease) .2s; }

@media (max-width: 920px) {
  .hero { display: block; min-height: 0; padding-bottom: 0; }
  .hero__title { font-size: clamp(2.9rem, 13vw, 5.6rem); }
  .hero__copy { margin-left: 0; width: auto; max-width: 36rem; }
  .hero__art { position: relative; width: auto; height: clamp(380px, 92vw, 560px); margin-top: 24px; }
  .hero__tower { height: 100%; right: -6%; }
  .hero__rose { left: 38%; top: 52%; width: clamp(180px, 46vw, 260px); }
  .hero__chart-caption { bottom: 20px; }
  .scroll-cue { display: none; }
}

/* phases of the ENAIRE selection process that María prepares */
.phases { display: flex; flex-wrap: wrap; gap: 10px; }
.phase { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 1px solid rgba(30, 49, 117, .2); border-radius: 999px; background: rgba(255, 255, 255, .6); }
.phase__n { padding: 6px 10px; border-radius: 999px; background: var(--navy); color: var(--white); font: 900 .66rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.phase__name { font: 500 1.05rem/1.2 var(--font-display); font-style: italic; color: var(--ink); }
.phase:last-child .phase__n { background: var(--signal); }
.phases--dark { margin-top: 8px; }
.phases--dark .phase { border-color: var(--line-light); background: rgba(255, 255, 255, .04); }
.phases--dark .phase__n { background: var(--mist); color: var(--night); }
.phases--dark .phase:last-child .phase__n { background: var(--signal); color: var(--white); }
.phases--dark .phase__name { color: var(--mist); }

/* =========================================================
   2 · VALUE
   ========================================================= */
.value { position: relative; padding-block: var(--section-y); background: var(--cloud); }
.underline-draw { position: relative; white-space: nowrap; }
.underline-draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .06em; background: var(--gold-light); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .35s; }
.is-visible .underline-draw::after, .underline-draw.is-visible::after, .is-visible.display .underline-draw::after { transform: scaleX(1); }
.no-js .underline-draw::after { transform: scaleX(1); }

.value__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-left: 25%; max-width: 920px; color: var(--ink-soft); }
.value__text p:first-child { color: var(--ink); font-size: 1.12em; }
@media (max-width: 860px) { .value__text { grid-template-columns: 1fr; margin-left: 0; } }

.pillars { margin-top: clamp(72px, 10vw, 140px); border-top: 1px solid var(--line); }
.pillar {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 18rem); gap: 24px; align-items: center;
  padding-block: clamp(18px, 2.6vw, 30px); border-bottom: 1px solid var(--line);
}
.pillar__num { font: italic 500 1.4rem/1 var(--font-display); color: var(--gold); }
.pillar__word {
  font: 900 clamp(2rem, 6.2vw, 6rem)/.95 var(--font-body); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.2px var(--navy);
  background: linear-gradient(90deg, var(--navy), var(--navy)) no-repeat left / 0% 100%;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size 1.2s var(--ease), letter-spacing .6s var(--ease);

}
.pillar.is-visible .pillar__word, .no-js .pillar__word { background-size: 100% 100%; }
.pillar:hover .pillar__word { letter-spacing: 0; }
.pillar__desc { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.25; color: var(--ink-soft); }
.pillar:nth-child(2) .pillar__word { padding-left: .6em; }
.pillar:nth-child(3) .pillar__word { padding-left: 1.2em; }
.pillar:nth-child(4) .pillar__word { padding-left: .3em; }
@media (max-width: 760px) {
  .pillar { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; }
  .pillar__desc { grid-column: 2; }
  .pillar:nth-child(n) .pillar__word { padding-left: 0; }
}

/* =========================================================
   3 · PREPARATION — flight progress strips
   ========================================================= */
.prep { position: relative; overflow: hidden; padding-block: var(--section-y); background: var(--night); color: var(--mist); }
.prep .container { position: relative; }
.prep__intro { max-width: 34rem; color: var(--lavender); font-size: 1.05rem; }

.strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 40px); padding-bottom: 56px; }
.strip {
  --accent: var(--signal);
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; min-height: 148px;
  background: #F4F5FD; color: var(--ink); border-radius: 3px; overflow: hidden;
  box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .8);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.strip:hover { transform: translateX(8px); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .9); }
.strips .strip:nth-child(even) { transform: translateY(56px); }
.strips .strip:nth-child(even):hover { transform: translate(8px, 56px); }
.strip__code { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 18px 0 18px 6px; border-right: 1px dashed rgba(22, 32, 74, .28); }
.strip__id { font: 500 1.3rem/1 var(--font-mono); letter-spacing: .08em; }
.strip__n { font: 500 .72rem/1 var(--font-mono); color: var(--ink-soft); }
.strip__body { padding: 22px 24px; display: grid; gap: 6px; align-content: center; }
.strip__title { font: 900 .95rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.strip__body p { font-size: .95rem; line-height: 1.5; color: #3A426A; }
.strip__tags { display: grid; align-content: center; gap: 6px; padding: 18px 20px; border-left: 1px solid rgba(22, 32, 74, .1); background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(22, 32, 74, .07) 23px 24px); }
.strip__tags li { font: 500 .68rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 980px) {
  .strips { grid-template-columns: 1fr; padding-bottom: 0; }
  .strips .strip:nth-child(even) { transform: none; }
  .strips .strip:nth-child(even):hover { transform: translateX(8px); }
}
@media (max-width: 560px) {
  .strip { grid-template-columns: 72px minmax(0, 1fr); }
  .strip__tags { grid-column: 1 / -1; display: flex; gap: 14px; border-left: 0; border-top: 1px dashed rgba(22, 32, 74, .2); padding: 12px 18px; background: none; }
  .strip__body { padding: 18px; }
}

/* =========================================================
   4 · METHOD — runway
   ========================================================= */
.method { position: relative; padding-block: var(--section-y); background: linear-gradient(180deg, var(--mist) 0%, #E7EAFB 100%); }
.method__intro { max-width: 40rem; margin-top: 28px; color: var(--ink-soft); font-size: 1.08rem; }

.runway { position: relative; }
.runway__lights { display: flex; gap: 10px; justify-content: flex-start; padding-left: 8px; margin-bottom: 16px; }
.runway__lights span { width: 9px; height: 9px; border-radius: 50%; background: rgba(30, 49, 117, .2); }
.runway.is-visible .runway__lights span { animation: rabbit 2.2s linear infinite; }
.runway__lights span:nth-child(2) { animation-delay: .18s !important; }
.runway__lights span:nth-child(3) { animation-delay: .36s !important; }
.runway__lights span:nth-child(4) { animation-delay: .54s !important; }
.runway__lights span:nth-child(5) { animation-delay: .72s !important; }
@keyframes rabbit { 0%, 30% { background: #FFFFFF; box-shadow: 0 0 10px 3px rgba(255, 255, 255, .9), 0 0 0 1px rgba(30, 49, 117, .25); } 45%, 100% { background: rgba(30, 49, 117, .2); box-shadow: none; } }

.runway__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.runway__step { display: grid; grid-template-rows: auto 1fr; }
.runway__mark {
  position: relative; display: grid; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center;
  min-height: 190px; padding: 20px 10px; color: #FFFFFF;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .78) 50%, transparent 0) center / 34px 3px repeat-x,
    linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) top 12px left 0 / 100% 2px no-repeat,
    linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) bottom 12px left 0 / 100% 2px no-repeat,
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 7px 7px,
    var(--asphalt);
}
.runway__step:first-child .runway__mark { border-radius: 4px 0 0 4px; padding-left: 54px; }
.runway__step:last-child .runway__mark { border-radius: 0 4px 4px 0; padding-right: 54px; }
.runway__step:first-child .runway__mark::before,
.runway__step:last-child .runway__mark::after {
  content: ""; position: absolute; top: 26px; bottom: 26px; width: 30px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 7px, transparent 7px 13px);
}
.runway__step:first-child .runway__mark::before { left: 14px; }
.runway__step:last-child .runway__mark::after { right: 14px; }
.runway__num { align-self: end; padding: 0 10px 10px; font: 900 clamp(2.2rem, 4.2vw, 3.6rem)/1 var(--font-body); letter-spacing: .04em; background: var(--asphalt); }
.runway__name { align-self: start; padding: 10px 8px 0; font: 700 .78rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--lavender); background: var(--asphalt); }
.runway__step p { padding: 22px 18px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; max-width: 15rem; }
.runway__step:first-child p { padding-left: 0; }
.js .runway__num, .js .runway__name { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.runway.is-visible .runway__num, .runway.is-visible .runway__name { opacity: 1; transform: none; }
.runway.is-visible .runway__step:nth-child(2) :is(.runway__num, .runway__name) { transition-delay: .15s; }
.runway.is-visible .runway__step:nth-child(3) :is(.runway__num, .runway__name) { transition-delay: .3s; }
.runway.is-visible .runway__step:nth-child(4) :is(.runway__num, .runway__name) { transition-delay: .45s; }
.runway.is-visible .runway__step:nth-child(5) :is(.runway__num, .runway__name) { transition-delay: .6s; }

@media (max-width: 860px) {
  .runway__steps { grid-template-columns: 1fr; }
  .runway__step { grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .runway__mark {
    min-height: 136px; padding: 18px 10px !important; border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .78) 50%, transparent 0) center / 3px 30px repeat-y,
      linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) top 0 left 12px / 2px 100% no-repeat,
      linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) top 0 right 12px / 2px 100% no-repeat,
      var(--asphalt);
  }
  .runway__step:first-child .runway__mark { border-radius: 4px 4px 0 0 !important; padding-top: 52px !important; }
  .runway__step:last-child .runway__mark { border-radius: 0 0 4px 4px !important; padding-bottom: 52px !important; }
  .runway__step:first-child .runway__mark::before, .runway__step:last-child .runway__mark::after {
    left: 24px; right: 24px; width: auto; height: 26px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 7px, transparent 7px 13px);
  }
  .runway__step:first-child .runway__mark::before { top: 14px; bottom: auto; }
  .runway__step:last-child .runway__mark::after { bottom: 14px; top: auto; }
  .runway__num { padding: 4px 6px; }
  .runway__name { padding: 6px 6px 4px; letter-spacing: .18em; }
  .runway__step p { padding: 0 0 0 22px !important; }
}

/* =========================================================
   5 · PRACTICE TEST — a sheet that answers and corrects itself on scroll
   States: .sq (waiting) → .is-active → .is-marked (candidate's answer) → .is-corrected
   Without JS or with reduced motion every question is shown corrected.
   ========================================================= */
.practice { position: relative; padding-block: var(--section-y); background: var(--cloud); }
.practice__intro { max-width: 40rem; margin-top: 28px; color: var(--ink-soft); font-size: 1.08rem; }

.sheet { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }

/* scoreboard — styled as a screen of María's own app: her lockup, lavender sky, gold rules */
.app {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; overflow: hidden;
  border: 1px solid rgba(30, 49, 117, .14); border-radius: 28px;
  background:
    radial-gradient(90% 60% at 85% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--mist) 0%, #E3E6FA 100%);
  box-shadow: 0 1px 0 #FFFFFF inset, 0 40px 70px -46px rgba(30, 49, 117, .6);
}
.app__bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px 14px; border-bottom: 1px solid rgba(201, 164, 100, .45); background: rgba(255, 255, 255, .55); }
.app__emblem { width: 40px; height: auto; }
.app__brand { display: grid; line-height: 1.15; }
.app__name { font: 600 13px/1.1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #1C2541; }
.app__sub { font: 400 11px/1.3 var(--font-body); letter-spacing: .04em; color: #6F7FA0; }

.app__screen { display: grid; gap: 18px; padding: 22px 22px 20px; }
.app__title { font: 600 1.5rem/1 var(--font-display); color: var(--ink); text-align: center; }
.app__title em { font-style: italic; font-weight: 500; color: var(--navy); }

.app__dial { position: relative; width: min(100%, 220px); margin-inline: auto; aspect-ratio: 1; }
.app__dial svg { width: 100%; height: 100%; overflow: visible; transform: rotate(0deg); }
.app__ring { fill: rgba(255, 255, 255, .7); stroke: rgba(30, 49, 117, .18); stroke-width: 1; }
.app__progress { fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-dasharray: 8 8; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dashoffset .8s var(--ease); }
.app__ticks line { stroke: var(--navy); stroke-opacity: .3; stroke-width: .8; }
.app__wp { fill: #FFFFFF; stroke: rgba(30, 49, 117, .35); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: fill .35s, stroke .35s, transform .35s var(--ease); }
.app__wp.is-current { stroke: var(--navy); stroke-width: 2; transform: scale(1.35); }
.app__wp.is-ok { fill: var(--green); stroke: var(--green); }
.app__wp.is-ko { fill: var(--signal); stroke: var(--signal); }
.app__wp.is-blank { fill: #FFFFFF; stroke: var(--navy); stroke-width: 2; }
.app__score { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: baseline; font: 500 3.3rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.app__score .dot { width: .14em; height: .14em; }
.app__score small { flex-basis: 100%; margin-top: 6px; text-align: center; font: 700 .62rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.app__score.is-bump > span:first-child { display: inline-block; animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: translateY(-5px); } }
.app__track { display: none; }

.app__counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.app__count { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .75); }
.app__count dt { font: 700 .56rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.app__count dd { margin: 0; font: 600 1.5rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.app__count--ok dd { color: #3E6A16; }
.app__count--ko dd { color: #A8361A; }

.app__rule { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; padding-top: 14px; border-top: 1px solid rgba(201, 164, 100, .45); font: 700 .62rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.app__note { font: italic 500 1.02rem/1.4 var(--font-display); color: var(--ink-soft); text-align: center; }
.app__foot { padding: 12px 20px 16px; text-align: center; font: 400 8.5px/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: #6F7FA0; }

/* question sheet */
.sheet__list { display: grid; gap: clamp(28px, 5vh, 56px); counter-reset: none; }
.sq { position: relative; padding: clamp(22px, 3vw, 34px); background: var(--white); border: 1px solid var(--line); border-radius: 6px; transition: opacity .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.sq__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.sq__n { font: 500 .8rem/1 var(--font-mono); color: var(--ink-soft); }
.sq__cat { display: inline-flex; align-items: center; gap: 8px; font: 700 .64rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sq__cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--slate); }
.sq__cat--vocab::before { background: var(--amber); }
.sq__cat--gram::before { background: var(--signal); }
.sq__cat--word::before { background: var(--sky); }
.sq__src { margin-left: auto; font: 500 .66rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sq__q { font: 500 clamp(1.35rem, 2.4vw, 1.85rem)/1.32 var(--font-display); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; }

.sq__blank { position: relative; display: inline-block; min-width: 4.2em; padding: 0 .2em; border-bottom: 1.5px solid var(--navy); text-align: center; }
.sq__fill { display: inline-block; font-style: italic; color: var(--navy); clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease), color .4s; }
.sq[data-state="ok"].is-corrected .sq__fill, .sheet:not(.js-sheet) .sq[data-state="ok"] .sq__fill { color: #3E6A16; }
.sq[data-state="ko"].is-corrected .sq__fill, .sheet:not(.js-sheet) .sq[data-state="ko"] .sq__fill { color: #A8361A; text-decoration: line-through; }
.sq[data-state="blank"].is-corrected .sq__fill, .sheet:not(.js-sheet) .sq[data-state="blank"] .sq__fill { color: #3E6A16; }

.sq__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
@media (max-width: 640px) { .sq__opts { grid-template-columns: minmax(0, 1fr); } }
.sq__opt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cloud); font-size: .97rem; line-height: 1.35; transition: background-color .4s, border-color .4s, color .4s, opacity .4s; }
.sq__l { position: relative; display: grid; place-items: center; width: 28px; height: 28px; font: 500 .8rem var(--font-mono); color: var(--ink-soft); }
/* hand-drawn pencil circle around the chosen letter */
.sq__l::after { content: ""; position: absolute; inset: -3px -4px; border: 2px solid var(--navy); border-radius: 52% 46% 55% 44% / 48% 56% 44% 52%; transform: rotate(-8deg) scale(1); opacity: 0; transition: opacity .25s, transform .45s var(--ease); }
.sq__opt.is-chosen .sq__l::after { opacity: 1; }
.sq__opt.is-chosen .sq__l { color: var(--navy); font-weight: 700; }

/* correction */
.sq__opt::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(1); font: 700 1rem/1 var(--font-body); opacity: 1; transition: opacity .3s, transform .45s var(--ease); }
.sq__opt.is-correct { background: rgba(106, 164, 49, .12); border-color: rgba(106, 164, 49, .55); color: #2F5410; }
.sq__opt.is-correct::after { content: "✓"; color: var(--green); }
.sq__opt.is-chosen:not(.is-correct) { background: rgba(224, 84, 44, .08); border-color: rgba(224, 84, 44, .5); color: #A8361A; }
.sq__opt.is-chosen:not(.is-correct)::after { content: "✗"; color: var(--signal); }
.sq__opt.is-chosen:not(.is-correct) .sq__l::after { border-color: var(--signal); }

.sq__result { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease); }
.sq__result > div { overflow: hidden; }
.sq__verdict { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 700 .7rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sq__delta { display: inline-grid; place-items: center; min-width: 3.4em; padding: 7px 10px; border-radius: 999px; font: 500 .85rem/1 var(--font-mono); letter-spacing: 0; text-transform: none; background: var(--mist); color: var(--ink); }
.sq[data-state="ok"] .sq__delta { background: var(--green); color: var(--white); }
.sq[data-state="ko"] .sq__delta { background: var(--signal); color: var(--white); }
.sq__why { margin-top: 10px; padding-left: 14px; border-left: 1px solid var(--gold-light); font-size: .95rem; color: var(--ink-soft); }

/* ---- animated states (only with JS and motion allowed) ---- */
.js-sheet .sq { opacity: .38; }
.js-sheet .sq.is-active { opacity: 1; box-shadow: 0 30px 60px -44px rgba(14, 24, 56, .55); }
.js-sheet .sq:not(.is-marked) .sq__fill { clip-path: inset(0 100% 0 0); }
.js-sheet .sq[data-state="blank"]:not(.is-corrected) .sq__fill { clip-path: inset(0 100% 0 0); }
.js-sheet .sq:not(.is-marked) .sq__opt.is-chosen .sq__l::after { opacity: 0; transform: rotate(-30deg) scale(.4); }
.js-sheet .sq:not(.is-corrected) .sq__opt { background: var(--cloud); border-color: var(--line); color: var(--ink); }
.js-sheet .sq:not(.is-corrected) .sq__opt::after { opacity: 0; transform: translateY(-50%) scale(.3); }
.js-sheet .sq:not(.is-corrected) .sq__opt.is-chosen .sq__l::after { border-color: var(--navy); }
.js-sheet .sq.is-corrected .sq__opt:not(.is-correct):not(.is-chosen) { opacity: .55; }
.js-sheet .sq:not(.is-corrected) .sq__result { grid-template-rows: 0fr; }
.js-sheet .sq:not(.is-corrected) .sq__fill { color: var(--navy) !important; text-decoration: none !important; }

.sheet__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.sheet__end p { max-width: 34rem; font-size: .92rem; color: var(--ink-soft); }

@media (max-width: 920px) {
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* compact sticky app bar under the header */
  .app { top: calc(var(--header-h) + 8px); z-index: 5; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-radius: 18px; }
  .app__bar { padding: 10px 12px; border-bottom: 0; border-right: 1px solid rgba(201, 164, 100, .45); background: none; }
  .app__brand, .app__title, .app__counts, .app__rule, .app__note, .app__foot { display: none; }
  .app__emblem { width: 34px; }
  .app__screen { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 16px 10px 4px; }
  .app__dial { width: auto; aspect-ratio: auto; margin: 0; }
  .app__dial svg { display: none; }
  .app__score { position: static; flex-wrap: nowrap; font-size: 2rem; }
  .app__score small { display: none; }
  .app__track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
  .app__track li { position: relative; height: 16px; }
  .app__track li::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(30, 49, 117, .2); }
  .app__track li::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #FFFFFF; border: 1.2px solid rgba(30, 49, 117, .35); transition: background-color .35s, border-color .35s, transform .35s var(--ease); }
  .app__track li.is-current::after { border-color: var(--navy); transform: scale(1.3); }
  .app__track li.is-ok::after { background: var(--green); border-color: var(--green); }
  .app__track li.is-ko::after { background: var(--signal); border-color: var(--signal); }
  .app__track li.is-blank::after { border-color: var(--navy); border-width: 2px; }
}

/* =========================================================
   6 · PURPOSE
   ========================================================= */
.purpose { position: relative; overflow: hidden; padding-block: var(--section-y); background: radial-gradient(80% 70% at 85% 10%, #1B2B66 0%, var(--night) 60%); color: var(--mist); }
.purpose__rose {
  position: absolute; right: -14vw; top: 50%; width: min(78vw, 980px); height: auto; max-width: none;
  transform: translateY(-50%) rotate(var(--rose-r, 0deg));
  filter: brightness(0) invert(1); opacity: .05; pointer-events: none;
}
.purpose .container { position: relative; }
.purpose__title { display: grid; margin-top: 36px; color: var(--white); }
.purpose__l1, .purpose__l2 { font: 600 clamp(2.2rem, 5.4vw, 4.8rem)/1.02 var(--font-display); letter-spacing: -.01em; }
.purpose__l2 { padding-left: clamp(0px, 8vw, 8rem); color: var(--lavender); }
.purpose__l3 { font: italic 500 clamp(5.4rem, 21vw, 19rem)/.82 var(--font-display); letter-spacing: -.03em; margin-left: -.04em; margin-top: .05em; }
.purpose__l3 .dot { width: .11em; height: .11em; }
.purpose__text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: 880px; margin: clamp(48px, 6vw, 80px) 0 0 auto; }
.purpose__text p { color: #B9BFE3; }
.purpose__p1 { font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.4 var(--font-display); color: var(--mist) !important; }
.purpose__p1 strong { font-style: italic; font-weight: 600; color: var(--white); }
.purpose__p2 { padding-top: 6px; border-top: 1px solid var(--gold); }
@media (max-width: 760px) { .purpose__text { grid-template-columns: 1fr; } .purpose__rose { width: 140vw; right: -50vw; } }

/* =========================================================
   7 · CTA
   ========================================================= */
.cta { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--section-y); text-align: center; background: radial-gradient(70% 90% at 50% 100%, #FFFFFF 0%, var(--mist-2) 55%, var(--mist) 100%); }
.cta__arc { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; z-index: -1; }
.cta__arc path { fill: none; stroke: var(--navy); stroke-opacity: .3; stroke-width: 1.2; stroke-dasharray: 5 9; animation: dash-flow 6s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -140; } }
.cta__inner { display: grid; justify-items: center; gap: 28px; }
.cta .display em { color: var(--navy); }
.cta__text { max-width: 36rem; color: var(--ink-soft); font-size: 1.1rem; }
.cta__phone { font: 500 .8rem/1.4 var(--font-mono); letter-spacing: .08em; color: var(--ink-soft); }
.cta__phone a, .site-footer__tel { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold-light); }
.cta__phone a:hover, .site-footer__tel:hover { color: var(--signal); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--mist); border-top: 1px solid var(--line); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.site-footer__inner { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.site-footer__logo img { width: 190px; height: auto; }
.site-footer__nav { display: grid; gap: 8px; }
.site-footer__nav a { font: 700 .74rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.site-footer__nav a:hover { color: var(--signal); }
.site-footer__legal { display: grid; gap: 10px; font-size: .85rem; color: var(--ink-soft); }
.site-footer__legal p:first-child { color: var(--ink); font-weight: 700; }
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr; justify-items: start; } }

/* =========================================================
   REVEAL & MOTION PREFERENCES
   ========================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .strips .strip[data-reveal]:nth-child(even) { transform: translateY(96px); }
.js .strips .strip[data-reveal].is-visible:nth-child(even) { transform: translateY(56px); }
.js .strips .strip[data-reveal].is-visible:nth-child(even):hover { transform: translate(8px, 56px); }
@media (max-width: 980px) {
  .js .strips .strip[data-reveal]:nth-child(even) { transform: translateY(26px); }
  .js .strips .strip[data-reveal].is-visible:nth-child(even) { transform: none; }
  .js .strips .strip[data-reveal].is-visible:nth-child(even):hover { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero__pulse, .hero__lights path { display: none; }
  .js [data-reveal], .js .hero__word, .js .hero__art, .js .runway__num, .js .runway__name { opacity: 1 !important; transform: none !important; }
}