/* ============================================================
   GRUPO SILVANA FROTA AUDIOLOGIA - FOLHA DE ESTILOS PRINCIPAL
   Arquivo: assets/css/style.css
   Versão: 1.3
   Data: Setembro/2026
   Desenvolvido por: ID.IA Consultoria | www.idia.tec.br
   ============================================================

   ÍNDICE DE SEÇÕES:
   01. Variáveis e Reset
   02. Tipografia
   03. Utilitários
   04. Header e Navegação
   05. Menu Hamburguer
   06. Hero / Carrossel
   07. Seção Sobre Mim
   08. Seção Corpo Clínico
   09. Seção Nosso Espaço (Galeria)
   10. Seção Nossos Serviços (Accordion)
   11. Seção Cursos
   12. Seção Contato
   13. Rodapé
   14. Botão WhatsApp Flutuante
   15. Contador de Visitas
   16. Lightbox (Galeria ampliada)
   17. Responsividade (Media Queries)
   ============================================================ */

/* ============================================================
   01. VARIÁVEIS E RESET
   Para alterar as cores do site, edite apenas as variáveis abaixo.
   ============================================================ */
:root {
    --cor-verde-principal: #2E8B57;
    --cor-verde-escuro:    #1A5C35;
    --cor-verde-claro:     #4CAF80;
    --cor-navy:            #1B2A4A;
    --cor-navy-claro:      #2C3E6A;
    --cor-branco:          #FFFFFF;
    --cor-cinza-claro:     #F5F7FA;
    --cor-cinza-medio:     #E8ECF0;
    --cor-cinza-texto:     #666666;
    --cor-texto-escuro:    #2C2C2C;
    --cor-sombra:          rgba(27, 42, 74, 0.15);

    --fonte-titulo:   'Playfair Display', sans-serif;
    --fonte-corpo:    'Lato', sans-serif;
    --fonte-acento:   'Lato', sans-serif;

    --tamanho-container: 1200px;
    --header-height: 85px;
    --raio-borda: 8px;
    --transicao: all 0.3s ease;
    --sombra-card: 0 4px 20px rgba(27, 42, 74, 0.12);
    --sombra-hover: 0 8px 30px rgba(27, 42, 74, 0.20);
}

/* Reset Universal */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--fonte-corpo);
    color: var(--cor-texto-escuro);
    background-color: var(--cor-branco);
    line-height: 1.7;
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicao);
}

ul {
    list-style: none;
}

/* ============================================================
   02. TIPOGRAFIA
   Fonte de títulos: Playfair Display (elegante/serifada)
   Fonte de corpo: Lato (moderna/legível)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    color: var(--cor-navy);
    line-height: 1.3;
	font-weight: normal;
}

h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: clamp(1rem, 2vw, 1.2rem); }

p {
    margin-bottom: 1rem;
    color: var(--cor-cinza-texto);
    line-height: 1.8;
}

p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   03. UTILITÁRIOS
   Classes auxiliares de uso geral
   ============================================================ */
.container {
    max-width: var(--tamanho-container);
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.section-padding-sm {
    padding: 50px 0;
}

/* Cabeçalho de seção com ícone logo_01 */
.section-header {
    text-align: center;
    margin-bottom: 55px;
}

.section-header .section-icon {
    width: 50px;
    height: auto;
    margin: 0 auto 15px;
    display: block;
}

.section-header h2 {
    color: var(--cor-navy);
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--cor-verde-principal);
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-header p {
    max-width: 650px;
    margin: 15px auto 0;
    color: var(--cor-cinza-texto);
    font-size: 1.05rem;
}

/* Fundos alternados entre seções */
.bg-white    { background-color: var(--cor-branco); }
.bg-light    { background-color: var(--cor-cinza-claro); }
.bg-navy     { background-color: var(--cor-navy); }
.bg-verde    { background-color: var(--cor-verde-principal); }

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: var(--raio-borda);
    font-family: var(--fonte-acento);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transicao);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--cor-verde-principal);
    color: var(--cor-branco);
    border-color: var(--cor-verde-principal);
}

.btn-primary:hover {
    background-color: var(--cor-verde-escuro);
    border-color: var(--cor-verde-escuro);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 139, 87, 0.4);
}

.btn-outline {
    background-color: transparent;
    color: var(--cor-branco);
    border-color: var(--cor-branco);
}

.btn-outline:hover {
    background-color: var(--cor-branco);
    color: var(--cor-verde-principal);
    transform: translateY(-2px);
}

.btn-whatsapp {
    background-color: #25D366;
    color: var(--cor-branco);
    border-color: #25D366;
}

.btn-whatsapp:hover {
    background-color: #1DA851;
    border-color: #1DA851;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* ============================================================
   04. HEADER E NAVEGAÇÃO
   Cabeçalho fixo com logo e menu principal

   IMPORTANTE (escopo das correções aplicadas):
   - A barra branca (#header) NÃO muda de altura ao rolar a
     página, em NENHUM dispositivo (correção geral já validada).
   - A redução do tamanho da logo e a centralização vertical
     do menu (.header-inner > nav) aplicam-se apenas ao
     DESKTOP. As regras de tablet e mobile na Seção 17
     permanecem com os valores originais, sem alteração.
   ============================================================ */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px var(--cor-sombra);
    height: var(--header-height);
    transition: var(--transicao);
    overflow: visible;
}

/* Ao rolar: mantém a MESMA altura, apenas intensifica a sombra */
#header.scrolled {
    box-shadow: 0 3px 25px var(--cor-sombra);
}

.header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
    padding-top: 8px;
    max-width: var(--tamanho-container);
    margin: 0 auto;
    overflow: visible;
}

/* Centraliza verticalmente o menu de navegação desktop dentro
   da barra. Não afeta tablet/mobile: nesses tamanhos o <nav>
   fica sem conteúdo visível (o <ul> interno é ocultado via
   display:none), então esta regra não altera o layout mobile. */
.header-inner > nav {
    align-self: center;
}

/* ── Logo no cabeçalho (valores de DESKTOP) ─────────────────
   A logo fica em uma caixa branca com sombra, levemente
   sobreposta à borda inferior do header sobre o banner.

   MANUTENÇÃO:
   - Tamanho da logo (desktop): edite height em .header-logo img
   - Quanto desce sobre o banner: ajuste margin-bottom
   - Caixa branca: edite padding e border-radius
   - Tablet e mobile têm seus próprios valores, definidos
     separadamente na Seção 17 (Responsividade), e NÃO são
     afetados pelos valores abaixo.
   ──────────────────────────────────────────────────────────── */
.header-logo {
    position: relative;
    z-index: 1001;

    /* Caixa branca com sombra */
    background: var(--cor-branco);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(27, 42, 74, 0.18);
    padding: 8px 16px 10px 16px;

    /* Leve overlap sobre o banner (apenas desktop) */
    margin-bottom: -16px;
}

.header-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo img {
    /* ── TAMANHO DA LOGO (DESKTOP) ───────────────────────────
       MANUTENÇÃO: Altura reduzida para um tamanho harmônico
       em relação à barra de 85px. Fixa, não muda com o scroll.
       Aplica-se somente ao desktop (telas > 992px); tablet e
       mobile usam os valores próprios da Seção 17.
       ──────────────────────────────────────────────────────── */
    height: 95px;
    width: auto;
    display: block;
}

/* Menu de navegação desktop */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-menu li a {
    display: block;
    padding: 8px 14px;
    font-family: var(--fonte-acento);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cor-navy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 5px;
    position: relative;
    transition: var(--transicao);
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--cor-verde-principal);
    border-radius: 2px;
    transition: var(--transicao);
}

.nav-menu li a:hover::after,
.nav-menu li a.active::after {
    width: 70%;
}

.nav-menu li a:hover,
.nav-menu li a.active {
    color: var(--cor-verde-principal);
}

/* ============================================================
   05. MENU HAMBURGUER (Mobile/Tablet)
   Exibido em telas menores que 992px

   OBS: mantido sem alteração de alinhamento nesta rodada de
   ajustes, pois as correções solicitadas eram exclusivas
   para o desktop.
   ============================================================ */
.hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px;
    border: none;
    background: transparent;
    gap: 2px;
}

.hamburger span {
    font-family: var(--fonte-acento);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--cor-navy);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.hamburger-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hamburger-lines .line {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--cor-navy);
    border-radius: 3px;
    transition: var(--transicao);
}

/* Animação hamburguer → X */
.hamburger.active .hamburger-lines .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .hamburger-lines .line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active .hamburger-lines .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Menu mobile overlay */
.nav-mobile {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--cor-branco);
    box-shadow: 0 10px 30px var(--cor-sombra);
    z-index: 999;
    padding: 20px 0;
    border-top: 3px solid var(--cor-verde-principal);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
}

.nav-mobile.active {
    display: block;
    animation: slideDown 0.3s ease;
}

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

.nav-mobile ul {
    display: flex;
    flex-direction: column;
}

.nav-mobile ul li a {
    display: block;
    padding: 14px 30px;
    font-family: var(--fonte-acento);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cor-navy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid var(--cor-cinza-medio);
    transition: var(--transicao);
}

.nav-mobile ul li a:hover {
    color: var(--cor-verde-principal);
    background-color: var(--cor-cinza-claro);
    padding-left: 40px;
}

/* ============================================================
   06. HERO / CARROSSEL
   Banner principal com 5 slides
   ============================================================ */

/* ============================================================
   06. HERO / CARROSSEL
   Banner principal com 5 slides
   ============================================================ */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    max-height: 850px;
    overflow: hidden;
    margin-top: var(--header-height);
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.9s ease-in-out;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay escurecido sobre o carrossel - Removendo a transparência */
.carousel-overlay {
    position: absolute;
    inset: 0;
    background: transparent; /* Remove qualquer transparência ou cor de overlay */
    z-index: 3;
}

/* Conteúdo textual sobre o carrossel */
.carousel-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.carousel-content-inner {
    max-width: 800px; /* Manter largura para centralização */
    color: var(--cor-branco);
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Estilos para a nova caixa de texto (.carousel-text-box) */
.carousel-text-box {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente para o box */
    padding: 25px 35px; /* Espaçamento interno um pouco menor */
    border-radius: var(--raio-borda); /* Borda arredondada */
    max-width: 650px; /* Largura máxima menor para a caixa de texto */
    margin: 0 auto; /* Centralizar a caixa */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
    text-align: center; /* Centraliza o texto dentro da caixa */
}

.carousel-text-box h1 {
    font-size: clamp(2rem, 4vw, 2.8rem); /* Ajuste de tamanho da fonte para o título, um pouco menor */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
    color: var(--cor-branco); /* Garante que o texto seja branco */
    font-weight: 700; /* Deixa o texto em negrito */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra para o texto */
}

.carousel-text-box p {
    font-size: clamp(1rem, 1.8vw, 1.15rem); /* Ajuste de tamanho da fonte para o parágrafo */
    margin-bottom: 0; /* Remover margem inferior padrão do último parágrafo */
    color: rgba(255,255,255,0.92); /* Cor do parágrafo */
    line-height: 1.7;
    text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

/* Remover estilos antigos do h1 e p do carrossel que não serão mais usados diretamente */
.carousel-content-inner h1 {
    /* Estas regras serão sobrescritas por .carousel-text-box h1 */
    /* Remova ou comente se não forem mais necessárias */
    /* color: var(--cor-branco); */
    /* font-size: clamp(1.8rem, 4.5vw, 3.2rem); */
    /* margin-bottom: 20px; */
    /* text-shadow: 0 2px 10px rgba(0,0,0,0.3); */
    /* font-weight: 700; */
}

.carousel-content-inner p {
    /* Estas regras serão sobrescritas por .carousel-text-box p */
    /* Remova ou comente se não forem mais necessárias */
    /* color: rgba(255,255,255,0.92); */
    /* font-size: clamp(1rem, 2vw, 1.25rem); */
    /* margin-bottom: 35px; */
    /* text-shadow: 0 1px 5px rgba(0,0,0,0.2); */
    /* line-height: 1.7; */
}

/* Setas de navegação do carrossel */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.6);
    color: var(--cor-branco);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--transicao);
    backdrop-filter: blur(5px);
}

.carousel-arrow:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }

/* Indicadores (dots) do carrossel */
.carousel-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 2px solid rgba(255,255,255,0.8);
    cursor: pointer;
    transition: var(--transicao);
}

.carousel-dot.active {
    background: var(--cor-branco);
    transform: scale(1.3);
}

/* ============================================================
   07. SEÇÃO SOBRE MIM
   ============================================================ */
#sobre {
    background-color: var(--cor-branco);
}

.sobre-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: center;
}

.sobre-imagem {
    position: relative;
}

.sobre-imagem img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    object-position: top center;
    border-radius: 12px;
    box-shadow: var(--sombra-card);
}

/* Moldura decorativa na foto */
.sobre-imagem::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--cor-verde-principal);
    border-radius: 12px;
    z-index: -1;
    transition: var(--transicao);
}

.sobre-imagem:hover::before {
    top: -8px;
    left: -8px;
}

.sobre-conteudo .section-header {
    text-align: center;
    margin-bottom: 25px;
}

.sobre-conteudo .section-header h2::after {
    margin: 10px auto 0;
}

.sobre-conteudo .section-icon {
    margin: 0 auto 15px;
}

.sobre-texto p {
    color: var(--cor-cinza-texto);
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.85;
}

.sobre-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cor-cinza-claro);
    border-left: 4px solid var(--cor-verde-principal);
    padding: 12px 18px;
    border-radius: 0 var(--raio-borda) var(--raio-borda) 0;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--cor-navy);
    font-weight: 600;
}

.sobre-badge i {
    color: var(--cor-verde-principal);
    font-size: 1.1rem;
}

/* ============================================================
   08. SEÇÃO CORPO CLÍNICO
   ============================================================ */
#equipe {
    background-color: var(--cor-cinza-claro);
}

.equipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.equipe-card {
    background: var(--cor-branco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
    transition: var(--transicao);
    text-align: center;
}

.equipe-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-hover);
}

.equipe-card-foto {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.equipe-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.equipe-card:hover .equipe-card-foto img {
    transform: scale(1.05);
}

.equipe-card-info {
    padding: 25px 20px;
}

.equipe-card-info h3 {
    color: var(--cor-navy);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.equipe-card-info .cargo {
    color: var(--cor-verde-principal);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.equipe-card-info p {
    font-size: 0.92rem;
    color: var(--cor-cinza-texto);
    line-height: 1.7;
}

/* Texto de apoio da seção equipe */
.equipe-texto-apoio {
    text-align: center;
    max-width: 750px;
    margin: 45px auto 0;
    padding: 25px 30px;
    background: var(--cor-branco);
    border-radius: var(--raio-borda);
    border-left: 4px solid var(--cor-verde-principal);
    box-shadow: var(--sombra-card);
    font-style: italic;
    color: var(--cor-navy);
    font-size: 1rem;
    line-height: 1.8;
}

/* ============================================================
   09. SEÇÃO NOSSO ESPAÇO (GALERIA)
   ============================================================ */
#espaco {
    background-color: var(--cor-branco);
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 15px;
}

/* Primeira foto maior (ocupa 2 colunas) */
.galeria-item:first-child {
    grid-column: span 2;
}

.galeria-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--raio-borda);
    cursor: pointer;
    box-shadow: var(--sombra-card);
}

.galeria-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.galeria-item:first-child img {
    height: 350px;
}

.galeria-item:hover img {
    transform: scale(1.07);
}

/* Overlay com ícone de ampliação */
.galeria-overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 42, 74, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transicao);
}

.galeria-item:hover .galeria-overlay {
    opacity: 1;
}

.galeria-overlay i {
    color: var(--cor-branco);
    font-size: 2.5rem;
}

/* ============================================================
   10. SEÇÃO NOSSOS SERVIÇOS (ACCORDION)
   Estrutura: Área → Accordion de serviços
   ============================================================ */
#servicos {
    background-color: var(--cor-cinza-claro);
}

.servicos-area {
    margin-bottom: 40px;
    background: var(--cor-branco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
}

.servicos-area:last-child {
    margin-bottom: 0;
}

/* Cabeçalho de cada área (clicável) */
.area-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 25px;
    background: var(--cor-navy);
    color: var(--cor-branco);
    cursor: pointer;
    transition: var(--transicao);
    user-select: none;
}

.area-header:hover {
    background: var(--cor-navy-claro);
}

.area-header .area-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--cor-verde-principal);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.area-header h3 {
    color: var(--cor-branco);
    font-family: var(--fonte-acento);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex: 1;
}

.area-header .area-toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
    color: var(--cor-verde-claro);
}

.area-header.active .area-toggle-icon {
    transform: rotate(180deg);
}

/* Lista de serviços dentro da área */
.area-body {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.area-body.open {
    max-height: 3000px;
    padding: 15px 25px 20px;
}

/* Item individual do accordion */
.accordion-item {
    border-bottom: 1px solid var(--cor-cinza-medio);
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    transition: var(--transicao);
    gap: 15px;
}

.accordion-header:hover .accordion-titulo {
    color: var(--cor-verde-principal);
}

.accordion-titulo {
    font-family: var(--fonte-acento);
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--cor-navy);
    transition: var(--transicao);
    flex: 1;
}

.accordion-icon {
    color: var(--cor-verde-principal);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-body.open {
    max-height: 500px;
}

.accordion-body p {
    padding: 0 0 18px 0;
    font-size: 0.95rem;
    color: var(--cor-cinza-texto);
    line-height: 1.8;
}

/* ============================================================
   11. SEÇÃO CURSOS
   ============================================================ */
#cursos {
    background-color: var(--cor-branco);
}

/* Estilos para o wrapper de Cursos Online */
.cursos-online-wrapper {
    margin-bottom: 60px;
}

.cursos-online-wrapper h3 {
    text-align: center;
    color: var(--cor-navy);
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.cursos-online-wrapper p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--cor-cinza-texto);
}

/* Grid de cards de cursos */
.cursos-grid,
.cursos-grid-futuros { /* Adicionado .cursos-grid-futuros aqui */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Card de curso individual */
.curso-card {
    background: var(--cor-cinza-claro);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--sombra-card);
    transition: var(--transicao);
}

.curso-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.curso-card-body h4 {
    color: var(--cor-navy);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.curso-card-body p {
    color: var(--cor-cinza-texto);
    margin-bottom: 25px;
}

/* Estilos para o wrapper de Supervisão Clínica */
.supervisao-clinica-wrapper {
    margin-top: 60px; /* Adiciona um espaçamento entre os cursos e a supervisão */
}

.supervisao-clinica-wrapper h3 {
    text-align: center;
    color: var(--cor-navy);
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.supervisao-clinica-wrapper p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--cor-cinza-texto);
}

/* Grid de itens de supervisão */
.supervisao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Item individual de supervisão */
.supervisao-item {
    background: var(--cor-cinza-claro);
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: var(--sombra-card);
    text-align: center;
    font-weight: 600;
    color: var(--cor-navy);
    transition: var(--transicao);
}

.supervisao-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(27, 42, 74, 0.15);
}

/* Textos informativos da supervisão */
.supervisao-info-text {
    text-align: center;
    margin-top: 30px; /* Ajuste conforme necessário para o primeiro parágrafo */
    color: var(--cor-cinza-texto);
}

.supervisao-info-text + .supervisao-info-text { /* Para o segundo parágrafo */
    margin-top: 15px;
}

/* Botão CTA da supervisão */
.supervisao-cta {
    text-align: center;
    margin-top: 30px;
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
    .cursos-online-wrapper h3,
    .supervisao-clinica-wrapper h3 {
        font-size: 1.5rem;
    }

    .cursos-online-wrapper p,
    .supervisao-clinica-wrapper p {
        margin-bottom: 30px;
    }

    .cursos-grid,
    .cursos-grid-futuros,
    .supervisao-grid {
        gap: 20px;
    }

    .curso-card {
        padding: 25px;
    }

    .curso-card-body h4 {
        font-size: 1.2rem;
    }

    .supervisao-item {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .cursos-online-wrapper h3,
    .supervisao-clinica-wrapper h3 {
        font-size: 1.3rem;
    }

    .cursos-online-wrapper p,
    .supervisao-clinica-wrapper p {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    .cursos-grid,
    .cursos-grid-futuros {
        grid-template-columns: 1fr;
    }

    .curso-card {
        padding: 20px;
    }

    .curso-card-body h4 {
        font-size: 1.1rem;
    }

    .supervisao-grid {
        grid-template-columns: 1fr;
    }

    .supervisao-item {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   12. SEÇÃO CONTATO
   ============================================================ */
#contato {
    background-color: var(--cor-cinza-claro);
}

.contato-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Formulário */
.contato-form-wrapper {
    background: var(--cor-branco);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--sombra-card);
}

.contato-form-wrapper h3 {
    color: var(--cor-navy);
    margin-bottom: 25px;
    font-size: 1.4rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cor-navy);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--cor-cinza-medio);
    border-radius: var(--raio-borda);
    font-family: var(--fonte-corpo);
    font-size: 0.97rem;
    color: var(--cor-texto-escuro);
    background: var(--cor-branco);
    transition: var(--transicao);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--cor-verde-principal);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
}

.form-group textarea {
    height: 130px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #AAAAAA;
}

.form-btn {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    justify-content: center;
}

/* Mensagens de feedback do formulário */
.form-mensagem {
    display: none;
    padding: 14px 18px;
    border-radius: var(--raio-borda);
    margin-top: 15px;
    font-size: 0.95rem;
    font-weight: 600;
}

.form-mensagem.sucesso {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-mensagem.erro {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* Informações de contato */
.contato-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contato-info-card {
    background: var(--cor-branco);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--sombra-card);
}

.contato-info-card h3 {
    color: var(--cor-navy);
    font-size: 1.1rem;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--cor-verde-principal);
}

.contato-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.contato-info-item:last-child {
    margin-bottom: 0;
}

.contato-info-item i {
    color: var(--cor-verde-principal);
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
    width: 20px;
}

.contato-info-item .info-texto {
    font-size: 0.93rem;
    color: var(--cor-cinza-texto);
    line-height: 1.6;
}

.contato-info-item .info-texto strong {
    display: block;
    color: var(--cor-navy);
    font-weight: 700;
    margin-bottom: 2px;
}

/* Horários */
.horario-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 15px;
    font-size: 0.88rem;
}

.horario-dia {
    color: var(--cor-navy);
    font-weight: 600;
}

.horario-hora {
    color: var(--cor-cinza-texto);
}

.horario-fechado {
    color: #DC3545;
}

/* Mapa Google Maps */
.mapa-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-card);
    margin-top: 25px;
}

.mapa-wrapper iframe {
    width: 100%;
    height: 585px;
    border: none;
    display: block;
}
/* Correção para alinhamento superior do mapa na seção de contato */
#contato .contato-grid .mapa-wrapper {
    margin-top: 0; /* Garante que o mapa se alinhe ao topo da coluna */
}
/* ============================================================
   13. RODAPÉ
   ============================================================ */
#footer {
    background-color: var(--cor-navy);
    color: rgba(255,255,255,0.85);
}

/* CTA final no rodapé */
.footer-cta {
    background: linear-gradient(135deg, var(--cor-verde-principal), var(--cor-verde-escuro));
    text-align: center;
    padding: 50px 20px;
}

.footer-cta h2 {
    color: var(--cor-branco);
    margin-bottom: 15px;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.footer-cta p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 25px;
    font-size: 1.05rem;
}

/* Conteúdo principal do rodapé */
.footer-main {
    padding: 55px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--cor-branco);
    font-family: var(--fonte-acento);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cor-verde-principal);
}

/* Logo no rodapé */
.footer-logo img {
    height: 30px;
    width: auto;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-logo p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
}

/* Mapa do site (links rápidos) */
.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
    transition: var(--transicao);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links ul li a::before {
    content: '→';
    color: var(--cor-verde-principal);
    font-size: 0.8rem;
}

.footer-links ul li a:hover {
    color: var(--cor-branco);
    padding-left: 5px;
}

/* Coluna de contato e redes sociais */
.footer-contato .contato-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
}

.footer-contato .contato-item i {
    color: var(--cor-verde-principal);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Redes sociais */
.social-links {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--cor-branco);
    font-size: 1.1rem;
    transition: var(--transicao);
    border: 1px solid rgba(255,255,255,0.2);
}

.social-link:hover {
    transform: translateY(-3px);
}

.social-link.whatsapp:hover { background: #25D366; border-color: #25D366; }
.social-link.instagram:hover { background: #E1306C; border-color: #E1306C; }
.social-link.facebook:hover { background: #1877F2; border-color: #1877F2; }

/* Barra inferior do rodapé */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.55);
}

.footer-bottom a {
    color: var(--cor-verde-claro);
    font-weight: 600;
}

.footer-bottom a:hover {
    color: var(--cor-branco);
}

/* Contador de visitas */
.contador-visitas {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.55);
}

.contador-visitas i {
    color: var(--cor-verde-principal);
}

/* ============================================================
   14. BOTÃO WHATSAPP FLUTUANTE
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: pulse-whatsapp 2.5s infinite;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    color: var(--cor-branco);
    font-size: 1.8rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    transition: var(--transicao);
}

.whatsapp-float a:hover {
    background-color: #1DA851;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.7);
}

.whatsapp-float .whatsapp-label {
    background: var(--cor-branco);
    color: var(--cor-verde-escuro);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    white-space: nowrap;
}

@keyframes pulse-whatsapp {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* ============================================================
   15. LIGHTBOX (Galeria ampliada)
   Abre a imagem em tamanho real ao clicar
   ============================================================ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--raio-borda);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: var(--cor-branco);
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transicao);
    background: rgba(255,255,255,0.1);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(90deg);
}

/* ============================================================
   16. SCROLL TO TOP
   ============================================================ */
.scroll-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 9998;
    display: none;
    width: 45px;
    height: 45px;
    background: var(--cor-navy);
    color: var(--cor-branco);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--cor-sombra);
    transition: var(--transicao);
    border: none;
}

.scroll-top.visible {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.scroll-top:hover {
    background: var(--cor-verde-principal);
    transform: translateY(-3px);
}

/* ============================================================
   17. RESPONSIVIDADE – MEDIA QUERIES

   IMPORTANTE: os blocos de logo (tablet, mobile grande e
   mobile pequeno) abaixo permanecem com os valores ORIGINAIS,
   sem qualquer alteração nesta rodada. A redução de tamanho
   da logo e a centralização do menu são exclusivas do
   desktop (Seção 04, acima).
   ============================================================ */

/* Tablet grande e desktop pequeno (< 1100px) */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablet (< 992px) */
@media (max-width: 992px) {
    :root { --header-height: 75px; }

    /* Ativa menu hamburguer */
    .nav-menu { display: none; }
    .hamburger { display: flex; }

    /* Sobre */
    .sobre-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sobre-imagem img { height: 400px; }

    .sobre-conteudo .section-header {
        text-align: center;
		margin-bottom: 25px;
    }

    .sobre-conteudo .section-header h2::after {
        margin: 10px auto 0;
    }

    .sobre-conteudo .section-icon {
        margin: 0 auto 15px;
    }

    /* Equipe */
    .equipe-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contato */
    .contato-grid {
        grid-template-columns: 1fr;
    }

    /* Rodapé */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Logo tablet — valores originais, inalterados */
    .header-logo {
        padding: 8px 14px 12px 14px;
        margin-bottom: -40px;
        border-radius: 10px;
    }

    .header-logo img {
        height: 95px;
    }
}

/* Mobile grande (< 768px) */
@media (max-width: 768px) {
    .section-padding { padding: 60px 0; }

    #hero {
        height: 85vh;
        min-height: 500px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    /* Galeria */
    .galeria-grid {
        grid-template-columns: 1fr 1fr;
    }

    .galeria-item:first-child {
        grid-column: span 2;
    }

    .galeria-item img { height: 200px; }
    .galeria-item:first-child img { height: 250px; }

    /* Formulário */
    .contato-form-wrapper { padding: 25px 20px; }

    /* Equipe */
    .equipe-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }

    /* Logo mobile grande — valores originais, inalterados */
    .header-logo {
        padding: 7px 12px 10px 12px;
        margin-bottom: -30px;
        border-radius: 8px;
    }

    .header-logo img {
        height: 80px;
    }
}

/* Mobile pequeno (< 480px) */
@media (max-width: 480px) {
    :root { --header-height: 70px; }

    /* Logo mobile pequeno — valores originais, inalterados */
    .header-logo {
        padding: 6px 10px 8px 10px;
        margin-bottom: -20px;
        border-radius: 8px;
    }

    .header-logo img {
        height: 62px;
    }

    .btn { padding: 12px 22px; font-size: 0.9rem; }

    .carousel-content-inner h1 { font-size: 1.6rem; }
    .carousel-content-inner p { font-size: 0.92rem; }

    .sobre-imagem img { height: 320px; }

    /* Galeria mobile */
    .galeria-grid {
        grid-template-columns: 1fr;
    }

    .galeria-item:first-child {
        grid-column: span 1;
    }

    .galeria-item img { height: 230px; }
    .galeria-item:first-child img { height: 230px; }

    .whatsapp-float { bottom: 20px; right: 20px; }
    .whatsapp-float a { width: 52px; height: 52px; font-size: 1.5rem; }

    .scroll-top { bottom: 85px; right: 20px; }

    .horario-grid { grid-template-columns: 1fr; }
}