/*
Theme Name: Astra Child - Dentistas Goiânia
Theme URI: https://dentistasgoiania.com.br
Template: astra
Author: Alan Ávila
Author URI: https://dentistasgoiania.com.br
Description: Tema filho de altíssima conversão e performance (INP/LCP) focado em SEO Programático e AI Overviews.
Version: 1.0.0
Text Domain: astra-child-dentistas
*/

/* ==========================================================================
           1. VARIÁVEIS & RESET (ALTO CONTRASTE - COLOR BLOCKING)
           ========================================================================== */
        :root {
            --primary-color: #071A2B;       
            --primary-light: #12304D;       
            --secondary-color: #D4AF37;     
            --secondary-hover: #B5952F;
            --whatsapp-color: #25D366;
            --whatsapp-hover: #1EBE57;
            --bg-white: #FFFFFF;
            --bg-light: #F1F5F9;            
            --bg-dark: #071A2B;             
            --text-dark: #1E293B;           
            --text-light: #475569;          
            --text-white: #F8FAFC;          
            --font-heading: 'Montserrat', sans-serif;
            --font-body: 'Open Sans', sans-serif;
            --header-height: 75px; /* Reduzido para ganhar espaço no mobile */
            --border-radius: 12px;          
            --shadow-card: 0 20px 40px -10px rgba(7, 26, 43, 0.15); 
        }

        html { scroll-behavior: smooth; overflow-x: clip; }
        body {
            font-family: var(--font-body); color: var(--text-dark);
            line-height: 1.8; background-color: var(--bg-white);
            margin: 0; padding-top: var(--header-height); font-size: 18px;
            overflow-x: clip;
        }
        
        body.menu-open { overflow: hidden; }
        body.menu-open .mobile-toggle { display: none; } /* Esconde o hambúrguer quando o menu abre */

        h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; margin-bottom: 1.2rem; line-height: 1.2; letter-spacing: -0.5px; }
        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
        ul { list-style: none; padding: 0; margin: 0; }
        img { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius); }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section-padding { padding: 100px 0; }
        .text-center { text-align: center; }

        .bg-white { background-color: var(--bg-white); }
        .bg-light { background-color: var(--bg-light); border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
        .bg-dark { background-color: var(--bg-dark); color: var(--text-white); }
        .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--text-white); }

        /* ==========================================================================
           2. BOTÕES (CTAs DE ALTO IMPACTO - SOFT UI 2026)
           ========================================================================== */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 32px; border-radius: 50px; font-weight: 800; text-transform: uppercase;
            font-family: var(--font-heading); cursor: pointer; text-align: center;
            font-size: 1.05rem; border: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.5px; position: relative; overflow: hidden; white-space: nowrap; 
        }
        
        /* Aumenta a proporção dos ícones nos botões */
        .btn i { font-size: 1.4em; margin-right: 2px; }

        /* Sombras elegantes (sem glow neon) */
        .btn-whatsapp { background-color: var(--whatsapp-color); color: #FFF; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
        .btn-whatsapp:hover { background-color: var(--whatsapp-hover); transform: translateY(-3px); box-shadow: 0 12px 20px rgba(0,0,0,0.15); color: #FFF; }
        
        .btn-celeste { background-color: #0EA5E9; color: #FFF; box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
        .btn-celeste:hover { background-color: #0284C7; transform: translateY(-3px); box-shadow: 0 12px 20px rgba(0,0,0,0.15); color: #FFF; }

        .btn-mega { width: 100%; padding: 18px 20px; font-size: 1.1rem; white-space: normal; line-height: 1.4; box-sizing: border-box; }
        @media (min-width: 768px) { .btn-mega { width: auto; padding: 22px 45px; font-size: 1.3rem; white-space: nowrap; } }

        /* ==========================================================================
           3. HEADER FIXO & MENU MOBILE FULL-SCREEN
           ========================================================================== */
        header { 
            background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); position: fixed; 
            top: 0; left: 0; width: 100%; z-index: 9999; height: var(--header-height);
        }
        .header-wrapper { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px; max-width: 1200px; margin: 0 auto; }
        .logo { font-size: 1.2rem; font-weight: 900; color: var(--primary-color); font-family: var(--font-heading); display: flex; align-items: center; gap: 10px; text-transform: uppercase; position: relative; z-index: 10001; }
        .logo i { color: var(--secondary-color); font-size: 2.2rem; }
        
        .mobile-toggle { font-size: 2rem; color: var(--primary-color); cursor: pointer; position: relative; z-index: 10001; }
        .close-menu { display: none; }

        @media (max-width: 991px) {
            .nav-menu {
                display: none; 
                flex-direction: column; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
                background-color: rgba(7, 26, 43, 0.98); /* Fundo Azul Escuro Premium */
                backdrop-filter: blur(15px); z-index: 10000; justify-content: center; align-items: center;
                gap: 35px; opacity: 0; transition: opacity 0.3s ease;
            }
            .nav-menu.active { display: flex; opacity: 1; }
            .nav-menu a { font-size: 1.5rem; font-weight: 800; color: var(--text-white); text-transform: uppercase; letter-spacing: 1px; }
            .nav-menu a:hover { color: var(--secondary-color); }
            .close-menu { display: block; position: absolute; top: 25px; right: 25px; font-size: 2.5rem; color: var(--text-white); cursor: pointer; background: none; border: none; padding: 10px; }
            .btn-header-wa { margin-top: 20px; }
        }
        
        @media (min-width: 992px) {
            .mobile-toggle { display: none; }
            .logo { font-size: 1.8rem; }
            .nav-menu { display: flex; gap: 35px; align-items: center; }
            .nav-menu a { font-weight: 700; color: var(--primary-color); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
            .nav-menu a:hover { color: var(--secondary-color); }
            .btn-header-wa { background-color: var(--whatsapp-color); color: white !important; padding: 12px 28px; border-radius: 50px; font-weight: 800 !important; display: flex; align-items: center; gap: 8px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
            .btn-header-wa:hover { background-color: var(--whatsapp-hover); transform: translateY(-2px); }
        }

        /* ==========================================================================
           4. HERO SECTION
           ========================================================================== */
        .hero { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); padding: 0px 0 60px; color: var(--text-white); position: relative; overflow: hidden; }
        .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: 1; }
        .hero-container { display: flex; flex-direction: column; gap: 40px; align-items: center; position: relative; z-index: 2; }
        .hero-content { text-align: center; }
        .hero h1 { font-size: 2rem; color: var(--text-white); margin-bottom: 20px; }
        .hero h1 span { color: var(--secondary-color); }
        .hero p { font-size: 1.15rem; color: #CBD5E1; margin-bottom: 35px; max-width: 800px; margin-left: auto; margin-right: auto; }
        .hero-image img { width: 100%; max-width: 650px; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 4px solid rgba(255,255,255,0.1); }
        .hero-buttons { display: flex; flex-direction: column; gap: 15px; align-items: center; }
        .hero-image {padding-top: 40px;}

        @media (min-width: 992px) {
            .hero { padding: 0px 0 80px; } 
            .hero-container { flex-direction: row; text-align: left; align-items: center; }
            .hero-content { flex: 1; text-align: left; padding-right: 40px; }
            .hero h1 { font-size: 2.5rem!important; line-height: 1.1; }
            .hero p { font-size: 1.25rem; margin-left: 0; line-height: 2rem;}
            .hero-image { flex: 1; }
            .hero-buttons { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } 
        }

        /* ==========================================================================
           5. TRUST BANNER (CONVÊNIOS)
           ========================================================================== */
        .trust-banner { background-color: var(--bg-light); padding: 50px 0; text-align: center; border-bottom: 1px solid #E2E8F0; }
        .trust-banner h4 { color: var(--text-light); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; font-weight: 700; }
        .convenios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-items: center; }
        @media (min-width: 768px) { .convenios-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
        .convenio-logo { background: var(--bg-white); padding: 10px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #E2E8F0; transition: 0.3s; display: flex; align-items: center; justify-content: center; height: 80px; }
        .convenio-logo:hover { border-color: var(--whatsapp-color); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2); }
        .convenio-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }

        /* ==========================================================================
           6. TRIAGEM INTELIGENTE
           ========================================================================== */
        .triagem-layout { display: block; }
        .triagem-header { position: sticky; top: calc(var(--header-height)); z-index: 10; background-color: var(--primary-color); color: var(--text-white); padding: 20px; margin-bottom: 30px; text-align: center; box-shadow: 0 10px 20px rgba(7, 26, 43, 0.2); margin-left: -20px; margin-right: -20px; border-radius: 0; }
        .triagem-header h2 { color: var(--text-white); font-size: 1.4rem; margin-bottom: 5px; line-height: 1.2; margin-top: 0; }
        .triagem-header p { color: #CBD5E1; font-size: 0.95rem; margin: 0; line-height: 1.3; }
        .triagem-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }
        
        @media (min-width: 768px) { .triagem-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 992px) { 
            .triagem-layout { display: grid; grid-template-columns: 35% 65%; gap: 50px; align-items: start; }
            .triagem-header { top: calc(var(--header-height) + 40px); padding: 40px; margin-bottom: 0; text-align: left; margin-left: 0; margin-right: 0; }
            .triagem-header h2 { font-size: 2.2rem; margin-bottom: 15px; }
            .triagem-header p { font-size: 1.2rem; }
            .triagem-grid { margin-top: 0; }
        }
        
        .triagem-card { background: var(--bg-white); border-radius: 12px; padding: 40px 25px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: 0.3s; cursor: pointer; border-top: 6px solid var(--secondary-color); box-shadow: var(--shadow-card); }
        .triagem-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(7, 26, 43, 0.25); }
        .triagem-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; transition: 0.3s; }
        .triagem-card:hover .triagem-icon { color: var(--secondary-color); transform: scale(1.1); }
        .triagem-card span { font-weight: 800; color: var(--primary-color); font-size: 1.3rem; text-transform: uppercase; }
        .triagem-card p { color: var(--text-light); font-size: 1rem; margin-top: 10px; line-height: 1.5; }

        /* ==========================================================================
           7. TRATAMENTOS PREMIUM
           ========================================================================== */
        .services-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 60px; }
        @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        .service-card { background: var(--bg-white); padding: 50px 40px; border-radius: var(--border-radius); border: 1px solid #E2E8F0; transition: all 0.3s ease; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.02); }
        .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--secondary-color); }
        .service-icon { width: 80px; height: 80px; background-color: var(--primary-light); color: var(--secondary-color); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 2.5rem; transform: rotate(-5deg); }
        .service-card h3 { font-size: 1.6rem; margin-bottom: 15px; color: var(--primary-color); }
        .service-card p { color: var(--text-light); font-size: 1.1rem; margin-bottom: 20px; }
        .service-card ul { margin-bottom: 20px; }
        .service-card li { position: relative; padding-left: 25px; margin-bottom: 10px; color: var(--text-dark); font-weight: 600; }
        .service-card li::before { content: '\f00c'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--whatsapp-color); position: absolute; left: 0; }

        /* ==========================================================================
           8. GUIA DE SAÚDE BUCAL
           ========================================================================== */
        .seo-text-block { max-width: 900px; margin: 0 auto; }
        .seo-text-block h2 { font-size: 2.2rem; text-align: center; margin-bottom: 30px; }
        .seo-text-block p { font-size: 1.2rem; margin-bottom: 20px; color: var(--text-light); }
        .seo-text-block strong { color: var(--primary-color); }

        /* ==========================================================================
           9. A EXPERIÊNCIA
           ========================================================================== */
        .experience-container { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: start; position: relative; }
        @media (min-width: 992px) { .experience-container { grid-template-columns: 1fr 1fr; } .experience-image { position: sticky; top: 120px; z-index: 10; } }
        .step-item { display: flex; gap: 25px; margin-bottom: 40px; background: rgba(255,255,255,0.03); padding: 30px; border-radius: 16px; border-left: 4px solid var(--secondary-color); }
        .step-number { font-size: 3rem; font-weight: 900; color: var(--secondary-color); font-family: var(--font-heading); line-height: 1; opacity: 0.8; }
        .step-content h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--secondary-color); }
        .step-content p { color: #CBD5E1; margin: 0; font-size: 1.1rem; }

        /* ==========================================================================
           10. MEGA CTA
           ========================================================================== */
        .mega-cta { background: linear-gradient(rgba(7, 26, 43, 0.85), rgba(7, 26, 43, 0.95)), url('https://images.unsplash.com/photo-1606811841689-23dfddce3e95?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover fixed; color: white; text-align: center; padding: 120px 20px; }
        .mega-cta h2 { color: white; font-size: 3rem; margin-bottom: 25px; }
        .mega-cta p { font-size: 1.3rem; color: #E2E8F0; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; }

        /* ==========================================================================
           11. TABELA COMPARATIVA
           ========================================================================== */
        .table-wrapper { background: var(--bg-white); border-radius: 12px; box-shadow: var(--shadow-card); border: 1px solid #E2E8F0; margin-top: 40px; overflow: hidden; }
        table { width: 100%; border-collapse: collapse; }
        th { background-color: var(--primary-color); color: white; padding: 20px; text-align: left; font-family: var(--font-heading); font-size: 1.2rem; }
        td { padding: 20px; border-bottom: 1px solid #E2E8F0; color: var(--text-dark); font-size: 1.1rem; }
        tr:nth-child(even) { background-color: #F8FAFC; }
        tr:hover { background-color: #F1F5F9; }
        .check { color: var(--whatsapp-color); font-weight: 900; font-size: 1.3rem; }

        @media (max-width: 768px) {
            .table-wrapper { background: transparent; box-shadow: none; border: none; overflow: visible; }
            table, thead, tbody, th, td, tr { display: block; }
            thead tr { position: absolute; top: -9999px; left: -9999px; }
            tr { background: var(--bg-white); border: 1px solid #E2E8F0; border-radius: 12px; margin-bottom: 25px; box-shadow: var(--shadow-card); overflow: hidden; }
            td { border: none; border-bottom: 1px solid #E2E8F0; position: relative; padding: 15px 15px 15px 45%; text-align: right; font-size: 1.05rem; min-height: 50px; display: flex; align-items: center; justify-content: flex-end; }
            td:last-child { border-bottom: none; }
            td::before { content: attr(data-label); position: absolute; left: 15px; width: 40%; text-align: left; font-weight: 800; color: var(--primary-color); font-family: var(--font-heading); font-size: 0.95rem; }
            td:first-child { background-color: var(--primary-color); color: white; padding: 20px; text-align: center; justify-content: center; font-family: var(--font-heading); font-size: 1.2rem; }
            td:first-child::before { display: none; }
            td:first-child strong { color: white; }
        }

        /* ==========================================================================
           12. PROVA SOCIAL CURADA
           ========================================================================== */
        .test-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
        @media (min-width: 768px) { .test-grid { grid-template-columns: repeat(3, 1fr); } }
        .test-card { background: var(--bg-white); padding: 40px; border-radius: 12px; box-shadow: var(--shadow-card); position: relative; border-top: 4px solid var(--primary-color); }
        .test-card::before { content: '\f10d'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 20px; right: 30px; font-size: 4rem; color: #F1F5F9; z-index: 0; }
        .stars { color: var(--secondary-color); margin-bottom: 20px; position: relative; z-index: 1; font-size: 1.2rem; }
        .test-text { font-style: italic; color: var(--text-dark); margin-bottom: 25px; position: relative; z-index: 1; font-size: 1.1rem; }
        .test-author { font-weight: 800; color: var(--primary-color); display: block; font-size: 1.1rem; }

        /* ==========================================================================
           13. TRANSPARÊNCIA DE VALORES
           ========================================================================== */
        .valores-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; }
        @media (min-width: 768px) { .valores-grid { grid-template-columns: repeat(3, 1fr); } }
        .valor-card { background: var(--bg-white); border: 1px solid #E2E8F0; padding: 40px 30px; border-radius: 12px; text-align: center; transition: 0.3s; }
        .valor-card:hover { border-color: var(--secondary-color); transform: translateY(-5px); box-shadow: var(--shadow-card); }
        .valor-card i { font-size: 3rem; color: var(--secondary-color); margin-bottom: 20px; }
        .valor-card h4 { font-size: 1.4rem; color: var(--primary-color); }
        .valor-card p { color: var(--text-light); font-size: 1.1rem; }

        /* ==========================================================================
           14. SUPER FAQ
           ========================================================================== */
        .faq-container { max-width: 900px; margin: 0 auto; }
        details { background: rgba(255,255,255,0.05); margin-bottom: 15px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; transition: 0.3s; }
        details[open] { background: var(--bg-white); }
        
        /* Respiro de 65px na direita para o ícone não sobrepor o texto */
        summary { padding: 25px 65px 25px 25px; font-weight: 700; cursor: pointer; color: var(--text-white); font-family: var(--font-heading); font-size: 1.2rem; list-style: none; position: relative; transition: 0.3s; }
        
        details[open] summary { color: var(--primary-color); border-bottom: 1px solid #E2E8F0; }
        /* Efeito Hover para FAQs fechadas (Micro-interação) */
        details:not([open]):hover { 
            background: rgba(255,255,255,0.08); 
            border-color: rgba(255,255,255,0.2);
            transform: translateX(5px); /* Move a caixa sutilmente para a direita */
        }
        details:not([open]) summary:hover { 
            color: var(--secondary-color); 
        }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: '+'; position: absolute; right: 25px; color: var(--secondary-color); font-size: 1.8rem; top: 50%; transform: translateY(-50%); }
        details[open] summary::after { content: '-'; }
        .faq-answer { padding: 25px; color: var(--text-dark); font-size: 1.1rem; line-height: 1.8; }

        /* ==========================================================================
           15. CAIXA DO AUTOR
           ========================================================================== */
        .author-box { background: var(--bg-white); border: 1px solid #E2E8F0; padding: 40px 20px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-card); border-top: 6px solid var(--secondary-color); }
        .author-avatar { width: 100px; height: 100px; border-radius: 50%; background-color: var(--primary-light); display: flex; align-items: center; justify-content: center; color: white; font-size: 2.5rem; flex-shrink: 0; }
        .author-info h5 { margin: 0 0 8px 0; font-size: 1.5rem; color: var(--primary-color); }
        .author-role { color: var(--secondary-color); font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 10px; }
        .author-info p { color: var(--text-light); font-size: 1.1rem; margin: 0; }
        @media (min-width: 768px) { .author-box { flex-direction: row; text-align: left; padding: 40px; gap: 30px; border-top: 1px solid #E2E8F0; border-left: 6px solid var(--secondary-color); } }

        /* ==========================================================================
           16. FOOTER & ZONAS DINÂMICAS
           ========================================================================== */
        .dynamic-zones { background-color: var(--primary-light); color: white; padding: 80px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .dynamic-zones h4 { color: var(--secondary-color); font-size: 1.2rem; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }
        .dynamic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
        .dynamic-grid a { color: #CBD5E1; display: block; margin-bottom: 12px; font-size: 1.05rem; transition: 0.3s; }
        .dynamic-grid a:hover { color: white; padding-left: 8px; }

        footer { background-color: var(--primary-color); color: white; padding: 50px 0; text-align: center; font-size: 1rem; color: #94A3B8; }
        .footer-address { margin-top: 20px; font-size: 1.05rem; color: #CBD5E1; line-height: 1.6; }
        .footer-address i { color: var(--secondary-color); margin-right: 8px; }
        
        .powered-by { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); }
        .powered-by span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #64748B; }
        .powered-by img { max-width: 140px; margin: 15px auto 0; opacity: 0.7; transition: 0.3s; padding:20px; background: #FFF; border-radius: 8px;}
        .powered-by a:hover img { opacity: 1; transform: scale(1.05); }
        
        .float-wa { position: fixed; bottom: 30px; right: 30px; background: var(--whatsapp-color); color: white; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.4); z-index: 9999; transition: 0.3s; }
        .float-wa:hover { transform: scale(1.1) rotate(-10deg); background: var(--whatsapp-hover); color: white; }