/* Recuadros vibrantes y opciones de color (2026-09-23) — se carga AL FINAL en todas las páginas.
   1) Los recuadros de fondo blanco llevan un marco degradado de 360° con halo de luz (cada uno con su
      par de colores, rotando en las cuadrículas).
   2) Misión, Visión y Objetivos van rellenos de color con un ícono minimalista en el título.
   3) Las opciones tipo botón (sub-menús, accesos directos, filtros) usan la paleta del menú horizontal:
      violeta (La Fundación), naranja (Oferta Académica), cian (Blog) y ámbar (PQRSF). */

/* ---------- 1. Marco vibrante de 360° ---------- */
:is(.program-finder, .quick-links, .sede-card, .calendario-card, .evento-item, .fundacion-card, .pqrsf-form, .pqrsf-exito, .crm-form) {
  --m1: #a78bfa; --m2: #f472b6; --mh: rgba(167, 139, 250, 0.5);
  border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--m1), var(--m2)) border-box;
  box-shadow: 0 0 24px var(--mh), 0 10px 26px rgba(10, 30, 56, 0.12);
}
:is(.sede-card, .fundacion-card, .evento-item):nth-child(6n+2), .quick-links { --m1: #ff9a3d; --m2: #fbbf24; --mh: rgba(255, 154, 61, 0.5); }
:is(.sede-card, .fundacion-card, .evento-item):nth-child(6n+3), .pqrsf-form { --m1: #22d3ee; --m2: #60a5fa; --mh: rgba(34, 211, 238, 0.5); }
:is(.sede-card, .fundacion-card, .evento-item):nth-child(6n+4), .calendario-card { --m1: #34d399; --m2: #22d3ee; --mh: rgba(52, 211, 153, 0.5); }
:is(.sede-card, .fundacion-card, .evento-item):nth-child(6n+5), .crm-form { --m1: #f472b6; --m2: #ff9a3d; --mh: rgba(244, 114, 182, 0.5); }
:is(.sede-card, .fundacion-card, .evento-item):nth-child(6n+6), .pqrsf-exito { --m1: #34d399; --m2: #fbbf24; --mh: rgba(52, 211, 153, 0.5); }
.pqrsf-form, .pqrsf-exito { border-top-width: 4px; }
/* Franja de datos de la página de programa (fondo blanco): líneas de color arriba y abajo. */
.prog-facts { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, #ff9a3d, #ff1f6b, #a78bfa, #22d3ee, #34d399, #ffd60a) 1; }

/* ---------- 2. Misión, Visión y Objetivos ---------- */
#mision-vision .fundacion-card {
  --n1: #a78bfa; --n2: #f472b6; --mh: rgba(167, 139, 250, 0.65);
  color: #fff; padding: 1.9rem 1.6rem;
  background: linear-gradient(140deg, #4c1d95 0%, #a21caf 100%) padding-box, linear-gradient(135deg, var(--n1), var(--n2)) border-box;
  box-shadow: 0 0 34px 2px var(--mh), 0 14px 30px rgba(10, 30, 56, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#mision-vision .fundacion-card:nth-child(2) {
  --n1: #22d3ee; --n2: #60a5fa; --mh: rgba(34, 211, 238, 0.6);
  background: linear-gradient(140deg, #0c4a6e 0%, #0369a1 100%) padding-box, linear-gradient(135deg, var(--n1), var(--n2)) border-box;
}
#mision-vision .fundacion-card:nth-child(3) {
  --n1: #fbbf24; --n2: #ff9a3d; --mh: rgba(251, 191, 36, 0.6);
  background: linear-gradient(140deg, #7c2d12 0%, #c2410c 100%) padding-box, linear-gradient(135deg, var(--n1), var(--n2)) border-box;
}
@media (hover: hover) { #mision-vision .fundacion-card:hover { transform: translateY(-4px); box-shadow: 0 0 46px 6px var(--mh), 0 18px 34px rgba(10, 30, 56, 0.3); } }
#mision-vision .fundacion-card h3 { color: #fff; }
#mision-vision .fundacion-card p, #mision-vision .fundacion-lista, #mision-vision .fundacion-lista li { color: #fff; }
/* Foto de cada tarjeta (2026-09-24, a pedido del usuario: "más realistas, estilo humano", en formato
   reducido). Reemplaza a los íconos de línea que había. Franja baja de borde a borde arriba de la
   tarjeta; la foto se funde hacia el color de la tarjeta con una máscara, sin cubrir el texto.
   object-position ~30 %: las caras quedan en la franja media-alta de las tres fotos. */
#mision-vision .fundacion-foto {
  margin: -1.9rem -1.6rem 1.1rem; height: clamp(130px, 13vw, 165px); overflow: hidden;
  border-radius: 6px 6px 0 0;
}
#mision-vision .fundacion-foto picture, #mision-vision .fundacion-foto img { display: block; width: 100%; height: 100%; }
#mision-vision .fundacion-foto img {
  object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  transition: transform 0.6s ease;
}
#mision-vision .fundacion-card:nth-child(3) .fundacion-foto img { object-position: 50% 18%; }
@media (hover: hover) { #mision-vision .fundacion-card:hover .fundacion-foto img { transform: scale(1.04); } }
/* Objetivos: en lugar de viñetas planas, rombos con degradado. */
#mision-vision .fundacion-lista { list-style: none; padding-left: 0; }
#mision-vision .fundacion-lista li { position: relative; padding-left: 1.7rem; }
#mision-vision .fundacion-lista li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.62em; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fbbf24, #ff9a3d); box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

/* ---------- 3. Opciones de color del menú horizontal ---------- */
.fundacion-subnav a, .quick-links a, .finder-chips label, .prog-nav ul a {
  --pc: #a78bfa; border: 2px solid var(--pc); border-radius: 999px; padding: 0 0.95rem; font-weight: 800;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.fundacion-subnav .inner { gap: 0.6rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fundacion-subnav a { color: var(--pc); min-height: 40px; }
.fundacion-subnav a:nth-child(4n+2), .quick-links li:nth-child(4n+2) a, .finder-chips label:nth-child(4n+2), .prog-nav ul li:nth-child(4n+2) a { --pc: #ff9a3d; }
.fundacion-subnav a:nth-child(4n+3), .quick-links li:nth-child(4n+3) a, .finder-chips label:nth-child(4n+3), .prog-nav ul li:nth-child(4n+3) a { --pc: #22d3ee; }
.fundacion-subnav a:nth-child(4n+4), .quick-links li:nth-child(4n+4) a, .finder-chips label:nth-child(4n+4), .prog-nav ul li:nth-child(4n+4) a { --pc: #fbbf24; }
.fundacion-subnav a:hover, .fundacion-subnav a.is-activo {
  background: var(--pc); color: #0a1e38; border-bottom-color: var(--pc); box-shadow: 0 0 14px var(--pc);
}
.quick-links a { color: var(--card-text); padding: 0.35rem 0.95rem; }
.quick-links a:hover { background: var(--pc); color: #0a1e38; box-shadow: 0 0 14px var(--pc); }
.finder-chips label { color: var(--card-text); }
.finder-chips label:has(input:checked) { background: var(--pc); color: #0a1e38; box-shadow: 0 0 14px var(--pc); }
.prog-nav ul a { color: var(--card-text); }
.prog-nav ul a:hover { background: var(--pc); color: #0a1e38; box-shadow: 0 0 14px var(--pc); }
.prog-nav ul { gap: 0.6rem; }

/* Perfil del estudiante en imagen (caricatura): marco vibrante de 360° con halo pulsante. */
.prog-perfil-img { max-width: 1200px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.perfil-imagen figcaption { background: #0b0f19; color: #cbd5e1; font-size: 0.85rem; text-align: center; padding: 0.4rem 0.8rem 0.6rem; }
.perfil-imagen a { display: block; cursor: zoom-in; }
.perfil-imagen { margin: 0; padding: 0; border-radius: 22px; border: 5px solid transparent;
  background: linear-gradient(#0b0f19, #0b0f19) padding-box, conic-gradient(from 0deg, #ff9a3d, #ff1f6b, #a78bfa, #22d3ee, #34d399, #ffd60a, #ff9a3d) border-box;
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.55), 0 0 44px rgba(255, 31, 107, 0.35); overflow: hidden; animation: perfil-halo 3.2s ease-in-out infinite alternate; }
.perfil-imagen img { display: block; width: 100%; height: auto; }
/* Título "Perfil del Estudiante" sobre la imagen, cuando ella no lo trae escrito (programa.js, conTitulo).
   Mismo color de acento del programa que los demás títulos de la página. */
.perfil-imagen__titulo { margin: 0 0 1rem; text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  color: var(--prog-accent, var(--funprotec-orange-ink)); }
@keyframes perfil-halo { from { box-shadow: 0 0 20px rgba(34, 211, 238, 0.5), 0 0 34px rgba(255, 31, 107, 0.25); } to { box-shadow: 0 0 34px rgba(255, 154, 61, 0.7), 0 0 58px rgba(167, 139, 250, 0.5); } }
/* Perfil del egresado en imagen (2026-09-24), después del plan de estudios: mismo marco vibrante. */
.prog-egresado-img { max-width: 1200px; margin: 2.5rem auto 3rem; padding: 0 1.5rem; }
/* Con "reducir movimiento" (activo en el PC del usuario) main.css apaga las animaciones: el halo que late
   de los marcos de perfil se repone, igual que el resto de piezas vibrantes del sitio. */
@media (prefers-reduced-motion: reduce) { .perfil-imagen { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; } }

/* "¿Qué nos diferencia?" centrado (vertical y horizontal) junto al botón de preinscripción. */
.prog-diff--centrado { align-items: center; }
.prog-diff--centrado .prog-diff__text h2 { text-align: center; }
.prog-diff--centrado .prog-diff__text p { text-align: justify; }
/* Perfil del egresado bajo la imagen del perfil del estudiante. */
.perfil-egresado-caja { margin-top: 1.6rem; padding: 1.4rem 1.6rem; text-align: center; border-radius: 18px; border: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #34d399, #22d3ee) border-box; box-shadow: 0 0 22px rgba(52, 211, 153, 0.45); }
.perfil-egresado-caja h3 { margin: 0 0 0.6rem; color: var(--card-text, #1c2230); font-size: 1.25rem; }
.perfil-egresado-caja p { margin: 0; color: var(--card-text, #1c2230); max-width: 900px; margin-inline: auto; }