/* ==========================================================
   IESPP "HORACIO ZEVALLOS GÁMEZ" — TOKENS DE MARCA
   Paleta extraída por muestreo de píxeles directamente del
   diploma oficial emitido por la institución (Ministerio de
   Educación / GEREDU Cusco): azul institucional, rojo de las
   cintas, rojo granate del texto "DIPLOMA", dorado de líneas
   y textos secundarios, y el crema del fondo del documento.
========================================================== */
:root{
  --azul-900:#001F5F;   /* azul de "MINISTERIO DE EDUCACIÓN" y textos */
  --azul-800:#0B3178;
  --azul-700:#1B4A9E;
  --rojo-600:#C00102;   /* rojo institucional exacto de las cintas/esquinas del diploma */
  --rojo-700:#8F0000;
  --granate-700:#8B0000;/* rojo oscuro del texto "DIPLOMA" */
  --oro-500:#C00102;    /* rojo institucional exacto del diploma (cintas/esquinas) */
  --oro-400:#E23033;    /* variante más clara para hover */
  --tierra-600:#8A5A3B;
  --tinta:#111A2E;
  --gris-600:#5B6773;
  --gris-300:#DDE2E8;
  --crema:#FAF6F3;      /* fondo exacto del diploma */
  --azul-tint:#EBEFF7;
  --blanco:#FFFFFF;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', system-ui, sans-serif;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-card:0 10px 30px -14px rgba(0,31,95,.25);
  --container:1200px;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.15}
p{margin:0}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

:focus-visible{outline:3px solid var(--oro-500);outline-offset:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), background 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.btn-primary{background:var(--oro-500);color:var(--blanco)}
.btn-primary:hover{background:var(--oro-400);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(192,1,2,.45)}
.btn-outline{background:transparent;color:var(--azul-900);border:1.5px solid var(--azul-900);padding:10px 22px}
.btn-outline:hover{background:var(--azul-900);color:var(--blanco);transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,31,95,.55)}
.btn-block{width:100%}

/* ==========================================================
   1. AVISO ÚNICO — alto fijo 40px, responsivo
========================================================== */
.avisos-bar{
  --avisos-h:40px;
  background:var(--azul-800);color:var(--blanco);
  overflow:hidden;
  animation:avisosSlideIn .5s var(--ease-out) both;
}
@keyframes avisosSlideIn{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.avisos-bar__wrapper{
  display:flex;align-items:center;flex-wrap:nowrap;gap:14px;
  height:var(--avisos-h);padding:0 24px;
}
.avisos-bar__anchor{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;overflow:hidden;
}
.avisos-bar__badge{
  flex:0 0 auto;background:var(--blanco);color:var(--azul-800);
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  font-size:.66rem;padding:5px 11px;border-radius:999px;white-space:nowrap;
  transition:transform 0.6s var(--ease-out);
}
.avisos-bar__message{
  font-size:.85rem;font-weight:500;line-height:1.3;color:var(--blanco);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.avisos-bar__message strong{font-weight:800;color:var(--blanco)}
.avisos-bar__cta{
  display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font-weight:800;color:var(--blanco);text-transform:uppercase;font-size:.82rem;
  position:relative;
}
.avisos-bar__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--blanco);transform:scaleX(0);transform-origin:left;
  transition:transform 0.6s var(--ease-out);
}
.avisos-bar__anchor:hover .avisos-bar__cta::after{transform:scaleX(1)}
.avisos-bar__anchor:hover .avisos-bar__badge{transform:scale(1.06)}

.avisos-bar__close{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;margin-left:auto;
  display:flex;align-items:center;justify-content:center;
  color:var(--crema);border:1.5px solid rgba(255,255,255,.35);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease-out), background 0.6s var(--ease), border-color 0.6s var(--ease);
}
.avisos-bar__close:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7);transform:rotate(90deg)}

/* ==========================================================
   2. TOPBAR (panel superior) — esquema peru365travel:
      logo+denominación a la izquierda; a la derecha dos filas
      apiladas SIN línea divisora (solo espacio en blanco)
========================================================== */
.topbar{background:var(--blanco)}
.topbar-flex{display:flex;align-items:center;gap:32px;padding:14px 24px}

.topbar-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;transition:transform 0.6s var(--ease-out)}
.topbar-brand:hover{transform:translateY(-1px)}
.topbar-logo{width:52px;height:52px;object-fit:contain;transition:transform 0.6s var(--ease-out)}
.topbar-brand:hover .topbar-logo{transform:scale(1.07) rotate(-3deg)}
.topbar-brand-text{display:flex;flex-direction:column;line-height:1.3}
.topbar-brand-text small{
  color:var(--gris-600);font-size:.7rem;font-weight:600;letter-spacing:.02em;
  max-width:340px;transition:color 0.6s var(--ease);
}
.topbar-brand-text strong{
  font-family:var(--font-display);color:var(--azul-900);font-size:1.15rem;
  font-weight:600;letter-spacing:.01em;transition:color 0.6s var(--ease);
}
.topbar-brand:hover .topbar-brand-text strong{color:var(--oro-500)}
.topbar-brand:hover .topbar-brand-text small{color:var(--azul-900)}

.topbar-right-stack{display:flex;flex-direction:column;gap:10px;flex:1;margin-left:auto}

.topbar-row-top{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.topbar-links{display:flex;gap:6px}
.topbar-links a{
  position:relative;color:var(--tinta);font-weight:700;font-size:.86rem;
  padding:7px 12px;border-radius:999px;
  transition:color 0.6s var(--ease), background 0.6s var(--ease);
}
.topbar-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--oro-500);transform:scaleX(0);transform-origin:left;
  transition:transform 0.6s var(--ease-out);
}
.topbar-links a:hover{color:var(--azul-900);background:var(--azul-tint)}
.topbar-links a:hover::after{transform:scaleX(1)}

/* Campanita de anuncios: reabre el modal de anuncio manualmente,
   con el número de anuncios activos como insignia */
.topbar-bell{
  position:relative;flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--azul-900);border:1.5px solid var(--gris-300);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out), transform .4s var(--ease-out);
  animation:bellRing 4.5s ease-in-out infinite;
}
.topbar-bell:hover{background:var(--azul-tint);border-color:var(--azul-900);transform:scale(1.06)}
.topbar-bell-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--rojo-600);color:var(--blanco);
  font-size:.62rem;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--blanco);
}
@keyframes bellRing{
  0%, 92%, 100%{transform:rotate(0)}
  93%{transform:rotate(-12deg)}
  94%{transform:rotate(10deg)}
  95%{transform:rotate(-8deg)}
  96%{transform:rotate(6deg)}
  97%{transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){
  .topbar-bell{animation:none}
}

.lang-flags{display:flex;align-items:center;gap:6px}
.lang-flag{
  width:26px;height:19px;border-radius:4px;overflow:hidden;padding:0;
  border:2px solid transparent;opacity:.55;
  transition:opacity 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease-out);
}
.lang-flag svg{display:block;width:100%;height:100%}
.lang-flag:hover{opacity:.9;transform:translateY(-1px)}
.lang-flag.is-active{opacity:1;border-color:var(--oro-500)}

.topbar-row-bottom{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.social-links{display:flex;gap:8px}
.social-icon{
  width:30px;height:30px;border-radius:50%;background:var(--blanco);
  display:flex;align-items:center;justify-content:center;color:var(--azul-900);
  border:1px solid var(--gris-300);
  transition:background 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease-out);
}
.social-icon:hover{background:var(--azul-900);color:var(--blanco);border-color:var(--azul-900);transform:translateY(-2px)}

.topbar-phone-dropdown{position:relative}
.topbar-phone-btn{
  display:flex;align-items:center;gap:8px;color:var(--tinta);font-weight:700;font-size:.85rem;
  padding:8px 16px;border-radius:999px;border:1.5px solid var(--gris-300);
  transition:border-color 0.6s var(--ease), color 0.6s var(--ease), background 0.6s var(--ease);
}
.topbar-phone-btn:hover{border-color:var(--azul-900);color:var(--azul-900);background:var(--azul-tint)}
.topbar-phone-btn svg:first-child{color:var(--oro-500)}
.phone-caret{transition:transform 0.6s var(--ease-out)}
.topbar-phone-dropdown.is-open .phone-caret{transform:rotate(180deg)}
.topbar-phone-list{
  position:absolute;top:calc(100% + 10px);right:0;background:var(--blanco);
  border:1px solid var(--gris-300);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);min-width:200px;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity 0.6s var(--ease-out), visibility 0.6s, transform 0.6s var(--ease-out);
  z-index:250;
}
.topbar-phone-dropdown.is-open .topbar-phone-list{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.topbar-phone-list a{display:block;padding:9px 12px;border-radius:6px;font-weight:600;font-size:.85rem;transition:background 0.6s var(--ease)}
.topbar-phone-list a:hover{background:var(--azul-tint)}

.topbar-contact-btn{padding:9px 22px;font-size:.85rem}

/* Widget de Google Translate: oculto visualmente, controlado por las banderas */
.gt-hidden{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
body{top:0px !important;position:static !important}
html{margin-top:0 !important}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
body > .skiptranslate,
body > iframe[src*="translate.google"],
#goog-gt-tt,
.goog-te-balloon-frame{
  display:none !important;visibility:hidden !important;
  height:0 !important;max-height:0 !important;width:0 !important;
  overflow:hidden !important;pointer-events:none !important;
  position:fixed !important;top:-9999px !important;left:-9999px !important;
  z-index:-1 !important;
}
.goog-tooltip,.goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}

/* ==========================================================
   3. NAV PRINCIPAL / MEGAMENÚ — fijo (sticky) al hacer scroll,
      con barrido de entrada y fondo azul tenue
========================================================== */
.main-nav{
  background:var(--azul-tint);border-bottom:1px solid var(--gris-300);
  position:sticky;top:0;z-index:100;
  transition:box-shadow 0.6s ease, background 0.6s ease;
}
.main-nav.is-stuck{background:var(--blanco);box-shadow:0 8px 24px -14px rgba(11,61,92,.35)}

/* Barrido de entrada: se dispara una sola vez al cruzar el umbral
   de "fijo", vía la clase .is-entering que añade script.js */
.main-nav.is-entering{animation:navSlideDown .5s var(--ease-out) both}
@keyframes navSlideDown{
  from{transform:translateY(-100%);opacity:.5}
  to{transform:translateY(0);opacity:1}
}

.main-nav-inner{position:relative;display:flex;align-items:center;gap:16px;padding:12px 24px;overflow:visible}

/* El logo del nav SOLO aparece cuando el nav ya está fijo (o en
   móvil): en pantallas grandes, en su estado normal, el logo
   grande del topbar ya cumple esa función y sería redundante.
   Cuando está fijo se mantiene compacto: logo chico, sin
   subtítulo, para no competir por espacio con el menú. */
.main-nav-brand{display:none;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.main-nav.is-stuck .main-nav-brand{display:flex}
.main-nav-logo{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.main-nav-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.main-nav-brand-text small{
  color:var(--gris-600);font-size:.62rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.main-nav-brand-text strong{
  font-family:var(--font-display);color:var(--azul-900);font-size:.85rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* En escritorio (nav fijo) solo se ve la versión de siglas; la
   versión con denominación + nombre propio es exclusiva de móvil */
.main-nav-brand-text-mobile{display:none}

.nav-toggle{display:none}
.nav-backdrop{display:none}

.mega-nav{min-width:0;flex:1}
.mega-nav-list{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
.mega-nav-item{position:relative}
.mega-nav-link{
  display:flex;align-items:center;gap:6px;padding:9px 12px;white-space:nowrap;
  font-weight:700;font-size:.82rem;color:var(--tinta);border-radius:var(--radius-sm);
  transition:color 0.6s var(--ease), background 0.6s var(--ease), padding 0.6s var(--ease), font-size 0.6s var(--ease);
}
.mega-nav-icon{width:15px;height:15px;flex:0 0 auto;color:var(--azul-700)}
.mega-nav-link:hover,.mega-nav-item:focus-within .mega-nav-link{color:var(--azul-900);background:var(--blanco)}
.mega-nav-link:hover .mega-nav-icon{color:var(--oro-500)}
.mega-caret{transition:transform 0.6s var(--ease-out)}
.mega-nav-item:hover .mega-caret{transform:rotate(180deg)}

/* Cuando el nav está fijo, todo se compacta un poco más para que
   nunca desborde el ancho de la pantalla (logo + denominación +
   8 items de menú compiten por el mismo espacio horizontal). */
.main-nav.is-stuck .mega-nav-link{padding:8px 9px;font-size:.78rem}
.main-nav.is-stuck .mega-nav-icon{width:13px;height:13px}

/* ----------------------------------------------------------
   PANEL COMPARTIDO — un solo contenedor, atado al .container
   (mismos márgenes que el resto de la página). Nunca puede
   salirse del ancho de la página porque left:0/right:0 son
   relativos al propio container, no a la ventana. script.js
   solo decide cuál .mega-shared-panel lleva .is-active y en
   qué "left" (ya recortado/clamped) queda dentro de esa franja.
---------------------------------------------------------- */
.mega-shared{
  position:absolute;top:100%;left:0;right:0;height:0;
  pointer-events:none;z-index:90;
}
.mega-shared-panel{
  position:absolute;top:14px;left:0;
  background:var(--blanco);border:1px solid var(--gris-300);border-radius:var(--radius-md);
  box-shadow:0 24px 48px -20px rgba(11,61,92,.35);
  padding:22px;width:max-content;max-width:100%;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-14px) scale(.96);transform-origin:top center;
  transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.6s;
}
.mega-shared-panel.is-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);
}
.mega-panel-inner{display:flex;gap:28px}

/* Los elementos DE ADENTRO del panel (columnas y la imagen/video)
   entran con su propio pequeño escalonado, igual que en el
   carrusel — no todos de golpe apenas se abre el panel. */
.mega-col,
.mega-media{
  opacity:0;transform:translateY(10px);
}
.mega-shared-panel.is-active .mega-col,
.mega-shared-panel.is-active .mega-media{
  animation:megaItemIn .38s var(--ease-out) both;
}
.mega-shared-panel.is-active .mega-col:nth-child(1){animation-delay:.06s}
.mega-shared-panel.is-active .mega-col:nth-child(2){animation-delay:.12s}
.mega-shared-panel.is-active .mega-col:nth-child(3){animation-delay:.18s}
.mega-shared-panel.is-active .mega-media{animation-delay:.24s}
@keyframes megaItemIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.mega-col{min-width:170px}
.mega-col-title{
  display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--oro-500);margin-bottom:10px;
}
.mega-col ul{display:flex;flex-direction:column;gap:6px}
.mega-col a{font-size:.87rem;color:var(--tinta);padding:5px 0;display:block;transition:color 0.6s var(--ease), padding-left 0.6s var(--ease)}
.mega-col a:hover{color:var(--azul-900);padding-left:4px}

/* Columna de imagen / video / visual de marca que acompaña cada mega menú */
.mega-media{
  flex:0 0 200px;display:flex;flex-direction:column;gap:8px;
  border-radius:var(--radius-sm);overflow:hidden;align-self:flex-start;
}
.mega-media img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm);transition:transform 0.6s var(--ease-out)}
.mega-media:hover img{transform:scale(1.04)}
.mega-media-caption{font-size:.78rem;color:var(--gris-600);line-height:1.4}
.mega-media-link{
  display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:.8rem;
  color:var(--azul-900);
}
.mega-media:hover .mega-media-link{color:var(--oro-500)}

.mega-video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius-sm);overflow:hidden;background:var(--tinta)}
.mega-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Visual de marca (degradé + ícono) para menús sin foto/video real aún */
.mega-media-visual{
  height:120px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--azul-800), var(--azul-900));
  display:flex;align-items:center;justify-content:center;
}
.mega-media-icon{width:44px;height:44px;color:rgba(255,255,255,.85)}
.mega-media-icon svg{width:100%;height:100%}

/* ==========================================================
   4. CARRUSEL PRINCIPAL — 6 elementos por slide, entrada
      escalonada y zoom lento del fondo mientras está activo
========================================================== */
.hero-carousel{position:relative;height:min(82vh,660px);min-height:460px;overflow:hidden;background:var(--azul-900)}
.hero-track{position:relative;width:100%;height:100%}

.hero-slide{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity 0.6s ease, visibility 0.6s;
  pointer-events:none;
}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}

/* 1. Imagen de fondo: zoom lento y continuo mientras el slide
   está activo (efecto "Ken Burns"), se reinicia cada vez que
   vuelve a activarse porque la animación cuelga de .is-active */
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);
}
.hero-slide.is-active .hero-bg{
  animation:heroZoom 7s linear both;
}
@keyframes heroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.09)}
}

.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(0,20,60,.92) 0%, rgba(0,20,60,.72) 40%, rgba(0,20,60,.25) 75%, rgba(0,20,60,.1) 100%);
}

.hero-content{position:relative;height:100%;display:flex;align-items:center;z-index:5}
.hero-text-col{display:flex;flex-direction:column;gap:16px;max-width:600px;color:var(--blanco)}

/* Entrada escalonada: cada elemento parte oculto y solo se anima
   cuando su slide está activo, con delays crecientes en el orden
   pedido -> etiqueta, título, descripción, botón, y por separado
   la imagen de persona (ver .hero-persona más abajo). */
.hero-eyebrow,
.hero-title,
.hero-text,
.hero-btn{
  opacity:0;transform:translateY(22px);
}
.hero-slide.is-active .hero-eyebrow{animation:heroFadeUp .6s var(--ease-out) .15s both}
.hero-slide.is-active .hero-title{animation:heroFadeUp .7s var(--ease-out) .32s both}
.hero-slide.is-active .hero-text{animation:heroFadeUp .7s var(--ease-out) .5s both}
.hero-slide.is-active .hero-btn{animation:heroFadeUp .6s var(--ease-out) .68s both}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-eyebrow{
  display:inline-flex;width:fit-content;padding:6px 14px;border-radius:999px;
  font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;
}
/* Color de la etiqueta según el tipo de contenido del slide */
.hero-slide[data-color="oro"] .hero-eyebrow{background:rgba(201,162,39,.22);border-color:var(--oro-400);color:var(--oro-400)}
.hero-slide[data-color="rojo"] .hero-eyebrow{background:rgba(192,1,2,.25);border-color:#ff8a8a;color:#ff9d9d}
.hero-slide[data-color="azul"] .hero-eyebrow{background:rgba(96,160,255,.2);border-color:#8fc0ff;color:#a9d0ff}

.hero-title{font-size:clamp(1.9rem,4vw,3.1rem);color:var(--blanco);line-height:1.15}
.hero-text{font-size:1.05rem;color:rgba(255,255,255,.88);max-width:520px}

/* 5. Imagen de persona recortada: centrada verticalmente, hacia
   el costado derecho, entra la última (después del botón) con
   un desplazamiento lateral + fade, para que se sienta como el
   remate de la secuencia. */
.hero-persona{
  position:absolute;right:0;bottom:0;left:38%;height:100%;
  display:flex;align-items:flex-end;justify-content:flex-end;
  z-index:4;pointer-events:none;
  opacity:0;transform:translateX(40px);
}
.hero-slide.is-active .hero-persona{
  animation:heroPersonaIn .8s var(--ease-out) .3s both;
}
@keyframes heroPersonaIn{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
.hero-persona img{
  height:100%;width:100%;object-fit:cover;object-position:center;
  /* Degradado SOLO en el borde izquierdo (hacia el texto): empieza
     transparente justo donde vive el texto y a partir de ~38% de
     ancho ya se ve la imagen completa, sin desvanecer los otros
     3 bordes (arriba/abajo/derecha quedan nítidos, tocando el
     marco del slide). */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, black 38%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 18%, black 38%);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.4));
}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
  color:var(--blanco);display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px);transition:0.6s ease;
}
.hero-arrow:hover{background:var(--oro-500);color:var(--blanco);border-color:var(--oro-500)}
.hero-arrow-prev{left:24px}
.hero-arrow-next{right:24px}

.hero-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:20}
.hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:width 0.6s var(--ease-out), background 0.6s var(--ease)}
.hero-dot.is-active{background:var(--oro-500);width:26px;border-radius:5px}

/* franja de licenciamiento */
.strip-licenciamiento{background:var(--oro-500)}
.strip-inner{display:flex;align-items:center;gap:12px;justify-content:center;padding:10px 24px;text-align:center}
.strip-badge{
  background:var(--azul-900);color:var(--blanco);font-weight:800;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
}
.strip-inner p{color:var(--blanco);font-weight:700;font-size:.9rem}

/* ==========================================================
   Secciones genéricas
========================================================== */
.section{padding:72px 0}
.section-head{display:flex;flex-direction:column;gap:6px;margin-bottom:38px}
.section-head-center{align-items:center;text-align:center}
.section-eyebrow{color:var(--oro-500);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.section-title{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--azul-900)}
.section-link{margin-left:auto;font-weight:700;color:var(--azul-900);align-self:flex-end}
.section-footer-link{text-align:center;margin-top:36px}
.section-footer-link .section-link{margin:0;display:inline-flex}
.section-head:not(.section-head-center){flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.section-head:not(.section-head-center) .section-eyebrow,
.section-head:not(.section-head-center) .section-title{flex-basis:100%}

/* Título con acento subrayado (esquema "Excelencia en Formación
   Pedagógica") — se usa en todas las secciones de contenido */
.section-heading{margin-bottom:44px}
.section-heading.is-center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.section-heading .section-eyebrow{display:block;margin-bottom:10px}
.section-heading-title{
  font-family:var(--font-body);font-weight:800;color:var(--azul-900);
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25;letter-spacing:-.01em;
}
.sh-accent{position:relative;display:inline-block;color:var(--azul-900)}
.sh-accent::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-4px;height:4px;
  background:var(--oro-500);border-radius:2px;
}
.section-heading-desc{margin-top:14px;color:var(--gris-600);font-size:1rem;line-height:1.65}
/* La cabecera de Noticias sigue en fila (título + link "Ver todas") */
.section-head .section-heading-title{flex-basis:100%;margin-bottom:0}

/* ==========================================================
   5. SERVICIOS — íconos circulares de colores (esquema imagen de
      referencia), sin caja de tarjeta
========================================================== */
/* Fondo claro (esquema del sitio institucional real) */
.services-section{background:var(--crema)}

.services-grid-round{
  display:flex;flex-wrap:wrap;justify-content:center;gap:40px 32px;
  padding-top:8px;
}
.service-round{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:150px;text-align:center;

  /* Misma entrada tipo "arrastre desde adelante", calmada */
  opacity:0;transform:translateY(52px) scale(1.1);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * .12s);
}
.services-grid.is-visible .service-round{
  opacity:1;transform:translateY(0) scale(1);
}

.service-round-icon{
  width:78px;height:78px;border-radius:50%;color:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.35);
  transition:transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.service-round-icon svg{width:32px;height:32px}
.service-round:hover .service-round-icon,
.service-round:focus-visible .service-round-icon{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 20px 36px -14px rgba(0,0,0,.45);
}
.service-round:focus-visible{outline:none}

.service-round-title{
  font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--tinta);
  transition:color 0.6s var(--ease-out);
}
.service-round:hover .service-round-title,
.service-round:focus-visible .service-round-title{color:var(--azul-900)}

/* Paleta de colores por servicio (se asigna cíclicamente) */
.service-round[data-color="indigo"] .service-round-icon{background:#4C3FD7}
.service-round[data-color="rojo"]   .service-round-icon{background:var(--rojo-600)}
.service-round[data-color="verde"]  .service-round-icon{background:#1D8A4E}
.service-round[data-color="oro"]    .service-round-icon{background:#D9A93E}
.service-round[data-color="tinta"]  .service-round-icon{background:#14181F}
.service-round[data-color="cian"]   .service-round-icon{background:#0E9CBD}
.service-round[data-color="azul"]   .service-round-icon{background:var(--azul-800)}
.service-round[data-color="morado"] .service-round-icon{background:#7C3AED}
.service-round[data-color="rosa"]   .service-round-icon{background:#D6336C}

@media (prefers-reduced-motion: reduce){
  .service-round{opacity:1 !important;transform:none !important;transition:none !important}
}


/* ==========================================================
   6. NOTICIAS / COMUNICADOS / EVENTOS
========================================================== */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.news-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--gris-300);transition:0.6s ease}
.news-grid .news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.news-thumb{height:150px;background-size:cover;background-position:center;position:relative;background-color:var(--azul-tint)}
.news-tag{
  position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--oro-500);color:var(--blanco);
}
.news-tag-evento{background:var(--azul-900);color:var(--blanco)}
.news-tag-comunicado{background:var(--tierra-600);color:var(--blanco)}
.news-tag-convocatoria{background:var(--rojo-600);color:var(--blanco)}
.news-body{padding:16px}
.news-date{color:var(--gris-600);font-size:.75rem;font-weight:700}
.news-title{font-size:1rem;margin:6px 0 8px;color:var(--tinta)}
.news-excerpt{color:var(--gris-600);font-size:.85rem;line-height:1.5}

/* ==========================================================
   7. ENLACES DE INTERÉS
========================================================== */
.links-section{background:var(--azul-tint)}
.links-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch}
.link-logo{
  position:relative;width:210px;padding:20px 18px;
  background:var(--blanco);border-radius:var(--radius-lg);
  border:1.5px solid var(--gris-300);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 10px 26px -18px rgba(11,61,92,.3);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .55s var(--ease-out);
}
.link-logo img{max-width:100%;height:auto}
.links-row .link-logo:hover,
.links-row .link-logo:focus-visible{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 24px 40px -18px rgba(11,61,92,.4);
  border-color:var(--oro-500);
  outline:none;
}
.links-row .link-logo:active{transform:translateY(-4px) scale(1.01)}

/* ==========================================================
   8. CONTACTO
========================================================== */
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.contact-intro p{color:var(--gris-600);margin:14px 0 22px;line-height:1.6}
.contact-details{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;font-size:.9rem}
.contact-details strong{color:var(--azul-900)}
.contact-map{border-radius:var(--radius-md);overflow:hidden;height:220px;border:1px solid var(--gris-300)}
.contact-map iframe{width:100%;height:100%;border:0}
.contact-map-placeholder{
  display:flex;align-items:center;justify-content:center;background:var(--azul-tint);
  color:var(--gris-600);font-size:.85rem;font-weight:600;
}

.contact-form{
  background:var(--crema);border-radius:var(--radius-lg);padding:32px;
  display:flex;flex-direction:column;gap:16px;border:1px solid var(--gris-300);
}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:700;color:var(--azul-900)}
.contact-form input,.contact-form textarea{
  font:inherit;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--gris-300);
  background:var(--blanco);resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--azul-900)}

/* ==========================================================
   FOOTER
========================================================== */
.site-footer{background:var(--azul-900);color:rgba(255,255,255,.85);padding-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.2fr;gap:32px;padding-bottom:48px}
.footer-logo{width:58px;height:58px;object-fit:contain;margin-bottom:14px}
.footer-brand-denominacion{font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:2px !important}
.footer-brand-nombre{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--blanco) !important}
.footer-lema{font-style:italic;font-size:.85rem;line-height:1.6;color:var(--oro-400) !important;margin-top:10px !important}
.footer-col-title{display:block;color:var(--blanco);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.footer-col ul{display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:.85rem;color:rgba(255,255,255,.75)}
.footer-col a:hover{color:var(--oro-400)}
.footer-contacto-list{gap:9px;font-size:.83rem;margin-bottom:16px}
.footer-social{display:flex;gap:8px}
.footer-social a{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;color:var(--blanco);
}
.footer-social a:hover{background:var(--oro-500);color:var(--blanco);border-color:var(--oro-500)}

.footer-bottom{border-top:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.15)}
.footer-bottom-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:18px 24px;font-size:.78rem}
.footer-bottom-icons{display:flex;flex-wrap:wrap;gap:16px}
.footer-bottom-icons a:hover{color:var(--oro-400)}

/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  /* 0. Blindaje contra scroll horizontal fantasma: en móvil ya NO
     usamos position:sticky (por eso es seguro aquí, a diferencia
     de escritorio) así que podemos bloquear cualquier overflow-x,
     venga de donde venga (el cajón del menú fuera de pantalla,
     algún elemento con position:fixed + transform, etc.) */
  html,body{overflow-x:hidden;max-width:100vw}

  /* 1. En móvil el panel superior (topbar) completo se oculta —
     el logo, marca y accesos ya viven en el nav de abajo. */
  .topbar{display:none}

  /* 4. En móvil NO usamos position:sticky (tiene fallas conocidas
     e inconsistentes en varios navegadores móviles). En su lugar,
     el nav vive en flujo normal hasta que script.js detecta que se
     cruzó el umbral de scroll y agrega .is-stuck — ahí recién pasa
     a position:fixed real, pegado arriba de forma confiable. */
  .main-nav{
    position:static;
    background:var(--blanco);box-shadow:0 6px 18px -12px rgba(11,61,92,.3);
  }
  .main-nav.is-stuck{
    position:fixed;top:0;left:0;right:0;
  }

  /* 2. Nav móvil: logo SIEMPRE centrado (fijo o no), hamburguesa
     a la derecha. Posicionamiento absoluto (no grid): así el
     centrado del logo es matemáticamente exacto sin importar el
     ancho del texto de al lado ni el tamaño del botón hamburguesa. */
  .main-nav-inner{
    position:relative;display:block;min-height:64px;padding:0 20px;
  }
  .main-nav-brand{
    display:flex;position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
  .main-nav-logo{width:34px;height:34px}
  .main-nav-brand-text strong{font-size:.92rem}
  .main-nav-brand-text-desktop{display:none}
  .main-nav-brand-text-mobile{display:flex;justify-content:center;max-width:190px}
  .main-nav-brand-text-mobile small{max-width:190px}
  .main-nav-brand-text-mobile strong{max-width:190px}
  .main-nav.is-stuck .main-nav-logo{width:34px;height:34px}

  .nav-toggle{
    display:flex;position:absolute;right:16px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);transition:background 0.6s var(--ease);
  }
  .nav-toggle:hover{background:var(--azul-tint)}
  .nav-toggle-bars{
    display:flex;flex-direction:column;gap:5px;
    opacity:1;transition:opacity 0.6s var(--ease), transform 0.6s var(--ease-out);
  }
  .nav-toggle-bars span{
    width:22px;height:2px;background:var(--azul-900);border-radius:2px;display:block;
  }
  .nav-toggle-close{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--azul-900);opacity:0;transform:rotate(-45deg) scale(.6);
    transition:opacity 0.6s var(--ease), transform 0.6s var(--ease-out);
  }
  /* Hamburguesa -> X explícita e inequívoca (ícono propio, no solo
     las barras rotadas) cuando el cajón está abierto */
  .megaNav-open .nav-toggle-bars{opacity:0;transform:scale(.6)}
  .megaNav-open .nav-toggle-close{opacity:1;transform:rotate(0) scale(1)}

  /* .mega-nav ya no necesita reglas de grid: main-nav-inner ahora
     usa posicionamiento absoluto, no grid, en móvil */
  .nav-backdrop{
    display:block;
    position:fixed;inset:0;background:rgba(9,20,40,.5);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity 0.6s var(--ease), visibility 0.6s var(--ease);
    z-index:150;
  }
  .megaNav-open .nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .mega-nav-list{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(340px,88vw);height:100vh;margin:0;
    background:var(--blanco);flex-direction:column;align-items:stretch;
    padding:88px 20px 24px;gap:2px;overflow-y:auto;
    transform:translateX(100%);transition:transform 0.6s var(--ease-out);
    box-shadow:-20px 0 40px rgba(0,0,0,.15);
    z-index:200;
  }
  .megaNav-open .mega-nav-list{transform:translateX(0)}
  .mega-nav-link{width:100%;justify-content:space-between}

  /* El panel compartido, en móvil, se "muda" (vía JS) justo debajo
     del <li> que lo abrió, así que aquí solo definimos cómo se ve
     una vez ahí: bloque estático dentro del cajón, no flotante. */
  .mega-shared{position:static;height:auto}
  .mega-shared-panel{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:none;box-shadow:none;border:none;padding:6px 0 6px 14px;width:auto;max-width:none;
  }
  .mega-shared-panel.is-active{display:block}
  .mega-panel-inner{flex-direction:column;gap:16px}

  /* La imagen/video ahora SÍ se muestra en móvil, al final del
     panel (mismo orden que en escritorio: columnas primero, media
     al final) — a ancho completo en vez de la columna angosta fija. */
  .mega-media{flex:0 0 auto;width:100%;max-width:320px}
  .mega-media img,
  .mega-media-visual{height:150px}
}

@media (max-width:900px){
  /* La imagen de persona se achica y se atenúa para no competir
     con el texto en pantallas angostas — sigue presente pero de
     fondo, no tapa ninguna palabra. */
  .hero-persona{left:58%;right:0;opacity:.35 !important}
  .hero-slide.is-active .hero-persona{animation-name:heroPersonaInMobile}
  @keyframes heroPersonaInMobile{
    from{opacity:0;transform:translateX(40px)}
    to{opacity:.35;transform:translateX(0)}
  }
  .hero-text-col{max-width:100%}
}

@media (max-width:640px){
  .services-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-arrow{width:36px;height:36px}
  .section{padding:52px 0}
  .hero-persona{display:none} /* en celulares angostos, prioridad total al texto */
}

/* Aviso: mismo alto de 40px en cualquier pantalla, solo se compacta el contenido */
@media (max-width:640px){
  .avisos-bar__wrapper{padding:0 14px;gap:8px}
  .avisos-bar__badge{display:none}
  .avisos-bar__message{font-size:.76rem}
  .avisos-bar__cta{font-size:.74rem}
  .avisos-bar__close{width:24px;height:24px}
}

/* ==========================================================
   SISTEMA GENÉRICO DE ENTRADA POR SCROLL — [data-reveal]
   Cada sección usa un efecto distinto (fade-up, zoom-in,
   slide-left, slide-right), todos calmados (~0.9s) y con la
   misma curva de suavizado. script.js agrega .is-visible vía
   IntersectionObserver cuando el elemento entra en pantalla.
========================================================== */
[data-reveal]{
  opacity:0;
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * .1s);
}
[data-reveal="fade-up"]{transform:translateY(38px)}
[data-reveal="zoom-in"]{transform:scale(.8)}
[data-reveal="slide-left"]{transform:translateX(-56px)}
[data-reveal="slide-right"]{transform:translateX(56px)}
[data-reveal].is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ==========================================================
   BOTONES FLOTANTES
========================================================== */

/* Volver arriba: centrado abajo, oculto por defecto, aparece
   con scroll (clase .is-visible añadida por script.js) */
.back-to-top{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);
  width:48px;height:48px;border-radius:50%;
  background:var(--azul-900);color:var(--blanco);border:2.5px solid var(--blanco);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s, background .4s var(--ease);
  z-index:300;
}
.back-to-top.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.back-to-top:hover{background:var(--rojo-600);transform:translateX(-50%) translateY(-4px)}

/* WhatsApp: esquina inferior derecha, siempre visible */
.whatsapp-float{
  position:fixed;right:22px;bottom:26px;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.6);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  z-index:300;
  animation:whatsappPulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 18px 36px -8px rgba(37,211,102,.7)}
@keyframes whatsappPulse{
  0%, 100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 14px 30px -10px rgba(37,211,102,.6), 0 0 0 10px rgba(37,211,102,0)}
}

@media (max-width:640px){
  .whatsapp-float{width:52px;height:52px;right:16px;bottom:16px}
  .back-to-top{width:44px;height:44px;bottom:16px}
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float{animation:none}
}

/* ==========================================================
   MODAL DE ANUNCIO (emergente al cargar la página)
========================================================== */
.anuncio-modal{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease-out), visibility .45s;
}
.anuncio-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}

.anuncio-modal__backdrop{
  position:absolute;inset:0;background:rgba(9,20,40,.68);
  backdrop-filter:blur(2px);
}

.anuncio-modal__box{
  position:relative;background:var(--blanco);border-radius:var(--radius-lg);
  width:100%;max-width:460px;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  transform:scale(.92) translateY(18px);
  transition:transform .45s var(--ease-out);
}
.anuncio-modal.is-open .anuncio-modal__box{transform:scale(1) translateY(0)}

/* Botón de cerrar: notorio, alto contraste, fuera de la imagen */
.anuncio-modal__close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:var(--blanco);color:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.anuncio-modal__close:hover{background:var(--rojo-600);color:var(--blanco);transform:rotate(90deg)}

.anuncio-modal__arrow{
  position:absolute;top:38%;z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--azul-900);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:background .35s var(--ease-out), transform .35s var(--ease-out);
}
.anuncio-modal__arrow:hover{background:var(--oro-500);color:var(--blanco)}
.anuncio-modal__arrow-prev{left:12px}
.anuncio-modal__arrow-next{right:12px}

.anuncio-modal__track{position:relative}
.anuncio-modal__slide{display:none}
.anuncio-modal__slide.is-active{display:block}

.anuncio-modal__img{
  height:200px;background-size:cover;background-position:center;position:relative;
  background-color:var(--azul-tint);
}
.anuncio-modal__tag{
  position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:999px;
  background:var(--oro-500);color:var(--blanco);
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.anuncio-modal__body{padding:24px 26px 26px}
.anuncio-modal__title{font-family:var(--font-display);font-size:1.3rem;color:var(--azul-900);margin:0 0 10px}
.anuncio-modal__text{color:var(--gris-600);font-size:.94rem;line-height:1.55;margin:0 0 20px}
.anuncio-modal__btn{width:100%}

.anuncio-modal__dots{display:flex;justify-content:center;gap:7px;padding-bottom:20px}
.anuncio-modal__dot{width:7px;height:7px;border-radius:50%;background:var(--gris-300);transition:background .3s var(--ease), width .3s var(--ease)}
.anuncio-modal__dot.is-active{background:var(--oro-500);width:20px;border-radius:4px}

@media (max-width:480px){
  .anuncio-modal__box{max-width:100%}
  .anuncio-modal__img{height:170px}
}

/* ==========================================================
   ACCESO AL PANEL (ícono de usuario)
========================================================== */
.topbar-user{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--azul-900);border:1.5px solid var(--gris-300);background:var(--blanco);
  transition:background 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.topbar-user:hover{background:var(--azul-900);color:var(--blanco);border-color:var(--azul-900)}
.nav-user{display:none}
@media (max-width:900px){
  .nav-user{
    display:flex;position:absolute;left:16px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);color:var(--azul-900);
  }
  .nav-user:hover{background:var(--azul-tint)}
}

/* ==========================================================
   ACTUALIDAD: listado completo y detalle
========================================================== */
.news-empty{text-align:center;color:var(--gris-600);padding:24px 0}
.news-filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 28px}
.news-filtros a{
  padding:8px 16px;border-radius:999px;border:1.5px solid var(--gris-300);
  font-weight:700;font-size:.85rem;color:var(--azul-900);
}
.news-filtros a.is-active,.news-filtros a:hover{background:var(--azul-900);border-color:var(--azul-900);color:var(--blanco)}
.paginacion{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:32px}
.paginacion a{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1.5px solid var(--gris-300);font-weight:700;color:var(--azul-900);
}
.paginacion a.is-active{background:var(--rojo-600);border-color:var(--rojo-600);color:var(--blanco)}

/* ---------- Detalle de publicación ---------- */
/* 1. Cabecera: imagen principal de fondo + máscara azul degradada */
.pub-hero{position:relative;overflow:hidden;background:var(--azul-900);color:var(--blanco);min-height:340px;display:flex;align-items:flex-end}
.pub-hero-fondo{position:absolute;inset:-12px;background:center/cover no-repeat;filter:saturate(1.05);transform:scale(1.03)}
.pub-hero-mascara{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,31,95,.35) 0%, rgba(0,31,95,.72) 55%, rgba(0,22,70,.96) 100%),
    linear-gradient(90deg, rgba(0,31,95,.75) 0%, rgba(0,31,95,.15) 70%);
}
.pub-hero.sin-imagen .pub-hero-mascara{background:linear-gradient(135deg,var(--azul-900) 0%,var(--azul-700) 100%)}
.pub-hero-contenido{position:relative;z-index:1;padding-top:56px;padding-bottom:44px;max-width:860px;width:100%}
.pub-hero-volver{display:inline-block;color:rgba(255,255,255,.85);font-weight:700;font-size:.9rem;margin-bottom:18px}
.pub-hero-volver:hover{color:var(--blanco)}
.pub-hero-titulo{font-size:clamp(1.7rem,4.2vw,3rem);line-height:1.12;color:var(--blanco);margin:0;text-wrap:balance}
.pub-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.pub-meta .news-tag{position:static}
.pub-hero .pub-meta time{font-weight:700;font-size:.92rem;color:rgba(255,255,255,.9)}

/* 2-5. Cuerpo */
.pub-detalle{padding-top:44px}
.pub-cuerpo{max-width:860px}
.pub-volver{display:inline-block;margin-bottom:20px;font-weight:700;color:var(--azul-900)}
.pub-titulo-simple{font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--azul-900);margin-bottom:12px}
.pub-resumen{
  font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.6;color:var(--tinta);font-weight:500;
  margin:0 0 28px;padding-left:18px;border-left:4px solid var(--rojo-600);
}
.pub-imagen{margin:0 0 32px}
.pub-imagen a{position:relative;display:block;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;background:var(--azul-tint)}
.pub-imagen img{width:100%;height:auto;max-height:620px;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.pub-imagen a:hover img{transform:scale(1.02)}
.pub-zoom{
  position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,31,95,.8);color:var(--blanco);
}
.pub-contenido{font-size:1.05rem;line-height:1.8;color:var(--tinta)}
.pub-contenido p{margin:0 0 1.1em}
.pub-contenido h2{font-size:1.5rem;color:var(--azul-900);margin:1.6em 0 .6em}
.pub-contenido h3{font-size:1.2rem;color:var(--azul-900);margin:1.4em 0 .5em}
.pub-contenido ul,.pub-contenido ol{margin:0 0 1.1em;padding-left:1.4em}
.pub-contenido ul{list-style:disc}
.pub-contenido ol{list-style:decimal}
.pub-contenido li::marker{color:var(--rojo-600);font-weight:700}
.pub-contenido li{margin-bottom:.35em}
.pub-contenido blockquote{margin:1.4em 0;padding:14px 20px;border-left:4px solid var(--azul-900);background:var(--azul-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic}
.pub-contenido a{color:var(--rojo-600);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pub-contenido .ql-align-center{text-align:center}
.pub-contenido .ql-align-right{text-align:right}
.pub-contenido .ql-align-justify{text-align:justify}
.pub-contenido > :last-child{margin-bottom:0}
.pub-enlace{display:inline-flex;align-items:center;gap:10px;margin-top:28px}

/* 6. Galería en carrusel pequeño */
.pub-galeria{margin-top:44px;padding-top:28px;border-top:1px solid var(--gris-300)}
.pub-galeria-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.pub-galeria-cab h2{font-size:1.3rem;color:var(--azul-900)}
.pub-galeria-cab span{font-size:.85rem;font-weight:700;color:var(--gris-600)}
.pub-galeria-marco{position:relative}
.pub-galeria-pista{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px;
}
.pub-galeria-pista::-webkit-scrollbar{display:none}
.pub-galeria-item{
  flex:0 0 calc((100% - 24px) / 3);aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  scroll-snap-align:start;cursor:zoom-in;background:var(--azul-tint);
}
.pub-galeria-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.pub-galeria-item:hover img{transform:scale(1.06)}
.pub-galeria-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:var(--blanco);color:var(--azul-900);box-shadow:0 6px 16px -6px rgba(0,31,95,.45);
}
.pub-galeria-flecha.is-prev{left:-14px}
.pub-galeria-flecha.is-next{right:-14px}
.pub-galeria-flecha:disabled{opacity:0;pointer-events:none}
@media (max-width:640px){
  .pub-hero{min-height:280px}
  .pub-hero-contenido{padding-top:40px;padding-bottom:30px}
  .pub-galeria-item{flex-basis:calc((100% - 12px) / 1.6)}
  .pub-galeria-flecha.is-prev{left:4px}
  .pub-galeria-flecha.is-next{right:4px}
}

/* Visor ampliado (estilo Colorbox) */
html.visor-abierto{overflow:hidden}
.visor{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,12,40,.92);opacity:0;transition:opacity .25s var(--ease);padding:56px 64px;
}
.visor[hidden]{display:none}
.visor.is-abierto{opacity:1}
.visor-figura{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.visor-figura img{
  max-width:min(1200px,100%);max-height:calc(100vh - 140px);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transform:scale(.97);transition:opacity .3s var(--ease), transform .3s var(--ease-out);
}
.visor-figura img.is-cargada{opacity:1;transform:scale(1)}
.visor-figura figcaption{color:rgba(255,255,255,.85);font-weight:700;font-size:.9rem}
.visor-cerrar,.visor-flecha{
  position:absolute;border:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:var(--blanco);transition:background .2s;
}
.visor-cerrar:hover,.visor-flecha:hover{background:var(--rojo-600)}
.visor-cerrar{top:14px;right:14px;width:46px;height:46px}
.visor-flecha{top:50%;transform:translateY(-50%);width:50px;height:50px}
.visor-flecha.is-prev{left:12px}
.visor-flecha.is-next{right:12px}
.visor.es-unica .visor-flecha{display:none}
@media (max-width:640px){
  .visor{padding:60px 8px 40px}
  .visor-flecha{top:auto;bottom:14px;transform:none;width:44px;height:44px}
  .visor-flecha.is-prev{left:calc(50% - 56px)}
  .visor-flecha.is-next{right:calc(50% - 56px)}
  .visor-figura img{max-height:calc(100vh - 170px)}
}

/* 7. Otras publicaciones */
.pub-otras{margin-top:56px;padding-top:32px;border-top:1px solid var(--gris-300)}
.pub-otras h2{font-size:1.4rem;color:var(--azul-900);margin-bottom:20px}
.news-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.news-grid-3{grid-template-columns:1fr}}

/* ==========================================================
   SECCIONES DEL MENÚ (Nosotros, ...)
========================================================== */
.pag-hero-contenido{max-width:960px}
.pag-migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.75);margin-bottom:14px}
.pag-migas a{color:rgba(255,255,255,.9)}
.pag-migas a:hover{color:var(--blanco);text-decoration:underline}
.pag-hero-desc{color:rgba(255,255,255,.85);font-size:1.05rem;margin:12px 0 0;max-width:640px}
.pag-cuerpo{max-width:960px}
.pag-contenido::after{content:"";display:block;clear:both}
.pag-vacio{color:var(--gris-600)}

/* Imagen principal incrustada en el texto */
.pag-img{margin:4px 0 18px;max-width:100%}
.pag-img a{display:block;border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-card)}
.pag-img img{width:100%;height:auto;display:block;transition:transform .6s var(--ease-out)}
.pag-img a:hover img{transform:scale(1.03)}
.pag-img-derecha{float:right;width:46%;margin-left:28px}
.pag-img-izquierda{float:left;width:46%;margin-right:28px}
.pag-img-centro{width:min(100%,720px);margin:0 auto 26px}

/* Imágenes incrustadas desde el editor */
.pub-contenido img{max-width:100%;height:auto;border-radius:var(--radius-sm);display:inline-block;vertical-align:middle}
.pub-contenido p > img:only-child,.pub-contenido .img-ampliable:only-child{display:block;margin:6px auto}
.pub-contenido p.ql-align-center .img-ampliable,.pub-contenido p.ql-align-center img{margin-left:auto;margin-right:auto}
.img-ampliable{display:inline-block;cursor:zoom-in;max-width:100%}
.pub-contenido .ql-align-center .img-ampliable{display:table;margin:6px auto}
.pub-contenido .ql-align-right .img-ampliable{display:table;margin:6px 0 6px auto}

@media (max-width:700px){
  .pag-img-derecha,.pag-img-izquierda{float:none;width:100%;margin:0 0 20px}
}

/* Documentos */
.pag-docs{margin-top:40px;padding-top:28px;border-top:1px solid var(--gris-300);clear:both}
.pag-docs h2{font-size:1.3rem;color:var(--azul-900);margin-bottom:16px}
.pag-docs ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:800px){.pag-docs ul{grid-template-columns:1fr 1fr}}
.pag-doc{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-md);
  background:var(--blanco);border:1px solid var(--gris-300);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.pag-doc:hover{border-color:var(--azul-900);box-shadow:var(--shadow-card)}
.pag-doc-ico{
  flex:0 0 auto;width:48px;height:56px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8px;font-size:.66rem;font-weight:800;letter-spacing:.04em;color:var(--blanco);background:var(--azul-700);
  clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%);
}
.pag-doc-pdf{background:var(--rojo-600)}
.pag-doc-doc{background:#1B4A9E}
.pag-doc-xls{background:#127A43}
.pag-doc-ppt{background:#C4501B}
.pag-doc-img{background:#5B6773}
.pag-doc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pag-doc-txt strong{color:var(--azul-900);font-size:.98rem;line-height:1.3}
.pag-doc-txt small{color:var(--gris-600);font-size:.8rem;font-weight:600}
.pag-doc-accion{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-weight:800;font-size:.85rem;color:var(--rojo-600)}
@media (max-width:480px){.pag-doc-accion span{display:none}}

/* Tarjetas de la sección, agrupadas */
.pag-grupo + .pag-grupo{margin-top:36px}
.pag-grupo-titulo{
  font-family:var(--font-body);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rojo-600);margin:0 0 14px;
}
.pag-tarjetas{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.pag-tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pag-tarjetas{grid-template-columns:1fr}}
.pag-tag{background:var(--azul-900);color:var(--blanco)}
.pag-thumb-vacio{background:linear-gradient(135deg,var(--azul-900),var(--azul-700))}
.pag-thumb-vacio::after{
  content:"";position:absolute;inset:0;opacity:.18;
  background:url('../img/logo.png') center/72px no-repeat;filter:grayscale(1) brightness(3);
}

/* ==========================================================
   MODO "CÓDIGO HTML" — mini páginas hechas desde el panel
   'contain' encierra el contenido en su propio recuadro: nada de
   lo que escriba el usuario puede taparse con el menú o el pie.
   Las clases de abajo están listas para usar en el código.
========================================================== */
.html-libre{contain:layout paint;isolation:isolate}
.html-libre img{max-width:100%;height:auto}
.html-libre iframe{max-width:100%;border:0;border-radius:var(--radius-sm);display:block}
.html-libre iframe[src*="youtube"],.html-libre iframe[src*="vimeo"],.html-libre .video iframe{width:100%;height:auto;aspect-ratio:16/9}
.html-libre table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.97rem}
.html-libre th,.html-libre td{padding:10px 12px;border:1px solid var(--gris-300);text-align:left;vertical-align:top}
.html-libre thead th{background:var(--azul-900);color:var(--blanco);border-color:var(--azul-900)}
.html-libre tbody tr:nth-child(even){background:var(--azul-tint)}
.html-libre h4{font-size:1.08rem;color:var(--azul-900);margin:1.2em 0 .4em}
.html-libre h5,.html-libre h6{font-size:1rem;color:var(--azul-900);margin:1em 0 .4em}
.html-libre hr{border:0;border-top:2px solid var(--gris-300);margin:2em 0}
.html-libre details{border:1px solid var(--gris-300);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 10px;background:var(--blanco)}
.html-libre summary{cursor:pointer;font-weight:800;color:var(--azul-900)}
.html-libre details[open] summary{margin-bottom:8px}
.html-libre figure{margin:0 0 1.2em}
.html-libre figcaption{font-size:.88rem;color:var(--gris-600);margin-top:6px}

/* Columnas: <div class="col-2"> ... </div> (2, 3 o 4) */
.html-libre .col-2,.html-libre .col-3,.html-libre .col-4{display:grid;gap:24px;margin:0 0 1.4em;align-items:start}
.html-libre .col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.html-libre .col-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.html-libre .col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.html-libre .fila{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 1.2em}
/* Tarjetas y cajas */
.html-libre .caja{background:var(--blanco);border:1px solid var(--gris-300);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-card)}
.html-libre .caja > :last-child,.html-libre .destacado > :last-child{margin-bottom:0}
.html-libre .caja img:first-child{border-radius:var(--radius-sm);margin-bottom:12px;width:100%;aspect-ratio:4/3;object-fit:cover}
.html-libre .destacado{background:var(--azul-tint);border-left:5px solid var(--azul-900);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 22px;margin:0 0 1.4em}
.html-libre .destacado-rojo{background:#FCEBEB;border-left:5px solid var(--rojo-600);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 22px;margin:0 0 1.4em}
.html-libre .banda{background:linear-gradient(135deg,var(--azul-900),var(--azul-700));color:var(--blanco);border-radius:var(--radius-md);padding:28px;margin:0 0 1.4em}
.html-libre .banda h2,.html-libre .banda h3,.html-libre .banda h4,.html-libre .banda a:not(.boton){color:var(--blanco)}
/* Botones */
.html-libre .boton,.html-libre .boton-azul{
  display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;
  font-weight:800;text-decoration:none !important;transition:transform .3s var(--ease-out),background .3s var(--ease);
}
.html-libre .boton{background:var(--rojo-600);color:var(--blanco) !important}
.html-libre .boton:hover{background:#E23033;transform:translateY(-2px)}
.html-libre .boton-azul{background:var(--azul-900);color:var(--blanco) !important}
.html-libre .boton-azul:hover{background:var(--azul-700);transform:translateY(-2px)}
/* Utilidades */
.html-libre .centrado{text-align:center}
.html-libre .texto-azul{color:var(--azul-900)}
.html-libre .texto-rojo{color:var(--rojo-600)}
.html-libre .grande{font-size:1.2em}
.html-libre .chico{font-size:.88em}
.html-libre .redondeado{border-radius:var(--radius-md)}
.html-libre .sombra{box-shadow:var(--shadow-card)}
.html-libre .video{margin:0 0 1.4em}
@media (max-width:900px){.html-libre .col-3,.html-libre .col-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .html-libre .col-2,.html-libre .col-3,.html-libre .col-4{grid-template-columns:1fr}
  .html-libre table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ==========================================================
   FICHA DE UNIDAD / ÁREA
   Celular: descripción, jefe, funciones, texto.
   Escritorio: funciones y texto a la izquierda, jefe a la derecha.
========================================================== */
.ficha-descripcion{margin-bottom:32px}
.ficha{display:grid;grid-template-columns:1fr;gap:28px}
.ficha-principal{min-width:0}
@media (min-width:900px){
  .ficha.con-jefe{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"principal jefe";align-items:start;gap:40px}
  .ficha.con-jefe .ficha-principal{grid-area:principal}
  .ficha.con-jefe .ficha-jefe{grid-area:jefe;position:sticky;top:96px}
}
.ficha-jefe{
  background:var(--blanco);border:1px solid var(--gris-300);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.ficha-jefe-foto{aspect-ratio:4/5;background:linear-gradient(160deg,var(--azul-900),var(--azul-700));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55)}
.ficha-jefe-foto a{display:block;width:100%;height:100%;cursor:zoom-in}
.ficha-jefe-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-jefe-datos{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;border-top:4px solid var(--rojo-600)}
.ficha-jefe-cargo{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rojo-600)}
.ficha-jefe-nombre{font-family:var(--font-display);font-size:1.25rem;line-height:1.25;color:var(--azul-900)}
.ficha-jefe-cv{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
@media (max-width:899px){
  .ficha-jefe{flex-direction:row;align-items:stretch}
  .ficha-jefe-foto{flex:0 0 120px;aspect-ratio:auto;min-height:150px}
  .ficha-jefe-datos{border-top:0;border-left:4px solid var(--rojo-600);justify-content:center;padding:14px 16px}
  .ficha-jefe-nombre{font-size:1.08rem}
  .ficha-jefe-cv{width:auto;padding:10px 16px;font-size:.88rem}
}
@media (max-width:380px){.ficha-jefe-foto{flex-basis:96px}}

.ficha-funciones{background:var(--azul-tint);border-radius:var(--radius-md);padding:22px 24px;margin:0 0 32px}
.ficha-funciones h2{font-size:1.25rem;color:var(--azul-900);margin:0 0 14px}
.ficha-funciones ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ficha-funciones li{position:relative;padding-left:32px;line-height:1.55;color:var(--tinta)}
.ficha-funciones li::before{
  content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--rojo-600);
  -webkit-mask:none;
}
.ficha-funciones li::after{
  content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--blanco);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);
}
.ficha .pag-docs{margin-top:32px}

/* Jefe en las tarjetas de la sección */
.pag-card-jefe{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gris-300);font-size:.82rem;font-weight:700;color:var(--azul-900)}
.pag-card-jefe img,.pag-card-jefe i{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--azul-tint)}