/* ==========================================================================
   Alquitel - soporte CSS de la capa de animaciones (ver js/animaciones.js)

   Oculta solo la entrada del hero hasta que corre el JS, para evitar un
   destello antes de la animación. Si el JS no llega a ejecutarse (CDN caído,
   error), la animación de respaldo lo muestra igual a los 1.5 s.
   ========================================================================== */

html:not(.anim-listo):not([data-animaciones="off"]) [data-anim="hero"] {
  opacity: 0;
  animation: anim-respaldo 0s 1.5s forwards;
}

@keyframes anim-respaldo {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.anim-listo) [data-anim="hero"] {
    opacity: 1;
    animation: none;
  }
}

/* ---- Preloader (solo con <html data-anim-preloader>) --------------------
   Antes de que corra el JS, un telón CSS idéntico (fondo azul + logo tenue)
   cubre la página para que no se vea un destello. El JS lo reemplaza por el
   preloader real; si el JS no llega a ejecutarse, el telón se va a los 3 s. */

html[data-anim-preloader]:not(.anim-listo):not([data-animaciones="off"])::before,
html[data-anim-preloader]:not(.anim-listo):not([data-animaciones="off"])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  animation: anim-respaldo-telon 0s 3s forwards;
}

html[data-anim-preloader]:not(.anim-listo):not([data-animaciones="off"])::before {
  background-color: #06c;
}

html[data-anim-preloader]:not(.anim-listo):not([data-animaciones="off"])::after {
  background: url("../img/logo-alquitel.svg") center / 200px auto no-repeat;
  opacity: 0.25;
}

@keyframes anim-respaldo-telon {
  to { visibility: hidden; }
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #06c;
}

.preloader-logo {
  position: relative;
  width: 200px;
}

.preloader-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.preloader-base { opacity: 0.25; }

.preloader-fill {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 100% 0 0);
}

html.anim-cargando { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html[data-anim-preloader]:not(.anim-listo)::before,
  html[data-anim-preloader]:not(.anim-listo)::after { content: none; }
}

/* ---- Lenis (scroll suave): CSS oficial de lenis@1.3.26 -------------------
   + scroll-behavior auto, porque Bootstrap activa el smooth nativo en :root
   y se superpondría con Lenis. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ---- Carrusel de clientes (lo arma el JS; sin JS queda la fila estática) -
   Una sola línea con recorte; pan-y deja el scroll vertical nativo en touch
   mientras el arrastre horizontal llega como eventos de puntero. */
.carrusel {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  /* Recorte solo horizontal, así el scale del hover del logo no se corta */
  overflow-x: clip;
  overflow-y: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.carrusel.arrastrando { cursor: grabbing; }

.carrusel > * { will-change: transform; }

.carrusel img { -webkit-user-drag: none; }

/* ---- Seguidor del puntero (lo crea el JS, solo con mouse) ---------------
   Anillo de línea + círculo interior. El círculo sigue al cursor casi sin
   demora y el anillo llega después. Capas: *-pos (posición, GSAP) > pieza
   (tamaño según estado, CSS), para que no choquen los transform. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.cursor.fuera { opacity: 0; }

.cursor-pos {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor-anillo,
.cursor-centro {
  position: absolute;
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, border-color .3s ease, opacity .3s ease;
}

.cursor-anillo {
  top: -17px;
  left: -17px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 161, 255, .55);
  background-color: rgba(11, 161, 255, 0);
}

.cursor-centro {
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
}

/* El punto visible late suave (solo escala, sin parpadeo) */
.cursor-centro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #0ba1ff;
  animation: cursor-latido 2.4s ease-in-out infinite;
}

@keyframes cursor-latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

.cursor-texto {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #0ba1ff;
  opacity: 0;
  transition: opacity .2s ease;
}

/* Estados */
.cursor[data-estado="link"] .cursor-anillo,
.cursor[data-estado="arrastre"] .cursor-anillo {
  border-color: #0ba1ff;
  background-color: rgba(11, 161, 255, .1);
}

.cursor[data-estado="link"] .cursor-anillo { transform: scale(1.5); }
.cursor[data-estado="arrastre"] .cursor-anillo { transform: scale(2); }
.cursor[data-estado="arrastre"] .cursor-texto { opacity: 1; }

.cursor[data-estado="link"] .cursor-centro,
.cursor[data-estado="arrastre"] .cursor-centro { transform: scale(0); }

.cursor[data-estado="oculto"] .cursor-anillo,
.cursor[data-estado="oculto"] .cursor-centro { opacity: 0; }

.cursor.presionado .cursor-anillo { transform: scale(.75); }
.cursor.presionado[data-estado="link"] .cursor-anillo { transform: scale(1.25); }
.cursor.presionado[data-estado="arrastre"] .cursor-anillo { transform: scale(1.75); }

/* Sobre secciones azules */
.cursor.claro .cursor-anillo { border-color: rgba(255, 255, 255, .6); }
.cursor.claro .cursor-centro::before { background-color: #fff; }
.cursor.claro[data-estado="link"] .cursor-anillo {
  border-color: #fff;
  background-color: rgba(255, 255, 255, .15);
}

/* ---- Solapamiento (lo activa el JS en la sección siguiente a una fija) ---
   Queda por encima de la sección fijada, con fondo propio y una sombra suave
   en el borde superior para dar profundidad. */
.anim-solapa {
  position: relative;
  z-index: 2;
}

/* Sombra solo sobre el borde superior (un box-shadow también asomaría abajo) */
.anim-solapa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  background: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.anim-solapa:not([class*="bg-"]) { background-color: #fff; }

/* ---- Morph del isotipo al video (nosotros-v2) ----------------------------
   La forma SVG solo se muestra cuando el JS activa el efecto; sin JS se ve
   el póster directamente. */
.morph-forma { display: none; }
.morph-activo .morph-forma { display: block; }

/* En pantallas bajas, el escenario no supera ~80% del alto (16:9 → 142vh),
   así el video entero entra centrado mientras la escena está fija */
.morph-activo { max-width: 142vh; }

/* El marco queda por encima del póster (para que su borde coincida mientras el
   video entra) sin bloquear el clic sobre el póster */
.morph-activo .morph-forma {
  z-index: 2;
  pointer-events: none;
}

/* ---- Transición entre páginas (la crea el JS al hacer clic en un enlace
   interno): velo del mismo azul que el telón y el preloader de la página
   siguiente, por encima de todo */
.transicion-velo {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background-color: #06c;
  opacity: 0;
}