/* Advise · intro de marca "La cima" (js/intro.js) ─────────────────────────────────────────────────────
   Todo cuelga de html.ai-intro, que solo pone el script en línea del <head> cuando la intro se va a ver.
   Sin JavaScript, con movimiento reducido o en la segunda visita de la sesión, este archivo no cambia nada. */

/* Seguro solo-CSS: pase lo que pase con el JavaScript, a los 4,2 s nada de la intro tapa la página */
@keyframes ai-safe { to { opacity: 0; visibility: hidden; } }

/* Telón navy desde el primer cuadro, antes de que exista el escenario (la página ya carga debajo). Si a los 2 s el
   escenario todavía no existe (js/intro.min.js no llegó), el telón se retira solo y la intro ya no se muestra. */
html.ai-intro:not(.ai-live)::after {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: #02162F;
  transition: opacity .22s cubic-bezier(.4,0,.2,1);
  animation: ai-safe .25s linear 2s forwards;
}
html.ai-intro.ai-out::after { opacity: 0; }

/* La entrada de la portada la hace la intro (en el teléfono, la del sitio arrancaría en opacidad 0 bajo el telón) */
html.ai-ran .cap-hero > * { animation: none !important; }

/* Las franjas de la portada miden un % del escenario, y en el teléfono site.js reorganiza el escenario después del primer
   cuadro (el "riel"): saltarían más de una pantalla. Bajo el telón no se ven de todos modos; ocultas, ese salto no
   cuenta como desplazamiento de diseño (CLS). Vuelven a verse cuando site.js terminó (data-ready) o cuando la intro
   prepara la entrada de la portada (ai-page), lo que ocurra primero. */
html.ai-intro:not([data-ready]):not(.ai-page) .stage-bands { visibility: hidden; }

/* Escenario: capas planas; el logo es el PNG oficial visto por ventanas fijas (overflow), nunca redibujado */
.ai {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; overflow: hidden; contain: strict;
  pointer-events: auto; cursor: default; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  /* el toque o deslizamiento que termina la intro no desplaza la página que está debajo (se vería ya corrida) */
  touch-action: none; overscroll-behavior: none;
  animation: ai-safe .25s linear 4.2s forwards;
}
.ai.ai-pass { pointer-events: none; }
.ai-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #02162F; }
.ai-fly, .ai-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.ai-logo { position: absolute; }
.ai-m { position: absolute; overflow: hidden; }
/* Fundido exacto entre dos copias quietas en el mismo lugar (js: PL): grupo aislado + suma plus-lighter */
.ai-pair, .ai-bx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ai-iso { isolation: isolate; }
.ai-iso > .ai-x { mix-blend-mode: plus-lighter; }
.ai img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; margin: 0; display: block;
  pointer-events: none; -webkit-user-drag: none;
}

/* "Saltar": discreto, arriba a la derecha (donde después viven Menú / Agendar demo), lejos de la barra de Safari */
.ai-skip {
  position: fixed; z-index: 2147483001; top: 0; right: max(var(--gut, 20px), calc((100% - 1440px) / 2));
  height: var(--hdr, 56px); min-width: 44px; padding: 0 2px 0 14px; margin: 0;
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; border-radius: 8px;
  color: rgba(255,255,255,.62); font: 600 14px/1 var(--font, system-ui, sans-serif); letter-spacing: .01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: ai-safe .25s linear 4.2s forwards;
}
@media (hover: hover) { .ai-skip:hover { color: #fff; } }
/* (la opacidad se anima en el texto interior: el botón lleva el seguro de CSS, que anima visibility) */
.ai-skip-t { display: block; opacity: 0; }
.ai-skip:focus-visible { outline: 2px solid var(--celeste, #4BA9E8); outline-offset: -6px; color: #fff; }
.ai-skip:focus-visible .ai-skip-t { opacity: 1 !important; }

/* Pruebas y videos (línea de tiempo congelada con __adviseIntro.seek): el seguro de CSS no corre */
html.ai-lab::after, html.ai-lab .ai, html.ai-lab .ai-skip { animation: none; }

@media print { .ai, .ai-skip { display: none !important; } html.ai-intro::after { display: none !important; } }