/* =======================================================
   Fundación UMMEP — styles.css
   "Un mundo mejor es posible"
   =======================================================

   BREAKPOINTS GLOBALES (usados en este archivo):
     1320px → el nav pasa de barra horizontal a menú hamburguesa
     1200px → desktop grande → tablet landscape (grillas 3→2 columnas)
      900px → tablet portrait
      640px → mobile grande
      400px → mobile chico

   Cada página además tiene sus propios breakpoints en el <style>
   interno de su HTML (Nuestro_Trabajo.html, Programas_internacionales.html
   y Proyectos_de_coooperacion_al_desarrollo.html usan 768px; Contacto.html
   usa 640px; Novedades.html usa 900px/540px; Como_colaborar.html usa
   860px/560px; Novedad.html usa 1100px/860px; Radio_la_chispa.html usa
   760px). No se unificaron con los de acá porque cada uno fue ajustado a
   mano para el layout específico de esa página, y cambiar el valor sin
   poder revisar el resultado visualmente podría romper esos layouts.
   ======================================================= */

/* La fuente se movió al <head> del HTML (con preconnect + link) para que el
   navegador la descubra apenas empieza a parsear la página, en vez de recién
   descubrirla después de bajar y parsear todo este CSS. Ver index.html. */

/* -------------------------------------------------------
   1. Tokens
   ------------------------------------------------------- */
:root {
  /* color */
  --color-navy: #16234a;
  --color-navy-soft: #2b3a66;
  --color-blue: #2f5fa8;
  --color-salmon: #e3a191;
  --color-red: #df2c1f;
  --color-purple: #7c6bab;
  --color-green: #aed7b6;
  --color-cream: #f8f4ee;
  --color-sand: #f1ece2;
  --color-white: #ffffff;
  --color-line: rgba(22, 35, 74, 0.12);
  --color-gold: #e8b14d;
  --color-muted: rgba(22, 35, 74, 0.65);

  /* type */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Mulish", sans-serif;

  /* layout */
  --section-pad-x: clamp(1.25rem, 6vw, 6rem);
  --section-pad-y: clamp(2.5rem, 6vh, 4.5rem);
  --max-content: 1180px;

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* subtle wavy-line texture used behind sections 2 & 4 */
  --squiggle-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'><path d='M0,60 C40,15 80,105 120,60 C160,15 200,105 240,60 C280,15 320,105 360,60 C400,15 440,105 480,60' fill='none' stroke='%2316234a' stroke-opacity='0.07' stroke-width='2'/><path d='M0,90 C40,45 80,135 120,90 C160,45 200,135 240,90 C280,45 320,135 360,90 C400,45 440,135 480,90' fill='none' stroke='%2316234a' stroke-opacity='0.05' stroke-width='2'/></svg>");

  /* same texture, in white, for use on the navy sections of Recursos audiovisuales */
  --squiggle-bg-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'><path d='M0,60 C40,15 80,105 120,60 C160,15 200,105 240,60 C280,15 320,105 360,60 C400,15 440,105 480,60' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2'/><path d='M0,90 C40,45 80,135 120,90 C160,45 200,135 240,90 C280,45 320,135 360,90 C400,45 440,135 480,90' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2'/></svg>");

  /* wavy-line texture for the footer: grayscale + un acento dorado de la marca */
  --squiggle-bg-footer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'><path d='M0,30 C40,75 80,-15 120,30 C160,75 200,-15 240,30 C280,75 320,-15 360,30 C400,75 440,-15 480,30' fill='none' stroke='%23e8b14d' stroke-opacity='0.22' stroke-width='2.2'/><path d='M0,60 C40,15 80,105 120,60 C160,15 200,105 240,60 C280,15 320,105 360,60 C400,15 440,105 480,60' fill='none' stroke='%23555555' stroke-opacity='0.12' stroke-width='2'/><path d='M0,90 C40,45 80,135 120,90 C160,45 200,135 240,90 C280,45 320,135 360,90 C400,45 440,135 480,90' fill='none' stroke='%23999999' stroke-opacity='0.18' stroke-width='2'/></svg>");

  /* Tamaño unificado para títulos y banners */
  --title-font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
}

/* -------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-navy);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Refuerzo: si algún elemento intenta arrastrar/rebotar la página hacia
     los costados (p. ej. al arrastrar el carrusel 3D en Radio La Chispa),
     esto evita que el navegador "estire" el scroll horizontal. */
  overscroll-behavior-x: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  margin: 0;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 1rem;
}

:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
}

/* every top-level section: full viewport height, full width */
.container--1,
.container--2,
.container--4,
.container--5 {
  width: auto;
  min-height: 100vh;
  position: relative;
}

.container--3 {
  width: auto;
  position: relative;
}

.container--6 {
  width: auto;
  position: relative;
}

/* shared "eyebrow + title + intro text" pattern (sections 2 & 4) */
.section {
  min-height: 100vh;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: var(--section-pad-y) var(--section-pad-x);
  background-image: url("imagenes/fotos-finales/posterstock.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.section-title, .section-title * {
  font-size: var(--title-font-size);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.section-text {
  max-width: 760px!important; margin-left: auto!important; margin-right: auto!important;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem);
  color: var(--color-navy-soft);
}

.section-text strong {
  color: var(--color-navy);
  font-weight: 700;
}

/* =========================================================
   3. CONTAINER 1 — Hero
   ========================================================= */
.container--1 {
  height: 100vh;
  overflow: hidden;
  /* Crema de marca (el mismo tono que el resto de la página): así, el
     instante inicial antes de que aparezca la primera foto se funde
     con la página en vez de mostrar un bloque de color oscuro. */
  background: var(--color-cream);
  isolation: isolate;
}

/* Envoltorio de las fotos + olas del hero.
   Separado de .container--1 para que, en mobile, el logo pueda
   fluir DEBAJO de esta zona en vez de quedar absoluto y superponerse. */
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Hero: fases ────────────────────────────────────────────── */

/* Cada fase ocupa todo el hero y se superpone.
   La fase en sí NO se desvanece (nada de "opacity" acá): lo que se ve
   siempre detrás de una foto que todavía no apareció es directamente
   la fase anterior (que sigue ahí, sin moverse), nunca un color de
   fondo. El orden de apilamiento (qué fase queda arriba) lo maneja
   script.js con z-index, así siempre hay una sola animándose "hacia
   adentro" sobre la que ya estaba. */
.hero-phase {
  position: absolute;
  /* 30px de sobra a cada lado (igual que .hero-wave) para que el
     parallax horizontal de las fotos nunca deje ver el borde */
  top: 0;
  right: -30px;
  bottom: 0;
  left: -30px;
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.hero-phase.is-active {
  pointer-events: auto;
}

/* Cada columna dentro de la fase. Sin color de fondo propio, y con
   overflow:hidden: mientras la foto todavía está "cayendo" (por
   encima del recuadro, fuera de vista), lo que se ve es la fase
   anterior por transparencia — nunca un bloque de color. */
.hero-col {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  /* El brillo se aplica sobre la columna (no sobre la img), así no
     pisa el filter:grayscale que la animación de aparición controla
     sobre la imagen. */
  transition: filter 0.3s ease;
}

/* Hover: la foto se ve un poco más brillante */
.hero-col:hover {
  filter: brightness(1.12);
}

/* La imagen aparece rápido, ya en blanco y negro, y recién ahí — con
   un fundido más lento — el color va apareciendo. Usamos una
   animación por keyframes (en vez de transition) para que el efecto
   sea siempre determinístico: no depende de que el navegador llegue
   a "pintar" el estado inicial antes de animar. El acercamiento (Ken
   Burns) sigue siendo aparte ("scale", vía transition), mucho más
   lento, para el rato que la foto queda quieta en pantalla. */
@keyframes heroPhotoReveal {
  0% {
    opacity: 0;
    filter: grayscale(100%);
  }
  15% {
    opacity: 1;
    filter: grayscale(100%);
  }
  100% {
    opacity: 1;
    filter: grayscale(0%);
  }
}

.hero-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  filter: grayscale(100%);
  transition: scale 7s linear;
}

/* Imagen visible: dispara la animación (aparece rápido en B&N y se va
   coloreando) y arranca el zoom lento. */
.hero-col img.is-visible {
  scale: 1;
  animation: heroPhotoReveal 1.6s ease-in-out forwards;
}

/* ── Fase 3: solo una foto visible a la vez, pantalla completa ── */
.hero-phase--solo .hero-col {
  position: absolute;
  inset: 0;
  flex: none;
  width: 100%;
  z-index: 1;
}
/* la foto que está entrando queda arriba (z-index lo asigna script.js,
   incremental, para respetar el orden 1-2-3-4 dentro de esta fase) */

/* Wrapper de entrada de CADA ola por separado (uno para la blanca, uno
   para la salmón/roja, uno para la azul navy, y uno para las líneas).
   Cada wrapper es el que sube desde abajo al cargar la página — nunca
   la ola en sí — así el transform de esta animación no interfiere con
   el parallax de scroll/mouse que script.js sigue aplicando a cada ola
   por separado (son transforms de elementos distintos).

   El z-index queda en el wrapper (no alcanza con el de la ola de
   adentro) porque, al tener "transform" por la animación, cada wrapper
   arma su propio contexto de apilamiento — y tiene que quedar por
   encima de las fotos del hero (.hero-phase usa z-index 1 o 2).

   Orden de aparición pedido: primero la blanca (arriba de todo),
   después la salmón/roja (al medio), y por último la azul navy (abajo
   de todo) — con las líneas topográficas cerrando la secuencia.

   Para que se sienta fluido (una ola "empujando" a la siguiente) en vez
   de robótico, los arranques están MUY cerca entre sí (apenas 130-160ms)
   así cada ola todavía se está terminando de acomodar cuando ya empezó
   a subir la de atrás — nunca hay un hueco de silencio entre una y otra.
   El transform va acompañado de un fade breve (opacity) para que el
   "aterrizaje" sea suave y no un golpe seco. */
.hero-wave-rise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: heroWaveRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes heroWaveRise {
  0% {
    transform: translateY(65%);
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 1ra: blanca/crema — arriba de todo */
.hero-wave-rise--front {
  z-index: 12;
  animation-delay: 0.25s;
}

/* 2da: salmón/rosa (roja) — al medio */
.hero-wave-rise--back {
  z-index: 11;
  animation-delay: 0.4s;
}

/* 3ra: azul navy — abajo de todo */
.hero-wave-rise--far {
  z-index: 10;
  animation-delay: 0.53s;
}

/* 4ta: líneas topográficas — solo un fade suave (sin subir), para que
   no se sienta como una cuarta "ola" repitiendo el mismo movimiento */
.hero-wave-rise--lines {
  z-index: 13;
  animation: heroLinesFadeIn 0.5s ease-out both;
  animation-delay: 0.75s;
}

@keyframes heroLinesFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* decorative waves — dos capas (haikei), ancladas al fondo del hero.
   z-index bien por encima de las fases de fotos (que usan 1 y 2, fijo)
   para que las waves queden SIEMPRE al frente, pase lo que pase con
   la rotación de fotos. */
.hero-wave {
  position: absolute;
  /* ancho de sobra (60px de cada lado) para que el parallax horizontal
     del mouse nunca deje ver el borde de la ola; el overflow: hidden
     de .container--1 recorta ese excedente */
  left: -60px;
  bottom: -2px;
  width: calc(100% + 120px);
  /* la altura ocupa el tercio inferior del hero para que las olas sean generosas */
  height: clamp(180px, 38vh, 340px);
  pointer-events: none;
  /* el translate3d lo maneja script.js (parallax al scrollear/mouse) */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave {
    transform: none !important;
  }
}

/* ola más lejana: navy semitransparente, la más alta y más atrás */
.hero-wave--far {
  height: clamp(240px, 70vh, 820px);
  opacity: 0.5;
}

/* ola trasera: salmón/roja, semitransparente */
.hero-wave--back {
  height: clamp(208px, 67vh, 720px);
  opacity: 0.85;
}

/* ola delantera: blanca — la más baja de las tres, alta como para
   cubrir por detrás el logo */
.hero-wave--front {
  z-index: 12;
  height: clamp(208px, 80vh, 716px);
}

/* líneas topográficas decorativas (PNG) — van POR ENCIMA de las tres
   olas y de las fotos, pegadas al mismo borde inferior. Es una imagen
   (no SVG), pero se ajusta igual que las olas: object-fit: fill la
   ESTIRA para ocupar todo el ancho/alto sin recortar nada. A diferencia
   de las otras capas, esta NO tiene colchón lateral ni se mueve en el
   eje X con el mouse (en script.js su velocidadX es 0): el dibujo llega
   hasta el borde real del archivo, así que cualquier desplazamiento
   horizontal — por chico que sea — terminaba mostrando un corte de un
   lado. Se queda fija en 100% de ancho, siempre completa. */
.hero-wave--lines {
  left: 0;
  width: 100%;
  z-index: 13;
  height: clamp(180px, 42vh, 380px);
  object-fit: fill;
  opacity: 0.9;
}

.hero-wave__fill {
  fill: var(--color-salmon);
}
.hero-wave__lines {
  stroke: var(--color-navy);
}

.hero-logo {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 28px);
  transform: translateX(-50%);
  z-index: 14;
  width: clamp(280px, 20vw, 400px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
  /* Fade in de transparente a nítido: arranca cuando ya terminó toda
     la secuencia de olas (blanca → roja → azul → líneas), así el logo
     es lo último en aparecer. */
  opacity: 0;
  animation: heroLogoFadeIn 0.9s ease-out both;
  animation-delay: 1.15s;
}

/* El logo se compone de tres piezas: brand (fija), tagline (parpadea)
   y mundo (gira) */
.hero-logo {
  overflow: visible;
}

.hero-logo img:not(.hero-logo__mundo):not(.hero-logo__tagline) {
  display: block;
  width: 100%;
  height: auto;
}

.hero-logo__brand,
.hero-logo__tagline,
.hero-logo__mundo,
.hero-logo__full {
  display: block;
  width: 100%;
  height: auto;
}

/* El mundo (aro de personas + mapa, todo junto) se superpone exacto
   sobre el brand (mismo lienzo 380×145) y gira PLANO, de frente al
   visitante, como una rueda de volante — no en 3D ni de costado. */
.hero-logo__mundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 17.6% 55%;
  /* La animación está siempre "puesta" pero pausada: al sacar el mouse
     se congela en el ángulo actual en vez de resetear a 0°. */
  animation: heroWorldSpin 48s linear infinite;
  animation-play-state: paused;
  cursor: pointer;
}

.hero-logo:hover .hero-logo__mundo,
.hero-logo:focus-within .hero-logo__mundo {
  animation-play-state: running;
}

/* El tagline ("un mundo mejor es posible") se superpone exacto también.
   Antes parpadeaba junto con el giro del mundo al hacer hover; ahora
   queda siempre fijo y visible. */
.hero-logo__tagline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Hero: cuadrícula mobile (6×6 fotos B&N ↔ color) ──────────────
   Oculta por default (desktop/tablet usan el hero animado de arriba).
   Se activa por completo dentro de @media (max-width: 640px), donde
   además se ocultan .hero-visual y .hero-logo para que la cuadrícula
   sea todo el hero en mobile. */
.hero-mobile-grid {
  display: none;
}

@keyframes heroGridSwap {
  0%,
  100% {
    filter: grayscale(100%);
  }
  50% {
    filter: grayscale(0%);
  }
}

@keyframes heroLogoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroWorldSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* =========================================================
   4. CONTAINER 2 — Programas internacionalistas de Cuba
   ========================================================= */
.container--2 {
  /* fondo sólido: mismo tono que la ola "blanca" (crema) del hero */
  background-image: none;
  background-color: var(--color-cream);
  background-attachment: scroll;
}

.program-cards {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 5rem);
  width: 100%;
}

.program-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
}

.program-card__logo {
  width: clamp(144px, 18vw, 150px);
  height: clamp(70px, 18vw, 150px);
  object-fit: contain;
}

.program-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy);
}

/* buttons */
.btn {
  display: inline-block;
  padding: 0.65rem 1.8rem;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    filter 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(22, 35, 74, 0.22);
  filter: brightness(1.05);
}
.btn:active {
  transform: translateY(-1px);
}

.btn--navy {
  background: var(--color-navy);
}
.btn--red {
  background: var(--color-red);
}
.btn--purple {
  background: var(--color-purple);
}
.btn--green {
  background: var(--color-green);
}
.btn--gold {
  background: var(--color-gold);
  color: var(--color-navy);
}

/* =========================================================
   5. CONTAINER 3 — Barra de impacto
   ========================================================= */
.container--3 {
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1em;
  min-height: 140px;
  overflow-x: hidden;
}

.impacto__intro {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
  color: var(--color-white);
  margin: 0.2rem;
}

.impacto__stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 5rem);
  width: 100%;
}

.stat {
  position: relative;
  text-align: center;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  flex-shrink: 1;
}

.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.5rem, 2vw, 2.5rem));
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 1.5vw, 4.6rem);
  line-height: 1;
}

.stat__label {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.82rem, 0.7rem + 0.4vw, 1rem);
  max-width: 14ch;
  margin-inline: auto;
}

/* =========================================================
   6. CONTAINER 4 — Proyectos de cooperación activos
   ========================================================= */
.container--4 {
  /* uses .section */
}

.program-card__logo--circle {
  border-radius: 50%;
}

/* =========================================================
   7. CONTAINER 5 — Novedades
   ========================================================= */
.container--5 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--color-sand);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--max-content);
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 50%;
  box-shadow: 0 14px 30px rgba(22, 35, 74, 0.12);
  filter: grayscale(100%);
  transition: 0.3s ease;
}

.news-card img:hover {
  filter: grayscale(0);
  opacity: 100%;
}

.news-card__quote {
  font-style: italic;
  text-align: center;
  font-size: 0.98rem;
  color: var(--color-navy-soft);
}

/* =========================================================
   8. CONTAINER 6 — Footer
   ========================================================= */
.container--6 {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: clamp(1rem, 2vw, 1.5rem) var(--section-pad-x);
  background-color: var(--color-white);
  background-image: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
}

.footer-col h3 {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.social-icons a:hover {
  background: var(--color-red);
  transform: translateY(-2px);
}

.social-icons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-icons i {
  font-size: 17px;
  line-height: 1;
}

.footer-col address {
  font-style: normal;
  line-height: 1.8;
}

.footer-col address a {
  text-decoration: underline;
}
.footer-col address a:hover {
  color: #df2c1f!important;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row--full {
  grid-template-columns: 1fr;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-navy-soft);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border: none;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  padding: 0.4rem 0.1rem;
  color: var(--color-navy);
}

.contact-form textarea {
  resize: vertical;
  min-height: 70px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--color-navy);
}

.contact-form .btn {
  align-self: flex-start;
  border: none;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-top: 0.5rem;
}

.footer-logo img {
  width: 200px;
  height: 9cqi8;
}

.footer-logo span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-navy);
}

/* =========================================================
   Footer — columnas cortas (Redes / Contacto)
   ---------------------------------------------------------
   En desktop las 3 columnas del footer están en la misma fila
   de grid, y esa fila mide lo que mide la más alta (el
   formulario). Antes se tapaba el hueco resultante debajo de
   Redes y Contacto con un mosaico de fotos inyectado por JS;
   ahora en cambio centramos verticalmente el contenido de esas
   dos columnas dentro de su fila, así el espacio libre se
   reparte arriba/abajo de forma pareja en vez de quedar como
   un bloque vacío abajo. Solución CSS pura, sin JS ni imágenes
   extra que mantener.
   ========================================================= */
.footer-col--social,
.footer-col--contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================================================
   8b. NOVEDADES — blur-hover grid (index.html)
   ========================================================= */
.news-blur-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 2vw, 2rem);
  width: 100%;
  max-width: var(--max-content);
  /* nunca colapsa: las 3 columnas se achican proporcionalmente */
  min-width: 0;
}

.news-blur-item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 0.75rem -0.1rem rgba(22, 35, 74, 0.18);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-white);
}

.news-blur-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: blur(0px);
  transition: filter 0.5s ease-in-out;
}

/* el efecto clave: al hacer hover sobre el grid, todo se desenfoca
   excepto el item que está siendo hovereado */
.news-blur-grid:hover .news-blur-item:not(:hover) .news-blur-img {
  filter: blur(4px);
}

.news-blur-caption {
  padding: 0 1rem 1rem;
  font-style: italic;
  font-size: 0.93rem;
  color: var(--color-navy-soft);
  line-height: 1.55;
  max-height: calc(1.55em * 3 + 1rem);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* =========================================================
   9. Página — Recursos audiovisuales
   ========================================================= */

/* --- 9.0 Zona con fondo de tiritas de video ---
   Envuelve el título (container--1) y las 3 secciones de video
   (entrevistas / documentales / charlas). El mosaico de tiritas se
   desplaza con el scroll para crear un efecto de profundidad, y cada
   sección se ve como una tarjeta blanca flotando encima (.ra-video-panel).
   */
.ra-filmstrip-zone {
  --ra-film-offset: 0px;
  position: relative;
  background: var(--color-navy);
  overflow: hidden;
  isolation: isolate;
}

/* Mosaico de tiras de película (imagenes/fotos-finales/audiovisuales/tirasdevideo-sprite.png) de fondo. Ahora usamos capas reales
   para que una tira quede fija y la otra se mueva con el scroll. */
.ra-filmstrip-layer {
  position: absolute;
  inset: -10% 0;
  background-image: url("imagenes/fotos-finales/audiovisuales/tirasdevideo-sprite.png");
  background-repeat: repeat;
  background-size: calc(200px + 5px) 416px;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.ra-filmstrip-layer--fixed {
  background-position: 0 50%;
  opacity: 0.9;
  filter: blur(2px);
}

.ra-filmstrip-layer--moving {
  opacity: 1;
  position: absolute;
  inset: -20% 0;
  background-position: 100px 50%;
  transform: translate3d(0, var(--ra-film-offset, 0px), 0);
  will-change: transform, background-position;
  filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
  .ra-filmstrip-zone {
    --ra-film-offset: 0px;
  }
}

/* --- 9.1 Título --- */
.RecursosAudiovisuales-container--1 {
  position: relative;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--section-pad-y) var(--section-pad-x);
}

.ra-page-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--title-font-size);
  color: var(--color-white);
}

/* --- 9.2 Secciones de video (entrevistas / documentales / charlas) ---
   Las 3 viven ahora DENTRO de una única tarjeta blanca (.ra-video-panel)
   que flota sobre el mosaico de tiritas de .ra-filmstrip-zone. Al ser
   una sola tarjeta continua, ya no queda espacio entre secciones; cada
   una es un .ra-video-block separado apenas por un filete sutil. */
.ra-video-panel {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * var(--section-pad-x));
  max-width: calc(var(--max-content) + 5rem);
  margin: 0 auto var(--section-pad-y);
  background: var(--color-white);
  background-image: var(--squiggle-bg);
  background-size: 480px;
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(10, 18, 40, 0.35);
  overflow: hidden;
}

/* En pantallas grandes angostamos un poco el panel para dejar ver más
   tira de película a cada lado (si no, el panel casi tapa todo el ancho
   y el efecto queda escondido en una rendija). */
@media (min-width: 1300px) {
  .ra-video-panel {
    max-width: calc(var(--max-content) + 1rem);
  }
}

.ra-video-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}

.ra-video-block + .ra-video-block {
  border-top: 1px solid var(--color-line);
}

.ra-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: var(--max-content);
}

.ra-video-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

/* --- Botón "Ver playlist completa" debajo de cada grilla de videos --- */
.ra-playlist-link-wrap {
  width: 100%;
  max-width: var(--max-content);
  display: flex;
  justify-content: center;
  margin-top: -1rem;
}

.ra-playlist-link {
  display: inline-block;
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
  border: 2px solid var(--color-navy);
  background: transparent;
  color: var(--color-navy);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.ra-playlist-link:hover {
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
}

.ra-video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-navy-soft);
  box-shadow: 0 10px 22px rgba(22, 35, 74, 0.16);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.ra-video-card__thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(22, 35, 74, 0.22);
}

.ra-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estado de carga: cuadrado azul con "Cargando video..." mientras se
   espera la respuesta de YouTube (o si la consulta llega a fallar). */
.ra-video-card__thumb--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
}

.ra-loading-label {
  display: inline-flex;
  align-items: baseline;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.ra-loading-dots {
  display: inline-block;
  min-width: 1.1em;
  text-align: left;
}

.ra-video-card__duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.75);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.ra-video-card__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 35%;
  background: var(--color-red);
}

.ra-video-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.ra-video-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-navy);
  line-height: 1.35;
}

.ra-video-card__menu {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--color-navy);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  transition: color 0.2s var(--ease);
}

.ra-video-card__menu:hover {
  color: var(--color-red);
}

.ra-video-card__meta {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.ra-watermark {
  position: absolute;
  left: var(--section-pad-x);
  bottom: 1rem;
  width: clamp(90px, 10vw, 130px);
  opacity: 0.14;
  pointer-events: none;
}

/* --- 9.3 Podcast --- */
.ra-podcast-section {
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3rem);
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--color-sand);
}

.ra-podcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  width: 100%;
  max-width: var(--max-content);
}

.ra-podcast-embed {
  width: 100%;
  max-width: var(--max-content);
}

.ra-podcast-embed iframe {
  display: block;
  width: 100%;
}

.ra-podcast-card {
  position: relative;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--color-navy);
  border-radius: 14px;
  padding: 1rem 3.6rem 1rem 1rem;
  color: var(--color-white);
}

.ra-podcast-card__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-navy-soft);
}

.ra-podcast-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ra-podcast-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ra-podcast-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}

.ra-podcast-card__title span {
  display: block;
  font-weight: 500;
  opacity: 0.85;
}

.ra-podcast-card__source {
  font-size: 0.76rem;
  color: var(--color-salmon);
}

.ra-podcast-card__desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
}

.ra-podcast-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.ra-podcast-card__date {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
}

.ra-podcast-card__actions {
  display: flex;
  gap: 0.5rem;
}

.ra-podcast-card__actions button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem;
  transition: color 0.2s var(--ease);
}

.ra-podcast-card__actions button:hover {
  color: var(--color-white);
}

.ra-podcast-card__play {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    background 0.2s var(--ease);
}

.ra-podcast-card__play:hover {
  transform: translateY(-50%) scale(1.08);
  background: var(--color-salmon);
}

/* --- 9.4 Colaboración / Donación ---
   Banner unificado: fondo azul marino sólido + onditas blancas en
   movimiento (mismo patrón que el header de Radio La Chispa,
   --squiggle-bg-light, pero animado con un scroll horizontal suave). */
.ra-donate-banner,
.novadades-container--3,
.Pagina7-Container--2,
.PrgogramasInternacionales-container--3,
.ProyectosdeCoopalDesarrollo-container--5 {
  position: relative;
  min-height: 140px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(2rem, 4vh, 3rem) clamp(2rem, 6vw, 5rem);
  background-color: var(--color-navy);
  background-image: var(--squiggle-bg-light);
  background-repeat: repeat;
  background-size: 480px;
  /* centrado vertical: así el patrón de olas queda a la misma altura
     relativa (a mitad del banner) sin importar cuánto mida el banner
     de alto en cada página — antes quedaba anclado siempre arriba
     (posición Y en 0), por eso en banners más altos o más bajos que el
     resto (como el de Radio La Chispa) se veía descentrado. */
  background-position: 0 center;
  animation: ra-wave-scroll 22s linear infinite;
  overflow: hidden;
}

@keyframes ra-wave-scroll {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -480px center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ra-donate-banner,
  .novadades-container--3,
  .Pagina7-Container--2,
  .PrgogramasInternacionales-container--3,
  .ProyectosdeCoopalDesarrollo-container--5 {
    animation: none;
  }
}

.ra-donate-banner__text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--title-font-size);
  color: var(--color-white);
  max-width: 32ch;
}

.ra-donate-banner__btn {
  flex: 0 0 auto;
}

.banner-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.9rem + 1.5vw, 1.75rem);
  color: var(--color-white);
  max-width: 640px;
  line-height: 1.3;
  margin: 0;
}

.banner-btn {
  flex-shrink: 0;
  display: inline-block;
  background: transparent;
  border: 2.5px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
  z-index: 1;
}

.banner-btn:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

/* =========================================================
   10. Responsive — sistema de breakpoints
   
   Breakpoints:
     1200px  → desktop grande → tablet landscape
      900px  → tablet portrait
      640px  → mobile grande
      400px  → mobile chico
   ========================================================= */

/* ── 1200px: desktop grande → tablet landscape ── */
@media (max-width: 1200px) {
  /* Grilla de noticias: 3 → 2 columnas */
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grilla de videos: 3 → 2 columnas */
  .ra-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Podcasts: 3 → 2 columnas */
  .ra-podcast-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 3 → 2 columnas (social+contacto / formulario) */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col--form {
    grid-column: 1 / -1;
  }

  /* Programas: imagen más pequeña */
  .programa-split__foto img {
    width: 100%;
    height: auto;
    max-height: 420px;
  }

  /* Proyectos: grilla lado a lado se ajusta */
  .proyecto-split {
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* ── 900px: tablet portrait ── */
@media (max-width: 900px) and (min-width: 641px) {
  /* Hero: 70 vh en tablet portrait — entre el full desktop y el 50 vh mobile */
  .container--1 {
    height: 70vh;
    height: 70svh;
    min-height: 380px;
  }

  /* Olas: mismo esquema que desktop (roja +10px, azul +20px sobre la
     blanca), proporcional a los 70vh del tablet */
  .hero-wave--far {
    height: clamp(160px, 48vh, 400px);
  }
  .hero-wave--back {
    height: clamp(140px, 42vh, 360px);
  }
  .hero-wave--front {
    height: clamp(120px, 36vh, 300px);
  }
  .hero-wave--lines {
    height: clamp(130px, 40vh, 340px);
  }

  /* Logo: en tablet portrait el hero es más alto (70vh) y el logo
     quedaba pegado casi arriba de las olas, dejando mucho espacio en
     blanco abajo — lo bajamos un poco más cerca del borde inferior. */
  .hero-logo {
    bottom: clamp(-6px, 0.5vh, 8px);
  }
}

/* ── 900px: tablet portrait ── */
@media (max-width: 900px) {
  /* Stats: quitar separadores verticales */
  .stat + .stat::before {
    display: none;
  }

  /* Container 3 (stats bar): nowrap, sin scroll */
  .container--3 {
    padding: 0.5rem var(--section-pad-x);
    overflow-x: hidden;
  }

  .impacto__stats {
    flex-wrap: nowrap;
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .stat {
    padding: 0.5rem clamp(0.25rem, 1vw, 0.75rem);
    flex-shrink: 1;
  }

  .stat__number {
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .stat__label {
    font-size: clamp(0.55rem, 1.8vw, 0.7rem);
    margin-top: 0.3rem;
  }

  /* Footer: todo en una columna */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-col--form {
    grid-column: auto;
  }

  /* Formulario de contacto: inputs en 1 columna */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Noticias: 1 columna */
  .news-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  /* Videos: 1 columna */
  .ra-video-grid {
    grid-template-columns: 1fr;
    max-width: 580px;
  }

  /* Podcasts: 1 columna */
  .ra-podcast-grid {
    grid-template-columns: 1fr;
    max-width: 580px;
  }

  /* Programas internacionales: split → columna única */
  .programa-split--text-left,
  .programa-split--text-right {
    grid-template-columns: 1fr;
  }
  .programa-split--text-right .programa-split__foto {
    order: -1;
  }
  .programa-split__foto img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: cover;
  }

  /* Proyectos de cooperación: split → columna única */
  .proyecto-split {
    grid-template-columns: 1fr !important;
  }
  .proyecto-split .proyecto-foto {
    max-height: 320px;
    width: 100%;
    object-fit: cover;
  }

  /* Nuestro Trabajo — Container 1: grid → columna única */
  .Pagina7-Container--1 {
    grid-template-columns: 1fr !important;
  }
  .nt-photo {
    min-height: 320px;
    max-height: 420px;
  }
  .nt-photo img {
    max-height: 420px;
  }

  /* Equipo grid: 2 → 1 columna */
  .equipo-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px;
  }

  /* Radio La Chispa: sidebar → columna única */
  .chispa-about__inner {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .chispa-about__sidebar {
    align-items: center;
  }

  /* Chispa programs grid */
  .chispa-programs__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Banner donar */
  .ra-donate-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Pagina7 banner */
  .Pagina7-Container--2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding-right: var(--section-pad-x) !important;
  }
  .Pagina7-Container--2::after {
    display: none;
  }

  /* Novedades: siempre 4 columnas, gap más chico */
  .novedades-grid {
    gap: clamp(0.4rem, 1.5vw, 1rem) !important;
  }

  /* Instituciones: logos más pequeños */
  .instituciones-logos img,
  .institucion-item img {
    max-width: 100px;
  }
}

/* ── 640px: mobile grande ── */
@media (max-width: 640px) {
  /* Hero: el contenedor pasa a altura libre; quien define
     los 50vh ahora es .hero-visual (ver más abajo), así el
     logo puede fluir debajo de las fotos en vez de superponerse */
  .container--1 {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .hero-visual {
    position: relative;
    overflow: hidden;
    height: 50vh;
    height: 50svh; /* unidad dinámica en navegadores modernos */
    min-height: 260px; /* mínimo razonable en pantallas muy pequeñas */
  }

  /* Hero: mostrar las 3 columnas en fase 1 (no ocultarlas) */
  .hero-phase:not(.hero-phase--solo) .hero-col:nth-child(3) {
    display: flex;
  }
  /* Ocultar solo la 4ta columna de la fase 2 */
  .hero-phase:not(.hero-phase--solo) .hero-col:nth-child(4) {
    display: none;
  }

  /* Hero waves: escalar para los 50 vh del mobile */
  .hero-wave--far {
    height: clamp(120px, 36vh, 200px);
  }
  .hero-wave--back {
    height: clamp(100px, 32vh, 175px);
  }
  .hero-wave--front {
    height: clamp(80px, 26vh, 140px);
  }
  .hero-wave--lines {
    height: clamp(90px, 30vh, 160px);
  }

  /* Logo del hero: en mobile se posiciona fuera del hero con fondo crema */
  .hero-logo {
    width: clamp(190px, 56vw, 230px);
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin-inline: auto;
    margin-top: 0;
    padding: 1rem 0 1.25rem;
    background: var(--color-cream);
    /* extender el fondo crema a todo el ancho */
    box-shadow: 0 0 0 100vw var(--color-cream);
    clip-path: inset(0 -100vw);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
  }

  /* inset:0 se ancla al borde del padding (no del contenido), así que
     sin este ajuste el mundo y el tagline quedan más altos que el brand
     por el padding vertical de arriba (1rem) y abajo (1.25rem) → se ve
     estirado. Usando top/bottom en vez de inset, el alto se calcula
     exactamente entre esos dos bordes, igual que el brand. */
  .hero-logo__mundo,
  .hero-logo__tagline {
    top: 1rem;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    height: auto;
  }

  /* ── Hero mobile: se reemplaza el carrusel de fotos + olas por la
     cuadrícula 6×6; el logo se mantiene, debajo de la cuadrícula ──── */
  .hero-visual {
    display: none;
  }

  .hero-mobile-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 2px;
    width: 100%;
  }

  .hero-mobile-grid__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cream);
  }

  .hero-mobile-grid__cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* arranca en B&N; la animación se encarga de ir y volver a color */
    filter: grayscale(100%);
    animation: heroGridSwap 6s ease-in-out infinite;
    /* le avisamos al navegador que filter va a cambiar, para que intente
       resolverlo en la capa de composición en vez de repintar en el
       hilo principal en cada frame */
    will-change: filter;
  }

  /* tablero de ajedrez: el grupo "b" arranca medio ciclo desfasado del
     grupo "a", así mientras unas celdas están en color las de al lado
     están en B&N — y se van intercambiando solas cada 3s */
  .hero-mobile-grid__cell--b img {
    animation-delay: 3s;
  }

  /* Pausa la animación cuando la cuadrícula sale del viewport (scroll)
     o cuando la pestaña pasa a segundo plano. La clase la agrega
     script.js con un IntersectionObserver + Page Visibility API, para
     no gastar batería/CPU animando algo que nadie está viendo. */
  .hero-mobile-grid.is-paused .hero-mobile-grid__cell img {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-mobile-grid__cell img {
      animation: none;
      filter: grayscale(100%);
      will-change: auto;
    }
    .hero-mobile-grid__cell--b img {
      filter: grayscale(0%);
    }
  }

  /* Reducir min-height de las secciones en mobile */
  .section,
  .container--3,
  .container--5,
  .container--6 {
    min-height: auto;
    padding-top: 1rem;
    padding-bottom: 3rem;
  }

  /* Container 3 (stats bar): en mobile chico, space-around; si no
     entran, caen a una segunda fila en vez de achicarse demasiado */
  .container--3 {
    padding: 0.75rem var(--section-pad-x);
    overflow-x: visible;
  }

  .impacto__stats {
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 1rem;
    column-gap: clamp(0.75rem, 4vw, 2rem);
  }

  .stat {
    padding: 0.25rem clamp(0.5rem, 2vw, 1rem);
    flex: 0 1 140px;
    flex-shrink: 1;
  }

  .stat__number {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }

  .stat__label {
    font-size: clamp(0.6rem, 2vw, 0.72rem);
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
  }

  /* Novedades: imágenes más compactas */
  .news-card img {
    aspect-ratio: 16 / 10;
    border-width: 5px;
  }

  .news-card__quote {
    font-size: 0.85rem;
  }

  /* Cards de programa: gap más chico, botón más compacto */
  .program-cards {
    gap: clamp(0.5rem, 3vw, 1.5rem);
  }

  .program-card .btn {
    padding: 0.45rem 0.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  /* Noticias: 1 columna, centrado */
  .news-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Novedades blur grid: sigue en 3 columnas en mobile, solo se achica el texto */
  .news-blur-grid {
    gap: 0.4rem;
  }

  .news-blur-caption {
    font-size: 0.72rem;
    padding: 0 0.5rem 0.6rem;
    line-height: 1.35;
    max-height: calc(1.35em * 3 + 0.6rem);
  }

  .news-blur-item {
    border-radius: 0.5rem;
  }

  /* Novedades: siempre 4 columnas, gap mínimo en mobile */
  .novedades-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Videos: 1 columna */
  .ra-video-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  /* Podcast cards: apilar verticalmente */
  .ra-podcast-grid {
    grid-template-columns: 1fr;
  }
  .ra-podcast-card {
    flex-direction: column;
    padding: 1rem;
  }
  .ra-podcast-card__play {
    position: static;
    transform: none;
    align-self: flex-start;
    margin-top: 0.5rem;
  }

  /* Banner donar: full width */
  .ra-donate-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem var(--section-pad-x);
  }
  .banner-btn {
    width: 100%;
    text-align: center;
  }

  /* ── Tipografía: títulos más compactos en mobile ── */

  /* Tracking reducido en todos los títulos uppercase */
  .section-title, .section-title * {
    letter-spacing: 0.06em;
    font-size: var(--title-font-size);
  }

  /* Títulos de página de cada subpágina (headers rojos/navy) */
  .contacto-header__title,
  .ra-page-title,
  .novedades-titulo,
  .pi-header h1,
  .pcd-titulo,
  .chispa-header__title {
    letter-spacing: 0.06em;
    font-size: var(--title-font-size);
  }

  /* Texto de los banners donar */
  .ra-donate-banner__text {
    font-size: var(--title-font-size);
  }

  /* Contacto: form en 1 columna (ya cubierto por .form-row pero asegurar) */
  .contacto-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer: compactar */
  .footer-logo img {
    width: 140px;
  }

  .container--6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Ocultar el formulario del footer en mobile (ya existe en la página Contacto) */
  .footer-col--form {
    display: none;
  }

  .footer-col h3 {
    margin-bottom: 0.35rem;
  }

  .social-icons {
    gap: 0.45rem;
  }

  .social-icons a {
    width: 32px;
    height: 32px;
  }

  .social-icons svg {
    width: 15px;
    height: 15px;
  }

  .footer-logo {
    padding-top: 0.25rem;
  }

  /* Chispa programs: 1 columna */
  .chispa-programs__grid {
    grid-template-columns: 1fr !important;
    max-width: 400px;
    margin-inline: auto;
  }

  /* Radio live player */
  .chispa-live__player {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  /* Pagina 7 banner: compactar botón */
  .Pagina7-Container--2 .banner-btn {
    width: 100%;
    text-align: center;
  }

  /* Instituciones: achicar logos en mobile */
  .instituciones-logos {
    gap: 1.25rem !important;
  }
  .institucion-item img {
    max-width: 80px;
  }

  /* ProgramasInternacionales container 3 banner */
  .PrgogramasInternacionales-container--3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .PrgogramasInternacionales-container--3 .banner-btn {
    width: 100%;
    text-align: center;
  }

  /* ProyectosCooperacion banner */
  .ProyectosdeCoopalDesarrollo-container--5 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .ProyectosdeCoopalDesarrollo-container--5 .banner-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── 400px: mobile chico ── */
@media (max-width: 400px) {
  /* Reducir padding global */
  :root {
    --section-pad-x: 1rem;
  }

  /* Logo nav más pequeño */
  .site-nav__logo img {
    height: 28px;
  }

  /* Hero logo: bien grande también en celulares chicos */
  .hero-logo {
    width: clamp(190px, 58vw, 230px);
  }

  /* Stats: aún más pequeño */
  .stat__number {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  }
  .stat__label {
    font-size: clamp(0.55rem, 1.8vw, 0.65rem);
  }

  /* Video card title: reducir */
  .ra-video-card__title {
    font-size: 0.88rem;
  }

  /* Podcast card: reducir padding */
  .ra-podcast-card {
    padding: 0.75rem;
  }

  /* Formulario contacto: footer del form en columna */
  .contacto-form__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .btn--outline-red {
    width: 100%;
    text-align: center;
  }

  /* Chispa about logo más chico */
  .chispa-about__logo {
    width: 140px !important;
  }

  /* Footer form: botón full width */
  .contact-form .btn {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   11. Motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-col img,
  .hero-phase,
  .hero-col,
  .hero-wave-rise {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    translate: 0 !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  /* El logo sí necesita conservar su transform (translateX(-50%) lo
     centra horizontalmente): solo le apagamos la animación de fade-in. */
  .hero-logo {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero-logo__color {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .hero-logo__mundo,
  .hero-logo__tagline {
    animation: none !important;
    opacity: 1 !important;
  }
  .btn,
  .social-icons a {
    transition: none;
  }
  /* Scroll reveal (ver sección 12): sin animación, contenido visible directo */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--up,
  .reveal--zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Scroll reveal desactivado. */
.reveal,
.reveal--left,
.reveal--right,
.reveal--up,
.reveal--zoom {
  opacity: 1;
  transform: none;
  transition: none;
}

/* =========================================================
   13. Navegación principal
   ========================================================= */

/* Altura del nav — usada para compensar el sticky en el hero */
:root {
  --nav-h: 64px;
  --nav-h-expanded: 96px;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--section-pad-x);
  background: var(--color-white);
  border-bottom: 1px solid rgba(22, 35, 74, 0.08);
  transition:
    transform 0.45s var(--ease),
    height 0.45s var(--ease),
    background 0.45s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* En páginas que no son index: el nav arranca dentro del flujo normal
   (ocupa su lugar real, por encima del primer contenedor) y recién al
   pasar el 80% de ese primer contenedor se vuelve fixed (ver .site-nav--pinned). */
.site-nav.site-nav--in-flow {
  position: static;
  transform: none !important;
}

/* Una vez "pineado": vuelve a comportarse como fixed normal */
.site-nav.site-nav--pinned {
  position: fixed;
  animation: site-nav-pin-in 0.35s var(--ease);
}

@keyframes site-nav-pin-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ── Estado expandido: en el tope de la página, antes de scrollear ── */
.site-nav.is-expanded {
  height: var(--nav-h-expanded);
  background: rgba(248, 244, 238, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(22, 35, 74, 0.05);
  box-shadow: none;
}

/* Sombra sutil una vez que se scrolleó la página */
.site-nav.is-scrolled {
  box-shadow: 0 4px 18px rgba(22, 35, 74, 0.1);
}

/* Se esconde deslizándose hacia arriba al scrollear hacia abajo */
.site-nav.site-nav--hidden {
  transform: translateY(-100%);
}

/* Zona invisible pegada arriba de todo: al hacer hover ahí (con
   delay) vuelve a aparecer el nav aunque esté escondido. */
.site-nav__hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 101;
}

/* Logo */
.site-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 2rem;
}

.site-nav__logo img {
  height: 38px;
  width: auto;
  transition: height 0.45s var(--ease);
}

/* Logo más grande en estado expandido */
.site-nav.is-expanded .site-nav__logo img {
  height: 56px;
}

/* Links */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.site-nav__links li {
  flex-shrink: 0;
}

.site-nav__links a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-navy-soft);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease),
    font-size 0.45s var(--ease);
}

/* Links un poco más grandes en estado expandido */
.site-nav.is-expanded .site-nav__links a {
  font-size: 0.76rem;
  letter-spacing: 0.07em;
}

.site-nav__links a:hover {
  color: var(--color-navy);
  background: rgba(22, 35, 74, 0.06);
}

.site-nav__links a.is-active {
  color: var(--color-white);
  background: var(--color-navy);
}

/* Separadores decorativos entre grupos */
.site-nav__sep {
  width: 1px;
  height: 18px;
  background: rgba(22, 35, 74, 0.15);
  margin: 0 0.3rem;
  flex-shrink: 0;
}

/* Burger (mobile) */
.site-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}

.site-nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 0px;
  transition:
    transform 0.15s var(--ease),
    opacity 0.15s var(--ease);
}
.site-nav__burger span:hover {
  background: red;
}
/* El nav es flotante (aparece/desaparece sobre el contenido), así que
   el body no necesita reservarle espacio fijo arriba.
   Nota: la altura del hero se define en el bloque de arriba (.container--1)
   y se sobrescribe en los media queries mobile/tablet. */

/* ── Responsive ──
   NOTA: todas las reglas mobile/tablet del nav (burger, menú, letras
   verticales, flecha roja de hover y dropdown de Radio La Chispa) están
   unificadas en un único @media (max-width: 1320px) para evitar tener
   el mismo breakpoint repetido varias veces en el archivo. */
@media (max-width: 1320px) {
  /* -- Menú hamburguesa + panel lateral -- */
  .site-nav__burger {
    display: flex;
  }

  .site-nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    background: var(--color-white);
    padding: 1.25rem var(--section-pad-x) 2rem;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
  }

  /* El botón hamburguesa tiene que quedar siempre por encima del propio
     menú desplegado, para poder seguir tocándolo y cerrarlo. */
  .site-nav__burger {
    position: relative;
    z-index: 1001;
  }

  .site-nav__links.is-open {
    transform: translateX(0);
  }

  .site-nav__links a {
    font-size: 0.82rem;
    padding: 0.6rem 0.5rem;
    color: var(--color-navy);

    border-radius: 0;
  }

  .site-nav__links a:hover,
  .site-nav__links a.is-active {
    color: var(--color-navy);
    background: rgba(22, 35, 74, 0.07);
  }

  .site-nav__sep {
    width: 100%;
    height: 1px;
    margin: 0.25rem 0;
  }

  /* -- Letras verticales animadas al hover/touch de cada link -- */
  .site-nav__links li {
    position: relative;
  }

  .nav-vertical-letters {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 10;
  }

  .nav-vertical-letters span {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-red);
    line-height: 1.1;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 0.15s var(--ease),
      transform 0.15s var(--ease);
  }

  .site-nav__links li:hover .nav-vertical-letters span,
  .site-nav__links li.is-touched .nav-vertical-letters span {
    opacity: 1;
    transform: translateY(0);
  }

  /* -- Flecha roja ↗ en links del nav (solo hover, no en página activa) -- */
  .site-nav__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .site-nav__links a::after {
    content: "↗";
    color: var(--color-red);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition:
      opacity 0.22s var(--ease),
      transform 0.22s var(--ease);
    flex-shrink: 0;
  }

  .site-nav__links a:hover::after {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* El link activo (página actual) NO muestra la flecha */
  .site-nav__links a.is-active::after {
    opacity: 0 !important;
    transform: translate(-4px, 4px) !important;
  }

  /* -- Dropdown "Radio La Chispa" → Escuchanos en vivo --
     El submenu queda oculto por defecto. Al lado de "Radio La Chispa"
     aparece un botón con la MISMA flechita diagonal que usan todos los
     links del nav (↗) — nada de ícono de flechita "v" separado. En
     estado cerrado apunta arriba a la derecha; al abrir el submenu,
     gira 180° y apunta para el lado opuesto (abajo a la izquierda). */
  .site-nav__item--dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-nav__item--dropdown > a {
    flex: 1;
  }

  .site-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .site-nav__dropdown-toggle-arrow {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--color-navy);
    transition:
      color 0.2s var(--ease),
      transform 0.25s var(--ease);
  }

  .site-nav__dropdown-toggle:hover .site-nav__dropdown-toggle-arrow,
  .site-nav__dropdown-toggle:focus-visible .site-nav__dropdown-toggle-arrow {
    color: var(--color-red);
  }

  .site-nav__item--dropdown.is-open .site-nav__dropdown-toggle-arrow {
    color: var(--color-red);
    transform: rotate(180deg);
  }

  .site-nav__dropdown {
    position: static;
    flex-basis: 100%;
    width: 100%;
    min-width: 100%;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 1rem;
    transform: none;
    transition:
      max-height 0.3s var(--ease),
      opacity 0.2s var(--ease),
      visibility 0.2s;
  }

  .site-nav__dropdown::before,
  .site-nav__dropdown::after {
    content: none;
  }

  .site-nav__item--dropdown.is-open .site-nav__dropdown {
    max-height: 180px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0.25rem 0 0.5rem 1rem;
  }

  .site-nav__dropdown-link {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    font-size: 0.78rem !important;
    padding: 0.5rem !important;
    color: var(--color-navy-soft);
  }

  /* Los sublinks (En vivo / Últimos programas) NO llevan la flechita
     roja en diagonal que sí tienen los links normales del nav. */
  .site-nav__dropdown-link::after {
    content: none !important;
  }

  /* En mobile/tablet "Radio La Chispa" queda como un link normal, sin
     botón de flechita ni submenu desplegable (En vivo / Últimos
     programas). Al tocarlo se va directo a Radio_la_chispa.html. */
  .site-nav__dropdown-toggle {
    display: none;
  }

  .site-nav__dropdown {
    display: none !important;
  }
}

/* Burger animado cuando está abierto */
.site-nav__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}
.site-nav__burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.Novedad_Link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}

/* =========================================================
   NAV — Dropdown "Radio La Chispa" → Escuchanos en vivo
   ========================================================= */
.site-nav__item--dropdown {
  position: relative;
}

/* Reglas compartidas (mobile Y desktop): sin bullets de lista, sin
   margen de la <ul>, y estructura flex base para cada link. Van acá,
   SIN media query, para que apliquen siempre sin importar el ancho de
   pantalla — así no dependemos del orden de cascada entre los bloques
   mobile/desktop de más arriba/abajo. */
.site-nav__dropdown {
  list-style: none;
  margin: 0;
}

.site-nav__dropdown-link {
  display: flex !important;
  align-items: center;
  gap: 0.32rem;
  border-radius: 6px;
  text-decoration: none;
  transition:
    opacity 0.1s ease-out,
    color 0.1s ease-out,
    background 0.1s ease-out;
}

/* Los sublinks (En vivo / Últimos programas) nunca llevan la flechita
   roja en diagonal que sí tienen los links normales del nav. */
.site-nav__dropdown-link::after {
  content: none !important;
}

/* Todo lo de acá abajo es SOLO para desktop/tablet grande (mismo punto
   de corte que el menú hamburguesa, 1320px). Va en un media query
   propio a propósito: si quedara "suelto" (sin media query) más abajo
   en el archivo, sus reglas pisarían por orden de cascada a las reglas
   mobile de arriba (aunque el mobile sea más específico en la intención),
   porque tienen la misma especificidad y este bloque aparece después
   en el archivo. Ya pasó una vez y rompió el dropdown en celulares. */
@media (min-width: 1321px) {
  /* "Cartelito" plano (sin pico de globito) — se centra debajo del
     link, con el logo de La Chispa en grande como marca de agua de
     fondo, y aparece/desaparece al toque (hover instantáneo). */
  .site-nav__dropdown {
    box-sizing: border-box;
    padding: 0.35rem;
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    min-width: 148px;
    max-width: 220px;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 30, 50, 0.18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0);
    transition:
      opacity 0.06s linear,
      visibility 0.06s;
    z-index: 50;
  }

  /* Logo de La Chispa como marca de agua: grande, girado hacia la
     derecha, detrás del texto. */
  .site-nav__dropdown::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    width: 270%;
    height: 270%;
    background: url("imagenes/fotos-finales/lachispa/1-PNG-Principal.png")
      center / contain no-repeat;
    transform: translate(-50%, -50%) rotate(-26deg);
    opacity: 0.1;
    z-index: -1;
    pointer-events: none;
  }

  /* Pequeño "puente" invisible para que el mouse pueda viajar del link
     al submenu sin que el hover se pierda en el medio. Más alto que el
     gap real para que el trayecto se sienta tolerante. */
  .site-nav__dropdown::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -20px;
    right: -20px;
    height: 12px;
  }

  .site-nav__item--dropdown:hover .site-nav__dropdown,
  .site-nav__item--dropdown:focus-within .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.04s linear,
      visibility 0.04s;
  }

  /* Mismo estilo tipográfico que el link padre (.site-nav__links a)
     pero arrancando más transparente; al hacer hover recupera el
     color pleno. */
  .site-nav__dropdown-link {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.5rem 0.65rem !important;
    white-space: nowrap;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 0.66rem !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--color-navy-soft);
    opacity: 0.6;
  }

  .site-nav__dropdown-link:hover,
  .site-nav__dropdown-link:focus-visible {
    opacity: 1;
    color: var(--color-navy);
    background: rgba(22, 35, 74, 0.06);
  }

  /* Botón flechita — no existe en desktop, solo en mobile/tablet
     chico (ahí lo muestra el @media max-width: 1320px de más arriba). */
  .site-nav__dropdown-toggle {
    display: none;
  }
}

/* Punto rojo tipo "señal en vivo" */
.site-nav__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
  animation: site-nav-live-pulse 1.3s ease-in-out infinite;
}

@keyframes site-nav-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}