/* ==========================================================================
   1. Variáveis
   ========================================================================== */
:root {
    --primary-blue: #2962FF;
    --primary-blue-hover: #0039cb;
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --color-text: #0f172a;    /* slate-900 */
    --color-bg: #f8fafc;      /* slate-50 */
    --color-border: #e2e8f0;
    --color-accent: #eab308;  /* yellow-500 */
}

/* ==========================================================================
   2. Base e Tipografia
   ========================================================================== */
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

/* ==========================================================================
   3. Utilitários
   ========================================================================== */
.text-primary-custom { color: var(--primary-blue); }

.bg-primary-custom { background-color: var(--primary-blue); }

/* --- Scroll Horizontal para Depoimentos --- */
.testimonial-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Estilizando a barra de rolagem do Carousel de avaliações */
.testimonial-scroll::-webkit-scrollbar { 
    height: 8px; 
}
.testimonial-scroll::-webkit-scrollbar-track { 
    background: #f8fafc; 
    border-radius: 10px; 
}
.testimonial-scroll::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 10px; 
}
.testimonial-scroll::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

.testimonial-card {
    width: 350px;
    flex-shrink: 0;
    scroll-snap-align: center;
    white-space: normal;
}

/* ==========================================================================
   4. Animações
   ========================================================================== */
@keyframes pulse-blue {
    0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(41, 98, 255, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(41, 98, 255, 0); }
    100% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(41, 98, 255, 0); }
}

/* ==========================================================================
   5. Componentes
   ========================================================================== */
/* --- Botões --- */
.pulse-button {
    background-color: var(--primary-blue);
    color: white;
    box-shadow: 0 0 0 0 rgba(41, 98, 255, 0.7);
    animation: pulse-blue 2s infinite;
    transition: all 0.3s ease;
    text-align: center;
}

.pulse-button:hover {
    background-color: var(--primary-blue-hover);
    transform: scale(1.05);
    color: #fff;
}

.pulse-button:active { 
    transform: scale(0.95); 
}

/* --- Cards de Preço --- */
.pricing-card {
    border: 3px solid var(--color-text);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.pricing-card:hover { 
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
}

.pricing-card.featured {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
    transform: scale(1.05);
    z-index: 10;
}

.tag-top {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* --- Depoimentos --- */
.testimonial-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 4px solid white;
}

/* --- Accordion (Bootstrap) --- */
.accordion-button:not(.collapsed) {
    background-color: var(--color-bg);
    color: var(--primary-blue);
    box-shadow: none;
}

.accordion-button:focus { 
    box-shadow: none; 
    border-color: rgba(0,0,0,0.125); 
}

/* ==========================================================================
   6. Layout e Estrutura
   ========================================================================== */
.hero-video-container {
    transform: rotate(1deg);
    transition: transform 0.5s ease;
    border: 4px solid white;
}

.hero-video-container:hover { 
    transform: rotate(0deg); 
}

.mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-top: 1px solid var(--color-border);
    max-width: 100%;
    overflow-x: hidden;
}

.rounded-circle{
    aspect-ratio: 1/1;
}

.text-info{
    color: rgb(147, 51, 234) !important;
}

.bg-info{
    background-color: rgb(243, 232, 255) !important;
}

.bg-secondary{
    background-color: rgb(226, 232, 240) !important;
}

.border-dashed{
    border-style: dashed !important;
}

/* ==========================================================================
   7. Media Queries (Mobile e Responsividade)
   ========================================================================== */
/* Telas médias (Tablets e menores que 991px) */
@media (max-width: 991px) {
    .pricing-card.featured { 
        transform: scale(1); 
    }
}

/* Telas pequenas (Dispositivos móveis até 768px) */
@media screen and (max-width: 768px) {
    
    /* 1. TRAVA A TELA E EVITA SCROLL HORIZONTAL (A MAIS IMPORTANTE) */
    html, body {
        overflow-x: hidden !important;
        width: 100vw;
        max-width: 100%;
    }

    /* 2. Remove as margens negativas do Bootstrap que "quebram" a tela */
    .row.g-5 {
        --bs-gutter-x: 1rem !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* 3. Tira a rotação do vídeo no mobile (as pontas vazam da tela e geram scroll) */
    .hero-video-container {
        transform: none !important;
    }

    /* 4. Força a quebra de linha de palavras muito longas */
    h1, h2, h3, h4, p, a, button, blockquote {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 5. Diminuindo os títulos (Headings) do Bootstrap */
    .display-4 { 
        font-size: 1.8rem !important; 
        font-weight: 800; 
    }
    .display-5 { 
        font-size: 1.75rem !important; 
    }
    .display-6 { 
        font-size: 1.6rem !important; 
        line-height: 1.3; 
    }
    
    /* 6. Diminuindo textos base e de destaque */
    .lead { 
        font-size: 1.05rem !important; 
    }
    .fs-3 { font-size: 1.5rem !important; }
    .fs-4 { font-size: 1.3rem !important; }
    .fs-5 { font-size: 1.1rem !important; }
    .fs-6 { font-size: 0.9rem !important; }

    /* 7. Ajuste de espaçamentos para evitar buracos brancos grandes no celular */
    .py-5 { 
        padding-top: 2.5rem !important; 
        padding-bottom: 2.5rem !important; 
    }
    .mb-5 { 
        margin-bottom: 2rem !important; 
    }
    .g-5 { 
        --bs-gutter-y: 2rem; 
    }
    
    /* 8. Evitar que o botão principal quebre no mobile */
    .pulse-button {
        font-size: 1.1rem !important;
        padding: 1rem !important;
        white-space: normal !important; /* Permite quebra de linha se a frase for longa */
        width: 100%;
    }

    /* 9. Ajuste da foto dos clientes nos depoimentos */
    .testimonial-avatar {
        width: 80px;
        height: 80px;
    }
    
    /* 10. O cartão de avaliação um pouco mais fino no celular para mostrar que há mais pro lado */
    .testimonial-card { 
        width: 300px; 
    }
}