/* Hybred · páginas internas (Comunidad, Admisiones…)
   Lo que comparten las páginas sobre fondo blanco: la paleta clara, la barra superior del Home con
   el violeta casi sólido, el pie de página y las entradas al cargar. Cada página suma su propia
   hoja (comunidad.css, admisiones.css). */

.page-light {
  color-scheme: light;                /* controles del formulario en claro (la página del Home es oscura) */
  --bg: #FFFFFF;
  --fg: #22104A;                      /* texto: violeta muy oscuro (15.6:1) */
  --ink: #1C1152;                     /* titulares: casi azul noche, como el boceto */
  --muted: rgba(34, 16, 74, 0.74);
  --accent: #4A1C93;
  --line: rgba(74, 28, 147, 0.14);
  --btn-bg: #4A1C93;
  --btn-fg: #FFFFFF;
  --btn-line: #4A1C93;
  --wrap: 78rem;                      /* ancho máximo del contenido */
  --pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  background: var(--bg);
  color: var(--fg);
}
.page-light .hl { color: var(--celeste); }

/* Barra superior: la misma del Home, con el violeta casi sólido (aquí siempre hay blanco detrás) */
.page-light .topbar { background-color: rgba(74, 28, 147, 0.92); }
.page-light .mainnav a[aria-current="page"] { border-bottom-color: var(--accent); }
.page-light .topbar .mainnav a[aria-current="page"] { border-bottom-color: var(--celeste); }

/* Entradas al cargar (sin desplazamientos con "reducir movimiento") */
@keyframes pg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pg-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes pg-fade-only { from { opacity: 0; } to { opacity: 1; } }
/* .reveal: entra con un leve ascenso al llegar a la vista (js/paginas.js le pone .is-in) */
.js .reveal { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transition: opacity 300ms ease; }
  .js .reveal:not(.is-in) { transform: none; }
}

/* El pie de página (compartido con el Home) está en styles.css */

/* ---------- Aura de la portada (js/paginas.js) ----------
   Un eco del Home en las páginas blancas: detrás de la foto, una luz violeta y celeste y dos órbitas
   de puntos (como la red de "El programa") cuyos puntos las recorren despacio, en sentidos opuestos. */
.pg-aura-host { isolation: isolate; }
.pg-aura-host:not(.cm-hero-photo) { position: relative; }
.pg-aura-host img { position: relative; z-index: 1; }
.pg-aura {
  position: absolute;
  z-index: 0;
  left: -8%;
  right: -8%;
  top: 10%;
  bottom: 0;
  pointer-events: none;
}
/* luz */
.pg-aura::before {
  content: "";
  position: absolute;
  inset: 8% 6% 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(140, 92, 240, 0.34), rgba(140, 92, 240, 0) 100%),
    radial-gradient(closest-side at 35% 70%, rgba(64, 204, 237, 0.28), rgba(64, 204, 237, 0) 100%);
  filter: blur(22px);
}
.pg-aura svg { position: absolute; left: 0; top: 34%; width: 100%; height: auto; overflow: visible; }
.pg-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.pg-orbit ellipse { fill: none; stroke-linecap: round; }
.pg-orbit-a ellipse { stroke: rgba(74, 28, 147, 0.42); stroke-width: 3; stroke-dasharray: 0 2; }
.pg-orbit-b ellipse { stroke: rgba(64, 204, 237, 0.6); stroke-width: 2.4; stroke-dasharray: 0 2.5; }
.pg-orbit-a { transform: rotate(-12deg); }
.pg-orbit-b { transform: rotate(14deg); }
.pg-node { fill: #40CCED; filter: drop-shadow(0 0 6px rgba(64, 204, 237, 0.9)); transform-box: fill-box; transform-origin: 50% 50%; }
.pg-node-2 { fill: #8C5CF0; filter: drop-shadow(0 0 6px rgba(140, 92, 240, 0.8)); }
.js .pg-aura { animation: pg-fade-only 1200ms var(--ease-out) 300ms both; }
@media (prefers-reduced-motion: no-preference) {
  /* los puntos recorren su órbita (la órbita no gira: se mueven los puntos) */
  .pg-orbit-a ellipse { animation: pg-travel 60s linear infinite; }
  .pg-orbit-b ellipse { animation: pg-travel 80s linear infinite reverse; }
  .pg-node { animation: pg-pulse 2.6s ease-in-out infinite; }
  .pg-node-2 { animation-delay: 1.3s; }
}
@keyframes pg-travel { to { stroke-dashoffset: -100; } }
@keyframes pg-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }