/* =========================================
   ANIMACIONES: flotar en tarjetas y flechas
   ========================================= */


/* Flecha: sale por el borde derecho y vuelve a entrar por el izquierdo */
@keyframes arrow-through{
  0%{transform:translateX(0);opacity:1;animation-timing-function:ease-out}
  45%{transform:translateX(250%);opacity:0}
  46%{transform:translateX(-250%);opacity:0;animation-timing-function:ease-out}
  100%{transform:translateX(0);opacity:1}
}
/* Flechas "anterior": sale por la izquierda y entra por la derecha */
@keyframes arrow-through-left{
  0%{transform:translateX(0);opacity:1;animation-timing-function:ease-out}
  45%{transform:translateX(-250%);opacity:0}
  46%{transform:translateX(250%);opacity:0;animation-timing-function:ease-out}
  100%{transform:translateX(0);opacity:1}
}
/* Flechas escritas como texto (→) */
@keyframes arrow-text-through{
  0%{text-indent:0;opacity:1;animation-timing-function:ease-out}
  45%{text-indent:1.6em;opacity:0}
  46%{text-indent:-1.6em;opacity:0;animation-timing-function:ease-out}
  100%{text-indent:0;opacity:1}
}

/* El contenedor recorta la flecha para que parezca salir por el borde */
.offer-arrow-box,.h-arrow-box,.n-arrow-box,.event-arrow-box,
.slider-round-btn,.alumni-nav-btn{overflow:hidden}

.offer-block:hover .offer-arrow-box svg,
.offer-block:focus-visible .offer-arrow-box svg,
.offer-arrow-box:focus-visible svg,
.h-card:hover .h-arrow-box svg,
.news-item:hover .n-arrow-box svg,
.event-card:hover .event-arrow-box svg,
.next-alumni:hover svg,
.next-alumni:focus-visible svg,
.agenda-next:hover svg,
.agenda-next:focus-visible svg{
  animation:arrow-through .38s both;
}
.prev-alumni:hover svg,
.prev-alumni:focus-visible svg,
.agenda-prev:hover svg,
.agenda-prev:focus-visible svg{
  animation:arrow-through-left .38s both;
}

.linear-button span,
.article-btn span{
  display:inline-block;overflow:hidden;white-space:nowrap;
  width:1.15em;text-align:left;vertical-align:middle;
}
.linear-button:hover span,
.article-btn:hover span,
.linear-button:focus-visible span,
.article-btn:focus-visible span{
  transform:none;
  animation:arrow-text-through .38s both;
}

/* =========================================
   MÓVIL / TÁCTIL
   ========================================= */
/* Aparecer suavemente al hacer scroll. La clase .usb-reveal la añade el JS solo a lo que está debajo de la pantalla. */
@keyframes usb-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes usb-failsafe{to{opacity:1}}
html.usb-js body:not(.elementor-editor-active) .usb-reveal{opacity:0}
html.usb-js body:not(.elementor-editor-active) .usb-reveal:not(.is-in){animation:usb-failsafe .01s 4s forwards} /* por si el JS falla */
html.usb-js body:not(.elementor-editor-active) .usb-reveal.is-in{opacity:1;animation:usb-rise .45s cubic-bezier(.23,1,.32,1) backwards;animation-delay:var(--usb-delay,0s)}

/* En pantallas táctiles no existe el hover: el mismo efecto se activa al tocar */
@media (hover:none){
  .usb-person:active,.usb-doc:active{transform:translateY(-6px);box-shadow:0 18px 35px rgba(0,0,0,.18)}
  .h-card:active,.event-card:active,.usb-post-card:active{transform:translateY(-5px)}
  .offer-block:active .offer-arrow-box svg,
  .h-card:active .h-arrow-box svg,
  .news-item:active .n-arrow-box svg,
  .event-card:active .event-arrow-box svg,
  .article-btn:active span,.linear-button:active span{animation:arrow-through .38s both}
  .article-btn:active span,.linear-button:active span{animation-name:arrow-text-through}
}