/* =============================================================
   KRESKO LAB — styles.css
   ============================================================= */

/* =============================================================
   1. Fonts (self-hosted, SIL OFL — see assets/fonts/OFL-*.txt)
   ============================================================= */
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-latin-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("assets/fonts/lexend-latin-ext-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* =============================================================
   2. Tokens (KRESKO DS)
   ============================================================= */
:root {
  --kr-burgundy-900: #3A0614; --kr-burgundy-700: #590A1F; --kr-burgundy-500: #7E1A33;
  --kr-rust-700: #9C3419; --kr-rust-500: #BF4226; --kr-rust-300: #E0674A;
  --kr-terracotta-500: var(--kr-rust-500);
  --kr-amber-700: #C98200; --kr-amber-500: #F29F05; --kr-amber-300: #F8C25A; --kr-amber-100: #FCE3B0;
  --kr-cream-50: #FFFBF4; --kr-cream-100: #FFF5E5; --kr-cream-200: #F6E9D4; --kr-cream-300: #EDDCC0;
  --kr-navy-900: #0B1427; --kr-navy-700: #13203C; --kr-navy-500: #26365C; --kr-navy-300: #5B6886;
  --kr-ink: #2A231F; --kr-white: #FFFFFF;

  --fg-1: var(--kr-navy-700); --fg-2: #3E4A63; --fg-3: #5E6680;
  --fg-on-dark: #FFFFFF; --fg-on-dark-2: rgba(255, 255, 255, .8);
  --surface-page: var(--kr-cream-100);
  --border-1: rgba(19, 32, 60, .12); --border-2: rgba(19, 32, 60, .24);
  --border-on-dark: rgba(255, 255, 255, .55); --line-on-dark: rgba(255, 255, 255, .14);
  --accent: var(--kr-amber-500); --accent-hover: #FFB21F; --accent-press: var(--kr-amber-700);
  --emphasis-light: var(--kr-burgundy-700);   /* text emphasis on light grounds (amber = graphic only) */

  --font-display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Lexend", cursive;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
  --fs-h3: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-eyebrow: .8125rem;
  --ls-eyebrow: .32em;

  --container: 1336px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px;
  --radius-arch: 999px 999px 0 0; --radius-pill: 999px;
  --curve: 48px;   /* rounded section tops: radius == overlap onto the previous section */
  --shadow-sm: 0 2px 6px rgba(19, 32, 60, .08);
  --shadow-md: 0 10px 30px rgba(19, 32, 60, .14);
  --shadow-lg: 0 20px 50px rgba(11, 20, 39, .28);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-enter: 600ms;
  --focus: var(--kr-navy-700);
}

/* =============================================================
   3. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; font-weight: 400;
  color: var(--fg-1); background: var(--surface-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
b, strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--kr-navy-700); }
[id] { scroll-margin-top: 24px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark { --focus: var(--kr-amber-500); color: var(--fg-on-dark); }
@view-transition { navigation: auto; }

/* =============================================================
   4. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--kr-navy-700); font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 16px; }
.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;
}
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Development markers for pending content — must be zero before production */
.pending, .is-placeholder .pending { outline: 1.5px dashed var(--kr-amber-500); outline-offset: 2px; }
.is-pending { border-style: dashed !important; }

/* =============================================================
   5. Typography helpers
   ============================================================= */
.eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.hl-dark { color: var(--accent); }
.hl-light { color: var(--emphasis-light); }
.rule { display: block; width: 56px; height: 3px; background: var(--accent); border-radius: 2px; }
.hand { font-family: var(--font-hand); font-weight: 500; line-height: 1.05; }

/* =============================================================
   6. Buttons (DS core/Button, elevated)
   ============================================================= */
.btn {
  --btn-h: 46px; --btn-px: 26px; --btn-fs: 1rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font-size: var(--btn-fs); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn--lg { --btn-h: 56px; --btn-px: 34px; --btn-fs: 1.0625rem; }
.btn--lg .icon { width: 20px; height: 20px; }

.btn--primary {
  color: var(--kr-navy-700);
  background: linear-gradient(180deg, #F7B02A 0%, var(--kr-amber-500) 60%, #E89503 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 22px -10px rgba(242, 159, 5, .7);
}
.btn--primary::after {                         /* soft sheen on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 600ms var(--ease-out);
}
.btn--outline { color: var(--fg-1); border-color: var(--border-2); font-weight: 500; background: transparent; }
.on-dark .btn--outline { color: #fff; border-color: var(--border-on-dark); }
.btn--dark { color: #fff; background: var(--kr-navy-700); box-shadow: 0 8px 22px -12px rgba(11, 20, 39, .8); }
.btn--link { min-height: 44px; padding: 0; border: 0; background: none; font-weight: 500; overflow: visible; text-underline-offset: 5px; }
.btn:active { transform: scale(.98); }
.btn--primary:active { background: var(--accent-press); }
.btn--link:active { transform: none; }

@media (hover: hover) {
  .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 32px -10px rgba(242, 159, 5, .85); background: linear-gradient(180deg, #FFBE3D 0%, var(--accent-hover) 100%); }
  .btn--primary:hover::after { transform: translateX(120%); }
  .btn--outline:hover { background: rgba(19, 32, 60, .06); }
  .on-dark .btn--outline:hover { background: rgba(255, 255, 255, .1); }
  .btn--dark:hover { background: var(--kr-navy-500); }
  .btn--link:hover { text-decoration: underline; }
  .btn:hover .icon-trail { transform: translateX(3px); }
}

/* =============================================================
   7. Depth: large blurred colour masses (radial gradients — no costly filters)
   ============================================================= */
.glow-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow-field span { position: absolute; border-radius: 50%; animation: massDrift 34s ease-in-out infinite alternate; will-change: transform; }
.glow-field span:nth-child(2) { animation-duration: 41s; animation-delay: -8s; }
.glow-field span:nth-child(3) { animation-duration: 38s; animation-delay: -16s; }
.glow-field span:nth-child(4) { animation-duration: 45s; animation-delay: -4s; }
@keyframes massDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.12); }
}
.glow-field--hero span:nth-child(1) { width: 95vw; height: 95vw; left: -45vw; top: -10vw; background: radial-gradient(closest-side, rgba(140, 30, 50, .62), transparent); }
.glow-field--hero span:nth-child(2) { width: 75vw; height: 60vw; left: 15vw; top: -38vw; background: radial-gradient(closest-side, rgba(60, 100, 150, .42), transparent); }
.glow-field--hero span:nth-child(3) { width: 70vw; height: 70vw; right: -30vw; bottom: -40vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .5), transparent); }
.glow-field--hero span:nth-child(4) { width: 40vw; height: 40vw; right: 10vw; top: 10vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .12), transparent); }
.glow-field--soft span:nth-child(1) { width: 70vw; height: 70vw; right: -30vw; top: -20vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .16), transparent); }
.glow-field--soft span:nth-child(2) { width: 60vw; height: 60vw; left: -30vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .09), transparent); }
.glow-field--deep span:nth-child(1) { width: 100vw; height: 90vw; left: -40vw; top: 5%; background: radial-gradient(closest-side, rgba(89, 10, 31, .75), transparent); }
.glow-field--deep span:nth-child(2) { width: 80vw; height: 80vw; right: -35vw; top: 35%; background: radial-gradient(closest-side, rgba(38, 54, 92, .9), transparent); }
.glow-field--deep span:nth-child(3) { width: 70vw; height: 70vw; left: 20vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(191, 66, 38, .32), transparent); }

/* =============================================================
   8. Header / nav (DS NavBar — transparent over hero, not fixed)
   ============================================================= */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.page-inner .site-header { position: relative; background: var(--kr-navy-700); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: none; }
.nav__link { position: relative; padding: 8px 0; font-size: .9375rem; color: #fff; white-space: nowrap; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__link:hover::after { transform: scaleX(1); } }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: #fff; border: 1.5px solid var(--border-on-dark);
}
.nav__toggle .icon { width: 22px; height: 22px; }

.menu {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  padding: 20px var(--gutter) 32px; background: var(--kr-navy-700); overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu__top img { height: 36px; width: auto; }
.menu__list { margin-block: 40px 32px; display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
  border-bottom: 1px solid var(--line-on-dark); font-size: 1.5rem; font-weight: 600;
}
.menu .btn { margin-top: auto; width: 100%; }
body.menu-open { overflow: hidden; }

/* =============================================================
   9. Hero
   ============================================================= */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--kr-navy-700); color: #fff;
  padding-top: 88px; padding-bottom: clamp(104px, 11vw, 150px);
}
.hero__grid { display: grid; gap: 40px; padding-top: clamp(16px, 3vw, 40px); }

/* Hero science layer — slow camera travel through suspended science (between background glow and content).
   Real CSS perspective: each .z is placed where it reads at scale 1 (inside a safe corridor) and travels on Z
   from deep (-2600px: tiny, faint, near the vanishing point) to past the viewer (+620px: large, defocused, out
   of frame). Rays from the vanishing point avoid title, lead and buttons; photo, tiles and ornaments sit above. */
.hero-sci { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  perspective: 900px; perspective-origin: 56% 34%;
  animation: fadeIn 2s var(--ease-out) .6s both; --o-far: .32; --o-peak: .62; }
.z { position: absolute; transform: translate(-50%, -50%); opacity: .3;
  animation: sciTravel 40s linear infinite; will-change: transform, opacity; }
.z svg { display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--glow)); }
.z text { fill: var(--ink); stroke: none; font-family: var(--font-hand); font-size: 30px; }
.z .sm { font-size: 18px; } .z .xs { font-size: 13px; }
.z .fill { fill: var(--ink); stroke: none; }
/* light: same universe as the photo's glowing graphics — soft, never neon */
.t-cream { --ink: #FFF1DA; --glow: rgba(255, 236, 205, .45); }
.t-amber { --ink: #F7B545; --glow: rgba(242, 159, 5, .55); }
.t-cyan  { --ink: #A9DCF2; --glow: rgba(96, 186, 232, .5); }
@keyframes sciTravel {
  0%   { transform: translate(-50%, -50%) translateZ(-2600px); opacity: 0; filter: blur(1.2px); }
  14%  { opacity: var(--o-far); }
  60%  { transform: translate(-50%, -50%) translateZ(0); opacity: var(--o-peak); filter: blur(0); }
  84%  { opacity: calc(var(--o-peak) * .75); filter: blur(2.4px); }
  100% { transform: translate(-50%, -50%) translateZ(620px); opacity: 0; filter: blur(7px); }
}
/* desktop corridors (scale-1 point · size · cycle · phase) — cycles differ so nothing repeats in sync */
.zm1 { left: 10%; top: 22%; width: 130px; animation-duration: 44s; animation-delay: -6s; }   /* ← exits left between logo and eyebrow */
.zm2 { left: 15%; top: 18%; width: 210px; animation-duration: 52s; animation-delay: -31s; }  /* ← top band */
.zm4 { left: 30%; top: 24%; width: 140px; animation-duration: 38s; animation-delay: -20s; }  /* ← low pass of the upper-left corridor */
.zp2 { left: 68%; top: 14%; width: 200px; animation-duration: 47s; animation-delay: -40s; }  /* ↗ exits through the nav gap links–CTA */
.zc2 { left: 22%; top: 20%; width: 100px; animation-duration: 50s; animation-delay: -14s; }  /* ← second pass of the upper-left corridor */
.zp1 { left: 99%; top: 52%; width: 120px; animation-duration: 41s; animation-delay: -27s; }  /* → gap between tiles */
.zc1 { left: 88%; top: 92%; width: 80px;  animation-duration: 36s; animation-delay: -3s; }   /* ↘ under the art */
.zp3 { left: 70%; top: 89%; width: 150px; animation-duration: 45s; animation-delay: -35s; }  /* ↓ under the photo */
.zm3 { left: 53%; top: 86%; width: 110px; animation-duration: 39s; animation-delay: -12s; }  /* ↓ center gap */
.zc3 { left: 47%; top: 91%; width: 100px; animation-duration: 49s; animation-delay: -44s; }  /* ↓ past the buttons' right end */
/* tablet: stacked layout → vanishing point beside the buttons, 6 elements along the right edge and around the art */
@media (max-width: 959px) {
  .hero-sci { perspective-origin: 88% 36%; --o-far: .28; --o-peak: .52; }
  .zm2, .zm4, .zp3, .zc3 { display: none; }
  .zc2 { left: 94%; top: 12%; width: 130px; }
  .zp2 { left: 70%; top: 4%;  width: 200px; }
  .zp1 { left: 104%; top: 45%; width: 110px; }
  .zc1 { left: 97%; top: 72%; width: 70px; }
  .zm3 { left: 8%;  top: 88%; width: 100px; }
  .zm1 { left: 5%;  top: 60%; width: 140px; }
}
/* mobile: 4 small elements in the only free bands (between buttons and art · under the art), no animated blur */
@media (max-width: 539px) {
  .hero-sci { perspective-origin: 55% 54%; --o-far: .3; --o-peak: .55; }
  .z { animation-name: sciTravelLite; display: none; }
  .zm2, .zp2, .zc1, .zc3 { display: block; }
  .zm2 { left: 10%;  top: 53.5%; width: 130px; }   /* ← gap under the buttons */
  .zp2 { left: 92%;  top: 53.5%; width: 120px; }   /* → gap under the buttons */
  .zc1 { left: 86%;  top: 93%;   width: 44px; }    /* ↘ under the art */
  .zc3 { left: 16%;  top: 93%;   width: 60px; }    /* ↙ under the art */
}
@keyframes sciTravelLite {
  0%   { transform: translate(-50%, -50%) translateZ(-2600px); opacity: 0; }
  14%  { opacity: var(--o-far); }
  60%  { transform: translate(-50%, -50%) translateZ(0); opacity: var(--o-peak); }
  100% { transform: translate(-50%, -50%) translateZ(620px); opacity: 0; }
}

.hero__copy .eyebrow { margin-bottom: 16px; }
.hero__title { font-size: var(--fs-display); line-height: 1.02; }
.hero__lead { margin: 22px 0 30px; max-width: 31em; font-size: var(--fs-body-lg); font-weight: 300; line-height: 1.45; color: var(--fg-on-dark-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; }

.hero__art { position: relative; height: clamp(400px, 100vw, 540px); max-width: 560px; width: 100%; margin-inline: auto; }
.arch { position: absolute; bottom: 0; border-radius: var(--radius-arch); transform-origin: 50% 100%; }
.arch--cream-l { left: 6%; width: 18%; height: 60%; background: var(--kr-cream-100); }
.arch--burgundy { left: 14%; width: 18%; height: 40%; background: var(--kr-burgundy-700); }
.arch--photo { left: 27%; width: 44%; height: 96%; background: var(--accent); overflow: hidden; z-index: 1; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.arch--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; }
.arch--cream-r { left: 64%; width: 22%; height: 78%; background: var(--kr-cream-100); opacity: .9; }

.chalk { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: rgba(255, 255, 255, .8); }
.chalk path, .chalk ellipse, .chalk line, .chalk polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chalk text { fill: currentColor; font-family: var(--font-hand); font-size: 22px; }
.chalk__point {
  fill: var(--accent); stroke: none;
  offset-path: path("M36 162 C 78 158, 104 132, 122 96 S 150 42, 166 36");
  offset-distance: 100%; offset-rotate: 0deg;
  animation: pointClimb 1.4s var(--ease-out) 1.2s both;
}
@keyframes pointClimb { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } to { offset-distance: 100%; opacity: 1; } }

/* Subject tiles — unified grammar from the Física tile */
.tile {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  min-width: 132px; padding: 16px 18px 14px;
  border-radius: var(--radius-md); color: #fff; box-shadow: var(--shadow-lg);
}
.tile .icon { width: 36px; height: 36px; margin-bottom: 4px; }
.tile__title { font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.tile__sub { font-size: .75rem; line-height: 1.3; opacity: .9; }
.tile__status { margin-top: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(0, 0, 0, .28); }
.tile--math { background: var(--kr-burgundy-700); }
.tile--math .icon { color: var(--accent); }
.tile--physics { background: var(--kr-rust-500); }
.tile--chem { background: var(--kr-amber-500); color: var(--kr-navy-700); }
.tile--chem .tile__status { background: rgba(19, 32, 60, .12); }
.hero__art .tile--a { left: 0; top: 36%; }
.hero__art .tile--b { right: 0; top: 25%; }
.hero__art .tile--c { right: 3%; top: 64%; }
.hero__note { position: absolute; z-index: 3; right: -4px; top: -14px; display: none; font-size: 1.625rem; text-align: center; color: #fff; transform: rotate(-8deg); }
.hero__note .rule { width: 60px; margin: 8px auto 0; }

/* =============================================================
   10. Sections
   ============================================================= */
.page { position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { font-size: var(--fs-h2); }

/* --- Strip (essential facts) --- */
.strip { position: relative; z-index: 5; margin-top: -60px; background: var(--kr-cream-100); border-radius: 48px 48px 0 0; }
.strip__list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; padding-block: 36px 40px; }
.strip__list li:last-child { grid-column: 1 / -1; }
.feature { display: flex; align-items: center; gap: 12px; }
.feature .icon { width: 30px; height: 30px; }
.feature__text { font-size: .9375rem; line-height: 1.3; }

/* --- Tension (problem) + plot --- */
.tension { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); }
.tension__copy .eyebrow { margin-bottom: 14px; }
.tension h2 { font-size: var(--fs-h2); max-width: 14ch; }
.tension__list { margin: 28px 0; display: grid; gap: 14px; max-width: 34em; }
.tension__list li { position: relative; padding-left: 28px; font-size: var(--fs-body-lg); color: var(--fg-2); }
.tension__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.tension__turn { font-size: var(--fs-body-lg); max-width: 30em; }
.tension__turn strong { color: var(--emphasis-light); }

.route-wrap { position: relative; margin-inline: calc(var(--gutter) * -.5); }
.route { width: 100%; height: auto; overflow: visible; }
.route__strand { fill: none; stroke: rgba(255, 245, 229, .2); stroke-width: 1.5; transition: stroke var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.route__strand[data-strand="2"], .route__strand[data-strand="5"] { stroke-dasharray: 6 5; }
.route__strand[data-strand="3"], .route__strand[data-strand="6"] { stroke-dasharray: 1 5; stroke-linecap: round; }
.route__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 18; stroke-linecap: round; }
.route__progress { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 95; transition: stroke-dashoffset 700ms var(--ease-out); }
.route__loop, .route__loop-head { fill: none; stroke: rgba(255, 245, 229, .55); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.route__loop-head { stroke-dasharray: none; }
.route__capsule { fill: var(--kr-navy-700); stroke: rgba(255, 245, 229, .3); stroke-width: 1.5; transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
.route__dot { fill: rgba(255, 245, 229, .55); transition: fill var(--dur-base) var(--ease-out), r var(--dur-base) var(--ease-out); }
.is-enhanced .route__station { cursor: pointer; }

[data-stage="1"] .route__progress { stroke-dashoffset: 95; }
[data-stage="2"] .route__progress { stroke-dashoffset: 72; }
[data-stage="3"] .route__progress { stroke-dashoffset: 50; }
[data-stage="4"] .route__progress { stroke-dashoffset: 28; }
[data-stage="5"] .route__progress { stroke-dashoffset: 4; }
[data-stage="1"] [data-station="1"] .route__dot,
[data-stage="2"] [data-station]:is([data-station="1"], [data-station="2"]) .route__dot,
[data-stage="3"] [data-station]:is([data-station="1"], [data-station="2"], [data-station="3"]) .route__dot,
[data-stage="4"] [data-station]:not([data-station="5"]) .route__dot,
[data-stage="5"] [data-station] .route__dot { fill: var(--accent); }
[data-stage="1"] [data-station="1"] .route__capsule, [data-stage="2"] [data-station="2"] .route__capsule,
[data-stage="3"] [data-station="3"] .route__capsule, [data-stage="4"] [data-station="4"] .route__capsule,
[data-stage="5"] [data-station="5"] .route__capsule { fill: var(--kr-burgundy-700); stroke: var(--accent); }
/* principle highlight: the chosen strand crosses the whole route */
.method__map:not([data-principle="0"]) .route__strand { opacity: .35; }
[data-principle="1"] [data-strand="1"], [data-principle="2"] [data-strand="2"], [data-principle="3"] [data-strand="3"],
[data-principle="4"] [data-strand="4"], [data-principle="5"] [data-strand="5"], [data-principle="6"] [data-strand="6"],
[data-principle="7"] [data-strand="7"] { stroke: #fff; stroke-width: 3; opacity: 1 !important; }

/* Stages: plain ordered list without JS; tabs when enhanced */
.stages { display: grid; gap: 14px; margin-top: 28px; }
.stage { padding: 18px 20px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-on-dark); }
.stage__name { font-size: var(--fs-h3); display: flex; align-items: baseline; gap: 12px; }
.stage__num { font-size: .875rem; color: var(--accent); letter-spacing: .08em; }
.stage__text { margin-top: 8px; color: var(--fg-on-dark-2); }
.is-enhanced .stages { margin-top: 14px; }
.is-enhanced .stage { padding: 24px 26px; background: linear-gradient(120deg, rgba(89, 10, 31, .45), rgba(255, 255, 255, .03)); }
.is-enhanced .stage__text { font-size: var(--fs-body-lg); }

.principles { margin-top: clamp(40px, 5vw, 64px); }
.principles__title { font-size: var(--fs-h3); }
.principles__hint { margin-top: 6px; color: var(--fg-on-dark-2); font-size: .9375rem; }
.no-js .principles__hint { display: none; }
.principles__list { margin-top: 20px; display: grid; gap: 10px; }
.principle {
  width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-on-dark); color: #fff;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.principle__line { grid-row: span 2; height: 0; border-top: 2px solid rgba(255, 245, 229, .6); }
.principles__list li:nth-child(2) .principle__line, .principles__list li:nth-child(5) .principle__line { border-top-style: dashed; }
.principles__list li:nth-child(3) .principle__line, .principles__list li:nth-child(6) .principle__line { border-top-style: dotted; border-top-width: 3px; }
.principle__name { font-weight: 600; font-size: .9375rem; }
.principle__desc { font-size: .875rem; color: var(--fg-on-dark-2); }
.principle[aria-pressed="true"] { background: rgba(255, 255, 255, .08); border-color: #fff; }
.principle[aria-pressed="true"] .principle__line { border-top-color: #fff; }
@media (hover: hover) { .principle:hover { background: rgba(255, 255, 255, .05); } }

/* --- Programs: unified subject grammar + offer --- */
.programs { padding-block: var(--section-y); background: var(--kr-cream-50); }
.subjects { display: grid; gap: 16px; }
.subject {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 240px; padding: 26px 24px 22px; border-radius: var(--radius-md);
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.subject::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -60px; width: 250px; height: 250px; border-radius: 50%; background: var(--disc); opacity: .7; }
.subject__glyph { position: absolute; z-index: -1; right: -14px; bottom: -18px; width: 150px; height: 150px; opacity: .2; }
.subject__glyph .icon { width: 100%; height: 100%; stroke-width: 1.25; }
.subject__icon { width: 40px; height: 40px; }
.subject__title { font-size: 1.5rem; }
.subject__text { font-size: .9375rem; line-height: 1.35; max-width: 22em; }
.subject__status { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 500; border: 1.5px dashed rgba(255, 255, 255, .6); }
.subject__status .icon { width: 16px; height: 16px; }
.subject__status--link { border-style: solid; border-color: rgba(255, 255, 255, .75); }
.subject--math { background: linear-gradient(120deg, #590A1F 0%, #6E1127 55%, #8A2A1F 100%); --disc: #A8321F; }
.subject--math .subject__icon { color: var(--accent); }
.subject--physics { background: linear-gradient(120deg, #B23C21 0%, #BF4226 50%, #D2512A 100%); --disc: #E0602A; }
.subject--chem { background: linear-gradient(120deg, #F29F05 0%, #F5A91C 100%); --disc: #F8BA3A; color: var(--kr-navy-700); }
.subject--chem .subject__status { border-color: rgba(19, 32, 60, .45); }
@media (hover: hover) {
  .subject--math:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .subject__status--link:hover { background: rgba(255, 255, 255, .12); }
  .subject__status--link:hover .icon-trail { transform: translateX(3px); }
}

.offer { margin-top: clamp(48px, 7vw, 96px); display: grid; gap: 36px; align-items: center; }
.offer__photo { position: relative; max-width: 440px; width: 100%; margin-inline: auto; aspect-ratio: 4 / 5; }
.offer__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; border-radius: 180px 180px var(--radius-lg) var(--radius-lg); background: var(--kr-burgundy-700); box-shadow: var(--shadow-lg); }
.offer__body .eyebrow { margin-bottom: 12px; }
.offer__title { font-size: var(--fs-h2); }
.offer__lead { margin-top: 16px; font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 32em; }
.price {
  margin-top: 32px; display: grid; gap: 20px; align-items: center;
  padding: 24px; border-radius: var(--radius-lg); background: var(--kr-navy-700); color: #fff;
  box-shadow: var(--shadow-lg); --focus: var(--kr-amber-500);
}
.price__amount { display: flex; align-items: baseline; gap: 6px; }
.price__currency { font-size: 1.25rem; font-weight: 600; color: var(--accent); }
.price__value { font-size: clamp(3rem, 2.4rem + 2.5vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price__period { font-size: 1rem; color: var(--fg-on-dark-2); }
.price__note { margin-top: 10px; font-size: .875rem; color: var(--fg-on-dark-2); max-width: 26em; }

/* --- Values as transformations --- */
.values { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); background: var(--kr-burgundy-700); }
.values::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 80% at 100% 100%, rgba(191, 66, 38, .5), transparent 70%), radial-gradient(50% 60% at 0% 0%, rgba(58, 6, 20, .8), transparent 70%); }
.values__intro { margin-bottom: clamp(36px, 5vw, 64px); }
.values__intro .eyebrow { margin-bottom: 14px; }
.values__intro h2 { font-size: var(--fs-h2); }
.values__list { display: grid; }
.value__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; }
.value__eq > span:first-child { color: var(--fg-on-dark-2); font-weight: 400; }
.value__arrow { position: relative; display: inline-block; width: 64px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 150ms; }
.value__arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.value.is-revealed .value__arrow, .no-js .value__arrow { transform: scaleX(1); }
/* --- Story --- */
.story { padding-block: var(--section-y) calc(var(--section-y) * .6); background: var(--kr-cream-100); }
.story__grid { display: grid; gap: 32px; }
.story__head .eyebrow { margin-bottom: 14px; }
.story__head h2 { font-size: var(--fs-h2); }
.story__question { margin-top: 22px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); color: var(--fg-1); transform: rotate(-2deg); max-width: 16em; }
.story__body { display: grid; gap: 18px; font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 36em; }
.story__body em { font-style: normal; color: var(--fg-1); }
.story__turn { color: var(--fg-1); }
.story__turn strong { color: var(--emphasis-light); }

/* --- Manifesto --- */
.manifesto { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) * 1.1); background: var(--kr-navy-900); }
.manifesto__lines { display: grid; gap: clamp(14px, 2vw, 24px); }
.manifesto__lines li { font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.manifesto__vision { margin-top: clamp(48px, 7vw, 88px); max-width: 44em; padding-top: 28px; border-top: 1px solid var(--line-on-dark); }
.manifesto__vision .eyebrow { margin-bottom: 14px; color: var(--accent); }
.manifesto__vision p { font-size: var(--fs-body-lg); font-weight: 300; color: var(--fg-on-dark-2); }

/* --- FAQ --- */
.faq { padding-block: var(--section-y); background: var(--kr-cream-50); }
.faq__grid { display: grid; gap: 32px; }
.faq__head .eyebrow { margin-bottom: 12px; }
.faq__head h2 { font-size: var(--fs-h2); }
.faq__list { border-top: 1px solid var(--border-1); }
.faq__item { border-bottom: 1px solid var(--border-1); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 48px 20px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--kr-navy-700); border-bottom: 2px solid var(--kr-navy-700);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { padding: 0 48px 22px 0; color: var(--fg-2); max-width: 44em; }

/* --- Final CTA --- */
.cta { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) * 1.05); background: var(--kr-navy-700); text-align: center; }
.cta .eyebrow { margin-bottom: 16px; }
.cta h2 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.75rem); max-width: 24ch; margin-inline: auto; }
.cta p { margin: 22px auto 34px; max-width: 34em; font-size: var(--fs-body-lg); font-weight: 300; color: var(--fg-on-dark-2); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }

/* --- Footer --- */
.footer { background: var(--kr-navy-900); color: var(--fg-on-dark-2); padding-block: 56px 32px; }
.footer__grid { display: grid; gap: 36px; }
.footer__brand img { height: 40px; width: auto; }
.footer__tagline { margin-top: 16px; color: #fff; font-size: 1.0625rem; }
.social { margin-top: 22px; display: flex; gap: 10px; }
.social__item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-on-dark); color: #fff; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.social__item .icon { width: 20px; height: 20px; }
@media (hover: hover) { a.social__item:hover { background: var(--accent); color: var(--kr-navy-700); border-color: var(--accent); } }
.footer__label { display: block; margin-bottom: 14px; color: #fff; font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); }
.footer__list { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; }
.footer__list a { display: inline-block; padding-block: 6px; transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .footer__list a:hover { color: var(--accent); } }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .8125rem; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .footer__legal a:hover { color: var(--accent); } }
.footer__note { flex-basis: 100%; max-width: 62em; color: var(--fg-on-dark-2); }
.footer__note strong { color: #fff; font-weight: 600; }

/* --- Inner pages (blog, legal, 404) --- */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(56px, 8vw, 104px); background: var(--kr-navy-700); color: #fff; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-size: var(--fs-h2); max-width: 20ch; }
.page-hero p { margin-top: 16px; max-width: 36em; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); font-weight: 300; }
.page-body { padding-block: clamp(48px, 7vw, 88px); }
.empty { max-width: 40em; }
.empty h2 { font-size: var(--fs-h3); }
.empty p { margin-top: 10px; color: var(--fg-2); }
.prose { max-width: 42em; font-size: var(--fs-body-lg); color: var(--fg-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { color: var(--fg-1); font-size: var(--fs-h3); margin-top: 1.8em; }
.prose a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.article-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; color: var(--fg-on-dark-2); }

/* =============================================================
   10b. Second pass — chapters, program groups, quiz, newsletter
   ============================================================= */

/* --- Purpose: its own chapter (pause) --- */
.purpose {
  position: relative; isolation: isolate; overflow: clip; text-align: center;
  padding-block: clamp(104px, 14vw, 184px) calc(clamp(64px, 8vw, 112px) + 48px);
  background: radial-gradient(80% 60% at 50% 100%, rgba(242, 159, 5, .10), transparent 70%), #0A1022;
}
.glow-field--purpose span:nth-child(1) { width: 90vw; height: 70vw; left: -30vw; top: -20vw; background: radial-gradient(closest-side, rgba(89, 10, 31, .7), transparent); }
.glow-field--purpose span:nth-child(2) { width: 80vw; height: 60vw; right: -30vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(242, 159, 5, .16), transparent); }
.purpose__inner { max-width: 1120px; }
.purpose__kicker { font-size: var(--fs-body-lg); color: var(--fg-on-dark-2); margin-bottom: clamp(24px, 3vw, 40px); }
.purpose__quote p { font-size: clamp(2rem, 1.1rem + 3.8vw, 4.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.pw { color: #fff; transition: color 700ms var(--ease-out); }
.purpose__sign { margin-top: 32px; display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2); }
.purpose__sign::before, .purpose__sign::after { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--accent); }
.purpose__stage { max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto 0; padding-inline: var(--gutter); }
.purpose__viz { width: 100%; height: auto; overflow: visible; }

/* --- Method: new scene (graph paper) --- */
.method {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--section-y) * .9) var(--section-y);
  background-color: var(--kr-navy-700);
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.method__intro { max-width: 1100px; }
.method__intro .eyebrow { margin-bottom: 14px; }
.method__intro h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.is-enhanced .principle__desc { display: none; }
.is-enhanced .principles__list { display: flex; flex-wrap: wrap; gap: 10px; }
.is-enhanced .principle { width: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-pill); min-height: 44px; }
.is-enhanced .principle__line { width: 24px; }
.principle-detail { margin-top: 18px; min-height: 1.6em; font-size: var(--fs-body-lg); color: var(--kr-amber-100); }
.principle-detail:empty::before { content: "Elige un principio para verlo recorrer toda la ruta."; color: var(--fg-on-dark-2); font-size: .9375rem; }
.no-js .principle-detail { display: none; }

/* --- Program: grouped data --- */
.big-facts { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.big-fact { display: flex; flex-direction: column-reverse; padding: 16px 0; border-top: 3px solid var(--accent); }
.big-fact dd { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-fact dt { margin-top: 6px; font-size: .875rem; color: var(--fg-2); }
.groups { margin-top: 24px; display: grid; gap: 18px; }
.group__title { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm); font-size: .9375rem; font-weight: 500; }
.chips .icon { width: 18px; height: 18px; color: var(--emphasis-light); }
.measure { margin-top: 20px; display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--kr-cream-200); }
.measure__spark { width: 104px; flex: none; overflow: visible; }
.measure__spark polyline { fill: none; stroke: var(--kr-burgundy-700); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out) .3s; }
.measure__spark circle { fill: var(--accent); }
.measure.is-revealed .measure__spark polyline, .no-js .measure__spark polyline { stroke-dashoffset: 0; }
.measure__title { font-weight: 600; font-size: 1.0625rem; }
.measure__text { margin-top: 2px; font-size: .875rem; color: var(--fg-2); }

/* --- Experience: full-bleed image moment --- */
.experience { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: clamp(460px, 62vw, 700px); background: var(--kr-navy-900); }
.experience .experience__media { position: absolute; inset: 0; z-index: -1; }
.experience__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.experience::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* localized: only behind the headline (bottom-left); the rest of the photo keeps its natural light */
  background: radial-gradient(ellipse 62% 70% at 12% 88%, rgba(11, 20, 39, .92) 0%, rgba(11, 20, 39, .72) 50%, transparent 100%), linear-gradient(180deg, transparent 62%, rgba(11, 20, 39, .7) 100%); }
.experience__overlay { width: 100%; padding-block: clamp(48px, 7vw, 96px); max-width: var(--container); }
.experience__overlay .eyebrow { margin-bottom: 12px; }
.experience__overlay h2 { font-size: var(--fs-h2); max-width: 16ch; }
.experience__overlay p { margin-top: 14px; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); }

/* Image slots — styled so a section reads well before its image exists */
.img-slot {
  position: relative; display: grid; place-items: end start; min-height: 240px; padding: 16px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, rgba(242, 159, 5, .35), transparent 60%), linear-gradient(160deg, var(--kr-burgundy-700), var(--kr-navy-700));
  outline: 1.5px dashed var(--kr-amber-500); outline-offset: -10px;
}
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot--bleed { border-radius: 0; min-height: 100%; place-items: start end; }
.img-slot__label { position: relative; font-size: .8125rem; color: #fff; background: rgba(0, 0, 0, .4); padding: 6px 10px; border-radius: var(--radius-sm); }

/* --- Photographs + KRESKO traces --- */
.photo-frame { position: relative; margin-inline: 0; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); background: var(--kr-cream-200); box-shadow: var(--shadow-lg); }
.story__media img { object-position: 50% 12%; }
/* zoom anchored top-left-ish: keeps the three faces, leaves out the AI-rendered brand marks (tumbler, folder) */
.photo-frame.teachers__media { overflow: visible; }
.teachers__media .teachers__crop { position: relative; height: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.teachers__media img { object-position: 50% 45%; box-shadow: none; border-radius: 0; }

.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trace__line { fill: none; stroke: var(--kr-amber-500); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
.trace__dot { fill: var(--kr-amber-500); opacity: 0; transition: opacity .5s var(--ease-out) 1.9s; }
.is-revealed .trace__line, .no-js .trace__line { stroke-dashoffset: 0; }
.is-revealed .trace__dot, .no-js .trace__dot { opacity: 1; }
.trace--docentes { z-index: -1; }
.trace--docentes .trace__line { stroke: var(--emphasis-light); stroke-width: 2; }
.trace--docentes .trace__dot { fill: var(--emphasis-light); }
.teachers { overflow-x: clip; }
.teachers__media { isolation: isolate; }
.cta__photo { position: relative; margin: clamp(40px, 6vw, 64px) auto 0; max-width: 1100px; }
.cta__frame { aspect-ratio: 4 / 3; border-radius: 200px 200px var(--radius-lg) var(--radius-lg); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
.cta__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.trace--cierre { inset: 0 0 auto auto; width: 42%; height: auto; aspect-ratio: 400 / 160; z-index: 1; translate: 0 -72%; }   /* rises over the sky, above the students' heads */
.trace--cierre .trace__line { stroke: var(--kr-cream-100); stroke-width: 2; }
.cta__photo.is-revealed .trace__line, .cta .is-revealed .trace__line { stroke-dashoffset: 0; }
.cta .is-revealed .trace__dot { opacity: 1; }
@media (max-width: 719px) { .experience { min-height: 560px; } .experience__media img { object-position: 80% 8%; } }
@media (min-width: 720px) { .cta__frame { aspect-ratio: 16 / 9; border-radius: 280px 280px var(--radius-lg) var(--radius-lg); } .cta__frame img { object-position: 50% 82%; } }

/* --- Values: transformation first, explanation second --- */
.value { display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "icon eq" "name name" "text text"; column-gap: 16px; row-gap: 8px; align-items: center; padding-block: 26px; border-top: 1px solid var(--line-on-dark); }
.value__eq { grid-area: eq; }
.value__name { align-self: end; }
.value__text { align-self: start; }
.value__name { grid-area: name; font-size: .8125rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); font-weight: 600; }
.value__text { grid-area: text; color: var(--fg-on-dark-2); max-width: 34em; font-size: .9375rem; }
.value__text::first-letter { text-transform: uppercase; }

/* --- Story --- */
.story__media { margin-top: 32px; aspect-ratio: 4 / 3; min-height: 0; }
.story__mission { padding: 20px 0 20px 22px; border-left: 3px solid var(--accent); }
.story__mission p { font-size: 1rem; font-weight: 300; color: var(--fg-2); }
.story__mission footer { margin-top: 10px; font-size: .75rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--emphasis-light); }

/* --- Teachers (coming soon, quieter than the main program) --- */
.teachers { padding-block: var(--section-y); background: var(--kr-cream-50); }
.teachers__grid { display: grid; gap: 36px; align-items: center; }
.teachers__media { aspect-ratio: 3 / 2; min-height: 0; max-width: 560px; }
.teachers__status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1.5px dashed var(--emphasis-light); color: var(--emphasis-light); font-size: .8125rem; font-weight: 600; }
.teachers__status .icon { width: 16px; height: 16px; }
.teachers h2 { margin-top: 18px; font-size: var(--fs-h2); }
.teachers__copy > p:not(.teachers__status) { margin-top: 14px; font-size: var(--fs-body-lg); color: var(--fg-2); }
.teachers__list { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.teachers__list li { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.teachers__list .icon { width: 26px; height: 26px; color: var(--emphasis-light); }

/* --- FAQ figure --- */
.faq__figure { width: 120px; margin-top: 28px; overflow: visible; }
.faq__figure path, .faq__figure circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out) .3s; }
.faq__head.is-revealed .faq__figure path, .faq__head.is-revealed .faq__figure circle, .no-js .faq__figure * { stroke-dashoffset: 0; }

/* --- Tension: link to the quiz --- */
.tension__quiz { margin-top: 18px; color: var(--emphasis-light); }
.tension__quiz .icon { width: 20px; height: 20px; }

/* --- Learn zone: quiz → result → keep learning → newsletter --- */
.learn { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--section-y) + 24px) var(--section-y); background: var(--kr-navy-900); }
.learn--compact { margin-top: 0; border-radius: 0; padding-block: clamp(56px, 7vw, 96px); }
.cta { padding-bottom: calc(var(--section-y) * 1.05 + 48px); }
.quiz-zone { display: grid; gap: 32px; align-items: start; }
.quiz-zone__intro .eyebrow { margin-bottom: 12px; }
.quiz-zone__intro h2 { font-size: var(--fs-h2); }
.quiz-zone__intro p { margin-top: 14px; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); max-width: 28em; }
.quiz { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .045); border: 1px solid var(--line-on-dark); }
.quiz__screen[hidden] { display: none; }
.quiz__art, .quiz__curve { width: 100%; max-width: 280px; overflow: visible; }
.quiz__art path, .quiz__curve path { fill: none; stroke: rgba(255, 245, 229, .5); stroke-width: 2; stroke-dasharray: 5 6; }
.quiz__art circle { fill: var(--accent); }
.quiz__lead { margin: 18px 0 22px; color: var(--fg-on-dark-2); }
.quiz__nojs { color: var(--fg-on-dark-2); font-size: .9375rem; }
.js .quiz__nojs { display: none; }
.quiz__progress { margin-bottom: 18px; }
.quiz__count { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-on-dark-2); }
.quiz__bar { margin-top: 8px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--kr-amber-500), var(--kr-amber-300)); transition: width 500ms var(--ease-out); }
.quiz__fieldset { border: 0; padding: 0; min-width: 0; }
.quiz__prompt { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.3; margin-bottom: 18px; outline-offset: 6px; }
.quiz__options { display: grid; gap: 10px; }
.quiz__option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer;
  border-radius: var(--radius-md); border: 1.5px solid var(--line-on-dark); background: rgba(255, 255, 255, .03);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quiz__option input { width: 20px; height: 20px; accent-color: var(--kr-amber-500); flex: none; }
.quiz__option:has(input:checked) { border-color: var(--accent); background: rgba(242, 159, 5, .1); }
.quiz__option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .quiz__option:hover:not(.is-locked) { border-color: var(--border-on-dark); transform: translateX(3px); } }
.quiz__option.is-locked { cursor: default; }
.quiz__option.is-correct { border-color: var(--accent); background: rgba(242, 159, 5, .16); }
.quiz__option.is-wrong { border-style: dashed; border-color: var(--kr-rust-300); }
.quiz__tag { margin-left: auto; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-amber-300); font-weight: 600; }
.quiz__option.is-wrong .quiz__tag { color: var(--kr-rust-300); }
.quiz__feedback { margin-top: 16px; min-height: 1.5em; color: #fff; }
.quiz__feedback strong { color: var(--accent); }
.quiz__actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.quiz__you { fill: var(--accent); stroke: #fff; stroke-width: 2; transition: cx 900ms var(--ease-out), cy 900ms var(--ease-out); }
.quiz__score { margin-top: 18px; font-size: .9375rem; color: var(--fg-on-dark-2); outline-offset: 6px; }
.quiz__level { margin-top: 6px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); color: var(--accent); }
.quiz__text { margin-top: 10px; font-size: var(--fs-body-lg); max-width: 32em; }
.quiz__disclaimer { margin-top: 12px; font-size: .8125rem; color: var(--fg-on-dark-2); }

.nl { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-on-dark); display: grid; gap: 28px; align-items: center; }
.learn--compact .nl { margin-top: 0; padding-top: 0; border-top: 0; }
.nl__copy .eyebrow { margin-bottom: 12px; }
.nl__title { font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem); }
.nl__copy p { margin-top: 12px; color: var(--fg-on-dark-2); max-width: 30em; }
.nl__form { display: grid; gap: 12px; }
.nl__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.nl__row .field { flex: 1 1 240px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: .875rem; font-weight: 500; }
.field__input { width: 100%; min-height: 50px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-2); background: #fff; font: inherit; color: var(--fg-1); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field--dark .field__input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: #fff; }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(242, 159, 5, .3); }
.field__input[aria-invalid="true"] { border-color: var(--kr-rust-300); }
.field__error { color: var(--kr-rust-300); font-size: .875rem; font-weight: 500; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.check__input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--kr-amber-500); cursor: pointer; }
.check__label { font-size: .875rem; color: var(--fg-on-dark-2); cursor: pointer; }
.check__label a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.check__label .pending { display: block; margin-top: 4px; font-size: .8125rem; }
.nl__status:empty { display: none; }
.nl__status { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); font-size: .9375rem; }

/* Icons that draw themselves when their block reveals */
.js .reveal .icon--draw * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out) 200ms; }
.js .reveal.is-revealed .icon--draw * { stroke-dashoffset: 0; }
@media (hover: hover) {
  .subject--math:hover .subject__icon { transform: rotate(-6deg) scale(1.06); }
  .subject__icon { transition: transform var(--dur-base) var(--ease-out); }
}


/* --- Método: title → question → strategy statement → route with contained station labels --- */
.method__title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); line-height: 1; }
.method__question { margin-top: clamp(20px, 3vw, 32px); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -.015em; color: var(--accent); }
.strategy { margin-top: clamp(20px, 3vw, 32px); max-width: 980px; }
.strategy p {
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.375rem); font-weight: 300; line-height: 1.32; letter-spacing: -.01em;
  color: var(--fg-on-dark-2); text-wrap: pretty;
}
.strategy b { font-weight: 700; color: #fff; }
.strategy em { font-style: normal; font-weight: 600; color: var(--accent); }
.strategy__lead { font-weight: 700; color: var(--accent); font-size: 1.35em; letter-spacing: -.02em; }
.strategy__sign { margin-top: 20px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-2); }
.strategy__sign::before { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--accent); }

.route-canvas { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.route-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px calc(var(--gutter) * .5) 0; }
.route-word {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line-on-dark); background: rgba(11, 20, 39, .7);
  font-size: .9375rem; font-weight: 500; line-height: 1.2; color: var(--fg-on-dark-2); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.route-word__n { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--accent); }
button.route-word { cursor: pointer; }
.route-word[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--kr-navy-700); }
.route-word[aria-selected="true"] .route-word__n { color: var(--kr-navy-700); }
@media (hover: hover) { button.route-word:hover:not([aria-selected="true"]) { color: #fff; border-color: var(--border-on-dark); } }
.method__loop { margin: 18px calc(var(--gutter) * .5) 0; display: flex; align-items: center; gap: 10px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--fg-on-dark-2); }
.method__loop .icon { width: 22px; height: 22px; color: var(--accent); flex: none; }

/* --- Value icons (custom, geometric, line) --- */
.value__icon { grid-area: icon; width: 52px; height: 52px; color: var(--accent); overflow: visible; }
.value__icon .vi-soft { fill: none; stroke: rgba(255, 245, 229, .28); stroke-width: 1.5; }
.value__icon .vi-draw { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) .25s; }
.value__icon .vi-dot { fill: currentColor; opacity: 0; transition: opacity 500ms var(--ease-out) .15s; }
.value__icon .vd2 { transition-delay: .7s; } .value__icon .vd3 { transition-delay: 1.05s; }
.value.is-revealed .vi-draw, .no-js .vi-draw { stroke-dashoffset: 0; }
.value.is-revealed .vi-dot, .no-js .vi-dot { opacity: 1; }

/* Curved section tops: each one overlaps the previous section by exactly its radius, so the area
   outside the curve always shows the real background of the section above (any viewport). */
.purpose, .method, .values, .cta, .learn {
  margin-top: calc(var(--curve) * -1);
  border-radius: var(--curve) var(--curve) 0 0;
}
.experience__overlay { padding-bottom: calc(clamp(48px, 7vw, 96px) + var(--curve)); }
.learn--compact { margin-top: 0; border-radius: 0; }   /* blog: standalone band */

/* =============================================================
   11. Motion
   ============================================================= */
/* Hero signature: arches rise + chalk draws itself + point climbs the curve (CSS only) */
.arch { animation: archRise var(--dur-enter) var(--ease-out) both; }
.arch--cream-l { animation-delay: 80ms; }
.arch--burgundy { animation-delay: 200ms; }
.arch--photo { animation-delay: 140ms; }
.arch--cream-r { animation-delay: 260ms; }
@keyframes archRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.arch--photo img { animation: fadeIn var(--dur-enter) var(--ease-out) 420ms both; }
.hero__art .tile { animation: liftIn var(--dur-enter) var(--ease-out) both; }
.hero__art .tile--a { animation-delay: 620ms; }
.hero__art .tile--b { animation-delay: 740ms; }
.hero__art .tile--c { animation-delay: 860ms; }
.hero__note { animation: fadeIn var(--dur-enter) var(--ease-out) 1.8s both; }
.chalk .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chalkDraw 1.2s var(--ease-out) forwards; }
.chalk .d1 { animation-delay: .7s; } .chalk .d2 { animation-delay: 1s; } .chalk .d3 { animation-delay: 1.4s; } .chalk .d4 { animation-delay: 1.7s; }
.chalk text { animation: fadeIn var(--dur-enter) var(--ease-out) both; }
.chalk .t1 { animation-delay: 1.2s; } .chalk .t2 { animation-delay: 1.9s; } .chalk .t3 { animation-delay: 2.2s; }
@keyframes chalkDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes liftIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Scroll reveal — hidden only once JS confirms it is running (.js on <html>) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js .reveal.is-revealed { opacity: 1; transform: none; }
.js .rd-1 { transition-delay: 80ms; } .js .rd-2 { transition-delay: 160ms; } .js .rd-3 { transition-delay: 240ms; } .js .rd-4 { transition-delay: 320ms; }

/* =============================================================
   12. Responsive (mobile-first)
   ============================================================= */
@media (max-width: 959px) {
  /* Story on small screens: image breaks the text run (question → p1 → image → mission) */
  .story__head, .story__body { display: contents; }
  .story__grid { gap: 20px; }
  .story__body > p:first-child { order: 1; }
  .story__media { order: 2; margin-top: 4px; }
  .story__body > :not(:first-child) { order: 3; }
  .story__body p { font-size: var(--fs-body-lg); color: var(--fg-2); }
}
@media (max-width: 539px) {
  .hero__art .tile { min-width: 0; padding: 8px 10px; }
  .hero__art .tile__status { font-size: .625rem; letter-spacing: .04em; padding: 2px 6px; }
  .hero__art .tile__title { font-size: .875rem; }
  .hero__art .tile .icon { width: 26px; height: 26px; }
  .hero__art .tile__sub { display: none; }
  .hero__art .tile--a { top: auto; bottom: 20%; left: 0; }
  .hero__art .tile--b { top: 2%; right: -6px; }
  .hero__art .tile--c { top: auto; bottom: 3%; right: 0; }
  .hero__actions .btn { width: 100%; }
  .strip .feature .icon { width: 26px; height: 26px; }
  .strip .feature__text { font-size: .875rem; }
      .btn { white-space: normal; text-align: center; }
}
@media (min-width: 540px) {
  .hero__note { display: block; }
  .strip__list { grid-template-columns: repeat(3, 1fr); }
  .strip__list li:last-child { grid-column: auto; }
  .price { grid-template-columns: auto 1fr; gap: 28px; }
}
@media (min-width: 720px) {
  .groups { grid-template-columns: 1fr 1fr; }
  .value { grid-template-columns: 60px minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "icon eq name" "icon eq text"; column-gap: 32px; }
  .value__icon { width: 60px; height: 60px; }
  .subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles__list { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 960px) {
  .quiz-zone { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; }
  .nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .teachers__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; }
  .teachers__media { aspect-ratio: 3 / 2; }
  .nav__links { display: flex; gap: clamp(22px, 2.6vw, 40px); }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: 500px; }
  .hero__art { height: 500px; max-width: none; }
  .strip__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .strip__list li { display: flex; justify-content: center; padding-inline: 12px; }
  .strip__list li + li { border-left: 1px solid var(--border-1); }
  .offer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .principles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principle { grid-template-columns: 1fr; gap: 8px; align-content: start; height: 100%; }
  .principle__line { grid-row: auto; width: 34px; }
  .stages:not(.is-tabbed) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .hero__art { height: 540px; }
  .hero__title { font-size: 4rem; }
}

/* =============================================================
   13. Reduced motion — only intrusive / continuous effects
   Entrance fades, hovers and state transitions stay (they are feedback, not decoration).
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow-field span { animation: none; }
  .z, .hero-sci { animation: none; }
  .chalk__point { animation: none; offset-distance: 100%; opacity: 1; }
  .chalk .draw { animation-duration: 1ms; animation-delay: 0s; }
  .growth__edge, .value__arrow, .pw, .measure__spark polyline, .faq__figure *, .icon--draw *, .quiz__you, .quiz__bar span, .vi-draw, .vi-dot { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js .reveal { transform: none; }
}

/* =============================================================
   14. Section rhythm — "sheets" + KRESKO textile system
   A clean cream sheet rises over the previous section with the site's --curve and a soft shadow:
   one structural gesture for every light→light change (strip→tension, programs→offer,
   story→team, docentes→FAQ). Cream sheets = clarity/reading; tinted grounds = identity.
   ============================================================= */
.sheet {
  position: relative; z-index: 2; margin-top: calc(var(--curve) * -1);
  border-radius: var(--curve) var(--curve) 0 0;
  box-shadow: 0 -1px 0 rgba(89, 10, 31, .06), 0 -28px 50px -36px rgba(19, 32, 60, .38);
}
/* 1 · strip → tension: the data strip is its own light band; "Lo que viene" rises over it */
.strip { background: var(--kr-cream-50); }
.strip__list { padding-bottom: calc(40px + var(--curve)); }
.tension.sheet { z-index: 6; background: var(--kr-cream-100); }

/* 3 · programs + 4 · story — KRESKO dark textile (textile_svg in render.py).
   Navy and burgundy build the surface; terracotta gives depth; amber and cream appear only as threads and knots.
   Layers: section gradient (navy/burgundy zones) → far faja (depth) → motif faja (masked per zone) → thread
   texture → cell grain. Masks keep text zones calm; edges and free areas carry the richest weave.
   Text inside switches to the dark-ground hierarchy through the same tokens the rest of the site uses. */
.programs { padding-block: 0; background: transparent; }
.programs__band, .story {
  --fg-1: #FFF5E5; --fg-2: rgba(255, 245, 229, .86); --fg-3: rgba(255, 245, 229, .72);
  --emphasis-light: var(--kr-amber-500); --focus: var(--kr-amber-500); color: var(--fg-1);
}
.programs__band {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: var(--section-y) calc(var(--section-y) * .8 + var(--curve));
  background:
    radial-gradient(ellipse 60% 45% at 16% 30%, rgba(13, 22, 43, .85), transparent 70%),
    linear-gradient(180deg, #4C0A1B 0, #590A1F 70px, #2A1330 170px, #13203C 280px, #13203C calc(100% - 260px), #33102A calc(100% - 150px), #590A1F 100%);
}
.programs__sheet { background: var(--kr-cream-50); padding-block: calc(var(--section-y) * .75) var(--section-y); }
.programs__sheet .offer { margin-top: 0; }

.textile { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.textile .tx-n, .textile-band .tx-n { fill: #263C6E; }
.textile .tx-b, .textile-band .tx-b { fill: #7A1331; }
.textile .tx-t, .textile-band .tx-t { fill: var(--kr-terracotta-500); }
.textile .tx-a, .textile-band .tx-a { fill: var(--kr-amber-500); }
.textile .tx-c, .textile-band .tx-c { fill: var(--kr-cream-100); fill-opacity: .7; }
.textile .tx-weft { fill: #2B3F70; opacity: .55; }
.textile .tx-warp { fill: #6E1230; opacity: .5; }
.textile .tx-seam, .textile-band .tx-seam { fill: #0B1426; opacity: .55; }
.textile__thread { opacity: .5; }
.textile__grain  { opacity: 1; }
.textile__far    { opacity: .09; }
.textile__near   { opacity: .8; }
.textile__sparse { display: none; opacity: .8; }

/* programs zones: rich faja at the top and base; calm behind the heading; low-contrast weave behind the cards */
.textile--programs .textile__near, .textile--programs .textile__sparse {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 96px, rgba(0,0,0,.06) 150px, rgba(0,0,0,.06) 42%, rgba(0,0,0,.34) 54%, rgba(0,0,0,.34) calc(100% - 230px), #000 calc(100% - 150px), #000 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 96px, rgba(0,0,0,.06) 150px, rgba(0,0,0,.06) 42%, rgba(0,0,0,.34) 54%, rgba(0,0,0,.34) calc(100% - 230px), #000 calc(100% - 150px), #000 100%);
}
.textile--programs .textile__thread, .textile--programs .textile__grain {
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.55) 35%, rgba(0,0,0,.55) 65%, #000);
          mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.55) 35%, rgba(0,0,0,.55) 65%, #000);
}

/* story: the whole ground is textile — burgundy → navy, woven richly at the edges, around the photo and at the
   base; very quiet behind the heading and the long text column */
.story { position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(155deg, #590A1F 0%, #3E0D24 30%, #1A1D3A 58%, #13203C 100%);
  padding-bottom: calc(var(--section-y) * .6 + var(--curve)); }
/* rich weave only where it can't compete with reading: the outer left edge, the top selvedge, around the
   photo and along the base; nothing behind the heading or the text column */
.textile--story .textile__near, .textile--story .textile__sparse {
  -webkit-mask-image:
    linear-gradient(90deg, #000 0, #000 22px, transparent 64px),
    linear-gradient(180deg, rgba(0,0,0,.85) 0, transparent 64px),
    linear-gradient(0deg, #000 0, #000 calc(var(--curve) + 18px), transparent calc(var(--curve) + 96px)),
    radial-gradient(ellipse 30% 34% at 25% 76%, rgba(0,0,0,.6), transparent 100%);
          mask-image:
    linear-gradient(90deg, #000 0, #000 22px, transparent 64px),
    linear-gradient(180deg, rgba(0,0,0,.85) 0, transparent 64px),
    linear-gradient(0deg, #000 0, #000 calc(var(--curve) + 18px), transparent calc(var(--curve) + 96px)),
    radial-gradient(ellipse 30% 34% at 25% 76%, rgba(0,0,0,.6), transparent 100%);
}
/* reading calm: a soft tonal veil over the weave (above the textile, below the content) — organic ellipses
   behind the heading and the text column, fading out towards the edges, the photo and the base */
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 24% 20%, rgba(14, 18, 38, .72), rgba(14, 18, 38, .4) 55%, transparent 100%),
    radial-gradient(ellipse 40% 58% at 74% 38%, rgba(14, 22, 44, .8), rgba(14, 22, 44, .45) 60%, transparent 100%); }
.story__mission p { color: var(--fg-2); }
.textile-band--photo { z-index: -1; top: 16%; left: -100vw; width: calc(100vw + 100% + 44px); opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 64px), transparent 100%); }
.textile-band { position: absolute; left: 0; width: 100%; max-width: none; pointer-events: none; display: block; overflow: hidden; }
.story__media { position: relative; }
/* desktop: the closing line lands level with the photo's bottom edge → the section ends on purpose */
@media (min-width: 960px) { .story__body { align-self: end; } }

@media (max-width: 959px) {
  /* stacked: text runs full width → no motifs beside the text; weave only at the top selvedge, the base and
     beside the photo (the photo band); a gentle veil calms the whole reading column */
  .story::after { background: linear-gradient(180deg, rgba(14, 20, 40, .62) 0%, rgba(14, 20, 40, .55) 70%, rgba(14, 20, 40, .2) 100%); }
  .textile--story .textile__near, .textile--story .textile__sparse {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0, transparent 40px), linear-gradient(0deg, #000 0, #000 calc(var(--curve) - 6px), transparent calc(var(--curve) + 34px));
            mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0, transparent 40px), linear-gradient(0deg, #000 0, #000 calc(var(--curve) - 6px), transparent calc(var(--curve) + 34px));
  }
  .textile-band--photo { top: 20%; width: 200vw; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 719px) {
  /* mobile: fewer motifs (sparse faja), same scale; no far layer */
  .textile__near { display: none; }
  .textile__sparse { display: block; }
  .textile__far { display: none; }
  .textile--programs .textile__sparse {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 56px, rgba(0,0,0,.06) 96px, rgba(0,0,0,.06) 240px, rgba(0,0,0,.3) 300px, rgba(0,0,0,.3) calc(100% - 170px), #000 calc(100% - 110px), #000 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 56px, rgba(0,0,0,.06) 96px, rgba(0,0,0,.06) 240px, rgba(0,0,0,.3) 300px, rgba(0,0,0,.3) calc(100% - 170px), #000 calc(100% - 110px), #000 100%);
  }
  .programs__band { background: radial-gradient(ellipse 90% 30% at 30% 14%, rgba(13, 22, 43, .8), transparent 70%),
    linear-gradient(180deg, #4C0A1B 0, #590A1F 40px, #2A1330 110px, #13203C 200px, #13203C calc(100% - 200px), #33102A calc(100% - 110px), #590A1F 100%); }
}

/* 5 · story → team: the clean cream team sheet rises over the woven base */

/* 8 · docentes → FAQ: docentes closes on a slightly warmer tone; FAQ rises as a clean sheet */
.teachers { background: #FAEEDC; padding-bottom: calc(var(--section-y) + var(--curve)); }
.faq.sheet { background: var(--kr-cream-50); }

/* depth: the far weave drifts a few px with scroll (progressive enhancement, no JS) */
@supports (animation-timeline: view()) {
  .textile__far { animation: txDrift linear both; animation-timeline: view(); }
  @keyframes txDrift { from { transform: translateY(-28px); } to { transform: translateY(28px); } }
}
@media (prefers-reduced-motion: reduce) { .textile__far { animation: none; } }

/* 6 · teachers: official photos (originals untouched). Per-person framing only, so the three read as one set:
   eye line ≈ 38–42% of the arch and similar head size (Miguel's portrait is already tighter, so the other two
   are scaled slightly from the top edge). */


/* 7 · manifiesto: abstract 3D growth structure (growth_svg in render.py) — connection → expansion → growth.
   Right side only; nodes light up in a slow wave from the concentrated base to the open top. */
.growth {
  position: absolute; z-index: -1; right: -4%; top: 50%; height: 104%; width: auto; max-width: 60%;
  transform: translateY(-50%); overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  animation: gFloat 26s ease-in-out infinite alternate;
}
@keyframes gFloat { from { translate: 0 6px; } to { translate: 0 -10px; } }
.growth__plane { stroke: none; }
.growth__plane.gp0 { fill: rgba(242, 159, 5, .05); }
.growth__plane.gp1 { fill: rgba(96, 186, 232, .05); }
.growth__plane.gp2 { fill: rgba(255, 245, 229, .035); }
.growth__edge { fill: none; stroke: rgba(255, 245, 229, .22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); }
.growth__edge.is-back { stroke: rgba(255, 245, 229, .1); }
.manifesto.is-revealed .growth__edge, .no-js .growth__edge { stroke-dashoffset: 0; }
.growth__edge.l1 { transition-delay: .2s; } .growth__edge.l2 { transition-delay: .4s; } .growth__edge.l3 { transition-delay: .6s; }
.growth__edge.l4 { transition-delay: .8s; } .growth__edge.l5 { transition-delay: 1s; } .growth__edge.l6 { transition-delay: 1.2s; }
.growth__node { fill: rgba(255, 245, 229, .42); }
.growth__node.is-back { fill: rgba(255, 245, 229, .2); }
.growth__node.is-key { opacity: .4; animation: gPulse 10s ease-in-out infinite; }
.growth__node.t-amber { fill: #F7B545; filter: drop-shadow(0 0 5px rgba(242, 159, 5, .75)); }
.growth__node.t-cyan  { fill: #A9DCF2; filter: drop-shadow(0 0 5px rgba(96, 186, 232, .7)); }
.growth__node.t-cream { fill: #FFF1DA; filter: drop-shadow(0 0 4px rgba(255, 236, 205, .6)); }
.growth__node.l1 { animation-delay: .8s; } .growth__node.l2 { animation-delay: 1.6s; } .growth__node.l3 { animation-delay: 2.4s; }
.growth__node.l4 { animation-delay: 3.2s; } .growth__node.l5 { animation-delay: 4s; } .growth__node.l6 { animation-delay: 4.8s; }
@keyframes gPulse { 0%, 100% { opacity: .38; } 10% { opacity: 1; } 28% { opacity: .55; } }
@media (max-width: 959px) {
  /* stacked text: the structure sits low on the right, quieter, behind the vision block's edge */
  .growth { top: auto; bottom: -6%; right: -26%; height: 72%; max-width: none; transform: none; opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 70%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 70%, #000 30%, transparent 75%); }
}
@media (prefers-reduced-motion: reduce) {
  .growth, .growth__node.is-key { animation: none; }
  .growth__node.is-key { opacity: .75; }
}

/* 9 · cierre — the hero's spatial principle, calmer: slow camera travel through suspended science.
   Two depth fields, one in each free space beside the headline (vanishing points left/right of the text):
   elements are born small and faint there, grow, sharpen, glow softly and leave through the edges.
   Everything is clipped by the rounded container. Phones: one shared vanishing point between buttons and photo. */
.cta-sci { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit;
  perspective: 900px; --o-far: .4; --o-peak: .78; }
.cta-sci--l { perspective-origin: 15% 22%; }
.cta-sci--r { perspective-origin: 85% 22%; }
.cz { position: absolute; transform: translate(-50%, -50%); opacity: .35;
  animation: sciTravel 48s linear infinite; will-change: transform, opacity; }
.cz svg { display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--glow)); }
.cz .fill { fill: var(--ink); stroke: none; }
/* scale-1 point · size · cycle · phase — every ray stays in the free side spaces */
.cz1 { left: 5%;  top: 8%;  width: 140px; animation-duration: 46s; animation-delay: -6s; }    /* ↖ atom */
.cz3 { left: 3%;  top: 31%; width: 130px; animation-duration: 54s; animation-delay: -30s; }   /* ← triangle */
.cz5 { left: 13%; top: 2%;  width: 160px; animation-duration: 50s; animation-delay: -19s; }   /* ↑ graph */
.cz2 { left: 95%; top: 8%;  width: 110px; animation-duration: 52s; animation-delay: -38s; }   /* ↗ benzene */
.cz4 { left: 97%; top: 31%; width: 190px; animation-duration: 44s; animation-delay: -14s; }   /* → wave */
.cz6 { left: 87%; top: 2%;  width: 130px; animation-duration: 56s; animation-delay: -46s; }   /* ↑ vector */
@media (max-width: 959px) {
  .cta-sci--l { perspective-origin: 9% 20%; }
  .cta-sci--r { perspective-origin: 91% 20%; }
  .cz5 { left: 8%; } .cz6 { left: 92%; }
}
@media (max-width: 719px) {
  /* stacked: shared vanishing point between the buttons and the photo; four elements, lighter, no animated blur */
  .cta-sci--l, .cta-sci--r { perspective-origin: 50% 54.5%; }
  .cta-sci { --o-far: .26; --o-peak: .5; }
  .cz { animation-name: sciTravelLite; }
  .cz3, .cz4 { display: none; }
  .cz1 { left: -4%;  top: 56%;  width: 100px; }
  .cz2 { left: 104%; top: 56%;  width: 70px; }
  .cz5 { left: 16%;  top: 100%; width: 120px; }
  .cz6 { left: 84%;  top: 100%; width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .cz { animation: none; } }

/* 2 · método — gentle-slope route; each station = big icon (above) + point + label (below).
   Dock-style magnification: rest (dim) → hover/focus (grows, starts to glow) → selected (largest, lit).
   Sizes use container units so icon/label stay locked to the scaled SVG stations. */
.route-word__icon {
  flex: none; width: 22px; height: 22px; overflow: visible;
  fill: none; stroke: rgba(255, 245, 229, .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.route-word__icon .ic-dot { fill: rgba(255, 245, 229, .55); stroke: none; }
.route-word__icon .ic-ring { opacity: .5; }
.route-word[aria-selected="true"] .route-word__icon { stroke: var(--kr-navy-700); }
.route-word[aria-selected="true"] .route-word__icon .ic-dot { fill: var(--kr-navy-700); }
.route__halo { opacity: 0; transition: opacity 700ms var(--ease-out); }
[data-stage="1"] [data-station="1"] .route__halo, [data-stage="2"] [data-station="2"] .route__halo,
[data-stage="3"] [data-station="3"] .route__halo, [data-stage="4"] [data-station="4"] .route__halo,
[data-stage="5"] [data-station="5"] .route__halo { opacity: 1; }
.route__capsule { transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out), filter 700ms var(--ease-out); }
[data-stage="1"] [data-station="1"] .route__capsule, [data-stage="2"] [data-station="2"] .route__capsule,
[data-stage="3"] [data-station="3"] .route__capsule, [data-stage="4"] [data-station="4"] .route__capsule,
[data-stage="5"] [data-station="5"] .route__capsule { filter: drop-shadow(0 0 10px rgba(242, 159, 5, .5)); }

@media (min-width: 720px) {
  .route-canvas { container-type: inline-size; margin-top: clamp(64px, 7.5vw, 96px); padding-bottom: 92px; }
  .route-words { position: absolute; inset: 0 0 92px; display: block; margin: 0; pointer-events: none; }
  /* label hangs below its capsule (capsule half-height = 40/1200 of the canvas width) */
  .route-word { position: absolute; pointer-events: auto; transform: translate(-50%, calc(3.334cqw + 12px)); }
  .route-word.w1 { left: 7.5%;   top: 81.67%; }
  .route-word.w2 { left: 28.75%; top: 71.67%; }
  .route-word.w3 { left: 50%;    top: 60.83%; }
  .route-word.w4 { left: 71.25%; top: 49.17%; }
  .route-word.w5 { left: 92.5%;  top: 36.67%; }
  /* the icon floats above the capsule, centred on the station */
  .route-word__icon {
    --s: .62; position: absolute; left: 50%; bottom: calc(100% + 6.667cqw + 26px);
    width: clamp(84px, 9.2cqw, 116px); height: auto; aspect-ratio: 1; margin-left: calc(clamp(84px, 9.2cqw, 116px) / -2);
    stroke-width: 1.3; opacity: .8; transform: scale(var(--s)); transform-origin: 50% 100%;
    transition: transform 520ms cubic-bezier(.3, 1.4, .5, 1), opacity 450ms var(--ease-out), stroke 450ms var(--ease-out), filter 600ms var(--ease-out);
  }
  .route-word__icon .ic-a, .route-word__icon .ic-c, .route-word__icon .ic-ring, .route-word__icon .ic-dot { transition: stroke 450ms var(--ease-out), fill 450ms var(--ease-out), opacity 450ms var(--ease-out); }
  /* Dock: neighbours of the hovered/focused station lift a little too */
  /* Dock continuity: the neighbours of the active (or hovered/focused) station lift a little */
  .route-word:is([aria-selected="true"], :hover, :focus-visible) + .route-word .route-word__icon,
  .route-word:has(+ .route-word:is([aria-selected="true"], :hover, :focus-visible)) .route-word__icon { --s: .7; opacity: .88; }
  .route-word:is(:hover, :focus-visible) .route-word__icon {
    --s: .82; opacity: 1; stroke: rgba(255, 241, 218, .95);
    filter: drop-shadow(0 0 6px rgba(242, 159, 5, .35)) drop-shadow(0 0 14px rgba(96, 186, 232, .18));
  }
  .route-word:is(:hover, :focus-visible) .route-word__icon .ic-a { stroke: rgba(242, 159, 5, .8); }
  .route-word:is(:hover, :focus-visible) .route-word__icon .ic-c { stroke: rgba(169, 220, 242, .8); }
  .route-word[aria-selected="true"] .route-word__icon,
  .route-word[aria-selected="true"]:is(:hover, :focus-visible) .route-word__icon {
    --s: 1; opacity: 1; stroke: #FFF1DA;
    filter: drop-shadow(0 0 6px rgba(242, 159, 5, .7)) drop-shadow(0 0 18px rgba(242, 159, 5, .3)) drop-shadow(0 0 12px rgba(96, 186, 232, .35));
  }
  .route-word[aria-selected="true"] .route-word__icon .ic-a { stroke: var(--kr-amber-500); }
  .route-word[aria-selected="true"] .route-word__icon .ic-c { stroke: #A9DCF2; }
  .route-word[aria-selected="true"] .route-word__icon .ic-ring { stroke: #A9DCF2; opacity: .85; }
  .route-word[aria-selected="true"] .route-word__icon .ic-dot { fill: var(--kr-amber-500); }
}
@media (prefers-reduced-motion: reduce) { .route-word__icon { transition-duration: 1ms !important; } }

/* Legal pages — editorial reading layout: title → intro → numbered sections → date */
.page-hero--legal { padding-block: clamp(44px, 6vw, 80px); }
.legal > * { max-width: 46rem; }
.legal__intro { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--fg-1); }
.legal__sections { margin-top: clamp(32px, 4vw, 44px); counter-reset: legal; display: grid; gap: clamp(28px, 3.5vw, 40px); }
.legal__sections > li { counter-increment: legal; padding-top: clamp(22px, 3vw, 28px); border-top: 1px solid var(--border-1); }
.legal h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.25; }
.legal h2::before { content: counter(legal, decimal-leading-zero); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--emphasis-light); }
.legal p, .legal li li { color: var(--fg-2); line-height: 1.65; }
.legal h2 + p, .legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { display: grid; gap: 6px; padding-left: 0; }
.legal ul li { position: relative; padding-left: 22px; color: var(--fg-2); line-height: 1.6; }
.legal ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); }
.legal__body { display: grid; gap: 14px; }
.legal__body p:first-child { font-size: var(--fs-body-lg); color: var(--fg-1); }
.legal a { color: var(--emphasis-light); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.legal__date { margin-top: clamp(36px, 5vw, 52px); padding-top: 18px; border-top: 1px solid var(--border-1); font-size: .875rem; color: var(--fg-3); }

/* Footer contact: email + WhatsApp (messages only), quiet, icon + text */
.footer__contact { margin-top: 18px; display: grid; gap: 6px; }
.footer__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--fg-on-dark-2); font-size: .9375rem; }
.footer__contact .icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
@media (hover: hover) { .footer__contact a:hover { color: #fff; } .footer__contact a:hover span { text-decoration: underline; text-underline-offset: 3px; } }

/* =============================================================
   Profesores — composición editorial (retrato → color → información) + lenguaje científico KRESKO
   ============================================================= */
.tp { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-y); background: var(--kr-cream-100); }
.tp::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(19, 32, 60, .08) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 85% 35%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 55% 70% at 85% 35%, #000, transparent 75%); }
.tp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.tp__head .eyebrow { display: block; margin-bottom: 12px; }
.tp__head h2 { font-size: var(--fs-h2); }
.tp__head h2 .hl-light { display: block; }

.tp__note { position: absolute; z-index: 1; overflow: visible; pointer-events: none; fill: none; stroke: var(--kr-navy-700); stroke-opacity: .32; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tp__note text { fill: var(--kr-navy-700); fill-opacity: .42; stroke: none; font-family: var(--font-hand); font-size: 30px; }
.tp__note .sm { font-size: 22px; } .tp__note .xs { font-size: 18px; } .tp__note .lg { font-size: 64px; }
.tp__note--lim { position: static; width: 150px; flex: none; margin-top: 8px; }
.tp__note--plot { left: 1%; top: 6%; width: 9%; }
.tp__note--pyr  { left: 56%; top: 8%; width: 6.5%; z-index: 4; }
.tp__note--int  { right: 0; top: 30%; width: 7.5%; z-index: 4; stroke: var(--kr-cream-100); }
.tp__note--int text { fill: var(--kr-cream-100); fill-opacity: .5; }

.tp__stage { position: relative; margin-top: 32px; }
.tp__list { position: relative; display: grid; gap: 40px; }

/* piece = back shape (outside) · SHAPE [inner shape · photo with soft edges · fade to colour · text] · front shape */
.p { --c: var(--kr-navy-700); --deep: var(--kr-navy-700); --ink: var(--kr-cream-100); --ink-2: rgba(255, 245, 229, .88); --rule: var(--kr-amber-500);
  --ar: 10 / 14; --fx: 50%; --img-h: 90%; --img-top: 0%; --face: .5;
  position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.p__back, .p__front { position: absolute; display: block; pointer-events: none; }
.p__back { z-index: 0; }
.p__front { z-index: 3; }
.p__shape { position: relative; z-index: 2; aspect-ratio: var(--ar); overflow: hidden; background: var(--c); color: var(--ink); }
.p__inner { position: absolute; z-index: 0; }
/* photo sized by height so the three heads share scale and eye line; its own background melts into the shapes */
.p__img { position: absolute; z-index: 1; top: var(--img-top); left: var(--fx); height: var(--img-h); width: auto; max-width: none;
  transform: translateX(calc(var(--face) * -100%));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 97%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 97%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* photo → colour: starts below the chin; the name still sits over the torso, solid colour arrives under the role */
.p__fade { position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 49%, color-mix(in srgb, var(--deep) 55%, transparent) 60%,
              color-mix(in srgb, var(--deep) 80%, transparent) 68%, color-mix(in srgb, var(--deep) 94%, transparent) 78%, var(--deep) 88%); }
.p__text { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 9% 9%; }
.p__name { font-size: clamp(2rem, 1.1rem + 2.1vw, 3rem); line-height: .98; letter-spacing: -.025em; color: var(--ink); text-shadow: 0 1px 14px rgba(0, 0, 0, .28); }
.p__name span { display: block; font-weight: 300; }
.p__role { margin-top: 18px; padding-top: 12px; border-top: 3px solid var(--rule); width: fit-content; min-width: 46%; font-weight: 600; font-size: 1.0625rem; color: var(--ink); max-width: 20ch; }
.p__exp { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }

/* Henry — terracotta block (great top-left curve), burgundy arch at left, terracotta quarter disc in front */
.p--henry { --c: #94432E; --deep: #7A2216; --ar: 10 / 14.6; --fx: 58%; --img-h: 95%; --img-top: -0.5%; --face: .48; }
.p--henry .p__shape { border-radius: 58% 0 0 0 / 34% 0 0 0; }
.p--henry .p__inner { left: 0; bottom: 0; width: 42%; height: 76%; border-radius: 999px 999px 0 0; background: var(--kr-burgundy-700); }
.p--henry .p__back { left: -3%; bottom: 0; width: 34%; height: 70%; border-radius: 999px 999px 0 0; background: #6E1328; }
.p--henry .p__front { right: -8%; bottom: 5%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: var(--kr-rust-500); }

/* Alejandra — tall amber arch; lighter amber arch behind; deep amber base so cream text reads */
.p--alejandra { --c: #B87A30; --deep: #93530A; --ar: 10 / 15.4; --fx: 52%; --img-h: 100%; --img-top: -7.6%; --face: .5; }
.p--alejandra .p__shape { border-radius: 58% 42% 0 0 / 30% 24% 0 0; }
.p--alejandra .p__inner { left: -6%; top: 22%; width: 40%; height: 70%; border-radius: 999px 999px 0 0; background: #C98A34; }
.p--alejandra .p__back { right: -9%; top: -6%; width: 64%; height: 56%; border-radius: 999px 999px 0 0; background: #E3A441; }
.p--alejandra .p__front { left: -5%; top: 50%; width: 16%; height: 12%; border-radius: 0 999px 999px 0; background: #D08F2E; }

/* Miguel — organic navy shape; big blue blob behind to the right; lighter blue disc inside; gradient (not a block) */
.p--miguel { --c: var(--kr-navy-700); --deep: var(--kr-navy-700); --ar: 10 / 14.2; --fx: 46%; --img-h: 79%; --img-top: -.5%; --face: .47; }
.p--miguel .p__shape { border-radius: 40% 62% 0 0 / 22% 30% 0 0; }
.p--miguel .p__inner { left: -8%; top: 36%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #1F3868; }
.p--miguel .p__back { right: -22%; top: -4%; width: 72%; height: 90%; border-radius: 55% 45% 40% 60% / 45% 40% 60% 55%; background: #1B2D55; }
.p--miguel .p__front { right: -4%; top: 47%; width: 15%; height: 11%; border-radius: 999px 0 0 999px; background: #1F3868; }

.tp__curve { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tp__curve path { fill: none; stroke: #D98A12; stroke-opacity: .85; stroke-width: 1.6; }
.tp__curve circle { fill: var(--kr-amber-500); stroke: var(--kr-cream-100); stroke-width: 3; }

/* desktop: one connected composition, bottoms aligned, tops staggered by the shapes' own heights */
@media (min-width: 960px) {
  .tp__stage { margin-top: -40px; }
  .tp__list { grid-template-columns: 1.02fr .99fr 1.05fr; gap: 0; align-items: start; }
  .p { max-width: none; }
  .p--henry     { margin-top: 118px; }
  .p--alejandra { margin-top: 0; }
  .p--miguel    { margin-top: 44px; }
  /* light layered overlap (position:left, no transform → no stacking context, so layers interleave across pieces):
     Alejandra's shape covers Henry's right edge (sleeve/background), Miguel's shape covers Alejandra's right edge;
     Alejandra's back arch runs behind Miguel; Henry's disc and Miguel's pill enter the central composition. */
  .p--henry  { left: .8%; }
  .p--miguel { left: -.8%; }
  .tp__list  { padding-right: 0; }
  .p--miguel .p__front { left: -9%; right: auto; top: 50%; width: 14%; height: 10%; border-radius: 0 999px 999px 0; }
  .p--henry .p__front  { right: -14%; bottom: 3%; width: 25%; }
  /* varied terminations: Henry ends lowest with a rounded foot, Alejandra's base curves in, Miguel ends square */
  .p--henry .p__shape     { border-bottom-left-radius: 26px; }
  .p--alejandra .p__shape { border-bottom-right-radius: 90px 70px; }
}
@media (max-width: 959px) {
  .tp__note--pyr, .tp__note--int, .tp__note--lim { display: none; }
  .tp__note--plot { left: auto; right: 2%; top: -2%; width: 60px; }
}
@media (max-width: 959px) {
  .p--henry .p__front { width: 20%; bottom: 3%; right: -4%; }   /* keep clear of the text */
}
@media (max-width: 480px) {
  .tp__curve, .tp__note--plot { display: none; }
  .p__back { opacity: .85; }
}

/* =============================================================
   Profesores — escala, aire bajo el título y movimiento (entrada, curva que se dibuja, profundidad)
   ============================================================= */
/* 1 · Profesores: the whole composition scales as one unit (every piece is % of the stage) */
@media (min-width: 960px) { .tp__stage { max-width: 1000px; margin-inline: auto; } }
@media (max-width: 959px) { .p { max-width: 340px; } }
@media (max-width: 480px) { .p__back { transform: none; scale: .9; } }

/* motion — only when JS runs and the visitor accepts motion */
@media (prefers-reduced-motion: no-preference) {
  /* entrance: each piece rises gently, stagger 140 ms; shapes around it settle a beat later */
  .js .tp .p__shape, .js .tp .p__back, .js .tp .p__front { opacity: 0; transform: translateY(28px);
    transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .tp .p__back  { transform: translateY(40px); }
  .js .tp .p__front { transform: translateY(16px) scale(.92); }
  .js .tp .p.is-in .p__shape, .js .tp .p.is-in .p__back, .js .tp .p.is-in .p__front { opacity: 1; transform: none; }
  .tp .p--henry     { --d0: 0ms; }
  .tp .p--alejandra { --d0: 140ms; }
  .tp .p--miguel    { --d0: 280ms; }
  .tp .p__shape { --d: var(--d0); }
  .tp .p__back  { --d: calc(var(--d0) + 160ms); }
  .tp .p__front { --d: calc(var(--d0) + 320ms); }
  /* depth: shapes drift a few px with scroll at different rates (photos and text stay still) */
  .tp .p__back  { translate: 0 calc(var(--tp-p, 0) * var(--kb, 16px)); }
  .tp .p__front { translate: 0 calc(var(--tp-p, 0) * var(--kf, -12px)); }
  .tp .p__inner { translate: 0 calc(var(--tp-p, 0) * -7px); }
  .tp .p--alejandra { --kb: 22px; --kf: -9px; }
  .tp .p--miguel    { --kb: 12px; --kf: -15px; }
  /* scientific curve draws itself; nodes appear along it */
  .js .tp__curve path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-out) .5s; }
  .js .tp.is-in .tp__curve path { stroke-dashoffset: 0; }
  .js .tp__curve circle { opacity: 0; transition: opacity .5s var(--ease-out); }
  .js .tp.is-in .tp__curve circle { opacity: 1; }
  .js .tp.is-in .tp__curve circle:nth-child(1) { transition-delay: 1.0s; }
  .js .tp.is-in .tp__curve circle:nth-child(2) { transition-delay: 1.5s; }
  .js .tp.is-in .tp__curve circle:nth-child(3) { transition-delay: 2.0s; }
  .js .tp.is-in .tp__curve circle:nth-child(4) { transition-delay: 2.5s; }
  /* ambient: handwritten notes breathe almost imperceptibly */
  .tp__note { animation: tpDrift 22s ease-in-out infinite alternate; }
  .tp__note--pyr  { animation-duration: 27s; animation-delay: -9s; }
  .tp__note--int  { animation-duration: 31s; animation-delay: -4s; }
  .tp__note--lim  { animation-duration: 25s; animation-delay: -14s; }
  @keyframes tpDrift { from { translate: 0 0; } to { translate: 4px -6px; } }
}


.tp { padding-bottom: calc(var(--section-y) + var(--curve)); }
.tp__stage { margin-top: 44px; }
@media (min-width: 960px) { .tp__stage { margin-top: 8px; } }

/* =============================================================
   Convocatoria docente — compacta: foto vertical en arco (izquierda) + mensaje y formulario (derecha)
   ============================================================= */
.jn { position: relative; z-index: 3; isolation: isolate; overflow: clip; margin-top: calc(var(--curve) * -1); border-radius: var(--curve) var(--curve) 0 0;
  padding-block: calc(var(--section-y) * .8) calc(var(--section-y) * .8 + var(--curve)); background: var(--kr-navy-900); color: #fff; --focus: var(--kr-amber-500); }
.jn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 60% at 22% 55%, rgba(89, 10, 31, .5), transparent 70%), radial-gradient(ellipse 40% 50% at 92% 8%, rgba(38, 60, 110, .45), transparent 70%); }
.jn__grid { display: grid; gap: 40px; align-items: center; }
/* photo: tall arch (Profesores family) · burgundy arch + amber disc behind · small terracotta shape in front on the
   wall zone · base fades into navy below the table — docente, tablet and laptop always clear */
.jn__visual { position: relative; margin: 0 auto; width: 100%; max-width: 380px; }
.jn__photo { position: relative; z-index: 2; aspect-ratio: 5 / 5.8; overflow: hidden; border-radius: 999px 999px 26px 26px; background: #CDB9A4;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.jn__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.jn__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 10%; background: linear-gradient(180deg, transparent, rgba(11, 20, 39, .8)); }
.jn__back { position: absolute; z-index: 1; display: block; pointer-events: none; }
.jn__back--arch { left: -12%; bottom: 6%; width: 52%; height: 60%; border-radius: 999px 999px 0 0; background: var(--kr-burgundy-700); }
.jn__back--disc { right: -8%; top: 4%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--kr-amber-500); }
.jn__front { position: absolute; z-index: 3; right: -5%; top: 26%; width: 12%; height: 10%; border-radius: 999px 0 0 999px; background: var(--kr-rust-500); pointer-events: none; }
.jn__note { position: absolute; z-index: 3; overflow: visible; pointer-events: none; fill: none; stroke: var(--kr-cream-100); stroke-opacity: .45; stroke-width: 1.4; stroke-linecap: round; }
.jn__note text { fill: var(--kr-cream-100); fill-opacity: .55; stroke: none; font-family: var(--font-hand); font-size: 28px; }
.jn__note circle { fill: var(--kr-amber-500); stroke: none; }
.jn__note--a { width: 120px; left: 2%; top: -9%; }
.jn__note--b { width: 90px; right: -12%; bottom: 8%; }

.jn__intro .eyebrow { display: block; margin-bottom: 12px; color: var(--kr-cream-100); }
.jn__intro h2 { font-size: var(--fs-h2); max-width: 18ch; }
.jn__lead { margin-top: 14px; color: var(--fg-on-dark-2); max-width: 36em; }
.jn__steps { position: relative; margin-top: 20px; display: grid; gap: 8px; }
.jn__steps::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(242, 159, 5, .8), rgba(242, 159, 5, .2)); }
.jn__steps li { position: relative; padding-left: 24px; font-weight: 600; font-size: .9375rem; }
.jn__steps li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 50%; background: var(--kr-amber-500); box-shadow: 0 0 10px rgba(242, 159, 5, .55); }

.jn__panel { position: relative; margin-top: 26px; padding: clamp(22px, 2.6vw, 32px); border-radius: 26px; background: var(--kr-navy-700); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 70px -44px rgba(0, 0, 0, .8); }
.jn__form-title { font-size: 1.375rem; }
.jn__form { margin-top: 14px; display: grid; gap: 12px; }
.jn__row { display: grid; gap: 12px; }
.jn__form .field__input { min-height: 46px; }
.jn__area { min-height: 84px; padding: 12px 18px; border-radius: 18px; resize: vertical; line-height: 1.5; }
.jn__hint { font-weight: 400; color: var(--fg-on-dark-2); margin-left: 6px; }
/* file picker in Spanish: the native input stays in the tab order (visually hidden); its label is the button */
.jn__drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 7px; border: 1.5px dashed rgba(255, 255, 255, .35); border-radius: 16px; background: rgba(255, 255, 255, .04); }
.jn__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.jn__file-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--kr-amber-500); color: var(--kr-navy-700); font-weight: 600; cursor: pointer; }
.jn__file-btn .icon { width: 18px; height: 18px; }
.jn__file-input:focus-visible + .jn__file-btn { outline: 3px solid var(--kr-amber-500); outline-offset: 3px; }
.jn__file-name { min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; color: var(--fg-on-dark-2); }
.jn__file.is-set .jn__file-name { color: #fff; font-weight: 500; }
.jn__file.is-invalid .jn__drop { border-color: var(--kr-rust-300); }
@media (hover: hover) { .jn__file-btn:hover { background: #F7B545; } }
.jn__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.jn__mock { font-size: .8125rem; color: var(--fg-on-dark-2); }

@media (min-width: 720px) { .jn__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  /* photo column starts with the title and stays in view while the form is read (sticky): no empty half */
  .jn__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 5vw, 80px); align-items: start; }
  .jn__visual { max-width: none; position: sticky; top: 104px; margin-top: 36px; }
  .jn__photo { aspect-ratio: 5 / 7; }
  .jn__photo img { object-position: 50% 26%; }
}

/* =============================================================
   Nuevo orden: Profesores → Convocatoria → «Quien enseña también crece» → Manifiesto → FAQ
   ============================================================= */
.teachers { position: relative; z-index: 4; margin-top: calc(var(--curve) * -1); border-radius: var(--curve) var(--curve) 0 0; padding-bottom: calc(var(--section-y) + var(--curve)); }
.manifesto { margin-top: calc(var(--curve) * -1); border-radius: var(--curve) var(--curve) 0 0; z-index: 5; padding-bottom: calc(var(--section-y) * 1.1 + var(--curve)); }
.faq.sheet { z-index: 6; }

/* Profesores: once the curve is drawn, its nodes breathe very slowly (life without distraction) */
@media (prefers-reduced-motion: no-preference) {
  .tp__curve circle { transform-box: fill-box; transform-origin: center; }
  .js .tp.is-in .tp__curve circle { animation: tpNode 6s ease-in-out 3.2s infinite; }
  .js .tp.is-in .tp__curve circle:nth-child(2) { animation-delay: 4.4s; }
  .js .tp.is-in .tp__curve circle:nth-child(3) { animation-delay: 5.6s; }
  .js .tp.is-in .tp__curve circle:nth-child(4) { animation-delay: 6.8s; }
  @keyframes tpNode { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.35); } }
}

/* =============================================================
   BLOG / RECURSOS — editorial library (cards + social from kresko-tools/content/biblioteca.json)
   ============================================================= */
.lib-hero { padding-bottom: calc(clamp(56px, 8vw, 104px) + var(--curve)); }
.lib-hero h1 { max-width: 16ch; }
.lib-search { position: relative; width: 100%; max-width: 760px; margin-top: clamp(28px, 4vw, 40px); }
.no-js .lib-search { display: none; }
.lib-search__input {
  width: 100%; height: 64px; padding: 0 60px 0 58px; border: 1.5px solid transparent; border-radius: var(--radius-pill);
  background: var(--kr-cream-50); color: var(--kr-navy-700); font: inherit; font-size: 1.0625rem;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(19, 32, 60, .06);
  -webkit-appearance: none; appearance: none;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lib-search__input::placeholder { color: var(--fg-3); opacity: 1; }
.lib-search__input::-webkit-search-cancel-button, .lib-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.lib-search__input:focus-visible { outline: 3px solid var(--kr-amber-500); outline-offset: 3px; border-radius: var(--radius-pill); }
.lib-search__icon { position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; color: var(--kr-navy-500); pointer-events: none; }
.lib-search__clear { position: absolute; right: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--kr-navy-500); cursor: pointer; }
.lib-search__clear[hidden] { display: none; }
.lib-search__clear .icon { width: 18px; height: 18px; }
.lib-search__clear:focus-visible { outline-offset: 0; border-radius: 50%; }
@media (hover: hover) { .lib-search__clear:hover { background: var(--kr-cream-200); } }
.page-hero .lib-status { margin-top: 14px; font-size: .9375rem; }

.lib.sheet { z-index: 3; background: var(--kr-cream-100); padding-block: clamp(48px, 6vw, 80px) calc(clamp(72px, 9vw, 120px) + var(--curve)); }
.lib__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.lib__head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.lib__count { color: var(--fg-3); font-size: .875rem; letter-spacing: .06em; }

/* tones: each card = one KRESKO ground; the art reads these variables.
   Scoped to .lib-card: .t-amber / .t-cream are also the hero & cierre science-layer inks (global names). */
.lib-card { --bg: var(--kr-navy-700); --bgs: var(--kr-navy-700); --ink: var(--kr-cream-100); --ink2: rgba(255, 245, 229, .8);
  --acc: var(--kr-amber-500); --line: rgba(255, 245, 229, .5); --grid: rgba(255, 245, 229, .07); --fill: var(--kr-amber-500); --on-fill: var(--kr-navy-700); }
.lib-card.t-amber { --bg: linear-gradient(160deg, #F7B02A, var(--kr-amber-500) 55%, #E89503); --bgs: #EE9A04; --ink: var(--kr-navy-700); --ink2: rgba(19, 32, 60, .82);
  --acc: var(--kr-burgundy-700); --line: rgba(19, 32, 60, .42); --grid: rgba(19, 32, 60, .08); --fill: var(--kr-burgundy-700); --on-fill: var(--kr-cream-100); }
.lib-card.t-burgundy { --bg: linear-gradient(165deg, var(--kr-burgundy-500), var(--kr-burgundy-700) 45%, var(--kr-burgundy-900)); --bgs: #4A0819; }
.lib-card.t-cream { --bg: var(--kr-cream-200); --bgs: var(--kr-cream-200); --ink: var(--kr-navy-700); --ink2: rgba(19, 32, 60, .78);
  --acc: var(--kr-rust-500); --line: rgba(19, 32, 60, .36); --grid: rgba(19, 32, 60, .1); --fill: var(--kr-rust-500); --on-fill: var(--kr-cream-100); --margin: var(--kr-burgundy-700); }
.lib-card.t-terracotta { --bg: linear-gradient(160deg, #C9492B, var(--kr-rust-500) 50%, var(--kr-rust-700)); --bgs: #AE3B21; --grid: rgba(255, 245, 229, .09); --line: rgba(255, 245, 229, .55); }
.lib-card.t-dusk { --bg: linear-gradient(120deg, var(--kr-navy-700) 20%, #2B1433 62%, var(--kr-burgundy-700)); --bgs: #221430; }

.lib-grid { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
.lib-card { position: relative; isolation: isolate; overflow: hidden; min-height: 300px; border-radius: var(--radius-lg); background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 0 rgba(19, 32, 60, .05), 0 26px 46px -30px rgba(19, 32, 60, .6); }
.t-cream.lib-card { box-shadow: inset 0 0 0 1px rgba(19, 32, 60, .08), 0 26px 46px -32px rgba(19, 32, 60, .45); }
.lib-card[hidden] { display: none; }
.lib-card__in { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.lib-card__art, .lib-card__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.lib-card__img { object-fit: cover; }
.lib-card__svg { display: block; width: 100%; height: 100%; }
.lib-card__body { position: relative; padding: clamp(56px, 6vw, 72px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  background: linear-gradient(to top, var(--bgs) 58%, transparent); }
.lib-card__meta { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.lib-card__num { font-weight: 600; color: var(--ink); letter-spacing: .08em; }
.lib-card__num::after { content: ""; display: inline-block; width: 18px; height: 1px; margin-left: 10px; vertical-align: middle; background: currentColor; opacity: .6; }
.lib-card__title { margin-top: 10px; max-width: 24ch; color: var(--ink); font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); font-weight: 600; line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }
.lib-card--lead .lib-card__title { max-width: 19ch; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); line-height: 1.15; letter-spacing: -.02em; }
.lib-card__state { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 16px; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); font-size: .8125rem; }
.lib-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.t-terracotta .lib-card__dot { background: var(--kr-amber-300); }
.lib-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 500; }
.lib-card__go .icon { width: 18px; height: 18px; }
/* published: the whole card is the link (stretched), focus ring on the card */
.lib-card__link { color: inherit; }
.lib-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lib-card__link:focus-visible { outline: none; }
.lib-card:has(.lib-card__link:focus-visible) { outline: 3px solid var(--kr-navy-700); outline-offset: 4px; }

/* art strokes (colours from the tone) */
.la-grid { fill: none; stroke: var(--grid); stroke-width: 1; }
.la-soft { fill: none; stroke: var(--line); stroke-opacity: .7; stroke-width: 1.5; stroke-linecap: round; }
.la-line { fill: none; stroke: var(--line); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.la-dash { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 8; stroke-linecap: round; }
.la-dash-acc { fill: none; stroke: var(--acc); stroke-width: 2.4; stroke-dasharray: 5 9; stroke-linecap: round; }
.la-acc { fill: none; stroke: var(--acc); stroke-width: 3.4; stroke-linecap: round; }
.la-dot { fill: var(--acc); }
.la-node { fill: var(--ink); }
.la-ring { fill: var(--bgs); stroke: var(--ink); stroke-width: 2; }
.la-core, .la-fill { fill: var(--fill); }
.la-tile { fill: none; stroke: var(--line); stroke-width: 1.6; }
.la-margin { fill: none; stroke: var(--margin, var(--acc)); stroke-opacity: .45; stroke-width: 1.5; }
.la-hands { fill: none; stroke: var(--kr-cream-100); stroke-width: 5; stroke-linecap: round; }
.la-hand { fill: var(--ink); fill-opacity: .62; font-family: var(--font-hand); font-weight: 500; }
.la-faint { fill-opacity: .22; }
.la-mid { fill-opacity: .78; }
.la-on-fill { fill: var(--on-fill); fill-opacity: 1; }
.t-terracotta .la-acc, .t-terracotta .la-dot { stroke: var(--kr-amber-300); }
.t-terracotta .la-dot { fill: var(--kr-amber-300); }

.lib-empty { margin-top: 16px; padding: 28px; border: 1.5px dashed var(--border-2); border-radius: var(--radius-lg); color: var(--fg-2); }
.lib-empty[hidden] { display: none; }
.lib-empty__title { color: var(--fg-1); font-size: var(--fs-h3); font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }

/* mobile: one column, hierarchy by height */
.lib-card--lead { min-height: 420px; }
.lib-card--wide:not(.lib-card--lead) { min-height: 280px; }
.lib-card--tall { min-height: 340px; }

/* tablet: 6-col mosaic — lead full width, tall cards in pairs, closing wide card */
@media (min-width: 720px) {
  .lib-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 118px; grid-auto-flow: row dense; gap: 20px; }
  .lib-card { min-height: 0; }
  .lib-card--wide { grid-column: span 6; grid-row: span 2; }
  .lib-card--lead { grid-row: span 3; }
  .lib-card--tall { grid-column: span 3; grid-row: span 3; }
  .lib-card--wide .lib-card__body { max-width: 64%; padding-top: clamp(20px, 2.2vw, 28px); background: none; }
  .lib-card--wide .lib-card__svg { margin-left: auto; width: auto; aspect-ratio: 1; }
}
/* desktop: 12-col editorial mosaic — wide/tall interlock (grid fills with no gaps) */
@media (min-width: 1080px) {
  .lib-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 128px; }
  .lib-card--wide { grid-column: span 6; grid-row: span 2; }
  .lib-card--tall { grid-column: span 3; grid-row: span 3; }
  .lib-card--wide .lib-card__body { max-width: 60%; }
}

/* ---- KRESKO en movimiento (social highlights) ---- */
.lib-social.sheet { z-index: 4; background: var(--kr-navy-700); padding-block: clamp(72px, 9vw, 120px); }
.lib-social__head { max-width: 40em; margin-bottom: clamp(32px, 4vw, 52px); }
.lib-social__head::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: 22px; border-radius: 2px; background: var(--kr-amber-500); }
.lib-social__head .eyebrow { display: block; margin-bottom: 14px; color: var(--kr-amber-300); }
.lib-social__head h2 { font-size: var(--fs-h2); max-width: 18ch; }
.lib-social__head p { margin-top: 16px; color: var(--fg-on-dark-2); font-size: var(--fs-body-lg); font-weight: 300; }

.soc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .soc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .soc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soc { --sc: var(--kr-rust-500); --sc-ink: var(--kr-cream-100);
  display: flex; padding: 20px; border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg); background: rgba(255, 245, 229, .04); }
.soc--facebook { --sc: var(--kr-amber-500); --sc-ink: var(--kr-navy-700); }
.soc--linkedin { --sc: var(--kr-cream-100); --sc-ink: var(--kr-navy-700); }
.soc--youtube { --sc: var(--kr-burgundy-500); --sc-ink: var(--kr-cream-100); }
.soc__in { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.soc__head { display: flex; align-items: center; gap: 12px; }
.soc__badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--sc); color: var(--sc-ink); }
.soc__badge .icon { width: 20px; height: 20px; }
.soc__name { font-size: 1.125rem; font-weight: 600; }
.soc__slot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: rgba(255, 245, 229, .03); }
.soc__slot img { width: 100%; height: 100%; object-fit: cover; }
.soc__slot--empty { border: 1px dashed rgba(255, 245, 229, .22); }
.soc__ghost { display: block; width: 100%; height: 100%; }
.sg-grid { fill: none; stroke: rgba(255, 245, 229, .06); stroke-width: 1; }
.sg-arch { fill: none; stroke: var(--sc); stroke-opacity: .55; stroke-width: 2; }
.sg-curve { fill: none; stroke: var(--kr-amber-500); stroke-opacity: .75; stroke-width: 2; stroke-linecap: round; }
.sg-dot { fill: var(--kr-amber-500); }
.soc__state, .soc__caption { color: var(--fg-on-dark-2); font-size: .9375rem; }
.soc__state strong { color: #fff; font-weight: 500; }
.soc__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; color: #fff; font-weight: 500; text-underline-offset: 5px; }
.soc__link .icon { width: 16px; height: 16px; }
@media (hover: hover) { .soc__link:hover { text-decoration: underline; } }
/* tall cards: art lives in the upper part so the text block never sits on the figure */
.lib-card--tall .lib-card__art { bottom: auto; height: 64%; }
.lib-card__body { background: linear-gradient(to top, var(--bgs) 70%, transparent); }
@media (min-width: 720px) {
  .lib-card--lead .lib-card__title { max-width: none; font-size: clamp(1.5rem, 1.1rem + .9vw, 1.875rem); }
}
@media (min-width: 1080px) { .lib-card--wide .lib-card__body { max-width: 62%; } }
.lib-card__num { flex: none; white-space: nowrap; }
@media (max-width: 599px) {
  .lib-search__input { height: 58px; padding: 0 46px 0 50px; font-size: 1rem; }
  .lib-search__icon { left: 18px; width: 20px; height: 20px; }
  .lib-search__clear { right: 6px; }
  .soc__slot { aspect-ratio: 16 / 9; }
}

/* ---- Card lift (articles + social): Dock-like response on the hovered card only; transform = no layout change.
   Pointer: hover. Keyboard: when the card holds a focused link (social today; each article once published).
   Touch: untouched (hover-only rules). Reduced motion: no scale/shift, only the deeper shadow. ---- */
.lib-card, .soc { --lift-ease: cubic-bezier(.22, .61, .36, 1);
  transition: transform 420ms var(--lift-ease), box-shadow 420ms var(--lift-ease), border-color 420ms var(--lift-ease); }
@media (hover: hover) and (pointer: fine) {
  .lib-card:hover, .soc:hover { z-index: 2; transform: translateY(-5px) scale(1.045); }
  .lib-card:hover { box-shadow: 0 1px 0 rgba(19, 32, 60, .05), 0 40px 64px -30px rgba(19, 32, 60, .7); }
  .t-cream.lib-card:hover { box-shadow: inset 0 0 0 1px rgba(19, 32, 60, .08), 0 40px 64px -30px rgba(19, 32, 60, .55); }
  .soc:hover { border-color: rgba(255, 245, 229, .38); box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .75); }
}
.lib-card:has(:focus-visible), .soc:has(:focus-visible) { z-index: 2; transform: translateY(-5px) scale(1.045); }
.lib-card:has(:focus-visible) { box-shadow: 0 1px 0 rgba(19, 32, 60, .05), 0 40px 64px -30px rgba(19, 32, 60, .7); }
.soc:has(:focus-visible) { border-color: rgba(255, 245, 229, .38); box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .75); }
@media (prefers-reduced-motion: reduce) {
  .lib-card, .soc { transition: box-shadow 200ms linear, border-color 200ms linear; }
  .lib-card:hover, .soc:hover, .lib-card:has(:focus-visible), .soc:has(:focus-visible) { transform: none; }
}

/* Profesores → next step (in-flow text link, no new component) */
.tp__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px;
  margin-top: clamp(40px, 5vw, 64px); color: var(--fg-2); text-align: center; }
@media (max-width: 539px) { .tp__next { flex-direction: column; } }

/* =============================================================
   LO QUE VIENE — photo + glass (penativo.png → pensativo-*.webp). Person / curiosity; no chart here.
   ============================================================= */
.tension { padding-block: calc(clamp(56px, 7vw, 104px) + 12px) clamp(56px, 7vw, 104px); background: var(--kr-cream-100); }
.tension__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.tension__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 42%; }
.tension__ambient { display: none; }
.tension__stage { position: relative; }

/* glass: stable panel; blur only under the copy (stepped backdrop layers) so the student stays sharp */
.tension__glass { position: relative; isolation: isolate; border-radius: 36px; padding: clamp(40px, 4.6vw, 68px) clamp(28px, 4.6vw, 68px); }
.tension__glass::before, .tension__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* frosted zone = copy area only, in three steps (12 → 5 → 2 px) so it fades before the student's hair.
   Geometric limits (Chrome ignores masks on backdrop-filter); the photo is already bokeh where the steps end. */
.tension__glass { --frost: 30%; }
.tension__glass::before, .tension__frost { right: auto; border-radius: 36px 0 0 36px; }
.tension__glass::before { z-index: -2; width: var(--frost);
  -webkit-backdrop-filter: blur(12px) saturate(1.08); backdrop-filter: blur(12px) saturate(1.08); }
.tension__frost { position: absolute; top: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none; }
.tension__frost.tf2 { width: calc(var(--frost) + 5%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.tension__frost.tf3 { width: calc(var(--frost) + 10%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tension__glass::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 38%),
    linear-gradient(90deg, rgba(255, 251, 244, .7) 0%, rgba(255, 251, 244, .66) 36%, rgba(255, 251, 244, .5) 44%, rgba(255, 251, 244, .16) 60%, rgba(255, 255, 255, .07) 100%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .18), 0 34px 70px -40px rgba(74, 44, 16, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tension__glass::after { background: linear-gradient(90deg, rgba(255, 251, 244, .9) 0%, rgba(255, 251, 244, .82) 42%, rgba(255, 251, 244, .2) 62%, rgba(255, 255, 255, .06) 100%); }
}
.tension__copy { position: relative; max-width: 50%; }
.tension__copy h2 { color: var(--kr-navy-700); }

/* ambient maths over the student side: faint, never on the face; tiny scroll parallax (JS sets --tn-p) */
.tension__orns { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.js .tension__orns.reveal { transform: none; transition-duration: 1.4s; }
.tn-orn { position: absolute; overflow: visible; fill: none; stroke: var(--kr-amber-700); stroke-opacity: .5; stroke-width: 1.4; stroke-linejoin: round;
  transform: translate3d(0, calc(var(--tn-p, 0) * var(--tn-d, 12px)), 0); will-change: transform; }
.tn-orn text { fill: #9A5A12; fill-opacity: .62; stroke: none; font-family: var(--font-hand); font-size: 40px; }
.tn-orn .tn-sm { font-size: 26px; }
.tn-orn .tn-hidden { stroke-dasharray: 3 6; stroke-opacity: .7; }
.tn-orn--fx { left: 55%; top: -3%; width: 21%; --tn-d: -10px; }
.tn-orn--pyr { left: 44.5%; top: 16%; width: 8.5%; --tn-d: 16px; }
.tn-orn--lim { left: 85%; top: 50%; width: 9.5%; --tn-d: -14px; }

@media (max-width: 1023px) {
  .tension__photo { object-position: 70% 40%; }
  .tension__copy { max-width: 56%; }
  .tension__glass { --frost: 42%; }
  .tension__glass::after { background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 38%),
    linear-gradient(90deg, rgba(255, 251, 244, .76) 0%, rgba(255, 251, 244, .74) 52%, rgba(255, 251, 244, .46) 60%, rgba(255, 251, 244, .14) 72%, rgba(255, 255, 255, .07) 100%); }
  .tn-orn--pyr, .tn-orn--lim { display: none; }
  .tn-orn--fx { left: 60%; top: -2%; width: 30%; }
}
/* phones: the same piece, recomposed — face in its own band on top, glass below the chin over the desk/bokeh */
@media (max-width: 719px) {
  .tension { padding-block: 0 clamp(40px, 10vw, 56px); }
  .tension__ambient { display: block; position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none;
    object-fit: cover; object-position: 62% 78%; filter: blur(26px) saturate(1.08); opacity: .95; }
  .tension__photo { inset: 0 0 auto; height: min(118vw, 470px); object-position: 78% 38%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .tension__stage { padding-top: min(80vw, 318px); }
  .tension__glass { border-radius: 28px; padding: 32px 24px 34px; }
  .tension__glass::before { width: auto; right: 0; border-radius: inherit; }
  .tension__frost { display: none; }
  .tension__glass::after { background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(255, 251, 244, .62) 0%, rgba(255, 251, 244, .74) 30%, rgba(255, 251, 244, .78) 100%); }
  .tension__copy { max-width: none; }
  .tn-orn--fx { left: auto; right: 2%; top: 5%; width: 44%; }
  .tn-orn--fx text { font-size: 36px; }
}

/* =============================================================
   PROPÓSITO — the site's main chart (render.py → _purpose_plot). Runs once when the chart enters the viewport
   (.purpose.is-drawn, set by main.js), then rests as a static composition. Hierarchy:
   grid + axes → curve → three milestones → points / projections → secondary details.
   ============================================================= */
.purpose__viz { display: block; width: 100%; height: auto; overflow: visible; }
.purpose__viz--narrow { display: none; }
@media (max-width: 719px) { .purpose__viz--wide { display: none; } .purpose__viz--narrow { display: block; } }

.pv-grid-minor { stroke: rgba(255, 245, 229, .045); stroke-width: 1; }
.pv-grid-major { stroke: rgba(255, 245, 229, .085); stroke-width: 1; }
.pv-axis { fill: none; stroke: rgba(255, 245, 229, .62); stroke-width: 1.6; stroke-linecap: round; }
.pv-head { fill: rgba(255, 245, 229, .62); }
.pv-tick { stroke: rgba(255, 245, 229, .42); stroke-width: 1.2; }
.pv-label { fill: rgba(255, 245, 229, .66); font-family: var(--font-hand); font-size: 26px; }
.pv-label--o { font-size: 22px; fill: rgba(255, 245, 229, .45); }
.pv-fx { fill: rgba(242, 159, 5, .85); }
.pv-area-a { stop-color: #F29F05; stop-opacity: .1; }
.pv-area-b { stop-color: #F29F05; stop-opacity: 0; }
.pv-curve { fill: none; stroke: var(--kr-amber-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-dot { fill: rgba(255, 245, 229, .72); }
.pv-dot--a { fill: var(--kr-amber-500); }
.pv-proj { fill: none; stroke: rgba(255, 245, 229, .3); stroke-width: 1.2; stroke-dasharray: 3 6; }
.pv-sub { fill: rgba(255, 245, 229, .5); font-family: var(--font-hand); font-size: 22px; }
.pv-sub--d { font-family: var(--font-body); font-size: 15px; font-style: italic; }
.pv-sub tspan { font-size: .7em; }
.pv-delta { fill: none; stroke: rgba(255, 245, 229, .32); stroke-width: 1.2; stroke-dasharray: 2 5; }
.pv-halo { fill: rgba(126, 26, 51, .55); }
.pv-ring { fill: #0A1022; stroke: var(--kr-amber-500); stroke-width: 2; }
.pv-core { fill: var(--kr-amber-500); }
.pv-word { fill: #fff; font-family: var(--font-hand); font-size: 34px; }
.purpose__viz--narrow .pv-word { font-size: 38px; }
.purpose__viz--narrow .pv-label { font-size: 28px; }
.purpose__viz--narrow .pv-sub { font-size: 24px; }

/* entrance: initial state only when JS runs and motion is allowed; otherwise the final composition shows directly */
@media (prefers-reduced-motion: no-preference) {
  .js .purpose:not(.is-drawn) .pv-grid, .js .purpose:not(.is-drawn) .pv-tick, .js .purpose:not(.is-drawn) .pv-label,
  .js .purpose:not(.is-drawn) .pv-area, .js .purpose:not(.is-drawn) .pv-proj-g, .js .purpose:not(.is-drawn) .pv-vec-g { opacity: 0; }
  .js .purpose:not(.is-drawn) .pv-axis, .js .purpose:not(.is-drawn) .pv-curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .purpose:not(.is-drawn) .pv-dot { opacity: 0; transform: scale(.3); }
  .js .purpose:not(.is-drawn) .pv-node { opacity: 0; }
  .js .purpose:not(.is-drawn) .pv-node circle { transform: scale(.4); }
  .js .purpose:not(.is-drawn) .pv-head { opacity: 0; }

  .js .purpose .pv-grid { transition: opacity 1s ease-out; }
  .js .purpose .pv-axis { stroke-dasharray: 1; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1) .3s; }
  .js .purpose .pv-head { transition: opacity .4s ease-out 1.1s; }
  .js .purpose .pv-tick, .js .purpose .pv-label { transition: opacity .7s ease-out .9s; }
  .js .purpose .pv-curve { stroke-dasharray: 1; transition: stroke-dashoffset 2.6s ease 1.1s; }
  .js .purpose .pv-area { transition: opacity 1.2s ease-out 3.2s; }
  .js .purpose .pv-dot { transform-box: fill-box; transform-origin: center; transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .js .purpose .pv-node { transition: opacity .7s ease-out; }
  .js .purpose .pv-node circle { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.2, .7, .2, 1.15); transition-delay: inherit; }
  .js .purpose .pv-proj-g { transition: opacity .9s ease-out 3.9s; }
  .js .purpose .pv-vec-g { transition: opacity 1.1s ease-out 4.4s; }
  .js .purpose .pw { transition: color .9s var(--ease-out); }
}
.pv-dot.s0 { transition-delay: 1.2s; }  .pv-dot.s1 { transition-delay: 1.33s; } .pv-dot.s2 { transition-delay: 1.46s; } .pv-dot.s3 { transition-delay: 1.59s; }
.pv-dot.s4 { transition-delay: 1.72s; } .pv-dot.s5 { transition-delay: 1.85s; } .pv-dot.s6 { transition-delay: 1.98s; } .pv-dot.s7 { transition-delay: 2.11s; }
.pv-dot.s8 { transition-delay: 2.24s; } .pv-dot.s9 { transition-delay: 2.37s; } .pv-dot.s10 { transition-delay: 2.5s; } .pv-dot.s11 { transition-delay: 2.63s; }
.pv-dot.s12 { transition-delay: 2.76s; } .pv-dot.s13 { transition-delay: 2.89s; } .pv-dot.s14 { transition-delay: 3.02s; } .pv-dot.s15 { transition-delay: 3.15s; }
.pv-dot.s16 { transition-delay: 3.28s; } .pv-dot.s17 { transition-delay: 3.41s; } .pv-dot.s18 { transition-delay: 3.54s; } .pv-dot.s19 { transition-delay: 3.67s; }
/* milestones and the three words of the quote land together */
.pv-node.m1, .purpose.is-drawn .pw1 { transition-delay: 1.55s; }
.pv-node.m2, .purpose.is-drawn .pw2 { transition-delay: 2.35s; }
.pv-node.m3, .purpose.is-drawn .pw3 { transition-delay: 3.3s; }
.purpose.is-drawn .pw, .no-js .purpose .pw { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .purpose .pw { color: var(--accent); } }

/* ---- Lo que viene · desktop pass 2 (≥1024): match the reference — photo at its own proportion, a shorter,
   clearer glass with generous photo above/below; contrast handled locally behind the copy only ---- */
@media (min-width: 1024px) {
  .tension { min-height: 45.7vw; padding-block: max(80px, 5.6vw) 96px; }     /* 45.7vw = photo ratio 1855/848 → no crop */
  .tension__photo { object-position: 64% 42%; }
  .tension__glass { margin-inline: calc(var(--gutter) * -.4); padding: 42px 60px 44px; border-radius: 32px; }
  .tension__glass::before, .tension__frost { border-radius: 32px 0 0 32px; }
  .tension__glass::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%),
      linear-gradient(90deg, rgba(255, 251, 244, .34) 0%, rgba(255, 251, 244, .26) 34%, rgba(255, 251, 244, .1) 52%, rgba(255, 255, 255, .04) 100%);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 26px 60px -44px rgba(74, 44, 16, .4);
  }
  /* local legibility: a soft light only where the copy sits (no panel-wide veil) */
  .tension__copy::before { content: ""; position: absolute; z-index: -1; inset: -48px -80px -48px -72px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 251, 244, .62), rgba(255, 251, 244, .42) 55%, rgba(255, 251, 244, 0)); }
  .tension__copy { max-width: 50%; }
  .tension__copy .eyebrow { margin-bottom: 12px; }
  .tension h2 { font-size: clamp(2.25rem, 1.35rem + 1.5vw, 2.75rem); line-height: 1.08; }
  .tension__list { margin: 22px 0 20px; gap: 9px; }
  .tension__list li, .tension__turn { font-size: 1.0625rem; }
  .tension__turn { max-width: none; }
  .tension__quiz { margin-top: 16px; }
  /* ornaments placed as in the reference, drawn "on" the glass */
  .tn-orn--fx { left: 56.5%; top: -9%; width: 17%; }
  .tn-orn--pyr { left: 44%; top: 12%; width: 9.5%; }
  .tn-orn--lim { left: 87%; top: 55%; width: 10%; }
  .tn-orn { stroke-opacity: .62; }
  .tn-orn text { fill-opacity: .78; }
}

/* ---- Lo que viene · desktop pass 3: the reference's light graph + physical glass (rim light, refraction, depth) ---- */
.tn-orn--graph, .tension__rim, .tension__rim2 { display: none; }
@media (min-width: 1024px) {
  /* atmospheric cartesian sketch, top-right behind the student: the main ornament, still light and label-free */
  .tn-orn--graph { display: block; left: 76%; top: -6%; width: 20%; --tn-d: -8px; stroke: none; }
  .tg-grid { fill: none; stroke: #6B5A48; stroke-opacity: .14; stroke-width: 1; }
  .tg-axis { fill: none; stroke: #3E4A63; stroke-opacity: .62; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .tn-orn .tg-lab { fill: #3E4A63; fill-opacity: .6; font-family: var(--font-hand); font-size: 30px; }
  .tg-curve { fill: none; stroke: var(--kr-amber-500); stroke-opacity: .9; stroke-width: 2.6; stroke-linecap: round; }
  .tg-proj { fill: none; stroke: #6B4A22; stroke-opacity: .42; stroke-width: 1.1; stroke-dasharray: 3 5; }
  .tg-dot { fill: var(--kr-amber-500); stroke: rgba(255, 251, 244, .9); stroke-width: 1.6; }
  .tg-dot--b { fill: var(--kr-burgundy-700); }
  .tension__orns .tn-orn:not(.tn-orn--graph) { stroke-opacity: .55; }
  .tension__orns .tn-orn:not(.tn-orn--graph) text { fill-opacity: .74; }

  /* glass body: faint haze that varies by zone (never over the face), corner light, a slow diagonal sheen */
  .tension__glass::after {
    border: 1px solid rgba(255, 255, 255, .16);
    background:
      radial-gradient(120px 90px at 0 0, rgba(255, 255, 255, .34), transparent 70%),
      radial-gradient(160px 110px at 100% 0, rgba(255, 255, 255, .26), transparent 70%),
      radial-gradient(130px 90px at 0 100%, rgba(255, 255, 255, .14), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 26%),
      linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, 0) 58%),
      radial-gradient(38% 70% at 18% 44%, rgba(255, 240, 214, .3), transparent 72%),
      linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 3%),
      radial-gradient(30% 40% at 86% 88%, rgba(255, 251, 244, .1), transparent 72%),
      linear-gradient(90deg, rgba(255, 242, 222, .4) 0%, rgba(255, 244, 226, .3) 34%, rgba(255, 246, 232, .1) 52%, rgba(255, 255, 255, .02) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 3px 8px -2px rgba(255, 255, 255, .5), inset 0 0 18px rgba(255, 255, 255, .22),
      inset 0 -18px 30px -24px rgba(255, 255, 255, .25),
      0 0 0 1px rgba(255, 255, 255, .1), 0 0 16px rgba(255, 250, 240, .22),
      0 50px 90px -50px rgba(70, 40, 12, .38), 0 2px 8px rgba(70, 40, 12, .05);
  }
  /* rim light: a gradient ring — brightest along the top edge and corners, thinning down the sides */
  .tension__rim { display: block; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; filter: blur(.4px);
    background:
      radial-gradient(180px 110px at 0 0, rgba(255, 255, 255, 1), transparent 72%),
      radial-gradient(240px 130px at 100% 0, rgba(255, 255, 255, .95), transparent 72%),
      radial-gradient(160px 110px at 0 100%, rgba(255, 255, 255, .55), transparent 72%),
      radial-gradient(180px 110px at 100% 100%, rgba(255, 255, 255, .5), transparent 72%),
      linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .28) 62%, rgba(255, 255, 255, .55) 86%, rgba(255, 255, 255, .3)),
      linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, .34));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  /* inner line a few px in: thickness */
  .tension__rim2 { display: block; position: absolute; inset: 4px; border-radius: 28px; pointer-events: none;
    border: 1px solid transparent; border-top-color: rgba(255, 255, 255, .22); border-left-color: rgba(255, 255, 255, .1); border-right-color: rgba(255, 255, 255, .08); }
}
/* graph traces itself once on entrance (with the other ornaments); reduced motion / no JS → final state */
@media (prefers-reduced-motion: no-preference) {
  .js .tension__orns:not(.is-revealed) .tg-curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .tension__orns .tg-curve { stroke-dasharray: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .5s; }
  .js .tension__orns:not(.is-revealed) .tg-dot { opacity: 0; }
  .js .tension__orns .tg-dot { transition: opacity .6s ease-out 1.6s; }
}
@media (min-width: 1024px) {
  /* the glass lifts the photo a little where the copy sits: brighter, warmer — never over the face */
  .tension__glass::before { -webkit-backdrop-filter: blur(12px) saturate(1.18) brightness(1.06); backdrop-filter: blur(12px) saturate(1.18) brightness(1.06); }
}

/* Convocatoria form: explicitly inactive until a reviewed backend exists (disabled fieldset, no <form>) */
.jn__fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.jn__fieldset:disabled .field__input, .jn__fieldset:disabled .check__input { cursor: not-allowed; opacity: .6; }
.jn__fieldset:disabled .jn__file-btn, .jn__fieldset:disabled .btn { cursor: not-allowed; opacity: .5; box-shadow: none; }
@media (hover: hover) { .jn__fieldset:disabled .jn__file-btn:hover { background: var(--kr-amber-500); } }
.jn__fieldset:disabled .btn { pointer-events: none; }   /* no hover sheen / press on an inactive action */

/* =============================================================
   CÓMO EMPEZÓ — science in the background. Same vocabulary as the hero / cierre layers (.z svg): t-* inks,
   1.6 stroke with soft glow, hand-written formulas; here static, drawn once. Depth: circle (front) · wave (mid) ·
   atom (back, soft blur) · formula (far, blurred). Never behind the body copy.
   ============================================================= */
.story-sci { display: none; pointer-events: none; }
.ss { position: absolute; display: block; }
.ss svg { display: block; width: 100%; height: auto; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--glow)); }
.ss text { fill: var(--ink); stroke: none; font-family: var(--font-hand); font-size: 30px; }
.ss .fill { fill: var(--ink); stroke: none; }
.ss .ss-lab { font-size: 22px; } .ss .ss-xs { font-size: 15px; }
.ss .ss-dim { stroke-opacity: .5; }
.ss .ss-dash { stroke-opacity: .7; stroke-dasharray: 3 6; }
.ss .ss-acc { fill: #F7B545; stroke: none; filter: drop-shadow(0 0 6px rgba(242, 159, 5, .7)); }
.ss-circle { opacity: .56; }
.ss-wave { opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 62%, transparent); }
.ss-atom { opacity: .22; filter: blur(.6px); }
.ss-formula { opacity: .13; filter: blur(1.4px); }

/* desktop: the composition lives in the empty band above the body copy (bottom: 100% + 28px) */
@media (min-width: 960px) {
  .story__body { position: relative; }
  .story-sci--d { display: block; position: absolute; left: -84px; right: -40px; bottom: calc(100% + 28px); height: 300px; }
  .story-sci--d .ss-circle  { right: 7%;  top: -2%;  width: 34%; max-width: 236px; }
  .story-sci--d .ss-wave    { left: 6%;   top: 44%;  width: 64%; }
  .story-sci--d .ss-atom    { left: 14%;  top: -6%;  width: 15%; max-width: 104px; }
  .story-sci--d .ss-formula { left: 24%;  top: 70%;  width: 46%; }
}
/* tablet: two elements in the free space right of the question (unit circle + a faint atom) */
@media (min-width: 680px) and (max-width: 959px) {
  .story__question { position: relative; }
  .story-sci--s { display: block; position: absolute; left: calc(100% + 18px); bottom: -8px;
    width: min(200px, calc(100vw - 2 * var(--gutter) - 100% - 30px)); aspect-ratio: 200 / 150; }
  .story-sci--s .ss-circle { right: 0; top: 0; width: 64%; }
  .story-sci--s .ss-atom   { left: 0; bottom: 2%; width: 26%; }
}
/* phones: a single detail — a faint atom in the clean space right of «una pregunta.» (title always wraps ≤559px);
   560–679px has no clean space (single-line title) → nothing there */
@media (max-width: 559px) {
  .story__question { position: relative; }
  .story-sci--s { display: block; position: absolute; right: 2px; bottom: calc(100% + 8px); width: 44px; height: 44px; }
  .story-sci--s .ss-circle { display: none; }
  .story-sci--s .ss-atom { inset: 0; width: 100%; opacity: .34; filter: none; }
}

/* drawn once when in view (.story.is-sci); reduced motion / no JS → final state */
@media (prefers-reduced-motion: no-preference) {
  .js .story:not(.is-sci) .ss-circle path, .js .story:not(.is-sci) .ss-circle circle:not(.ss-acc),
  .js .story:not(.is-sci) .ss-wave path, .js .story:not(.is-sci) .ss-atom ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .story:not(.is-sci) .ss-circle .ss-dash { stroke-dasharray: 3 6; stroke-dashoffset: 0; opacity: 0; }
  .js .story:not(.is-sci) .ss text, .js .story:not(.is-sci) .ss-acc, .js .story:not(.is-sci) .ss-atom .fill { opacity: 0; }
  .js .story:not(.is-sci) .ss-formula { opacity: 0; }
  .js .story .ss-circle path, .js .story .ss-circle circle:not(.ss-acc) { transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1) .2s; }
  .js .story .ss-circle circle:not(.ss-acc) { transition-delay: .5s; }
  .js .story .ss-circle .ss-dash { transition: opacity 1s ease-out 1.9s; }
  .js .story .ss-wave path { transition: stroke-dashoffset 2.8s cubic-bezier(.4, 0, .2, 1) .6s; }
  .js .story .ss-atom ellipse { transition: stroke-dashoffset 2.4s ease-out 1s; }
  .js .story .ss text, .js .story .ss-atom .fill { transition: opacity 1.2s ease-out 2.3s; }
  .js .story .ss-formula { transition: opacity 2s ease-out 1.4s; }
  .js .story .ss-acc { transition: opacity .9s ease-out 3.2s; }
}