/* ==========================================================================
   Craft — People & Growth · sitio de una página
   Hoja de estilos única, fluida entre 320 px y 1920 px.
   Tokens: design system "Craft" (tokens.json v1) + paleta oscura aprobada
   en la landing (D14/D16). Modo claro/oscuro automático por prefers-color-scheme.
   ========================================================================== */

/* ---------- 1. Fuentes locales (OFL) ---------- */
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Italic-Variable.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Paleta (tokens.json) */
  --indigo-900: #1f2038;
  --indigo-700: #34365b;
  --indigo-500: #4f5280;
  --indigo-300: #9a9cb8;
  --indigo-100: #e4e5ee;
  --turquesa-700: #137a73;
  --turquesa-600: #19847c;
  --turquesa-500: #20a99e;
  --turquesa-300: #8fd6cf;
  --turquesa-100: #e3f5f3;
  --damasco-700: #a85a34;
  --damasco-600: #be5826;
  --damasco-500: #e9ae91;
  --damasco-300: #f3d0be;
  --damasco-100: #fbefe8;
  --neutro-900: #1b1b1b;
  --neutro-700: #4a4d5e;
  --neutro-500: #7c7f91; /* sólo texto grande, líneas e íconos: nunca texto corrido */
  --neutro-300: #c5c8d2;
  --neutro-200: #e1e3ea;
  --neutro-100: #f2f4f7;
  --neutro-0: #ffffff;

  /* Semánticos · tema claro */
  --text-primary: var(--indigo-700);
  --text-secondary: var(--neutro-700);
  --text-on-dark: var(--neutro-0);
  --text-accent: var(--turquesa-600);
  --text-warm: var(--damasco-700);
  --bg-page: var(--neutro-0);
  --bg-subtle: var(--neutro-100);
  --bg-dark: var(--indigo-700);
  --bg-tint-teal: var(--turquesa-100);
  --bg-tint-warm: var(--damasco-100);
  --border-default: var(--neutro-200);
  --border-strong: var(--neutro-300);
  --stat-num: var(--turquesa-700);
  --step-bg: var(--indigo-700);
  --step-ink: var(--neutro-0);
  --btn-primary-bg: var(--indigo-700);
  --btn-primary-bg-hover: var(--indigo-900);
  --btn-primary-ink: var(--neutro-0);
  --btn-secondary-ink: var(--indigo-700);
  --btn-secondary-border: var(--indigo-700);
  --btn-secondary-bg-hover: var(--indigo-100);
  --focus-ring: var(--turquesa-600);
  --header-bg: rgba(255, 255, 255, 0.86);
  --logo-ink: var(--indigo-700);     /* wordmark del logo principal */
  --logo-persona: var(--turquesa-500); /* pieza "persona" del símbolo en el logo */
  --selection-bg: var(--turquesa-100);

  /* Tipografía */
  --font-display: "Quicksand", "Aptos Display", Calibri, Arial, sans-serif;
  --font-text: "Nunito", Aptos, Calibri, Arial, sans-serif;

  /* Escala fluida: interpola entre 390 px (celular) y 1440 px (escritorio) */
  --fs-h1: clamp(2rem, 1.814rem + 0.762vw, 2.5rem);          /* 32 → 40 */
  --fs-h1-xl: clamp(2rem, 1.35rem + 1.7vw, 3rem);            /* 32 → 48 (sólo el símbolo) */
  --fs-h2: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);       /* 24 → 28 */
  --fs-h3: 1.25rem;                                          /* 20 */
  --fs-lead: clamp(1.0625rem, 1.04rem + 0.095vw, 1.125rem);  /* 17 → 18 */
  --fs-body: 1.0625rem;                                      /* 17 */
  --fs-small: 0.875rem;                                      /* 14 */

  /* Espaciado */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --gutter: clamp(20px, -17.1px + 9.52vw, 120px);            /* 20 → 120 */
  --section-y: clamp(56px, 41.1px + 3.81vw, 96px);           /* 56 → 96 */
  --block-gap: clamp(32px, 26px + 1.52vw, 48px);             /* 32 → 48 */
  --radius: 14px;
  --radius-lg: 28px;
  --radius-img: clamp(14px, 8.8px + 1.33vw, 28px);           /* 14 → 28 */
  --radius-pill: 999px;
  --header-h: clamp(72px, 63px + 2.29vw, 96px);              /* 72 → 96 */
}

/* Tema oscuro: paleta aprobada en la landing (fondo índigo 900, acentos turquesa 300 y damasco 500) */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: var(--neutro-100);
    --text-secondary: var(--neutro-300);
    --text-accent: var(--turquesa-300);
    --text-warm: var(--damasco-500);
    --bg-page: var(--indigo-900);
    --bg-subtle: #282a47;
    --bg-tint-teal: #1d3b47;
    --bg-tint-warm: #3a2d38;
    --border-default: var(--indigo-700);
    --border-strong: var(--indigo-500);
    --stat-num: var(--turquesa-300);
    --step-bg: var(--turquesa-300);
    --step-ink: var(--indigo-900);
    --btn-primary-bg: var(--damasco-500);
    --btn-primary-bg-hover: var(--damasco-300);
    --btn-primary-ink: var(--indigo-900);
    --btn-secondary-ink: var(--neutro-100);
    --btn-secondary-border: var(--neutro-300);
    --btn-secondary-bg-hover: #282a47;
    --focus-ring: var(--damasco-500);
    --header-bg: rgba(31, 32, 56, 0.86);
    --logo-ink: var(--neutro-0);
    --logo-persona: var(--neutro-0); /* como en craft-logo-invertido-transparente.svg */
    --selection-bg: #1d3b47;
  }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--selection-bg); color: var(--text-primary); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--turquesa-700); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--space-2); top: -100px;
  background: var(--bg-dark); color: var(--text-on-dark);
  padding: 12px 16px; border-radius: var(--radius); font-weight: 700; z-index: 100;
}
.skip-link:focus { top: var(--space-2); }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Tipografía ---------- */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 700; font-size: 0.75rem; line-height: 1.3;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-accent); margin: 0;
}
.h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 0; text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.25;
  color: var(--text-primary); margin: 0; text-wrap: balance;
}
.h3 {
  font-family: var(--font-text); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.3;
  color: var(--text-accent); margin: 0;
}
.lead {
  font-size: var(--fs-lead); line-height: 1.5;
  color: var(--text-secondary); margin: 0; max-width: 62ch;
}
.heading { display: grid; gap: var(--space-1); }
.section { padding-block: var(--section-y); }
.section--subtle { background: var(--bg-subtle); }
.stack { display: grid; gap: var(--block-gap); }

/* ---------- 5. Botones ---------- */
.btn {
  font-family: var(--font-text); font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 14px 22px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; text-align: center; min-height: 48px;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-ink); }
.btn--secondary { background: transparent; color: var(--btn-secondary-ink); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-ink); }
.btn--on-dark { background: var(--damasco-500); color: var(--indigo-900); }
.btn--on-dark:hover { background: var(--damasco-300); color: var(--indigo-900); }
.on-dark .btn:focus-visible { outline-color: var(--damasco-500); }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-default);
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.brand { display: flex; align-items: center; gap: 28px; min-width: 0; }
.brand a { display: flex; border-radius: 6px; }
.logo { height: clamp(40px, 37px + 0.76vw, 48px); width: auto; }
.logo .lg-ink { fill: var(--logo-ink); }
.logo .lg-persona { fill: var(--logo-persona); }
.brand-divider { width: 1px; height: 32px; background: var(--border-default); }
.brand-tagline { font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 899.98px) {
  .brand-divider, .brand-tagline { display: none; }
}
@media (max-width: 359.98px) {
  .site-header .btn { padding-inline: 14px; font-size: 0.9375rem; }
}

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(32px, 17px + 3.81vw, 72px) var(--section-y); }
.hero .wrap {
  display: grid; gap: clamp(20px, 4vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.hero-text { display: grid; gap: clamp(20px, 2vw, 24px); }
.hero-text .btn { justify-self: start; margin-top: var(--space-1); }
.hero-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-img); margin-top: 12px;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
  .hero-img { margin-top: 0; }
}
@media (max-width: 599.98px) {
  .hero-text .btn { justify-self: stretch; }
}

/* ---------- 8. El símbolo (escena con scroll) ----------
   Dos piezas que encajan: turquesa = la persona, damasco = la organización,
   el canal en S = la lectura. El progreso lo fija el script en --p (0 → 1);
   sin JavaScript, o con "reducir movimiento", se muestra armado. */
.scene {
  --p-lines: 1; --p-fit: 1; --p-end: 1;
  background: var(--bg-subtle);
}
.scene-sticky { padding-block: var(--section-y); }
.scene-grid {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.scene-text { display: grid; gap: var(--space-3); }
.scene-title { display: grid; gap: 4px; font-size: var(--fs-h1-xl); line-height: 1.15; }
@media (max-width: 439.98px) { .scene-title { font-size: 1.625rem; } .scene-text { gap: var(--space-2); } }
.scene-title span { display: flex; align-items: center; gap: 14px; }
.scene-title .dot {
  flex: 0 0 auto; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--turquesa-500);
}
.scene-title .dot--org { background: var(--damasco-500); }
.scene-title .line--persona { opacity: clamp(0, calc(var(--p-lines) * 2), 1); }
.scene-title .line--org { opacity: clamp(0, calc(var(--p-lines) * 2 - 0.6), 1); }
.scene-title span { transform: translateY(calc((1 - var(--p-lines)) * 12px)); }
.scene-lead { opacity: var(--p-end); transform: translateY(calc((1 - var(--p-end)) * 12px)); }
.scene-note { font-size: var(--fs-small); color: var(--text-secondary); margin: 0; opacity: var(--p-end); }

.scene-art {
  position: relative;
  width: min(100%, 440px, 42svh); aspect-ratio: 1; margin-inline: auto;
}
.scene-art svg { width: 100%; height: 100%; overflow: visible; }
.piece { transform-box: fill-box; transform-origin: center; will-change: transform; }
.piece--persona {
  transform: translate(calc(-26% * (1 - var(--p-fit))), calc(-22% * (1 - var(--p-fit))))
             rotate(calc(-14deg * (1 - var(--p-fit))));
}
.piece--org {
  transform: translate(calc(22% * (1 - var(--p-fit))), calc(24% * (1 - var(--p-fit))))
             rotate(calc(12deg * (1 - var(--p-fit))));
}
.scene-tag {
  position: absolute; margin: 0;
  font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-page);
  padding: 6px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.scene-tag--persona { left: 2%; top: 0; opacity: clamp(0, calc(1.2 - var(--p-fit) * 1.6), 1); }
.scene-tag--org { right: 0; bottom: 2%; opacity: clamp(0, calc(1.2 - var(--p-fit) * 1.6), 1); }
.scene-tag--lectura {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--text-primary); border-color: var(--border-strong);
  opacity: var(--p-end);
}
@media (min-width: 900px) {
  .scene-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .scene-art { width: min(100%, 520px); }
}
/* Con JavaScript la escena se vuelve alta y pegajosa: el scroll arma el símbolo. */
.js .scene { height: 260vh; height: 260svh; }
.js .scene-sticky {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; padding-block: calc(var(--header-h) + 16px) 16px;
}
@media (min-width: 900px) { .js .scene-sticky { padding-block: calc(var(--header-h) + 24px) 24px; } }
.js .scene-title span, .js .scene-lead, .js .scene-tag { transition: opacity .15s linear; }
@media (prefers-reduced-motion: reduce) {
  .scene { --p-lines: 1 !important; --p-fit: 1 !important; --p-end: 1 !important; height: auto !important; }
  .scene-sticky { position: static !important; min-height: 0 !important; padding-block: var(--section-y) !important; }
  .scene-tag--persona, .scene-tag--org { display: none; }
}
/* Pantallas bajas (celular apaisado, ventanas chicas): sin escena pegajosa, símbolo armado */
@media (max-height: 560px), (max-height: 640px) and (max-width: 899.98px) {
  .js .scene { height: auto; }
  .js .scene-sticky { position: static; min-height: 0; padding-block: var(--section-y); }
  .js .scene { --p-lines: 1 !important; --p-fit: 1 !important; --p-end: 1 !important; }
  .scene-tag--persona, .scene-tag--org { display: none; }
}

/* ---------- 9. Servicios: continuo persona → equipo → organización ---------- */
.continuum { display: grid; gap: var(--space-3); counter-reset: etapa; }
.stage { counter-increment: etapa; display: grid; gap: var(--space-1); align-content: start; }
.stage-label {
  display: flex; align-items: center; gap: var(--space-1); margin: 0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}
.stage-label::before { content: counter(etapa) " · "; }
@media (min-width: 900px) {
  .continuum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .stage-label::before { content: none; }
  .stage-label::after {
    content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--border-strong);
    transform-origin: left; transform: scaleX(var(--axis, 1)); transition: transform .9s cubic-bezier(.2,.7,.2,1);
  }
  .stage:last-child .stage-label::after { display: none; }
  .js .continuum:not(.is-in) .stage-label::after { --axis: 0; }
}

.card {
  background: var(--bg-subtle); border-radius: var(--radius); padding: var(--space-3);
  display: grid; gap: 12px; align-content: start;
  transition: transform .25s ease, background-color .25s ease;
}
.section--subtle .card { background: var(--bg-page); }
.card--teal { background: var(--bg-tint-teal); }
.card--warm { background: var(--bg-tint-warm); }
.card p { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.5; }
.card .h3 { font-size: 1.25rem; }
.card-out { display: grid; gap: 4px; padding-top: 4px; }
.card-out .eyebrow { font-size: 0.6875rem; color: var(--text-secondary); }
.card-out p { color: var(--text-primary); font-weight: 600; font-size: 0.875rem; }
@media (hover: hover) { .card:hover { transform: translateY(-2px); } }

.taller {
  width: 100%; height: auto; object-fit: cover;
  aspect-ratio: 1200 / 520; border-radius: var(--radius-img);
}
@media (max-width: 700px) { .taller { aspect-ratio: 350 / 200; } }

/* ---------- 10. Cómo trabajamos ---------- */
.steps {
  display: grid; gap: 28px; counter-reset: paso; list-style: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr);
}
.steps li { counter-increment: paso; display: grid; gap: 6px; align-content: start; }
.steps li::before {
  content: counter(paso);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--step-bg); color: var(--step-ink);
}
.steps strong { font-size: 1rem; color: var(--text-primary); }
.steps p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }

/* ---------- 11. Por qué Craft ---------- */
.why .wrap { display: grid; gap: var(--space-3); align-items: center; grid-template-columns: minmax(0, 1fr); }
.why-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-img); }
.why-text { display: grid; gap: var(--space-3); }
.why-cards { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.why-cards .h3 { font-size: 1.1875rem; }
@media (min-width: 600px) { .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .why .wrap { grid-template-columns: minmax(320px, 520px) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 64px); }
  .why-text { gap: var(--space-4); }
  .why-heading { display: contents; }
}
@media (max-width: 999.98px) {
  /* En celular: título, imagen y tarjetas, como el artboard de 390 */
  .why-heading { order: -1; }
}

/* ---------- 12. Por qué ahora: cifras con fuente ---------- */
.stats { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.stat { display: grid; gap: 4px; align-content: start; }
.stat-num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 2.2rem + 0.76vw, 2.75rem);
  line-height: 1; color: var(--stat-num); font-variant-numeric: tabular-nums;
}
.stat-text { font-size: 0.9375rem; line-height: 1.4; color: var(--text-secondary); }
.stat-src { font-size: 0.8125rem; color: var(--text-secondary); }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h2--wide { max-width: 820px; }

/* ---------- 13. Quiénes ---------- */
.who .wrap { display: grid; gap: var(--space-3); align-items: center; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.who-photo { width: min(280px, 72vw); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.who-text { display: grid; gap: var(--space-3); max-width: 600px; }
.who-role { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text-accent); }
.who-claim { margin: 0; font-size: 1.25rem; line-height: 1.45; font-weight: 600; color: var(--text-primary); }
.who-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--text-secondary); }
.who-note { margin: 0; color: var(--text-secondary); }
.who-card .eyebrow { color: var(--text-warm); }
.who-card p { font-size: 1rem; }
@media (min-width: 900px) {
  .who .wrap { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 80px); }
  .who-photo { width: 100%; max-width: 440px; }
  .who-text { gap: 32px; }
}

/* ---------- 14. Contacto + pie ---------- */
.contact { background: var(--bg-dark); color: var(--text-on-dark); position: relative; overflow: hidden; }
.contact .eyebrow { color: var(--damasco-500); }
.contact .h1, .contact .h2 { color: var(--text-on-dark); }
.contact .lead { color: var(--indigo-100); }
.contact-motif {
  position: absolute; pointer-events: none; opacity: 0.14;
  right: clamp(-120px, -8vw, -180px); top: clamp(24px, 3vw, 40px);
  width: clamp(300px, 43vw, 620px); height: auto;
}
.contact-body {
  position: relative; display: grid; gap: var(--space-4); max-width: 880px;
  padding-block: clamp(64px, 46px + 4.57vw, 112px) var(--section-y);
}
.contact-body .heading { gap: 16px; }
.contact-items { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
.contact-items li { display: flex; align-items: center; gap: 10px; }
.contact-items svg { flex: 0 0 auto; }
.contact-items a { color: var(--text-on-dark); }
.contact-items a:hover { color: var(--damasco-500); }

.site-footer {
  position: relative; border-top: 1px solid var(--indigo-500);
  padding-block: 32px 40px;
}
.site-footer .wrap { display: flex; flex-direction: column; gap: 14px; }
.footer-brand { display: grid; gap: 14px; justify-items: start; }
.footer-logo { height: clamp(44px, 42px + 0.4vw, 48px); width: auto; }
.footer-tagline { font-size: 1rem; font-weight: 600; color: var(--indigo-100); }
.footer-meta { display: grid; gap: 6px; font-size: 0.875rem; color: var(--indigo-100); }
.footer-meta strong { color: var(--text-on-dark); }
@media (min-width: 700px) {
  .site-footer { padding-block: 40px 48px; }
  .site-footer .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .footer-meta { text-align: right; }
}

/* ---------- 15. Aparición al hacer scroll (progresiva) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .08s; }
.js .reveal:nth-child(3) { transition-delay: .16s; }
.js .reveal:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- 16. Impresión ---------- */
@media print {
  .site-header, .skip-link, .scene-tag { display: none; }
  .js .scene { height: auto; }
  .js .scene-sticky { position: static; min-height: 0; }
  .contact { background: #fff; color: var(--indigo-700); }
  .contact .h1, .contact .lead, .footer-meta, .footer-tagline { color: var(--indigo-700); }
}