/* ==========================================================================
   IMPORTAÇÃO DA FONTE (Coloque isso bem no topo do seu arquivo CSS, na linha 1)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
    box-sizing: border-box !important;
}

html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Atualize o seu seletor body para usar a nova fonte */
body {
    font-family: 'Inter', sans-serif;
    color: var(--texto);
    -webkit-font-smoothing: antialiased; /* Deixa as letras mais nítidas */
}

:root{

    --verde-principal: #006847;
    --verde-escuro: #004D35;
    --verde-claro: #008A5E;

    --branco: #ffffff;

    --cinza-claro: #f5f7f8;
    --texto: #333;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family: Arial, sans-serif;
    color:var(--texto);
}

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:white;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 8%;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    z-index:999;
}

nav{
    display:flex;
    gap:40px;
}

nav a{

    text-decoration:none;
    color:var(--verde-principal);

    font-weight:600;
}

.hero{

    height:100vh;

    display:flex;
    align-items:center;

    padding:0 8%;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)),
    url("https://images.unsplash.com/photo-1576091160550-2173dba999ef");

    background-size:cover;
    background-position:center;
}

.hero-text{

    max-width:600px;
    color:white;
}

.hero h1{

    font-size:65px;

    line-height:1.1;

    margin-bottom:25px;

    max-width:900px;
}

.hero p{

    font-size:22px;

    line-height:1.6;

    max-width:700px;

    margin-bottom:30px;
}

.hero button{

    padding:15px 30px;

    border:none;

    background:var(--verde-principal);

    color:white;

    font-size:18px;

    cursor:pointer;

    border-radius:8px;
}

section{
    padding:120px 8%;
}

.logo{

    font-size:34px;

    font-weight:800;

    letter-spacing:1px;

    color:var(--verde-principal);
}

.logo span{
    color:var(--verde-claro);
}

nav a{
    text-decoration:none;
    color:var(--verde-principal);
    font-weight:600;
    font-size:20px;
    transition:.3s;
}

nav a:hover{
    color:var(--verde-claro);
}

.btn{

    display:inline-block;

    background:var(--verde-principal);

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:8px;

    font-weight:bold;

    transition:.3s;
}



.btn-outline{

    display:inline-block;

    padding:15px 35px;

    border:2px solid white;

    border-radius:8px;

    color:white;

    text-decoration:none;

    transition:.3s;
}

.btn-outline:hover{

    background:white;

    color:var(--verde-principal);
}


.container-sobre{

    display:flex;
    gap:50px;

    align-items:center;
}

#sobre{
    background: linear-gradient(135deg,#f5f7f8,#ffffff);

    padding:120px 8%;
}

.sobre-card{

    background:white;

    padding:60px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    max-width:1100px;

    margin:auto;

    border-left:8px solid var(--verde-principal);
}

.sobre-card p{

    font-size:19px;

    line-height:2;

    color:#555;

    margin-bottom:25px;

    text-align:justify;
}

#sobre h2{

    font-size:50px;

    margin-bottom:40px;
}

.sobre-destaque{

    display:block;

    font-size:26px;

    font-weight:700;

    color:var(--verde-principal);

    margin-bottom:30px;
}

.cards{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-top:40px;
}

.card{

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border-top:5px solid var(--verde-principal);

    transition:.3s;
}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

#sobre,
#parceiros,
#contato{

    background:var(--cinza-claro);
}

.parceiros-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:40px;
}

.parceiro{

    height:120px;

    background:white;

    border-radius:12px;

    display:flex;

    justify-content:center;
    align-items:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

form{

    max-width:700px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:15px;
}

input,
textarea{

    padding:15px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;
}

form button{

    background:var(--verde-principal);

    color:white;

    border:none;

    padding:15px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;
}

footer{

    background:var(--verde-escuro);

    color:white;

    text-align:center;

    padding:40px;
}

@media(max-width:768px){

    header{

        flex-direction:column;

        gap:15px;
    }

    nav{

        flex-wrap:wrap;

        justify-content:center;
    }

    .hero h1{

        font-size:38px;
    }

    .container-sobre{

        flex-direction:column;
    }
}

.badge{

    display:inline-block;

    background:rgba(255,255,255,.15);

    color:white;

    padding:10px 20px;

    border-radius:50px;

    margin-bottom:20px;

    backdrop-filter:blur(5px);

    font-size:14px;
}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:30px;
}

.numeros{

    background:white;

    display:flex;

    justify-content:center;

    gap:120px;

    text-align:center;

    padding:80px 20px;
}

.numero h3{

    font-size:55px;

    color:var(--verde-principal);

    font-weight:800;
}

.numero p{

    color:#666;
}

section h2{

    text-align:center;

    font-size:42px;

    color:var(--verde-principal);

    margin-bottom:20px;

    position:relative;
}

section h2::after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    background:var(--verde-principal);

    margin:15px auto;

    border-radius:50px;
}

section > p{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px auto;

    line-height:1.8;

    color:#666;
}

.areas-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin-top:60px;
}

.area-card{

    position:relative;

    overflow:hidden;

    background:white;

    min-height:320px;

    border-radius:15px;

    text-align:center;

    padding:40px 25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border-top:6px solid var(--verde-principal);

    transition:.4s;
}

.icone{

    font-size:55px;

    margin-bottom:20px;
}

.area-card h3{

    color:var(--verde-principal);

    text-transform:uppercase;

    font-size:24px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:20px;
}

.area-card p{

    color:#666;

    font-size:16px;

    line-height:1.7;

    font-weight:400;
}

.area-card h3,
.area-card p{

    position:relative;

    z-index:2;
}

.area-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0.15;
    transition:.4s;
    background-size:cover;
    background-position:center;
    z-index:1;
}

.area-card:hover::before{
    opacity:0.25;
    transform:scale(1.05);
}

.area-card:hover{

    transform:translateY(-10px);
}

.filantropicos::before{
    background-image:url("img/filantropico.jpg");
}

.publicos::before{
    background-image:url("img/publico.jpg");
}

.privados::before{
    background-image:url("img/privado.jpg");
}

.fundacoes::before{
    background-image:url("img/fundacao.jpg");
}

.clinicas::before{
    background-image:url("img/clinica.jpg");
}

.veterinarias::before{
    background-image:url("img/veterinaria.jpg");
}

.logo img{
    height: 60px;
    width: auto;
}

header{
    padding: 10px 8%;
}


/* ==========================================================================
   SEÇÃO SOBRE (COM MAIS CONTRASTE E DESTAQUE)
   ========================================================================== */

#sobre {
    background-color: var(--cinza-claro);
    padding: 100px 8%;
}

.container-sobre {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.sobre-texto {
    flex: 1;
}

/* Título H2 bem forte e escuro */
#sobre h2 {
    font-size: 44px;
    font-weight: 800; /* Letra mais grossa */
    color: var(--verde-escuro);
    margin-bottom: 25px;
    text-align: left;
    position: relative;
    display: inline-block;
    letter-spacing: -0.5px; /* Deixa o título mais imponente */
}

/* Linha verde abaixo do H2 */
#sobre h2::after {
    content: "";
    display: block;
    width: 100px; /* Um pouco maior */
    height: 5px;
    background: var(--verde-principal);
    margin: 12px 0 0 0;
    border-radius: 50px;
}

/* Frase de destaque: cor preta viva e peso maior */
.sobre-destaque {
    display: block;
    font-size: 22px;
    font-weight: 700; /* De semi-bold para Bold puro */
    color: #111111; /* Preto bem vivo, antes estava cinza */
    margin-bottom: 30px;
    padding-left: 18px;
    border-left: 5px solid var(--verde-principal);
    line-height: 1.4;
}

/* Parágrafos com cor tratada para leitura e tamanho ideal */
.sobre-texto p {
    font-size: 16.5px;
    line-height: 1.8; /* Mais espaçamento melhora a leitura */
    color: #222222; /* Cinza bem escuro quase preto (máximo contraste) */
    margin-bottom: 22px;
    text-align: justify;
    font-weight: 450; /* Um pouquinho mais encorpada que o normal */
}

/* Card flutuante da direita */
.sobre-card {
    background: var(--branco);
    padding: 45px 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); /* Sombra ligeiramente mais visível */
    text-align: center;
    min-width: 260px;
    max-width: 280px;
    border-left: 6px solid var(--verde-principal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

/* Círculo do ícone */
.card-icon {
    background-color: #e6f4ee; /* Um verde claro ligeiramente mais perceptível */
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Número chamativo */
.sobre-card h3 {
    font-size: 36px; /* Aumentado */
    font-weight: 800;
    color: var(--verde-escuro);
    margin-bottom: 15px;
    letter-spacing: -1px;
}

/* Linha sutil abaixo do +10 anos */
.sobre-card h3::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background: #dddddd;
    margin: 8px auto 0 auto;
}

/* Texto do card com mais presença */
.sobre-card p {
    font-size: 16px;
    color: #333333;
    line-height: 1.4;
    font-weight: 600; /* Texto em semi-bold para destacar bastante */
    margin-bottom: 0;
}

/* Responsivo */
@media (max-width: 992px) {
    .container-sobre {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .sobre-card {
        max-width: 100%;
        width: 100%;
        margin-top: 0;
    }
}

/* ==========================================================================
   FAIXA DE DESTAQUE INTERMEDIÁRIA (ESTILO BANNER VERDE)
   ========================================================================== */

.faixa-destaque {
    background-image: linear-gradient(rgba(0, 138, 94, 0.85), rgba(0, 50, 35, 0.85)), url('../img/estoque-real.jpg');
    background-attachment: fixed; /* Efeito Parallax */
    background-position: center;
    background-size: cover;
    padding: 60px 20px;
    color: #ffffff;
    text-align: center;
}

.container-faixa {
    max-width: 1000px;
    margin: 0 auto;
}

.faixa-destaque p {
    font-size: 28px;
    font-weight: 600;
    color: var(--branco);
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Ajuste de responsividade para o celular não ficar torto ou quebrado */
@media (max-width: 768px) {
    .faixa-destaque {
        padding: 45px 5%; /* Menos espaço lateral no mobile */
    }
    
    .faixa-destaque p {
        font-size: 20px; /* Diminui o texto para encaixar perfeito na tela do celular */
        line-height: 1.4;
    }
}

/* ==========================================================================
   SEÇÃO NOTÍCIAS (ESTILO EDITADO E ATUALIZADO)
   ========================================================================== */

#noticias {
    background-color: var(--branco);
    padding: 100px 8%;
}

/* Garante o título alinhado igual ao do print */
#noticias h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--verde-escuro);
    text-align: center;
    margin-bottom: 50px;
}

#noticias h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: var(--verde-principal);
    margin: 15px auto 0 auto;
    border-radius: 50px;
}

/* Grid de 3 colunas responsivo */
.cards-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card Individual */
.card-noticia {
    background: var(--branco);
    border-radius: 4px; /* Bordas mais retas seguindo o padrão deles */
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de hover discreto e profissional */
.card-noticia:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Imagem com overlay verde suave */
.noticia-img {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.noticia-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 104, 71, 0.2), rgba(0, 77, 53, 0.4)); /* Overlay verde */
    opacity: 0.8;
}

.noticia-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Conteúdo interno do card */
.noticia-conteudo {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Títulos das notícias em verde forte */
.noticia-conteudo h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-escuro);
    line-height: 1.4;
    margin-bottom: 15px;
}

/* Descrição da notícia cinza idêntica ao print */
.noticia-conteudo p {
    font-size: 15px;
    color: #777777; /* Cinza suave da imagem */
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Alinha o botão sempre no mesmo lugar */
}

/* Link LEIA MAIS */
.noticia-link {
    text-decoration: none;
    color: var(--verde-claro);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    align-self: flex-start;
}

.noticia-link:hover {
    color: var(--verde-escuro);
}

/* Rodapé do card com data e comentários */
.noticia-footer {
    padding: 15px 25px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.noticia-footer span {
    font-size: 13px;
    color: #999999;
    font-weight: 500;
}

/* ==========================================================================
   AJUSTES DE RESPONSIVIDADE (CELULAR E TABLET)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. Ajuste Geral das Seções (Diminui o espaçamento excessivo) */
    #sobre, #noticias {
        padding: 60px 5%; /* Menos espaço nas laterais e no topo/fundo */
    }

    /* 2. Ajuste dos Títulos Principais (Para não cortar ou quebrar texto) */
    #sobre h2, #noticias h2 {
        font-size: 32px; /* Diminui o tamanho da letra no celular */
        text-align: center; /* Centraliza para ficar mais harmônico no mobile */
        display: block;
    }

    /* Ajusta a barrinha verde do título do Sobre para centralizar também */
    #sobre h2::after {
        margin: 12px auto 0 auto;
    }

    /* 3. Seção Sobre: Empilha o texto e o card verticalmente */
    .container-sobre {
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }

    .sobre-texto {
        width: 100%;
    }

    .sobre-texto p {
        font-size: 15px;
        text-align: left; /* Justificado no celular às vezes deixa buracos brancos feios */
    }

    .sobre-destaque {
        font-size: 19px;
        text-align: center;
        padding-left: 0;
        border-left: none;
        border-bottom: 3px solid var(--verde-principal); /* Transforma a barra lateral em uma barra inferior */
        padding-bottom: 15px;
    }

    /* Card do Sobre: Ocupa a largura total disponível */
    .sobre-card {
        max-width: 100%;
        width: 100%;
        margin-top: 0;
        padding: 30px 20px;
    }

    /* 4. Seção Notícias: Força os cards a ficarem um embaixo do outro certinho */
    .cards-noticias {
        grid-template-columns: 1fr; /* Força uma única coluna */
        gap: 25px;
        width: 100%;
    }

    .card-noticia {
        width: 100%;
    }

    .noticia-conteudo {
        padding: 20px; /* Diminui o recuo interno para ganhar espaço */
    }

    .noticia-conteudo h3 {
        font-size: 19px; /* Título do card ligeiramente menor */
    }
}

/* ==========================================================================
   EFEITO RETRÁTIL COM ALTERNÂNCIA DE TEXTO (LEIA MAIS / LEIA MENOS)
   ========================================================================== */

/* Esconde a setinha preta padrão que o navegador coloca no <summary> */
.ler-mais-retratil summary::-webkit-details-marker {
    display: none;
}

.ler-mais-retratil summary {
    list-style: none;
    cursor: pointer;
    outline: none;
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0; /* Esconde temporariamente o texto do HTML para o CSS controlar */
}

/* Estado Padrão: Mostra "LEIA MAIS »" */
.ler-mais-retratil summary::before {
    content: "LEIA MAIS »";
    font-size: 14px; /* Devolve o tamanho correto do texto */
    font-weight: 700;
    color: var(--verde-claro);
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

/* Estado Aberto: Quando o <details> ganha o atributo [open], troca para "LEIA MENOS «" */
.ler-mais-retratil[open] summary::before {
    content: "LEIA MENOS «";
    color: var(--verde-escuro); /* Muda levemente a cor para indicar o fechamento */
}

/* Efeito de hover nos pseudo-elementos */
.ler-mais-retratil summary:hover::before {
    color: var(--verde-escuro);
}

/* Formata o novo parágrafo que aparece escondido */
.texto-escondido {
    font-size: 14.5px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    text-align: justify;
    
    /* Efeito de surgimento suave */
    animation: abrirTexto 0.4s ease-out forwards;
}

/* Animação de descida */
@keyframes abrirTexto {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SEÇÃO CONTATO REESTILIZADA (FUNDO ESCURO COM CARD FLUTUANTE)
   ========================================================================== */

#contato-moderno {
    background-color: var(--verde-escuro); /* Tira o branco e joga o verde marcante da empresa */
    padding: 90px 8%;
    font-family: sans-serif;
}

.container-contato-novo {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* Coluna de Informações (Esquerda) */
.contato-texto-bloco {
    flex: 1;
}

.contato-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15); /* Tag branca translúcida sobre o fundo verde */
    color: var(--branco);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.contato-texto-bloco h2 {
    font-size: 38px;
    color: var(--branco); /* Texto principal branco para dar leitura */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.contato-descricao {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8); /* Branco suave para não brigar com o título */
    line-height: 1.6;
    margin-bottom: 35px;
}

.lista-infos {
    margin-bottom: 35px;
}

/* ==========================================================================
   AJUSTE DE ALINHAMENTO DAS INFORMAÇÕES DE CONTATO
   ========================================================================== */

.item-info {
    font-size: 15px;
    color: var(--branco);
    margin-bottom: 20px; /* Aumentou o espaço entre cada bloco */
    display: flex;
    flex-direction: column; /* Faz o texto do endereço ficar EMBAIXO da palavra "Endereço:" */
    gap: 4px; /* Espaço sutil entre a etiqueta e o texto */
}

.item-info strong {
    color: var(--verde-claro);
    font-weight: 600;
    display: block; /* Garante que ela ocupe a linha inteira */
    width: auto; /* Remove o tamanho fixo que estava esmagando o texto */
}

.item-info span {
    line-height: 1.5; /* Deixa o endereço em várias linhas bem respirável e legível */
    display: block;
}

.empresa-dados-fundo {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Linha divisória sutil */
    padding-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Card do Formulário (Direita) */
.contato-card-form {
    flex: 1;
    background-color: var(--branco); /* O card se mantém branco para saltar aos olhos */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Sombra um pouco mais forte devido ao fundo escuro */
    width: 100%;
}

.campo-grupo {
    margin-bottom: 20px;
}

.campo-grupo label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #444; /* Texto escuro para ler bem dentro do card branco */
    margin-bottom: 8px;
}

.contato-card-form input,
.contato-card-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 15px;
    color: #333;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.contato-card-form input:focus,
.contato-card-form textarea:focus {
    border-color: var(--verde-escuro);
}

.contato-card-form textarea {
    resize: none;
}

/* Botão de Envio Estilizado */
.btn-enviar-novo {
    width: 100%;
    background-color: var(--verde-escuro);
    color: var(--branco);
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-enviar-novo:hover {
    background-color: #005237;
}

.btn-enviar-novo:active {
    transform: scale(0.98);
}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    #contato-moderno {
        padding: 60px 5%;
    }

    .container-contato-novo {
        flex-direction: column;
        gap: 40px;
    }

    .contato-texto-bloco {
        text-align: center;
    }

    .item-info strong {
        display: block;
        width: 100%;
        margin-bottom: 2px;
    }

    .contato-card-form {
        padding: 30px 20px;
    }
}

/* --- SEÇÃO PARCEIROS --- */
#parceiros {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Um fundo levemente cinza para destacar as logos */
    text-align: center;
}

#parceiros h2 {
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}

.parceiros-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Faz as logos irem para a linha de baixo no celular */
    gap: 30px; /* Espaçamento idêntico entre cada logo */
    max-width: 1200px;
    margin: 0 auto;
}



/* --- EFEITO SUTIL AO PASSAR O MOUSE (HOVER) --- */
.parceiro:hover {
    transform: translateY(-5px); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Aumenta a sombra quando passa o mouse */
}


.parceiro {
    width: 180px; 
    height: 100px; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; 
    border-radius: 8px;
    padding: 5px; /* Reduzimos para dar mais espaço físico para a imagem crescer */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.parceiro img {
    max-width: 100%; /* Agora ela pode ocupar até o limite total da largura do card */
    max-height: 100%; /* Agora ela pode ocupar até o limite total da altura do card */
    object-fit: contain; 
    transition: transform 0.3s ease;
}

/* Container que segura o texto na esquerda e o bloco visual na direita */
.container-sobre {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Coluna da direita (Imagem + Card) */
.sobre-visual {
    flex: 1;
    max-width: 400px; /* Controla a largura máxima da foto e do card */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço entre a foto e o card */
}

/* Estilização da foto da empresa */
.img-sobre {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Faz a foto cortar e preencher o espaço sem distorcer */
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Garante que o card ocupe a mesma largura da foto */
.sobre-card {
    width: 100%;
    box-sizing: border-box;
}


/* Nova estrutura da galeria ao lado do texto */
.sobre-visual-galeria {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column; 
    gap: 15px;
    min-width: 300px;
}

.sobre-img-box {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
}

.img-sobre-nova {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* FOTO DA ENTRADA (1º elemento): Altura perfeita e foco na logo/chão */
.sobre-visual-galeria .sobre-img-box:nth-child(1) .img-sobre-nova {
    height: 310px; 
    object-fit: cover;
    object-position: center 45%; 
}

/* FOTO DO GALPÃO (2º elemento): Travada para não esticar o chão */
.sobre-visual-galeria .sobre-img-box:nth-child(2) .img-sobre-nova {
    height: 240px;
    object-fit: cover;
    object-position: center;
}



.img-sobre-nova:hover {
    transform: scale(1.03);
}

/* Responsivo para o celular */
@media (max-width: 768px) {
    .sobre-visual-galeria {
        max-width: 100%;
    }
    .sobre-visual-galeria .sobre-img-box:nth-child(1) .img-sobre-nova,
    .sobre-visual-galeria .sobre-img-box:nth-child(2) .img-sobre-nova {
        height: 200px; 
    }
}

/* CAIXINHA: Design Corporativo Premium */
.sobre-frase-destaque {
    background-color: #ffffff; /* Fundo branco puro para contrastar bem */
    border: 1px solid #e2e8f0; /* Borda cinza bem fina e elegante */
    border-left: 4px solid #008A5E; /* Detalhe marcante em verde */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start; /* Alinha o ícone no topo do texto */
    gap: 16px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Sombra extremamente suave */
}

/* Container do Ícone */
.destaque-icone-svg {
    background-color: #f0f9f6; /* Fundo verde bem suave atrás do ícone */
    padding: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Impede o ícone de amassar */
}

/* Alinhamento do Texto Interno */
.destaque-texto {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.destaque-texto h4 {
    font-size: 1.05rem;
    color: #008A5E;
    margin: 0;
    font-weight: 600;
}

.destaque-texto p {
    font-size: 0.92rem;
    color: #64748b; /* Cinza elegante que reduz o peso visual */
    line-height: 1.5;
    margin: 0; 
}

/* REVOLUÇÃO DO DESIGN DO CATÁLOGO - IDENTIDADE MEDISTOCK */
.catalogo-body {
    background-color: #f4fcf9; /* Fundo com toque sutil de verde bem claro */
    margin: 0;
}

.catalogo-main {
    padding: 80px 0;
    min-height: 100vh;
}

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

/* Topo do Catálogo */
.catalogo-header {
    text-align: center;
    margin-bottom: 60px;
}

.catalogo-header h2 {
    font-size: 2.5rem;
    color: #008A5E; /* Título no Verde Oficial Medistock */
    margin: 20px 0 12px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.catalogo-header p {
    color: #475569;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Botão Elegante de Voltar */
.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #008A5E;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.btn-voltar:hover {
    color: #006c4a;
    transform: translateX(-3px);
}

/* Grid de 4 colunas */
.marcas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* O Novo Card Minimalista */
.marca-card {
    background: #ffffff;
    border: 1px solid #d1ebd1; /* Borda levemente esverdeada */
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 138, 94, 0.02);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.marca-card:hover {
    transform: translateY(-6px);
    border-color: #008A5E;
    box-shadow: 0 12px 30px rgba(0, 138, 94, 0.12); /* Sombra esverdeada no hover */
}

/* Wrapper da Logo */
.marca-logo-wrapper {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

.marca-card:hover .marca-logo-wrapper {
    background: #e6f6f0; /* Fundo verde suave no hover da logo */
}

.marca-img-placeholder {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Textos e Botões Integrados */
.marca-info {
    text-align: center;
}

.marca-card h3 {
    font-size: 1.2rem;
    color: #0f172a;
    margin: 0 0 16px 0;
    font-weight: 600;
}

/* Botão no Verde Medistock por Padrão */
.btn-visualizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: #008A5E; /* Verde Medistock padrão */
    color: #ffffff; /* Texto branco */
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Efeito de destaque no botão ao passar o mouse */
.btn-visualizar:hover {
    background-color: #006c4a; /* Verde mais escuro ao passar o mouse */
    box-shadow: 0 4px 12px rgba(0, 108, 74, 0.2);
}

/* Responsividade de Alta Performance */
@media (max-width: 1024px) {
    .marcas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .marcas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .catalogo-header h2 { font-size: 2rem; }
}

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

/* SEÇÃO CHAMADA CATÁLOGO - HOME */
.home-catalogo-cta {
    background: linear-gradient(135deg, #f0f9f6 0%, #e6f6f0 100%); /* Degradê esverdeado bem premium */
    padding: 50px 0;
    margin: 60px 0;
    border-top: 1px solid #d1ebd1;
    border-bottom: 1px solid #d1ebd1;
}

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

.cta-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-badge {
    display: inline-block;
    background-color: #008A5E;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.cta-texto h2 {
    font-size: 2rem;
    color: #0f172a;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.cta-texto p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0;
    max-width: 700px;
}

/* Botão de Destaque */
.btn-cta-verde {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #008A5E;
    color: white;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 138, 94, 0.2);
    transition: all 0.2s ease;
}

.btn-cta-verde:hover {
    background-color: #006c4a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 108, 74, 0.3);
}

/* Ajuste Responsivo para Celular */
@media (max-width: 768px) {
    .cta-conteudo {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    
    .cta-texto p {
        font-size: 0.95rem;
    }
    
    .btn-cta-verde {
        width: 100%;
    }
}

/* ==========================================================================
   ESTILIZAÇÃO PREMIUM DA GRID DE CATÁLOGOS
   ========================================================================== */

/* CONTAINER DA GRID */
.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
    padding: 1.5rem 0;
}

/* CARD INDIVIDUAL */
.marca-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* EFEITO AO PASSAR O MOUSE (HOVER) NO CARD ATIVO */
.marca-card:not(.card-em-breve):hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

/* QUADRADO ONDE FICA A LOGO */
.marca-logo-wrapper {
    width: 100%;
    height: 140px;
    background-color: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    transition: background-color 0.3s ease;
}

.marca-card:not(.card-em-breve):hover .marca-logo-wrapper {
    background-color: #f1f5f9;
}

/* A IMAGEM DA LOGO */
.marca-img-placeholder {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.marca-card:not(.card-em-breve):hover .marca-img-placeholder {
    transform: scale(1.04); /* Zoom suave na logo */
}

/* CONTAINER DAS INFORMAÇÕES */
.marca-info {
    width: 100%;
    text-align: center;
    margin-top: 1.25rem;
}

.marca-info h3 {
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.marca-card:not(.card-em-breve):hover .marca-info h3 {
    color: #00875a; /* Nome ganha o tom verde do projeto no hover */
}

/* BOTÃO DE VISUALIZAR PADRÃO */
.btn-visualizar {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #00875a;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease;
}

.btn-visualizar:not(.btn-desativado):hover {
    background-color: #006644;
}

/* ÍCONE SVG DENTRO DO BOTÃO ATIVO */
.btn-visualizar svg {
    transition: transform 0.2s ease;
}

.btn-visualizar:not(.btn-desativado):hover svg {
    transform: translate(2px, -2px); /* Ícone move levemente para o canto superior direito */
}


/* ==========================================================================
   ESTILIZAÇÃO EXCLUSIVA PARA OS CARDS "EM BREVE"
   ========================================================================== */

.card-em-breve {
    opacity: 0.7;
    background-color: #f8fafc;
    border-style: dashed; /* Transmite ideia de que o card está aguardando conteúdo */
}

/* Customização do emoji de caixa */
.emoji-placeholder {
    font-size: 2.2rem;
    color: #94a3b8;
}

/* Altera a cor do título para um tom neutro apagado */
.card-em-breve .marca-info h3 {
    color: #64748b;
}

/* Botão desativado cinza */
.btn-desativado {
    background-color: #94a3b8;
    cursor: not-allowed;
}

/* ==========================================================================
   SEÇÃO EQUIPE - ESTILIZAÇÃO E RESPONSIVIDADE CORRETAS
   ========================================================================== */

.secao-equipe-simples {
    width: 100%;
    padding: 5rem 1.5rem; /* Mais espaço para respirar e sair do topo */
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.secao-equipe-simples .container-equipe-fluido {
    max-width: 1140px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Forçando a estilização do texto da esquerda */
.secao-equipe-simples .equipe-conteudo-lateral {
    text-align: left;
}

.secao-equipe-simples .titulo-equipe {
    font-family: inherit; /* Pega a fonte principal do seu site */
    font-size: 2.2rem;
    color: #008A5E; /* Verde Medistock oficial */
    margin-bottom: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.secao-equipe-simples .legenda-equipe {
    font-family: inherit;
    font-size: 1.15rem;
    color: #475569; /* Cinza profissional */
    line-height: 1.7;
    margin: 0;
}

/* Coluna da Imagem */
.secao-equipe-simples .equipe-imagem-lateral {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.secao-equipe-simples .foto-equipe-compacta {
    width: 100%;
    max-width: 520px;
    height: 340px;
    object-fit: cover;
    object-position: center 25%; 
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); 
}

/* ==========================================================================
   RESPONSIVIDADE CELULAR (Garante texto bonito e foto inteira)
   ========================================================================== */
@media (max-width: 768px) {
    .secao-equipe-simples {
        padding: 3rem 1rem;
    }

    .secao-equipe-simples .container-equipe-fluido {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .secao-equipe-simples .equipe-conteudo-lateral {
        text-align: center !important; /* Centraliza o texto no celular */
    }

    .secao-equipe-simples .titulo-equipe {
        font-size: 1.6rem !important;
        margin-bottom: 0.8rem !important;
    }

    .secao-equipe-simples .legenda-equipe {
        font-size: 1.05rem !important;
    }

    .secao-equipe-simples .foto-equipe-compacta {
        max-width: 100% !important;
        height: auto !important; /* Desbloqueia a altura para não cortar */
        aspect-ratio: 16 / 9; /* Mantém todo mundo na foto */
    }

    /* O restante do seu código do celular continua igual... */
    .secao-equipe-simples .container-equipe-fluido {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .secao-equipe-simples .foto-equipe-compacta {
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    /* Força o cabeçalho/topo inteiro a respeitar o limite da tela */
    header, .header, .navbar, nav {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0.5rem !important;
    }

    /* Ajuste cirúrgico na lista de links do menu */
    nav ul, .menu, .nav-links {
        display: flex !important;
        flex-wrap: wrap !important; /* Obriga os links a irem para a linha de baixo */
        justify-content: center !important;
        gap: 0.5rem 0.8rem !important; /* Espaçamento curto entre eles */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Reduz o tamanho de cada link para caber em telas pequenas */
    nav ul li a, .menu a, .nav-links a {
        font-size: 0.85rem !important; 
        padding: 4px 6px !important;
        display: inline-block !important;
    }

    /* ==========================================================================
       CORREÇÃO DO BANNER (HERO) - EVITA SOBREPOSIÇÃO DO MENU CORTANDO A FOTO
       ========================================================================== */
    section#home, .hero, .banner-principal { 
        height: auto !important;
        min-height: 85vh !important; /* Dá altura fluida para caber todo o texto e botões */
        padding-top: 140px !important; /* <--- Empurra o texto para baixo do menu de 3 linhas */
        padding-bottom: 3rem !important;
    }
}