/* Tailwind CSS Base and custom adjustments */
@layer base {
  body {
    @apply transition-colors duration-300 antialiased;
  }
}

/* Background dot matrix patterns for Light and Dark modes */
.bg-dot-pattern-light {
  background-image: radial-gradient(rgba(223, 54, 15, 0.05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.bg-dot-pattern-dark {
  background-image: radial-gradient(rgba(223, 54, 15, 0.07) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Ambient glow spheres blurring */
.glow-sphere {
  filter: blur(140px);
  pointer-events: none;
}

/* Laser scan line animation for the interactive ID card */
@keyframes scan {
  0% { top: 0%; opacity: 1; }
  50% { top: 100%; opacity: 1; }
  100% { top: 0%; opacity: 1; }
}

.scanner-line {
  animation: scan 3s linear infinite;
}

/* Typing cursor blink effect for typewriter simulations */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Transition animations for form steps */
.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Custom styles for calendar grid inputs */
.calendar-day-btn:disabled {
  @apply text-slate-300 dark:text-zinc-700 cursor-not-allowed bg-transparent hover:bg-transparent;
}

.calendar-day-btn.active {
  @apply bg-brand-orangePrimary text-white shadow-md font-bold;
}

.time-slot-btn.active {
  @apply bg-brand-orangeSecondary text-white shadow-sm font-bold border-brand-orangeSecondary;
}
/* --- FONDO GEOMÉTRICO Y TECNOLÓGICO --- */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Brillos ambientales: Naranja a la derecha, Azul/Cian a la izquierda */
.glow-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: glowPulse 8s infinite alternate;
    opacity: 0.3;
}
.glow-1 { 
    top: 20%; left: -10%; width: 40vw; height: 40vw; 
    background: rgba(14, 165, 233, 0.15); /* Cian tecnológico */
}
.glow-2 { 
    bottom: -10%; right: -10%; width: 45vw; height: 45vw; 
    background: rgba(223, 54, 15, 0.15); /* Naranja Xtracktor */
    animation-delay: -4s; 
}

/* Triángulos dinámicos */
.shape-triangle {
    position: absolute;
    pointer-events: none;
    animation: floatShape linear infinite;
    filter: drop-shadow(0 0 6px rgba(223, 54, 15, 0.4));
}

/* Partículas de "Datos" (Puntitos) */
.tech-particle {
    position: absolute;
    background-color: #0ea5e9; /* Azul cian */
    border-radius: 50%;
    pointer-events: none;
    animation: floatParticle linear infinite;
    filter: drop-shadow(0 0 4px #0ea5e9);
    opacity: 0.6;
}

/* --- Ajustes de visibilidad para el Modo Claro --- */
:root:not(.dark) .shape-triangle {
    opacity: 0.15; /* Mantenemos los triángulos tenues para que no manchen el blanco */
}

:root:not(.dark) .tech-particle {
    opacity: 0.7; /* Subimos la opacidad de los puntos de datos para que resalten */
    filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.8)); /* Les damos un brillo más fuerte */
}

/* Para los brillos ambientales (los círculos difuminados de fondo) */
:root:not(.dark) .glow-1 {
    opacity: 0.6; /* Hacemos que la mancha azul del fondo sea más visible */
}

/* Animaciones */
@keyframes floatShape {
    0% { transform: translateY(110vh) rotate(0deg) scale(0.5); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(-20vh) rotate(360deg) scale(1.2); opacity: 0; }
}

@keyframes floatParticle {
    0% { transform: translateY(110vh) scale(0.5); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

@keyframes glowPulse {
    0% { transform: scale(1); opacity: 0.2; }
    100% { transform: scale(1.1); opacity: 0.5; }
}
/* --- CARRUSEL INFINITO DE DIFERENCIADORES --- */
.carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Difuminado suave a los costados */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    width: max-content;
    gap: 2.5rem; /* Separación entre tarjetas */
    /* Velocidad del carrusel: 40 segundos. Bájalo si lo quieres más rápido */
    animation: infiniteScroll 40s linear infinite;
}

/* Detener la animación al hacer hover (Excelente para Experiencia de Usuario) */
.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes infiniteScroll {
    0% { transform: translateX(0); }
    /* Se desplaza exactamente el 50% de su propio ancho (el primer grupo de imágenes) */
    100% { transform: translateX(-50%); } 
}
/* --- ANIMACIONES PARA EL HERO (INICIO) --- */

@keyframes spinSlow {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 80s linear infinite;
    transform-origin: center center;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* --- ANIMACIÓN PARA EL MONTÍCULO DE TRIÁNGULOS JS --- */
.hero-triangle {
    position: absolute;
    transform-origin: center center;
    /* Movimiento de flotación súper suave de 15 a 25 segundos */
    animation: heroFloat 20s ease-in-out infinite alternate;
}

@keyframes heroFloat {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-15px, 20px) rotate(8deg) scale(1.05); }
    66% { transform: translate(10px, -15px) rotate(-5deg) scale(0.95); }
    100% { transform: translate(15px, 10px) rotate(12deg) scale(1); }
}
/* --- ANIMACIÓN PARA EL MONTÍCULO DEL HERO --- */
.cluster-triangle {
    position: absolute;
    transform-origin: center;
    animation: clusterFloat ease-in-out infinite alternate;
}

@keyframes clusterFloat {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-10px, 15px) rotate(5deg) scale(1.05); }
    100% { transform: translate(10px, -10px) rotate(-5deg) scale(0.95); }
}