/* ==========================================================================
   ACEC — Aprendo como en casa
   Hoja de estilos principal · aprendocomoencasa.com
   --------------------------------------------------------------------------
   ÍNDICE
   00. Fuentes
   01. Tokens de diseño (color, tipografía, espacio, radios, sombras)
   02. Reset y base
   03. Accesibilidad (focus, skip-link, reduced-motion)
   04. Tipografía y utilidades de texto
   05. Layout: contenedores, rejilla, secciones
   06. Header y navegación
   07. Selector de idioma
   08. Botones y enlaces de acción
   09. Etiquetas / kickers / rules
   10. Hero
   11. Familias de programas (código de color)
   12. Línea de tiempo del día
   13. Tarjetas y bloques de contenido
   14. Franja de rango de edad
   15. FAQ (acordeón)
   16. Historia / timeline institucional
   17. Equipo
   18. Contacto
   19. Footer
   20. Animaciones de scroll (IntersectionObserver)
   21. Responsive (480 / 768 / 1024 / 1440)
   ========================================================================== */

/* 00. FUENTES ------------------------------------------------------------- */
/* Cargadas vía <link> a Google Fonts con display=swap en cada página.
   Pendiente de producción: autoalojar los .woff2 en /fonts para eliminar
   la dependencia externa (objetivo Lighthouse). */

/* 01. TOKENS DE DISEÑO ---------------------------------------------------- */
:root {
  /* --- Marca: escalas 50→900 (extraídas del logo) --- */
  --azul-50:#EAF6FB;  --azul-100:#CDEAF5; --azul-200:#A6DAEE; --azul-300:#6FC3E2;
  --azul-400:#45ACD3; --azul-500:#2295C2; --azul-600:#167BA3; --azul-700:#136688;
  --azul-800:#14536D; --azul-900:#123F52;

  --morado-50:#F2ECF8;  --morado-100:#E1D3F0; --morado-200:#C7ADE0; --morado-300:#A784CC;
  --morado-400:#8A61B4; --morado-500:#6E449A; --morado-600:#573681; --morado-700:#472C6B;
  --morado-800:#392456; --morado-900:#2C1C42;

  --naranja-50:#FEF4E3;  --naranja-100:#FCE3B8; --naranja-200:#F9CD82; --naranja-300:#F5B54D;
  --naranja-400:#F2A62E; --naranja-500:#EF991E; --naranja-600:#C97D14; --naranja-700:#A7680E;
  --naranja-800:#83520C; --naranja-900:#613D0A;

  --verde-50:#F0F7E8;  --verde-100:#DCEBC7; --verde-200:#C1DC9C; --verde-300:#A2C96D;
  --verde-400:#8BBE52; --verde-500:#7AB443; --verde-600:#649636; --verde-700:#537E2B;
  --verde-800:#426322; --verde-900:#324B1A;

  --lima-50:#F6FAE7;  --lima-100:#E9F2C4; --lima-200:#D8E894; --lima-300:#C5DD63;
  --lima-400:#B9D64F; --lima-500:#AECF40; --lima-600:#8FAD2F; --lima-700:#758F27;
  --lima-800:#617420; --lima-900:#4A591A;

  /* --- Neutros cálidos (cargan el 80% del sitio) --- */
  --blanco:#FBF9F5;   /* blanco cálido */
  --hueso:#F7F4EF;    /* fondo base */
  --arena:#EDE7DD;    /* fondo alterno */
  --arena-2:#E3DBCD;
  --piedra:#D9D2C6;   /* bordes / líneas de rejilla */
  --piedra-2:#C4BBAB;
  --tinta:#2A2724;    /* texto de cuerpo (no negro puro) */
  --tinta-2:#5A5A5A;  /* texto secundario (AA sobre hueso) */
  --tinta-3:#655F57;  /* terciario / captions (AA 4.5:1 mínimo, incl. sobre --arena) */
  --gris-logo:#999999;/* reservado SOLO al wordmark */
  --carbon:#26404E;   /* fondos oscuros / heros retrato (azul oscuro, no negro) */

  /* --- Semánticos de marca --- */
  --primary:var(--azul-500);
  /* Regla de contraste de marca: de los colores de marca solo morado-500/600/700
     alcanzan 4.5:1 como texto sobre fondos claros. Azul/verde/naranja/lima
     quedan reservados a fondo o elemento decorativo, nunca a color de texto. */
  --primary-ink:var(--morado-600);   /* morado para texto (AA) */
  --primary-strong:var(--morado-600);

  /* --- Tipografía --- */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace;

  /* Escala tipográfica fluida (mobile-first, clamp) */
  --step--1:clamp(0.82rem,0.79rem + 0.15vw,0.9rem);
  --step-0: clamp(1rem,0.96rem + 0.2vw,1.12rem);
  --step-1: clamp(1.2rem,1.12rem + 0.4vw,1.45rem);
  --step-2: clamp(1.45rem,1.32rem + 0.66vw,1.9rem);
  --step-3: clamp(1.75rem,1.5rem + 1.2vw,2.6rem);
  --step-4: clamp(2.1rem,1.7rem + 2vw,3.6rem);
  --step-5: clamp(2.6rem,1.9rem + 3.4vw,5rem);

  /* --- Espacio --- */
  --sp-1:0.375rem; --sp-2:0.625rem; --sp-3:1rem;   --sp-4:1.5rem;
  --sp-5:2.25rem;  --sp-6:3.25rem;  --sp-7:4.75rem; --sp-8:7rem;

  /* --- Radios (contenidos: sistema serio, no infantil) --- */
  --r-xs:2px; --r-sm:3px; --r-md:5px; --r-lg:8px;

  /* --- Sombras (discretas) --- */
  --shadow-sm:0 1px 2px rgba(42,39,36,.06);
  --shadow-md:0 8px 30px rgba(42,39,36,.09);

  /* --- Layout --- */
  --maxw:1200px;
  --maxw-narrow:760px;
  --gutter:clamp(1.5rem,5vw,4rem);
  --header-h:76px;

  --transition:220ms cubic-bezier(.4,0,.2,1);
}

/* 02. RESET Y BASE -------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html:focus-within { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--tinta);
  background:var(--hueso);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
}
img,picture,svg,video { display:block; max-width:100%; height:auto; }
ul[role="list"],ol[role="list"] { list-style:none; padding:0; }
a { color:var(--primary-ink); text-decoration-color:color-mix(in srgb,var(--primary) 40%,transparent); text-underline-offset:3px; }
a:hover { text-decoration-color:currentColor; }
button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font:inherit; }

/* Evitar parpadeo al aplicar idioma distinto al del markup (ES por defecto) */
html.i18n-pending body { visibility:hidden; }

/* 03. ACCESIBILIDAD ------------------------------------------------------- */
:focus { outline:none; }
:focus-visible {
  outline:3px solid var(--azul-500);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
/* Chromium/WebKit no aplican :focus-visible a <iframe> aunque se alcancen por
   teclado (Tab), dejando el mapa embebido de contacto sin indicador visible
   (WCAG 2.4.7). Se usa :focus plano solo para iframe: un click de mouse en el
   área del iframe enfoca su documento interno (cross-origin), no el elemento
   iframe en sí, así que esta regla no dispara con mouse en la práctica. */
iframe:focus {
  outline:3px solid var(--azul-500);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.skip-link {
  position:absolute; left:var(--sp-3); top:-100px; z-index:1000;
  background:var(--tinta); color:var(--blanco);
  padding:.75rem 1.25rem; border-radius:var(--r-md); font-weight:600;
  transition:top var(--transition);
}
.skip-link:focus { top:var(--sp-3); }

@media (prefers-reduced-motion:reduce) {
  html:focus-within { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* 04. TIPOGRAFÍA ---------------------------------------------------------- */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.02em; color:var(--tinta); text-wrap:balance; }
p { text-wrap:pretty; }
.h1 { font-size:var(--step-5); }
.h2 { font-size:var(--step-4); }
.h3 { font-size:var(--step-2); }
.lede { font-size:var(--step-1); line-height:1.55; color:var(--tinta-2); max-width:48ch; }
.muted { color:var(--tinta-2); }
.mono { font-family:var(--font-mono); }

/* 05. LAYOUT -------------------------------------------------------------- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow { width:100%; max-width:var(--maxw-narrow); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(3.25rem,8vw,7rem); }
.section--tight { padding-block:clamp(2.5rem,5vw,4rem); }
.bg-arena { background:var(--arena); }
.bg-carbon { background:var(--carbon); color:var(--blanco); }
.rule { height:1px; background:var(--piedra); border:0; }
.grid { display:grid; gap:var(--sp-4); }

/* 06. HEADER Y NAVEGACIÓN ------------------------------------------------- */
.site-header {
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--hueso) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--piedra);
}
.site-header__inner {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:var(--header-h);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.brand { display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.brand img { height:68px; width:auto; }
.brand__name { display:none; }

.primary-nav { display:none; }
.primary-nav ul { display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.9rem); list-style:none; padding:0; }
.primary-nav a {
  font-family:var(--font-body); font-weight:600; font-size:.94rem;
  color:var(--tinta-2); text-decoration:none; padding:.35rem 0; position:relative;
}
.primary-nav a:hover { color:var(--tinta); }
.primary-nav a[aria-current="page"] { color:var(--tinta); }
.primary-nav a[aria-current="page"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:var(--azul-500); border-radius:2px;
}
.header-actions { display:flex; align-items:center; gap:var(--sp-3); }

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-md);
  border:1px solid var(--piedra); color:var(--tinta); background:var(--blanco);
}
.nav-toggle svg { width:22px; height:22px; }
.nav-toggle .icon-close { display:none; }
.nav-toggle[aria-expanded="true"] .icon-open { display:none; }
.nav-toggle[aria-expanded="true"] .icon-close { display:block; }

/* Panel de navegación móvil */
.mobile-nav {
  position:fixed; inset:var(--header-h) 0 0 0; z-index:99;
  background:var(--hueso);
  padding:var(--sp-5) var(--gutter) var(--sp-6);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  overflow-y:auto;
}
.mobile-nav.is-open { opacity:1; visibility:visible; transform:none; }
.mobile-nav ul { list-style:none; padding:0; display:grid; gap:.25rem; }
.mobile-nav a {
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:var(--step-2); color:var(--tinta); text-decoration:none;
  padding:.7rem 0; border-bottom:1px solid var(--piedra);
}
.mobile-nav a[aria-current="page"] { color:var(--morado-600); }
.mobile-nav__lang { margin-top:var(--sp-4); }

/* 07. SELECTOR DE IDIOMA -------------------------------------------------- */
.lang-switch {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.05em;
}
.lang-switch button {
  color:var(--tinta-3); padding:.4rem .3rem; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); transition:color var(--transition);
}
.lang-switch button[aria-pressed="true"] { color:var(--tinta); }
.lang-switch button:hover { color:var(--morado-600); }
.lang-switch .sep { color:var(--piedra-2); }

/* 08. BOTONES Y ENLACES DE ACCIÓN ---------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem; line-height:1;
  min-height:48px; padding:.9rem 1.6rem; border-radius:var(--r-sm);
  text-decoration:none; transition:background var(--transition), transform var(--transition), color var(--transition);
}
.btn--primary { background:var(--azul-700); color:var(--blanco); }
.btn--primary:hover { background:var(--azul-800); }
.btn--ghost { background:transparent; color:var(--tinta); border:1.5px solid var(--piedra-2); }
.btn--ghost:hover { border-color:var(--tinta); }
.btn--wa { background:var(--verde-700); color:var(--blanco); } /* WhatsApp: verde como relleno, texto blanco (AA) */
.btn--wa:hover { background:var(--verde-800); }
.btn--on-dark { background:var(--blanco); color:var(--tinta); }
.btn--on-dark:hover { background:#fff; transform:translateY(-1px); }
.btn svg { width:20px; height:20px; }

.link-arrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; color:var(--morado-600); text-decoration:none;
  border-bottom:2px solid var(--morado-500); padding-bottom:2px;
  transition:gap var(--transition);
}
.link-arrow:hover { gap:.85rem; }

/* 09. ETIQUETAS / KICKERS / RULES ---------------------------------------- */
.kicker {
  font-family:var(--font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--morado-600);
  display:inline-block;
}
.eyebrow {
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3);
}
.eyebrow::after { content:""; flex:1; height:1px; background:var(--piedra); }
.accent-rule { width:64px; height:5px; background:var(--azul-500); border-radius:2px; }

/* 10. HERO ---------------------------------------------------------------- */
.hero { border-bottom:1px solid var(--piedra); }
.hero__grid { display:grid; grid-template-columns:1fr; }
.hero__copy { padding:var(--sp-6) 0; display:flex; flex-direction:column; justify-content:center; }
.hero__title { font-size:var(--step-5); max-width:13ch; }
.hero__media { position:relative; min-height:340px; background:var(--arena); overflow:hidden; }
.hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1200ms ease; }
.hero-slide.is-active { opacity:1; z-index:1; }

/* 11. FAMILIAS DE PROGRAMAS (código de color) ---------------------------- */
/* Cada familia lleva un color de marca como código informativo, no decorativo.
   Los colores claros SOLO como relleno/rule; el texto usa la variante -700/-800. */
.familia { --fc:var(--azul-500); --fc-ink:var(--azul-700); }
.familia--autonomia   { --fc:var(--naranja-500); --fc-ink:var(--naranja-700); }
.familia--desarrollo  { --fc:var(--azul-500);    --fc-ink:var(--azul-700); }
.familia--expresion   { --fc:var(--verde-500);   --fc-ink:var(--verde-700); }

.familias { display:grid; gap:0; border-top:1px solid var(--piedra); }
.familia-col { padding:var(--sp-5) 0; border-bottom:1px solid var(--piedra); }
.familia-col__top { width:46px; height:5px; background:var(--fc); border-radius:2px; margin-bottom:var(--sp-4); }
/* El texto usa siempre --tinta (AA); el color de familia (--fc) queda solo
   como acento decorativo en la barra superior (.familia-col__top) y las
   viñetas, nunca como color de texto. */
.familia-col__tag { font-family:var(--font-mono); font-weight:600; font-size:.78rem; letter-spacing:.06em; color:var(--tinta); margin-bottom:.6rem; }
.familia-col__num { font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; color:var(--tinta); }
.familia-col h3 { font-size:var(--step-1); margin:.6rem 0 .9rem; }
.familia-col ul { list-style:none; padding:0; display:grid; gap:.35rem; }
.familia-col li { font-size:1rem; padding-left:1.1rem; position:relative; }
.familia-col li::before { content:""; position:absolute; left:0; top:.72em; width:8px; height:8px; background:var(--fc); border-radius:1px; }

/* Tarjeta de familia (variante caja) */
.familia-card {
  background:var(--blanco); border:1px solid var(--piedra); border-radius:var(--r-lg);
  border-top:5px solid var(--fc); padding:var(--sp-5);
}

/* 12. LÍNEA DE TIEMPO DEL DÍA -------------------------------------------- */
.day-timeline { position:relative; }
.day-timeline__track {
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-3);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;
  scrollbar-width:thin;
}
.day-step { position:relative; scroll-snap-align:start; min-width:150px; padding-top:2.2rem; }
.day-step::before { /* línea base */
  content:""; position:absolute; top:11px; left:0; right:-1rem; height:2px; background:var(--piedra);
}
.day-step:last-child::before { right:0; }
.day-step__dot {
  position:absolute; top:0; left:0; width:24px; height:24px; border-radius:50%;
  background:var(--hueso); border:4px solid var(--hueso); box-shadow:0 0 0 2px var(--piedra-2);
}
.day-step.is-active .day-step__dot { background:var(--azul-500); box-shadow:0 0 0 2px var(--azul-500); }
.day-step.is-active::before { background:var(--azul-500); }
.day-step__time { font-family:var(--font-mono); font-weight:600; font-size:1.05rem; color:var(--tinta); }
.day-step__label { font-size:.95rem; color:var(--tinta-2); margin-top:.2rem; }

/* 13. TARJETAS Y BLOQUES ------------------------------------------------- */
.split { display:grid; grid-template-columns:1fr; gap:0; }
.split__media { position:relative; min-height:320px; }
.split__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split__body { padding:var(--sp-6) var(--gutter); display:flex; flex-direction:column; justify-content:center; }

.stat-line { display:flex; flex-wrap:wrap; gap:var(--sp-5) var(--sp-6); align-items:baseline; }
.stat { }
.stat__num { font-family:var(--font-display); font-weight:700; font-size:var(--step-3); line-height:1; }
.stat__label { font-size:.95rem; color:var(--tinta-2); margin-top:.35rem; }

.pullquote { font-family:var(--font-display); font-weight:500; font-size:var(--step-2); line-height:1.4; letter-spacing:-.01em; color:var(--tinta); }

/* 14. FRANJA DE RANGO DE EDAD -------------------------------------------- */
.age-band { background:var(--carbon); color:var(--blanco); }
.age-scale { display:flex; align-items:flex-end; gap:2px; margin-top:var(--sp-4); }
.age-scale__seg { flex:1; border-radius:2px 2px 0 0; }
.age-track { position:relative; height:3px; background:rgba(255,255,255,.18); margin-top:var(--sp-4); border-radius:2px; }
.age-track__fill { position:absolute; inset:0 0 0 0; background:linear-gradient(90deg,var(--naranja-500),var(--azul-400),var(--verde-500)); border-radius:2px; }
.age-marks { display:flex; justify-content:space-between; margin-top:.6rem; font-family:var(--font-mono); font-size:.8rem; color:rgba(255,255,255,.65); }

/* 15. FAQ (ACORDEÓN) ----------------------------------------------------- */
.faq { border-top:1px solid var(--piedra); }
.faq__item { border-bottom:1px solid var(--piedra); }
.faq__q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  text-align:left; padding:var(--sp-4) 0; min-height:56px;
  font-family:var(--font-display); font-weight:600; font-size:var(--step-1); color:var(--tinta);
}
.faq__q:hover { color:var(--morado-600); }
.faq__icon { position:relative; flex:none; width:22px; height:22px; }
.faq__icon::before,.faq__icon::after { content:""; position:absolute; background:var(--azul-600); border-radius:2px; }
.faq__icon::before { top:10px; left:0; right:0; height:2px; }
.faq__icon::after { left:10px; top:0; bottom:0; width:2px; transition:transform var(--transition); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform:scaleY(0); }
.faq__a { overflow:hidden; height:0; transition:height var(--transition); }
.faq__a-inner { padding:0 0 var(--sp-4); max-width:64ch; color:var(--tinta-2); }

/* 16. HISTORIA / TIMELINE INSTITUCIONAL ---------------------------------- */
.timeline { position:relative; display:grid; gap:var(--sp-5); padding-left:1.6rem; }
.timeline::before { content:""; position:absolute; left:6px; top:.6rem; bottom:.6rem; width:2px; background:var(--piedra); }
.timeline__item { position:relative; }
.timeline__item::before { content:""; position:absolute; left:calc(-1.6rem + 1px); top:.35rem; width:14px; height:14px; border-radius:50%; background:var(--azul-500); border:3px solid var(--hueso); box-shadow:0 0 0 1px var(--piedra-2); }
.timeline__year { font-family:var(--font-mono); font-weight:600; font-size:1rem; color:var(--morado-600); }
.timeline__item h3 { font-size:var(--step-1); margin:.2rem 0 .4rem; }

/* 17. EQUIPO -------------------------------------------------------------- */
.team-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
.member__photo { position:relative; aspect-ratio:4/5; background:var(--arena); border-radius:var(--r-md); overflow:hidden; }
.member__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.member__role { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--morado-600); margin:.9rem 0 .35rem; }
.member h3 { font-size:var(--step-1); }
.member p { color:var(--tinta-2); margin-top:.4rem; }

/* 18. CONTACTO ------------------------------------------------------------ */
.contact-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); }
.contact-item { padding:var(--sp-4) 0; border-bottom:1px solid var(--piedra); }
.contact-item__label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.4rem; }
.contact-item a { font-size:var(--step-1); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.map-embed { border:1px solid var(--piedra); border-radius:var(--r-lg); overflow:hidden; background:var(--arena); }
.map-embed iframe { display:block; width:100%; height:100%; border:0; min-height:340px; }

/* 19. FOOTER ------------------------------------------------------------- */
.site-footer { background:var(--carbon); color:var(--blanco); padding-block:var(--sp-7) var(--sp-5); }
.site-footer a { color:rgba(255,255,255,.8); text-decoration:none; }
.site-footer a:hover { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
.footer-brand img { height:76px; width:auto; }
.footer-col h3 { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:500; margin-bottom:var(--sp-3); }
.footer-col ul { list-style:none; padding:0; display:grid; gap:.55rem; }
.footer-bottom { margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.55); }

/* 20. ANIMACIONES DE SCROLL ---------------------------------------------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.08s; }
.reveal[data-delay="2"] { transition-delay:.16s; }
.reveal[data-delay="3"] { transition-delay:.24s; }

/* Utilidades */
.stack > * + * { margin-top:var(--sp-3); }
.stack-lg > * + * { margin-top:var(--sp-5); }
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.text-center{text-align:center}
.max-60{max-width:60ch} .max-48{max-width:48ch} .max-40{max-width:40ch}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 21. RESPONSIVE --------------------------------------------------------- */
@media (min-width:768px) {
  .familias { grid-template-columns:repeat(2,1fr); column-gap:var(--sp-5); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; }
  .contact-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (min-width:1024px) {
  .brand__name { display:none; }
  .primary-nav { display:block; }
  .nav-toggle { display:none; }
  .hero__grid { grid-template-columns:1.08fr .92fr; }
  .hero__copy { padding:var(--sp-8) var(--sp-6) var(--sp-8) 0; padding-right:var(--sp-6); }
  .hero__media { min-height:560px; }
  .hero--framed .hero__copy { border-right:1px solid var(--piedra); padding-right:var(--sp-6); }
  .familias { grid-template-columns:repeat(3,1fr); }
  .familia-col { padding:var(--sp-5) var(--sp-5) var(--sp-5) 0; border-bottom:0; border-right:1px solid var(--piedra); }
  .familia-col:last-child { border-right:0; padding-right:0; padding-left:var(--sp-5); }
  .familia-col:not(:first-child):not(:last-child) { padding-inline:var(--sp-5); }
  .split { grid-template-columns:1fr 1fr; }
  .split--reverse .split__media { order:2; }
  .split__body { padding:var(--sp-8) var(--sp-7); }
  .team-grid { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1440px) {
  :root { --maxw:1280px; }
}

/* Contenedor con rejilla visible (Dirección A) para heros enmarcados */
@media (min-width:1024px) {
  .framed-grid { border-inline:1px solid var(--piedra); }
}

/* ==========================================================================
   COMPONENTES DE PÁGINA (nosotros / programas / metodología / equipo / contacto)
   ========================================================================== */

/* --- Prosa narrativa (historia) --- */
.prose { max-width:60ch; }
.prose p { font-size:var(--step-1); line-height:1.65; color:var(--tinta); }
.prose p + p { margin-top:var(--sp-4); }

/* --- Misión / Visión --- */
.mv-grid { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--piedra); }
.mv-card { padding:var(--sp-6) 0; border-bottom:1px solid var(--piedra); }
.mv-card h3 { font-family:var(--font-mono); font-weight:600; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--morado-600); }
.mv-card p { font-size:var(--step-1); line-height:1.55; margin-top:var(--sp-3); max-width:44ch; }
@media (min-width:768px) {
  .mv-grid { grid-template-columns:1fr 1fr; column-gap:var(--sp-6); }
  .mv-card:first-child { border-right:1px solid var(--piedra); border-bottom:0; padding-right:var(--sp-6); }
  .mv-card:last-child { padding-left:var(--sp-6); }
}

/* --- Valores: lista tipográfica numerada (no cuadrícula de iconos) --- */
.values { border-top:1px solid var(--piedra); }
.value-row {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3) var(--sp-4);
  align-items:baseline; padding:var(--sp-4) 0; border-bottom:1px solid var(--piedra);
}
.value-row__num { font-family:var(--font-mono); font-weight:600; font-size:.9rem; }
.value-row__name { font-family:var(--font-display); font-weight:700; font-size:var(--step-2); letter-spacing:-.02em; line-height:1.05; }
.value-row__desc { grid-column:1 / -1; color:var(--tinta-2); max-width:52ch; }
.value-row__bar { grid-column:1 / -1; height:4px; width:40px; border-radius:2px; }
@media (min-width:768px) {
  .value-row { grid-template-columns:3rem 14rem 1fr; align-items:center; }
  .value-row__desc { grid-column:auto; }
  .value-row__bar { grid-column:1; width:40px; }
  .value-row__name { grid-column:2; }
}
/* Colores rotativos como código puramente decorativo en la barra (.value-row__bar);
   el numeral (.value-row__num) usa siempre --tinta para garantizar AA, ya que
   azul/verde/naranja/lima no alcanzan 4.5:1 de forma consistente como texto. */
.value-row__num{color:var(--tinta)}
.value-row:nth-child(8n+1) .value-row__bar{background:var(--naranja-500)}
.value-row:nth-child(8n+2) .value-row__bar{background:var(--azul-500)}
.value-row:nth-child(8n+3) .value-row__bar{background:var(--verde-500)}
.value-row:nth-child(8n+4) .value-row__bar{background:var(--morado-500)}
.value-row:nth-child(8n+5) .value-row__bar{background:var(--lima-500)}
.value-row:nth-child(8n+6) .value-row__bar{background:var(--azul-400)}
.value-row:nth-child(8n+7) .value-row__bar{background:var(--naranja-400)}
.value-row:nth-child(8n+8) .value-row__bar{background:var(--verde-500)}

/* --- Programas: índice pegajoso + secciones de familia --- */
.prog-layout { display:grid; grid-template-columns:1fr; gap:var(--sp-6); }
.prog-index { display:none; }
@media (min-width:1024px) {
  .prog-layout { grid-template-columns:240px 1fr; gap:var(--sp-7); align-items:start; }
  .prog-index { display:block; position:sticky; top:calc(var(--header-h) + var(--sp-4)); }
}
.prog-index h2 { font-family:var(--font-mono); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:var(--sp-3); }
.prog-index ol { list-style:none; padding:0; display:grid; gap:.2rem; counter-reset:fam; }
.prog-index a { display:flex; align-items:center; gap:.7rem; padding:.55rem 0; text-decoration:none; color:var(--tinta-2); font-weight:600; border-bottom:1px solid var(--piedra); }
.prog-index a:hover, .prog-index a.is-active { color:var(--tinta); }
.prog-index .dot { width:12px; height:12px; border-radius:3px; flex:none; }

.family-block { --fc:var(--azul-500); --fc-ink:var(--azul-700); scroll-margin-top:calc(var(--header-h) + 1rem); padding-block:var(--sp-6); border-top:2px solid var(--fc); }
.family-block:first-child { padding-top:var(--sp-4); }
.family-block--autonomia { --fc:var(--naranja-500); --fc-ink:var(--naranja-700); }
.family-block--desarrollo { --fc:var(--azul-500); --fc-ink:var(--azul-700); }
.family-block--expresion { --fc:var(--verde-500); --fc-ink:var(--verde-700); }
.family-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); }
.family-head__num { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,5vw,3rem); line-height:1; color:var(--tinta); }
.family-head__tag { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta); }
.family-head h2 { font-size:var(--step-3); }
.family-desc { color:var(--tinta-2); max-width:56ch; font-size:var(--step-1); margin-bottom:var(--sp-5); }

.program { padding-block:var(--sp-5); border-top:1px solid var(--piedra); }
.program__name { display:flex; align-items:baseline; gap:.8rem; font-size:var(--step-2); }
.program__name::before { content:""; width:10px; height:10px; border-radius:2px; background:var(--fc); flex:none; transform:translateY(-2px); }
.program__cols { display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-4); }
.program__col h4 { font-family:var(--font-mono); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.4rem; }
.program__col p { color:var(--tinta); max-width:42ch; }
.program__col--real p { color:var(--tinta); }
.program__col--real { background:var(--arena); padding:var(--sp-4); border-radius:var(--r-md); border-left:3px solid var(--fc); }
@media (min-width:768px) { .program__cols { grid-template-columns:repeat(3,1fr); gap:var(--sp-5); } }

/* --- Metodología: etapas --- */
.method-steps { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); counter-reset:step; }
.method-step {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4);
  padding:var(--sp-5); background:var(--blanco); border:1px solid var(--piedra);
  border-radius:var(--r-lg); border-left:5px solid var(--azul-500); align-items:start;
}
/* El numeral usa --tinta en las cuatro etapas (AA); el color por etapa queda
   solo en el borde izquierdo, que es decorativo. */
.method-step__num { font-family:var(--font-display); font-weight:700; font-size:var(--step-3); line-height:1; color:var(--tinta); }
.method-step h3 { font-size:var(--step-2); margin-bottom:.5rem; }
.method-step p { color:var(--tinta-2); max-width:60ch; }
.method-step:nth-child(2){border-left-color:var(--naranja-500)}
.method-step:nth-child(3){border-left-color:var(--verde-500)}
.method-step:nth-child(4){border-left-color:var(--morado-500)}

.obj-list { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--piedra); counter-reset:obj; }
.obj-list li { list-style:none; display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--piedra); align-items:baseline; }
.obj-list li::before { counter-increment:obj; content:counter(obj,decimal-leading-zero); font-family:var(--font-mono); font-weight:600; color:var(--morado-600); }
.obj-list p { font-size:var(--step-1); max-width:44ch; }
@media (min-width:768px) { .obj-list { grid-template-columns:1fr 1fr; column-gap:var(--sp-6); } }

/* --- Equipo: placeholder de retrato --- */
.member__photo--empty {
  display:flex; align-items:flex-end; padding:var(--sp-3);
  background-color:var(--arena);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(42,39,36,.05) 9px,rgba(42,39,36,.05) 10px);
}
.member__photo--empty span { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--tinta-2); text-transform:uppercase; }
.member--founder .member__photo { border:2px solid var(--azul-500); }
.team-note { margin-top:var(--sp-5); padding:var(--sp-4); background:var(--arena); border-radius:var(--r-md); color:var(--tinta-2); font-size:var(--step--1); max-width:60ch; }

/* --- Contacto --- */
.wa-card { background:var(--verde-700); color:#fff; border-radius:var(--r-lg); padding:var(--sp-5); }
.wa-card h2 { color:#fff; font-size:var(--step-2); }
.wa-card p { color:rgba(255,255,255,.95); margin:.5rem 0 var(--sp-4); max-width:40ch; }
.contact-value { font-size:var(--step-0); color:var(--tinta); overflow-wrap:anywhere; }
.contact-value a { font-weight:600; }
.contact-cols { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); align-items:start; }
@media (min-width:1024px) { .contact-cols { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--sp-7); } }