/* ============================================================
   entrar.html — transiciones del visual de la izquierda (dueño, 11-oct-2026:
   «que sean entretenidas las transiciones… todo en general que luzca mejor»).
   Solo la columna de Entrar (.acceso-escena); la ventana de acceso no cambia.
   - El clip nuevo entra con una cortina diagonal y un zum que se asienta;
     el anterior se queda debajo hasta que lo cubre.
   - El clip activo respira con un zum lento (efecto Ken Burns).
   - Título y texto suben y se enfocan, uno detrás de otro.
   Con «reducir movimiento» todo vuelve al fundido simple.
   ============================================================ */
.acceso-escena.acceso-visual .acceso-visual-clip {
  opacity: 1;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transform: scale(1.18);
  transition: clip-path .9s cubic-bezier(.77, 0, .18, 1) .9s, transform 1.2s cubic-bezier(.16, 1, .3, 1) .9s;
}
.acceso-escena.acceso-visual .acceso-visual-clip.acceso-visual-activo {
  z-index: 1;
  clip-path: polygon(-30% 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1);
  transition: clip-path .9s cubic-bezier(.77, 0, .18, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1);
  animation: acceso-respira 12s ease-in-out 1.4s infinite alternate;
}
[dir="rtl"] .acceso-escena.acceso-visual .acceso-visual-clip { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
[dir="rtl"] .acceso-escena.acceso-visual .acceso-visual-clip.acceso-visual-activo { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); }
@keyframes acceso-respira { from { transform: scale(1); } to { transform: scale(1.06); } }
.acceso-escena.acceso-visual.acceso-visual-quieto .acceso-visual-clip.acceso-visual-activo { animation-play-state: paused; }
/* Filo de luz lima que acompaña a la cortina. */
.acceso-escena.acceso-visual .acceso-visual-clips::after { content: ""; position: absolute; z-index: 2; inset: -10% auto -10% 0; width: 3px; background: linear-gradient(180deg, transparent, rgba(209, 254, 23, .9), transparent); box-shadow: 0 0 24px 6px rgba(209, 254, 23, .35); opacity: 0; transform: translateX(-20px) skewX(-16deg); pointer-events: none; }
.acceso-escena.acceso-visual.acceso-visual-cambio .acceso-visual-clips::after { animation: acceso-filo .9s cubic-bezier(.77, 0, .18, 1); }
@keyframes acceso-filo { 0% { opacity: 0; left: 100%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: -5%; } }
[dir="rtl"] .acceso-escena.acceso-visual.acceso-visual-cambio .acceso-visual-clips::after { animation-name: acceso-filo-rtl; }
@keyframes acceso-filo-rtl { 0% { opacity: 0; left: -5%; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
/* Textos: suben y se enfocan, escalonados. */
.acceso-escena.acceso-visual.acceso-visual-cambio .acceso-visual-kicker { animation: acceso-texto .6s cubic-bezier(.16, 1, .3, 1) .25s both; }
.acceso-escena.acceso-visual.acceso-visual-cambio .acceso-visual-titulo { animation: acceso-texto .7s cubic-bezier(.16, 1, .3, 1) .35s both; }
.acceso-escena.acceso-visual.acceso-visual-cambio .acceso-visual-sub { animation: acceso-texto .7s cubic-bezier(.16, 1, .3, 1) .5s both; }
@keyframes acceso-texto { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* Título más presente y la pestaña activa con su punto lima. */
.acceso-escena.acceso-visual .acceso-visual-titulo { font-size: clamp(40px, 3.6vw, 56px); line-height: 1.05; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.acceso-escena.acceso-visual .acceso-visual-velo { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .86) 100%); }
.acceso-escena.acceso-visual .acceso-visual-pestana[aria-selected="true"] .acceso-visual-barra i { background: var(--acx-lima, #d1fe17); box-shadow: 0 0 10px rgba(209, 254, 23, .6); }
.acceso-escena.acceso-visual .acceso-visual-texto { inset-inline: 32px; bottom: 28px; }

@media (prefers-reduced-motion: reduce) {
  .acceso-escena.acceso-visual .acceso-visual-clip, .acceso-escena.acceso-visual .acceso-visual-clip.acceso-visual-activo { clip-path: none; transform: none; animation: none; transition: opacity .5s ease; opacity: 0; }
  .acceso-escena.acceso-visual .acceso-visual-clip.acceso-visual-activo { opacity: 1; }
  .acceso-escena.acceso-visual .acceso-visual-clips::after { display: none; }
  .acceso-escena.acceso-visual.acceso-visual-cambio :is(.acceso-visual-kicker, .acceso-visual-titulo, .acceso-visual-sub) { animation: none; }
}

/* ---------- Formulario sin el nombre repetido (dueño, 11-oct-2026) ----------
   «Dice COCUYO y abajo Entra en Cocuyo, eso sobra»: como en las otras
   plataformas, la marca va una sola vez, arriba en la barra, y el formulario
   empieza por el título. */
@media (min-width: 1024px) {
  body.acceso-pagina:not(.paquete-activo) .acceso-form-marca { display: none; }
  body.acceso-pagina:not(.paquete-activo) .acceso-cabecera { justify-content: space-between; }
  body.acceso-pagina:not(.paquete-activo) .acceso-cabecera .acceso-marca { display: block; }
  body.acceso-pagina:not(.paquete-activo) .hero-entrar { margin-top: auto; }
}