/* Variáveis para cores e fontes */
:root {
    --fundo-principal: #FFFFFF;
    --fundo-secao: #F7F9F7;
    --verde-principal: #0A4F35;
    --verde-secundario: #D8E6D5;
    --cor-texto: #212529;
    --cor-texto-suave: #555555;
    --cor-logo: #1A3D69;
    --navbar-height: 80px; /* Adicionamos isso para facilitar cálculos */
}

/* Reset básico e tipografia */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    
    a {
        text-decoration: none !important;
    }
}

.section-title {
    font-size: 42px !important;
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.2;
    margin-bottom: 25px;
    text-align: center;
}

.section-paragraph {
    font-size: 20px !important;
    line-height: 1.8;
    color: var(--cor-texto-suave);
    margin-bottom: 20px;
}

/* Subtítulo da seção, se houver */
.section-subtitle {
    max-width: 600px;
    margin: 0 auto 60px auto;
    font-size: 20px;
    text-align: center;
}

@media (max-width: 900px) {
    .section-paragraph {
        max-width: 600px;
        text-align: center;
    }

    .section-title {
        font-size: 30px !important;
    }
}

/*
=================================
--- Navbar / Cabeçalho ---
=================================
*/

.navbar {
    background-color: var(--fundo-principal);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* Adicionamos uma sombra sutil para quando a página rolar */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar .container { /* Adicionamos .navbar para especificidade */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: var(--navbar-height);
}

.logo img {
    height: 60px; /* Um leve ajuste para harmonia */
    width: auto;
    vertical-align: middle;
}

/* Esconde as navegações desktop por padrão (mobile-first) */
.desktop-nav-main,
.desktop-nav-cta {
    display: none;
}

/* Remove sublinhado e define cores padrão dos links */
.navbar a {
    color: var(--cor-texto);
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: var(--verde-principal); /* Cor de hover unificada */
}

/* Navegação Desktop */
.desktop-nav-main ul,
.desktop-nav-cta ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.desktop-nav-main li,
.desktop-nav-cta li {
    margin-left: 35px;
}

.desktop-nav-main a {
    font-weight: 500;
    font-size: 16px;
    padding: 5px 0;
    position: relative;
    white-space: nowrap;
}

/* Efeito de sublinhado no hover para links principais */
.desktop-nav-main a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--verde-principal);
    transition: width 0.3s ease;
}

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


/* Botão "Agende agora" - Estilo unificado com o Hero */
.btn-agendar {
    background-color: #fff;
    color: var(--verde-principal) !important;
    padding: 10px 25px;
    border: 1px solid var(--verde-principal);
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espaço entre texto e ícone do WhatsApp */
    transition: transform 0.3s ease, box-shadow 0.3s ease,  background-color 0.3s ease, color 0.3s ease;
}

.btn-agendar:hover {
    background-color: var(--verde-principal) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(10, 79, 53, 0.25);
}

/* Hamburger icon */
.hamburger {
    display: flex; /* Mudado para flex para ser o padrão mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 22px;
    cursor: pointer;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--cor-texto);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Animação do hambúrguer para 'X' */
.hamburger.active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

.mobile-nav-links {
    /* Estado Padrão (Escondido) */
    display: none;
    flex-direction: column;
    position: absolute; /* Crucial para posicionar abaixo do header */
    top: var(--navbar-height); /* Começa exatamente onde o header termina */
    left: 0;
    width: 100%;
    background-color: var(--fundo-principal);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    padding: 10px 0 20px 0;
    
    /* Propriedades para garantir que não fique "invisível" */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Efeito sutil de deslizar para baixo */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: -1; /* Começa atrás de tudo */
}

.mobile-nav-links.active {
    /* Estado Ativo (Visível) */
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999; /* Fica na frente da maioria dos elementos */
}

.mobile-nav-links ul {
    list-style: none;
    flex-direction: column;
    width: 100%;
}

.mobile-nav-links li {
    width: 100%;
    text-align: center;
}

.mobile-nav-links a {
    padding: 18px 20px;
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.mobile-nav-links .btn-agendar-mobile {
    align-items: center;
}

.mobile-nav-list {
    border-bottom: #045CB4 solid 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.mobile-nav-list li{
    width: 100%;
    text-align: left !important;
}

.btn-agendar-mobile {
    display: block;
    background-color: #fff;
    color: var(--verde-principal) !important;
    padding: 10px 25px;
    border: 1px solid var(--verde-principal);
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espaço entre texto e ícone do WhatsApp */
    transition: transform 0.3s ease, box-shadow 0.3s ease,  background-color 0.3s ease, color 0.3s ease;
}

.btn-agendar-mobile:hover {
    background-color: var(--verde-principal) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(10, 79, 53, 0.25);
}

/* Media Query para Desktop (769px e acima) */
@media (min-width: 769px) {
    .hamburger {
        display: none;
    }

    .desktop-nav-main,
    .desktop-nav-cta {
        display: flex;
    }

    .navbar .container {
        justify-content: space-between; /* Espaça logo, nav e botão */
    }
    
    .desktop-nav-main {
      /* Remove o margin-left: auto do botão para centralizar a nav */
      /* O space-between no container já cuida do posicionamento */
    }
}

/* Adicionado para agrupar logo e nav-main */
.navbar-left {
    display: flex;
    align-items: center;
    gap: 40px; /* Espaço entre o logo e o primeiro item do menu */
}

/* Adicionando o ícone do WhatsApp via CSS */
.btn-agendar::after {
    font-family: "Font Awesome 5 Brands"; /* Garante que a fonte correta seja usada */
    content: "\f232"; /* Código unicode do ícone WhatsApp */
    margin-left: 8px;
    font-weight: 400; /* Ícones de marca são 'regular' */
}

.btn-agendar-mobile::after {
    font-family: "Font Awesome 5 Brands"; /* Garante que a fonte correta seja usada */
    content: "\f232"; /* Código unicode do ícone WhatsApp */
    margin-left: 8px;
    font-weight: 400; /* Ícones de marca são 'regular' */
}
.hero-cta-button::after {
    font-family: "Font Awesome 5 Brands"; /* Garante que a fonte correta seja usada */
    content: "\f232"; /* Código unicode do ícone WhatsApp */
    margin-left: 8px;
    font-weight: 400; /* Ícones de marca são 'regular' */
}

/* ==================================================
    EFEITO DE OVERLAY PARA O CONTEÚDO
   ================================================== */

/* Aplica o efeito no <main> QUANDO o <body> tem a classe 'menu-mobile-aberto' */
.menu-mobile-aberto {
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* ==================================================
   SEÇÃO HERO (VERSÃO OTIMIZADA)
   ================================================== */

.hero-minimal {
    padding: 40px 0;
    min-height: 90vh; /* Aumentamos a altura mínima para garantir o espaço */
    display: flex; /* Essencial para o alinhamento vertical */
    position: relative;
    overflow: hidden;
    color: #fff; /* Mudamos a cor base do texto para branco para o fundo */
    background-color: var(--fundo-principal);
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* A imagem de fundo agora tem um overlay escuro para legibilidade */
.hero-minimal .hero-background-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    z-index: 0;
}

/* O overlay escuro */
.hero-minimal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Overlay verde escuro semi-transparente */
    z-index: 1;
}

/* O container agora usa flexbox para distribuir o conteúdo */
.hero-minimal .hero-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2; /* Fica na frente da imagem e do overlay */
    
    /* A MÁGICA ACONTECE AQUI */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribui o espaço entre os filhos */
    text-align: center;
    flex-grow: 1; /* Faz o container crescer para ocupar a altura do .hero-minimal */
}

.hero-top, .hero-middle, .hero-bottom {
    width: 100%;
}

.hero-tagline {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 72px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-title span{
    font-size: 32px; /* Título maior e mais impactante */
    font-weight: 700;
    line-height: 1.2;
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    white-space: nowrap; /* Impede a quebra automática da primeira linha */
    position: relative; /* Para posicionar o segundo span */
}

.hero-title span.hero-title-secondary {
    display: block; /* Força a segunda frase para a próxima linha */
    font-style: italic; /* Um toque de estilo para diferenciar */
    margin-top: 10px; /* Espaço entre as linhas */
    color: #fff !important; /* Garante a cor do texto */
}

/* Preparamos cada frase (span) para receber a marcação */
.hero-title span {
    position: relative; /* Essencial para posicionar a marcação atrás */
    display: inline-block; /* Garante que a marcação se ajuste ao texto */
    padding: 0 5px; /* Pequeno espaço nas laterais */
}

.hero-title span:first-child::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Ajusta a posição vertical da linha */
    right: 0; /* Começa no final da primeira frase */
    width: 60%; /* Comprimento da linha (ajuste conforme necessário) */
    height: 3px; /* Espessura da linha */
    background-color: var(--fundo-secao); /* Cor da linha (um verde mais claro) */
    border-radius: 3px;
    z-index: -1; /* Garante que a linha fique atrás do texto da segunda frase, se houver sobreposição */
}

/* Estilo para a nova lista de benefícios */
.hero-benefits {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: inline-flex; /* Alinha os itens lado a lado ou empilhados */
    flex-direction: column; /* Itens um abaixo do outro */
    gap: 15px; /* Espaço entre os itens */
}

.hero-benefits li {
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: left;
    justify-content: left;
    gap: 10px;
}

.hero-benefits .fa-check-circle {
    color: #fff;
    font-size: 1.2em;
}

.hero-cta-button {
    display: inline-block;
    background-color: #fff; /* Botão branco para contraste */
    color: var(--verde-principal); /* Texto verde */
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 700; /* Mais peso no botão principal */
    font-size: 18px;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.hero-cta-button:hover {
    transform: scale(1.05);
}

/* ==================================================
    SEÇÃO SOBRE
   ================================================== */

.about-section {
    padding: 100px 0;
    background-color: var(--fundo-secao); /* Fundo suave para diferenciar da Hero */
}

.about-section .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 60px; /* Espaço entre a foto e o texto */
}

/* Coluna da Imagem */
.about-image-wrapper {
    flex-basis: 40%; /* A imagem ocupa 40% do espaço */
    max-width: 400px;
}

.about-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Bordas arredondadas para um visual moderno */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Coluna do Conteúdo */
.about-content {
    flex-basis: 60%; /* O texto ocupa 60% do espaço */
}

.crm-tag {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--verde-principal);
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

/* --- Responsividade da Seção Sobre --- */
@media (max-width: 900px) {
    .about-section .container {
        flex-direction: column; /* Empilha as colunas em telas menores */
        text-align: center;
        gap: 50px;
    }

    .about-content {
        /* Garante que o texto fique alinhado ao centro no mobile, mas
           os parágrafos ainda comecem pela esquerda */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ==================================================
   7. BOTÃO SOCIAL (INSTAGRAM)
   ================================================== */

.btn-social {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espaço entre o texto e o ícone */
    
    background-color: transparent;
    color: var(--verde-principal);
    border: 1px solid var(--verde-principal);
    border-radius: 50px;
    
    padding: 12px 28px;
    margin-top: 20px; /* Espaço acima do botão */
    
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

.btn-social:hover {
    background-color: var(--verde-principal);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(10, 79, 53, 0.2);
}

.btn-social .fab.fa-instagram {
    font-size: 1.2em; /* Deixa o ícone um pouco maior que o texto */
}

.btn-social-div {
    text-align: center;
}

/* ==================================================
    SEÇÃO EBOOK
   ================================================== */

.ebook-section {
    padding: 0;
    /* Usamos o fundo branco para alternar com as seções vizinhas */
    background-color: var(--fundo-principal); 
}

.ebook-section .container {
    max-width: 900px; /* Um container um pouco mais estreito para focar na imagem */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* Centraliza a imagem/link */
}

.ebook-section a {
    display: inline-block; /* Faz o link se comportar como um bloco, mas respeitando o alinhamento */
    text-decoration: none;
}

.ebook-section img {
    max-width: 100%; /* Garante que a imagem seja responsiva */
    height: auto;
    max-height: 800px;
    display: block; /* Remove qualquer espaço extra abaixo da imagem */
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de hover: a imagem parece "saltar" levemente */
.ebook-section a:hover img {
    transform: scale(1.03);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}


/* ==================================================
    SEÇÃO SERVIÇOS
   ================================================== */

.services-section {
    padding: 100px 0;
    background-color: var(--fundo-secao); /* Fundo branco para esta seção */
    text-align: center; /* Centraliza os títulos da seção */
}

/* Estilo para o separador <hr> dos cards */
.card-separator {
    border: none; /* Remove a borda padrão do hr */
    height: 3px; /* Espessura da linha */
    width: 50px; /* Largura da linha */
    background-color: var(--verde-principal); /* Cor da linha */
    margin: 0 auto 20px auto; /* Centraliza a linha e dá uma margem abaixo */
    border-radius: 2px;
}

.services-grid {
    display: grid;
    /* Cria 3 colunas em telas grandes */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Espaço entre os cards */
}

.service-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    overflow: hidden; /* Garante que a imagem com borda arredondada funcione */
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(10, 79, 53, 0.1);
}

.service-image img {
    width: 100%;
    height: 220px; /* Altura fixa para todas as imagens */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    display: block;
}

.service-content {
    padding: 30px;
}

.service-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 15px;
    color: var(--verde-principal);
    text-align: center;
}

.service-title {
    font-size: 20px !important;
    font-weight: 600;
    color: var(--cor-texto);
    text-align: center;
    margin-bottom: 30px; /* Aumentamos a margem para dar espaço para a linha */
    position: relative;   /* Essencial para posicionar a linha */
    padding-bottom: 15px; /* Espaço extra entre o texto e a linha */
    min-height: 50px;
}

/* ADICIONE ESTA NOVA REGRA logo abaixo da regra .service-title */
.service-description::after {
    content: ''; /* Pseudo-elementos sempre precisam de 'content' */
    position: absolute;
    
    /* Centralização da linha */
    left: 50%;
    transform: translateX(-50%);
    
    bottom: 0; /* Posiciona a linha na parte de baixo do título */

    /* Estilo da linha */
    width: 50px; /* Largura de 50px, não o card todo */
    height: 3px; /* Espessura da linha */
    background-color: var(--verde-principal); /* Cor da linha */
    border-radius: 2px;
}

.service-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--cor-texto-suave);
}

/* ==================================================
   SEÇÃO FEEDBACK (DEPOIMENTOS)
   ================================================== */

.feedback-section {
    padding: 100px 0;
    background-color: var(--fundo-secao);
    position: relative;
}

.feedback-slider {
    width: 100%;
    max-width: 800px; /* Largura máxima do slider */
    margin: 0 auto;
    padding: 20px 0 50px 0; /* Espaço para a paginação abaixo */
    overflow: hidden;
}

.feedback-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    text-align: center;
    /* Garante que todos os slides tenham a mesma altura */
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feedback-card .stars {
    color: #FFC107; /* Cor dourada para as estrelas */
    font-size: 20px;
    margin-bottom: 20px;
}

.feedback-card .quote-text {
    font-size: 18px;
    font-style: italic;
    line-height: 1.7;
    color: var(--cor-texto-suave);
    flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}

.feedback-card .patient-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--verde-principal);
    margin-top: 25px;
}

/* Estilização dos controles do Swiper */
.swiper-pagination-bullet {
    background: var(--verde-secundario);
    width: 10px;
    height: 10px;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    background: var(--verde-principal);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--verde-principal);
    transform: scale(0.7); /* Deixa as setas um pouco menores */
}

/* ==================================================
   SEÇÃO CTA FINAL (COM BOTÕES SECUNDÁRIOS)
   ================================================== */

.final-cta-section {
    background-color: var(--verde-principal);
    color: #fff;
    padding: 100px 20px; /* Adicionado padding lateral aqui */
    text-align: center;
    overflow: hidden;
}

/* Ajusta a cor dos títulos e subtítulos para esta seção específica */
.final-cta-section .section-title,
.final-cta-section .section-subtitle {
    color: #fff;
}

.final-cta-section .section-subtitle {
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

/* Estilo do botão de CTA Principal (sem alterações) */
.cta-button-primary {
    display: inline-block;
    background-color: #fff;
    color: var(--verde-principal);
    padding: 18px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Contêiner para os links/botões secundários */
.secondary-cta-links {
    margin-top: 30px; /* Margem um pouco menor */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha em telas menores */
    gap: 20px;
}

/* NOVO: Estilo para os botões secundários "vazados" */
.btn-secondary-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    background-color: transparent;
    color: #fff; /* Texto branco */
    border: 2px solid #fff; /* Borda branca */
    border-radius: 50px;
    
    padding: 12px 28px;
    
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

/* Efeito hover para os botões secundários */
.btn-secondary-outline:hover {
    background-color: #fff;
    color: var(--verde-principal); /* Inverte as cores no hover */
    transform: translateY(-3px);
}

.btn-secondary-outline i {
    font-size: 1.1em;
}


/* ==================================================
     CONTROLE RESPONSIVO (MOBILE - ATÉ 768px)
   ================================================== */
@media (max-width: 768px) {

    /* --- GERAL --- */
    /* Aumenta o tamanho base dos parágrafos no mobile */
    .section-paragraph,
    .service-description,
    .hero-subtitle {
        font-size: 16px !important; /* Tamanho mais confortável para leitura */
    }

    /* --- HEADER E MENU --- */
    .desktop-nav-main, 
    .desktop-nav-cta {
        display: none;
    }
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 28px;
        height: 22px;
        cursor: pointer;
        margin-left: auto;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--cor-texto);
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }
    .hamburger.active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

    
    /* --- SEÇÃO HERO --- */
    .hero-title span{
        font-size: 30px !important;
        white-space: nowrap !important; /* Permite a quebra de linha (com !important para garantir) */
        word-wrap: break-word; /* Quebra palavras longas se necessário */
    }
    .hero-benefits {
        align-items: flex-start;
    }
    .hero-benefits li {
        justify-content: flex-start;
        font-size: 16px; /* Tamanho de fonte maior para os benefícios */
    }

    /* --- SEÇÃO SOBRE --- */
    .about-section .container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }
    .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .section-title {
        font-size: 34px !important; /* Ajusta o tamanho dos títulos de seção */
    }
    .section-paragraph {
        max-width: 100%;
        text-align: center;
        font-size: 24px !important;
    }
    
    /* --- SEÇÃO SERVIÇOS --- */
    .services-grid {
        grid-template-columns: 1fr; /* Força uma coluna única */
    }

    .service-title {
        font-size: 30px !important;
    }

    .service-description {
        font-size: 22px !important;
    }
    
    /* --- SEÇÃO FEEDBACK --- */
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Esconde as setas de navegação no mobile, deixando só as bolinhas */
    }
    .feedback-card {
        padding: 30px; /* Menos padding lateral no mobile */
    }
    .feedback-card .quote-text {
        font-size: 17px;
    }
    
    .secondary-cta-links {
        flex-direction: column;
        gap: 25px;
    }
}