/* =====================================================================
   Soria por El Agustino · Campaña Municipal — Hoja de estilos principal
   Paleta Podemos Perú: azul, amarillo/dorado, blanco y rojo de acento
   Enfoque: mobile-first, responsive, accesible
   ===================================================================== */

/* -------------------- 1. Variables de diseño -------------------- */
:root {
  /* Colores de marca — Podemos Perú · Soria por El Agustino
     (variables mantienen el nombre "purple" por compatibilidad,
      pero ahora representan el AZUL principal de la campaña) */
  --color-purple: #1B3C8C;      /* Azul principal Podemos */
  --color-purple-dark: #14306E; /* Azul oscuro */
  --color-blue: #2E5BBF;        /* Azul medio (degradados) */
  --color-blue-dark: #14306E;
  --color-gold: #F5B400;        /* Amarillo / dorado Podemos */
  --color-gold-dark: #D99400;
  --color-red: #E1251B;         /* Rojo de acento (etiquetas de nombre) */
  --color-red-dark: #B81C14;
  --color-white: #FFFFFF;
  --color-light: #EEF2FB;       /* Fondo azul muy suave */
  --color-gray: #5B6472;
  --color-dark: #1A2231;        /* Texto principal */

  /* Tipografía */
  --font-head: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  /* Espaciado / medidas */
  --header-h: 76px;
  --maxw: 1200px;
  --radius: 14px;
  --shadow-sm: 0 2px 8px rgba(32, 26, 43, .08);
  --shadow-md: 0 10px 30px rgba(32, 26, 43, .12);
  --transition: .3s ease;
}

/* -------------------- 2. Reset básico -------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  color: var(--color-dark);
  line-height: 1.65;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* evita scroll horizontal por animaciones AOS */
}

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; font-weight: 700; }

a { color: inherit; text-decoration: none; }

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

ul { list-style: none; }

/* Enlace "saltar al contenido": invisible hasta que se navega con teclado */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 2000;
  background: var(--color-gold);
  color: var(--color-purple-dark);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-purple-dark); }

/* Foco visible y consistente en toda la web (accesibilidad por teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Contenedor central reutilizable */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

/* -------------------- 3. Utilidades -------------------- */
.section { padding: 72px 0; }
.section--alt { background: var(--color-light); }

.section-title {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  text-align: center;
  margin-bottom: 8px;
  color: var(--color-purple-dark);
}
/* Subrayado dorado bajo cada título de sección: el mismo gesto que en las
   cabeceras, para que toda la web hable el mismo idioma visual. */
.section-title::after {
  content: "";
  display: block;
  width: 74px; height: 5px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
}
/* Etiqueta pequeña sobre el título (categoría / contexto) */
.section-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 10px;
}
.section-subtitle {
  text-align: center;
  color: var(--color-gray);
  max-width: 640px;
  margin: 0 auto 48px;
}
.text-gold { color: var(--color-gold-dark); }
.text-center { text-align: center; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  padding: 12px 24px;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-purple); color: #fff; }
.btn--primary:hover { background: var(--color-purple-dark); box-shadow: var(--shadow-md); }
.btn--gold { background: var(--color-gold); color: var(--color-dark); }
.btn--gold:hover { background: var(--color-gold-dark); color: #fff; }
.btn--outline { background: transparent; border-color: var(--color-purple); color: var(--color-purple); }
.btn--outline:hover { background: var(--color-purple); color: #fff; }
.btn--light { background: #fff; color: var(--color-purple); }
.btn--sm { padding: 9px 18px; font-size: .85rem; }

/* -------------------- 4. Header / navegación -------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; }
.nav__logo-mark {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue));
  display: grid; place-items: center; color: #fff; font-size: 1.1rem; font-weight: 800;
}
.nav__logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__logo-text { font-size: 1.05rem; line-height: 1.05; }
.nav__logo-text small { display: block; font-size: .68rem; font-weight: 600; color: var(--color-gold-dark); letter-spacing: .06em; text-transform: uppercase; }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-dark);
  transition: color var(--transition), background var(--transition);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-purple); background: rgba(27, 60, 140, .08); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

/* Botón hamburguesa */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  border-radius: 8px;
}
.nav__toggle span {
  display: block; width: 24px; height: 2px; background: var(--color-dark);
  border-radius: 2px; transition: var(--transition);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------- 5. Hero -------------------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  /* Fondo: foto de El Agustino + capa azul de marca encima para legibilidad.
     Si falta la imagen, se muestra igualmente el degradado azul. */
  background-color: var(--color-purple-dark);
  background-image:
    linear-gradient(135deg, rgba(20, 48, 110, .90) 0%, rgba(27, 60, 140, .82) 55%, rgba(46, 91, 191, .70) 100%),
    url('../assets/img/agustino-fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,180,26,.25), transparent 70%);
}
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: center; padding: 56px 0;
}
.hero__eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 12px;
}
.hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 8px; }
.hero__role { font-size: 1.15rem; color: var(--color-gold); font-weight: 600; margin-bottom: 16px; }
.hero__slogan { font-size: 1.15rem; opacity: .92; max-width: 520px; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__photo {
  position: relative; justify-self: center;
  width: min(320px, 80%); aspect-ratio: 4/5;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.03));
  border: 3px solid rgba(255,255,255,.25);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo-placeholder { color: rgba(255,255,255,.6); font-size: .9rem; text-align: center; padding: 20px; }

/* Etiquetas de nombre estilo cartel (rojo) */
.hero__names { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.name-tag {
  background: var(--color-red); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: .78rem;
  letter-spacing: .04em; padding: 6px 14px; border-radius: 6px;
}
.name-tag small { display: block; font-size: .62rem; font-weight: 600; opacity: .9; letter-spacing: .06em; }

/* Lema tipo cinta amarilla */
.ribbon {
  display: inline-block; background: var(--color-gold); color: var(--color-purple-dark);
  font-family: var(--font-head); font-weight: 800; padding: 6px 18px;
  transform: skewX(-8deg); margin-top: 10px;
}
.ribbon span { display: inline-block; transform: skewX(8deg); }

/* Gráfico "El Agustino no se detiene" en el hero */
.hero__concept { display: block; width: 100%; max-width: 440px; height: auto; margin: 10px 0 20px; }

/* -------------------- 6. Countdown -------------------- */
.countdown {
  background: linear-gradient(100deg, var(--color-gold-dark), var(--color-gold) 45%, #FFC93C 100%);
  color: var(--color-purple-dark);
  border-block: 3px solid rgba(20, 48, 110, .12);
}
.countdown__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 34px; padding: 30px 0; text-align: center;
}
.countdown__label {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .01em; max-width: 260px; line-height: 1.25;
}
.countdown__timer { display: flex; gap: 12px; }
/* Cada unidad en su propia ficha: se lee mejor y da sensación de urgencia */
.countdown__unit {
  min-width: 78px; padding: 12px 8px 10px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px solid rgba(20, 48, 110, .16);
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(20, 48, 110, .10);
}
.countdown__num {
  font-family: var(--font-head); font-weight: 800; font-size: 2.3rem;
  display: block; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.countdown__unit small {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; opacity: .75;
}

/* -------------------- 7. Cards / grids -------------------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--color-purple), var(--color-blue)); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-purple); }
.card__date { font-size: .8rem; color: var(--color-gray); }
.card__title { font-size: 1.15rem; color: var(--color-purple-dark); }
.card__text { color: var(--color-gray); font-size: .95rem; }
.card__link { margin-top: auto; font-family: var(--font-head); font-weight: 600; color: var(--color-purple); }
.card__link:hover { color: var(--color-gold-dark); }

/* Tarjeta propuesta destacada (icono) */
.feature {
  position: relative; overflow: hidden;
  text-align: center; padding: 34px 24px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  border-top: 4px solid var(--color-gold);
}
/* Velo azul que sube al pasar el ratón: la tarjeta "responde" sin cambiar de color */
.feature::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, rgba(27, 60, 140, 0), rgba(27, 60, 140, .06));
  transition: height var(--transition); pointer-events: none;
}
.feature:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.feature:hover::before { height: 100%; }
.feature > * { position: relative; z-index: 1; }
.feature__icon {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 18px;
  display: grid; place-items: center; font-size: 1.8rem;
  background: linear-gradient(150deg, rgba(27, 60, 140, .12), rgba(46, 91, 191, .06));
  border: 1.5px solid rgba(27, 60, 140, .10);
  color: var(--color-purple);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.feature:hover .feature__icon {
  background: linear-gradient(150deg, var(--color-purple), var(--color-blue));
  color: #fff; transform: scale(1.06);
}
/* Iconos SVG de línea dentro de los círculos (aspecto sobrio y profesional) */
.feature__icon svg { width: 30px; height: 30px; }
.accordion__icon svg { width: 22px; height: 22px; }
.contact-info__icon svg { width: 22px; height: 22px; }
.feature__icon svg, .accordion__icon svg, .contact-info__icon svg { stroke: currentColor; fill: none; }
/* Foto circular para tarjetas de la fórmula (candidatos) */
.feature__photo {
  width: 128px; height: 128px; margin: 0 auto 16px; border-radius: 50%;
  overflow: hidden; border: 4px solid var(--color-gold); background: var(--color-light);
}
.feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.feature__title { font-size: 1.2rem; margin-bottom: 8px; color: var(--color-purple-dark); }
.feature__text { color: var(--color-gray); font-size: .95rem; }

/* Cifra destacada dentro de una tarjeta .feature (metas del plan de gobierno) */
.stat__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  line-height: 1;
  color: var(--color-purple);
  margin-bottom: 10px;
  letter-spacing: -.02em;
}

/* -------------------- 8. Bloque "Quién soy" resumen -------------------- */
.about-split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.about-split__photo {
  position: relative;
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--color-purple), var(--color-blue));
  box-shadow: var(--shadow-md); display: grid; place-items: center; color: rgba(255,255,255,.6);
  z-index: 1;
}
.about-split__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.about-split__photo:hover img { transform: scale(1.04); }

/* Marco dorado desplazado detrás de la foto: da profundidad y refuerza la marca */
.about-split__photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  border: 3px solid rgba(245, 180, 0, .55);
  transform: translate(14px, 14px);
  pointer-events: none;
  z-index: -1;
}

/* Variante con la foto a la derecha (para alternar el ritmo entre secciones) */
@media (min-width: 720px) {
  .about-split--reverse .about-split__photo { order: 2; }
  .about-split--reverse { grid-template-columns: 1.1fr .9fr; }
  .about-split--reverse .about-split__photo::after { transform: translate(-14px, 14px); }
}
.about-split h2 { color: var(--color-purple-dark); font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
.about-split p { color: var(--color-gray); margin-bottom: 16px; }

/* -------------------- 7a. Estado vacío (aún sin contenido) -------------------- */
.vacio {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 28px;
  text-align: center;
  background: var(--color-light);
  border: 2px dashed rgba(27, 60, 140, .22);
  border-radius: 20px;
}
.vacio__icono {
  width: 82px; height: 82px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: #fff;
  border: 1.5px solid rgba(27, 60, 140, .12);
  color: var(--color-purple);
  box-shadow: var(--shadow-sm);
}
.vacio__icono svg { width: 40px; height: 40px; }
.vacio h2 { color: var(--color-purple-dark); font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 10px; }
.vacio p { color: var(--color-gray); margin-bottom: 26px; }
.vacio__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* -------------------- 7b. Carrusel de fotos de campaña -------------------- */
.carrusel { position: relative; max-width: 940px; margin: 0 auto; }
.carrusel__marco {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-purple-dark);
  box-shadow: var(--shadow-md);
}
.carrusel__slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.carrusel__slide.activa { opacity: 1; pointer-events: auto; }

/* La foto se ve ENTERA y sin deformar: nunca se recorta la franja
   inferior con "Richard Soria por El Agustino" ni el "Marca así". */
.carrusel__foto {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* Relleno de los lados: la misma foto ampliada y desenfocada, para que
   las que no son 4:3 no dejen barras negras ni huecos vacíos. */
.carrusel__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(26px) brightness(.5) saturate(1.1);
  z-index: 0;
}

/* Flechas */
.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--color-purple-dark);
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: background var(--transition), transform var(--transition);
}
.carrusel__flecha:hover { background: var(--color-gold); transform: translateY(-50%) scale(1.08); }
.carrusel__flecha svg { width: 22px; height: 22px; }
.carrusel__flecha--prev { left: 14px; }
.carrusel__flecha--next { right: 14px; }

/* Puntos */
.carrusel__puntos {
  display: flex; justify-content: center; gap: 2px;
  margin-top: 14px;
}
/* El botón es grande (fácil de pulsar con el dedo) pero el punto que se
   ve es pequeño: el área táctil no tiene por qué coincidir con el dibujo. */
.carrusel__punto {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
}
.carrusel__punto::before {
  content: "";
  display: block;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--color-purple);
  background: transparent;
  transition: background var(--transition), width var(--transition), border-radius var(--transition), transform var(--transition);
}
.carrusel__punto.activo::before {
  background: var(--color-gold); border-color: var(--color-gold-dark);
  width: 28px; border-radius: 6px;
}
.carrusel__punto:hover::before { transform: scale(1.15); }

@media (max-width: 620px) {
  .carrusel__flecha { width: 38px; height: 38px; }
  .carrusel__flecha--prev { left: 8px; }
  .carrusel__flecha--next { right: 8px; }
  .carrusel__marco { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel__slide { transition: none; }
}

/* -------------------- 7c. Ventana del plan de gobierno --------------------
   Aparece una sola vez por visitante (se recuerda en el navegador). */
.modal-plan {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 24, 56, .72);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  overflow-y: auto;
}
.modal-plan.abierta { opacity: 1; visibility: visible; }

.modal-plan__caja {
  position: relative;
  width: min(940px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  display: grid;
  grid-template-columns: 1fr;
  transform: translateY(18px) scale(.98);
  transition: transform .35s ease;
}
.modal-plan.abierta .modal-plan__caja { transform: none; }

/* --- Lado izquierdo: portada del plan --- */
.modal-plan__portada {
  position: relative;
  display: grid; place-items: center;
  padding: 34px 24px;
  background: linear-gradient(150deg, var(--color-purple-dark), var(--color-blue));
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.modal-plan__portada::after {
  content: ""; position: absolute; left: -40px; bottom: -50px;
  width: 220px; height: 220px; opacity: .10; pointer-events: none;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 47 50 18 82'/%3E%3Cpath d='M50 18 79 50 50 82'/%3E%3C/g%3E%3C/svg%3E");
}
/* Libro dibujado con CSS: no depende de ninguna imagen */
.libro {
  position: relative; z-index: 1;
  width: min(230px, 62%);
  aspect-ratio: 3 / 4;
  border-radius: 6px 12px 12px 6px;
  background: linear-gradient(145deg, #1B3C8C 0%, #2E5BBF 55%, #1B3C8C 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset -1px 0 0 rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 18px; text-align: center; color: #fff;
  border-left: 7px solid rgba(0, 0, 0, .28);
}
.libro__logo { width: 62px; height: auto; }
.libro__t1 { font-family: var(--font-head); font-weight: 800; font-size: .95rem; letter-spacing: .04em; line-height: 1.15; }
.libro__t2 { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--color-gold); line-height: 1; }
.libro__t3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }
.libro__pie { margin-top: 8px; font-size: .72rem; opacity: .9; letter-spacing: .05em; }
.libro__pie strong { display: block; font-size: .95rem; letter-spacing: .02em; }

/* --- Lado derecho: contenido --- */
.modal-plan__cuerpo { padding: 30px 26px 34px; }
.modal-plan__titulo {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  color: var(--color-purple); letter-spacing: -.01em;
}
.modal-plan__subtitulo {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.05rem, 3.2vw, 1.45rem);
  color: var(--color-gold-dark); margin-top: 2px;
}
.modal-plan__subtitulo::after {
  content: ""; display: block; width: 78px; height: 4px; border-radius: 2px;
  background: var(--color-gold); margin-top: 12px;
}
.modal-plan__texto { color: var(--color-gray); font-size: .95rem; margin: 16px 0 20px; }
.modal-plan__lista { display: grid; gap: 12px; margin-bottom: 26px; }
.modal-plan__lista li { display: flex; align-items: center; gap: 14px; }
.modal-plan__lista svg { width: 26px; height: 26px; flex-shrink: 0; }
.modal-plan__lista span {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(.9rem, 2.6vw, 1.05rem); letter-spacing: .01em;
}
.modal-plan .btn { width: 100%; justify-content: center; gap: 10px; }
.modal-plan .btn svg { width: 20px; height: 20px; }
.modal-plan__luego {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; color: var(--color-gray);
  text-decoration: underline; padding: 8px;
}
.modal-plan__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--color-purple-dark);
  border: none; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition);
}
.modal-plan__cerrar:hover { background: var(--color-gold); transform: rotate(90deg); }
.modal-plan__cerrar svg { width: 20px; height: 20px; }

@media (min-width: 780px) {
  .modal-plan__caja { grid-template-columns: .82fr 1.18fr; }
  .modal-plan__portada { border-radius: 20px 0 0 20px; padding: 40px 28px; }
  .modal-plan__cuerpo { padding: 42px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-plan, .modal-plan__caja { transition: none; }
}

/* -------------------- 8a. Bloque de descarga del plan -------------------- */
.descarga { padding: 0 0 72px; }
.descarga__caja {
  display: grid; gap: 24px; align-items: center; text-align: center;
  grid-template-columns: 1fr;
  background: linear-gradient(120deg, var(--color-purple-dark), var(--color-blue));
  color: #fff;
  border-radius: 20px;
  padding: 38px 32px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
/* Chevrón de marca, muy tenue, como textura de fondo */
.descarga__caja::after {
  content: ""; position: absolute; right: -40px; top: 50%;
  width: 260px; height: 260px; transform: translateY(-50%);
  opacity: .07; pointer-events: none;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 47 50 18 82'/%3E%3Cpath d='M50 18 79 50 50 82'/%3E%3C/g%3E%3C/svg%3E");
}
.descarga__caja > * { position: relative; z-index: 1; }
.descarga__icono {
  width: 76px; height: 76px; margin: 0 auto; border-radius: 20px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .28);
  color: var(--color-gold);
}
.descarga__icono svg { width: 38px; height: 38px; }
.descarga__texto h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: 10px; }
.descarga__texto p { color: rgba(255, 255, 255, .9); margin: 0 auto; max-width: 520px; }
.descarga__meta {
  display: block; margin-top: 12px;
  font-size: .82rem; color: rgba(255, 255, 255, .72); letter-spacing: .03em;
}
.btn--lg { padding: 16px 32px; font-size: 1.02rem; }
@media (min-width: 860px) {
  .descarga__caja { grid-template-columns: auto 1fr auto; text-align: left; gap: 32px; padding: 42px 44px; }
  .descarga__icono { margin: 0; }
  .descarga__texto p { margin: 0; }
  .descarga__accion { text-align: center; }
}

/* -------------------- 8b. Botón flotante de WhatsApp -------------------- */
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1200;
  display: inline-flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 18px;
  background: #25D366; color: #fff;
  border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.wa-float svg { width: 27px; height: 27px; flex-shrink: 0; }
.wa-float:hover { background: #1FB855; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
/* Halo que late para llamar la atención sin ser molesto */
.wa-float::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px; background: #25D366;
  z-index: -1; animation: wa-latido 2.6s ease-out infinite;
}
@keyframes wa-latido {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* En móvil solo el icono, para no tapar contenido */
@media (max-width: 620px) {
  .wa-float { padding: 0; width: 56px; height: 56px; justify-content: center; right: 16px; bottom: 16px; }
  .wa-float span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; }
}

/* -------------------- 8c. Recomienda esta página -------------------- */
.recomienda {
  background: linear-gradient(120deg, var(--color-purple-dark), var(--color-blue));
  color: #fff; text-align: center;
}
.recomienda h2 { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: 10px; }
.recomienda h2::after { background: var(--color-gold); }
.recomienda p { color: rgba(255, 255, 255, .9); max-width: 560px; margin: 0 auto 30px; }
.recomienda__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: #fff;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.share-btn svg { width: 19px; height: 19px; }
.share-btn:hover { transform: translateY(-3px); border-color: transparent; }
.share-btn--wa:hover { background: #25D366; }
.share-btn--fb:hover { background: #1877F2; }
.share-btn--x:hover  { background: #000; }
.share-btn--copiar:hover { background: var(--color-gold); color: var(--color-purple-dark); }

/* -------------------- 9. Formularios -------------------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
.form__group { display: flex; flex-direction: column; gap: 6px; }
.form__group label { font-family: var(--font-head); font-weight: 600; font-size: .88rem; }
.form input,
.form select,
.form textarea {
  font-family: var(--font-body); font-size: .95rem;
  padding: 12px 14px; border: 1.5px solid #ddd; border-radius: 10px;
  background: #fff; transition: border var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none; border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(27, 60, 140, .15);
}
.form textarea { resize: vertical; min-height: 130px; }
.form__error { color: #d02b2b; font-size: .8rem; min-height: 1em; }
.form input.invalid,
.form textarea.invalid,
.form select.invalid { border-color: #d02b2b; }
.form__note { font-size: .82rem; color: var(--color-gray); }
.form__feedback { padding: 14px; border-radius: 10px; font-size: .92rem; display: none; }
.form__feedback.success { display: block; background: #e7f6ec; color: #1c6b3a; }

/* Bloque "Súmate" */
.join { background: linear-gradient(135deg, var(--color-purple), var(--color-blue)); color: #fff; }
.join .section-title, .join .section-subtitle { color: #fff; }
.join__box { max-width: 640px; margin-inline: auto; background: rgba(255,255,255,.08); padding: 32px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); }
.join__box input { background: rgba(255,255,255,.95); }

/* -------------------- 10. Timeline -------------------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--color-purple), var(--color-gold)); }
.timeline__item { position: relative; padding: 0 0 34px 26px; }
.timeline__item::before {
  content: ""; position: absolute; left: -28px; top: 4px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--color-gold); border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.timeline__year { font-family: var(--font-head); font-weight: 800; color: var(--color-purple); }
.timeline__title { font-size: 1.1rem; margin: 2px 0 4px; }
.timeline__text { color: var(--color-gray); font-size: .95rem; }

/* -------------------- 11. Acordeón propuestas -------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filter-btn {
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  padding: 8px 16px; border-radius: 50px; border: 1.5px solid var(--color-purple);
  background: #fff; color: var(--color-purple); cursor: pointer; transition: var(--transition);
}
.filter-btn:hover { background: rgba(27,60,140,.1); }
.filter-btn.active { background: var(--color-purple); color: #fff; }

.accordion { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.accordion__item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.accordion__header {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--color-purple-dark);
}
.accordion__icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(27,60,140,.1); color: var(--color-purple); font-size: 1.2rem;
}
.accordion__header .tag-cat { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--color-gold-dark); }
.accordion__chevron { transition: transform var(--transition); flex: none; }
.accordion__header[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.accordion__panel-inner { padding: 0 22px 22px 78px; color: var(--color-gray); }

/* Contenido de una propuesta del plan de gobierno */
.prop__oe {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-purple);
  background: var(--color-light);
  border-left: 4px solid var(--color-gold);
  padding: 9px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
}
.prop__list { display: grid; gap: 10px; margin-bottom: 16px; }
.prop__list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.6;
}
.prop__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-gold);
  transform: rotate(45deg);
}
.prop__list strong { color: var(--color-dark); }
.prop__inv {
  font-size: .92rem;
  background: linear-gradient(120deg, var(--color-purple-dark), var(--color-blue));
  color: #fff;
  padding: 13px 16px;
  border-radius: var(--radius);
}
.prop__inv strong { color: var(--color-gold); }

/* -------------------- 12. Página / cabecera de sección interna -------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: #fff; padding: 66px 0; text-align: center;
  /* Mismo fondo que el hero de Inicio: foto de El Agustino + capa azul */
  background-color: var(--color-purple-dark);
  background-image:
    radial-gradient(900px 380px at 82% -30%, rgba(245, 180, 26, .18), transparent 60%),
    linear-gradient(120deg, rgba(20, 48, 110, .92) 0%, rgba(27, 60, 140, .85) 55%, rgba(46, 91, 191, .72) 100%),
    url('../assets/img/agustino-fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Motivo de chevrons (»») decorativos a los lados — guiño a la identidad de campaña */
.page-hero::before, .page-hero::after {
  content: ""; position: absolute; top: 50%; width: 240px; height: 240px;
  opacity: .10; pointer-events: none; transform: translateY(-50%);
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 18 47 50 18 82'/%3E%3Cpath d='M50 18 79 50 50 82'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero::before { left: -50px; }
.page-hero::after { right: -50px; transform: translateY(-50%) scaleX(-1); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero--banner::before, .page-hero--banner::after { display: none; }
/* Variante con banner de fondo (p. ej. página Propuestas).
   Capa azul encima del banner para legibilidad del título.
   Si falta la imagen, se ve el degradado/color de marca de respaldo. */
.page-hero--banner {
  background-color: var(--color-purple-dark);
  /* La imagen se define por página con la variable --banner (style="--banner:url('...')").
     La capa azul encima mantiene legible el título. Si no hay imagen, se ve el color de marca. */
  background-image:
    linear-gradient(rgba(20, 48, 110, .62), rgba(27, 60, 140, .62)),
    var(--banner, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 150px 0;          /* más alto: el banner se recorta menos */
  min-height: 460px;
  display: flex;
  align-items: center;
}
/* Banner por sección. La ruta va aquí (en el CSS) para que ../assets resuelva bien. */
.ph-quiensoy   { --banner: url('../assets/img/banner-quien-soy.jpg'); }
.ph-propuestas { --banner: url('../assets/img/banner-obras.jpg'); }
.ph-articulos  { --banner: url('../assets/img/banner-articulos.jpg'); }
.ph-noticias   { --banner: url('../assets/img/banner-noticias.jpg'); }
.ph-contacto   { --banner: url('../assets/img/banner-contacto.jpg'); }
/* Cabecera interna en dos columnas: texto a la izquierda, imagen a la derecha */
.page-hero--split { padding: 52px 0; }
.page-hero__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.page-hero__text { text-align: center; }
.page-hero__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); line-height: 0; }
.page-hero__media img { width: 100%; height: auto; display: block; }
/* Variante tarjeta 4:5 (como el hero de Inicio) para retratos/pósters */
.page-hero__media--card { width: min(320px, 100%); aspect-ratio: 4 / 5; justify-self: center; }
.page-hero__media--card img { height: 100%; object-fit: cover; }
@media (min-width: 800px) {
  .page-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .page-hero__text { text-align: left; }
  .page-hero--split .page-hero__text p { margin: 0; max-width: none; }
}
/* ---------- Variante "cover": foto a todo el ancho con el menú encima ----------
   La imagen se define por página con  style="--hero-img:url('...')".
   Tamaño recomendado de la foto: 1920 x 700 px (ver README).
   El degradado oscurece la izquierda para que el título siempre se lea. */
.page-hero--cover {
  /* La altura crece con el ancho para acercarse a la proporción de la foto
     (1920x700). Así se recorta lo mínimo: en una pantalla de 1920 px la
     franja mide 620 y solo se pierden ~80 px de la parte inferior. */
  min-height: clamp(420px, 34vw, 620px);
  display: flex;
  /* Texto centrado verticalmente dentro de la franja. El relleno superior
     incluye la altura de la cabecera fija, así el bloque queda centrado
     respecto al espacio realmente visible, no debajo del menú. */
  align-items: center;
  text-align: left;
  padding: calc(var(--header-h) + 28px) 0 28px;
  background-color: var(--color-purple-dark);
  /* La capa azul va en una variable; la FOTO se define abajo, una clase por
     página. Importante: la ruta de la imagen NO puede ir dentro de una
     variable CSS, porque el navegador la resolvería respecto a este archivo
     (css/) y no respecto a la página, dando un 404. */
  --hero-velo: linear-gradient(90deg,
      rgba(16, 38, 88, .93) 0%,
      rgba(18, 43, 100, .82) 38%,
      rgba(20, 48, 110, .42) 66%,
      rgba(20, 48, 110, .30) 100%);
  background-image: var(--hero-velo);
  background-size: cover;
  /* Anclado arriba y a la derecha: "top" evita cortar la cabeza cuando la
     franja es más apaisada que la foto, y "right" mantiene a la persona
     en pantalla cuando la ventana es estrecha. */
  background-position: right top;
  background-repeat: no-repeat;
}
/* --- Foto de cabecera de cada página ---
   Rutas relativas a ESTE archivo (por eso el "../").
   Para cambiar una foto basta con reemplazar el archivo en assets/img/
   manteniendo el mismo nombre: aquí no hay que tocar nada. */
.hero-quien-soy  { background-image: var(--hero-velo), url('../assets/img/hero-quien-soy.jpg'); }
.hero-propuestas { background-image: var(--hero-velo), url('../assets/img/hero-propuestas.jpg'); }
.hero-articulos  { background-image: var(--hero-velo), url('../assets/img/hero-articulos.jpg'); }
.hero-articulo   { background-image: var(--hero-velo), url('../assets/img/hero-articulo.jpg'); }
.hero-noticias   { background-image: var(--hero-velo), url('../assets/img/hero-noticias.jpg'); }
.hero-contacto   { background-image: var(--hero-velo), url('../assets/img/hero-contacto.jpg'); }

/* Sin los chevrones decorativos: aquí manda la foto */
.page-hero--cover::before, .page-hero--cover::after { display: none; }
.page-hero--cover .page-hero__inner { max-width: 680px; }

/* --- Cabecera con el afiche de campaña a la derecha ---
   Como el afiche pasa a ser el protagonista, la foto de fondo se oscurece
   de forma más uniforme y queda como textura: si no, compiten entre sí. */
.page-hero--con-afiche {
  --hero-velo: linear-gradient(90deg,
      rgba(16, 38, 88, .95) 0%,
      rgba(18, 43, 100, .90) 45%,
      rgba(20, 48, 110, .80) 100%);
}
.page-hero__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  width: 100%;
}
.page-hero__card {
  width: min(260px, 68%);
  aspect-ratio: 4 / 5;
  justify-self: center;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .25);
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.03));
}
.page-hero__card img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .page-hero__cols { grid-template-columns: 1.2fr .8fr; gap: 44px; }
  .page-hero__card { width: min(300px, 100%); justify-self: end; }
  .page-hero--con-afiche .page-hero__inner { max-width: 600px; }
}
.page-hero--cover h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.05; }
.page-hero--cover h1::after {
  content: ""; display: block; width: 92px; height: 5px; border-radius: 3px;
  background: var(--color-gold); margin-top: 18px;
}
.page-hero--cover p { margin: 20px 0 0; max-width: 560px; opacity: .95; }

/* Cabecera transparente sobre la foto (solo en páginas con .page-hero--cover) */
body.hero-cover .header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
body.hero-cover .nav__link,
body.hero-cover .nav__logo-text { color: #fff; }
body.hero-cover .nav__link:hover,
body.hero-cover .nav__link[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .16); }
body.hero-cover .nav__toggle span { background: #fff; }
body.hero-cover .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
body.hero-cover .btn--outline:hover { background: #fff; color: var(--color-purple-dark); }

/* Al bajar, la cabecera vuelve a ser blanca y legible */
body.hero-cover .header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: transparent;
}
body.hero-cover .header.is-scrolled .nav__link,
body.hero-cover .header.is-scrolled .nav__logo-text { color: var(--color-dark); }
body.hero-cover .header.is-scrolled .nav__link:hover,
body.hero-cover .header.is-scrolled .nav__link[aria-current="page"] { color: var(--color-purple); background: rgba(27, 60, 140, .08); }
body.hero-cover .header.is-scrolled .nav__toggle span { background: var(--color-dark); }
body.hero-cover .header.is-scrolled .btn--outline { color: var(--color-purple); border-color: var(--color-purple); }

@media (max-width: 800px) {
  .page-hero--cover {
    min-height: 380px;
    padding: calc(var(--header-h) + 24px) 0 24px;
    background-position: right top;
    /* Solo se cambia la capa azul: la foto la sigue poniendo la clase
       de cada página, así que no hay que repetir las rutas aquí. */
    --hero-velo: linear-gradient(180deg,
        rgba(16, 38, 88, .78) 0%,
        rgba(18, 43, 100, .74) 45%,
        rgba(20, 48, 110, .88) 100%);
  }
  /* En móvil el menú desplegable necesita fondo sólido */
  body.hero-cover .nav__menu.open { background: rgba(20, 48, 110, .98); }
}

.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.page-hero p { opacity: .9; max-width: 620px; margin: 0 auto; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--color-gold); }

/* -------------------- 13. Artículo individual -------------------- */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body p { margin-bottom: 18px; color: #33303b; }
.article-body h2 { color: var(--color-purple-dark); margin: 30px 0 12px; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--color-gray); font-size: .88rem; margin-bottom: 24px; }
.article-hero-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16/8; background: var(--color-light); }
.share { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #eee; }
.share span { font-family: var(--font-head); font-weight: 600; }
.share a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-light); color: var(--color-purple); transition: var(--transition);
}
.share a:hover { background: var(--color-purple); color: #fff; }

/* -------------------- 14. Contacto -------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.contact-info { display: grid; gap: 20px; }
.contact-info__item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info__icon {
  width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(27,60,140,.1); color: var(--color-purple); font-size: 1.2rem;
}
.contact-info__item h4 { color: var(--color-purple-dark); font-size: 1rem; }
.contact-info__item p { color: var(--color-gray); font-size: .92rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* Redes sociales inline */
.socials { display: flex; gap: 12px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(27,60,140,.1); color: var(--color-purple); transition: var(--transition);
}
.socials a:hover { background: var(--color-purple); color: #fff; transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; }

/* -------------------- 15. Footer -------------------- */
.footer { background: var(--color-purple-dark); color: rgba(255,255,255,.85); padding: 56px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
.footer__brand .nav__logo-text { color: #fff; }
.footer__brand p { font-size: .9rem; margin-top: 14px; opacity: .8; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer__links li { margin-bottom: 8px; }
.footer__links a { font-size: .92rem; opacity: .85; transition: var(--transition); }
.footer__links a:hover { opacity: 1; color: var(--color-gold); padding-left: 4px; }
.footer .socials a { background: rgba(255,255,255,.12); color: #fff; }
.footer .socials a:hover { background: var(--color-gold); color: var(--color-dark); }
.footer__contact li { font-size: .9rem; margin-bottom: 8px; opacity: .85; display: flex; gap: 8px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding: 20px 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: .82rem; opacity: .8;
}
.footer__bottom a:hover { color: var(--color-gold); }

/* -------------------- 16. Animaciones scroll (fallback si no hay AOS) -------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* -------------------- 17. Responsive: tablet -------------------- */
@media (min-width: 720px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; padding: 72px 0; }
  .about-split { grid-template-columns: .9fr 1.1fr; }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 2fr 1fr 1.4fr; }
}

@media (min-width: 992px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}

/* -------------------- 18. Responsive: menú móvil -------------------- */
@media (max-width: 920px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 12px 20px 24px;
    box-shadow: var(--shadow-md);
    transform: translateY(-120%); transition: transform var(--transition);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav__menu.open { transform: translateY(0); }
  .nav__link { padding: 14px 8px; border-bottom: 1px solid #f0eef5; font-size: 1rem; }
  .nav__actions--header { display: none; }        /* botones se mueven al menú en móvil */
  .nav__menu .nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .nav__menu .btn { width: 100%; justify-content: center; }
}

@media (min-width: 921px) {
  .nav__menu .nav__actions { display: none; }      /* evita duplicar botones en escritorio */
}

/* -------------------- 19. Ajustes finos para celulares -------------------- */
@media (max-width: 600px) {
  .container { padding-inline: 16px; }
  .section { padding: 46px 0; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .section-subtitle { margin-bottom: 30px; }

  /* Cabecera */
  .nav { height: 64px; }
  :root { --header-h: 64px; }
  .nav__logo-text { font-size: .98rem; }
  .nav__logo-text small { font-size: .6rem; }

  /* Hero portada */
  .hero__grid { padding: 36px 0; gap: 22px; }
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero__role { font-size: 1rem; }
  .hero__slogan { font-size: 1rem; }
  .hero__photo { width: min(260px, 74%); }
  .hero__concept { max-width: 290px; margin: 6px auto 14px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  /* Contador */
  .countdown__inner { gap: 12px; padding: 16px 0; }
  .countdown__label { font-size: .95rem; }
  .countdown__timer { gap: 8px; }
  .countdown__unit { min-width: 48px; }
  .countdown__num { font-size: 1.45rem; }

  /* Cabeceras internas */
  .page-hero { padding: 40px 0; }
  .page-hero::before, .page-hero::after { width: 140px; height: 140px; opacity: .07; }
  .page-hero--banner { padding: 64px 0; min-height: 230px; }

  /* Acordeón: más ancho de texto, sin etiqueta lateral */
  .accordion__header { padding: 15px 16px; gap: 10px; font-size: .96rem; }
  .accordion__header .tag-cat { display: none; }
  .accordion__icon { width: 36px; height: 36px; }
  .accordion__panel-inner { padding: 0 16px 18px; }

  /* Filtros deslizables en una fila */
  .filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
             margin-inline: -16px; padding: 0 16px 6px; -webkit-overflow-scrolling: touch; }
  .filter-btn { flex: 0 0 auto; }

  /* Bloques y tarjetas */
  .about-split { gap: 22px; }
  .feature { padding: 26px 20px; }
  .join__box { padding: 22px; }
  .timeline { padding-left: 22px; }

  /* Artículo y mapa */
  .article-hero-img { aspect-ratio: 16/10; }
  .map-embed iframe { height: 260px; }
}

/* =====================================================================
   20. Pulido visual (mejoras de diseño)
   ===================================================================== */

/* Acento dorado bajo los títulos de sección */
.section-title::after {
  content: ""; display: block; width: 60px; height: 4px; border-radius: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-dark));
}
.section-title[style*="left"]::after { margin-left: 0; }

/* Tarjetas: más profundidad y zoom de imagen al pasar el cursor */
.card { border: 1px solid rgba(27, 60, 140, .06); }
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(27, 60, 140, .18); }
.card__media img { transition: transform .55s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card:hover .card__title { color: var(--color-blue); }
.card__link { transition: gap .2s ease, color var(--transition); }
.card:hover .card__link { gap: 6px; }

/* Tarjetas de propuestas/valores: icono animado al pasar */
.feature:hover { box-shadow: 0 20px 44px rgba(27, 60, 140, .16); }
.feature__icon { transition: transform .3s ease, background .3s ease, color .3s ease; }
.feature:hover .feature__icon { transform: translateY(-4px) scale(1.06); background: var(--color-purple); color: #fff; }

/* Botones con sombra sutil de color */
.btn--primary { box-shadow: 0 8px 20px rgba(27, 60, 140, .22); }
.btn--gold { box-shadow: 0 8px 20px rgba(245, 180, 26, .35); }

/* Menú: subrayado dorado animado */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  border-radius: 2px; background: var(--color-gold);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 920px) { .nav__link::after { display: none; } }

/* Acordeón: encabezado activo resaltado */
.accordion__header[aria-expanded="true"] { background: linear-gradient(90deg, rgba(27, 60, 140, .06), transparent); }
.accordion__header[aria-expanded="true"] .accordion__icon { background: var(--color-purple); color: #fff; }

/* Línea de tiempo: puntos con anillo dorado */
.timeline__item::before { box-shadow: 0 0 0 4px rgba(245, 180, 26, .18), var(--shadow-sm); }

/* Pie de página: franja superior dorada */
.footer { border-top: 4px solid var(--color-gold); }

/* =====================================================================
   AJUSTES PARA MÓVIL Y PANTALLAS TÁCTILES
   Los tamaños de letra y las zonas que se pulsan con el dedo necesitan
   un mínimo para ser cómodos: por debajo de ~12px cuesta leer y por
   debajo de ~40px cuesta acertar con el dedo.
   ===================================================================== */
@media (max-width: 900px) {

  /* --- Zonas que se pulsan: mínimo 42px de alto --- */
  .btn--sm {
    padding: 12px 20px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  .filter-btn {
    min-height: 42px;
    padding: 10px 18px;
    font-size: .88rem;
  }
  .card__link,
  .footer__links a,
  .footer__contact a {
    display: inline-block;
    padding-block: 6px;   /* más alto sin mover el diseño */
  }

  /* --- Letra pequeña: subirla a un tamaño legible --- */
  .card__tag { font-size: .78rem; }
  .accordion__header .tag-cat { font-size: .76rem; }
  .card__date { font-size: .84rem; }
  .countdown__unit small { font-size: .7rem; }
  .breadcrumb { font-size: .88rem; }

  /* --- El botón flotante de WhatsApp no debe tapar el final del pie --- */
  .footer__bottom { padding-bottom: 86px; }
}

/* Pantallas muy estrechas (320-360px): el contenido respira menos */
@media (max-width: 380px) {
  .container { padding-inline: 16px; }
  .hero__cta .btn,
  .vacio__btns .btn,
  .error-page__links .btn { width: 100%; justify-content: center; }
  .countdown__unit { min-width: 66px; padding: 10px 6px 8px; }
  .countdown__num { font-size: 1.9rem; }
  .countdown__timer { gap: 8px; }
  .descarga__caja { padding: 30px 20px; }
  .vacio { padding: 44px 20px; }
}

/* En dispositivos táctiles no hay ratón: los efectos "hover" se quedan
   pegados tras pulsar, así que se desactivan los desplazamientos. */
@media (hover: none) {
  .card:hover,
  .feature:hover { transform: none; }
  .share-btn:hover,
  .wa-float:hover { transform: none; }
  .about-split__photo:hover img { transform: none; }
}