/* TERRAVEX · sitio informativo — base compartida por todas las páginas (a partir de la v4 aceptada).
   Tokens en OKLCH. Los colores de las plantas proceden de las imágenes de referencia.
   Verde forestal para la causa, el encabezado y el cierre; papel cálido para leer;
   marrón solo para el suelo y el humus. Archivo es la familia principal; Newsreader,
   un acento editorial en pocas frases. */

/* Fuentes alojadas con el sitio (SIL Open Font License 1.1; licencias en assets/fuentes/).
   Archivo variable (anchura 62–125 %, peso 300–900) y Newsreader cursiva variable (peso 400–600). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; src: url("fuentes/archivo-latin.woff2") format("woff2"); 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: "Archivo"; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; src: url("fuentes/archivo-latin-ext.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("fuentes/newsreader-italic-latin.woff2") format("woff2"); 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: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("fuentes/newsreader-italic-latin-ext.woff2") format("woff2"); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Respaldos con métricas ajustadas a Archivo y Newsreader (medidas en Chromium):
   mientras llegan las fuentes, el texto ocupa casi lo mismo y la portada no salta. */
@font-face { font-family: "Archivo Respaldo"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; size-adjust: 98.7%; ascent-override: 89.2%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 699; size-adjust: 96.7%; ascent-override: 91%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 700 900; size-adjust: 101.9%; ascent-override: 86.4%; descent-override: 20.6%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Respaldo"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 94%; ascent-override: 78.7%; descent-override: 28.7%; line-gap-override: 0%; }

:root {
  --paper: oklch(97.2% .013 84);
  --bone: oklch(94.6% .022 84);
  --ink: oklch(24% .036 166);
  --ink-2: oklch(40% .03 160);
  --rule: oklch(24% .036 166 / .14);

  --humus: oklch(21% .022 52);
  --humus-2: oklch(27% .03 52);
  --forest: oklch(29% .052 165);
  --forest-2: oklch(34% .058 160);
  --forest-deep: oklch(22.5% .042 170);
  --surco: oklch(78% .105 72);
  --surco-2: oklch(68% .12 62);
  --arcilla: oklch(50% .12 46);
  --hoja: oklch(52% .12 145);

  --lima: oklch(84% .19 128);
  --agua: oklch(72% .12 215);
  --agua-osc: oklch(52% .11 225);
  --brasa: oklch(66% .18 40);

  --on-dark: oklch(95% .018 84);
  --on-dark-2: oklch(84% .028 84);

  --f-display: "Archivo", "Archivo Respaldo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-text: "Archivo", "Archivo Respaldo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-acento: "Newsreader", "Newsreader Respaldo", Georgia, "Times New Roman", serif;
  --t-h1: clamp(2.45rem, 1.15rem + 4.1vw, 4.7rem);
  --t-h2: clamp(1.95rem, 1.2rem + 2.5vw, 3.4rem);
  --t-h3: clamp(1.25rem, 1.08rem + .6vw, 1.6rem);
  --t-lead: clamp(1.18rem, 1.08rem + .35vw, 1.38rem);
  --t-body: clamp(1.125rem, 1.07rem + .15vw, 1.1875rem);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --gutter: clamp(1rem, .4rem + 2.6vw, 4rem);
  --maxw: 84rem;
  --medida: 64ch;
  --hdr-top: 10px;
  --hdr-h: 60px;
  --hdr-space: calc(var(--hdr-top) + var(--hdr-h) + 14px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-space) + 16px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 760; line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--surco); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: var(--paper); font: 600 .95rem var(--f-display); border-radius: 8px; }
.skip:focus { top: calc(var(--hdr-space) + 4px); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow { font: 650 .8rem/1.35 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; }
.acento { font-family: var(--f-acento); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.012em; }
.texto { max-width: var(--medida); }
.texto > p + p { margin-top: 1em; }
.nota { font-size: .95rem; line-height: 1.55; color: var(--fg-2, var(--ink-2)); }

/* Zonas de color planas: cada sección declara su tono. */
.zona { position: relative; background-color: var(--bg); color: var(--fg); }
.z-paper { --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --rule: oklch(24% .036 166 / .14); --focus: var(--ink); }
.z-bone { --bg: var(--bone); --fg: var(--ink); --fg-2: var(--ink-2); --rule: oklch(24% .036 166 / .16); --focus: var(--ink); }
.z-forest { --bg: var(--forest); --fg: var(--on-dark); --fg-2: var(--on-dark-2); --rule: oklch(94% .02 84 / .18); --focus: var(--lima); }
.z-deep { --bg: var(--forest-deep); --fg: var(--on-dark); --fg-2: var(--on-dark-2); --rule: oklch(94% .02 84 / .16); --focus: var(--lima); }
.z-humus { --bg: var(--humus); --fg: var(--on-dark); --fg-2: var(--on-dark-2); --rule: oklch(94% .02 84 / .14); --focus: var(--lima); }

/* ---------- Botones y enlaces ---------- */
.btn {
  --btn-bg: var(--forest); --btn-fg: var(--on-dark);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .8rem 1.4rem;
  border: 0; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  font: 650 1rem/1.15 var(--f-display); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn::after { content: "→"; display: inline-block; transition: transform 240ms var(--ease-out); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover::after { transform: translateX(4px); } .btn:hover { --btn-bg: var(--forest-2); } }
.btn-sm { min-height: 2.6rem; padding: .55rem 1.1rem; font-size: .95rem; }
.btn-sm::after { content: none; }
.btn-lima { --btn-bg: var(--lima); --btn-fg: var(--ink); }
.btn-surco { --btn-bg: var(--surco); --btn-fg: var(--ink); }
.btn-claro { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn-linea { --btn-bg: transparent; --btn-fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn-lima:hover { --btn-bg: oklch(89% .17 128); }
  .btn-surco:hover { --btn-bg: oklch(84% .1 74); }
  .btn-claro:hover { --btn-bg: oklch(99% .008 84); }
  .btn-linea:hover { --btn-bg: color-mix(in oklch, currentColor 8%, transparent); }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em; min-height: 2.75rem;
  font: 650 1rem/1.25 var(--f-display);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition: text-decoration-color 200ms ease;
}
.link-arrow::after { content: "→"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { text-decoration-color: currentColor; } .link-arrow:hover::after { transform: translateX(4px); } }

.estado { display: inline-flex; align-items: center; gap: .55rem; font: 600 .92rem/1.35 var(--f-display); }
.estado::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--estado, var(--surco-2)); box-shadow: 0 0 0 4px color-mix(in oklch, var(--estado, var(--surco-2)) 22%, transparent); }
.pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem .42rem .8rem; border-radius: 999px;
  font: 650 .84rem var(--f-display); letter-spacing: .02em;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, currentColor 45%, transparent);
}
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pill, var(--surco)); }

/* ---------- Encabezado compartido: cápsula fija ---------- */
.site-header {
  --hdr-bg: oklch(97.2% .013 84 / .95);
  position: fixed; z-index: 50; top: var(--hdr-top); left: max(.6rem, calc(var(--gutter) - 1rem)); right: max(.6rem, calc(var(--gutter) - 1rem));
  height: var(--hdr-h);
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem);
  padding: 0 .55rem 0 .9rem; border-radius: 999px;
  background: var(--hdr-bg); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px oklch(24% .036 166 / .08), 0 14px 34px -22px oklch(20% .03 160 / .55);
  transition: background-color 300ms ease, color 300ms ease;
  view-transition-name: tvx-cabecera;
}
.site-header[data-tone="dark"] { --hdr-bg: oklch(24% .045 168 / .94); color: var(--on-dark); --focus: var(--lima); box-shadow: 0 0 0 1px oklch(94% .02 84 / .1), 0 14px 34px -22px oklch(10% .02 160 / .8); }
.brand-wrap { position: relative; display: flex; align-items: center; gap: .35rem; margin-right: auto; }
.brand { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding-right: .25rem; text-decoration: none; border-radius: 999px; }
.brand-mark-box { position: relative; display: block; width: 2.6rem; aspect-ratio: 1000 / 960; transition: opacity 180ms ease; }
.simbolo { width: 100%; height: auto; aspect-ratio: 1000 / 960; overflow: visible; }
.brand-mark .bm-planta { transform-box: fill-box; transform-origin: 50% 100%; }
.wordmark { position: relative; z-index: 2; font: 820 1.28rem/1 var(--f-display); font-stretch: 108%; letter-spacing: .02em; }
.logo-lienzo { position: absolute; z-index: 1; pointer-events: none; left: 0; top: 0; width: 0; height: 0; }
.brand.is-particulas .brand-mark-box { opacity: 0; }

.logo-pausa {
  position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, currentColor 30%, transparent);
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out);
}
.logo-pausa[hidden] { display: none; } /* sin JavaScript o con movimiento reducido no hay nada que pausar */
.logo-pausa::before { content: ""; position: absolute; inset: -8px; } /* área táctil de 44 px */
.logo-pausa .ic { width: .62rem; height: .62rem; fill: currentColor; }
.logo-pausa .ic-play { display: none; }
.logo-pausa[aria-pressed="true"] .ic-pausa { display: none; }
.logo-pausa[aria-pressed="true"] .ic-play { display: block; }
.logo-pausa[aria-pressed="true"] { background: color-mix(in oklch, currentColor 12%, transparent); }
.logo-pausa:active { transform: scale(.94); }
.logo-pausa-tip {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; white-space: nowrap; pointer-events: none;
  padding: .35rem .6rem; border-radius: .5rem; background: var(--ink); color: var(--paper); font: 600 .74rem var(--f-display);
  opacity: 0; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms var(--ease-out);
}
.site-header[data-tone="dark"] .logo-pausa-tip { background: var(--paper); color: var(--ink); }
.logo-pausa:focus-visible .logo-pausa-tip { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .logo-pausa:hover .logo-pausa-tip { opacity: 1; transform: none; transition-delay: 400ms; } .logo-pausa:hover { box-shadow: inset 0 0 0 1.5px currentColor; } }
@media (prefers-reduced-motion: reduce) { .logo-pausa { display: none !important; } }

.nav { display: flex; gap: clamp(.15rem, .8vw, .8rem); }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .6rem;
  font: 600 .98rem/1 var(--f-display); text-decoration: none; border-radius: 999px;
}
.nav a::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .55rem; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0; transform: scaleX(.3); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
}
.nav a[aria-current="page"]::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { opacity: .45; transform: none; } }
.hdr-cta { --btn-bg: var(--forest); --btn-fg: var(--on-dark); }
.site-header[data-tone="dark"] .hdr-cta { --btn-bg: var(--lima); --btn-fg: var(--ink); }

.menu-btn {
  display: none; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .9rem 0 .8rem;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 .98rem/1 var(--f-display);
}
.menu-btn-lines { display: grid; gap: 5px; width: 20px; }
.menu-btn-lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-btn-lines i:last-child { width: 70%; }

@media (max-width: 999px) {
  :root { --hdr-h: 54px; --hdr-top: 8px; }
  .nav, .hdr-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .brand-mark-box { width: 2.25rem; }
  .wordmark { font-size: 1.12rem; }
  .site-header { padding-left: .7rem; padding-right: .3rem; }
}
@media (max-width: 370px) {
  .no-js { --hdr-space: 168px; }
  .site-header { gap: .3rem; padding-left: .55rem; }
  .brand { gap: .45rem; }
  .brand-mark-box { width: 2rem; }
  .wordmark { font-size: 1rem; letter-spacing: .01em; }
  .menu-btn { padding: 0 .7rem 0 .6rem; gap: .45rem; }
}
/* Sin JavaScript, en móvil: la navegación queda visible como fila desplazable */
@media (max-width: 999px) {
  .no-js .site-header { height: auto; flex-wrap: wrap; padding: .35rem .7rem .4rem; border-radius: 1.4rem; row-gap: 0; }
  .no-js .menu-btn { display: none; }
  .no-js .nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; gap: 0 .1rem; margin-left: -.5rem; }
  .no-js .nav a { flex: none; min-height: 2.5rem; padding: 0 .5rem; font-size: .95rem; }
  .no-js { --hdr-space: 132px; }
}

/* ---------- Menú móvil ---------- */
.menu-sheet {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  padding: .9rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--forest-deep); color: var(--on-dark); --focus: var(--lima);
  opacity: 0; transition: opacity 200ms ease;
}
.menu-sheet.is-open { opacity: 1; }
.menu-sheet[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu-marca { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; font: 650 1rem var(--f-display); text-decoration: none; border-radius: 999px; padding-right: .5rem; }
.menu-simbolo { width: 2.4rem; }
.menu-marca[aria-current="page"] span:last-child { text-decoration: underline; text-underline-offset: .25em; }
.menu-close { min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px; background: color-mix(in oklch, var(--on-dark) 12%, transparent); cursor: pointer; font: 650 .95rem var(--f-display); }
.menu-nav { display: grid; align-content: center; }
.menu-link {
  display: grid; gap: .2rem; padding: 1rem 0; text-decoration: none;
  border-top: 1px solid oklch(94% .02 84 / .16);
  opacity: 0; transform: translateY(10px);
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out);
}
.menu-link:last-child { border-bottom: 1px solid oklch(94% .02 84 / .16); }
.menu-sheet.is-open .menu-link { opacity: 1; transform: none; }
.menu-sheet.is-open .menu-link:nth-child(2) { transition-delay: 40ms; }
.menu-sheet.is-open .menu-link:nth-child(3) { transition-delay: 80ms; }
.menu-sheet.is-open .menu-link:nth-child(4) { transition-delay: 120ms; }
.menu-link .t { font: 760 clamp(1.7rem, 1.2rem + 2.4vw, 2.3rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.menu-link .d { font-size: 1rem; color: var(--on-dark-2); }
.menu-link[aria-current="page"] .t { color: var(--lima); }
.menu-link[aria-current="page"] .t::after { content: " · aquí"; font-size: .5em; font-weight: 600; letter-spacing: 0; vertical-align: .3em; }
.menu-pie { display: grid; gap: .75rem; justify-items: start; }
.menu-more { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.menu-more a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 600 1.02rem var(--f-display); text-underline-offset: .3em; }
.menu-more a[aria-current="page"] { color: var(--lima); }

/* ---------- Pie compartido: marca compacta y tres grupos ---------- */
.site-footer { background: var(--forest-deep); color: var(--on-dark-2); --focus: var(--lima); padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(1.75rem + env(safe-area-inset-bottom)); }
.pie-in { display: grid; gap: 2.25rem 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid oklch(94% .02 84 / .14); }
.pie-logo { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; color: var(--on-dark); text-decoration: none; border-radius: 999px; padding-right: .4rem; }
.pie-simbolo { width: 3.4rem; flex: none; }
.pie-logo .wordmark { font-size: 1.45rem; }
.pie-proposito { margin-top: 1rem; max-width: 30ch; font-size: 1.05rem; line-height: 1.5; color: var(--on-dark); }
.pie-h { font: 650 .76rem var(--f-display); letter-spacing: .13em; text-transform: uppercase; color: var(--surco); margin-bottom: .5rem; }
.pie-grupo ul { display: grid; }
.pie-grupo a { display: inline-flex; align-items: center; min-height: 2.6rem; font: 500 1.02rem var(--f-display); color: var(--on-dark); text-decoration: none; }
.pie-grupo a:hover { text-decoration: underline; text-underline-offset: .25em; }
.pie-grupo a[aria-current="page"] { color: var(--lima); }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.25rem; font-size: .95rem; }
@media (min-width: 640px) { .pie-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .pie-in { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } .pie-marca { grid-column: auto; } }

/* ---------- Transición entre páginas: un fundido breve, sin desplazar la página ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 120ms ease both vt-sale; }
::view-transition-new(root) { animation: 200ms ease both vt-entra; }
@keyframes vt-sale { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Revelados discretos ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out-expo); transition-delay: calc(var(--d, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* nada queda pendiente de un revelado */
  .menu-link { transform: none !important; transition: opacity 120ms ease !important; }
  .btn:active, .logo-pausa:active { transform: none; }
}