:root {
  --magenta: #882d5b;
  --verde: #8bb154;
  --crema: #fffbe7;
  --papel: #eee8d8;
  --oscuro: #171815;
  --gris: #5f625b;
  --font-h: "Bricolage Grotesque", "League Spartan", sans-serif;
  --font-b: "Alegreya Sans", sans-serif;
  --font-x: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --type-caption: .75rem;
  --type-small: .875rem;
  --type-body: 1rem;
  --type-lead: 1.25rem;
  --weight-body: 400;
  --weight-label: 700;
  --weight-heading: 800;
  --nav-h: 76px;
}

/* Pantalla de entrada compartida por las cinco páginas. */
body:has(#loader:not([hidden])) { overflow: hidden; }
#loader {
  gap: 1.25rem;
  background: var(--oscuro);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 280ms cubic-bezier(.22,1,.36,1),
    transform 620ms cubic-bezier(.76,0,.24,1);
}
#loader[hidden] { display: none; }
#loader.loader-saliendo {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.loader-logo {
  width: min(58vw, 270px);
  padding: .25rem;
}
.loader-logo img {
  display: block;
  width: 100%;
  filter: none;
  animation: loader-logo-entrada 520ms cubic-bezier(.22,1,.36,1) both;
}
.loader-bar-track {
  width: min(44vw, 190px);
  height: 3px;
  background: rgba(255,251,231,.16);
}
.loader-bar {
  background: var(--verde);
  transition: width 180ms cubic-bezier(.22,1,.36,1);
}
.loader-label {
  color: rgba(255,251,231,.62);
  font-family: var(--font-b);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}
@keyframes loader-logo-entrada {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #loader,
  .loader-logo img,
  .loader-bar { animation: none; transition-duration: 1ms; }
}

html { scroll-behavior: smooth; }
html,
body { overflow-x: clip; }
body {
  background-color: var(--crema);
  background-image: radial-gradient(rgba(23,24,21,.035) .7px, transparent .7px);
  background-size: 7px 7px;
  font-family: var(--font-b);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* Controles nativos y respuesta inmediata. */
#cursor-wrap { display: none !important; }
a,
button,
.hamburger,
.tl-filtro,
.perfil-op,
.faq-q,
.gal-btn,
.door { cursor: pointer !important; }
input,
textarea { cursor: text !important; }
select { cursor: pointer !important; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 10000;
  padding: .75rem 1rem;
  background: var(--oscuro);
  color: var(--crema);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

nav {
  top: 1rem;
  left: 2%;
  right: 2%;
  width: auto;
  height: var(--nav-h);
  padding: 0 1.25rem;
  border: 0;
  border-bottom: 1px solid rgba(255,251,231,.28);
  background: transparent;
  backdrop-filter: none;
}
nav.scrolled {
  background: rgba(255,251,231,.96);
  border-color: rgba(23,24,21,.1);
  box-shadow: 0 8px 24px rgba(39,31,22,.06);
  backdrop-filter: blur(12px);
}
.nav-logo img { height: 54px; }
.nav-links { gap: clamp(1rem,2.4vw,2.5rem); }
.nav-links a {
  font-size: .72rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: .02em;
}
.nav-cta {
  border-radius: 2px;
  padding: .72rem 1.25rem;
  font-size: .72rem;
  text-transform: none;
  letter-spacing: .01em;
}

body.menu-abierto { overflow: hidden; }
.nav-drawer {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  background: var(--oscuro);
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(100%,0,0);
  transition: transform 360ms cubic-bezier(.22,1,.36,1), visibility 0s linear 360ms;
  will-change: transform;
}
.nav-drawer.open {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0);
  transition-delay: 0s;
}
.drawer-visual {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--magenta);
}
.drawer-visual::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(0deg,rgba(23,24,21,.88),transparent 68%);
}
.drawer-visual img {
  filter: saturate(.72) contrast(1.08);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open .drawer-visual img { transform: scale(1.035); }
.drawer-visual-copy {
  position: absolute;
  z-index: 1;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.5rem,2.6vw,3rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}
.drawer-panel {
  display: flex;
  width: min(30rem, 92vw);
  min-width: 0;
  min-height: 100dvh;
  padding: clamp(1.5rem,4vw,4rem);
  flex-direction: column;
  background: var(--crema);
  color: var(--oscuro);
}
.drawer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(23,24,21,.2);
  color: var(--gris);
  font-family: var(--font-b);
  font-size: .72rem;
  letter-spacing: .05em;
}
.nav-drawer .drawer-close {
  position: static;
  width: auto;
  height: auto;
  padding: .5rem 0 .5rem 1rem;
  border: 0;
  border-radius: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-drawer .drawer-close:hover { background: transparent; color: var(--magenta); }
.drawer-rutas {
  display: grid;
  margin: auto 0;
}
.nav-drawer .drawer-rutas a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(.75rem,1.5vh,1.2rem) 0;
  border-bottom: 1px solid rgba(23,24,21,.14);
  color: var(--oscuro);
  transform: translateX(2rem);
  opacity: 0;
  transition: color 220ms ease, transform 520ms cubic-bezier(.16,1,.3,1), opacity 360ms ease;
}
.nav-drawer.open .drawer-rutas a { transform: none; opacity: 1; }
.nav-drawer.open .drawer-rutas a:nth-child(2) { transition-delay: 45ms; }
.nav-drawer.open .drawer-rutas a:nth-child(3) { transition-delay: 90ms; }
.nav-drawer.open .drawer-rutas a:nth-child(4) { transition-delay: 135ms; }
.nav-drawer.open .drawer-rutas a:nth-child(5) { transition-delay: 180ms; }
.nav-drawer .drawer-rutas a:hover,
.nav-drawer .drawer-rutas a[aria-current='page'] { color: var(--magenta); }
.drawer-num {
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: .68rem;
}
.drawer-copy { display: grid; gap: .12rem; }
.drawer-copy strong {
  font-family: var(--font-h);
  font-size: clamp(1.35rem,2.7vw,2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}
.drawer-copy small {
  color: var(--gris);
  font-family: var(--font-b);
  font-size: .72rem;
}
.drawer-arrow { font-size: 1.1rem; transition: transform 220ms ease; }
.drawer-rutas a:hover .drawer-arrow { transform: translate(.2rem,-.2rem); }
.drawer-contacto {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(23,24,21,.2);
  font-size: .74rem;
}
.drawer-contacto span { color: var(--gris); }
.drawer-contacto a { color: var(--oscuro); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .nav-drawer { grid-template-columns: 1fr; grid-template-rows: 27dvh 1fr; overflow-y: auto; }
  .drawer-visual { min-height: 27dvh; }
  .drawer-visual img { object-position: center 40%; }
  .drawer-visual-copy { right: 1.25rem; bottom: 1rem; left: 1.25rem; font-size: 1.35rem; }
  .drawer-panel { min-height: 73dvh; padding: 1.1rem 1.25rem 1.5rem; }
  .drawer-rutas { margin: 1rem 0; }
  .nav-drawer .drawer-rutas a { padding: .64rem 0; }
  .drawer-copy strong { font-size: 1.45rem; }
  .drawer-copy small { display: none; }
  .drawer-contacto { display: grid; }
}

#hero {
  min-height: 760px;
  height: 100dvh;
  align-items: center;
  padding: 9.5rem 5vw 5rem;
  background: var(--crema);
}
.hero-bg {
  background: radial-gradient(circle at 15% 78%, rgba(136,45,91,.12), transparent 29%), var(--crema);
}
.hero-photo {
  inset: 7.5rem 2.5vw 2.5rem auto;
  width: 56%;
  opacity: 1;
  filter: saturate(.78) contrast(1.06);
  transform: none;
  clip-path: polygon(8% 0,100% 0,100% 100%,0 100%,0 13%);
}
.hero-photo img { object-position: center 40%; }
.hero-scrim {
  left: auto;
  width: 58%;
  background: linear-gradient(90deg,var(--crema),transparent 18%), linear-gradient(0deg,rgba(23,24,21,.52),transparent 48%);
}
.hero-content {
  width: min(53%,72rem);
  max-width: 72rem;
  padding-right: 2.75rem;
}
.hero-tag {
  display: block;
  width: fit-content;
  margin-bottom: 2rem;
  padding: 0 0 .55rem;
  border: 0;
  border-bottom: 1px solid var(--magenta);
  border-radius: 0;
  background: transparent;
  color: var(--magenta);
  font-size: .7rem;
  text-transform: none;
}
.hero-title {
  max-width: 72rem;
  margin-bottom: 1.75rem;
  color: var(--oscuro);
  font-size: clamp(3.4rem,6.1vw,6.8rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
  text-shadow: none;
}
.hero-title .accent { color: var(--magenta); }
.hero-sub {
  max-width: 38rem;
  margin-bottom: 2.4rem;
  color: var(--gris);
  font-size: clamp(1rem,1.25vw,1.16rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.btn-primary,
.btn-outline,
.door-btn,
.form-submit {
  border-radius: 2px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.btn-primary {
  background: var(--oscuro);
  color: var(--crema);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--magenta);
  box-shadow: none;
}
.btn-outline {
  border: 0;
  border-bottom: 1px solid var(--oscuro);
  border-radius: 0;
  color: var(--oscuro);
}
.btn-outline:hover {
  border-color: var(--magenta);
  background: transparent;
  color: var(--magenta);
}

section { padding: clamp(7rem,12vw,11rem) 6%; }
.s-label {
  font-size: .68rem;
  text-transform: none;
  letter-spacing: .08em;
}
#quienes {
  grid-template-columns: minmax(0,7fr) minmax(18rem,5fr);
  gap: clamp(4rem,9vw,9rem);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}
.qs-quote {
  max-width: 12ch;
  font-size: clamp(3.2rem,6vw,6.5rem);
  font-weight: 850;
  line-height: .9;
  letter-spacing: -.055em;
}
.qs-text {
  max-width: 63ch;
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}
.qs-img {
  border-radius: 0;
  box-shadow: 24px 24px 0 rgba(136,45,91,.11);
}
.qs-img-caption {
  text-align: left;
  text-transform: none;
  letter-spacing: .04em;
}
.ejes {
  margin-top: 3rem;
  border-color: rgba(23,24,21,.18);
}
.eje {
  grid-template-columns: 1fr;
  padding: 1.55rem 0;
  border-color: rgba(23,24,21,.18);
}
.eje-n,
.acc-n { display: none; }
.eje-t {
  font-size: 1.16rem;
  font-weight: 700;
}

#trayectoria-h {
  background: radial-gradient(circle at 85% 0,rgba(139,177,84,.12),transparent 26%), var(--oscuro);
}
.th-titulo,
.acc-titulo,
.page-title,
#hero-lienzo h1,
.sumate-title,
.cinta-titulo {
  font-weight: 850;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.th-tarjeta {
  border-radius: 0;
  background: rgba(255,251,231,.07);
}
.th-hito:hover .th-tarjeta {
  background: rgba(255,251,231,.12);
  transform: translateY(-5px);
}
#statement { min-height: 100dvh; }
.st-quote {
  max-width: 15ch;
  font-weight: 850;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.st-mark { display: none; }

.acc-grid {
  display: flex;
  gap: .35rem;
  min-height: 34rem;
}
.acc-tarjeta {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34rem;
  border-radius: 0;
  transition: flex 700ms cubic-bezier(.19,1,.22,1), filter 500ms ease;
}
.acc-grid:hover .acc-tarjeta:not(:hover) {
  filter: grayscale(.7) brightness(.72);
}
.acc-tarjeta:hover {
  flex: 1.65 1 0;
  transform: none;
  box-shadow: none;
}
.acc-velo,
.acc-tarjeta:hover .acc-velo {
  background: linear-gradient(to top,rgba(23,24,21,.96),rgba(23,24,21,.1) 75%);
}
.acc-h { font-size: clamp(1.3rem,2.2vw,2.1rem); }
.acc-p {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 350ms ease, transform 350ms ease;
}
.acc-tarjeta:hover .acc-p,
.acc-tarjeta:focus-visible .acc-p {
  opacity: 1;
  transform: none;
}

.page-head {
  min-height: 72vh;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: 4rem;
  padding: 12rem 6% 6rem;
  background: radial-gradient(circle at 75% 22%,rgba(139,177,84,.16),transparent 22%), var(--oscuro);
}
.page-head::after {
  border-radius: 0;
  transform: rotate(12deg);
}
.page-title {
  max-width: 72rem;
  font-size: clamp(4rem,8vw,8.7rem);
  line-height: .86;
}
.page-lead {
  max-width: 42ch;
  padding-bottom: .5rem;
  text-wrap: pretty;
}

#hero-lienzo {
  height: 88dvh;
  min-height: 620px;
}
#hero-lienzo .hero-lienzo-overlay {
  background: linear-gradient(90deg,rgba(23,24,21,.86),rgba(23,24,21,.08) 75%), linear-gradient(0deg,rgba(23,24,21,.6),transparent 55%);
}
#hero-lienzo .hero-lienzo-content { max-width: 72rem; }
#hero-lienzo h1 {
  max-width: 13ch;
  font-size: clamp(4rem,8vw,8rem);
  line-height: .88;
}
#grid-fotos .grid-container {
  grid-auto-flow: dense;
  grid-template-columns: repeat(12,1fr);
  gap: .65rem;
}
#grid-fotos .grid-foto {
  grid-column: span 4;
  border-radius: 0;
}
#grid-fotos .grid-foto:nth-child(7n + 1),
#grid-fotos .grid-foto:nth-child(7n + 2) {
  grid-column: span 6;
}

.logos-item,
.door { border-radius: 0; }
#talleres-carousel .swiper-talleres {
  overflow: hidden !important;
}
.word-reveal { opacity: .12; }

@media (max-width: 900px) {
  nav { top: .55rem; left: 3%; right: 3%; }
  #hero {
    min-height: 760px;
    align-items: flex-end;
    padding: 8rem 6% 4rem;
    background: var(--oscuro);
  }
  .hero-photo {
    inset: 0;
    width: 100%;
    clip-path: none;
    opacity: .78;
  }
  .hero-scrim {
    inset: 0;
    width: 100%;
    background: linear-gradient(0deg,rgba(23,24,21,.97),rgba(23,24,21,.12) 72%);
  }
  .hero-content { width: 100%; padding-right: 0; }
  .hero-title,
  .hero-sub,
  .btn-outline { color: var(--crema); }
  .hero-title .accent { color: var(--verde); }
  .hero-tag { color: var(--verde); border-color: var(--verde); }
  .btn-primary { background: var(--verde); color: var(--oscuro); }
  .btn-outline { border-color: var(--crema); }
  #quienes,
  .page-head { grid-template-columns: 1fr; }
  .acc-grid { display: grid; min-height: 0; }
  .acc-tarjeta { min-height: 25rem; }
  .acc-p { opacity: 1; transform: none; }
  #grid-fotos .grid-foto,
  #grid-fotos .grid-foto:nth-child(7n + 1),
  #grid-fotos .grid-foto:nth-child(7n + 2) { grid-column: span 6; }
}

@media (max-width: 600px) {
  section { padding: 6.5rem 6%; }
  .hero-title { font-size: clamp(3rem,14vw,4.5rem); }
  .hero-title .nombre { white-space: normal; }
  .hero-btns { align-items: flex-start; flex-direction: column; }
  .page-title { font-size: clamp(3.6rem,16vw,5.4rem); }
  #grid-fotos .grid-foto,
  #grid-fotos .grid-foto:nth-child(7n + 1),
  #grid-fotos .grid-foto:nth-child(7n + 2) { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal { opacity: 1; }
}

/* Portada: la fotografía y el mensaje vuelven a ser una sola escena. */
.page-index #hero {
  height: clamp(680px, 47.3vw, 820px);
  min-height: 680px;
  align-items: flex-end;
  padding: 9rem 6% 4.5rem;
  background: var(--oscuro);
}
.page-index .hero-bg { background: var(--oscuro); }
.page-index .hero-photo {
  inset: 0;
  width: 100%;
  opacity: 1;
  filter: saturate(.92) contrast(1.03);
  transform: none;
  clip-path: none;
}
.page-index .hero-photo img {
  object-fit: cover;
  object-position: center 42%;
}
.page-index .hero-scrim {
  inset: 0;
  width: 100%;
  background:
    linear-gradient(90deg,rgba(25,9,19,.9) 0%,rgba(25,9,19,.58) 42%,rgba(25,9,19,.06) 77%),
    linear-gradient(0deg,rgba(25,9,19,.86) 0%,transparent 58%);
}
.page-index .hero-radial {
  background: radial-gradient(circle at 12% 84%,rgba(136,45,91,.48),transparent 34%);
}
.page-index .hero-content {
  width: min(72%, 72rem);
  max-width: 72rem;
  padding: 0;
}
.page-index .hero-tag {
  color: var(--verde);
  border-color: var(--verde);
}
.page-index .hero-title {
  max-width: 12ch;
  color: var(--crema);
  font-size: clamp(3.8rem,6.65vw,7.15rem);
  line-height: .86;
  text-shadow: 0 2px 30px rgba(0,0,0,.28);
}
.page-index .hero-title .accent { color: var(--verde); }
.page-index .hero-sub {
  max-width: 43rem;
  color: rgba(255,251,231,.86);
  font-size: clamp(1rem,1.35vw,1.22rem);
}
.page-index .btn-primary {
  background: var(--verde);
  color: var(--oscuro);
}
.page-index .btn-outline {
  color: var(--crema);
  border-color: var(--crema);
}

@media (max-width: 900px) {
  .page-index #hero { height: 100dvh; min-height: 720px; padding: 8rem 6% 3.5rem; }
  .page-index .hero-photo img { object-position: center 34%; }
  .page-index .hero-scrim {
    background: linear-gradient(0deg,rgba(17,13,15,.98) 0%,rgba(17,13,15,.58) 52%,rgba(17,13,15,.08) 82%);
  }
  .page-index .hero-content { width: 100%; }
  .page-index .hero-title { max-width: 10ch; font-size: clamp(3.2rem,13.5vw,5.2rem); }
}

/* Súmate: portada fotográfica y emotiva -un abrazo real de las colonias-
   en vez del motivo gráfico anterior. El texto se apoya abajo y a la
   derecha, dejando libre el lado izquierdo donde están los rostros del
   abrazo. */
.page-sumate .sumate-portada {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 88dvh;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--nav-h) + clamp(4.5rem, 9vw, 8rem)) 6% clamp(3.5rem, 6vw, 5.5rem);
}
.page-sumate .sumate-portada::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  background: url('../img/colonias-abrazo-2000.webp') left 32%/cover no-repeat;
  filter: saturate(.75) contrast(1.05);
}
.page-sumate .sumate-portada::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  content: '';
  background:
    linear-gradient(260deg, rgba(23,24,21,.95) 0%, rgba(23,24,21,.8) 32%, rgba(23,24,21,.28) 56%, rgba(23,24,21,.06) 78%),
    linear-gradient(0deg, rgba(23,24,21,.8) 0%, rgba(23,24,21,.15) 40%, transparent 65%);
  transform: none;
}
.page-sumate .sumate-portada-texto {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  text-align: right;
}
.page-sumate .sumate-portada .page-title {
  max-width: 11ch;
  margin-left: auto;
  font-family: var(--font-h);
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.page-sumate .sumate-portada .page-lead {
  max-width: 34ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: rgba(255,251,231,.9);
}
.page-sumate #sumate { padding-bottom: clamp(6rem,10vw,9rem); padding-top: clamp(5rem,9vw,7.5rem); }
/* Pregunta central, sin una bajada que repita la invitación de las tarjetas. */
.page-sumate .sumate-top {
  display: block;
  max-width: 1440px;
  margin: 0 auto clamp(3rem,6vw,4.5rem);
  text-align: center;
}
.page-sumate .sumate-title {
  max-width: 12ch;
  margin-inline: auto;
  font-size: clamp(2.75rem,5.5vw,5rem);
  line-height: .92;
  text-align: center;
}
.page-sumate .doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  max-width: 1440px;
  margin: 0 auto;
}
.page-sumate .door {
  position: relative;
  min-height: 36rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(1.5rem,4vw,3rem);
  border: 0;
  color: var(--crema);
  isolation: isolate;
}
.page-sumate .door::before,
.page-sumate .door::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  background-position: center;
  background-size: cover;
  transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.page-sumate .door::after {
  z-index: -1;
  background: linear-gradient(0deg,rgba(23,24,21,.96),rgba(23,24,21,.08) 78%);
}
.page-sumate .door-joven::before { background-image: url('../img/taller-bisuteria.jpg'); background-position: center 35%; }
.page-sumate .door-inst::before { background-image: url('../img/museo-carpinteria.jpg'); background-position: center 78%; }
.page-sumate .door:hover::before { transform: scale(1.045); }
.page-sumate .door-deco { display: none; }
/* Color fijo en crema: el magenta de la plantilla base (.door-inst .door-h)
   se perdía contra la foto del taller -texturas de madera, mucho ruido
   visual- y quedaba prácticamente ilegible. */
.page-sumate .door-h {
  max-width: 13ch;
  color: var(--crema);
  font-size: clamp(2rem,4vw,4rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.page-sumate .door-p { max-width: 48ch; color: rgba(255,251,231,.78); }
.page-sumate .door-btn {
  width: fit-content;
  margin-top: 1.25rem;
  padding: .9rem 1.2rem;
  background: var(--verde);
  color: var(--oscuro);
}
.page-sumate #faq { background: var(--papel); }
.page-sumate #contacto { background: var(--oscuro); }
.page-sumate .contact-grid { gap: clamp(4rem,9vw,9rem); }
.page-sumate .ct-title { max-width: 9ch; }
.page-sumate #formContacto {
  padding: clamp(1.4rem,3vw,2.5rem);
  border: 1px solid rgba(255,251,231,.18);
  background: rgba(255,251,231,.045);
}

/* Trabajo en red: primero la filosofía, después los nombres. */
.page-aliados .page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-aliados .page-head::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  background: url('../img/museo-carpinteria.jpg') center 45%/cover no-repeat;
  filter: saturate(.68) contrast(1.06);
}
.page-aliados .page-head::after {
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  background: linear-gradient(90deg,rgba(23,24,21,.95),rgba(23,24,21,.46) 62%,rgba(23,24,21,.12));
  transform: none;
}
.red-manifiesto {
  background: var(--crema);
  padding-top: clamp(4rem,7vw,6.5rem);
  padding-bottom: clamp(4rem,7vw,6.5rem);
}
.red-kicker {
  max-width: 1440px;
  margin: 0 auto 3rem;
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: .72rem;
  letter-spacing: .08em;
}

/* Sistema tipográfico: dos familias, cinco roles y pesos consistentes. */
.hero-title,
.page-title,
.qs-quote,
.th-titulo,
.st-quote,
.acc-titulo,
.lienzo-frase,
.cifras-titulo,
.talleres-titulo,
.cierre-content h2,
.sumate-title,
.faq-title,
.ct-title,
.cinta-titulo,
.red-manifiesto h2 {
  font-family: var(--font-h);
  font-weight: var(--weight-heading);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero-sub,
.page-lead,
.qs-text,
.st-parrafo,
.sumate-sub,
.door-p,
.faq-a,
.red-manifiesto-texto p {
  font-family: var(--font-b);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.65;
}

.page-lead,
.qs-lead,
.sumate-sub { font-size: var(--type-lead); }

.s-label,
.hero-tag,
.door-tag,
.red-kicker,
.drawer-topline,
.drawer-num,
.nav-links a,
.nav-cta {
  font-family: var(--font-h);
  font-size: var(--type-caption);
  font-weight: var(--weight-label);
  letter-spacing: .06em;
}

.nav-links a,
.nav-cta { letter-spacing: .01em; }

p { text-wrap: pretty; }
.red-manifiesto-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(4rem,9vw,9rem);
  max-width: 1440px;
  margin: 0 auto;
}
.red-manifiesto h2 {
  max-width: 9ch;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(3.6rem,7vw,7rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
}
.red-manifiesto-texto { display: grid; align-content: end; gap: 1.5rem; }
.red-manifiesto-texto p { max-width: 58ch; color: var(--gris); font-size: 1.05rem; line-height: 1.75; }
.page-aliados .aliados-cinta-bloque { background: var(--oscuro); }
.page-aliados .cinta-intro { max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }
.page-aliados .cinta-titulo { max-width: 20ch; margin: 0 auto; font-size: clamp(1.75rem,3.2vw,2.75rem); line-height: 1.15; color: var(--crema); }
.page-aliados .cinta-titulo .v { color: var(--verde); }
.page-aliados .logos-cinta {
  background: var(--oscuro);
  border-color: rgba(255,251,231,.14);
}
.page-aliados .logos-cinta::before { background: linear-gradient(90deg, var(--oscuro), transparent); }
.page-aliados .logos-cinta::after  { background: linear-gradient(270deg, var(--oscuro), transparent); }
.page-aliados .logos-item {
  padding: 0 3.2rem;
  border-radius: .65rem;
  transition: background .35s ease;
}
/* grayscale + invert (no brightness(0)) conserva el contraste interno:
   un escudo con blanco y negro adentro (Club Deportivo, JAB) se invierte
   entero y se sigue leyendo, en vez de aplastarse en una mancha blanca. */
.page-aliados .logos-item img {
  filter: grayscale(1) invert(1) opacity(.55);
}
.page-aliados .logos-item:hover {
  background: rgba(255,251,231,.07);
}
.page-aliados .logos-item:hover img {
  filter: grayscale(1) invert(1) opacity(1);
}
@media (max-width: 700px) {
  .page-aliados .logos-item { padding: 0 1.6rem; }
}

@media (max-width: 800px) {
  .page-sumate .sumate-portada { min-height: 82dvh; }
  .page-aliados .page-head::after { background: linear-gradient(0deg,rgba(23,24,21,.96),rgba(23,24,21,.32) 72%); }
  .page-sumate .sumate-top,
  .page-sumate .doors,
  .red-manifiesto-grid { grid-template-columns: 1fr; gap: 2rem; }
  .page-sumate .door { min-height: 30rem; }
}

/* Adaptación móvil: menos densidad, blancos más claros y controles táctiles. */
@media (max-width: 760px) {
  :root { --nav-h: 4rem; }

  /* En vertical la caja es mucho más angosta que la foto: se ve solo
     una franja delgada. Centramos esa franja en la cara de la monitora
     en vez de dejar el recorte pegado al borde izquierdo. */
  .page-sumate .sumate-portada::before { background-position: 30% center; }

  html { scroll-padding-top: calc(var(--nav-h) + .75rem); }
  body { font-size: 1rem; line-height: 1.6; }
  section { padding: 4.75rem 1.25rem; }

  nav,
  nav.scrolled {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--nav-h);
    padding: 0 .75rem 0 1rem;
    border-bottom: 1px solid rgba(255,251,231,.12);
    background: rgba(23,24,21,.94);
    box-shadow: none;
    backdrop-filter: blur(12px);
  }
  nav.scrolled {
    border-bottom-color: rgba(23,24,21,.1);
    background: rgba(255,251,231,.97);
  }
  .nav-logo img { width: auto; height: 2.8rem; }
  .hamburger {
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: .55rem;
  }
  .hamburger span { width: 1.5rem; }

  /* Menú móvil deliberadamente simple: sin foto, numeración ni bajadas. */
  .nav-drawer {
    display: block;
    overflow: hidden;
    background: var(--crema);
  }
  .drawer-visual { display: none; }
  .drawer-panel {
    min-height: 100svh;
    padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  }
  .drawer-topline {
    min-height: 2.75rem;
    margin: 0;
    padding-bottom: .75rem;
  }
  .nav-drawer .drawer-close {
    min-width: 3.25rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
  }
  .drawer-rutas {
    display: grid;
    margin: auto 0;
  }
  .nav-drawer .drawer-rutas a {
    min-height: 3.75rem;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: .75rem 0;
    transform: translateX(1rem);
    transition-duration: 260ms, 280ms, 220ms;
    transition-delay: 0s !important;
  }
  .drawer-copy strong {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1;
  }
  .drawer-num,
  .drawer-copy small { display: none; }
  .drawer-arrow { font-size: 1rem; }
  .drawer-contacto {
    display: grid;
    gap: .25rem;
    padding-top: .9rem;
    font-size: .78rem;
  }
  .drawer-contacto a { overflow-wrap: anywhere; }

  /* Portada: fotografía dominante, texto legible y acciones alcanzables. */
  .page-index #hero {
    height: auto;
    min-height: max(42rem, 100svh);
    padding: calc(var(--nav-h) + 1.25rem) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  }
  /* "display:contents" sacaba el título, la bajada y los botones de su
     bloque agrupador: cada uno quedaba suelto dentro del flex de #hero
     en vez de apilarse junto, y eso dejaba un salto enorme entre el
     título y el párrafo. Un bloque normal los mantiene juntos. */
  .page-index .hero-title {
    max-width: 11ch;
    font-size: clamp(2.65rem, 12vw, 3.45rem);
    line-height: .92;
    letter-spacing: -.05em;
  }
  .page-index .hero-sub {
    max-width: 34rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    text-align-last: auto;
    hyphens: none;
  }
  .hero-btns { width: 100%; gap: .5rem; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    font-size: .78rem;
  }

  /* Ritmo compartido por todas las páginas internas. */
  .page-head,
  .page-sumate .page-head {
    min-height: 68svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--nav-h) + 3.5rem) 1.25rem 3rem;
  }
  .page-title {
    max-width: 11ch;
    font-size: clamp(2.8rem, 13vw, 4rem);
    line-height: .9;
  }
  .page-lead,
  .qs-lead,
  .sumate-sub {
    max-width: 38rem;
    margin-top: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .s-label { margin-bottom: 1rem; }
  .qs-quote,
  .sumate-title,
  .faq-title,
  .ct-title,
  .cinta-titulo,
  .red-manifiesto h2 {
    max-width: 11ch;
    font-size: clamp(2.55rem, 11vw, 3.45rem);
    line-height: .94;
  }

  #quienes { gap: 0; }
  .qs-text,
  .red-manifiesto-texto p,
  .tl-texto { font-size: 1rem; line-height: 1.65; }
  .qs-visual { margin: 1.5rem 0 2rem; }
  .qs-img { border-radius: 0; }
  .datos-grid { gap: .55rem; }
  .dato { padding: 1rem; border-radius: 0; }

  #accesos .acc-cab { margin-bottom: 2rem; }
  .acc-grid { gap: .75rem; }
  .acc-tarjeta { min-height: 0; }
  .acc-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .acc-txt { padding: 1.25rem; }
  .acc-n { display: none; }
  .acc-h { font-size: 1.45rem; }
  .acc-p { margin-bottom: .75rem; font-size: .95rem; }

  /* Cronología y filtros utilizables con el pulgar. */
  #trayectoria { padding: 1.5rem 1.25rem 4.75rem; }
  .tl-filtros {
    top: var(--nav-h);
    margin: 0 -1.25rem;
    padding: .75rem 1.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-filtro { min-height: 2.75rem; flex: 0 0 auto; padding: .55rem 1rem; }
  .tl-anio { padding-top: 2.75rem; }
  .tl-anio-n { font-size: 3.2rem; }
  .tl-anio-lema { font-size: .8rem; line-height: 1.45; }
  .tl-lista { padding-left: 1.6rem; }
  .tl-punto { left: -1.6rem; }
  .tl-fotos { gap: .5rem; }

  /* Colonias: mosaico legible y cifras que no se desbordan. */
  #hero-lienzo { height: 72svh; min-height: 32rem; }
  #hero-lienzo .hero-lienzo-content { right: 1.25rem; bottom: 2rem; left: 1.25rem; }
  #hero-lienzo h1 { max-width: 11ch; font-size: clamp(2.65rem, 12vw, 3.5rem); }
  #grid-fotos { padding: 3rem 1.25rem; }
  #grid-fotos .grid-container { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  #grid-fotos .grid-foto,
  #grid-fotos .grid-foto:nth-child(7n + 1),
  #grid-fotos .grid-foto:nth-child(7n + 2) { grid-column: span 1; aspect-ratio: 3 / 4; }
  #grid-fotos .grid-foto:nth-child(5n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  #metricas-colonias { padding: 4.75rem 1.25rem; }
  .cifras-lista { grid-template-columns: 1fr; gap: 2.5rem; }
  .cifras-lista > .cifra:nth-child(n) { grid-column: 1; margin-top: 0; }
  .cifra-n,
  .c-ancha .cifra-n,
  .c-larga .cifra-n { font-size: clamp(3rem, 15vw, 4.3rem); }
  #talleres-carousel { padding: 3.75rem 1.25rem 3rem; }

  /* Súmate: caminos, apoyo y formulario en una sola columna. */
  .page-sumate .sumate-portada { padding: calc(var(--nav-h) + 3.5rem) 1.25rem 3.5rem; }
  .page-sumate #sumate { padding-bottom: 5rem; }
  .page-sumate .sumate-top { margin-bottom: 2.5rem; }
  .page-sumate .doors { gap: .75rem; }
  .page-sumate .door { min-height: 27rem; padding: 1.5rem; }
  .page-sumate .door-h { font-size: 2.35rem; }
  .page-sumate .door-btn { min-height: 2.75rem; }
  .faq-q { min-height: 3.5rem; font-size: 1rem; }
  .page-sumate #formContacto { padding: 1.25rem; }
  .perfiles { grid-template-columns: 1fr; }
  .perfil-op { min-height: 3.5rem; }
  .form-g input,
  .form-g select { min-height: 3rem; font-size: 1rem; }
  .form-g textarea { min-height: 7rem; font-size: 1rem; }
  .form-submit { min-height: 3rem; }
  .ct-val { overflow-wrap: anywhere; }

  /* Trabajo en red: manifiesto breve antes de los logos. */
  .red-manifiesto { padding: 3rem 1.25rem; }
  .red-kicker { margin-bottom: 2rem; }
  .red-manifiesto-grid { gap: 2rem; }
  .page-aliados .aliados-cinta-bloque { padding: 4.5rem 0; }
  .cinta-intro { padding: 0 1.25rem; }
  .logos-item { height: 3rem; padding: 0 1.25rem; }

  /* Pie y utilidades sin cortes de correo ni controles pequeños. */
  .ft-base { padding: 3rem 1.25rem; gap: 2rem; }
  .ft-ident { gap: 1rem; }
  .ft-logo img { height: 4.5rem; }
  .ft-contacto { width: 100%; min-width: 0; }
  .ft-canal { min-height: 3rem; grid-template-columns: 1fr auto; }
  .ft-canal-lbl { grid-column: 1 / -1; }
  .ft-canal-val { font-size: .9rem; overflow-wrap: anywhere; }
  #btt {
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 760px) and (hover: none) {
  .acc-tarjeta:hover,
  .door:hover,
  .dato:hover { transform: none; box-shadow: none; }
  .acc-tarjeta:hover .acc-foto,
  .page-sumate .door:hover::before,
  #grid-fotos .grid-foto:hover img { transform: none; }
  .logos-track { animation-duration: 52s; }
}

@media (max-width: 380px) {
  .page-index .hero-title { font-size: 2.55rem; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline { width: 100%; flex: none; }
  .datos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
  .drawer-panel { overflow-y: auto; }
  .nav-drawer .drawer-rutas a { min-height: 3rem; padding: .45rem 0; }
  .drawer-copy strong { font-size: 1.45rem; }
  .page-index #hero { min-height: 34rem; }
}

/* Colonias: mosaico fotográfico en seis filas de tres escenas. */
.page-colonias #grid-fotos {
  padding: clamp(6rem, 10vw, 9rem) clamp(1.25rem, 3vw, 3rem);
  background: var(--crema);
}
.mosaico-cab {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 92rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.mosaico-kicker,
.impacto-kicker,
.impacto-etiqueta {
  margin-bottom: 1.25rem;
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: var(--type-caption);
  font-weight: var(--weight-label);
  letter-spacing: .08em;
}
.mosaico-cab h2,
.impacto-cab h2 {
  max-width: 10ch;
  font-family: var(--font-h);
  font-size: clamp(3.7rem, 7vw, 7.2rem);
  font-weight: var(--weight-heading);
  line-height: .88;
  letter-spacing: -.055em;
}
.mosaico-bajada {
  max-width: 42ch;
  color: var(--gris);
  font-size: 1.1rem;
  line-height: 1.7;
}
.page-colonias #grid-fotos .grid-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows:
    clamp(16rem, 23vw, 25rem)
    clamp(14rem, 19vw, 21rem)
    clamp(15rem, 21vw, 23rem)
    clamp(14rem, 18vw, 20rem)
    clamp(16rem, 23vw, 25rem)
    clamp(14rem, 20vw, 22rem);
  grid-auto-flow: row;
  gap: clamp(.35rem, .75vw, .75rem);
  max-width: 92rem;
  margin: 0 auto;
}
.page-colonias #grid-fotos .grid-foto,
.page-colonias #grid-fotos .grid-foto:nth-child(7n + 1),
.page-colonias #grid-fotos .grid-foto:nth-child(7n + 2) {
  grid-column: span 4;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--papel);
}
.page-colonias #grid-fotos .grid-foto:nth-child(1),
.page-colonias #grid-fotos .grid-foto:nth-child(5),
.page-colonias #grid-fotos .grid-foto:nth-child(10),
.page-colonias #grid-fotos .grid-foto:nth-child(15),
.page-colonias #grid-fotos .grid-foto:nth-child(17) { grid-column: span 5; }
.page-colonias #grid-fotos .grid-foto:nth-child(2),
.page-colonias #grid-fotos .grid-foto:nth-child(4),
.page-colonias #grid-fotos .grid-foto:nth-child(12),
.page-colonias #grid-fotos .grid-foto:nth-child(13),
.page-colonias #grid-fotos .grid-foto:nth-child(18) { grid-column: span 3; }
.page-colonias #grid-fotos picture,
.page-colonias #grid-fotos img { width: 100%; height: 100%; }
.page-colonias #grid-fotos picture { display: block; }
.page-colonias #grid-fotos img {
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1), filter 300ms ease;
}
@media (hover: hover) {
  .page-colonias #grid-fotos .grid-foto:hover img { transform: scale(1.025); filter: saturate(1.06); }
}

/* Colonias en cifras: cifra principal + acta territorial, sin grilla de tarjetas. */
.page-colonias #metricas-colonias {
  padding: clamp(7rem, 12vw, 11rem) 6%;
  background: var(--papel);
  color: var(--oscuro);
}
.impacto-cab {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: 1.5rem clamp(3rem, 8vw, 8rem);
  max-width: 88rem;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
}
.impacto-cab .impacto-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.impacto-cab > p:last-child {
  max-width: 38ch;
  color: var(--gris);
  font-size: 1.1rem;
  line-height: 1.7;
}
.impacto-composicion {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(.75rem, 1.5vw, 1.5rem);
  max-width: 88rem;
  margin: 0 auto;
}
.impacto-principal {
  min-height: 40rem;
  display: flex;
  padding: clamp(2rem, 4vw, 4rem);
  flex-direction: column;
  background: var(--magenta);
  color: var(--crema);
}
.impacto-principal .impacto-etiqueta { color: var(--verde); }
.impacto-numero {
  margin: auto 0 1.25rem;
  font-family: var(--font-h);
  font-size: clamp(5rem, 10vw, 10.5rem);
  font-weight: 800;
  line-height: .76;
  letter-spacing: -.08em;
  white-space: nowrap;
}
.impacto-numero span { color: var(--verde); font-weight: 600; }
.impacto-principal h3 {
  max-width: 10ch;
  font-family: var(--font-h);
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.045em;
}
.impacto-nota {
  max-width: 34ch;
  margin-top: 1.5rem;
  color: rgba(255,251,231,.72);
  line-height: 1.6;
}
.impacto-lista {
  display: grid;
  align-content: stretch;
  border-top: 1px solid rgba(23,24,21,.22);
}
.impacto-fila {
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) 7fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.4rem, 2.5vw, 2.25rem) 0;
  border-bottom: 1px solid rgba(23,24,21,.22);
}
.impacto-valor {
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: clamp(3rem, 5vw, 5.2rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.impacto-valor span { color: var(--verde); font-size: .48em; letter-spacing: -.02em; }
.impacto-valor-largo { font-size: clamp(2rem, 3.3vw, 3.6rem); }
.impacto-fila h3 {
  margin-bottom: .35rem;
  font-family: var(--font-h);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.1;
}
.impacto-fila div p { max-width: 46ch; color: var(--gris); line-height: 1.55; }
.impacto-cierre {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 88rem;
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(23,24,21,.22);
}
.impacto-cierre > p:first-child { max-width: 58ch; color: var(--gris); font-size: 1.05rem; line-height: 1.7; }
.impacto-sello {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  justify-self: end;
}
.impacto-sello strong {
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: .75;
  letter-spacing: -.06em;
}
.impacto-sello span {
  color: var(--gris);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .mosaico-cab,
  .impacto-cab,
  .impacto-cierre { grid-template-columns: 1fr; gap: 2rem; }
  .impacto-composicion { grid-template-columns: 1fr; }
  .impacto-principal { min-height: 30rem; }
  .impacto-sello { justify-self: start; }
}

@media (max-width: 760px) {
  .page-colonias #grid-fotos { padding: 5rem 1.25rem; }
  .mosaico-cab { margin-bottom: 2.5rem; }
  .mosaico-cab h2,
  .impacto-cab h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .mosaico-bajada,
  .impacto-cab > p:last-child { font-size: 1rem; line-height: 1.6; }
  .page-colonias #grid-fotos .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: .5rem;
  }
  .page-colonias #grid-fotos .grid-foto,
  .page-colonias #grid-fotos .grid-foto:nth-child(n) {
    grid-column: span 1;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .page-colonias #grid-fotos .grid-foto:nth-child(5n + 1) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }

  .page-colonias #metricas-colonias { padding: 5.5rem 1.25rem; }
  .impacto-cab { margin-bottom: 3rem; }
  .impacto-principal { min-height: 25rem; padding: 1.5rem; }
  .impacto-numero { font-size: clamp(4.6rem, 23vw, 6.7rem); }
  .impacto-principal h3 { font-size: 2.35rem; }
  .impacto-fila {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: 1.4rem 0;
  }
  .impacto-valor { font-size: 3.5rem; }
  .impacto-valor-largo { font-size: clamp(2.35rem, 11vw, 3.2rem); }
  .impacto-fila h3 { font-size: 1.2rem; }
  .impacto-cierre { margin-top: 3.5rem; }
  .impacto-sello { align-items: center; }
  .impacto-sello strong { font-size: 3.6rem; }
}

/* Colonias v3: retícula fotográfica regular, tres cuadrados por fila. */
@media (min-width: 761px) {
  .page-colonias #grid-fotos .grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: clamp(.5rem, 1vw, 1rem);
  }
  .page-colonias #grid-fotos .grid-foto,
  .page-colonias #grid-fotos .grid-foto:nth-child(n) {
    grid-column: span 1;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

@media (max-width: 760px) {
  .page-colonias #grid-fotos .grid-foto,
  .page-colonias #grid-fotos .grid-foto:nth-child(n),
  .page-colonias #grid-fotos .grid-foto:nth-child(5n + 1) {
    grid-column: span 1;
    aspect-ratio: 1;
  }
}

/* Tablero lúdico de cifras: una sola lógica visual y un detalle compartido. */
.page-colonias #metricas-colonias {
  padding: clamp(7rem, 12vw, 11rem) 6%;
  background: var(--magenta);
  color: var(--crema);
}
.lluvia-cab {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 88rem;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
}
.lluvia-kicker {
  margin-bottom: 1.25rem;
  color: var(--verde);
  font-family: var(--font-h);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: .08em;
}
.lluvia-cab h2 {
  max-width: 10ch;
  font-family: var(--font-h);
  font-size: clamp(3.7rem, 7vw, 7.2rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
}
.lluvia-instruccion {
  max-width: 34ch;
  color: rgba(255,251,231,.76);
  font-size: 1rem;
  line-height: 1.6;
}
.lluvia-instruccion span { color: var(--verde); font-size: 1.2rem; }
.lluvia-tablero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: stretch;
  max-width: 88rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255,251,231,.35);
  border-left: 1px solid rgba(255,251,231,.35);
}
.lluvia-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lluvia-dato {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  padding: clamp(1rem, 2.2vw, 2rem);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 0;
  border-right: 1px solid rgba(255,251,231,.35);
  border-bottom: 1px solid rgba(255,251,231,.35);
  border-radius: 0;
  background: transparent;
  color: var(--crema);
  text-align: left;
  transition: background-color 220ms ease, color 220ms ease;
  contain: layout paint;
}
.lluvia-dato::after {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--verde);
  content: '';
  transition: transform 220ms cubic-bezier(.25,1,.5,1), background-color 220ms ease;
}
.lluvia-numero {
  max-width: 100%;
  font-family: var(--font-h);
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: transform 240ms cubic-bezier(.25,1,.5,1);
}
.lluvia-numero-largo { font-size: clamp(1.55rem, 2.8vw, 3.25rem); }
.lluvia-label {
  max-width: 18ch;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-h);
  font-size: clamp(.82rem, 1.2vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
}
.lluvia-dato.activo,
.lluvia-dato:hover,
.lluvia-dato:focus-visible {
  background: var(--verde);
  color: var(--oscuro);
}
.lluvia-dato.activo .lluvia-numero,
.lluvia-dato:hover .lluvia-numero,
.lluvia-dato:focus-visible .lluvia-numero { transform: translateY(-.3rem); }
.lluvia-dato.activo::after,
.lluvia-dato:hover::after,
.lluvia-dato:focus-visible::after { background: var(--magenta); transform: scale(1.35); }
.lluvia-dato:focus-visible { outline: 3px solid var(--crema); outline-offset: -5px; }
.lluvia-detalle {
  min-width: 0;
  display: flex;
  padding: clamp(1.75rem, 4vw, 4rem);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255,251,231,.35);
  border-bottom: 1px solid rgba(255,251,231,.35);
  background: var(--crema);
  color: var(--oscuro);
}
.lluvia-orden,
.lluvia-pie {
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: .08em;
}
.lluvia-detalle h3 {
  max-width: 11ch;
  margin-bottom: 1.25rem;
  font-family: var(--font-h);
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}
.lluvia-detalle div p { max-width: 38ch; color: var(--gris); font-size: 1.05rem; line-height: 1.65; }

@media (max-width: 900px) {
  .lluvia-cab,
  .lluvia-tablero { grid-template-columns: 1fr; }
  .lluvia-cab { gap: 2rem; }
  .lluvia-detalle { min-height: 25rem; }
}

@media (max-width: 760px) {
  .page-colonias #metricas-colonias { padding: 5.5rem 1.25rem; }
  .lluvia-cab { margin-bottom: 3rem; }
  .lluvia-cab h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .lluvia-instruccion { font-size: .95rem; }
  .lluvia-tablero { border-left: 0; }
  .lluvia-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid rgba(255,251,231,.35); }
  .lluvia-dato { padding: 1rem; }
  .lluvia-numero { font-size: clamp(2.55rem, 13vw, 3.7rem); }
  .lluvia-numero-largo { font-size: clamp(1.45rem, 7vw, 2rem); }
  .lluvia-label { font-size: .82rem; }
  .lluvia-detalle { min-height: 23rem; padding: 1.5rem; }
  .lluvia-detalle h3 { font-size: 2.65rem; }
  .lluvia-detalle div p { font-size: 1rem; }
}

/* Colonias v4: relato de scroll legible sin depender de interacción. */
.page-colonias #metricas-colonias {
  padding: 0 6% clamp(7rem, 12vw, 11rem);
  background: var(--papel);
  color: var(--oscuro);
}
.cifras-relato {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  max-width: 92rem;
  margin: 0 auto;
}
.cifras-sticky {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  padding: clamp(2.5rem, 5vw, 5rem);
  flex-direction: column;
  justify-content: space-between;
  background: var(--magenta);
  color: var(--crema);
}
.relato-kicker {
  margin-bottom: 1.5rem;
  color: var(--verde);
  font-family: var(--font-h);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: .08em;
}
.cifras-sticky h2 {
  max-width: 9ch;
  font-family: var(--font-h);
  font-size: clamp(3.5rem, 6.5vw, 6.8rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.06em;
}
.relato-intro {
  max-width: 34ch;
  margin-top: 2rem;
  color: rgba(255,251,231,.76);
  font-size: 1.05rem;
  line-height: 1.65;
}
.relato-progreso {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: .75rem;
  font-weight: 700;
}
.relato-progreso i {
  height: 2px;
  overflow: hidden;
  background: rgba(255,251,231,.24);
}
.relato-progreso b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--verde);
  transform: scaleX(.1667);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(.25,1,.5,1);
}
.cifras-relato-lista { border-top: 1px solid rgba(23,24,21,.18); }
.cifra-relato {
  position: relative;
  min-height: clamp(24rem, 54svh, 34rem);
  display: grid;
  grid-template-columns: minmax(12rem, 4fr) 8fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 5vw, 5rem);
  border-right: 1px solid rgba(23,24,21,.18);
  border-bottom: 1px solid rgba(23,24,21,.18);
  background: var(--crema);
  color: var(--oscuro);
  transition: background-color 280ms ease, color 280ms ease;
}
.cifra-relato::before {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  color: var(--magenta);
  content: attr(data-indice);
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 700;
}
.relato-numero {
  font-family: var(--font-h);
  font-size: clamp(4rem, 7vw, 7.5rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.075em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: transform 300ms cubic-bezier(.25,1,.5,1);
}
.relato-numero-largo { font-size: clamp(2.35rem, 4.25vw, 4.7rem); }
.cifra-relato h3 {
  max-width: 18ch;
  font-family: var(--font-h);
  font-size: clamp(1.75rem, 3vw, 3.15rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
}
.cifra-relato h3 strong { font-weight: 800; }
.cifra-relato div > p {
  max-width: 45ch;
  margin-top: 1.25rem;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.65;
  transition: color 280ms ease;
}
.cifra-relato.activa {
  background: var(--verde);
  color: var(--oscuro);
}
.cifra-relato.activa::before { color: var(--oscuro); }
.cifra-relato.activa .relato-numero { transform: translateX(.45rem); }
.cifra-relato.activa div > p { color: rgba(23,24,21,.72); }
.relato-cierre {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 92rem;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem);
  background: var(--oscuro);
  color: var(--crema);
}
.relato-cierre > p:first-child {
  max-width: 18ch;
  font-family: var(--font-h);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
}
.relato-cierre > p:last-child {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  justify-self: end;
}
.relato-cierre strong {
  color: var(--verde);
  font-family: var(--font-h);
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: .72;
  letter-spacing: -.06em;
}
.relato-cierre span { color: rgba(255,251,231,.7); font-size: .8rem; font-weight: 700; line-height: 1.35; }

@media (max-width: 900px) {
  .page-colonias #metricas-colonias { padding-right: 0; padding-left: 0; }
  .cifras-relato { grid-template-columns: 1fr; }
  .cifras-sticky {
    position: relative;
    top: auto;
    min-height: 32rem;
    padding: 4rem 1.5rem 2.5rem;
  }
  .cifras-sticky h2 { font-size: clamp(3.2rem, 12vw, 5rem); }
  .cifra-relato {
    min-height: 27rem;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 2rem;
    padding: 3.5rem 1.5rem 2.5rem;
    border-right: 0;
  }
  .relato-numero { font-size: clamp(4.5rem, 19vw, 7rem); }
  .relato-numero-largo { font-size: clamp(2.5rem, 11.5vw, 4.25rem); }
  .cifra-relato h3 { font-size: clamp(2rem, 8vw, 3rem); }
  .relato-cierre { grid-template-columns: 1fr; padding: 4.5rem 1.5rem; }
.relato-cierre > p:last-child { justify-self: start; }
}

/* Colonias v5: archivo vivo de impacto. */
.page-colonias #metricas-colonias {
  --font-datos: var(--font-h);
  position: relative;
  padding: clamp(7.5rem, 13vw, 12.5rem) 6% clamp(6rem, 10vw, 9rem);
  overflow: clip;
  background: var(--oscuro);
  color: var(--crema);
}
.datos-intro {
  max-width: 88rem;
  margin: 0 auto clamp(7rem, 13vw, 12rem);
  text-align: center;
}
.datos-intro h2 {
  max-width: 15ch;
  margin: 0 auto;
  font-family: var(--font-datos);
  font-size: clamp(3.75rem, 7.8vw, 8.4rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.datos-inline-img {
  width: 1.65em;
  height: .58em;
  display: inline-block;
  margin: 0 .08em;
  overflow: hidden;
  border-radius: .08em;
  vertical-align: .08em;
  transform: rotate(-2deg);
}
.datos-inline-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}
.datos-intro > p {
  max-width: 54ch;
  margin: 2.25rem auto 0;
  color: rgba(255, 251, 231, .7);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  text-wrap: balance;
}
.datos-recorrido {
  display: grid;
  grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 7rem);
  max-width: 92rem;
  margin: 0 auto;
}
.datos-guia {
  min-height: 17rem;
  display: flex;
  padding: 1.5rem 0;
  flex-direction: column;
  border-top: 1px solid rgba(255, 251, 231, .38);
  border-bottom: 1px solid rgba(255, 251, 231, .16);
}
.datos-guia-titulo {
  max-width: 8ch;
  font-family: var(--font-datos);
  font-size: clamp(2.3rem, 4vw, 4.25rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.06em;
}
.datos-guia-texto {
  max-width: 30ch;
  margin-top: 1.25rem;
  color: rgba(255, 251, 231, .65);
  line-height: 1.55;
}
.datos-control {
  display: grid;
  grid-template-columns: 2.75rem auto 2.75rem;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
}
.datos-control button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 251, 231, .36);
  border-radius: 50%;
  background: transparent;
  color: var(--crema);
  font: 700 1.1rem/1 var(--font-datos);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.datos-control button:hover,
.datos-control button:focus-visible {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--oscuro);
}
.datos-control button:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 3px;
}
.datos-control button:disabled {
  cursor: default;
  opacity: .28;
}
.datos-control > p {
  min-width: 4rem;
  text-align: center;
  font: 700 .78rem/1 var(--font-datos);
  letter-spacing: .08em;
}
.datos-control #datoActual { color: var(--verde); font-size: 1rem; }
.datos-pila { position: relative; min-width: 0; }
.dato-lamina {
  position: sticky;
  top: clamp(6.5rem, 13vh, 8.5rem);
  min-height: min(70svh, 45rem);
  display: flex;
  margin: 0 0 clamp(6rem, 14vh, 10rem);
  padding: clamp(1.5rem, 3.6vw, 3.5rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(23, 24, 21, .18);
  border-radius: .35rem;
  background: var(--crema);
  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .22);
  color: var(--oscuro);
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.dato-lamina:nth-child(even) { background: var(--papel); }
.dato-lamina:last-child { margin-bottom: 0; }
.dato-lamina::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: clamp(10rem, 20vw, 19rem);
  aspect-ratio: 1;
  border: clamp(2rem, 4vw, 4rem) solid rgba(139, 177, 84, .18);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.dato-lamina > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(23, 24, 21, .2);
  color: var(--magenta);
  font: 700 clamp(.68rem, .9vw, .78rem)/1.2 var(--font-datos);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dato-lamina-cuerpo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(12rem, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  margin: auto 0;
}
.dato-lamina-numero {
  font-family: var(--font-datos);
  font-size: clamp(5rem, 9vw, 9.5rem);
  font-weight: 900;
  line-height: .72;
  letter-spacing: -.085em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dato-lamina-numero-largo {
  font-size: clamp(3rem, 5.6vw, 6.4rem);
  letter-spacing: -.075em;
}
.dato-lamina h3 {
  max-width: 15ch;
  font-family: var(--font-datos);
  font-size: clamp(2rem, 3.7vw, 4rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.dato-lamina h3 strong { color: var(--magenta); font-weight: 900; }
.dato-lamina-cuerpo > p:last-child {
  max-width: 42ch;
  grid-column: 2;
  margin-top: 1.35rem;
  color: rgba(23, 24, 21, .68);
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.55;
}
.dato-lamina > footer {
  position: relative;
  z-index: 1;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(23, 24, 21, .2);
  color: rgba(23, 24, 21, .58);
  font: 700 .72rem/1.3 var(--font-datos);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.datos-acordeon {
  max-width: 92rem;
  min-height: 14rem;
  display: flex;
  margin: clamp(7rem, 12vw, 11rem) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 251, 231, .28);
}
.datos-acordeon a {
  min-width: 0;
  display: flex;
  padding: 1.35rem;
  flex: 1 1 calc(100% / 6);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 251, 231, .28);
  background: transparent;
  color: var(--crema);
  text-decoration: none;
  transition: flex-grow 420ms cubic-bezier(.25, 1, .5, 1), background-color 220ms ease, color 220ms ease;
}
.datos-acordeon a:last-child { border-right: 0; }
.datos-acordeon a:hover,
.datos-acordeon a:focus-visible,
.datos-acordeon a[aria-current="true"] {
  flex-grow: 2.35;
  background: var(--verde);
  color: var(--oscuro);
}
.datos-acordeon a:focus-visible {
  outline: 3px solid var(--crema);
  outline-offset: -5px;
}
.datos-acordeon strong {
  font: 900 clamp(1.5rem, 2.5vw, 3rem)/.9 var(--font-datos);
  letter-spacing: -.055em;
  white-space: nowrap;
}
.datos-acordeon span {
  max-width: 13ch;
  font: 700 clamp(.72rem, .9vw, .84rem)/1.25 var(--font-datos);
}
@media (max-width: 900px) {
  .page-colonias #metricas-colonias {
    padding: 6.5rem 1.25rem;
    overflow: hidden;
  }
  .datos-intro { margin-bottom: 5.5rem; }
  .datos-intro h2 { max-width: 12ch; font-size: clamp(3.4rem, 14vw, 6rem); }
  .datos-intro > p { max-width: 36ch; margin-top: 1.75rem; }
  .datos-recorrido { grid-template-columns: 1fr; gap: 1.5rem; }
  .datos-guia {
    min-height: auto;
    padding: 1.25rem 0 1.5rem;
  }
  .datos-guia-titulo { max-width: none; font-size: 2.5rem; }
  .datos-guia-texto { margin-top: .65rem; }
  .datos-control { margin-top: 1.5rem; }
  .dato-lamina {
    position: relative;
    top: auto;
    min-height: 33rem;
    margin-bottom: .85rem;
    padding: 1.4rem;
    border-radius: .25rem;
    box-shadow: none;
    will-change: auto;
  }
  .dato-lamina-cuerpo {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.55rem;
  }
  .dato-lamina-numero { font-size: clamp(4.75rem, 22vw, 7.5rem); }
  .dato-lamina-numero-largo { font-size: clamp(2.7rem, 12.5vw, 4.5rem); }
  .dato-lamina h3 { max-width: 16ch; font-size: clamp(2rem, 9vw, 3.25rem); }
  .dato-lamina-cuerpo > p:last-child { grid-column: 1; margin-top: -.45rem; }
  .datos-acordeon {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 5rem;
  }
  .datos-acordeon a {
    min-height: 9rem;
    padding: 1.15rem;
    border-right: 1px solid rgba(255, 251, 231, .28);
    border-bottom: 1px solid rgba(255, 251, 231, .28);
  }
  .datos-acordeon a:nth-child(even) { border-right: 0; }
  .datos-acordeon a:nth-last-child(-n + 2) { border-bottom: 0; }
  .datos-acordeon strong { font-size: clamp(1.45rem, 7vw, 2.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .dato-lamina {
    position: relative;
    top: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .datos-acordeon a { transition: none; }
}

/* Colonias v6: tablero compacto, sin controles ni elementos fijos. */
.page-colonias #metricas-colonias {
  padding: clamp(5.5rem, 9vw, 8rem) 6%;
  overflow: visible;
  background: var(--oscuro);
}
.datos-intro {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
  max-width: 92rem;
  margin: 0 auto clamp(3.5rem, 6vw, 5rem);
  text-align: left;
}
.datos-intro h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.25rem, 6vw, 6.5rem);
  line-height: .88;
}
.datos-intro > p {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}
.datos-recorrido { display: block; max-width: 92rem; }
.datos-guia,
.datos-acordeon { display: none !important; }
.datos-pila {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 251, 231, .25);
  background: rgba(255, 251, 231, .25);
}
.dato-lamina {
  position: relative !important;
  top: auto !important;
  min-height: 18rem;
  margin: 0;
  padding: clamp(1.3rem, 2.4vw, 2.2rem);
  grid-column: span 3;
  border: 0;
  border-radius: 0;
  background: var(--crema);
  box-shadow: none;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}
.dato-lamina:first-child {
  min-height: 22rem;
  grid-column: span 7;
  background: var(--verde);
}
.dato-lamina:nth-child(2) {
  min-height: 22rem;
  grid-column: span 5;
  background: var(--magenta);
  color: var(--crema);
}
.dato-lamina::after { display: none; }
.dato-lamina > header {
  padding-bottom: .8rem;
  color: var(--magenta);
  font-size: .68rem;
}
.dato-lamina > header span:last-child { display: none; }
.dato-lamina:nth-child(2) > header {
  border-color: rgba(255, 251, 231, .32);
  color: var(--verde);
}
.dato-lamina-cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 1.5rem 0 auto;
  flex-direction: column;
}
.dato-lamina-numero,
.dato-lamina-numero-largo {
  font-size: clamp(3.15rem, 5vw, 5.8rem);
  line-height: .8;
  letter-spacing: -.075em;
}
.dato-lamina:first-child .dato-lamina-numero {
  font-size: clamp(4.5rem, 8vw, 8rem);
}
.dato-lamina:nth-child(2) .dato-lamina-numero {
  color: var(--crema);
  font-size: clamp(4.25rem, 7vw, 7rem);
}
.dato-lamina h3 {
  max-width: 18ch;
  margin-top: 1.1rem;
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  line-height: .98;
}
.dato-lamina h3 strong { color: var(--magenta); }
.dato-lamina:nth-child(2) h3 strong { color: var(--verde); }
.dato-lamina-cuerpo > p:last-child {
  max-width: 38ch;
  grid-column: auto;
  margin-top: .85rem;
  color: rgba(23, 24, 21, .66);
  font-size: .9rem;
  line-height: 1.45;
}
.dato-lamina:nth-child(2) .dato-lamina-cuerpo > p:last-child {
  color: rgba(255, 251, 231, .72);
}
.dato-lamina > footer {
  margin-top: 1.25rem;
  padding-top: .8rem;
  font-size: .62rem;
}
.dato-lamina:nth-child(2) > footer {
  border-color: rgba(255, 251, 231, .32);
  color: rgba(255, 251, 231, .7);
}
@media (max-width: 1050px) {
  .datos-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .datos-intro h2 { max-width: 12ch; }
  .dato-lamina,
  .dato-lamina:first-child,
  .dato-lamina:nth-child(2) {
    min-height: 18rem;
    grid-column: span 6;
  }
}
@media (max-width: 620px) {
  .page-colonias #metricas-colonias { padding: 5.5rem 1.25rem; }
  .datos-intro { margin-bottom: 2.75rem; }
  .datos-intro h2 { font-size: clamp(3rem, 13.5vw, 4.5rem); }
  .dato-lamina,
  .dato-lamina:first-child,
  .dato-lamina:nth-child(2) {
    min-height: 0;
    grid-column: 1 / -1;
    padding: 1.4rem;
  }
  .dato-lamina-cuerpo { margin-top: 1.25rem; }
  .dato-lamina-numero,
  .dato-lamina-numero-largo,
  .dato-lamina:first-child .dato-lamina-numero,
  .dato-lamina:nth-child(2) .dato-lamina-numero {
    font-size: clamp(3.6rem, 18vw, 5.75rem);
  }
  .dato-lamina h3 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
}
.impacto-sentido {
  max-width: 92rem;
  margin: clamp(4.5rem, 8vw, 7rem) auto 0;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(255, 251, 231, .28);
}
.impacto-sentido > h2 {
  max-width: 17ch;
  color: var(--crema);
  font-family: var(--font-datos);
  font-size: clamp(2.5rem, 4.5vw, 4.75rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.055em;
}
.impacto-resultados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 4vw, 4rem);
  border: 1px solid rgba(255, 251, 231, .24);
}
.impacto-resultados article {
  min-height: 15rem;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-right: 1px solid rgba(255, 251, 231, .24);
}
.impacto-resultados article:last-child { border-right: 0; }
.impacto-resultados span {
  color: var(--verde);
  font: 700 .72rem/1 var(--font-datos);
  letter-spacing: .08em;
}
.impacto-resultados h3 {
  margin-top: 2.5rem;
  color: var(--crema);
  font-family: var(--font-datos);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.impacto-resultados p {
  max-width: 34ch;
  margin-top: 1rem;
  color: rgba(255, 251, 231, .66);
  line-height: 1.55;
}
.impacto-aclaracion {
  max-width: 75ch;
  margin-top: 1.75rem;
  color: rgba(255, 251, 231, .52);
  font-size: .82rem;
  line-height: 1.5;
}
.impacto-fuentes { display: flex; gap: 1.5rem; margin-top: 1.25rem; }
.impacto-fuentes a {
  color: var(--verde);
  font: 700 .76rem/1.3 var(--font-datos);
  text-decoration: underline;
  text-underline-offset: .25rem;
}
@media (max-width: 700px) {
  .impacto-resultados { grid-template-columns: 1fr; }
  .impacto-resultados article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 251, 231, .24);
  }
  .impacto-resultados article:last-child { border-bottom: 0; }
  .impacto-resultados h3 { margin-top: 1.5rem; }
  .impacto-fuentes { align-items: flex-start; flex-direction: column; gap: .75rem; }
}

/* Colonias v7: mosaico editorial de fotografía y datos. */
.page-colonias #metricas-colonias .datos-recorrido { display: none; }
.impacto-mosaico {
  max-width: 92rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 251, 231, .24);
  background: rgba(255, 251, 231, .24);
}
.mosaico-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}
.mosaico-foto,
.mosaico-dato {
  position: relative;
  min-width: 0;
  min-height: clamp(17rem, 26vw, 25rem);
  overflow: hidden;
}
.mosaico-foto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter 500ms cubic-bezier(.25, 1, .5, 1), transform 600ms cubic-bezier(.25, 1, .5, 1);
}
.mosaico-foto-bn img { filter: grayscale(1) contrast(1.08); }
.mosaico-foto:hover img { transform: scale(1.035); }
.mosaico-foto-bn:hover img { filter: grayscale(0) contrast(1); }
.mosaico-dato {
  display: flex;
  padding: clamp(1.4rem, 3vw, 3rem);
  flex-direction: column;
  justify-content: center;
  color: var(--oscuro);
}
.mosaico-dato::after {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: clamp(7rem, 12vw, 12rem);
  aspect-ratio: 1;
  border: clamp(.8rem, 1.5vw, 1.5rem) solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: .09;
}
.mosaico-dato strong {
  position: relative;
  z-index: 1;
  font: 900 clamp(3.5rem, 6vw, 7rem)/.76 var(--font-datos);
  letter-spacing: -.08em;
  white-space: nowrap;
}
.mosaico-dato h3 {
  position: relative;
  z-index: 1;
  max-width: 16ch;
  margin-top: 1.4rem;
  font: 800 clamp(1.45rem, 2.35vw, 2.5rem)/.98 var(--font-datos);
  letter-spacing: -.045em;
}
.mosaico-dato p {
  position: relative;
  z-index: 1;
  max-width: 27ch;
  margin-top: .9rem;
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.4;
}
.mosaico-dato p b { font-family: var(--font-datos); font-weight: 900; }
.mosaico-dato-verde { background: var(--verde); }
.mosaico-dato-magenta { background: var(--magenta); color: var(--crema); }
.mosaico-dato-crema { background: var(--crema); }
.mosaico-dato-oscuro {
  background: var(--papel);
  color: var(--magenta);
}
.mosaico-dato-oscuro h3,
.mosaico-dato-oscuro p { color: var(--oscuro); }
.mosaico-fila:nth-child(1) .mosaico-foto:last-child img { object-position: 50% 38%; }
.mosaico-fila:nth-child(2) .mosaico-foto:first-child img { object-position: 50% 54%; }
.mosaico-fila:nth-child(3) .mosaico-foto:first-child img { object-position: 48% 44%; }
.mosaico-fila:nth-child(4) .mosaico-foto:last-child img { object-position: 52% 55%; }
@media (max-width: 760px) {
  .mosaico-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico-fila > .mosaico-foto:last-child {
    min-height: 14rem;
    grid-column: 1 / -1;
  }
  .mosaico-dato strong { font-size: clamp(3rem, 10vw, 5rem); }
  .mosaico-dato h3 { font-size: clamp(1.35rem, 3.8vw, 2.1rem); }
}
@media (max-width: 620px) {
  .mosaico-fila > .mosaico-foto:last-child { display: none; }
  .mosaico-foto,
  .mosaico-dato { min-height: clamp(13rem, 58vw, 16rem); }
  .mosaico-dato { padding: 1rem; }
  .mosaico-dato strong { font-size: clamp(2.7rem, 13vw, 4rem); }
  .mosaico-dato-oscuro strong { font-size: clamp(2rem, 9vw, 2.8rem); }
  .mosaico-dato h3 { margin-top: .9rem; font-size: clamp(1.15rem, 5.7vw, 1.6rem); }
  .mosaico-dato p { margin-top: .6rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaico-foto img { transition: none; }
  .mosaico-foto:hover img { transform: none; }
}

/* Colonias v8: versión compacta y de lectura ligera. */
.page-colonias #metricas-colonias {
  --font-datos: var(--font-h);
  padding-top: clamp(4.5rem, 7vw, 6.5rem);
}
.datos-intro {
  grid-template-columns: 8fr 4fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.datos-intro h2 {
  max-width: 13ch;
  font-size: clamp(2.9rem, 4.8vw, 5.1rem);
  line-height: .9;
}
.datos-intro > p {
  max-width: 30ch;
  font-family: var(--font-datos);
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.45;
}
.impacto-inline {
  width: 1.3em;
  height: .46em;
  display: inline-block;
  margin-left: .08em;
  overflow: hidden;
  border-radius: 999px;
  vertical-align: .08em;
}
.impacto-inline img { width: 100%; height: 100%; display: block; object-fit: cover; }
.impacto-mosaico { grid-auto-flow: dense; }
.mosaico-fila {
  grid-auto-flow: dense;
  grid-auto-rows: 1fr;
}
.mosaico-foto,
.mosaico-dato {
  height: clamp(12.5rem, 17vw, 16rem);
  min-height: 0;
}
.mosaico-dato { padding: clamp(1.15rem, 2.2vw, 2rem); }
.mosaico-dato strong { font-size: clamp(3rem, 4.7vw, 5.2rem); }
.mosaico-dato h3 {
  margin-top: .9rem;
  font-size: clamp(1.2rem, 1.8vw, 1.85rem);
  line-height: 1;
}
.mosaico-dato p {
  margin-top: .6rem;
  font-size: clamp(.78rem, .86vw, .9rem);
}
.mosaico-dato-verde { background: #b8cf86; }
.mosaico-dato-magenta { background: #e5abc5; color: var(--oscuro); }
.mosaico-dato-crema { background: #e3c45d; }
.mosaico-dato-oscuro { background: var(--crema); color: var(--magenta); }
.mosaico-dato::after {
  right: -2rem;
  bottom: -2rem;
  width: clamp(5rem, 9vw, 8rem);
  border-width: .7rem;
}
.impacto-marquee {
  max-width: 92rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  margin: 0 auto;
  overflow: hidden;
  border-right: 1px solid rgba(255, 251, 231, .24);
  border-bottom: 1px solid rgba(255, 251, 231, .24);
  border-left: 1px solid rgba(255, 251, 231, .24);
  color: var(--verde);
  font: 800 .7rem/1 var(--font-datos);
  letter-spacing: .12em;
  white-space: nowrap;
}
.impacto-marquee div {
  min-width: max-content;
  padding-left: 1.5rem;
  animation: impacto-cinta 24s linear infinite;
}
@keyframes impacto-cinta { to { transform: translateX(-50%); } }
.impacto-sentido {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.impacto-sentido > h2 {
  max-width: 19ch;
  font-size: clamp(2.2rem, 3.6vw, 3.8rem);
}
.impacto-resultados {
  display: flex;
  margin-top: clamp(2rem, 3vw, 3rem);
}
.impacto-resultados article {
  min-width: 0;
  min-height: 11rem;
  flex: 1 1 33.333%;
  transition: flex-grow 360ms cubic-bezier(.25, 1, .5, 1), background-color 220ms ease;
}
.impacto-resultados article:hover {
  flex-grow: 1.22;
  background: rgba(139, 177, 84, .1);
}
.impacto-resultados h3 { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .datos-intro { grid-template-columns: 1fr; gap: 1rem; }
  .datos-intro h2 { max-width: 12ch; }
}
@media (max-width: 700px) {
  .impacto-resultados { flex-direction: column; }
  .impacto-resultados article { min-height: 0; }
}
@media (max-width: 620px) {
  .mosaico-foto,
  .mosaico-dato { height: clamp(13rem, 56vw, 16rem); }
  .mosaico-dato strong { font-size: clamp(2.55rem, 12vw, 3.5rem); }
  .mosaico-dato-oscuro strong { font-size: clamp(1.9rem, 8.6vw, 2.55rem); }
  .mosaico-dato h3 { font-size: clamp(1.08rem, 5.2vw, 1.45rem); }
  .mosaico-dato p { font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  .impacto-marquee div { animation: none; }
  .impacto-resultados article { transition: none; }
}

/* Colonias v9: mosaico pequeño y de alta densidad. */
.page-colonias #metricas-colonias { --font-datos: var(--font-h); }
.datos-intro,
.impacto-mosaico,
.impacto-marquee,
.impacto-sentido { max-width: 78rem; }
.datos-intro { margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.datos-intro h2 {
  max-width: 15ch;
  font-size: clamp(2.45rem, 4vw, 4.4rem);
}
.mosaico-foto,
.mosaico-dato {
  height: clamp(9.5rem, 13vw, 12rem);
}
.mosaico-dato { padding: clamp(.85rem, 1.5vw, 1.35rem); }
.mosaico-dato strong {
  font-size: clamp(2.45rem, 3.8vw, 4.2rem);
  line-height: .78;
}
.mosaico-dato h3 {
  margin-top: .62rem;
  font-size: clamp(1rem, 1.35vw, 1.42rem);
  line-height: .98;
}
.mosaico-dato p {
  margin-top: .42rem;
  font-size: clamp(.68rem, .72vw, .78rem);
  line-height: 1.3;
}
.mosaico-dato::after {
  right: -1.5rem;
  bottom: -1.5rem;
  width: clamp(4rem, 6vw, 5.5rem);
  border-width: .48rem;
}
.impacto-marquee { height: 2.15rem; }
.impacto-marquee div { font-size: .62rem; }
.impacto-sentido {
  margin-top: clamp(2.75rem, 4vw, 3.75rem);
  padding-top: clamp(2rem, 3vw, 2.75rem);
}
.impacto-sentido > h2 {
  max-width: 22ch;
  font-size: clamp(1.95rem, 3vw, 3rem);
}
.impacto-resultados { margin-top: clamp(1.5rem, 2.2vw, 2rem); }
.impacto-resultados article {
  min-height: 8.5rem;
  padding: clamp(1rem, 1.7vw, 1.5rem);
}
.impacto-resultados h3 {
  margin-top: 1rem;
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
}
.impacto-resultados p {
  margin-top: .65rem;
  font-size: .82rem;
  line-height: 1.4;
}
.impacto-aclaracion { margin-top: 1.25rem; font-size: .75rem; }
.impacto-fuentes { margin-top: .9rem; }
@media (max-width: 620px) {
  .mosaico-foto,
  .mosaico-dato { height: clamp(10.5rem, 45vw, 12rem); }
  .mosaico-dato { padding: .78rem; }
  .mosaico-dato strong { font-size: clamp(2.15rem, 10.5vw, 3rem); }
  .mosaico-dato-oscuro strong { font-size: clamp(1.65rem, 7.6vw, 2.2rem); }
  .mosaico-dato h3 { margin-top: .48rem; font-size: clamp(.92rem, 4.55vw, 1.2rem); }
  .mosaico-dato p { margin-top: .35rem; font-size: .65rem; }
}

/* Colonias v10: fotografía original y cifras en zigzag. */
.mosaico-foto img { filter: none !important; }
.mosaico-fila:nth-child(2) .mosaico-foto img { object-position: 50% 42%; }
.mosaico-fila:nth-child(3) .mosaico-foto-extra img { object-position: 50% 38%; }
.mosaico-fila:nth-child(4) .mosaico-foto:first-child img { object-position: 50% 45%; }
@media (max-width: 760px) {
  .mosaico-fila > .mosaico-foto:not(.mosaico-foto-extra) {
    grid-column: 1;
    grid-row: 1;
  }
  .mosaico-fila > .mosaico-dato {
    grid-column: 2;
    grid-row: 1;
  }
  .mosaico-fila > .mosaico-foto-extra {
    min-height: 10rem;
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 620px) {
  .mosaico-fila > .mosaico-foto-extra { display: none; }
}

/* Colonias v12: las cifras forman parte de la memoria fotográfica. */
.page-colonias #grid-fotos .grid-dato {
  min-width: 0;
  display: flex;
  padding: clamp(1rem, 2.4vw, 2.5rem);
  aspect-ratio: 1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--magenta);
  color: var(--crema);
  font-family: var(--font-h);
  text-align: center;
}
.page-colonias #grid-fotos .grid-dato strong {
  font-family: inherit;
  font-size: clamp(2rem, 4.5vw, 4.8rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
}
.page-colonias #grid-fotos .grid-dato h3 {
  max-width: 14ch;
  margin-top: clamp(.7rem, 1.4vw, 1.25rem);
  font-family: inherit;
  font-size: clamp(1rem, 1.65vw, 1.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.page-colonias #grid-fotos .grid-dato p {
  max-width: 18ch;
  margin-top: .55rem;
  color: inherit;
  font-family: inherit;
  font-size: clamp(.68rem, .8vw, .84rem);
  line-height: 1.3;
  opacity: .82;
}
.page-colonias #metricas-colonias > .datos-intro,
.page-colonias #metricas-colonias > .impacto-mosaico,
.page-colonias #metricas-colonias > .impacto-marquee,
.page-colonias #metricas-colonias > .datos-recorrido,
.page-colonias #metricas-colonias > .datos-acordeon {
  display: none !important;
}
.page-colonias #metricas-colonias {
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
.page-colonias #metricas-colonias .impacto-sentido {
  margin-top: 0;
}
@media (max-width: 760px) {
  .page-colonias #grid-fotos .grid-dato {
    padding: clamp(.85rem, 4.2vw, 1.2rem);
  }
  .page-colonias #grid-fotos .grid-dato strong {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }
  .page-colonias #grid-fotos .grid-dato h3 {
    margin-top: .6rem;
    font-size: clamp(.92rem, 4.6vw, 1.25rem);
  }
  .page-colonias #grid-fotos .grid-dato p {
    margin-top: .4rem;
    font-size: clamp(.61rem, 3vw, .74rem);
  }
}
.page-colonias .impacto-sentido .impacto-kicker {
  margin-bottom: 1rem;
}
.page-colonias .impacto-sentido > h2 {
  max-width: 15ch;
}
.impacto-apertura {
  max-width: 55ch;
  margin-top: 1.5rem;
  color: rgba(255, 251, 231, .72);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}
.brecha-comparacion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(255, 251, 231, .28);
  border-bottom: 1px solid rgba(255, 251, 231, .28);
}
.brecha-comparacion article {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(0rem, 2vw, 2rem);
}
.brecha-comparacion article:first-child {
  padding-right: clamp(1.5rem, 4vw, 4rem);
  border-right: 1px solid rgba(255, 251, 231, .28);
}
.brecha-comparacion article:last-child {
  padding-left: clamp(1.5rem, 4vw, 4rem);
}
.brecha-comparacion strong {
  display: block;
  color: var(--verde);
  font-family: var(--font-h);
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
}
.brecha-comparacion h3 {
  max-width: 25ch;
  margin-top: 1.25rem;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.05;
}
.brecha-comparacion p {
  max-width: 40ch;
  margin-top: .85rem;
  color: rgba(255, 251, 231, .58);
  line-height: 1.45;
}
.respuesta-comunitaria {
  display: grid;
  grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  background: var(--verde);
  color: var(--oscuro);
}
.respuesta-comunitaria span {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.respuesta-comunitaria strong {
  display: block;
  font-family: var(--font-h);
  font-size: clamp(4.5rem, 9vw, 9rem);
  font-weight: 900;
  line-height: .68;
  letter-spacing: -.085em;
}
.respuesta-comunitaria > div:first-child p {
  margin-top: 1rem;
  font-family: var(--font-h);
  font-weight: 800;
}
.respuesta-comunitaria h3 {
  max-width: 24ch;
  font-family: var(--font-h);
  font-size: clamp(1.65rem, 3vw, 3.15rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.respuesta-comunitaria > div:last-child p {
  max-width: 55ch;
  margin-top: 1.25rem;
  line-height: 1.55;
}
.page-colonias .impacto-fuentes {
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .brecha-comparacion,
  .respuesta-comunitaria {
    grid-template-columns: 1fr;
  }
  .brecha-comparacion article {
    padding: 1.5rem 0;
  }
  .brecha-comparacion article:first-child {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 251, 231, .28);
  }
  .brecha-comparacion article:last-child {
    padding-left: 0;
  }
  .respuesta-comunitaria {
    align-items: start;
    gap: 2rem;
  }
}

/* Colonias v13: movimiento breve, editorial y sin alterar la lectura. */
.page-colonias #grid-fotos .grid-dato {
  position: relative;
}
.page-colonias #grid-fotos .grid-dato::after {
  position: absolute;
  top: clamp(.8rem, 1.4vw, 1.25rem);
  right: clamp(.8rem, 1.4vw, 1.25rem);
  width: .48rem;
  height: .48rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: .55;
  transition: background-color 240ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}
.page-colonias #grid-fotos .grid-dato strong,
.page-colonias #grid-fotos .grid-dato h3,
.page-colonias #grid-fotos .grid-dato p {
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .page-colonias #grid-fotos .grid-dato:hover::after {
    background: currentColor;
    transform: scale(1.45);
  }
  .page-colonias #grid-fotos .grid-dato:hover strong {
    transform: translateY(-.22rem) scale(1.025);
  }
  .page-colonias #grid-fotos .grid-dato:hover h3 {
    transform: translateY(-.08rem);
  }
  .page-colonias #grid-fotos .grid-dato:hover p {
    opacity: 1;
    transform: translateY(.08rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-colonias #grid-fotos .grid-dato::after,
  .page-colonias #grid-fotos .grid-dato strong,
  .page-colonias #grid-fotos .grid-dato h3,
  .page-colonias #grid-fotos .grid-dato p {
    transition: none;
  }
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(24px) scale(.99);
  transition:
    opacity 650ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms),
    transform 650ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms);
}
.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#talleres-carousel .swiper-fallback {
  overflow: hidden !important;
}
#talleres-carousel .swiper-fallback .swiper-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#talleres-carousel .swiper-fallback .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
#talleres-carousel .swiper-fallback .swiper-slide {
  flex: 0 0 clamp(17rem, 26vw, 24rem);
  scroll-snap-align: start;
}
#talleres-carousel .carousel-btn:active {
  transform: scale(.92);
}
@media (max-width: 600px) {
  #talleres-carousel .swiper-fallback .swiper-slide {
    flex-basis: min(78vw, 19rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal,
  .motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #talleres-carousel .swiper-fallback .swiper-wrapper {
    scroll-behavior: auto;
  }
}

/* Colonias v14: del déficit nacional a una respuesta comunitaria concreta. */
.page-colonias #metricas-colonias .impacto-sentido {
  max-width: 78rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.impacto-origen {
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
  gap: 1.5rem clamp(2.5rem, 7vw, 7rem);
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.impacto-origen .impacto-kicker {
  grid-row: 1 / span 2;
  margin: .45rem 0 0;
}
.impacto-origen h2 {
  max-width: 18ch;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(2.7rem, 5.2vw, 5.4rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
}
.impacto-origen h2 strong {
  color: var(--verde);
  font-family: inherit;
  font-weight: inherit;
}
.impacto-origen > p:last-child {
  max-width: 57ch;
  color: rgba(255, 251, 231, .68);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.65;
}
.impacto-puente {
  display: grid;
  grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.5vw, 2.2rem) 0;
  border-top: 1px solid rgba(255, 251, 231, .3);
  border-bottom: 1px solid rgba(255, 251, 231, .3);
}
.impacto-puente span {
  color: var(--verde);
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.impacto-puente p {
  max-width: 58ch;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.impacto-balance {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 251, 231, .3);
}
.impacto-balance article {
  min-width: 0;
  min-height: clamp(13rem, 18vw, 16rem);
  grid-column: span 4;
  padding: clamp(1.35rem, 2.4vw, 2.25rem);
  border-right: 1px solid rgba(255, 251, 231, .3);
  transition: background-color 240ms ease;
}
.impacto-balance article:nth-child(-n + 3) {
  border-bottom: 1px solid rgba(255, 251, 231, .3);
}
.impacto-balance article:nth-child(3) {
  border-right: 0;
}
.impacto-balance article:nth-child(4),
.impacto-balance article:nth-child(5) {
  grid-column: span 6;
}
.impacto-balance article:last-child {
  border-right: 0;
}
.impacto-balance strong {
  display: block;
  color: var(--verde);
  font-family: var(--font-h);
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.07em;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.impacto-balance h3 {
  max-width: 22ch;
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.05;
}
.impacto-balance p {
  max-width: 31ch;
  margin-top: .7rem;
  color: rgba(255, 251, 231, .55);
  font-size: .84rem;
  line-height: 1.45;
}
.impacto-conclusion {
  max-width: 42ch;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0 auto;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 2.5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
}
@media (hover: hover) {
  .impacto-balance article:hover {
    background: rgba(255, 251, 231, .045);
  }
  .impacto-balance article:hover strong {
    transform: translateY(-.2rem);
  }
}
@media (min-width: 1100px) {
  .impacto-balance {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .impacto-balance article,
  .impacto-balance article:nth-child(4),
  .impacto-balance article:nth-child(5) {
    min-height: 16rem;
    grid-column: auto;
    border-right: 1px solid rgba(255, 251, 231, .3);
    border-bottom: 0;
  }
  .impacto-balance article:last-child {
    border-right: 0;
  }
}
@media (max-width: 700px) {
  .impacto-origen,
  .impacto-puente {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .impacto-origen .impacto-kicker {
    grid-row: auto;
    margin-top: 0;
  }
  .impacto-origen h2 {
    font-size: clamp(2.45rem, 11vw, 3.65rem);
  }
  .impacto-balance {
    grid-template-columns: 1fr;
  }
  .impacto-balance article,
  .impacto-balance article:nth-child(4),
  .impacto-balance article:nth-child(5) {
    min-height: 0;
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(5.5rem, 3fr) minmax(0, 7fr);
    column-gap: 1.25rem;
    padding: 1.35rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 251, 231, .3);
  }
  .impacto-balance article:last-child {
    border-bottom: 0;
  }
  .impacto-balance strong {
    grid-row: 1 / span 2;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
  }
  .impacto-balance h3 {
    margin-top: 0;
  }
  .impacto-balance p {
    margin-top: .45rem;
  }
  .impacto-conclusion {
    margin-left: 0;
  }
}

/* La respuesta se lee como una ecuación, no como una colección de tarjetas. */
.impacto-ecuacion {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto minmax(0, 2fr) auto minmax(14rem, 5fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 251, 231, .3);
}
.impacto-ecuacion > div {
  min-width: 0;
  display: flex;
  padding: clamp(1.6rem, 3.4vw, 3.5rem) clamp(1rem, 2.5vw, 2.5rem);
  flex-direction: column;
  justify-content: center;
}
.impacto-ecuacion > div:first-child {
  padding-left: 0;
}
.impacto-ecuacion > b {
  align-self: center;
  color: rgba(255, 251, 231, .34);
  font-family: var(--font-h);
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  font-weight: 600;
}
.impacto-ecuacion strong {
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(3.25rem, 7vw, 7rem);
  font-weight: 800;
  line-height: .76;
  letter-spacing: -.07em;
}
.impacto-ecuacion span {
  max-width: 24ch;
  margin-top: 1rem;
  color: rgba(255, 251, 231, .62);
  font-size: .86rem;
  line-height: 1.4;
}
.impacto-ecuacion .impacto-resultado {
  margin-left: clamp(1rem, 2.5vw, 2.5rem);
  padding-right: 0;
  border-left: 1px solid rgba(255, 251, 231, .3);
}
.impacto-ecuacion .impacto-resultado strong {
  color: var(--verde);
  font-size: clamp(2.45rem, 5.1vw, 5.25rem);
  white-space: nowrap;
}
.impacto-apoyos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 251, 231, .3);
}
.impacto-apoyos article {
  min-width: 0;
  display: flex;
  min-height: 8.5rem;
  padding: clamp(1.3rem, 2.4vw, 2.25rem);
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 251, 231, .3);
}
.impacto-apoyos article:first-child {
  padding-left: 0;
}
.impacto-apoyos article:last-child {
  padding-right: 0;
  border-right: 0;
}
.impacto-apoyos strong {
  color: var(--verde);
  font-family: var(--font-h);
  font-size: clamp(1.9rem, 3.3vw, 3.35rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.055em;
}
.impacto-apoyos p {
  max-width: 25ch;
  margin-top: 1.4rem;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(.95rem, 1.25vw, 1.12rem);
  font-weight: 700;
  line-height: 1.12;
}
@media (max-width: 700px) {
  .impacto-ecuacion {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .impacto-ecuacion > div {
    padding: 1.8rem .8rem;
  }
  .impacto-ecuacion > div:first-child {
    padding-left: 0;
  }
  .impacto-ecuacion > b:nth-of-type(2) {
    display: block;
    grid-column: 1 / -1;
    padding: .25rem 0;
    border-top: 1px solid rgba(255, 251, 231, .3);
    text-align: center;
  }
  .impacto-ecuacion .impacto-resultado {
    grid-column: 1 / -1;
    margin-left: 0;
    padding: 1.8rem 0 2.2rem;
    border-left: 0;
    text-align: left;
  }
  .impacto-ecuacion strong {
    font-size: clamp(2.8rem, 14vw, 3.55rem);
    white-space: nowrap;
  }
  .impacto-ecuacion .impacto-resultado span {
    max-width: 30ch;
  }
  .impacto-ecuacion .impacto-resultado strong {
    font-size: clamp(2.6rem, 13vw, 3.7rem);
  }
  .impacto-apoyos {
    grid-template-columns: 1fr;
  }
  .impacto-apoyos article,
  .impacto-apoyos article:first-child,
  .impacto-apoyos article:last-child {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(7rem, 4fr) minmax(0, 6fr);
    align-items: start;
    gap: 1.2rem;
    padding: 1.35rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 251, 231, .3);
  }
  .impacto-apoyos article:last-child {
    border-bottom: 0;
  }
  .impacto-apoyos strong {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .impacto-apoyos p {
    margin-top: 0;
  }
}

/* Portada: encuadre vertical por bloques y titular sin recortes. */
.portada-snap {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  scroll-snap-type: none;
}
.portada-snap body > section,
.portada-snap body > footer {
  scroll-snap-align: none;
}
.page-index #hero {
  height: auto;
  min-height: 100dvh;
  padding-top: clamp(7rem, 12vh, 9rem);
}
.page-index .hero-content { width: min(88%, 82rem); }
.page-index .hero-title {
  max-width: none;
  overflow: visible;
  font-size: clamp(3.4rem, 5.4vw, 6.3rem);
  line-height: .94;
}
.page-index .hero-title .line { overflow: hidden; }
.page-index .hero-title .line-inner {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.page-index .hero-title-community { padding-bottom: .08em; }

@media (max-width: 760px) {
  .portada-snap {
    scroll-padding-top: var(--nav-h);
    scroll-snap-type: none;
  }
  .page-index #hero {
    min-height: max(40rem, 100svh);
    padding-top: calc(var(--nav-h) + 1.25rem);
  }
  .page-index .hero-title {
    max-width: 100%;
    font-size: clamp(1.9rem, 8.7vw, 2.75rem);
    line-height: .98;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portada-snap {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/* Portada: botones independientes de formas suaves. */
.page-index .hero-btns {
  gap: .65rem;
  align-items: stretch;
}
.page-index .hero-btns .btn-primary,
.page-index .hero-btns .btn-outline {
  min-height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem 1.45rem;
  border-radius: 999px;
  font-family: var(--font-h);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .045em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(9,8,8,.16), inset 0 1px 0 rgba(255,255,255,.2);
  transition: color 220ms cubic-bezier(.22,1,.36,1), background-color 220ms cubic-bezier(.22,1,.36,1), border-color 220ms cubic-bezier(.22,1,.36,1), transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.page-index .hero-btns .btn-primary {
  min-width: 18rem;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, #9bc463, var(--verde));
  color: var(--oscuro);
}
.page-index .hero-btns .btn-primary::after { display: none; }
.page-index .hero-btns .btn-outline {
  min-width: 10rem;
  border: 1px solid rgba(255,251,231,.38);
  background: rgba(255,251,231,.08);
  color: var(--crema);
  backdrop-filter: blur(10px);
}
.page-index .hero-btns .btn-primary:hover {
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(135deg, #a8ce72, #94ba5c);
  color: var(--oscuro);
  box-shadow: 0 14px 34px rgba(60,84,34,.3), inset 0 1px 0 rgba(255,255,255,.36);
  transform: translateY(-2px) scale(1.015);
}
.page-index .hero-btns .btn-outline:hover {
  border-color: rgba(255,251,231,.72);
  background: rgba(255,251,231,.16);
  color: var(--crema);
  box-shadow: 0 14px 34px rgba(9,8,8,.22), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-2px) scale(1.015);
}
.page-index .hero-btns .btn-primary:active,
.page-index .hero-btns .btn-outline:active {
  transform: translateY(1px) scale(.98);
  transition-duration: 90ms;
}
.page-index .hero-btns .btn-flecha {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  font-family: var(--font-b);
  font-size: .88rem;
  line-height: 1;
  opacity: .78;
  transition: transform 240ms cubic-bezier(.22,1,.36,1), opacity 180ms ease;
}
.page-index .hero-btns .btn-primary .btn-flecha { background: rgba(23,24,21,.12); }
.page-index .hero-btns .btn-outline .btn-flecha { background: rgba(255,251,231,.12); }
.page-index .hero-btns a:hover .btn-flecha {
  opacity: 1;
  transform: translate(3px, -3px) rotate(4deg);
}
.page-index .hero-btns .btn-primary:focus-visible,
.page-index .hero-btns .btn-outline:focus-visible {
  outline: 3px solid var(--crema);
  outline-offset: 3px;
}
.page-index .acc-cta {
  font-family: var(--font-h);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
}

@media (max-width: 760px) {
  .page-index .hero-btns .btn-primary,
  .page-index .hero-btns .btn-outline {
    min-height: 3.2rem;
    padding: .8rem 1rem;
    font-size: .82rem;
  }
}

@media (max-width: 560px) {
  .page-index .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .page-index .hero-btns .btn-primary,
  .page-index .hero-btns .btn-outline {
    width: 100%;
    min-width: 0;
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .hero-btns .btn-primary,
  .page-index .hero-btns .btn-outline { transition-duration: 1ms; }
}

/* Portada: misión y objetivos en una composición compacta. */
.page-index #quienes {
  display: block;
  padding-top: clamp(5rem, 7vw, 7rem);
  padding-bottom: clamp(5rem, 7vw, 7rem);
}
.page-index .qs-compacta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(22rem, 7fr);
  grid-template-areas:
    "relato visual"
    "acciones acciones";
  gap: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.page-index .qs-relato { grid-area: relato; }
.page-index .qs-identidad {
  max-width: 15ch;
  margin: 0 0 1.4rem;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(2.55rem, 3.8vw, 4.15rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-index .qs-identidad span { color: var(--magenta); }
.page-index .qs-intro .qs-lead {
  max-width: 44ch;
  margin: 0;
  color: var(--gris);
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  line-height: 1.65;
}
.page-index #quienes .qs-visual {
  grid-area: visual;
  margin: 0;
}
.page-index #quienes .qs-img {
  aspect-ratio: 3 / 2;
  border-radius: 1.5rem;
  box-shadow: 18px 18px 0 rgba(136,45,91,.09);
}
.page-index .qs-mision-bloque {
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(23,24,21,.22);
}
.page-index .qs-mision-label {
  margin: 0 0 .7rem;
  color: var(--magenta);
  font-family: var(--font-b);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.page-index .qs-mision {
  max-width: 19ch;
  margin: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(1.65rem, 2.6vw, 2.8rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.page-index .qs-mision span { color: var(--magenta); }
.page-index .qs-acciones {
  grid-area: acciones;
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(0, 10fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid rgba(23,24,21,.22);
}
.page-index .qs-acciones-titulo {
  max-width: 7ch;
  margin: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(1.8rem, 2.7vw, 3rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
}
.page-index #quienes .ejes {
  display: grid;
  grid-template-columns: 1.12fr .88fr 1fr;
  gap: 0;
  margin: 0;
  border: 0;
}
.page-index #quienes .eje {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: .1rem clamp(1.25rem, 2.5vw, 2.5rem);
  border: 0;
  border-left: 1px solid rgba(23,24,21,.18);
  border-radius: 0;
  background: transparent;
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
}
.page-index #quienes .eje:first-child { padding-left: 0; border-left: 0; }
.page-index #quienes .eje:hover { transform: translateY(-3px); }
.page-index #quienes .eje-t {
  max-width: 13ch;
  margin: 0 0 .75rem;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(1.3rem, 1.9vw, 2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.page-index #quienes .eje-t span { color: var(--magenta); }
.page-index #quienes .eje-d {
  max-width: 30ch;
  margin: 0;
  color: var(--gris);
  font-size: .88rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .page-index .qs-compacta {
    grid-template-columns: 1fr;
    grid-template-areas: "relato" "visual" "acciones";
    gap: 2.5rem;
  }
  .page-index .qs-intro { max-width: 42rem; }
  .page-index .qs-identidad { max-width: 16ch; }
  .page-index .qs-mision { max-width: 22ch; }
  .page-index .qs-acciones { grid-template-columns: 1fr; gap: 1.75rem; }
  .page-index .qs-acciones-titulo { max-width: none; }
}

@media (max-width: 560px) {
  .page-index #quienes { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .page-index .qs-identidad { font-size: clamp(2.35rem, 10.8vw, 3.4rem); }
  .page-index #quienes .ejes {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .page-index #quienes .eje,
  .page-index #quienes .eje:first-child {
    padding: 0 0 1.4rem;
    border-left: 0;
    border-bottom: 1px solid rgba(23,24,21,.18);
  }
  .page-index #quienes .eje:last-child { padding-bottom: 0; border-bottom: 0; }
  .page-index #quienes .eje-t { max-width: none; }
  .page-index #quienes .eje-d { max-width: 38ch; }
}

@media (prefers-reduced-motion: reduce) {
  .page-index #quienes .eje { transition-duration: 1ms; }
}

/* Portada: Colonias Urbanas como puente luminoso entre la trayectoria y el proyecto. */
.page-index #statement.st-editorial {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: clamp(6rem, 11vw, 11rem) 6%;
  overflow: hidden;
  background: var(--papel);
  color: var(--oscuro);
}
.page-index .st-editorial-inner {
  width: min(100%, 1440px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(28rem, 7fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  margin: 0 auto;
}
.page-index .st-editorial-copy {
  position: relative;
  z-index: 2;
}
.page-index .st-editorial-kicker {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-index .st-editorial-title {
  max-width: 8.6ch;
  margin: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(3.5rem, 6.4vw, 7rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.page-index .st-editorial-title span {
  position: relative;
  display: inline-block;
  color: var(--magenta);
}
.page-index .st-editorial-title span::after {
  position: absolute;
  right: .02em;
  bottom: -.04em;
  left: .02em;
  height: .07em;
  border-radius: 999px;
  background: var(--verde);
  content: '';
  transform: rotate(-1.5deg);
}
.page-index .st-editorial-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(23, 24, 21, .18);
}
.page-index .st-editorial-foot p {
  max-width: 22ch;
  margin: 0;
  color: var(--gris);
  font-size: .86rem;
  line-height: 1.45;
}
.page-index .st-editorial-link {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem .8rem 1.2rem;
  border: 1px solid var(--oscuro);
  border-radius: 999px;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-editorial-link span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--crema);
}
.page-index .st-editorial-link:active { transform: scale(.97); }
.page-index .st-editorial-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: clamp(33rem, 52vw, 47rem);
  margin: 0;
}
.page-index .st-editorial-main {
  width: 100%;
  height: 100%;
  border-radius: clamp(1.5rem, 3vw, 3rem);
  object-fit: cover;
  object-position: 48% center;
  filter: saturate(.92) contrast(1.02);
}
.page-index .st-editorial-lienzo {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  left: clamp(-5rem, -5vw, -2.5rem);
  width: clamp(11rem, 20vw, 18rem);
  height: clamp(8.25rem, 15vw, 13.5rem);
  aspect-ratio: 4 / 3;
  border: clamp(.4rem, .7vw, .7rem) solid var(--papel);
  border-radius: 1.2rem;
  object-fit: cover;
  box-shadow: 0 18px 48px rgba(23, 24, 21, .18);
  transform: rotate(-3deg);
  transition: transform 500ms cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .page-index .st-editorial-link:hover {
    background: var(--oscuro);
    color: var(--crema);
  }
  .page-index .st-editorial-visual:hover .st-editorial-lienzo {
    transform: rotate(-1deg) translateY(-.35rem);
  }
}
@media (max-width: 900px) {
  .page-index #statement.st-editorial {
    min-height: auto;
    padding: clamp(5.5rem, 12vw, 8rem) 1.25rem;
  }
  .page-index .st-editorial-inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
  .page-index .st-editorial-copy { max-width: 44rem; }
  .page-index .st-editorial-title {
    max-width: 10ch;
    font-size: clamp(3rem, 11vw, 5.2rem);
  }
  .page-index .st-editorial-visual {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .page-index .st-editorial-lienzo {
    right: 1rem;
    bottom: -1.5rem;
    left: auto;
    width: min(42vw, 14rem);
    height: min(31vw, 10.5rem);
  }
}
@media (max-width: 560px) {
  .page-index .st-editorial-title {
    max-width: 9ch;
    font-size: clamp(2.8rem, 13vw, 4rem);
    line-height: .9;
  }
  .page-index .st-editorial-foot {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-index .st-editorial-link { width: max-content; }
  .page-index .st-editorial-visual { aspect-ratio: 4 / 4.5; }
  .page-index .st-editorial-main { object-position: 44% center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-index .st-editorial-link,
  .page-index .st-editorial-lienzo { transition-duration: 1ms; }
}

/* Portada: las Colonias como mural colectivo, no como un segundo hero. */
.page-index #statement.st-mural {
  min-height: auto;
  padding: clamp(4rem, 6vw, 5.5rem) 6% clamp(3.5rem, 5vw, 4.5rem);
  overflow: clip;
  background: var(--papel);
  color: var(--oscuro);
}
.page-index .st-mural-inner {
  display: grid;
  width: min(100%, 1440px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(19rem, auto) auto;
  margin: 0 auto;
}
.page-index .st-mural-head {
  position: relative;
  z-index: 5;
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  padding-top: clamp(1rem, 3vw, 3rem);
}
.page-index .st-mural-head h2 {
  width: max-content;
  margin: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(3.6rem, 6vw, 6rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-index .st-mural-head p {
  max-width: 22ch;
  margin: 1.4rem 0 0;
  color: var(--gris);
  font-size: 1rem;
  line-height: 1.45;
}
.page-index .st-mural-stage {
  position: relative;
  z-index: 1;
  grid-column: 4 / 13;
  grid-row: 1 / 3;
  min-width: 0;
  height: clamp(26rem, 36vw, 32rem);
  isolation: isolate;
}
.page-index .st-mural-photo,
.page-index .st-mural-banner {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--papel);
}
.page-index .st-mural-photo img,
.page-index .st-mural-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-index .st-mural-photo-main {
  inset: 0 7% 2% 11%;
  z-index: 1;
  clip-path: polygon(3% 3%, 98% 0, 94% 98%, 0 94%);
}
.page-index .st-mural-photo-main img {
  object-position: 52% center;
  filter: saturate(.9) contrast(1.02);
  transform: scale(1.025);
  transition: transform 900ms cubic-bezier(.23, 1, .32, 1), filter 300ms ease;
}
.page-index .st-mural-photo-left {
  bottom: 0;
  left: 0;
  z-index: 4;
  width: 27%;
  height: 46%;
  border: .55rem solid var(--papel);
  transform: rotate(-3deg) translateZ(0);
  transition: transform 460ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-mural-photo-right {
  top: 4%;
  right: 0;
  z-index: 3;
  width: 25%;
  height: 42%;
  border: .55rem solid var(--papel);
  transform: rotate(2.5deg) translateZ(0);
  transition: transform 460ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-mural-banner {
  right: 10%;
  bottom: 3%;
  z-index: 5;
  width: min(43%, 29rem);
  height: clamp(6rem, 9vw, 7.5rem);
  border: .55rem solid var(--papel);
  transform: rotate(1.5deg) translateZ(0);
  transition: transform 460ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-mural-loop {
  position: absolute;
  top: 13%;
  right: 5%;
  z-index: 2;
  width: 76%;
  height: 72%;
  border: 2px solid var(--verde);
  border-radius: 50%;
  opacity: .78;
  pointer-events: none;
  transform: rotate(-7deg);
  transition: transform 700ms cubic-bezier(.23, 1, .32, 1), opacity 260ms ease;
}
.page-index .st-mural-statement {
  position: relative;
  z-index: 6;
  grid-column: 1 / 6;
  grid-row: 2;
  align-self: end;
  width: max-content;
  max-width: 100%;
  margin-bottom: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 2.5vw, 2.4rem) clamp(1.6rem, 3vw, 3rem);
  background: var(--oscuro);
  color: var(--crema);
  transform: translateX(clamp(0rem, 1.5vw, 1.5rem));
}
.page-index .st-mural-statement p {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(2rem, 2.8vw, 3rem);
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.page-index .st-mural-foot {
  position: relative;
  z-index: 7;
  grid-column: 1 / 13;
  grid-row: 3;
  display: flex;
  min-height: 4.5rem;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  margin-top: 1.75rem;
  border-top: 1px solid rgba(23, 24, 21, .24);
  border-bottom: 1px solid rgba(23, 24, 21, .24);
}
.page-index .st-mural-foot > span {
  color: var(--gris);
  font-size: .95rem;
}
.page-index .st-mural-foot a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .75rem;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-transform: uppercase;
  text-underline-offset: .35rem;
  transition: color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
  transform-origin: right center;
}
.page-index .st-mural-foot a:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .page-index .st-mural-stage:hover .st-mural-photo-main img {
    filter: saturate(1) contrast(1.02);
    transform: scale(1.055);
  }
  .page-index .st-mural-stage:hover .st-mural-photo-left { transform: rotate(-1deg) translate3d(.4rem, -.3rem, 0); }
  .page-index .st-mural-stage:hover .st-mural-photo-right { transform: rotate(.8deg) translate3d(-.35rem, .25rem, 0); }
  .page-index .st-mural-stage:hover .st-mural-banner { transform: rotate(-.4deg) translate3d(-.3rem, -.35rem, 0); }
  .page-index .st-mural-stage:hover .st-mural-loop { opacity: 1; transform: rotate(-3deg) scale(1.02); }
  .page-index .st-mural-foot a:hover { color: var(--magenta); }
}

@media (max-width: 900px) {
  .page-index #statement.st-mural { padding: 5.5rem 1.25rem 4.5rem; }
  .page-index .st-mural-inner { display: block; }
  .page-index .st-mural-head { padding: 0 0 2.25rem; }
  .page-index .st-mural-head h2 { width: auto; font-size: clamp(3.4rem, 11vw, 5.3rem); }
  .page-index .st-mural-head p { max-width: 30ch; }
  .page-index .st-mural-stage { height: clamp(29rem, 78vw, 38rem); }
  .page-index .st-mural-statement {
    width: min(92%, 32rem);
    margin: -2.5rem 0 0;
    transform: translateX(.75rem);
  }
  .page-index .st-mural-foot { margin-top: 2.5rem; }
}

@media (max-width: 560px) {
  .page-index .st-mural-head h2 { font-size: clamp(3.15rem, 15vw, 4.3rem); }
  .page-index .st-mural-stage { height: 30rem; }
  .page-index .st-mural-photo-main { inset: 0 0 3% 6%; }
  .page-index .st-mural-photo-left { width: 40%; height: 39%; }
  .page-index .st-mural-photo-right { display: none; }
  .page-index .st-mural-banner { right: 2%; bottom: 5%; width: 65%; height: 7.25rem; }
  .page-index .st-mural-loop { top: 15%; right: -9%; width: 92%; height: 67%; }
  .page-index .st-mural-statement { width: calc(100% - 1.25rem); padding: 1.4rem 1.5rem; }
  .page-index .st-mural-statement p { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  .page-index .st-mural-foot { align-items: flex-start; flex-direction: column; gap: .5rem; padding-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .st-mural-photo-main img,
  .page-index .st-mural-photo-left,
  .page-index .st-mural-photo-right,
  .page-index .st-mural-banner,
  .page-index .st-mural-loop,
  .page-index .st-mural-foot a { transition-duration: 1ms; }
}

/* Portada: el lienzo es la imagen principal; las fotos inéditas amplían el relato. */
.page-index #statement.st-lienzo {
  position: relative;
  min-height: 0;
  height: clamp(34rem, 46vw, 40rem);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--oscuro);
  color: var(--crema);
}
.page-index .st-lienzo-bg,
.page-index .st-lienzo-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-index .st-lienzo-bg {
  z-index: -3;
  object-fit: cover;
  object-position: 54% center;
  filter: saturate(.86) contrast(1.05);
  transform: scale(1.015);
  transition: transform 1200ms cubic-bezier(.23, 1, .32, 1), filter 320ms ease;
}
.page-index .st-lienzo-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(23,24,21,.92) 0%, rgba(23,24,21,.67) 27%, rgba(23,24,21,.12) 62%),
    linear-gradient(0deg, rgba(23,24,21,.82) 0%, rgba(23,24,21,0) 45%);
}
.page-index .st-lienzo-inner {
  position: relative;
  display: grid;
  width: min(100%, 1440px);
  height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) 6%;
}
.page-index .st-lienzo-head {
  align-self: start;
  max-width: 31rem;
}
.page-index .st-lienzo-head h2 {
  max-width: 7ch;
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(3.6rem, 5.8vw, 5.8rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-index .st-lienzo-head p {
  max-width: 25ch;
  margin: 1.25rem 0 0;
  color: rgba(255, 251, 231, .78);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.5;
}
.page-index .st-lienzo-gallery {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  gap: .65rem;
  align-items: end;
}
.page-index .st-lienzo-gallery figure {
  position: relative;
  width: clamp(7.5rem, 10vw, 10rem);
  height: clamp(6rem, 8vw, 8rem);
  margin: 0;
  overflow: hidden;
  border: .3rem solid var(--crema);
  background: var(--crema);
  transition: transform 260ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-lienzo-gallery figure:nth-child(2) {
  width: clamp(10rem, 15vw, 15rem);
  height: clamp(7rem, 10vw, 10rem);
}
.page-index .st-lienzo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-lienzo-gallery figure:nth-child(1) img { object-position: center 42%; }
.page-index .st-lienzo-gallery figure:nth-child(2) img { object-position: center 48%; }
.page-index .st-lienzo-gallery figure:nth-child(3) img { object-position: center 45%; }
.page-index .st-lienzo-gallery figcaption {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  padding: .3rem .45rem;
  background: var(--crema);
  color: var(--oscuro);
  font-family: var(--font-b);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}
.page-index .st-lienzo-link {
  display: inline-flex;
  min-height: 44px;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  align-self: end;
  gap: .75rem;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: .78rem;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-transform: uppercase;
  text-underline-offset: .35rem;
  transition: color 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
  transform-origin: right center;
}
.page-index .st-lienzo-link:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .page-index #statement.st-lienzo:hover .st-lienzo-bg {
    filter: saturate(.96) contrast(1.05);
    transform: scale(1.035);
  }
  .page-index .st-lienzo-gallery figure:hover { z-index: 2; transform: translateY(-.45rem); }
  .page-index .st-lienzo-gallery figure:hover img { transform: scale(1.045); }
  .page-index .st-lienzo-link:hover { color: var(--verde); }
}

@media (max-width: 760px) {
  .page-index #statement.st-lienzo { height: auto; min-height: 46rem; }
  .page-index .st-lienzo-bg { object-position: 57% center; }
  .page-index .st-lienzo-shade {
    background:
      linear-gradient(180deg, rgba(23,24,21,.9) 0%, rgba(23,24,21,.42) 40%, rgba(23,24,21,.82) 100%),
      linear-gradient(90deg, rgba(23,24,21,.35), rgba(23,24,21,.04));
  }
  .page-index .st-lienzo-inner {
    min-height: 46rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    gap: 1.15rem;
    padding: 4.5rem 1.25rem 2rem;
  }
  .page-index .st-lienzo-head h2 { font-size: clamp(3.4rem, 14.5vw, 4.6rem); }
  .page-index .st-lienzo-gallery { grid-column: 1; grid-row: 2; gap: .4rem; }
  .page-index .st-lienzo-gallery figure,
  .page-index .st-lienzo-gallery figure:nth-child(2) {
    width: calc((100vw - 3.3rem) / 3);
    height: 7rem;
    border-width: .22rem;
  }
  .page-index .st-lienzo-gallery figcaption { right: .25rem; bottom: .25rem; font-size: .72rem; }
  .page-index .st-lienzo-link { grid-column: 1; grid-row: 3; justify-self: start; transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .st-lienzo-bg,
  .page-index .st-lienzo-gallery figure,
  .page-index .st-lienzo-gallery img,
  .page-index .st-lienzo-link { transition-duration: 1ms; }
}

/* Portada: mosaico sensible de Colonias Urbanas. */
.page-index #statement.st-mosaico {
  position: relative;
  height: clamp(34rem, 46vw, 40rem);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #10110f;
  color: var(--crema);
  cursor: crosshair;
}
.page-index .st-mosaico-bg,
.page-index .st-mosaico-celdas,
.page-index .st-mosaico-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-index .st-mosaico-bg {
  z-index: -4;
  object-fit: cover;
  object-position: 54% center;
  filter: saturate(.72) contrast(1.08);
}
.page-index .st-mosaico-celdas {
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
  background: rgba(23, 24, 21, .55);
}
.page-index .st-mosaico-celda {
  background-position: center;
  background-size: cover;
  filter: saturate(1.16) contrast(1.07) brightness(1.04);
  opacity: 0;
  transition: opacity 160ms ease;
  will-change: opacity;
}
.page-index .st-mosaico-celda:nth-child(n) { grid-area: auto; }
.page-index .st-mosaico-shade {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23,24,21,.96) 0%, rgba(23,24,21,.78) 31%, rgba(23,24,21,.18) 64%),
    linear-gradient(0deg, rgba(23,24,21,.76) 0%, transparent 52%);
}
.page-index .st-mosaico-inner {
  position: relative;
  display: grid;
  width: min(100%, 1440px);
  height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) 6%;
  pointer-events: none;
}
.page-index .st-mosaico-head {
  position: relative;
  align-self: start;
  max-width: 40rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .68);
}
.page-index .st-mosaico-head h2 {
  max-width: 9ch;
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(3.6rem, 5.5vw, 5.7rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.page-index .st-mosaico-head .st-mosaico-lema {
  max-width: 34ch;
  margin: 1.25rem 0 0;
  color: var(--crema);
  font-family: var(--font-b);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
}
.page-index .st-mosaico-head .st-mosaico-lema strong {
  color: var(--verde);
  font-family: var(--font-h);
  font-size: .72em;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-index .st-mosaico-head .st-mosaico-bajada {
  max-width: 38ch;
  margin: .75rem 0 0;
  color: rgba(255, 251, 231, .78);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.5;
}
.page-index .st-mosaico-pista {
  display: inline-flex;
  min-height: 44px;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  align-self: end;
  gap: .65rem;
  color: rgba(255, 251, 231, .78);
  font-family: var(--font-h);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.page-index .st-mosaico-pista::before {
  display: none;
  content: none;
}
.page-index .st-mosaico-link {
  display: inline-flex;
  min-height: 52px;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  align-self: end;
  gap: .9rem;
  padding: .4rem .45rem .4rem 1.2rem;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--crema);
  font-family: var(--font-h);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .025em;
  pointer-events: auto;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 .7rem 1.8rem rgba(23, 24, 21, .2);
  transition: background 180ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1);
  transform-origin: right center;
}
.page-index .st-mosaico-link-icon {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--crema);
  color: var(--magenta);
  font-size: 1rem;
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.page-index .st-mosaico-link:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .page-index .st-mosaico-link:hover { background: #a03870; }
  .page-index .st-mosaico-link:hover .st-mosaico-link-icon { transform: translateX(.16rem); }
}

@media (max-width: 760px) {
  .page-index #statement.st-mosaico {
    height: auto;
    min-height: 46rem;
    cursor: default;
  }
  .page-index .st-mosaico-bg { object-position: 57% center; }
  .page-index .st-mosaico-celdas {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(10, 1fr);
  }
  .page-index .st-mosaico-celda:nth-child(n) { grid-area: auto; }
  .page-index .st-mosaico-shade {
    background:
      linear-gradient(180deg, rgba(23,24,21,.9) 0%, rgba(23,24,21,.28) 45%, rgba(23,24,21,.84) 100%),
      linear-gradient(90deg, rgba(23,24,21,.34), rgba(23,24,21,.04));
  }
  .page-index .st-mosaico-inner {
    min-height: 46rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 1.15rem;
    padding: 4.5rem 1.25rem 2rem;
  }
  .page-index .st-mosaico-head h2 { font-size: clamp(3.4rem, 14.5vw, 4.6rem); }
  .page-index .st-mosaico-pista { display: none; }
  .page-index .st-mosaico-link {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .st-mosaico-celda,
  .page-index .st-mosaico-link { transition-duration: 1ms; }
}

/* Portada: cierre de contacto, participación y navegación. */
.page-index .ft-cierre {
  position: relative;
  overflow: hidden;
  border-top: 0;
  background: var(--oscuro);
  color: var(--crema);
}
.page-index .ft-cierre::before {
  position: absolute;
  top: -24rem;
  left: -18rem;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(136,45,91,.38), transparent 68%);
  pointer-events: none;
  content: "";
}
.page-index .ft-cierre-principal {
  position: relative;
  display: grid;
  width: min(100% - 12%, 1440px);
  grid-template-columns: minmax(20rem, 1.15fr) minmax(21rem, 1fr) minmax(13rem, .55fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  margin-inline: auto;
  padding: clamp(5rem, 8vw, 8rem) 0 clamp(4rem, 7vw, 6.5rem);
}
.page-index .ft-cierre-invitacion { max-width: 38rem; }
.page-index .ft-cierre-logo {
  width: auto;
  height: 4rem;
  margin-bottom: 2rem;
  filter: brightness(0) invert(1);
  opacity: .9;
}
.page-index .ft-cierre-eyebrow,
.page-index .ft-cierre h3 {
  margin: 0 0 1.4rem;
  color: rgba(255,251,231,.52);
  font-family: var(--font-h);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}
.page-index .ft-cierre-invitacion h2 {
  max-width: 9ch;
  margin: 0;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(3rem, 4.8vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  text-wrap: balance;
}
.page-index .ft-cierre-invitacion > p:not(.ft-cierre-eyebrow) {
  max-width: 40ch;
  margin: 1.5rem 0 0;
  color: rgba(255,251,231,.68);
  font-family: var(--font-b);
  font-size: 1.05rem;
  line-height: 1.5;
}
.page-index .ft-cierre-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2rem;
  padding: .85rem 1rem .85rem 1.25rem;
  border-radius: 999px;
  background: var(--verde);
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.page-index .ft-cierre-cta span:last-child {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--oscuro);
  color: var(--crema);
  transition: transform 220ms cubic-bezier(.23,1,.32,1);
}
.page-index .ft-cierre-contactos,
.page-index .ft-cierre-nav { padding-top: 6rem; }
.page-index .ft-cierre-canal {
  position: relative;
  display: grid;
  min-height: 82px;
  grid-template-columns: 2rem minmax(0,1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: 1rem .25rem;
  border-top: 1px solid rgba(255,251,231,.17);
  color: var(--crema);
  text-decoration: none;
  transition: padding 220ms cubic-bezier(.23,1,.32,1), color 180ms ease;
}
.page-index .ft-cierre-canal:last-child { border-bottom: 1px solid rgba(255,251,231,.17); }
.page-index .ft-cierre-num {
  color: var(--verde);
  font-family: var(--font-h);
  font-size: .66rem;
  font-weight: 700;
}
.page-index .ft-cierre-canal-txt {
  overflow-wrap: anywhere;
  font-family: var(--font-h);
  font-size: clamp(.92rem, 1.2vw, 1.08rem);
  font-weight: 700;
  line-height: 1.15;
}
.page-index .ft-cierre-canal-txt small {
  display: block;
  margin-bottom: .35rem;
  color: rgba(255,251,231,.42);
  font-family: var(--font-b);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-index .ft-cierre-flecha {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border: 1px solid rgba(255,251,231,.24);
  border-radius: 50%;
  transition: background 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.23,1,.32,1);
}
.page-index .ft-cierre-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,251,231,.13);
  color: rgba(255,251,231,.72);
  font-family: var(--font-h);
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, padding 220ms cubic-bezier(.23,1,.32,1);
}
.page-index .ft-cierre-nav a span:last-child {
  color: rgba(255,251,231,.3);
  font-family: var(--font-h);
  font-size: .62rem;
}
.page-index .ft-cierre-base {
  position: relative;
  display: grid;
  width: min(100% - 12%, 1440px);
  grid-template-columns: 1.5fr 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-inline: auto;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,251,231,.16);
}
.page-index .ft-cierre-base p {
  margin: 0;
  color: rgba(255,251,231,.43);
  font-family: var(--font-b);
  font-size: .75rem;
  line-height: 1.55;
}
.page-index .ft-cierre-base strong { color: rgba(255,251,231,.65); font-weight: 700; }
.page-index .ft-cierre-firma {
  position: relative;
  width: min(100% - 12%, 1440px);
  margin: 0 auto;
  padding: .18em 0 .08em;
  overflow: hidden;
  color: rgba(255,251,231,.06);
  font-family: var(--font-h);
  font-size: clamp(4rem, 10.6vw, 10rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .82;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .page-index .ft-cierre-cta:hover { background: #a3c96a; transform: translateY(-2px); }
  .page-index .ft-cierre-cta:hover span:last-child { transform: translateX(.15rem); }
  .page-index .ft-cierre-canal:hover { padding-right: .6rem; padding-left: .6rem; color: var(--verde); }
  .page-index .ft-cierre-canal:hover .ft-cierre-flecha { background: var(--verde); color: var(--oscuro); transform: translate(.12rem,-.08rem); }
  .page-index .ft-cierre-nav a:hover { padding-left: .4rem; color: var(--verde); }
}

@media (max-width: 1000px) {
  .page-index .ft-cierre-principal { grid-template-columns: 1.1fr 1fr; }
  .page-index .ft-cierre-nav { grid-column: 1 / -1; padding-top: 0; }
  .page-index .ft-cierre-nav { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 2rem; }
  .page-index .ft-cierre-nav h3 { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .page-index .ft-cierre-principal,
  .page-index .ft-cierre-base,
  .page-index .ft-cierre-firma { width: calc(100% - 2.5rem); }
  .page-index .ft-cierre-principal { grid-template-columns: 1fr; gap: 3.5rem; padding: 4.5rem 0 3.5rem; }
  .page-index .ft-cierre-contactos,
  .page-index .ft-cierre-nav { grid-column: auto; padding-top: 0; }
  .page-index .ft-cierre-nav { grid-template-columns: 1fr; }
  .page-index .ft-cierre-nav h3 { grid-column: auto; }
  .page-index .ft-cierre-base { grid-template-columns: 1fr; gap: .75rem; }
  .page-index .ft-cierre-base p:last-child { margin-top: .5rem; }
  .page-index .ft-cierre-firma { font-size: clamp(3.5rem, 17vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .ft-cierre-cta,
  .page-index .ft-cierre-cta span:last-child,
  .page-index .ft-cierre-canal,
  .page-index .ft-cierre-flecha,
  .page-index .ft-cierre-nav a { transition-duration: 1ms; }
}

/* Pie compacto: sólo identidad y canales de contacto.
   Vale para la portada y para Trayectoria, que cierran igual. Las demás
   páginas siguen con el pie base de `estilo.css`. */
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) #contacto.ft-compacto,
.page-sumate #contacto-pie.ft-compacto { padding: 0; }
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-base {
  display: grid;
  width: min(100%, 1440px);
  grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 32rem) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3rem) 6%;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-base::before {
  display: none;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-logo img { height: clamp(4.5rem, 6vw, 5.75rem); }
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-center { max-width: 24rem; }
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto {
  width: 100%;
  min-width: 0;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-titulo {
  margin: 0;
  color: var(--verde);
  font-family: var(--font-h);
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.2;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.5rem;
  margin-top: 1rem;
  font-style: normal;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .4rem;
  color: var(--crema);
  text-decoration: none;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-tipo {
  color: rgba(255,251,231,.52);
  font-family: var(--font-b);
  font-size: .75rem;
  font-weight: 600;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-tipo span {
  display: inline-block;
  margin-left: .2rem;
  color: var(--verde);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales strong {
  font-family: var(--font-h);
  font-size: clamp(.85rem, 1.05vw, 1rem);
  font-weight: 750;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(145,190,63,.5);
  text-decoration-thickness: 1px;
  text-underline-offset: .25rem;
  overflow-wrap: anywhere;
  transition: color .25s ease, text-decoration-color .25s ease;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales a:hover strong,
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales a:focus-visible strong {
  color: var(--verde);
  text-decoration-color: var(--verde);
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales a:hover .ft-contacto-tipo span,
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales a:focus-visible .ft-contacto-tipo span {
  transform: translate(.18rem, -.18rem);
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-phrase {
  margin: 0;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: right;
}
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-phrase span { display: block; }
:is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-phrase span:last-child { color: var(--verde); }

@media (max-width: 1000px) {
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-base { grid-template-columns: minmax(16rem, 1fr) minmax(21rem, 1.2fr); }
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-phrase {
    grid-column: 1 / -1;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,251,231,.13);
    text-align: left;
  }
}

@media (max-width: 720px) {
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-base {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
  }
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-ident { align-items: flex-start; }
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-logo img { height: 4.5rem; }
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-phrase { grid-column: auto; }
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto { max-width: 34rem; }
}

@media (max-width: 520px) {
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-canales strong,
  :is(.page-index, .page-trayectoria, .page-colonias, .page-aliados, .page-sumate) .ft-compacto .ft-contacto-tipo span { transition-duration: 1ms; }
}

/* Trayectoria: encabezado de página.
   El título respira a lo ancho y cae en dos líneas: nada de columnas estrechas
   que lo parten en seis. El fondo mantiene los colores de la casa pero con
   profundidad (dos lavados radiales y grano) en lugar de un plano liso. */
.page-trayectoria .tray-portada {
  position: relative;
  display: grid;
  min-height: 0;
  align-items: end;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding: calc(var(--nav-h) + clamp(5rem, 9vw, 8.5rem)) 6% clamp(4.5rem, 7vw, 6.5rem);
  grid-template-columns: 1fr;
  overflow: hidden;
  /* Campo oscuro plano y dos circunferencias de filete fino, dibujadas con
     SVG en el propio fondo para no agregar marcado. Reemplazan a los dos
     lavados radiales que había antes: un halo difuso no es una figura, es
     un degradado de relleno, y a pleno sol en el celular no se ve. Una
     línea sí. Salen parcialmente del cuadro a propósito — el `overflow:
     hidden` de arriba las recorta — para que se lean como parte de algo
     más grande y no como dos aros centrados de adorno. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49.4' fill='none' stroke='%23fffbe7' stroke-opacity='.22' stroke-width='.35'/%3E%3C/svg%3E")
      no-repeat right -8% top -18% / clamp(20rem, 42vw, 38rem) clamp(20rem, 42vw, 38rem),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49.2' fill='none' stroke='%238bb154' stroke-opacity='.4' stroke-width='.7'/%3E%3C/svg%3E")
      no-repeat left 62% bottom -22% / clamp(9rem, 17vw, 15rem) clamp(9rem, 17vw, 15rem),
    var(--oscuro);
}

/* Grano: rompe el degradado y evita la sensación de plástico. */
.page-trayectoria .tray-portada::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  pointer-events: none;
  content: '';
}

/* El círculo decorativo de la plantilla sobra sobre este fondo. */
.page-trayectoria .tray-portada::after {
  display: none;
}

.page-trayectoria .tray-portada-texto {
  position: relative;
  z-index: 1;
}

.page-trayectoria .tray-portada .page-title {
  max-width: 19ch;
  font-family: var(--font-h);
  font-size: clamp(3rem, 7vw, 6.75rem);
  font-weight: 800;
  line-height: .89;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* La bajada se va al costado opuesto del título: el desequilibrio es lo que
   hace que el encabezado se lea como portada y no como formulario. */
.page-trayectoria .tray-portada .page-lead {
  max-width: 44ch;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  margin-left: auto;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.6;
  text-align: left;
}

/* Trayectoria: impacto acumulado antes de la cronología. */
.page-trayectoria .tray-impacto {
  display: grid;
  grid-template-columns: minmax(18rem, .82fr) minmax(25rem, .9fr);
  gap: clamp(4rem, 9vw, 9rem);
  align-items: start;
  padding: clamp(4rem, 7vw, 6rem) 6% clamp(4rem, 7vw, 6rem);
  background: var(--crema);
}
.page-trayectoria .tray-impacto-intro {
  position: sticky;
  top: calc(var(--nav-h) + 2.5rem);
  display: flex;
  min-height: calc(100svh - var(--nav-h) - 8rem);
  flex-direction: column;
  justify-content: space-between;
  align-self: start;
}
.page-trayectoria .tray-impacto-contexto {
  margin: 0 0 2rem;
  color: var(--magenta);
  font-family: var(--font-h);
  font-size: var(--type-small);
  font-weight: 700;
}
.page-trayectoria .tray-impacto h2 {
  max-width: 10ch;
  margin: 0;
  color: var(--oscuro);
  font-family: var(--font-h);
  font-size: clamp(2.9rem, 5.2vw, 4.75rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-trayectoria .tray-impacto h2 span {
  color: var(--magenta);
}
.page-trayectoria .tray-impacto-bajada {
  max-width: 34ch;
  margin: auto 0 1.5rem;
  color: var(--oscuro);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}
.page-trayectoria .tray-impacto-nota {
  margin: 0;
  color: var(--gris);
  font-size: var(--type-small);
  line-height: 1.4;
}
.page-trayectoria .tray-impacto-lista {
  position: relative;
  min-width: 0;
  padding-bottom: 4vh;
}
.page-trayectoria .tray-impacto-card {
  position: sticky;
  top: calc(var(--nav-h) + 2.5rem + (var(--orden) * .35rem));
  z-index: var(--orden);
  display: flex;
  min-height: clamp(16rem, 23vw, 20rem);
  flex-direction: column;
  margin-bottom: 8vh;
  padding: clamp(2rem, 3.4vw, 3rem);
  overflow: hidden;
  border-radius: 24px;
  color: var(--crema);
  transform: rotate(var(--giro));
  transform-origin: 50% 85%;
  box-shadow: 0 8px 0 rgba(23,24,21,.08);
}
.page-trayectoria .tray-impacto-card:last-child { margin-bottom: 0; }
.page-trayectoria .impacto-magenta { background: var(--magenta); }
.page-trayectoria .impacto-verde { background: var(--verde); color: var(--oscuro); }
.page-trayectoria .impacto-oscuro { background: var(--oscuro); }
.page-trayectoria .impacto-crema {
  background: var(--papel);
  color: var(--magenta);
  box-shadow: inset 0 0 0 2px rgba(136,45,91,.22), 0 8px 0 rgba(23,24,21,.08);
}
.page-trayectoria .tray-impacto-etiqueta {
  max-width: 24ch;
  margin: 0;
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.25;
}
.page-trayectoria .tray-impacto-cifra {
  margin: auto 0 0;
  font-family: var(--font-h);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.04em;
}
.page-trayectoria .tray-impacto-cifra-larga {
  font-size: clamp(3.25rem, 6vw, 5.6rem);
  line-height: .84;
}
.page-trayectoria .tray-impacto-unidad {
  max-width: 22ch;
  margin: .9rem 0 0;
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.05;
}
.page-trayectoria .tray-impacto-significado {
  max-width: 34ch;
  margin: 2rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}
.page-trayectoria .tray-cronologia-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
  gap: 3rem;
  align-items: end;
  padding: clamp(5rem, 9vw, 8rem) 6% clamp(3rem, 5vw, 4rem);
  background: var(--oscuro);
}
.page-trayectoria .tray-cronologia-cab h2 {
  margin: 0;
  color: var(--crema);
  font-family: var(--font-h);
  font-size: clamp(3rem, 6vw, 5.75rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
}
.page-trayectoria .tray-cronologia-cab h2 span { color: var(--verde); }
.page-trayectoria .tray-cronologia-cab p {
  margin: 0;
  color: rgba(255,251,231,.72);
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .page-trayectoria .tray-impacto {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr);
    gap: 3rem;
    padding-inline: 1.5rem;
  }
  .page-trayectoria .tray-impacto h2 { font-size: clamp(2.75rem, 6.5vw, 3.9rem); }
  .page-trayectoria .tray-impacto-card { min-height: 18rem; padding: 2rem; }
  .page-trayectoria .tray-impacto-cifra { font-size: clamp(4.5rem, 11vw, 6.5rem); }
  .page-trayectoria .tray-impacto-cifra-larga { font-size: clamp(2.9rem, 6.2vw, 4.4rem); }
}

@media (max-width: 700px) {
  .page-trayectoria .tray-portada {
    padding: calc(var(--nav-h) + 3.5rem) 1.25rem 3.5rem;
  }
  .page-trayectoria .tray-portada .page-title {
    max-width: none;
  }
  .page-trayectoria .tray-portada .page-lead {
    max-width: none;
    margin-left: 0;
  }
  .page-trayectoria .tray-impacto {
    display: block;
    padding: 3.5rem 1.25rem 4rem;
  }
  .page-trayectoria .tray-impacto-intro {
    position: static;
    min-height: 0;
  }
  .page-trayectoria .tray-impacto h2 {
    max-width: 11ch;
    font-size: clamp(2.6rem, 11vw, 3.5rem);
  }
  .page-trayectoria .tray-impacto-bajada { margin: 2rem 0 1rem; font-size: 1rem; }
  .page-trayectoria .tray-impacto-lista { padding: 3.5rem 0 0; }
  /* El mazo de tarjetas también se apila en el móvil. Cambian tres medidas
     respecto del escritorio, porque la pantalla es alta y angosta:
       - el alto se ata a la ventana (`svh`) para que la tarjeta de arriba
         nunca tape a la que está entrando;
       - el escalón entre tarjetas baja a .3rem: con seis tarjetas, el de
         escritorio se comería media pantalla;
       - el giro se reduce a la mitad. A este ancho, 1.2° ya se lee como
         una tarjeta chueca en vez de un mazo mal apilado. */
  .page-trayectoria .tray-impacto-card {
    top: calc(var(--nav-h) + .75rem + (var(--orden) * .3rem));
    min-height: min(22rem, 58svh);
    margin-bottom: 6svh;
    padding: 1.75rem;
    border-radius: 16px;
    transform: rotate(calc(var(--giro) * .55));
  }
  .page-trayectoria .tray-impacto-cifra { font-size: clamp(4.5rem, 24vw, 6.5rem); }
  .page-trayectoria .tray-impacto-cifra-larga { font-size: clamp(3rem, 15vw, 4.35rem); }
  .page-trayectoria .tray-impacto-significado { margin-top: 1.5rem; }
  .page-trayectoria .tray-cronologia-cab {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 4.5rem 1.25rem 3rem;
  }
  .page-trayectoria .tray-cronologia-cab h2 { font-size: clamp(3rem, 14vw, 4.15rem); }
}

@media (prefers-reduced-motion: reduce) {
  .page-trayectoria .tray-impacto-card { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COLONIAS · La banda del dato

   Es lo único que sobrevive de la antigua sección de cifras: nueve bloques
   de texto que repetían los números que el mosaico ya muestra. Queda la
   frase que el mosaico NO puede dar —por qué importan esas horas— y va
   antes de las fotos, no después: primero la razón, después la prueba.

   Campo oscuro, como los bloques de Trayectoria. Una frase, una fuente,
   nada más.
   ═══════════════════════════════════════════════════════════════════════ */

.page-colonias #deficit {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(4rem, 9vw, 8rem) 6%;
  background: var(--oscuro);
  color: var(--crema);
}

.page-colonias #deficit h2 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-colonias #deficit strong {
  color: var(--verde);
  font-weight: 800;
}

.page-colonias #deficit p {
  margin: 0;
}

.page-colonias #deficit a {
  color: rgba(255, 251, 231, .6);
  font-family: var(--font-h);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 251, 231, .28);
  padding-bottom: .2rem;
  transition: color 200ms ease, border-color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .page-colonias #deficit a:hover,
  .page-colonias #deficit a:focus-visible {
    color: var(--verde);
    border-color: var(--verde);
  }
}

@media (max-width: 700px) {
  .page-colonias #deficit { padding-inline: 1.25rem; }
}

/* Portada móvil: el mensaje se lee como una sola unidad, centrada arriba. */
@media (max-width: 760px) {
  .page-index .hero-content {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-rows: auto auto 1fr auto;
    align-content: stretch;
    align-items: start;
    text-align: center;
  }

  .page-index .hero-content-abajo {
    display: contents;
  }

  .page-index .hero-title {
    grid-row: 1;
    justify-self: center;
    margin-top: .75rem;
    text-align: center;
  }

  .page-index .hero-sub {
    grid-row: 3;
    align-self: end;
    max-width: 33rem;
    margin: 0 auto 1rem;
    text-align: center;
    text-align-last: center;
  }

  .page-index .hero-btns {
    display: grid;
    grid-row: 4;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    align-self: end;
    justify-self: center;
    width: min(100%, 24rem);
    gap: .45rem;
  }

  .page-index .hero-btns .btn-primary,
  .page-index .hero-btns .btn-outline {
    position: relative;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .65rem .65rem;
    gap: .4rem;
    font-size: .64rem;
  }

  .page-index .hero-btns .btn-flecha {
    position: absolute;
    right: .65rem;
    width: 1.35rem;
    height: 1.35rem;
    font-size: .72rem;
  }
}

@media (max-width: 360px) {
  .page-index .hero-btns {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, .9fr);
  }

  .page-index .hero-btns .btn-primary,
  .page-index .hero-btns .btn-outline {
    padding-inline: .55rem;
    font-size: .56rem;
    letter-spacing: .07em;
  }

  .page-index .hero-btns .btn-flecha {
    display: none;
  }
}