/* Custom CSS for CotiBot Landing */

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.neon-border {
    border-color: rgba(0, 242, 255, 0.2) !important;
}

.neon-glow {
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.15);
}

@keyframes pulse-cyan {
    0% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 242, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0); }
}

@keyframes pulse-whatsapp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(20, 184, 166, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

.hover-glass-enhanced:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(0, 242, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
}

.mockup-glow {
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.2), inset 0 0 10px rgba(0, 242, 255, 0.1) !important;
    border-color: rgba(0, 242, 255, 0.4) !important;
}

/* Form styles */
.form-input {
    background: #151515 !important;
    border: 1px solid rgba(0, 242, 255, 0.2) !important;
    color: #d4e4fa !important;
    font-size: 16px;
}

.form-input::placeholder {
    color: rgba(212, 228, 250, 0.5) !important;
    opacity: 1;
}

.form-input:focus {
    background: #1a1f2e !important;
    border-color: rgba(0, 242, 255, 0.6) !important;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    outline: none;
}

.form-textarea {
    background: #151515 !important;
    border: 1px solid rgba(0, 242, 255, 0.2) !important;
    color: #d4e4fa !important;
    resize: vertical;
    font-size: 16px;
}

.form-textarea::placeholder {
    color: rgba(212, 228, 250, 0.5) !important;
    opacity: 1;
}

.form-textarea:focus {
    background: #1a1f2e !important;
    border-color: rgba(0, 242, 255, 0.6) !important;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    outline: none;
}

.success-message {
    background: rgba(79, 219, 200, 0.1);
    border: 1px solid rgba(79, 219, 200, 0.3);
    color: #71f8e4;
}

.error-message {
    background: rgba(255, 180, 171, 0.1);
    border: 1px solid rgba(255, 180, 171, 0.3);
    color: #ffb4ab;
}

/* Pricing card — base para efecto 3D tilt */
.pricing-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1), box-shadow 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

/* Hero phone — efecto 3D tilt (más sutil) */
.hero-phone-tilt {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
    cursor: pointer;
    position: relative;
    overflow: visible;
    /* box-shadow removido para testing */
}

.pricing-card .pricing-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 65%);
}

.pricing-card:hover .pricing-glare {
    opacity: 1;
}

/* Hero phone glare */
.hero-phone-tilt .hero-phone-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card {
        transition: box-shadow 0.2s ease;
    }
    .pricing-card .pricing-glare {
        display: none;
    }
}

/* Utility animations */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fadeIn 0.6s ease-in-out;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}