/*
==================================================
Arquivo de Estilos: style.css
================================================== 
*/

/* --------------------------------------------------
Variáveis de Cor e Fontes (CSS Root)
--------------------------------------------------
Definimos as cores e fontes principais aqui para 
reutilizar facilmente em todo o site.
*/
:root {
    --cor-primaria: #FF9420;
    /* Seu laranja */
    --cor-secundaria: #1373B0;
    /* Seu azul */
    --cor-cinza: #f4f4f4;
    /* Cinza claro (para fundos) */
    --cor-texto: #333;
    /* Cinza escuro (para leitura) */
    --cor-branca: #ffffff;

    --fonte-destaque: 'Amiri', serif;
    --fonte-secundaria: 'Open Sans', sans-serif;
}

/* --------------------------------------------------
Estilos Globais (Reset Básico)
--------------------------------------------------
*/
body {
    font-family: var(--fonte-secundaria);
    color: var(--cor-texto);
    line-height: 1.6;
}

/* Estilo para Títulos (Headings) */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fonte-destaque);
    font-weight: 700;
    color: var(--cor-secundaria);
    /* Usando o azul para títulos por padrão */
}

/* Estilo para links e botões (Usando a cor primária) */
a {
    color: var(--cor-primaria);
    text-decoration: none;
}

a:hover {
    color: #d1791a;
    /* Um tom mais escuro do laranja para o hover */
    text-decoration: none;
}

/* Classe utilitária para botões principais */
.btn-principal {
    background-color: var(--cor-primaria);
    color: var(--cor-branca);
    font-family: var(--fonte-secundaria);
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    /* Botões arredondados (moderno) */
    transition: all 0.3s ease;
}

.btn-principal:hover {
    background-color: #d1791a;
    color: var(--cor-branca);
    transform: translateY(-2px);
    /* Efeito sutil de 'levantar' */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Classe utilitária para botões secundários */
.btn-secundario {
    background-color: var(--cor-secundaria);
    color: var(--cor-branca);
    /* ... (mesmo estilo do btn-principal) ... */
}

.btn-secundario:hover {
    background-color: #0d5a8a;
    /* Azul mais escuro */
    color: var(--cor-branca);
}



/* --------------------------------------------------
Header (Menu)
-------------------------------------------------- */
.header .navbar-brand {
    font-family: var(--fonte-destaque);
    /* Fonte Amiri */
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    /* Azul */
}

.header .navbar-brand img {
    height: 80px;
}

.header .nav-link {
    font-family: var(--fonte-secundaria);
    font-weight: 600;
    /* Open Sans semi-bold */
    color: #555;
    margin-left: 10px;
    margin-right: 10px;
    transition: color 0.3s ease;
}

.header .nav-link:hover {
    color: var(--cor-primaria);
    /* Laranja */
}


.header .nav-link {
    position: relative;
    /* Essencial para o sublinhado */
    padding-bottom: 8px;
    /* Dá espaço para o sublinhado não colar no texto */
}

/* 2. Cria o sublinhado (invisível por padrão) */
.header .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    /* Começa no centro */

    width: 0%;
    /* Começa com 0% de largura */
    height: 2px;
    background-color: var(--cor-primaria);
    /* Cor Laranja */

    /* Centraliza o início (truque do 'transform') */
    transform: translateX(-50%);

    /* A mágica da animação */
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. Ação no Hover (quando o mouse está em cima) */
.header .nav-link:hover::after {
    width: 100%;
    /* Anima a largura para 100% */
}

/* (Opcional) Remove o padding extra no botão "Fale Conosco" 
   para ele não "pular" quando o CSS acima for aplicado.
*/
.header .btn-principal {
    padding-bottom: 12px !important;
    /* Mantém o padding original */
}


/* --------------------------------------------------
Hero Section (Banner)
-------------------------------------------------- */
.hero-section {
    background: url('./img/bg-hero.jpg') no-repeat center center;
    background-size: cover;

    /* Sobreposição escura para legibilidade */
    position: relative;
    padding: 180px 0;
    min-height: 80vh;
    /* Altura de quase a tela inteira */
    display: flex;
    align-items: center;
    z-index: 1;
}

/* A sobreposição (overlay) escura */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 50, 0, 0.5);
    /* Sombra 50% preta */
    z-index: -1;
}

/* Estilo customizado para o H1 do Hero */
.hero-section h1 {
    font-family: var(--fonte-destaque);
    color: var(--cor-branca);
    /* H1 será branco */
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}

/* Cor do texto "lead" (subtítulo) */
.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}


/*
==================================================
 Contadores Animados
================================================== 
*/
#counters {
    border-bottom: 1px solid var(--cor-cinza);
    border-top: 1px solid var(--cor-cinza);
}

.counter-number {
    font-family: var(--fonte-destaque);
    /* Amiri */
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    /* Azul */
}

.counter-label {
    font-family: var(--fonte-secundaria);
    /* Open Sans */
    font-size: 1.1rem;
    font-weight: 600;
}


/* ==================================================
Seção de Serviços
================================================== 
*/

/* O card (caixa) do serviço */
.card-servico {
    border: none;
    /* Remove a borda padrão */
    border-radius: 10px;
    transition: all 0.3s ease;
    padding-top: 30px;
    /* Espaço para o ícone */
    margin-bottom: 45px;
}

/* Efeito UX: 'Levantar' o card ao passar o mouse */
.card-servico:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

#servicos .col-lg-4 {
    margin-bottom: 40px;
}

/* O ícone circular (Design Moderno) */
.card-icon {
    /* Posiciona o ícone 'fora' do card */
    margin-top: -65px;

    /* Cria o círculo */
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;

    /* Cores e Sombra */
    background-color: var(--cor-primaria);
    /* Laranja */
    color: var(--cor-branca);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    /* Alinhamento do ícone (Font Awesome) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon img {
    width: 45px;
    /* Define um tamanho para o SVG */
    height: 45px;
    /* (45px fica bom dentro de um círculo de 80px) */
    filter: brightness(0) invert(1);
}

/* Título do card */
.card-servico .card-title {
    color: var(--cor-secundaria);
    /* Azul */
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Link 'Ver Detalhes' */
.btn-detalhes {
    color: var(--cor-primaria);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-detalhes:hover {
    color: var(--cor-secundaria);
    /* Move a seta ligeiramente para a direita */
    transform: translateX(3px);
    display: inline-block;
}




/*
==================================================
Estilos da Etapa 5 (REFATORAÇÃO DE ESTILO FINAL)
================================================== 
*/

/* 1. Base Card (Agora Branco) */
.card-servico-online {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--cor-branca);
    /* Card agora é BRANCO */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Textos (Agora escuros) */
.card-servico-online h3 {
    /* Título Azul (mais forte que preto) */
    color: var(--cor-secundaria);
    font-family: var(--fonte-destaque);
    font-weight: 700;
}

.card-servico-online p {
    color: var(--cor-texto);
    /* Parágrafo com cor de texto padrão */
}

/* 3. O Botão (Estado Normal: Texto Azul, Borda Azul) 
   Exatamente como você pediu.
*/
.btn-servico-inverso {
    background-color: transparent;
    color: var(--cor-secundaria);
    /* Texto Azul */
    border: 2px solid var(--cor-secundaria);
    /* Borda Azul */
    font-weight: 700;
    border-radius: 50px;
    padding: 10px 24px;
    transition: all 0.3s ease;
}

/* 4. O Hover do Botão (Estado Hover: Fundo Laranja, Texto Branco)
   Exatamente como você pediu.
*/
.btn-servico-inverso:hover {
    background-color: var(--cor-primaria);
    /* Fundo Laranja */
    color: var(--cor-branca);
    /* Texto Branco */
    border-color: var(--cor-primaria);
    /* Borda Laranja */
    transform: scale(1.05);
}

/* 5. Efeitos Visuais (Hover do Card) */
.card-img-top-container {
    overflow: hidden;
}

.card-img-top-container img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.card-servico-online:hover {
    transform: translateY(-10px);
    /* Elevação */
    /* Sombra (glow) mais sutil */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-servico-online:hover .card-img-top-container img {
    transform: scale(1.1);
    /* Zoom na imagem */
}


/* 6. Estilo do Bloco Azul (Certificado) - SEM MUDANÇAS
   Este código é o mesmo de antes, garantindo que
   o bloco do certificado continue perfeito.
*/
.servico-online-row-azul {
    background-color: var(--cor-secundaria);
    padding: 80px 0;
    overflow: hidden;
}

.servico-online-row-azul h2 {
    font-family: var(--fonte-destaque);
}

/* Garante que o texto tenha o mesmo destaque da fonte Amiri */
.servico-online-row h2 {
    font-family: var(--fonte-destaque);
    color: var(--cor-secundaria);
    font-weight: 700;
}



/* 2. Estilo dos Passos do Formulário (Wizard) */
.form-step {
    display: none;
    /* Esconde todos os passos por padrão */
    animation: fadeIn 0.5s ease-in-out;
}

.form-step.active {
    display: block;
    /* Mostra apenas o passo ativo */
}

/* (Animação de fade-in para os passos) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Espaçamento dentro do formulário do modal */
.form-step .form-label {
    font-weight: 600;
    color: var(--cor-secundaria);
    margin-top: 10px;
}


/*
==================================================
Estilos da Etapa 4 (Refatorada): Mapa e Rotas
================================================== 
*/

/* O container do mapa AGORA é um DIV, 
   então ele precisa de uma altura definida. 
*/
#map {
    width: 100%;
    height: 450px;
    /* Mesma altura do iframe anterior */
    border-radius: 10px;
}

/* Links de contato (tel, mailto) */
.contato-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-texto);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contato-link:hover {
    color: var(--cor-primaria);
    /* Laranja */
}

/* Botões de Rota (Maps, Waze, Uber) */
.btn-rota {
    background-color: var(--cor-cinza);
    color: var(--cor-secundaria);
    /* Azul */
    border: 1px solid #ddd;
    margin: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-rota:hover {
    background-color: var(--cor-secundaria);
    /* Azul */
    color: var(--cor-branca);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


/*
==================================================
Estilos da Etapa 6: Rodapé (Footer)
================================================== 
*/
.footer-section {
    background-color: #004068;
    /* Fundo Azul */
    padding-top: 60px;
    color: rgba(255, 255, 255, 0.7);
    /* Texto claro (70%) */
}

/* Título (h5) das colunas */
.footer-heading {
    font-family: var(--fonte-destaque);
    font-size: 1.5rem;
    color: var(--cor-branca);
    margin-bottom: 20px;
}

/* Links (Navegação e Serviços) */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links li a:hover {
    color: var(--cor-primaria);
    /* Laranja no hover */
    padding-left: 5px;
    /* Efeito de 'empurrar' */
}

/* Links de Contato (com ícones) */
.footer-links-contato li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-links-contato li i {
    font-size: 1.1rem;
    color: var(--cor-primaria);
    /* Ícone Laranja */
    margin-right: 15px;
    margin-top: 5px;
    min-width: 20px;
    /* Alinhamento */
    text-align: center;
}

/* Links de Redes Sociais (Círculos) */
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cor-branca);
    font-size: 1rem;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: var(--cor-primaria);
    /* Laranja no hover */
    color: var(--cor-branca);
    transform: translateY(-3px);
}

/* Linha do Copyright */
.border-top {
    border-color: rgba(255, 255, 255, 0.2) !important;
}



/*
==================================================
Estilos da Etapa 8: Banner de Cookies (LGPD)
================================================== 
*/
#cookie-banner {
    position: fixed;
    bottom: -100%;
    /* Começa escondido */
    left: 0;
    width: 100%;
    background-color: #222;
    /* Um fundo escuro (não azul) */
    color: #fff;
    padding: 25px 0;
    z-index: 1050;
    /* Z-index alto (abaixo do modal 1055) */
    transition: bottom 0.5s ease-in-out;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
}

#cookie-banner.show {
    bottom: 0;
    /* Posição visível */
}

#cookie-banner p {
    margin-bottom: 0;
    font-size: 0.9rem;
    max-width: 800px;
}

#cookie-banner .btn-principal {
    /* Garante que o botão não seja muito pequeno */
    flex-shrink: 0;
    margin-left: 20px;
}

/*
==================================================
Estilos do Botão Flutuante de WhatsApp (COM BALÃO)
================================================== 
*/

/* O Container (agora é ele quem flutua) */
#whatsapp-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
    /* Alinha os itens (botão e balão) */
    display: flex;
    align-items: center;
}

/* O Botão (como antes, mas sem 'position: fixed') */
.whatsapp-float {
    position: relative;
    /* Posição relativa ao container */
    background-color: #25D366;
    color: #FFF;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    color: #FFF;
    animation-play-state: paused;
}

/* O Balão de Mensagem */
.whatsapp-bubble {
    position: absolute;
    right: 75px;
    /* (Largura do botão 60px + 15px de espaço) */
    bottom: 8px;
    /* Alinha verticalmente com o botão */

    /* Estilo do balão */
    background-color: #ffffff;
    padding: 10px 30px 10px 15px;
    /* Espaço extra à direita para o "X" */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 260px;
    /* Largura máxima */
    color: var(--cor-texto);
    font-family: var(--fonte-secundaria);
    font-size: 0.95rem;
    font-weight: 600;

    /* Invisível por padrão */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease-in-out;
}

/* A Seta do Balão (CSS Trick) */
.whatsapp-bubble-arrow {
    position: absolute;
    top: 50%;
    right: -10px;
    /* Gruda na borda direita do balão */
    margin-top: -5px;
    /* Centraliza verticalmente */
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #ffffff;
    /* Seta branca */
}

/* Estado Visível (quando o JS adicionar a classe) */
.whatsapp-bubble.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Botão de Fechar (o "X") */
.whatsapp-bubble-close {
    position: absolute;
    top: 2px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.whatsapp-bubble-close:hover {
    color: #333;
}

/* Keyframes da Animação de Pulso (sem mudanças) */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Classe de controle para parar o pulso */
.whatsapp-float.bubble-is-shown {
    animation: none;
    /* Pausa o pulso quando o balão aparece */
}


/*
==================================================
Estilos da Etapa 9: Depoimentos (Swiper.js)
================================================== 
*/
#depoimentos {
    background-color: var(--cor-primaria);
}

#depoimentos h2 {
    color: #FFF;
}

#depoimentos a {
    color: #333;
    text-decoration: underline;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    /* Garante altura mínima para alinhar */
    min-height: 280px;
    margin: 10px;
    /* Espaço para a sombra */

    /* Alinhamento */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ícone de Citação (Azul) */
.testimonial-card .quote-icon {
    font-size: 2.5rem;
    color: var(--cor-secundaria);
    opacity: 0.2;
    margin-bottom: 10px;
}

/* Estrelas (Laranja) */
.testimonial-card .stars {
    color: var(--cor-primaria);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.testimonial-card .comment {
    font-family: var(--fonte-secundaria);
    font-size: 1rem;
    font-style: italic;
    color: #555;
    flex-grow: 1;
    /* Ocupa o espaço disponível */
}

.testimonial-card .author {
    font-family: var(--fonte-destaque);
    color: var(--cor-secundaria);
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 0;
}

/* Estilização dos Controles do Swiper (Setas e Bolinhas)
Usando suas cores primárias!
*/
#depoimentos .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    opacity: 1;
}

#depoimentos .swiper-pagination-bullet-active {
    background-color: var(--cor-primaria);
    /* Laranja */
}

/*
ARRUMANDO BUGS DO CELULAR
*/
@media screen and (max-width: 640px) {
    .header .navbar-brand img {
        height: 56px;
    }

    .hero-section{
            padding: 80px 0;
            text-align: center;
    }

    #servico-certificado{
        text-align: center;
    }

    #sobre h2,
    #sobre .lead{
        text-align: center;
    }
    #sobre p{
        text-align: justify;
    }
}