/* =========================================================
   Iberail — movimiento (v17.1)
   Va después de v16.css en las páginas públicas (no en el panel ni en Zarping). La parte con JS está en assets/movimiento.js.
   Todo usa las mismas curvas y duraciones (abajo) y nada se mueve con «reducir movimiento».
   - Transición entre páginas (View Transitions entre documentos: Chrome, Edge y Safari 18.2+; el resto navega normal):
     la página nueva sube como una hoja, la cabecera se queda y la pastilla del menú viaja hasta la sección nueva.
     Al volver atrás, al revés (movimiento.js marca el tipo «atras»).
   - Portada: entrada en orden (titular por líneas desde una máscara, texto, buscador y mapa) y la cabecera se aleja al bajar.
   - Títulos que se revelan con máscara y piezas en cascada al llegar a ellas (movimiento.js añade .mv-* e .is-in).
   - Detalles: flechas que salen y vuelven a entrar, tarjetas que se levantan, subrayados que crecen.
   Va encima del diseño v16 (v17.2): donde los dos animan lo mismo (móvil de «Cómo funciona», cuenta atrás, títulos) manda uno solo.
   ========================================================= */

:root{
  --mv-sale:cubic-bezier(.4,0,1,1);        /* lo que se va: acelera */
  --mv-entra:cubic-bezier(.16,1,.3,1);     /* lo que llega: frena largo */
  --mv-cruza:cubic-bezier(.65,0,.35,1);    /* lo que cambia de sitio */
}

@media (prefers-reduced-motion:no-preference){

  /* ---------- 1. transición entre páginas ---------- */
  @view-transition{navigation:auto}
  .topbar{view-transition-name:ib-cabecera}
  .nav a[aria-current="page"]{view-transition-name:ib-nav-activo}
  ::view-transition{background:#050608}
  ::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--mv-cruza)}
  ::view-transition-group(ib-cabecera){z-index:3}
  ::view-transition-group(ib-nav-activo){z-index:4}
  /* la cabecera no se mueve: solo se ve la nueva (el aviso de arriba lo pone v16.js después y va con la página) */
  ::view-transition-old(ib-cabecera){animation:none;opacity:0}
  ::view-transition-new(ib-cabecera){animation:none}
  /* la página que se va se hunde un poco; la nueva sube por encima con las esquinas redondeadas */
  ::view-transition-old(root){animation:mv-hunde .7s var(--mv-cruza) both}
  ::view-transition-new(root){animation:mv-sube .7s var(--mv-cruza) both}
  @keyframes mv-hunde{to{transform:scale(.93) translateY(-2%);opacity:.35;border-radius:28px}}
  @keyframes mv-sube{from{transform:translateY(100%);clip-path:inset(0 round 32px 32px 0 0)}to{transform:none;clip-path:inset(0 round 0)}}
  /* hacia atrás: la página actual baja y descubre la anterior, que vuelve a su tamaño */
  html:active-view-transition-type(atras)::view-transition-old(root){animation:mv-baja .65s var(--mv-cruza) both;z-index:2}
  html:active-view-transition-type(atras)::view-transition-new(root){animation:mv-vuelve .65s var(--mv-cruza) both;z-index:1}
  @keyframes mv-baja{from{clip-path:inset(0 round 0)}to{transform:translateY(100%);clip-path:inset(0 round 32px 32px 0 0)}}
  @keyframes mv-vuelve{from{transform:scale(.93) translateY(-2%);opacity:.35}}

  /* ---------- 2. portada: entrada en orden ---------- */
  .mv-l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
  .mv-l > span{display:inline-block;animation:mv-linea 1.1s var(--mv-entra) both}
  .mv-l:nth-child(1) > span{animation-delay:.12s}
  .mv-l:nth-child(2) > span{animation-delay:.24s}
  @keyframes mv-linea{from{transform:translateY(105%) rotate(2deg)}}
  .v16-hero .hx-top{animation:mv-aparece .9s var(--mv-entra) .05s both}
  .v16-hero .hero-lead{animation:mv-aparece 1s var(--mv-entra) .42s both}
  .v16-hero .hx-pick{animation:mv-aparece 1.1s var(--mv-entra) .55s both}
  .v16-hero .hx-link{animation:mv-aparece 1s var(--mv-entra) .7s both}
  .v16-orbita{animation:mv-mapa 2.2s var(--mv-entra) both}
  @keyframes mv-aparece{from{opacity:0;transform:translateY(24px)}}
  @keyframes mv-mapa{from{opacity:0;transform:scale(1.12)}}
  /* cabeceras de las páginas interiores */
  .page-head h1{animation:mv-aparece 1s var(--mv-entra) .1s both}
  .page-head .lead,.page-head p.lead,.page-head .crumbs,.page-head .eyebrow{animation:mv-aparece 1s var(--mv-entra) .22s both}

  /* al bajar, la cabecera de la portada se aleja (solo en ordenador: en el móvil el buscador queda más abajo y se usa bajando) */
  @supports (animation-timeline:scroll()){ @media (min-width:1021px){
    .v16-hero-in{animation:mv-aleja linear both;animation-timeline:scroll(root);animation-range:0 85svh}
    .v16-hero-fx{animation:mv-oscurece linear both;animation-timeline:scroll(root);animation-range:0 85svh}
    @keyframes mv-aleja{to{opacity:0;transform:translateY(-10svh) scale(.97)}}
    @keyframes mv-oscurece{to{background-color:rgba(11,12,16,.7)}}
  }}

  /* ---------- 3. al llegar a cada parte ---------- */
  .js [data-reveal]{transform:translateY(28px);transition:opacity .9s var(--mv-entra),transform .9s var(--mv-entra);transition-delay:var(--rd,0ms)}
  /* títulos: suben desde una máscara */
  .mv-titulo{clip-path:inset(0 -5% 100% -5%);transform:translateY(.45em);transition:clip-path 1s var(--mv-entra),transform 1s var(--mv-entra)}
  .mv-titulo.is-in{clip-path:inset(-15% -5% -25% -5%);transform:none}
  /* piezas en cascada (tarjetas, pasos, preguntas, cifras…) */
  .mv-pieza{opacity:0;transform:translateY(32px) scale(.98);transition:opacity .8s var(--mv-entra),transform .9s var(--mv-entra),border-color .25s,background-color .25s;transition-delay:calc(var(--mv-i,0) * 70ms)}
  .mv-grupo.is-in > .mv-pieza{opacity:1;transform:none}
  /* fotos que se destapan */
  .mv-foto{clip-path:inset(12% 0 0 0 round 20px);transition:clip-path 1.2s var(--mv-entra)}
  .mv-foto > img,.mv-foto > video{transform:scale(1.15);transition:transform 1.6s var(--mv-entra)}
  .mv-foto.is-in{clip-path:inset(0 round 20px)}
  .mv-foto.is-in > img,.mv-foto.is-in > video{transform:none}
  /* el panel de salidas se enciende fila a fila */
  .mv-grupo .board-rows li{opacity:0;transform:translateX(-12px);transition:opacity .5s var(--mv-entra),transform .6s var(--mv-entra);transition-delay:calc(var(--mv-f,0) * 60ms + .2s)}
  .mv-grupo.is-in .board-rows li{opacity:1;transform:none}

  /* ---------- 4. detalles ---------- */
  /* flechas: salen por la derecha y vuelven a entrar por la izquierda */
  :is(.btn,.link-arrow,.v16-more-go,.hero-srt,.v16-aviso-go,.dest-feat-go,.ticket-stub,.qz-acts a) > svg:last-child{transition:none}
  :is(.btn,.link-arrow,.v16-more-go,.hero-srt,.v16-aviso-go,.dest-feat-go,.ticket-stub,.qz-acts a):hover > svg:last-child,
  .v16-more:hover .v16-more-go > svg:last-child,.dest-feat:hover .dest-feat-go > svg:last-child{animation:mv-flecha .5s var(--mv-cruza)}
  @keyframes mv-flecha{0%{transform:none}45%{transform:translateX(130%);opacity:0}46%{transform:translateX(-130%);opacity:0}100%{transform:none;opacity:1}}
  .btn:active{transform:scale(.97)}
  /* tarjetas que se levantan */
  .ticket,.v16-more,.v16-tile,.dest-feat,.contact-card{transition:transform .5s var(--mv-entra),border-color .25s}
  .ticket:hover,.v16-more:hover,.dest-feat:hover{transform:translateY(-6px)}
  .ticket .flag{transition:transform .5s var(--mv-entra)}
  .ticket:hover .flag{transform:scale(1.12) rotate(-4deg)}
  .dest-feat > img,.dest-feat > video{transition:transform 1.2s var(--mv-entra)}
  .dest-feat:hover > img,.dest-feat:hover > video{transform:scale(1.05)}
  /* subrayados que crecen desde la izquierda */
  .link-arrow{border-bottom:0;border-image:none;background:var(--spectrum) 0 100%/100% 2px no-repeat;padding-bottom:2px;transition:background-size .5s var(--mv-cruza)}
  .link-arrow:hover{background-size:0 2px;background-position:100% 100%}
  .footer-legal a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;text-decoration:none;transition:background-size .4s var(--mv-cruza),color .2s}
  .footer-legal a:hover{background-size:100% 1px}
  /* acordeón de dudas: el signo gira y la respuesta baja suave */
  .faq-a{transition:grid-template-rows .55s var(--mv-cruza)}
  .faq-a p{transform:translateY(-8px);opacity:0;transition:transform .5s var(--mv-entra),opacity .4s}
  .faq-item.is-open .faq-a p{transform:none;opacity:1;transition-delay:.12s}
  .plus{transition:transform .45s var(--mv-cruza),background-color .25s}
  /* carrusel de destinos: se arrastra con el ratón */
  .v16-hs-track.mv-arrastra{cursor:grab}
  .v16-hs-track.is-arrastrando{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .v16-hs-track.is-arrastrando a{pointer-events:none}
  /* en ordenador grande el carrusel va fijo y lo mueve el scroll (v16.css): ahí no se arrastra */
  @media (min-width:1021px) and (min-height:640px){.v16-hs-track.mv-arrastra{cursor:auto}}
}