/* ==========================================================================
   1. VARIÁVEIS GLOBAIS (Design System)
   ========================================================================== */
:root {
    --bg-light: #F9F9F9;        
    --bg-dark: #2C0150;         /* Roxo profundo premium */
    --bg-cinza: #E8E8E8;        
    --text-dark: #1A2530;       
    --text-light: #FFFFFF;      
    --text-muted: #64748B;      
    
    --brand-gold: #C5A880;     
    --brand-green: #10B981;    
    
    --box-allowed: #F0FDF4;     
    --box-forbidden: #FEF2F2;   

    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition-fast: all 0.2s ease-in-out;
}

/* ==========================================================================
   2. RESET E CONFIGURAÇÃO FLUIDA BASE
   ========================================================================== */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-main);
    font-size: 1.6rem;
    line-height: 1.6;
    background-color: var(--bg-light);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* O CONTAINER DA VERDADE (Substitui margens fixas por fluidez) */
.container {
    width: 100%;
    max-width: 114.0rem; /* Limite perfeito para visualização confortável em telas grandes */
    margin: 0 auto;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

/* Espaçamento Mobile Base */
.hero-section, .pains-section, .structure-section, .oab-section, .closing-section {
    padding-top: 6.0rem;
    padding-bottom: 6.0rem;
    width: 100%;
}

/* ==========================================================================
   3. ESTILOS DAS SEÇÕES (Layout Base Mobile-First)
   ========================================================================== */

/* --- HEADER --- */
.main-header {
    background-color: var(--text-light);
    width: 100%;
    padding: 2.0rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-container {
    display: flex;
    align-items: center;
}
.logo-text {
    font-size: 1.8rem;
    color: var(--bg-dark);
    font-weight: 700;
}
.logo-dot {
    color: var(--brand-gold);
}

/* --- HERO --- */
.hero-section {
    background-color: var(--text-light);
}
.hero-container {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}
.hero-title {
    font-size: 3.2rem;
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 2.4rem;
}
.hero-title-detail {
    color: var(--brand-gold);
}
.hero-description {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 3.2rem;
}
.hero-security {
    margin-top: 1.6rem;
}
.security-badge {
    font-size: 1.3rem;
    color: var(--text-muted);
}
.hero-image-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}
.hero-image {
    width: 100%;
    max-width: 40.0rem;
    height: auto;
    object-fit: cover;
}

/* --- CTA COMPONENT (Otimizado) --- */
.btn-cta-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background-color: var(--brand-gold);
    color: var(--text-light);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    padding: 1.8rem 2.4rem;
    border-radius: 8px;
    width: 100%;
    transition: var(--transition-fast);
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3);
}
.btn-cta-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 168, 128, 0.4);
}
.btn-cta-gold svg {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
}

/* --- DORES --- */
.pains-section {
    background-color: var(--bg-cinza);
}
.pains-header {
    margin-bottom: 4.0rem;
}
.pains-title {
    font-size: 2.8rem;
    color: var(--text-dark);
    margin-bottom: 1.6rem;
    line-height: 1.3;
}
.pains-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
}
.pains-list {
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
    list-style: none;
}
.pain-card {
    background-color: var(--text-light);
    padding: 2.4rem;
    border-radius: 12px;
    display: flex;
    gap: 1.6rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.pain-icon svg {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
}
.pain-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}
.pain-content p {
    font-size: 1.4rem;
    color: var(--text-muted);
}

/* --- ESTRUTURA --- */
.structure-section {
    background-color: var(--bg-dark);
}
.structure-header {
    margin-bottom: 4.0rem;
}
.structure-title {
    font-size: 2.8rem;
    color: var(--text-light);
    margin-bottom: 1.6rem;
    line-height: 1.3;
}
.structure-title .title-highlight {
    color: var(--brand-gold);
}
.structure-subtitle {
    font-size: 1.6rem;
    color: rgba(255,255,255,0.7);
}
.structure-list {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    list-style: none;
}
.step-card {
    display: flex;
    gap: 2.0rem;
}
.step-number {
    font-size: 6.4rem;
    font-weight: 800;
    color: var(--brand-gold);
    line-height: 0.9;
}
.step-content h3 {
    font-size: 1.8rem;
    color: var(--text-light);
    margin-bottom: 0.8rem;
}
.step-content p {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.6);
}

/* --- OAB --- */
.oab-header {
    margin-bottom: 4.0rem;
}
.oab-title {
    font-size: 2.8rem;
    margin-bottom: 1.6rem;
}
.oab-title .title-highlight {
    color: var(--brand-gold);
}
.oab-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
}
.oab-card {
    padding: 2.4rem;
    border-radius: 12px;
    margin-bottom: 2.4rem;
}
.oab-card h3 {
    font-size: 1.8rem;
    margin-bottom: 2.0rem;
}
.allowed-card { background-color: var(--box-allowed); color: #166534; }
.forbidden-card { background-color: var(--box-forbidden); color: #991B1B; margin-bottom: 0; }
.oab-list {
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
    list-style: none;
}
.oab-list li {
    position: relative;
    padding-left: 2.4rem;
    color: var(--text-dark);
}
.allowed-card .oab-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-green); font-weight: 700; font-size: 1.8rem; }
.forbidden-card .oab-list li::before { content: "✕"; position: absolute; left: 0; top: 0.2rem; color: #EF4444; font-weight: 700; font-size: 1.4rem; }
.oab-list strong { display: block; font-size: 1.4rem; margin-bottom: 0.2rem; }
.oab-list p { font-size: 1.3rem; color: var(--text-muted); }

/* --- CLOSING --- */
.closing-section {
    background-color: var(--bg-dark);
    text-align: center;
}
.closing-title {
    font-size: 2.8rem;
    color: var(--text-light);
    margin-bottom: 2.0rem;
}
.closing-title .title-highlight { color: var(--brand-gold); }
.closing-description { font-size: 1.6rem; color: rgba(255,255,255,0.8); margin-bottom: 4.0rem; }
.closing-security { margin-top: 1.6rem; color: rgba(255,255,255,0.5); font-size: 1.2rem; }

/* --- FOOTER --- */
.main-footer {
    background-color: var(--bg-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 4.0rem 0;
}
.footer-container {
    display: flex;
    flex-direction: column;
    gap: 2.0rem;
    text-align: center;
}
.footer-copy, .footer-links { font-size: 1.2rem; color: rgba(255,255,255,0.5); }
.footer-link { color: rgba(255,255,255,0.5); text-decoration: none; }
.footer-link:hover { color: var(--brand-gold); }
.footer-divider { margin: 0 0.8rem; }

/* --- WHATSAPP FIXO --- */
.btn-whatsapp-fixed {
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    background-color: #25D366;
    width: 6.0rem;
    height: 6.0rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 999;
    transition: var(--transition-fast);
}
.btn-whatsapp-fixed:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   4. DESKTOP ADAPTATION SYSTEM (Grid Fluido Premium)
   ========================================================================== */
@media screen and (min-width: 76.8rem) {
    /* Ampliação dos paddings para gerar respiro e elegância */
    .hero-section, .pains-section, .structure-section, .oab-section, .closing-section {
        padding-top: 10.0rem;
        padding-bottom: 10.0rem;
    }

    /* --- HERO REORGANIZADO (Lado a Lado) --- */
    .hero-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8.0rem;
    }
    .hero-content {
        flex: 1.2;
        text-align: left;
    }
    .hero-title {
        font-size: 4.4rem;
        line-height: 1.2;
    }
    .hero-description {
        font-size: 1.8rem;
    }
    .btn-cta-gold {
        max-width: 42.0rem;
    }
    .hero-image-wrapper {
        flex: 0.8;
        justify-content: flex-end;
    }
    .hero-image {
        max-width: 44.0rem;
    }

    /* --- DORES EM GRID DE 3 COLUNAS FLUIDAS --- */
    .pains-header {
        text-align: center;
        max-width: 75.0rem;
        margin: 0 auto 6.0rem auto;
    }
    .pains-title { font-size: 3.6rem; }
    .pains-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }
    .pain-card {
        flex-direction: column;
        height: 100%;
    }

    /* --- ESTRUTURA EM GRID DE 3 COLUNAS FLUIDAS --- */
    .structure-header {
        text-align: center;
        max-width: 75.0rem;
        margin: 0 auto 6.0rem auto;
    }
    .structure-title { font-size: 3.6rem; }
    .structure-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3.2rem;
    }

    /* --- OAB EM 2 COLUNAS ASSINCRONAS FLUIDAS --- */
    .oab-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem;
    }
    .oab-header {
        grid-column: span 2;
        text-align: center;
        max-width: 75.0rem;
        margin: 0 auto 4.0rem auto;
    }
    .oab-title { font-size: 3.6rem; }

    /* --- CLOSING CENTRALIZADO --- */
    .closing-container {
        max-width: 70.0rem;
        margin: 0 auto;
    }
    .closing-title { font-size: 3.6rem; }
    .closing-cta { max-width: 42.0rem; margin: 0 auto; }

    /* --- FOOTER LINEAR --- */
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}