/* =========================================================================
   ID4Children — Nueva web (fotográfica)
   Misma identidad que el index: navy + teal, los cuatro hilos de la línea
   de marca (sky, lime, amber, coral), Libre Baskerville para titulares e
   IBM Plex Sans para todo lo demás. Mobile-first: los estilos base son
   para celular y los breakpoints suman columnas hacia arriba.
   ========================================================================= */

/* ---------- Fuentes (copiadas de src/Font) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans.ttf") format("truetype-variations"),
       url("../assets/fonts/IBMPlexSans.ttf") format("truetype");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Italic.ttf") format("truetype-variations"),
       url("../assets/fonts/IBMPlexSans-Italic.ttf") format("truetype");
  font-weight: 100 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/LibreBaskerville.ttf") format("truetype-variations"),
       url("../assets/fonts/LibreBaskerville.ttf") format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../assets/fonts/LibreBaskerville-Italic.ttf") format("truetype-variations"),
       url("../assets/fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #224687;
  --navy-deep: #172F5E;
  --navy-night: #0E1F42;
  --teal: #53B793;
  --sky: #45A6DE;
  --lime: #A6C738;
  --amber: #F2B130;
  --coral: #EC6A5F;

  --ink: var(--navy-deep);
  --text: #3B4A63;
  --muted: #5A6376;
  --paper: #FFFFFF;
  --paper-soft: #F3F4F7;
  --line-soft: #E3E7EF;
  --tint-navy: #EEF2F8;
  --tint-teal: #EDF9F5;
  --tint-sky: #EDF7FC;
  --tint-amber: #FEF7EA;

  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.1rem, 1.4rem + 3.6vw, 4.6rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);

  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --max: 1180px;
  --header-h: 64px;
  --radius: 18px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --shadow-soft: 0 30px 60px -34px rgba(23, 47, 94, .45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--teal); color: var(--navy-deep); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
body.menu-open { overflow: hidden; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--navy-deep); color: #fff; padding: .6rem 1rem; border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 3rem + 7vw, 8rem); position: relative; }
.section--soft { background: var(--paper-soft); }
.section--tint { background: var(--tint-navy); }
.section--teal { background: var(--tint-teal); }
.section--navy { background: var(--navy-deep); color: #D5DDEC; }
.section--navy h2, .section--navy h3 { color: #fff; }

/* ---------- Tipografía: antetítulo · título · subtítulo · párrafo ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
/* Sin palabras huérfanas: los titulares reparten las palabras en líneas
   parejas y los párrafos evitan que la última línea quede con una sola palabra. */
h1, h2, h3, .closing__quote, .big-quote { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

.eyebrow {
  display: inline-flex; align-items: baseline; gap: .6rem; /* baseline: si el texto ocupa varias líneas, la rayita queda en la primera */
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky); margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; flex-shrink: 0; margin-bottom: .32em; border-radius: 2px; background: currentColor;
  transform-origin: left; transform: scaleX(var(--eyebrow-line, 1));
  transition: transform .9s var(--ease) .2s;
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--navy); margin-top: 1.1rem; max-width: 44rem; }
.body-copy { color: var(--muted); margin-top: 1.1rem; max-width: 42rem; }
.body-copy + .body-copy { margin-top: .9rem; }
.section-head { max-width: 50rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead, .section-head--center .body-copy { margin-inline: auto; }


/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--navy-deep); --btn-fg: #fff; --btn-line: transparent;
  --btn-bg-hover: var(--teal); --btn-fg-hover: var(--navy-deep); --btn-line-hover: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-line);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-line-hover); transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
/* Blanco sobre fondo oscuro → teal */
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy-deep); }
/* Contorno navy → relleno navy */
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy-deep); --btn-line: var(--navy-deep); --btn-bg-hover: var(--navy-deep); --btn-fg-hover: #fff; --btn-line-hover: var(--navy-deep); }
/* Contorno blanco sobre foto → relleno blanco */
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-line: rgba(255,255,255,.7); --btn-bg-hover: #fff; --btn-fg-hover: var(--navy-deep); --btn-line-hover: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--navy);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
  padding-bottom: 2px;
}
.text-link:hover { background-size: 100% 1.5px; color: var(--navy-deep); }
.text-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Barra de progreso: la línea de marca ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--sky) 0 50%, var(--lime) 50% 75%, var(--amber) 75% 87.5%, var(--coral) 87.5% 100%);
  transform-origin: left; transform: scaleX(0);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { position: relative; display: block; height: 34px; width: 96px; flex-shrink: 0; }
.brand img { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .35s; }
.brand__dark { opacity: 0; }
.site-header.is-solid { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line-soft); }
.site-header.is-solid .brand__light { opacity: 0; }
.site-header.is-solid .brand__dark { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
/* Páginas sin hero oscuro arrancan con el header sólido */
.site-header--solid { background: #fff; box-shadow: 0 1px 0 var(--line-soft); }

.nav-desktop { display: none; }
.menu-toggle {
  position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
.site-header.is-solid .menu-toggle, .site-header--solid .menu-toggle { background: var(--tint-navy); color: var(--navy-deep); }
.menu-toggle span { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), opacity .3s; }
.menu-toggle span:nth-child(1) { transform: translateY(-6px); }
.menu-toggle span:nth-child(3) { transform: translateY(6px); }
body.menu-open .site-header .menu-toggle { background: rgba(255,255,255,.12); color: #fff; }
body.menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .site-header .brand__light { opacity: 1; }
body.menu-open .site-header .brand__dark { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: rotate(-45deg); }

/* Menú mobile a pantalla completa */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--navy-deep); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  clip-path: circle(0% at calc(100% - 44px) 32px);
  transition: clip-path .7s var(--ease-in-out);
  visibility: hidden; overflow-y: auto;
}
body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 44px) 32px); visibility: visible; }
.mobile-menu__links a {
  display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 3vw, 2.4rem); line-height: 1.2;
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.mobile-menu__links a small { display: block; font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: .2rem; }
.mobile-menu__links a[aria-current="page"] { color: var(--teal); }
body.menu-open .mobile-menu__links a { opacity: 1; transform: none; }
body.menu-open .mobile-menu__links li:nth-child(1) a { transition-delay: .18s; }
body.menu-open .mobile-menu__links li:nth-child(2) a { transition-delay: .24s; }
body.menu-open .mobile-menu__links li:nth-child(3) a { transition-delay: .30s; }
body.menu-open .mobile-menu__links li:nth-child(4) a { transition-delay: .36s; }
body.menu-open .mobile-menu__links li:nth-child(5) a { transition-delay: .42s; }
body.menu-open .mobile-menu__links li:nth-child(6) a { transition-delay: .48s; }
.mobile-menu__group { padding: .7rem 0 .4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu__label {
  display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky);
  opacity: 0; transition: opacity .5s var(--ease) .36s;
}
body.menu-open .mobile-menu__label { opacity: 1; }
.mobile-menu__group ul { margin-top: .2rem; padding-left: 1rem; border-left: 2px solid rgba(255,255,255,.14); }
.mobile-menu__links .mobile-menu__group a { font-size: clamp(1.3rem, 1.05rem + 2vw, 1.85rem); border-bottom: 0; padding: .35rem 0; }
body.menu-open .mobile-menu__links .mobile-menu__group li:nth-child(1) a { transition-delay: .40s; }
body.menu-open .mobile-menu__links .mobile-menu__group li:nth-child(2) a { transition-delay: .46s; }
body.menu-open .mobile-menu__links > li:nth-child(5) a { transition-delay: .52s; }
.mobile-menu__foot { margin-top: 2rem; display: grid; gap: 1rem; opacity: 0; transition: opacity .6s .5s; }
body.menu-open .mobile-menu__foot { opacity: 1; }
.mobile-menu__foot p { font-size: .9rem; color: #AFC0DD; }

@media (min-width: 1200px) {
  :root { --header-h: 78px; }
  .brand { height: 40px; width: 113px; }
  .menu-toggle, .mobile-menu { display: none; }
  .nav-desktop { display: flex; align-items: center; gap: 1.6rem; }
  .nav-desktop > a:not(.btn) {
    position: relative; font-size: .9rem; font-weight: 500; color: #fff; padding-block: .4rem; white-space: nowrap;
    transition: color .3s;
  }
  .nav-desktop > a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
  }
  .nav-desktop > a:not(.btn):hover::after, .nav-desktop > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav-group { position: relative; }
  .nav-group__btn {
    position: relative; display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: 0; cursor: pointer; font-size: .9rem; font-weight: 500; color: #fff; padding-block: .4rem;
    transition: color .3s;
  }
  .nav-group__btn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
  .nav-group__btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
  }
  .nav-group.is-current .nav-group__btn::after, .nav-group:hover .nav-group__btn::after, .nav-group.is-open .nav-group__btn::after { transform: scaleX(1); transform-origin: left; }
  .nav-group:hover .nav-group__btn svg, .nav-group.is-open .nav-group__btn svg { transform: rotate(180deg); }
  .site-header.is-solid .nav-group__btn, .site-header--solid .nav-group__btn { color: var(--navy-deep); }
  .nav-group__panel {
    position: absolute; top: 100%; left: 50%; width: 400px; padding-top: 14px;
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
    transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s;
  }
  .nav-group__panel::before {
    content: ""; position: absolute; inset: 14px 0 0; z-index: -1; border-radius: 18px;
    background: #fff; box-shadow: 0 1px 0 var(--line-soft), 0 30px 60px -24px rgba(23, 47, 94, .45);
  }
  .nav-group:hover .nav-group__panel, .nav-group:focus-within .nav-group__panel, .nav-group.is-open .nav-group__panel {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
  .nav-card {
    display: flex; align-items: center; gap: .9rem; padding: .6rem; margin: .5rem; border-radius: 12px;
    color: var(--navy-deep); transition: background-color .3s;
  }
  .nav-card + .nav-card { margin-top: -.25rem; }
  .nav-card:hover, .nav-card[aria-current="page"] { background: var(--tint-navy); }
  .nav-card img { width: 72px; height: 56px; border-radius: 9px; object-fit: cover; flex-shrink: 0; transition: transform .5s var(--ease); }
  .nav-card:hover img { transform: scale(1.06); }
  .nav-card strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
  .nav-card small { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
  .nav-desktop .btn { min-height: 44px; padding: .6rem 1.2rem; font-size: .88rem; }
  .site-header.is-solid .nav-desktop > a:not(.btn), .site-header--solid .nav-desktop > a:not(.btn) { color: var(--navy-deep); }
  .site-header:not(.is-solid):not(.site-header--solid) .nav-desktop .btn { --btn-bg: #fff; --btn-fg: var(--navy-deep); }
}

/* ---------- Hero con foto ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: var(--navy-night); isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 115%; object-fit: cover; object-position: var(--pos, center);
  transform: scale(1.12); will-change: transform;
  animation: hero-zoom 2.4s var(--ease) forwards;
}
/* En pantallas anchas el título ocupa la izquierda: --pos-lg permite correr
   la foto para que el sujeto principal quede a la derecha, libre de texto. */
@media (min-width: 760px) {
  .hero__media img { object-position: var(--pos-lg, var(--pos, center)); }
  /* --w-lg agranda la foto hacia la derecha (anclada a la izquierda) para
     sacar al sujeto de debajo del título cuando object-position no alcanza. */
  .hero__media img[style*="--w-lg"] { width: var(--w-lg); max-width: none; transform-origin: 30% 50%; }
}
/* Pantallas muy anchas (proporción parecida a la foto): no hay margen para
   correrla con object-position, así que se agranda la foto hacia la derecha y
   el sujeto queda a ~75% del ancho, fuera de la columna del título. */
@media (min-width: 760px) and (min-aspect-ratio: 17 / 10) {
  .hero__media--shift img { width: 145%; max-width: none; object-position: 0% 40%; transform-origin: 30% 50%; }
}
/* Variante para fotos con el sujeto en el centro: se corre a la derecha en
   cualquier pantalla con el texto encima (tablet y desktop). */
@media (min-width: 760px) {
  .hero__media--shift-md img { width: 140%; max-width: none; object-position: 0% 50%; transform-origin: 30% 50%; }
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,31,66,.55) 0%, rgba(14,31,66,0) 28%),
    linear-gradient(0deg, rgba(14,31,66,.94) 0%, rgba(14,31,66,.72) 38%, rgba(14,31,66,.15) 72%);
}
/* Con el texto sobre la foto (tablet/desktop), un velo desde la izquierda
   asegura contraste detrás del título aunque la foto sea clara ahí. */
@media (min-width: 760px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(14,31,66,.82) 0%, rgba(14,31,66,.6) 38%, rgba(14,31,66,.12) 68%, rgba(14,31,66,0) 85%),
      linear-gradient(180deg, rgba(14,31,66,.55) 0%, rgba(14,31,66,0) 28%),
      linear-gradient(0deg, rgba(14,31,66,.9) 0%, rgba(14,31,66,.55) 35%, rgba(14,31,66,0) 70%);
  }
  .hero__lead, .hero__body { text-shadow: 0 2px 24px rgba(14,31,66,.45); }
}
.hero__content { padding-block: calc(var(--header-h) + 3rem) clamp(3rem, 2rem + 5vw, 6rem); width: 100%; }
.hero .eyebrow { color: var(--teal); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 em { font-style: italic; color: var(--teal); }
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: #E3E9F4; margin-top: 1.4rem; max-width: 38rem; }
.hero__body { color: #B9C6DE; margin-top: 1rem; max-width: 38rem; font-size: .98rem; }
.hero__scroll {
  display: none; position: absolute; right: var(--gutter); bottom: 2.2rem;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #C9D4E8;
  writing-mode: vertical-rl; align-items: center; gap: .8rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(#fff, transparent); animation: scroll-cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes scroll-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 760px) { .hero__scroll { display: flex; } }
/* En celular la foto va arriba, a sangre, y el texto sigue sobre navy:
   así la imagen se ve entera y el copy largo no la tapa. */
@media (max-width: 759px) {
  .hero, .hero--page { display: block; min-height: 0; }
  .hero__media { position: relative; inset: auto; height: 64svh; overflow: hidden; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,31,66,.6) 0%, rgba(14,31,66,0) 22%, rgba(14,31,66,0) 45%, var(--navy-night) 100%);
  }
  .hero::after { display: none; }
  .hero__content { position: relative; margin-top: -20svh; padding-top: 0; padding-bottom: 3.5rem; }
  /* Fotos con el sujeto abajo: el texto se superpone menos para no taparlo */
  .hero--subject-low .hero__content { margin-top: -5svh; }
}

/* Hero más compacto para páginas internas */
.hero--page { min-height: 88svh; }
.hero__threads { display: flex; gap: 6px; margin-top: 2.2rem; }
.hero__threads span { height: 4px; width: 44px; border-radius: 4px; transform-origin: left; }
.hero__threads span:nth-child(1) { background: var(--sky); }
.hero__threads span:nth-child(2) { background: var(--lime); }
.hero__threads span:nth-child(3) { background: var(--amber); }
.hero__threads span:nth-child(4) { background: var(--coral); }

/* ---------- Animación de titulares palabra por palabra ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.split.is-in .w > span { transform: none; }

/* ---------- Reveals al hacer scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal="left"] { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .eyebrow[data-reveal] { --eyebrow-line: 0; }
.js .eyebrow[data-reveal].is-in { --eyebrow-line: 1; }

/* Imagen con cortina + parallax interno */
.media {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--tint-navy);
  aspect-ratio: var(--ratio, 4 / 5);
}
.media img { width: 100%; height: 118%; object-fit: cover; object-position: var(--pos, center); position: absolute; top: -9%; left: 0; will-change: transform; }
.js .media[data-curtain] { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease-in-out); }
.js .media[data-curtain] img { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.js .media[data-curtain].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
.js .media[data-curtain].is-in img { transform: scale(1); }
.media__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--navy-deep); backdrop-filter: blur(8px);
  font-size: .78rem; font-weight: 600; padding: .45rem .9rem; border-radius: 999px;
}

/* ---------- Split texto / imagen ---------- */
.split-grid { display: grid; gap: clamp(2.2rem, 1.5rem + 3vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split-grid { grid-template-columns: 1fr 1fr; }
  .split-grid--reverse > :first-child { order: 2; }
}
.media-stack { position: relative; padding-bottom: 18%; }
.media-stack .media:nth-child(2) {
  position: absolute; right: -4%; bottom: 0; width: 52%; --ratio: 1;
  border: 6px solid #fff; box-shadow: var(--shadow-soft);
}
.section--soft .media-stack .media:nth-child(2) { border-color: var(--paper-soft); }

/* ---------- Estadísticas ---------- */
.stats { display: grid; gap: 1rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.stat {
  position: relative; padding: 1.8rem 1.5rem 1.6rem; border-radius: var(--radius);
  background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--sky)); transform-origin: top; transform: scaleY(0); transition: transform 1s var(--ease) .3s; }
.stat.is-in::before { transform: scaleY(1); }
.stat__where { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem); color: var(--navy-deep); line-height: 1.05; margin-top: .6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__label { margin-top: .6rem; color: var(--text); }
.stat__src { margin-top: 1rem; font-size: .78rem; color: var(--muted); }
.section--navy .stat { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.section--navy .stat__num { color: #fff; }
.section--navy .stat__label { color: #D5DDEC; }
.section--navy .stat__where, .section--navy .stat__src { color: #9FB1D1; }
/* Mini-gráficos de las cifras de la Home: cada uno explica qué mide el número */
.stats--viz .stat { display: flex; flex-direction: column; }
.stats--viz .stat__src { margin-top: auto; padding-top: 1rem; }
.stat__viz { margin-top: 1.4rem; }
.viz-legend { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-caption { margin-top: .9rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.viz-caption strong { color: var(--navy-deep); font-variant-numeric: tabular-nums; }

/* Cifra Mundo: tarjeta ancha con línea de tiempo */
@media (min-width: 760px) { .stats--viz { grid-template-columns: 1fr 1fr; } .stat--wide { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  .stat--wide { display: grid !important; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: center; }
  .stat--wide .stat__viz { margin-top: 0; }
}
.stat__text { display: flex; flex-direction: column; }
.timeline { width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.tl-grid line { stroke: var(--line-soft); stroke-width: 1; }
.tl-grid text, .tl-years text { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.tl-years .tl-years__now { fill: var(--navy-deep); font-weight: 600; }
.tl-line { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.45, 0, .25, 1) .1s; }
.tl-proj { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .04 .05; opacity: 0; transition: opacity .5s 2.05s; }
.tl-area { fill: url(#tl-fill); opacity: 0; transition: opacity 1.2s ease 1s; }
.tl-band { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); transition: opacity .3s 2.3s, transform .7s var(--ease) 2.3s; }
.tl-pt circle { fill: #fff; stroke: var(--c); stroke-width: 3; }
.tl-pt text, .tl-now text { font-size: 12.5px; font-weight: 600; fill: var(--navy-deep); font-variant-numeric: tabular-nums; }
.tl-pt { opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * 400ms + 250ms); }
.tl-now { opacity: 0; transition: opacity .5s 2.7s; }
.tl-now text { font-size: 14px; fill: var(--c); font-weight: 700; }
.stat.is-in .tl-line { stroke-dashoffset: 0; }
.stat.is-in .tl-proj, .stat.is-in .tl-area, .stat.is-in .tl-pt, .stat.is-in .tl-now { opacity: 1; }
.stat.is-in .tl-band { opacity: .85; transform: scaleY(1); }

/* Pictogramas de chicos (generados en main.js) */
.picto { display: flex; flex-wrap: wrap; gap: 5px 4px; }
.picto i { position: relative; width: 15px; height: 25px; display: block; opacity: 0; transform: translateX(-14px); transition: opacity .35s ease, transform .5s var(--ease); transition-delay: calc(var(--k) * var(--step, 55ms) + var(--d0, 0ms)); }
.picto i svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--fig, var(--c)); }
.picto i.is-part svg:last-child { clip-path: inset(0 calc(100% - var(--part)) 0 0); }
.picto i svg.ghost { fill: var(--line-soft); }
.stat.is-in .picto i { opacity: 1; transform: none; }
.picto--arrive i { animation: none; }
.stat.is-in .picto--arrive i svg { animation: kid-step .5s ease-in-out 2; animation-delay: calc(var(--k) * var(--step, 55ms)); }
@keyframes kid-step { 50% { transform: translateY(-2px); } }
.picto-key { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .72rem; color: var(--muted); }
.picto-key svg { width: 8px; height: 13px; fill: var(--c); }
.picto-compare { display: grid; gap: .7rem; }
.picto-row { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: .5rem; }
.picto-row__y { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.picto-compare .picto i { --fig: #B9C4D6; }
.picto-compare .picto i.is-new { --fig: var(--c); transform: translateY(-10px) scale(.6); }
.stat.is-in .picto-compare .picto i.is-new { transform: none; }

.note {
  margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 12px; font-size: .9rem;
  background: var(--tint-sky); color: var(--navy);
}
.section--navy .note { background: rgba(69,166,222,.14); color: #CFE6F6; }

/* ---------- Gráfico de barras ---------- */
.chart { background: #fff; border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); box-shadow: inset 0 0 0 1px var(--line-soft); }
.chart__title { font-weight: 600; color: var(--navy-deep); font-size: 1.05rem; }
.chart__sub { font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.chart__bars {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(.35rem, 1.2vw, 1rem);
  align-items: end; height: clamp(220px, 40vw, 320px); margin-top: 2rem;
  border-bottom: 1px solid var(--line-soft); padding-top: 1.6rem;
}
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar__fill {
  width: 100%; border-radius: 6px 6px 2px 2px; background: var(--c, var(--navy));
  height: var(--h); transform-origin: bottom; transform: scaleY(0);
  transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 90ms);
}
.bar__val {
  position: absolute; bottom: calc(var(--h) + 6px); font-size: clamp(.62rem, .55rem + .4vw, .85rem); font-weight: 600; color: var(--navy-deep);
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s; transition-delay: calc(var(--i) * 90ms + 700ms); white-space: nowrap;
}
.chart.is-in .bar__fill { transform: scaleY(1); }
.chart.is-in .bar__val { opacity: 1; }
.chart__years { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(.35rem, 1.2vw, 1rem); margin-top: .6rem; text-align: center; font-size: .8rem; color: var(--muted); }
.chart__src { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); }

/* ---------- Tarjetas de programa (imagen) ---------- */
.programs { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .programs { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.program-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 520px; border-radius: 22px; overflow: hidden; color: #fff; isolation: isolate;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
}
.program-card__img { position: absolute; inset: 0; z-index: -2; }
.program-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 1.4s var(--ease); }
.program-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,31,66,.95) 0%, rgba(14,31,66,.65) 45%, rgba(14,31,66,.05) 80%); transition: opacity .5s; }
.program-card:hover .program-card__img img { transform: scale(1.06); }
.program-card__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.program-card h3 { color: #fff; margin-top: .6rem; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.program-card h3 em { color: var(--teal); font-style: italic; }
.program-card .program-card__tagline { font-family: var(--font-display); font-style: italic; color: var(--teal); font-size: 1.12rem; margin-top: .4rem; }
.program-card p { color: #C9D4E8; margin-top: .8rem; max-width: 34rem; }
.program-card .text-link { color: #fff; margin-top: 1.4rem; align-self: flex-start; }

/* ---------- Pasos (Reunimos / Acompañamos / Construimos) ---------- */
.steps { display: grid; gap: 1rem; counter-reset: step; position: relative; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.step { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); display: flex; flex-direction: column; }
.step .media { border-radius: 0; --ratio: 16 / 10; }
.step__body { padding: 1.5rem 1.5rem 1.8rem; }
.step__num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--c, var(--teal)); line-height: 1; }
.step h3 { margin-top: .8rem; }
.step p { color: var(--muted); margin-top: .6rem; }
.steps__line { display: none; }
.closing-note { margin-top: 2.5rem; max-width: 52rem; font-size: var(--fs-lead); color: var(--navy); line-height: 1.55; }
.closing-note strong { color: var(--navy-deep); }

/* ---------- Carrusel horizontal (mobile) ---------- */
.rail-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
  padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-scroll > * { scroll-snap-align: start; }
.rail-dots { display: flex; gap: .45rem; justify-content: center; margin-top: 1.25rem; }
.rail-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; background: #C6CFDE; cursor: pointer; transition: width .4s var(--ease), background-color .3s; padding: 0; }
.rail-dots button[aria-current="true"] { width: 26px; background: var(--navy-deep); }
.section--navy .rail-dots button { background: rgba(255,255,255,.25); }
.section--navy .rail-dots button[aria-current="true"] { background: #fff; }
@media (min-width: 900px) {
  .rail-scroll--desktop-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rail-scroll--desktop-grid + .rail-dots { display: none; }
}

/* ---------- Actividades (marquesina + chips) ---------- */
.marquee { overflow: hidden; padding-block: 1.6rem; background: var(--navy-deep); color: #fff; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 2.4rem; animation: marquee 38s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.4rem; }
.marquee__track span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--amber)); }
.marquee__track span:nth-child(4n+1) { --dot: var(--sky); }
.marquee__track span:nth-child(4n+2) { --dot: var(--lime); }
.marquee__track span:nth-child(4n+3) { --dot: var(--amber); }
.marquee__track span:nth-child(4n) { --dot: var(--coral); }
@keyframes marquee { to { transform: translateX(-50%); } }

.activities { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 760px) { .activities { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
/* Cada actividad pertenece a una de las tres palabras de la bajada:
   juego, aprendizaje o encuentro. El color viene del grupo. */
[data-kw="juego"] { --c: var(--sky); --tint: var(--tint-sky); }
[data-kw="aprendizaje"] { --c: var(--amber); --tint: var(--tint-amber); }
[data-kw="encuentro"] { --c: var(--coral); --tint: #FDF0EF; }
.activity {
  position: relative; padding: 1.2rem 1.1rem 1.25rem; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft); min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .4s var(--ease), filter .4s var(--ease);
}
.activity::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.activity__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--c); transition: background-color .4s, color .4s, transform .5s var(--ease); }
.activity__icon svg { width: 24px; height: 24px; }
.activity__t { font-weight: 600; color: var(--navy-deep); line-height: 1.3; }
.activities .activity:hover, .activities .activity.is-match { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-soft); }
.activities .activity:hover::after, .activities .activity.is-match::after { transform: scaleX(1); }
.activities .activity:hover .activity__icon, .activities .activity.is-match .activity__icon { background: var(--c); color: #fff; transform: rotate(-8deg) scale(1.06); }
/* Una vez que entró, la tarjeta responde rápido (sin el retraso escalonado del reveal) */
.js .activities .activity.is-in { transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .4s var(--ease), filter .4s var(--ease); }
.activities.has-filter .activity:not(.is-match) { opacity: .38; filter: grayscale(.6); transform: scale(.97); }

/* Las tres palabras de la bajada funcionan como filtro */
.kw {
  font: inherit; color: var(--navy-deep); font-weight: 600; background: none; border: 0; padding: 0 .1em; cursor: pointer;
  background-image: linear-gradient(var(--tint), var(--tint)); background-size: 100% 0; background-position: 0 100%; background-repeat: no-repeat;
  border-bottom: 2.5px solid var(--c); transition: background-size .35s var(--ease); border-radius: 3px 3px 0 0;
}
.kw:hover, .kw[aria-pressed="true"] { background-size: 100% 100%; }

/* ---------- Pilares (acordeón + imagen que cambia) ---------- */
.pillars { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .pillars { grid-template-columns: .9fr 1.1fr; gap: 4rem; } .pillars__visual { position: sticky; top: calc(var(--header-h) + 2rem); } }
.pillars__visual { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--navy-deep); }
@media (min-width: 960px) { .pillars__visual { aspect-ratio: 4 / 5; } }
.pillars__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.pillars__visual img.is-active { opacity: 1; transform: scale(1); }
.pillars__visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(14,31,66,.85), transparent); }
.pillars__caption { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 2; color: #fff; font-family: var(--font-display); font-size: 1.3rem; }
.pillars__caption small { display: block; font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; color: var(--teal); }

.accordion { border-top: 1px solid var(--line-soft); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-btn {
  width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: 1.25rem 0; background: none; border: 0; cursor: pointer; min-height: 64px;
  -webkit-tap-highlight-color: transparent;
}
.acc-btn__n { font-size: .8rem; font-weight: 600; color: var(--c); letter-spacing: .08em; width: 2rem; flex-shrink: 0; }
.acc-btn__t { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--navy-deep); transition: color .3s; }
.acc-btn__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-navy); color: var(--navy-deep); transition: transform .5s var(--ease), background-color .3s, color .3s; flex-shrink: 0; }
.acc-btn__icon svg { width: 16px; height: 16px; }
.acc-btn[aria-expanded="true"] .acc-btn__icon { transform: rotate(45deg); background: var(--c); color: #fff; }
.acc-btn:hover .acc-btn__t { color: var(--navy); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-panel p { color: var(--muted); padding: 0 0 1.4rem 3rem; max-width: 36rem; opacity: 0; transform: translateY(-8px); transition: opacity .5s, transform .5s var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-item.is-open .acc-panel p { opacity: 1; transform: none; transition-delay: .15s; }
.pillars .text-link { margin-top: 1.6rem; }

.pillars__progress { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; top: 1.1rem; display: flex; gap: 5px; }
.pillars__progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.pillars__progress i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform .6s var(--ease); }
.pillars:not(.is-scrolly) .pillars__progress { display: none; }

/* Modo scroll: la imagen queda fija y los pilares (todos abiertos) pasan
   scrolleando; el activo se resalta y los demás quedan atenuados. */
.pillars.is-scrolly .pillars__visual {
  position: sticky; top: calc(var(--header-h) + .75rem); z-index: 2;
  aspect-ratio: auto; height: clamp(190px, 34svh, 300px);
  box-shadow: 0 18px 30px -18px rgba(23, 47, 94, .45);
}
/* En celular el texto pasa por debajo de la imagen: un "telón" del color de
   fondo tapa lo que asoma por encima (incluida la franja del header). */
@media (max-width: 959px) {
  .pillars.is-scrolly .pillars__visual { box-shadow: 0 -140px 0 40px var(--paper), 0 18px 30px -18px rgba(23, 47, 94, .45); }
}
.pillars.is-scrolly .accordion { border-top: 0; }
.pillars.is-scrolly > div:last-child { padding-bottom: 3rem; }
.pillars.is-scrolly .acc-item { border-bottom: 0; min-height: 38svh; opacity: .32; transition: opacity .5s var(--ease); }
.pillars.is-scrolly .acc-item.is-open { opacity: 1; }
.pillars.is-scrolly .acc-panel { grid-template-rows: 1fr; }
.pillars.is-scrolly .acc-panel p { opacity: 1; transform: none; padding-bottom: 0; }
.pillars.is-scrolly .acc-btn__icon { display: none; }
.pillars.is-scrolly .acc-btn { padding: .4rem 0 .6rem; min-height: 0; cursor: default; }
.pillars.is-scrolly .acc-btn__t { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }
.pillars.is-scrolly .acc-btn__n { font-size: .85rem; }
.pillars.is-scrolly .acc-item:first-child { padding-top: 1.5rem; }
@media (min-width: 960px) {
  .pillars.is-scrolly { align-items: start; }
  .pillars.is-scrolly .pillars__visual { top: calc(var(--header-h) + 2rem); height: min(72svh, 620px); }
  .pillars.is-scrolly .accordion { padding-top: 18svh; }
  .pillars.is-scrolly > div:last-child { padding-bottom: 14svh; }
  .pillars.is-scrolly .acc-item { min-height: 30svh; }
  .pillars.is-scrolly .acc-item:first-child { padding-top: 0; }
  .pillars.is-scrolly .acc-panel p { font-size: 1.05rem; }
}

/* ---------- Gobernanza ---------- */
.gov { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .gov { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: center; } }
.gov__list { display: grid; gap: .75rem; margin-top: 2rem; }
.gov__item {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--navy-deep); font-weight: 500;
}
.gov__item svg { width: 22px; height: 22px; color: var(--teal); flex-shrink: 0; }
.gov__item .pending { margin-left: auto; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper-soft); padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
/* Frase destacada dentro de un bloque de texto */
.highlight {
  margin-top: 1.6rem; max-width: 38rem; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--teal);
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + .6vw, 1.45rem); line-height: 1.45; color: var(--navy-deep);
}
.highlight strong { color: var(--teal); font-weight: 700; }
.gov__punch { margin-top: 2rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--navy); border-left: 3px solid var(--teal); padding-left: 1rem; }

/* ---------- Bifurcación Apoyá / Participá ---------- */
.fork { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .fork { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.fork-card { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform .6s var(--ease); }
.fork-card:hover { transform: translateY(-6px); }
.fork-card .media { border-radius: 0; --ratio: 16 / 10; }
.fork-card__body { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); display: flex; flex-direction: column; flex: 1; }
.fork-card__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.fork-card h3 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); margin-top: .4rem; }
.fork-card p { color: var(--muted); margin-top: .8rem; flex: 1; }
.fork-card .btn { margin-top: 1.6rem; align-self: flex-start; }

/* ---------- Cierre con foto ---------- */
.closing { position: relative; color: #fff; text-align: center; overflow: hidden; isolation: isolate; padding-block: clamp(6rem, 4rem + 10vw, 11rem); }
.closing__bg { position: absolute; inset: -12% 0; z-index: -2; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.closing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(14,31,66,.5), rgba(14,31,66,.86)); }
.closing__quote { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2.8vw, 3.4rem); line-height: 1.2; max-width: 22ch; margin-inline: auto; color: #fff; }
.closing__quote em { color: var(--teal); font-style: italic; }
.closing .btn-row { justify-content: center; }

/* ---------- Propósito (misión / visión) ---------- */
.purpose { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .purpose { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.purpose-card { position: relative; border-radius: 22px; overflow: hidden; min-height: 460px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem); isolation: isolate; }
.purpose-card .program-card__img { z-index: -2; }
.purpose-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,31,66,.95) 0%, rgba(14,31,66,.7) 50%, rgba(14,31,66,.15) 100%); }
.purpose-card h3 { color: #fff; }
.purpose-card p { color: #D5DDEC; margin-top: .8rem; }
.purpose-card__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }

/* ---------- Objetivos ---------- */
.goals { display: grid; gap: 1rem; }
@media (min-width: 760px) { .goals { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .goals { grid-template-columns: repeat(4, 1fr); } }
.goal { padding: 1.6rem 1.4rem; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); position: relative; overflow: hidden; }
.goal__n { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px var(--c); }
.goal p { margin-top: 1rem; color: var(--navy-deep); font-weight: 500; }
.goal::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.goal:hover::after { transform: scaleX(1); }

/* ---------- Equipo ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; } }
.member { text-align: left; }
/* Figura: cuadro de color + persona recortada que sobresale por arriba
   (la cabeza "sale" del cuadro). Las siluetas siguen la misma lógica. */
.member__figure { position: relative; aspect-ratio: 100 / 114; isolation: isolate; }
.member__bg {
  position: absolute; inset: auto 0 0 0; height: 87.72%; z-index: -1; border-radius: 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 85%);
  transition: transform .6s var(--ease);
}
.member__cut {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transform-origin: center bottom; transition: transform .7s var(--ease);
  /* recorta todo lo que caiga por debajo del cuadro y respeta sus esquinas */
  clip-path: inset(-20% 0 0 0 round 0 0 6px 6px);
}
/* Foto sin recortar (hasta tener la versión sin fondo): llena el cuadro */
.member__photo { position: absolute; inset: auto 0 0 0; height: 87.72%; width: 100%; object-fit: cover; border-radius: 6px; transition: transform .7s var(--ease); }
.member:hover .member__photo { transform: scale(1.02); }
/* Foto sin fondo: se agranda para que la cabeza sobresalga del cuadro;
   los costados que exceden el cuadro se recortan. */
.member__cut--photo { inset: auto auto 0 -15%; width: 130%; max-width: none; height: auto; aspect-ratio: 1; clip-path: inset(-20% 11.54% 0 11.54% round 0 0 6px 6px); }
/* Retratos verticales sin fondo: llenan la figura y se apoyan arriba, así la
   cabeza queda por encima del cuadro y el torso se corta abajo. */
.member__cut--portrait { object-fit: cover; object-position: 50% 0%; clip-path: inset(0 0 0 0 round 0 0 6px 6px); }
/* Fotos reales cuadradas sin fondo: la posición va en línea (calculada a
   partir de la cara) y la figura recorta lo que se sale por los costados. */
.member__figure:has(.member__cut--square) { clip-path: inset(-30% 0 0 0 round 0 0 6px 6px); }
.member__cut--square { inset: auto; height: auto; max-width: none; aspect-ratio: auto; object-fit: initial; clip-path: none; }
/* Monograma mientras no hay foto: iniciales en la tipografía de títulos,
   centradas en el cuadro de color, con un aro fino que las enmarca. */
.member__mono {
  position: absolute; inset: auto 0 0 0; height: 87.72%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .02em;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); color: rgba(255,255,255,.95);
  transition: transform .7s var(--ease);
}
.member__mono::before {
  content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  transition: transform .7s var(--ease), border-color .5s;
}
.member:hover .member__mono { transform: scale(1.04); }
.member:hover .member__mono::before { transform: scale(1.08); border-color: rgba(255,255,255,.85); }
.member__cut--sil { fill: color-mix(in srgb, var(--c) 45%, var(--navy-deep)); opacity: .9; }
.member:hover .member__cut { transform: scale(1.04); }
.member:hover .member__bg { transform: scale(1.02); }
.member__name { margin-top: 1rem; font-weight: 700; color: var(--navy-deep); font-size: 1.05rem; }
.member__role { margin-top: .25rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.member__bio { margin-top: .7rem; padding-top: .7rem; border-top: 2px solid var(--c); font-size: .88rem; line-height: 1.55; color: var(--text); }
.team-note { margin-top: 2rem; font-size: .85rem; color: var(--muted); }

/* ---------- Respuestas del equipo ---------- */
.answer {
  background: rgba(255,255,255,.06); border-radius: var(--radius); padding: 1.8rem 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 300px;
}
.answer blockquote { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.5; color: #fff; }
.answer blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .8; color: var(--c); margin-bottom: .4rem; }
.answer__who { display: flex; align-items: center; gap: .8rem; }
.answer__who span:first-child { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; flex-shrink: 0; }
/* Misma foto sin fondo que en "Conocé a nuestro equipo", sobre su color */
.answer__who .answer__avatar { width: 56px; height: 56px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 85%); box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.answer__who .answer__avatar { position: relative; display: block; }
/* Cada foto lleva su posición en línea (calculada con detección de rostro)
   para que la cara quede centrada en el círculo. */
.answer__avatar img { position: absolute; max-width: none; height: auto; }
.answer__who strong { display: block; color: #fff; font-weight: 600; }
.answer__who small { color: #9FB1D1; font-size: .85rem; }
@media (min-width: 900px) { .answers.rail-scroll { grid-auto-columns: calc((100% - 2rem) / 3); } }
.rail-controls { display: none; gap: .6rem; }
@media (min-width: 900px) { .rail-controls { display: flex; } }
.rail-controls button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background-color .3s, transform .3s; }
.rail-controls button:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.rail-controls svg { width: 18px; height: 18px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }

.opinion { margin-top: 3.5rem; max-width: 44rem; }
.opinion h3 { color: #fff; }
.opinion textarea { width: 100%; min-height: 130px; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; resize: vertical; transition: border-color .3s, background-color .3s; }
.opinion textarea::placeholder { color: #8FA3C6; }
.opinion textarea:focus { outline: none; border-color: var(--sky); background: rgba(255,255,255,.1); }
.opinion__label { display: block; margin-top: 1rem; font-size: .85rem; font-weight: 600; color: #D5DDEC; }
.opinion__input { width: 100%; min-height: 52px; margin-top: .45rem; padding: .8rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; transition: border-color .3s, background-color .3s; }
.opinion__input::placeholder { color: #8FA3C6; }
.opinion__input:focus { outline: none; border-color: var(--sky); background: rgba(255,255,255,.1); }
.opinion__legal { font-size: .8rem; color: #9FB1D1; margin-top: .9rem; }
.opinion__msg { margin-top: 1rem; color: var(--teal); font-weight: 500; min-height: 1.5em; }

/* ---------- Programa en concreto ---------- */
.facts { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .facts { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.fact { background: #fff; border-radius: 22px; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); box-shadow: inset 0 0 0 1px var(--line-soft); }
.fact h3 { display: flex; align-items: center; gap: .7rem; }
.fact h3 svg { width: 26px; height: 26px; color: var(--teal); }
.fact ul { margin-top: 1.2rem; display: grid; gap: .9rem; }
.fact li { position: relative; padding-left: 1.4rem; color: var(--text); }
.fact li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--teal)); }
.fact li.tbc { color: var(--muted); font-size: .92rem; }
.fact li.tbc::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.tbc-tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--paper-soft); padding: .15rem .5rem; border-radius: 999px; margin-right: .35rem; }

/* ---------- Problema de fondo (cita grande) ---------- */
.big-quote { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.5; color: var(--navy-deep); max-width: 40ch; }
.big-quote em { color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-night); color: #AFC0DD; padding-block: 4rem 2rem; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--sky) 0 50%, var(--lime) 50% 75%, var(--amber) 75% 87.5%, var(--coral) 87.5% 100%); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { height: 64px; width: auto; }
.footer-brand p { margin-top: 1.2rem; max-width: 26rem; }
.site-footer h4 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.site-footer li + li { margin-top: .55rem; }
.site-footer a { transition: color .3s; }
.site-footer a:hover { color: #fff; }
.site-footer .soon { font-size: .7rem; color: #7D90B3; margin-left: .35rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.to-top { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- Puente al siguiente paso ---------- */
.bridge { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .bridge { grid-template-columns: 1.2fr .8fr; } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .marquee__track { animation: none; }
  .hero__media img { transform: none; }
}

/* Ajustes de las cifras en celular: textos del gráfico legibles y filas de 16 figuras sin cortes */
.picto-compare .picto { gap: 4px 3px; }
.picto-compare .picto i { width: 12px; height: 20px; }
@media (max-width: 759px) {
  .timeline { margin-top: .5rem; }
  .tl-grid text, .tl-years text { font-size: 21px; }
  .tl-pt text { font-size: 21px; }
  .tl-now text { font-size: 23px; }
  .tl-pt circle { r: 6; }
}

/* ---------- Formulario de contacto (dialog) ---------- */
body.contact-open { overflow: hidden; }
.contact {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92svh;
  border: 0; padding: 0; border-radius: 22px 22px 0 0; background: #fff; color: var(--text);
  overflow: hidden auto; overscroll-behavior: contain;
  transform: translateY(100%); transition: transform .45s var(--ease);
}
.contact.is-open { transform: none; }
.contact::backdrop { background: rgba(14, 31, 66, 0); backdrop-filter: blur(0); transition: background-color .35s, backdrop-filter .35s; }
.contact.is-open::backdrop { background: rgba(14, 31, 66, .62); backdrop-filter: blur(4px); }
.contact__media { display: none; }
.contact__body { position: relative; padding: 2.2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom)); }
.contact__body::before { content: ""; position: absolute; top: .7rem; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line-soft); }
.contact__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tint-navy); color: var(--navy-deep); cursor: pointer; display: grid; place-items: center; transition: background-color .3s, transform .3s; }
.contact__close:hover { background: var(--line-soft); transform: rotate(90deg); }
.contact__close svg { width: 18px; height: 18px; }
.contact h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); padding-right: 3rem; }
.contact__lead { color: var(--navy); margin-top: .6rem; }
.contact__form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.contact__types { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.contact__types legend { font-size: .85rem; font-weight: 600; color: var(--navy-deep); margin-bottom: .6rem; }
.contact__types label { position: relative; cursor: pointer; }
.contact__types input { position: absolute; opacity: 0; inset: 0; }
.contact__types span { display: block; height: 100%; padding: .8rem .9rem; border-radius: 14px; border: 1.5px solid var(--line-soft); transition: border-color .25s, background-color .25s, box-shadow .25s; }
.contact__types strong { display: block; font-size: .95rem; color: var(--navy-deep); }
.contact__types small { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; line-height: 1.35; }
.contact__types label:hover span { border-color: #C6CFDE; }
.contact__types input:checked + span { border-color: var(--teal); background: var(--tint-teal); box-shadow: inset 0 0 0 1px var(--teal); }
.contact__types input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.contact__types.is-invalid span { border-color: var(--coral); }
.contact__grid { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .contact__grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; }
.field > span { font-size: .85rem; font-weight: 600; color: var(--navy-deep); }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem .95rem; border-radius: 12px; border: 1.5px solid var(--line-soft);
  background: var(--paper-soft); font-size: 1rem; color: var(--navy-deep); transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(83, 183, 147, .18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--coral); background: #fff; }
.contact__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--muted); cursor: pointer; }
.contact__consent input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--teal); flex-shrink: 0; }
.contact__consent.is-invalid { color: var(--coral); }
.contact__error { font-size: .88rem; color: #C2463B; min-height: 0; }
.contact__error:empty { display: none; }
.contact__form .btn { justify-self: start; }
.contact__form .btn.is-loading { opacity: .7; pointer-events: none; }
.contact__done { text-align: center; padding: 2.5rem 0 1rem; }
.contact__check { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--tint-teal); color: var(--teal); }
.contact__check svg { width: 30px; height: 30px; }
.contact__done p { color: var(--muted); margin: .6rem auto 1.6rem; max-width: 26rem; }
@media (min-width: 900px) {
  .contact { inset: 0; margin: auto; width: min(1000px, calc(100% - 4rem)); max-height: min(780px, calc(100svh - 4rem)); border-radius: 24px;
    display: none; grid-template-columns: .8fr 1.2fr; transform: translateY(24px) scale(.98); opacity: 0; transition: transform .45s var(--ease), opacity .3s; overflow: hidden; }
  /* Alto fijo + fila al 100%: así la columna del formulario scrollea por dentro
     en vez de estirarse y quedar cortada por el overflow del dialog. */
  .contact[open] { display: grid; height: min(780px, calc(100svh - 4rem)); grid-template-rows: 100%; }
  .contact.is-open { transform: none; opacity: 1; }
  .contact__media { display: block; position: relative; }
  .contact__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .contact__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,31,66,.9), rgba(14,31,66,.1) 60%); }
  .contact__media p { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; z-index: 1; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: #fff; }
  .contact__media em { color: var(--teal); }
  .contact__body { padding: 2.6rem 2.6rem 2.4rem; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .contact__body::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .contact, .contact::backdrop { transition: none; } }

/* ---------- Acumulado UE (Cada niño cuenta) ---------- */
.accum { background: #fff; border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); box-shadow: inset 0 0 0 1px var(--line-soft); --c: var(--navy); }
.accum__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; }
.accum__title { font-weight: 600; color: var(--navy-deep); font-size: 1rem; max-width: 30rem; }
.accum__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem); line-height: 1.05; color: var(--navy-deep); margin-top: .4rem; font-variant-numeric: tabular-nums; }
.accum__year { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.accum__year strong { display: inline-block; min-width: 3.2em; padding: .3rem .7rem; border-radius: 999px; background: var(--tint-teal); color: var(--navy-deep); text-align: center; }
.accum__grid { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; align-items: flex-start; }
.accum__group { display: flex; flex-direction: column; gap: .4rem; }
.accum__group b { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: .3rem; border-bottom: 2px solid var(--line-soft); opacity: 0; transition: opacity .4s; transition-delay: calc(var(--k) * 40ms); }
.accum.is-in .accum__group b { opacity: 1; }
.accum__group .picto { gap: 6px 4px; }
.accum__grid i { width: 15px; height: 25px; --step: 40ms; }
.accum.is-in .picto i { opacity: 1; transform: none; }
.accum .chart__src { margin-top: 1rem; }

/* Gráficos sobre fondo navy */
.section--navy .stat__viz .tl-grid line { stroke: rgba(255,255,255,.12); }
.section--navy .tl-grid text, .section--navy .tl-years text { fill: #9FB1D1; }
.section--navy .tl-years .tl-years__now, .section--navy .tl-pt text { fill: #fff; }
.section--navy .tl-pt circle { fill: var(--navy-deep); }
.section--navy .viz-caption { color: #B9C6DE; }
.section--navy .viz-caption strong { color: #fff; }
.section--navy .picto-key { color: #9FB1D1; }
.section--navy .picto i svg.ghost { fill: rgba(255,255,255,.15); }

/* ---------- Quiénes son / ¿Y en Suiza? (Cada niño cuenta) ---------- */
.accum__compare { margin-top: 1.2rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--navy); }
.stats--pair { margin-top: 1.25rem; }
@media (min-width: 760px) { .stats--pair { grid-template-columns: 1fr 1fr; } }
.profile__lead { margin-top: .8rem; color: var(--navy); font-size: 1.02rem; line-height: 1.5; }
.profile { margin-top: 1.4rem; gap: 1.1rem; }
.profile__row { display: grid; gap: .5rem; }
.profile__row p { font-size: .95rem; color: var(--text); }
.profile__row strong, .profile__origins strong { color: var(--navy-deep); }
.profile .picto i { width: 15px; height: 25px; }
.profile__origins { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: .95rem; color: var(--text); }
.stat__src .tbc-tag { margin-right: .45rem; }
.profile .picto { flex-direction: row-reverse; justify-content: flex-end; } /* las figuras destacadas quedan primero */

/* Enlaces a las fuentes de los datos */
.stat__src a, .chart__src a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .25s; }
.stat__src a:hover, .chart__src a:hover { color: var(--teal); }

/* Frase destacada (Cada niño cuenta · El problema de fondo) */
.pull-quote { position: relative; margin-top: 2rem; padding: 1.4rem 0 1.4rem 1.6rem; border-left: 4px solid var(--teal); }
.pull-quote::before { content: "“"; position: absolute; top: -.6rem; left: 1.2rem; font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--teal); opacity: .25; }
.pull-quote p { position: relative; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.4; color: var(--navy-deep); }
.pull-quote em { color: var(--teal); }
.pull-quote strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(83, 183, 147, .28) 62%) no-repeat 0 0 / 0 100%; transition: background-size 1s var(--ease) .6s; }
.pull-quote.is-in strong { background-size: 100% 100%; }

/* ---------- Privacidad y créditos ---------- */
.legal { padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5rem)); }
.legal__wrap { max-width: calc(46rem + var(--gutter) * 2); }
.legal h1 { font-size: var(--fs-h2); }
.legal__updated { margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.legal h2 { font-size: var(--fs-h3); margin-top: 2.6rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal p, .legal li { color: var(--text); margin-top: .8rem; }
.legal ul { margin-top: .6rem; display: grid; gap: .2rem; }
.legal li { position: relative; padding-left: 1.2rem; margin-top: .4rem; }
.legal li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.legal a, .contact__consent a, .opinion__legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.opinion__legal a { color: inherit; }
.legal a:hover { color: var(--teal); }

/* Nota del footer (fotografías + enlace a privacidad) */
.footer-note { flex-basis: 100%; font-size: .78rem; color: #8FA3C6; }
.footer-note a { color: #C9D4E8; text-decoration: underline; text-underline-offset: 2px; margin-left: .35rem; }
.footer-note a:hover { color: #fff; }

/* Versión fiel (Cada niño cuenta): tres cifras en fila y rango 37–42 */
@media (min-width: 960px) { .stats--three { grid-template-columns: repeat(3, 1fr); } }
.picto--range i.is-new svg { opacity: .35; }
.accum--years .accum__head { margin-bottom: 1.4rem; }


/* Gobernanza: documento disponible (botón) */
.gov__item--btn { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.gov__item--btn:hover { box-shadow: inset 0 0 0 1.5px var(--teal), var(--shadow-soft); transform: translateY(-2px); }
.gov__label { display: flex; flex-direction: column; }
.gov__label small { font-size: .8rem; font-weight: 400; color: var(--muted); margin-top: .1rem; }
.gov__cta { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.gov__cta svg { width: 16px !important; height: 16px !important; color: currentColor !important; transition: transform .3s var(--ease); }
.gov__item--btn:hover .gov__cta svg { transform: translateX(3px); }

/* ---------- Visor de documentos ---------- */
body.doc-open { overflow: hidden; }
.doc-viewer {
  position: fixed; inset: 0; margin: auto; width: min(960px, 100%); height: 100%; max-width: 100%; max-height: 100%;
  border: 0; padding: 0; background: var(--paper-soft); color: var(--text);
  display: none; flex-direction: column; overflow: hidden;
}
.doc-viewer[open] { display: flex; }
.doc-viewer::backdrop { background: rgba(14, 31, 66, .72); backdrop-filter: blur(4px); }
@media (min-width: 760px) { .doc-viewer { height: calc(100svh - 3rem); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(14,31,66,.6); } }
.doc-viewer__bar { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem .9rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line-soft); }
.doc-viewer__head { flex: 1; min-width: 0; }
.doc-viewer__head h2 { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }
.doc-viewer__head p { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.doc-viewer__count { font-size: .8rem; font-weight: 600; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-viewer__close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--tint-navy); color: var(--navy-deep); cursor: pointer; display: grid; place-items: center; }
.doc-viewer__close:hover { background: var(--line-soft); }
.doc-viewer__close svg { width: 18px; height: 18px; }
.doc-viewer__pages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(.75rem, 2vw, 1.5rem); display: grid; gap: clamp(.6rem, 1.5vw, 1rem); justify-items: center; }
.doc-viewer__pages:focus { outline: none; }
.doc-viewer__pages img { width: 100%; max-width: 820px; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(23,47,94,.12); border-radius: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.doc-viewer__note { font-size: .8rem; color: var(--muted); padding: .5rem 0 1rem; }
@media (max-width: 559px) { .doc-viewer__count { display: none; } }

/* Títulos de portada: mismo tamaño en todas las páginas, un poco por debajo del
   h1 general para que la foto respire. El Home no limita el ancho para que
   "Conectamos infancias," entre en una línea. */
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 4rem); max-width: 20ch; }
.hero--home h1 { max-width: none; }

/* ---------- KickStart Geneva: presentación + pizarra táctica ---------- */
.ks-intro { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
@media (min-width: 960px) { .ks-intro { grid-template-columns: 1fr 1.05fr; } }
.ks-intro__text { margin-top: 1.4rem; font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); line-height: 1.7; color: var(--text); max-width: 40rem; }

/* La pizarra del index original (src/hero/tactica-canchav3), en una tarjeta
   blanca: los rectángulos que tapan las flechas son blancos (--paper). */
.pizarra {
  position: relative; background: var(--paper); border-radius: 22px;
  padding: clamp(.75rem, .5rem + 1vw, 1.5rem); box-shadow: var(--shadow-soft);
}
.pizarra .pizarron { display: block; width: 100%; height: auto; aspect-ratio: 842.25 / 595.5; position: relative; z-index: 1; }
/* Las 5 flechas de pase se "dibujan" cuando la pizarra entra en pantalla:
   un rectángulo blanco las tapa y se encoge de la punta hacia la cola. */
.pizarron-cover {
  fill: var(--paper); transform-box: fill-box; transform-origin: 100% 50%;
  animation: pizarron-uncover .7s var(--ease) both paused;
}
.pizarra.is-in .pizarron-cover { animation-play-state: running; }
@keyframes pizarron-uncover { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Pincel teal que sigue al mouse detrás del dibujo (solo desktop) */
.pizarra::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), var(--teal), transparent 70%);
  transition: opacity .3s var(--ease);
}
/* Dibujo libre tipo marcador encima de la pizarra (solo desktop) */
.pizarra__draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; pointer-events: none; border-radius: inherit; }
.pizarra__controls { display: none; position: absolute; top: 12px; right: 12px; z-index: 3; gap: .4rem; }
.pizarra.has-drawn .pizarra__controls { display: flex; }
.pizarra__btn {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--navy-deep);
  background: rgba(255,255,255,.94); border: 1px solid var(--line-soft); border-radius: 999px;
  padding: .4em .85em; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(23,47,94,.35);
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .pizarra.is-ready { cursor: crosshair; }
  .pizarra.is-ready:hover::before { opacity: .35; }
  .pizarra.is-ready .pizarra__draw { pointer-events: auto; }
}

/* Encabezado de cada eje: número + etiqueta ("01 · ENCUENTRO") */
.step__head { display: flex; align-items: baseline; gap: .7rem; }
.step__label { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }

/* Presentación de KickStart: definición (bajada) → cómo (texto) → para qué (destacado) */
.ks-intro__lead strong { color: var(--navy-deep); font-weight: 600; background: linear-gradient(transparent 62%, var(--tint-teal) 62%); }
.highlight em { color: var(--teal); font-style: italic; }
.ks-intro .highlight { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); }

/* Puente centrado: la frase y, debajo, el botón grande que lleva a la página */
.bridge--center { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 1.75rem; }
.bridge--center .big-quote { max-width: 44ch; margin-inline: auto; }
.btn--lg { min-height: 60px; padding: 1rem 2.1rem; font-size: 1.02rem; }

/* ---------- Selector de idioma (EN / ES) ----------
   En celular queda junto al botón de menú; en desktop, después del menú. */
.lang-switch { margin-left: auto; display: flex; align-items: center; gap: .15rem; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .08em; }
.lang-switch a { padding: .4rem .55rem; border-radius: 999px; opacity: .7; transition: opacity .25s, background-color .25s; min-height: 32px; display: inline-flex; align-items: center; }
.lang-switch a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.lang-switch a[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
.site-header.is-solid .lang-switch, .site-header--solid .lang-switch { color: var(--navy-deep); }
.site-header.is-solid .lang-switch a:hover, .site-header--solid .lang-switch a:hover { background: var(--tint-navy); }
body.menu-open .site-header .lang-switch { color: #fff; }
@media (min-width: 1200px) {
  .nav-desktop { margin-left: auto; }
  .lang-switch { margin-left: .2rem; }
}