/*
Theme Name: Rômulo Queiroz Adv - Custom
Author: Souza & Devi
Description: Tema sob medida focado em conversão jurídica e alta performance.
Version: 1.0
*/

/* Reset global para matar a faixa branca lateral */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden; /* Mata a faixa branca vertical  */
        }

        :root {
            --primary-navy: #152131; 
            --accent-gold: #C5A059;  
            --bg-ice: #F8F9FA;
            --bg-gray: #F1F3F5;
            --white: #FFFFFF;
            --whatsapp: #28A745;
        }
    
        /* Reset para eliminar a borda branca indesejada */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body { 
            font-family: 'Open Sans', sans-serif; 
            color: var(--primary-navy); 
            line-height: 1.8; /* Espaçamento generoso conforme guia */
            overflow-x: hidden; /* Evita rolagem lateral horizontal */
        }
    
        /* Escala Hierárquica conforme Guia de Estilo */
        h1 { 
            font-family: 'Cormorant Garamond', serif; 
            font-weight: 700; 
            font-size: 42px; 
        }
    
        h3 { 
            font-family: 'Montserrat', sans-serif; 
            font-weight: 600; 
            font-size: 20px; 
            text-transform: uppercase; 
        }
    
        section {
            padding: 100px 10%; /* Respiros de 100px conforme guia [cite: 39] */
        }
        
        #home {
            padding: 0 !important;
        }
    
        /* Estilo para o Menu Sticky [cite: 45] */
        .main-nav { 
            position: sticky; 
            top: 0; 
            z-index: 1000; 
            background: var(--primary-navy); 
            padding: 15px 5%;
            display: flex; 
            justify-content: space-between; 
            align-items: center;
        }
        
        /* Estilo Base do Hero */
        .hero {
            position: relative;
            width: 100%;
            min-height: 80vh; /* Garante uma boa altura visual */
            display: flex;
            align-items: center;
            background-size: cover;
            background-position: center right;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        /* Overlay para garantir leitura do texto sobre a imagem */
        .hero::before {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /*background: linear-gradient(90deg, rgba(21, 33, 49, 0.9) 30%, rgba(21, 33, 49, 0) 70%);*/
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        /* Configuração Desktop */
        @media (min-width: 992px) {
            .hero {
                background-image: url('https://romuloqueirozadv.com.br/wp-content/uploads/2026/03/rq-img-desktop.jpeg');
                padding: 0 10%;
            }
            .hero-text-container {
                width: 50%; /* Ocupa 50% da esquerda */
            }
        }

        /* Configuração Mobile */
        @media (max-width: 991px) {
        .hero {
            background-image: url('https://romuloqueirozadv.com.br/wp-content/uploads/2026/03/rq-img-mobil-01.webp') !important;
            background-position: center top !important;
            background-size: cover !important;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Empurra textos para as extremidades */
            padding: 60px 20px !important;
        }

        /* Removemos o overlay escuro total para a imagem brilhar */
        .hero::before {
            display: none !important; 
        }

        .mobile-headline {
            margin-top: 5vh; /* 1/5 superior aproximadamente */
            text-align: left; /* Alinhamento à esquerda conforme guia [cite: 38] */
        }

        .mobile-footer-content {
            margin-bottom: 5vh; /* 1/4 inferior aproximadamente */
            text-align: left;
        }
        
        .mobile-headline h1 {
            font-size: 28px !important;
            text-shadow: 1px 1px 10px rgba(0,0,0,0.8); /* Sombra para ler no claro */
        }
    }

        @media (min-width: 992px) {
            .mobile-only { display: none; }
        }

        
        #form-juridico input, #form-juridico select {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }


            /* Container das Áreas de Atuação */
    .servicos-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas no Desktop [cite: 42] */
        gap: 20px;
    }

    /* Estilo de cada item da lista */
    .area-item {
        background: #FFFFFF;
        padding: 25px;
        display: flex;
        align-items: center;
        border-left: 4px solid var(--accent-gold); /* Detalhe lateral em dourado  */
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        transition: transform 0.3s ease;
    }

    .area-item:hover {
        transform: translateX(10px);
    }

    .bullet-gold {
        width: 8px;
        height: 8px;
        background-color: var(--accent-gold);
        border-radius: 50%;
        margin-right: 15px;
        flex-shrink: 0;
    }

    .area-title {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 16px !important; /* Ajustado para não poluir [cite: 35] */
        color: var(--primary-navy);
        margin: 0;
        text-transform: none !important; /* Mantendo natural para melhor leitura */
    }

    /* Ajuste Mobile */
    @media (max-width: 991px) {
        .servicos-grid {
            grid-template-columns: 1fr; /* 1 coluna no Mobile [cite: 42, 49] */
        }
        
        section#servicos {
            padding: 60px 10% !important; /* Respiro menor conforme guia [cite: 39] */
        }
    }

    /* Classe para os campos Nome e WhatsApp lado a lado */
    .form-row-dual {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
        gap: 20px;
        margin-bottom: 20px;
    }

    /* Ajuste para Mobile (telas menores que 768px) */
    @media (max-width: 767px) {
        .form-row-dual {
            grid-template-columns: 1fr !important; /* Força uma única coluna */
        }
    }

    /* Estilo do Botão Flutuante */
        #whatsapp-floating-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #25d366;
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            z-index: 9999;
        }

        /* Modal Invisível por padrão */
        .whatsapp-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            align-items: center;
            justify-content: center;
        }

        .whatsapp-modal.is-visible { display: flex; }

        /* Conteúdo do Modal */
        .whatsapp-modal-content {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            max-width: 350px;
            width: 90%;
            text-align: center;
            position: relative;
            border-top: 5px solid #25d366;
        }

        .whatsapp-modal-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }

        .whatsapp-modal-header i { font-size: 40px; color: #25d366; margin-bottom: 10px; }

        .btn-confirmar {
            background-color: #25d366;
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            cursor: pointer;
            margin-top: 15px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

    /* Ajuste responsivo para o telefone no footer */
    .footer-phone {
        font-size: 0.95rem; /* Padrão para Desktop */
        font-weight: bold;
        margin-bottom: 15px;
    }

    .footer-phone i {
        color: var(--accent-gold) !important;
        margin-right: 10px;
    }

    @media (max-width: 991px) {
        .footer-phone {
            font-size: 1.20rem; /* Aumenta apenas no Mobile */
            background-color: #A28751; /* Cor de fundo marca-texto */
            padding: 5px 10px; /* Padding vertical e lateral */
            border-radius: 4px; /* Leve arredondamento para estética profissional */
            display: inline-flex;
            align-items: center;}
        .footer-phone i {
            color: var(--white) !important; /* Ícone fica branco no Mobile */}
    }

    /* Mobile rotaciona o container PDF */
    #modal-portfolio {
        display: none; 
        position: fixed; 
        z-index: 9999; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        background-color: rgba(21, 33, 49, 0.98); 
        backdrop-filter: blur(5px);
    }

    .pdf-wrapper-style {
        position: relative; 
        width: 95%; 
        height: 85vh; 
        margin: 5vh auto; 
        background: #fff; 
        border-radius: 8px; 
        overflow: hidden;
    }

    /* Ajustes específicos para Mobile */
    @media (max-width: 768px) {
        .pdf-wrapper-style {
            width: 100%; 
            height: 100%; 
            margin: 0; 
            border-radius: 0;
        }
        
        #close-portfolio {
            top: 15px !important;
            right: 15px !important;
            background: var(--accent-gold) !important;
            color: white !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
    }


/* Efeito Hover nos Cards do Template */
.card-item-link:hover .card-box {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(21, 33, 49, 0.1);
    border-color: var(--accent-gold);
}

.card-item-link:hover .card-title {
    color: var(--accent-gold) !important;
}

.atendimento {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23c5a059' fill-rule='evenodd' d='M19.411.532a19 19 0 0 1 1.651-.075c.583 0 1.145.031 1.652.075a3.4 3.4 0 0 1 2.289 1.156c8.725 1.609 15.907 8.94 16.27 17.903l4.108 5.23a4.94 4.94 0 0 1 1.056 3.053c0 1.945-1.15 3.77-3.037 4.51c-.732.288-1.634.626-2.542.92l-.917 6.131a4.44 4.44 0 0 1-5.02 3.744l-2.15-.308v2.59a2 2 0 0 1-4 0v-4.897a2 2 0 0 1 2.283-1.98l4.435.636a.44.44 0 0 0 .496-.376l1.105-7.388a2 2 0 0 1 1.463-1.637c1.068-.284 2.347-.75 3.384-1.158c.278-.109.5-.4.5-.787a.94.94 0 0 0-.2-.583l-4.523-5.755a2 2 0 0 1-.428-1.235c0-6.554-4.847-12.359-11.334-14.279c.016.925.027 2.011.027 3.268c0 .933-.006 2.448-.015 3.442a8.837 8.837 0 0 1-1.71 15.59c2.481 2.156 5.631 3.469 8.559 3.469a2 2 0 1 1 0 4c-4.989 0-10.029-2.685-13.287-6.595a2 2 0 0 1-.292-.47a8.837 8.837 0 0 1-3.072-15.994a411 411 0 0 1-.016-3.442q.002-1.749.024-3.067C9.922 8.377 5.437 14.303 5.437 21.27c0 6.043 3.357 11.736 8.197 14.427a2 2 0 0 1 1.028 1.748v8.015a2 2 0 0 1-4 0v-6.884C5.075 34.963 1.437 28.277 1.437 21.27c0-9.5 6.658-17.44 15.561-19.433A3.4 3.4 0 0 1 19.411.532' clip-rule='evenodd'/%3E%3C/svg%3E");
}