/* ==========================================================================
   Maia Soldano · "Brotar"
   Arriba de la tierra: papel cálido. Bajo tierra: capítulos oscuros.
   Todo movimiento vive dentro de (prefers-reduced-motion: no-preference);
   el estado final es siempre el CSS por defecto.
   ========================================================================== */

/* @fonts:start */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 320 400;
  font-display: swap;
  src: url(/assets/fonts/newsreader-roman.woff2?v=74e80b1acb) format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 370;
  font-display: swap;
  src: url(/assets/fonts/newsreader-italic.woff2?v=ce3ace17e2) format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans.woff2?v=a16bf41d15) format("woff2");
}


@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 95.32%;
  ascent-override: 77.11%;
  descent-override: 27.80%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Newsreader Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  size-adjust: 85.04%;
  ascent-override: 86.43%;
  descent-override: 31.16%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.86%;
  ascent-override: 94.30%;
  descent-override: 24.30%;
  line-gap-override: 0.00%;
}
/* @fonts:end */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  --paper: #F7F4EC; --linen: #EDE6DA; --sand: #E4DDD1; --white: #FCFCFC;
  --cream: #E8E0D4; --mist: #BCC8C9;
  --sage: #68906C;       /* solo trazos, íconos y decoración grande */
  --sage-ink: #3F6446;   /* texto verde sobre papel */
  --leaf: #A0BC78; --leaf-tint: #D6E3C1;
  --forest: #2B4536; --forest-deep: #1F3328;
  --night: #121A16; --night-2: #18241D; --night-3: #1F2D25;
  --ink: #1E2A22; --ink-soft: #4A564D; --cream-soft: #BDB9AC;
  --terra: #A84E1B; --terra-light: #EF8F61;

  --ff-serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --ff-sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --step--1: clamp(.83rem, .80rem + .15vw, .9rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + .9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 4.5rem);
  --step-5: clamp(2.7rem, 1.8rem + 4.6vw, 6.5rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(5rem, 3rem + 8vw, 10rem);
  --maxw: 1320px;
  --header-h: 72px;
  --bar-h: 64px;

  --r-card: 28px 28px 28px 6px;
  --r-pill: 999px 999px 999px 6px;
  --r-photo: 24px 24px 24px 6px;
  --sh-1: 0 1px 2px rgb(31 51 40 / .06), 0 10px 30px -12px rgb(31 51 40 / .18);
  --sh-lift: 0 40px 80px -40px rgb(31 51 40 / .35);
  --hair: 1px solid color-mix(in oklab, currentColor 22%, transparent);

  --t-micro: 180ms; --t-ui: 320ms; --t-reveal: 900ms; --t-grow: 1400ms;
  --ease-grow: cubic-bezier(.22, .61, .36, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
  --ease-unfurl: cubic-bezier(.34, 1.12, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-swoop: cubic-bezier(.7, 0, .15, 1);

  --focus: var(--terra);
  --accent-ink: var(--sage-ink);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
  scroll-padding-bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: normal; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
dl, dd { margin: 0; }
em { font-style: italic; }
strong { font-weight: 600; }
small { font-size: .82em; }
table { border-collapse: collapse; }
::selection { background: var(--leaf-tint); color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: .75rem 1.1rem; border-radius: var(--r-pill);
  background: var(--forest); color: var(--paper); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-ui) var(--ease-grow);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Temas por sección: el texto y los acentos cambian con el suelo */
[data-theme="dark"] {
  --focus: var(--terra-light);
  --accent-ink: var(--leaf);
  color: var(--cream);
}

/* ---------- Tipografía ---------- */
.kicker, .eyebrow, .tag, .footer__h, .status, .badge {
  font-family: var(--ff-sans);
  font-size: var(--step--1);
  font-weight: 560;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.1rem; color: var(--accent-ink); text-wrap: pretty;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--leaf); flex: none;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 0 1 5rem;
  background: color-mix(in oklab, currentColor 35%, transparent);
}
.h2, .h3, .statement, .hero__line, .quote p, .converge, .scard__title, .step__title, .numbers__n, .start-point__title, .cta-contact__title {
  font-family: var(--ff-serif);
  font-weight: 380;
  letter-spacing: -.012em;
}
.h2 { font-size: var(--step-4); line-height: 1.06; margin-bottom: 1.25rem; }
.h2--xl { font-size: var(--step-5); line-height: 1.02; }
.h3 { font-size: var(--step-2); line-height: 1.15; margin-bottom: .6rem; }
.h2 em, .h3 em, .statement em, .hero__line em, .converge em, .footer__claim em {
  font-style: italic; font-weight: 340; color: var(--accent-ink);
}
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
[data-theme="dark"] .lead { color: var(--cream-soft); }
.micro { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
[data-theme="dark"] .micro { color: var(--cream-soft); }
.helper { font-size: var(--step--1); color: var(--ink-soft); max-width: 52ch; }
[data-theme="dark"] .helper { color: var(--mist); }
.helper--js { display: none; }
.js .helper--js { display: block; }

.statement { font-size: var(--step-4); line-height: 1.08; max-width: 18ch; }
.statement--center { margin-inline: auto; text-align: center; }
.statement--xl { font-size: var(--step-5); line-height: 1.02; max-width: none; }

.text-link {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--sage-ink); font-weight: 560; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .1em;
  transition: background-size var(--t-ui) var(--ease-grow);
}
.text-link:hover { background-size: 40% 1px; }
[data-theme="dark"] .text-link, .text-link--light { color: var(--leaf); }
.link-btn {
  background: none; border: 0; padding: .5rem 0; min-height: 44px;
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .25em; font-size: var(--step--1);
}

/* ---------- Botones ---------- */
.btn {
  --bg: var(--forest); --fg: var(--paper); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .8em 1.45em;
  border: 1px solid var(--bd); border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-family: var(--ff-sans); font-weight: 580; font-size: var(--step-0); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-ui) var(--ease-grow), color var(--t-ui), border-color var(--t-ui), transform var(--t-ui) var(--ease-grow), box-shadow var(--t-ui), translate 600ms var(--ease-out);
}
.btn .icon { transition: transform var(--t-ui) var(--ease-grow); }
.btn:hover { --bg: var(--forest-deep); box-shadow: var(--sh-1); }
.btn:hover .icon, .btn:focus-visible .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled .icon { transform: none; }
.btn--lg { min-height: 56px; font-size: var(--step-1); padding: .8em 1.6em; }
.btn { max-width: 100%; }
@media (max-width: 380px) { .btn--lg { white-space: normal; text-wrap: balance; text-align: center; font-size: var(--step-0); padding-inline: 1.2em; } }
.btn--sm { min-height: 44px; padding: .6em 1.1em; font-size: var(--step--1); }
.btn--block { width: 100%; }
.btn--pill { min-height: 44px; padding: .55em 1.15em; font-size: var(--step--1); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: color-mix(in oklab, var(--ink) 28%, transparent); }
.btn--ghost:hover { --bg: color-mix(in oklab, var(--ink) 6%, transparent); box-shadow: none; }
.btn--ghost:hover .icon { transform: translateY(3px); }
.btn--soft { --bg: var(--linen); --fg: var(--ink); --bd: color-mix(in oklab, var(--ink) 14%, transparent); }
.btn--soft:hover { --bg: var(--sand); box-shadow: none; }
.btn--leaf { --bg: var(--leaf); --fg: var(--night); }
.btn--leaf:hover { --bg: var(--leaf-tint); }
[data-theme="dark"] .btn--primary { --bg: var(--leaf); --fg: var(--night); }
[data-theme="dark"] .btn--primary:hover { --bg: var(--leaf-tint); }
[data-theme="dark"] .btn--soft { --bg: var(--night-2); --fg: var(--cream); --bd: rgb(232 224 212 / .18); }
[data-theme="dark"] .btn--soft:hover { --bg: var(--night-3); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h);
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--ink);
  transition: transform var(--t-ui) var(--ease-grow), color var(--t-ui);
}
.site-header__bar::before {
  content: ""; position: absolute; inset: 8px calc(var(--gutter) - 12px); z-index: -1;
  border-radius: 999px;
  background: rgb(247 244 236 / .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(31 51 40 / .06), 0 8px 30px -18px rgb(31 51 40 / .35);
  opacity: 0; transform: scaleY(.9);
  transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-grow), background-color var(--t-ui);
}
.site-header.is-condensed .site-header__bar { transform: translateY(-4px); }
.site-header.is-condensed .site-header__bar::before { opacity: 1; transform: none; }
/* Sin JS no hay cambio de tema: el vidrio queda fijo para que el header se lea sobre el suelo oscuro */
html:not(.js) .site-header__bar::before { opacity: 1; transform: none; }
.site-header.on-dark .site-header__bar { color: var(--cream); --focus: var(--terra-light); }
.site-header.on-dark .site-header__bar::before { background: rgb(18 26 22 / .78); box-shadow: inset 0 0 0 1px rgb(232 224 212 / .08); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand__logo { width: 40px; height: 40px; }
.brand__name { font-family: var(--ff-serif); font-size: 1.28rem; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; }
.site-nav ul { display: flex; gap: .25rem; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  text-decoration: none; font-size: .95rem; font-weight: 500; border-radius: 999px; white-space: nowrap;
  transition: background-color var(--t-micro);
}
.site-nav a:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
.site-header.on-dark .btn--header { --bg: var(--leaf); --fg: var(--night); }

.menu-toggle {
  display: none; align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  background: color-mix(in oklab, currentColor 7%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
  font-size: .95rem; font-weight: 560;
}
.menu-toggle__lines { width: 18px; height: 10px; border-block: 1.5px solid currentColor; }

@media (max-width: 1099px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .btn--header { display: none; }
  .brand__name { font-size: 1.15rem; }
}

/* Menú móvil (popover nativo) */
.menu {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(100%, 440px); height: 100dvh; max-height: none;
  padding: 1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  border: 0; border-radius: 28px 0 0 6px;
  background: var(--paper); color: var(--ink);
  box-shadow: -30px 0 80px -30px rgb(18 26 22 / .45);
  flex-direction: column; gap: 1.5rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu:popover-open { display: flex; }
html:has(#menu:popover-open) { overflow: hidden; }
@media (max-width: 440px) { .menu { border-radius: 0; } }
.menu::backdrop { background: rgb(18 26 22 / .35); }
.menu__head { display: flex; justify-content: space-between; align-items: center; }
.menu__title { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; font-weight: 560; color: var(--sage-ink); }
.menu__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, currentColor 20%, transparent); background: transparent;
}
.menu__links { list-style: none; display: grid; gap: .1rem; }
.menu__links a {
  display: block; padding: .4rem 0; text-decoration: none;
  font-family: var(--ff-serif); font-size: var(--step-3); line-height: 1.15; font-weight: 360;
  border-bottom: var(--hair);
}
.menu__social { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.menu__social a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem;
  border-radius: 999px; border: var(--hair); text-decoration: none; font-size: .95rem;
}
@media (prefers-reduced-motion: no-preference) {
  .menu { transition: transform var(--t-ui) var(--ease-grow), opacity var(--t-ui), overlay var(--t-ui) allow-discrete, display var(--t-ui) allow-discrete; transform: translateX(24px); opacity: 0; }
  .menu:popover-open { transform: none; opacity: 1; }
  @starting-style { .menu:popover-open { transform: translateX(24px); opacity: 0; } }
}

/* ---------- Secciones: base ---------- */
main > section, main > .next-page, .site-footer { position: relative; isolation: isolate; }
main > section::before, main > .next-page::before, .site-footer::before {
  content: ""; position: absolute; inset: -1px 0 0; z-index: -1; pointer-events: none;
  background: url("/assets/img/textures/grain.png?v=314611a5b8") repeat;
  background-size: 128px;
  opacity: .045;
}
.chapter--night::before, .site-footer::before { opacity: .045; }
/* La franja de papel bajo el header también lleva grano */
main > .chapter.page-first::before { inset: calc(-1px - var(--header-h)) 0 0; }
.chapter--night { background: var(--night); padding-block: var(--section); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--wide { max-width: 58rem; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }

/* Hoja de papel sobre un capítulo oscuro */
.sheet {
  background: var(--paper);
  margin-top: -6vh;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 60px -30px rgb(0 0 0 / .5);
  padding-block: var(--section);
  z-index: 1;
}

/* ---------- 1 · Hero ---------- */
.hero {
  background: var(--paper);
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(5rem, 9vw, 8rem);
  overflow: clip;
}
.hero__light { display: none; }
@media (min-width: 1024px) {
  .hero__light {
    display: block; position: absolute; inset: 0 0 20% 35%; z-index: -1; pointer-events: none;
    background: image-set(url("/assets/img/textures/komorebi.avif?v=3aff0ec384") type("image/avif"), url("/assets/img/textures/komorebi.webp?v=f551d83ef7") type("image/webp")) right top / cover no-repeat;
    opacity: .1;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 30%);
    mask-image: linear-gradient(to right, transparent, #000 35%), linear-gradient(to top, transparent, #000 30%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}
.hero__glow { display: none; }
@media (min-width: 1024px) and (pointer: fine) {
  .hero__glow {
    display: block; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none;
    width: 900px; height: 900px; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 252 240 / .85), rgb(214 227 193 / .22) 55%, transparent);
    translate: calc(var(--mx, 70vw) - 450px) calc(var(--my, 30vh) - 450px);
    opacity: var(--glow, 0);
    transition: translate 900ms var(--ease-grow), opacity 900ms;
  }
  .hero__light { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -12px); transition: translate 1200ms var(--ease-grow); }
}
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.hero__visual { grid-column: 1 / span 5; grid-row: 1; position: relative; }
.hero__copy { grid-column: 7 / -1; grid-row: 1; container-type: inline-size; }
.hero__title { margin-bottom: 1.6rem; }
.kicker { display: block; color: var(--sage-ink); margin-bottom: 1.2rem; }
.hero__line { display: block; font-size: min(var(--step-5), 15.5cqi); line-height: .98; letter-spacing: -.022em; font-weight: 340; }
.line { display: block; overflow: visible clip; padding-bottom: .12em; margin-bottom: -.12em; }
.line__in { display: inline-block; }
.hero__lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 24em; margin-bottom: 2rem; }
.hero__lead strong { color: var(--ink); font-weight: 560; display: block; margin-bottom: .35rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.hero__areas { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; font-weight: 560; color: var(--sage-ink); margin-bottom: 1.4rem; }
.hero__areas span { color: var(--sage); padding-inline: .2em; }

.arch {
  position: relative; z-index: 1;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 20px 20px / 32% 32% 20px 20px;
  overflow: clip;
  background: var(--night);
  box-shadow: var(--sh-lift), 0 0 0 1px rgb(31 51 40 / .06);
}
.arch picture, .arch img, .window picture, .window img { width: 100%; height: 100%; }
/* Contorno de arco desplazado: un eco arquitectónico de la foto, sin tocarla */
.arch-line {
  position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none;
  aspect-ratio: 3 / 4; translate: 18px 18px;
  border: 1px solid color-mix(in oklab, var(--sage) 65%, transparent);
  border-radius: 50% 50% 20px 20px / 32% 32% 20px 20px;
}
.kicker__sprout { display: inline-block; width: 1.9em; height: 1.9em; margin: -.55em .35em -.35em -.1em; vertical-align: middle; overflow: visible; }
.ks-stem { fill: none; stroke: var(--sage); stroke-width: 1.6; stroke-linecap: round; }
.ks-leaf { fill: var(--leaf); transform-box: fill-box; }
.ks-leaf--s { transform-origin: 100% 100%; }
.ks-leaf--b { transform-origin: 0% 100%; }
.arch img, .window img { object-fit: cover; object-position: var(--pos, 50% 30%); background: var(--ph, var(--night)); }
@media (min-width: 900px) { .arch img, .window img, .scard img { object-position: var(--pos-lg, var(--pos, 50% 30%)); } }


@media (max-width: 899px) {
  .hero { padding-bottom: clamp(4.5rem, 14vw, 6rem); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy, .hero__visual { grid-column: 1; grid-row: auto; }
  .hero__visual { width: min(82vw, 440px); margin: 2.5rem auto 0; }
  .arch, .arch-line { aspect-ratio: 4 / 5; max-height: 62svh; margin-inline: auto; }
}

/* ---------- 2 · Manifiesto ---------- */
.manifest { background: var(--linen); padding-block: var(--section); text-align: center; }
.converge {
  display: grid; justify-items: center;
  font-size: var(--step-4); line-height: 1.1; letter-spacing: -.02em; font-weight: 340;
  margin-bottom: 1.5rem;
}
.converge__word { display: block; white-space: nowrap; }
.converge__word--b { color: var(--sage-ink); font-style: italic; }
.converge__line { display: block; margin-top: .9rem; font-size: var(--step-3); color: var(--ink); }
.converge__line em { color: var(--sage-ink); }
.manifest__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 34ch; margin: 0 auto clamp(5rem, 12vw, 10rem); }
.manifest .statement { font-size: var(--step-4); max-width: 17ch; margin-bottom: 0; }
.manifest__sub--after { margin: 2rem auto 0; max-width: 36ch; }

/* ---------- 3 · Sobre mí ---------- */
.about { background: var(--paper); padding-block: var(--section); }
.split--photo-end > div { grid-column: 1 / span 7; }
.split--photo-end > figure { grid-column: 9 / -1; }
.start .split--photo-end > div { grid-column: 1 / span 6; }
.start .split--photo-end > figure { grid-column: 8 / -1; }
.window {
  position: relative; overflow: clip;
  border-radius: var(--r-photo);
  background: var(--night);
  box-shadow: var(--sh-lift);
}
.window--portrait { aspect-ratio: 4 / 5; }
.window--square { aspect-ratio: 1; }
@media (min-width: 900px) { .about .window--portrait { max-width: 420px; justify-self: center; width: 100%; } }
/* En móvil la foto de «Hola, soy Maia» va antes del texto */
@media (max-width: 899px) { .about .split--photo-end > figure { order: -1; } .about .window--portrait { width: min(100%, 520px, 46svh); max-height: none; } }
@media (min-width: 600px) and (max-width: 899px) { .about .window--portrait { width: min(100%, 440px); } }
@media (min-width: 900px) and (max-width: 1279px) { .about .split--photo-end > div { grid-column: 1 / span 6; } .about .split--photo-end > figure { grid-column: 8 / -1; } }
@media (max-width: 899px) { .split > figure { justify-self: center; } .window--band-sm { aspect-ratio: 4 / 3; } }
.window--night { box-shadow: inset 0 0 0 1px rgb(232 224 212 / .08); }
.about__copy > p { max-width: 38em; color: var(--ink-soft); }
.creds { display: grid; gap: .1rem; margin: 2rem 0; border-top: var(--hair); }
.creds > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: var(--hair); }
.creds dt { font-size: var(--step--1); font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-ink); padding-top: .15em; }
.creds dd { font-size: .98rem; }
.numbers { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.numbers p { margin: 0; display: grid; }
.numbers__n { font-size: var(--step-4); line-height: 1; font-weight: 320; color: var(--forest); font-variant-numeric: lining-nums; }
.numbers__l { font-size: var(--step--1); color: var(--ink-soft); }
.quote {
  margin: clamp(4rem, 9vw, 8rem) auto 0; max-width: 58rem; text-align: center;
}
.quote p { font-size: var(--step-3); line-height: 1.22; font-style: italic; font-weight: 340; color: var(--ink); }
.quote p::before { content: "“"; color: var(--sage); margin-right: .05em; }
.quote p::after { content: "”"; color: var(--sage); }
.quote footer { font-family: var(--ff-serif); font-size: var(--step-1); color: var(--sage-ink); }

@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .split > figure, .split > div { grid-column: 1 !important; }
  .split--photo-end > figure { order: 2; }
  .window--portrait { max-height: 70svh; width: min(100%, 520px); }
  .window--square { width: min(100%, 520px); }
  .creds > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- Horizonte (entrada al suelo) ---------- */
.horizon { position: absolute; z-index: -2; left: 0; top: -1px; width: 100%; height: clamp(90px, 12vw, 200px); pointer-events: none; }
.horizon__l1 { fill: var(--paper); }
.horizon__l2 { fill: var(--sand); }
.horizon__l3 { fill: var(--forest); }
.soil-edge { position: absolute; left: 0; right: 0; top: clamp(60px, 9vw, 150px); bottom: 0; pointer-events: none; }
/* Primera sección oscura: el header pasa a oscuro recién cuando el horizonte terminó */
main > .chapter.page-first .soil-edge { top: clamp(90px, 12vw, 200px); }
.foryou, .training { padding-top: calc(var(--section) + clamp(60px, 9vw, 150px)); }

/* ---------- 4 · Para vos ---------- */
.foryou__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(3rem, 8vw, 7rem);
}
.foryou__taproot {
  position: absolute; left: 50%; top: -1.5rem; bottom: -1.5rem; width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--leaf) 55%, transparent) 12%, color-mix(in oklab, var(--leaf) 30%, transparent) 88%, transparent);
  border-radius: 2px;
}
.fcard {
  position: relative;
  display: flex; align-items: flex-start; gap: 1rem;
  min-height: 56px; width: 100%;
  padding: 1.15rem 1.25rem;
  border-radius: 22px 22px 22px 6px;
  border: 1px solid rgb(232 224 212 / .14);
  background: var(--night-2);
  color: var(--cream);
  text-align: left; font-size: var(--step-1); line-height: 1.35;
  font-family: var(--ff-serif); font-weight: 360;
  transition: background-color var(--t-ui), border-color var(--t-ui), transform var(--t-ui) var(--ease-grow);
}
.fcard:hover { border-color: rgb(160 188 120 / .45); transform: translateY(-2px); }
.fcard__node {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; margin-top: .1em; border-radius: 50%;
  border: 1.5px solid var(--mist); color: transparent;
  transition: background-color var(--t-ui), border-color var(--t-ui), color var(--t-ui);
}
.fcard__node .icon { width: 16px; height: 16px; }
.fcard[aria-pressed="true"] { background: var(--night-3); border-color: rgb(160 188 120 / .7); }
.fcard[aria-pressed="true"] .fcard__node { background: var(--leaf); border-color: var(--leaf); color: var(--night); }
/* Pelo de raíz: une la tarjeta con la raíz central */
.fcard::after {
  content: ""; position: absolute; top: 50%; height: 1.5px; width: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--leaf); transform: scaleX(0); transition: transform 600ms var(--ease-draw);
}
.fcard:nth-of-type(odd)::after { right: calc(-1 * clamp(1.5rem, 4vw, 3.5rem)); transform-origin: left; }
.fcard:nth-of-type(even)::after { left: calc(-1 * clamp(1.5rem, 4vw, 3.5rem)); transform-origin: right; }
.fcard[aria-pressed="true"]::after { transform: scaleX(1); }
/* Tu punto de partida: la orientación que arman las tarjetas marcadas */
.start-point {
  margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 48rem;
  border-radius: 28px 28px 28px 6px; background: rgb(232 224 212 / .06); border: 1px solid rgb(232 224 212 / .14);
}
.start-point__title { margin: 0 0 .6rem; font-size: var(--step-2); font-weight: 360; color: var(--cream); }
.start-point__count { margin: 0; color: var(--cream-soft); }
.start-point__route { margin: .35rem 0 0; font-family: var(--ff-serif); font-size: var(--step-1); color: var(--cream); }
.start-point__route a { color: var(--leaf); }
.start-point__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1.1rem; }
.start-point__note { margin: 0 0 .25rem; max-width: 56ch; font-size: .88rem; color: var(--cream-soft); }
.start-point .link-btn { color: var(--cream-soft); }
@media (min-width: 768px) { .start-point { max-width: calc((100% - clamp(3rem, 8vw, 7rem)) / 2); } }
@media (prefers-reduced-motion: no-preference) {
  .start-point:not([hidden]) { animation: fade-up 600ms var(--ease-out) both; }
}

/* Sin JS: las tarjetas son una lista para leer */
html:not(.js) .fcard, .fcard:disabled { cursor: default; opacity: 1; color: var(--cream); }
html:not(.js) .fcard__node { display: none; }
html:not(.js) .fcard:hover { transform: none; }

@media (max-width: 767px) {
  .foryou__grid { grid-template-columns: minmax(0, 1fr); padding-left: 1.5rem; }
  .foryou__taproot { left: 0; transform: none; }
  .fcard::after { display: none; }
}


/* ---------- 5 · Enfoque ---------- */
.focus { padding-top: 0; }
.focus__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.areas { grid-column: 1 / span 5; border-top: 1px solid rgb(232 224 212 / .16); }
.network { grid-column: 7 / -1; }
.area { border-bottom: 1px solid rgb(232 224 212 / .16); }
.area summary {
  display: flex; align-items: center; gap: .9rem;
  min-height: 64px; padding: .9rem 0; cursor: pointer; list-style: none;
  font-family: var(--ff-serif); font-size: var(--step-2); line-height: 1.2; font-weight: 360;
}
.area summary::-webkit-details-marker { display: none; }
.area__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--mist); flex: none; transition: background-color var(--t-ui), border-color var(--t-ui); }
.area__name { flex: 1; }
.area__mine {
  display: none; font-family: var(--ff-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .3em .7em; border-radius: 999px; border: 1px solid var(--leaf); color: var(--leaf);
}
.area.is-mine .area__mine { display: inline-block; }
.area__plus { color: var(--mist); transition: transform var(--t-ui) var(--ease-grow); }
.area[open] .area__plus { transform: rotate(45deg); }
.area[open] .area__dot, .area.is-visited .area__dot { background: var(--leaf); border-color: var(--leaf); }
.area__body { margin: 0; padding: 0 0 1.3rem 1.9rem; color: var(--cream-soft); font-size: var(--step-0); }
.area::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-ui) var(--ease-grow), content-visibility var(--t-ui) allow-discrete; }
.area[open]::details-content { block-size: auto; }

.network__svg { width: 100%; max-width: 560px; margin-inline: auto; overflow: visible; }
.network__rings circle { fill: none; stroke: rgb(188 200 201 / .14); stroke-width: 1; }
.network__spokes path { fill: none; stroke: rgb(188 200 201 / .16); stroke-width: 1; stroke-dasharray: 3 6; }
.network__edges path { fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; opacity: .28; }
.nnode circle { fill: var(--night-2); stroke: var(--mist); stroke-width: 1.5; transition: fill var(--t-ui), stroke var(--t-ui), stroke-width var(--t-ui); }
.nnode text, .network__crown text { fill: var(--cream-soft); font-family: var(--ff-sans); font-size: 15px; font-weight: 560; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.nnode.is-open circle { fill: var(--leaf); stroke: var(--leaf); }
.nnode.is-mine circle { stroke: var(--leaf); stroke-width: 4; }
.network__crown circle { fill: var(--forest); stroke: rgb(160 188 120 / .5); }
.network__crown text { fill: var(--cream); font-family: var(--ff-serif); font-size: 19px; letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 400; }
.network__travel circle { fill: var(--leaf-tint); }
.js .network__edges path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset 900ms var(--ease-draw); }
.js .network__edges path.is-on { stroke-dashoffset: 0; }
.closing-line { margin: clamp(3rem, 6vw, 5rem) auto 0; max-width: 34ch; text-align: center; font-family: var(--ff-serif); font-size: var(--step-2); line-height: 1.3; font-style: italic; color: var(--cream); }

@media (max-width: 899px) {
  .focus__grid { grid-template-columns: minmax(0, 1fr); }
  .areas, .network { grid-column: 1; }
  .network { order: -1; width: min(62%, 250px); margin: 0 auto 1.25rem; }
  .nnode text { font-size: 18px; }
}

/* ---------- 6 · Criterio ---------- */
.criterio { min-height: 88svh; display: grid; align-items: center; text-align: center; padding-block: clamp(6rem, 14vw, 12rem); }
.criterio .statement { margin-inline: auto; color: var(--cream); }
.statement__row { display: block; }
.strike, .circled { position: relative; display: inline-block; }
.strike { color: var(--cream-soft); }
.strike__line { position: absolute; left: -4%; top: 38%; width: 108%; height: 40%; overflow: visible; }
.strike__line path { fill: none; stroke: var(--terra-light); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.circled { margin-left: .22em; margin-right: .08em; }
.circled__ring { position: absolute; left: -9%; top: -16%; width: 118%; height: 132%; overflow: visible; }
@media (max-width: 599px) { .circled__ring { left: -8%; top: -26%; width: 116%; height: 152%; } }
.circled__ring path { fill: none; stroke: var(--leaf); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.criterio__sub { margin: 2.5rem auto 0; max-width: 34ch; font-size: var(--step-1); color: var(--cream-soft); }

/* ---------- 7 · Servicios ---------- */
.scards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.scard {
  position: relative; isolation: isolate; overflow: clip;
  border-radius: var(--r-card);
  background: var(--night); color: var(--cream);
  aspect-ratio: 4 / 5.3;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-reveal) var(--ease-grow), transform var(--t-reveal) var(--ease-grow);
}
.scard picture { position: absolute; inset: 0; z-index: -2; }
.scard img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); transition: scale var(--t-reveal) var(--ease-grow); }
@media (min-width: 900px) { .scard img { object-position: var(--pos-lg, var(--pos, 50% 25%)); } }
.scard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--night) 0 28%, rgb(18 26 22 / .8) 44%, rgb(18 26 22 / 0) 70%);
  transition: background-color var(--t-reveal);
}
.scard__body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.scard__title { font-size: var(--step-2); line-height: 1.12; margin-bottom: .6rem; color: var(--cream); }
@media (min-width: 900px) { .scard__title { min-height: 2.24em; display: flex; align-items: flex-end; } #servicio-deportiva img { object-position: 40% 25% !important; } }
.scard__body p { font-size: .98rem; color: var(--cream-soft); margin-bottom: 1.1rem; }
.scard__link { display: inline-flex; align-items: center; gap: .45em; color: var(--leaf); font-weight: 580; text-decoration: none; }
.scard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.scard:hover, .scard:focus-within { box-shadow: var(--sh-lift); transform: translateY(-4px); }
.scard:hover img, .scard:focus-within img { scale: 1.03; }
.scard:hover .icon, .scard:focus-within .icon { transform: translateX(3px); }
.scard .icon { transition: transform var(--t-ui) var(--ease-grow); }
.scard:has(.scard__link:focus-visible) { outline: 2px solid var(--terra); outline-offset: 4px; }
.scard__link:focus-visible { outline: none; }
.services__cta { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .9rem; margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }

@media (min-width: 900px) and (max-width: 1279px) {
  .scard { aspect-ratio: auto; display: grid; grid-template-rows: auto 1fr; }
  .scard picture { position: relative; inset: auto; aspect-ratio: 1; z-index: 0; }
  .scard::before { display: none; }
  .scard__body { background: var(--night); position: relative; z-index: 1; }
  .scard__body::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 45%; min-height: 80px; max-height: 120px; background: linear-gradient(to top, var(--night), transparent); pointer-events: none; }
}
@media (max-width: 899px) {
  .scards { grid-template-columns: minmax(0, 1fr); }
  .scard { aspect-ratio: auto; display: grid; }
  .scard picture { position: relative; inset: auto; aspect-ratio: 4 / 3; z-index: 0; }
  .scard--square picture { aspect-ratio: 1; }
  .scard::before { display: none; }
  .scard__body { background: var(--night); position: relative; z-index: 1; }
  .scard__body::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 45%; min-height: 80px; background: linear-gradient(to top, var(--night), transparent); pointer-events: none; }
}

/* ---------- 8 · Proceso ---------- */
.process { background: var(--linen); padding-block: var(--section); }
.steps { list-style: none; position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem); max-width: 52rem; margin-inline: auto; padding-left: 4.5rem; }
@media (max-width: 767px) { .steps { padding-left: 3.6rem; } .step__leaf { left: -3.6rem !important; } }
.steps::before {
  content: ""; position: absolute; left: 1.35rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--sage), color-mix(in oklab, var(--sage) 40%, transparent));
  transform-origin: top;
}
.step { position: relative; }
.step__leaf { position: absolute; left: -4.5rem; top: -.1rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--sage); color: var(--sage-ink); }
.step__leaf svg { width: 1.3rem; height: 1.3rem; }
.step__n { display: block; font-family: var(--ff-serif); font-style: italic; font-size: var(--step-1); color: var(--sage-ink); margin-bottom: .2rem; }
.step__title { font-size: var(--step-3); line-height: 1.08; margin-bottom: .6rem; }
.step p { color: var(--ink-soft); max-width: 46ch; margin: 0; }

/* ---------- 9 · Recursos ---------- */
.resources { background: var(--paper); padding-block: var(--section); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chip {
  min-height: 44px; padding: .5rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: transparent;
  font-size: .95rem; font-weight: 520; transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.chip:hover { background: var(--linen); }
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.chips__empty { color: var(--ink-soft); }

.library { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); margin-top: 2rem; align-items: start; }
.library > * { grid-column: span 12; }
@media (min-width: 1100px) {
  .library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library > * { grid-column: auto; }
}
.library > .is-filtered { display: none; }

.tag { display: inline-block; color: var(--sage-ink); margin-bottom: .8rem; }
.tag--pro { color: var(--terra-light); }
.u { text-transform: none; }
.cite.cite--light { color: var(--ink-soft); margin-top: 1.25rem; }
.cite.cite--light a { color: var(--sage-ink); }
.rcard, .lab {
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  box-shadow: var(--sh-1);
}
.rcard--feature { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--linen); }
.rcard__cover img, .pcard__cover img {
  width: 100%; height: auto; border-radius: 10px 10px 10px 3px;
  box-shadow: 0 30px 50px -28px rgb(18 26 22 / .55), 0 0 0 1px rgb(18 26 22 / .06);
  transform: rotate(-2deg); transition: transform var(--t-reveal) var(--ease-grow);
}
.rcard--feature:hover .rcard__cover img, .pcard:hover .pcard__cover img { transform: rotate(0deg) translateY(-4px); }
.rcard__sub, .pcard__sub { font-family: var(--ff-serif); font-style: italic; font-size: var(--step-1); color: var(--sage-ink); margin-bottom: 1rem; }
.rcard__body > p:not(.tag):not(.rcard__sub):not(.micro) { max-width: 56ch; color: var(--ink-soft); }
.rcard__meta, .pcard__meta { font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; font-weight: 560; color: var(--ink-soft); }
.notice {
  margin: 1.1rem 0 .6rem; padding: .85rem 1rem .85rem 1.1rem;
  border-left: 2px solid var(--terra);
  background: var(--white); border-radius: 0 12px 12px 0;
  font-size: .92rem; line-height: 1.5; color: var(--ink);
}
.rcard--feature .notice { background: var(--white); }
.notice--dark { background: var(--night); border-left-color: var(--terra-light); color: var(--cream); }
.rcard--ghost { background: transparent; border-style: dashed; border-color: color-mix(in oklab, var(--ink) 24%, transparent); box-shadow: none; display: grid; align-content: center; gap: .6rem; }
.rcard__topic { font-family: var(--ff-serif); font-size: var(--step-1); line-height: 1.3; color: var(--ink) !important; max-width: 36ch; }
.programs { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.rcard--ghost p:not(.tag) { color: var(--ink-soft); margin: 0; }

.lab__head { margin-bottom: 1.5rem; }
.lab__head p:not(.tag) { color: var(--ink-soft); max-width: 60ch; }

/* Batería ATP */
.battery { display: grid; gap: 1rem; }
.battery__svg { width: 100%; max-width: 440px; margin-inline: auto; overflow: visible; }
.battery__case { fill: var(--paper); stroke: var(--forest); stroke-width: 2.5; }
.battery__cap { fill: var(--forest); }
.battery__label, .battery__rlabel { font-family: var(--ff-serif); font-size: 22px; fill: var(--forest); text-anchor: middle; font-weight: 420; }
.battery__rlabel { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; font-weight: 600; fill: var(--sage-ink); }
.bead { fill: var(--leaf); stroke: var(--sage); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-grow), opacity 500ms; }
.battery__spark path { fill: var(--terra-light); }
.battery__spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.reserve__track { fill: var(--linen); stroke: var(--sage); stroke-width: 1.5; }
.reserve__fill { fill: var(--sage); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--reserve, 1)); transition: transform 600ms var(--ease-grow); }
.battery[data-state="spent"] .bead--free { transform: translate(34px, -58px) scale(.55); opacity: 0; }
.battery.is-returning .bead--free { transform: translate(128px, 0) scale(.7); opacity: 0; transition: none; }
.battery.is-spark .battery__spark { animation: spark 420ms ease-out; }
.battery__controls { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.battery__caption { text-align: center; min-height: 3.2em; margin: 0 auto; max-width: 48ch; color: var(--ink); font-size: .98rem; }
.nojs-notes { display: grid; gap: .6rem; margin-top: 1rem; font-size: .95rem; }
.nojs-notes dt { font-weight: 600; color: var(--sage-ink); }
.js .nojs-notes { display: none; }
html:not(.js) .battery__controls, html:not(.js) .battery__caption { display: none; }

/* Opciones tipo píldora (cascada de hierro) */
.pill-radio { position: relative; display: inline-flex; }
.pill-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill-radio span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); font-size: .95rem; font-weight: 520;
  transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.pill-radio input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.pill-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.pill-radio--dark span { border-color: rgb(232 224 212 / .25); color: var(--cream); }
.pill-radio--dark input:checked + span { background: var(--leaf); border-color: var(--leaf); color: var(--night); }

/* Mitos */
.myths { border-top: var(--hair); }
.myth { border-bottom: var(--hair); }
.myth summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: .85rem 0; cursor: pointer; list-style: none;
  font-family: var(--ff-serif); font-size: var(--step-1); line-height: 1.3;
}
.myth summary::-webkit-details-marker { display: none; }
.myth summary .icon { color: var(--sage); transition: transform var(--t-ui) var(--ease-grow); }
.myth[open] summary .icon { transform: rotate(45deg); }
.myth p { color: var(--ink-soft); padding-bottom: 1rem; margin: 0; max-width: 60ch; }
.myth__v { color: var(--forest); }
.myth::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-ui) var(--ease-grow), content-visibility var(--t-ui) allow-discrete; }
.myth[open]::details-content { block-size: auto; }


@media (max-width: 767px) {
  .rcard--feature { grid-template-columns: minmax(0, 1fr); }
  .rcard__cover { width: min(62%, 240px); }
}

/* ---------- 10 · Formación ---------- */
.training { background: var(--night); padding-bottom: var(--section); }
.training__copy p:not(.eyebrow):not(.lead) { color: var(--cream-soft); max-width: 58ch; }
.index-list { list-style: none; margin: 2rem 0; border-top: 1px solid rgb(232 224 212 / .16); }
.index-list li { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid rgb(232 224 212 / .16); }
.index-list__t { display: block; font-family: var(--ff-serif); font-size: var(--step-1); color: var(--cream); }
.index-list__d { display: block; font-size: .92rem; color: var(--cream-soft); }
.status { flex: none; color: var(--mist); font-size: .72rem; padding: .35em .8em; border-radius: 999px; border: 1px solid rgb(188 200 201 / .3); }
.status--ready { display: inline-flex; align-items: center; gap: .3rem; color: var(--night); background: var(--leaf); border-color: var(--leaf); text-decoration: none; min-height: 32px; }

.pcard {
  display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border-radius: var(--r-card); background: var(--night-2);
  box-shadow: inset 0 0 0 1px rgb(232 224 212 / .08);
}
.pcard__sub { color: var(--leaf); }
.pcard__body > p:not(.tag):not(.pcard__sub):not(.micro):not(.cite):not(.notice) { color: var(--cream-soft); max-width: 58ch; }
.pcard__meta { color: var(--mist); }
.iron-notice { display: grid; justify-items: start; gap: .25rem; }
.js .iron-notice:not(.is-open) { display: none; }
[data-iron-toggle][aria-expanded="true"] { display: none; }
.cite { font-size: .86rem; color: var(--mist); margin-top: 1.2rem; }
.cite a { color: var(--leaf); word-break: break-word; }
.cite cite { font-style: italic; }

.cascade { margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgb(232 224 212 / .14); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.cascade > .h3, .cascade__intro, .cascade__phases { grid-column: 1; }
.cascade__intro { color: var(--cream-soft); }
.cascade__phases { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.vials { grid-column: 2; grid-row: 1 / span 4; display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
.vial { display: grid; justify-items: center; gap: .8rem; text-align: center; }
.vial__glass { position: relative; width: 58px; height: 190px; border-radius: 29px 29px 22px 22px; border: 1.5px solid rgb(232 224 212 / .45); overflow: hidden; background: rgb(232 224 212 / .04); }
.vial__fill { position: absolute; inset: auto 5px 5px; height: calc(100% - 10px); border-radius: 22px 22px 17px 17px; transform-origin: 50% 100%; transform: scaleY(var(--lvl, 1)); transition: transform 600ms var(--ease-grow); }
.vial--dep .vial__fill { background: var(--leaf); }
.vial--ist .vial__fill { background: var(--mist); }
.vial--hb .vial__fill { background: var(--terra-light); }
.vial__label { font-size: .82rem; line-height: 1.3; color: var(--cream); font-weight: 560; }
.vial__label small { color: var(--mist); font-weight: 400; }
.cascade { --dep: .32; --ist: .82; --hb: .92; }
.cascade:has(#fase-2:checked) { --dep: .12; --ist: .34; --hb: .88; }
.cascade:has(#fase-3:checked) { --dep: .05; --ist: .12; --hb: .46; }
.vial--dep { --lvl: var(--dep); }
.vial--ist { --lvl: var(--ist); }
.vial--hb { --lvl: var(--hb); }
.cascade__captions { grid-column: 1; list-style: none; display: grid; gap: .8rem; color: var(--cream-soft); }
.cascade__captions strong { color: var(--cream); font-weight: 560; }
@supports selector(:has(*)) {
  /* Las tres leyendas ocupan la misma celda: la caja siempre mide la más alta y nada salta */
  .cascade__captions { display: grid; }
  .cap { grid-area: 1 / 1; visibility: hidden; font-size: var(--step-1); line-height: 1.45; }
  .cascade:has(#fase-1:checked) .cap--1,
  .cascade:has(#fase-2:checked) .cap--2,
  .cascade:has(#fase-3:checked) .cap--3 { visibility: visible; }
}
@media (max-width: 899px) {
  .pcard { grid-template-columns: minmax(0, 1fr); }
  .pcard__cover { width: min(62%, 240px); }
  .cascade { grid-template-columns: minmax(0, 1fr); }
  .vials { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* ---------- 11 · Empezar ---------- */
.start { padding-bottom: calc(var(--section) + 2rem); }
.explore + .sheet { margin-top: 0; border-radius: 0; box-shadow: none; animation: none; background: var(--linen); }
.start__copy .lead { margin-bottom: 2rem; }
@media (min-width: 900px) { .start .h2--xl { font-size: var(--step-4); line-height: 1.04; } }
.route { margin: 1.5rem 0 0; color: var(--ink-soft); max-width: 46ch; }
.route a { color: var(--sage-ink); font-weight: 560; }
.route small { display: block; margin-top: .3rem; }
.start__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Brote (arte compartido del logo) ---------- */
.brote { overflow: visible; --roots: 0; --stem: 0; --leafs: 0; --leafb: 0; --full: 0; }
.brote[data-roots="1"] { --roots: 1; }
.brote[data-stem="1"] { --stem: 1; }
.brote[data-leafs="1"] { --leafs: 1; }
.brote[data-leafb="1"] { --leafb: 1; }
.brote[data-full="1"] { --full: 1; }
.bp-ghost { fill: none; stroke: currentColor; stroke-width: var(--ghost-w, 6); stroke-dasharray: 4 18; stroke-linecap: round; opacity: calc(var(--ghost-op, .28) * (1 - var(--full))); }
.bp-seed { opacity: calc(1 - var(--full)); }
.bp-roots { opacity: var(--roots); fill: var(--roots-fill, #68906C); stroke: var(--roots-fill, #68906C); stroke-width: calc(10 * (1 - var(--full))); stroke-linejoin: round; }
.brote[data-full="1"] { --roots-fill: #E8E0D4; }
.bp-stem { opacity: var(--stem); fill: none; stroke: #68906C; stroke-width: 16; stroke-linecap: round; }
.bp-seed { fill: #68906C; transform-box: fill-box; transform-origin: center; scale: var(--seed-scale, 1); }
.bp-leaf-small { opacity: var(--leafs); }
.bp-leaf-big { opacity: var(--leafb); }
.bp-circle, .bp-m, .bp-s { opacity: var(--full); }
.bp-roots, .bp-stem, .bp-leaf-small, .bp-leaf-big, .bp-circle, .bp-m, .bp-s, .bp-seed, .bp-ghost { transition: opacity 700ms var(--ease-grow); }

/* ---------- Contacto flotante: WhatsApp en todas las páginas, «Sacar turno» en el teléfono ---------- */
.wa-bubble {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.35rem 0 1.1rem;
  border-radius: var(--r-pill); background: var(--forest); color: var(--paper);
  font-weight: 580; font-size: .95rem; text-decoration: none;
  box-shadow: 0 14px 34px -14px rgb(18 26 22 / .6), 0 0 0 1px rgb(255 255 255 / .06);
  transition: transform var(--t-ui) var(--ease-grow), box-shadow var(--t-ui), background-color var(--t-ui), color var(--t-ui), opacity var(--t-ui), translate var(--t-ui) var(--ease-grow);
}
.wa-bubble.is-away { opacity: 0; translate: 0 calc(100% + 24px); pointer-events: none; }
.wa-bubble.is-away:focus-visible { opacity: 1; translate: none; pointer-events: auto; }
.wa-bubble:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgb(18 26 22 / .65), 0 0 0 1px rgb(255 255 255 / .06); }
.wa-bubble__icon { display: grid; place-items: center; flex: none; }
.wa-bubble__icon .icon { width: 24px; height: 24px; }
.wa-bubble.on-dark { background: var(--paper); color: var(--forest); }
@media (prefers-reduced-motion: no-preference) {
  .wa-bubble { animation: fade-up 700ms var(--ease-out) 600ms backwards; }
}
/* Pantallas muy angostas: la burbuja queda solo con el ícono para no pisar «Sacar turno» */
@media (max-width: 349px) {
  .wa-bubble { width: 52px; padding: 0; justify-content: center; }
  .wa-bubble__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.bottombar {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: none; transition: transform var(--t-ui) var(--ease-grow), opacity var(--t-ui);
}
.bottombar .btn { min-height: 52px; font-size: .95rem; box-shadow: 0 14px 34px -14px rgb(18 26 22 / .6); }
.bottombar.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; }
.bottombar.is-away:focus-within { transform: none; opacity: 1; }
.bottombar.on-dark .btn--primary { --bg: var(--leaf); --fg: var(--night); }
@media (max-width: 767px) { .bottombar:not([hidden]) { display: flex; } }

/* Botón de WhatsApp dentro del contenido */
.btn--wa { --bg: var(--white); --fg: var(--ink); --bd: color-mix(in oklab, var(--ink) 16%, transparent); }
.btn--wa:hover { --bg: var(--paper); box-shadow: var(--sh-1); }
.btn--wa:hover .icon, .btn--wa:focus-visible .icon { transform: none; }
.btn--wa-dark { --bg: transparent; --fg: var(--cream); --bd: rgb(232 224 212 / .3); }
.btn--wa-dark:hover { --bg: rgb(232 224 212 / .08); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night); color: var(--cream);
  margin-top: -28px; border-radius: 28px 28px 0 0; z-index: 2;
  /* La última fila queda por encima de la burbuja de WhatsApp */
  padding: clamp(4rem, 8vw, 6rem) 0 calc(2rem + 68px + env(safe-area-inset-bottom));
}
.footer__grid { display: grid; grid-template-columns: 1.1fr .8fr 1fr 1.4fr; gap: 2.5rem var(--gutter); }
.footer__claim { font-family: var(--ff-serif); font-size: var(--step-2); line-height: 1.15; margin: 1.2rem 0 .6rem; }
.footer__cred { color: var(--cream-soft); font-size: .92rem; }
.footer__h { color: var(--leaf); margin-bottom: 1rem; }
.footer__nav ul, .social { list-style: none; display: grid; gap: .15rem; }
.footer__nav a, .social a { display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; text-decoration: none; color: var(--cream); }
.footer__nav a:hover, .social a:hover { color: var(--leaf); }
.social { margin-bottom: 1.2rem; }
.social__h { display: block; color: var(--cream-soft); font-size: .88rem; }
.footer__legal p { font-size: .88rem; color: var(--cream-soft); line-height: 1.55; }
.footer__legal strong { color: var(--cream); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; font-size: .86rem; color: var(--cream-soft); }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgb(232 224 212 / .12); }
.footer__logo { width: 64px; height: 64px; }
.footer__bottom p { margin: 0; }
.icon--up { transform: rotate(180deg); }
@media (max-width: 1099px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Multipágina: cabeceras, índice del home, solapas, estante de eBooks, CTA final
   ========================================================================== */
main > .page-first { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)); }
main > .chapter.page-first { margin-top: var(--header-h); padding-top: calc(var(--section) + clamp(60px, 9vw, 150px)); }
.page-head { background: var(--paper); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.page-head .section-head { margin-bottom: 0; }
.focus--page { padding-top: calc(var(--section) + clamp(60px, 9vw, 150px)); }
.services { background: var(--paper); padding-bottom: var(--section); }

.site-nav a[aria-current="page"] { background: color-mix(in oklab, currentColor 10%, transparent); }
.menu__links a[aria-current="page"] { color: var(--sage-ink); }
.footer__nav a[aria-current="page"] { color: var(--leaf); }
:is(.site-nav, .menu__links, .footer__nav) a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; }
.menu__links a[aria-current="page"] { text-underline-offset: .12em; }

/* Seguí por: la página siguiente, antes del CTA */
.next-page { background: var(--paper); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: var(--hair); }
/* La banda del CTA sube 6vh sobre el enlace oscuro: el espacio de abajo lo compensa */
.chapter--night + .next-page { background: var(--night); color: var(--cream); border-top: 1px solid rgb(232 224 212 / .08); padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + 6vh); }
.next-page__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k arrow" "t arrow" "d arrow";
  align-items: center; column-gap: 1.5rem; text-decoration: none;
}
.next-page__t, .next-page__d { max-width: 40rem; }
.next-page__k { grid-area: k; font-size: var(--step--1); font-weight: 560; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink); }
.chapter--night + .next-page .next-page__k { color: var(--leaf); }
.next-page__t { grid-area: t; font-family: var(--ff-serif); font-size: var(--step-4); font-weight: 340; line-height: 1.05; letter-spacing: -.02em; margin-top: .35rem; }
.next-page__d { grid-area: d; color: var(--ink-soft); margin-top: .5rem; }
.chapter--night + .next-page .next-page__d { color: var(--cream-soft); }
.next-page__arrow { grid-area: arrow; width: clamp(1.6rem, 3vw, 2.4rem); height: clamp(1.6rem, 3vw, 2.4rem); transition: translate var(--t-micro); }
.next-page__link:hover .next-page__arrow, .next-page__link:focus-visible .next-page__arrow { translate: .4rem 0; }
.next-page__link:hover .next-page__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }

/* Índice del home: cada fila lleva a una página */
.explore { background: var(--paper); padding-block: var(--section); }
.explore .wrap { position: relative; }
.explore__list { list-style: none; border-top: var(--hair); }
.explore__link {
  position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center; gap: .75rem 2rem; padding: clamp(1.3rem, 2.6vw, 2.1rem) .25rem;
  border-bottom: var(--hair); color: var(--ink); text-decoration: none;
}
.explore__n { font-family: var(--ff-serif); font-style: italic; font-size: var(--step-1); color: var(--sage-ink); }
.explore__t { font-family: var(--ff-serif); font-size: var(--step-3); line-height: 1.05; font-weight: 360; letter-spacing: -.015em; transition: translate 600ms var(--ease-out), color var(--t-ui); }
.explore__d { color: var(--ink-soft); max-width: 40ch; }
.explore__arrow { width: 1.6em; height: 1.6em; color: var(--sage-ink); transition: translate var(--t-ui) var(--ease-grow); }
.explore__thumb { display: none; }
.explore__link:hover .explore__t, .explore__link:focus-visible .explore__t { translate: 14px 0; color: var(--forest); }
.explore__link:hover .explore__arrow, .explore__link:focus-visible .explore__arrow { translate: 6px 0; }
@media (max-width: 899px) {
  .explore__link { grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-template-areas: "n t thumb" "n d thumb"; gap: .35rem 1rem; }
  .explore__n { grid-area: n; align-self: start; padding-top: .35em; }
  .explore__t { grid-area: t; font-size: var(--step-2); }
  .explore__d { grid-area: d; font-size: .95rem; }
  .explore__arrow { display: none; }
  .explore__thumb { display: block; grid-area: thumb; width: 72px; height: 90px; border-radius: 12px 12px 12px 4px; overflow: clip; background: var(--night); }
  .explore__thumb img, .explore__thumb picture { width: 100%; height: 100%; object-fit: cover; }
}

/* Solapas de Recursos (sin JS: paneles apilados con su título) */
.tabs__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.25rem; border-bottom: var(--hair); }
.tab {
  min-height: 44px; padding: .5rem 1.2rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); background: transparent;
  font-size: .98rem; font-weight: 540; transition: background-color var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.tab:hover { background: var(--linen); }
.tab[aria-selected="true"] { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.tabs__h { font-family: var(--ff-serif); font-size: var(--step-3); font-weight: 360; margin: 0 0 1.5rem; }
.tabs__panel + .tabs__panel { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* Con JS las solapas se ven desde el primer pintado (sin salto de diseño cuando main.js las activa) */
html:not(.js) .tabs__list { display: none; }
.js .tabs:not(.is-ready) .tabs__panel ~ .tabs__panel { display: none; }
.js .tabs .tabs__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .tabs .tabs__panel + .tabs__panel { margin-top: 0; }
.shelf-h {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem;
  font-family: var(--ff-sans); font-size: var(--step--1); font-weight: 560; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-ink);
}
.shelf-h::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, currentColor 30%, transparent); }
.shelf-h ~ .shelf-h { margin-top: clamp(3rem, 6vw, 4.5rem); }
.ebooks { display: grid; gap: var(--gutter); }
@media (min-width: 1100px) {
  .ebooks { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ebooks .rcard--feature { grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); align-items: start; }
}
.rcard--paid { background: var(--white); }
.buy-soon { margin: 0; font-size: var(--step--1); font-weight: 560; color: var(--sage-ink); }

/* CTA final de cada página */
.cta-band { background: var(--linen); padding-block: clamp(4.5rem, 9vw, 8rem) clamp(5.5rem, 10vw, 9rem); }
.process + .cta-band, .process + .next-page + .cta-band { background: var(--paper); }
.process + .next-page { background: var(--linen); }
.chapter--night + .cta-band, .chapter--night + .next-page + .cta-band { margin-top: -6vh; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -30px rgb(0 0 0 / .5); z-index: 1; }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem var(--gutter); align-items: center; }
.cta-band .h2 { max-width: 18ch; }
.cta-band .lead { margin-bottom: 2rem; }
.cta-contact {
  justify-self: end; width: 100%; max-width: 24rem; padding: 1.5rem 1.6rem;
  border-radius: 22px 22px 22px 6px; background: var(--white); box-shadow: var(--sh-1);
}
.cta-contact__title { margin: 0 0 .25rem; font-size: var(--step-1); }
.cta-contact__msg { margin: 0 0 1.1rem; color: var(--ink-soft); }
@media (max-width: 899px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr); } .cta-contact { justify-self: start; } }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; align-items: center; background: var(--paper); padding-block: 3rem; }
.lost__inner { display: grid; justify-items: start; gap: .25rem; max-width: 46rem; }
.lost .brand { margin-bottom: 2rem; }
.lost .eyebrow { white-space: nowrap; }
.lost__seed { width: 150px; height: 150px; margin-bottom: 1rem; overflow: visible; }
.lost__ground { fill: none; stroke: var(--sand); stroke-width: 3; stroke-linecap: round; }
.lost__grain { fill: var(--cream); stroke: var(--sage); stroke-width: 1.5; }
.lost__shoot, .lost__root { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; }
.lost__root { stroke-width: 1.3; opacity: .7; }
.lost__leaf { fill: var(--leaf); }
.lost .lead { margin-bottom: 2rem; }
.lost__nav { margin-top: 2.25rem; }
.lost__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }


/* ==========================================================================
   Movimiento (solo sin preferencia de movimiento reducido)
   ========================================================================== */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes grow-y { from { transform: scaleY(.15); } to { transform: none; } }
@keyframes unfurl { from { transform: scale(.2) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spark { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes horizon-2 { from { transform: translateY(-16px); } to { transform: none; } }
@keyframes horizon-3 { from { transform: translateY(-34px); } to { transform: none; } }
@keyframes conv-a { from { transform: translate(-5.3em, 1.1em) scale(.7); } to { transform: none; } }
@keyframes conv-b { from { transform: scale(.7); } to { transform: none; } }
@keyframes conv-c { from { transform: translate(5em, -1.1em) scale(.7); } to { transform: none; } }
@keyframes conv-line { from { opacity: .6; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.smooth-anchors:not(.lenis) { scroll-behavior: smooth; }

  /* Brote del kicker: tallo y dos hojas, junto al nombre (nunca sobre la foto) */
  .ks-stem { stroke-dasharray: 1; animation: draw 700ms var(--ease-grow) 250ms both; }
  .ks-leaf--s { animation: unfurl 800ms var(--ease-unfurl) 700ms both; }
  .ks-leaf--b { animation: unfurl 850ms var(--ease-unfurl) 840ms both; }
  .arch-line { animation: arch-line 1600ms var(--ease-out) 350ms both; }

  /* Revelados genéricos (solo con JS: sin JS todo queda visible) */
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease-grow), transform var(--t-reveal) var(--ease-grow); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* S7 · Revelado de fotos: un velo oscuro se abre desde la cara */
  .js [data-reveal-photo] picture { position: relative; }
  .js [data-reveal-photo] picture::after {
    content: ""; position: absolute; inset: -30%; z-index: 2; pointer-events: none;
    --ox: calc((var(--fx, 50%) + 30%) / 1.6);
    --oy: calc((var(--fy, 30%) + 30%) / 1.6);
    background: radial-gradient(circle at var(--ox) var(--oy), transparent 0 10%, var(--night) 26%);
    transform-origin: var(--ox) var(--oy);
    transition: transform 1400ms var(--ease-grow), opacity 1400ms var(--ease-grow);
  }
  .js [data-reveal-photo].is-in picture::after { transform: scale(2.6); opacity: 0; }
  .js .arch[data-reveal-photo] picture::after { display: none; }

  /* Pasos: la hoja se despliega al llegar */
  .js .step__leaf { transform: scale(.4) rotate(-25deg); opacity: 0; transition: transform 700ms var(--ease-unfurl), opacity 400ms; }
  .js .step.is-in .step__leaf { transform: none; opacity: 1; }
  .js .steps::before { transform: scaleY(var(--stem, 0)); transition: transform 300ms linear; }

  /* Red: el contorno se dibuja al entrar */
  .js .network__rings circle, .js .network__spokes path { stroke-dashoffset: 0; }
  .js [data-network]:not(.is-in) .network__rings circle { opacity: 0; }
  .js .network__rings circle { transition: opacity 1200ms var(--ease-grow); }

  /* S2 · Bajo la superficie · S3 · Convergencia · S5 · Menos atajos */
  @supports (animation-timeline: view()) {
    .horizon__l2 { animation: horizon-2 linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
    .horizon__l3 { animation: horizon-3 linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
    .strike__line path { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: cover 28% cover 42%; }
    .circled__ring path { stroke-dasharray: 1; animation: draw linear both; animation-timeline: view(); animation-range: cover 38% cover 54%; }
    @media (min-width: 900px) {
      .converge { view-timeline: --conv block; }
      .converge__word--a { animation: conv-a linear both; animation-timeline: --conv; animation-range: entry 10% cover 35%; }
      .converge__word--b { animation: conv-b linear both; animation-timeline: --conv; animation-range: entry 10% cover 35%; }
      .converge__word--c { animation: conv-c linear both; animation-timeline: --conv; animation-range: entry 10% cover 35%; }
      .converge__line { animation: conv-line linear both; animation-timeline: --conv; animation-range: cover 25% cover 38%; }
    }
  }
  @supports not (animation-timeline: view()) {
    .js .strike__line path, .js .circled__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-draw); }
    .js .criterio.is-in .strike__line path { stroke-dashoffset: 0; transition-delay: 200ms; }
    .js .criterio.is-in .circled__ring path { stroke-dashoffset: 0; transition-delay: 900ms; }
    @media (min-width: 900px) {
      .js .converge__word, .js .converge__line { transition: transform var(--t-reveal) var(--ease-grow), opacity var(--t-reveal); }
      .js .converge:not(.is-in) .converge__word--a { transform: translate(-5.3em, 1.1em) scale(.7); }
      .js .converge:not(.is-in) .converge__word--b { transform: scale(.7); }
      .js .converge:not(.is-in) .converge__word--c { transform: translate(5em, -1.1em) scale(.7); }
      .js .converge:not(.is-in) .converge__line { opacity: .6; transform: translateY(14px); }
    }
  }

  /* Transiciones de vista */
  @view-transition { navigation: auto; }
  /* Entre páginas: el header queda quieto, el contenido se funde y el título del índice viaja al H1 */
  html:not(.intro-vt) .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: page-out 260ms var(--ease-grow) both; }
  ::view-transition-new(root) { animation: page-in 560ms var(--ease-out) both; }
  ::view-transition-group(*) { animation-duration: 650ms; animation-timing-function: var(--ease-swoop); }
  ::view-transition-old(*):only-child, ::view-transition-new(*):only-child { animation-duration: 260ms; }
}

/* ==========================================================================
   Intro: el logo germina y vuela al header (una vez por sesión)
   ========================================================================== */
.splash { display: none; }
.intro-on { overflow: clip; }
.intro-on .splash {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 44%, var(--night-3), var(--night) 58%, #0c120f);
  color: var(--cream);
  cursor: pointer;
  animation: splash-safety 700ms 4.2s forwards;
}
.splash::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/img/textures/grain.png?v=314611a5b8") repeat; background-size: 128px; opacity: .07;
}
.splash__stage { position: relative; display: grid; justify-items: center; gap: .55rem; text-align: center; padding: 1rem; }
.splash__logo { width: min(40vmin, 232px); height: auto; overflow: visible; margin-bottom: 1.4rem; view-transition-name: ms-logo; }
.sp-fill { fill: #68906C; opacity: 0; transform-box: fill-box; transform-origin: center; scale: .88; }
.sp-ring { fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; rotate: -90deg; }
.sp-stem { fill: none; stroke: var(--cream); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-roots { clip-path: circle(0% at 46% 0%); }
.sp-leaf { transform-box: fill-box; opacity: 0; scale: .12; rotate: -24deg; }
.sp-leaf--small { transform-origin: 100% 100%; }
.sp-leaf--big { transform-origin: 0% 100%; }
.sp-m, .sp-s { opacity: 0; translate: 0 26px; filter: blur(9px); }
.splash__name { margin: 0; font-family: var(--ff-serif); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight: 340; letter-spacing: -.012em; line-height: 1.1; opacity: 0; translate: 0 14px; }
.splash__tag { margin: 0; font-size: .76rem; font-weight: 560; letter-spacing: .22em; white-space: nowrap; text-transform: uppercase; color: var(--leaf); opacity: 0; }
.on-mouse { display: none; }
@media (pointer: fine) { .on-mouse { display: inline; } .on-touch { display: none; } }
.splash__skip { position: absolute; bottom: calc(1.75rem + env(safe-area-inset-bottom)); margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); opacity: 0; }
.intro-on .sp-ring { animation: draw 1100ms var(--ease-draw) 150ms forwards; }
.intro-on .sp-stem { animation: draw 600ms var(--ease-grow) 520ms forwards; }
.intro-on .sp-roots { animation: roots-grow 1150ms var(--ease-grow) 700ms forwards; }
.intro-on .sp-leaf--small { animation: sp-unfurl 850ms var(--ease-unfurl) 980ms forwards; }
.intro-on .sp-leaf--big { animation: sp-unfurl 900ms var(--ease-unfurl) 1120ms forwards; }
.intro-on .sp-fill { animation: sp-fill 950ms var(--ease-out) 1250ms forwards; }
.intro-on .sp-m { animation: sp-letter 850ms var(--ease-out) 1420ms forwards; }
.intro-on .sp-s { animation: sp-letter 850ms var(--ease-out) 1540ms forwards; }
.intro-on .splash__name { animation: sp-rise 900ms var(--ease-out) 1680ms forwards; }
.intro-on .splash__tag { animation: sp-track 1100ms var(--ease-out) 1820ms forwards; }
.intro-on .splash__skip { animation: sp-hint 700ms 1400ms forwards; }
.splash.is-leaving { animation: splash-leave 650ms var(--ease-swoop) forwards; }
@keyframes roots-grow { to { clip-path: circle(150% at 46% 0%); } }
@keyframes sp-unfurl { to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes sp-fill { to { opacity: 1; scale: 1; } }
@keyframes sp-letter { to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes sp-rise { to { opacity: 1; translate: 0 0; } }
@keyframes sp-track { from { opacity: 0; transform: scaleX(1.25); } to { opacity: 1; transform: none; } }
@keyframes sp-hint { to { opacity: .75; } }
@keyframes splash-safety { to { opacity: 0; visibility: hidden; } }
@keyframes splash-leave { to { opacity: 0; scale: 1.04; } }

/* Salida con View Transitions: el logo viaja al header y la página se abre desde el centro */
::view-transition-group(ms-logo) { animation-duration: 1000ms; animation-timing-function: var(--ease-swoop); }
::view-transition-old(ms-logo), ::view-transition-new(ms-logo) { height: 100%; object-fit: contain; animation-duration: 1000ms; }
html.intro-vt::view-transition-image-pair(root) { isolation: auto; }
html.intro-vt::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.intro-vt::view-transition-new(root) { animation: vt-open 1100ms var(--ease-swoop) both; mix-blend-mode: normal; }
@keyframes vt-open { from { clip-path: circle(0% at 50% 44%); } to { clip-path: circle(150% at 50% 44%); } }

/* ==========================================================================
   Más movimiento: coreografía del hero, parallax, tinta, entradas, recompensas
   ========================================================================== */
@keyframes line-rise { from { translate: 0 108%; } to { translate: none; } }
@keyframes lift { from { translate: 0 18px; } to { translate: none; } }
@keyframes page-out { to { opacity: 0; translate: 0 -10px; } }
@keyframes page-in { from { opacity: 0; translate: 0 16px; } }
@keyframes arch-line { from { translate: 0 0; opacity: 0; } to { translate: 18px 18px; opacity: 1; } }
@keyframes develop { from { scale: 1.18; filter: brightness(.42) saturate(.7); } to { scale: 1.06; filter: none; } }
@keyframes drift { from { translate: 0 -2.5%; } to { translate: 0 2.5%; } }
@keyframes drift-soft { from { translate: 0 0; } to { translate: 0 5%; } }
@keyframes ink { from { opacity: .5; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: none; } }
@keyframes hero-out { to { translate: 0 -70px; opacity: .15; } }
@keyframes sheet-rise { from { translate: 0 4.5vh; } to { translate: none; } }
@keyframes come-close { from { scale: .86; opacity: .35; } to { scale: 1; opacity: 1; } }

[data-rise] > :nth-child(2) { --k: 1; } [data-rise] > :nth-child(3) { --k: 2; } [data-rise] > :nth-child(4) { --k: 3; }
[data-rise] > :nth-child(5) { --k: 4; } [data-rise] > :nth-child(6) { --k: 5; } [data-rise] > :nth-child(7) { --k: 6; }
[data-rise] > :nth-child(8) { --k: 7; } [data-rise] > :nth-child(n+9) { --k: 8; }

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: entra en capas; queda en pausa mientras corre la intro */
  .line__in { animation: line-rise 1150ms var(--ease-out) both; }
  .line:nth-child(1) .line__in { animation-delay: 140ms; }
  .line:nth-child(2) .line__in { animation-delay: 270ms; }
  .hero .kicker { animation: fade-up 800ms var(--ease-grow) 40ms both; }
  .hero__lead { animation: lift 1000ms var(--ease-out) 380ms both; }
  .hero__actions { animation: fade-up 900ms var(--ease-out) 520ms both; }
  .hero__areas { animation: fade-up 900ms var(--ease-out) 640ms both; }
  .arch img { animation: develop 1900ms var(--ease-out) 80ms both; }
  .intro-on .hero *, .intro-on .hero *::before, .intro-on .hero *::after { animation-play-state: paused !important; }
  .js .hero__visual:not(.is-in) :is(.arch-line, .arch img) { animation-play-state: paused; }

  /* Entradas escalonadas */
  .js [data-rise] > * { animation: rise-in 1000ms var(--ease-out) both paused; animation-delay: calc(var(--k, 0) * 90ms); }
  .js [data-rise].is-in > * { animation-play-state: running; }
  .js [data-rise]:has(> :target) > * { animation: none; }

  @supports (animation-timeline: view()) {
    /* Parallax dentro de cada foto */
    .window img, .scard img { scale: 1.06; animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .scard:hover img, .scard:focus-within img { scale: 1.1; }
    .about .window img { scale: none; animation: none; }
    .arch img { animation: develop 1900ms var(--ease-out) 80ms both, drift-soft linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
    /* Tinta: las palabras se encienden a medida que llegan al centro */
    .ink .w { animation: ink linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 1.5%) entry calc(55% + var(--i) * 1.2%); }
    /* Profundidad: el hero se aleja, la hoja sube sobre el suelo, «Menos atajos» se acerca */
    .hero__copy { animation: hero-out linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; }
    .sheet { animation: sheet-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .criterio .statement { animation: come-close linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}

/* ---------- Movimiento reducido: estados finales, sin dibujos ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .bp-roots, .bp-stem, .bp-leaf-small, .bp-leaf-big, .bp-circle, .bp-m, .bp-s, .bp-seed { transition: opacity 200ms linear !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Colores forzados ---------- */
@media (forced-colors: active) {
  .btn, .chip, .fcard, .pill-radio span, .rcard, .lab, .scard, .pcard, .status, .wa-bubble, .cta-contact, .start-point { border: 1px solid CanvasText; }
  .fcard[aria-pressed="true"] .fcard__node, .chip[aria-pressed="true"], .pill-radio input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .horizon, .network, .strike__line, .circled__ring { forced-color-adjust: auto; }
  main > section::before, main > .next-page::before, .site-footer::before { display: none; }
  .fcard:not([aria-pressed="true"]) .fcard__node .icon { visibility: hidden; }
  .vial__fill { forced-color-adjust: none; background: CanvasText; }
  .battery__label, .battery__rlabel { fill: CanvasText; }
  .bead { fill: Canvas; stroke: CanvasText; }
  .tab { border: 1px solid CanvasText; }
  .tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .rcard--ghost { border-style: dashed; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .menu, .wa-bubble, .bottombar, .horizon, .network, .battery, .chips, .skip-link, .hero__light, .route, .window, .arch, .scard picture, .start-point__actions { display: none !important; }
  body, .chapter--night, .site-footer, .sheet, .scard, .pcard { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  [data-theme="dark"] { color: #000; }
  .scard { aspect-ratio: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  details > *:not(summary) { display: block !important; }
  .js .nojs-notes, .js .iron-notice { display: block !important; }
  main > section { content-visibility: visible; padding-block: 1.5rem; break-inside: avoid-page; }
}