/* ==========================================================================
   Fundación Nativos — web v4 «Pliego timbrado»
   Papel #EDEDED · tinta #333333 · cielo #65AFE6 (solo superficie) · sol #E8C500 (solo botones WhatsApp)
   Gaya (display, caja baja) · ABC Marfa (texto)
   ========================================================================== */

@font-face { font-family: "Gaya"; src: url("../assets/fonts/Gaya.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Marfa"; src: url("../assets/fonts/ABCMarfa-Light-Trial.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Marfa"; src: url("../assets/fonts/ABCMarfa-LightItalic-Trial.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Marfa"; src: url("../assets/fonts/ABCMarfa-Medium-Trial.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --papel: #EDEDED;
  --blanco: #FFFFFF;
  --cielo: #65AFE6;
  --tinta: #333333;
  --tinta-70: rgba(51,51,51,.70);
  --hairline: rgba(51,51,51,.12);
  --hairline-fuerte: rgba(51,51,51,.25);
  --sol: #E8C500;
  --sol-hover: #D9B800;

  --display: "Gaya", Georgia, "Times New Roman", serif;
  --texto: "Marfa", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(48px, 6.6vw, 96px);
  --fs-h2: clamp(36px, 4.8vw, 68px);
  --fs-h2-l: clamp(40px, 5.2vw, 72px);
  --fs-h3: clamp(26px, 2.4vw, 34px);
  --fs-frase: clamp(24px, 2.6vw, 34px);
  --fs-numeral: clamp(96px, 12vw, 176px);
  --fs-linea: clamp(20px, 2vw, 26px);

  --r-caja: 40px;
  --r-tarjeta: 24px;
  --r-thumb: 16px;
  --r-boton: 12px;

  --sombra-flota: 0 16px 40px rgba(51,51,51,.12);
  --sombra-hover: 0 8px 20px rgba(232,197,0,.30);

  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: 24px;
  --s-seccion: clamp(64px, 10vw, 140px);
  --s-cabecera: 56px;
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-pop: cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 1200px) { :root { --gap: 32px; } }

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-weight: 300; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.55; }
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--cielo); color: var(--tinta); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1; }
h2 { font-size: var(--fs-h2); line-height: 1.04; }
h3 { font-size: var(--fs-h3); line-height: 1.1; }
h4 { font-family: var(--texto); font-weight: 500; font-size: 13px; color: var(--tinta-70); margin: 0 0 12px; }
p { margin: 0; }
p + p { margin-top: 1em; }
.bajada { font-size: 18px; line-height: 1.5; max-width: 48ch; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--blanco); color: var(--tinta); padding: 12px 16px; border-radius: var(--r-boton); font-weight: 500; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; outline: 3px solid var(--tinta); outline-offset: 3px; }
.site-header :focus-visible { outline-color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.centrar { display: flex; justify-content: center; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--s-seccion); }
section[id], .panel { scroll-margin-top: 88px; }
.panel { scroll-margin-bottom: 24px; }
.tono-blanco { background: var(--blanco); }
.cabecera { margin-bottom: var(--s-cabecera); max-width: 66%; }
.cabecera h2 { margin-top: 16px; }
.cabecera .bajada { margin-top: 20px; }

/* Secciones azules: letra blanca sobre cielo ---------------------------------- */
.tono-cielo { background: var(--cielo); color: var(--blanco); }
.tono-cielo h2, .tono-cielo h3, .tono-cielo .kicker, .tono-cielo .bajada, .tono-cielo .instr, .tono-cielo .leyenda, .tono-cielo .fuente { color: var(--blanco); }
.tono-cielo .kicker .ico, .tono-cielo .ilus { background-color: var(--blanco); }
.tono-cielo .enlace { color: var(--blanco); text-decoration-color: rgba(255,255,255,.55); }
.tono-cielo .enlace:hover { text-decoration-color: var(--blanco); }
.tono-cielo .btn-papel { border-color: transparent; }
.tono-cielo ::selection { background: var(--blanco); color: var(--tinta); }
.tono-cielo :focus-visible { outline-color: var(--tinta); }

/* Kicker, enlaces --------------------------------------------------------- */
.kicker { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14px; color: var(--tinta); margin: 0; }
.kicker .ico { width: 18px; height: 18px; flex: none; }
.kicker--sello .kicker__sello { width: 56px; height: 56px; flex: none; }
.enlace { font-weight: 500; font-size: 15px; color: var(--tinta); text-decoration: underline 2px var(--cielo); text-underline-offset: 6px; transition: text-decoration-color .2s; }
.enlace:hover { text-decoration-color: var(--tinta); }

/* Tinta: máscara ----------------------------------------------------------- */
.tinta { display: inline-block; background-color: var(--tinta); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition: background-color .4s; flex: none; }
.tinta--cielo { background-color: var(--cielo); }
.tinta--blanco { background-color: var(--blanco); }
.ico { width: 18px; height: 18px; }
.sello-img { width: 64px; aspect-ratio: 1; }
.ilus--aguila { aspect-ratio: 392 / 256; }
.ilus--arbol { aspect-ratio: 220 / 447; }
.ilus--ave { aspect-ratio: 402 / 321; }
.ilus--coral { aspect-ratio: 391 / 370; }
.ilus--mano { aspect-ratio: 245 / 446; }
.ilus--monos { aspect-ratio: 386 / 256; }
.ilus--persona { aspect-ratio: 249 / 453; }
.ilus--parque { aspect-ratio: 424 / 398; }
.ilus--pez { aspect-ratio: 389 / 251; }
.ilus--planta { aspect-ratio: 257 / 380; }
@supports not (mask-image: url(x)) {
  .tinta { background-color: transparent !important; background: var(--img) center / contain no-repeat; mix-blend-mode: multiply; }
}

/* Botones ------------------------------------------------------------------ */
.btn-sol, .btn-papel { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: var(--r-boton); font-family: var(--texto); font-weight: 500; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: background-color .2s, transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.btn-sol { background: var(--sol); color: var(--tinta); }
.btn-sol .wa { width: 18px; height: 18px; flex: none; }
.btn-sol:hover { background: var(--sol-hover); transform: translateY(1px); box-shadow: var(--sombra-hover); }
.btn-sol:active { transform: translateY(2px); }
.btn-sol--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-sol--block { width: 100%; justify-content: center; }
.btn-papel { background: var(--blanco); color: var(--tinta); border: 1px solid rgba(51,51,51,.18); }
.btn-papel .arr, .btn-sol .arr { transition: transform .2s var(--ease); }
.btn-sol:hover .arr { transform: translateX(4px); }
.btn-papel:hover { background: var(--sol); border-color: transparent; color: var(--tinta); }
.btn-papel:hover .arr { transform: translateX(4px); }
.tono-blanco .btn-papel, .panel .btn-papel { border-color: rgba(51,51,51,.30); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }

/* Cajas y recortes ---------------------------------------------------------- */
.caja { border-radius: var(--r-tarjeta); overflow: hidden; background: var(--hairline); position: relative; }
.caja img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.caja--bn img { filter: grayscale(1) contrast(1.05); }
.caja--bit { aspect-ratio: 16 / 9; }
.caja--pilar { aspect-ratio: 4 / 5; }
.redondo { border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: var(--papel); }
.redondo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }

/* Cabecera ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 70; background: var(--cielo); color: var(--blanco); transition: box-shadow .2s; margin-bottom: -72px; }
.site-header .bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 72px; }
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(255,255,255,.18); }
.site-header.is-stuck .bar { height: 60px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; max-width: none; }
.brand__oscuro { display: none; }
.nav { display: flex; justify-content: center; gap: 32px; }
.nav a { font-weight: 500; font-size: 15px; text-decoration: none; padding-block: 6px; text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.nav a:hover, .nav a[aria-current="true"] { text-decoration-color: var(--blanco); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
.menu-btn span { position: absolute; left: 13px; width: 18px; height: 2px; background: var(--blanco); transition: transform .2s var(--ease), top .2s; }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 24px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--cielo); color: var(--blanco); padding: 76px 24px 32px; overflow-y: auto; overflow-x: hidden; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; gap: 14px; }
.menu__nav a { font-family: var(--display); font-size: clamp(28px, 7.5vw, 34px); line-height: 1; text-decoration: none; }
.menu .btn-sol--block { margin-top: 12px; }
/* Botón de la interfaz «Diseña tu PIEN» en la cabecera y en el menú móvil */
.hdr-acciones { display: flex; align-items: center; gap: 10px; justify-self: end; }
.hdr-pien { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-boton); border: 1px solid rgba(255,255,255,.8); color: var(--blanco); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.hdr-pien:hover { background: var(--blanco); color: var(--tinta); }
.menu__pien { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding: 14px 20px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--r-boton); color: var(--blanco); font-weight: 500; font-size: 16px; text-decoration: none; }
.menu__meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; }
.menu__meta a { text-decoration: underline 2px rgba(255,255,255,.55); text-underline-offset: 6px; }
.menu__aguila { position: absolute; right: -6vw; bottom: 24px; width: 45vw; pointer-events: none; background-color: var(--blanco); }
.burbuja { display: none; visibility: hidden; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; box-shadow: var(--sombra-flota); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.burbuja .wa { width: 20px; height: 20px; }
.burbuja.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

/* 1 · Portada: azul, texto blanco, foto protagonista ------------------------ */
.portada { padding-top: calc(72px + 24px); padding-bottom: clamp(48px, 6vw, 80px); }
.caja--hero { border-radius: var(--r-caja); aspect-ratio: 16 / 11; max-height: 820px; }
.caja--hero img { object-position: 50% 62%; }
.caja--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,20,20,.62) 0%, rgba(20,20,20,.28) 38%, rgba(20,20,20,0) 60%); pointer-events: none; }
.caja--hero:hover img { transform: scale(1.02); }
.portada__sobre { position: absolute; inset: 0; z-index: 1; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 7fr 5fr; gap: 24px var(--gap); align-items: start; color: var(--blanco); }
.portada__sobre .kicker, .portada__sobre .bajada { color: var(--blanco); }
.portada__sobre .kicker .ico { background-color: var(--blanco); }
.portada__h1 { margin-top: 16px; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.portada__h1 .linea { display: block; }
.solo-mov { display: none; }
.portada__sobre .bajada { max-width: 40ch; margin-top: 10px; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.portada__bajada--mov { display: none; }

/* 2 · Diagnóstico ----------------------------------------------------------- */
.diag__texto h2 { font-size: var(--fs-h2-l); margin-top: 16px; max-width: 16ch; }
.diag__texto .bajada { margin-top: 24px; max-width: 62ch; }
/* Mosaico de cifras: tarjetas de distinto tamaño y tono, sin fondo bajo ellas */
.cifras { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.2vw, 18px); margin-top: 56px; }
/* Retícula: una tarjeta alta a la izquierda y el resto repartido en dos hileras */
.cifras .cifra:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; }
.cifras .cifra:nth-child(2) { grid-column: 6 / 13; grid-row: 1; }
.cifras .cifra:nth-child(3) { grid-column: 6 / 13; grid-row: 2; }
.cifras--3b .cifra:nth-child(3) { grid-column: 6 / 10; }
.cifras--3b .cifra:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }
.cifras--4 .cifra:nth-child(4) { grid-column: 1 / 13; grid-row: 3; }

.cifra { display: grid; border-radius: var(--r-tarjeta); padding: clamp(18px, 1.9vw, 30px); min-height: clamp(148px, 14vw, 186px);
  gap: 8px clamp(18px, 2vw, 32px);
  grid-template-columns: clamp(80px, 7vw, 112px) auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "ilus num lect" "ilus num fuen";
  align-content: center; }
.cifra--cielo { background: var(--cielo); color: var(--blanco); }
.cifra--papel { background: var(--papel); color: var(--tinta); }
/* Variante en azul: toda la tarjeta (ilustración, cifra y texto) en cielo */
.cifra--azul { background: var(--papel); color: var(--cielo); }
.cifra--tinta { background: var(--tinta); color: var(--papel); }
.cifra .tinta { background-color: currentColor; }
/* Verticales: la ilustración arriba y la cifra centrada antes de la lectura */
.cifra--alta, .cifra--media { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto;
  grid-template-areas: "ilus" "num" "lect" "fuen"; }

.cifra__ilus { grid-area: ilus; align-self: center; width: 100%; height: clamp(88px, 8vw, 122px); }
.cifra--alta .cifra__ilus { height: clamp(210px, 22vw, 330px); margin-block: clamp(10px, 1.2vw, 18px); }
.cifra--media .cifra__ilus { height: clamp(104px, 10vw, 140px); margin-block: clamp(10px, 1.2vw, 18px); }
.cifra__l { grid-area: lect; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.35; max-width: 34ch; align-self: start; }
.cifra--media .cifra__l { font-size: clamp(14px, 1.05vw, 16px); }
.cifra__src { grid-area: fuen; align-self: start; font-size: 12px; font-style: italic; opacity: .72; }
.cifra__n { grid-area: num; align-self: center; justify-self: center; font-family: var(--display);
  font-size: clamp(54px, 5.6vw, 84px); line-height: .9; letter-spacing: -.02em; }
.cifra--alta .cifra__n { font-size: clamp(72px, 8vw, 110px); }
.cifra--media .cifra__n { font-size: clamp(46px, 4.6vw, 66px); }
.cifra__n sup { font-size: .42em; vertical-align: .62em; }
.cifra__n small { font-size: .5em; }
/* Tarjeta-enlace: el llamado forma parte del mosaico */
.cifra--btn { background: var(--papel); color: var(--tinta); text-decoration: none;
  grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "lect" "num";
  transition: background-color .25s var(--ease), color .25s var(--ease); }
.cifra--btn .cifra__l { font-family: var(--texto); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; max-width: 14ch; }
.cifra--btn .arr { grid-area: num; align-self: end; justify-self: end !important; font-size: clamp(38px, 3.6vw, 52px); line-height: .8;
  transition: transform .25s var(--ease); }
.cifra--btn:hover { background: var(--sol); color: var(--tinta); }
.cifra--btn:hover .arr { transform: translateX(6px); }

/* 3 · Propuesta ------------------------------------------------------------- */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pilar { position: relative; border-radius: var(--r-tarjeta); }
.pilar h3 a { text-decoration: none; }
html .pilar:hover h3 a { text-decoration: underline 2px rgba(255,255,255,.7); text-underline-offset: 6px; }
.pilar__media { position: relative; }
.pilar:hover .caja img { transform: scale(1.03); }
.caja__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.caja.is-alt .caja__alt { opacity: 1; }
.verbos span { cursor: pointer; transition: background-color .2s, color .2s; }
.verbos span.is-on { background: var(--tinta); color: var(--blanco); }
.verbos { position: absolute; bottom: -20px; left: 20px; display: flex; gap: 8px; z-index: 2; }
.verbos span { display: inline-block; background: var(--blanco); color: var(--tinta); font-family: var(--display); font-size: 20px; line-height: 1; padding: 8px 16px; border-radius: 999px; }
.pilar__titulo { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.pilar__ilus { height: 56px; }
.pilar > p { margin-top: 12px; font-size: 16px; max-width: 34ch; }
.prop .centrar { margin-top: 56px; }

/* 4 · Modelo: el orbe de los cinco sellos ------------------------------------- */
.instr { margin: -24px 0 32px; text-align: center; font-weight: 500; font-size: 15px; color: var(--cielo); }
.modelo-grid { display: grid; grid-template-columns: 1fr; gap: 40px; justify-items: center; }
.pliego { width: min(100%, 960px); }
.panel { width: min(100%, 760px); }
/* Anillos: la metodología al centro, el PIEN afuera; cada franja con su sello y su rótulo */
.anillos { position: relative; width: min(100%, 760px); aspect-ratio: 100 / 118; }
.anillos__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anillo { fill: var(--cielo); fill-opacity: .26; cursor: pointer; transition: fill-opacity .25s; }
.anillo:hover { fill-opacity: .34; }
.anillo-nodo { position: absolute; transform: translate(-50%, -15%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 40%; pointer-events: none; }
.anillo-nodo .sello { pointer-events: auto; width: 34%; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform .24s var(--ease); }
.anillos .sello .sello-img { width: 100%; height: 100%; background-color: var(--blanco); }
.anillos .sello:hover { transform: translateY(-2px); }
.anillo-nodo__rotulo { font-weight: 500; font-size: clamp(11px, 1.2vw, 15px); line-height: 1.15; color: var(--blanco); white-space: nowrap; text-align: center; transition: color .2s; }
.anillos .sello[aria-selected="true"] .sello-img { background-color: var(--tinta); }
.anillos .sello[aria-selected="true"] + .anillo-nodo__rotulo { color: var(--tinta); }
.anillos .sello:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sello[aria-selected="true"] .sello-img { background-color: var(--cielo); }
.panel { background: var(--blanco); border-radius: var(--r-tarjeta); padding: clamp(24px, 3vw, 40px); min-height: 420px; }
.panel__item { transition: opacity .16s, transform .16s var(--ease); }
.panel__item[hidden] { display: none; }
html:not(.js) .panel__item[hidden] { display: block; margin-top: 32px; }
.panel__item.is-entering { opacity: 0; transform: translateY(8px); }
.panel__meta { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 13px; color: var(--tinta-70); }
.panel__meta .sello-img { width: 64px; }
.panel h3 { font-size: clamp(26px, 2.6vw, 36px); margin-top: 16px; }
.panel p { margin-top: 12px; font-size: 16px; }
.panel .acciones { margin-top: 24px; gap: 12px; }

/* 5 · Llamado a la acción PIEN: caja amarilla en relieve ------------------------ */
.caja-sol { background: linear-gradient(180deg, #F3D523 0%, var(--sol) 55%, #DDBB00 100%); color: var(--tinta); border-radius: var(--r-caja); padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px); box-shadow: 0 34px 70px -24px rgba(51,51,51,.45), 0 10px 24px -12px rgba(232,197,0,.55), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.08); }
.pien__cta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pien__sello { width: clamp(120px, 12vw, 160px); margin-bottom: 28px; }
.pien__cta h2 { font-size: clamp(36px, 4.6vw, 64px); margin-top: 16px; max-width: 20ch; }
.pien__cta .bajada { margin-top: 20px; max-width: 52ch; }
.pien__cta .acciones { justify-content: center; margin-top: 36px; }
.btn-sol--tinta { background: var(--tinta); color: var(--blanco); }
.btn-sol--tinta:hover { background: #1f1f1f; box-shadow: 0 8px 20px rgba(51,51,51,.3); }
.caja-sol .btn-papel { border-color: transparent; }
.caja-sol .btn-papel:hover { background: var(--cielo); color: var(--blanco); }

/* 5a · Testimonios ----------------------------------------------------------- */
.testimonios__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
.testi { position: relative; margin: 0; border-radius: var(--r-tarjeta); overflow: hidden; background: var(--tinta); aspect-ratio: 1 / 1; }
.testi--grande { grid-row: 1 / 3; aspect-ratio: auto; min-height: 640px; }
.testi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.testi:hover img { transform: scale(1.03); }
.testi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.62) 45%, rgba(20,20,20,.22) 100%); }
.testi blockquote, .testi figcaption span { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.testi figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2.5vw, 36px); color: var(--blanco); }
.testi blockquote { margin: 0; font-family: var(--display); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; max-width: 20ch; }
.testi--grande blockquote { font-size: clamp(26px, 2.6vw, 38px); max-width: 18ch; }
.testi figcaption span { display: block; margin-top: 14px; font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }

/* 5b · Impactos ------------------------------------------------------------- */
.testimonios__mas { margin: clamp(36px, 4.4vw, 60px) auto 0; max-width: 54ch; text-align: center; color: var(--blanco); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.testimonios__mas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.testimonios__mas a:hover { color: var(--sol); }

.impactos__cab { max-width: 100%; display: grid; grid-template-columns: 7fr 5fr; gap: 24px var(--gap); align-items: end; }
.impactos__cab h2 { max-width: 16ch; }
.impactos__cab .bajada { margin: 0 0 8px; }
.impactos__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.impacto { background: var(--cielo); color: var(--blanco); border-radius: var(--r-tarjeta); padding: 28px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 18px 40px -18px rgba(51,51,51,.35), 0 6px 16px -8px rgba(101,175,230,.5); }
.impacto .sello-img { width: 72px; background-color: var(--blanco); }
.impacto__n { font-family: var(--display); font-size: clamp(40px, 3.6vw, 56px); line-height: 1; margin-top: 18px; }
.impacto p { font-size: 15px; line-height: 1.4; margin-top: 10px; color: var(--blanco); max-width: 18ch; }

/* 5c · Súmate: cuatro caminos --------------------------------------------------- */
.sumate__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--gap); align-items: start; }
.sumate__intro h2 { margin-top: 16px; }
.sumate__intro .bajada { margin-top: 20px; max-width: 44ch; }
.orbita { position: relative; width: min(100%, 460px); aspect-ratio: 100 / 66; margin-top: 40px; }
.orbita svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita__sello { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); }
.orbita__ilus { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.orbita__ilus .ilus { max-width: 100%; max-height: 100%; height: 100%; width: auto; }
.caminos { border-top: 1px solid var(--hairline-fuerte); }
.camino { display: grid; grid-template-columns: 180px 1fr 56px; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hairline-fuerte); text-decoration: none; color: var(--tinta); border-radius: 8px; }
.camino__quien { font-weight: 500; font-size: 13px; color: var(--tinta-70); letter-spacing: .02em; }
.camino__titulo { display: block; font-family: var(--display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; color: var(--cielo); transition: color .2s; }
.camino__texto { display: block; margin-top: 8px; font-size: 16px; max-width: 46ch; }
.camino__flecha { width: 56px; height: 56px; border-radius: 50%; background: var(--cielo); color: var(--blanco); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform .2s var(--ease), background-color .2s; }
.camino:hover .camino__flecha { transform: translateX(4px); background: var(--tinta); }
.camino:hover .camino__titulo { color: var(--tinta); }

/* 6 · Fundación ----------------------------------------------------------- */
.origen, .trayectoria, .equipo__cab { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.origen__texto { grid-column: 1 / 6; }
.origen__texto h2 { font-size: var(--fs-h2-l); margin-top: 16px; }
.origen__texto .bajada { margin: 20px 0 0; max-width: 44ch; }
.origen__firma { margin-top: 16px; font-weight: 500; font-size: 15px; color: var(--blanco); }
.origen__cita { grid-column: 6 / 13; position: relative; }
.cita { margin: 0; background: var(--blanco); color: var(--tinta); border-radius: var(--r-tarjeta); padding: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px); display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.cita blockquote { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; }
.cita figcaption { margin-top: 16px; font-style: italic; font-size: 14px; color: var(--tinta-70); }
.origen__mano { flex: none; height: clamp(120px, 12vw, 170px); }
.tono-cielo .origen__mano { background-color: var(--tinta); }
.trayectoria__intro { grid-column: 1 / 6; }
.trayectoria__intro h3 { font-size: clamp(28px, 3vw, 40px); margin-top: 16px; }
.trayectoria__parque { display: block; margin-top: 24px; width: clamp(220px, 24vw, 340px); }
.trayectoria__hitos { grid-column: 6 / 13; }
.hitos { list-style: none; margin: 0; padding: 0; }
.hitos li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding-block: 20px; border-bottom: 1px solid var(--hairline); }
.hitos li:first-child { padding-top: 0; }
.hitos p { font-size: 17px; max-width: 44ch; padding-top: 14px; }
.timbre { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--cielo); color: var(--blanco); font-weight: 500; font-size: 12px; line-height: 1; text-align: center; flex: none; }
.timbre .y2 { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.timbre b { font-weight: 500; }
.trayectoria__hitos .enlace { display: inline-block; margin-top: 24px; }
.equipo__cab > div:first-child { grid-column: 1 / 8; }
.equipo__cab h3 { font-size: clamp(28px, 3vw, 40px); margin-top: 16px; }
.equipo__cab .bajada { margin-top: 20px; max-width: 56ch; font-size: 17px; }
.equipo__coral { grid-column: 9 / 13; justify-self: end; width: clamp(120px, 14vw, 200px); }
.mosaico { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; grid-auto-flow: dense; margin-top: 40px; }
.retrato { text-decoration: none; border-radius: var(--r-tarjeta); }
.retrato figure { margin: 0; }
.retrato:hover .redondo img, .retrato:focus-visible .redondo img { transform: scale(1.04); }
.retrato figcaption { margin-top: 8px; }
.retrato figcaption b { display: block; font-weight: 500; font-size: 13px; }
.retrato figcaption span { display: block; font-size: 12px; color: var(--tinta-70); }
.retrato.fund { grid-column: span 2; grid-row: span 2; }
.retrato.fund:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
.retrato.fund:nth-child(2) { grid-column: 4 / 6; grid-row: 1 / 3; }
.redondo--vacio { background: var(--cielo); display: flex; align-items: center; justify-content: center; }
.redondo--vacio .retrato__huella { background-color: var(--blanco); }
.retrato__huella { width: 40px; height: 40px; }
.mosaico__frase { grid-column: span 2; align-self: center; font-family: var(--display); font-size: 28px; line-height: 1.15; padding: 8px 16px; }
.equipo .centrar { margin-top: 48px; }

/* 6b · Comunidad: quiénes somos + trayectoria en breve --------------------------- */
.comunidad__cab { display: grid; grid-template-columns: 7fr 5fr; gap: 24px var(--gap); align-items: end; margin-bottom: var(--s-cabecera); }
.comunidad__cab h2 { margin-top: 16px; max-width: 16ch; }
.comunidad__cab .bajada { margin: 0 0 8px; }
.comunidad__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px var(--gap); align-items: center; }
.comunidad__caras { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; padding-left: 14px; }
.cara { width: clamp(64px, 6.2vw, 84px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--blanco); margin: 0 0 8px -14px; background: var(--papel); box-shadow: 0 2px 8px rgba(51,51,51,.12); transition: transform .2s var(--ease); }
.cara img { width: 100%; height: 100%; object-fit: cover; }
.cara:hover { transform: translateY(-4px); z-index: 1; position: relative; }
.hitos--breve li { padding-block: 16px; }
.hitos--breve li:first-child { padding-top: 0; }
.hitos--breve li:last-child { border-bottom: 0; }
.hitos--breve p { padding-top: 12px; font-size: 16px; }
.comunidad__acciones { justify-content: center; margin-top: 40px; }

/* 7 · Bitácora -------------------------------------------------------------- */
.bit__cab { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.bit__cab h2 { display: flex; align-items: center; gap: 14px; }
.bit__ico { width: 28px; height: 28px; }
.bit__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin-top: 48px; }
.bit__destacada { grid-column: 1 / 7; position: relative; border-radius: var(--r-tarjeta); }
.bit__lista { grid-column: 7 / 13; }
.bit__meta { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; margin-top: 16px; }
.bit__meta .cat { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline-fuerte); }
.bit__meta .cat .ico { width: 16px; height: 16px; }
.bit__meta time { font-style: italic; font-weight: 300; color: var(--tinta-70); }
.bit__destacada h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; max-width: 22ch; margin-top: 12px; }
.bit__destacada h3 a, .bit__fila h3 a { text-decoration: none; }
.bit__destacada h3 a::after, .bit__fila h3 a::after { content: ""; position: absolute; inset: 0; }
.bit__destacada:hover h3 a, .bit__fila:hover h3 a { text-decoration: underline 2px var(--cielo); text-underline-offset: 6px; }
.bit__destacada:hover .caja img, .bit__fila:hover .bit__thumb img { transform: scale(1.03); }
.bit__destacada:focus-within, .bit__fila:focus-within { outline: 3px solid var(--tinta); outline-offset: 6px; }
.bit__destacada h3 a:focus-visible, .bit__fila h3 a:focus-visible { outline: none; }
.bit__fila { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding-block: 18px; align-items: center; border-bottom: 1px solid var(--hairline); border-radius: 4px; }
.bit__fila:first-child { padding-top: 0; }
.bit__fila .bit__meta { margin-top: 0; font-size: 12px; }
.bit__fila .bit__meta .cat { width: 28px; height: 28px; }
.bit__thumb { width: 88px; height: 88px; border-radius: var(--r-thumb); overflow: hidden; }
.bit__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bit__fila h3 { font-size: 22px; line-height: 1.2; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 8 · Cierre: mismo llamado que el PIEN (caja amarilla) ------------------------ */
.cierre { padding-top: 0; }
/* Si el llamado sigue a una sección azul o blanca, necesita aire sobre el papel */
.tono-cielo + .cierre, .tono-blanco + .cierre { padding-top: var(--s-seccion); }

/* Pie ------------------------------------------------------------------------ */
.pie { background: var(--blanco); border-radius: 40px 40px 0 0; padding: clamp(48px, 6vw, 88px) 0 32px; }
.pie__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.pie__marca { grid-column: 1 / 5; }
.pie__logo { height: 28px; width: auto; max-width: none; }
.pie__cita { font-family: var(--display); font-size: 22px; line-height: 1.2; max-width: 18ch; margin-top: 16px; }
.pie__linea { margin-top: 24px; font-size: 15px; color: var(--tinta-70); }
.pie__cols { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pie__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie__titulo { font-weight: 500; font-size: 13px; color: var(--tinta-70); margin: 0 0 12px; }
.nowrap { white-space: nowrap; }
.pie__cols a { font-size: 15px; text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.pie__cols a:hover, .pie__cols a:focus-visible { text-decoration-color: var(--cielo); }
.pie__timbres { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.timbres { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.timbres a { display: block; border-radius: 50%; transition: transform .2s var(--ease); }
.timbres a:hover { transform: scale(1.06); }
.timbres .sello-img { width: 64px; display: block; }
.pie__aguila { width: 150px; flex: none; }
.pie__legal { margin-top: 32px; border-top: 1px solid var(--hairline); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--tinta-70); }
.friso { display: flex; flex-wrap: wrap; gap: 18px; opacity: .5; }
.friso .ico { width: 22px; height: 22px; }

/* Animaciones (solo con JS y sin reduced-motion) ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
  html.js [data-reveal] { transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: calc(var(--i, 0) * 70ms); }
  html.js [data-reveal="sello"]:not(.is-in) { transform: scale(1.12); }
  html.js [data-reveal="sello"] { transition: opacity .32s var(--ease-pop), transform .32s var(--ease-pop); transition-delay: calc(var(--i, 0) * 70ms + .12s); }
  html.js [data-reveal="tinta"]:not(.is-in) { opacity: 0; filter: blur(8px); transform: scale(.98); }
  html.js [data-reveal="tinta"] { transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); }
  html.js .menu__nav a { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * 60ms); }
  html.js .menu.is-open .menu__nav a { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 959px) {
  .site-header .bar { grid-template-columns: auto 1fr auto; }
  .nav, .hdr-cta, .hdr-pien { display: none; }
  .menu-btn { display: block; justify-self: end; }
  .burbuja { display: inline-flex; }
}

@media (max-width: 1023px) {
  .cabecera { max-width: 100%; }
  .impactos__cab { grid-template-columns: 1fr; }
  .comunidad__cab, .comunidad__grid { grid-template-columns: 1fr; }
  .sumate__grid { grid-template-columns: 1fr; }
  .camino { grid-template-columns: 140px 1fr 48px; }
  .impactos__grid { grid-template-columns: repeat(3, 1fr); }
  .cifras { grid-template-columns: 1fr; }
  .cifras .cifra:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .cifras .cifra--alta, .cifras .cifra--media { grid-template-columns: clamp(80px, 7vw, 112px) auto 1fr; grid-template-rows: auto auto;
    grid-template-areas: "ilus num lect" "ilus num fuen"; }
  .cifras .cifra--alta .cifra__ilus, .cifras .cifra--media .cifra__ilus { height: clamp(110px, 13vw, 150px); margin-block: 0; }
  .cifras .cifra--alta .cifra__n, .cifras .cifra--media .cifra__n { font-size: clamp(54px, 5.6vw, 84px); }
  .cifras .cifra--btn { grid-template-columns: 1fr auto; grid-template-rows: 1fr; grid-template-areas: "lect num"; align-items: center; min-height: 0; }
  .cifras .cifra--btn .cifra__l { max-width: none; align-self: center; }
  .portada__sobre { grid-template-columns: 1fr; }
  .diag__texto { grid-column: 1 / 9; }
  .diag__ilus { grid-column: 9 / 13; height: clamp(220px, 30vh, 320px); }
  .pilares { gap: 16px; }
  .verbos span { font-size: 17px; padding: 6px 12px; }
  .origen__texto { grid-column: 1 / 13; }
  .origen__cita { grid-column: 1 / 13; margin-top: 32px; }
  .trayectoria__intro { grid-column: 1 / 13; }
  .trayectoria__parque { position: static; }
  .trayectoria__hitos { grid-column: 1 / 13; margin-top: 32px; }
  .mosaico { grid-template-columns: repeat(4, 1fr); }
  .retrato.fund:nth-child(2) { grid-column: 3 / 5; }
  .mosaico__frase { grid-column: span 2; font-size: 24px; }
  .bit__destacada, .bit__lista { grid-column: 1 / 13; }
  .pie__marca, .pie__cols { grid-column: 1 / 13; }
  .pie__cols { margin-top: 32px; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --gap: 16px; --r-caja: 24px; --r-tarjeta: 20px; --s-cabecera: 40px; }
  section[id], .panel { scroll-margin-top: 72px; }
  .bajada { font-size: 17px; }
  .site-header { margin-bottom: -60px; }
  .site-header .bar { height: 60px; }
  .brand img { height: 22px; }
  .btn-sol, .btn-papel { white-space: normal; height: auto; min-height: 52px; padding-block: 12px; text-align: center; line-height: 1.2; }
  .acciones .btn-sol, .acciones .btn-papel, .centrar .btn-papel, .bit__cab .btn-papel { width: 100%; justify-content: center; }
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .enlace { text-align: center; }

  .portada { padding-top: calc(60px + 16px); padding-bottom: 40px; }
  .caja--hero { aspect-ratio: 4 / 5; max-height: none; }
  .caja--hero img { object-position: 50% 50%; }
  .caja--hero::after { background: linear-gradient(to bottom, rgba(20,20,20,.55) 0%, rgba(20,20,20,.25) 30%, rgba(20,20,20,0) 42%); }
  .portada__sobre { gap: 8px; padding: 18px; align-content: start; }
  .portada__sobre .kicker { font-size: 12px; }
  .portada__sobre .portada__bajada { display: none; }
  .portada__bajada--mov { display: block; color: var(--blanco); font-size: 16px; margin-top: 20px; }
  .solo-esc { display: none; }
  .solo-mov { display: inline; }
  .portada__h1 { font-size: 36px; margin-top: 8px; }

  /* Mosaico de dos columnas: una tarjeta alta y dos chicas al costado */
  .cifras { margin-top: 40px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cifras .cifra:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
  .cifras .cifra:nth-child(2) { grid-column: 2; grid-row: 1; }
  .cifras .cifra:nth-child(3) { grid-column: 2; grid-row: 2; }
  .cifras--3b .cifra:nth-child(4), .cifras--4 .cifra:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  .cifras .cifra { padding: 16px 14px; min-height: 0; gap: 6px; border-radius: 20px;
    grid-template-columns: 1fr; grid-template-rows: auto auto auto auto;
    grid-template-areas: "ilus" "num" "lect" "fuen"; }
  .cifras .cifra .cifra__ilus { width: 100%; height: 62px; margin-block: 0; align-self: start; }
  .cifras .cifra .cifra__l { font-size: 13.5px; line-height: 1.3; max-width: none; }
  .cifras .cifra .cifra__src { font-size: 10px; align-self: start; line-height: 1.25; }
  .cifras .cifra .cifra__n { font-size: 44px; line-height: .92; align-self: center; justify-self: center; margin-top: 2px; }
  /* La tarjeta alta manda: ilustración y cifra más grandes */
  .cifras .cifra:nth-child(1) { grid-template-rows: 1fr auto auto auto; }
  .cifras .cifra:nth-child(1) .cifra__ilus { height: 168px; align-self: center; margin-block: 6px; }
  .cifras .cifra:nth-child(1) .cifra__n { font-size: 62px; line-height: .92; }
  /* La cuarta cifra, ancha, mantiene la misma diagramación centrada */
  .cifras--4 .cifra:nth-child(4) .cifra__ilus { height: 76px; }
  .cifras--4 .cifra:nth-child(4) .cifra__n { font-size: 52px; }
  /* La tarjeta-enlace ocupa el ancho, texto a la izquierda y flecha a la derecha */
  .cifras .cifra--btn { grid-template-columns: 1fr auto; grid-template-rows: 1fr; grid-template-areas: "lect num"; align-items: center; padding: 16px 18px; }
  .cifras .cifra--btn .cifra__l { font-size: 16px; max-width: none; }
  .cifras .cifra--btn .arr { font-size: 30px; }
  .diag .btn-papel { width: 100%; justify-content: center; margin-top: 32px; }

  .camino { grid-template-columns: 1fr 44px; gap: 8px 16px; padding: 20px 0; }
  .camino__quien { grid-column: 1 / -1; font-size: 12px; }
  .camino__titulo { font-size: 24px; }
  .camino__texto { font-size: 15px; }
  .camino__flecha { width: 44px; height: 44px; font-size: 18px; }
  .orbita { margin-top: 28px; }
  .testimonios__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .testi--grande { grid-row: auto; aspect-ratio: 4 / 5; min-height: 0; }
  .testi { aspect-ratio: 4 / 5; }
  .testi--diego img { object-position: 50% 6% !important; }
  .testi--grande img { object-position: 50% 8% !important; }
  .impactos__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .impacto { padding: 20px 14px 18px; }
  .impacto .sello-img { width: 56px; }
  .impacto p { font-size: 14px; }
  .impacto:last-child { grid-column: 1 / -1; }
  .pilares { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .caja--pilar { aspect-ratio: 1; }
  .pilar__ilus { height: 44px; }
  .prop .centrar { margin-top: 40px; }

  .anillo-nodo__rotulo { font-size: 10px; }
  .anillo-nodo { gap: 3px; }
  .panel { margin-top: 24px; padding: 20px; }
  .panel .acciones .btn-sol, .panel .acciones .btn-papel { width: 100%; }


  .origen, .trayectoria, .equipo__cab { grid-template-columns: 1fr; }
  .origen__texto, .origen__cita, .trayectoria__intro, .trayectoria__hitos, .equipo__cab > div:first-child, .equipo__coral { grid-column: auto; }
  .origen__cita { margin-top: 64px; }
  .cita { padding: 20px; gap: 16px; }
  .origen__mano { height: 96px; display: block; margin-inline: auto; }
  .trayectoria__parque { width: 220px; margin-inline: auto; }
  .hitos li { grid-template-columns: 48px 1fr; gap: 16px; }
  .hitos p { font-size: 16px; padding-top: 10px; }
  .timbre { width: 48px; height: 48px; font-size: 11px; }
  .equipo__coral { width: 120px; justify-self: end; margin-top: 16px; }
  .mosaico { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .retrato.fund:first-child, .retrato.fund:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  .mosaico__frase { grid-column: 1 / -1; font-size: 24px; padding: 8px 0; }
  .retrato figcaption b { font-size: 12px; }
  .retrato figcaption span { font-size: 11px; }

  .bit__cab { flex-direction: column; align-items: stretch; }
  .bit .wrap { display: flex; flex-direction: column; }
  .bit__cab { display: contents; }
  .bit__cab h2 { order: 0; }
  .bit__grid { order: 1; }
  .bit__cab .btn-papel { order: 2; margin-top: 32px; }
  .bit__grid { gap: 24px; margin-top: 32px; }
  .bit__destacada h3 { font-size: 24px; }
  .bit__fila { grid-template-columns: 64px 1fr; gap: 14px; }
  .bit__thumb { width: 64px; height: 64px; border-radius: 12px; }
  .bit__fila h3 { font-size: 18px; }


  .pie { border-radius: 24px 24px 0 0; padding: 40px 0 calc(64px + env(safe-area-inset-bottom)); }
  .pie__cols { grid-template-columns: 1fr 1fr; }
  .pie__timbres { flex-direction: column; align-items: center; gap: 28px; margin-top: 40px; padding-top: 28px; }
  .timbres { display: grid; grid-template-columns: repeat(3, 64px); gap: 20px 28px; justify-content: center; }
  .timbres .sello-img { width: 64px; }
  .pie__aguila { width: 110px; }
  .pie__legal { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .friso { justify-content: center; gap: 16px; }
  .friso .ico:nth-child(n+10) { display: none; }
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */
.caja--4-3 { aspect-ratio: 4 / 3; } .caja--3-2 { aspect-ratio: 3 / 2; } .caja--16-9 { aspect-ratio: 16 / 9; } .caja--1-1 { aspect-ratio: 1; } .caja--4-5 { aspect-ratio: 4 / 5; }
.portada--interior .caja--hero { aspect-ratio: 16 / 9; max-height: 640px; }
.portada__h1--interior { font-size: clamp(40px, 5.4vw, 76px); max-width: 16ch; }
.portada__sub { margin-top: 14px; font-weight: 500; font-size: 15px; color: var(--blanco); }
.portada--interior .kicker--sello .kicker__sello { width: 56px; height: 56px; background-color: var(--blanco); }

/* Franja de los cinco sellos */
.sello-nav { background: var(--blanco); border-bottom: 1px solid var(--hairline); }
.sello-nav .wrap { display: flex; justify-content: space-between; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sello-nav .wrap::-webkit-scrollbar { display: none; }
.sello-nav a { display: flex; align-items: center; gap: 10px; padding: 14px 10px; text-decoration: none; color: var(--tinta-70); border-bottom: 3px solid transparent; flex: none; transition: color .2s, border-color .2s; }
.sello-nav a .sello-img { width: 40px; }
.sello-nav a > span:not(.tinta) { display: flex; flex-direction: column; font-weight: 500; font-size: 14px; line-height: 1.15; }
.sello-nav a small { font-size: 11px; color: var(--tinta-70); font-weight: 500; }
.sello-nav a:hover { color: var(--tinta); }
.sello-nav a.on { color: var(--tinta); border-bottom-color: var(--cielo); }
.sello-nav a.on .sello-img { background-color: var(--cielo); }

/* Tarjetas numeradas */
.pasos { display: grid; gap: 16px; }
.pasos--2 { grid-template-columns: repeat(2, 1fr); } .pasos--3 { grid-template-columns: repeat(3, 1fr); } .pasos--4 { grid-template-columns: repeat(4, 1fr); }
.paso { background: var(--blanco); border-radius: var(--r-tarjeta); padding: 28px 26px 26px; display: flex; flex-direction: column; }
.tono-blanco .paso { background: var(--papel); }
.tono-cielo .paso { background: var(--blanco); color: var(--tinta); }
.tono-cielo .paso h3, .tono-cielo .paso p { color: var(--tinta); }
.paso__n { font-family: var(--display); font-size: clamp(36px, 3.4vw, 48px); line-height: 1; color: var(--cielo); }
.paso h3 { font-size: clamp(22px, 2vw, 28px); margin-top: 12px; }
.paso__m { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cielo); }
.paso__m + h3 { margin-top: 6px; }
.pasos--fichas > .paso .paso__m { grid-area: 1 / 2; margin-top: 2px; }
.pasos--fichas > .paso .paso__m + h3 { grid-area: 2 / 2; }
.pasos--fichas > .paso .paso__m ~ p { grid-area: 3 / 2; }
.paso p { margin-top: 10px; font-size: 16px; color: var(--tinta-70); }
/* Tarjetas en azul: letra e ilustración en blanco */
.pasos--cielo .paso { background: var(--cielo); color: var(--blanco); }
.pasos--cielo .paso p { color: rgba(255,255,255,.88); }
.pasos--cielo .paso .tinta { background-color: var(--blanco); }
.tono-cielo .paso p { color: var(--tinta-70); }

/* Tres columnas con ilustración */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px var(--gap); }
.trio__item { display: flex; flex-direction: column; align-items: flex-start; }
.trio__ilus { height: 96px; width: auto; }
.trio__ico { width: 40px; height: 40px; }
.tono-cielo .trio__ilus, .tono-cielo .trio__ico { background-color: var(--blanco); }
.trio h3 { margin-top: 20px; font-size: clamp(24px, 2.2vw, 30px); }
.trio p { margin-top: 10px; max-width: 36ch; }

/* Dos columnas texto + foto */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px var(--gap); align-items: center; }
.split__texto { grid-column: 1 / 7; } .split__media { grid-column: 7 / 13; }
.split--rev .split__texto { grid-column: 7 / 13; grid-row: 1; } .split--rev .split__media { grid-column: 1 / 7; grid-row: 1; }
.split__texto h2 { margin-top: 16px; } .split__texto .bajada { margin-top: 20px; } .split__texto .prose { margin-top: 20px; }

/* Texto corrido */
.prose { max-width: 62ch; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; }
.prose--caja { background: rgba(255,255,255,.55); border-radius: var(--r-tarjeta); padding: clamp(24px, 3vw, 40px); max-width: 66ch; }
.tono-blanco .prose--caja { background: rgba(51,51,51,.045); }
.tono-cielo .prose--caja { background: rgba(255,255,255,.14); }
.prose p + p { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose h2 { font-size: clamp(26px, 2.4vw, 34px); } .prose h3 { font-size: clamp(22px, 2vw, 26px); }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 20px; border-left: 3px solid var(--cielo); font-family: var(--display); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.prose ul, .prose ol { padding-left: 1.2em; } .prose li { margin-top: .4em; } .prose li::marker { color: var(--cielo); font-weight: 500; }
.prose .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 1.6em 0; }
.prose .figures > div { background: var(--blanco); border-radius: 16px; padding: 18px 16px; }
.prose .figures .n { font-family: var(--display); font-size: 40px; line-height: 1; }
.prose .figures .l { margin-top: 6px; font-size: 14px; color: var(--tinta-70); }
.tono-blanco .prose .figures > div { background: var(--papel); }
@media (max-width: 767px) {
  /* Dos por fila; si el último queda solo, ocupa el ancho completo */
  .prose .figures { grid-template-columns: repeat(2, 1fr); }
  .prose .figures > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Esquema de dicotomías */
.esquema { max-width: 760px; }
.esquema__head, .esquema__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--hairline-fuerte); }
.esquema__head { font-weight: 500; font-size: 14px; color: var(--tinta-70); padding-top: 0; }
.esquema__row .a { font-size: 17px; color: var(--tinta-70); }
.esquema__row .b { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }

/* Los dos polos: un disco partido en diagonal */
.polos { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.polos__lado { max-width: 34ch; }
.polos__lado--a { text-align: right; justify-self: end; align-self: start; }
.polos__lado--r { align-self: end; }
.polos__ico { width: 28px; height: 28px; }
.polos__lado h3 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 32px); }
.polos__lado p { margin-top: 10px; color: var(--tinta-70); }
.tono-cielo .polos__lado p { color: var(--blanco); }
.polos__disco { position: relative; width: clamp(200px, 26vw, 330px); aspect-ratio: 1; transform: rotate(-45deg); }
.polos__mitad { position: absolute; left: 0; width: 100%; height: 50%; }
.polos__mitad--a { top: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateY(-6px);
  background: linear-gradient(to bottom, var(--cielo), rgba(101,175,230,.12)); }
.polos__mitad--r { bottom: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: translateY(6px);
  background: linear-gradient(to top, var(--tinta), rgba(51,51,51,.12)); }
@media (prefers-reduced-motion: no-preference) {
  .polos__disco { transition: transform 1.2s var(--ease); }
  html.js .polos:not(.is-in) .polos__disco { transform: rotate(-90deg); }
}
@media (max-width: 767px) {
  .polos { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
  .polos__lado--a, .polos__lado--r { text-align: center; justify-self: center; align-self: auto; }
  .polos__lado--r { order: 3; }
  .polos__disco { order: 2; width: min(70vw, 260px); }
}

/* Documentos */
.docs { display: grid; gap: 10px; max-width: 560px; }
.doc { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: var(--blanco); border-radius: 14px; text-decoration: none; font-weight: 500; font-size: 15px; transition: transform .2s var(--ease); }
.tono-blanco .doc { background: var(--papel); }
.doc:hover { transform: translateX(4px); }
.doc__arr { width: 32px; height: 32px; border-radius: 50%; background: var(--cielo); color: var(--blanco); display: flex; align-items: center; justify-content: center; flex: none; }

/* Equipo con nombres */
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.persona { text-align: left; }
.persona .redondo { width: 100%; max-width: 220px; }
.persona__nombre { display: block; margin-top: 12px; font-weight: 500; font-size: 15px; }
.cruz { margin-left: .35em; font-weight: 400; color: var(--tinta-70); }
.persona__rol { display: block; font-size: 13px; color: var(--tinta-70); }
.persona__bio { margin-top: 6px; font-size: 14px; color: var(--tinta-70); }
.personas--grande { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.personas--chica { grid-template-columns: repeat(6, 1fr); }
.personas--chica .redondo { max-width: 140px; }

/* Línea de tiempo completa */
.hitos p b { font-weight: 500; }

/* Tabla / calendario */
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--hairline-fuerte); vertical-align: top; }
.tabla th { font-weight: 500; font-size: 13px; color: var(--tinta-70); }
.tabla td:first-child { font-family: var(--display); font-size: 20px; }
.tabla-wrap { overflow-x: auto; }
.calendario { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.calendario > div { background: var(--blanco); border-radius: 16px; padding: 18px 16px; }
.tono-blanco .calendario > div { background: var(--papel); }
.calendario .n { font-family: var(--display); font-size: 40px; line-height: 1; }
.calendario .l { margin-top: 6px; font-size: 14px; color: var(--tinta-70); }
.calendario .m { font-weight: 500; font-size: 12px; color: var(--tinta-70); letter-spacing: .04em; }

/* Lista con + */
.plus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.plus li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.plus li::before { content: "+"; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--cielo); }
.tono-cielo .plus li::before { color: var(--blanco); }

/* Nota / cita grande */
.nota { background: var(--blanco); border-radius: var(--r-tarjeta); padding: clamp(24px, 3vw, 40px); max-width: 760px; }
.tono-blanco .nota { background: var(--papel); }
.nota p { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.nota .quien { display: block; margin-top: 12px; font-family: var(--texto); font-style: italic; font-size: 14px; color: var(--tinta-70); }
.sub-h { margin-top: var(--s-cabecera); }
/* Tarjetas centradas en filas (para un número impar de pasos): 4 por fila, 2 en tablet, 1 en móvil */
.pasos--flex { display: flex; flex-wrap: wrap; justify-content: center; }
.pasos--flex > .paso { flex: 0 1 calc(25% - 12px); }
@media (max-width: 1023px) { .pasos--flex > .paso { flex-basis: calc(50% - 8px); } }
@media (max-width: 639px) { .pasos--flex > .paso { flex-basis: 100%; } }
/* Acciones del acompañamiento (Cómo se implementa, PIEN): tarjetas verticales con foto a todo el fondo */
.acciones-pien { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.accion { position: relative; flex: 0 1 calc(25% - 12px); aspect-ratio: 4 / 5; border-radius: var(--r-tarjeta); overflow: hidden; background: var(--tinta); isolation: isolate; }
.accion img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.accion:hover img { transform: scale(1.05); }
.accion::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(51,51,51,.28) 0%, rgba(51,51,51,0) 32%, rgba(51,51,51,0) 48%, rgba(51,51,51,.86) 100%); }
.accion__n { position: absolute; top: 16px; left: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--cielo); color: var(--blanco); display: grid; place-items: center; font-family: var(--display); font-size: 24px; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.accion h3 { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; margin: 0; color: var(--blanco); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; }
@media (max-width: 1023px) { .accion { flex-basis: calc(50% - 8px); } }
@media (max-width: 639px) { .accion { flex-basis: calc(50% - 8px); } .accion h3 { left: 14px; right: 14px; bottom: 14px; font-size: 17px; } .accion__n { top: 12px; left: 12px; width: 36px; height: 36px; font-size: 20px; } }
.mt-1 { margin-top: 24px; } .mt-2 { margin-top: 40px; } .mt-3 { margin-top: 64px; }
.bit__grid--lista { grid-template-columns: repeat(3, 1fr); }
.post { max-width: 720px; margin-inline: auto; }
.post__meta { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 13px; }
.post__meta time { font-style: italic; font-weight: 300; color: var(--tinta-70); }
.post h1 { font-size: clamp(34px, 4.2vw, 56px); margin-top: 16px; }
.post__lead { margin-top: 16px; }
.post .caja { margin-top: 32px; }
.post .prose { margin-top: 32px; max-width: 66ch; }
.post__nav { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; }
.bit__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bit__card { position: relative; border-radius: var(--r-tarjeta); }
.bit__card .caja { aspect-ratio: 4 / 3; }
.bit__card h3 { font-size: 22px; line-height: 1.2; margin-top: 10px; }
.bit__card h3 a { text-decoration: none; } .bit__card h3 a::after { content: ""; position: absolute; inset: 0; }
.bit__card:hover h3 a { text-decoration: underline 2px var(--cielo); text-underline-offset: 6px; }
.bit__card:hover .caja img { transform: scale(1.03); }
.bit__card p { margin-top: 8px; font-size: 15px; color: var(--tinta-70); }

@media (max-width: 1023px) {
  .pasos--3, .pasos--4 { grid-template-columns: repeat(2, 1fr); }
  .personas { grid-template-columns: repeat(3, 1fr); } .personas--chica { grid-template-columns: repeat(4, 1fr); }
  .calendario { grid-template-columns: repeat(3, 1fr); }
  .bit__cards, .bit__grid--lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .portada--interior .caja--hero { aspect-ratio: 4 / 5; }
  .portada--interior .caja--hero::after { background: linear-gradient(to top, rgba(20,20,20,.82) 0%, rgba(20,20,20,.45) 45%, rgba(20,20,20,0) 70%); }
  .portada--interior .portada__sobre { align-content: end; }
  .portada--interior .portada__sub { display: none; }
  .portada__h1--interior { font-size: 34px; }
  .sello-nav a > span:not(.tinta) { display: none; }
  .sello-nav a .sello-img { width: 44px; }
  .sello-nav .wrap { justify-content: space-between; gap: 2px; }
  .sello-nav a { padding: 10px 8px; }
  .pasos--2, .pasos--3, .pasos--4 { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; gap: 32px; }
  .split, .split--rev { grid-template-columns: 1fr; gap: 24px; }
  .split__texto, .split__media, .split--rev .split__texto, .split--rev .split__media { grid-column: auto; grid-row: auto; }
  .split--rev .split__media { order: -1; }
  .polos { grid-template-columns: 1fr; }
  .personas, .personas--chica, .personas--grande { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .calendario { grid-template-columns: repeat(2, 1fr); }
  .plus { grid-template-columns: 1fr; }
  .bit__cards, .bit__grid--lista { grid-template-columns: 1fr; }
  .esquema__head, .esquema__row { grid-template-columns: 45fr 55fr; gap: 12px; padding-block: 12px; }
  .esquema__row .a { font-size: 15px; } .esquema__row .b { font-size: 20px; }
}

/* Ajustes tras la revisión de las interiores */
.tono-papel { background: var(--papel); }
.tono-cielo .nota, .tono-cielo .calendario > div, .tono-cielo .doc { color: var(--tinta); }
.tono-cielo .nota p, .tono-cielo .calendario .l, .tono-cielo .calendario .m { color: inherit; }
.tono-cielo .calendario .l, .tono-cielo .calendario .m { color: var(--tinta-70); }
.split--top { align-items: start; }
.pilar[id], [id].paso, [id].trio__item, .quehacer[id] { scroll-margin-top: 96px; }
.verbos--quieto span { cursor: default; }
.plus--1 { grid-template-columns: 1fr; }
.trio--4 { grid-template-columns: repeat(4, 1fr); }
.personas--chica { grid-template-columns: repeat(8, 1fr); }
.personas--chica .redondo { max-width: 128px; }
.cita--papel { background: var(--papel); }
.calendario .n--texto { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.sub-h .kicker + h3 { margin-top: 12px; }
.trayectoria__parque--fija { margin-top: 0; }
@media (max-width: 1023px) {
  .portada--interior .portada__sobre .portada__bajada { display: none; }
  .portada--interior .portada__bajada--mov { display: block; color: var(--blanco); margin-top: 20px; }
  .trio--4 { grid-template-columns: repeat(2, 1fr); }
  .personas--chica { grid-template-columns: repeat(4, 1fr); }
  .split .plus { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .trio--4 { grid-template-columns: 1fr; }
  .personas--chica { grid-template-columns: repeat(3, 1fr); }
}

/* Fichas de dato (capacidad anual del Parque Escuela) */
.fichas-dato { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ficha-dato { background: var(--blanco); color: var(--tinta); border-radius: 18px; padding: 22px 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.ficha-dato__m { font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-70); }
.ficha-dato__n { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; align-self: center; }
.ficha-dato__l { font-size: 14px; line-height: 1.35; color: var(--tinta-70); }
@media (max-width: 767px) {
  .fichas-dato { grid-template-columns: 1fr; gap: 8px; }
  .ficha-dato { grid-template-columns: 38% 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 4px; padding: 16px 18px; align-items: center; }
  .ficha-dato__n { grid-column: 1; grid-row: 1 / 3; font-size: 26px; text-align: center; }
  .ficha-dato__m { grid-column: 2; grid-row: 1; align-self: end; }
  .ficha-dato__l { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Esquema de programa (Escuela Parque) */
.esquema-fig { margin: 0; }
.esquema-fig__aviso { display: none; }
.caja--esquema { background: var(--blanco); border-radius: var(--r-tarjeta); overflow: hidden; padding: clamp(16px, 2.5vw, 32px); }
.caja--esquema img { width: 100%; height: auto; }
.esquema-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--tinta-70); max-width: 70ch; }
@media (max-width: 767px) {
  .esquema-fig { margin-top: 48px; }
  .esquema-fig__aviso { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 500; font-size: 13px; color: var(--tinta-70); }
  .esquema-fig__aviso span { animation: desliza 1.8s ease-in-out infinite; }
  @keyframes desliza { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  @media (prefers-reduced-motion: reduce) { .esquema-fig__aviso span { animation: none; } }
  .caja--esquema { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .caja--esquema img { min-width: 560px; }
}

/* La senda: pasos alternados unidos por una curva (secuencia anual del PIEN) */
.senda { list-style: none; margin: 0; padding: 0; }
.senda__paso { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); align-items: center; }
.senda__paso:not(:last-child) { padding-bottom: 104px; }
.senda__media { display: flex; justify-content: center; }
.senda__paso--rev .senda__media { grid-column: 2; grid-row: 1; }
.senda__paso--rev .senda__texto { grid-column: 1; grid-row: 1; }
.senda__media .redondo { width: clamp(160px, 20vw, 250px); }
.senda__texto { max-width: 42ch; }
.senda__n { font-family: var(--display); font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--cielo); }
.senda__texto h3 { margin-top: 6px; font-size: clamp(26px, 2.6vw, 36px); }
.senda__actos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.senda__actos span { border: 1px solid var(--hairline-fuerte); border-radius: 999px; padding: 6px 14px; font-weight: 500; font-size: 13px; }
.senda__texto p:last-child { margin-top: 16px; font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; color: var(--tinta); }
/* la curva: dos cuartos de círculo que llevan de un paso al siguiente */
.senda__curva { position: absolute; left: 25%; right: 25%; bottom: 0; height: 104px; pointer-events: none; }
.senda__curva::before, .senda__curva::after { content: ""; position: absolute; width: 50%; height: 50%; border: 2px solid var(--cielo); }
.senda__curva::before { left: 0; top: 0; border-top: 0; border-right: 0; border-bottom-left-radius: 104px; }
.senda__curva::after { right: 0; bottom: 0; border-bottom: 0; border-left: 0; border-top-right-radius: 104px; }
.senda__paso--rev .senda__curva::before { left: auto; right: 0; border-left: 0; border-right: 2px solid var(--cielo); border-bottom-left-radius: 0; border-bottom-right-radius: 104px; }
.senda__paso--rev .senda__curva::after { right: auto; left: 0; border-right: 0; border-left: 2px solid var(--cielo); border-top-right-radius: 0; border-top-left-radius: 104px; }
@media (max-width: 767px) {
  .senda__paso, .senda__paso--rev { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; }
  .senda__paso--rev .senda__media, .senda__paso--rev .senda__texto { grid-column: 1; grid-row: auto; }
  .senda__paso:not(:last-child) { padding-bottom: 56px; }
  .senda__actos { justify-content: center; }
  .senda__curva { left: 50%; right: auto; width: 0; height: 56px; border-left: 2px solid var(--cielo); }
  .senda__curva::before, .senda__curva::after { display: none; }
}

/* El eje: secuencia vertical con círculos translúcidos (territorio · experiencia · virtud) */
.eje { list-style: none; margin: 0; padding: 0; position: relative; --linea: clamp(84px, 13vw, 180px); }
.eje::before { content: ""; position: absolute; left: var(--linea); top: 0; bottom: 0; width: 2px; background: var(--cielo); opacity: .45; }
.eje__fin { position: absolute; left: var(--linea); bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cielo); transform: translateX(-50%); }
.eje__paso { position: relative; padding: clamp(26px, 3.5vw, 44px) 0 clamp(26px, 3.5vw, 44px) calc(var(--linea) + clamp(70px, 8vw, 135px)); }
.eje__paso + .eje__paso { margin-top: calc(var(--d) * -.14); }
.eje__circulo { position: absolute; left: var(--linea); top: 50%; width: var(--d); height: var(--d); transform: translate(-50%, -50%); border-radius: 50%; background: rgba(101,175,230,.18); }
.tono-cielo .eje__circulo { background: rgba(255,255,255,.22); }
.eje__ilus { position: absolute; left: var(--linea); top: 50%; transform: translate(-50%, -50%); height: calc(var(--d) * .4); width: auto; }
.eje__cifra { position: absolute; left: var(--linea); top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: calc(var(--d) * .3); line-height: 1; color: var(--tinta); }
.eje__punto { position: absolute; left: var(--linea); top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--cielo); border: 3px solid var(--blanco); transform: translate(-50%, -50%); }
.tono-blanco .eje__punto { border-color: var(--blanco); }
.tono-papel .eje__punto { border-color: var(--papel); }
.eje__texto { position: relative; max-width: 46ch; }
.eje__n { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); line-height: 1; color: var(--cielo); }
.eje__texto h3 { margin-top: 4px; font-size: clamp(26px, 2.6vw, 36px); }
.eje__texto p { margin-top: 12px; color: var(--tinta-70); }
.tono-cielo .eje__texto p { color: var(--blanco); }
@media (max-width: 767px) {
  .eje { --linea: 40px; }
  .eje__paso { padding: 22px 0 22px 78px; }
  .eje__paso + .eje__paso { margin-top: calc(var(--d) * -.1); }
  .eje__circulo { width: calc(var(--d) * .78); height: calc(var(--d) * .78); }
  .eje__ilus { height: calc(var(--d) * .3); }
  .eje__cifra { font-size: calc(var(--d) * .24); }
  .eje__texto { max-width: none; }
}

/* Los principios: círculos enhebrados por una línea que serpentea ------------ */
.serpiente { --curva: clamp(64px, 8vw, 116px); --hilo: var(--blanco); list-style: none; margin: 0; padding: 0; }
.tono-blanco .serpiente, .panel .serpiente { --hilo: var(--cielo); }
.serpiente__paso { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); align-items: center; }
.serpiente__paso:not(:last-child) { padding-bottom: var(--curva); }
.serpiente__media { position: relative; display: flex; justify-content: center; }
/* Entrada y salida del hilo, arriba del primer círculo y bajo el último */
.serpiente__paso:first-child .serpiente__media::before,
.serpiente__paso:last-child .serpiente__media::after { content: ""; position: absolute; left: 50%; width: 0; height: clamp(30px, 3.4vw, 52px); border-left: 2px solid var(--hilo); }
.serpiente__paso:first-child .serpiente__media::before { bottom: 100%; }
.serpiente__paso:last-child .serpiente__media::after { top: 100%; }
.serpiente__paso--rev .serpiente__media { grid-column: 2; grid-row: 1; }
.serpiente__paso--rev .serpiente__texto { grid-column: 1; grid-row: 1; }
.serpiente__disco { position: relative; z-index: 1; width: var(--d); aspect-ratio: 1; border-radius: 50%; background: var(--cielo); display: grid; place-items: center; }
.serpiente__n { font-family: var(--display); font-size: calc(var(--d) * .4); line-height: 1; color: var(--blanco); }
.serpiente__ilus { width: 54%; height: 54%; background-color: var(--blanco); }
.serpiente__texto { max-width: 40ch; }
.serpiente__texto h3 { font-size: clamp(24px, 2.4vw, 34px); }
.serpiente__texto p { margin-top: 12px; color: var(--tinta-70); }
/* La línea: dos cuartos de círculo que arman la ese entre un paso y el siguiente */
.serpiente__curva { position: absolute; left: 25%; right: 25%; bottom: 0; height: var(--curva); pointer-events: none; }
.serpiente__curva::before, .serpiente__curva::after { content: ""; position: absolute; width: 50%; height: 50%; border: 2px solid var(--hilo); }
.serpiente__curva::before { left: 0; top: 0; border-top: 0; border-right: 0; border-bottom-left-radius: var(--curva); }
.serpiente__curva::after { right: 0; bottom: 0; border-bottom: 0; border-left: 0; border-top-right-radius: var(--curva); }
.serpiente__paso--rev .serpiente__curva::before { left: auto; right: 0; border-left: 0; border-right: 2px solid var(--hilo); border-bottom-left-radius: 0; border-bottom-right-radius: var(--curva); }
.serpiente__paso--rev .serpiente__curva::after { right: auto; left: 0; border-right: 0; border-left: 2px solid var(--hilo); border-top-right-radius: 0; border-top-left-radius: var(--curva); }
@media (max-width: 767px) {
  .serpiente { --curva: 52px; }
  .serpiente__paso, .serpiente__paso--rev { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: center; }
  .serpiente__paso--rev .serpiente__media, .serpiente__paso--rev .serpiente__texto { grid-column: 1; grid-row: auto; }
  .serpiente__texto p { text-align: left; }
  .serpiente__curva { left: 50%; right: auto; width: 0; height: var(--curva); border-left: 2px solid var(--hilo); }
  .serpiente__curva::before, .serpiente__curva::after { display: none; }
}

/* La esfera de anillos: cada voz interrumpe su paralelo -------------------- */
.globo { --linea: var(--cielo); --fondo: var(--blanco); position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 1; }
.tono-papel .globo, .panel .globo { --fondo: var(--papel); }
.tono-cielo .globo { --linea: var(--blanco); --fondo: var(--cielo); }
.globo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.globo__svg ellipse, .globo__borde { fill: none; stroke: var(--linea); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.globo__borde { stroke-width: 2.4; }
.globo__volumen { stroke: none; }
.globo__voces { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.globo__voces li { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 2px clamp(10px, 1.6vw, 20px); white-space: nowrap; font-weight: 500; font-size: clamp(11px, 1.45vw, 16px); line-height: 1.2; text-align: center; isolation: isolate; }
/* La pastilla que corta el anillo se desvanece en los bordes */
.globo__voces li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pastilla, var(--fondo));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%); }
.tono-cielo .globo__voces li { color: var(--blanco); }
@media (max-width: 767px) {
  .globo { width: 100%; }
  .globo__voces li { font-size: 11.5px; padding: 2px 6px; }
}

/* Las tres dimensiones del PIEN: círculos encadenados ---------------------- */
.orbes { --d: clamp(230px, 29vw, 330px); display: flex; justify-content: center; gap: clamp(10px, 1.4vw, 20px); color: var(--blanco); }
.orbes__pila { list-style: none; margin: 0; padding: 0; }
.orbe { position: relative; overflow: hidden; width: var(--d); aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 0 11%; }
/* La foto va dentro del círculo, oscurecida para que la letra blanca se lea */
.orbe__foto { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.orbe__foto img { width: 100%; height: 100%; object-fit: cover; }
.orbe__foto::after { content: ""; position: absolute; inset: 0; background: rgba(38,38,38,.56); }
.orbe__texto { position: relative; }
.orbe + .orbe { margin-top: calc(var(--d) * -.17); }
.orbe h3 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.05; }
.orbe__actos { margin-top: 8px; font-weight: 500; font-size: clamp(13px, 1.1vw, 15px); letter-spacing: .01em; }
.orbe__taller { margin-top: 12px; font-size: clamp(12px, 1vw, 14px); font-style: italic; opacity: .82; }
.orbe__taller::before { content: ""; display: block; width: 32px; height: 1px; margin: 0 auto 10px; background: currentColor; opacity: .55; }
.orbes__llave { display: flex; align-items: center; gap: 12px; }
.orbes__llave::before { content: ""; width: clamp(10px, 1vw, 14px); align-self: stretch; margin-block: calc(var(--d) * .1); border: 1.5px solid currentColor; border-left: 0; }
.orbes__llave > span { writing-mode: vertical-rl; font-weight: 500; font-size: clamp(12px, 1vw, 14px); letter-spacing: .06em; }
@media (max-width: 767px) {
  .orbes { --d: min(78vw, 300px); gap: 8px; }
  .orbes__llave > span { font-size: 11px; }
}

/* Los beneficios del PIEN: tres ámbitos que se ensanchan ------------------- */
.ambitos { --gap: clamp(20px, 3vw, 44px); --n: 3; position: relative; }
.ambitos__cols { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--gap); }
.ambito { position: relative; padding-left: clamp(42px, 4vw, 54px); }
.ambito::before { content: ""; position: absolute; left: 17px; top: 46px; bottom: 0; border-left: 1px dashed var(--cielo); opacity: .7; }
.ambito__n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--cielo); color: var(--blanco); display: grid; place-items: center; font-weight: 500; font-size: 13px; letter-spacing: .02em; }
.ambito h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.05; }
.ambito__bajada { margin-top: 8px; font-size: 15px; color: var(--tinta-70); max-width: 26ch; }
.ambito__puntos { list-style: none; margin: clamp(22px, 2.6vw, 38px) 0 0; padding: 0; display: grid; gap: 14px; }
.ambito__puntos li { position: relative; padding-left: 20px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.35; }
.ambito__puntos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cielo); }
.ambito__puntos .es-clave { font-weight: 500; }
@media (max-width: 767px) {
  .ambitos__cols { grid-template-columns: 1fr; gap: 32px; }
  .ambito__puntos { margin-top: 18px; gap: 12px; }
}

/* ==========================================================================
   Escritorio: más densidad y menos aire (no toca móvil ni tableta)
   Pensado para la pantalla de un computador común: 1366 x 768
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --max: 1140px; --s-seccion: clamp(72px, 7vw, 100px); --s-cabecera: 48px; }
  body { font-size: 17px; }

  /* Cabecera a dos columnas: el título a la izquierda y la bajada a su derecha */
  .cabecera { max-width: none; display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gap); align-items: end; }
  .cabecera > .kicker { grid-column: 1; grid-row: 1; }
  .cabecera > h2 { grid-column: 1; grid-row: 2; }
  .cabecera > .bajada { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 6px; max-width: 46ch; }

  /* El diagnóstico del home sigue la misma lógica */
  .diag__texto { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gap); align-items: end; }
  .diag__texto > .kicker { grid-column: 1; grid-row: 1; }
  .diag__texto > h2 { grid-column: 1; grid-row: 2; max-width: 14ch; }
  .diag__texto > .bajada { grid-column: 2; grid-row: 2; margin: 0 0 6px; max-width: 46ch; }

  /* El eje: centrado y con el texto más ancho, para que no quede un vacío a la derecha */
  .eje { max-width: 1000px; margin-inline: auto; }
  .eje__texto { max-width: 54ch; }
  .eje__paso { padding-right: 0; }

  /* Bloques que flotaban al medio: menos alto muerto */

  /* Las tres dimensiones: en escritorio la cadena se tiende a lo ancho */
  .orbes { --d: clamp(250px, 25vw, 330px); flex-direction: column; align-items: center; gap: 18px; }
  .orbes__pila { display: flex; }
  .orbe { flex: none; padding: 0 7%; }
  .orbe + .orbe { margin-top: 0; margin-left: calc(var(--d) * -.10); }
  .orbe__actos { font-size: 14px; }
  .orbe__taller { font-size: 13px; margin-top: 10px; }
  .orbes__llave { flex-direction: column; gap: 10px; width: 100%; max-width: calc(var(--d) * 2.66); }
  .orbes__llave::before { width: auto; height: clamp(10px, 1vw, 14px); align-self: stretch; margin-block: 0; margin-inline: calc(var(--d) * .12);
    border: 1.5px solid currentColor; border-top: 0; }
  .orbes__llave > span { writing-mode: horizontal-tb; text-align: center; }

  /* — Portada del home: encuadre más cerrado, para que se vean las caras.
       Corta bajo las rodillas y deja la banda 17-69 % de la foto — */
  .portada:not(.portada--interior) .caja--hero { aspect-ratio: 1.72; }
  .portada:not(.portada--interior) .caja--hero img { object-position: 50% 29%; }

  /* — Portada del home: la columna del titular cabe «Reimaginemos» en una línea,
       para que el título quede en tres y no en cuatro — */
  .portada:not(.portada--interior) .portada__sobre { grid-template-columns: 2fr 1fr; }
  .portada:not(.portada--interior) .portada__h1 { font-size: min(var(--fs-h1), 92px); }

  /* — Tokens: el h2 de sección no debe competir con el h1 de la página — */
  :root { --fs-h2: clamp(36px, 4.2vw, 60px); --fs-h2-l: clamp(40px, 4.6vw, 64px); }

  /* — Cabeceras — */
  /* Sin bajada, el título usa todo el ancho en vez de partirse en una columna angosta */
  .cabecera:not(:has(.bajada)) { grid-template-columns: 1fr; }
  .cabecera:not(:has(.bajada)) > h2 { max-width: 22ch; }
  /* Título y bajada arrancan arriba, no alineados por abajo */
  .cabecera, .diag__texto, .comunidad__cab { align-items: start; }
  .cabecera > .bajada, .diag__texto > .bajada, .comunidad__cab > .bajada { align-self: start; margin: 16px 0 0; }
  /* Impactos mete kicker y título en un <div>: hay que recolocar sus dos hijos */
  .cabecera.impactos__cab > div { grid-column: 1; grid-row: 1; }
  .cabecera.impactos__cab > .bajada { grid-column: 2; grid-row: 1; align-self: start; margin: 16px 0 0; max-width: 46ch; }

  /* — El llamado amarillo, más compacto (14 bloques en todo el sitio) — */
  .caja-sol { padding-block: 60px; }
  .pien__sello { width: 120px; margin-bottom: 16px; }
  .pien__cta h2 { margin-top: 10px; }
  .pien__cta .bajada { margin-top: 16px; max-width: 58ch; }
  .pien__cta .acciones { margin-top: 28px; }

  /* — Portadas interiores: una sola proporción para las nueve — */
  .portada--interior .caja--hero { aspect-ratio: 1.85; }
  .portada--interior { padding-bottom: clamp(32px, 3vw, 40px); }

  /* — Un solo radio para las tarjetas de contenido y otro para los controles — */
  .ficha-dato, .calendario > div { border-radius: var(--r-tarjeta); }
  .doc { border-radius: var(--r-thumb); }

  /* — Tarjetas de una misma fila: mismo arranque de título y de texto — */
  .pilares { grid-template-rows: auto auto auto; }
  .pilar { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .pilar__titulo { align-self: start; align-items: flex-start; }
  .pilar__ilus { width: 72px; height: 52px; }

  /* Fichas numeradas: el número al costado del título (se pide con .pasos--fichas) */
  .pasos--fichas { gap: 20px 24px; }
  .pasos--fichas > .paso { display: grid; grid-template-columns: 38px 1fr; column-gap: 16px; align-items: start; padding: 26px; }
  .pasos--fichas > .paso .paso__n { grid-area: 1 / 1 / 3 / 2; line-height: .95; }
  .pasos--fichas > .paso h3 { grid-area: 1 / 2; margin-top: 0; }
  .pasos--fichas > .paso p { grid-area: 2 / 2; }

  /* Una tarjeta sola en una fila de dos: se tiende a lo ancho */
  .pasos--2 > .paso:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gap); align-items: start; }
  .pasos--2 > .paso:only-child h3 { margin-top: 0; max-width: 18ch; }
  .pasos--2 > .paso:only-child p { margin-top: 0; max-width: 62ch; }

  /* — Home · origen y filosofía: las dos mitades se miran — */
  .origen { align-items: center; }
  .origen__texto { grid-column: 1 / 7; }
  .origen__texto .bajada { max-width: 52ch; }
  .origen__cita { grid-column: 7 / 13; }
  .origen__cita .cita { padding-block: clamp(36px, 4vw, 56px); }
  .origen__cita .cita blockquote { font-size: clamp(30px, 3vw, 40px); }

  /* — Home · testimonios: la tarjeta alta deja de ser una torre — */
  .testimonios__grid { gap: var(--gap); grid-template-rows: none; grid-auto-rows: 1fr; grid-auto-flow: row dense; }
  .testi { aspect-ratio: 5 / 4; }
  .testi--grande { aspect-ratio: auto; min-height: 0; grid-row: auto; }
  .testimonios__grid:has(> .testi:last-child:nth-child(odd)) .testi--grande { grid-row: span 2; }

  /* — Fundación · origen y filosofía: el texto a dos columnas y la cita en banda — */
  #filosofia .split { align-items: start; }
  #filosofia .split__texto, #filosofia .split__media { grid-column: 1 / 13; }
  #filosofia .split__media { margin-top: 36px; }
  #filosofia .prose--caja { max-width: none; columns: 2; column-gap: clamp(36px, 4vw, 48px); padding: clamp(28px, 3vw, 40px) clamp(32px, 3.5vw, 44px); }
  #filosofia .split__media > div { display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); }
  #filosofia .split__media .nota { margin-top: 0; flex: 1; max-width: none; }

  /* — Fundación · trayectoria: la foto acompaña el scroll de los hitos — */
  .trayectoria__intro { grid-column: 1 / 5; align-self: stretch; }
  .trayectoria__intro .caja { position: sticky; top: 96px; aspect-ratio: 3 / 4; }
  .trayectoria__hitos { grid-column: 5 / 13; }
  .hitos p { max-width: 58ch; }

  /* — Diagnóstico · el esquema de prioridades usa todo el ancho, en dos columnas — */
  #prioridades .nota { max-width: none; }
  #prioridades .esquema { max-width: none; display: block; columns: 2; column-gap: 40px; }
  #prioridades .esquema__head { column-span: all; grid-template-columns: repeat(2, calc((100% - 80px) / 4)); }
  #prioridades .esquema__row { break-inside: avoid; }
  #prioridades .esquema__head, #prioridades .esquema__row { gap: 20px; }
  #prioridades .esquema__row .a { font-size: 16px; }
  #prioridades .esquema__row .b { font-size: 22px; }

  /* — El mosaico de cifras se arma por la forma de cada tarjeta, no por su posición:
       así aguanta dos, tres, cuatro o más datos sin descuadrarse — */
  .cifras { grid-auto-flow: row dense; }
  .cifras .cifra:nth-child(n) { grid-column: 6 / 13; grid-row: auto; }
  .cifras .cifra--alta:nth-child(n) { grid-column: 1 / 6; grid-row: 1 / span var(--filas, 2); }
  .cifras:has(.cifra--btn) .cifra--media:nth-child(n) { grid-column: 6 / 10; }
  .cifras .cifra--btn:nth-child(n) { grid-column: 10 / 13; }

  /* — SEEN · los cinco instrumentos no dejan celda vacía — */
  #instrumentos .pasos--3 { grid-template-columns: repeat(6, 1fr); }
  #instrumentos .paso { grid-column: span 2; }
  #instrumentos .paso:last-child:nth-child(3n+1) { grid-column: span 6; }
  #instrumentos .paso:nth-last-child(2):nth-child(3n+1),
  #instrumentos .paso:last-child:nth-child(3n+2) { grid-column: span 3; }

  /* — SEEN · quiénes lo diseñan: retrato y bio en una sola ficha ancha — */
  #quienes .personas--grande { max-width: none; gap: var(--gap); }
  #quienes .persona { display: grid; grid-template-columns: 190px 1fr; column-gap: 24px; align-items: start; }
  #quienes .persona .redondo { grid-column: 1; grid-row: 1 / span 3; max-width: 190px; }
  #quienes .persona__nombre { margin-top: 0; }

  /* — Escuela Parque · aire antes del esquema del programa — */
  .esquema-fig.mt-3 { margin-top: 64px; }

  /* — Las notas dejan de medir 760 px sueltos: se alinean a dos tercios de la retícula — */
  .nota { max-width: calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap)); }
  /* salvo la que cierra la propuesta sustancial: va bajo el esquema y cierra con él */
  #educadores .nota { max-width: none; }

  /* — Los impactos se reparten solos: si mañana son cuatro o seis, la fila no se rompe — */
  .impactos__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  /* — Pie · la fila de sellos ocupa la banda completa en vez de dejar un hueco al medio — */
  .pie__timbres { gap: 56px; }
  .timbres { flex: 1; justify-content: space-between; gap: 24px; }
  .timbres .sello-img { width: 88px; }
  /* Cada PNG trae un margen interno distinto; se compensa por sello (no por posición,
     así que no se descuadra si se agrega o reordena alguno) para que la tinta mida parejo */
  .timbres .sello-img[style*="emn-negro"] { width: 95px; }
  .timbres .sello-img[style*="experiencias-negro"] { width: 107px; }
  .timbres .sello-img[style*="parque-escuela-negro"],
  .timbres .sello-img[style*="escuela-parque-negro"] { width: 82px; }
  .pie__aguila { width: 112px; }
  /* La marca cierra sobre la misma base que las columnas */
  .pie__marca { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
  .pie__linea { margin-top: auto; }
  /* El subrayado al pasar el mouse tiene que verse: cielo sobre blanco no alcanza */
  .pie__cols a:hover, .pie__cols a:focus-visible { text-decoration-color: var(--tinta); }

  /* — Estados — */
  /* El enlace del canal, sobre azul: el amarillo perdía contraste al pasar el mouse */
  .testimonios__mas a { text-decoration-color: rgba(255,255,255,.55); }
  .testimonios__mas a:hover { color: var(--blanco); text-decoration-color: var(--blanco); text-decoration-thickness: 2px; }
  /* Foco de teclado en las tarjetas que llevan el enlace en el título */
  .pilar:focus-within, .bit__card:focus-within { outline: 3px solid var(--tinta); outline-offset: 6px; }
  .pilar h3 a:focus-visible, .bit__card h3 a:focus-visible { outline: none; }
  /* El anillo bajo el cursor se marca con trazo, no con un cambio de opacidad casi invisible */
  .anillo { stroke: var(--tinta); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-opacity: 0; transition: fill-opacity .25s, stroke-opacity .2s; }
  .anillo:hover { fill-opacity: .34; stroke-opacity: 1; }
  /* Un solo tiempo para el acercamiento de las fotos */
  .caja img, .redondo img, .testi img, .bit__thumb img { transition-duration: .3s; }
  .brand { transition: opacity .2s; }
  .brand:hover { opacity: .78; }

  /* — Bitácora · la entrada se lee como entrada — */
  .post { max-width: none; }
  .post__meta, .post h1 { max-width: 720px; margin-inline: auto; }
  .post__lead { max-width: 720px; margin-inline: auto; font-size: 22px; line-height: 1.45; margin-top: 20px; }
  .post .prose { max-width: 720px; margin-inline: auto; font-size: 18px; line-height: 1.65; }
  .post > .caja { aspect-ratio: 1.85; }
  .post .prose h2, .post .prose h3 { margin-top: 1.5em; margin-bottom: 14px; }
  .post .prose .figures { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .post .prose .figures > div { padding: 22px 24px; border-radius: var(--r-tarjeta); }
  .post__nav { max-width: 720px; margin-inline: auto; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hairline); }
  .post__nav .es-anterior .arr { transform: scaleX(-1); }
  .post__nav .es-anterior:hover .arr { transform: scaleX(-1) translateX(4px); }
  .post__nav .es-indice { margin-left: auto; }
}

/* ==========================================================================
   Pantallas anchas: el pliego crece hasta donde la portada deja de crecer
   1.280 − 2×48 de canto = 1.184 = 640 (tope de alto de la portada) × 1,85
   ========================================================================== */
@media (min-width: 1630px) {
  :root { --max: min(70vw, 1280px); }
  /* El amarillo no crece con el pliego: su contenido está topado y quedaría vacío */
  .caja-sol { max-width: 1044px; margin-inline: auto; }
  .comunidad__caras { max-width: 1044px; margin-inline: auto; }
  .pilar > p { max-width: 38ch; }
  /* El ritmo de la fila de sellos sigue al pliego, no al viewport */
  .pie__timbres { gap: calc(56px + (var(--max) - 1140px) * .23); }
}

/* La portada del home a anchos intermedios: el título ocupa proporcionalmente más
   alto que a 1366, así que la caja crece para que las caras queden bajo el titular */
@media (min-width: 1024px) and (max-width: 1279px) {
  .portada:not(.portada--interior) .caja--hero { aspect-ratio: 1.45; }
  .portada:not(.portada--interior) .caja--hero img { object-position: 50% 17%; }
}

/* Los quehaceres nativos, en la página del sello: cada uno dentro de su óvalo
   (ilustración · quehacer · actos · habilidad), sin fotos, para no repetir el home */
.quehaceres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.quehacer { aspect-ratio: 1 / 1.24; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5);
  display: grid; place-content: center; justify-items: center; text-align: center; padding: 6% 13%; }
.quehacer__ilus { width: clamp(44px, 4.4vw, 60px); height: clamp(38px, 3.8vw, 50px); background-color: var(--blanco); }
.quehacer h3 { margin-top: 12px; font-size: clamp(26px, 2.8vw, 38px); line-height: 1; }
.quehacer__actos { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.quehacer__actos span { background: var(--blanco); color: var(--tinta); font-family: var(--display); font-size: clamp(14px, 1.3vw, 17px); line-height: 1; padding: 6px 13px; border-radius: 999px; }
.quehacer__para { margin-top: 16px; font-size: 12px; font-weight: 500; letter-spacing: .04em; opacity: .8; }
.quehacer__hab { margin-top: 2px; font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.quehacer__glosa { margin-top: 10px; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.35; opacity: .9; }
@media (max-width: 767px) {
  .quehaceres { grid-template-columns: 1fr; gap: 18px; }
  .quehacer { aspect-ratio: 1 / 1; padding: 10% 17%; }
  .quehacer h3 { font-size: 30px; }
  .quehacer__glosa { font-size: 14px; }
}