/* ===================================
   CRUCIGRAMA - ANIMACIONES AVANZADAS
   Efectos WOW profesionales y modernos
   =================================== */

/* ===================================
   ANIMACIONES DE SCROLL
   =================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================
   PARTÍCULAS FLOTANTES EN HERO
   =================================== */
.hero::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(90, 185, 200, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(125, 212, 224, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(90, 185, 200, 0.08) 0%, transparent 40%);
    animation: particlesFloat 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes particlesFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* ===================================
   EFECTO PARALLAX EN SCROLL
   =================================== */
.parallax-bg {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   ANIMACIÓN DE CONTADORES
   =================================== */
.stat-number {
    background: linear-gradient(135deg, var(--color-azul-medio) 0%, var(--color-azul-claro) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ===================================
   EFECTO RIPPLE EN BOTONES
   =================================== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

/* ===================================
   EFECTO GLASSMORPHISM MEJORADO
   =================================== */
.methodology-card,
.service-card,
.stat-card,
.contact-card-large {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ===================================
   ANIMACIÓN DE CARDS AL HOVER
   =================================== */
.pillar-card,
.service-card,
.resource-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pillar-card:hover,
.service-card:hover,
.resource-card:hover {
    transform: translateY(-15px) scale(1.02);
}

/* ===================================
   EFECTO SHIMMER EN TÍTULOS
   =================================== */
.section-title {
    background: linear-gradient(
        90deg,
        var(--color-azul-oscuro) 0%,
        var(--color-azul-claro) 50%,
        var(--color-azul-oscuro) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.section-dark .section-title {
    background: linear-gradient(
        90deg,
        var(--color-blanco) 0%,
        var(--color-cyan-acento) 50%,
        var(--color-blanco) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* ===================================
   ANIMACIÓN STAGGER PARA LISTAS
   =================================== */
.pillar-card:nth-child(1) {
    animation-delay: 0.1s;
}

.pillar-card:nth-child(2) {
    animation-delay: 0.2s;
}

.pillar-card:nth-child(3) {
    animation-delay: 0.3s;
}

.service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.service-card:nth-child(2) {
    animation-delay: 0.2s;
}

.service-card:nth-child(3) {
    animation-delay: 0.3s;
}

.service-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* ===================================
   EFECTO GLOW EN HOVER
   =================================== */
.btn-primary:hover,
.nav-link.cta-nav:hover {
    box-shadow: 0 0 30px rgba(90, 185, 200, 0.6),
                0 0 60px rgba(90, 185, 200, 0.4),
                0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ===================================
   ANIMACIÓN DE ÍCONOS
   =================================== */
.pillar-icon,
.service-icon,
.resource-icon,
.contact-card-icon,
.stat-icon {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(90, 185, 200, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(90, 185, 200, 0);
    }
}

.pillar-card:hover .pillar-icon,
.service-card:hover .service-icon,
.contact-card-large:hover .contact-card-icon {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-5deg);
    }
    75% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* ===================================
   EFECTO TYPING EN HERO SUBTITLE
   =================================== */
.hero-subtitle {
    overflow: hidden;
    border-right: 2px solid var(--color-cyan-acento);
    white-space: nowrap;
    animation: typing 3.5s steps(60, end), blink-caret 0.75s step-end infinite;
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-cyan-acento);
    }
}

/* ===================================
   EFECTO WAVE EN SCROLL INDICATOR
   =================================== */
.scroll-indicator {
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(15px);
    }
}

/* ===================================
   LÍNEA ANIMADA BAJO TÍTULOS
   =================================== */
.section-title::after {
    animation: lineGrow 1s ease-out forwards;
    transform-origin: center;
}

@keyframes lineGrow {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 80px;
        opacity: 1;
    }
}

/* ===================================
   EFECTO 3D EN LOGOS DE CLIENTES
   =================================== */
.clients-banner-container {
    perspective: 1000px;
    transition: transform 0.6s ease;
}

.clients-full-banner {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.clients-banner-container:hover .clients-full-banner {
    transform: rotateY(5deg) rotateX(2deg) scale(1.02);
}

/* ===================================
   GRADIENTE ANIMADO EN BACKGROUNDS
   =================================== */
.section-dark {
    background: linear-gradient(135deg, var(--color-azul-oscuro) 0%, #0f1e3a 50%, var(--color-azul-oscuro) 100%);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ===================================
   EFECTO SPOTLIGHT EN ABOUT PHOTO
   =================================== */
.about-photo {
    position: relative;
    box-shadow: 
        0 0 60px rgba(90, 185, 200, 0.4),
        0 0 120px rgba(90, 185, 200, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3);
    animation: photoGlow 3s ease-in-out infinite;
}

@keyframes photoGlow {
    0%, 100% {
        box-shadow: 
            0 0 60px rgba(90, 185, 200, 0.4),
            0 0 120px rgba(90, 185, 200, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 80px rgba(125, 212, 224, 0.6),
            0 0 160px rgba(125, 212, 224, 0.3),
            0 12px 48px rgba(0, 0, 0, 0.4);
    }
}

/* ===================================
   NÚMEROS ANIMADOS
   =================================== */
.stat-card {
    animation: cardFloat 3s ease-in-out infinite;
}

.stat-card:nth-child(1) {
    animation-delay: 0s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.4s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ===================================
   EFECTO REVEAL DE IZQUIERDA A DERECHA
   =================================== */
.dimmer-step {
    animation: slideInRight 0.6s ease-out backwards;
}

.dimmer-step:nth-child(1) { animation-delay: 0.1s; }
.dimmer-step:nth-child(2) { animation-delay: 0.2s; }
.dimmer-step:nth-child(3) { animation-delay: 0.3s; }
.dimmer-step:nth-child(4) { animation-delay: 0.4s; }
.dimmer-step:nth-child(5) { animation-delay: 0.5s; }
.dimmer-step:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================
   CURSOR PERSONALIZADO (OPCIONAL)
   =================================== */
body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewport="0 0 32 32"><circle cx="16" cy="16" r="8" fill="%235AB9C8" opacity="0.5"/></svg>'), auto;
}

a, button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewport="0 0 32 32"><circle cx="16" cy="16" r="12" fill="%237DD4E0"/></svg>'), pointer;
}

/* ===================================
   SMOOTH SCROLL SNAP
   =================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ===================================
   PRELOADER ANIMATION
   =================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-azul-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    animation: logoSpin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes logoSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* ===================================
   RESPONSIVE ANIMATIONS
   =================================== */
@media (max-width: 768px) {
    .hero-subtitle {
        animation: none;
        white-space: normal;
        border-right: none;
    }
    
    .animate-on-scroll {
        transform: translateY(30px);
    }
}

/* Reducir animaciones para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}