/* ==========================================================================
   Jornada Experiencias de Gestión en Salud — sitio estático
   Migrado fielmente desde Strikingly (jornadasgestionsalud.com)
   Tokens reales: Montserrat · #6f2deb · #1e0349 · #f0e7fe (getComputedStyle)
   ========================================================================== */

:root {
  color-scheme: light;
  --purple: #6f2deb;
  --purple-dark: #5a1fd4;
  --indigo: #1e0349;
  --indigo-2: #3a0a6b;
  --lavender: #f0e7fe;
  --ink: #1d2023;
  --slate: #50555c;
  --line: #e2e2e2;
  --footer: #1c1c1c;
  --off-bg: #d8caf0;   /* acción cerrada: paso apagado del ramp Lavanda (nunca violeta) */
  --off-ink: #474d54;  /* su texto: paso del ramp Tinta — 5.6:1, apagado pero legible */
  --veil: 20, 3, 52;   /* índigo del velo del hero (más oscuro que --indigo a propósito, tuneado para legibilidad del texto sobre foto) */
  --maxw: 1080px;
  --focus: var(--purple);   /* anillo de foco por teclado (en dark pasa al acento claro) */

  /* Curvas de salida (deceleración natural, sin rebote) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Foco visible por teclado ----------
   El sitio carecía de indicador de foco propio y dependía del outline por
   defecto del navegador. Se define un anillo de marca, consistente en fondos
   claros y oscuros, solo para navegación por teclado (:focus-visible), no al
   click. En dark mode el anillo usa el acento claro (Dark-Accent Rule). */
a:focus-visible,
.btn:focus-visible,
.hamburger:focus-visible,
.cookie-banner button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; transition: color .25s ease, opacity .25s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---------- Utilities ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.text-center { text-align: center; }

.section-title {
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--ink);
  text-align: center;
  letter-spacing: .5px;
}
.section-subtitle {
  font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--purple);
  text-align: center;
  margin-top: 14px;
}

.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s ease;
}
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dark); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(111,45,235,.35); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.btn-outline:hover { background: #fff; color: var(--indigo); }

/* Acción ya no disponible (convocatoria cerrada). Se usa sobre <button disabled>,
   nunca sobre un <a>: así no es clickeable ni entra al orden de tabulación.
   Sin sombra ni desplazamiento al hover — nada sugiere que responda. */
.btn-off { background: var(--off-bg); color: var(--off-ink); cursor: not-allowed; }
.btn-off:hover { background: var(--off-bg); transform: none; box-shadow: none; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  padding: 16px 0;
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.navbar-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.1rem; }
.navbar-logo { width: 40px; height: 40px; border-radius: 50%; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-weight: 600; font-size: .95rem; position: relative; padding: 4px 0; }
.nav-links a.active { font-weight: 700; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: currentColor; transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ambos heroes son oscuros → texto del nav siempre blanco */
.navbar { color: #fff; }
.navbar.scrolled {
  background: rgba(30, 3, 73, .97);
  color: #fff;
  padding: 10px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.navbar.scrolled .navbar-logo { width: 34px; height: 34px; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: 0; padding: 6px; color: inherit; }
.hamburger span { width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: all .3s ease; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 700px);
  display: flex; align-items: center;
  color: #fff;
  background: #2a0a4a center/cover no-repeat;
  overflow: hidden;
}
.hero--2025 { background-image: url('../images/hero-2025.webp'); }
.hero--2026 { background-image: url('../images/hero-2026.webp'); }
.hero--2024 { background-image: url('../images/hero-2024.webp'); }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,3,52,.78) 0%, rgba(20,3,52,.45) 45%, rgba(20,3,52,.15) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 640px; padding-top: 60px; }
.hero-eyebrow { font-size: 1.05rem; font-weight: 400; opacity: .95; margin-bottom: 14px; }
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.12;
  margin-bottom: 22px;
}
.hero-date { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; margin-bottom: 6px; }
.hero-place { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 400; opacity: .95; margin-bottom: 28px; }
.hero-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 48ch;
  margin-bottom: 26px;
  opacity: .95;
  text-wrap: balance;
}
.hero-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-buttons .btn { min-width: 150px; text-align: center; }

/* ==========================================================================
   Hero cinemático (index / .hero--cinema) — overdrive "El Anfiteatro"
   La luz se enciende sobre lo que se comparte. Capas apiladas:
     .hero-media   → foto (Ken Burns + encendido al cargar, parallax al scroll)
     .hero-veil    → velo índigo de legibilidad (reemplaza al ::before)
     .container    → contenido con entrada coreografiada
   PROGRESSIVE ENHANCEMENT: todo es realce. Sin JS (sin .js-anim), sin
   scroll-timeline, o con prefers-reduced-motion, el hero se ve completo y
   estático — nada de contenido oculto tras una animación que quizá no corra.
   ========================================================================== */
.hero--cinema { background-image: none; }   /* la foto la pinta .hero-media__img */
.hero--cinema::before { display: none; }     /* el velo diagonal ahora es .hero-veil */

.hero-media, .hero-veil { position: absolute; inset: 0; }
.hero-media { z-index: 0; overflow: hidden; }
.hero-veil  { z-index: 1; }
.hero--cinema .container { z-index: 2; }

/* Capa de parallax: sangra más allá del marco para que ni el desplazamiento
   ni el zoom dejen ver un borde. */
.hero-media__parallax { position: absolute; inset: -12%; }
.hero-media__img {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  transform-origin: 62% 42%;
}
/* Foto del hero por edición: en el patrón cinema la pinta esta capa, no
   .hero (que queda en background:none). Así el efecto sirve a las tres. */
.hero--2026 .hero-media__img { background-image: url('../images/hero-2026.webp'); }
.hero--2025 .hero-media__img { background-image: url('../images/hero-2025.webp'); }
.hero--2024 .hero-media__img { background-image: url('../images/hero-2024.webp'); }

/* Velo índigo (mismo diagonal del ::before original) + asiento inferior sutil.
   Scrim de contenido extra en el lado izq/centro (donde vive el texto) que se
   desvanece antes del lado brillante de la foto → contraste garantizado sin
   apagar el reveal fotográfico de la derecha. */
.hero-veil {
  background:
    linear-gradient(100deg, rgba(var(--veil),.60) 0%, rgba(var(--veil),.34) 42%, transparent 64%),
    linear-gradient(100deg, rgba(var(--veil),.80) 0%, rgba(var(--veil),.46) 45%, rgba(var(--veil),.14) 100%),
    linear-gradient(to top, rgba(var(--veil),.44), transparent 32%);
}

/* ---- Encendido + asentamiento de la foto (solo con JS) ---- */
.js-anim .hero-media__img { animation: heroIgnite 2100ms cubic-bezier(.16,1,.3,1) both; }
@keyframes heroIgnite {
  from { transform: scale(1.14); filter: brightness(.42) saturate(.72); }
  to   { transform: scale(1);    filter: brightness(1)   saturate(1); }
}

/* ---- Entrada escalonada del contenido (solo con JS) ---- */
.js-anim .hero-content > * { animation: heroRise 900ms cubic-bezier(.16,1,.3,1) both; }
.js-anim .hero-eyebrow { animation-delay: .22s; }
.js-anim .hero h1      { animation-delay: .34s; animation-duration: 1050ms; }
.js-anim .hero-lead    { animation-delay: .54s; }
.js-anim .hero-date    { animation-delay: .68s; }
.js-anim .hero-place   { animation-delay: .78s; }
.js-anim .hero-buttons { animation-delay: .92s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- Parallax al hacer scroll (CSS puro, degrada a estático) ---- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media__parallax {
      animation: heroParallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 92vh;
      will-change: transform;   /* solo donde el parallax realmente corre */
    }
    @keyframes heroParallax { to { transform: translateY(7%); } }
  }
}

/* Micro-interacción: la flecha de enlace externo "se va" hacia el formulario */
.btn .ico-ext { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.btn-primary:hover .ico-ext,
.btn-outline:hover .ico-ext { transform: translate(2px, -2px); }

/* En móvil la entrada evita animar filter:blur (repaints costosos en gama
   media): conserva solo opacidad + desplazamiento, igual de coreografiada. */
@media (max-width: 760px) {
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Mission ---------- */
.mission { background: #fff; }
.mission-cards { max-width: 880px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 26px; }
.mission-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px 38px;
}
.mission-card h3 { font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; color: var(--ink); }
.mission-card p { color: var(--slate); font-size: 1rem; margin-bottom: 14px; }
.mission-card p:last-child { margin-bottom: 0; }
.mission-card strong { color: var(--ink); font-weight: 700; }

/* ---------- People grid (directores / ponentes) ---------- */
.people { background: #fff; }
.people-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 28px;
  max-width: 960px; margin: 46px auto 0;
}
.person { text-align: center; }
.person-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px; box-shadow: 0 8px 26px rgba(0,0,0,.12);
  background: #f1f1f1;
  transition: transform .4s var(--ease-out-quart), box-shadow .4s ease;
}
/* Hover: el retrato flota sobre el lienzo con sombra índigo más profunda
   (elevación ambiental; sin violeta, no es un CTA). Solo en dispositivos
   con puntero real, para no dejar el estado "pegado" en táctiles. */
@media (hover: hover) {
  .person:hover .person-photo {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(30,3,73,.20);
  }
}
.person-name { font-weight: 600; font-size: 1.05rem; margin: 16px 0 4px; color: var(--ink); }
.person-role { font-size: .85rem; color: var(--slate); line-height: 1.4; }

/* ---------- Organiza / Auspicia ---------- */
.partners { background: #fff; padding-bottom: 72px; }
.partners-block { text-align: center; padding: 28px 0; }
.partners-block + .partners-block { border-top: 1px solid var(--line); }
.partners-block h2 { font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); margin-bottom: 26px; }
.partners-logo { margin: 0 auto; max-height: 110px; width: auto; }
.partners-logo--sm { max-height: 84px; }

/* ---------- Lugar ---------- */
.place { background: var(--lavender); }
.place-map {
  max-width: 880px; margin: 36px auto 28px;
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(30,3,73,.12);
  background: #ddd;
}
.place-map iframe { display: block; width: 100%; height: 360px; border: 0; }
.place-info { text-align: center; }
.place-info p { font-weight: 700; color: var(--ink); margin-top: 8px; }

/* ---------- Aprendamos / CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-2) 100%);
  color: #fff; overflow: hidden;
}
.cta .container { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.cta-text h2 { font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.1; margin-bottom: 14px; }
.cta-text p { font-size: 1.15rem; opacity: .92; margin-bottom: 26px; }
.cta-art img { width: 320px; max-width: 38vw; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ico-ext { width: 15px; height: 15px; vertical-align: -2px; margin-left: 7px; }

/* ---------- Convocatoria expositores (banda) ---------- */
.callband { background: var(--lavender); padding: 66px 0; position: relative; overflow: hidden; }
.callband::before {
  content: ''; position: absolute; right: -90px; top: -90px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,45,235,.16), transparent 70%);
}
.callband .container {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 36px;
}
.callband-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--purple); margin-bottom: 14px;
}
/* Estado ABIERTA: el punto late porque el latido significa «actúa ahora».
   Sin uso mientras la convocatoria esté cerrada; se conserva para reutilizarlo
   en la próxima edición. */
.callband-eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
  box-shadow: 0 0 0 4px rgba(111,45,235,.18); animation: callband-pulse 2s infinite;
}
@keyframes callband-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Estado CERRADA: el latido se apaga y pasa a un check estático. El label baja
   a texto secundario (ya no es una llamada a la acción) y el violeta se
   concentra en el disco del check, que es lo que celebra el cierre. */
.callband-eyebrow--done { color: var(--slate); }
.callband-eyebrow--done .tick {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.callband-eyebrow--done .tick svg { width: 10px; height: 10px; }
.callband h2 { font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.12; color: var(--ink); margin-bottom: 12px; }
.callband h2 b { font-weight: 700; color: var(--purple); }
.callband p { color: var(--slate); font-size: 1.05rem; max-width: 560px; }
.callband-cta { white-space: nowrap; display: grid; gap: 12px; justify-items: center; }
.callband .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.callband .btn svg { width: 18px; height: 18px; flex: none; }

/* Salida viva bajo una acción cerrada: la sección no debe ser un callejón sin
   salida, así que el violeta se reserva para el único camino disponible. */
.link-next {
  display: inline-flex; align-items: center;
  color: var(--purple); font-weight: 700; font-size: .95rem; letter-spacing: .3px;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.link-next:hover { color: var(--purple-dark); }

/* ---------- Recordings (2024) ---------- */
.recordings { background: var(--lavender); }
.recordings-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start;
  max-width: 980px; margin: 40px auto 0;
}
.recordings-agenda p { color: var(--slate); margin-bottom: 14px; }
.recordings-agenda ul { margin: 22px 0; }
.recordings-agenda li { font-size: 1.1rem; padding: 7px 0; color: var(--ink); }
.recordings-agenda li a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--purple); padding-bottom: 1px; }
.recordings-agenda li a:hover { color: var(--purple); }
.recordings-videos { display: flex; flex-direction: column; gap: 16px; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(30,3,73,.18); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-feature { margin: 40px auto 0; max-width: 880px; }

/* ---------- Agenda: tarjetas de temas potenciales ----------
   Antes iban como estilo inline repetido 8 veces; extraídas a clase para
   poder darles tratamiento de dark mode (los inline ganaban por
   especificidad y dejaban el texto slate invisible sobre tarjeta clara). */
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 28px 0 32px;
}
.topic-card {
  background: #faf7ff;
  border: 1px solid #e6dafb;
  border-radius: 14px;
  padding: 24px 24px 22px;
  box-shadow: 0 4px 16px rgba(30,3,73,.05);
}
.topic-card__title {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 1.15rem; font-weight: 700; color: var(--indigo);
  margin: 0 0 12px;
}
.topic-num { color: var(--purple); font-weight: 800; }
.topic-list { margin: 0; padding-left: 20px; color: var(--slate); line-height: 1.5; list-style: disc; }

/* ---------- Gallery (2024) ---------- */
.gallery { background: #fff; }
.gallery-grid {
  column-count: 4; column-gap: 12px; margin-top: 40px;
}
.gallery-grid img {
  width: 100%; margin-bottom: 12px; border-radius: 10px; break-inside: avoid;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* ---------- Gallery bento (2025) ----------
   Mosaico de celdas de distinto tamaño: escenas amplias (audiencia, patio)
   en celdas grandes (2x2), retratos verticales en celdas altas (1x2) y el
   resto en celdas 1x1. object-fit:cover recorta al centro; como las fotos
   son 4:3 y las celdas resultan ~4:3, el recorte es mínimo. grid-auto-flow
   dense empaqueta los huecos (área total = 32 celdas = 8 filas de 4). */
.gallery-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 12px;
  margin-top: 40px;
}
.g-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  background: #f1f1f1;
}
.g-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease-out-quart);
}
.g-big  { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
@media (hover: hover) {
  .g-item:hover img { transform: scale(1.05); }
}

/* Entrada: fade + zoom escalonado (cascada rápida, ~40ms por foto). Gated
   tras .js-anim: sin JS las fotos quedan visibles. */
.gallery-bento .reveal {
  transition: opacity .35s ease, transform .35s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.js-anim .gallery-bento .reveal { opacity: 0; transform: scale(.96); }
.js-anim .gallery-bento .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .gallery-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 560px) {
  .gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; gap: 10px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--footer); color: rgba(255,255,255,.6); padding: 48px 0 32px; text-align: center; }
.footer-logo { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px; }
.footer-email { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: .95rem; margin-bottom: 8px; }
.footer-email:hover { color: #fff; }
.footer-email svg { width: 16px; height: 16px; }
.footer-org { font-size: .9rem; }
.footer-copy { margin-top: 22px; font-size: .8rem; color: rgba(255,255,255,.4); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: rgba(30,3,73,.97); color: #fff;
  display: none; align-items: center; justify-content: center; gap: 18px;
  padding: 16px 24px; flex-wrap: wrap; font-size: .9rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
.cookie-banner.show { display: flex; }
.cookie-banner a { color: #c9a9ff; text-decoration: underline; }
.cookie-banner button {
  background: var(--purple); color: #fff; border: 0; border-radius: 4px;
  padding: 9px 22px; font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.cookie-banner button:hover { background: var(--purple-dark); }

/* ---------- Legal page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 130px 24px 80px; }
.legal h1 { font-weight: 400; font-size: 2.2rem; margin-bottom: 8px; }
.legal h2 { font-weight: 600; font-size: 1.2rem; margin: 28px 0 10px; }
.legal p { color: var(--slate); margin-bottom: 14px; }
.legal a { color: var(--purple); text-decoration: underline; }

/* ---------- Reveal animation ----------
   Gated tras JS: sin JavaScript (o si el script falla) el contenido queda
   visible por defecto. Solo cuando main.js marca <html class="js-anim">
   arrancan ocultos para animar la entrada. Así ninguna sección —ni una
   conversión— desaparece si el JS no corre. */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal { opacity: 0; transform: translateY(24px); }
.js-anim .reveal.visible { opacity: 1; transform: none; }

/* Impresión y renderers que no hacen scroll: el contenido nunca debe quedar
   oculto tras el reveal. Se fuerza el estado visible (el IntersectionObserver
   no dispara sin scroll, y en papel no hay "entrada"). */
@media print {
  .reveal,
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .recordings-grid { grid-template-columns: 1fr; }
  .gallery-grid { column-count: 3; }
}
@media (max-width: 760px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 6px; align-items: flex-start;
    background: rgba(30,3,73,.98); color: #fff;
    padding: 16px 28px; display: none;
  }
  .nav-links.open { display: flex; }
  /* Objetivo táctil holgado (~44px) para el menú desplegable. */
  .nav-links a { padding: 11px 0; }
  .hamburger { display: flex; }
  .hero { min-height: 560px; }
  .cta .container { grid-template-columns: 1fr; text-align: center; }
  .cta-text { order: 2; }
  .cta-art { order: 1; }
  .cta-actions { justify-content: center; }
  .cta-art img { width: 220px; max-width: 60vw; margin: 0 auto; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .mission-card { padding: 26px 24px; }
  .callband .container { grid-template-columns: 1fr; }
  .callband-cta .btn { width: 100%; }
}
@media (max-width: 480px) {
  .people-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .gallery-grid { column-count: 2; }
  .section { padding: 56px 0; }
}

/* Directores (index): grilla de 3 columnas propia que SÍ respeta los
   breakpoints. Antes iba como estilo inline en el HTML y su especificidad
   ganaba a las media queries, dejando 3 columnas apretadas en móvil. */
.people-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 713px; }
@media (max-width: 620px) {
  .people-grid--3 { grid-template-columns: 1fr; max-width: 320px; }
}

/* Entrada de los directores: especializa el .reveal genérico solo para estos
   retratos. Además del fade+rise, entran ligeramente desenfocados y se
   "enfocan" al asentarse —la cámara fija la mirada en cada director—,
   escalonados de izquierda a derecha (--i, 0·90·180ms; bajo el techo de
   500ms). Encaja con el North Star "El Anfiteatro": la luz cae sobre las
   caras de quienes vivieron los casos. Sigue gated tras .js-anim: sin JS el
   contenido queda visible. */
.people-grid--3 .person.reveal {
  transition:
    opacity .7s ease,
    transform .7s var(--ease-out-quint),
    filter .7s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim .people-grid--3 .person.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  filter: blur(6px);
}
.js-anim .people-grid--3 .person.reveal.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ==========================================================================
   Dark mode — capa aditiva que respeta el SO (prefers-color-scheme).
   El tema claro queda intacto; aquí solo se invierten las secciones CLARAS.
   Se dejan como están: navbar, hero (foto oscura), CTA indigo, footer,
   cookie-banner y 404 (ya oscuros). La banda de auspiciadores se mantiene
   como "isla clara" porque los logos son oscuros sobre transparente.
   Ver ~/.claude/playbooks/dark-mode-playbook.md
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Superficies oscuras */
    --bg: #121212;
    --surface: #1c1c1c;
    --surface-2: #242424;
    --hairline: rgba(255, 255, 255, .12);
    --accent: #c9a6f2;            /* púrpura brillante para acentos de texto */

    /* Re-tokenización de las variables del tema claro hacia oscuro */
    --ink: #ffffff;              /* texto fuerte → blanco */
    --slate: #d8d8d8;            /* texto secundario → claro brillante (no gris medio) */
    --line: rgba(255, 255, 255, .12);
    --lavender: #18131f;         /* bandas lavanda → banda oscura con tinte violáceo */
    --focus: var(--accent);      /* anillo de foco → acento claro (Dark-Accent Rule) */
    --off-bg: rgba(255, 255, 255, .08);  /* acción cerrada → superficie apenas levantada */
    --off-ink: #8c9199;          /* paso del ramp Pizarra — 4.6:1 sobre esa superficie */
  }

  body { background: var(--bg); }

  /* Secciones con fondo #fff literal → oscuro */
  .mission,
  .people,
  .gallery { background: var(--bg); }

  /* Placeholders mientras cargan imágenes / iframe del mapa */
  .person-photo { background: var(--surface-2); }
  .place-map { background: var(--surface-2); }

  /* Acentos de texto → versión brillante del púrpura (nunca el tono medio) */
  .section-subtitle { color: var(--accent); }
  .recordings-agenda li a { border-bottom-color: var(--accent); }
  .recordings-agenda li a:hover { color: var(--accent); }
  .legal a { color: var(--accent); }

  /* Agenda: tarjetas de temas → superficie oscura (evita el texto slate
     claro invisible sobre la tarjeta clara). El .topic-list ya hereda
     --slate re-tokenizado a #d8d8d8, legible sobre fondo oscuro. */
  .topic-card { background: var(--surface-2); border-color: var(--hairline); box-shadow: none; }
  .topic-card__title { color: #fff; }
  .topic-num { color: var(--accent); }

  .callband-eyebrow { color: var(--accent); }
  .callband-eyebrow .dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(201,166,242,.16); }
  .callband h2 b { color: var(--accent); }

  /* Estado cerrado: el disco del check y la salida al registro pasan al acento
     claro; el check se dibuja en el tono de la banda para conservar contraste. */
  .callband-eyebrow--done { color: var(--slate); }
  .callband-eyebrow--done .tick { background: var(--accent); color: var(--lavender); }
  .link-next { color: var(--accent); }
  .link-next:hover { color: #fff; }

  /* Isla clara: logos de auspiciadores (oscuros sobre transparente) →
     mantener panel claro y su texto interior oscuro para no perderlos. */
  .partners { background: #fff; }
  .partners-block h2 { color: #1d2023; }
  .partners-block + .partners-block { border-top-color: #e2e2e2; }
}

/* ==========================================================================
   Reduced motion — respeta prefers-reduced-motion (accesibilidad vestibular).
   Se anulan el scroll suave, la entrada .reveal (todo queda visible) y el
   latido del punto de la convocatoria.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .callband-eyebrow .dot { animation: none; }

  /* Directores: la entrada con enfoque tiene mayor especificidad que la regla
     .reveal de arriba, así que se anula aquí explícitamente (si no, los
     retratos quedarían borrosos de forma permanente). El hover del retrato
     pierde el desplazamiento; conserva solo el cambio de sombra (feedback
     instantáneo, sin movimiento). */
  .js-anim .people-grid--3 .person.reveal {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .person-photo { transition: none; }
  .person:hover .person-photo { transform: none; }

  /* Galería bento (2025): sin cascada ni zoom; el hover no mueve la foto. */
  .js-anim .gallery-bento .reveal { opacity: 1; transform: none; transition: none; }
  .g-item img { transition: none; }
  .g-item:hover img { transform: none; }

  /* Hero cinemático → estado final, sin movimiento */
  .js-anim .hero-content > *,
  .js-anim .hero-media__img { animation: none !important; }
  .hero-content > * { opacity: 1; transform: none; filter: none; }
  .hero-media__img { transform: none; filter: none; }
  .hero-media__parallax { transform: none !important; }
  .btn .ico-ext { transition: none; }
  .btn-primary:hover .ico-ext,
  .btn-outline:hover .ico-ext { transform: none; }
}