/* --- GERAL & RESET --- */
:root {
    --green-primary: #008761;
    --green-dark: #0c3a2d;
    --green-light: #c4e7dd;
    --text-light: #ffffff;
    --text-dark: #333333;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background-color: var(--text-light); /* Fundo geral branco */
}

h1, h2, h3 {
    font-weight: 800;
}

section {
    padding: 60px 5%;
}

/* --- ESTILO DO BOTÃO (VERSÃO CORRIGIDA) --- */
.btn {
    display: inline-block;
    background-color: var(--green-primary);
    color: var(--text-light);
    padding: 14px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    transition: background-color 0.3s, color 0.3s; 
}

/* Estilo do botão específico no header (SEM !important) */
#botao-header {
    background-color: #FFFFFF;
    color: var(--green-primary);
    border: 2px solid var(--green-primary);
}

/* O hover geral para os botões verdes (SEM !important) */
.btn:hover {
    background-color: #006a4c;
}

/* O hover específico para o botão do header (ele vai funcionar agora) */
#botao-header:hover {
    background-color: var(--green-primary);
    color: var(--text-light);
}


/* --- 1. HERO SECTION ) --- */
.hero-section {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center; /* Alinhamento padrão para desktop */
    padding: 0 8%;
    color: var(--text-light);
    overflow: hidden;
}

#logo_branco_hero{
   
    margin-left: -50px;
    margin-bottom: -50px;
    z-index: 3;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0) 80%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 650px;
}

.hero-logo {
    width: 150px;
    margin-bottom: 30px;
}

.hero-content h1 {
    font-size: clamp(3.5rem, 10vw, 6rem);
    line-height: 1.1;
    white-space: nowrap;
}

.hero-content p {
    font-size: 1.1rem;
    margin: 15px 0 25px;
}

/* --- 2. BENEFITS SECTION --- */
.benefits-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    background-color: var(--text-light);
    padding: 80px 8%;
}

.benefits-image-column {
    position: relative;
    flex: 1; 
    min-width: 45%;
}

.benefits-main-image {
    width: 100%;
    border-radius: 8px;
}

.plus-icon {
    position: absolute;
    opacity: 0.6;
    z-index: 1;
}
.icon-1 {
    width: 160px; 
    bottom: -40px;
    left: -60px;
}
.icon-2 {
    width: 100px; 
    top: -40px;
    right: 40px;
}

.benefits-content-column {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.benefits-content-column h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    max-width: 500px;
    margin-bottom: 40px;
    font-weight: 500;
    color: var(--text-dark);
}

.benefits-content-column h2 .highlight {
    color: var(--green-primary);
    font-weight: 800;
}

.benefits-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--green-primary); /* Padrão verde escuro */
    color: var(--text-light);
    padding: 20px;
    border-radius: 8px;
}

.card img {
    width: 45px;
    filter: brightness(0) invert(1); /* Padrão ícone branco */
}

/* Regra para intercalar as cores: seleciona os cards PARES (2º e 4º) */
.card:nth-child(even) {
    background-color: var(--green-light);
    color: var(--green-dark);
}

/* Remove o filtro branco dos ícones nos cards claros */
.card:nth-child(even) img {
    filter: none;
}

.card-text h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.card-text p {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.6;
}

.card-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 10px;
}

/* --- 3. NETWORK SECTION  --- */
.network-section {
    padding: 0;
    background-color: #f8f9fa;
}

.network-image-desktop,
.network-image-mobile {
    width: 100%;
    height: auto;
    display: block;
}

.network-image-desktop {
    display: block;
}
.network-image-mobile {
    display: none;
}

/* --- 4. CONTACT SECTION  --- */
.contact-section {
    position: relative;
    padding: 0;
    display: flex;
    min-height: 80vh;
    overflow: hidden;
}

.contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.contact-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.contact-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0) 80%);
    z-index: 2;
}

.contact-content {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    align-items: center;
}

.contact-form-wrapper {
    padding: 5%;
    max-width: 700px;
    width: 100%;
}

.contact-form-wrapper h2 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    line-height: 1.1;
    color: var(--text-light);
}
.contact-form-wrapper p {
    font-size: 1.2rem;
    margin: 15px 0 30px;
    color: var(--text-light);
}

.contact-form-wrapper .result {
    font-size: 1.2rem;
    color: var(--text-light);
}

.contact-form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

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

.form-grid input {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

.btn-form {
    border: none;
    font-size: 1.1rem;
    margin-top: 15px;
}

.contact-logo {
    width: 150px;
    margin-top: 30px;
    filter: brightness(0) invert(1);
}

#anslogo{
    width: 180px; 
    height: auto;
    padding-left: 25px;
    padding-top: 35px;
}


/* --- RESPONSIVIDADE (MEDIA QUERIES) --- */

/* Telas de Celular e Tablet na Vertical */
@media (max-width: 768px) {
    /* Mostra a imagem mobile da seção de rede */
    .network-image-desktop {
        display: none;
    }
    .network-image-mobile {
        display: block;
    }

    /* Troca a imagem de fundo do header no mobile */
    .hero-background {
        background-image: url('../images/header_mobile.png');
        background-size: cover;
        background-position: center;
    }
    .hero-background img {
        display: none;
    }

    /* === AJUSTES NO HEADER PARA MOBILE === */
    .hero-section {
    align-items: flex-start;
    padding-top: 60px; 
    height: 70vh;
}
    /* Reduz o espaçamento entre os elementos do header */
    .hero-logo {
        width: 120px;
        margin-bottom: 20px;
    }
    .hero-content h1 {
        /* Ajusta o tamanho da fonte especificamente para mobile */
        font-size: 2.8rem;
    }
    .hero-content p {
        font-size: 1rem;
        margin: 10px 0 20px; /* Margens reduzidas */
    }
}


/* Telas de Tablet e Maiores */
@media (min-width: 768px) {
    .benefits-section {
        flex-direction: row;
        align-items: center;
    }
    .contact-content {
         width: 70%;
    }

    /* Layout do formulário para desktop */
    .form-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .form-group-nome     { grid-column: span 4; }
    .form-group-idade    { grid-column: span 2; }
    .form-group-email    { grid-column: span 6; }
    .form-group-whatsapp { grid-column: span 6; }
    .form-group-cidade   { grid-column: span 6; }
}

/* Telas de Desktop */
@media (min-width: 1024px) {
    .contact-content {
        width: 55%;
    }
    .contact-background img {
        object-position: center;
    }
    .network-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .network-grid .location-card:nth-child(5), 
    .network-grid .location-card:nth-child(6) {
        grid-column: span 2;
    }
}

/* --- ÁREA LOGO E SELO ANS --- */

/* 1. O Contêiner Principal que alinha tudo */
.logo-ans-container {
  display: flex;       
  align-items: center; 
  gap: 15px;       
  margin-top: 25px;    
}

/* 2. Estilo da Logo (extraído do seu CSS anterior) */
.contact-logo {
  width: 150px; 
  filter: brightness(0) invert(1); 
  margin-top: -30px;  /* OBS: Esta margem pode não ser mais necessária aqui, 
                             pois o flexbox já está gerenciando o alinhamento. 
                             Você pode remover ou ajustar conforme precisar. */
}

/* 3. Estilo do Selo da ANS (que criamos juntos) */
.ans-registro {
  display: inline-block;
  background-color: #000000;
  border: 1px solid #a1a1a1;
  font-size: 15px;

  /* Controle principal de tamanho e proporção */
  font-size: 10px; 

  /* O padding e o raio da borda se adaptam ao font-size */
  padding: 0.4em 0.8em;
  border-radius: 0.25em;

  /* Estilo do texto */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- POSICIONAMENTO DO SELO ANS NA HERO SECTION --- */

/* 1. Prepara a hero-section para ser a referência de posicionamento */
.hero-section {
  position: relative; /* ESSENCIAL! Torna este o container pai para o posicionamento absoluto. */
}

/* 2. Estilo e posicionamento do selo ANS */
.ans-hero-badge {
  /* Posicionamento para Desktop */
  position: absolute; /* Solta o elemento do fluxo normal da página */
  top: 40px;          /* Distância do topo */
  right: 8%;          /* Distância da direita (mesmo padding da .hero-section) */
  z-index: 10;        /* Garante que ele fique na frente de outros elementos */
  
  /* Estilos de layout que já criamos (Flexbox) */
  display: flex;
  align-items: center;
  gap: 15px;
}

.ans-hero-badge .ans-registro 
{
     font-size: 18px;
}

/* 3. Ajustes para telas menores (Mobile) */
@media (max-width: 768px) {
  .ans-hero-badge {
    top: 20px;  /* Diminui a distância do topo no mobile */
    right: 5%;  /* Diminui a distância da direita no mobile */
  }

  /* Opcional: Diminuir o tamanho do selo no mobile para não ocupar muito espaço */
  .ans-hero-badge .ans-registro {
    font-size: 12px;
  }
  .ans-hero-badge .contact-logo {
    width: 80px; /* Ajuste o tamanho da logo conforme necessário */
  }
}