/* --- Global Resets & Basics --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --color-primary: #4979d3;      /* Make sure you have the semicolon here */
    --color-accent: #e30000;       
    --color-background: #ffffff;   
    --color-text: #333333;
}

body {
    font-family: 'Poppins', sans-serif; 
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background); /* Apply the background color */
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif; 
    color: var(--color-accent); /* Headings in your deep blue */
}

/* --- MARQUEE BANNER (LETREIRO DE ROLAGEM) --- */

/* 1. Estiliza a Faixa (o container externo) */
.marquee-banner {
    background-color: var(--color-accent, #e30000); /* Usa sua cor de destaque */
    color: white;
    padding: 8px 0;
    overflow: hidden; /* **CRUCIAL:** Esconde o conteúdo que está rolando para fora */
    white-space: nowrap; /* Impede que o texto quebre linha */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil abaixo */
}

/* 2. Estiliza o Conteúdo (o texto interno que será animado) */
.marquee-content {
    display: inline-block;
    /* Inicia a animação */
    animation: marquee-scroll 10s linear infinite; 
    /* 15s = duração, linear = velocidade constante, infinite = repete para sempre */
animation-delay: 0s;
}

.marquee-content span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-right: 200px; /* Espaço entre o texto repetido */
}


/* 3. Define a Animação */
@keyframes marquee-scroll {
    /* De: Posição inicial (fora da tela, à direita) */
    from {
        transform: translateX(100%);
    }
    /* Para: Posição final (fora da tela, à esquerda) */
    to {
        transform: translateX(-100%);
    }
}
/* --- 1. Header Styling (Logo Top Left + Nav) --- */
.main-header {
 display: flex;
    /* Changed justification to ensure logo and nav use space efficiently */
    justify-content: space-between; 
    align-items: center;
    padding: 0 50px; /* Reduced vertical padding here, we'll add it to the links */
    background-color: white; 
    /* Remove border-bottom here if you want the nav border to be the bottom line */
    border-bottom: none;
}

.header-logo { /* New style for your SVG image */
    height: 200px; /* Adjust as needed */
    width: auto; /* Maintain aspect ratio */
}

.main-nav {
    flex-grow: 1; /* Allows the nav to grow and fill available space */
    margin-left: 50px; /* Space between the logo and the navigation links */
}

.main-nav ul {
    list-style: none;
    display: flex;
    padding-left: 0;
    margin: 0;
    width: 100%;
    /* FIX 1: Removed parentheses around the HEX code and used variable */
    border: 1px solid var(--color-accent); 
}

.main-nav li {
    display: flex;
    flex: 1; 
    text-align: center;
    /* FIX 2: Removed parentheses around the HEX code and used variable */
    border-right: 1px solid var(--color-accent); 
}

.main-nav li:last-child {
    border-right: none; /* Remove the border from the very last item */
}

.main-nav a {
    display: flex;
    flex: 1; /* Makes the anchor tag grow to fill the LI */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    text-decoration: none;
    /* Using the variable for clean code */
    color: var(--color-accent); 
    font-family: 'Poppins', sans-serif;
    font-weight: 600; 
    padding: 20px 0; 
    transition: background-color 0.3s, color 0.3s;
}

.main-nav a:hover {
    /* FIX 3: Removed 'solid' keyword. background-color takes only color */
    background-color: var(--color-accent); 
    color: white; 
}
/* --- 2. Split Screen Hero Styling --- */
.hero-split {
  display: flex;
    /* Added space around the boxes */
    gap: 30px; 
    padding: 30px 50px; /* Padding around the edges */

    /* The minimum height ensures the container still takes up space */
    min-height: calc(100vh - 80px); 
    
    /* Ensure items align to the top if they are short */
    align-items: flex-start;

}

.split-panel {
/* New: Sets explicit width for each panel, and uses the rest of the space */
    width: 50%; 
    flex-grow: 1; /* Allows them to fill available space */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 40px; /* Increased internal padding for breathing room */
    
}

/* Optional: Add a slight lift on hover to make them interactive */
.split-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Panel Specific Styling (Using your jovial colors as placeholders) */
.patient-panel {
    background-color: #f7f6d1; /* Soft Orange/Yellow for Patients (Accessibility/Alba) */
border: 1px solid var(--color-accent);
border-radius: 18px
}

.intern-panel {
    background-color: #d4f2f2; /* Soft Blue for Interns (Supervision/Structure) */
border: 1px solid var(--color-accent);
border-radius: 18px
}

.split-panel h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: bold;
}

.split-panel p {
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 400px;
}

/* Call-to-Action Buttons */
.cta-button {
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin: 0px;
}

.primary-cta {
    background-color: var(--color-primary); /* Bright Orange for primary action */
    color: white;
}

.secondary-cta {
    background-color: var(--color-primary); /* Bright Blue for secondary action */
    color: white;
}

.cta-button:hover {
    /* Subtle shift to a lighter background/opacity on hover */
    background-color:  #082f78; 
    /* Makes the text/border color your primary action color */
    color: white; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Sobre Nós Page Specific Styling --- */

/* Layout de duas colunas para a página "Sobre Nós" */
.sobre-split-section {
    display: flex;
    gap: 40px; /* Espaço entre as colunas */
    padding: 60px 50px; /* Padding ao redor da seção */
    min-height: calc(100vh - 80px - 200px); /* Altura mínima (ajustar conforme altura do header e footer) */
    align-items: flex-start; /* Alinha o conteúdo ao topo das colunas */
}

.sobre-text-panel {
    flex: 1; /* Ocupa uma parte da largura */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-box {
    background-color: white; 
    padding: 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%; 
    max-width: 800px;
     margin: 0 auto;
    display: block
}

.sobre-text-panel h1 {
    font-size: 2.2em;
    margin-bottom: 20px;
    color: var(--color-primary, #1A237E); /* Seu azul principal */
}

.sobre-text-panel h2 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--color-primary, #1A237E);
}

.sobre-text-panel p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--color-text, #333333);
}

.sobre-image-panel {
    flex: 1; /* A outra coluna, vazia por enquanto */
    background-color: var(--color-background, #F8F7F3); /* Um fundo suave para mostrar que é uma área separada */
    border-radius: 15px;
    border: 1px dashed var(--color-text, #ccc); /* Borda tracejada para indicar que é uma área a ser preenchida */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text, #333333);
    font-style: italic;
    font-size: 0.9em;
}

.sobre-image-panel::before {
    content: "Espaço para Imagem ou Outro Conteúdo"; /* Texto provisório */
}
/* --- FOOTER STYLING --- */

.main-footer {
    background-color: var(--color-background); /* Use your deep primary blue */
    color: #082f78; 
    padding: 80px 50px 0; /* Padding around the content, 0 at the bottom */
       text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Distribute columns across the width */
    align-items: center;
    gap: 30px;
    padding-bottom: 30px;
}

.footer-section {
    flex-basis: 30%; /* Give each section roughly equal space */
   
}

.footer-section h3 {
    color: #082f78; /* Headings must be white against the dark background */
    font-family: 'Poppins', sans-serif; 
    font-size: 1.1em;
    margin-bottom: 15px;
}

/* Footer Links and Text */
.main-footer p, .main-footer li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.main-footer a {
    color: #082f78;
    text-decoration: none;
    transition: color 0.3s;
}

.main-footer a:hover {
    color: #082f78; 
    text-decoration: underline;
}

.main-footer ul {
    list-style: none;
    padding: 0;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    justify-content: center;
}


/* Copyright Bar */
.footer-bottom {
    border-top: 1px solid rgb(255, 0, 0); /* Subtle white divider line */
    padding: 15px 0;
    text-align: center;
    font-size: 0.8em;
}


/* ======================================= */
/* === MEDIA QUERIES (PARA TELAS MOBILE) === */
/* ======================================= */

@media (max-width: 768px) {

    /* --- 1. Ajustes Globais e Margens --- */
    body {
        /* Garante que não haja rolagem horizontal indesejada */
        overflow-x: hidden; 
    }
    
    /* Reduz o padding geral nas laterais */
    .main-header, 
    .hero-split, 
    .main-footer,
    .sobre-split-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Reduz o tamanho da fonte dos títulos para caber melhor */
    h1 {
        font-size: 2em; 
    }
    h2 {
        font-size: 1.5em; 
    }

    /* --- 2. Cabeçalho e Navegação (Top Nav) --- */
    .main-header {
        /* Transforma em coluna para empilhar logo e nav se necessário */
        flex-direction: column;
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 0;
    }
    
    /* Faz a navegação ocupar 100% da largura em dispositivos móveis */
    .main-nav {
        margin-left: 0;
        width: 100%;
        margin-top: 15px;
    }

    /* Transforma a Navegação em Caixa em uma Coluna Vertical */
    .main-nav ul {
        flex-direction: column; /* Empilha os links verticalmente */
        width: 100%;
        /* Ajusta as bordas para o novo formato */
        border: none;
        border-top: 1px solid var(--color-text, #ccc);
    }
    
    .main-nav li {
        width: 100%;
        border-left: none; /* Remove a borda vertical */
        border-right: none;
        border-bottom: 1px solid var(--color-text, #ccc); /* Adiciona a linha divisória horizontal */
    }

    /* Remove a borda inferior do último item para fechar */
    .main-nav li:last-child {
        border-bottom: none;
    }
    
    /* Centraliza o texto dos links na navegação */
    .main-nav a {
        padding: 15px 0;
        font-size: 15px;
    }

    /* --- 3. Seção Split-Screen (Homepage e Sobre Nós) --- */
    
    /* Layout da Homepage (Hero Split) */
    .hero-split {
        flex-direction: column; /* Empilha verticalmente os painéis */
        min-height: auto; /* Permite que o conteúdo defina a altura */
        height: auto;
        gap: 30px; 
        padding-top: 30px;
    }

    .split-panel {
        width: 100%; /* Ocupa a largura total */
        flex: auto;
    }
    
    /* Layout da Página Sobre Nós */
    .sobre-split-section {
        flex-direction: column; /* Empilha as colunas verticalmente */
        min-height: auto;
        padding-bottom: 30px;
        gap: 20px;
    }
    
    /* Garante que os painéis de texto/imagem ocupem a largura total */
    .sobre-text-panel, .sobre-image-panel {
        width: 100%;
        flex: auto;
    }

    /* --- 4. Rodapé (Footer) --- */
    .footer-content {
        flex-direction: column; /* Empilha as colunas do rodapé verticalmente */
        text-align: center;
    }

    .footer-section {
        flex-basis: auto; /* Remove a largura fixa */
        margin-bottom: 30px;
    }
    
    /* Centraliza os links de mídia social no rodapé */
    .social-links {
        justify-content: center;
    }

}

/* --- NOVO ESTILO PARA A CAIXA DE CONTEÚDO DA PÁGINA PSICÓLOGOS --- */
.psicologos-split-section{
    display: flex;
    gap: 40px; /* Espaço entre as colunas */
    padding: 60px 50px; /* Padding ao redor da seção */
    min-height: calc(100vh - 80px - 200px); /* Altura mínima (ajustar conforme altura do header e footer) */
    align-items: flex-start; /* Alinha o conteúdo ao topo das colunas */
}

.psicologos-content-box {
    /* Estilos Visuais: A Caixa Arredondada e Centralizada */
    background-color: white; 
    padding: 0 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); /* Outline */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%; 
    max-width: 600px;
   
}

.psicologos-content-box-direita {
    /* Herda o visual da caixa com bordas e sombra */
    background-color: rgb(254, 255, 218); 
    padding: 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); /* Outline */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 80%; 
    max-width: 600px;
    margin-bottom: 20px;
    
    /* FIX DE COLUNAS: Garante que o texto não se divida (como fizemos na página de psicólogos) */
    column-count: 1; 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
}

/* Aplicando o FIX de Colunas diretamente às listas internas */
.psicologos-content-box ul {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
}

.psicologos-content-box h1, .psicologos-content-box h2, .psicologos-content-box h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--color-primary, #1A237E);
}

.psicologos-content-box h1 { font-size: 2.2em; margin-bottom: 20px; }
.psicologos-content-box h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; }
.psicologos-content-box h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; }

.psicologos-content-box p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--color-text, #333333);
}

/* Estilo para listas sem o bullet (usamos clean-list-style no HTML) */
.clean-list-style {
    list-style: disc; 
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 20px;
}

.clean-list-style li {
    margin-bottom: 8px;
    line-height: 1.6;
}
.final-cta-button-container {
    display: flex;
    justify-content: center; /* Centraliza o botão horizontalmente */
    
    /* REMOVE QUALQUER MARGEM INFERIOR EXCESSIVA E GARANTE QUE NÃO HAJA MARGENS LATERAIS */
    margin: 10px 0 20px 0; 
}

/* --- ESTILO PARA A CAIXA DE CONTEÚDO DA PÁGINA PACIENTES --- */
   .pacientes-split-section{
    display: flex;
    gap: 40px; /* Espaço entre as colunas */
    padding: 60px 50px; /* Padding ao redor da seção */
    min-height: calc(100vh - 80px - 200px); /* Altura mínima (ajustar conforme altura do header e footer) */
    align-items: flex-start; /* Alinha o conteúdo ao topo das colunas */
}

.pacientes-content-box {
    /* Herda o visual da caixa com bordas e sombra */
    background-color: white; 
    padding: 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); /* Outline */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%; 
    max-width: 600px;
    
    /* FIX DE COLUNAS: Garante que o texto não se divida (como fizemos na página de psicólogos) */
    column-count: 1; 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
}

.pacientes-content-box-direita {
    /* Herda o visual da caixa com bordas e sombra */
    background-color: white; 
    padding: 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); /* Outline */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%; 
    max-width: 600px;
    
    /* FIX DE COLUNAS: Garante que o texto não se divida (como fizemos na página de psicólogos) */
    column-count: 1; 
    -webkit-column-count: 1; 
    -moz-column-count: 1; 
}


/* Aplicando estilos de texto para a nova caixa (reaproveitando estilos de títulos e parágrafos) */
.pacientes-content-box h1, .pacientes-content-box h2, .pacientes-content-box h3 {
    font-family: 'Poppins', sans serif;
    color: var(--color-primary, #1A237E);
}

.pacientes-content-box h1 { font-size: 2.2em; margin-bottom: 20px; }
.pacientes-content-box h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; }
.pacientes-content-box h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; }

.pacientes-content-box p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--color-text, #333333);
}

/* Opcional: Garanta que as listas dentro desta caixa também fiquem em coluna única */
.pacientes-content-box ul {
    list-style: disc; 
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 20px;
    column-count: 1 !important; 
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
}

.pacientes-content-box-direita h1, .pacientes-content-box-direita h2, .pacientes-content-box-direita h3 {
    font-family: 'Poppins', sans serif;
    color: var(--color-primary, #1A237E);
}

.pacientes-content-box-direita h1 { font-size: 2.2em; margin-bottom: 20px; }
.pacientes-content-box-direita h2 { font-size: 1.6em; margin-top: 30px; margin-bottom: 15px; }
.pacientes-content-box-direita h3 { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; }

.pacientes-content-box-direita p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--color-text, #333333);
}


/* --- ESTILO PARA A CAIXA DE CONTEÚDO DA PÁGINA CONTATO SIMPLES --- */
.contact-simple-box {
    /* Caixa Branca com Borda Vermelha Fina */
    background-color: rgb(220, 244, 247); 
    padding:0 40px;
    border-radius: 15px; 
    border: 1px solid var(--color-accent, #e30000); /* Borda Vermelha Fina */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%; 
    max-width: 800px;
    
    /* Garante coluna única e centraliza o texto dentro da caixa */
    column-count: 1; 
    text-align: center; 
    justify-content: center;
     margin: 0 auto;
    display: block
}

.contact-simple-box h1 {
    font-family: 'Poppins',sans-serif;
    color: var(--color-primary, #1A237E);
    font-size: 2.2em;
    margin-bottom: 20px;
    margin-top: 20px;
}

.contact-simple-box p {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    margin-bottom: 25px;
    color: var(--color-text, #333333);
    text-align: center;
}