/* Portada institucional — microinteracciones de desplazamiento inspiradas en la UTalca.
   Aisladas a esta propuesta. Sin dependencias externas ni cambios en el layout. */
body.page-institucional .portada-scroll-navigator {
  --portada-progress:0%;
  position:fixed;
  right:clamp(14px,2vw,30px);
  bottom:clamp(18px,3vw,32px);
  z-index:98;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:none;
  width:54px;
  height:54px;
  min-width:54px;
  min-height:54px;
  max-width:54px;
  max-height:54px;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  background:conic-gradient(#63c6d4 var(--portada-progress),#9cb5c3 0);
  box-shadow:0 9px 32px rgba(7,37,56,.24);
  isolation:isolate;
  transition:box-shadow .25s ease,transform .25s ease;
  -webkit-tap-highlight-color:transparent;
}
body.page-institucional .portada-scroll-navigator::before {
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:#153e52;
  z-index:-1;
}
body.page-institucional .portada-scroll-navigator i {
  font-size:1.75rem;
  line-height:1;
  transition:transform .28s ease;
}
body.page-institucional .portada-scroll-navigator:hover,
body.page-institucional .portada-scroll-navigator:focus-visible {
  box-shadow:0 12px 34px rgba(7,37,56,.32);
  transform:translateY(-3px);
}
body.page-institucional .portada-scroll-navigator:focus-visible {
  outline:3px solid #17a9c4;
  outline-offset:4px;
}
body.page-institucional .portada-scroll-navigator.is-at-end i {transform:rotate(180deg)}

/* Estado inicial activado por JS únicamente si existe IntersectionObserver.
   Sin JS (o con movimiento reducido) el contenido siempre es visible. */
body.page-institucional.portada-motion-ready [data-portada-reveal] {
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--portada-delay,0ms);
}
body.page-institucional.portada-motion-ready [data-portada-reveal].is-visible {
  opacity:1;
  transform:none;
}
/* Animación de portada única y ligera, independiente de los triggers de scroll. */
@keyframes portada-hero-enter {
  from {opacity:0;transform:translate3d(0,16px,0)}
  to {opacity:1;transform:translate3d(0,0,0)}
}
body.page-institucional.portada-motion-ready .hero-narrative > :is(.hero-pretitle,h1,.hero-deck,.hero-actions) {
  animation:portada-hero-enter .68s both cubic-bezier(.22,1,.36,1);
}
body.page-institucional.portada-motion-ready .hero-narrative > h1 {animation-delay:85ms}
body.page-institucional.portada-motion-ready .hero-narrative > .hero-deck {animation-delay:155ms}
body.page-institucional.portada-motion-ready .hero-narrative > .hero-actions {animation-delay:225ms}

@media(max-width:590px) {
  body.page-institucional .portada-scroll-navigator{
    width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;max-height:48px;
    right:14px;bottom:calc(17px + env(safe-area-inset-bottom,0px))
  }
  body.page-institucional.portada-motion-ready [data-portada-reveal] {transform:translate3d(0,16px,0);transition-duration:.5s}
  body.page-institucional.portada-motion-ready [data-portada-reveal].is-visible {transform:none}
}
@media(prefers-reduced-motion:reduce) {
  body.page-institucional.portada-motion-ready [data-portada-reveal],
  body.page-institucional.portada-motion-ready [data-portada-reveal].is-visible {
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  body.page-institucional.portada-motion-ready .hero-narrative > :is(.hero-pretitle,h1,.hero-deck,.hero-actions) {animation:none!important}
  body.page-institucional .portada-scroll-navigator,
  body.page-institucional .portada-scroll-navigator i {transition:none!important}
}