/* Página de detalle de programa — patrón UNAD (subnav + hero + ficha + inscripción + perfiles + FAQ) */

.prog-nav {
  background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 50;
}
.prog-nav .inner {
  max-width: 1200px; margin: 0 auto; padding: 0.6rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.prog-nav__home img { height: 74px; } /* +2px sobre 72px original, uniforme con el nav del home */
.prog-nav__title { font-weight: 700; color: var(--funprotec-navy); text-decoration: none; font-size: 1.525rem; } /* +2px sobre 1.4rem original */
.prog-nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; }
.prog-nav ul a {
  text-decoration: none; color: var(--card-text); font-weight: 600; font-size: 0.95rem;
  display: inline-flex; align-items: center; min-height: 44px;
}
.prog-nav ul a:hover { color: var(--funprotec-orange-ink); }
.prog-nav .nav-toggle {
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--funprotec-navy);
  color: var(--funprotec-navy); font-size: 1.3rem; border-radius: 8px; padding: 0.2rem 0.6rem; cursor: pointer;
}

@media (max-width: 700px) {
  .prog-nav .nav-toggle { display: block; }
  .prog-nav ul { display: none; width: 100%; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0 0; }
  .prog-nav.nav-open ul { display: flex; }
}

/* .volver-inicio-bar se movió a main.css (2026-08-25) para poder usarse también en
   oferta-academica.html, blog.html y la-fundacion.html, que no cargan este archivo. */

.prog-hero {
  position: relative; background: var(--funprotec-orange);
  padding: 2.5rem 1.5rem 5.5rem;
}
.prog-hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 860px) { .prog-hero__inner { grid-template-columns: 1fr; } }
/* Texto oscuro sobre el naranja institucional: blanco daba 2.76:1 (reprueba WCAG AA);
   este navy da 6.05:1 y conserva el naranja de marca sin alterarlo. */
.prog-hero__text h1 { color: var(--funprotec-on-brand); font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0 0 0.85rem; }
.prog-hero__desc { color: var(--funprotec-on-brand); font-size: 1rem; max-width: 480px; margin: 0 0 1.5rem; }
.prog-hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.btn-teal { background: var(--funprotec-aqua); color: #fff; }
.btn-teal:hover { background: var(--funprotec-aqua-dark); }
.prog-hero__media {
  min-height: 260px; border-radius: var(--funprotec-radius);
  background: linear-gradient(135deg, var(--funprotec-navy), var(--funprotec-navy-dark));
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6);
  font-size: 0.85rem; text-align: center; padding: 1rem;
  overflow: hidden;
}
/* Foto real: cada archivo ya viene pre-generado en 4:3 (relleno de fondo desenfocado de
   sí misma incluido cuando el original no calzaba en esa proporción), así "cover" llena
   el 100% de la caja sin recortar contenido real — caja e imagen comparten proporción. */
.prog-hero__media--foto { padding: 0; aspect-ratio: 4 / 3; }
.prog-hero__media--foto img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.prog-invest-badge {
  position: absolute; left: 2rem; bottom: -1.5rem;
  background: var(--funprotec-aqua); color: #fff; border-radius: 10px; padding: 0.85rem 1.25rem;
  display: flex; align-items: center; gap: 0.6rem; box-shadow: var(--funprotec-shadow);
  font-size: 0.85rem;
}
.prog-invest-badge .ico { font-size: 1.4rem; }
.prog-invest-badge strong { font-size: 1.1rem; }

.prog-facts {
  background: #fff; padding: 2.5rem 1.5rem 1.5rem;
}
.prog-facts .inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem 2rem;
  font-size: 0.9rem; color: var(--card-text);
}
.prog-facts strong { color: var(--funprotec-navy); }
/* Nota bajo la metodología cuando difiere de la resolución (programa.js, notaMetodologia). */
.prog-facts .ficha-nota { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.35; color: var(--card-text-muted); }
.prog-facts__note {
  max-width: 1200px; margin: 1.5rem auto 0; font-size: 0.78rem; color: var(--card-text-muted);
  background: #fff3cd; padding: 0.75rem 1rem; border-radius: 8px;
}
/* Variante "verificado" (2026-08-25): cuando la resolución de aprobación ya está confirmada
   contra el acto administrativo real (ver NORMATIVA_TECNICOS en data.js), la nota deja de ser
   una advertencia de dato pendiente — reutiliza la misma paleta verde de confirmación que
   .crm-form__msg (main.css) para mantener un solo lenguaje visual de "esto ya está verificado". */
.prog-facts__note--ok {
  background: #eafaf0; color: #0f5132; border: 1px solid #b7e4c7;
}

.prog-video { max-width: 1200px; margin: 3rem auto 0; padding: 0 1.5rem; }
.prog-video__wrap h2 { color: var(--funprotec-orange-ink); font-size: 1.4rem; margin-bottom: 1rem; }
.prog-video__frame {
  position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
  border-radius: var(--funprotec-radius); overflow: hidden; box-shadow: var(--funprotec-shadow);
  background: #000;
}
.prog-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.prog-video--pendiente {
  background: #f2f4f8; border-radius: var(--funprotec-radius); padding: 1.5rem;
}
.prog-video--pendiente code {
  background: #e5e8ee; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em;
}

.prog-diff {
  max-width: 1200px; margin: 3rem auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: start;
}
@media (max-width: 900px) { .prog-diff { grid-template-columns: 1fr; } }
.prog-diff__text h2 { color: var(--funprotec-orange-ink); font-size: 1.5rem; }
.prog-diff__text h3 { color: var(--funprotec-orange-ink); font-size: 1.15rem; margin-top: 2rem; }
.prog-diff__text ul { padding-left: 1.2rem; }
.prog-diff__text li { margin-bottom: 0.5rem; }

.prog-form {
  background: var(--funprotec-navy); color: #fff; border-radius: var(--funprotec-radius);
  padding: 1.5rem; position: sticky; top: 5.5rem;
}
/* color:#fff con !important (2026-09-08, a pedido del usuario: "que la letra se vea más
   blanca" en "¡Inscripciones abiertas!") — .prog-form ya pone color:#fff por herencia,
   pero eso solo gana mientras ningún elemento tenga su propio color explícito; si algún
   CSS externo (ej. un reset genérico que cargue HubSpot, con selector de etiqueta simple
   como "h3") le pone un color propio a este encabezado, gana esa regla externa porque la
   herencia del padre no se propaga como !important — forzarlo acá, directo sobre el h3,
   lo blinda sin depender de lo que traiga cualquier script de terceros. */
.prog-form h3 { margin-top: 0; color: #fff !important; }
/* :not(.hs-form) / :not(.hs-input) (2026-09-08): el formulario de inscripción ahora es
   el embed de HubSpot (#hubspot-form-programa, ver programa.html), que
   inserta su propio <form class="hs-form"> con sus propios <input class="hs-input">
   DENTRO de este mismo .prog-form. Sin esta exclusión, estas reglas (pensadas para el
   <form> plano de demostración que había antes, ya eliminado) le pisarían el estilo a
   los campos de HubSpot — se dejan acá por si algún día vuelve a haber un form propio
   dentro de .prog-form, pero ya no deben tocar el de HubSpot. */
.prog-form form:not(.hs-form) { display: flex; flex-direction: column; gap: 0.75rem; }
/* 44px de alto y 16px de fuente: cumple área táctil y evita el zoom automático
   que iOS aplica a los campos con texto menor a 16px. */
.prog-form input:not([type="checkbox"]):not(.hs-input) {
  min-height: 44px; padding: 0.65rem 0.85rem; border-radius: 8px; border: none; font-size: 1rem;
}
.prog-form__check {
  font-size: 0.8rem; display: flex; gap: 0.6rem; align-items: center; color: #c9d3e5;
  min-height: 44px; cursor: pointer;
}
.prog-form__check input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; }


/* Callout de asesoría institucional (ej. Orientación Vocacional) — arriba del formulario
   individual, con su propio separador, para que un colegio no tenga que llenar un
   formulario pensado para una persona suelta. Usa `:not([hidden])` para el layout en vez
   de una regla `display` sin condición — un `display:flex` sin esto le gana en cascada
   al `display:none` del atributo `hidden` y el bloque queda visible siempre (bug real que
   ya pasó con el popup de noticias, 2026-08-18 — ver blog.css).
   Texto a la izquierda, botón alineado a la derecha (`margin-left:auto`) — a pedido del
   usuario, con `flex-wrap` para que en la barra angosta del sidebar el botón baje debajo
   del texto en vez de aplastarse, en lugar de forzar una sola línea imposible. */
.prog-form__institucional:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.08); border: 1px solid var(--funprotec-orange);
  border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; font-size: 0.85rem;
}
.prog-form__institucional p { margin: 0; color: #dfe6f0; flex: 1; min-width: 160px; }
.prog-form__institucional .btn { margin-left: auto; white-space: nowrap; }

/* "Muy llamativo" a pedido del usuario: el mismo verde de WhatsApp (ya reconocible en
   todo el sitio) pero con un pulso de resplandor que no depende solo del color para
   llamar la atención — se detiene solo si el sistema tiene activado "reducir
   movimiento" (regla global en main.css). */
.btn-llamativo {
  animation: pulso-llamativo 1.8s ease-in-out infinite;
}
.btn-llamativo:hover { animation-play-state: paused; }
@keyframes pulso-llamativo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,127,55,0.55); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(26,127,55,0); transform: scale(1.04); }
}

.prog-plan, .prog-faq {
  max-width: 1200px; margin: 0 auto 3rem; padding: 2rem 1.5rem; background: #f2f4f8; border-radius: var(--funprotec-radius);
}
/* Tarjetas de fondo claro fijo: texto y título con colores fijos (en modo oscuro del sistema el
   texto heredado quedaba casi invisible sobre el gris claro). */
.prog-plan, .prog-faq { color: var(--card-text); }
.prog-plan h2, .prog-faq h2 { color: #c2410c; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.plan-sem { background: #fff; border-radius: 8px; padding: 1rem; }
.plan-sem h4 { margin: 0 0 0.5rem; color: var(--funprotec-navy); font-size: 0.98rem; }
.plan-sem__temas { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--card-text-muted); }
.plan-sem__temas li { margin-bottom: 0.55rem; }
/* La intensidad horaria/créditos van en su propia línea debajo del nombre de la asignatura
   (no al lado) — pedido explícito del usuario, 2026-08-18. */
.plan-sem__meta { display: block; margin-top: 0.15rem; color: var(--funprotec-orange-ink); font-weight: 600; font-size: 0.8rem; }

/* Línea de totales/fuente de la malla curricular oficial (ver MALLA_TECNICOS en data.js).
   Oculta por defecto vía [hidden] en el HTML; solo aparece para programas con malla confirmada. */
.plan-fuente { margin-top: 1rem; font-size: 0.85rem; color: var(--card-text-muted); font-style: italic; }

.prog-faq { background: #fff; }
.prog-faq details { border-bottom: 1px solid #eee; padding: 0.85rem 0; }
.prog-faq summary { cursor: pointer; font-weight: 600; color: var(--card-text); }
.prog-faq p { margin: 0.6rem 0 0; color: var(--card-text-muted); font-size: 0.9rem; }

/* ===== Malla curricular interactiva (2026-09-22) =====
   Diseño: panel lateral de detalle + columnas por semestre (patrón "Plan de estudios" de UNAD),
   con la paleta vibrante y el resaltado del organigrama de La Fundación (halo de color al pasar
   el cursor, tarjeta rellena al elegirla, el resto atenuado). Cada semestre tiene su color (--c).
   Texto siempre HTML real; el estado va en aria-pressed y data-sel (la CSP bloquea style=""). */
.malla {
  display: grid; grid-template-columns: 290px 1fr; gap: 1.5rem; align-items: start;
  margin-top: 1.25rem; padding: 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.14) 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);
}
@media (max-width: 900px) { .malla { grid-template-columns: 1fr; } }
.malla__lateral { display: grid; gap: 1rem; position: sticky; top: 6rem; }
@media (max-width: 900px) { .malla__lateral { position: static; } }
.malla__panel { border-radius: 14px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); overflow: hidden; }
.malla__panel-titulo {
  margin: 0; padding: 0.7rem 1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #ffd166; background: rgba(0,0,0,0.22);
}
.malla__detalle { padding: 1rem; min-height: 9rem; --c: #ffd166; text-align: center; }
.malla__detalle--c0 { --c: #ff9a3d; } .malla__detalle--c1 { --c: #38bdf8; }
.malla__detalle--c2 { --c: #34d399; } .malla__detalle--c3 { --c: #a78bfa; }
.malla__detalle[class*="--c"] { text-align: left; }
.malla__detalle > p { margin: 0; color: #e6eefb; font-size: 0.92rem; }
.malla__mano { display: block; margin: 0.4rem auto 0.5rem; color: #ffd166; }
.malla__detalle .malla__detalle-nombre { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.25; }
.malla__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
.malla__chip { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: var(--c); color: #0a1e38; }
.malla__chip--cod { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 0 0 0 1px var(--c); }
.malla__datos { margin: 0; display: grid; gap: 0.55rem; }
.malla__datos dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #c6d4ea; }
.malla__datos dd { margin: 0.1rem 0 0; font-size: 0.9rem; color: #fff; }
.malla__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; padding: 0.9rem; }
.malla__resumen div { text-align: center; padding: 0.55rem 0.2rem; border-radius: 10px; background: rgba(255,255,255,0.10); }
.malla__resumen strong { display: block; font-size: 1.5rem; color: #fff; }
.malla__resumen span { font-size: 0.74rem; color: #c6d4ea; }

.malla__periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.malla__periodo { --c: #ff9a3d; display: flex; flex-direction: column; gap: 0.6rem; }
.malla__periodo--c0 { --c: #ff9a3d; } .malla__periodo--c1 { --c: #38bdf8; } .malla__periodo--c2 { --c: #34d399; } .malla__periodo--c3 { --c: #a78bfa; }
.malla__periodo-head {
  display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border-radius: 12px;
  background: var(--c); color: #0a1e38; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.malla__periodo-head strong { font-size: 1.15rem; }
.malla__periodo-head span { font-size: 0.82rem; font-weight: 600; }
.malla__curso {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem; width: 100%; padding: 0.7rem 0.85rem; text-align: left;
  font: inherit; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,0.18); border-left: 5px solid var(--c);
  border-radius: 10px; background: rgba(255,255,255,0.08); -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.25s ease;
}
.malla__curso-nombre { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.malla__curso-cod { font-size: 0.78rem; color: #c6d4ea; min-height: 1.6rem; padding-right: 2.2rem; }
.malla__curso:hover, .malla__curso:focus-visible {
  transform: translateY(-3px) scale(1.03); background: rgba(255,255,255,0.20);
  box-shadow: 0 0 0 2px var(--c), 0 0 26px var(--c);
}
.malla__curso:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.malla__curso[aria-pressed="true"] {
  background: var(--c); color: #0a1e38; transform: scale(1.04);
  box-shadow: 0 0 0 3px #fff, 0 0 32px var(--c);
}
.malla__curso[aria-pressed="true"] .malla__curso-cod { color: #0a1e38; font-weight: 700; }
/* Con una asignatura elegida se atenúan los semestres que no intervienen (el suyo y el de sus
   prerrequisitos siguen a pleno color). */
.malla__periodo--atenuado { opacity: 0.4; transition: opacity 0.25s ease; }
.malla__periodo--atenuado:hover { opacity: 1; }
/* ===== Flechas de prerrequisito (2026-09-23), como el plan de estudios de la UNAD =====
   Cada tarjeta lleva una flecha del color de su semestre: aprobar ese semestre habilita el
   siguiente (el último lleva una marca de meta). Al elegir una asignatura, las del semestre
   previo (sus prerrequisitos) se iluminan y sus flechas titilan. */
.malla__flecha {
  position: absolute; right: 0.6rem; bottom: 0.55rem; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #0a1e38;
  box-shadow: 0 0 10px var(--c); animation: malla-flecha-mov 1s ease-in-out infinite alternate;
}
.malla__flecha--meta { animation: none; }
@keyframes malla-flecha-mov { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
.malla__curso:hover .malla__flecha { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--c); }
.malla__curso[aria-pressed="true"] .malla__flecha { background: #0a1e38; color: var(--c); box-shadow: 0 0 0 2px #fff; }
.malla__curso--prerreq { box-shadow: 0 0 0 2px #fff, 0 0 22px var(--c); animation: malla-prerreq 1.1s ease-in-out infinite alternate; }
.malla__curso--prerreq .malla__flecha { background: #fff; animation: malla-flecha-titilar 0.9s ease-in-out infinite, malla-flecha-mov 0.6s ease-in-out infinite alternate; }
@keyframes malla-prerreq { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes malla-flecha-titilar { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.malla__ayuda { padding: 0.9rem 1rem; font-size: 0.86rem; color: #e6eefb; }
.malla__ayuda p { margin: 0 0 0.7rem; }
.malla__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.malla__leyenda-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; font-weight: 700; color: #fff; }
.malla__leyenda-item .malla__flecha { position: static; flex-shrink: 0; width: 24px; height: 24px; animation: none; }

.malla__previos { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.malla__chip--previo { --c: #ff9a3d; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.55rem; }
.malla__chip--c1 { --c: #38bdf8; } .malla__chip--c2 { --c: #34d399; } .malla__chip--c3 { --c: #a78bfa; }
@media (prefers-reduced-motion: reduce) {
  .malla__flecha, .malla__curso--prerreq, .malla__curso--prerreq .malla__flecha { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .malla__curso:hover, .malla__curso:focus-visible, .malla__curso[aria-pressed="true"] { transform: none; }
}

/* Recuadro del plan de estudios (2026-09-23): franja luminiscente arriba (degradado con los colores
   de los semestres que se desplaza despacio y proyecta un halo) + título e introducción centrados. */
.prog-plan, .prog-faq { position: relative; overflow: clip; padding-top: 2.6rem; box-shadow: 0 0 0 1px rgba(56,189,248,0.25), 0 0 28px rgba(56,189,248,0.22); }
.prog-plan::before, .prog-faq::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: linear-gradient(90deg, #ff9a3d, #ff1f6b, #a78bfa, #38bdf8, #34d399, #ffd60a, #ff9a3d) 0 0 / 200% 100%;
  box-shadow: 0 0 18px 4px rgba(56,189,248,0.75), 0 0 34px 8px rgba(255,31,107,0.45);
  animation: franja-luz 6s linear infinite;
}
@keyframes franja-luz { to { background-position: -200% 0; } }
.prog-plan h2, #plan-intro, .prog-faq h2 { text-align: center; }
.prog-plan h2, .prog-faq h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .prog-plan::before, .prog-faq::before { animation: none !important; } }

/* Botón de preinscripción dentro del hero naranja: margen para que los bombillos no toquen al vecino. */
.prog-hero__ctas .btn-preinscripcion--hero { margin: 0.9rem 1.2rem 0.9rem 0.6rem; }
.prog-desc-extra { margin: 0.9rem 0 0; }

/* Introducción larga del plan de estudios: columna centrada, texto alineado a la izquierda para leer cómodo. */
.plan-intro--larga { max-width: 62rem; margin: 0 auto 1rem; text-align: left !important; line-height: 1.65; }

/* ===== Transición giratoria de entrada a cada programa (2026-09-23) =====
   La escena la crea transicion-programa.js (en el <head>, para tapar la página desde el primer
   píxel). Colores por programa en --tr-a / --tr-b. Dura ~2,4 s; un clic la salta. Con "reducir
   movimiento" el script ni la crea. Salvaguarda: si el script fallara, la escena se oculta sola. */
html.con-transicion { overflow: hidden; }
.transicion {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  background: radial-gradient(circle at 50% 45%, var(--tr-b, #14345c) 0%, #06101f 72%);
  overflow: hidden; cursor: pointer; perspective: 1200px; color: #fff; font-family: "Segoe UI", system-ui, sans-serif;
  animation: tr-seguridad 0.01s 4.5s forwards;
}
@keyframes tr-seguridad { to { visibility: hidden; opacity: 0; } }
.transicion__rayos {
  position: absolute; inset: -60%; opacity: 0.32; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--tr-a, #f47920) 0 10deg, transparent 10deg 30deg);
  animation: tr-girar 5s linear infinite;
}
@keyframes tr-girar { to { transform: rotate(360deg); } }
.transicion__carta {
  position: relative; width: 210px; height: 210px; border-radius: 30px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--tr-a, #f47920), var(--tr-b, #14345c));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.85), 0 0 60px var(--tr-a, #f47920), 0 0 130px var(--tr-b, #14345c);
  animation: tr-entrada 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both, tr-latido 0.9s ease-in-out 1.3s infinite alternate;
}
.transicion__frente { display: grid; place-items: center; color: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.transicion__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes tr-entrada {
  0% { transform: rotateY(-720deg) rotateX(25deg) scale(0.08); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotateY(0) rotateX(0) scale(1); opacity: 1; }
}
@keyframes tr-latido { to { transform: scale(1.05); } }
.transicion__nombre {
  position: relative; margin: 0; padding: 0 1rem; text-align: center; font-size: clamp(1.5rem, 4.5vw, 2.6rem); font-weight: 900;
  letter-spacing: 0.02em; text-shadow: 0 3px 18px rgba(0,0,0,0.6); animation: tr-texto 0.7s ease-out 0.9s both;
}
/* "Toca para saltar" (2026-09-24, a pedido del usuario: más visible, naranja fosforescente). Pastilla
   naranja neón con texto oscuro (contraste alto) y halo que late. */
.transicion__pista {
  position: relative; margin: 0; padding: 0.5rem 1.1rem; border-radius: 999px;
  background: #ff7a00; color: #1a0a00; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.03em;
  box-shadow: 0 0 0 2px #ffb15c, 0 0 18px 4px rgba(255, 122, 0, 0.85), 0 0 42px 10px rgba(255, 94, 0, 0.45);
  animation: tr-texto 0.6s ease-out 1.2s both, tr-pista 1.1s ease-in-out 1.8s infinite alternate;
}
.transicion__pista::before { content: "⏭ "; }
@keyframes tr-pista { to { box-shadow: 0 0 0 3px #ffd08a, 0 0 28px 8px rgba(255, 122, 0, 1), 0 0 60px 16px rgba(255, 94, 0, 0.6); transform: scale(1.06); } }
@keyframes tr-texto { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.transicion--salida { animation: tr-salida 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes tr-salida {
  0% { transform: rotate(0) scale(1); clip-path: circle(150% at 50% 50%); opacity: 1; }
  100% { transform: rotate(40deg) scale(1.9); clip-path: circle(0% at 50% 50%); opacity: 0; }
}

/* ===== Color característico por programa (2026-09-23) =====
   Cada programa/curso tiene su propia paleta en la presentación (hero), los títulos, el panel de
   inscripción y los títulos de los recuadros. `programa.js` pone data-programa=<id> en <body>.
   --prog-ink: texto sobre el hero (contraste AA verificado por color); --prog-accent: títulos sobre el
   fondo de la página (se aclara en modo oscuro); --prog-accent-card: títulos sobre tarjetas claras. */

.prog-hero { background: linear-gradient(135deg, var(--prog-bg, var(--funprotec-orange)), var(--prog-bg-2, var(--funprotec-orange))); }
.prog-hero__text h1, .prog-hero__desc { color: var(--prog-ink, var(--funprotec-on-brand)); }
.prog-nav ul a:hover, .prog-video__wrap h2, .prog-diff__text h2, .prog-diff__text h3 { color: var(--prog-accent, var(--funprotec-orange-ink)); }
.prog-plan h2, .prog-faq h2 { color: var(--prog-accent-card, #c2410c); }
.plan-sem__meta { color: var(--prog-accent-card, var(--funprotec-orange-ink)); }
.prog-form { background: var(--prog-panel, var(--funprotec-navy)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-programa] { --prog-accent: var(--prog-accent-o); } }
:root[data-theme="dark"] body[data-programa] { --prog-accent: var(--prog-accent-o); }

/* Escena con video (2026-09-23): la tarjeta pasa a 16:9 grande y reproduce el clip; se cierra al terminar. */
.transicion--video .transicion__carta {
  /* El ancho también se limita por la altura de la pantalla (celular acostado: poca altura), dejando
     sitio para el nombre y "Toca para saltar" debajo (2026-09-24). */
  width: min(88vw, 860px, calc((100dvh - 10rem) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; border-radius: 22px;
  animation: tr-entrada 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (max-height: 480px) {
  .transicion { gap: 0.6rem; }
  .transicion__nombre { font-size: 1.1rem; }
  .transicion--video .transicion__nombre { font-size: 1rem; }
  .transicion__pista { padding: 0.35rem 0.9rem; font-size: 0.82rem; }
  .transicion__sonido { top: 0.6rem; right: 0.6rem; }
}
@media (max-width: 560px) {
  .transicion__sonido { top: 0.8rem; right: 0.8rem; padding: 0.5rem 0.85rem; font-size: 0.85rem; }
}
.transicion--video .transicion__frente { display: none; }
.transicion--video .transicion__nombre { font-size: clamp(1.2rem, 3.4vw, 2rem); }
/* El seguro de .transicion (ocultarse a los 4,5 s) cortaba los videos de 6-10 s antes de terminar
   (2026-09-24). Con video, el seguro cubre el peor caso del script: hasta 8 s esperando que arranque
   (datos lentos) + el video (≤ 12 s) + margen y salida. Solo actúa si el script fallara. */
.transicion.transicion--video { animation: tr-seguridad 0.01s 24s forwards; }
/* Portada (foto del programa) mientras el video carga: mismo encuadre que el video. */
.transicion__video { background: #06101f; }
/* Botón "Activar sonido" (transicion-programa.js): aparece solo si el navegador bloqueó el audio al
   arrancar. Color del programa, halo y un latido para que se note. */
.transicion__sonido {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; min-height: 44px;
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 2px solid #fff; cursor: pointer;
  background: var(--tr-a, #f47920); color: #fff; font: 800 0.95rem/1 "Segoe UI", system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 26px var(--tr-a, #f47920);
  animation: tr-sonido 1.2s ease-in-out infinite alternate;
}
.transicion__sonido:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
@keyframes tr-sonido { to { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(255,255,255,0.28), 0 0 38px var(--tr-a, #f47920); } }
@media (prefers-reduced-motion: reduce) {
  .transicion__sonido { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}

/* "Reducir movimiento" (2026-09-24, a pedido del usuario: "que se vea aunque tenga las animaciones
   apagadas"): main.css apaga toda animación con !important; aquí se reponen las duraciones de la escena.
   El retraso del seguro no lo toca main.css, así que sigue funcionando. */
@media (prefers-reduced-motion: reduce) {
  .transicion__rayos { animation-duration: 5s !important; animation-iteration-count: infinite !important; }
  .transicion__carta { animation-duration: 1.3s, 0.9s !important; animation-iteration-count: 1, infinite !important; }
  .transicion--video .transicion__carta { animation-duration: 1.3s !important; animation-iteration-count: 1 !important; }
  .transicion__nombre { animation-duration: 0.7s !important; }
  .transicion__pista { animation-duration: 0.6s, 1.1s !important; animation-iteration-count: 1, infinite !important; }
  .transicion--salida { animation-duration: 0.7s !important; }
}
.prog-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

/* Recuadro del video con marco vibrante y luminoso (2026-09-23): borde degradado multicolor que se desplaza
   despacio y halo de luz alrededor de todo el video. Con "reducir movimiento" el marco queda quieto. */
.prog-video__frame {
  border: 7px solid transparent; border-radius: 22px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(90deg, #ff9a3d, #ff1f6b, #a78bfa, #22d3ee, #34d399, #ffd60a, #ff9a3d) border-box;
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 0 22px 4px rgba(34,211,238,0.6), 0 0 46px 10px rgba(255,31,107,0.4), 0 0 70px 14px rgba(255,154,61,0.25);
  animation: marco-video 7s linear infinite;
}
@keyframes marco-video { to { background-position: 0 0, -200% 0; } }
.prog-video__frame iframe, .prog-video__frame video { border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .prog-video__frame { animation: none !important; } }