/* ─── TOKENS ─── */
/* Colores de marca definidos en BLOQUE 1.docx */
:root {
  --magenta: #882d5b;
  --verde:   #8bb154;
  --crema:   #fffbe7;
  --oscuro:  #111111;
  --gris:    #555;
  --nav-h:   88px;
  --font-h:  'League Spartan', sans-serif;
  --font-b:  'Anonymous Pro', monospace;
  --font-x:  'Protest Strike', sans-serif;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--crema);
  color: var(--oscuro);
  font-family: var(--font-b);
  overflow-x: hidden;
}
body.custom-cursor, body.custom-cursor * { cursor: none !important; }
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── CUSTOM CURSOR ─── */
#cursor-wrap {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
}
#cursor-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.25s, height 0.25s, background 0.25s;
}
#cursor-circle {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--magenta);
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              height 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              border-color 0.3s, background 0.4s, opacity 0.3s;
  opacity: 0.7;
  display: flex; align-items: center; justify-content: center;
}
#cursor-label {
  font-family: var(--font-h);
  font-size: 0.6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--crema);
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
/* States */
#cursor-wrap.state-link #cursor-dot { width: 6px; height: 6px; background: var(--verde); }
#cursor-wrap.state-link #cursor-circle { width: 58px; height: 58px; border-color: var(--verde); }
#cursor-wrap.state-btn #cursor-dot { width: 4px; height: 4px; }
#cursor-wrap.state-btn #cursor-circle {
  width: 90px; height: 90px;
  background: var(--magenta); border-color: var(--magenta); opacity: 0.9;
}
#cursor-wrap.state-btn #cursor-label { opacity: 1; }
#cursor-wrap.state-drag #cursor-dot { width: 6px; height: 6px; }
#cursor-wrap.state-drag #cursor-circle {
  width: 80px; height: 80px;
  background: rgba(136,45,91,0.85); border-color: var(--magenta); opacity: 0.95;
}
#cursor-wrap.state-drag #cursor-label { opacity: 1; }
@media (pointer: coarse) { #cursor-wrap { display: none; } }

/* ─── LOADER ─── */
#loader {
  position: fixed; inset: 0;
  background: var(--oscuro);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.loader-logo { overflow: hidden; }
.loader-logo img {
  width: 260px; height: auto;
  object-fit: contain;
}
.loader-bar-track {
  width: 200px; height: 2px;
  background: rgba(255,251,231,0.1);
  border-radius: 100px;
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  background: var(--verde);
  width: 0%;
  transition: width 0.1s linear;
}
.loader-label {
  font-family: var(--font-b);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,251,231,0.3);
}

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  height: var(--nav-h);
  transition: background 0.5s, box-shadow 0.5s;
}
nav.scrolled {
  background: rgba(255,251,231,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(136,45,91,0.1);
}
.nav-logo img {
  height: 62px;
  width: auto;
  display: block;
  object-fit: contain;
  /* Sobre el hero oscuro va en blanco; al bajar, el nav se vuelve crema
     y el logo recupera su magenta y verde originales. */
  filter: brightness(0) invert(1);
  transition: filter 0.5s;
}
nav.scrolled .nav-logo img { filter: none; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: var(--font-h);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,251,231,0.85);
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px; background: var(--verde);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nav-links a:hover::after { transform: scaleX(1); }
nav.scrolled .nav-links a { color: var(--oscuro); }
.nav-cta {
  font-family: var(--font-h);
  font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 1.4rem;
  border-radius: 100px;
  background: var(--verde); color: var(--oscuro);
  transition: transform 0.25s, box-shadow 0.25s;
}
.nav-cta:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(139,177,84,0.5); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: none; padding: 6px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--crema);
  transition: background 0.5s, transform 0.3s;
}
nav.scrolled .hamburger span { background: var(--magenta); }

/* ─── MOBILE DRAWER ─── */
.nav-drawer {
  position: fixed; inset: 0;
  background: var(--oscuro);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.5rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.77,0,0.175,1);
}
.nav-drawer.open { clip-path: inset(0 0 0 0); }
.nav-drawer a {
  font-family: var(--font-x);
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: var(--crema);
  transition: color 0.3s, transform 0.3s;
}
.nav-drawer a:hover { color: var(--verde); transform: translateX(10px); }
.drawer-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: 1px solid rgba(255,251,231,0.2);
  color: var(--crema); font-size: 1.1rem; cursor: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s;
}
.drawer-close:hover { background: var(--magenta); border-color: var(--magenta); }

/* ─── HERO ─── */
#hero {
  position: relative;
  height: 100vh; min-height: 620px;
  display: flex; align-items: flex-end;
  padding: 0 6% 4.5%;
  overflow: hidden;
  background: var(--oscuro);
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, #200b18 0%, #882D5B 55%, #1a0a1a 100%);
}
/* La foto del hero es un <picture>: el navegador elige la panorámica en
   escritorio y la apaisada en celular, y descarga solo una. */
.hero-photo {
  position: absolute; inset: 0;
  opacity: 0.55;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.04);
  display: block;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
/* Degradado que funde la foto con el fondo para legibilidad */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(17,10,20,0.35) 0%, transparent 25%, transparent 45%, rgba(15,6,18,0.75) 78%, rgba(15,6,18,0.96) 100%),
    linear-gradient(90deg, rgba(15,6,18,0.85) 0%, rgba(15,6,18,0.35) 45%, transparent 75%);
}
/* Noise texture */
.hero-noise {
  position: absolute; inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}
.hero-radial {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 75% 30%, rgba(139,177,84,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(136,45,91,0.5) 0%, transparent 60%);
}
@keyframes float-chispa {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}

.hero-content { position: relative; z-index: 2; max-width: 900px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-b);
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--verde);
  background: rgba(139,177,84,0.12);
  border: 1px solid rgba(139,177,84,0.35);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
}
.hero-title {
  font-family: var(--font-x);
  font-size: clamp(2.8rem, 6.6vw, 6.4rem);
  line-height: 0.95;
  color: var(--crema);
  margin-bottom: 1.6rem;
  overflow: hidden;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line-inner { display: block; }
.gsap-ready .hero-title .line-inner { transform: translateY(110%); }
.hero-title .accent { color: var(--verde); }
.hero-sub {
  font-family: var(--font-b);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: rgba(255,251,231,0.72);
  max-width: 560px; line-height: 1.7;
  margin-bottom: 2.2rem;
}
.hero-btns {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.btn-primary {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1rem 2.2rem;
  border-radius: 100px;
  background: var(--verde); color: var(--oscuro);
  box-shadow: 0 0 0 0 rgba(139,177,84,0.5);
  transition: transform 0.25s, box-shadow 0.4s;
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.2);
  transform: translateX(-110%) skewX(-15deg);
  transition: transform 0.5s ease;
}
.btn-primary:hover::after { transform: translateX(110%) skewX(-15deg); }
.btn-primary:hover { box-shadow: 0 0 0 8px rgba(139,177,84,0.15); }
.btn-outline {
  font-family: var(--font-h);
  font-weight: 700; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1rem 2.2rem;
  border-radius: 100px;
  border: 1.5px solid rgba(255,251,231,0.4);
  color: var(--crema);
  transition: border-color 0.3s, background 0.3s;
}
.btn-outline:hover { border-color: var(--crema); background: rgba(255,251,231,0.08); }

.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 6%;
  display: flex; align-items: center; gap: 1rem;
  color: rgba(255,251,231,0.4);
  font-family: var(--font-b); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.scroll-wheel {
  width: 26px; height: 40px;
  border: 1.5px solid rgba(255,251,231,0.2);
  border-radius: 13px;
  position: relative;
}
.scroll-wheel::after {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 8px;
  border-radius: 2px;
  background: var(--verde);
  animation: wheel-scroll 1.8s ease infinite;
}
@keyframes wheel-scroll {
  0% { top: 6px; opacity: 1; }
  100% { top: 22px; opacity: 0; }
}

/* ─── MARQUEE ─── */
.marquee-strip {
  background: var(--magenta);
  padding: 1rem 0; overflow: hidden;
  position: relative; z-index: 2;
}
.marquee-track {
  display: flex; white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding: 0 2.5rem;
  font-family: var(--font-h);
  font-size: 0.82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--crema);
}
.marquee-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── SECTION BASE ─── */
section { padding: 7rem 6%; }
.s-label {
  font-family: var(--font-b);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--magenta);
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.s-label::before { content: ''; width: 24px; height: 2px; background: currentColor; }

/* ═══════════════════════════════════════════════════════════
   CABECERA DE PÁGINA INTERNA (trayectoria, colonias, aliados…)
   ═══════════════════════════════════════════════════════════ */
.page-head {
  background: var(--oscuro);
  padding: 12rem 6% 5rem;
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: '';
  position: absolute; top: -180px; right: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(255,251,231,0.07);
  pointer-events: none;
}
.page-head .s-label { color: var(--verde); }
.page-head .s-label::before { background: var(--verde); }
.page-title {
  font-family: var(--font-x);
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  line-height: 0.98;
  color: var(--crema);
  max-width: 900px;
  position: relative; z-index: 1;
}
.page-title .v { color: var(--verde); }
.page-lead {
  font-size: 1rem; line-height: 1.8;
  color: rgba(255,251,231,0.7);
  max-width: 620px;
  margin-top: 1.5rem;
  position: relative; z-index: 1;
}

/* ─── TRAYECTORIA ─── */
#trayectoria { background: var(--crema); padding-top: 3.5rem; }

/* Filtro de año: se queda pegado arriba al hacer scroll */
.tl-filtros {
  position: sticky; top: var(--nav-h);
  z-index: 20;
  background: rgba(255,251,231,0.9);
  backdrop-filter: blur(10px);
  margin: 0 -6%; padding: 1.2rem 6%;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  border-bottom: 1px solid rgba(136,45,91,0.1);
}
.tl-filtro {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  border: 1.5px solid rgba(136,45,91,0.25);
  background: transparent; color: var(--magenta);
  cursor: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}
.tl-filtro:hover { transform: translateY(-2px); border-color: var(--magenta); }
.tl-filtro[aria-pressed="true"] {
  background: var(--magenta); color: var(--crema); border-color: var(--magenta);
}
.tl-conteo {
  margin-left: auto;
  font-family: var(--font-b);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gris); opacity: 0.75;
}

/* Bloque de año */
.tl-anio { padding-top: 3.5rem; }
.tl-anio-cab {
  display: flex; align-items: baseline; gap: 1.5rem;
  margin-bottom: 0.4rem;
}
.tl-anio-n {
  font-family: var(--font-x);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 1;
  color: var(--magenta);
}
.tl-anio-lema {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--verde);
}
.tl-anio-sep {
  height: 2px; background: rgba(136,45,91,0.15);
  margin-bottom: 2.5rem;
}

/* La línea vertical vive en el contenedor */
.tl-lista {
  position: relative;
  padding-left: 2.5rem;
}
.tl-lista::before {
  content: '';
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--magenta), rgba(136,45,91,0.12));
}
.tl-hito {
  position: relative;
  padding-bottom: 2.6rem;
}
.tl-hito:last-child { padding-bottom: 0; }
.tl-punto {
  position: absolute; left: -2.5rem; top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--crema);
  border: 3px solid var(--magenta);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.tl-hito:hover .tl-punto { background: var(--verde); border-color: var(--verde); transform: scale(1.25); }
/* Hito destacado (ej. constitución legal) */
.tl-hito.clave .tl-punto { background: var(--verde); border-color: var(--magenta); }
.tl-mes {
  font-family: var(--font-b);
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gris); opacity: 0.85;
  margin-bottom: 0.35rem;
}
.tl-titulo {
  font-family: var(--font-h);
  font-weight: 800; font-size: 1.15rem;
  color: var(--oscuro);
  margin-bottom: 0.45rem;
}
.tl-hito.clave .tl-titulo { color: var(--magenta); }
.tl-texto {
  font-size: 0.92rem; line-height: 1.8; color: var(--gris);
  max-width: 640px;
}
.tl-etiqueta {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  background: var(--verde); color: var(--oscuro);
  margin-left: 0.6rem;
  vertical-align: 2px;
}
/* Mensaje cuando un filtro no deja nada visible */
.tl-vacio {
  padding: 4rem 0; text-align: center;
  font-family: var(--font-b); color: var(--gris);
}

@media (max-width: 700px) {
  .page-head { padding: 8.5rem 5% 3.5rem; }
  .tl-lista { padding-left: 1.8rem; }
  .tl-punto { left: -1.8rem; width: 13px; height: 13px; border-width: 2.5px; }
  .tl-lista::before { left: 5px; }
  .tl-conteo { display: none; }
  .tl-anio-cab { flex-direction: column; gap: 0.2rem; }
}

/* ─── QUIÉNES SOMOS ─── */
#quienes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.qs-quote {
  font-family: var(--font-x);
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  line-height: 1;
  color: var(--magenta);
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.qs-quote .line { overflow: hidden; }
.qs-quote .dark { color: var(--oscuro); }
.qs-text {
  font-size: 0.95rem; line-height: 1.8; color: var(--gris);
  margin-bottom: 1rem;
}
.datos-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.8rem; margin-top: 2rem;
}
.dato {
  border: 1.5px solid rgba(136,45,91,0.12);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: default;
}
.dato:hover {
  border-color: var(--magenta);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(136,45,91,0.1);
}
.dato-icon { font-size: 1.4rem; margin-bottom: 0.4rem; }
.dato-title { font-family: var(--font-h); font-weight: 800; font-size: 0.95rem; color: var(--magenta); }
.dato-sub { font-size: 0.78rem; color: var(--gris); margin-top: 0.15rem; line-height: 1.4; }

.qs-visual { position: relative; }
.qs-img {
  width: 100%; aspect-ratio: 3/4;
  border-radius: 24px; overflow: hidden;
  background: var(--magenta);
  box-shadow: 0 30px 70px rgba(136,45,91,0.18);
}
.qs-img img { transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.qs-visual:hover .qs-img img { transform: scale(1.05); }
.qs-img-caption {
  font-family: var(--font-b);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gris); opacity: 0.7;
  margin-top: 0.9rem; text-align: right;
}
.img-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.8rem; color: rgba(255,251,231,0.35);
  font-family: var(--font-b); font-size: 0.8rem; text-align: center;
  padding: 2rem;
}
.img-ph-icon { font-size: 3.5rem; }
.qs-badge {
  position: absolute; bottom: -2.5rem; left: -3rem;
  width: 130px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.25));
  animation: rotate-badge 18s linear infinite;
}
@keyframes rotate-badge { to { transform: rotate(360deg); } }
.qs-badge-wrap {
  position: absolute; bottom: -2.5rem; left: -3rem;
}
.qs-chispa {
  position: absolute; top: -2rem; right: -2.5rem;
  width: 80px; opacity: 0.8;
  animation: float-chispa 4s ease-in-out infinite;
}

/* ─── COLONIAS (PINNED) ─── */
#colonias-pin { position: relative; }
#colonias {
  background: var(--magenta);
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem 6%;
  position: relative; overflow: hidden;
}
#colonias .s-label { color: rgba(139,177,84,0.9); }
#colonias .s-label::before { background: var(--verde); }

.col-deco1 {
  position: absolute; top: -80px; right: -80px;
  width: 480px; height: 480px; border-radius: 50%;
  border: 1px solid rgba(255,251,231,0.07);
  pointer-events: none;
}
.col-deco2 {
  position: absolute; bottom: -120px; left: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(139,177,84,0.1);
  pointer-events: none;
}
.col-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
  margin-bottom: 4rem; position: relative; z-index: 1;
}
.col-title {
  font-family: var(--font-x);
  font-size: clamp(3rem, 6vw, 6rem);
  color: var(--crema); line-height: 0.95;
}
.col-title .v { color: var(--verde); }
.col-desc {
  color: rgba(255,251,231,0.75);
  font-size: 1rem; line-height: 1.8;
  padding-top: 1rem;
}
.col-desc em { font-style: normal; color: var(--verde); font-weight: 700; }

.col-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin-bottom: 3.5rem;
  position: relative; z-index: 1;
}
.stat {
  background: rgba(255,251,231,0.06);
  padding: 2.5rem 1.5rem; text-align: center;
  border: 1px solid rgba(255,251,231,0.08);
  transition: background 0.3s;
}
.stat:first-child { border-radius: 16px 0 0 16px; }
.stat:last-child  { border-radius: 0 16px 16px 0; }
.stat:hover { background: rgba(255,251,231,0.11); }
.stat-n {
  font-family: var(--font-x);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  color: var(--verde); line-height: 1; display: block;
}
.stat-l {
  font-family: var(--font-h);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,251,231,0.55); margin-top: 0.5rem; display: block;
}

.talleres {
  display: flex; gap: 0.7rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.taller {
  font-family: var(--font-h); font-weight: 700;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.55rem 1.2rem; border-radius: 100px;
  border: 1.5px solid rgba(255,251,231,0.25);
  color: var(--crema);
  transition: border-color 0.3s, color 0.3s, transform 0.25s, background 0.3s;
  cursor: default;
}
.taller:hover {
  border-color: var(--verde); color: var(--verde);
  transform: scale(1.06);
  background: rgba(139,177,84,0.06);
}

.col-phrase {
  margin-top: 4rem; padding-top: 3.5rem;
  border-top: 1px solid rgba(255,251,231,0.12);
  font-family: var(--font-x);
  font-size: clamp(2rem, 4.5vw, 4rem);
  color: rgba(255,251,231,0.18);
  line-height: 1.1;
  position: relative; z-index: 1;
}
.col-phrase .hl { color: var(--verde); }

/* ─── STATEMENT (full-bleed) ─── */
#statement {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  padding: 8rem 6%;
  overflow: hidden;
  background: var(--oscuro);
}
/* Más alta que la sección: deja margen para el parallax sin dejar huecos */
.st-photo {
  position: absolute;
  top: -12%; left: 0; right: 0; height: 124%;
  background-size: cover;
  background-position: center 45%;
  will-change: transform;
}
.st-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,5,14,0.92) 0%, rgba(12,5,14,0.6) 50%, rgba(12,5,14,0.25) 100%),
    linear-gradient(0deg, rgba(12,5,14,0.7) 0%, transparent 45%);
}
.st-content { position: relative; z-index: 2; max-width: 780px; }
.st-mark {
  font-family: var(--font-x);
  font-size: 5rem; line-height: 0.6;
  color: var(--verde); opacity: 0.5;
  display: block; margin-bottom: 0.6rem;
}
.st-quote {
  font-family: var(--font-x);
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  color: var(--crema);
  margin-bottom: 1.8rem;
}
.st-quote .v { color: var(--verde); }
.st-source {
  font-family: var(--font-b);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255,251,231,0.5);
  display: flex; align-items: center; gap: 0.8rem;
}
.st-source::before { content: ''; width: 34px; height: 1px; background: var(--verde); opacity: 0.7; }

/* ─── ACTIVIDADES ─── */
#actividades { background: var(--crema); overflow: hidden; }
.act-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3.5rem;
}
.act-title {
  font-family: var(--font-h);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900; line-height: 1.1; color: var(--oscuro);
}
.act-title span { color: var(--magenta); }
.act-subtitle {
  font-size: 0.9rem; color: var(--gris);
  max-width: 280px; line-height: 1.6;
}

/* Horizontal scroll strip */
.act-scroll-wrap {
  overflow: hidden;
  position: relative;
  margin: 0 -6%;
  padding: 0 6% 1rem;
}
.act-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  cursor: grab;
  user-select: none;
}
.act-track:active { cursor: grabbing; }
.act-card {
  flex: 0 0 340px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
  background: var(--oscuro);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.act-card:hover { transform: scale(1.03); }
.act-card-bg {
  position: absolute; inset: 0;
  transition: transform 0.6s ease;
}
.act-card:hover .act-card-bg { transform: scale(1.08); }
.act-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  transition: background 0.5s;
}
.act-card:hover .act-overlay {
  background: linear-gradient(to top, rgba(136,45,91,0.92) 0%, rgba(136,45,91,0.25) 55%, transparent 100%);
}
.act-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem 1.8rem;
}
.act-icon { font-size: 2rem; display: block; margin-bottom: 0.6rem; }
.act-name {
  font-family: var(--font-h);
  font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--crema);
}
.act-desc {
  font-family: var(--font-b);
  font-size: 0.85rem; color: rgba(255,251,231,0.7);
  line-height: 1.6; margin-top: 0.5rem;
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s;
  opacity: 0;
}
.act-card:hover .act-desc { max-height: 120px; opacity: 1; }
.act-num {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: var(--font-x); font-size: 4rem; line-height: 1;
  color: rgba(255,255,255,0.06);
}

/* Las fotos de las tarjetas son <img> reales, no fondos CSS: así en móvil
   pueden mostrarse completas. En escritorio llenan la tarjeta. */
img.act-card-bg { width: 100%; height: 100%; object-fit: cover; }
.act-bg-1 { background-color: #2a0a1c; }
.act-bg-2 { background-color: #1a3a0a; }
.act-bg-3 { background-color: #0a1a3a; }
.act-bg-4 { background-color: #3a200a; }
/* Completadas no tiene foto todavía: se queda con el degradado */
.act-bg-6 { background: linear-gradient(135deg, #3a0a1a 0%, #6a1a2a 100%); }

.act-drag-hint {
  font-family: var(--font-b);
  font-size: 0.75rem; color: rgba(17,17,17,0.35);
  text-align: center; margin-top: 1.2rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.drag-arrow { animation: drag-bounce 1.5s ease-in-out infinite; }
@keyframes drag-bounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(8px)} }

/* ─── GALERÍA SWIPER ─── */
#galeria {
  background: var(--oscuro);
  padding: 7rem 0;
  overflow: hidden;
}
.gal-header {
  padding: 0 6%;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 3rem;
}
#galeria .s-label { color: var(--verde); }
#galeria .s-label::before { background: var(--verde); }
.gal-title {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--crema);
}
.gal-title span { color: var(--verde); }
.gal-nav {
  display: flex; gap: 0.8rem;
}
.gal-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,251,231,0.2);
  background: transparent;
  color: var(--crema);
  font-size: 1.2rem;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.gal-btn:hover {
  background: var(--verde); color: var(--oscuro);
  border-color: var(--verde); transform: scale(1.1);
}

.swiper-galeria {
  padding: 0 6% !important;
  overflow: visible !important;
}
.swiper-galeria .swiper-slide {
  border-radius: 16px;
  overflow: hidden;
  cursor: none;
}
.swiper-galeria .swiper-slide-active { transform: scale(1) !important; }
.gal-slide {
  aspect-ratio: 4/3;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s;
}
.gal-slide:hover { transform: scale(1.02); }
.gal-slide-bg {
  width: 100%; height: 100%;
  transition: transform 0.6s ease;
}
.gal-slide:hover .gal-slide-bg { transform: scale(1.06); }
.gal-slide-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  font-family: var(--font-h);
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,251,231,0.9);
  transition: opacity 0.3s, padding 0.3s;
  opacity: 0.85;
}
.gal-slide:hover .gal-slide-label { opacity: 1; padding-bottom: 1.7rem; }

.swiper-pagination-galeria {
  padding: 0 6%; margin-top: 1.5rem;
  display: flex; gap: 0.5rem;
}
.swiper-pagination-galeria .swiper-pagination-bullet {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(255,251,231,0.25);
  transition: width 0.4s, background 0.3s;
  cursor: none;
}
.swiper-pagination-galeria .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--verde);
}

/* ─── TESTIMONIOS ─── */
#testimonios { background: var(--crema); overflow: hidden; }
.tst-head { text-align: center; margin-bottom: 3.5rem; }
.tst-head .s-label { justify-content: center; }
.tst-title {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--oscuro); line-height: 1.1;
}
.tst-title span { color: var(--magenta); }
/* Son 5 testimonios en 3 columnas: la primera tarjeta ocupa dos
   para que la fila cierre pareja (2+3 en vez de 3+2 con un hueco). */
.tst-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.tst-card.destacada {
  grid-column: span 2;
  background: var(--magenta);
  border-color: var(--magenta);
}
.tst-card.destacada .tst-text {
  color: rgba(255,251,231,0.92);
  font-family: var(--font-x);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
}
.tst-card.destacada .tst-name { color: var(--crema); }
.tst-card.destacada .tst-role { color: rgba(255,251,231,0.6); }
.tst-card.destacada .tst-avatar { background: var(--verde); color: var(--oscuro); }
.tst-card.destacada .tst-mark { color: var(--verde); }
.tst-card.destacada:hover { box-shadow: 0 24px 60px rgba(136,45,91,0.3); }
.tst-card {
  background: #fff;
  border: 1.5px solid rgba(136,45,91,0.1);
  border-radius: 20px;
  padding: 2.2rem 2rem;
  display: flex; flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s, border-color 0.3s;
}
.tst-card:hover {
  transform: translateY(-6px);
  border-color: rgba(136,45,91,0.3);
  box-shadow: 0 24px 60px rgba(136,45,91,0.12);
}
.tst-mark {
  font-family: var(--font-x);
  font-size: 3rem; line-height: 0.5;
  color: var(--verde);
  margin-bottom: 1.2rem; display: block;
}
.tst-text {
  font-size: 0.95rem; line-height: 1.8; color: var(--gris);
  flex: 1; margin-bottom: 1.6rem;
}
.tst-who { display: flex; align-items: center; gap: 0.9rem; }
.tst-avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%;
  background: var(--magenta); color: var(--crema);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 800; font-size: 0.9rem;
}
.tst-name { font-family: var(--font-h); font-weight: 800; font-size: 0.9rem; color: var(--oscuro); }
.tst-role { font-size: 0.75rem; color: var(--gris); opacity: 0.8; }

/* ─── APOYA ─── */
#apoya { background: var(--magenta); position: relative; overflow: hidden; }
#apoya .s-label { color: rgba(139,177,84,0.9); }
#apoya .s-label::before { background: var(--verde); }
.ap-deco {
  position: absolute; top: -140px; left: -100px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(255,251,231,0.07);
  pointer-events: none;
}
.ap-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: end; margin-bottom: 3.5rem;
  position: relative; z-index: 1;
}
.ap-title {
  font-family: var(--font-x);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  color: var(--crema); line-height: 1;
}
.ap-title .v { color: var(--verde); }
.ap-sub {
  color: rgba(255,251,231,0.72);
  font-size: 0.98rem; line-height: 1.8;
}
.ap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  position: relative; z-index: 1;
}
.ap-card {
  background: rgba(255,251,231,0.05);
  border: 1px solid rgba(255,251,231,0.1);
  border-radius: 20px;
  padding: 2.2rem 1.9rem;
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.ap-card:hover {
  background: rgba(139,177,84,0.08);
  border-color: rgba(139,177,84,0.35);
  transform: translateY(-6px);
}
.ap-icon { font-size: 1.8rem; display: block; margin-bottom: 1rem; }
.ap-n {
  font-family: var(--font-h);
  font-weight: 800; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--verde); margin-bottom: 0.6rem;
}
.ap-p { font-size: 0.87rem; line-height: 1.75; color: rgba(255,251,231,0.7); }

/* ─── FAQ ─── */
#faq { background: var(--crema); }
.faq-wrap {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem;
  align-items: start;
}
.faq-title {
  font-family: var(--font-x);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  color: var(--magenta); line-height: 1;
  margin-bottom: 1rem;
}
.faq-title .dark { color: var(--oscuro); }
.faq-aside-p { font-size: 0.9rem; line-height: 1.8; color: var(--gris); }
.faq-list { border-top: 1px solid rgba(136,45,91,0.15); }
.faq-item { border-bottom: 1px solid rgba(136,45,91,0.15); }
.faq-q {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0.2rem;
  text-align: left; cursor: none;
  font-family: var(--font-h);
  font-weight: 800; font-size: 1rem;
  color: var(--oscuro);
  transition: color 0.25s;
}
.faq-q:hover { color: var(--magenta); }
.faq-icon {
  flex: 0 0 26px; width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(136,45,91,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--magenta); font-size: 1rem; line-height: 1;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), background 0.3s, color 0.3s;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--magenta); color: var(--crema);
  border-color: var(--magenta);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.faq-a-inner {
  padding: 0 2.5rem 1.6rem 0.2rem;
  font-size: 0.92rem; line-height: 1.85; color: var(--gris);
}

/* ─── SÚMATE ─── */
#sumate { background: var(--crema); }
.sumate-top { text-align: center; margin-bottom: 4rem; }
.sumate-title {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--oscuro); margin-bottom: 0.8rem;
}
.sumate-title span { color: var(--magenta); }
.sumate-sub {
  font-size: 0.95rem; color: var(--gris);
  max-width: 460px; margin: 0 auto; line-height: 1.7;
}

.doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.door {
  border-radius: 28px;
  padding: 3.5rem 3rem;
  position: relative; overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.5s;
  cursor: none;
}
.door:hover { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(0,0,0,0.2); }
.door-joven { background: var(--magenta); }
.door-inst  { background: var(--crema); border: 2px solid rgba(136,45,91,0.18); }
.door-deco {
  position: absolute; top: -70px; right: -70px;
  width: 220px; height: 220px; border-radius: 50%;
}
.door-joven .door-deco { background: rgba(139,177,84,0.15); }
.door-inst .door-deco  { background: rgba(136,45,91,0.08); }
.door-tag {
  font-family: var(--font-b);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  opacity: 0.55; display: block; margin-bottom: 1.5rem;
}
.door-joven .door-tag { color: var(--verde); }
.door-inst  .door-tag  { color: var(--magenta); }
.door-h {
  font-family: var(--font-x);
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.05;
  margin-bottom: 1.2rem;
}
.door-joven .door-h { color: var(--crema); }
.door-inst  .door-h  { color: var(--magenta); }
.door-p {
  font-size: 0.9rem; line-height: 1.75;
  margin-bottom: 2.2rem;
}
.door-joven .door-p { color: rgba(255,251,231,0.75); }
.door-inst  .door-p  { color: var(--gris); }
.door-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.85rem 2rem; border-radius: 100px;
  transition: transform 0.25s, box-shadow 0.3s;
  position: relative; overflow: hidden;
}
.door-btn::after {
  content: '→';
  display: inline-block;
  transition: transform 0.3s;
}
.door-btn:hover::after { transform: translateX(5px); }
.door-btn:hover { transform: scale(1.04); }
.door-joven .door-btn { background: var(--verde); color: var(--oscuro); }
.door-inst  .door-btn { background: var(--magenta); color: var(--crema); }

/* ─── CONTACTO ─── */
#contacto { background: var(--oscuro); padding: 7rem 6% 4rem; }
#contacto .s-label { color: var(--verde); }
#contacto .s-label::before { background: var(--verde); }
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 6rem; margin-bottom: 5rem;
}
.ct-title {
  font-family: var(--font-x);
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--crema); line-height: 1;
  margin-bottom: 1.5rem;
}
.ct-title span { color: var(--verde); }
.ct-text {
  font-size: 0.95rem; color: rgba(255,251,231,0.55);
  line-height: 1.8; margin-bottom: 2.5rem;
}
.ct-links { display: flex; flex-direction: column; gap: 0.8rem; }
.ct-link {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1rem 1.3rem;
  border-radius: 14px;
  background: rgba(255,251,231,0.04);
  border: 1px solid rgba(255,251,231,0.07);
  color: var(--crema);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.ct-link:hover {
  background: rgba(139,177,84,0.08);
  border-color: rgba(139,177,84,0.25);
  transform: translateX(6px);
}
.ct-icon { font-size: 1.2rem; }
.ct-lbl {
  font-family: var(--font-b);
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,251,231,0.35);
  display: block;
}
.ct-val { font-family: var(--font-h); font-weight: 700; font-size: 0.9rem; }

.form-title {
  font-family: var(--font-h);
  font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--crema); margin-bottom: 1.5rem;
}
.form-g { margin-bottom: 1rem; }
.form-g label {
  display: block;
  font-family: var(--font-b);
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,251,231,0.4);
  margin-bottom: 0.4rem;
}
.form-g input, .form-g textarea, .form-g select {
  width: 100%;
  background: rgba(255,251,231,0.04);
  border: 1px solid rgba(255,251,231,0.09);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--crema);
  font-family: var(--font-b); font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.form-g input:focus, .form-g textarea:focus, .form-g select:focus {
  border-color: var(--verde);
  background: rgba(139,177,84,0.05);
}
.form-g select option { background: #1a1a1a; }
.form-g textarea { resize: vertical; min-height: 100px; }
.form-submit {
  width: 100%; padding: 1rem;
  background: var(--verde); color: var(--oscuro);
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: none; border-radius: 100px; cursor: none;
  margin-top: 0.5rem;
  transition: background 0.3s, transform 0.25s, box-shadow 0.3s;
}
.form-submit:hover {
  background: #a3c96a; transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(139,177,84,0.3);
}

/* ─── FOOTER ─── */
footer {
  background: var(--oscuro);
  border-top: 1px solid rgba(255,251,231,0.07);
  padding: 3rem 6%;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 2rem;
}
.ft-logo img {
  height: 104px; width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* el footer es oscuro */
  opacity: 0.85;
  transition: opacity 0.3s;
}
.ft-logo img:hover { opacity: 1; }
.ft-center {
  font-family: var(--font-b);
  font-size: 0.75rem; color: rgba(255,251,231,0.28);
  text-align: center; line-height: 1.7;
}
.ft-center strong {
  display: block; color: rgba(255,251,231,0.5);
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 0.2rem;
}
.ft-phrase {
  font-family: var(--font-x);
  font-size: 1rem; color: var(--magenta); text-align: right;
}
.ft-phrase span { color: var(--verde); }

/* ─── BACK TO TOP ─── */
#btt {
  position: fixed; bottom: 2rem; right: 2rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--magenta); color: var(--crema);
  border: none; font-size: 1.2rem; cursor: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.35s, transform 0.35s, background 0.3s;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(136,45,91,0.5);
}
#btt.show { opacity: 1; transform: translateY(0); }
#btt:hover { background: var(--verde); color: var(--oscuro); }

/* ─── PROGRESS BAR ─── */
#progress {
  position: fixed; top: 0; left: 0;
  height: 3px; background: var(--verde);
  z-index: 200; width: 0%;
  transition: width 0.1s linear;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  section { padding: 5rem 5%; }
  #quienes { grid-template-columns: 1fr; gap: 3rem; }
  .qs-visual { order: -1; }
  .qs-badge { bottom: -1rem; left: 1rem; }
  .col-top { grid-template-columns: 1fr; gap: 2rem; }
  .col-stats { grid-template-columns: repeat(3, 1fr); }
  .doors { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  footer { flex-direction: column; align-items: flex-start; }
  .ft-phrase { text-align: left; }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .tst-grid { grid-template-columns: 1fr; }
  /* En una columna el span 2 no aplica, pero la tipografía grande sí estorba */
  .tst-card.destacada { grid-column: auto; }
  .tst-card.destacada .tst-text { font-size: 1.4rem; }
  .ap-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .ap-grid { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  #statement { min-height: 70vh; padding: 6rem 5%; }
  .st-scrim {
    background:
      linear-gradient(90deg, rgba(12,5,14,0.9) 0%, rgba(12,5,14,0.75) 100%),
      linear-gradient(0deg, rgba(12,5,14,0.75) 0%, transparent 55%);
  }
}
@media (max-width: 600px) {
  .col-stats { grid-template-columns: 1fr; }
  .stat { border-radius: 12px !important; }
  .datos-grid { grid-template-columns: 1fr 1fr; }
  .hero-btns { flex-direction: column; }
  .door { padding: 2.5rem 2rem; }
  .tst-card, .ap-card { padding: 1.8rem 1.5rem; }
  .faq-q { font-size: 0.92rem; }
  /* Con los botones apilados no queda sitio: chocaba con el CTA */
  .hero-scroll { display: none; }
  .hero-tag { font-size: 0.65rem; letter-spacing: 0.1em; padding: 0.4rem 0.85rem; }
}
/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ALIADOS / RED DE COLABORACIÓN
   ═══════════════════════════════════════════════════════════ */
#aliados { background: var(--crema); }

/* ─── Cinta de logos rotando ─── */
.logos-cinta {
  background: var(--crema);
  border-top: 1px solid rgba(136,45,91,0.12);
  border-bottom: 1px solid rgba(136,45,91,0.12);
  padding: 2.2rem 0;
  overflow: hidden;
  position: relative;
}
/* Difumina los bordes para que los logos entren y salgan suave */
.logos-cinta::before,
.logos-cinta::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 12%;
  z-index: 2; pointer-events: none;
}
.logos-cinta::before { left: 0;  background: linear-gradient(90deg, var(--crema), transparent); }
.logos-cinta::after  { right: 0; background: linear-gradient(270deg, var(--crema), transparent); }

.logos-track {
  display: flex; align-items: center;
  width: max-content;
  animation: logos-rotar 38s linear infinite;
}
.logos-cinta:hover .logos-track { animation-play-state: paused; }
@keyframes logos-rotar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logos-item {
  flex: 0 0 auto;
  padding: 0 3.2rem;
  height: 76px;
  display: flex; align-items: center; justify-content: center;
}
.logos-item img {
  height: 100%; width: auto;
  object-fit: contain;
  /* Uniforma logos de colores muy distintos; recuperan color al pasar el mouse */
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.4s, transform 0.4s;
}
.logos-item:hover img { filter: none; transform: scale(1.06); }

@media (max-width: 700px) {
  .logos-item { padding: 0 1.6rem; height: 48px; }
}

/* ─── Bloque de la cinta de aliados ─── */
.aliados-cinta-bloque { background: var(--crema); padding: 6rem 0 7rem; }
.cinta-intro { padding: 0 6%; margin-bottom: 3rem; }
.cinta-titulo {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.12; color: var(--oscuro);
}
.cinta-titulo .v { color: var(--magenta); }
.st-parrafo {
  color: rgba(255,251,231,0.7);
  font-size: 0.98rem; line-height: 1.8;
  max-width: 520px; margin-bottom: 2rem;
}
@media (max-width: 700px) {
  .aliados-cinta-bloque { padding: 4rem 0 4.5rem; }
  .cinta-intro { padding: 0 5%; margin-bottom: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE HORIZONTAL (portada)
   Riel navegable con arrastre, flechas y rueda del mouse.
   ═══════════════════════════════════════════════════════════ */
#trayectoria-h {
  background: var(--oscuro);
  padding: 7rem 0;
  overflow: hidden;
  position: relative;
}
#trayectoria-h .s-label { color: var(--verde); }
#trayectoria-h .s-label::before { background: var(--verde); }

.th-cab {
  padding: 0 6%;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.th-titulo {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1; color: var(--crema);
}
.th-titulo span { color: var(--verde); }
.th-acciones { display: flex; align-items: center; gap: 0.8rem; }
.th-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(255,251,231,0.2);
  background: transparent; color: var(--crema);
  font-size: 1.2rem; cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.2s, opacity 0.3s;
}
.th-btn:hover:not(:disabled) {
  background: var(--verde); color: var(--oscuro);
  border-color: var(--verde); transform: scale(1.1);
}
.th-btn:disabled { opacity: 0.25; }

/* El riel: se desplaza en horizontal */
.th-riel {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 6% 1rem;
  cursor: grab;
}
.th-riel::-webkit-scrollbar { display: none; }
.th-riel.arrastrando { cursor: grabbing; }
.th-riel.arrastrando .th-hito { pointer-events: none; }

.th-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  position: relative;
  padding-top: 3.2rem;   /* espacio para la línea y los puntos */
}
/* La línea horizontal que une los puntos */
.th-track::before {
  content: '';
  position: absolute;
  top: 3.2rem; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,251,231,0.06) 0%,
    rgba(139,177,84,0.55) 8%,
    rgba(139,177,84,0.55) 92%,
    rgba(255,251,231,0.06) 100%);
  transform: translateY(-1px);
}

/* Separador de año dentro del riel */
.th-anio {
  flex: 0 0 auto;
  width: 132px;
  position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2.6rem;
}
.th-anio-n {
  font-family: var(--font-x);
  font-size: 3.4rem; line-height: 1;
  color: rgba(255,251,231,0.12);
  letter-spacing: -0.02em;
}
.th-anio::before {
  content: '';
  position: absolute; top: 3.2rem; left: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--oscuro);
  border: 2px solid rgba(255,251,231,0.25);
}

/* Cada hito */
.th-hito {
  flex: 0 0 auto;
  width: 268px;
  padding: 0 0.9rem;
  position: relative;
}
.th-punto {
  position: absolute;
  top: 0; left: 1.6rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--oscuro);
  border: 3px solid var(--verde);
  transform: translateY(calc(-50% + 1px));
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
  z-index: 2;
}
.th-hito:hover .th-punto {
  background: var(--verde);
  transform: translateY(calc(-50% + 1px)) scale(1.35);
  box-shadow: 0 0 0 7px rgba(139,177,84,0.14);
}
/* Hitos mayores: punto relleno y magenta */
.th-hito.mayor .th-punto {
  background: var(--verde);
  border-color: var(--crema);
  width: 18px; height: 18px;
  left: 1.5rem;
}
.th-tarjeta {
  margin-top: 2.4rem;
  background: rgba(255,251,231,0.045);
  border: 1px solid rgba(255,251,231,0.09);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  height: 100%;
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.th-hito:hover .th-tarjeta {
  background: rgba(139,177,84,0.08);
  border-color: rgba(139,177,84,0.32);
  transform: translateY(-5px);
}
.th-hito.mayor .th-tarjeta {
  background: rgba(136,45,91,0.28);
  border-color: rgba(139,177,84,0.3);
}
.th-fecha {
  font-family: var(--font-b);
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--verde);
  margin-bottom: 0.5rem;
}
.th-hito-t {
  font-family: var(--font-h);
  font-weight: 800; font-size: 1rem;
  line-height: 1.25; color: var(--crema);
  margin-bottom: 0.45rem;
}
.th-hito-d {
  font-size: 0.8rem; line-height: 1.65;
  color: rgba(255,251,231,0.6);
}

/* Tarjeta final: lleva a la página completa */
.th-final {
  flex: 0 0 auto;
  width: 268px;
  padding: 0 0.9rem;
  position: relative;
  display: flex;
}
.th-final .th-tarjeta {
  display: flex; flex-direction: column; justify-content: center;
  border-style: dashed;
  border-color: rgba(139,177,84,0.4);
  background: transparent;
  text-align: center;
}
.th-final:hover .th-tarjeta {
  background: rgba(139,177,84,0.08);
  border-color: var(--verde);
  transform: translateY(-5px);
}
.th-final-t {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.95rem;
  color: var(--verde);
  line-height: 1.3;
}
.th-final-s {
  font-family: var(--font-b);
  font-size: 0.72rem; color: rgba(255,251,231,0.45);
  margin-top: 0.5rem;
}

.th-pista {
  padding: 1.4rem 6% 0;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-b);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,251,231,0.3);
}
.th-pista .flecha { animation: drag-bounce 1.5s ease-in-out infinite; }

/* Barra de avance del riel */
.th-barra {
  margin: 0 6%;
  height: 2px;
  background: rgba(255,251,231,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.th-barra-fill {
  height: 100%; width: 0%;
  background: var(--verde);
  border-radius: 2px;
  transition: width 0.12s linear;
}

@media (max-width: 700px) {
  #trayectoria-h { padding: 4.5rem 0; }
  .th-cab { padding: 0 5%; margin-bottom: 2.5rem; }
  .th-riel { padding: 0 5% 1rem; }
  .th-hito, .th-final { width: 226px; }
  .th-anio { width: 92px; }
  .th-anio-n { font-size: 2.4rem; }
  .th-acciones { display: none; }   /* en móvil se arrastra con el dedo */
}

/* ═══════════════════════════════════════════════════════════
   FORMULARIO INTELIGENTE (súmate)
   ═══════════════════════════════════════════════════════════ */
/* Son 4 perfiles en 2x2: en una sola fila quedaban demasiado angostos */
.perfiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.perfil-op {
  background: rgba(255,251,231,0.04);
  border: 1.5px solid rgba(255,251,231,0.1);
  border-radius: 14px;
  padding: 1rem 0.7rem;
  cursor: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center;
  transition: background 0.3s, border-color 0.3s, transform 0.25s;
}
.perfil-op:hover { background: rgba(139,177,84,0.07); border-color: rgba(139,177,84,0.35); transform: translateY(-3px); }
.perfil-op[aria-pressed="true"] {
  background: rgba(139,177,84,0.14);
  border-color: var(--verde);
}
.perfil-icono { font-size: 1.4rem; line-height: 1; }
.perfil-txt {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.75rem;
  color: var(--crema); line-height: 1.35;
}
.perfil-txt small {
  display: block;
  font-family: var(--font-b);
  font-weight: 400; font-size: 0.65rem;
  color: rgba(255,251,231,0.45);
  margin-top: 0.15rem;
}
.perfil-op[aria-pressed="true"] .perfil-txt { color: var(--verde); }

/* Los campos comunes aparecen recién al elegir perfil */
.campos-comunes {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s;
}
#formContacto.perfil-elegido .campos-comunes {
  max-height: 600px; opacity: 1;
}
#camposDinamicos:not(:empty) { margin-top: 0.2rem; }

@media (max-width: 600px) {
  .perfil-op { flex-direction: row; justify-content: flex-start; text-align: left; gap: 0.8rem; padding: 0.9rem; }
  .perfil-icono { font-size: 1.2rem; }
  .perfil-txt { font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESOS A LAS DEMÁS PÁGINAS (portada)
   ═══════════════════════════════════════════════════════════ */
#accesos { background: var(--crema); }
.acc-cab { margin-bottom: 3rem; }
.acc-titulo {
  font-family: var(--font-h);
  font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--oscuro); line-height: 1.1;
}
.acc-titulo span { color: var(--magenta); }

.acc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.acc-tarjeta {
  position: relative;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--oscuro);
  display: flex; align-items: flex-end;
  cursor: none;
  transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s;
}
.acc-tarjeta:hover { transform: translateY(-7px); box-shadow: 0 28px 65px rgba(17,17,17,0.28); }

.acc-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.acc-tarjeta:hover .acc-foto { transform: scale(1.07); }

.acc-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,5,14,0.94) 8%, rgba(12,5,14,0.55) 48%, rgba(12,5,14,0.15) 100%);
  transition: background 0.5s;
}
.acc-tarjeta:hover .acc-velo {
  background: linear-gradient(to top, rgba(136,45,91,0.94) 8%, rgba(136,45,91,0.5) 52%, rgba(12,5,14,0.2) 100%);
}

.acc-txt { position: relative; z-index: 2; padding: 2rem 1.9rem; width: 100%; }
.acc-n {
  font-family: var(--font-x);
  font-size: 2.2rem; line-height: 1;
  color: rgba(255,251,231,0.18);
  margin-bottom: 0.4rem;
}
.acc-h {
  font-family: var(--font-h);
  font-weight: 900; font-size: 1.5rem;
  color: var(--crema);
  margin-bottom: 0.5rem;
}
.acc-p {
  font-size: 0.85rem; line-height: 1.65;
  color: rgba(255,251,231,0.72);
  max-width: 340px;
  margin-bottom: 1rem;
}
.acc-cta {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--verde);
  display: inline-block;
  transition: transform 0.3s;
}
.acc-tarjeta:hover .acc-cta { transform: translateX(5px); }

@media (max-width: 800px) {
  .acc-grid { grid-template-columns: 1fr; }
  .acc-tarjeta { min-height: 260px; }
}

/* ─── Ejes de acción (Quiénes somos) ─── */
.qs-lead { font-size: 1.02rem; color: var(--oscuro); }
.qs-lead strong { color: var(--magenta); }
.ejes {
  margin-top: 2.2rem;
  border-top: 1px solid rgba(136,45,91,0.15);
}
.eje {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(136,45,91,0.15);
  transition: background 0.3s;
}
.eje:hover { background: rgba(136,45,91,0.03); }
.eje-n {
  grid-row: span 2;
  font-family: var(--font-x);
  font-size: 1.6rem; line-height: 1;
  color: var(--verde);
}
.eje-t {
  font-family: var(--font-h);
  font-weight: 800; font-size: 0.98rem;
  color: var(--magenta);
  margin-bottom: 0.25rem;
}
.eje-d { font-size: 0.85rem; line-height: 1.65; color: var(--gris); }

/* ─── Fotos dentro de un hito de la trayectoria ─── */
.tl-fotos {
  display: flex; gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.tl-fotos img {
  height: 150px; width: auto;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(136,45,91,0.12);
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s;
}
.tl-fotos img:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 38px rgba(136,45,91,0.22);
}
.tl-pie {
  font-family: var(--font-b);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gris); opacity: 0.6;
  margin-top: 0.6rem;
}
@media (max-width: 700px) {
  .tl-fotos img { height: 108px; }
}

/* Cada página muestra una foto distinta en su bloque #statement */
.st-lienzo    .st-photo { background-image: url('../img/lienzo2.jpg'); }
.st-pasacalle .st-photo { background-image: url('../img/pasacalle-lienzo.jpg'); }
.st-equipo    .st-photo { background-image: url('../img/equipo-2.jpg'); }
.st-juegos    .st-photo { background-image: url('../img/juegos-grupo.jpg'); }
.st-abrazo    .st-photo { background-image: url('../img/abrazo.jpg'); }

/* ═══════════════════════════════════════════════════════════
   NAVEGACIÓN: DÓNDE ESTOY
   El sitio tiene 5 páginas y no había ninguna señal de en cuál
   estabas. aria-current lo dice al lector de pantalla y lo pinta acá.
   ═══════════════════════════════════════════════════════════ */
.nav-links a[aria-current="page"] {
  color: var(--verde);
}
/* El subrayado del hover ya existe: en la página actual queda fijo */
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}
nav.scrolled .nav-links a[aria-current="page"] {
  color: var(--magenta);
}
nav.scrolled .nav-links a[aria-current="page"]::after {
  background: var(--magenta);
}
/* En el menú móvil, un punto verde marca la página actual */
.nav-drawer a[aria-current="page"] {
  color: var(--verde);
  position: relative;
}
.nav-drawer a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -1.1rem; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--verde);
}

/* ═══════════════════════════════════════════════════════════
   HOVER SOLO CON MOUSE
   Sin este gate, tocar en el celular deja el estado :hover pegado
   hasta que tocas otra cosa. El sitio se consume sobre todo en móvil.
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) {
  .dato:hover, .taller:hover, .stat:hover, .eje:hover,
  .act-card:hover, .tst-card:hover, .ap-card:hover,
  .gal-slide:hover, .acc-tarjeta:hover, .door:hover,
  .tl-hito:hover .tl-punto, .tl-fotos img:hover,
  .qs-visual:hover .qs-img img, .logos-item:hover img,
  .th-hito:hover .th-tarjeta, .th-hito:hover .th-punto {
    transform: none;
    box-shadow: none;
  }
  .logos-item:hover img { filter: grayscale(1) opacity(0.7); }
  .act-card:hover .act-desc { max-height: 0; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   FEEDBACK DE PRESIÓN
   Todo lo que se puede tocar responde al toque. Sin esto,
   en el celular no hay confirmación de que la interfaz te escuchó.
   ═══════════════════════════════════════════════════════════ */
.btn-primary, .btn-outline, .nav-cta, .door-btn, .form-submit,
.tl-filtro, .th-btn, .gal-btn, .perfil-op, .faq-q, .acc-tarjeta {
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active, .btn-outline:active, .nav-cta:active,
.door-btn:active, .form-submit:active, .tl-filtro:active,
.th-btn:active, .gal-btn:active, .perfil-op:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.acc-tarjeta:active { transform: scale(0.99); transition-duration: 100ms; }
.faq-q:active { opacity: 0.7; transition-duration: 100ms; }

/* Foco visible para quien navega con teclado */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   MÓVIL: LA FOTO ENTERA, EL TEXTO ABAJO
   En pantalla chica, recortar la foto dentro de una caja y poner
   el texto encima arruina las dos cosas. Acá la foto se ve completa
   y el texto va debajo, sin superposiciones.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {

  /* — Accesos de la portada — */
  .acc-tarjeta {
    display: block;
    min-height: 0;
    background: var(--oscuro);
  }
  .acc-foto {
    position: static;
    width: 100%; height: auto;      /* alto natural: la foto se ve entera */
    object-fit: contain;
    display: block;
  }
  .acc-velo { display: none; }      /* sin foto detrás, el velo no tiene sentido */
  .acc-txt { padding: 1.4rem 1.3rem 1.6rem; }
  .acc-tarjeta:hover .acc-foto { transform: none; }

  /* — Tarjetas de actividades — */
  .act-card {
    flex: 0 0 82vw;
    aspect-ratio: auto;
    display: flex; flex-direction: column;
    background: var(--oscuro);
  }
  img.act-card-bg {
    position: static;
    width: 100%; height: auto;
    object-fit: contain;
  }
  .act-overlay { display: none; }
  .act-num { top: 0.8rem; right: 1rem; font-size: 2.4rem; }
  .act-content { position: static; padding: 1.2rem 1.2rem 1.4rem; }
  /* La descripción ya no se oculta: no hay foto que tapar */
  .act-desc { max-height: none; opacity: 1; }
  .act-card:hover img.act-card-bg { transform: none; }
  /* La de Completadas no tiene foto: le damos cuerpo para que no colapse */
  div.act-card-bg { min-height: 150px; }

  /* — Galería — */
  .gal-slide { aspect-ratio: auto; }
  .gal-slide-bg { width: 100%; height: auto; object-fit: contain; display: block; }
  .gal-slide-label {
    position: static;
    background: none;
    color: var(--crema);
    padding: 0.8rem 0.2rem 0;
    opacity: 1;
  }
  .gal-slide:hover .gal-slide-label { padding-bottom: 0; }

  /* — Foto de Quiénes somos — */
  .qs-img { aspect-ratio: auto; }
  .qs-img img { height: auto; object-fit: contain; }
  .qs-img-caption { text-align: left; }

  /* — Fotos de la trayectoria — */
  .tl-fotos { flex-direction: column; }
  .tl-fotos img { width: 100%; height: auto; object-fit: contain; }
}

/* ═══════════════════════════════════════════════════════════
   HERO MÓVIL: PROPORCIONES DE CELULAR, NO DE ESCRITORIO
   El texto ocupaba el 54% de la primera vista y la foto el 23%.
   En un celular eso está al revés: la foto es el argumento.
   Acá el texto se aprieta para que la foto respire.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .hero-tag {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.75rem;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
  }
  /* 44.8px era tamaño de escritorio: partía "creando comunidad." en dos
     y estiraba el título a 4 líneas. A 2rem entra en las 3 previstas. */
  .hero-title {
    font-size: 2rem;
    line-height: 0.96;
    margin-bottom: 0.9rem;
  }
  .hero-sub {
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 1.3rem;
    max-width: 34ch;
  }
  /* Apilados gastaban 109px. Lado a lado gastan 48px. */
  .hero-btns {
    flex-direction: row;
    gap: 0.5rem;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    flex: 1;
    padding: 0.9rem 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
}
/* La regla de 600px apilaba los botones: acá mandan los de arriba */
@media (max-width: 600px) {
  .hero-btns { flex-direction: row; }
}


/* ─── Franja del encabezado en móvil ─── */
@media (max-width: 800px) {
  /* En la portada el menú va sobre fondo oscuro desde el inicio: se lee
     como una franja propia y el logo no compite con nada. */
  nav {
    background: var(--oscuro);
    border-bottom: 1px solid rgba(255,251,231,0.08);
  }
  nav.scrolled {
    background: rgba(255,251,231,0.96);
    border-bottom-color: rgba(136,45,91,0.12);
  }
}

/* ═══════════════════════════════════════════════════════════
   HERO MÓVIL: LA FOTO A PANTALLA, EL TEXTO EN SUS ZONAS MUERTAS
   La foto tiene techo arriba y cancha abajo: espacio sin nadie.
   El título se apoya en el techo y la bajada en el suelo, así el
   texto nunca tapa una cara y las personas quedan limpias al medio.
   El degradado oscurece solo esas dos franjas, no el centro.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  #hero {
    height: auto;
    min-height: 100svh;          /* svh: no salta con la barra del navegador */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;        /* el base trae flex-end: en columna alinea a la derecha */
    padding: calc(var(--nav-h) + 1rem) 6% 2.2rem;
    position: relative;
    background: var(--oscuro);
  }

  .hero-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    opacity: 1;
    transform: none;
    filter: none;
    overflow: hidden;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-photo::before, .hero-photo::after { content: none; }
  .hero-photo img {
    position: absolute;
    inset: 0;
    transform: none;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 52%;   /* deja el grupo al centro del encuadre */
    -webkit-mask-image: none; mask-image: none;
  }

  /* Oscuro en el techo y en el suelo; transparente donde están las personas */
  .hero-scrim {
    display: block;
    background: linear-gradient(180deg,
      rgba(12,5,14,0.9)  0%,
      rgba(12,5,14,0.55) 20%,
      rgba(12,5,14,0.04) 38%,
      rgba(12,5,14,0.04) 56%,
      rgba(12,5,14,0.62) 78%,
      rgba(12,5,14,0.95) 100%);
  }
  .hero-bg, .hero-radial, .hero-noise, .hero-scroll { display: none; }

  /* Que tag/título/bajada/botones sean hijos directos del hero para
     poder mandarlos arriba y abajo con space-between. */
  .hero-content { display: contents; }

  .hero-tag {
    order: 1;
    align-self: flex-start;
    position: relative; z-index: 2;
    margin: 0 0 0.8rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.75rem;
  }
  .hero-title {
    order: 2;
    position: relative; z-index: 2;
    margin: 0 0 auto;            /* auto: empuja el resto contra el suelo */
    font-size: 2rem;
    line-height: 0.96;
    text-shadow: 0 2px 26px rgba(0,0,0,0.75);
  }
  .hero-sub {
    order: 3;
    position: relative; z-index: 2;
    margin: 0 0 1.3rem;
    font-size: 0.85rem;
    line-height: 1.55;
    max-width: 34ch;
    color: rgba(255,251,231,0.9);
    text-shadow: 0 1px 14px rgba(0,0,0,0.9);
  }
  .hero-btns {
    order: 4;
    position: relative; z-index: 2;
    flex-direction: row;
    gap: 0.5rem;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    flex: 1;
    padding: 0.9rem 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .hero-btns { flex-direction: row; }
}

/* ═══════════════════════════════════════════════════════════
   LIENZO DE APERTURA (colonias)
   La frase del propio lienzo abre la página, antes de cualquier dato.
   ═══════════════════════════════════════════════════════════ */
#lienzo-apertura {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  padding: 6rem 6% 4rem;
  overflow: hidden;
  background: var(--oscuro);
}
.lienzo-foto {
  position: absolute;
  top: -8%; left: 0; right: 0; height: 116%;
  background: url('../img/lienzo-pintando.jpg') center 45%/cover no-repeat;
  will-change: transform;
}
.lienzo-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,5,14,0.9) 0%, rgba(12,5,14,0.5) 55%, rgba(12,5,14,0.2) 100%),
    linear-gradient(0deg, rgba(12,5,14,0.8) 0%, transparent 55%);
}
.lienzo-txt { position: relative; z-index: 2; max-width: 780px; }
.lienzo-frase {
  font-family: var(--font-x);
  font-size: clamp(2.2rem, 5.4vw, 4.8rem);
  line-height: 1;
  color: var(--crema);
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.lienzo-frase .v { color: var(--verde); }
.lienzo-pie {
  font-family: var(--font-b);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,251,231,0.55);
  display: flex; align-items: center; gap: 0.8rem;
}
.lienzo-pie::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--verde);
  flex: 0 0 32px;
}
@media (max-width: 800px) {
  #lienzo-apertura { min-height: 52vh; padding: 4rem 6% 2.5rem; }
  .lienzo-velo {
    background:
      linear-gradient(90deg, rgba(12,5,14,0.85) 0%, rgba(12,5,14,0.6) 100%),
      linear-gradient(0deg, rgba(12,5,14,0.9) 0%, transparent 60%);
  }
  .lienzo-pie { font-size: 0.68rem; }
}