/**
 * @file
 * Animaciones y microinteracciones del sitio.
 *
 * Varias clases (anim-*) las pone js/animaciones.js; sin JavaScript el
 * contenido se muestra normalmente. Todo se desactiva si el usuario
 * prefiere movimiento reducido.
 */

/****************************************************************/
/*   VARIABLES DE ANIMACIÓN                                     */
/****************************************************************/
:root {
  --anim-ease: cubic-bezier(.22, 1, .36, 1);           /* ease-out suave */
  --anim-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* rebote ligero */
  --anim-rapida: .2s;
  --anim-media: .35s;
  --anim-lenta: .9s;
  --anim-acento: #00a3e0;                              /* celeste de realce */
  --anim-gradiente: linear-gradient(135deg, #005DA4 0%, #0071B3 50%, #00a3e0 100%);
  --anim-sombra-hover: 0 12px 28px rgba(0, 50, 100, .14), 0 4px 10px rgba(0, 0, 0, .06);
}

html {
  scroll-behavior: smooth;
}

/****************************************************************/
/*   KEYFRAMES                                                  */
/****************************************************************/
@keyframes anim-fade-in {
  from { opacity: 0; }
}

@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes anim-fade-down {
  from { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
}

@keyframes anim-zoom-in {
  from { opacity: 0; transform: scale(.85); filter: blur(6px); }
}

@keyframes anim-desplegar {
  from { opacity: 0; transform: perspective(900px) rotateX(-25deg) translateY(-10px); }
}

@keyframes anim-item-entrar {
  from { opacity: 0; transform: translateX(-14px); }
}

@keyframes anim-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

@keyframes anim-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes anim-brillo {
  from { left: -75%; }
  to   { left: 125%; }
}

@keyframes anim-gradiente {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes anim-trazo {
  from { transform: scaleX(0); }
}

@keyframes anim-onda {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes anim-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(0, 163, 224, .55); }
  100% { box-shadow: 0 0 0 16px rgba(0, 163, 224, 0); }
}

/****************************************************************/
/*   CARGA DE PÁGINA                                            */
/****************************************************************/

/* Solo opacidad: un transform en #page rompería el encabezado fijo */
#page {
  animation: anim-fade-in .6s ease backwards;
}

.hdr-emat .firma-ucr img,
.hdr-emat .acronimo-desktop img,
.hdr-emat .acronimo-movil img {
  animation: anim-fade-down 1s var(--anim-ease) .1s backwards;
}

.hdr-emat .acronimo-desktop img,
.hdr-emat .acronimo-movil img {
  animation-delay: .3s;
}

#block-navegacionprincipal > ul > li {
  animation: anim-fade-up .6s var(--anim-ease) backwards;
}

#block-navegacionprincipal > ul > li:nth-child(1) { animation-delay: .25s; }
#block-navegacionprincipal > ul > li:nth-child(2) { animation-delay: .31s; }
#block-navegacionprincipal > ul > li:nth-child(3) { animation-delay: .37s; }
#block-navegacionprincipal > ul > li:nth-child(4) { animation-delay: .43s; }
#block-navegacionprincipal > ul > li:nth-child(5) { animation-delay: .49s; }
#block-navegacionprincipal > ul > li:nth-child(6) { animation-delay: .55s; }
#block-navegacionprincipal > ul > li:nth-child(7) { animation-delay: .61s; }
#block-navegacionprincipal > ul > li:nth-child(n+8) { animation-delay: .67s; }

/* Línea de acento que se dibuja bajo los títulos de página */
main h1:not(.video-multimedia-texto h1)::after,
.noticias-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--anim-gradiente);
  transform-origin: left center;
  animation: anim-trazo 1s var(--anim-ease) .5s backwards;
}

.noticias-title::after {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}

/****************************************************************/
/*   APARICIÓN AL HACER SCROLL (clases puestas por JS)          */
/****************************************************************/
.anim-reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(24px);
  transition:
    opacity var(--anim-lenta) var(--anim-ease),
    transform var(--anim-lenta) var(--anim-ease),
    filter var(--anim-lenta) var(--anim-ease),
    clip-path 1.1s var(--anim-ease);
  transition-delay: var(--anim-delay, 0s);
}

.anim-reveal.anim-reveal--zoom {
  transform: scale(.95);
}

.anim-reveal.anim-reveal--izq {
  transform: translateX(-24px);
}

/* Cortina: la imagen se descubre de abajo hacia arriba */
.anim-reveal.anim-reveal--cortina {
  opacity: 1;
  filter: none;
  transform: scale(1.03);
  clip-path: inset(100% 0 0 0 round 8px);
}

.anim-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(0 0 0 0 round 8px);
}

/****************************************************************/
/*   BARRA DE PROGRESO DE LECTURA                               */
/****************************************************************/
.anim-progreso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 10000;
  pointer-events: none;
  background: linear-gradient(90deg, #00e0ff, var(--anim-acento), #0071B3, #7b5cff);
  box-shadow: 0 0 12px rgba(0, 163, 224, .8);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/****************************************************************/
/*   ENCABEZADO                                                 */
/****************************************************************/

/* Gradiente en movimiento continuo */
.hdr-emat {
  position: relative;
  background: linear-gradient(110deg, #005DA4 0%, #065591 25%, #00233E 50%, #065591 75%, #005DA4 100%);
  background-size: 200% 100%;
  animation: anim-gradiente 14s ease-in-out infinite alternate;
  transition: padding .45s var(--anim-ease);
}

/* Reflector que sigue al mouse (posición puesta por JS) */
.hdr-emat::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--anim-mx, 50%) var(--anim-my, 50%), rgba(255, 255, 255, .2), transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
}

.hdr-emat:hover::before {
  opacity: 1;
}

.hdr-emat__inner {
  position: relative;
  z-index: 1;
}

.hdr-emat .region-secondary-menu {
  transition: min-height .45s var(--anim-ease);
}

.hdr-emat .firma-ucr img,
.hdr-emat .acronimo-desktop img,
.hdr-emat .acronimo-movil img {
  transition: height .45s var(--anim-ease), transform var(--anim-media) var(--anim-ease), filter var(--anim-media) ease;
}

.hdr-emat .firma-ucr a:hover img,
.hdr-emat .acronimo-desktop a:hover img,
.hdr-emat .acronimo-movil a:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .45));
}

header#header {
  transition: box-shadow .45s ease;
}

#navbar-main {
  transition: background-color .45s ease, backdrop-filter .45s ease;
}

body.anim-scrolled header#header {
  box-shadow: 0 10px 30px rgba(0, 30, 60, .25);
}

/* Encabezado compacto y navbar de vidrio al bajar (solo cuando es fijo) */
@media (min-width: 1400px) {
  body.anim-scrolled .hdr-emat {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  body.anim-scrolled .hdr-emat .region-secondary-menu {
    min-height: 56px;
  }

  body.anim-scrolled .hdr-emat .firma-ucr img {
    height: 52px !important;
  }

  body.anim-scrolled .hdr-emat .acronimo-desktop img {
    height: 34px !important;
  }

  body.anim-scrolled #navbar-main {
    background-color: rgba(242, 242, 242, .78);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}

/****************************************************************/
/*   MENÚ PRINCIPAL                                             */
/****************************************************************/
#block-navegacionprincipal > ul > li,
#block-navegacionprincipal > ul > li > a,
#block-navegacionprincipal > ul > li > span,
li.search > a {
  transition: background-color var(--anim-media) ease, color var(--anim-media) ease, opacity var(--anim-media) ease, transform var(--anim-media) var(--anim-ease);
}

#block-navegacionprincipal > ul > li > a,
#block-navegacionprincipal > ul > li > span {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Sin JS (o menú móvil): fondo con gradiente en vez de gris plano */
#block-navegacionprincipal > ul > li:hover,
#block-navegacionprincipal > ul > li:focus-within {
  background: var(--anim-gradiente);
}

/* Píldora deslizante que sigue al mouse (creada por JS) */
#block-navegacionprincipal.anim-nav-js {
  position: relative;
}

.anim-nav-indicador {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 12px;
  background: var(--anim-gradiente);
  background-size: 200% 200%;
  animation: anim-gradiente 4s ease-in-out infinite alternate;
  box-shadow: 0 8px 22px rgba(0, 113, 179, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  opacity: 0;
  transition:
    transform .5s var(--anim-ease-spring),
    width .5s var(--anim-ease-spring),
    height .5s var(--anim-ease),
    opacity .3s ease;
}

.anim-nav-js.anim-nav-activo .anim-nav-indicador {
  opacity: 1;
}

/* Con la píldora activa se quita el fondo gris de menu.css */
#block-navegacionprincipal.anim-nav-js > ul > li:hover,
#block-navegacionprincipal.anim-nav-js > ul > li:focus-within,
#block-navegacionprincipal.anim-nav-js > ul > li > a:hover,
#block-navegacionprincipal.anim-nav-js > ul > li > a:focus,
#block-navegacionprincipal.anim-nav-js > ul > li > span:hover,
#block-navegacionprincipal.anim-nav-js > ul > li > span:focus,
#block-navegacionprincipal.anim-nav-js > ul > li > span.show {
  background: transparent;
}

#block-navegacionprincipal.anim-nav-js > ul > li.anim-nav-actual > a,
#block-navegacionprincipal.anim-nav-js > ul > li.anim-nav-actual > span {
  color: #ffffff !important;
}

/* Las demás opciones se atenúan para resaltar la seleccionada */
#block-navegacionprincipal.anim-nav-activo > ul > li:not(.anim-nav-actual) > a,
#block-navegacionprincipal.anim-nav-activo > ul > li:not(.anim-nav-actual) > span {
  opacity: .7;
}

#block-navegacionprincipal.anim-nav-js > ul > li.anim-nav-actual > a,
#block-navegacionprincipal.anim-nav-js > ul > li.anim-nav-actual > span {
  transform: translateY(-1px);
}

/* Caret del submenú gira al abrir */
#block-navegacionprincipal .dropdown-toggle::after {
  transition: transform var(--anim-media) var(--anim-ease-spring);
}

#block-navegacionprincipal .dropdown-toggle.show::after,
#block-navegacionprincipal > ul > li:hover > .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Submenús: despliegue 3D y elementos escalonados */
#block-navegacionprincipal ul.dropdown-menu.show,
.dropdown-menu.show {
  transform-origin: top center;
  animation: anim-desplegar .45s var(--anim-ease) backwards;
}

#block-navegacionprincipal ul.dropdown-menu {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 30, 60, .22);
}

#block-navegacionprincipal ul.dropdown-menu.show > li {
  animation: anim-item-entrar .4s var(--anim-ease) backwards;
}

#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(1) { animation-delay: .06s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(2) { animation-delay: .1s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(3) { animation-delay: .14s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(4) { animation-delay: .18s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(5) { animation-delay: .22s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(6) { animation-delay: .26s; }
#block-navegacionprincipal ul.dropdown-menu.show > li:nth-child(n+7) { animation-delay: .3s; }

#block-navegacionprincipal ul.dropdown-menu li a {
  position: relative;
  overflow: hidden;
  transition: background-color var(--anim-rapida) ease, color var(--anim-rapida) ease, padding-left .4s var(--anim-ease), box-shadow .4s var(--anim-ease);
}

#block-navegacionprincipal ul.dropdown-menu li.dropdown-item:hover,
#block-navegacionprincipal ul.dropdown-menu li.dropdown-item:focus-within {
  background: transparent;
}

#block-navegacionprincipal ul.dropdown-menu li.dropdown-item a:hover,
#block-navegacionprincipal ul.dropdown-menu li.dropdown-item a:focus {
  background: var(--anim-gradiente);
  color: #ffffff;
  padding-left: 28px;
  box-shadow: inset 5px 0 0 var(--anim-acento);
}

/* Menú móvil: los elementos entran escalonados */
#CollapsingNavbar.show .nav-item,
#CollapsingNavbar.collapsing .nav-item {
  animation: anim-item-entrar .45s var(--anim-ease) backwards;
}

#CollapsingNavbar .nav-item:nth-child(2) { animation-delay: .05s; }
#CollapsingNavbar .nav-item:nth-child(3) { animation-delay: .1s; }
#CollapsingNavbar .nav-item:nth-child(4) { animation-delay: .15s; }
#CollapsingNavbar .nav-item:nth-child(5) { animation-delay: .2s; }
#CollapsingNavbar .nav-item:nth-child(6) { animation-delay: .25s; }
#CollapsingNavbar .nav-item:nth-child(7) { animation-delay: .3s; }
#CollapsingNavbar .nav-item:nth-child(n+8) { animation-delay: .35s; }

.navbar-toggler {
  transition: transform .5s var(--anim-ease-spring), box-shadow var(--anim-media) ease;
}

.navbar-toggler:hover {
  box-shadow: 0 0 0 4px rgba(0, 163, 224, .25);
}

.navbar-toggler:not(.collapsed) {
  transform: rotate(180deg);
}

/* Buscador desplegable */
.close,
.close-button {
  transition: transform .45s var(--anim-ease-spring), opacity var(--anim-rapida) ease;
}

.close:hover,
.close:focus,
.close-button:hover,
.close-button:focus {
  transform: rotate(90deg);
  text-decoration: none;
}

/****************************************************************/
/*   ONDA AL HACER CLIC (span creado por JS)                    */
/****************************************************************/
.anim-onda {
  position: absolute;
  width: 240%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: anim-onda .7s ease-out forwards;
}

/****************************************************************/
/*   ENLACES Y BOTONES                                          */
/****************************************************************/
a {
  transition: color var(--anim-rapida) ease, text-underline-offset var(--anim-rapida) ease;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  text-underline-offset: 5px;
}

.btn,
.button,
.button--primary {
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--anim-media) ease,
    background-position .6s ease,
    border-color var(--anim-media) ease,
    color var(--anim-media) ease,
    transform .25s var(--anim-ease),
    box-shadow var(--anim-media) ease;
}

/* Gradiente que se desplaza al pasar el cursor */
.btn-primary,
.button--primary {
  background-image: linear-gradient(120deg, #0071B3 0%, #005DA4 50%, #00a3e0 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
}

.btn-primary:hover,
.btn-primary:focus,
.button--primary:hover,
.button--primary:focus {
  background-position: 100% 50%;
}

/* Botones de contorno definidos en el contenido (fondo blanco): sin gradiente encima */
.btn-departamentos {
  background-image: none !important;
}

.btn:hover,
.button:hover,
.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 113, 179, .25);
}

.btn:active,
.button:active,
.button--primary:active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

/* Destello diagonal (::after no se usa en .dropdown-toggle) */
.btn:not(.dropdown-toggle)::after,
.button:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn:not(.dropdown-toggle):hover::after,
.button:not(.dropdown-toggle):hover::after {
  animation: anim-brillo .8s ease;
}

.more-link a {
  display: inline-block;
  transition: transform var(--anim-media) var(--anim-ease-spring), color var(--anim-rapida) ease;
}

.more-link a:hover {
  transform: translateX(3px);
}

/****************************************************************/
/*   TARJETAS                                                   */
/****************************************************************/
.card,
.card-deck,
.contacto-info,
.resumen-capacitacion,
.avisos-secundarios,
.aviso-ultimo,
.elemento-lista-info,
.staff-card {
  transition:
    transform .5s var(--anim-ease),
    box-shadow .5s ease;
}

.card:hover,
.card-deck:hover,
.contacto-info:hover,
.resumen-capacitacion:hover,
.avisos-secundarios:hover,
.aviso-ultimo:hover,
.staff-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--anim-sombra-hover);
}

/* Las tarjetas dentro del menú o acordeones no se levantan */
.dropdown-menu .card:hover,
.accordion .card:hover {
  transform: none;
}

/* Inclinación 3D con reflejo (clases puestas por JS; transform va en línea) */
.anim-tilt {
  position: relative;
  /* Plano: con preserve-3d Firefox ocultaba partes del texto (z-fighting) */
  transform-style: flat;
}

.anim-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--anim-mx, 50%) var(--anim-my, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transition: opacity .4s ease;
}

.anim-tilt.anim-tilt-activo::after {
  opacity: 1;
}

.anim-tilt.anim-tilt-activo {
  box-shadow: 0 16px 34px rgba(0, 50, 100, .18), 0 6px 12px rgba(0, 0, 0, .08);
  z-index: 2;
}

/* Borde con gradiente que aparece en tarjetas blancas */
.card.anim-tilt-activo,
.card-deck.anim-tilt-activo,
.staff-card.anim-tilt-activo {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(0, 163, 224, .4), 0 16px 34px rgba(0, 50, 100, .16);
}

/* Zoom de imágenes dentro de tarjetas */
.card-img-top,
.actividades .field--type-image,
.view-calendario .field--type-image,
.galeria-multimedia .card-body .field--type-image,
.resumen-aviso .field--type-image {
  overflow: hidden;
}

.card-img-top img,
.actividades img:not(.icono),
.view-calendario img:not(.icono),
.galeria-multimedia .card-body img,
.resumen-aviso img {
  transition: transform 1s var(--anim-ease), filter .5s ease;
}

.card:hover .card-img-top img,
.actividades .col-md-4:hover img:not(.icono),
.view-calendario .views-row:hover img:not(.icono),
.galeria-multimedia .card-deck:hover .card-body img,
.avisos-secundarios:hover .resumen-aviso img,
.aviso-ultimo:hover .resumen-aviso img {
  transform: scale(1.05);
  filter: saturate(1.1);
}

/* Íconos SVG de enlaces de interés */
.enlace-int img {
  transition: transform .5s var(--anim-ease-spring);
}

.enlace-int:hover img {
  transform: scale(1.08);
}

/****************************************************************/
/*   CUADRÍCULA DE INFORMACIÓN (página principal)               */
/****************************************************************/
.grid-container .item,
.grid-container .item1 {
  overflow: hidden;
}

.avatar,
.imgs-avatar img {
  transition: transform 1.1s var(--anim-ease), opacity .5s ease, filter .5s ease;
}

.grid-container > div:hover .avatar,
.grid-container > div:hover .imgs-avatar img,
.grid-container > div:focus-within .imgs-avatar img {
  transform: scale(1.06);
  filter: saturate(1.15);
}

/* Velo con gradiente sobre la imagen */
.grid-container .imgs-avatar {
  position: relative;
}

.grid-container .imgs-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 35, 62, 0) 30%, rgba(0, 93, 164, .65) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}

.grid-container > div:hover .imgs-avatar::after,
.grid-container > div:focus-within .imgs-avatar::after {
  opacity: 1;
}

.texto-encima {
  z-index: 3;
  transition: transform .5s var(--anim-ease), text-shadow .5s ease, letter-spacing .5s var(--anim-ease);
}

.grid-container > div:hover .texto-encima,
.grid-container > div:focus-within .texto-encima {
  transform: translateX(5px);
  text-shadow: 0 4px 18px rgba(0, 0, 0, .7);
}

/****************************************************************/
/*   CARRUSELES                                                 */
/****************************************************************/
.carousel-principal .carousel-inner,
.carrusel-interno .carousel-inner {
  overflow: hidden;
}

.carousel-principal .carousel-item.active img {
  animation: anim-ken-burns 9s ease-out both;
}

.carousel-principal .carousel-item.active .carousel-caption,
.carrusel-interno .carousel-item.active .carousel-caption {
  /* Sin "to": termina en la opacidad propia del caption (0.7) */
  animation: anim-fade-up .9s var(--anim-ease) .3s backwards;
}

.carousel-control-prev,
.carousel-control-next {
  transition: opacity var(--anim-media) ease;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  transition: transform .45s var(--anim-ease-spring);
}

.carousel-control-next:hover .carousel-control-next-icon {
  transform: translateX(4px) scale(1.1);
}

/* El ícono "prev" ya tiene rotateY(180deg); se conserva */
.carousel-control-prev:hover .carousel-control-prev-icon {
  transform: rotateY(180deg) translateX(4px) scale(1.1);
}

.carousel-indicators button {
  transition: transform .45s var(--anim-ease-spring), opacity var(--anim-media) ease;
}

.carousel-indicators button.active {
  transform: scale(1.4);
}

/****************************************************************/
/*   ACORDEONES Y PESTAÑAS                                      */
/****************************************************************/
.accordion-button {
  transition: background-color var(--anim-media) ease, color var(--anim-media) ease, padding-left .4s var(--anim-ease), box-shadow .4s var(--anim-ease);
}

.accordion-button:hover {
  padding-left: 1.6rem;
  color: var(--enlace-color);
  box-shadow: inset 4px 0 0 var(--anim-acento);
}

.accordion-button::after {
  transition: transform .45s var(--anim-ease-spring);
}

.accordion-collapse.show .accordion-body,
.paragraph--accordion.expanded .accordion-content {
  animation: anim-fade-up .5s var(--anim-ease) backwards;
}

.nav-tabs .nav-link {
  position: relative;
  transition: color var(--anim-media) ease, border-color var(--anim-media) ease, background-color var(--anim-media) ease;
}

.nav-tabs .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--anim-gradiente);
  transform: scaleX(0);
  transition: transform .45s var(--anim-ease);
}

.nav-tabs .nav-link:hover::before {
  transform: scaleX(1);
}

.tab-pane.active.show {
  animation: anim-fade-up .55s var(--anim-ease) backwards;
}

/****************************************************************/
/*   IMÁGENES Y MODAL                                           */
/****************************************************************/
.img-ajustada {
  transition: opacity var(--anim-media) ease, transform .5s var(--anim-ease), box-shadow .5s ease;
}

.public-img img.img-ajustada:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}

/* Se reproduce cada vez que el modal pasa de display:none a block */
.modal[aria-hidden="false"] {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: anim-fade-in .35s ease backwards;
}

.modal-img-completa {
  animation: anim-zoom-in .55s var(--anim-ease) backwards;
}

.close-modal {
  transition: transform .45s var(--anim-ease-spring);
}

.close-modal:hover {
  transform: rotate(90deg);
}

/* Paneles laterales */
.slide-window {
  transition: right .55s var(--anim-ease);
}

/****************************************************************/
/*   AVISO PRINCIPAL Y LOGOS                                    */
/****************************************************************/
.aviso-principal {
  background-image: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 100% 0;
  transition: background-position 1.2s ease, transform .5s var(--anim-ease), box-shadow .5s ease;
}

.aviso-principal:hover {
  background-position: 0 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 40, 80, .3);
}

.logo_organizan {
  transition: transform .5s var(--anim-ease-spring), filter .5s ease;
}

.logo_organizan:hover {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}

/****************************************************************/
/*   PIE DE PÁGINA                                              */
/****************************************************************/
.footer-ucr-wrapper {
  background-image: linear-gradient(100deg, #005DA4 0%, #0a3d6b 30%, #041626 55%, #0a3d6b 80%, #005DA4 100%);
  background-size: 200% 100%;
  animation: anim-gradiente 16s ease-in-out infinite alternate;
}

.redes-sociales img {
  transition: transform .45s var(--anim-ease-spring), filter .45s ease;
}

.redes-sociales a:hover img,
.redes-sociales a:focus img {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}

.footer-social a {
  transition: transform .45s var(--anim-ease-spring), box-shadow .45s ease, background-color .45s ease;
}

.footer-social a:hover,
.footer-social a:focus {
  transform: translateY(-3px) scale(1.05);
  background-color: var(--anim-acento);
  box-shadow: 0 10px 20px rgba(0, 163, 224, .45);
}

.footer-social a i {
  transition: color .45s ease, transform .45s var(--anim-ease-spring);
}

.footer-social a:hover i,
.footer-social a:focus i {
  color: #ffffff;
  transform: scale(1.2);
}

.site-footer nav li a,
.site-footer ul.info-contacto a {
  display: inline-block;
  transition: transform .4s var(--anim-ease), opacity var(--anim-rapida) ease;
}

.site-footer nav li a:hover,
.site-footer nav li a:focus,
.site-footer ul.info-contacto a:hover,
.site-footer ul.info-contacto a:focus {
  transform: translateX(3px);
}

/****************************************************************/
/*   BOTÓN IR ARRIBA                                            */
/****************************************************************/
.ir-arriba {
  border-radius: 50%;
  background: var(--anim-gradiente);
  box-shadow: 0 8px 20px rgba(0, 93, 164, .4);
  transition: transform .45s var(--anim-ease-spring), box-shadow .45s ease;
  z-index: 50;
}

.ir-arriba:hover,
.ir-arriba:focus {
  background: var(--anim-gradiente);
  transform: translateY(-3px);
  animation: anim-pulso 1.2s ease-out infinite;
}

.ir-arriba:hover::before {
  display: inline-block;
  animation: anim-flotar .9s ease-in-out infinite;
}

/****************************************************************/
/*   FORMULARIOS                                                */
/****************************************************************/
.form-control,
.form-select {
  transition: border-color var(--anim-media) ease, box-shadow var(--anim-media) ease, transform var(--anim-media) var(--anim-ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--anim-acento);
  box-shadow: 0 0 0 4px rgba(0, 163, 224, .22), 0 8px 18px rgba(0, 0, 0, .06);
}

/****************************************************************/
/*   BANNER PRINCIPAL (.banner-bg, bloque de la portada)        */
/****************************************************************/
@keyframes anim-hero-texto {
  from { opacity: 0; transform: translateY(30px) scale(.96); filter: blur(8px); }
}

@keyframes anim-hero-destello {
  0%, 70% { left: -60%; }
  100%    { left: 130%; }
}

/* Banner más alto: se ve más de la parte de abajo de la foto */
.banner-bg.banner-width {
  height: min(78vh, 680px) !important;
  min-height: 420px;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .banner-bg.banner-width {
    height: 300px !important;
    min-height: 0;
  }
}

/*
 * Parallax: la foto queda fija respecto a la ventana y el contenido se
 * desliza encima. El banner es una "ventana" oscura a esa misma foto.
 * background-attachment: fixed lo mueve el navegador, sin tirones en Firefox.
 */
.banner-bg {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Velo oscuro original, con un toque azul institucional */
.banner-bg::before {
  background: linear-gradient(160deg, rgba(0, 35, 62, .45) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 93, 164, .4) 100%) !important;
}

.banner-text-wrapper {
  overflow: hidden;
  /* El desenfoque de fondo se recalculaba en cada cuadro al hacer scroll */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: anim-hero-texto 1.3s var(--anim-ease) .3s backwards;
}

.banner-text-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-20deg);
  animation: anim-hero-destello 7s ease-in-out 2s infinite;
}

/*
 * Fondo de todas las páginas: la foto de la Escuela fija (parallax) con un
 * velo claro. En las subpáginas casi no se nota; en la portada se ve más.
 * En la portada JS pone en --anim-fondo-img la foto actual del banner.
 */
html body {
  background:
    linear-gradient(180deg, rgba(245, 245, 245, .86) 0%, rgba(245, 245, 245, .93) 100%),
    var(--anim-fondo-img, url("/sites/default/files/2025-10/escuela-matematicas.jpg")) center / cover no-repeat fixed;
}

html body.anim-fondo-activo {
  background:
    linear-gradient(180deg, rgba(245, 245, 245, .74) 0%, rgba(245, 245, 245, .86) 100%),
    var(--anim-fondo-img) center / cover no-repeat fixed;
}

/* Los contenedores grises se vuelven transparentes para que se vea el fondo */
#page,
#main-wrapper,
.dialog-off-canvas-main-canvas {
  background-color: transparent !important;
}

.container-front,
.main-content,
.highlighted {
  background: transparent;
}

/****************************************************************/
/*   SUBPÁGINAS (componentes escritos en el cuerpo del contenido)*/
/****************************************************************/
.breadcrumb {
  animation: anim-fade-in .8s ease .2s backwards;
}

/* Tarjetas propias: departamentos, MOOCs, noticias, documentos */
.dept-card,
.mooc-card,
.noticia-item,
.doc-card {
  transition: transform .5s var(--anim-ease), box-shadow .5s ease;
}

.dept-card:hover,
.mooc-card:hover,
.noticia-item:hover,
.doc-card:hover {
  box-shadow: var(--anim-sombra-hover);
}

.mooc-card img,
.mooc-image img,
.doc-thumb img,
.noticia-imagen img {
  transition: transform .9s var(--anim-ease);
}

.mooc-card:hover img,
.doc-card:hover .doc-thumb img {
  transform: scale(1.04);
}

/* Filas de información de los departamentos */
.info-row {
  transition: background-color var(--anim-media) ease, transform var(--anim-media) var(--anim-ease);
}

.info-row:hover {
  transform: translateX(3px);
}

/* Listas desplegables (carreras, cursos, informes): elementos escalonados */
.collapse.show .list-group-item {
  animation: anim-fade-up .4s var(--anim-ease) backwards;
}

.collapse.show .list-group-item:nth-child(2) { animation-delay: .03s; }
.collapse.show .list-group-item:nth-child(3) { animation-delay: .06s; }
.collapse.show .list-group-item:nth-child(4) { animation-delay: .09s; }
.collapse.show .list-group-item:nth-child(5) { animation-delay: .12s; }
.collapse.show .list-group-item:nth-child(6) { animation-delay: .15s; }
.collapse.show .list-group-item:nth-child(n+7) { animation-delay: .18s; }

.list-group-item {
  transition: background-color var(--anim-media) ease, box-shadow var(--anim-media) ease;
}

.list-group-item:hover {
  box-shadow: inset 3px 0 0 var(--anim-acento);
}

.enlace-dropdown-titulo,
.btn-link {
  transition: color var(--anim-media) ease;
}

/* Botones de descarga */
.descargar {
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: transform .25s var(--anim-ease), box-shadow var(--anim-media) ease, background-color var(--anim-media) ease;
}

.descargar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 113, 179, .2);
}

/****************************************************************/
/*   ACCESIBILIDAD: MOVIMIENTO REDUCIDO                         */
/****************************************************************/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .anim-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }

  .anim-progreso {
    display: none;
  }
}