/* === Hero de vidrio compartido (programas y proyectos) ===
   Se pinta en el color de cada módulo mediante --fjx-accent (que cada módulo
   define en su .xx-hero). Efecto "glass" tipo Apple + halo blanco tras el logo.
   Lo encola FUNAJIT Páginas en todas las páginas con módulo. */

.fjxp-ghero { position:relative; width:min(430px,80vw); aspect-ratio:1; margin:0 auto; display:grid; place-items:center; isolation:isolate; }

/* Orbe de vidrio esmerilado en el color del programa (con respaldo si no hay color-mix) */
.fjxp-ghero::before {
  content:""; position:absolute; inset:6%; z-index:1;
  border-radius:38% 62% 58% 42% / 44% 42% 58% 56%;
  background:rgba(255,255,255,.16);
  background:linear-gradient(150deg, color-mix(in srgb, var(--fjx-accent,#1D4ED8) 48%, transparent), color-mix(in srgb, var(--fjx-accent,#1D4ED8) 14%, transparent));
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 80px color-mix(in srgb, var(--fjx-accent,#1D4ED8) 34%, transparent), inset 0 2px 6px rgba(255,255,255,.5);
  animation:fjxp-morph 16s ease-in-out infinite;
}
/* Aro punteado giratorio en el color (guiño al hero de la portada) */
.fjxp-ghero::after {
  content:""; position:absolute; inset:0; z-index:0; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--fjx-accent,#1D4ED8) 42%, transparent);
  animation:fjxp-spin 60s linear infinite;
}
/* Halo blanco tras el logo para que destaque */
.fjxp-ghero-halo {
  position:absolute; z-index:2; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,0) 70%);
}
.fjxp-ghero-logo {
  position:relative; z-index:3; width:48%; aspect-ratio:1; display:grid; place-items:center;
  animation:fjxp-float 5.5s ease-in-out infinite;
}
.fjxp-ghero-logo img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(16,42,67,.22)); }

@keyframes fjxp-morph { 0%,100%{border-radius:38% 62% 58% 42% / 44% 42% 58% 56%} 50%{border-radius:60% 40% 44% 56% / 56% 44% 56% 44%} }
@keyframes fjxp-spin { to{transform:rotate(360deg)} }
@keyframes fjxp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@media (prefers-reduced-motion:reduce){ .fjxp-ghero::before,.fjxp-ghero::after,.fjxp-ghero-logo{animation:none} }

/* Variante para logos horizontales (MUN-SDE): el orbe se hace tarjeta ancha */
.fjxp-ghero--wide { width:min(460px,84vw); aspect-ratio:4/3; }
.fjxp-ghero--wide .fjxp-ghero-logo { width:76%; aspect-ratio:auto; }

/* === Video de YouTube click-to-load (facade) === */
.fjxp-video { position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#0a1628; box-shadow:0 20px 50px rgba(16,42,67,.18); }
.fjxp-video-play { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:none; cursor:pointer; display:block; }
.fjxp-video-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease, filter .3s ease; }
.fjxp-video-play:hover .fjxp-video-thumb { transform:scale(1.04); filter:brightness(.88); }
.fjxp-video-ico { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:74px; height:52px; border-radius:14px; background:rgba(210,30,30,.94); box-shadow:0 8px 24px rgba(0,0,0,.4); transition:background .2s ease, transform .2s ease; }
.fjxp-video-play:hover .fjxp-video-ico { background:#e0201f; transform:translate(-50%,-50%) scale(1.06); }
.fjxp-video-ico::before { content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff; }
.fjxp-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }