/* Barra de sub-navegación de 4 categorías — patrón reutilizado por "La Fundación" y
   "Oferta Académica" (ambas cargan este archivo). Usa .blog-hero (blog.css) para el
   encabezado y comparte .badge-pendiente/.section-lead/section.block de main.css.
   El resto de este archivo (tarjetas de misión/visión, portafolio, organigrama) es
   específico de La Fundación y simplemente no se usa en Oferta Académica. */

.fundacion-subnav {
  background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 40;
}
.fundacion-subnav .inner {
  max-width: 1200px; margin: 0 auto; padding: 0.6rem 1.5rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap; overflow-x: auto;
}
.fundacion-subnav a {
  color: var(--card-text-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem;
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.fundacion-subnav a:hover { color: var(--funprotec-orange-ink); }
.fundacion-subnav a.is-activo { color: var(--funprotec-navy); border-bottom-color: var(--funprotec-orange); }

/* 14rem despeja los TRES sticky apilados arriba (utility-bar + main-nav + este subnav);
   con solo 4.5rem (el subnav solo) el título de la sección quedaba tapado detrás de los
   otros dos y el usuario veía el final de la sección anterior — parecía que el enlace
   llevaba al lugar equivocado, cuando en realidad el ancla sí era la correcta.
   El selector de hermanos (`~`) aplica esto automáticamente a cualquier `.block` dentro
   de `<main>` en cualquier página que tenga `.fundacion-subnav` (hoy: Oferta Académica),
   sin tener que agregar una clase extra a cada sección — bug real, 2026-08-18: en
   Oferta Académica los saltos de ancla quedaban tapados igual que le pasaba antes a
   La Fundación, porque sus secciones usan `.block`, no `.fundacion-seccion`. */
.fundacion-seccion,
.fundacion-subnav ~ main .block { scroll-margin-top: 14rem; }
.fundacion-seccion h2 { font-size: 1.6rem; margin-bottom: 0.4rem; }

.fundacion-grid2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem;
}
.fundacion-card {
  background: #fff; border-radius: var(--funprotec-radius); box-shadow: var(--funprotec-shadow);
  padding: 1.5rem;
}
.fundacion-card h3 { margin: 0 0 0.6rem; color: var(--funprotec-orange-ink); font-size: 1.1rem; }
.fundacion-card p { margin: 0; color: var(--card-text); font-size: 0.92rem; line-height: 1.55; }
.fundacion-card a { color: var(--funprotec-navy); font-weight: 600; }

/* Misión, Visión y Objetivos (2026-09-21, a pedido del usuario): título de la sección más grande y
   centrado, letra +2 pt (2pt ≈ 2,67 px) y los objetivos en viñetas. Solo dentro de #mision-vision:
   las otras secciones de La Fundación (portafolio, estructura) conservan su tamaño. */
/* Tamaño y centrado del título: ahora los da .titulo-vivo (final de este archivo) para las 4 secciones. */
#mision-vision h2 { margin-bottom: 1.75rem; }
/* Títulos de las tarjetas: centrados y en un naranja más vivo (#e04e00, 3,99:1 sobre blanco: cumple AA
   para texto grande en negrita) en lugar del naranja apagado --funprotec-orange-ink. */
#mision-vision .fundacion-card h3 { font-size: calc(1.1rem + 2pt); text-align: center; color: #e04e00; font-weight: 800; }
#mision-vision .fundacion-card p,
#mision-vision .fundacion-lista { font-size: calc(0.92rem + 2pt); line-height: 1.6; }
/* Misión y Visión en dos columnas iguales; Objetivos ocupa todo el ancho debajo. (Con el auto-fit
   de .fundacion-grid2 la tarjeta ancha dejaba las otras dos en un cuarto del ancho cada una.) */
#mision-vision .fundacion-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { #mision-vision .fundacion-grid2 { grid-template-columns: minmax(0, 1fr); } }
#mision-vision .fundacion-card:nth-child(3) { grid-column: 1 / -1; }
.fundacion-lista { margin: 0; padding-left: 1.4rem; color: var(--card-text); }
.fundacion-lista li { margin-bottom: 0.7rem; padding-left: 0.2rem; }
.fundacion-lista li:last-child { margin-bottom: 0; }
.fundacion-lista li::marker { color: #e04e00; }

/* ===== Organigrama dinámico (2026-09-21) =====
   Referencia de diseño: mapa "metasistema" de UNAD (fondo oscuro, nodos circulares con siglas, color por
   grupo, leyenda). Convenciones de la skill diagram-design para organigramas: raíz arriba al centro,
   conectores ortogonales (bajada, barra horizontal, bajadas), nombre + alcance breve en cada nodo,
   estilo punteado para el equipo de apoyo, leyenda abajo. Solo los cargos que FUNPROTEC ya tenía.
   Texto SIEMPRE visible (HTML real); el JS (organigrama.js) solo añade resaltado y el panel de alcance.
   Color de los nodos: relleno vivo + tinta navy (contraste >= 5,9:1); el texto va en blanco sobre el navy. */
.org-mapa {
  --org-gap: 1.25rem; --org-linea: rgba(255, 255, 255, 0.38); --org-linea-viva: #ffd166; --org-tinta: #0a1e38;
  position: relative; margin-top: 1.75rem; padding: 2.5rem 1.5rem 1.5rem; border-radius: 18px; color: #fff;
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.22), transparent 42%),
    radial-gradient(circle at 90% 92%, rgba(244, 121, 32, 0.20), transparent 42%),
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px) 0 0 / 26px 26px,
    linear-gradient(160deg, #0a1e38 0%, #14345c 100%);
  box-shadow: 0 10px 34px rgba(10, 30, 56, 0.35); overflow: hidden;
}
:where(.org, .org ul) { list-style: none; margin: 0; padding: 0; } /* :where = especificidad 0, no pisa margin/padding de .org__areas */
.org__raiz { display: flex; flex-direction: column; align-items: center; }

/* Nodo: círculo con sigla + nombre + alcance */
.org__nodo {
  --c: #fff; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.org__sigla {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--c);
  color: var(--org-tinta); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; flex: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.org__nombre { font-size: 1rem; font-weight: 700; line-height: 1.25; color: #fff; }
.org__sub { font-size: 0.82rem; line-height: 1.35; color: #c6d4ea; }
.org__nodo--dg { --c: #ffffff; width: auto; }
.org__nodo--dg .org__sigla { width: 104px; height: 104px; font-size: 1.7rem; }
.org__nodo--dg .org__nombre { font-size: 1.15rem; }
.org__nodo--ca { --c: #ff9a3d; }
.org__nodo--mc { --c: #38bdf8; }
.org__nodo--ac { --c: #34d399; }
.org__nodo--rc { --c: #a78bfa; }
/* Equipo de apoyo: mismo estilo punteado que tenía la caja "muted" original */
.org__nodo--as .org__sigla { background: transparent; color: #fff; border: 2px dashed rgba(255, 255, 255, 0.75); box-shadow: none; }

.org__nodo:hover .org__sigla, .org__nodo:focus-visible .org__sigla, .org__nodo[aria-pressed="true"] .org__sigla {
  transform: scale(1.08); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 0 30px var(--c);
}
.org__nodo--as:hover .org__sigla, .org__nodo--as[aria-pressed="true"] .org__sigla { border-color: var(--org-linea-viva); box-shadow: 0 0 22px rgba(255, 209, 102, 0.55); }
.org__nodo:focus-visible { outline: 3px solid var(--org-linea-viva); outline-offset: 6px; border-radius: 12px; }

/* Áreas: 4 columnas con barra horizontal y bajadas ortogonales */
.org__areas {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--org-gap);
  width: 100%; margin-top: 2.25rem; padding-top: 2.25rem;
}
.org__areas::before { /* barra horizontal: del centro de la 1a columna al de la 4a */
  content: ""; position: absolute; top: 0; height: 2px; background: var(--org-linea);
  left: calc((100% - 3 * var(--org-gap)) / 8); right: calc((100% - 3 * var(--org-gap)) / 8);
}
.org__nodo--dg::after { /* bajada desde la raiz hasta la barra */
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 2.25rem; margin-left: -1px; background: var(--org-linea);
}
.org__area { position: relative; }
.org__area::before { /* bajada de la barra a cada area */
  content: ""; position: absolute; left: 50%; top: -2.25rem; width: 2px; height: 2.25rem; margin-left: -1px; background: var(--org-linea);
}
.org__areas::after { /* linea punteada hacia el equipo de apoyo, por el centro (entre las columnas 2 y 3) */
  content: ""; position: absolute; left: 50%; top: 0; bottom: -2.25rem; margin-left: -1px;
  border-left: 2px dashed var(--org-linea);
}
.org__apoyo { width: 100%; max-width: 260px; margin: 2.25rem auto 0; }

/* Resaltado de la ruta: JS pone data-sel en .org-mapa y .is-sel en el li del nodo elegido */
.org-mapa[data-sel] .org__nodo--dg::after { background: var(--org-linea-viva); }
/* La barra de las 4 áreas solo se ilumina para ellas; los Asesores cuelgan de la Dirección por la línea punteada. */
.org-mapa[data-sel]:not([data-sel="as"]) .org__areas::before { background: var(--org-linea-viva); }
.org-mapa[data-sel] .org__area.is-sel::before { background: var(--org-linea-viva); }
.org-mapa[data-sel="as"] .org__areas::after { border-left-color: var(--org-linea-viva); }
.org-mapa[data-sel]:not([data-sel="dg"]) .org__nodo { transition: opacity 0.25s ease; }
.org-mapa[data-sel]:not([data-sel="dg"]) .org__areas > li:not(.is-sel) .org__nodo,
.org-mapa[data-sel]:not([data-sel="dg"]) .org__apoyo > li:not(.is-sel) .org__nodo { opacity: 0.4; }

/* Panel de alcance */
.org-detalle {
  margin: 2rem auto 0; max-width: 640px; min-height: 5.2rem; padding: 1rem 1.25rem; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22);
}
.org-detalle p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #e6eefb; }
.org-detalle .org-detalle__titulo { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 0.15rem; }
.org-detalle .org-detalle__tipo { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd166; margin-bottom: 0.3rem; }
.org-detalle .org-detalle__inicial { color: #c6d4ea; padding-top: 0.9rem; }

/* Leyenda inferior */
.org-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; margin-top: 1.4rem; font-size: 0.85rem; color: #dbe6f7; }
.org-leyenda li { display: inline-flex; align-items: center; gap: 0.5rem; }
.org-leyenda__punto { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.org-leyenda__punto--dg { background: #fff; }
.org-leyenda__punto--areas { background: linear-gradient(90deg, #ff9a3d 0 25%, #38bdf8 25% 50%, #34d399 50% 75%, #a78bfa 75%); }
.org-leyenda__punto--apoyo { border: 2px dashed rgba(255, 255, 255, 0.85); }

/* Entrada animada al hacer scroll (solo si el visitante no pidio menos movimiento; ver organigrama.js) */
.org-mapa--anim:not(.is-visible) .org__nodo .org__sigla { opacity: 0; transform: scale(0.6); }
.org-mapa--anim:not(.is-visible) .org__nombre, .org-mapa--anim:not(.is-visible) .org__sub { opacity: 0; }
.org-mapa--anim:not(.is-visible) .org__nodo--dg::after, .org-mapa--anim:not(.is-visible) .org__area::before { transform: scaleY(0); }
.org-mapa--anim:not(.is-visible) .org__areas::before { transform: scaleX(0); }
.org-mapa--anim:not(.is-visible) .org__areas::after { opacity: 0; }
.org-mapa--anim .org__sigla, .org-mapa--anim .org__nombre, .org-mapa--anim .org__sub { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease; }
.org-mapa--anim .org__nodo--dg::after, .org-mapa--anim .org__area::before { transform-origin: top; transition: transform 0.5s ease 0.35s; }
.org-mapa--anim .org__areas::before { transform-origin: center; transition: transform 0.6s ease 0.55s; }
.org-mapa--anim .org__areas::after { transition: opacity 0.6s ease 1.1s; }
.org-mapa--anim .org__areas > li:nth-child(1) :is(.org__sigla, .org__nombre, .org__sub) { transition-delay: 0.7s; }
.org-mapa--anim .org__areas > li:nth-child(2) :is(.org__sigla, .org__nombre, .org__sub) { transition-delay: 0.85s; }
.org-mapa--anim .org__areas > li:nth-child(3) :is(.org__sigla, .org__nombre, .org__sub) { transition-delay: 1s; }
.org-mapa--anim .org__areas > li:nth-child(4) :is(.org__sigla, .org__nombre, .org__sub) { transition-delay: 1.15s; }
.org-mapa--anim .org__apoyo :is(.org__sigla, .org__nombre, .org__sub) { transition-delay: 1.4s; }

/* Movil: una sola columna, con linea vertical a la izquierda */
@media (max-width: 760px) {
  .org-mapa { padding: 2rem 1rem 1.25rem; }
  .org__areas { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.75rem; padding: 0 0 0 1.5rem; }
  .org__areas::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .org__areas::after { display: none; }
  .org__nodo--dg::after { height: 1.75rem; }
  .org__area::before { top: 42px; left: -1.5rem; width: 1.5rem; height: 2px; margin-left: 0; }
  /* Nodo en 2 columnas: círculo a la izquierda; nombre y alcance apilados a la derecha */
  .org__nodo:not(.org__nodo--dg) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.1rem; align-items: center; text-align: left; }
  .org__nodo:not(.org__nodo--dg) .org__sigla { grid-row: 1 / span 2; }
  .org__nodo:not(.org__nodo--dg) .org__nombre { align-self: end; }
  .org__nodo:not(.org__nodo--dg) .org__sub { align-self: start; }
  .org__apoyo { position: relative; max-width: none; margin-top: 1.6rem; padding-left: 1.5rem; }
  .org__apoyo::before { content: ""; position: absolute; left: 6px; top: -1.6rem; height: calc(1.6rem + 42px); border-left: 2px dashed var(--org-linea); }
  .org__apoyo::after { content: ""; position: absolute; left: 6px; top: 42px; width: 1.5rem; border-top: 2px dashed var(--org-linea); }
  .org-mapa[data-sel="as"] .org__apoyo::before { border-left-color: var(--org-linea-viva); }
  .org-mapa[data-sel="as"] .org__apoyo::after { border-top-color: var(--org-linea-viva); }
  .org-mapa--anim:not(.is-visible) .org__area::before { transform: scaleX(0); }
  .org-mapa--anim:not(.is-visible) .org__areas::before { transform: scaleY(0); }
}

/* ===== Títulos llamativos de La Fundación (2026-09-24, a pedido del usuario: "deben ser llamativos,
   están básicos") =====
   Frase corta arriba (data-kicker), título grande centrado con degradado y un brillo que se desplaza
   lento, y barra luminosa debajo. Cada sección toma el color de su botón en el submenú (violeta,
   naranja, cian, ámbar). En tema claro se usan tonos oscuros del mismo color para mantener contraste
   con el fondo blanco; en oscuro, los tonos vivos. */
.titulo-vivo {
  --t1: #6d28d9; --t2: #db2777; --t3: #7c3aed;
  width: fit-content; max-width: 100%; margin: 0 auto 1.4rem; text-align: center;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--t1); /* respaldo si no hay background-clip: text */
  background: linear-gradient(100deg, var(--t1) 0%, var(--t2) 45%, var(--t3) 70%, var(--t1) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: titulo-brillo 7s ease-in-out infinite alternate;
}
.fundacion-seccion h2.titulo-vivo { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.titulo-vivo::before {
  content: attr(data-kicker); display: block; margin-bottom: 0.45rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase;
  -webkit-text-fill-color: var(--t1); color: var(--t1);
}
.titulo-vivo::after {
  content: ""; display: block; width: 96px; height: 5px; margin: 0.7rem auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--t1), var(--t2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--t2) 70%, transparent);
}
.titulo-vivo--naranja { --t1: #c2410c; --t2: #db2777; --t3: #ea580c; }
.titulo-vivo--cian { --t1: #0e7490; --t2: #1d4ed8; --t3: #0891b2; }
.titulo-vivo--ambar { --t1: #b45309; --t2: #c2410c; --t3: #d97706; }

/* "Quiénes Somos": el encabezado es azul oscuro en ambos temas, así que siempre tonos vivos. */
.titulo-vivo-hero {
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -0.015em;
  width: fit-content; max-width: 100%;
  color: #fbbf24;
  background: linear-gradient(100deg, #ff9a3d 0%, #ff1f6b 40%, #a78bfa 70%, #22d3ee 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: titulo-brillo 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 18px rgba(255, 31, 107, 0.35));
}

@keyframes titulo-brillo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Tema oscuro: tonos vivos (mismas reglas de tokens.css: sistema oscuro salvo tema claro forzado). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .titulo-vivo { --t1: #a78bfa; --t2: #f472b6; --t3: #c4b5fd; }
  :root:not([data-theme="light"]) .titulo-vivo--naranja { --t1: #ff9a3d; --t2: #fbbf24; --t3: #ff1f6b; }
  :root:not([data-theme="light"]) .titulo-vivo--cian { --t1: #22d3ee; --t2: #60a5fa; --t3: #67e8f9; }
  :root:not([data-theme="light"]) .titulo-vivo--ambar { --t1: #fbbf24; --t2: #ff9a3d; --t3: #fde68a; }
}
:root[data-theme="dark"] .titulo-vivo { --t1: #a78bfa; --t2: #f472b6; --t3: #c4b5fd; }
:root[data-theme="dark"] .titulo-vivo--naranja { --t1: #ff9a3d; --t2: #fbbf24; --t3: #ff1f6b; }
:root[data-theme="dark"] .titulo-vivo--cian { --t1: #22d3ee; --t2: #60a5fa; --t3: #67e8f9; }
:root[data-theme="dark"] .titulo-vivo--ambar { --t1: #fbbf24; --t2: #ff9a3d; --t3: #fde68a; }

/* main.css apaga toda animación con "reducir movimiento" (activo en el PC del usuario): se repone
   solo para este brillo, que es lento y sutil. Mismo criterio que cine.css. */
@media (prefers-reduced-motion: reduce) {
  .titulo-vivo { animation-duration: 7s !important; animation-iteration-count: infinite !important; }
  .titulo-vivo-hero { animation-duration: 8s !important; animation-iteration-count: infinite !important; }
}