.elementor-5449 .elementor-element.elementor-element-1324359{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-5449 .elementor-element.elementor-element-1324359{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-5848a10 *//* CONFIGURAÇÕES GERAIS */
        :root {
            --primary: #d4af37; /* Dourado */
            --bg-dark: #0d0d0d; /* Preto */
            --white: #ffffff;
            --text-gray: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: var(--white);
            color: var(--bg-dark);
            line-height: 1.6;
        }

        h1, h2, h3 {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        .container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }

        img { max-width: 100%; height: auto; }

        /* BOTÃO CTA */
        .btn-cta {
            display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            padding: 18px 35px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: 0.3s;
            border: none;
            cursor: pointer;
            text-align: center;
        }

        .btn-cta:hover {
            filter: brightness(1.2);
            transform: translateY(-2px);
        }
        
        .botoes-links {
            display: flex;
            justify-content: center;
            gap: 25px;
        }

        /* HEADER */
        header {
            background: var(--bg-dark);
            padding: 15px 0;
            text-align: center;
            border-bottom: 2px solid var(--primary);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo { height: 200px!important;
        margin: 0 auto; margin-bottom:50px; }

        /* SEÇÃO 1: HERO */
        #hero {
            background-color: black;
            background-size: cover;
            background-position: center;
            padding: 100px 0;
            color: var(--white);
            text-align: center;
        }

        .hero-content h1 { font-size: 2.8rem; margin-bottom: 20px; color: var(--primary); }
        .hero-content p { font-size: 1.1rem; margin-bottom: 30px; max-width: 700px; margin-inline: auto; }

        .hero-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .feature-item {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid var(--primary);
            font-size: 0.8rem;
        }

        /* SEÇÃO 2: SITUAÇÕES */
        #situacoes { padding: 80px 0; background: #f9f9f9; text-align: center; }
        .grid-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(0px, 8fr));
            gap: 20px;
            margin: 40px 0;
        }
        .card {
            background: var(--white);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: 0.3s;
        }
        .card i { color: var(--primary); font-size: 2rem; margin-bottom: 15px; }
        
@media (max-width: 640px) {
    .grid-cards {
        display: grid;
        /* Altere a linha abaixo */
        grid-template-columns: 1fr; 
        gap: 20px;
        margin: 40px 0;
    }
    
    .card {
        /* Garanta que o card ocupe a largura total */
        width: 100%; 
        box-sizing: border-box; /* Evita que o padding "estoure" a largura */
    }
}

        /* SEÇÃO 3: IMPORTÂNCIA DA AVALIAÇÃO */
        #essencial { padding: 80px 0; background: var(--bg-dark); color: var(--white); }
        .flex-content { display: flex;  align-items: center; gap: 50px; flex-wrap: wrap; }
        .flex-text { flex: 1; min-width: 300px; }
        .flex-img { 
            flex: 1; 
            height: 550px !important;   display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;     /* Centraliza verticalmente */
            width: auto; 
            border: 3px solid var(--); 
            border-radius: 10px; 
            overflow: hidden; 
        }
        
            .flex-img img{ 
            flex: 1; 
            height: 750px !important;
            
            width: auto; 

            border-radius: 10px; 
            overflow: ; 
        }

        /* SEÇÃO 4: DR. IVAN JUSTI */
        #sobre { padding: 80px 0; }
        .dr-perfil {
            display: flex;
            gap: 40px;
            align-items: center;
            flex-wrap: wrap;
        }
        .dr-img {
            width: auto;
            height: 350px !important;
            border-bottom: 8px solid var(--primary);
            border-radius: 15px !important;
        }
        .dr-info { flex: 1; min-width: 300px; }
        .dr-info h2 { color: var(--primary); margin-bottom: 10px; }
        .crm { font-weight: bold; color: #666; margin-bottom: 20px; display: block; }

        /* SEÇÃO 5: DIFERENCIAIS */
        #diferenciais { padding: 60px 0; background: #eee; }
        .dif-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            text-align: center;
        }
        .dif-item h3 { color: var(--primary); font-size: 1rem; margin-bottom: 10px; }

        /* SEÇÃO 6: FINAL */
        #final { padding: 80px 0; text-align: center; background: var(--primary); color: var(--white); }
        #final h2 { margin-bottom: 20px; }
        #final .btn-cta { background: var(--bg-dark); }

        /* RODAPÉ */
        footer { padding: 50px 0; background: var(--bg-dark); color: var(--white); text-align: center; }
        .footer-links { margin: 20px 0; }
        .footer-links a { color: var(--primary); margin: 0 15px; font-size: 1.5rem; text-decoration: none; }

        /* RESPONSIVIDADE */
        @media (max-width: 768px) {
            .hero-content h1 { font-size: 1.8rem; }
            .dr-perfil { text-align: center; justify-content: center; }
            .dr-img { flex: 0 0 100%; }
            .logo { height: 80px!important;
            margin: 0 auto; margin-bottom:50px; }
            
                    .flex-img { 
            flex: 1; 
            height: 250px !important; 
            width: auto; 
            border-radius: 10px; 
            overflow: hidden; 
        }
        
            .flex-img img{ 
            flex: 1; 
            height: 100% !important; 
            width: auto; 
            border-radius: 10px; 
        }
        
                .dr-img {
            width: auto;
            height: 240px !important;
            border-bottom: 8px solid var(--primary);
            border-radius: 15px !important;
        }
}
        
        /* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .flex-content {
        display: flex;
        flex-direction: column-reverse; /* Inverte a ordem dos itens filhos */
        gap: 30px; /* Espaçamento entre a foto e o texto */
    }

    .flex-img {
        width: 100%; /* Garante que a imagem ocupe a largura total */
    }
    
    /* Ajuste do Título Principal (Hero) */
    .hero-content h1 {
        font-size: 1.6rem; /* Tamanho menor para não quebrar muitas linhas */
        line-height: 1.2;
    }

    /* Ajuste dos Títulos das Seções (H2) */
    h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    /* Ajuste de Títulos de Cards ou Subtítulos (H3) */
    h3 {
        font-size: 1.2rem;
    }

    /* O ajuste que você pediu anteriormente para a imagem no topo */
    .flex-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 30px;
    }
    
    .btn-cta {
        display: block; /* Faz o botão se comportar como um bloco */
        width: 100%;    /* Ocupa 100% do container pai */
        text-align: center; /* Garante que o texto fique centralizado */
        padding: 20px 0;    /* Ajuste de respiro opcional */
    }
    
        .botoes-links {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 25px;
        }

}/* End custom CSS */