/*
Theme Name:   VAP Divi Child
Description:  Tema hijo de Divi para vap.org.pe (Vicariato Apostólico de Pucallpa)
Author:       EDUBRIDGES
Template:     Divi
Version:      1.0.0
Text Domain:  vap-divi-child
*/

/* ==========================================================================
   Tokens del Manual de Identidad Institucional del VAP
   (https://claude.ai/artifact/DCexsUPbqT5BfKwjyr4Stp — project/tokens.json)
   No inventar un color nuevo aquí: si hace falta uno, se agrega primero al
   manual de marca y luego se refleja en este bloque.
   ========================================================================== */
:root {
  --vap-celeste:          #3BA0D0;
  --vap-celeste-claro:     #95D2E4;
  --vap-verde-amazonico:  #92BF21;
  --vap-verde-oscuro:     #47611D;
  --vap-marron-raiz:      #5B460F;
  --vap-teal-mosaico:     #15555A;
  --vap-oliva-claro:      #D0D279;
  --vap-ink:              #2B2A28;
  --vap-ink-rgb:          43,42,40;
  --vap-superficie:       #FFFFFF;
  --vap-superficie-alt:   #EAF6FB;

  --vap-espacio-1: 4px;
  --vap-espacio-2: 8px;
  --vap-espacio-3: 16px;
  --vap-espacio-4: 24px;
  --vap-espacio-5: 40px;
  --vap-espacio-6: 64px;

  --vap-radio-sm:   6px;
  --vap-radio-md:   14px;
  --vap-radio-pill: 999px;

  /* Fuente de títulos cambiada de Fraunces a Playfair Display (29/09/2026,
     a pedido de Rodo, tras comparar un pool de 6 opciones) — serif de alto
     contraste, más firme y madura que Fraunces a igual peso. Un solo punto
     de cambio: todo lo que usa var(--vap-fuente-display) —h1-h4, logo de
     cabecera, título/lema del pie, tarjetas, etc.— se actualiza solo.
     El manual de marca (Design System) se actualizó a la par. */
  --vap-fuente-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vap-fuente-sans:    'Nunito Sans', 'Segoe UI', Arial, sans-serif;
}

body {
  font-family: var(--vap-fuente-sans);
  color: var(--vap-ink);
  background: var(--vap-superficie);
}

h1, h2, h3, h4, .vap-titulo {
  font-family: var(--vap-fuente-display);
}

a { color: var(--vap-celeste); text-decoration: none; }
a:hover { color: var(--vap-verde-oscuro); }

/* Utilidades de accesibilidad — header.php, footer.php, js/nav.js */
.vap-visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.vap-saltar-al-contenido {
  position: absolute;
  top: -48px; left: var(--vap-espacio-3);
  z-index: 1000;
  background: var(--vap-ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--vap-radio-sm) var(--vap-radio-sm);
  text-decoration: none;
  font-weight: 700;
  transition: top .15s ease;
}
.vap-saltar-al-contenido:focus {
  top: 0;
  color: #fff;
}

/* Botones — enlaces de texto elegantes: mayúsculas, sin relleno; al pasar
   el puntero aparecen el subrayado y una flecha hacia la derecha. */
.vap-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--vap-fuente-sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vap-celeste);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color .15s ease;
}
.vap-boton::before {
  /* subrayado: crece de izquierda a derecha al pasar el puntero */
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width .25s ease;
}
.vap-boton::after {
  /* flecha: aparece y se desplaza hacia la derecha al pasar el puntero */
  content: '\2192';
  display: inline-block;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .25s ease, margin-left .25s ease, opacity .2s ease;
}
.vap-boton:hover { color: var(--vap-verde-oscuro); }
.vap-boton:hover::before { width: 100%; }
.vap-boton:hover::after { width: 1em; margin-left: 8px; opacity: 1; }
.vap-boton--secundario { color: var(--vap-verde-amazonico); }
.vap-boton--secundario:hover { color: var(--vap-verde-oscuro); }

/* Sobre foto o sobre el fondo oscuro del hero (con o sin carrusel): el
   botón ya no trae su propio relleno de color, así que necesita blanco
   para leerse. */
.vap-hero-lamina__contenido .vap-boton,
.vap-hero__contenido .vap-boton,
.vap-papa__texto .vap-boton { color: #fff; }
.vap-hero-lamina__contenido .vap-boton:hover,
.vap-hero__contenido .vap-boton:hover,
.vap-papa__texto .vap-boton:hover { color: rgba(255,255,255,.8); }

/* ==========================================================================
   Cabecera + menú principal (ver header.php, js/nav.js)

   Reestructurada el 29/09/2026 siguiendo el mismo patrón que la cabecera
   de salesianosfs (ver claude\vap-pucallpa-sitio-web.md): ya no hay una
   franja de contacto separada — datos, redes, menú y el destacado viven
   todos dentro de este único <header> sticky.

   EN ESCRITORIO PASA A CSS GRID (29/09/2026, misma fecha, ronda aparte):
   a pedido de Rodo, con dos capturas comparando esta cabecera con la de
   salesianosfs, "el botón destacado debe quedar como el modelo, debe
   descolgar del header y montarse en el slider de abajo, y las redes
   deben estar encima de este botón". La base de aquí abajo (pensada
   mobile-first, en flexbox) sigue gobernando el móvil sin cambios; el
   bloque `@media (min-width: 1180px)` que aparece después del destacado
   la sustituye por la rejilla de dos filas que hace posible el vuelo —
   ver el comentario de ese bloque para el porqué.

   EL CORTE SUBIÓ DE 901px A 1180px (29/09/2026, ronda aparte, "cambia
   para que se vean como sucede en salesianosfs"): con el menú real del
   Vicariato (6 enlaces, dos con submenú) la fila del menú se quedaba sin
   sitio y envolvía a una segunda línea bastante antes de llegar al
   corte de 900px — exactamente el mismo problema que salesianosfs ya
   había resuelto subiendo su propio corte a 1100px (inc/cabecera.php,
   "la regla real no es '1100 px': es 'cuando la composición de tres
   columnas deja de tener sitio'"). Aquí el envoltorio de una sola línea
   se rompía entre 1100 y 1120px probado con el contenido real (ver
   claude\vap-pucallpa-sitio-web.md) — se eligió 1180px, con margen de
   sobra sobre ese punto de envoltura (1100-1120px). Mismo criterio que
   salesianosfs: "si el menú crece mucho, este número sube con él".
   (Nota, ronda aparte del 29/09/2026: `.vap-header__interior` subió su
   propio `max-width` de 1180px a 1560px para que la cabecera aproveche
   más ancho en pantallas grandes — ya no coincide con este número, pero
   como la rejilla de escritorio entra a partir de 1180px sin importar
   cuánto más ancha sea la cabecera, el menú sigue teniendo de sobra el
   mismo margen que cuando se probó.)
   ========================================================================== */
.vap-header {
  /* Mismo color que el fondo de la franja del Papa León XIV de Inicio
     (--vap-teal-mosaico), a pedido de Rodo (29/09/2026) — antes era
     --vap-celeste. El resto de la cabecera (texto, logo, buscador,
     destacado) ya usaba blanco/transparencias pensadas para un fondo
     oscuro, así que no necesitó ningún otro ajuste. */
  background: var(--vap-teal-mosaico);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(43,42,40,.08);
}
.vap-header__interior {
  /* Subido de 1180px a 1560px (29/09/2026, a pedido de Rodo: "dale más
     ancho al header cuando se trata de pantallas grandes") — con 1180px
     un monitor ancho (1920px o más) dejaba muchísimo aire vacío a los
     costados. 1560px es el mismo ancho de contenedor de sitio que usa
     salesianosfs (rsn-contenedor) para su propia cabecera y el resto de
     sus secciones anchas — no es un número al azar. El corte a modo
     escritorio de la rejilla (`@media (min-width: 1180px)`, más abajo)
     no depende de este valor: entra igual apenas la pantalla llega a
     1180px, y el menú sigue teniendo el mismo margen de sobra ya
     probado (ver el comentario de más arriba). */
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--vap-espacio-3) var(--vap-espacio-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vap-espacio-4);
  transition: padding .2s ease;
}
/* Cabecera "pegada" (js\nav.js agrega .vap-header--stuck al hacer
   scroll): el lockup completo (isotipo grande + nombre + lema) solo
   tiene sentido en la parte de arriba de la página. Ya sticky, se pasa
   a un logo bajo — isotipo pequeño + el nombre, sin el lema — para no
   ocupar tanta altura de pantalla mientras se navega. */
.vap-header--stuck .vap-header__interior {
  padding-top: 8px;
  padding-bottom: 8px;
}
.vap-header--stuck .vap-header__logo-emblema { height: 42px; }
.vap-header--stuck .vap-header__logo-lema { display: none; }
.vap-header--stuck .vap-header__logo-nombre { font-size: 16px; }
.vap-header__logo {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  min-width: 0; /* permite que el texto truncable no fuerce ancho en móvil */
}
/* El emblema debe notarse más que el texto: a propósito sobresale por
   arriba y por abajo del bloque nombre+lema en vez de quedar recortado a
   su misma altura.
   Bajado de 130px a 96px (29/09/2026, a pedido de Rodo, con una captura),
   y de 96px a 72px (29/09/2026, misma noche, nuevo pedido de Rodo: "que
   en el header el logo no empuje tanto el alto del header").
   POR QUÉ EL ALTO DEL EMBLEMA AFECTA AL ALTO DE TODA LA CABECERA: en
   escritorio (ver `@media (min-width: 1180px)` más abajo) el logo ocupa
   las DOS filas de la rejilla (`grid-area: 1/1/3/2`) para poder
   centrarse verticalmente junto a ellas — pero eso también significa que
   si el emblema es más alto que esas dos filas juntas (datos+redes
   arriba, menú abajo), la rejilla las estira para darle sitio: el logo
   "empuja" el alto de la cabecera entera, no solo el suyo propio. A
   96px ya empujaba de más; 72px queda mucho más cerca del alto natural
   de esas dos filas, así que la cabecera se ve más compacta sin
   necesidad de tocar la rejilla. (Nota: esto ya NO tiene relación con el
   destacado —que hasta la ronda anterior también dependía del alto del
   logo— porque desde la migración a CSS Grid el destacado se ancla solo
   a la fila del menú, ver su comentario más abajo; este cambio es
   puramente sobre el alto visual de la cabecera.) */
.vap-header__logo-emblema { display: block; height: 72px; width: auto; flex-shrink: 0; transition: height .2s ease; }
.vap-header__logo-texto { display: flex; flex-direction: column; line-height: 1.15; }
.vap-header__logo-nombre {
  font-family: var(--vap-fuente-display);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}
.vap-header__logo-lema {
  /* Alineado con el tratamiento del pie (.vap-footer__lema) y con la
     imagen institucional compartir-en-redes.jpg —Playfair Display en
     itálica, celeste-claro— a pedido de Rodo (30/09/2026, "revisa toda
     la identidad plasmada en el Sitio Web"): antes era Nunito Sans en
     mayúsculas y blanco, un tratamiento que no venía de ninguna pieza
     de marca y no coincidía con el pie ni con la tarjeta social. */
  font-family: var(--vap-fuente-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--vap-celeste-claro);
  margin-top: 4px;
}
@media (max-width: 480px) {
  .vap-header__logo-emblema { height: 68px; } /* header más compacto en pantallas angostas */
  .vap-header__logo-lema { display: none; } /* la cabecera angosta prioriza el nombre */
}

/* Columna derecha: datos de contacto + redes arriba, menú principal
   abajo — el mismo apilado de dos filas que la cabecera de salesianosfs.
   Es puro envoltorio semántico, "transparente" en la maquetación
   (display:contents): sus dos hijos (.vap-header__utilidades y .vap-nav)
   entran directos como hijos de .vap-header__interior y es ESE quien
   decide cómo se apilan — con `order` en el flexbox móvil de abajo, con
   `grid-area` en la rejilla de escritorio (ver el bloque
   `@media (min-width: 1180px)` más abajo, después del destacado). */
.vap-header__derecha { display: contents; }
.vap-header__utilidades {
  display: flex;
  align-items: center;
  gap: var(--vap-espacio-4);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.vap-header__datos { display: flex; gap: var(--vap-espacio-4); flex-wrap: wrap; }
.vap-header__datos a,
.vap-header__redes a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vap-header__datos a:hover,
.vap-header__redes a:hover { color: #fff; }
.vap-header__redes { display: flex; align-items: center; gap: var(--vap-espacio-3); }
.vap-icono--cabecera { width: 14px; height: 14px; opacity: .9; }

/* Cabecera "pegada": la fila de datos+redes se oculta — ya compactada
   la cabecera, compite por espacio con el menú y el destacado. */
.vap-header--stuck .vap-header__utilidades { display: none; }

/* --- El buscador de la cabecera --------------------------------------------
   Nace abierto en el marcado (header.php) y js/nav.js lo pliega a una lupa
   en escritorio — mismo patrón que salesianosfs (rsn-buscador). El estado
   por omisión de este CSS es el desplegado: si el script no llega a cargar,
   se ve y se usa igual. */
.vap-buscador { flex: 0 0 auto; }

.vap-buscador__forma {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--vap-radio-pill);
  padding: 2px 2px 2px 12px;
  transition: border-color .25s ease, background-color .25s ease;
}
.vap-buscador__forma:focus-within {
  border-color: #fff;
  background: rgba(255,255,255,.08);
}
.vap-buscador__campo {
  width: 150px;
  min-width: 0; /* lo que permite que el ancho llegue a 0 al plegarse */
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--vap-fuente-sans);
  font-size: 12.5px;
  padding: 6px 0;
  transition: width .3s cubic-bezier(.16,.84,.44,1), padding .3s ease, opacity .2s ease;
}
.vap-buscador__campo::placeholder { color: rgba(255,255,255,.7); opacity: 1; }
.vap-buscador__campo:focus { outline: none; }
.vap-buscador__campo::-webkit-search-cancel-button { opacity: .7; filter: invert(1); }
.vap-buscador__enviar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.vap-buscador__enviar:hover,
.vap-buscador__enviar:focus-visible { background: rgba(255,255,255,.18); color: #fff; }
.vap-buscador__lupa svg { width: 16px; height: 16px; display: block; }

/* Plegado: el campo se va a cero y queda la lupa. El borde desaparece para
   que no quede una cápsula vacía alrededor del icono. */
.vap-buscador--plegado .vap-buscador__forma { border-color: transparent; padding-left: 2px; }
.vap-buscador--plegado .vap-buscador__campo { width: 0; flex-basis: 0; padding: 6px 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .vap-buscador__campo, .vap-buscador__forma, .vap-buscador__enviar { transition: none; }
}

/* Botón hamburguesa — solo visible en móvil (ver el breakpoint más abajo) */
.vap-nav__interruptor {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.vap-nav__interruptor-barra {
  display: block;
  width: 100%; height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Menú principal — escritorio: fila horizontal, submenús por hover/focus */
.vap-nav__lista {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--vap-espacio-4);
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.vap-nav__item { position: relative; display: flex; align-items: center; }
.vap-nav__item > a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  padding: var(--vap-espacio-2) 0;
}
.vap-nav__item > a:hover { color: var(--vap-celeste-claro); }

.vap-nav__flecha {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 4px 2px;
  margin-left: 2px;
  font-size: 11px;
  line-height: 1;
}
.vap-nav__submenu {
  list-style: none;
  margin: 0;
  padding: var(--vap-espacio-2) 0;
  position: absolute;
  top: 100%; left: 0;
  min-width: 260px;
  background: var(--vap-superficie);
  border-radius: var(--vap-radio-sm);
  box-shadow: 0 12px 28px rgba(43,42,40,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 10;
}
.vap-nav__submenu a {
  display: block;
  padding: 10px var(--vap-espacio-4);
  color: var(--vap-ink);
  text-decoration: none;
  font-size: 14px;
}
.vap-nav__submenu a:hover { background: var(--vap-superficie-alt); color: var(--vap-verde-oscuro); }

/* Escritorio: abrir con :hover o :focus-within (teclado), o con la flecha */
@media (min-width: 1180px) {
  .vap-nav__item--con-hijos:hover .vap-nav__submenu,
  .vap-nav__item--con-hijos:focus-within .vap-nav__submenu,
  .vap-nav__item--abierto .vap-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* El destacado — la caja de color de la cabecera para la actividad
   vigente del Vicariato (hoy, la Visita Apostólica del Papa León XIV;
   ver inc/destacado-data.php). Mismo espíritu que el
   "rsn-cabecera-destacado" de salesianosfs: si no hay texto o URL,
   header.php no lo dibuja — nunca aparece una caja vacía.
   Misma FORMA que salesianosfs, a pedido de Rodo (29/09/2026, "el botón
   destacado que luzca igual") — el chaflán en V recortado con
   clip-path, la sombra como drop-shadow (no box-shadow, porque
   box-shadow dibujaría el rectángulo original, antes del recorte) y el
   mismo tratamiento al pasar el puntero. Los colores siguen siendo los
   del Vicariato (verde amazónico), no los de salesianosfs — "solo la
   estructura", como pidió Rodo.
   ASOMA POR DEBAJO DE LA CABECERA Y SE MONTA SOBRE EL CONTENIDO DE ABAJO
   —el carrusel de la portada, o la foto de encabezado de cada página
   interior (inc/encabezados.php)— igual que en salesianosfs. Esto se
   resolvió el 29/09/2026, a pedido de Rodo con dos capturas comparando
   esta cabecera con la de salesianosfs ("el botón destacado debe
   descolgar del header y montarse en el slider de abajo, y las redes
   deben estar encima de este botón"), y SOLO EN ESCRITORIO: el bloque
   `@media (min-width: 1180px)` de más abajo (después del menú móvil) es
   quien lo logra, con `align-self:stretch` sobre una fila propia de
   rejilla más un margen inferior negativo — el mismo truco de
   salesianosfs (rsn-cabecera-int, dos filas explícitas de grid).
   Ese `align-self:stretch` ya se había probado una vez en esta regla, en
   flexbox de una sola fila, y se revirtió por un bug (ver el historial
   en claude\vap-pucallpa-sitio-web.md, ronda "revertido
   align-self:stretch"): el destacado competía por altura con TODA la
   columna derecha (datos+redes+buscador+menú apilados), y en algún
   ancho de pantalla terminaba más alto que el menú y se montaba sobre la
   fila de arriba. Con la cabecera en rejilla el destacado ocupa SOLO la
   fila del menú —ninguna otra— así que ya no hay ambigüedad de a qué
   altura igualar; de ahí que ahora sí sea seguro volver a usarlo.
   En móvil (max-width:1179px, más abajo) NO se replica el vuelo: el
   destacado se queda dentro de su propia fila, sin superponerse a la
   fila de datos+redes+buscador que va justo debajo — en una pantalla
   angosta, con mucho menos aire de sobra, evitar ese roce vale más que
   la fidelidad total al modelo de escritorio. */
.vap-header__destacado {
  --vap-destacado-punta: 10px;
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 2px 2px 0 0;
  background: var(--vap-verde-amazonico);
  flex-shrink: 0;
  /* Centrado a su propio alto de contenido — válido para el móvil, que
     no toca esta propiedad. El bloque de escritorio de más abajo la
     sobrescribe con `align-self:stretch` (ver el porqué en el
     comentario de arriba). */
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--vap-destacado-punta)),
    50% 100%,
    0 calc(100% - var(--vap-destacado-punta))
  );
  filter: drop-shadow(0 4px 12px rgba(var(--vap-ink-rgb),.28));
  transition: background .18s ease, filter .18s ease, transform .18s ease;
}
.vap-header__destacado:hover {
  background: var(--vap-verde-oscuro);
  filter: drop-shadow(0 10px 20px rgba(var(--vap-ink-rgb),.4));
  transform: translateY(2px);
}
.vap-header__destacado-cara {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Más relleno abajo que arriba: la V ya aleja visualmente el
     subtítulo del canto, así que el relleno extra ahí solo agrandaría
     la caja sin necesidad. */
  padding: 10px 18px calc(8px + var(--vap-destacado-punta));
  color: var(--vap-ink);
  line-height: 1.2;
  transition: color .18s ease;
}
.vap-header__destacado:hover .vap-header__destacado-cara { color: #fff; }
.vap-header__destacado-titulo {
  font-family: var(--vap-fuente-sans);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.vap-header__destacado-sub {
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  margin-top: 2px;
}

/* --- Escritorio: la cabecera pasa a rejilla --------------------------------

   Calcada de la cabecera de salesianosfs (inc/cabecera.php,
   rsn-cabecera-int): dos filas explícitas, para poder anclar cada pieza
   a la suya en vez de a "toda la columna derecha" como hacía el flexbox
   de una sola fila de más arriba.

       fila 1 |  logo  |  datos · redes · buscador        |
       fila 2 | (sigue) |  MENÚ PRINCIPAL   |  DESTACADO  |

   La fila de utilidades cruza hasta la última columna —igual que en
   salesianosfs— así queda justo encima del destacado y alineada con su
   borde derecho ("las redes deben estar encima de este botón", pidió
   Rodo); sin ese cruce se quedaría dentro de la columna del menú y el
   destacado sobresaldría por su lado.

   El destacado ocupa solo la fila del menú y se estira a su alto exacto
   con `align-self:stretch` — ver el porqué eso es ahora seguro (y no lo
   era en el flexbox de una sola fila) en el comentario de la regla base
   de .vap-header__destacado, más arriba. Luego, un margen inferior
   negativo lo hace asomar por debajo del propio <header> y montarse
   sobre el carrusel de la portada o la foto de encabezado de cada
   página interior, igual que en salesianosfs.
   ------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .vap-header__interior {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--vap-espacio-4);
    row-gap: var(--vap-espacio-2);
  }

  .vap-header__logo      { grid-area: 1 / 1 / 3 / 2; }
  .vap-header__utilidades { grid-area: 1 / 2 / 2 / 4; justify-content: flex-end; }
  /* Menú principal alineado a la derecha de su columna (26/10/2026, a
     pedido de Rodo: "el menu principal que este alineado a la derecha y
     no la izquierda como se ve ahora") — antes el <ul> interior se quedaba
     pegado al borde izquierdo de esta columna (su `justify-content` por
     omisión es flex-start), muy cerca del logo. Solo afecta esta
     rejilla de escritorio: en móvil el menú se vuelve un panel vertical
     aparte (ver el `@media (max-width: 1179px)` de más abajo) y no debe
     tocarse. */
  .vap-nav                { grid-area: 2 / 2 / 3 / 3; display: flex; justify-content: flex-end; }

  .vap-header__destacado {
    /* Cuánto asoma por debajo de la cabecera, calcado de
       --destacado-baja en salesianosfs. */
    --vap-destacado-baja: 20px;
    grid-area: 2 / 3 / 3 / 4;
    align-self: stretch;
    /* Arranca a ras de la fila del menú y baja por debajo de la
       cabecera: el relleno inferior de .vap-header__interior
       (var(--vap-espacio-3)) más lo que debe asomar. */
    margin-block: 0 calc((var(--vap-espacio-3) + var(--vap-destacado-baja)) * -1);
    position: relative;
    z-index: 3;
  }

  .vap-header__destacado-cara {
    height: 100%;
    /* Apoyado arriba —no centrado— para que el título del destacado
       caiga en la misma línea que los enlaces del menú, en vez de
       quedar centrado en un bloque más alto y verse descolgado. */
    justify-content: flex-start;
    padding-top: calc(var(--vap-espacio-2) + 5px);
  }
}

/* Móvil: hamburguesa visible, menú se convierte en panel desplegable.
   .vap-header__derecha ya es display:contents siempre (ver más arriba),
   así que sus dos hijos —utilidades y nav— se ordenan aquí como filas
   propias del <header>, junto con el logo, el destacado y el botón de
   menú. NO se replica aquí el vuelo del destacado sobre el contenido de
   abajo (ver el comentario de ese bloque, arriba): en una pantalla
   angosta se solaparía con la fila de datos+redes+buscador que va justo
   debajo (order: 4). */
@media (max-width: 1179px) {
  .vap-header__interior { flex-wrap: wrap; }
  .vap-header__logo { order: 1; }
  .vap-nav__interruptor { display: flex; order: 2; }

  .vap-header__destacado { order: 3; flex-basis: 100%; margin-top: 4px; }

  .vap-header__utilidades {
    order: 4;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  /* En móvil el buscador no se pliega (ver la nota en js/nav.js: la fila
     de utilidades ya vive dentro del menú desplegable, que la persona
     abrió a propósito) — solo se angosta para que quepa junto a los
     datos de contacto sin desbordar. */
  .vap-buscador__campo { width: 110px; }

  .vap-nav {
    flex-basis: 100%;
    order: 5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .vap-nav--abierto { max-height: 1400px; }

  .vap-nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--vap-espacio-3) 0 var(--vap-espacio-4);
  }
  .vap-nav__item {
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .vap-nav__item > a { padding: var(--vap-espacio-3) 0; flex: 1 1 auto; }
  .vap-nav__flecha { font-size: 16px; padding: var(--vap-espacio-3) var(--vap-espacio-2); }

  .vap-nav__submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255,255,255,.08);
    border-radius: var(--vap-radio-sm);
    display: none;
    width: 100%;
  }
  .vap-nav__item--abierto .vap-nav__submenu { display: block; }
  .vap-nav__submenu a { color: #fff; }
  .vap-nav__submenu a:hover { background: rgba(255,255,255,.12); color: var(--vap-celeste-claro); }
}

.vap-footer {
  /* Mismo color que la cabecera (--vap-teal-mosaico), a pedido de Rodo
     (29/09/2026) — antes era --vap-celeste, igual que el header antes de
     su propio cambio de color. El texto y los enlaces del pie ya estaban
     en blanco/celeste-claro, pensados para un fondo oscuro, así que no
     hizo falta tocar nada más. .vap-noticias-pie y .vap-footer__creditos
     siguen en --vap-ink —un tono oscuro distinto— para que las tres
     franjas (noticias · pie · créditos) se sigan diferenciando entre sí. */
  background: var(--vap-teal-mosaico);
  color: #fff;
  padding: var(--vap-espacio-6) var(--vap-espacio-4) 0;
}
.vap-footer a { color: #fff; }
.vap-footer a:hover { color: var(--vap-celeste-claro); }
.vap-footer__grid {
  display: grid;
  /* 3 columnas simples otra vez (Logo | Contacto | Enlaces) — a pedido de
     Rodo (29/09/2026): la grid de 4 columnas era solo para que el mapa
     pudiera ocupar dos; sin mapa en el pie (ver docblock de footer.php),
     3 columnas iguales alcanzan. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vap-espacio-5);
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: var(--vap-espacio-6);
}
.vap-footer__col--info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vap-footer__col--info .vap-footer__redes { justify-content: center; }
/* Logo + nombre + lema del pie (29/09/2026, a pedido de Rodo: "agrandando
   el logo y mejorando la fuente de título y slogan") — antes era un
   emblema chico (72px) seguido de un solo <p> genérico a 14px en Nunito
   Sans, el mismo estilo que cualquier párrafo del pie: el nombre de la
   institución y su lema no tenían ningún tratamiento propio. Ahora:
   emblema más grande, y nombre/lema separados en dos líneas con la
   tipografía de títulos (Playfair Display) — el nombre en versalita
   firme, el lema en cursiva, como un mote institucional. */
.vap-footer__logo { display: block; height: 116px; width: auto; margin: 0 0 var(--vap-espacio-3); }
.vap-footer__nombre {
  font-family: var(--vap-fuente-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 4px;
}
.vap-footer__lema {
  font-family: var(--vap-fuente-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--vap-celeste-claro);
  margin: 0;
}
@media (max-width: 900px) {
  .vap-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .vap-footer__grid { grid-template-columns: 1fr; }
}
.vap-footer__creditos {
  /* Fondo distinto al del resto del footer institucional (preferencia de
     Rodo) — pero el texto en sí debe ser MUY discreto y alineado a la
     derecha (pedido explícito, 29/09/2026): antes era centrado, a 12.5px
     y con el enlace en negrita — se leía casi como un dato institucional
     más. Ahora es notablemente más chico y apagado (opacidad, sin
     negrita), alineado al borde derecho del mismo ancho de contenido que
     usa el resto del pie (max-width, margin:auto) para que el ojo lo
     note solo si lo busca. */
  background: var(--vap-ink);
  padding: 10px var(--vap-espacio-4);
}
.vap-footer__creditos-interior {
  max-width: 1180px;
  margin: 0 auto;
  text-align: right;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.vap-footer__creditos-interior a {
  color: rgba(255,255,255,.6);
  font-weight: 400;
}
.vap-footer__creditos-interior a:hover { color: var(--vap-celeste-claro); }
@media (max-width: 560px) {
  .vap-footer__creditos-interior { text-align: center; }
}
.vap-footer__col h3 {
  font-family: var(--vap-fuente-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--vap-espacio-3);
  color: var(--vap-celeste-claro);
}
.vap-footer__col p { margin: 0 0 var(--vap-espacio-2); font-size: 14px; line-height: 1.6; }
.vap-footer__dato { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.vap-icono--footer { flex: none; width: 18px; height: 18px; margin-top: 2px; opacity: .85; }
.vap-footer__redes { display: flex; gap: var(--vap-espacio-3); margin-top: var(--vap-espacio-3); }
.vap-footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.vap-footer__redes a:hover { background: rgba(255,255,255,.28); color: #fff; }
.vap-footer__enlaces { list-style: none; margin: 0; padding: 0; }
.vap-footer__enlaces li { margin-bottom: 10px; }
.vap-footer__enlaces a { font-size: 14px; text-decoration: none; }

/* ==========================================================================
   Listados de datos (Zonas pastorales, Comisiones) — page-zonas-pastorales.php,
   page-comisiones.php
   ========================================================================== */
.vap-contenido { max-width: 980px; margin: 0 auto; padding: var(--vap-espacio-6) var(--vap-espacio-4); }

/* Separación entre secciones dentro de una página interna — sin esto, el
   título de la sección siguiente queda pegado al párrafo/lista anterior
   porque solo hereda el margen por defecto (pequeño) del navegador. */
.vap-contenido h2,
.vap-contenido h3 {
  margin-top: var(--vap-espacio-6);
  margin-bottom: var(--vap-espacio-3);
}
.vap-contenido > h2:first-child,
.vap-contenido > h3:first-child,
.vap-contenido > .vap-intro:first-child + h2,
.vap-contenido > .vap-intro:first-child + h3 {
  margin-top: var(--vap-espacio-5);
}
.vap-contenido .vap-galeria {
  margin-bottom: var(--vap-espacio-2);
}

/* Foto decorativa suelta dentro del texto — page-quienes-somos.php,
   page-leon-xiv.php y cualquier otra página que necesite un descanso
   visual entre párrafos largos. */
.vap-foto-decorativa {
  margin: var(--vap-espacio-5) 0;
  border-radius: var(--vap-radio-md);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(43,42,40,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-foto-decorativa:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(43,42,40,.2); }
.vap-foto-decorativa img { width: 100%; height: 320px; object-fit: cover; display: block; }
.vap-foto-decorativa figcaption {
  padding: var(--vap-espacio-2) var(--vap-espacio-4);
  background: var(--vap-superficie-alt);
  font-size: 13px;
  color: var(--vap-verde-oscuro);
  font-weight: 700;
  text-align: center;
}
@media (max-width: 640px) {
  .vap-foto-decorativa img { height: 220px; }
}
.vap-zona, .vap-area {
  border: 1px solid var(--vap-celeste-claro);
  border-radius: var(--vap-radio-md);
  margin-bottom: var(--vap-espacio-5);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43,42,40,.07);
  transition: transform .15s ease, box-shadow .15s ease;
  /* Fila en zig-zag: la foto y el cuerpo (cabecera + lista) van lado a lado,
     alternando de lado con :nth-child(even), en vez de la foto siempre
     arriba — es lo que hacía ver la lista de Zonas/Comisiones como una
     cuadrícula repetida. align-items:stretch + background-size:cover en la
     foto hacen que ésta llene el alto de la fila sea cual sea el largo de
     la lista de parroquias/equipos de al lado. */
  display: flex;
  align-items: stretch;
}
.vap-zona:nth-child(even), .vap-area:nth-child(even) { flex-direction: row-reverse; }
.vap-zona:hover, .vap-area:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,42,40,.14); }
.vap-zona__foto, .vap-area__foto {
  flex: 0 0 300px;
  /* Alto mínimo: una zona con una sola parroquia (ej. Purús) tiene un
     cuerpo muy corto, y sin esto la foto se encogería con él. */
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--vap-superficie-alt);
  transition: transform .3s ease;
}
.vap-zona:hover .vap-zona__foto, .vap-area:hover .vap-area__foto { transform: scale(1.05); }
.vap-zona__cuerpo, .vap-area__cuerpo { flex: 1 1 auto; min-width: 0; }
@media (max-width: 760px) {
  .vap-zona, .vap-area { display: block; }
  .vap-zona:nth-child(even), .vap-area:nth-child(even) { flex-direction: row; }
  .vap-zona__foto, .vap-area__foto { height: 190px; }
}
.vap-zona__cabecera, .vap-area__cabecera {
  background: var(--vap-superficie-alt);
  padding: var(--vap-espacio-3) var(--vap-espacio-4);
  font-family: var(--vap-fuente-display);
  font-size: 21px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--vap-espacio-2);
}
.vap-zona__coordinador, .vap-area__lineas { font-family: var(--vap-fuente-sans); font-size: 13px; color: var(--vap-verde-oscuro); font-weight: 700; }
.vap-parroquia, .vap-comision {
  padding: var(--vap-espacio-3) var(--vap-espacio-4);
  border-top: 1px solid var(--vap-superficie-alt);
}
.vap-parroquia__nombre, .vap-comision__nombre { font-weight: 700; }
.vap-parroquia__detalle, .vap-comision__detalle { font-size: 13px; color: #5A6570; margin-top: 2px; }
/* Párrafo opcional para un "punto" que no es una parroquia sino una
   institución con historia propia (15/10/2026: el Seminario Amazónico
   Intervicarial del Perú, en Zona 8) — la mayoría de los puntos no lo
   usan, solo aparece cuando inc/zonas-data.php trae 'descripcion'. */
.vap-parroquia__descripcion { font-size: 13.5px; line-height: 1.6; color: var(--vap-ink); margin: 6px 0 0; }
.vap-comision__proposito { margin-top: var(--vap-espacio-2); font-size: 14.5px; line-height: 1.55; }

/* ==========================================================================
   Inicio — front-page.php
   ========================================================================== */
.vap-hero {
  background: var(--vap-teal-mosaico);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: var(--vap-espacio-6) var(--vap-espacio-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.vap-hero__contenido { max-width: 720px; text-align: center; }
.vap-hero__titulo { font-size: 40px; color: #fff; margin: 0 0 var(--vap-espacio-3); }
.vap-hero__bajada { font-size: 17px; line-height: 1.6; margin: 0 0 var(--vap-espacio-4); }
.vap-hero__acciones { display: flex; gap: var(--vap-espacio-3); justify-content: center; flex-wrap: wrap; }

/* Franja inspiradora con efecto parallax (30/09/2026, a pedido de Rodo:
   "entre MISION VISION y NUESTRAS OBRAS coloca una imagen con efecto
   parallax con gradiente claro arriba oscuro abajo con un texto alineado
   al centro y zona inferior con un mensaje inspirador") — foto real de
   una procesión de la Virgen del Vicariato (img/inicio-inspiracion.jpg,
   recortada de Recursos/Fotos para excluir un semáforo que quedaba en el
   encuadre original). El degradado va de más transparente arriba —para
   que se note el cielo real de la foto— a más oscuro abajo, mismo
   criterio de contraste que ya usa el carrusel de portada
   (front-page.php, `rgba(20,25,23,…)` sobre las láminas del hero), no
   una fórmula nueva. El texto se ancla a la zona inferior (`align-items:
   flex-end`), que es donde el degradado es más oscuro y por lo tanto
   más legible.
   `background-attachment:fixed` es lo que da el efecto de profundidad
   (la foto se queda fija mientras la página se desplaza) — se desactiva
   en móvil porque iOS/Android lo manejan mal (se traba o directamente
   no se ve el fondo); en pantallas chicas alcanza con el scroll normal. */
.vap-parallax-inspiracion {
  background-image:
    linear-gradient(180deg, rgba(10,20,18,.18) 0%, rgba(9,16,15,.55) 60%, rgba(7,12,12,.82) 100%),
    url('img/inicio-inspiracion.jpg');
  background-size: cover;
  background-position: center 78%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--vap-espacio-6) var(--vap-espacio-4) var(--vap-espacio-6);
}
.vap-parallax-inspiracion__contenido { max-width: 760px; text-align: center; }
.vap-parallax-inspiracion__eyebrow {
  font-family: var(--vap-fuente-sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  font-weight: 700;
  color: var(--vap-celeste-claro);
  margin: 0 0 var(--vap-espacio-2);
}
.vap-parallax-inspiracion__mensaje {
  font-family: var(--vap-fuente-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.55;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
@media (max-width: 900px) {
  .vap-parallax-inspiracion {
    background-attachment: scroll;
    min-height: 380px;
    padding: var(--vap-espacio-5) var(--vap-espacio-3) var(--vap-espacio-5);
  }
}

/* ==========================================================================
   Franja del Papa León XIV — Inicio (29/09/2026, ver inc/papa-franja.php)

   Reemplaza al carrusel de "Últimas noticias" que iba antes en este lugar
   de la página — el pie de página ya repite esa sección en TODO el sitio,
   así que aquí se promociona en su lugar la Visita Apostólica, con la foto
   oficial que entregó el cliente. Mismo fondo teal-mosaico que el hero sin
   carrusel (.vap-hero), para que se lea como la misma familia de "franja
   de marca sobre foto/color oscuro" del resto del sitio.
   ========================================================================== */
.vap-papa { background: var(--vap-teal-mosaico); overflow: hidden; }
.vap-papa__interior {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--vap-espacio-6) var(--vap-espacio-4);
  display: flex;
  align-items: center;
  gap: var(--vap-espacio-6);
}
.vap-papa__texto { flex: 1 1 380px; color: #fff; }
.vap-papa__etiqueta {
  display: inline-block;
  font-family: var(--vap-fuente-sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vap-celeste-claro);
  margin-bottom: var(--vap-espacio-2);
}
.vap-papa__titulo { font-size: 32px; color: #fff; margin: 0 0 var(--vap-espacio-2); }
.vap-papa__lema {
  font-family: var(--vap-fuente-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--vap-celeste-claro);
  margin: 0 0 var(--vap-espacio-3);
}
.vap-papa__fecha {
  display: inline-flex;
  align-items: center;
  gap: var(--vap-espacio-2);
  font-weight: 700;
  font-size: 14px;
  background: rgba(255,255,255,.14);
  padding: var(--vap-espacio-2) var(--vap-espacio-3);
  border-radius: var(--vap-radio-pill);
  margin: 0 0 var(--vap-espacio-4);
}
.vap-papa__icono-fecha { width: 18px; height: 18px; flex: none; }
.vap-papa__cuerpo { font-size: 16px; line-height: 1.6; opacity: .92; margin: 0 0 var(--vap-espacio-4); max-width: 52ch; }
.vap-papa__foto { flex: 0 1 320px; text-align: center; }
.vap-papa__foto img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 34px rgba(var(--vap-ink-rgb),.35));
  /* La foto oficial (img/papa-leon-xiv.png) viene recortada a media altura
     del alba — un corte recto que, sobre el fondo de la franja, se ve
     como si la imagen estuviera "cortada" (26/10/2026, a pedido de Rodo:
     "pega la foto del papa a la franja para que no aparezca cortado").
     En vez de recortar la foto de nuevo, se desvanece su borde inferior
     con una máscara CSS: el último 22% de la altura pasa a transparente,
     así el alba se difumina en el fondo verde-azulado en lugar de
     terminar en una línea recta. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
@media (max-width: 900px) {
  .vap-papa__interior { flex-direction: column; text-align: center; padding: var(--vap-espacio-5) var(--vap-espacio-4); gap: var(--vap-espacio-4); }
  .vap-papa__foto { order: -1; flex-basis: auto; max-width: 260px; }
  .vap-papa__fecha { margin-left: auto; margin-right: auto; }
  .vap-papa__cuerpo { max-width: none; }
}

/* ==========================================================================
   Popup de la Visita Apostólica — solo Inicio (26/10/2026, a pedido de
   Rodo: "Añade un popup al home con una foto del papa con la catedral de
   pucallpa que dirija a la pagina leon-xiv"). Marcado en
   inc/papa-popup.php, comportamiento en js/popup-papa.js (se enqueda solo
   en Inicio, igual que vap-carrusel/vap-cifras — ver functions.php).
   ========================================================================== */
.vap-popup-papa {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vap-espacio-4);
}
.vap-popup-papa[hidden] { display: none; }
.vap-popup-papa__fondo {
  position: absolute;
  inset: 0;
  background: rgba(var(--vap-ink-rgb), .7);
}
.vap-popup-papa__tarjeta {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow: hidden auto;
  background: var(--vap-superficie);
  border-radius: var(--vap-radio-md);
  box-shadow: 0 30px 60px rgba(var(--vap-ink-rgb), .4);
  animation: vap-popup-papa-entra .25s ease both;
}
@keyframes vap-popup-papa-entra {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.vap-popup-papa__cerrar {
  position: absolute;
  top: var(--vap-espacio-2);
  right: var(--vap-espacio-2);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--vap-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.vap-popup-papa__cerrar:hover,
.vap-popup-papa__cerrar:focus-visible { background: #fff; }
.vap-popup-papa__imagen {
  flex: 1 1 42%;
  min-height: 240px;
  background-size: cover;
  background-position: center;
}
.vap-popup-papa__texto {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--vap-espacio-5) var(--vap-espacio-4);
}
.vap-popup-papa__etiqueta {
  font-family: var(--vap-fuente-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vap-teal-mosaico);
  margin-bottom: var(--vap-espacio-2);
}
.vap-popup-papa__titulo { font-size: 23px; color: var(--vap-teal-mosaico); margin: 0 0 var(--vap-espacio-2); }
.vap-popup-papa__cuerpo { font-size: 14.5px; line-height: 1.6; color: var(--vap-ink); margin: 0 0 var(--vap-espacio-3); }
@media (max-width: 680px) {
  .vap-popup-papa__tarjeta { flex-direction: column; }
  .vap-popup-papa__imagen { min-height: 180px; flex-basis: auto; }
  .vap-popup-papa__texto { padding: var(--vap-espacio-4); }
}
@media (prefers-reduced-motion: reduce) {
  .vap-popup-papa__tarjeta { animation: none; }
}
/* Bloquea el scroll del fondo mientras el popup está abierto (js/popup-papa.js) */
body.vap-sin-scroll { overflow: hidden; }

/* ==========================================================================
   Carrusel genérico — hero de Inicio y últimas noticias (ver js/carrusel.js)
   ========================================================================== */
.vap-carrusel { position: relative; overflow: hidden; }
.vap-carrusel__pista { position: relative; }
.vap-carrusel__lamina {
  display: none;
  animation: vap-carrusel-aparece .4s ease;
}
.vap-carrusel__lamina.esta-visible { display: block; }
@keyframes vap-carrusel-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vap-carrusel__lamina { animation: none; }
}

.vap-carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.vap-carrusel__flecha:hover { background: rgba(0,0,0,.55); }
.vap-carrusel__flecha--atras { left: var(--vap-espacio-3); }
.vap-carrusel__flecha--adelante { right: var(--vap-espacio-3); }

.vap-carrusel__puntos {
  position: absolute;
  left: 50%;
  bottom: var(--vap-espacio-3);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}
.vap-carrusel__punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: .75;
}
.vap-carrusel__punto[aria-selected="true"] { background: #fff; opacity: 1; }

/* Variante hero: fotografías a pantalla ancha con degradado y texto encima */
.vap-carrusel--hero { min-height: 520px; }
.vap-hero-lamina {
  min-height: 520px;
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
  padding: var(--vap-espacio-6) var(--vap-espacio-4);
}
/* display:flex solo cuando está visible — si no, esta regla (misma
   especificidad que .vap-carrusel__lamina, pero declarada después)
   pisaba el display:none y hacía que todas las láminas del hero
   aparecieran apiladas a la vez en vez de una por una. */
.vap-hero-lamina.esta-visible {
  display: flex;
}
.vap-hero-lamina__contenido { max-width: 760px; text-align: center; color: #fff; }
.vap-hero-lamina__contenido .vap-hero__titulo,
.vap-hero-lamina__contenido .vap-hero__bajada { color: #fff; }
.vap-hero__titulo--h2 { font-size: 40px; margin: 0 0 var(--vap-espacio-3); font-family: var(--vap-fuente-display); font-weight: 700; }
.vap-carrusel--hero .vap-carrusel__flecha { width: 52px; height: 52px; font-size: 28px; }
.vap-carrusel__puntos--hero { bottom: var(--vap-espacio-4); }

@media (max-width: 640px) {
  .vap-carrusel--hero, .vap-hero-lamina { min-height: 420px; }
  .vap-hero-lamina__contenido .vap-hero__titulo,
  .vap-hero__titulo--h2 { font-size: 28px; }
}

/* ==========================================================================
   Carrusel de Inicio ligado a noticias reales — inc/portada-inicio.php,
   js/portada.js. A pedido de Rodo (29/09/2026, "que las imágenes
   coincidan con las noticias"), mismas clases y mecanismo que el
   "rsn-portada" de salesianosfs (scroll-snap, no JavaScript moviendo
   posiciones): si js/portada.js no llega a cargar, sigue siendo una
   tira desplazable con todas las noticias accesibles. Reemplaza al
   carrusel de fotos genérico (.vap-carrusel--hero, arriba) mientras la
   categoría "En Inicio" tenga alguna noticia publicada con foto.
   ========================================================================== */
.vap-portada {
  /* Alto de la lámina: la pantalla entera menos la cabecera, con un
     mínimo para que el titular no se quede sin sitio en una ventana muy
     baja. 190px es la cabecera del VAP sin comprimir (el emblema mide
     130px de alto) — un poco más que la de salesianosfs porque el
     logotipo del VAP es más grande. */
  --vap-portada-hueco: 190px;
  --vap-portada-espera:  1s;
  --vap-portada-barrido: 1.125s;
  --vap-portada-zoom: var(--vap-portada-duracion, 6s);
  --vap-portada-alto: max(440px, calc(100vh - var(--vap-portada-hueco)));

  position: relative;
  background: var(--vap-ink);
  overflow: hidden;
}
@supports (height: 100svh) {
  .vap-portada { --vap-portada-alto: max(440px, calc(100svh - var(--vap-portada-hueco))); }
}
.admin-bar .vap-portada { --vap-portada-hueco: 222px; }

.vap-portada__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vap-portada__pista::-webkit-scrollbar { display: none; }

.vap-portada__lamina {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: var(--vap-portada-alto);
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

.vap-portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Subido a propósito: en fotos de grupo o de actos, las caras suelen
     estar en el tercio superior — recortar desde el centro las corta. */
  object-position: center 30%;
  transform-origin: center 30%;
}

@keyframes vap-portada-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.vap-portada__lamina.es-actual .vap-portada__foto {
  animation: vap-portada-zoom
    var(--vap-portada-zoom)
    linear
    calc(var(--vap-portada-espera) + var(--vap-portada-barrido))
    both;
}
@media (prefers-reduced-motion: reduce) {
  .vap-portada__lamina.es-actual .vap-portada__foto { animation: none; }
  .vap-portada__lamina.es-actual .vap-portada__texto::before { animation: none; }
  .vap-portada__pista { scroll-behavior: auto; }
}

.vap-portada__texto {
  position: relative;
  align-self: end;
  width: 100%;
  padding: 50px clamp(1rem, 4vw, 3rem) calc(var(--vap-espacio-6) + 92px);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vap-portada__texto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(var(--vap-ink-rgb),0) 0%, rgba(var(--vap-ink-rgb),.5) 100%);
}
@keyframes vap-portada-barrido {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
.vap-portada__lamina.es-actual .vap-portada__texto::before {
  animation: vap-portada-barrido var(--vap-portada-barrido)
    cubic-bezier(.22,.61,.36,1) var(--vap-portada-espera) both;
}
.vap-portada__texto > * { max-width: 900px; width: 100%; text-align: center; }
.vap-portada__texto > .vap-portada__fecha { width: auto; }

.vap-portada__fecha {
  display: inline-block;
  width: auto;
  font-family: var(--vap-fuente-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vap-oliva-claro);
  margin: var(--vap-espacio-4) 0 0;
  padding: var(--vap-espacio-2) var(--vap-espacio-4);
  background: rgba(var(--vap-ink-rgb),.7);
  border-radius: var(--vap-radio-pill);
}

.vap-portada__titulo { margin: 0; text-align: center; text-wrap: balance; }
.vap-portada__titulo a {
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(var(--vap-ink-rgb),.85), 0 4px 26px rgba(var(--vap-ink-rgb),.75);
  transition: color .15s ease;
}
.vap-portada__titulo a:hover,
.vap-portada__titulo a:focus-visible { color: var(--vap-celeste-claro); }

/* --- La tira de miniaturas: la misma ventana de N que salesianosfs,
   leída también por js/portada.js (--vap-portada-visibles). --------------- */
.vap-portada { --vap-portada-visibles: 2; }
@media (min-width: 700px)  { .vap-portada { --vap-portada-visibles: 3; } }
@media (min-width: 1000px) { .vap-portada { --vap-portada-visibles: 4; } }
@media (min-width: 1280px) { .vap-portada { --vap-portada-visibles: 5; } }
@media (min-width: 1600px) { .vap-portada { --vap-portada-visibles: 6; } }

.vap-portada__tira {
  position: absolute;
  left: clamp(.5rem, 2vw, 3rem);
  right: clamp(.5rem, 2vw, 3rem);
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vap-portada__tira::-webkit-scrollbar { display: none; }
.vap-portada__mini:first-child { margin-left: auto; }
.vap-portada__mini:last-child  { margin-right: auto; }
.vap-portada__mini {
  flex: 0 0 auto;
  width: calc(100% / var(--vap-portada-visibles, 4));
  scroll-snap-align: start;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: var(--vap-espacio-3);
  padding: var(--vap-espacio-3);
  background: rgba(var(--vap-ink-rgb),.55);
  backdrop-filter: blur(6px);
  border: 0;
  border-top: 3px solid transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.vap-portada__mini:hover,
.vap-portada__mini:focus-visible { background: rgba(var(--vap-ink-rgb),.78); }
.vap-portada__mini[aria-selected="true"] {
  background: rgba(var(--vap-ink-rgb),.88);
  border-top-color: var(--vap-verde-amazonico);
}
.vap-portada__mini-foto {
  flex: 0 0 auto;
  width: 56px; height: 42px;
  object-fit: cover;
  border-radius: var(--vap-radio-sm);
}
.vap-portada__mini-titulo {
  font-family: var(--vap-fuente-sans);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Flechas y pausa ------------------------------------------------------ */
.vap-portada__flecha,
.vap-portada__pausa {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: rgba(var(--vap-ink-rgb),.45);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.vap-portada__flecha:hover,
.vap-portada__pausa:hover,
.vap-portada__flecha:focus-visible,
.vap-portada__pausa:focus-visible { background: rgba(var(--vap-ink-rgb),.8); }
.vap-portada__flecha { top: calc(50% - 46px); transform: translateY(-50%); }
.vap-portada__flecha--antes   { left: clamp(.5rem, 2vw, 2rem); }
.vap-portada__flecha--despues { right: clamp(.5rem, 2vw, 2rem); }
.vap-portada__pausa { top: var(--vap-espacio-4); right: clamp(.5rem, 2vw, 2rem); width: 38px; height: 38px; }
.vap-portada__pausa-icono { width: 11px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vap-portada--pausada .vap-portada__pausa-icono {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

@media (max-width: 780px) {
  .vap-portada { --vap-portada-hueco: 200px; }
  .vap-portada__texto { padding: 40px var(--vap-espacio-4) calc(var(--vap-espacio-5) + 76px); }
  .vap-portada__flecha { display: none; }
}

.vap-intro { font-size: 16px; line-height: 1.65; max-width: 760px; margin: 0 auto var(--vap-espacio-5); text-align: center; }

/* ==========================================================================
   "En cifras" — front-page.php, justo debajo del carrusel del hero.

   Franja blanca y plana, sin tarjetas ni degradado: número grande + rótulo
   pequeño en versalitas, separados por un filete corto — al estilo de la
   maqueta de referencia de EDUBRIDGES (colegiosalesiano/inc/cifras.php),
   no cajas con sombra. Va entre el carrusel (foto) y "Nuestro Obispo" (fondo
   --vap-superficie-alt): una banda clara entre dos más oscuras, que es lo
   que le da respiración a la página.
   ========================================================================== */
.vap-seccion--cifras {
  background: var(--vap-superficie);
  border-bottom: 1px solid var(--vap-celeste-claro);
}
.vap-cifras-contenedor {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: var(--vap-espacio-4);
}
.vap-cifras-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--vap-espacio-5);
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}
@media (min-width: 1024px) {
  .vap-cifras-grid {
    grid-template-columns: repeat(var(--vap-cifras-n, 4), 1fr);
    row-gap: 0;
  }
}
.vap-cifra {
  position: relative;
  text-align: center;
  padding: var(--vap-espacio-2) var(--vap-espacio-4);
  min-width: 0;
}
/* El filete, corto y centrado — no un borde de celda; separa sin dividir. */
.vap-cifra::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: clamp(42px, 4vw, 58px);
  background: var(--vap-celeste-claro);
}
.vap-cifra:nth-child(odd)::before { display: none; }
/* Con un número impar de cifras, la última se centra bajo las de arriba. */
@media (max-width: 1023px) {
  .vap-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .vap-cifra:nth-child(odd)::before { display: block; }
  .vap-cifra:first-child::before { display: none; }
}
.vap-cifra__numero {
  display: block;
  font-family: var(--vap-fuente-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vap-ink);
  margin: 0 0 var(--vap-espacio-2);
  font-variant-numeric: tabular-nums;
}
/* A partir de 5 cifras el cuerpo baja para que quepan sin apretarse. */
.vap-cifras-grid--compacta .vap-cifra__numero {
  font-size: clamp(1.75rem, 1rem + 1.9vw, 2.4rem);
}
.vap-cifra__etiqueta {
  display: block;
  font-family: var(--vap-fuente-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--vap-verde-oscuro);
  text-wrap: balance;
}

/* ==========================================================================
   Secciones nuevas de Inicio — Obispo, Misión/Visión, Obras (front-page.php)
   ========================================================================== */
.vap-seccion { padding: var(--vap-espacio-6) 0; }
.vap-seccion--obispo {
  background: var(--vap-superficie-alt);
  position: relative;
}
.vap-seccion__titulo { text-align: center; margin: 0 0 var(--vap-espacio-5); }

.vap-bio--portada { align-items: center; }
.vap-bio__retrato--vacio {
  flex: 0 0 240px;
  height: 240px;
  border-radius: var(--vap-radio-md);
  background: linear-gradient(135deg, var(--vap-celeste-claro), var(--vap-celeste));
}

/* .vap-tarjetas--citas reutiliza .vap-tarjetas (flex, ver más abajo) con
   tarjetas más anchas — sus hijos son .vap-cita--portada, no .vap-tarjeta,
   así que llevan su propio ancho. */
.vap-tarjetas--citas .vap-cita--portada { flex: 1 1 280px; max-width: 460px; }
.vap-cita--portada { margin: 0; background: var(--vap-superficie); border: 1px solid var(--vap-superficie-alt); }

.vap-enlaces-relacionados--centrado { justify-content: center; }

/* flex y no grid con auto-fit: con grid, la última fila incompleta deja
   las tarjetas huérfanas pegadas a la izquierda (las columnas vacías que
   siguen no se reparten). Con flex-wrap + justify-content:center, la
   fila incompleta se centra sola — mismo criterio que ya se usó en
   .vap-obras-grid. Aplica a TODO el sitio: es el mismo componente en
   León XIV, Quiénes somos, Obras de Inicio, etc. (29/09/2026, a pedido
   de Rodo con una captura de "Qué representa el logo" con 4 tarjetas en
   3 columnas). */
.vap-tarjetas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-4);
}
.vap-tarjeta {
  display: block;
  flex: 1 1 240px;
  max-width: 340px;
  background: var(--vap-superficie-alt);
  border-radius: var(--vap-radio-md);
  padding: var(--vap-espacio-4);
  text-decoration: none;
  color: var(--vap-ink);
  box-shadow: 0 4px 14px rgba(43,42,40,.08);
  transition: transform .15s ease, box-shadow .15s ease;
  border-top: 3px solid var(--vap-celeste);
}
.vap-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(43,42,40,.16); }
a.vap-tarjeta:hover { color: var(--vap-ink); }
.vap-tarjeta--estatica { cursor: default; }
/* Variedad de color por tarjeta — sin esto, una cuadrícula de 6-8 tarjetas
   idénticas (mismo fondo, mismo remate) es justo el efecto "cuadriculado"
   que se pidió romper. Ciclan por la paleta de marca, no colores nuevos. */
.vap-tarjeta:nth-child(4n+2) { border-top-color: var(--vap-verde-amazonico); }
.vap-tarjeta:nth-child(4n+3) { border-top-color: var(--vap-marron-raiz); }
.vap-tarjeta:nth-child(4n+4) { border-top-color: var(--vap-teal-mosaico); }
.vap-tarjeta__titulo { font-family: var(--vap-fuente-display); font-size: 19px; margin-bottom: var(--vap-espacio-2); }
.vap-tarjeta__texto { font-size: 14px; line-height: 1.55; color: #45504a; }
.vap-tarjetas--lineas { margin-bottom: var(--vap-espacio-5); }

.vap-enlaces-relacionados { display: flex; gap: var(--vap-espacio-3); flex-wrap: wrap; margin-top: var(--vap-espacio-5); }

/* ==========================================================================
   Citas (Misión/Visión) — page-quienes-somos.php
   ========================================================================== */
.vap-cita {
  border-left: 4px solid var(--vap-celeste);
  background: var(--vap-superficie-alt);
  border-radius: 0 var(--vap-radio-md) var(--vap-radio-md) 0;
  margin: 0 0 var(--vap-espacio-4);
  padding: var(--vap-espacio-4);
  font-family: var(--vap-fuente-display);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  box-shadow: 0 4px 14px rgba(43,42,40,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-cita:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43,42,40,.13); }

/* ==========================================================================
   Nuestro Obispo — page-obispo.php
   ========================================================================== */
.vap-bio { display: flex; gap: var(--vap-espacio-5); flex-wrap: wrap; align-items: flex-start; }
.vap-bio__retrato { flex: 0 0 240px; }
.vap-bio__retrato img {
  width: 100%; height: auto;
  border-radius: var(--vap-radio-md);
  display: block;
  box-shadow: 0 8px 22px rgba(43,42,40,.14);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-bio__retrato img:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(43,42,40,.22); }
/* Página completa del Obispo (page-obispo.php): foto más alta que la
   miniatura de la portada — se recorta con object-fit para no depender
   de qué tan vertical sea la foto que suba el Vicariato. */
.vap-bio--pagina .vap-bio__retrato { flex-basis: 300px; }
.vap-bio--pagina .vap-bio__retrato img { height: 420px; object-fit: cover; }
@media (max-width: 640px) {
  .vap-bio--pagina .vap-bio__retrato img { height: 320px; }
}
.vap-bio__texto { flex: 1 1 380px; }
.vap-bio__nombre { font-family: var(--vap-fuente-display); font-size: 21px; margin-bottom: var(--vap-espacio-4); }
.vap-bio__cargo { font-family: var(--vap-fuente-sans); font-size: 14px; font-weight: 700; color: var(--vap-verde-oscuro); }

/* ==========================================================================
   La Catedral — page-catedral.php
   ========================================================================== */
/* flex y no grid con auto-fit: ver nota junto a .vap-tarjetas más abajo
   sobre por qué se evita que la última fila incompleta quede huérfana a
   la izquierda (29/09/2026, "centra las cajas que están huérfanas..."). */
.vap-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-3);
  margin-top: var(--vap-espacio-3);
}
.vap-galeria > a { flex: 1 1 200px; max-width: 280px; }
.vap-galeria img {
  width: 100%; height: 160px;
  object-fit: cover;
  border-radius: var(--vap-radio-sm);
  display: block;
  box-shadow: 0 4px 12px rgba(43,42,40,.1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-galeria img:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 28px rgba(43,42,40,.2); }
.vap-galeria a { cursor: zoom-in; }

/* Visor de fotos (lightbox) — js/galeria.js. Se abre encima de cualquier
   .vap-galeria; una sola instancia reutilizada por toda la página. */
body.vap-lightbox-abierto { overflow: hidden; }
.vap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,19,17,.94);
  padding: var(--vap-espacio-4);
}
/* Sin esto, el navegador aplica display:flex de la regla de arriba con más
   prioridad que su propio [hidden] (una hoja de autor siempre gana a la hoja
   del navegador aunque la especificidad sea igual): el visor se quedaba
   pintado en pantalla incluso después de cerrarlo con la X, tapando toda la
   página. Esta regla, más específica, es la que de verdad lo oculta. */
.vap-lightbox[hidden] {
  display: none;
}
.vap-lightbox__marco {
  margin: 0;
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vap-lightbox__imagen {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--vap-radio-sm);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.vap-lightbox__contador {
  margin-top: var(--vap-espacio-2);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 700;
}
.vap-lightbox__cerrar,
.vap-lightbox__flecha {
  position: fixed;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.vap-lightbox__cerrar:hover,
.vap-lightbox__flecha:hover { background: rgba(255,255,255,.28); }
.vap-lightbox__cerrar {
  top: var(--vap-espacio-3);
  right: var(--vap-espacio-3);
  width: 44px; height: 44px;
  border-radius: var(--vap-radio-pill);
  font-size: 26px;
  line-height: 1;
}
.vap-lightbox__flecha {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: var(--vap-radio-pill);
  font-size: 30px;
}
.vap-lightbox__flecha:hover { transform: translateY(-50%) scale(1.06); }
.vap-lightbox__flecha--atras { left: var(--vap-espacio-3); }
.vap-lightbox__flecha--adelante { right: var(--vap-espacio-3); }
@media (max-width: 640px) {
  .vap-lightbox__flecha { width: 40px; height: 40px; font-size: 24px; }
}

/* ==========================================================================
   Obras — page-obras.php
   ========================================================================== */
.vap-obras-subseccion { margin-bottom: var(--vap-espacio-6); }
.vap-obras-subseccion__foto {
  height: 280px;
  border-radius: var(--vap-radio-md);
  background-size: cover;
  background-position: center;
  background-color: var(--vap-superficie-alt);
  box-shadow: 0 10px 24px rgba(43,42,40,.14);
  margin-bottom: var(--vap-espacio-4);
}
@media (max-width: 640px) {
  .vap-obras-subseccion__foto { height: 200px; }
}
.vap-obras-subseccion h2 { margin-top: 0; text-align: center; }
/* Flex en vez de grid: con grid + auto-fit, la última fila incompleta
   estiraba sus cajas para rellenar todo el ancho (se veían desparejas);
   con flex-wrap + justify-content:center las cajas mantienen un tamaño
   parecido entre sí y, si sobra una en la última fila, queda centrada
   en vez de ocupar ella sola todo el ancho. */
.vap-obras-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-3);
}
.vap-obra-tarjeta {
  flex: 1 1 220px;
  max-width: 300px;
  text-align: center;
  background: var(--vap-superficie);
  border: 1px solid var(--vap-celeste-claro);
  border-radius: var(--vap-radio-sm);
  padding: var(--vap-espacio-3) var(--vap-espacio-4);
  box-shadow: 0 4px 12px rgba(43,42,40,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-obra-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(43,42,40,.16); }
.vap-obra-tarjeta__nombre { font-weight: 700; }
.vap-obra-tarjeta__responsable { font-size: 13px; color: #5A6570; margin-top: 4px; }

/* ==========================================================================
   Visita del Papa León XIV — page-leon-xiv.php
   ========================================================================== */
.vap-leon-xiv-logo { display: block; max-width: 260px; height: auto; margin: 0 auto var(--vap-espacio-4); }
.vap-lema { text-align: center; font-family: var(--vap-fuente-display); font-size: 24px; color: var(--vap-teal-mosaico); margin-bottom: var(--vap-espacio-5); }
.vap-itinerario { margin: var(--vap-espacio-3) 0; }
.vap-itinerario__item {
  display: flex;
  gap: var(--vap-espacio-4);
  padding: var(--vap-espacio-3) var(--vap-espacio-4);
  border-left: 3px solid var(--vap-celeste);
  margin-bottom: var(--vap-espacio-2);
  background: var(--vap-superficie-alt);
  border-radius: 0 var(--vap-radio-sm) var(--vap-radio-sm) 0;
  box-shadow: 0 3px 10px rgba(43,42,40,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-itinerario__item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(43,42,40,.13); }
.vap-itinerario__hora {
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--vap-teal-mosaico);
}
.vap-itinerario__hora .vap-icono { width: 18px; height: 18px; flex: none; }
.vap-nota { font-size: 13px; color: #5A6570; font-style: italic; }

/* ==========================================================================
   Contacto — page-contacto.php
   ========================================================================== */
/* flex y no grid con auto-fit: misma razón que .vap-galeria y .vap-tarjetas
   (29/09/2026, "centra las cajas que están huérfanas..."). */
.vap-contacto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-4);
  margin-bottom: var(--vap-espacio-5);
}
.vap-contacto-item {
  flex: 1 1 200px;
  max-width: 260px;
  background: var(--vap-superficie-alt);
  border-radius: var(--vap-radio-md);
  padding: var(--vap-espacio-5) var(--vap-espacio-4);
  box-shadow: 0 4px 14px rgba(43,42,40,.07);
  transition: transform .15s ease, box-shadow .15s ease;
  text-align: center;
  border-top: 3px solid var(--vap-celeste);
}
.vap-contacto-item:nth-child(4n+2) { border-top-color: var(--vap-verde-amazonico); }
.vap-contacto-item:nth-child(4n+3) { border-top-color: var(--vap-marron-raiz); }
.vap-contacto-item:nth-child(4n+4) { border-top-color: var(--vap-teal-mosaico); }
.vap-contacto-item:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(43,42,40,.15); }
.vap-contacto-item__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--vap-superficie);
  color: var(--vap-celeste);
  box-shadow: 0 4px 10px rgba(43,42,40,.1);
  margin-bottom: var(--vap-espacio-3);
}
.vap-contacto-item h3 { margin: 0 0 var(--vap-espacio-2); font-size: 15px; color: var(--vap-verde-oscuro); }
/* Tarjeta "Redes sociales" — fila de íconos de marca (09/10/2026, al
   agregar Instagram y TikTok junto a Facebook). Fondo claro de la tarjeta,
   a diferencia de .vap-header__redes/.vap-footer__redes (sobre fondo
   oscuro) — por eso el círculo es claro con el ícono en celeste, en vez de
   blanco translúcido sobre oscuro. */
.vap-contacto-item__redes { display: flex; justify-content: center; gap: var(--vap-espacio-3); margin-top: var(--vap-espacio-2); }
.vap-contacto-item__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--vap-superficie);
  color: var(--vap-celeste);
  box-shadow: 0 2px 8px rgba(43,42,40,.1);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.vap-contacto-item__redes a:hover { transform: translateY(-2px); background: var(--vap-celeste); color: #fff; }
.vap-mapa iframe {
  border-radius: var(--vap-radio-md);
  box-shadow: 0 6px 18px rgba(43,42,40,.12);
}

/* ==========================================================================
   Últimas noticias — carrusel de portada (inc/noticias-home.php)
   ========================================================================== */
.vap-noticias { padding: var(--vap-espacio-6) 0; background: var(--vap-superficie-alt); }
.vap-noticias__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--vap-espacio-3);
  margin-bottom: var(--vap-espacio-4);
}
.vap-noticias__cabecera h2 { margin: 0; }

/* Una tarjeta visible a la vez (igual criterio que el carrusel del hero),
   centrada y de ancho cómodo para leer título y fecha de un vistazo.
   overflow visible (a diferencia del carrusel del hero): las flechas van
   fuera de la tarjeta, no hay imagen a sangre que recortar. */
.vap-noticias .vap-carrusel { overflow: visible; }
.vap-noticias .vap-carrusel__pista { display: flex; justify-content: center; }
.vap-noticia-tarjeta { max-width: 420px; margin: 0 auto; }

.vap-noticia-tarjeta {
  background: var(--vap-superficie);
  border-radius: var(--vap-radio-md);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(43,42,40,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-noticia-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(43,42,40,.14); }
.vap-noticia-tarjeta__enlace { display: block; color: inherit; text-decoration: none; }
.vap-noticia-tarjeta__imagen { aspect-ratio: 16 / 10; background: var(--vap-superficie-alt); overflow: hidden; }
.vap-noticia-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vap-noticia-tarjeta__plancha { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--vap-celeste-claro), var(--vap-teal-mosaico)); }
.vap-noticia-tarjeta__ficha { padding: var(--vap-espacio-3) var(--vap-espacio-4) var(--vap-espacio-4); }
.vap-noticia-tarjeta__categoria {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vap-verde-oscuro);
  margin-bottom: 6px;
}
.vap-noticia-tarjeta__titulo { font-size: 17px; margin: 0 0 6px; line-height: 1.35; }
.vap-noticia-tarjeta__fecha { font-size: 12.5px; color: #5A6570; }

.vap-noticias .vap-carrusel__puntos { position: static; transform: none; justify-content: center; margin-top: var(--vap-espacio-4); }
.vap-noticias .vap-carrusel__punto { border-color: var(--vap-celeste); }
.vap-noticias .vap-carrusel__punto[aria-selected="true"] { background: var(--vap-celeste); }
.vap-noticias .vap-carrusel__flecha { background: var(--vap-superficie); color: var(--vap-ink); box-shadow: 0 4px 10px rgba(43,42,40,.15); }
.vap-noticias .vap-carrusel__flecha:hover { background: var(--vap-celeste); color: #fff; }
.vap-noticias .vap-carrusel__flecha--atras { left: -18px; }
.vap-noticias .vap-carrusel__flecha--adelante { right: -18px; }
@media (max-width: 640px) {
  .vap-noticias .vap-carrusel__flecha--atras { left: var(--vap-espacio-2); }
  .vap-noticias .vap-carrusel__flecha--adelante { right: var(--vap-espacio-2); }
}

/* Encabezado fotográfico — páginas internas y publicaciones
   (inc/encabezados.php). Sustituye al <h1 class="vap-titulo"> suelto:
   la foto ocupa todo el ancho, el título va encima con un velo oscuro
   para que se lea con cualquier imagen. Si no hay foto (o todavía no se
   subió), --sin-foto usa un fondo liso de marca. */
.vap-encabezado {
  position: relative;
  min-height: 560px;
  background-color: var(--vap-verde-oscuro);
  background-size: cover;
  background-position: center;
  margin-bottom: var(--vap-espacio-6);
}
.vap-encabezado__capa {
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--vap-espacio-6) var(--vap-espacio-4);
  background: linear-gradient(180deg, rgba(43,42,40,.25) 0%, rgba(43,42,40,.55) 100%);
  text-align: center;
}
.vap-encabezado--sin-foto .vap-encabezado__capa {
  background: none;
}
.vap-encabezado__titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
@media (max-width: 640px) {
  .vap-encabezado, .vap-encabezado__capa { min-height: 360px; }
}

/* Publicación individual (single.php) */
.vap-contenido--noticia { max-width: 760px; }
.vap-noticia__categoria {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vap-verde-oscuro);
  margin: 0 0 4px;
}
.vap-noticia__fecha { display: block; font-size: 13px; color: #5A6570; margin-bottom: var(--vap-espacio-4); }
.vap-noticia__cuerpo { font-size: 16px; line-height: 1.7; }
.vap-noticia__cuerpo p { margin: 0 0 1.2em; }

/* Índice de Noticias (home.php) — grid de tarjetas + barra lateral.
   Reutiliza la tarjeta ya definida para el carrusel de Inicio
   (.vap-noticia-tarjeta) fuera del contexto del carrusel, así que aquí
   no lleva el max-width:420px/centrado que sí tiene dentro de
   .vap-noticias .vap-carrusel. */
.vap-contenido--noticias { max-width: 1180px; }
/* flex y no grid con auto-fill: misma razón que .vap-galeria y
   .vap-tarjetas (29/09/2026, "centra las cajas que están huérfanas...").
   El límite de max-width en la tarjeta de abajo reemplaza al
   max-width:none que tenía antes — sin tope, una fila casi vacía
   estiraría las tarjetas mucho más allá de su ancho de diseño. */
.vap-noticias-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-5);
}
.vap-noticias-grid .vap-noticia-tarjeta { flex: 1 1 260px; max-width: 340px; margin: 0; }
/* Modificador para cuando la cuadrícula va DENTRO de .vap-contenido
   (980px) en vez de .vap-contenido--noticias (1180px) — page-leon-xiv.php,
   vap_noticias_categoria_pintar(). */
.vap-noticias-grid--seccion { margin-bottom: var(--vap-espacio-2); }
.vap-noticia-tarjeta__extracto { font-size: 14px; line-height: 1.55; color: var(--vap-ink); opacity: .8; margin: 8px 0 0; }

.vap-paginacion { display: flex; justify-content: center; gap: var(--vap-espacio-2); margin-top: var(--vap-espacio-6); flex-wrap: wrap; }
.vap-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--vap-radio-sm);
  background: var(--vap-superficie);
  color: var(--vap-ink);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(43,42,40,.1);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.vap-paginacion .page-numbers:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(43,42,40,.16); }
.vap-paginacion .page-numbers.current { background: var(--vap-celeste); color: #fff; box-shadow: none; }
.vap-paginacion .page-numbers.dots { box-shadow: none; background: transparent; }

/* Barra lateral por defecto (sidebar.php) — cada widget en su propia
   caja con sombra, mismo criterio que el resto de cajas del sitio. */
.vap-sidebar__caja {
  background: var(--vap-superficie);
  border-radius: var(--vap-radio-md);
  box-shadow: 0 6px 18px rgba(43,42,40,.08);
  padding: var(--vap-espacio-4);
  margin-bottom: var(--vap-espacio-4);
}
.vap-sidebar__titulo {
  font-size: 16px;
  margin: 0 0 var(--vap-espacio-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vap-superficie-alt);
}
.vap-sidebar__buscador { display: flex; gap: 8px; }
.vap-sidebar__buscador input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--vap-superficie-alt);
  border-radius: var(--vap-radio-sm);
  font-family: var(--vap-fuente-sans);
  font-size: 14px;
}
.vap-sidebar__buscador button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border: 0;
  border-radius: var(--vap-radio-sm);
  background: var(--vap-celeste);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.vap-sidebar__buscador button:hover { background: var(--vap-verde-oscuro); }

.vap-sidebar__lista { list-style: none; margin: 0; padding: 0; }
.vap-sidebar__lista li { border-bottom: 1px solid var(--vap-superficie-alt); }
.vap-sidebar__lista li:last-child { border-bottom: 0; }
.vap-sidebar__lista a {
  display: block;
  padding: 10px 4px;
  color: var(--vap-ink);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s ease, padding-left .15s ease;
}
.vap-sidebar__lista a:hover { color: var(--vap-celeste); padding-left: 6px; }
.vap-sidebar__lista .count { color: #5A6570; font-size: 12px; }

.vap-sidebar__lista--recientes a { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.vap-sidebar__miniatura { flex: none; width: 56px; height: 56px; border-radius: var(--vap-radio-sm); overflow: hidden; background: var(--vap-superficie-alt); }
.vap-sidebar__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vap-sidebar__lista-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vap-sidebar__lista-titulo { font-weight: 700; line-height: 1.3; }
.vap-sidebar__lista--recientes time { font-size: 12px; color: #5A6570; }

.vap-sidebar__caja--contacto { text-align: center; }
.vap-sidebar__caja--contacto .vap-boton { margin-top: 4px; }

/* ==========================================================================
   Aparición al hacer scroll — js/animaciones.js
   ========================================================================== */
.vap-antes-de-aparecer {
  opacity: 0;
  transform: translateY(18px);
}
.vap-aparece {
  animation: vap-aparecer .55s ease both;
}
@keyframes vap-aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Últimas noticias sobre el pie — footer.php, todas las páginas.
   A pedido de Rodo (29/09/2026), esta franja ya NO vive dentro de
   <footer>: es su propia <section class="vap-noticias-pie">, colocada
   justo encima de él. Fondo `--vap-ink` (el mismo tono oscuro que ya
   usaba la antigua barra superior) en vez del celeste del pie, a pedido
   de Rodo (29/09/2026) — para que ambas franjas se diferencien por color
   en vez de fundirse en un solo bloque celeste. */
.vap-noticias-pie {
  background: var(--vap-ink);
  color: #fff;
  padding: 0 var(--vap-espacio-4);
}
.vap-noticias-pie a { color: #fff; }
.vap-noticias-pie a:hover { color: var(--vap-celeste-claro); }
.vap-footer__noticias {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: var(--vap-espacio-5);
  padding-bottom: var(--vap-espacio-5);
}
.vap-footer__noticias-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--vap-espacio-2);
  margin-bottom: var(--vap-espacio-4);
}
.vap-footer__noticias-cabecera h3 {
  font-family: var(--vap-fuente-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
  color: var(--vap-celeste-claro);
}
/* flex y no grid con auto-fit: misma razón que .vap-galeria y
   .vap-tarjetas (29/09/2026, "centra las cajas que están huérfanas...").
   .vap-footer__noticia ya era flex por dentro (miniatura + texto); anidar
   flex dentro de flex no da problema. */
.vap-footer__noticias-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vap-espacio-4);
}
.vap-footer__noticia {
  display: flex;
  flex: 1 1 220px;
  max-width: 320px;
  gap: var(--vap-espacio-3);
  align-items: flex-start;
  text-decoration: none;
}
.vap-footer__noticia-miniatura {
  flex: none;
  width: 60px; height: 60px;
  border-radius: var(--vap-radio-sm);
  overflow: hidden;
  background: rgba(255,255,255,.15);
}
.vap-footer__noticia-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vap-footer__noticia-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vap-footer__noticia-titulo { font-weight: 700; line-height: 1.35; font-size: 14px; color: #fff; }
.vap-footer__noticia:hover .vap-footer__noticia-titulo { color: var(--vap-celeste-claro); }
.vap-footer__noticia-fecha { font-size: 12px; color: rgba(255,255,255,.72); }

/* ==========================================================================
   Iconos de apoyo (inc/iconos.php) — Contacto, pie, Obras, León XIV, etc.
   ========================================================================== */
.vap-icono { display: block; flex: none; }

/* Icono dentro de una .vap-tarjeta (líneas pastorales, León XIV, Inicio):
   mismo color que el remate de la tarjeta, cicla junto con él. */
.vap-tarjeta .vap-icono { width: 26px; height: 26px; margin-bottom: var(--vap-espacio-2); color: var(--vap-celeste); }
.vap-tarjeta:nth-child(4n+2) .vap-icono { color: var(--vap-verde-amazonico); }
.vap-tarjeta:nth-child(4n+3) .vap-icono { color: var(--vap-marron-raiz); }
.vap-tarjeta:nth-child(4n+4) .vap-icono { color: var(--vap-teal-mosaico); }

/* Cabecera de subsección de Obras: icono + título en línea. */
.vap-obras-subseccion__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.vap-obras-subseccion__titulo .vap-icono { color: var(--vap-celeste); width: 26px; height: 26px; margin-bottom: 0; }

/* ==========================================================================
   Hilo de Historia — page-quienes-somos.php (inc/historia-data.php)
   ========================================================================== */
.vap-historia-hilo { margin: var(--vap-espacio-5) 0 var(--vap-espacio-6); }
.vap-historia-hito {
  position: relative;
  margin-left: 10px;
  padding-left: 28px;
  padding-bottom: var(--vap-espacio-5);
  border-left: 2px solid var(--vap-celeste-claro);
}
.vap-historia-hito:last-child { border-left-color: transparent; padding-bottom: 0; }
.vap-historia-hito__punto {
  position: absolute;
  left: -11px; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--vap-superficie);
  border: 3px solid var(--vap-celeste);
}
.vap-historia-hito:nth-child(4n+2) .vap-historia-hito__punto { border-color: var(--vap-verde-amazonico); }
.vap-historia-hito:nth-child(4n+3) .vap-historia-hito__punto { border-color: var(--vap-marron-raiz); }
.vap-historia-hito:nth-child(4n+4) .vap-historia-hito__punto { border-color: var(--vap-teal-mosaico); }
.vap-historia-hito__anio {
  display: inline-block;
  font-family: var(--vap-fuente-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--vap-celeste);
  margin-bottom: 4px;
}
.vap-historia-hito__titulo { margin: 0 0 6px; font-size: 17px; }
.vap-historia-hito__texto { margin: 0; font-size: 14.5px; line-height: 1.6; color: #45504a; }

/* ==========================================================================
   Botón flotante de WhatsApp (06/10/2026, a pedido de Rodo) — markup en
   footer.php, así que vive en TODAS las páginas. Verde oficial de la marca
   WhatsApp (#25D366) a propósito, no un color institucional del VAP: es un
   botón de acción de un servicio externo, mismo criterio que usan otros
   sitios de EDUBRIDGES (ver arquiglassperu.com).
   ========================================================================== */
.vap-whatsapp-flotante {
  position: fixed;
  right: var(--vap-espacio-4);
  bottom: var(--vap-espacio-4);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--vap-radio-pill);
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(43,42,40,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vap-whatsapp-flotante:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(43,42,40,.38);
  color: #fff;
}
@media (max-width: 480px) {
  .vap-whatsapp-flotante { width: 50px; height: 50px; right: var(--vap-espacio-3); bottom: var(--vap-espacio-3); }
}