/* =========================================
   DESIGN SYSTEM - FAROL NA QUEBRADA
   ========================================= */

:root {
    --cor-amarelo: #EAC52E;
    --cor-vinho: #660B32;
    --cor-azul-escuro: #212338;
    --cor-verde: #217D48;
    --cor-laranja: #C85F0C;
    --cor-marrom: #613D17;
    --fonte-titulos: 'Blank Moment', sans-serif;
    --fonte-textos: 'Poppins', sans-serif;
}

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--fonte-textos);
    color: var(--cor-azul-escuro);
    background-color: #FFFDF9;
    line-height: 1.6;

    /* Força o rodapé para o final da página */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulos);
    color: var(--cor-vinho);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* =========================================
   CABEÇALHO (TOPO)
   ========================================= */
.cabecalho {
    background-color: #FFFFFF; /* Fundo branco */
    padding: 20px 0; /* Altura do cabeçalho aumentada */
    width: 100%;
    margin-top: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
    position: relative;
    z-index: 100;
}

.container-cabecalho {
    width: 100%;
    padding: 0 5%; /* Alinhado com a margem do resto do site */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    position: relative;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    margin-left: -20px;
    margin-right: auto;
}

.logo img {
    height: 65px; /* Logo aumentada */
    width: auto;
    display: block;
}

/* =========================================
   SLOGAN IMAGEM BOTÃO (#VEMSERLUZ)
   ========================================= */
.slogan-link {
    margin-left: 40px;
    margin-right: 10px; /* Um pouco de espaço para o menu não grudar */
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.slogan-link img {
    height: 40px;
    width: auto;
    display: block;
}

.slogan-link:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* =========================================
   MENU DE NAVEGAÇÃO PRINCIPAL
   ========================================= */
.menu-navegacao {
    display: flex;
    justify-content: center;
}

.menu-navegacao ul {
    list-style: none;
    display: flex;
    gap: 28px;
    align-items: center;
}

.menu-navegacao a {
    color: var(--cor-azul-escuro); /* Letras em azul escuro */
    font-size: 15px;
    font-weight: 500; /* Letra levemente mais encorpada para o fundo claro */
}

.menu-navegacao a:hover {
    color: var(--cor-vinho); /* Destaque na cor vinho no hover */
}

/* =========================================
   SUBMENU (DROPDOWN) - SOBRE NÓS
   ========================================= */
.dropdown {
    position: relative;
}

.setinha {
    font-size: 11px;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Caixa do Submenu */
.menu-navegacao ul.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFFF; /* Fundo branco para acompanhar o cabeçalho */
    min-width: 180px;
    padding: 10px 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    flex-direction: column;
    gap: 0;
}

.dropdown:hover .dropdown-menu {
    display: flex;
}

.dropdown:hover .setinha {
    transform: rotate(180deg);
}

.menu-navegacao ul.dropdown-menu li {
    width: 100%;
}

.menu-navegacao ul.dropdown-menu a {
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
}

.menu-navegacao ul.dropdown-menu a:hover {
    background-color: var(--cor-amarelo); /* Fundo azul escuro no hover */
    color: #FFFFFF; /* Letra branca no hover */
}

/* =========================================
   BOTÃO DOAR
   ========================================= */
.btn-doar {
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 16px;
    margin-left: 20px; /* Espaço para não grudar no menu */
    margin-left: auto;
}

.btn-doar:hover {
    transform: scale(1.05);
}

/* =========================================
   RODAPÉ
   ========================================= */
.rodape {
    background-color: var(--cor-vinho);
    padding: 30px 0 0 0;
    width: 100%;
    color: #FFFFFF;
    margin-top: auto;
}

.container-rodape {
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 25px;
}

/* Coluna base: todas iguais */
.rodape-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    min-width: 180px;
}

/* Título uniforme de cada coluna */
.rodape-col h4 {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-size: 15px;
    margin: 0 0 15px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Coluna 1: Logo */
.rodape-logo {
    align-items: flex-start;
}

.rodape-logo img {
    height: 90px;
    width: auto;
    display: block;
}

/* Coluna 2: Contato */
.rodape-info p {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.5;
}

.destaque-amarelo {
    color: var(--cor-amarelo);
}

/* Coluna 3: Navegação */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.links-container a {
    color: #FFFFFF;
    font-size: 14px;
}

.links-container a:hover {
    color: var(--cor-amarelo);
}

/* Coluna 4: Redes e Botão */
.rodape-acoes {
    gap: 20px;
}

.redes-sociais {
    display: flex;
    gap: 15px;
}

.redes-sociais a {
    color: var(--cor-amarelo);
    font-size: 26px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.redes-sociais a:hover {
    transform: scale(1.1);
    color: #FFFFFF;
}

.btn-doar-rodape {
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 8px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.btn-doar-rodape:hover {
    transform: scale(1.05);
}

/* Linha de copyright */
.rodape-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 15px 5%;
    text-align: center;
}

.rodape-copyright p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0;
}

/* Responsividade do rodapé */
@media (max-width: 768px) {
    .container-rodape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }
    .rodape-col {
        align-items: center;
        text-align: center;
    }
    .links-container {
        align-items: center;
    }
}

/* =========================================
   PÁGINA DOAR
   ========================================= */

.container-pagina-doacao {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    flex: 1;
}

/* --- Lado Esquerdo (Apenas a Imagem) --- */
.doacao-esq {
    background-image: url('../img/Gui.jpg');
    background-size: cover;
    background-position: center;
}

/* --- Lado Direito (Fundo Claro) --- */
.doacao-dir {
    padding: 30px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background-color: #FFFDF9;
}

/* --- Cabeçalho da Chamada (Título e Subtítulo) --- */
.cabecalho-doacao {
    text-align: center;
    margin-bottom: 5px;
}

.cabecalho-doacao h2 {
    color: var(--cor-vinho);
    font-family: var(--fonte-titulos);
    font-size: 36px;
    line-height: 1.1;
    margin-bottom: 5px;
}

.cabecalho-doacao p {
    color: #333333;
    font-family: var(--fonte-textos);
    font-size: 15px;
    font-weight: 500;
}

/* Bloco Mensal */
.bloco-mensal {
    background-color: var(--cor-azul-escuro);
    padding: 25px 40px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.bloco-mensal h3 {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-size: 15px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bloco-mensal p {
    color: #FFFFFF;
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.btn-mensal {
    display: block;
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    text-align: center;
    padding: 12px;
    font-weight: 700;
    border-radius: 4px;
    font-size: 14px;
}

.btn-mensal:hover {
    background-color: #fbd63f;
    transform: scale(1.02);
}

/* Bloco PIX */
.bloco-pix-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.bloco-pix-info, .bloco-pix-qr {
    background-color: #F8F7F2;
    padding: 20px;
    border-radius: 4px;
}

.bloco-pix-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bloco-pix-info h4 {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-size: 15px;
    margin-bottom: 10px;
}

.bloco-pix-info p {
    font-size: 12px;
    color: #333;
    margin-bottom: 2px;
}

.bloco-pix-info .chave-pix-texto {
    color: var(--cor-vinho);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
}

.btn-copiar {
    background-color: var(--cor-azul-escuro);
    color: #FFFFFF;
    border: none;
    padding: 10px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--fonte-textos);
    transition: all 0.3s ease;
    font-size: 13px;
}

.btn-copiar:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.bloco-pix-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bloco-pix-qr img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.bloco-pix-qr p {
    font-size: 11px;
    color: #666;
}

/* Bloco Transparência */
.bloco-transparencia {
    background-color: var(--cor-verde);
    padding: 20px 40px;
    border-radius: 4px;
}

.bloco-transparencia h4 {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-size: 14px;
    margin-bottom: 5px;
}

.bloco-transparencia p {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* =========================================
   PÁGINA INICIAL - SEÇÃO HERO (DESTAQUE)
   ========================================= */
.hero-inicio {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 500px;
}

.hero-conteudo {
    background-color: var(--cor-vinho);
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-conteudo-interno {
    width: 100%;
    padding-left: 10%;
    padding-right: 40px;
}
.hero-subtitulo {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.hero-conteudo h1 {
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.2;
    margin-bottom: 40px;
}

.hero-botoes {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Estilos dos Botões Hero */
.btn-primario, .btn-secundario {
    padding: 12px 25px;
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-primario {
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
}

.btn-primario:hover {
    transform: scale(1.05);
    background-color: #fbd63f;
}

.btn-secundario {
    background-color: #FFFFFF;
    color: var(--cor-vinho);
}

.btn-secundario:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.hero-imagem {
    background-image: url('../img/hero-inicio.jpg');
    background-size: cover;
    background-position: center;
}

/* =========================================
   PÁGINA INICIAL - ESTATÍSTICAS
   ========================================= */
.estatisticas {
    background-color: var(--cor-azul-escuro);
    padding: 40px 0;
}

.container-estatisticas-inicio {
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.stat-numero {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 42px;
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-texto {
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-size: 15px;
    font-weight: 400;
}

/* =========================================
   PÁGINA INICIAL - O QUE FAZEMOS
   ========================================= */
.o-que-fazemos {
    background-color: #FFFDF9;
    padding: 60px 0;
}

.container-fazemos {
    padding: 0 5%;
}

.container-fazemos h2 {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 40px;
}

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

/* Estilo Base do Card */
.card {
    background-color: #F8F7F2;
    padding: 30px 20px;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Bordas coloridas da esquerda */
.card-verde { border-left: 8px solid var(--cor-verde); }
.card-laranja { border-left: 8px solid var(--cor-laranja); }
.card-vinho { border-left: 8px solid var(--cor-vinho); }

/* Quadrados com os ícones */
.card-icone {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 20px;
}

.icone-verde { background-color: var(--cor-verde); }
.icone-laranja { background-color: var(--cor-laranja); }
.icone-vinho { background-color: var(--cor-vinho); }

/* Textos internos do card */
.card-texto h3 {
    color: var(--cor-azul-escuro);
    font-family: var(--fonte-textos);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}

.card-texto p {
    color: #555555;
    font-size: 13px;
    line-height: 1.5;
}

/* Responsividade Básica (Tablets e Celulares) */
@media (max-width: 900px) {
    .hero-inicio { grid-template-columns: 1fr; }
    .hero-imagem { min-height: 300px; }
    .cards-fazemos { grid-template-columns: 1fr; }
}

/* =========================================
   PÁGINA INICIAL - SEÇÃO ODS
   ========================================= */
.ods-secao {
    background-color: #F8F7F2;
    border-top: 1px solid #EAEAEA;
    padding: 80px 0;
    text-align: center;
}

.container-ods {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2%;
}

.ods-secao h2 {
    color: var(--cor-vinho);
    font-size: 32px;
    margin-bottom: 20px;
}

.destaque-vinho {
    color: var(--cor-vinho);
    font-weight: 700;
}

.ods-subtitulo {
    color: var(--cor-verde);
    font-family: var(--fonte-textos);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 25px;
}

.ods-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.ods-link {
    display: block;
    flex: 1 1 0;
    max-width: 120px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4px;
}

.ods-link img {
    width: 100%;
    height: auto;
    display: block;
}

.ods-link:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

@media (max-width: 900px) {
    .ods-grid { gap: 10px; }
    .ods-link { flex: 0 1 100px; }
}

/* =========================================
   PÁGINA SOBRE NÓS
   ========================================= */

.sobre-origem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 450px;
    background-color: #FFFFFF;
}

.origem-texto {
    padding: 80px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.origem-texto h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    margin-bottom: 25px;
    line-height: 1.1;
}

.subtitulo-laranja {
    color: var(--cor-laranja);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.origem-texto p {
    color: #333333;
    font-size: 16px;
    line-height: 1.6;
}

.origem-imagem {
    background-image: url('../img/sobre-origem.jpg');
    background-size: cover;
    background-position: center;
}

.sobre-missao {
    background-color: var(--cor-vinho);
    padding: 60px 5%;
    text-align: left;
}

.container-missao {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.subtitulo-amarelo {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.sobre-missao p {
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
}

@media (max-width: 1200px) {
    .sobre-missao p {
        font-size: 20px;
    }
}

.sobre-valores {
    background-color: #FFFFFF;
    padding: 60px 0 80px 0;
}

.container-valores {
    max-width: 100%;
    margin: 0;
    padding: 0 5%;
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.valor-card {
    background-color: transparent;
    padding: 15px 0 0 0;
    border-radius: 0;
}

.sobre-valores .subtitulo-laranja {
    display: block;
    margin-bottom: 40px;
}

.borda-verde { border-top: 8px solid var(--cor-verde); }
.borda-laranja { border-top: 8px solid var(--cor-laranja); }
.borda-vinho { border-top: 8px solid var(--cor-vinho); }
.borda-azul { border-top: 8px solid var(--cor-azul-escuro); }

.valor-card h3 {
    color: var(--cor-azul-escuro);
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.valor-card p {
    color: #555555;
    font-size: 18px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .sobre-origem { grid-template-columns: 1fr; }
    .origem-imagem { min-height: 350px; }
    .valores-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .valores-grid { grid-template-columns: 1fr; }
    .sobre-missao p { font-size: 18px; }
}

/* =========================================
   PÁGINA DE ATUAÇÃO
   ========================================= */

.atuacao-destaque {
    background-color: #FFFFFF;
    padding: 50px 5%;
}

.container-atuacao {
    max-width: 100%;
    margin: 0;
}

.titulo-atuacao {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.subtitulo-atuacao {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 20px;
    margin-bottom: 25px;
}

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

.card-atuacao {
    background-color: #F8F7F2;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.img-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
}

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

.badge {
    position: absolute;
    bottom: -25px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 18px;
}

.badge-verde { background-color: var(--cor-verde); }
.badge-laranja { background-color: var(--cor-laranja); }
.badge-vinho { background-color: var(--cor-vinho); }

.conteudo-atuacao {
    padding: 40px 25px 30px 25px;
    flex-grow: 1;
}

.conteudo-atuacao h3 {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.conteudo-atuacao p {
    color: #555555;
    font-size: 16px;
    line-height: 1.5;
}

.faixa-impacto {
    background-color: var(--cor-azul-escuro);
    padding: 25px 5%;
}

.container-impacto {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2%;
    gap: 40px;
}

.faixa-impacto p {
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
}

.btn-impacto {
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
    white-space: nowrap;
}

.btn-impacto:hover {
    transform: scale(1.05);
    background-color: #fbd63f;
}

@media (max-width: 1100px) {
    .container-impacto {
        flex-direction: column;
        text-align: center;
    }
    .faixa-impacto p {
        font-size: 22px;
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .grid-atuacao { grid-template-columns: repeat(2, 1fr); }
}

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

.nossa-metodologia {
    background-color: #F7F8F9;
    padding: 50px 5%;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

.container-metodologia {
    max-width: 100%;
    margin: 0;
}

.nossa-metodologia h2 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

.banner-verde {
    background-color: var(--cor-verde);
    padding: 30px 40px;
    margin-bottom: 30px;
}

.subtitulo-banner {
    color: var(--cor-amarelo);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.banner-verde p {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

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

.card-metodologia {
    background-color: #F8F7F2;
    display: flex;
    flex-direction: column;
}

.img-metodologia {
    width: 100%;
    height: 220px;
}

.img-metodologia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.borda-img-verde { border-bottom: 6px solid var(--cor-verde); }
.borda-img-laranja { border-bottom: 6px solid var(--cor-laranja); }
.borda-img-vinho { border-bottom: 6px solid var(--cor-vinho); }

.texto-metodologia {
    padding: 25px;
    flex-grow: 1;
}

.texto-metodologia h3 {
    font-family: var(--fonte-textos);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.texto-verde { color: var(--cor-verde); }
.texto-laranja { color: var(--cor-laranja); }
.texto-vinho { color: var(--cor-vinho); }

.texto-metodologia p {
    color: #555555;
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .grid-metodologia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grid-metodologia { grid-template-columns: 1fr; }
    .banner-verde { padding: 25px 20px; }
}

.mudando-rota {
    background-color: #FFFFFF;
    padding: 50px 5%;
}

.container-mudando-rota {
    max-width: 100%;
    margin: 0;
}

.mudando-rota h2 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.subtitulo-rota {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 18px;
    margin-bottom: 40px;
}

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

.card-rota {
    background-color: #F8F7F2;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #EAEAEA;
}

.borda-topo-verde { border-top: 8px solid var(--cor-verde); }
.borda-topo-laranja { border-top: 8px solid var(--cor-laranja); }
.borda-topo-vinho { border-top: 8px solid var(--cor-vinho); }

.icone-rota {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icone-rota i {
    color: #FFFFFF;
    font-size: 32px;
}

.bg-verde { background-color: var(--cor-verde); }
.bg-laranja { background-color: var(--cor-laranja); }
.bg-vinho { background-color: var(--cor-vinho); }

.card-rota h3 {
    font-family: var(--fonte-textos);
    font-size: 22px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

.card-rota p {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .grid-rota { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grid-rota { grid-template-columns: 1fr; }
    .mudando-rota h2 { font-size: 34px; }
}

.depoimentos-atuacao {
    background-color: #F7F8F9;
    padding: 50px 5%;
    box-sizing: border-box;
    border-top: 1px solid #EEEEEE;
}

.container-depoimentos {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.depoimentos-atuacao h2 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 10px 0;
    padding: 0;
}

.subtitulo-depoimentos {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 20px;
    text-align: left;
    margin: 0 0 40px 0;
    padding: 0;
}

.grid-videos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.card-video {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.card-video:hover {
    transform: translateY(-8px);
}

.thumb-video {
    background-color: #000000;
    background-size: cover;
    background-position: center;
    aspect-ratio: 9 / 16;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.thumb-video i {
    color: var(--cor-azul-escuro);
    background-color: var(--cor-amarelo);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-left: 4px;
    z-index: 2;
}

.thumb-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.info-video {
    background-color: var(--cor-azul-escuro);
    padding: 15px 10px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-video h4 {
    color: #FFFFFF;
    font-family: var(--fonte-textos);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.info-video span {
    color: #CCCCCC;
    font-size: 13px;
    font-style: italic;
    margin-top: 5px;
    display: block;
}

@media (max-width: 1200px) {
    .grid-videos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .grid-videos { grid-template-columns: repeat(2, 1fr); }
}

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

/* =========================================
   PÁGINA: NOSSO TERRITÓRIO
   ========================================= */

/* Fundo Branco (Seção 1) */
.nosso-territorio {
    background-color: #FFFFFF;
    /* Reduzimos o espaço de baixo de 80px para 40px */
    padding: 20px 5% 40px 5%;
}
/* (Pode manter o restante das regras da seção 1 intocadas: .container-territorio, .texto-territorio, etc) */

.container-territorio {
    max-width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.texto-territorio h1 {
    color: var(--cor-vinho);
    font-size: 46px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}

.subtitulo-laranja {
    color: var(--cor-laranja);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}

.texto-territorio p {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
}

.subtitulo-verde {
    color: var(--cor-verde);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.lista-territorio {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.lista-territorio li {
    position: relative;
    padding-left: 18px;
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.lista-territorio li::before {
    content: "•";
    color: var(--cor-vinho);
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -4px;
}

.destaque-vinho {
    color: var(--cor-vinho);
    font-weight: 700;
}

.galeria-territorio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
}

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

.galeria-menor {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.img-pequena {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    .container-territorio {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .texto-territorio h1 {
        font-size: 38px;
    }
}

@media (max-width: 600px) {
    .galeria-territorio {
        grid-template-columns: 1fr;
    }
}

.estatisticas-territorio {
    background-color: #F7F8F9;
    /* Reduzimos o topo e a base de 80px para 40px */
    padding: 40px 5%;
    display: block;
    width: 100%;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

/* (Pode manter o restante das regras dos cards intocadas) */

.container-estatisticas {
    max-width: 100%;
    margin: 0;
    display: block;
}

.cabecalho-estatisticas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    width: 100%;
}

.cabecalho-estatisticas h2 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    display: block;
    width: 100%;
    text-align: left;
}

.subtitulo-estatisticas {
    color: var(--cor-laranja);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 15px 0 !important;
    display: block;
    width: 100%;
    text-align: left;
}

.descricao-estatisticas {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 18px;
    margin: 0 !important;
    display: block;
    width: 100%;
    text-align: left;
}

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

.card-estatistica {
    background-color: #F8F7F2;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
}

.borda-topo-amarelo { border-top: 8px solid var(--cor-amarelo); }
.borda-topo-laranja { border-top: 8px solid var(--cor-laranja); }
.borda-topo-vinho { border-top: 8px solid var(--cor-vinho); }

.card-estatistica h3 {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    min-height: 56px;
}

.card-estatistica p {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

@media (max-width: 900px) {
    .grid-estatisticas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-estatisticas {
        grid-template-columns: 1fr;
    }
    .cabecalho-estatisticas h2 {
        font-size: 34px;
    }
}

.resposta-territorio {
    background-color: #FFFFFF;
    /* Reduzimos o topo e a base de 80px para 40px */
    padding: 40px 5%;
}

/* (Pode manter o restante das regras da resposta intocadas) */

.container-resposta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 100%;
    margin: 0;
}

.texto-resposta h2 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.texto-resposta .subtitulo-laranja {
    color: var(--cor-laranja);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    display: block;
}

.texto-resposta p {
    color: #4A4A4A;
    font-family: var(--fonte-textos);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-amarelo-arredondado {
    display: inline-block;
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-family: var(--fonte-textos);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-amarelo-arredondado:hover {
    background-color: #e6b800;
    transform: scale(1.05);
}

.imagem-resposta img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .container-resposta {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .texto-resposta h2 {
        font-size: 34px;
    }
}
/* =========================================
   PÁGINA: TRANSPARÊNCIA
   ========================================= */

.container-transparencia {
    padding: 0 5%;
}

/* --- Seção topo (Governança) --- */
.transparencia-topo {
    background-color: #FFFFFF;
    padding: 50px 0;
}

.transparencia-topo h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.subtitulo-transparencia {
    color: #4A4A4A;
    font-size: 17px;
    margin-bottom: 40px;
}

/* Grid de duas colunas: Diretoria | Documentação */
.grid-governanca {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Bloco Diretoria --- */
.grid-diretores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.card-diretor {
    text-align: center;
}

.card-diretor img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 12px;
    display: block;
}

.card-diretor h3 {
    color: var(--cor-azul-escuro);
    font-family: var(--fonte-textos);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px 0;
}

.card-diretor span {
    color: #666666;
    font-size: 13px;
}

/* --- Bloco Documentação --- */
.bloco-documentacao {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F8F7F2;
    padding: 18px 25px;
    border-left: 6px solid var(--cor-vinho);
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.doc-nome {
    color: var(--cor-azul-escuro);
    font-size: 16px;
    font-weight: 500;
}

.doc-acao {
    color: var(--cor-vinho);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.doc-acao i {
    margin-right: 6px;
}

/* Cores das bordas laterais dos documentos */
.borda-esq-vinho { border-left-color: var(--cor-vinho); }
.borda-esq-verde { border-left-color: var(--cor-verde); }
.borda-esq-laranja { border-left-color: var(--cor-laranja); }
.borda-esq-azul { border-left-color: var(--cor-azul-escuro); }

/* --- Seção Prestação de Contas --- */
.prestacao-contas {
    background-color: #FFFFFF;
    padding: 20px 0 60px 0;
}

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

.card-conta {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.conta-ano {
    background-color: var(--cor-azul-escuro);
    color: var(--cor-amarelo);
    font-weight: 700;
    font-size: 18px;
    padding: 15px 25px;
}

.conta-corpo {
    background-color: #F8F7F2;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conta-corpo a {
    color: var(--cor-vinho);
    font-weight: 700;
    font-size: 15px;
}

.conta-corpo a:hover {
    text-decoration: underline;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .grid-governanca {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .grid-contas {
        grid-template-columns: 1fr;
    }
    .transparencia-topo h1 {
        font-size: 34px;
    }
}

@media (max-width: 500px) {
    .grid-diretores {
        grid-template-columns: 1fr;
        max-width: 250px;
    }
}
/* =========================================
   PÁGINA: INSCRIÇÕES (Quero me Inscrever)
   ========================================= */

.inscricoes-secao {
    background-color: #FFFFFF;
    padding: 50px 0;
}

.container-inscricoes {
    padding: 0 5%;
}

.container-inscricoes h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.subtitulo-inscricoes {
    color: #4A4A4A;
    font-size: 17px;
    margin-bottom: 40px;
}

.destaque-laranja {
    color: var(--cor-laranja);
    font-weight: 700;
}

/* Grid dos cards */
.grid-inscricoes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Card individual */
.card-inscricao {
    background-color: #F8F7F2;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-inscricao:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.img-inscricao {
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.img-inscricao img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.corpo-inscricao {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.corpo-inscricao h3 {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.desc-inscricao {
    color: #4A4A4A;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

.info-inscricao {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 20px 0;
    /* empurra o botão para a base, deixando os cards alinhados */
    margin-top: auto;
}

/* Cor de texto extra (as demais já existem no CSS) */
.texto-azul { color: var(--cor-azul-escuro); }

/* Botão INSCREVA-SE */
.btn-inscrever {
    display: block;
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-inscrever:hover {
    background-color: #fbd63f;
    transform: scale(1.03);
}

/* --- Responsividade --- */
@media (max-width: 1100px) {
    .grid-inscricoes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .grid-inscricoes {
        grid-template-columns: 1fr;
    }
    .container-inscricoes h1 {
        font-size: 34px;
    }
}
/* =========================================
   PÁGINA: COMO AJUDAR
   ========================================= */

.como-ajudar-secao {
    background-color: #FFFFFF;
    padding: 50px 0;
}

.container-como-ajudar {
    padding: 0 5%;
}

.container-como-ajudar h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.subtitulo-como-ajudar {
    color: #4A4A4A;
    font-size: 17px;
    margin-bottom: 40px;
}

/* Faixa (cada uma das 3 formas de ajudar) */
.faixa-ajuda {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background-color: #F8F7F2;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-left: 8px solid var(--cor-vinho);
}

/* Faixa invertida: barra colorida na direita em vez da esquerda */
.faixa-ajuda.invertida {
    border-left: none;
    border-right: 8px solid var(--cor-vinho);
}

/* Cores das barras laterais (faixas normais: barra à esquerda) */
.barra-verde { border-left-color: var(--cor-verde); }
.barra-laranja { border-left-color: var(--cor-laranja); }
.barra-vinho { border-left-color: var(--cor-vinho); }

/* Cores das barras nas faixas invertidas (barra à direita) */
.barra-verde.invertida { border-right-color: var(--cor-verde); }
.barra-laranja.invertida { border-right-color: var(--cor-laranja); }
.barra-vinho.invertida { border-right-color: var(--cor-vinho); }

/* Lado do texto */
.faixa-texto {
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faixa-texto h3 {
    font-family: var(--fonte-textos);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.faixa-texto p {
    color: #4A4A4A;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Botão da faixa */
.btn-ajuda {
    display: inline-block;
    align-self: flex-start;
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-ajuda:hover {
    background-color: #fbd63f;
    transform: scale(1.03);
}

/* Lado da imagem */
.faixa-imagem {
    min-height: 220px;
    overflow: hidden;
}

.faixa-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Responsividade --- */
@media (max-width: 800px) {
    .faixa-ajuda,
    .faixa-ajuda.invertida {
        grid-template-columns: 1fr;
    }

    /* No mobile, a imagem sempre aparece abaixo do texto,
       mesmo nas faixas invertidas */
    .faixa-ajuda.invertida .faixa-imagem {
        order: 2;
    }
    .faixa-ajuda.invertida .faixa-texto {
        order: 1;
    }

    .faixa-imagem {
        min-height: 200px;
    }

    .container-como-ajudar h1 {
        font-size: 34px;
    }
}
/* =========================================
   PÁGINA: PARCEIROS (Lista)
   ========================================= */

.parceiros-secao {
    background-color: #FFFFFF;
    padding: 50px 0;
}

.container-parceiros {
    padding: 0 5%;
}

.container-parceiros h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.subtitulo-parceiros {
    color: #4A4A4A;
    font-size: 17px;
    margin-bottom: 40px;
    max-width: 600px;
}

.grid-parceiros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 720px;
}

/* Card do parceiro (é um link inteiro) */
.card-parceiro {
    background-color: #F8F7F2;
    border-radius: 4px;
    padding: 40px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 8px solid var(--cor-verde);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
}

.card-parceiro:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.barra-topo-verde { border-top-color: var(--cor-verde); }
.barra-topo-vinho { border-top-color: var(--cor-vinho); }

.logo-parceiro {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.logo-parceiro img {
    max-height: 70px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.card-parceiro h3 {
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.card-parceiro p {
    color: #4A4A4A;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

/* Botão dentro do card (visual de botão, mas o link é o card todo) */
.btn-parceiro {
    display: block;
    width: 100%;
    background-color: var(--cor-amarelo);
    color: var(--cor-azul-escuro);
    font-weight: 700;
    font-size: 14px;
    padding: 14px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.card-parceiro:hover .btn-parceiro {
    background-color: #fbd63f;
}

/* =========================================
   PÁGINA: PARCEIRO (Detalhe individual)
   ========================================= */

.parceiro-detalhe {
    background-color: #FFFFFF;
    padding: 50px 0;
}

.container-parceiro-detalhe {
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Lado do texto --- */
.voltar-parceiros {
    color: var(--cor-laranja);
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
    margin-bottom: 15px;
}

.voltar-parceiros:hover {
    text-decoration: underline;
}

.parceiro-info h1 {
    color: var(--cor-vinho);
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 25px 0;
}

.parceiro-intro {
    color: #4A4A4A;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Bloco verde de destaque */
.parceiro-destaque {
    background-color: var(--cor-verde);
    color: #FFFFFF;
    padding: 30px 35px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.parceiro-destaque-titulo {
    color: var(--cor-amarelo);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 12px;
}

.parceiro-destaque p {
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* Chamada para ação (3D Social) */
.parceiro-cta-titulo {
    color: var(--cor-vinho);
    font-family: var(--fonte-textos);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.parceiro-cta-texto {
    color: #4A4A4A;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Agradecimento (Max Fabiani) */
.parceiro-agradecimento {
    color: #4A4A4A;
    font-size: 16x;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Botão de ação do parceiro */
.btn-parceiro-cta {
    display: block;
    width: fit-content;
    margin-top: 20px;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 35px;
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-parceiro-cta:hover {
    transform: scale(1.03);
    opacity: 0.92;
}

.btn-laranja { background-color: var(--cor-laranja); }
.btn-vinho { background-color: var(--cor-vinho); }

/* --- Lado visual (logo + imagem) --- */
.parceiro-visual {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.parceiro-logo-grande {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parceiro-logo-grande img {
    max-height: 130px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.parceiro-imagem img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* --- Responsividade --- */
@media (max-width: 800px) {
    .container-parceiro-detalhe {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* No mobile, o visual (logo + imagem) vai para cima */
    .parceiro-visual {
        order: -1;
    }
    .parceiro-info h1 {
        font-size: 34px;
    }
}

@media (max-width: 600px) {
    .grid-parceiros {
        grid-template-columns: 1fr;
        max-width: 350px;
    }
    .container-parceiros h1 {
        font-size: 34px;
    }
}
/* =========================================
   TELA DE CARREGAMENTO (PRELOADER)
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.esconder {
    opacity: 0;
    visibility: hidden;
}

#preloader img {
    width: 160px;
    height: auto;
    animation: pulsar 1.6s ease-in-out infinite;
}

body.carregando {
    overflow: hidden;
}

@keyframes pulsar {
    0%   { transform: scale(1);    opacity: 1;   }
    50%  { transform: scale(1.08); opacity: 0.75; }
    100% { transform: scale(1);    opacity: 1;   }
}
/* =========================================
   MENU HAMBÚRGUER (MOBILE)
   ========================================= */

/* O botão hambúrguer fica escondido no desktop */
.menu-hamburguer {
    display: none;
    background: none;
    border: none;
    color: var(--cor-vinho);
    font-size: 28px;
    cursor: pointer;
    padding: 5px;
}

/* Ajustes que valem só em telas até 900px (celular/tablet) */
@media (max-width: 900px) {

    /* Cabeçalho: logo à esquerda, hambúrguer à direita */
    .container-cabecalho {
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    /* Traz a logo de volta ao normal e remove os ajustes de posição do desktop */
    .logo {
        margin-left: 0;
        margin-right: 0;
    }

    /* Esconde o #VemSerLuz e o botão DOAR do topo no celular */
    .slogan-link,
    .cabecalho .btn-doar {
        display: none;
    }

    /* Mostra o botão hambúrguer */
    .menu-hamburguer {
        display: block;
    }

    /* O menu fica escondido por padrão e vira uma lista vertical quando aberto */
    .menu-navegacao {
        display: none;
        width: 100%;
        order: 3; /* joga o menu para baixo da logo/hambúrguer */
    }

    /* Quando o menu recebe a classe "aberto", ele aparece */
    .menu-navegacao.aberto {
        display: block;
    }

    .menu-navegacao ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .menu-navegacao ul li {
        width: 100%;
        border-top: 1px solid #EEEEEE;
    }

    .menu-navegacao ul li a {
        display: block;
        padding: 14px 5px;
        font-size: 16px;
    }

    /* Dropdown "Sobre Nós": no celular, mostra os subitens sempre */
    .menu-navegacao ul.dropdown-menu {
        position: static;
        display: block;
        box-shadow: none;
        min-width: 0;
        padding: 0 0 0 20px;
        background-color: #FAFAFA;
    }

    .menu-navegacao ul.dropdown-menu a {
        padding: 12px 5px;
        font-size: 15px;
    }
}
/* =========================================
   PÁGINA DOAR - MOBILE
   ========================================= */
@media (max-width: 900px) {

    /* Empilha: some a coluna da imagem, conteúdo ocupa tudo */
    .container-pagina-doacao {
        grid-template-columns: 1fr;
    }

    /* Esconde a foto da esquerda no celular */
    .doacao-esq {
        display: none;
    }

    /* Reduz o padding lateral (era 10%) e dá um respiro no topo */
    .doacao-dir {
        padding: 30px 6%;
    }

    /* Bloco PIX: empilha os dois quadros (chave e QR) um sobre o outro */
    .bloco-pix-container {
        grid-template-columns: 1fr;
    }

    /* QR code maior, já que agora tem a largura toda */
    .bloco-pix-qr img {
        width: 160px;
        height: 160px;
    }

    /* Um pouco menos de padding interno nos blocos, pra caber melhor */
    .bloco-mensal {
        padding: 20px 25px;
    }
}