/* * Estilos para o site da Corretora Sua Saúde * Design moderno, limpo e responsivo para máxima conversão. */
/* 1. VARIÁVEIS E ESTILOS GLOBAIS */
:root {
    /*
     * Cores principais extraídas diretamente da logomarca da CentralGroup.
     * A logo utiliza um azul marinho profundo e um azul turquesa vibrante.
     * Ajustamos as variáveis para refletir essas tonalidades, deixando
     * o degradê mais clean e futurista.
     */
    --primary-blue: #0e3e9c;   /* Azul escuro da logo */
    --secondary-blue: #36a8de; /* Azul turquesa da logo */
    --light-blue-bg: #f4f8fb; /* Fundo azul bem claro e suave */
    --dark-text: #263238; /* Cor de texto principal */
    --light-text: #546e7a; /* Cor de texto secundário */
    --white: #ffffff;
    --gray-border: #ced4da;
    --section-padding: 5rem 1rem;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;
}


/* ==========================================================================
   Carrossel de Feedbacks
   Estas classes permitem que o bloco de depoimentos seja exibido como um
   carrossel com navegação por setas. O contêiner desliza horizontalmente
   e oculta o overflow lateral, enquanto as setas controlam a rolagem.
   Definido fora dos media queries para que funcione em todas as larguras.
   ========================================================================== */
.feedback-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 2rem;
}

.feedback-carousel {
    flex: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.feedback-carousel .testimonials-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.carousel-prev,
.carousel-next {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--primary-blue);
    cursor: pointer;
    padding: 0 0.75rem;
    z-index: 2;
}

.carousel-prev:hover,
.carousel-next:hover {
    color: var(--secondary-blue);
}

/*
 * Ajustes de logotipo e seções para dispositivos móveis
 *
 * Unificamos os ajustes de tamanho para a logomarca principal (hero-logo-static)
 * e o logotipo do cabeçalho em um conjunto de media queries organizado.
 * Em telas médias (≤768px) o logo do cabeçalho diminui um pouco e a marca
 * principal da hero também reduz de tamanho. Em telas pequenas (≤480px)
 * aplicamos tamanhos ainda menores para otimizar a leitura e evitar
 * quebras inesperadas. Esses ajustes garantem que o site permaneça
 * responsivo sem definições conflitantes.
 */

@media (max-width: 768px) {
    /*
     * Para dispositivos móveis, definimos uma posição relativa no contêiner
     * de links de navegação. Sem essa propriedade, o menu "hambúrguer"
     * posiciona a lista de links em relação ao documento inteiro,
     * causando problemas de sobreposição e dificultando a navegação.
     */
    .nav-links-container {
        position: relative;
    }
    /* Reduz o tamanho do logo no cabeçalho */
    .logo-container {
        /* Em telas médias reduzimos ainda mais o logotipo do cabeçalho
           para evitar que o cabeçalho ocupe espaço excessivo. */
        width: 90px;
        height: 90px;
    }
    .logo-area .logo-container .logo-img {
        width: 80px;
        height: 80px;
    }
    /* Ajusta a logomarca principal na seção hero para caber em telas médias */
    .hero-logo-static {
        width: 260px;
        height: 260px;
    }
    /* Ajuste para logomarca flutuante no hero em telas médias */
    .hero-logo-floating {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 480px) {
    /* Ajustes adicionais para telas muito pequenas */
    .logo-container {
        width: 70px;
        height: 70px;
    }
    .logo-area .logo-container .logo-img {
        width: 60px;
        height: 60px;
    }
    .hero-logo-static {
        width: 200px;
        height: 200px;
    }
    /* Ajuste para logomarca flutuante no hero em telas pequenas */
    .hero-logo-floating {
        width: 140px;
        height: 140px;
    }
z
    /* Em telas muito pequenas, ocultamos a tagline da marca e reduzimos
       ligeiramente o tamanho do nome da empresa para caber no cabeçalho
       sem truncar. */
    .brand-text .tagline {
        display: none;
    }
    .brand-text .company-name {
        font-size: 1.6rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    color: var(--dark-text);
    background-color: var(--white);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

img {
    max-width: 100%;
    display: block;
    /* Garante que todas as imagens se ajustem à largura do contêiner e
       reduza proporcionalmente em telas menores sem distorcer o layout */
    height: auto;
}

.section {
    padding: var(--section-padding);
}

/*
 * =========================
 * GRADIENT BACKGROUNDS
 *
 * Para criar um visual clean e futurista, aplicamos um gradiente suave
 * usando as duas cores principais da marca (primary-blue e secondary-blue)
 * em cada seção do site, exceto a hero (página inicial). O texto das
 * seções é ajustado para branco para manter contraste adequado. Para
 * cartões e componentes internos que precisam de fundo claro, definimos
 * estilos específicos mais adiante.
 */
/*
 * Aplicamos um gradiente leve em azul claro às seções do site,
 * exceto a seção Quem Somos (que é branca) e o herói. Isso harmoniza
 * com o design clean do banner de abertura, criando continuidade
 * visual sem a tonalidade escura anterior.
 */

/* =====================================================================
   CORES ALTERNADAS PARA CADA SEÇÃO

   Para melhorar a legibilidade e dar destaque aos nomes de cada seção,
   aplicamos cores de fundo diferentes alternadamente. A seção de CTA (contact)
   usa o mesmo gradiente escuro do cabeçalho para criar uma conexão visual
   antes do rodapé. As demais seções variam entre fundo branco e um
   degradê azul claro.
====================================================================== */
#partners.section {
    background: var(--white);
    color: var(--dark-text);
}

#produtos.section {
    background: linear-gradient(120deg, #e3f2fd, var(--light-blue-bg));
    color: var(--dark-text);
}

#how-it-works.section {
    background: var(--white);
    color: var(--dark-text);
}

#feedback.section {
    background: linear-gradient(120deg, #e3f2fd, var(--light-blue-bg));
    color: var(--dark-text);
}

#contact.section {
    /* Mesma cor do topo: gradiente escuro em azul para a CTA final */
    background: linear-gradient(60deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: var(--white);
}

/* Ajusta as cores de títulos, subtítulos e textos em seções com gradiente */
#about .section-title,
#partners .section-title,
#produtos .section-title,
#how-it-works .section-title,
#feedback .section-title,
#contact .section-title,
#about .section-title-sub,
#partners .section-title-sub,
#produtos .section-title-sub,
#how-it-works .section-title-sub,
#feedback .section-title-sub,
#contact .section-title-sub,
#about .section-subtitle,
#partners .section-subtitle,
#produtos .section-subtitle,
#how-it-works .section-subtitle,
#feedback .section-subtitle,
#contact .section-subtitle {
    color: var(--white);
}

/*
 * As seções com fundo claro (parceiros, produtos, como funciona, feedback)
 * recebem títulos em azul e subtítulos em texto leve para garantir
 * contraste. A seção de CTA mantém os títulos em branco.
 */
#partners .section-title,
#produtos .section-title,
#how-it-works .section-title,
#feedback .section-title {
    color: var(--primary-blue);
}

#partners .section-title-sub,
#produtos .section-title-sub,
#how-it-works .section-title-sub,
#feedback .section-title-sub,
#partners .section-subtitle,
#produtos .section-subtitle,
#how-it-works .section-subtitle,
#feedback .section-subtitle {
    color: var(--light-text);
}

#contact .section-title,
#contact .section-title-sub,
#contact .section-subtitle {
    color: var(--white);
}

/* === Ajustes específicos para a seção "Quem Somos" ===
 * O gradiente global não se aplica mais à seção Quem Somos. Em vez
 * disso, usamos um fundo claro (branco) com texto escuro e destacamos
 * os títulos com o azul da marca. Esta regra vem depois da regra
 * global de gradiente para garantir que tenha precedência. */
#about.section {
    background: var(--white);
    color: var(--dark-text);
}

/* Garantir que todos os textos dentro da seção Quem Somos permaneçam com
   cor escura mesmo após outras regras de herança. O uso de !important
   evita que gradientes ou outras cores globais se sobreponham.
*/
#about, #about .about-content {
    color: var(--dark-text) !important;
}
#about .about-content p {
    color: var(--dark-text) !important;
}
#about .about-content strong {
    color: var(--primary-blue) !important;
}

#about .section-title,
#about .section-title-sub,
#about .section-subtitle {
    color: var(--primary-blue);
}

#about .about-content p {
    color: var(--dark-text);
}

#about .about-content strong {
    color: var(--primary-blue);
}

/* Ajusta o título h2 da seção Quem Somos, que não utiliza a classe
   section-title. Aplicamos a mesma tipografia e decoração dos demais
   títulos para garantir consistência visual e legibilidade. */
#about h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue) !important;
    margin-bottom: 1rem;
    text-align: left;
    position: relative;
}

/* Insere a barra decorativa abaixo do h2 em Quem Somos */
#about h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--secondary-blue);
    margin-top: 0.5rem;
    border-radius: 2px;
}

#about .about-image img {
    object-fit: cover;
    object-position: center;
}

/*
 * Ajuste do texto da seção "Quem Somos" para usar cores escuras em
 * fundo claro. O texto principal fica em dark-text e os destaques
 * utilizam o azul primário, mantendo a harmonia com o restante do site.
 */
#about .about-content p {
    color: var(--dark-text);
    line-height: 1.6;
}
#about .about-content strong {
    color: var(--primary-blue);
}

/* Ajuste anterior da imagem da seção "Quem Somos" foi removido.
   A posição do objeto agora é definida em uma regra posterior para
   centralizar o conteúdo, pois a imagem de família ocupa todo o espaço. */
#about .about-image img {
    /* As propriedades de object-fit e object-position são definidas em uma regra posterior */
}

/*
 * PRODUTOS: mantém os cartões em branco com texto escuro e títulos em azul.
 */
#produtos .produto-card {
    background-color: var(--white);
    color: var(--dark-text);
}
#produtos .produto-card h3 {
    color: var(--primary-blue);
}
#produtos .produto-card .produto-icon {
    color: var(--secondary-blue);
}

/*
 * COMO FUNCIONA: Os cards permanecem brancos e a escrita em azul para
 * contrastar com o degradê do fundo. As bordas superiores continuam
 * coloridas com o secondary-blue para consistência visual.
 */
#how-it-works .step-card {
    background: var(--white);
    color: var(--primary-blue);
}
#how-it-works .step-card h3,
#how-it-works .step-card p {
    color: var(--primary-blue);
}
#how-it-works .step-card .step-icon {
    color: var(--secondary-blue);
}

/*
 * FEEDBACK (depoimentos): Os cards de depoimentos são brancos com texto escuro
 * para destacar sobre o fundo em degradê. Sem isso, o texto herdaria a cor
 * branca definida na seção.
 */
.testimonials .testimonial-card {
    color: var(--dark-text);
    background: var(--white);
}
.testimonials .author strong {
    color: var(--primary-blue);
}

/* Ajusta também as estrelas do feedback para azul */
.testimonials .stars {
    color: var(--secondary-blue);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
    /* Decorativo: insere uma barra de cor abaixo de cada título para
       destacar o nome da seção. O tamanho e a cor são definidos
       para harmonizar com a paleta da marca sem adicionar peso
       visual excessivo. */
    position: relative;
}

/* Barra colorida embaixo dos títulos das seções */
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--secondary-blue);
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
}

/* O título da seção de contato (CTA final) usa uma barra branca para garantir
   contraste sobre o fundo escuro. */
#contact .section-title::after {
    background: var(--white);
}

.section-title-sub {
    text-align: center;
    font-size: 1.25rem;
    color: var(--light-text);
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--light-text);
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

/* ========================================================================== HEADER PERSONALIZADO */
.site-header {
    position: sticky;
    top: 0;
    /*
     * Aumentamos o z-index do cabeçalho para que o botão do menu hambúrguer
     * permaneça visível acima do menu móvel quando este estiver aberto.
     */
    z-index: 1200;
    width: 100%;
    /* Reduz o padding vertical para deixar o topo mais compacto */
    padding: 0.5rem 0;
    background: linear-gradient(60deg, var(--primary-blue) 0%, #134fa9 50%, #1565c0 100%);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Impede que o conteúdo do cabeçalho quebre linha em telas menores,
   mantendo a logomarca e o botão de menu alinhados na mesma linha. */
@media (max-width: 768px) {
    /* Permite que o conteúdo do cabeçalho quebre linha em telas menores.
       A versão anterior forçava nowrap, fazendo com que a soma da logo,
       texto e botão excedesse a largura da viewport e criasse uma faixa
       branca no lado direito em celulares. Ao permitir quebra de linha,
       os elementos se ajustam verticalmente e o cabeçalho permanece dentro
       da largura do dispositivo. */
    .header-inner {
        flex-wrap: wrap;
    }
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Adiciona espaçamento extra à direita para que os itens de navegação não grudem na marca
       mesmo com a logomarca ampliada. */
    margin-right: 2rem;
}

/* Em dispositivos móveis, removemos a margem extra à direita da marca para alinhar melhor
   o topo e permitir que o botão de menu se posicione corretamente. */
@media (max-width: 768px) {
    .logo-area {
        margin-right: 0;
    }
}

.logo-container {
    /* Ajustes para destacar melhor o ícone da logo: adiciona um fundo radial suave
       e forma circular para criar contraste contra o cabeçalho. */
    position: relative;
    /* Reduzimos levemente o tamanho da esfera para melhorar o equilíbrio
       visual do cabeçalho em telas grandes. Ela ainda continua maior
       que o padrão original para dar destaque à marca, mas ocupa
       menos espaço horizontal. */
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* Fundo radial sutil para destacar a marca sem criar distração. */
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.logo-container::before {
    /* Ocultamos completamente o brilho e sombra ao redor do logo
       já que a esfera foi removida. */
    display: none;
}

/* Anel giratório */
.logo-container::after {
    /* Ocultamos o anel giratório para uma aparência mais limpa
       sem a esfera de fundo. */
    display: none;
}

/* Encontre e substitua esta regra no seu style.css */

/* LOGO CENTRALIZADA NA ESFERA (VERSÃO CORRIGIDA)
   Ajustada para ser responsiva: em vez de uma largura fixa de 400px, a imagem
   ocupa 100% da largura disponível de seu contêiner e mantém a proporção. A
   posição absoluta é removida para que a logo permaneça dentro do fluxo
   normal do layout. */
.logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: static;
    transform: none;
    z-index: 2;
    /* Mantemos o efeito de brilho de forma discreta */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
}

/* Ajuste específico para a logomarca no cabeçalho:
   utiliza tamanho reduzido para encaixar no contêiner de 105px e preservar
   a proporção original. Essa regra tem maior especificidade e
   portanto sobrescreve a definição global .logo-img quando aplicada
   dentro de .logo-area. */
/* Ajuste específico para a logomarca no cabeçalho:
   Em telas menores, a logomarca ocupa todo o contêiner disponível, mas com um
   tamanho máximo para não estourar o cabeçalho. A altura é automática para
   preservar a proporção da imagem. */
.logo-area .logo-container .logo-img {
    max-width: 160px;
    max-height: 160px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: none;
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--white);
}

.brand-text .company-name {
    font-weight: 700;
    /* Aumentamos a fonte do nome da empresa para trazer mais
       destaque à marca no topo do site. */
    font-size: 2rem;
}

.brand-text .tagline {
    /* Ajuste de tamanho para a tagline, harmonizando com o nome
       maior da empresa no cabeçalho. */
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    opacity: 0.8;
}

.nav-links-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Evita que os links quebrem linha em resoluções maiores; eles sempre
       permanecem na mesma linha. O menu móvel lidará com a responsividade. */
    flex-wrap: nowrap;
    gap: 1rem;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    position: relative;
    padding-bottom: 6px;
    /* Impede que as entradas "Quem Somos" e "Como Funciona" quebrem em duas linhas.  
       Esta regra garante que cada item de navegação permaneça em uma única linha,
       independentemente da largura disponível. */
    white-space: nowrap;
    /* Evita que o item de navegação diminua e quebre em duas linhas
       quando o espaço horizontal é limitado. */
    flex-shrink: 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #00bcd4;
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: #c1e8ff;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active {
    color: #c1e8ff;
}

.nav-links a.active::after {
    width: 100%;
}

.nav-links .btn-nav {
    /* Botão de navegação (Cotação) recebe um gradiente para maior destaque */
    /* Gradiente utilizando os tons principais da paleta para dar mais vida
       ao botão. A transição do azul secundário para o azul primário é
       perceptível mesmo em tamanhos menores. */
    background-image: linear-gradient(to right, var(--secondary-blue), var(--primary-blue));
    color: var(--white);
    /* Ajustamos o padding do botão de navegação para um visual mais clean */
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: background-position 0.3s ease, color 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    /* Pequena sombra para elevar o botão em relação ao plano de fundo */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.nav-links .btn-nav:hover {
    /* Ao passar o mouse, deslize o gradiente e mantenha a cor branca do texto */
    /* Darker gradient on hover */
    background-image: linear-gradient(to right, #1565c0, #0b3c8d);
    color: var(--white);
    transform: translateY(-2px);
}

/* 3. SEÇÃO HERO */
.hero {
    /* Redefine o fundo para um degradê azul claro, recriando a estética original
       clean e acolhedora. O padding volta para a configuração original para
       criar espaço entre o cabeçalho e o conteúdo. */
    background-color: var(--light-blue-bg);
    background-image: linear-gradient(120deg, #e3f2fd, var(--light-blue-bg));
    /* Reduz o espaçamento superior do hero para aproximar a logomarca do topo */
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}

/*
 * 3.1 HERO-BANNER
 *
 * A classe `.hero-banner` aplica o banner "Cuidamos de você" como plano de fundo
 * para a seção inicial. O background combina a imagem com um gradiente
 * translúcido de tons claros, garantindo que a fotografia seja visível
 * enquanto o texto permanece legível. A altura mínima e o alinhamento
 * central vertical ajudam a manter a estrutura harmoniosa em telas de
 * diferentes tamanhos. A sobreposição de texto é controlada pela
 * classe `.hero-content-overlay`.
 */
.hero-banner {
    /* Sobrepõe a imagem de fundo com um gradiente suave para reforçar a
       identidade azulada sem perder o brilho da fotografia. */
    /* Aumentamos ligeiramente a opacidade do gradiente para minimizar
       a leitura do texto impresso na imagem original (banner), mantendo
       ainda a percepção da fotografia ao fundo. */
    background-image: linear-gradient(120deg, rgba(227, 242, 253, 0.97), rgba(244, 248, 251, 0.97)), url('../images/about_cover.webp');
    background-size: cover;
    /* Posicionamos a imagem de fundo à direita para evitar que o texto
       do banner original apareça por trás do conteúdo sobreposto. */
    background-position: right center;
    background-repeat: no-repeat;
    min-height: 70vh;
    padding: 4rem 1rem;
    display: flex;
    align-items: center;
    position: relative;
}

/* Conteúdo sobreposto no herói-banner */
.hero-content-overlay {
    max-width: 650px;
    z-index: 1;
}

/* Ajuste de cores e tamanhos para textos no herói reformulado */
.hero-banner .hero-topline {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--secondary-blue);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
    display: block;
}
.hero-banner h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    color: var(--primary-blue);
    margin-bottom: 1.2rem;
    font-weight: 700;
}
.hero-banner p {
    font-size: 1.15rem;
    color: var(--dark-text);
    margin-bottom: 2rem;
}
/* Centraliza o texto do herói em telas menores */
@media (max-width: 768px) {
    .hero-banner {
        text-align: center;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .hero-content-overlay {
        margin: 0 auto;
    }
}

/*
 * Removemos os símbolos '+' decorativos da seção hero para preservar
 * um visual mais clean e evitar interferência com o novo banner.
 * Caso deseje reintroduzi-los no futuro, basta restaurar este bloco
 * e ajustar as classes conforme necessário.
 */
.hero::before,
.hero::after {
    display: none;
}

/* Remove os símbolos '+' decorativos da versão com banner. Quando a
   seção hero recebe a classe `.hero-banner`, desativamos os
   pseudo-elementos ::before e ::after para evitar interferência no
   texto e na imagem de fundo. */
.hero-banner::before,
.hero-banner::after {
    /* Ocultamos completamente os pseudo-elementos para que os
       símbolos '+' não apareçam quando o herói é um banner. */
    display: none !important;
}

.hero::before {
    top: 15%;
    left: 5%;
}

.hero::after {
    bottom: 15%;
    right: 10%;
    transform: rotate(45deg);
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}

/*
 * Em dispositivos com largura reduzida, a seção hero passa a empilhar
 * o conteúdo e as imagens verticalmente. Isso garante que a logomarca,
 * o texto e as fotos se unam de forma harmoniosa sem exigir rolagem
 * horizontal. A centralização cria uma experiência consistente
 * independentemente da largura da tela.
 */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        align-items: center;
    }
    .hero-content,
    .hero-images {
        max-width: 100%;
    }
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-topline {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-blue);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1rem;
    display: block;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    line-height: 1.2;
    color: var(--primary-blue);
    margin-bottom: 1.2rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--light-text);
    margin-bottom: 2rem;
}

.btn-hero {
    background-color: var(--secondary-blue);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
}

.btn-hero:hover {
    background-color: var(--primary-blue);
    transform: translateY(-3px);
}

.hero-graphic {
    flex: 1;
    max-width: 600px;
}

.hero-graphic img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.hero-container>div {
    position: relative;
    z-index: 1;
}

/*
 * 3.2 HERO-IMAGES
 *
 * A nova estrutura do herói utiliza um contêiner `.hero-images` para empilhar
 * duas imagens: o banner "Cuidamos de você" e a foto da família. Este
 * contêiner ocupa metade do espaço disponível e garante que as imagens
 * mantenham a proporção original com bordas arredondadas e sombra. O
 * espaçamento entre as imagens cria uma separação visual agradável.
 */
.hero-images {
    /* A imagem ocupa o mesmo espaço que o conteúdo de texto e nunca
       excede a largura do contêiner. A proporção fica preservada em
       diferentes tamanhos de tela. */
    flex: 1;
    max-width: 100%;
    display: block;
}
.hero-images img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/*
 * Animação de logomarca flutuante
 *
 * Este elemento aparece no topo da área de conteúdo do herói,
 * crescendo suavemente e desvanecendo à medida que surge na tela. A
 * classe é inserida diretamente no HTML e este bloco define o seu
 * comportamento, tamanho e animação.
 */
.hero-logo-floating {
    /* Logomarca flutuante posicionada logo abaixo do topo.
       Aumentamos levemente o tamanho para realçar a marca e a
       animação de surgimento. */
    width: 240px;
    height: 240px;
    margin: 0 auto 1rem auto;
    position: relative;
    opacity: 0;
    animation: revealLogo 1.8s ease-out forwards;
}
.hero-logo-floating img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));
}
@keyframes revealLogo {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .hero-logo-floating {
        width: 200px;
        height: 200px;
    }
}

/*
 * NOVA ESTRUTURA DO HERÓI
 *
 * A seção hero agora é composta por duas partes: uma imagem grande que ocupa
 * todo o topo da página e um bloco de marca logo abaixo. A imagem se adapta
 * à largura da tela e mantém sua proporção, enquanto o bloco de marca
 * exibe a logomarca, o nome da empresa, a tagline e um botão de ação.
 */

/* Contêiner da imagem principal do hero. A imagem cobre toda a largura
   do viewport, com altura proporcional definida em CSS para preservar
   a proporção original da fotografia. */
.hero-image {
    width: 100%;
    max-height: 70vh;
    overflow: hidden;
    position: relative;
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bloco de marca abaixo da imagem. Centraliza todo o conteúdo e aplica
   espaçamento adequado para uma apresentação equilibrada. O fundo branco
   fornece contraste com a imagem escura e os degradês das outras seções. */
.hero-brand {
    text-align: center;
    background-color: var(--white);
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Logomarca dentro do bloco de marca. O tamanho é reduzido para melhor
   proporção em relação ao texto e botão. */
.hero-brand-logo {
    width: 200px;
    height: auto;
    display: block;
}

/* Nome da empresa no bloco de marca. Usa a cor primária para reforçar
   a identidade visual e se destaca em relação ao fundo branco. */
.hero-brand-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue) !important;
    margin: 0;
}

/* Tagline abaixo do nome da empresa. Usa a cor secundária para
   complementar o esquema de cores da logo. */
.hero-brand-tagline {
    font-size: 1.2rem;
    color: var(--secondary-blue) !important;
    margin: 0;
}

/* Ajuste do botão de ação dentro do bloco de marca. Aproveita as
   definições existentes de .btn-hero mas centraliza o elemento e
   cria espaçamento adicional acima dele. */
.hero-brand .btn-hero {
    margin-top: 1.5rem;
}

/*
 * Logotipo na seção hero
 * O bloco abaixo adiciona a logomarca centralizada acima da tagline
 * “Saúde & Bem-estar”. O tamanho é responsivo e a animação suave
 * cria um efeito de flutuação discreto para atrair o olhar sem
 * distrair a leitura.  
 */
/* =====================================================================
   Logotipo na seção hero (versão grande)
   Posiciona a logomarca imediatamente abaixo do topo da página, com
   dimensão de 300×300 px e animação suave de flutuação. O espaçamento
   interno em `.hero-content` reserva espaço abaixo do header para que
   o texto da seção comece somente após a logo.
===================================================================== */
.hero-content {
    position: relative;
    /* A logomarca principal agora faz parte do fluxo do layout, então
       removemos o espaçamento gigantesco. Um padding moderado garante
       respiração entre o cabeçalho e o conteúdo. */
    padding-top: 2rem;
}

/* A logomarca flutua centralizada logo abaixo do topo */
.hero-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    z-index: 10;
    pointer-events: none;
    animation: floatLogoFix 8s ease-in-out infinite;
    /* Ajustes visuais: centraliza o conteúdo e adiciona um fundo sutil
       para garantir contraste da logomarca grande contra o fundo claro. */
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

.hero-logo img,
.hero-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));
}

/*
 * Versão estática da logomarca na seção hero. Esta classe é usada
 * quando a logomarca é inserida diretamente no fluxo do layout,
 * centralizada e com animação suave. O contêiner recebe um fundo
 * radial e borda arredondada para destacar a logomarca contra o
 * fundo claro.
 */
/*
 * Ajustes para a logomarca principal (hero).
 * A logo agora mede 400 px de largura e altura, com margem inferior
 * para separar do título "Saúde & Bem‑estar". O fundo radial mantém
 * o destaque visual e a animação suave de flutuação permanece.
 */
.hero-logo-static {
    /* tamanho aumentado para 500px de largura e altura */
    width: 500px;
    height: 500px;
    margin: 0 auto 2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    /* usa nova animação de flutuação para dar mais dinamismo */
    animation: floatLogoLarge 6s ease-in-out infinite;
}

/* ======================================================================
   WATERMARK DE FUNDO COM LOGO

   Para reforçar a identidade visual e criar um efeito moderno, o site
   utiliza a marca como marca d'água animada no fundo. O pseudo-elemento
   ::before do body desenha o logotipo de forma sutil e com baixa
   opacidade. O movimento lento é realizado por uma animação que
   desloca a imagem em diagonal, criando a sensação de profundidade
   sem distrair os visitantes.
====================================================================== */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    /* Usamos top/right/bottom/left para esticar o pseudo-elemento em vez de 100vw/100vh.
       100vw inclui a largura da barra de rolagem, causando um deslocamento horizontal (faixa branca)
       em páginas com scroll vertical. Atribuindo todas as direções a 0, o elemento ocupa
       exatamente a área visível sem aumentar a largura do body. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('../images/logo_symbol.webp');
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    opacity: 0.04;
    z-index: -1;
    animation: moveLogoBackground 40s linear infinite;
}

@keyframes moveLogoBackground {
    0% {
        transform: translate(-10%, -10%);
    }
    50% {
        transform: translate(10%, 10%);
    }
    100% {
        transform: translate(-10%, -10%);
    }
}

.hero-logo-static-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));
}

/* Animação suave para a logomarca grande */
@keyframes floatLogoFix {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -6px);
    }
}

/*
 * Animação para logomarca de 500 px.
 * Move a logo verticalmente para cima em 12px no meio do ciclo,
 * proporcionando um movimento mais perceptível que a versão
 * anterior. A transformação usa apenas translateY para
 * preservar o alinhamento horizontal.
 */
@keyframes floatLogoLarge {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* 4. SEÇÃO DE PARCEIROS */
/*
 * 4. SEÇÃO DE PARCEIROS
 * Define fundo azul para a área de redes parceiras. A cor principal é utilizada
 * para criar contraste com os cartões brancos das operadoras. O texto passa
 * a branco para legibilidade.
 */
.partners {
    /*
     * O fundo da seção de parceiros agora é definido pelo seletor
     * #partners.section com um gradiente. Mantemos apenas o padding aqui.
     */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Ajusta a cor do subtítulo dentro da seção parceiras para branco */
.partners .section-title-sub {
    color: var(--white);
}

/* Garante que o título principal da seção de parceiros fique branco */
.partners .section-title {
    color: var(--white);
}

/*
 * Grade combinada para operadoras e rede de hospitais.
 * Usa grid responsivo com 4 colunas em telas largas e número
 * reduzido em telas menores. Os itens se adaptam ao espaço
 * disponível e mantêm o mesmo visual interativo das logos.
 */
.combined-grid {
    display: grid;
    /* grade fixa de 3 colunas por 4 linhas para exibir 12 itens na ordem desejada */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    justify-items: center;
    align-items: start;
    margin-top: 2rem;
}

/* Remove alinhamento de snap e propriedades de flex quando
 * os itens de .logo-item estiverem dentro da grade combinada. */
.combined-grid .logo-item {
    scroll-snap-align: unset;
    flex: unset;
    /* padding reduzido para um visual mais compacto */
    padding: 1rem;
}

/* Ajusta ícones para hospitais/laboratórios dentro dos itens. */
.combined-grid .logo-item i {
    font-size: 2.5rem;
    color: var(--secondary-blue);
    margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------
   TABELA DE REDES PARCEIRAS

   A tabela substitui a grade combinada anterior quando desejado pelo
   cliente, organizando as operadoras e hospitais em 4 linhas por 3
   colunas. Utiliza espaçamento interno semelhante ao grid e mantém
   os mesmos estilos de .logo-item para consistência visual.
------------------------------------------------------------------*/

/*
 * Grid para redes parceiras (operadoras + hospitais)
 * Define 4 colunas fixas em telas largas e se ajusta para
 * duas colunas em tablets e uma em dispositivos móveis.
 * Cada item utiliza a classe .logo-item existente, herdando
 * efeitos de hover e seleção. A margem superior mantém
 * distanciamento em relação ao título.
 */
/*
 * Configuração da grade de parceiros usando flexbox.
 * Cada item ocupa um quarto da largura (25%) menos a soma dos gaps, garantindo
 * quatro colunas em telas maiores. A propriedade flex-wrap permite que
 * os itens quebrem para novas linhas conforme necessário. Em telas
 * menores, a grade se ajusta para duas ou uma coluna.
 */
/* -----------------------------------------------------------------
   Grade das redes parceiras

   A grade combina operadoras de planos de saúde e hospitais em
   exatamente quatro colunas por linha em telas largas. Em telas
   intermediárias a grade se ajusta para duas colunas e, em
   dispositivos móveis, para uma coluna, mantendo a legibilidade.
   A utilização de CSS grid garante que os 12 itens (8 operadoras
   e 4 hospitais/laboratórios) se distribuam em 3 linhas sem que
   a largura do contêiner limite a quantidade de colunas.
------------------------------------------------------------------*/
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Reduzimos o espaçamento entre os cartões para que quatro
       colunas se acomodem confortavelmente no contêiner padrão
       (1200px). Com 1rem de gap entre as células, os 12 itens
       alinham-se em três linhas de quatro colunas sem quebrar. */
    gap: 1rem;
    justify-items: center;
    margin-top: 2rem;
}

/* Cada item ocupa o espaço da coluna automaticamente. O padding
   interno fornece respiro ao conteúdo, enquanto o width e height
   total garantem que o card se expanda uniformemente dentro da
   célula da grade. */
.partners-grid .logo-item {
    width: 100%;
    height: 100%;
    /* Reduza o padding interno para garantir que quatro itens
       caibam confortavelmente por linha. Usamos !important para
       sobrescrever o padding global de .logo-item (1.25rem). */
    padding: 0.75rem !important;
}

/* Ajuste específico para ícones de hospitais e laboratórios quando
   exibidos dentro da grade. São dimensionados maior para se
   harmonizarem com as logos das operadoras. */
.partners-grid .logo-item i {
    font-size: 2.5rem;
    color: var(--secondary-blue);
    margin-bottom: 0.75rem;
}

@media (max-width: 992px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * Estilos para o carrossel de operadoras
 * Substitui o grid anterior por um contêiner de rolagem horizontal com
 * rotação suave. Cada item tem efeito de foco e hover para maior
 * interatividade. A lista é fluida e responsiva, permitindo arrastar
 * horizontalmente em dispositivos de toque.
 */
.logos-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

/* --------------
   TABELA DE REDES PARCEIRAS

   Organiza as operadoras e hospitais em 3 linhas e 4 colunas.
   A tabela ocupa 100% da largura do contêiner e utiliza
   espaçamento interno para separar os cartões. Cada célula
   contém um .logo-item, herdando efeitos de hover/seleção.  
*/
.partners-table {
    width: 100%;
    border-collapse: separate;
    /* Espaçamento horizontal e vertical entre as células */
    border-spacing: 1rem;
    table-layout: fixed;
    margin-top: 2rem;
}

.partners-table td {
    padding: 0;
    vertical-align: top;
}

.partners-table .logo-item {
    width: 100%;
    height: 100%;
}

@media (max-width: 992px) {
    /* Em tablets, reduza para duas colunas */
    .partners-table {
        border-spacing: 0.75rem;
    }
    .partners-table td {
        display: inline-block;
        width: calc(50% - 0.75rem);
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    /* Em dispositivos móveis, cada item ocupa a linha toda */
    .partners-table td {
        width: 100% !important;
        display: block;
    }
    .partners-table {
        border-spacing: 0.5rem;
    }
}
/* Esconde a barra de rolagem no WebKit */
.logos-grid::-webkit-scrollbar {
    display: none;
}

.logo-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.logo-item:hover, .logo-item.selected {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
}

.logo-item img {
    /* altura reduzida para tornar os cards mais compactos */
    height: 50px;
    width: auto;
    object-fit: contain;
    /* Removemos filtros de cinza e opacidade reduzida para que os
       logotipos coloridos (como Bradesco Saúde e Unimed) apareçam com
       suas cores originais. As transições permanecem para o efeito
       de zoom em hover. */
    filter: none;
    opacity: 1;
    transition: transform 0.3s ease;
}

.logo-item:hover img, .logo-item.selected img {
    /* Apenas aplica o efeito de zoom em hover; não precisa alterar
       filtros ou opacidade, pois os logotipos já estão coloridos. */
    transform: scale(1.1);
}

/* ==========================================================================
   EFEITOS ADICIONAIS
   Estes estilos implementam transições suaves de aparecimento conforme o
   usuário rola a página e um destaque lúdico para os parceiros na seção
   "Redes Parceiras". Também incluem a estilização básica do formulário de
   feedback para inserir novos depoimentos.
========================================================================== */

/* Efeito de aparição: elementos começam invisíveis e deslizam para cima
   ao entrar na área de visão. A classe .scroll-fade será adicionada via
   JavaScript aos elementos a serem animados. */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quando o elemento estiver visível, a classe .visible é adicionada
   para revelar o conteúdo. */
.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Destaque automático para as logos de parceiros.
   Esta classe é aplicada de forma cíclica pelo script, enfatizando
   um parceiro por vez com borda colorida e leve brilho. */
.logo-item.auto-highlight {
    position: relative;
    border-color: var(--highlight-color);
    box-shadow: 0 0 15px var(--highlight-color);
    transform: translateY(-5px) scale(1.05);
}

.logo-item.auto-highlight::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 12px;
    border: 3px solid var(--highlight-color);
    pointer-events: none;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

/* Estilização do formulário de feedback
   O formulário ficará centralizado com margens generosas e campos bem
   estruturados para incentivar os visitantes a deixar seu depoimento. */
.feedback-form-container {
    margin-top: 3rem;
}

.feedback-form-container h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
    text-align: center;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.feedback-form .form-group {
    display: flex;
    flex-direction: column;
}

.feedback-form label {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.feedback-form input[type="text"],
.feedback-form input[type="file"],
.feedback-form select,
.feedback-form textarea {
    padding: 0.5rem;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.feedback-form textarea {
    resize: vertical;
}

.feedback-form button[type="submit"] {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.feedback-form button[type="submit"]:hover {
    background-color: var(--secondary-blue);
}

/* Botão que exibe/oculta o formulário de feedback */
.feedback-toggle-btn {
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    display: block;
    margin: 1rem auto;
    transition: background-color 0.3s ease;
}

.feedback-toggle-btn:hover {
    background-color: var(--secondary-blue);
}

/* Pequenas instruções para o formulário de feedback */
.feedback-instructions {
    text-align: center;
    color: var(--light-text);
    margin-bottom: 1rem;
}

/* Classe utilitária para ocultar elementos (formulário de feedback inicialmente escondido) */
.hidden {
    display: none !important;
}

.operator-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-text);
    opacity: 0.8;
    text-align: center;
    pointer-events: none;
}

/*
 * Contêiner que envolve o carrossel de operadoras e as setas de navegação.
 * Define posição relativa para que os botões de navegação possam se
 * posicionar absolutemente em suas laterais.
 */
.logos-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/*
 * Botões de navegação para o carrossel de operadoras.
 * As setas ficam centralizadas verticalmente dentro do contêiner
 * e usam cores suaves para não competir com as logos. A visibilidade
 * é controlada via JavaScript para desaparecer quando o carrossel
 * estiver no início ou no final.
 */
.logo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-blue);
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.logo-nav:hover {
    background-color: rgba(255, 255, 255, 1);
}

.logo-nav.prev {
    left: 0;
}

.logo-nav.next {
    right: 0;
}

/* 5. SEÇÃO COMO FUNCIONA */
/*
 * Removemos a cor de fundo fixa da seção "Como Funciona" para permitir
 * que o gradiente aplicado no seletor #how-it-works.section surta efeito.
 */
#how-it-works {
    /* intencionalmente vazio */
}

/* MARCA D'ÁGUA COM O LOGOTIPO */
.watermark {
    position: relative;
}

.watermark::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 180px;
    height: 180px;
    background-image: url('../images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.step-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--secondary-blue);
    /*
     * Os cartões de passos devem ser visíveis por padrão, sem depender de
     * scripts de animação. Anteriormente eles iniciavam com opacidade 0 e
     * eram transladados para baixo, o que fazia com que sumissem caso o
     * JavaScript não fosse executado. Agora definimos opacidade total e
     * removemos a translação inicial.
     */
    opacity: 1;
    transform: translateY(0);
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow);
}

.step-icon {
    font-size: 3rem;
    color: var(--secondary-blue);
    margin-bottom: 1.5rem;
}

.step-card h3 {
    font-size: 1.3rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

/* 6. SEÇÃO DE DEPOIMENTOS */
/*
 * Não definimos um fundo para .testimonials aqui, pois a seção de feedback
 * utiliza o gradiente global definido em #feedback.section. O fundo dos
 * cartões individuais é controlado separadamente.
 */
.testimonials {
    /* intencionalmente vazio */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background-color: var(--light-blue-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    border-left: 5px solid var(--secondary-blue);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
}

.testimonial-card p {
    font-style: italic;
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

.author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.author img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.author .avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-blue);
    color: var(--white);
    font-size: 2rem;
    border: 2px solid var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Exibe imagem do cliente dentro do avatar quando fornecida */
.author .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.author strong {
    color: var(--primary-blue);
}

.stars {
    color: #ffc107;
}

/* 7. SEÇÃO REDE CREDENCIADA */
#network {
    background-color: var(--white);
}

.network-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.network-card {
    background: var(--light-blue-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Torna os cartões de rede visíveis por padrão */
    opacity: 1;
    transform: translateY(0);
}

.network-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow);
    background: var(--secondary-blue);
    color: var(--white);
}

.network-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

/* 8. SEÇÃO CTA FINAL */
.cta {
    background-color: var(--primary-blue);
    color: var(--white);
    text-align: center;
}

.cta-container h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-container p {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.btn-primary {
    background-color: var(--white);
    color: var(--primary-blue);
    padding: 1rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    text-align: center;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
}

.btn-primary:hover {
    background-color: #f0f0f0;
    color: var(--primary-blue);
    transform: translateY(-3px) scale(1.05);
}

.btn-cta {
    background-color: var(--white);
    color: var(--primary-blue);
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1.2rem;
}

/* 9. RODAPÉ */
.footer {
    background-color: var(--dark-text);
    color: #f0f0f0;
    padding: 3rem 1rem;
    position: relative;
}

/* =====================================================================
   MENU DE NAVEGAÇÃO MÓVEL

   Exibe um botão com ícone de menu em telas estreitas e oculta a lista
   de links de navegação padrão. Ao clicar no botão o menu é revelado
   verticalmente cobrindo toda a largura do cabeçalho. Esta abordagem
   melhora a usabilidade em dispositivos móveis sem a necessidade de
   bibliotecas externas.
===================================================================== */

/* Botão de alternância do menu móvel (hamburger). Escondido em telas
   largas, visível apenas quando a largura da tela é menor ou igual a
   768px. */
.mobile-nav-toggle {
    display: none;
    /* O menu hamburger passa a ter fundo sólido usando a mesma cor do topo */
    background: var(--primary-blue);
    border: none;
    color: var(--white);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
}

@media (max-width: 768px) {
    /* O botão aparece em telas menores */
    .mobile-nav-toggle {
        display: block;
    }
    /* Ajuste para o contêiner de links em telas menores: o menu é
       ocultado por padrão e posicionado sob o cabeçalho. */
    .nav-links {
        /*
         * Para dispositivos móveis, o menu abre como um painel lateral
         * estreito preso à borda direita da tela. Ele ocupa 70% da
         * largura da viewport, permitindo que parte do conteúdo fique
         * visível ao lado. O painel cobre a altura total da janela
         * para listar todas as opções. A cor de fundo azul mantém
         * contraste com o texto em branco.
         */
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 70vw;
        /* A altura agora se ajusta automaticamente ao conteúdo, com um máximo
           de 80% da altura da tela. Isso evita que o painel cubra toda a
           página e limita seu tamanho próximo às opções do menu, sem
           ultrapassar a área até o botão "Cotação". */
        height: auto;
        max-height: 80vh;
        /*
         * Cor de fundo semitransparente para permitir que o conteúdo do site
         * continue visível enquanto o menu está aberto. Usamos a cor
         * principal (azul escuro) com opacidade reduzida.
         */
        background: rgba(14, 62, 156, 0.95);
        z-index: 1100;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        /*
         * Cria espaço no topo para o cabeçalho; sem esse padding,
         * o primeiro item do menu ficaria escondido atrás do topo.
         */
        padding-top: 5.5rem;
        padding-bottom: 2rem;
        padding-left: 1.5rem;
        overflow-y: auto;
        /* Oculta a lista por padrão */
        display: none;
    }
    /* Quando o botão é clicado e a classe "active" adicionada via JS,
       exibimos a lista de links */
    .nav-links.active {
        display: flex;
    }
    /* Os itens do menu ocupam praticamente toda a largura */
    .nav-links .btn-nav {
        width: 90%;
        text-align: center;
    }
}

/* =====================================================================
   AJUSTES PARA A SEÇÃO COMO FUNCIONA (COMO FUNCIONA)

   Aplica um fundo azul sólido para destacar a seção entre os
   produtos e o feedback. Ajusta as cores dos textos, ícones e
   cartões para preservar a legibilidade sobre o fundo escuro.
===================================================================== */

/*
 * Seção "Como Funciona" agora utiliza o mesmo gradiente claro das outras
 * seções. Os cartões permanecem brancos com escrita em azul e bordas
 * coloridas para manter contraste e consistência.
 */
#how-it-works {
    background: none;
}
#how-it-works .section-title,
#how-it-works .section-subtitle {
    color: var(--primary-blue);
}
#how-it-works .step-card {
    background-color: var(--white);
    color: var(--primary-blue);
    border-top: 4px solid var(--secondary-blue);
}
#how-it-works .step-card h3,
#how-it-works .step-card p {
    color: var(--primary-blue);
}
#how-it-works .step-icon {
    color: var(--secondary-blue);
    /* Garante que os ícones das etapas não fiquem esmaecidos em fundos claros */
    opacity: 1;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.footer-logo .navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--white);
}

.logo-symbol {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.footer-info {
    font-size: 0.875rem;
    text-align: center;
    opacity: 0.8;
}

.footer-info p {
    margin-bottom: 5px;
}

.footer-social a {
    color: var(--white);
    font-size: 1.5rem;
    margin-left: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-social a:hover {
    color: var(--secondary-blue);
    transform: scale(1.2);
}

/* FUNDO DO RODAPÉ */
.footer::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(15%);
    width: 400px;
    height: 400px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjIwMCIgY3k9IjIwMCIgcj0iMTUwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iMC4wNSIvPgo8dGV4dCB4PSIyMDAiIHk9IjIxMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBmaWxsPSIjZmZmZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBvcGFjaXR5PSIwLjA1Ij5DZW50cmFsR3JvdXA8L3RleHQ+Cjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* 10. BOTÕES FLUTUANTES */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: var(--white);
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

#backToTop {
    position: fixed;
    right: 30px;
    bottom: 100px;
    background-color: var(--secondary-blue);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.3s ease;
    z-index: 99;
}

#backToTop:hover {
    background-color: var(--primary-blue);
    transform: scale(1.1);
}

/* 12. SEÇÃO DE PRODUTOS */
.produtos {
    background-color: var(--white);
}

.produtos-description {
    text-align: center;
    font-size: 1rem;
    color: var(--light-text);
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.produtos-description strong {
    color: var(--primary-blue);
}

.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.produto-card {
    background-color: var(--light-blue-bg);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Torna os cartões de produtos visíveis por padrão */
    opacity: 1;
    transform: translateY(0);
}

.produto-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow);
}

.produto-icon {
    font-size: 3rem;
    color: var(--secondary-blue);
    margin-bottom: 1.5rem;
}

.produto-card h3 {
    font-size: 1.4rem;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
}

.produto-card p {
    font-size: 1rem;
    color: var(--light-text);
    line-height: 1.5;
}

/* 15. SEÇÃO SOBRE / QUEM SOMOS */
.about {
    background-color: var(--white);
}

.about-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.about-image img {
    max-width: 500px;
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-size: 2.3rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-weight: 700;
}

.about-content p {
    font-size: 1.1rem;
    color: var(--light-text);
    line-height: 1.6;
}

.about-content strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* MODAL ESTILOS */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: var(--white);
    margin: 5% auto;
    padding: 0;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s;
    position: relative;
    /* Ajustes de altura para evitar zoom excessivo e permitir rolagem interna */
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    background: linear-gradient(60deg, var(--primary-blue) 0%, #134fa9 50%, #1565c0 100%);
    color: var(--white);
    /* Reduzimos o padding para liberar mais espaço visível para o formulário. */
    padding: 1.5rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    text-align: center;
}

.modal-header h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1.8rem;
}

.modal-header p {
    opacity: 0.9;
    font-size: 1rem;
}

.modal-logo {
    /* Ajustamos o tamanho do logotipo no modal de cotação para que o cabeçalho não ocupe espaço demais. */
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.modal-logo img {
    /* Ajustamos proporcionalmente o tamanho da logomarca interna. */
    width: 110px;
    height: 110px;
    z-index: 2;
    object-fit: contain;
    border-radius: 0;
    /* Centraliza a imagem dentro do contêiner */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: var(--white);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.close-modal:hover {
    color: #c1e8ff;
}

.quote-form {
    padding: 2rem;
    /* Permite rolagem quando o conteúdo da cotação exceder a altura disponível na viewport.
       O modal fica fixo e a área do formulário se torna rolável para melhorar a usabilidade. */
    max-height: 60vh;
    overflow-y: auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark-text);
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-blue);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}

.btn-submit {
    background-color: var(--secondary-blue);
    color: var(--white);
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

.btn-submit:hover {
    background-color: var(--primary-blue);
    transform: translateY(-2px);
}

/* Modal de Confirmação */
.confirmation-content {
    text-align: center;
    padding: 2rem;
}

.success-icon {
    font-size: 4rem;
    color: #4CAF50;
    margin-bottom: 1.5rem;
}

.confirmation-details {
    font-style: italic;
    color: var(--light-text);
    margin: 1rem 0;
}

.close-confirmation {
    margin-top: 1rem;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ESTILOS PARA ANIMAÇÕES E ESTADOS DINÂMICOS */
.error {
    border-color: #e74c3c !important;
}

.error-message {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

img.loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

img:not(.loaded) {
    opacity: 0;
}

/* Animações para elementos ao rolar */
.step-card, .produto-card, .testimonial-card, .network-card {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* -----------------------------------------------------------------
   Ajustes específicos para a seção de Feedback

   Os cartões de feedback (testimonial-card) são inicializados com
   opacidade total e sem translação vertical para garantir que fiquem
   visíveis mesmo sem a execução do script de animação. A regra
   !important assegura que estas propriedades prevaleçam sobre
   definições anteriores e sobre estilos inline aplicados por scripts. */
.testimonial-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 11. AJUSTES RESPONSIVOS */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
    }
    .hero-content {
        margin-bottom: 50px;
    }
    .hero-graphic {
        max-width: 400px;
    }
    /* Mantém o carrossel horizontal em telas médias */
    .logos-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1rem;
        scroll-snap-type: x mandatory;
    }
    .produtos-grid {
        grid-template-columns: 1fr;
    }
    .steps-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .network-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-container {
        flex-direction: column;
    }
    .footer-content {
        flex-direction: column;
    }
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none; /* Em um site real, aqui entraria um menu hamburguer */
    }
    .section-title {
        font-size: 2rem;
    }
    .cta-container h2 {
        font-size: 2.2rem;
    }
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-social {
        margin-top: 1rem;
    }
    .footer-social a {
        margin: 0 0.75rem;
    }
    /* Mantém o carrossel horizontal em telas pequenas */
    .logos-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1rem;
        scroll-snap-type: x mandatory;
    }
    .steps-container {
        grid-template-columns: 1fr;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .network-gallery {
        grid-template-columns: 1fr;
    }
    .modal-header {
        padding: 1.5rem;
    }
    .modal-header h2 {
        font-size: 1.5rem;
    }
    .quote-form {
        padding: 1.5rem;
    }
}

/* =====================================================================
   CORREÇÃO DA NAVEGAÇÃO EM TELAS PEQUENAS

   O menu de navegação para desktop (.nav-links) estava causando overflow
   porque não era devidamente ocultado em telas com largura menor ou igual
   a 768px. O bloco abaixo redefine completamente o comportamento do menu
   nestas larguras: esconde a lista de links por padrão, posiciona o menu
   sob o cabeçalho e permite exibi-lo quando a classe `.active` é aplicada
   via JavaScript ao clicar no botão de menu hamburguer. Isso garante que
   o menu não provoque rolagem horizontal e que só seja mostrado quando
   o usuário interagir.
===================================================================== */
@media (max-width: 768px) {
    /* Esconde a lista de links de navegação em telas pequenas e posiciona o menu
       fixado abaixo do cabeçalho. */
    .nav-links {
        /*
         * Para dispositivos móveis, o menu abre como um painel lateral
         * estreito preso à borda direita da tela. Ele ocupa 70% da
         * largura da viewport, permitindo que parte do conteúdo fique
         * visível ao lado. O painel cobre a altura total da janela
         * para listar todas as opções. A cor de fundo azul mantém
         * contraste com o texto em branco.
         */
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 70vw;
        /* A altura agora se ajusta automaticamente ao conteúdo, com um máximo
           de 80% da altura da tela. Isso evita que o painel cubra toda a
           página e limita seu tamanho próximo às opções do menu, sem
           ultrapassar a área até o botão "Cotação". */
        height: auto;
        max-height: 80vh;
        /*
         * Cor de fundo semitransparente para permitir que o conteúdo do site
         * continue visível enquanto o menu está aberto. Usamos a cor
         * principal (azul escuro) com opacidade reduzida.
         */
        background: rgba(14, 62, 156, 0.95);
        z-index: 1100;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        /*
         * Cria espaço no topo para o cabeçalho; sem esse padding,
         * o primeiro item do menu ficaria escondido atrás do topo.
         */
        padding-top: 5.5rem;
        padding-bottom: 2rem;
        padding-left: 1.5rem;
        overflow-y: auto;
        /* Oculta a lista por padrão */
        display: none;
    }
    /* Quando o botão de menu é clicado e a classe `active` é adicionada via JS,
       exibimos a lista de links. */
    .nav-links.active {
        display: flex;
    }
    /* Ajustamos também o botão de navegação (cotação) para ocupar a maior
       parte da largura quando exibido no menu móvel. */
    .nav-links .btn-nav {
        width: 90%;
        text-align: center;
    }

    /* Garante que o contêiner do menu (.nav-links-container) não ocupe
       espaço excessivo quando o menu está oculto. Sem essa regra, o
       contêiner herda flex: 1 e pode causar overflow horizontal ao lado
       do logotipo em telas estreitas. Ao definir flex-basis como auto e
       removendo o crescimento, o bloco se ajusta apenas ao conteúdo
       visível (ou seja, o botão de menu móvel). */
    .nav-links-container {
        flex: 0 0 auto;
        width: auto;
    }

    /* --- Ajustes extras para a área do logotipo e nome da empresa em telas menores ---
       Reduzimos o tamanho do contêiner da logo e da imagem para liberar espaço,
       ocultamos a tagline "Corretora de Seguros" e aumentamos a flexibilidade
       da área do logotipo para que o nome da empresa possa ocupar mais largura.
       Isso evita que o texto seja cortado e mantém visível o ícone do menu. */
    .logo-container {
        width: 80px;
        height: 80px;
    }
    .logo-area .logo-container .logo-img {
        width: 70px;
        height: 70px;
    }
    .logo-area {
        flex: 1;
    }
    .brand-text .tagline {
        display: none;
    }
    .brand-text .company-name {
        font-size: 1.5rem;
    }
}

/*
 * Exibição da tagline no topo ("Corretora de Seguros") em dispositivos
 * móveis. Colocamos este bloco no final do arquivo para que ele
 * sobreponha qualquer regra anterior que oculte a tagline. A fonte é
 * reduzida e a opacidade ajustada para um visual discreto abaixo do
 * nome da empresa.
 */
@media (max-width: 768px) {
    .brand-text .tagline {
        display: block;
        font-size: 0.7rem;
        line-height: 1;
        color: var(--white);
        opacity: 0.8;
    }

    /* Cabeçalho do menu móvel (contém botão de fechar e logo) */
    .menu-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 1rem;
    }
    /* Ajuste sutil para o botão de fechar no menu: cor branca com opacidade */
    .nav-close-btn {
        background: none;
        border: none;
        color: var(--white);
        font-size: 1.6rem;
        opacity: 0.85;
        cursor: pointer;
        margin-right: 0.75rem;
    }
    /* Logo dentro do menu móvel */
    .menu-logo {
        max-width: 120px;
        height: auto;
    }
}