@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@300;400;700;800&display=swap');

:root { 
    --purple-dark: #312e81; 
    --purple-brand: #4338ca; 
    --purple-light: #6366f1; 
}

html {
    overflow-x: hidden !important;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background: #fff; 
    color: #0f172a; 
    overflow-x: hidden;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevenir scroll horizontal em mobile */
@media (max-width: 768px) {
    * {
        max-width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    body {
        -webkit-overflow-scrolling: touch;
    }
    .full-page {
        width: 100vw;
        overflow: hidden;
    }
    .max-w-7xl, .max-w-5xl {
        max-width: 100% !important;
    }
}

h1, h2, h3, h4, .syne { 
    font-family: 'Syne', sans-serif; 
}

/* Barra de progresso superior */
#scroll-progress {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 0%; 
    height: 3px;
    background: linear-gradient(90deg, var(--purple-brand), var(--purple-dark));
    z-index: 100; 
    transition: width 0.1s ease-out;
}

.full-page { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    padding: 3rem 1rem; 
    position: relative; 
    z-index: 1;
}

@media (min-width: 768px) {
    .full-page {
        padding: 5rem 1.5rem;
    }
}

.text-gradient { 
    background: linear-gradient(135deg, var(--purple-brand), var(--purple-dark)); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
}

#tsparticles { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    pointer-events: none; 
}

.btn-premium { 
    background: linear-gradient(135deg, var(--purple-brand), var(--purple-dark)); 
    box-shadow: 0 10px 30px -10px rgba(49, 46, 129, 0.4); 
}

.sticky-nav .btn-premium {
    box-shadow: 0 15px 40px -10px rgba(49, 46, 129, 0.6);
    animation: pulse-subtle 2s ease-in-out infinite;
}

.card-service { 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(12px); 
    border: 1px solid #f1f5f9; 
    transition: all 0.4s ease; 
}

html.lenis { 
    height: auto; 
}

.lenis-smooth { 
    scroll-behavior: auto !important; 
}

/* Animações customizadas */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-subtle {
    0%, 100% {
        box-shadow: 0 15px 40px -10px rgba(49, 46, 129, 0.6);
    }
    50% {
        box-shadow: 0 15px 50px -5px rgba(49, 46, 129, 0.8);
    }
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out;
}

/* Accordion */
.accordion-content {
    transition: all 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
}

.accordion-content.active {
    display: block;
    max-height: 500px;
}

.accordion-item button i {
    transform: rotate(0deg);
    transition: transform 0.3s ease-out;
}

.accordion-item button.active i {
    transform: rotate(180deg);
}

/* Contador Animado */
@keyframes countUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.counter {
    animation: countUp 2s ease-out;
}

/* Efeito de Hover Cards */
.card-service {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.card-service:hover {
    transform: translateY(-8px);
}

/* Responsividade melhorada */
@media (max-width: 640px) {
    .syne {
        letter-spacing: -0.01em;
    }
    
    h1 {
        word-spacing: 0.1em;
    }
}

/* Touch-friendly buttons */
@media (max-width: 768px) {
    a[href*="wa.me"],
    .btn-premium,
    button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Otimizações para scroll em mobile */
@media (max-width: 768px) {
    section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .full-page h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    .full-page p {
        font-size: 1rem !important;
    }
}

/* Ajustes para mobile geral */
@media (max-width: 768px) {
    .full-page h1 {
        font-size: 2.5rem !important;
        line-height: 1.3 !important;
    }
    .full-page p {
        font-size: 1.125rem !important;
    }
    h2 {
        font-size: 2.5rem !important; /* 40px */
    }
    .text-base {
        font-size: 1rem !important;
    }
}

/* Desabilitar vídeo de fundo no mobile para melhor performance */
@media (max-width: 768px) {
    .full-page video {
        display: none;
    }
}