/* static/style.css */

/* -----------------------------------------------------------------------
   Nova Paleta de cores:
   - Branco: #FDFDFD
   - Bege Areia: #E9DBC4
   - Verde Claro Azulado: #98E3B4
   - Laranja Quente (Botões CTA): #F5A846
   - Texto principal: #333333 (mantido para legibilidade)
----------------------------------------------------------------------- */

:root {
    --color-white: #FDFDFD;
    --color-beige: #E9DBC4;
    --color-green: #98E3B4;
    --color-orange: #F5A846;
    --color-text-dark: #333333;
    --color-text-light: #ffffff; /* For dark backgrounds */
    --color-link: #333333; /* Default link color */
    --color-link-hover: #F5A846; /* Link hover color */
}


/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Corpo */
body {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    position: relative;
    padding-top: 70px; /* Space for fixed header */
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-text-dark);
    margin-bottom: 0.8em;
    line-height: 1.3;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.2rem;
}

p {
    margin-bottom: 1em;
    line-height: 1.7;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-link-hover);
}

/* Generic button style for CTAs */
.primary-button {
    display: inline-block;
    background-color: var(--color-orange);
    color: #fafafa;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    text-align: center;
}

.primary-button:hover {
    background-color: #e09b3f;
    transform: translateY(-2px);
    color: #ffffff;
}

#btnAgendarHeader {
    display: inline-block;
    background-color: var(--color-orange);
    color: #ffffff;
    border-radius: 5px;
}

#btnAgendarHeader:hover {
    background-color: #e09b3f;
    transform: translateY(-1px);
    color: #ffffff;
}


/* --------------------- CABEÇALHO --------------------- */
.site-header {
    height: 70px;
    background-color: var(--color-white);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    transition: height 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
}

.site-header.scrolled {
    height: 60px; /* Smaller height when scrolled */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-h1 {
    margin: 0;
}

.logo-img {
    display: block;
    width: 180px; /* Adjusted size */
    height: auto;
    transition: transform 0.3s ease;
}

.logo-link:hover .logo-img {
    transform: scale(1.05);
}


.header-social-icon {
    display: flex; /* Use flex to easily center the icon */
    align-items: center;
    margin-left: auto; /* Push it to the right */
    margin-right: 20px; /* Space before hamburger or nav */
}

.header-social-icon a {
    line-height: 1; /* Align icon vertically */
}

.header-social-icon .social-icon-img {
    width: 25px;
    font-size: 1.5rem;
    color: var(--color-text-dark); /* Dark color on light header */
    transition: color 0.3s ease;
}

.header-social-icon .social-icon-img:hover {
    color: var(--color-orange);
}


.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0; /* Ensure no default padding */
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    color: var(--color-text-dark);
    font-weight: 600;
    transition: color 0.3s ease;
    line-height: 1; /* Align vertically */
}

.main-nav a:hover {
    color: var(--color-orange);
}

.social-icon .social-icon-img {
    font-size: 1.5rem; /* Adjust icon size */
    vertical-align: middle;
    color: var(--color-text-dark);
    transition: color 0.3s ease;
}

.social-icon:hover .social-icon-img {
    color: var(--color-orange);
}

.nav-cta a {
    /* Inherits primary-button styles */
    padding: 8px 18px; /* Slightly smaller padding for header button */
    font-size: 0.95rem;
}

/* Hamburger menu button (mobile) */
.nav-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000; /* Above the nav */
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    position: relative;
    transition: background-color 0.3s ease;
}

.hamburger::before,
.hamburger::after {
    content: "";
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-dark);
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, top 0.3s ease;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    top: 8px;
}

/* Styles when menu is open (hamburger transform) */
.nav-toggle.active .hamburger {
    background-color: transparent;
}

.nav-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle.active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Close menu button (mobile nav) */
.close-nav {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-light);
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 1001;
}


/* --------------------- HERO --------------------- */
.hero {
    position: relative;
    z-index: 1;
    min-height: 60vh;
    background-size: cover; /* Cover the section */
    background-position: center; /* Center the image */
    display: flex;
    align-items: center;
    padding: 80px 0; /* Add padding top and bottom */
    color: var(--color-text-light); /* Default text color for potentially dark areas */
}

.hero   { position: relative; overflow: hidden; }
.hero-bg,
.hero-bg img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;          /* cobre sem distorcer */
    object-position: center;    /* ponto focal padrão   */
    z-index: 0;                 /* atrás do overlay     */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(253, 253, 253, 0.9) 0%, rgba(253, 253, 253, 0.6) 70%, rgba(253, 253, 253, 0) 100%); /* Gradient from left to right */
    z-index: 1;
}

.hero-content {
    position: relative; /* Ensure content is above overlay */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align text to the left on desktop */
    gap: 40px;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1 1 500px;
    max-width: 600px;
    color: var(--color-text-dark); /* Ensure text is dark and readable */
}

.hero-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.4em;
    color: var(--color-text-dark); /* Ensure heading is dark */
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    font-weight: 500;
    color: var(--color-text-dark); /* Ensure paragraph is dark */
}

.hero-button {
    /* Inherits primary-button styles - should be orange */
    margin-bottom: 15px;
}

.reuniao-acolhimento-link a {
    font-size: 1rem;
    color: var(--color-text-dark); /* Ensure link is dark */
    text-decoration: underline;
}


/* --------------------- SEÇÃO ESPECIALIDADES (GRID EXPANSÍVEL) --------------------- */
.especialidades {
    margin-top: 60px; /* More space below hero */
    text-align: center;
}

.especialidades h3 {
    margin-bottom: 10px;
}

.especialidades p {
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.especialidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between items */
    margin-bottom: 30px;
}

.especialidade-item {
    background-color: var(--color-white);
    padding: 20px 15px; /* Adjusted padding */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none; /* Remove underline from link */
    color: var(--color-text-dark);
}

.especialidade-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.especialidade-item img {
    width: 50px; /* Smaller icons */
    height: 50px;
    margin-bottom: 15px;
    object-fit: contain;
}

.especialidade-item h4 {
    margin: 0; /* Remove default margin */
    font-size: 1rem; /* Adjusted font size */
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Styles for hidden items */
.especialidade-item.hidden {
    display: none;
}

.show-more-specialties {
    background: none; /* Remove background */
    color: var(--color-link); /* Use link color */
    padding: 0; /* Remove padding */
    font-size: 1rem;
    font-weight: 600;
    border: none; /* Remove border */
    border-radius: 0; /* Remove border radius */
    cursor: pointer;
    text-decoration: underline; /* Add underline for link style */
    transition: color 0.3s ease; /* Smooth color transition */
}

.show-more-specialties:hover {
    color: var(--color-link-hover); /* Change color on hover */
    transform: none; /* Remove hover transform effect */
}


/* --------------------- SEÇÃO APRESENTAÇÃO (FOTO + TEXTO) --------------------- */
.apresentacao {
    display: flex;
    align-items: center;
    gap: 40px;
    background-color: var(--color-beige); /* Beige background */
    border-radius: 8px;
    margin-top: 60px;
    padding: 50px 30px; /* More padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

.apresentacao-foto {
    flex: 1 1 300px;
    text-align: center; /* Center image on mobile */
}

.apresentacao-foto img {
    width: 280px; /* Adjusted size */
    height: auto;
    border-radius: 50%; /* Circular image */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.apresentacao-texto {
    flex: 2 1 400px; /* Text takes more space */
    line-height: 1.7;
}

.apresentacao-texto h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.apresentacao-texto p {
    font-size: 1.05rem;
    margin-bottom: 15px;
}

.apresentacao-texto h4 a {
    font-size: 1.05rem;
    color: var(--color-text-dark);
    text-decoration: underline;
    font-weight: 600;
}

.apresentacao-texto h4 a:hover {
    color: #2bcf60;
}

/* --------------------- SEÇÃO AVALIAÇÕES --------------------- */
.avaliacoes {
    margin-top: 60px;
    background-color: var(--color-white);
    padding: 50px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.avaliacoes h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.avaliacoes > p {
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--color-text-dark);
}

.avaliacoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 20px;
}

.avaliacao-item {
    background-color: var(--color-beige);
    padding: 25px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avaliacao-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.aspas {
    font-size: 3rem;
    color: #8B4513; /* Marrom escuro que harmoniza com o bege */
    font-family: serif;
    position: absolute;
    top: 10px;
    left: 15px;
    line-height: 1;
}

.avaliacao-texto {
    margin: 15px 0 20px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    font-style: italic;
    padding-left: 15px;
}

.avaliacao-autor {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
    text-align: right;
    margin-top: 15px;
}

.avaliacao-estrelas {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    gap: 2px;
}

.estrela {
    color: #F5A846; /* Cor laranja do site */
    font-size: 1rem;
}

/* Mobile adjustments for testimonials */
@media (max-width: 768px) {
    .avaliacoes {
        padding: 30px 15px;
    }
    
    .avaliacoes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .avaliacao-item {
        padding: 20px 15px;
    }
    
    .aspas {
        font-size: 2.5rem;
        top: 5px;
        left: 10px;
        color: #8B4513; /* Mantém a cor marrom no mobile */
    }
    
    .avaliacao-texto {
        font-size: 0.95rem;
        padding-left: 10px;
    }
}

/* --------------------- SEÇÃO COMO POSSO TE AJUDAR (Abordagens) --------------------- */
.como-posso-te-ajudar {
    margin-top: 60px;
    background-color: var(--color-white);
    padding: 50px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.como-posso-te-ajudar h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.como-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.como-texto {
    flex: 1 1 400px;
    line-height: 1.7;
}

.como-texto p {
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.como-conclusao {
    margin-top: 20px;
    font-weight: 600;
}

.como-imagem {
    flex: 1 1 300px;
    text-align: center;
}

.como-imagem img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.abordagens-links {
    text-align: center;
    margin-top: 20px;
}

.abordagens-links a {
    display: inline-block;
    margin: 0 10px;
    /* Inherits abordagem-saiba-mais styles from previous version, adjust below */
    background-color: var(--color-green);
    color: var(--color-text-dark);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
}

.abordagens-links a:hover {
    background-color: #85c19f;
    transform: translateY(-2px);
}


/* --------------------- SEÇÃO FORMATO DE SESSÃO --------------------- */
.formato-sessao {
    margin-top: 60px;
    background-color: var(--color-beige); /* Beige background */
    padding: 50px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.formato-sessao h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.formato-sessao-wrapper {
    display: flex;
    justify-content: center; /* Center the blocks */
    gap: 30px;
    flex-wrap: wrap; /* Allow wrapping */
}

.sessao-bloco {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 30px 20px; /* More padding */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-align: center;
    flex: 1 1 300px; /* Can grow, basis 300px */
    max-width: 400px; /* Max width for larger screens */
}

.sessao-bloco img {
    width: 60px;
    height: auto;
    margin-bottom: 20px;
}

.sessao-bloco h4 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.sessao-bloco p {
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.sessao-saiba-mais {
    /* Inherits primary-button style */
    background-color: var(--color-orange);
    color: var(--color-text-light);
    padding: 10px 20px;
    font-size: 0.95rem;
}

/* --------------------- SEÇÃO RECOMENDAÇÕES PARA SESSÃO ONLINE --------------------- */
.recomendacoes {
    margin-top: 60px;
    background-color: var(--color-white);
    padding: 50px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.recomendacoes h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.lista-recomendacoes {
    display: flex;
    flex-direction: column;
    gap: 25px; /* More space between items */
}

.item-recomendacao {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* More space between number and text */
}

.numero-recomendacao {
    width: 45px; /* Larger number circle */
    height: 45px;
    background-color: var(--color-green); /* Green background */
    color: var(--color-text-dark); /* Dark text on green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.item-recomendacao p {
    color: var(--color-text-dark);
    line-height: 1.6;
    margin: 0; /* Remove bottom margin */
    font-size: 1.05rem;
}


/* --------------------- SEÇÃO HORÁRIOS DE ATENDIMENTO --------------------- */
.horarios {
    margin-top: 60px;
    background-color: var(--color-green); /* Green background */
    border-radius: 8px;
    padding: 50px 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: var(--color-text-dark); /* Dark text on green */
}

.horarios h3 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8rem;
    color: var(--color-text-dark); /* Dark title on green */
}

.horarios-texto p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--color-text-dark);
    font-size: 1.05rem;
}


/* --------------------- FAQ --------------------- */
.faq {
    margin-top: 60px;
    margin-bottom: 40px;
}

.faq h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.faq-item {
    margin-bottom: 15px; /* More space between items */
    border: 1px solid #ddd; /* Light border */
    border-radius: 8px;
    overflow: hidden; /* Hide overflowing answer */
}

.faq-question {
    width: 100%;
    text-align: left;
    background-color: var(--color-beige); /* Beige background for question */
    color: var(--color-text-dark);
    padding: 15px 20px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

.faq-question::after {
    content: '+'; /* Plus sign */
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    content: '-'; /* Minus sign when active */
    transform: rotate(0deg); /* No rotation needed for + to - */
}


.faq-question:hover {
    background-color: #dccbb7; /* Slightly darker beige */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    background-color: var(--color-white);
    padding: 0 20px; /* Adjust padding */
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Sufficiently large to accommodate content */
    padding: 20px; /* Restore padding when active */
}

.faq-answer p {
    margin: 0 0 1em 0; /* Add bottom margin to paragraphs within answer */
    font-size: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0; /* No bottom margin for the last paragraph */
}

.faq-answer ul {
    margin: 1em 0;
    padding-left: 25px;
    list-style: disc;
}

.faq-answer li {
    margin-bottom: 0.5em;
    font-size: 1rem;
}


/* --------------------- RODAPÉ --------------------- */
.site-footer {
    background-color: var(--color-text-dark); /* Dark background for footer */
    color: var(--color-text-light);
    padding: 40px 0; /* More padding */
    margin-top: 60px;
    text-align: center;
    font-size: 0.95rem;
}

.rodape-conteudo {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* More space between columns */
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
}

.rodape-coluna {
    flex: 1 1 250px; /* Can grow, basis 250px */
    min-width: 200px;
    text-align: left;
}

.rodape-coluna h4 {
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text-light);
    font-size: 1.1rem;
}

.rodape-coluna p {
    margin-bottom: 8px;
    color: var(--color-text-light);
}

.rodape-coluna a {
    color: var(--color-text-light);
    text-decoration: underline;
    transition: opacity 0.2s;
}

.rodape-coluna a:hover {
    opacity: 0.8;
    color: var(--color-orange); /* Orange hover for links */
}

.rodape-aviso {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Separator line */
    padding-top: 20px;
}

.rodape-aviso p {
    margin: 8px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}


/* --------------------- BOTÃO WHATSAPP FLUTUANTE --------------------- */
.floating-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25d366; /* Standard WhatsApp green */
    color: #fff;
    width: 55px; /* Slightly larger */
    height: 55px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* High z-index */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.15); /* More prominent hover effect */
    opacity: 0.9;
}

.whatsapp-icon {
    width: 32px; /* Icon size */
    height: 32px;
    display: block;
}


/* --------------------- PAGES OTHER THAN INDEX --------------------- */
.pagina-conteudo {
    background-color: var(--color-white);
    padding: 40px 20px;
    margin-top: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pagina-conteudo h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--color-text-dark);
}

.pagina-conteudo p {
    margin-bottom: 1em;
    line-height: 1.7;
    font-size: 1.05rem;
}

.pagina-conteudo ul {
    margin: 1em 0;
    padding-left: 25px;
    list-style: disc;
}

.pagina-conteudo li {
    margin-bottom: 0.5em;
    font-size: 1.05rem;
}

.pagina-conteudo figure {
    text-align: center;
    margin: 2rem 0;
}

.pagina-conteudo figure img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagina-conteudo figcaption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 10px;
}


.agendamento-cta {
    margin-top: 40px;
    text-align: center;
}

/* --------------------- RESPONSIVIDADE MOBILE --------------------- */
@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Adjust padding for smaller header */
    }

    .site-header {
        height: 60px;
        padding: 0 15px;
    }

    .header-flex {
        justify-content: space-between;
    }

    .logo-img {
        width: 150px; /* Smaller logo on mobile */
    }

    .header-social-icon {
        margin-right: 10px; /* Reduce margin next to hamburger */
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -300px; /* Hide off-screen */
        width: 280px; /* Width of the mobile menu */
        height: 100%;
        background-color: var(--color-text-dark); /* Dark background for mobile menu */
        color: var(--color-text-light);
        transition: right 0.4s ease;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        z-index: 999;
        padding-top: 70px; /* Space for close button */
    }

    .main-nav.show-menu {
        right: 0; /* Slide in */
    }

    .main-nav ul {
        flex-direction: column;
        align-items: flex-start; /* Align items to the left */
        padding: 20px;
    }

    .main-nav li {
        margin: 15px 0; /* Vertical spacing */
        width: 100%; /* Make links take full width */
    }

    .main-nav a {
        color: var(--color-text-light); /* Light text on dark background */
        font-size: 1.1rem;
    }

    .main-nav a:hover {
        color: var(--color-orange);
    }

    .social-icon .social-icon-img {
        color: var(--color-text-light); /* Light icons */
        width: 22px;
    }

    .nav-cta a {
        width: 100%; /* Full width button */
        text-align: center;
    }

    .nav-toggle {
        display: flex; /* Show hamburger */
        align-items: center;
        justify-content: center;
    }

    .close-nav {
        display: block; /* Show close button */
    }

    .hero {
        padding-top: 40px;
        min-height: 60vh; /* Adjust as needed for mobile */
        background-position: 70% center; /* Adjust background position to show relevant part */
    }

    .hero-bg img { object-position: 80% center; }

    .hero-overlay {
        background: linear-gradient(to bottom, rgba(253, 253, 253, 0.9) 0%, rgba(253, 253, 253, 0.6) 55%, rgba(253, 253, 253, 0) 100%); /* Gradient from top to bottom on mobile */
    }

    .hero-content {
        flex-direction: column;
        text-align: center; /* Center text on mobile */
        justify-content: center; /* Center content vertically */
        gap: 30px;
    }

    .hero-text {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0 15px; /* Add some padding */
    }

    .hero-text h2 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .reuniao-acolhimento-link a {
        color: var(--color-text-dark);
    }

    /* Adjust sections for mobile */
    .apresentacao,
    .como-posso-te-ajudar,
    .formato-sessao,
    .recomendacoes,
    .horarios,
    .faq,
    .pagina-conteudo {
        padding: 30px 15px; /* Reduce padding on sections */
        margin-top: 40px; /* Reduce top margin */
    }

    .apresentacao {
        flex-direction: column; /* Stack items */
        text-align: center;
    }

    .apresentacao-foto {
        flex: 1 1 50px;
        text-align: center; /* Center image on mobile */
    }

    .apresentacao-foto img {
        width: 200px; /* Smaller circular image */
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .apresentacao-texto h3 {
        font-size: 1.5rem;
    }

    .abordagens-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .como-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .como-texto, .como-imagem {
        flex: 1 1 100%;
    }

    .formato-sessao-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .sessao-bloco {
        padding: 20px 15px;
    }

    .sessao-bloco h4 {
        font-size: 1.2rem;
    }

    .sessao-bloco p {
        font-size: 1rem;
    }


    .lista-recomendacoes {
        gap: 20px;
    }

    .item-recomendacao {
        gap: 15px;
    }

    .numero-recomendacao {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .item-recomendacao p {
        font-size: 1rem;
    }

    .horarios h3,
    .recomendacoes h3,
    .faq h3,
    .pagina-conteudo h2 {
        font-size: 1.6rem;
    }

    .rodape-conteudo {
        flex-direction: column; /* Stack columns */
        align-items: center;
        gap: 30px;
    }

    .rodape-coluna {
        text-align: center; /* Center text in footer columns */
        min-width: auto; /* Allow columns to shrink */
    }

}

.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------- SEÇÃO POSTS RECENTES (INDEX) --------------------- */
.posts-recentes {
    margin-top: 60px;
    text-align: center;
    background-color: var(--color-beige); /* Fundo bege como outras seções */
    padding: 50px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.posts-recentes h3 {
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.posts-recentes > p { /* Parágrafo diretamente dentro da seção */
    margin-bottom: 30px;
    font-size: 1.1rem;
    color: var(--color-text-dark);
}

.posts-grid {
    display: grid;
    /* Cria colunas responsivas: Mínimo 280px, máximo 1fr (ocupa espaço igual) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Espaço entre os cards */
    margin-bottom: 30px;
}

.post-card {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Garante que a imagem não saia do card */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Alinha texto do card à esquerda */
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.post-image {
    width: 100%;
    height: 200px; /* Altura fixa para a imagem */
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre a área sem distorcer */
    display: block;
    transition: transform 0.3s ease;
}

.post-card:hover .post-image img {
    transform: scale(1.05); /* Efeito de zoom suave na imagem */
}

.post-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o conteúdo ocupar o espaço restante */
}

.post-date {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
    display: block; /* Garante que fique em sua própria linha */
}

.post-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-text-dark);
     /* Limita o título a 2 linhas com reticências */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* Altura mínima para 2 linhas (ajuste line-height se necessário) */
}

.post-description {
    font-size: 0.95rem;
    color: #444;
    margin-bottom: 20px;
    flex-grow: 1; /* Ocupa espaço para empurrar o botão para baixo */
     /* Limita a descrição a 3 linhas com reticências */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
     min-height: 4.5em; /* Altura mínima para 3 linhas (ajuste line-height se necessário) */
}

.post-link {
    /* Herda .primary-button */
    margin-top: auto; /* Empurra para o final do card */
    align-self: flex-start; /* Alinha o botão à esquerda */
    font-size: 0.9rem;
    padding: 8px 15px;
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center;
    gap: 5px; /* Espaço entre texto e ícone */
}

.post-link i {
    font-size: 1.1em; /* Tamanho do ícone do Instagram */
}


/* Botão Mostrar Mais Posts */
.show-more-posts {
     /* Estilo similar ao show-more-specialties */
    background: none;
    color: var(--color-link);
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
    margin-top: 10px; /* Espaço acima do botão */
}

.show-more-posts:hover {
    color: var(--color-link-hover);
    transform: none;
}

/* Esconder posts extras */
.post-card.hidden {
    display: none;
}

.post-wrapper.hidden {
    display: none;
}

.posts-grid .post-wrapper:not(.hidden) .post-card.fade-in {
   opacity: 1;
   transform: translateY(0);
   /* transition-delay: 0.1s; */
}

/* Ajustes mobile para posts */
@media (max-width: 768px) {
    .posts-recentes {
        padding: 30px 15px;
    }
    .posts-grid {
        /* Garante uma coluna em telas pequenas se auto-fit não for suficiente */
        grid-template-columns: 1fr;
        gap: 20px;
    }
     .post-title {
         font-size: 1.1rem;
          min-height: 2.4em; /* Ajuste se necessário */
     }
      .post-description {
         font-size: 0.9rem;
         min-height: 4.2em; /* Ajuste se necessário */
     }
}