/* public/css/landing.css - TEMA SAAS MINIMALISTA LIGHT + AUTH ORIGINAL */

:root {
    --bg-dark: #0f172a;      
    --bg-darker: #020617;    
    --bg-light: #f8fafc;     
    --primary-orange: #f97316; 
    --primary-orange-hover: #ea580c;
    --text-white: #ffffff;
    --text-gray-dark: #94a3b8;
    --text-dark: #0f172a;
    --text-gray-light: #475569;
    --border-dark: rgba(255, 255, 255, 0.1);
    --border-light: #e2e8f0;
}

/* ==========================================
   1. LANDING PAGE RESET (BLINDADA CONTRA CONFLITOS)
========================================== */
#landing-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--bg-light);
    z-index: 999999; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
    transition: opacity 0.4s ease;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}
#landing-overlay.hidden-landing { opacity: 0; pointer-events: none; }
#landing-overlay * { box-sizing: border-box; margin: 0; padding: 0; }
#landing-overlay h1, #landing-overlay h2, #landing-overlay h3, #landing-overlay p { margin: 0; }

/* ==========================================
   2. HEADER (LIGHT MODE - ALINHADO À ESQUERDA)
========================================== */
#landing-overlay .landing-header {
    display: flex; justify-content: flex-start; align-items: center; gap: 40px;
    padding: 20px 5%;
    background-color: transparent; 
    position: absolute; 
    width: 100%; top: 0; left: 0; z-index: 1000; height: 100px;
}

#landing-overlay .landing-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 900; color: #0f172a; 
}
#landing-overlay .landing-logo span { font-weight: 400; color: #64748b; font-size: 14px; }

#landing-overlay .landing-nav { display: none; }
@media(min-width: 768px) {
    #landing-overlay .landing-nav { display: flex; gap: 30px; }
    #landing-overlay .landing-nav a { color: #475569; text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s; }
    #landing-overlay .landing-nav a:hover { color: #0f172a; }
}

/* margin-left: auto empurra os botões para a extrema direita */
#landing-overlay .header-actions { display: flex; gap: 15px; align-items: center; margin-left: auto; }
#landing-overlay .btn-login { background: transparent; border: none; color: #0f172a; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
#landing-overlay .btn-login:hover { color: var(--primary-orange); }
#landing-overlay .btn-signup { background: transparent; color: #0f172a; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
#landing-overlay .btn-signup:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ==========================================
   3. HERO SECTION (LIGHT MINIMALIST + TOPOGRAFIA LOCAL)
========================================== */
#landing-overlay .hero-section {
    background-color: #fafaf9; 
    
    background-image: 
        /* Degradê branco para garantir legibilidade */
        radial-gradient(circle at 95% 0%, #ffffff42 0%, rgba(250, 250, 249, 0.356) 95%),
        /* Caminho local para o seu arquivo topo.svg */
        url('../assets/topo.png');
    
    /* Configuração para a textura repetir e cobrir o fundo */
    background-size: auto, 400px; /* Ajuste 400px para aumentar/diminuir o zoom das linhas */
    background-repeat: no-repeat, repeat;
    background-position: center, center;
        
    padding: 140px 5% 20px; 
    display: flex; flex-direction: column; gap: 60px;
    position: relative; overflow: hidden; min-height: 90vh;
    justify-content: flex-start;
}

@media(min-width: 1024px) {
    #landing-overlay .hero-section { 
        flex-direction: row; 
        
        /* ✅ Troque 'center' por 'flex-start' para travar o conteúdo no padding superior */
        align-items: flex-start; 
    }
    
    #landing-overlay .hero-content { 
        flex: 1.1; 
        padding-right: 40px; 
        text-align: left; 
        
        /* ✅ Adiciona uma margem dinâmica para não ficar "grudado" no topo em telas gigantes (ex: Full HD) */
        margin-top: 4vh; 
    }
    
    #landing-overlay .hero-visuals { 
        flex: 1.3; 
        display: flex; 
        justify-content: flex-end; 
        
        /* ✅ Também alinhamos a imagem ao topo para acompanhar o texto */
        align-items: flex-start; 
        margin-top: 4vh;
    }
}

#landing-overlay .hero-content h1 { 
    font-size: clamp(36px, 4vw, 52px); 
    font-weight: 900; 
    color: #0f172a; 
    line-height: 1.15; 
    margin-bottom: 25px; 
    letter-spacing: -1px;
}
#landing-overlay .hero-content h1 span { color: #94a3b8; }
#landing-overlay .hero-content p { 
    font-size: 17px; 
    color: #475569; 
    line-height: 1.6; 
    margin-bottom: 40px; 
    max-width: 550px; 
    font-weight: 500;
}

#landing-overlay .hero-cta-group { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 50px; justify-content: flex-start; }
#landing-overlay .btn-primary-dark { 
    background: #0f172a; color: white; border: none; padding: 16px 32px; border-radius: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; 
}
#landing-overlay .btn-primary-dark:hover { background: #1e293b; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
#landing-overlay .btn-secondary-light { 
    background: transparent; color: #0f172a; border: 1px solid #cbd5e1; padding: 16px 32px; border-radius: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: 0.2s; 
}
#landing-overlay .btn-secondary-light:hover { background: #ffffff; border-color: #94a3b8; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

#landing-overlay .hero-mini-features {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    border-top: 1px solid #e2e8f0; padding-top: 40px;
}
@media(max-width: 768px) { #landing-overlay .hero-mini-features { grid-template-columns: repeat(2, 1fr); } }
#landing-overlay .mini-feat { display: flex; flex-direction: column; gap: 8px; }
#landing-overlay .mini-feat i { font-size: 24px; color: #64748b; margin-bottom: 5px; }
#landing-overlay .mini-feat strong { font-size: 13px; color: #0f172a; font-weight: 800; }
#landing-overlay .mini-feat span { font-size: 11px; color: #64748b; line-height: 1.4; }

/* FILTRO MÁGICO NA IMAGEM DO PAINEL */
#landing-overlay .hero-visuals { position: relative; width: 100%; perspective: 1500px; padding-left: 20px; }
#landing-overlay .hero-light-mockup {
    width: 100%; height: auto; border-radius: 12px; border: 1px solid #e2e8f0;
    filter: grayscale(100%) brightness(1.05) contrast(0.9);
    transform: rotateY(-5deg) rotateX(2deg) translateZ(0);
    transform-origin: center right;
    box-shadow: -20px 40px 80px rgba(0, 0, 0, 0.08);
    transition: all 0.5s ease;
}
#landing-overlay .hero-light-mockup:hover {
    transform: rotateY(0deg) rotateX(0deg) translateZ(0) translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    filter: grayscale(60%) brightness(1) contrast(1); 
}


/* ==========================================
   4. FEATURES (LAYOUT: LISTA + VÍDEO) - ALINHADO À HERO
========================================== */
#landing-overlay .features-section.premium { 
    padding: 10px 5%; /* Espaçamento idêntico ao da Hero para respirar */
    background-image: 
        /* Degradê branco para garantir legibilidade */
        radial-gradient(circle at 95% 0%, #ffffff42 0%, rgba(250, 250, 249, 0.356) 95%),
        /* Caminho local para o seu arquivo topo.svg */
        url('../assets/topo.png');
    
    /* Configuração para a textura repetir e cobrir o fundo */
    background-size: auto, 400px; /* Ajuste 400px para aumentar/diminuir o zoom das linhas */
    background-repeat: no-repeat, repeat;
    background-position: center, center;
}

#landing-overlay .features-header-left {
    text-align: left;
    max-width: 650px;
    margin-bottom: 60px;
}

/* Tag sutil que combina com a tipografia elegante da Hero */
#landing-overlay .section-tag {
    display: inline-block;
    background: transparent; 
    color: #64748b; 
    border: 1px solid #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Título com o mesmo peso (900) e cor da Hero */
#landing-overlay .features-header-left h2 { 
    font-size: clamp(32px, 4vw, 46px); 
    font-weight: 900; 
    color: #0f172a; 
    margin-bottom: 20px; 
    letter-spacing: -1px;
    line-height: 1.15;
}

#landing-overlay .features-header-left p { 
    font-size: 17px; 
    color: #475569; 
    line-height: 1.6; 
    font-weight: 500;
}

#landing-overlay .features-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px; /* Alinhado com a largura útil da Hero */
    margin: 0 auto;
    align-items: center;
}

@media(min-width: 1024px) {
    #landing-overlay .features-split-grid {
        grid-template-columns: 1fr 1.6fr; 
        gap: 60px;
    }
}

#landing-overlay .steps-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cards transparentes que revelam o fundo, ganhando destaque no hover */
#landing-overlay .step-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px 20px;
    background: transparent; 
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: default;
}

#landing-overlay .step-compact-item:hover {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transform: translateX(5px);
}

/* Bolinhas numéricas com a cor primária escura da sua paleta oficial */
#landing-overlay .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #0f172a; 
    color: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 0;
}

#landing-overlay .step-content h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

#landing-overlay .step-content p {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}


/* ==========================================
   FRAME DO VÍDEO (MINIMALISTA COM EFEITO 3D)
========================================== */
#landing-overlay .video-showcase-wrapper {
    width: 100%;
    perspective: 1500px; /* Ativa a profundidade do 3D */
}

#landing-overlay .custom-video-frame {
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid #e2e8f0; /* Borda limpa, discreta e sofisticada */
    box-shadow: -20px 40px 80px rgba(0, 0, 0, 0.08); /* Mesma sombra da Hero */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    /* A inclinação original que mantém a consistência com a Hero */
    transform: rotateY(-4deg) rotateX(2deg) translateZ(0); 
    transition: all 0.5s ease;
}

#landing-overlay .custom-video-frame:hover {
    /* O salto animado que você gostou */
    transform: rotateY(0deg) rotateX(0deg) translateZ(0) translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

#landing-overlay .video-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Trava a proporção perfeita de 16:9 */
}

#landing-overlay .video-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #0f172a; /* Fundo escuro elegante antes do carregamento */
}





/* ==========================================
   5. SHOWCASE / GALLERY
========================================== */
#landing-overlay .showcase-section { 
    padding: 100px 5%; 
    background: var(--bg-darker); 
    border-top: 1px solid var(--border-dark); 
}

/* Largura ampliada para 1440px para acomodar 3 cards confortavelmente */
#landing-overlay .showcase-container { 
    display: flex; 
    flex-direction: column; 
    gap: 50px; 
    max-width: 1440px; 
    margin: 0 auto; 
}

@media(min-width: 1024px) { 
    #landing-overlay .showcase-container { flex-direction: row; align-items: center; } 
    /* Reduz a coluna de texto e expande a área da galeria */
    #landing-overlay .showcase-text { width: 28%; padding-right: 2%; } 
    #landing-overlay .showcase-gallery { width: 70%; overflow: hidden; } 
}

#landing-overlay .icon-wrapper-dark { width: 50px; height: 50px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.2); color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
#landing-overlay .showcase-text h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 900; color: white; margin-bottom: 20px; letter-spacing: -1px; }
#landing-overlay .showcase-text p { font-size: 16px; color: var(--text-gray-dark); line-height: 1.6; margin-bottom: 30px; }
#landing-overlay .carousel-controls { display: flex; gap: 10px; }
#landing-overlay .btn-nav { background: transparent; border: 1px solid var(--border-dark); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
#landing-overlay .btn-nav:hover { background: rgba(255,255,255,0.1); }
#landing-overlay .showcase-track { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 20px; }

/* Cards travados para não esmagarem, permitindo o scroll horizontal caso haja 4 ou mais */
#landing-overlay .showcase-card { 
    min-width: 300px; 
    flex: 0 0 auto;
    background: var(--bg-dark); 
    border: 1px solid var(--border-dark); 
    border-radius: 12px; 
    overflow: hidden; 
    transition: 0.3s ease;
}

/* Efeito hover sutil para a área dark */
#landing-overlay .showcase-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#landing-overlay .project-img { height: 200px; width: 100%; object-fit: cover; }
#landing-overlay .card-info { padding: 20px; }
#landing-overlay .card-info h4 { color: white; font-size: 16px; margin-bottom: 15px; }
#landing-overlay .link-view { color: var(--text-gray-dark); text-decoration: none; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
#landing-overlay .link-view:hover { color: var(--text-gray-light); }





/* ==========================================
   6. PRICING (SPLIT LAYOUT)
========================================== */
#landing-overlay .pricing-section { 
    padding: 100px 5%; 
    
        background-image: 
        /* Degradê branco para garantir legibilidade */
        radial-gradient(circle at 95% 0%, #ffffff42 0%, rgba(250, 250, 249, 0.356) 95%),
        /* Caminho local para o seu arquivo topo.svg */
        url('../assets/topo.png');
    
    /* Configuração para a textura repetir e cobrir o fundo */
    background-size: auto, 400px; /* Ajuste 400px para aumentar/diminuir o zoom das linhas */
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background: var(--bg-darker);

}

#landing-overlay .pricing-container-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

@media(min-width: 1024px) {
    #landing-overlay .pricing-container-split {
        /* Divide o espaço: 1 terço pro título, 2.2 terços pros cards */
        grid-template-columns: 1fr 2.2fr; 
    }
}

#landing-overlay .pricing-header.left-align { 
    text-align: left; 
    position: sticky;
    top: 120px; /* Faz o título grudar na tela enquanto os cards rolam (charme extra) */
}

#landing-overlay .pricing-header h2 { 
    font-size: clamp(28px, 3.5vw, 36px); 
    font-weight: 1200; 
    color: white;
    margin-bottom: 20px; 
    line-height: 1.2;
    letter-spacing: -1px;
}

/* O texto em laranja igual a imagem de referência */
#landing-overlay .pricing-header h2 span {
    color: var(--text-gray-dark);
}

#landing-overlay .pricing-header p {
    font-size: 16px;
    color: var(--text-gray-light);
    line-height: 1.6;
}

#landing-overlay .pricing-cards { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 20px; 
}

#landing-overlay .price-card { 
    background: #ffffff; 
    border: 1px solid var(--border-light); 
    border-radius: 12px; 
    padding: 35px 25px; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    transition: all 0.3s ease;
}

#landing-overlay .price-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
    transform: translateY(-4px);
}

#landing-overlay .price-card h3 { 
    font-size: 16px; 
    color: var(--text-dark); 
    font-weight: 800; 
    margin-bottom: 15px; 
}

#landing-overlay .price-card .price { 
    font-size: 38px; 
    font-weight: 900; 
    color: var(--text-dark); 
    margin-bottom: 25px; 
    line-height: 1;
}

#landing-overlay .price-card .price span {
    font-size: 14px;
    color: var(--text-gray-light);
    font-weight: 500;
}

#landing-overlay .price-features { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 30px 0; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

#landing-overlay .price-features li { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    font-size: 13px; 
    color: var(--text-gray-light); 
    line-height: 1.5;
}

#landing-overlay .price-features li i {
    font-size: 16px;
    margin-top: 2px;
}

#landing-overlay .price-features li.disabled {
    opacity: 0.6;
}

/* Botões do Pricing */
#landing-overlay .btn-price-outline {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

#landing-overlay .btn-price-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

#landing-overlay .btn-price-solid {
    width: 100%;
    padding: 14px;
    background: var(--bg-darker);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.2);
}

#landing-overlay .btn-price-solid:hover {
    background: var(--primary-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(249, 115, 22, 0.3);
}

/* ==========================================
   7. FOOTER CTA (DARK SPLIT LAYOUT)
========================================== */
#landing-overlay .footer-cta-section { 
    
    background-image: 
        /* Degradê branco para garantir legibilidade */
        radial-gradient(circle at 95% 0%, #ffffff42 0%, rgba(250, 250, 249, 0.356) 95%),
        /* Caminho local para o seu arquivo topo.svg */
        url('../assets/topo.png');
    
    /* Configuração para a textura repetir e cobrir o fundo */
    background-size: auto, 400px; /* Ajuste 400px para aumentar/diminuir o zoom das linhas */
    background-repeat: no-repeat, repeat;
    background-position: center, center;

    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    padding: 80px 5%; 
}

#landing-overlay .split-footer {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
}

@media(min-width: 1024px) {
    #landing-overlay .split-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #landing-overlay .footer-text-content {
        max-width: 60%;
    }
}

#landing-overlay .footer-text-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media(min-width: 768px) {
    #landing-overlay .footer-text-content {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }
}

#landing-overlay .footer-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

#landing-overlay .footer-text-inner h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--bg-darker);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

#landing-overlay .footer-text-inner p {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.6;
}

#landing-overlay .footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex-shrink: 0;
}

/* Botões do Footer */
#landing-overlay .btn-footer-solid {
    padding: 14px 28px;
    background: var(--primary-orange);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

#landing-overlay .btn-footer-solid:hover {
    background: var(--primary-orange-hover);
    transform: translateY(-2px);
}

#landing-overlay .btn-footer-outline {
    padding: 14px 28px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-white);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

#landing-overlay .btn-footer-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}





/* =========================================
   8. SEU CÓDIGO ORIGINAL INTACTO DA TELA DE AUTH
========================================= */

.landing-close-btn { position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 28px; color: #78716c; cursor: pointer; transition: 0.2s; z-index: 10; }
.landing-close-btn:hover { color: #ea580c; }

.auth-step { transition: opacity 0.3s ease; width: 100%; display: flex; flex-direction: column; align-items: center; }
.auth-step.hidden { display: none !important; }

.auth-inner-container { width: 100%; max-width: 600px; margin: 0 auto; }
.auth-header { text-align: center; margin-bottom: 30px; }
.auth-icon-main { width: 55px; height: 55px; background: #fff7ed; color: #ea580c; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 15px auto; }
.auth-header h2 { font-size: 24px; font-weight: 900; color: #1c1917; margin: 0 0 8px 0; }
.auth-header p { font-size: 13px; color: #78716c; margin: 0; }

.auth-cards-flex { display: flex; gap: 20px; width: 100%; }
.auth-card-option { flex: 1; background: #fafaf9; border: 1px solid #e7e5e4; border-radius: 6px; padding: 30px 20px; text-align: center; position: relative; }
.auth-card-option h4 { font-size: 16px; font-weight: 800; color: #1c1917; margin: 0 0 8px 0; }
.auth-card-option p { font-size: 12px; color: #78716c; margin: 0 0 20px 0; }
.auth-icon-small { font-size: 28px; margin-bottom: 15px; }

.highlight-card { border-color: #ea580c; background: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.auth-badge-rec { position: absolute; top: -1px; right: -1px; background: #1c1917; color: #f59e0b; font-size: 10px; font-weight: 800; padding: 6px 12px; border-radius: 0 4px 0 4px; }

.auth-btn-primary { width: 100%; padding: 14px; border-radius: 4px; font-size: 13px; background: #1c1917; color: #ffffff; border: none; font-weight: 900; cursor: pointer; transition: all 0.2s ease;}
.auth-btn-primary:hover { background: #ea580c; transform: translateY(-2px); }

.auth-btn-secondary { width: 100%; background: #e7e5e4; color: #44403c; border: none; padding: 14px; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.auth-btn-secondary:hover { background: #d6d3d1; }

.auth-form-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 15px; }
.auth-input-group { position: relative; width: 100%; }
.auth-input-icon { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; color: #78716c; font-size: 18px; pointer-events: none; }
.auth-form-input { width: 100%; padding: 14px 14px 14px 42px; border: 1px solid #d6d3d1; border-radius: 4px; background: #ffffff; color: #1c1917; font-size: 13px; outline: none; appearance: none; transition: border 0.2s; }
.auth-form-input:focus { border-color: #ea580c; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.1); }
.auth-form-input:focus + .auth-input-icon, .auth-input-group:focus-within .auth-input-icon { color: #ea580c; }

.auth-link-right { text-align: right; width: 100%; margin-bottom: 5px; }
.auth-link-right a { font-size: 12px; color: #ea580c; font-weight: bold; text-decoration: none; }
.auth-link-right a:hover { text-decoration: underline; }

.auth-footer-text { margin-top: 25px; font-size: 13px; color: #78716c; text-align: center; }
.auth-footer-text a { color: #ea580c; font-weight: bold; text-decoration: none; }

.auth-upsell-box { width: 100%; max-width: 380px; background: #1c1917; border-radius: 6px; padding: 20px; display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.upsell-icon { width: 40px; height: 40px; background: #ea580c; color: #ffffff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.upsell-text { flex: 1; text-align: left; }
.upsell-text strong { display: block; font-size: 13px; color: #f59e0b; margin-bottom: 4px; }
.upsell-text span { font-size: 11px; color: #d6d3d1; line-height: 1.4; }
.auth-btn-accent { background: #ea580c; color: white; border: none; padding: 10px 15px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.auth-btn-accent:hover { background: #c2410c; }

@media (max-width: 768px) {
    .auth-cards-flex { flex-direction: column; }
    .auth-upsell-box { flex-direction: column; text-align: center; }
    .upsell-text { text-align: center; }
}





/* ==========================================
   9. POLIMENTO VISUAL: FOOTER CONTATOS
========================================== */
#landing-overlay .footer-contact-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#landing-overlay .footer-contact-box .copyright {
    font-size: 13px;
    color: #61676f;
    margin-bottom: 5px;
}

#landing-overlay .contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #94a3b8;
    transition: color 0.2s ease;
}

#landing-overlay .contact-line i {
    color: var(--primary-orange);
    font-size: 20px;
}

#landing-overlay .contact-line:hover {
    color: #ffffff;
}




/* ==========================================
   10. POLIMENTO VISUAL: MODAIS DE AUTENTICAÇÃO (REFATORADO COM %)
========================================== */

/* Fundo com efeito de vidro fosco (glassmorphism) combinando com a Landing */
.modal-overlay {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px);
}

/* Modal Redimensionado e Responsivo */
#auth-modal-box2 {
    width: 90%;
    max-width: 520px;
    padding: 4% 1%;
    border-radius: 4%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

/* Inputs levemente acinzentados ganhando destaque no foco */
.auth-form-input {
    background: #f8fafc !important;
    transition: all 0.2s ease;
    width: 100%; 
    padding: 4% 10% 4% 12%; 
    border: 1px solid #d6d3d1; 
    border-radius: 2%; 
    font-size: 90%; 
    color: #1c1917; 
}
.auth-form-input:focus {
    background: #ffffff !important;
    border-color: #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
    outline: none;
}

/* Degrade premium na caixa de upsell para destacar o plano pago (Usado na aba de Registro) */
.auth-upsell-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   VISUAL ESPECÍFICO DAS TELAS DE AUTENTICAÇÃO
========================================== */

/* Cabeçalho */
.auth-step .auth-header { text-align: center; margin-bottom: 6%; }
.auth-logo-box { display: flex; align-items: center; justify-content: center; gap: 3%; margin-bottom: 6%; }
.auth-logo-box img { width: 10%; height: auto; }
.auth-logo-box h2 { font-size: 160%; font-weight: 900; color: #0f172a; font-family: serif; margin: 0; }
.auth-step .auth-header h3 { font-size: 130%; font-weight: 800; color: #1c1917; margin-bottom: 2%; font-family: serif; }
.auth-step .auth-header p { font-size: 85%; color: #64748b; line-height: 1.5; padding: 0 5%; margin: 0; }

/* Rótulos e Ícones */
.auth-step .auth-form-wrap { width: 100%; display: flex; flex-direction: column; gap: 5%; }
.auth-field { width: 100%; text-align: left; margin-bottom: 2%; }
.auth-field label { display: block; font-size: 80%; font-weight: 800; color: #1c1917; margin-bottom: 2%; }
.auth-step .auth-input-group { position: relative; width: 100%; }
.auth-step .auth-input-icon { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); font-size: 120%; color: #94a3b8; }
.pwd-icon-right { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-size: 120%; color: #94a3b8; cursor: pointer; }

/* Linha Opções (Lembrar-me / Esqueci a senha) */
.auth-options-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 1% 0 4% 0; }
.remember-me { font-size: 80%; color: #475569; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.auth-step .auth-link-right { text-align: right; width: auto; margin: 0; }
.auth-step .auth-link-right a { font-size: 100%; color: #1e3a8a; font-weight: 700; text-decoration: none; }

/* Botões Principais */
.auth-step .auth-btn-primary { width: 100%; padding: 4%; background: #0f172a !important; color: #ffffff; border: none; border-radius: 2%; font-size: 90%; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 2%; cursor: pointer; transition: 0.2s; }
.auth-step .auth-btn-primary:hover { background: #1e293b !important; }

/* CAIXAS DE AVISO (E-mail de Confirmação) */
.auth-info-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 5px;
}
.auth-info-alert i {
    color: #16a34a;
    font-size: 20px;
    margin-top: 2px;
}
.auth-info-alert span {
    font-size: 70%;
    color: #166534;
    line-height: 1.4;
}

/* Divisor "ou" */
.auth-divider { display: flex; align-items: center; width: 100%; margin: 2% 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid #e2e8f0; }
.auth-divider span { font-size: 80%; color: #94a3b8; padding: 0 4%; }

/* Botão Convidado (Substitui Google) */
.auth-btn-guest { width: 100%; padding: 3% 4%; background: #ffffff; border: 1px solid #d6d3d1; border-radius: 2%; color: #475569; font-size: 85%; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 3%; cursor: pointer; transition: 0.2s; }
.auth-btn-guest img { width: 5%; height: auto; }
.auth-btn-guest:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }

/* Footer Criar Conta / Voltar */
.auth-step .auth-footer-text { margin-top: 6%; font-size: 80%; color: #64748b; text-align: center; }
.auth-step .auth-footer-text a { color: #1e3a8a; font-weight: 700; text-decoration: none; }

/* ==========================================
   11. SEÇÃO: PÚBLICO-ALVO (ALTO NÍVEL - SAAS)
========================================== */
#landing-overlay .target-audience-section {
    padding: 100px 5%;
    background-color: #fafaf9;
    /* Trazendo de volta a textura topográfica maravilhosa do projeto */
    background-image: 
        radial-gradient(circle at 95% 0%, #ffffff42 0%, rgba(250, 250, 249, 0.356) 95%),
        url('../assets/topo.png');
    background-size: auto, 400px;
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    border-top: 1px solid #e2e8f0;
}

#landing-overlay .target-container {
    max-width: 1780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#landing-overlay .features-header-left p strong {
    color: #0f172a;
    font-weight: 800;
}

#landing-overlay .target-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

#landing-overlay .target-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0; /* Zerado para a imagem colar nas bordas do card */
    border-radius: 16px;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Corta a imagem nas quinas redondas */
}

#landing-overlay .target-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

/* Nova classe inserida para a foto no topo do card */
#landing-overlay .target-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 1px solid #e2e8f0;
}

#landing-overlay .target-icon {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #ffedd5;
    color: #ea580c;
    border-radius: 50%; /* Tornou-se redondo igual ao print com imagens */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    
    /* Magia para sobrepor a imagem, mantendo o alinhamento de 30px do padding antigo */
    margin-top: -25px; 
    margin-left: 30px; 
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

#landing-overlay .target-card:hover .target-icon {
    background: #ea580c;
    color: #ffffff;
    border-color: #ea580c;
    transform: scale(1.05);
}

#landing-overlay .target-card h3 {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    padding: 0 30px; /* Padding transferido para dentro do texto */
}

#landing-overlay .target-card p {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    padding: 0 30px; /* Padding transferido para dentro do texto */
    margin-bottom: 30px;
    flex-grow: 1; /* Preenche a diferença se um texto for maior que o outro */
}

/* Nova classe inserida para o botão Saiba mais no rodapé */
#landing-overlay .target-saiba-mais {
    font-size: 14px;
    font-weight: 700;
    color: #ea580c;
    text-decoration: none;
    padding: 0 30px 40px 30px; /* Recuperando os 40px do padding bottom original */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

#landing-overlay .target-saiba-mais:hover {
    color: #c2410c;
}




/* ==========================================
   12. PÁGINAS DE TUTORIAIS / SAIBA MAIS (Z-PATTERN CORRIGIDO)
========================================== */



/* ==========================================================
   GEODASH - ENTREGAS ONLINE
   CSS ISOLADO (SEM CONFLITOS)
========================================================== */

.online-delivery-page,
.online-delivery-page * {
    box-sizing: border-box;
}

.online-delivery-page {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;

    background-color: #fafaf9;

    background-image:
        radial-gradient(circle at top right,
            rgba(255,255,255,.95) 0%,
            rgba(250,250,249,0) 70%),
        url('../assets/topo.png');

    background-size: auto, 420px;
    background-repeat: no-repeat, repeat;
    background-position: top right, center;

    padding-bottom: 120px;
}

/* ==========================================================
   HEADER
========================================================== */

.od-header {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 35px 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.od-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #07132d;
    font-size: 28px;
    font-weight: 800;
}

.od-logo img {
    height: 40px;
    width: auto;
}

.od-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;

    border-radius: 12px;

    border: 1px solid #dbe3ee;

    background: white;

    color: #07132d;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all .2s ease;
}

.od-back-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(15,23,42,.06);
}

/* ==========================================================
   HERO
========================================================== */

.od-hero {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 40px 25px 90px;

    text-align: center;
}

.od-badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 18px;

    border-radius: 999px;

    background: rgba(255,255,255,.85);

    border: 1px solid #e2e8f0;

    color: #64748b;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 25px;
}

.od-hero h1 {
    margin: 0 0 20px;

    font-size: clamp(48px, 6vw, 72px);

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 900;

    color: #07132d;
}

.od-hero p {
    max-width: 760px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.8;

    color: #64748b;
}

/* ==========================================================
   TIMELINE
========================================================== */

.od-timeline {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 80px;

    padding: 0 40px;
}

/* ==========================================================
   CARD
========================================================== */

.od-card {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1.1fr;

    background: white;

    border-radius: 28px;

    border: 1px solid #edf2f7;

    overflow: auto;

    box-shadow:
        0 20px 40px rgba(15,23,42,.04),
        0 4px 12px rgba(15,23,42,.03);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.od-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 60px rgba(15,23,42,.08),
        0 10px 25px rgba(15,23,42,.05);
}

.od-reverse {
    grid-template-columns: 1.1fr 1fr;
}

.od-reverse .od-card-content {
    order: 2;
}

.od-reverse .od-card-image {
    order: 1;
}

/* ==========================================================
   CONTEÚDO
========================================================== */

.od-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px;
}

.od-step {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 18px;

    padding: 6px 12px;

    border-radius: 999px;

    background: #fff7ed;

    border: 1px solid #fed7aa;

    color: #ea580c;

    font-size: 12px;
    font-weight: 700;
}

.od-card-content h2 {
    margin: 0 0 18px;

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -.5px;

    color: #07132d;

    font-weight: 900;
}

.od-card-content p {
    margin: 0;

    font-size: 16px;

    line-height: 1.9;

    color: #64748b;
}

/* ==========================================================
   IMAGEM
========================================================== */

.od-card-image {
    position: relative;

    padding: 25px;
}

.od-card-image img {
    width: 100%;
    height: 420px;

    display: block;

    object-fit: cover;

    border-radius: 22px;

    box-shadow:
        0 20px 40px rgba(15,23,42,.08);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.od-card:hover .od-card-image img {
    transform: scale(1.03);
}

/* ==========================================================
   ÍCONE FLUTUANTE
========================================================== */

.od-card-icon {
    position: absolute;

    top: 50%;

    left: -42px;

    transform: translateY(-50%);

    width: 84px;
    height: 84px;

    border-radius: 50%;

    background: white;

    border: 1px solid #f1f5f9;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ea580c;

    font-size: 34px;

    z-index: 100;

    box-shadow:
        0 15px 35px rgba(15,23,42,.08);
}

.od-reverse .od-card-icon {
    left: auto;
    right: -42px;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .od-card,
    .od-reverse {
        grid-template-columns: 1fr;
    }

    .od-card-content {
        order: 2 !important;
        padding: 40px;
    }

    .od-card-image {
        order: 1 !important;
    }

    .od-card-image img {
        height: 340px;
    }

    .od-card-icon {
        display: none;
    }

    .od-timeline {
        padding: 0 25px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .od-header {
        padding: 25px 20px;
    }

    .od-logo {
        font-size: 22px;
    }

    .od-logo img {
        height: 34px;
    }

    .od-back-btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .od-hero {
        padding: 30px 20px 60px;
    }

    .od-hero h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .od-hero p {
        font-size: 16px;
    }

    .od-timeline {
        gap: 40px;
        padding: 0 15px;
    }

    .od-card {
        border-radius: 20px;
    }

    .od-card-content {
        padding: 30px;
    }

    .od-card-content h2 {
        font-size: 26px;
    }

    .od-card-content p {
        font-size: 15px;
    }

    .od-card-image {
        padding: 15px;
    }

    .od-card-image img {
        height: 240px;
        border-radius: 16px;
    }
}


/* ==========================================
   SISTEMA DE COOKIES E CONFORMIDADE LGPD
   ========================================== */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    z-index: 9999999;
    transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
}

.cookie-banner.hidden {
    bottom: -150px;
    opacity: 0;
    pointer-events: none;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cookie-icon {
    font-size: 32px;
    color: #ea580c;
    background: #fff7ed;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-text h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
    color: #0f172a;
    font-weight: 800;
}

.cookie-text p {
    margin: 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

.cookie-text a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: bold;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-cookie-outline {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}

.btn-cookie-outline:hover {
    background: #f8fafc;
    color: #0f172a;
}

.btn-cookie-solid {
    background: #0f172a;
    border: none;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}

.btn-cookie-solid:hover {
    background: #1e293b;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.cookie-opt-text strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 4px;
    font-weight: 700;
}

.cookie-opt-text span {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    display: block;
}

.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: #10b981;
}

input:disabled + .slider {
    opacity: 0.5;
    background-color: #94a3b8;
}

input:checked + .slider:before {
    transform: translateX(16px);
}

/* Responsividade */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        width: 95%;
    }
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .cookie-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}













/* ==========================================
   7. FAQ (SESSÃO DE PREÇOS)
========================================== */
#landing-overlay .faq-container {
    margin-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 40px;
}

#landing-overlay .faq-main-title {
    font-size: 24px;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 800;
}

#landing-overlay .faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#landing-overlay .faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

#landing-overlay .faq-question:hover {
    color: #cbd5e1;
}

#landing-overlay .faq-question i {
    font-size: 18px;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

/* Estado ativo: Gira a setinha para cima */
#landing-overlay .faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #f8fafc;
}

/* Animação suave de abertura do FAQ (Modern Grid Method) */
#landing-overlay .faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

#landing-overlay .faq-item.active .faq-answer-wrapper {
    grid-template-rows: 1fr;
}

#landing-overlay .faq-answer {
    overflow: hidden;
}

#landing-overlay .faq-answer p {
    padding-bottom: 22px;
    color: var(--text-white);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.guest-access-disabled {
    display: none !important;
}