:root {
    --azul: #007bff;
    --cyan: #00e5ff;
    --dark: #002855;
    --glass: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Poppins', sans-serif; background: #0ed84b; scroll-behavior: smooth; overflow-x: hidden; }

/* --- AJUSTES PARA CELULAR E TABLET --- */
@media (max-width: 768px) {
    
    /* 1. Menu: Transforma em coluna ou esconde itens se necessário */
    .menu-flutuante {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    .botoes-menu {
        display: none; /* Dica: Aqui você pode criar um menu hambúrguer depois */
    }

    /* 2. Missão: Faz as imagens e textos empilharem verticalmente */
    .container-missao-completa {
        flex-direction: column;
        text-align: center;
    }

    .coluna-lateral {
        max-width: 100%; /* Imagens ocupam a largura total no celular */
        margin-bottom: 20px;
    }

    /* 3. Planos: Transforma a grade de 3 colunas em 1 única coluna */
    .cards-grid {
        grid-template-columns: 1fr !important; /* Força um card por linha */
        gap: 20px;
        padding: 0 10px;
    }

    /* 4. Contato: Mapa e Formulário um em cima do outro */
    .container-grid-transparente {
        grid-template-columns: 1fr !important;
        margin-top: 30px;
    }

    /* 5. Títulos: Diminui o tamanho para não quebrar linha errado */
    .brilho-titulo {
        font-size: 2.5rem !important;
    }
}

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

/* MENU CENTRALIZADO - AJUSTADO PARA SER MAIS CLARO */
.menu-flutuante {
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 95%; 
    max-width: 1100px;
    /* Alteramos o 0.4 para 0.15 para ficar bem clarinho */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(12px); /* Efeito de vidro fosco */
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px; 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    padding: 12px 30px; 
    z-index: 1000;
    /* Borda sutil para dar acabamento */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.logo-menu { color: rgb(248, 244, 244); text-decoration: none; font-weight: 700; font-size: 1.2em; }
.logo-menu span { color: var(--cyan); }
.botoes-menu { display: flex; gap: 5px; }
.btn-menu { color: rgb(241, 139, 6); text-decoration: none; font-size: 0.85em; padding: 8px 12px; border-radius: 20px; transition: 0.3s; }
.btn-menu:hover { background: rgba(0, 229, 255, 0.2); color: var(--cyan); }

/* BRILHO NO TÍTULO */
.hero { height: 100vh; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('image_29.png'); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: white; }

.brilho-titulo { 
    font-size: clamp(3em, 8vw, 5em); color: white; 
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.6);
    animation: pulsarBrilho 2s infinite alternate;
}
@keyframes pulsarBrilho {
    from { text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
    to { text-shadow: 0 0 30px rgba(0, 229, 255, 1), 0 0 50px rgba(0, 229, 255, 0.4); }
}

/* ESTRUTURA DE SEÇÕES - ATUALIZADO COM FUNDO MISSÃO */
.container-pequeno { max-width: 800px; margin: 0 auto; text-align: center; padding: 80px 20px; }
.container-flex { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 50px; padding: 80px 20px; }
.container-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 80px 20px; }

/* NOVA SEÇÃO MISSÃO (Três Colunas e Fundo Suave) */
.secao-missao {
    padding: 80px 2%;
    background: linear-gradient(135deg, #f8faff 0%, #eef2f7 100%); /* Fundo cinza azulado suave */
    position: relative;
    overflow: hidden;
}

.container-missao-completa {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
    background: #e1dceb(255, 255, 255, 0.4); /* Efeito de vidro sobre o fundo */
    padding: 40px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.coluna-lateral { flex: 1; }
.coluna-central { flex: 2; text-align: center; }

.img-missao {
    width: 100%;
    height: 400px; /* Mantém as duas imagens com o mesmo tamanho */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.secao-branca { background: white; }
.secao-cinza { background: #bbe8f3; }
.coluna { flex: 1; }
.img-ajustada { width: 100%; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); object-fit: cover; }

/* TEXTOS DA MISSÃO */
.bloco-texto { margin-bottom: 35px; }
.bloco-texto h2 { color: var(--dark); font-size: 1.8em; margin-bottom: 10px; }
.dizer { display: block; margin-top: 10px; font-style: italic; color: var(--azul); font-weight: 600; font-size: 0.95em; }

/* FORMULÁRIO E MAPA (Mantidos) */
.contato-info, .contato-form { background: rgb(189, 225, 241); padding: 40px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
.mapa-box { margin-top: 20px; border-radius: 15px; overflow: hidden; border: 1px solid #eee; height: 250px; }

.campo-grupo { position: relative; margin-bottom: 25px; }
.campo-grupo input, .campo-grupo textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 10px; outline: none; }
.campo-grupo label { position: absolute; left: 15px; top: 15px; color: #999; transition: 0.3s; pointer-events: none; }
.campo-grupo input:focus ~ label, .campo-grupo input:not(:placeholder-shown) ~ label { top: -22px; font-size: 12px; color: var(--azul); font-weight: bold; }

.btn-enviar { width: 100%; padding: 18px; background: linear-gradient(90deg, var(--azul), var(--cyan)); color: white; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; }
.btn-enviar:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,123,255,0.3); }

/* WHATSAPP */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #25d366; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2000; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }

@media (max-width: 768px) { .container-flex, .container-grid { grid-template-columns: 1fr; flex-direction: column; } .botoes-menu { display: none; } }

/* Estilização da Seção Missão Expandida */
.secao-missao {
    padding: 80px 2%;
    background: #e1dceb;
}

.container-missao-completa {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Alinha tudo pelo meio verticalmente */
    gap: 30px;
}

.coluna-lateral {
    flex: 1; /* Faz as imagens ocuparem o mesmo espaço nas pontas */
}

.coluna-central {
    flex: 2; /* Dá mais espaço para o texto no meio */
    text-align: center;
}

.img-missao {
    width: 100%;
    height: 400px; /* Altura fixa para ambas as imagens serem iguais */
    object-fit: cover; /* Corta a imagem sem distorcer para preencher a altura */
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.bloco-texto {
    margin-bottom: 35px;
}

.bloco-texto h2 {
    color: var(--dark);
    font-size: 1.8em;
    margin-bottom: 10px;
}

.bloco-texto p {
    color: #555;
    font-size: 1em;
    line-height: 1.6;
}

.dizer {
    display: block;
    margin-top: 10px;
    font-style: italic;
    color: var(--azul);
    font-weight: 600;
    font-size: 0.95em;
}

/* Responsividade para Celular */
@media (max-width: 992px) {
    .container-missao-completa {
        flex-direction: column;
    }
    .img-missao {
        height: 300px;
    }
}

/* --- ESTILOS DO MODAL FLUTUANTE --- */
.modal-overlay {
    display: none; /* Escondido por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 40, 85, 0.85); /* Fundo escuro com transparência */
    backdrop-filter: blur(8px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-card {
    background: white;
    width: 90%;
    max-width: 600px;
    padding: 40px;
    border-radius: 25px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: surgimentoModal 0.4s ease-out;
}

@keyframes surgimentoModal {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.fechar-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: 0.3s;
}

.fechar-modal:hover { color: var(--azul); }

.modal-header h2 { color: var(--dark); margin-bottom: 5px; }
.modal-header p { color: #666; font-size: 0.9em; margin-bottom: 25px; }

/* GRID DO FORMULÁRIO */
.grid-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-estilizado .campo-grupo { margin-bottom: 15px; }

.form-estilizado input, .form-estilizado select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
}

.termos-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85em;
    margin: 15px 0;
    color: #555;
}
/* --- ESTILO DO FORMULÁRIO FLUTUANTE --- */
.modal-overlay {
    display: none; /* Começa escondido */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fundo escurecido */
    z-index: 10000; /* Fica na frente de tudo */
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-card {
    background: rgb(100, 118, 153);
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.fechar-modal {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #666;
}

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Botão de Enviar dentro do Formulário */
.btn-enviar-teste {
    width: 100%;
    padding: 15px;
    background: #4ade80;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

/* --- CARDS DE PLANOS INTELIGENTES --- */
/* --- SEÇÃO DE PLANOS COM EFEITO PARALAXE --- */
.secao-planos {
    position: relative;
    padding: 100px 0;
    /* Camada de brilho sobre a imagem para dar leitura aos textos */
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
                url('image_26.png');
    background-attachment: fixed; /* Fixa a imagem no fundo */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-planos-completo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-planos {
    text-align: center;
    margin-bottom: 50px;
}

/* Grid de Cards */
.cards-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
}

.card-plano {
    /* Efeito Glassmorphism (Vidro) */
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px); 
    flex: 1;
    padding: 40px 30px;
    border-radius: 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Efeito Flutuante Inteligente */
.card-plano:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 25px 50px rgba(0, 123, 255, 0.2);
}

.card-plano.destaque {
    background: rgba(240, 247, 255, 0.95);
    transform: scale(1.05);
    z-index: 2;
}

.card-plano.destaque:hover {
    transform: scale(1.05) translateY(-15px);
}

/* Estilo dos textos internos */
.plano-tag { font-weight: 700; color: #777; text-transform: uppercase; margin-bottom: 10px; }
.plano-preco { font-size: 2.2em; font-weight: 800; color: #1a1a1a; margin-bottom: 20px; }
.plano-preco span { font-size: 0.5em; color: #888; }

.plano-features { list-style: none; padding: 0; margin-bottom: 25px; text-align: left; }
.plano-features li { padding: 10px 0; font-size: 0.9em; color: #444; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* Botões dos Cards */
.btn-selecionar, .btn-selecionar-destaque {
    padding: 15px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    display: block;
}

.btn-selecionar { background: #eee; color: #333; }
.btn-selecionar-destaque { background: #007bff; color: white(245, 245, 244); }

.card-plano:hover .btn-selecionar { background: #333; color: white; }

/* --- FUNDO DA SEÇÃO --- */
.secao-planos {
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
                url('image_26.png') no-repeat center center fixed;
    background-size: cover;
    padding: 100px 0;
}

/* --- CONTAINER TRANSPARENTE --- */
.container-grid-transparente {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 50px auto 0;
    padding: 0 20px;
}

/* --- FORÇANDO TRANSPARÊNCIA TOTAL --- */
.contato-info-transparente, .contato-form-transparente {
    background: rgba(255, 255, 255, 0.2) !important; /* Quase invisível */
    backdrop-filter: blur(8px); /* Efeito de vidro para dar elegância */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    color: #1a2a4d; /* Cor azul escuro para o texto ser lido sobre a imagem */
}

/* --- REMOVENDO O FUNDO CINZA QUE SOBROU --- */
.secao-contato {
    display: none; /* Isso apaga a seção antiga que estava duplicando o formulário */
}

/* --- BOTÃO DE ENVIO ÚNICO --- */
.btn-enviar-contato {
    width: 100%;
    padding: 15px;
    background: #00e5ff; /* Ciano oficial */
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-enviar-contato:hover {
    background: #00b8d4;
    transform: scale(1.02);
}

/* Estilização do botão Teste Gratuito no Menu */
.btn-destaque-menu {
    background-color: #4ade80 !important; /* Verde vibrante para chamar atenção */
    color: #1a2a4d !important; /* Texto escuro para contraste */
    padding: 10px 20px !important;
    border-radius: 50px !important; /* Formato de pílula */
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3) !important; /* Sombra suave verde */
    border: 2px solid transparent !important;
}

/* Efeito ao passar o mouse */
.btn-destaque-menu:hover {
    background-color: transparent !important;
    color: #4ade80 !important;
    border: 2px solid #4ade80 !important;
    transform: translateY(-2px); /* Leve subida */
    box-shadow: 0 6px 10px rgba(74, 222, 128, 0.5) !important;
}

/* Botão Teste Gratuito Refinado */
.btn-destaque-menu {
    background-color: #4ade80 !important; 
    color: #1a2a4d !important;
    padding: 6px 18px !important; /* Diminuí a altura para alinhar com o menu */
    border-radius: 6px !important; /* Menos redondo, mais corporativo */
    font-weight: 700 !important;
    font-size: 14px !important; /* Ajustado para bater com Home, Missão, etc */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important; /* Trava a altura para não empurrar o menu */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(74, 222, 128, 0.2) !important;
}

#missao {
    /* Fundo base claro e profissional */
    background-color: #f4f7f6 !important;
    
    /* Aplica a imagem dos ícones de EPI conectados */
    background-image: url('fundo-epis-conect.png'); /* Nome da imagem que você salvar */
    
    /* Faz a imagem se repetir de forma elegante */
    background-repeat: repeat;
    background-size: 400px; /* Ajusta o tamanho dos ícones no fundo */
    
    /* Cria um efeito de profundidade */
    background-attachment: fixed;
    
    /* Espaçamento para o conteúdo respirar */
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

/* Camada extra para garantir que o texto seja fácil de ler */
#missao::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(244, 247, 246, 0.8); /* "Véu" branco para suavizar os ícones */
    z-index: 1;
}

/* Garante que o conteúdo fique na frente do "véu" */
#missao .container, #missao h2, #missao div {
    position: relative;
    z-index: 2;
}

/* Estilização das frases em destaque (Azul Ciano da EPI CONECT) */
#missao blockquote, #missao .frase-destaque {
    color: #00d4ff !important;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
}

#missao {
    background-color: #f4f7f6 !important;
    /* Adicionamos as aspas e garantimos que o caminho seja lido corretamente */
    background-image: url("./fundo-epis-conect.png") !important;
    background-repeat: repeat !important;
    background-size: 600px !important;
    background-position: center !important;
    /* Removi o blend-mode por enquanto para garantir que a imagem apareça pura */
    padding: 100px 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 400px !important;
    z-index: 1 !important;
}

#missao h2, #missao h3 {
    position: relative;
    z-index: 2;
    color: #1a2b3c !important;
}

#missao p, #missao blockquote {
    position: relative;
    z-index: 2;
}