@charset "UTF-8";

/* ==========================================================================
   MONTENEGRO Contable & ERP - Estilos Personalizados
   Codificación: UTF-8
   ========================================================================== */

/* Prevenir corte del navbar sticky en móviles */
html, body {
    overflow-x: clip !important;
}

#main-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100%;
}

/* Fondo tipo malla suave y blanco luminoso */
.hero-bg-mesh {
    background-color: #ffffff;
    background-image: 
        radial-gradient(at 0% 0%, rgba(14, 136, 232, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(0, 210, 180, 0.07) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(240, 247, 255, 0.9) 0px, transparent 60%);
}

/* Efectos de vidrio brillante (Bright Glassmorphism) */
.glass-bright {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-glow-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 40px -15px rgba(14, 136, 232, 0.08), 0 0 1px 1px rgba(241, 245, 249, 0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-glow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(14, 136, 232, 0.16), 0 0 0 1px rgba(14, 136, 232, 0.3);
}

/* Animaciones flotantes suaves para elementos Parallax */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(0.8deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(8px) rotate(-0.8deg);
    }
}

.animate-bounce-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-reverse {
    animation: floatReverse 7s ease-in-out infinite;
}

/* Pestañas activas del ERP Switcher */
.erp-tab-btn.active {
    background-color: #ffffff;
    border-color: #0e88e8;
    box-shadow: 0 10px 25px -5px rgba(14, 136, 232, 0.15);
}

.erp-tab-btn.active h4 {
    color: #03559f;
}

.erp-tab-btn.active .w-12 {
    background-color: #0e88e8;
    color: #ffffff;
}

/* Personalización del Range Slider en el Cotizador */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00d2b4;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 210, 180, 0.8);
    border: 3px solid #ffffff;
    transition: transform 0.15s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.18);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00d2b4;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 210, 180, 0.8);
    border: 3px solid #ffffff;
}

/* Swiper pagination personalización */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #cbd5e1;
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 9999px;
    background: #0e88e8;
}

/* Botones de filtro de servicios */
.filter-btn.active {
    background-color: #0e88e8 !important;
    color: #ffffff !important;
    border-color: #0e88e8 !important;
    box-shadow: 0 8px 20px -4px rgba(14, 136, 232, 0.35);
}

/* Transición suave para filtrado de tarjetas */
.service-card {
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-card.is-hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}

/* Scrollbar refinada */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* FAQ Acordeón Interactivo */
.faq-item {
    transition: all 0.25s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), opacity 0.25s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 400px;
    opacity: 1;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: #0e88e8;
}

.faq-item.active {
    border-color: #0e88e8;
    background-color: #ffffff;
    box-shadow: 0 10px 30px -5px rgba(14, 136, 232, 0.1);
}