/* ==========================================================
   CENTRO GRO HARLEM BRUNDTLAND
   PROBRASIL NORDESTE
   STYLE.CSS — VERSÃO COMPLETA
   ==========================================================

   IDENTIDADE VISUAL
   Amarelo  = protagonista
   Verde    = institucional / sustentabilidade
   Terroso  = detalhe regional
   Branco   = leveza / modernidade

   IMPORTANTE:
   - Topbar e header permanecem FIXOS durante a rolagem.
   - Logo oficial: img/logo/logo pro nordeste.png
   - ODS: carrossel infinito com imagens completas.
========================================================== */


/* ==========================================================
   01. VARIÁVEIS
========================================================== */

:root {

    --yellow: #B85F3D;
    --yellow-light: #B85F3D;
    --yellow-soft: #E6D5B8;
    --yellow-dark: #B85F3D;

    --green: #315B45;
    --green-light: #66815C;
    --green-dark: #315B45;
    --green-deep: #315B45;
    --green-soft: #F7F4EC;

    --earth: #B85F3D;
    --earth-light: #B85F3D;

    --earth-dark: #315B45;
    --earth-deep: #26342E;
    --earth-mid: #66815C;
    --ochre: #B85F3D;

    --white: #FFFFFF;
    --off-white: #F7F4EC;

    --gray-50: #F7F4EC;
    --gray-100: #F7F4EC;
    --gray-200: #E6D5B8;
    --gray-400: #657069;
    --gray-500: #657069;
    --gray-600: #657069;
    --gray-700: #657069;
    --gray-800: #26342E;
    --black: #26342E;

    --ods-01: #E5243B;
    --ods-02: #DDA63A;
    --ods-03: #4C9F38;
    --ods-04: #C5192D;
    --ods-05: #FF3A21;
    --ods-06: #26BDE2;
    --ods-07: #FCC30B;
    --ods-08: #A21942;
    --ods-09: #FD6925;
    --ods-10: #DD1367;
    --ods-11: #FD9D24;
    --ods-12: #BF8B2E;
    --ods-13: #3F7E44;
    --ods-14: #0A97D9;
    --ods-15: #56C02B;
    --ods-16: #00689D;
    --ods-17: #19486A;

    --font-body: "DM Sans", sans-serif;
    --font-title: "Playfair Display", serif;

    --container: 1180px;

    --topbar-height: 30px;
    --header-height: 105px;

    --radius: 12px;
    --radius-small: 7px;
    --radius-pill: 100px;

    --shadow-small: 0 3px 15px rgba(0, 0, 0, 0.07);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.14);
}


/* ==========================================================
   02. RESET
========================================================== */

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

html {
    scroll-behavior: smooth;

    /*
     * Compensa o topo fixo quando usamos links internos.
     */
    scroll-padding-top:
        calc(
            var(--topbar-height) +
            var(--header-height) +
            15px
        );
}

body {
    margin: 0;

    /*
     * Como topbar + header são fixed, reservamos o espaço
     * deles no fluxo da página.
     */
    padding-top:
        calc(
            var(--topbar-height) +
            var(--header-height)
        );

    font-family: var(--font-body);
    color: var(--gray-800);
    background: var(--off-white);
    line-height: 1.65;

    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

::selection {
    background: var(--yellow);
    color: var(--green-deep);
}


/* ==========================================================
   03. CONTAINER
========================================================== */

.container {
    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   04. TOPBAR FIXA
========================================================== */

.topbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: var(--topbar-height);

    z-index: 10000;

    background: var(--green-deep);
    color: var(--white);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.topbar-container {
    min-height: var(--topbar-height);

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


/* ==========================================================
   05. HEADER PRINCIPAL — FIXO
========================================================== */

.header {
    position: fixed;

    top: var(--topbar-height);
    left: 0;
    right: 0;

    width: 100%;
    min-height: var(--header-height);

    z-index: 9999;

    background: var(--white);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.07);

    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.07);
}

.header-container {
    min-height: var(--header-height);

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

    gap: 28px;
}


/* ==========================================================
   06. LOGO OFICIAL PROBRASIL
========================================================== */

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

    flex-shrink: 0;
}

.site-brand {
    display: flex;
    align-items: center;

    gap: 12px;
    flex-shrink: 0;
}

.probrasil-logo {
    width: 112px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;
}

.probrasil-logo img {
    display: block;

    width: auto;
    max-width: 145px;

    height: auto;
    max-height: 68px;

    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1.15;
}

.logo-text strong {
    color: var(--green-deep);

    font-size: 15px;
    font-weight: 800;
}

.logo-text small {
    margin-top: 3px;

    color: var(--gray-500);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/*
 * Mantemos estas classes porque versões anteriores do HTML
 * podem ainda utilizá-las.
 */

.logo-mark {
    position: relative;

    width: 42px;
    height: 42px;
}

.logo-mark-circle {
    position: absolute;

    top: 2px;
    left: 2px;

    width: 29px;
    height: 29px;

    border: 4px solid var(--yellow);

    border-radius: 50%;
}

.logo-mark-line {
    position: absolute;

    top: 27px;
    left: 10px;

    width: 29px;
    height: 4px;

    border-radius: 10px;

    background: var(--green);

    transform: rotate(-45deg);
}


/* ==========================================================
   07. NAVEGAÇÃO
========================================================== */

.nav {
    display: flex;
    align-items: center;

    gap: 3px;
}

.nav-link {
    position: relative;

    padding: 36px 12px;

    color: var(--gray-700);

    font-size: 12px;
    font-weight: 700;

    transition:
        color 0.2s ease;
}

.nav-link:hover {
    color: var(--green);
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 20px;

    height: 3px;

    border-radius: 5px;

    background: var(--yellow);

    transform: scaleX(0);

    transition:
        transform 0.2s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}


/* ==========================================================
   08. BOTÃO DOAÇÃO NO MENU
========================================================== */

.nav-donation {
    display: inline-flex;

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

    gap: 7px;

    margin-left: 9px;

    padding: 15px 25px;

    border-radius: var(--radius-pill);

    background: var(--yellow);

    color: var(--green-deep);

    font-size: 12px;
    font-weight: 900;

    box-shadow:
        0 5px 15px rgba(255,196,0,0.25);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.nav-donation::before {
    content: "♥";

    font-size: 13px;
}

.nav-donation::after {
    display: none;
}

.nav-donation:hover {
    background: var(--yellow-light);

    color: var(--green-deep);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(255,196,0,0.35);
}


/* ==========================================================
   09. MENU MOBILE
========================================================== */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    border: none;

    background: transparent;

    cursor: pointer;

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

    flex-direction: column;

    gap: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;

    border-radius: 5px;

    background: var(--green-deep);

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* ==========================================================
   10. HERO
========================================================== */

.hero {
    position: relative;

    min-height: 610px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--green);
}

.hero-background {
    position: absolute;

    inset: 0;
}

.hero-image-placeholder {
    width: 100%;
    height: 100%;

    min-height: 610px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 7%;

    background:
        linear-gradient(
            120deg,
            #315B45,
            #66815C 42%,
            #E6D5B8 78%,
            #E6D5B8
        );

    color: rgba(255,255,255,0.35);

    font-family: var(--font-title);

    font-size:
        clamp(35px, 5vw, 65px);

    text-align: center;
}

.hero-image-placeholder small {
    display: block;

    margin-top: 5px;

    font-family: var(--font-body);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,90,50,0.96) 0%,
            rgba(7,90,50,0.82) 35%,
            rgba(7,90,50,0.32) 70%,
            rgba(7,90,50,0.04) 100%
        );
}

.hero-container {
    position: relative;

    z-index: 5;

    min-height: 610px;

    display: flex;
    align-items: center;
}

.hero-content {
    max-width: 680px;

    color: var(--white);

    animation:
        heroAppear 0.8s ease both;
}

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: var(--yellow-light);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.18em;
}

.hero-eyebrow::before {
    content: "";

    width: 38px;
    height: 3px;

    border-radius: 5px;

    background: var(--yellow);
}

.hero h1 {
    margin-bottom: 24px;

    color: var(--white);

    font-family: var(--font-title);

    font-size:
        clamp(45px, 6vw, 75px);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.035em;
}

.hero h1 span {
    color: var(--yellow);
}

.hero p {
    max-width: 590px;

    margin-bottom: 29px;

    color: rgba(255,255,255,0.86);

    font-size: 15px;

    line-height: 1.75;
}

.hero-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.hero-scroll {
    position: absolute;

    left: 0;
    bottom: 23px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,0.55);
}

.hero-scroll span {
    width: 35px;
    height: 3px;

    border-radius: 5px;

    background: var(--yellow);
}

.hero-scroll small {
    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ==========================================================
   11. ELEMENTOS GRÁFICOS DO HERO
========================================================== */

.rock-art {
    position: absolute;

    z-index: 3;

    color: rgba(255,255,255,0.20);

    pointer-events: none;
}

.rock-art-hero {
    right: 8%;
    bottom: 12%;

    display: flex;

    gap: 10px;

    font-family: serif;

    font-size: 40px;

    transform: rotate(-12deg);
}

.rock-art-hero span:nth-child(2) {
    transform: translateY(-25px);
}

.rock-art-hero span:nth-child(3) {
    transform: translateY(12px);
}


/* ==========================================================
   12. BOTÕES
========================================================== */

.btn {
    min-height: 51px;

    display: inline-flex;

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

    gap: 9px;

    padding: 0 24px;

    border: 2px solid transparent;

    border-radius: var(--radius-pill);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

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

.btn-primary {
    background: var(--yellow);

    color: var(--green-deep);

    box-shadow:
        0 8px 23px rgba(255,196,0,0.30);
}

.btn-primary::after {
    content: "→";

    font-size: 17px;
}

.btn-primary:hover {
    background: var(--yellow-light);

    box-shadow:
        0 12px 30px rgba(255,196,0,0.40);
}

.btn-outline-light {
    border-color:
        rgba(255,255,255,0.65);

    background:
        rgba(255,255,255,0.05);

    color: var(--white);
}

.btn-outline-light:hover {
    border-color: var(--white);

    background: var(--white);

    color: var(--green-deep);
}

.btn-outline-light::before {
    content: "♥";

    font-size: 13px;
}

.btn-dark {
    background: var(--green-deep);

    color: var(--white);

    box-shadow:
        0 8px 20px rgba(7,90,50,0.17);
}

.btn-dark::after {
    content: "→";

    font-size: 17px;
}

.btn-dark:hover {
    background: var(--green);
}

.btn-light {
    background: var(--yellow);

    color: var(--green-deep);
}

.btn-light::after {
    content: "→";

    font-size: 17px;
}

.btn-light:hover {
    background: var(--yellow-light);
}


/* ==========================================================
   13. SEÇÕES
========================================================== */

.section {
    padding: 80px 0;
}

.section-label {
    display: block;

    margin-bottom: 11px;

    color: var(--green);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.section-label.light {
    color: var(--yellow-light);
}

.section-heading {
    margin-bottom: 36px;
}

.section-heading h2,
.intro-content h2 {
    color: var(--green-deep);

    font-family: var(--font-title);

    font-size:
        clamp(34px, 4vw, 51px);

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.025em;
}

.section-heading p {
    max-width: 650px;

    margin-top: 12px;

    color: var(--gray-600);

    font-size: 14px;
}

.section-heading.centered {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-heading.centered p {
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   14. LINKS DE TEXTO
========================================================== */

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 9px;

    color: var(--green);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.text-link span {
    width: 27px;
    height: 27px;

    display: flex;

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

    border-radius: 50%;

    background: var(--yellow);

    color: var(--green-deep);

    font-size: 15px;
}

.text-link:hover {
    color: var(--green-deep);

    gap: 12px;
}


/* ==========================================================
   15. QUEM SOMOS
========================================================== */

.introduction {
    background: var(--white);
}

.intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.85fr);

    gap: 70px;

    align-items: center;
}

.intro-content h2 {
    margin-bottom: 21px;
}

.intro-content p {
    max-width: 620px;

    margin-bottom: 13px;

    color: var(--gray-600);

    font-size: 14px;
}

.intro-values {
    border-left: 5px solid var(--yellow);
}

.value-card {
    padding: 19px 25px;

    border-bottom:
        1px solid var(--gray-200);
}

.value-card:last-child {
    border-bottom: none;
}

.value-number {
    color: var(--green);

    font-family: var(--font-title);

    font-size: 17px;
}

.value-card h3 {
    margin: 3px 0;

    color: var(--green-deep);

    font-size: 18px;
}

.value-card p {
    max-width: 400px;

    color: var(--gray-600);

    font-size: 13px;
}


/* ==========================================================
   16. HISTÓRIA
========================================================== */

.history-preview {
    position: relative;

    padding: 70px 0;

    overflow: hidden;

    background: var(--green);

    color: var(--white);
}

.history-preview::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -230px;
    top: -180px;

    border:
        70px solid rgba(255,196,0,0.12);

    border-radius: 50%;
}

.history-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 75px;
}

.history-title h2 {
    max-width: 500px;

    color: var(--white);

    font-family: var(--font-title);

    font-size:
        clamp(36px, 4vw, 51px);

    font-weight: 500;

    line-height: 1.1;
}

.history-content {
    display: flex;

    flex-direction: column;
}

.history-item {
    display: grid;

    grid-template-columns: 80px 1fr;

    gap: 23px;

    padding-bottom: 23px;

    margin-bottom: 23px;

    border-bottom:
        1px solid rgba(255,255,255,0.18);
}

.history-item:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;
}

.history-year {
    color: var(--yellow);

    font-family: var(--font-title);

    font-size: 20px;
}

.history-item h3 {
    margin-bottom: 5px;

    font-size: 18px;
}

.history-item p {
    color: rgba(255,255,255,0.75);

    font-size: 13px;
}


/* ==========================================================
   17. IMPACTO
========================================================== */

.impact-section {
    position: relative;

    padding: 65px 0;

    overflow: hidden;

    background: var(--yellow);

    color: var(--green-deep);
}

.impact-pattern {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -350px;

    border:
        1px solid rgba(7,90,50,0.12);

    border-radius: 50%;
}

.impact-section .section-heading h2 {
    color: var(--green-deep);
}

.impact-section .section-heading p {
    color: rgba(7,90,50,0.72);
}

.impact-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 40px;

    border-top:
        1px solid rgba(7,90,50,0.18);

    border-bottom:
        1px solid rgba(7,90,50,0.18);
}

.impact-item {
    min-height: 140px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    border-right:
        1px solid rgba(7,90,50,0.18);
}

.impact-item:last-child {
    border-right: none;
}

.impact-item strong {
    color: var(--green-deep);

    font-family: var(--font-title);

    font-size: 43px;

    line-height: 1;

    margin-bottom: 8px;
}

.impact-item span {
    color: rgba(7,90,50,0.72);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   18. GRO HARLEM BRUNDTLAND
========================================================== */

.brundtland-section {
    background: var(--yellow-soft);
}

.brundtland-grid {
    display: grid;

    grid-template-columns:
        minmax(0,0.8fr)
        minmax(0,1fr);

    gap: 70px;

    align-items: center;
}

.brundtland-image {
    position: relative;
}

.portrait-placeholder {
    aspect-ratio: 4 / 5;

    max-width: 500px;

    display: flex;

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

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #B85F3D,
            #B85F3D
        );
}

.portrait-placeholder::after {
    content: "";

    position: absolute;

    inset: 18px;

    border:
        2px solid rgba(7,90,50,0.25);
}

.portrait-frame {
    position: relative;

    z-index: 2;

    color: rgba(7,90,50,0.50);

    text-align: center;
}

.portrait-frame span {
    display: block;

    font-family: var(--font-title);

    font-size: 34px;
}

.portrait-frame small {
    display: block;

    margin-top: 5px;

    font-size: 10px;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.portrait-caption {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding-top: 12px;
}

.portrait-caption span {
    color: var(--green);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.15em;
}

.portrait-caption small {
    color: var(--gray-600);

    font-size: 11px;
}

.brundtland-content h2 {
    color: var(--green-deep);

    font-family: var(--font-title);

    font-size:
        clamp(40px, 5vw, 60px);

    font-weight: 500;

    line-height: 1.02;
}

.brundtland-content h2 span {
    display: block;

    color: var(--green);
}

.brundtland-line {
    width: 55px;
    height: 4px;

    margin: 21px 0;

    border-radius: 5px;

    background: var(--yellow);
}

.brundtland-content p {
    margin-bottom: 12px;

    color: var(--gray-600);

    font-size: 14px;
}

.brundtland-content .lead {
    color: var(--green-deep);

    font-size: 18px;
}


/* ==========================================================
   19. PROJETOS
========================================================== */

.projects-section {
    background: var(--white);
}

.projects-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;
}

.project-card {
    overflow: hidden;

    background: var(--white);

    border:
        1px solid var(--gray-200);

    border-radius: var(--radius);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--shadow-hover);
}

.project-image {
    position: relative;

    height: 220px;

    display: flex;

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

    overflow: hidden;

    background: var(--green);

    color: rgba(255,255,255,0.55);
}

.project-card:nth-child(2) .project-image {
    background: var(--yellow);

    color: rgba(7,90,50,0.55);
}

.project-card:nth-child(3) .project-image {
    background: var(--earth);
}

.project-image > span {
    font-family: var(--font-title);

    font-size: 24px;
}

.project-number {
    position: absolute;

    right: 18px;
    bottom: 12px;

    color: rgba(255,255,255,0.7);

    font-family: var(--font-title);

    font-size: 22px;
}

.project-card:nth-child(2) .project-number {
    color: rgba(7,90,50,0.6);
}

.project-content {
    padding: 24px;
}

.project-category {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.project-content h3 {
    margin-bottom: 9px;

    color: var(--green-deep);

    font-family: var(--font-title);

    font-size: 24px;

    font-weight: 500;

    line-height: 1.15;
}

.project-content p {
    min-height: 67px;

    margin-bottom: 8px;

    color: var(--gray-600);

    font-size: 13px;
}


/* ==========================================================
   20. SERRA DA CAPIVARA
========================================================== */

.capivara-section {
    position: relative;

    min-height: 400px;

    padding: 0;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.capivara-background {
    position: absolute;

    inset: 0;
}

.capivara-placeholder {
    width: 100%;
    height: 100%;

    min-height: 400px;

    display: flex;

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

    background:
        linear-gradient(
            120deg,
            #B85F3D,
            #B85F3D,
            #E6D5B8
        );

    color: rgba(255,255,255,0.30);

    font-family: var(--font-title);

    font-size:
        clamp(35px, 5vw, 60px);
}

.capivara-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,90,50,0.90),
            rgba(7,90,50,0.53),
            rgba(7,90,50,0.10)
        );
}

.capivara-container {
    position: relative;

    z-index: 2;
}

.capivara-content {
    max-width: 600px;

    color: var(--white);
}

.capivara-content h2 {
    margin-bottom: 13px;

    color: var(--white);

    font-family: var(--font-title);

    font-size:
        clamp(43px, 5vw, 63px);

    font-weight: 500;

    line-height: 1.05;
}

.capivara-content p {
    max-width: 520px;

    margin-bottom: 24px;

    color: rgba(255,255,255,0.82);

    font-size: 14px;
}


/* ==========================================================
   21. ODS — CARROSSEL
========================================================== */

.ods-section {
    background: var(--white);

    overflow: hidden;
}

.ods-section .section-heading {
    margin-bottom: 35px;
}

.ods-carousel {
    width: 100%;

    overflow: hidden;

    position: relative;

    padding:
        10px 25px 25px;
}

.ods-carousel::before,
.ods-carousel::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;

    width: 55px;
    height: 100%;

    pointer-events: none;
}

.ods-carousel::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--white),
            rgba(255,255,255,0)
        );
}

.ods-carousel::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--white),
            rgba(255,255,255,0)
        );
}

.ods-track {
    display: flex;

    width: max-content;

    gap: 12px;

    padding-left: 5px;

    will-change: transform;

    animation:
        odsInfinite 60s linear infinite;
}

.ods-carousel:hover .ods-track {
    animation-play-state: paused;
}

.ods-slide {
    position: relative;

    width: 145px;
    height: 145px;

    flex: 0 0 145px;

    overflow: hidden;

    border-radius: 10px;

    background: var(--white);

    box-shadow:
        0 4px 13px rgba(0,0,0,0.09);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ods-slide:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 22px rgba(0,0,0,0.14);
}

.ods-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center center;

    background: var(--white);

    transition:
        transform 0.3s ease;
}

.ods-slide:hover img {
    transform: scale(1.03);
}

/*
 * As informações já estão dentro das artes dos ODS.
 */
.ods-slide-overlay,
.ods-slide-number,
.ods-slide-info {
    display: none !important;
}

.ods-18-reserved {
    border: none;
}

.ods-more {
    display: flex;

    justify-content: center;

    margin-top: 28px;
}

@keyframes odsInfinite {
    from {
        transform: translateX(0);
    }

    to {
        transform:
            translateX(calc(-50% - 6px));
    }
}


/* ==========================================================
   22. GALERIA
========================================================== */

.gallery-section {
    background: var(--off-white);
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    grid-template-rows:
        185px 185px;

    gap: 9px;
}

.gallery-item {
    position: relative;

    display: flex;

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

    overflow: hidden;

    background: var(--green);

    color: rgba(255,255,255,0.5);
}

.gallery-item:nth-child(2) {
    background: var(--yellow);

    color: rgba(7,90,50,0.5);
}

.gallery-item:nth-child(3) {
    background: var(--earth);
}

.gallery-item:nth-child(4) {
    background: var(--green-light);
}

.gallery-item:nth-child(5) {
    background: var(--yellow-dark);

    color: rgba(7,90,50,0.5);
}

.gallery-large {
    grid-row: span 2;
}

.gallery-item span {
    font-family: var(--font-title);

    font-size: 22px;
}


/* ==========================================================
   23. DOAÇÃO
========================================================== */

.donation-cta {
    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background: var(--yellow);

    color: var(--green-deep);
}

.donation-pattern {
    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -300px;

    border:
        70px solid rgba(7,90,50,0.08);

    border-radius: 50%;
}

.donation-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}

.donation-content h2 {
    margin-bottom: 14px;

    color: var(--green-deep);

    font-family: var(--font-title);

    font-size:
        clamp(40px, 5vw, 60px);

    font-weight: 500;

    line-height: 1.05;
}

.donation-content p {
    max-width: 600px;

    margin-bottom: 24px;

    color: rgba(7,90,50,0.72);

    font-size: 14px;
}

.donation-cta .btn-light {
    min-height: 58px;

    padding: 0 30px;

    background: var(--green-deep);

    color: var(--white);

    font-size: 11px;

    box-shadow:
        0 10px 25px rgba(7,90,50,0.18);
}

.donation-cta .btn-light:hover {
    background: var(--green);
}


/* ==========================================================
   24. FOOTER
========================================================== */

.footer {
    padding-top: 60px;

    background: var(--green-deep);

    color: rgba(255,255,255,0.70);
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.4fr 0.8fr 0.8fr 1fr;

    gap: 50px;

    padding-bottom: 48px;
}

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

.footer .site-brand .probrasil-logo {
    width: 105px;
}

.footer .site-brand .probrasil-logo img {
    max-width: 105px;
    max-height: 48px;
}

.footer .logo-text strong {
    color: var(--white);
}

.footer .logo-text small {
    color: rgba(255,255,255,0.50);
}

.footer-brand > p {
    max-width: 330px;

    margin-top: 17px;

    color: rgba(255,255,255,0.55);

    font-size: 12px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.footer-column h4 {
    margin-bottom: 15px;

    color: var(--yellow);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.footer-column a {
    margin-bottom: 7px;

    color: rgba(255,255,255,0.67);

    font-size: 12px;
}

.footer-column a:hover {
    color: var(--yellow);
}

.footer-column p {
    margin-bottom: 3px;

    color: rgba(255,255,255,0.53);

    font-size: 12px;
}

.footer-bottom {
    min-height: 62px;

    display: flex;

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

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,0.10);

    color: rgba(255,255,255,0.38);

    font-size: 9px;
}


/* ==========================================================
   25. ANIMAÇÕES
========================================================== */

@keyframes heroAppear {
    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================
   26. ACESSIBILIDADE
========================================================== */

:focus-visible {
    outline:
        3px solid var(--yellow);

    outline-offset:
        3px;
}


/* ==========================================================
   27. TABLET
========================================================== */

@media (max-width: 1050px) {

    .nav-link {
        padding-left: 7px;
        padding-right: 7px;

        font-size: 9px;
    }

    .nav-link::after {
        left: 7px;
        right: 7px;
    }

    .nav-donation {
        padding: 11px 15px;
    }

    .intro-grid {
        gap: 45px;
    }

    .brundtland-grid {
        gap: 45px;
    }

    .ods-slide {
        width: 130px;
        height: 130px;

        flex-basis: 130px;
    }

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


/* ==========================================================
   28. MOBILE
========================================================== */

@media (max-width: 760px) {

    :root {
        --topbar-height: 29px;
        --header-height: 68px;
    }

    .container {
        width:
            calc(100% - 32px);
    }


    /* ------------------------------------------------------
       TOPBAR
    ------------------------------------------------------ */

    .topbar-container {
        min-height: 29px;

        justify-content: center;
    }

    .topbar-container span:last-child {
        display: none;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .header-container {
        min-height: 68px;
    }

    .site-brand {
        gap: 8px;
    }

    .probrasil-logo {
        width: 82px;
        height: 42px;
    }

    .probrasil-logo img {
        max-width: 82px;
        max-height: 42px;
    }

    .site-brand .logo-text strong {
        font-size: 10px;
    }

    .site-brand .logo-text small {
        font-size: 7px;
    }

    .nav {
        position: fixed;

        left: 0;
        right: 0;

        top:
            calc(
                var(--topbar-height) +
                var(--header-height)
            );

        width: 100%;

        padding:
            10px 16px 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        background: var(--white);

        border-top:
            1px solid var(--gray-200);

        box-shadow: var(--shadow);
    }

    .nav.open {
        display: flex;
    }

    .nav-link {
        padding: 12px 10px;

        font-size: 13px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-donation {
        margin: 8px 0 0;

        padding: 14px;

        text-align: center;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.active span:nth-child(1) {
        transform:
            translateY(8px)
            rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform:
            translateY(-8px)
            rotate(-45deg);
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .hero {
        min-height: 600px;
    }

    .hero-image-placeholder {
        min-height: 600px;

        justify-content: flex-end;

        align-items: center;

        padding:
            0 20px 55px;

        font-size: 32px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(7,90,50,0.45),
                rgba(7,90,50,0.97)
            );
    }

    .hero-container {
        min-height: 600px;

        align-items: flex-end;

        padding-bottom: 70px;
    }

    .hero h1 {
        font-size:
            clamp(
                42px,
                12vw,
                58px
            );
    }

    .hero p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-scroll {
        display: none;
    }

    .rock-art-hero {
        right: 5px;
        top: 18%;

        opacity: 0.45;
    }


    /* ------------------------------------------------------
       SEÇÕES
    ------------------------------------------------------ */

    .section {
        padding: 62px 0;
    }


    /* ------------------------------------------------------
       INTRODUÇÃO
    ------------------------------------------------------ */

    .intro-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    /* ------------------------------------------------------
       HISTÓRIA
    ------------------------------------------------------ */

    .history-preview {
        padding: 62px 0;
    }

    .history-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    /* ------------------------------------------------------
       IMPACTO
    ------------------------------------------------------ */

    .impact-section {
        padding: 58px 0;
    }

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

    .impact-item {
        min-height: 125px;

        border-right:
            1px solid rgba(7,90,50,0.18);

        border-bottom:
            1px solid rgba(7,90,50,0.18);
    }

    .impact-item:nth-child(2n) {
        border-right: none;
    }

    .impact-item:nth-child(3),
    .impact-item:nth-child(4) {
        border-bottom: none;
    }

    .impact-item strong {
        font-size: 34px;
    }


    /* ------------------------------------------------------
       BRUNDTLAND
    ------------------------------------------------------ */

    .brundtland-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .portrait-placeholder {
        max-width: 100%;
    }


    /* ------------------------------------------------------
       PROJETOS
    ------------------------------------------------------ */

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


    /* ------------------------------------------------------
       SERRA DA CAPIVARA
    ------------------------------------------------------ */

    .capivara-section {
        min-height: 390px;
    }

    .capivara-placeholder {
        min-height: 390px;

        font-size: 34px;
    }


    /* ------------------------------------------------------
       ODS
    ------------------------------------------------------ */

    .ods-carousel {
        padding:
            8px 15px 20px;
    }

    .ods-carousel::before,
    .ods-carousel::after {
        width: 25px;
    }

    .ods-track {
        gap: 9px;

        animation-duration:
            48s;
    }

    .ods-slide {
        width: 115px;
        height: 115px;

        flex-basis: 115px;

        border-radius: 8px;
    }


    /* ------------------------------------------------------
       GALERIA
    ------------------------------------------------------ */

    .gallery-grid {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            165px 165px 165px;
    }

    .gallery-large {
        grid-row: span 2;
    }


    /* ------------------------------------------------------
       DOAÇÃO
    ------------------------------------------------------ */

    .donation-cta {
        padding: 65px 0;
    }

    .donation-content h2 {
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );
    }

    .donation-cta .btn-light {
        width: 100%;
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer {
        padding-top: 52px;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .footer-bottom {
        min-height: auto;

        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;
    }
}


/* ==========================================================
   29. MOBILE PEQUENO
========================================================== */

@media (max-width: 430px) {

    .site-brand .logo-text {
        display: none;
    }

    .probrasil-logo {
        width: 78px;
    }

    .probrasil-logo img {
        max-width: 78px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero p {
        font-size: 13px;
    }

    .impact-item strong {
        font-size: 29px;
    }

    .impact-item span {
        font-size: 8px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(5, 165px);
    }

    .gallery-large {
        grid-row: span 1;
    }

    .ods-slide {
        width: 105px;
        height: 105px;

        flex-basis: 105px;
    }
}


/* ==========================================================
   FIM DO STYLE.CSS
========================================================== */



/* ==========================================================
   30. CORREÇÕES DE CONSOLIDAÇÃO
   Este bloco reúne os componentes que já existem no HTML
   e garante que nenhuma regra fique sem estilo.
========================================================== */


/* ----------------------------------------------------------
   MENU DE PROJETOS
---------------------------------------------------------- */

.header,
.header-container,
.nav,
.nav-dropdown {
    overflow: visible;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-dropdown-toggle::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle::before,
.nav-dropdown:focus-within .nav-dropdown-toggle::before {
    transform: rotate(225deg) translate(-1px, -1px);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    transform: translate(-50%, 10px);

    width: 310px;
    padding: 10px;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,.97);
    border: 1px solid rgba(7,90,50,.10);
    border-radius: 14px;

    box-shadow: 0 18px 45px rgba(0,0,0,.13);
    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.nav-dropdown-menu a {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 10px 12px;

    border-radius: 9px;

    color: var(--gray-800);

    font-size: 12px;
    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nav-dropdown-menu a:hover {
    background: rgba(7,90,50,.07);
    color: var(--green-deep);
    transform: translateX(3px);
}

.nav-dropdown-menu a small {
    color: var(--gray-500);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}


/* ----------------------------------------------------------
   CARROSSEL — NOSSO TRABALHO
---------------------------------------------------------- */

.project-story-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--off-white);
}

.project-story-track {
    position: relative;
    width: 100%;
    min-height: 510px;
}

.project-story-slide {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);

    width: 100%;
    min-height: 510px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(25px);

    transition:
        opacity .5s ease,
        transform .5s ease,
        visibility .5s ease;
}

.project-story-slide.active {
    position: relative;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}

.project-story-image {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 510px;

    overflow: hidden;

    display: flex;
    align-items: stretch;

    background:
        linear-gradient(
            135deg,
            var(--green-deep),
            var(--green)
        );
}

.project-story-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 510px;

    object-fit: cover;
    object-position: center;

    font-size: 0;
    color: transparent;

    transition: transform .8s ease;
}

.project-story-slide.active .project-story-image img {
    animation: storyImageEnter .8s ease both;
}

.project-story-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.04),
            transparent 55%,
            rgba(255,196,0,.08)
        );
}

.project-story-content {
    position: relative;
    z-index: 2;

    min-width: 0;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 55px clamp(30px, 5vw, 75px);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(255,250,226,.96)
        );
}

.project-story-content .section-label {
    flex-shrink: 0;
}

.project-story-content h2 {
    max-width: 620px;

    margin: 12px 0 20px;

    color: var(--green-deep);

    font-family: var(--font-title);

    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -.025em;

    overflow-wrap: break-word;
}

.project-story-content h2 span {
    display: block;
    color: var(--yellow-dark);
}

.project-story-content p {
    max-width: 600px;

    margin-bottom: 22px;

    color: var(--gray-600);

    font-size: 14px;
    line-height: 1.7;

    overflow-wrap: break-word;
}

.project-story-content .text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    align-self: flex-start;

    color: var(--green);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .16em;
    text-transform: uppercase;
}

.project-story-content .text-link span {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--yellow);
    color: var(--green-deep);

    font-size: 15px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.project-story-content .text-link:hover span {
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(255,196,0,.3);
}

.project-story-controls {
    position: absolute;

    right: 4vw;
    bottom: 24px;

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 8px;
}

.project-story-arrow {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(7,90,50,.15);
    border-radius: 50%;

    background: rgba(255,255,255,.92);
    color: var(--green-deep);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    box-shadow: var(--shadow-small);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.project-story-arrow:hover {
    background: var(--yellow);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.project-story-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-story-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(7,90,50,.22);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.project-story-dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--yellow);
}


/* ----------------------------------------------------------
   FOTO DA GRO
---------------------------------------------------------- */

.gro-photo {
    width: 100%;
    max-width: 500px;
}

.gro-photo img {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 20%;
}

.gro-photo::after {
    z-index: 2;
}

.gro-photo .portrait-frame {
    display: none;
}

.brundtland-content {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.brundtland-content h2,
.brundtland-content p {
    max-width: 100%;
    overflow-wrap: break-word;
}


/* ----------------------------------------------------------
   CONTADORES
---------------------------------------------------------- */

.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------
   REDES SOCIAIS DO RODAPÉ
---------------------------------------------------------- */

.footer-social {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 20px;
}

.footer-social a {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;

    background: rgba(255,255,255,.06);
    color: var(--white);

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);

    background: var(--yellow);
    border-color: var(--yellow);

    color: var(--green-deep);
}

.footer-social svg {
    width: 21px;
    height: 21px;

    display: block;

    flex: 0 0 21px;
}


/* ----------------------------------------------------------
   ÁREA DE DOAÇÃO DO RODAPÉ
---------------------------------------------------------- */

.footer-donate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-donate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 28px;

    border-radius: var(--radius-pill);

    background: var(--yellow);
    color: var(--green-deep);

    font-size: 11px;
    font-weight: 900;

    box-shadow: 0 8px 22px rgba(255,196,0,.20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.footer-donate-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255,196,0,.30);
}


/* ----------------------------------------------------------
   CONTATOS DO RODAPÉ
---------------------------------------------------------- */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    color: rgba(255,255,255,.62);

    font-size: 11px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   ANIMAÇÃO DO CARROSSEL
---------------------------------------------------------- */

@keyframes storyImageEnter {
    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1);
    }
}


/* ----------------------------------------------------------
   RESPONSIVIDADE DO QUE FOI ADICIONADO
---------------------------------------------------------- */

@media (max-width: 1050px) {

    .nav-dropdown-menu {
        width: 280px;
    }

    .project-story-slide {
        grid-template-columns:
            minmax(0, 55%)
            minmax(0, 45%);
    }

    .project-story-content {
        padding-left: 40px;
        padding-right: 40px;
    }

}

@media (max-width: 760px) {

    .nav-dropdown {
        display: block;
    }

    .nav-dropdown-menu {
        position: static;

        width: 100%;

        margin: 3px 0 8px;

        padding: 5px;

        transform: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        display: none;

        box-shadow: none;
        border-radius: 9px;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: flex;
        transform: none;
    }

    .project-story-track {
        min-height: 690px;
    }

    .project-story-slide {
        grid-template-columns: 1fr;
        min-height: 690px;
    }

    .project-story-image {
        min-height: 320px;
        height: 320px;
    }

    .project-story-image img {
        min-height: 320px;
    }

    .project-story-content {
        min-height: 370px;

        padding:
            35px
            24px
            88px;
    }

    .project-story-content h2 {
        font-size: 40px;
    }

    .project-story-controls {
        left: 24px;
        right: auto;
        bottom: 20px;
    }

    .gro-photo {
        max-width: 100%;
    }

    .footer-social {
        margin-top: 16px;
    }

}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .project-story-slide,
    .project-story-image img,
    .nav-dropdown-menu,
    .footer-social a,
    .project-story-arrow {
        transition: none !important;
        animation: none !important;
    }

}


/* ==========================================================
   31. CABEÇALHO — VERSÃO AMPLIADA
   Mantém a alteração visual anterior:
   logo, nome institucional, menu e doação maiores.
========================================================== */

.header-container {
    min-height: var(--header-height);
}

.site-brand {
    min-width: 0;
}

.probrasil-logo {
    flex: 0 0 145px;
}

.probrasil-logo img {
    max-width: 145px;
    max-height: 68px;
}

.logo-text {
    min-width: 0;
}

.logo-text strong {
    white-space: nowrap;
}

.nav {
    flex-shrink: 1;
    min-width: 0;
}

.nav-link {
    white-space: nowrap;
}

.nav-donation {
    flex-shrink: 0;
    white-space: nowrap;
}


/* Cabeçalho ligeiramente mais compacto antes do mobile,
   evitando quebra do menu em notebooks menores. */
@media (max-width: 1100px) {

    .header-container {
        gap: 16px;
    }

    .probrasil-logo {
        flex-basis: 130px;
        width: 130px;
    }

    .probrasil-logo img {
        max-width: 130px;
    }

    .logo-text strong {
        font-size: 13px;
    }

    .nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 11px;
    }

    .nav-donation {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* ==========================================================
   PALETA OFICIAL — AJUSTE SOMENTE DE CORES
   IMPORTANTE: nenhum layout, imagem, espaçamento ou animação
   é redefinido neste bloco.
========================================================== */

:root {
    --green: #315B45;
    --green-light: #66815C;
    --green-dark: #315B45;
    --green-deep: #315B45;

    --yellow: #B85F3D;
    --yellow-light: #B85F3D;
    --yellow-soft: #E6D5B8;
    --yellow-dark: #B85F3D;

    --earth-dark: #315B45;
    --earth-deep: #26342E;
    --earth-mid: #66815C;
    --ochre: #B85F3D;
}

/* Verde fica concentrado nos elementos institucionais. */
.hero-image-placeholder {
    background:
        linear-gradient(
            120deg,
            #315B45 0%,
            #315B45 38%,
            #B85F3D 76%,
            #E6D5B8 100%
        );
}

/* Destaques terrosos sem alterar a estrutura do texto. */
.brundtland-content h2 span {
    color: var(--earth-mid);
}

.project-category {
    color: var(--earth-mid);
}

.text-link:hover {
    color: var(--earth-dark);
}

.value-number {
    color: var(--ochre);
}

.project-card:nth-child(2) .project-image {
    background: var(--ochre);
    color: rgba(255,255,255,.78);
}

.project-card:nth-child(3) .project-image {
    background: var(--earth-dark);
}

.gallery-item {
    background: var(--earth-dark);
}

.gallery-item:nth-child(3) {
    background: var(--earth-mid);
}

.gallery-item:nth-child(4) {
    background: var(--ochre);
}

/* Serra: mantém a imagem hero2 e o degradê verde/amarelo,
   sem a camada marrom pesada. */
.capivara-placeholder {
    background-color: #315B45;
    background-image:
        linear-gradient(
            120deg,
            rgba(7,90,50,.35) 0%,
            rgba(21,148,71,.22) 42%,
            rgba(233,195,75,.16) 78%,
            rgba(244,215,108,.10) 100%
        ),
        url("../img/site/hero2.svg");
    background-repeat: no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
}

.capivara-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7,90,50,.28),
            rgba(21,148,71,.16) 45%,
            rgba(233,195,75,.10) 82%,
            rgba(244,215,108,.06) 100%
        );
}

/* Carrossel: mantém a textura rupestre, sem alterar o layout. */
.project-story-section {
    background-color: #E6D5B8;
    background-image: url("../img/site/fundo-rupestre.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.project-story-content {
    background:
        linear-gradient(
            135deg,
            rgba(248,238,214,.94),
            rgba(255,249,229,.91)
        );
}

/* Doação: amarelo continua protagonista. */
.donation-cta .btn-light {
    background: var(--earth-dark);
    color: var(--white);
}

.donation-cta .btn-light:hover {
    background: var(--earth-deep);
}

/* ==========================================================
   GARANTIA VISUAL DAS IMAGENS DO CARROSSEL
   Estas regras preservam o tamanho mesmo se uma imagem
   estiver temporariamente indisponível.
========================================================== */

.project-story-track {
    position: relative;
    width: 100%;
    min-height: 510px;
}

.project-story-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    width: 100%;
    min-height: 510px;
}

.project-story-image {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 510px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.project-story-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center;
}

/* Hero principal continua usando a arte criada. */
.hero-image-placeholder {
    background-color: #315B45;
    background-image:
        linear-gradient(
            90deg,
            rgba(7,90,50,.38) 0%,
            rgba(7,90,50,.16) 45%,
            rgba(7,90,50,.05) 100%
        ),
        url("../img/site/hero-principal.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

@media (max-width: 760px) {
    .hero-image-placeholder {
        background-position: center center;
        background-size: cover;
    }
}


/* ==========================================================
   AJUSTE VISUAL — HERO PRINCIPAL
   Mantém TODA a estrutura e a arte hero-principal.svg.
   Apenas troca o banho verde do HERO por tons terrosos.
   O verde institucional continua reservado para o início/fim.
   ========================================================== */

.hero-image-placeholder {
    background-color: #315B45;
    background-image:
        linear-gradient(
            90deg,
            rgba(56,33,23,.86) 0%,
            rgba(74,44,32,.72) 38%,
            rgba(112,67,45,.48) 68%,
            rgba(201,138,50,.24) 100%
        ),
        url("../img/site/hero-principal.svg");

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

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(56,33,23,.54) 0%,
            rgba(74,44,32,.42) 38%,
            rgba(112,67,45,.24) 72%,
            rgba(201,138,50,.08) 100%
        );
}

/* No celular, mantém o mesmo tratamento terroso sem alterar layout. */
@media (max-width: 760px) {
    .hero-image-placeholder {
        background-color: #315B45;
        background-image:
            linear-gradient(
                180deg,
                rgba(56,33,23,.68),
                rgba(74,44,32,.78)
            ),
            url("../img/site/hero-principal.svg");

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

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(56,33,23,.24),
                rgba(56,33,23,.58)
            );
    }
}

/* ==========================================================
   PAINÉIS LATERAIS — TESTE 02
   Faixas estreitas, coladas às laterais, acompanhando
   toda a área de conteúdo entre cabeçalho e rodapé.
   Não alteram o fluxo nem a largura do conteúdo.
========================================================== */

@media (min-width: 1200px) {

    body::before,
    body::after {
        content: "";
        position: fixed;

        /* As imagens começam no topo da viewport e passam
           por trás do cabeçalho. O cabeçalho continua acima delas. */
        top: 0;
        bottom: 0;

        width: 34px;

        z-index: 20;
        pointer-events: none;

        border-radius: 0;

        background-repeat: no-repeat;
        background-size: cover;

        box-shadow:
            0 0 18px rgba(56, 33, 23, 0.14);

        opacity: 0.96;
    }

    body::before {
        left: 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(56,33,23,.05),
                rgba(56,33,23,.20)
            ),
            url("../img/lateralsite.jpg");

        background-position: center center;
    }

    body::after {
        right: 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(56,33,23,.06),
                rgba(56,33,23,.22)
            ),
            url("../img/lateralsite.jpg");

        background-position: center center;
    }

    /* O cabeçalho fica acima das faixas. */
    header,
    .header,
    .site-header {
        position: relative;
        z-index: 40;
    }

    /* O rodapé fica acima das faixas, fazendo-as terminar
       exatamente na sua borda superior. */
    footer,
    .footer {
        position: relative;
        z-index: 40;
    }
}

@media (max-width: 1199px) {
    body::before,
    body::after {
        display: none;
    }
}


/* ==========================================================
   PRESERVAR PADRÃO EXISTENTE — NOSSA TRAJETÓRIA
   IMPORTANTE: os painéis laterais NÃO alteram esta seção.
   Apenas devolve o marrom já definido anteriormente.
========================================================== */

.history-preview {
    background: #315B45 !important;
    color: #FFFFFF !important;
}

.history-preview .history-title h2 {
    color: #FFFFFF !important;
}

.history-preview .history-year {
    color: #B85F3D !important;
}

.history-preview .history-item h3 {
    color: #FFFFFF !important;
}

.history-preview .history-item p {
    color: rgba(255,255,255,0.75) !important;
}


/* ==========================================================
   CABEÇALHO — AJUSTE SOLICITADO
   Remove o espaço branco acima do menu e transforma o
   cabeçalho principal na mesma cor verde do rodapé.
   O restante do layout permanece intacto.
========================================================== */

:root {
    --topbar-height: 0px;
}

body {
    padding-top: var(--header-height);
}

/* A antiga barra superior não ocupa mais espaço. */
.topbar {
    display: none !important;
}

/* Menu principal encostado no topo da página. */
.header {
    top: 0 !important;
    min-height: var(--header-height);
    background: var(--green-deep) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

/* Mantém a altura original do menu. */
.header-container {
    min-height: var(--header-height);
}

/* Links do menu em branco. */
.nav-link {
    color: #FFFFFF !important;
}

.nav-link:hover,
.nav-link.active {
    color: #FFFFFF !important;
}

.nav-link::after {
    background: var(--yellow) !important;
}

/* Identidade textual ao lado do logo em branco. */
.site-brand .logo-text strong {
    color: #FFFFFF !important;
}

.site-brand .logo-text small {
    color: rgba(255,255,255,.68) !important;
}

/* Seta do menu Projetos acompanha o texto branco. */
.nav-dropdown-toggle::before {
    border-color: currentColor !important;
}

/* Botão Doações continua amarelo. */
.nav-donation {
    background: var(--yellow) !important;
    color: var(--green-deep) !important;
}

/* Mobile: mesma identidade, sem criar espaço superior. */
@media (max-width: 760px) {
    :root {
        --topbar-height: 0px;
    }

    body {
        padding-top: var(--header-height);
    }

    .header {
        top: 0 !important;
        min-height: var(--header-height);
    }
}


/* ==========================================================
   REVISÃO FINAL — CORREÇÕES SEM ALTERAR O LAYOUT EXISTENTE
========================================================== */

/* 1) O menu voltou a ser FIXO.
      O teste dos painéis havia sobrescrito position:fixed
      com position:relative e isso criou o espaço branco acima. */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

/* O espaço reservado pelo body corresponde somente à altura
   real do menu, que agora começa no topo. */
body {
    padding-top: var(--header-height) !important;
}

/* A barra antiga permanece desativada. */
.topbar {
    display: none !important;
}

/* 2) Remove definitivamente os textos que eram apenas
      placeholders HTML. Eles NÃO fazem parte das imagens. */
.hero-image-placeholder > span,
.hero-image-placeholder > small,
.capivara-placeholder > span {
    display: none !important;
}

/* 3) Mantém as imagens ocupando integralmente suas seções,
      sem criar espaço extra quando o placeholder é ocultado. */
.hero-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 610px;
}

.capivara-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* 4) Mantém o cabeçalho verde e os textos brancos. */
.header {
    background: var(--green-deep) !important;
}

.nav-link,
.nav-link:hover,
.nav-link.active {
    color: #FFFFFF !important;
}

.nav-link::after {
    background: var(--yellow) !important;
}

/* 5) As faixas laterais continuam passando por trás do menu,
      mas NÃO podem alterar o posicionamento dele. */
@media (min-width: 1200px) {
    body::before,
    body::after {
        top: 0;
        bottom: 0;
        z-index: 20;
    }
}

/* 6) Nossa Trajetória continua no marrom definido anteriormente. */
.history-preview {
    background: #315B45 !important;
    color: #FFFFFF !important;
}

/* 7) Hero principal — imagem + banho marrom preservados. */
.hero-image-placeholder {
    background-color: #315B45 !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(56,33,23,.86) 0%,
            rgba(74,44,32,.72) 38%,
            rgba(112,67,45,.48) 68%,
            rgba(201,138,50,.24) 100%
        ),
        url("../img/site/hero-principal.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* 8) Serra — hero2 + banho marrom preservados. */
.capivara-placeholder {
    background-color: #315B45 !important;
    background-image:
        linear-gradient(
            120deg,
            rgba(56,33,23,.68) 0%,
            rgba(74,44,32,.52) 42%,
            rgba(112,67,45,.30) 78%,
            rgba(201,138,50,.12) 100%
        ),
        url("../img/site/hero2.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.capivara-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(56,33,23,.24),
            rgba(74,44,32,.12) 48%,
            rgba(112,67,45,.04) 100%
        ) !important;
}

/* 9) Não deixar nenhuma regra do teste lateral transformar
      o header em elemento de fluxo. */
header,
.header,
.site-header {
    position: fixed !important;
}


/* ==========================================================
   HERO — AJUSTE DE POSIÇÃO DO CONTEÚDO
   Reduz o espaço vazio acima sem alterar a altura da seção,
   imagem, fundo, layout ou tamanho dos elementos.
========================================================== */

@media (min-width: 761px) {
    .hero-container {
        align-items: center;
    }

    .hero-content {
        transform: translateY(-68px);
    }
}

@media (max-width: 760px) {
    .hero-content {
        transform: translateY(-28px);
    }
}


/* ==========================================================
   REVISÃO — ESPAÇO SUPERIOR DAS SEÇÕES
   O problema está se repetindo nos blocos: o conteúdo começa
   muito abaixo do início visual da seção. Ajustamos apenas a
   posição vertical dos conteúdos, sem alterar altura, imagens,
   cores ou estrutura.
========================================================== */

@media (min-width: 761px) {

    /* Remove margens colapsadas que podem criar espaço externo
       no começo das seções. */
    main > section:first-child,
    main > section {
        margin-top: 0;
    }

    /* Os títulos/conteúdos passam a respeitar a área interna
       da própria seção, sem um deslocamento extra herdado. */
    .section-container,
    .section-inner,
    .hero-container {
        box-sizing: border-box;
    }

    /* O Hero já tinha um ajuste próprio; mantém a correção,
       mas sem criar espaço adicional na seção. */
    .hero-content {
        margin-top: 0;
    }

    /* Blocos institucionais: neutraliza apenas margens
       superiores automáticas dos primeiros elementos. */
    section > .container > :first-child,
    section > .section-container > :first-child,
    section > .section-inner > :first-child {
        margin-top: 0;
    }
}

/* Evita o mesmo efeito em telas menores. */
@media (max-width: 760px) {
    main > section {
        margin-top: 0;
    }

    section > .container > :first-child,
    section > .section-container > :first-child,
    section > .section-inner > :first-child {
        margin-top: 0;
    }
}


/* ==========================================================
   CORREÇÃO REAL — ESPAÇO VAZIO NO TOPO DOS BLOCOS
   O espaçamento vem do padding vertical das próprias seções.
   Reduzimos SOMENTE o padding superior. O inferior continua
   preservado, assim o layout não é comprimido.
========================================================== */

@media (min-width: 761px) {

    /* Seções institucionais que usam .section */
    .section {
        padding-top: 28px !important;
    }

    /* Impacto */
    .impact-section {
        padding-top: 28px !important;
    }

    /* Nossa trajetória */
    .history-preview {
        padding-top: 28px !important;
    }

    /* Seções que possuem espaçamento próprio */
    .brundtland-section,
    .projects-section,
    .ods-section,
    .gallery-section {
        padding-top: 28px !important;
    }

    /* Hero: reduz somente o espaço acima do conteúdo.
       A imagem e a altura do Hero permanecem iguais. */
    .hero-content {
        transform: translateY(-110px) !important;
    }
}

@media (max-width: 760px) {

    .section {
        padding-top: 24px !important;
    }

    .impact-section {
        padding-top: 24px !important;
    }

    .history-preview {
        padding-top: 24px !important;
    }

    .brundtland-section,
    .projects-section,
    .ods-section,
    .gallery-section {
        padding-top: 24px !important;
    }

    .hero-content {
        transform: translateY(-45px) !important;
    }
}


/* ==========================================================
   AJUSTE FINAL — MESMA CORREÇÃO NOS DOIS LADOS
   O ajuste anterior reduziu somente o padding superior e
   deixou o padding inferior original. Isso criou o vazio
   embaixo. Agora os dois lados recebem o mesmo espaçamento.
========================================================== */

@media (min-width: 761px) {
    .section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .history-preview {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .impact-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    .brundtland-section,
    .projects-section,
    .ods-section,
    .gallery-section {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}

@media (max-width: 760px) {
    .section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .history-preview {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .impact-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .brundtland-section,
    .projects-section,
    .ods-section,
    .gallery-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}




/* ==========================================================
   PÁGINA — GRO HARLEM BRUNDTLAND
   Componentes específicos da página.
   Não altera os componentes globais da Home.
========================================================== */

.page-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--earth-dark);
    color: var(--white);
}

.page-hero-container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), var(--container));
    min-height: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: center;
    gap: 55px;
}

.page-hero-content {
    max-width: 680px;
    padding: 65px 0;
}

.page-hero-content .section-label {
    color: var(--yellow);
}

.page-hero-content h1 {
    margin: 12px 0 22px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(46px, 5.7vw, 72px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.page-hero-content p {
    max-width: 600px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.75;
}

.page-hero-image {
    position: relative;
    align-self: stretch;
    min-height: 500px;
    overflow: hidden;
}

.page-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(74,44,32,.75),
        rgba(74,44,32,.08) 60%,
        transparent
    );
    pointer-events: none;
}

.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.brundtland-page-hero {
    background:
        linear-gradient(110deg, var(--earth-deep), var(--earth-dark) 52%, var(--earth-mid));
}

.brundtland-page-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: -220px;
    border: 75px solid rgba(255,196,0,.08);
    border-radius: 50%;
    pointer-events: none;
}

.brundtland-name {
    background: var(--off-white);
}

.brundtland-name-grid {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 80px;
    align-items: start;
}

.brundtland-name-title h2,
.brundtland-biography-title h2,
.brundtland-legacy h2 {
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.brundtland-name-text {
    max-width: 680px;
}

.brundtland-name-text p {
    margin-bottom: 18px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.8;
}

.brundtland-name-text p:last-child {
    margin-bottom: 0;
}

.brundtland-gallery {
    padding: 82px 0 90px;
    background: var(--earth-dark);
    color: var(--white);
    overflow: hidden;
}

.brundtland-gallery .section-heading {
    margin-bottom: 35px;
}

.brundtland-gallery .section-heading h2 {
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(38px, 4.5vw, 55px);
    font-weight: 500;
    line-height: 1.05;
}

.brundtland-carousel {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--earth-deep);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.brundtland-carousel-track {
    position: relative;
    width: 100%;
    height: 530px;
}

.brundtland-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.025);
    transition: opacity .55s ease, transform .7s ease, visibility .55s ease;
}

.brundtland-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

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

.brundtland-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.03) 40%,
        rgba(0,0,0,.72) 100%
    );
}

.brundtland-slide figcaption {
    position: absolute;
    z-index: 2;
    left: 34px;
    right: 100px;
    bottom: 30px;
    color: var(--white);
    font-size: 13px;
    line-height: 1.55;
}

.brundtland-carousel-button {
    position: absolute;
    z-index: 5;
    top: 50%;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    background: rgba(56,33,23,.58);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.brundtland-carousel-button:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--green-deep);
}

.brundtland-carousel-button.prev {
    left: 22px;
}

.brundtland-carousel-button.next {
    right: 22px;
}

.brundtland-carousel-dots {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
}

.brundtland-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.brundtland-carousel-dots button.is-active {
    width: 25px;
    border-radius: 10px;
    background: var(--yellow);
}

.brundtland-biography {
    background: var(--yellow-soft);
}

.brundtland-biography-grid {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
    gap: 65px;
    align-items: start;
}

.brundtland-biography-title {
    position: sticky;
    top: calc(var(--topbar-height) + var(--header-height) + 25px);
}

.brundtland-biography-title h2 {
    margin-bottom: 20px;
}

.biography-intro {
    max-width: 390px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.75;
}

.brundtland-biography-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(74,44,32,.13);
    border-radius: var(--radius);
    background: #E6D5B8;
    box-shadow: 0 18px 50px rgba(48,31,23,.08);
}

.biography-panel-header {
    padding: 27px 32px 23px;
    border-bottom: 1px solid rgba(74,44,32,.12);
    background: linear-gradient(135deg, rgba(255,196,0,.18), rgba(255,196,0,0));
}

.biography-panel-header span {
    display: block;
    margin-bottom: 8px;
    color: var(--ochre);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.biography-panel-header strong {
    display: block;
    color: var(--earth-dark);
    font-family: var(--font-title);
    font-size: 27px;
    line-height: 1.12;
    font-weight: 600;
}

.biography-panel-header small {
    display: block;
    margin-top: 8px;
    color: var(--gray-600);
    font-size: 11px;
}

.brundtland-biography-text {
    height: 410px;
    overflow-y: auto;
    padding: 29px 34px 42px;
    scrollbar-width: thin;
    scrollbar-color: var(--ochre) transparent;
}

.brundtland-biography-text::-webkit-scrollbar {
    width: 7px;
}

.brundtland-biography-text::-webkit-scrollbar-track {
    background: transparent;
}

.brundtland-biography-text::-webkit-scrollbar-thumb {
    background: var(--ochre);
    border-radius: 20px;
}

.brundtland-biography-text p {
    margin: 0 0 22px;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.8;
}

.brundtland-biography-text p:last-child {
    margin-bottom: 0;
}

.biography-scroll-hint {
    position: absolute;
    right: 18px;
    bottom: 13px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(74,44,32,.08);
    border-radius: 20px;
    background: rgba(243,234,215,.94);
    color: var(--earth-mid);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

.biography-scroll-hint span {
    width: 7px;
    height: 12px;
    position: relative;
    border: 1px solid var(--ochre);
    border-radius: 5px;
}

.biography-scroll-hint span::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 2px;
    height: 4px;
    border-radius: 2px;
    background: var(--ochre);
}

.brundtland-timeline {
    padding: 82px 0 90px;
    background: var(--green-deep);
    color: var(--white);
}

.brundtland-timeline .section-heading h2 {
    max-width: 760px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(38px, 4.5vw, 55px);
    font-weight: 500;
    line-height: 1.05;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 42px;
    border-top: 1px solid rgba(255,255,255,.17);
    border-left: 1px solid rgba(255,255,255,.10);
}

.timeline-item {
    min-height: 205px;
    padding: 27px 28px;
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.17);
}

.timeline-year {
    display: block;
    margin-bottom: 10px;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 23px;
}

.timeline-item h3 {
    margin-bottom: 7px;
    color: var(--white);
    font-size: 18px;
}

.timeline-item p {
    max-width: 300px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.65;
}

.brundtland-legacy {
    background: var(--off-white);
}

.brundtland-legacy-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
    gap: 80px;
    align-items: start;
}

.brundtland-legacy h2 {
    max-width: 650px;
}

.brundtland-legacy-grid > div:last-child {
    padding-top: 8px;
}

.brundtland-legacy-grid p {
    margin-bottom: 17px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.8;
}

.about-cta {
    position: relative;
    overflow: hidden;
    padding: 78px 0;
    background: var(--yellow);
    color: var(--green-deep);
}

.about-cta::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    top: -250px;
    border: 70px solid rgba(7,90,50,.08);
    border-radius: 50%;
    pointer-events: none;
}

.about-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.about-cta-content h2 {
    margin: 10px 0 14px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
}

.about-cta-content p {
    max-width: 620px;
    margin-bottom: 25px;
    color: rgba(7,90,50,.72);
    font-size: 14px;
}

.about-cta .btn-primary {
    background: var(--green-deep);
    color: var(--white);
}

.about-cta .btn-primary:hover {
    background: var(--green);
}

@media (max-width: 1050px) {
    .page-hero-container {
        grid-template-columns: minmax(0,1fr) minmax(300px,.8fr);
        gap: 35px;
    }

    .brundtland-name-grid,
    .brundtland-biography-grid,
    .brundtland-legacy-grid {
        gap: 45px;
    }

    .timeline-item {
        padding: 24px 20px;
    }
}

@media (max-width: 760px) {
    .page-hero {
        min-height: auto;
    }

    .page-hero-container {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .page-hero-content {
        padding: 58px 0 38px;
    }

    .page-hero-content h1 {
        font-size: clamp(40px, 12vw, 57px);
    }

    .page-hero-image {
        min-height: 340px;
        max-height: 420px;
    }

    .brundtland-name-grid,
    .brundtland-biography-grid,
    .brundtland-legacy-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .brundtland-biography-title {
        position: static;
    }

    .brundtland-gallery {
        padding: 62px 0 70px;
    }

    .brundtland-carousel,
    .brundtland-carousel-track {
        min-height: 390px;
        height: 390px;
    }

    .brundtland-slide figcaption {
        left: 20px;
        right: 70px;
        bottom: 22px;
        font-size: 12px;
    }

    .brundtland-carousel-button {
        width: 40px;
        height: 40px;
    }

    .brundtland-carousel-button.prev {
        left: 12px;
    }

    .brundtland-carousel-button.next {
        right: 12px;
    }

    .brundtland-biography-text {
        height: 360px;
        padding: 24px 22px 34px;
    }

    .biography-panel-header {
        padding: 22px;
    }

    .biography-panel-header strong {
        font-size: 23px;
    }

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

    .timeline-item {
        min-height: auto;
    }

    .about-cta {
        padding: 62px 0;
    }
}

@media (max-width: 430px) {
    .page-hero-content {
        padding-top: 48px;
    }

    .brundtland-carousel,
    .brundtland-carousel-track {
        min-height: 320px;
        height: 320px;
    }

    .brundtland-slide figcaption {
        font-size: 11px;
    }
}




/* ==========================================================
   PROJETOS — COMPONENTES ESPECÍFICOS
   A base global permanece a mesma da Home.
========================================================== */

.projects-hero {
    position: relative;
    overflow: hidden;
    min-height: 455px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(110deg, rgba(74,44,32,.98), rgba(112,67,45,.93) 55%, rgba(201,138,50,.80)),
        url("../img/projetos/atividade-01.jpg") center/cover no-repeat;
    color: var(--white);
}

.projects-hero::after {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: -210px;
    top: -260px;
    border: 70px solid rgba(255,196,0,.10);
    border-radius: 50%;
    pointer-events: none;
}

.projects-hero .container {
    position: relative;
    z-index: 2;
}

.projects-hero-content {
    max-width: 760px;
    padding: 78px 0;
}

.projects-hero .section-label {
    color: var(--yellow);
}

.projects-hero h1 {
    margin: 12px 0 18px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.projects-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.84);
    font-size: 15px;
    line-height: 1.75;
}

.projects-intro {
    background: var(--off-white);
}

.projects-intro-grid {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    gap: 85px;
    align-items: start;
}

.projects-intro h2 {
    max-width: 560px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px, 4.5vw, 58px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.projects-intro-copy {
    max-width: 680px;
}

.projects-intro-copy p {
    margin-bottom: 18px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.8;
}

.projects-grid-section {
    padding-top: 20px;
    background: var(--off-white);
}

.projects-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 28px;
}

.project-card {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid rgba(20,23,21,.08);
    box-shadow: 0 15px 45px rgba(35,29,24,.07);
}

.project-card.featured {
    grid-column: span 2;
    min-height: 520px;
}

.project-card-image {
    position: relative;
    height: 285px;
    overflow: hidden;
    background: var(--earth-dark);
}

.project-card.featured .project-card-image {
    height: 350px;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.035);
}

.project-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(56,33,23,.48));
    pointer-events: none;
}

.project-card-number {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 18px;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 30px;
}

.project-card-content {
    padding: 31px 32px 34px;
}

.project-card-content .section-label {
    color: var(--ochre);
}

.project-card-content h3 {
    margin: 9px 0 13px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.project-card-content p {
    max-width: 680px;
    margin-bottom: 22px;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.75;
}

.project-card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.project-card-link::after {
    content: "→";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--yellow);
    font-size: 14px;
    letter-spacing: 0;
}

.project-card.green-accent .project-card-content {
    border-top: 5px solid var(--green);
}

.project-card.earth-accent .project-card-content {
    border-top: 5px solid var(--earth-mid);
}

.project-card.yellow-accent .project-card-content {
    border-top: 5px solid var(--yellow);
}

.project-impact {
    padding: 82px 0 90px;
    background: var(--earth-dark);
    color: var(--white);
}

.project-impact-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.project-impact-heading h2 {
    margin-top: 9px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(40px, 4.8vw, 58px);
    font-weight: 500;
    line-height: 1.05;
}

.project-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.18);
    border-left: 1px solid rgba(255,255,255,.10);
}

.project-impact-item {
    min-height: 210px;
    padding: 28px;
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.project-impact-item span {
    display: block;
    margin-bottom: 13px;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 28px;
}

.project-impact-item h3 {
    margin-bottom: 8px;
    color: var(--white);
    font-size: 18px;
}

.project-impact-item p {
    max-width: 310px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.65;
}

.projects-cta {
    padding: 74px 0;
    background: var(--yellow);
}

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

.projects-cta h2 {
    max-width: 720px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(38px, 4.7vw, 56px);
    font-weight: 500;
    line-height: 1.05;
}

.projects-cta .btn {
    flex: 0 0 auto;
    background: var(--green-deep);
    color: var(--white);
}

.projects-cta .btn:hover {
    background: var(--earth-dark);
}

@media (max-width: 820px) {
    .projects-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .projects-list {
        grid-template-columns: 1fr;
    }

    .project-card.featured {
        grid-column: span 1;
    }

    .project-card,
    .project-card.featured {
        min-height: auto;
    }

    .project-card.featured .project-card-image,
    .project-card-image {
        height: 280px;
    }

    .project-impact-grid {
        grid-template-columns: 1fr;
    }

    .projects-cta-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .projects-hero-content {
        padding: 58px 0;
    }

    .projects-hero h1 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .project-card-content {
        padding: 26px 23px 29px;
    }

    .project-card-image,
    .project-card.featured .project-card-image {
        height: 245px;
    }
}


/* ==========================================================
   GALERIA — MUSEU VISUAL DA SERRA DA CAPIVARA
   Componente específico. Não altera componentes globais.
========================================================== */

.gallery-page-hero {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(110deg, rgba(55,34,25,.96), rgba(91,54,38,.88) 52%, rgba(91,54,38,.35)),
        url("../img/galeria/hero.jpg") center/cover no-repeat;
    color: var(--white);
}

.gallery-page-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -270px;
    top: -300px;
    border: 76px solid rgba(255,196,0,.09);
    border-radius: 50%;
    pointer-events: none;
}

.gallery-page-hero .container {
    position: relative;
    z-index: 2;
}

.gallery-page-hero-content {
    max-width: 780px;
    padding: 72px 0;
}

.gallery-page-hero .section-label {
    color: var(--yellow);
}

.gallery-page-hero h1 {
    margin: 11px 0 17px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(48px, 6.3vw, 78px);
    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -.035em;
}

.gallery-page-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.83);
    font-size: 15px;
    line-height: 1.75;
}

/* ----------------------------------------------------------
   Introdução
---------------------------------------------------------- */

.gallery-intro {
    background: var(--off-white);
}

.gallery-intro-grid {
    display: grid;
    grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr);
    gap: 85px;
    align-items: start;
}

.gallery-intro h2 {
    max-width: 560px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px, 4.6vw, 59px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.gallery-intro-copy {
    max-width: 680px;
}

.gallery-intro-copy p {
    margin-bottom: 17px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.8;
}

.gallery-intro-copy p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------
   Museu visual — carrossel principal
---------------------------------------------------------- */

.gallery-museum {
    position: relative;
    overflow: hidden;
    padding: 90px 0 105px;
    background: #26342E;
    color: var(--white);
}

.gallery-museum::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        radial-gradient(rgba(255,255,255,.18) .7px, transparent .7px);
    background-size: 5px 5px;
    pointer-events: none;
}

.gallery-museum .container {
    position: relative;
    z-index: 2;
}

.gallery-museum-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 38px;
}

.gallery-museum-heading h2 {
    max-width: 760px;
    margin-top: 8px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(42px, 5vw, 65px);
    font-weight: 500;
    line-height: 1.02;
}

.gallery-museum-heading p {
    max-width: 320px;
    margin-bottom: 5px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.65;
}

/* A composição é deliberadamente diferente dos carrosséis comuns:
   foto grande + miniaturas como uma "parede de museu". */

.gallery-museum-frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 235px;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    background: #26342E;
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.gallery-museum-main {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background: #26342E;
}

.gallery-museum-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.035);
    transition:
        opacity .7s ease,
        transform 1s ease,
        visibility .7s ease;
}

.gallery-museum-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.gallery-museum-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-museum-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 40%, rgba(0,0,0,.72)),
        linear-gradient(90deg, rgba(0,0,0,.22), transparent 55%);
    pointer-events: none;
}

.gallery-museum-caption {
    position: absolute;
    z-index: 4;
    left: 35px;
    right: 35px;
    bottom: 30px;
}

.gallery-museum-caption .museum-number {
    display: block;
    margin-bottom: 6px;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 20px;
}

.gallery-museum-caption h3 {
    margin-bottom: 5px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 500;
    line-height: 1.05;
}

.gallery-museum-caption p {
    max-width: 570px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    line-height: 1.6;
}

/* ----------------------------------------------------------
   Miniaturas laterais — janela de acervo
---------------------------------------------------------- */

.gallery-museum-thumbs {
    height: 650px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #26342E;
    scrollbar-width: thin;
    scrollbar-color: var(--ochre) #26342E;
    scroll-behavior: smooth;
}

.gallery-museum-thumbs::-webkit-scrollbar {
    width: 7px;
}

.gallery-museum-thumbs::-webkit-scrollbar-track {
    background: #26342E;
}

.gallery-museum-thumbs::-webkit-scrollbar-thumb {
    background: var(--ochre);
    border-radius: 10px;
}

.gallery-museum-thumb {
    position: relative;
    flex: 0 0 108px;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    background: #26342E;
    cursor: pointer;
    opacity: .52;
    transition:
        opacity .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.gallery-museum-thumb:hover {
    opacity: .88;
    transform: translateX(-2px);
}

.gallery-museum-thumb.is-active {
    opacity: 1;
    border-color: var(--yellow);
    box-shadow: inset 4px 0 0 var(--yellow);
}

.gallery-museum-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-museum-thumb span {
    position: absolute;
    left: 9px;
    bottom: 7px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 13px;
    text-shadow: 0 1px 5px #000;
}

/* ----------------------------------------------------------
   Controles
---------------------------------------------------------- */

.gallery-museum-controls {
    position: absolute;
    z-index: 8;
    right: 265px;
    bottom: 27px;
    display: flex;
    gap: 7px;
}

.gallery-museum-button {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: rgba(33,24,18,.62);
    color: var(--white);
    font-size: 17px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.gallery-museum-button:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--green-deep);
}

/* ----------------------------------------------------------
   Faixa "acervo"
---------------------------------------------------------- */

.gallery-archive {
    padding: 76px 0 85px;
    background: var(--yellow-soft);
}

.gallery-archive-grid {
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: 80px;
    align-items: start;
}

.gallery-archive h2 {
    max-width: 580px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1.05;
}

.gallery-archive-copy p {
    margin-bottom: 17px;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.8;
}

.gallery-archive-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    color: var(--earth-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gallery-archive-note::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--yellow);
}

@media (max-width: 900px) {
    .gallery-museum-frame {
        grid-template-columns: 1fr;
    }

    .gallery-museum-main {
        min-height: 570px;
    }

    .gallery-museum-thumbs {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        height: 125px;
    }

    .gallery-museum-thumb {
        flex: 0 0 125px;
        height: 98px;
    }

    .gallery-museum-controls {
        right: 20px;
        bottom: 145px;
    }

    .gallery-intro-grid,
    .gallery-archive-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gallery-museum-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .gallery-page-hero-content {
        padding: 58px 0;
    }

    .gallery-page-hero h1 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .gallery-museum {
        padding: 62px 0 70px;
    }

    .gallery-museum-main {
        min-height: 430px;
    }

    .gallery-museum-frame {
        min-height: 555px;
    }

    .gallery-museum-caption {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .gallery-museum-controls {
        right: 15px;
        bottom: 135px;
    }

    .gallery-museum-button {
        width: 39px;
        height: 39px;
    }
}


.gallery-museum-thumbs-window {
    position: relative;
    height: 650px;
    background: #26342E;
}

.gallery-museum-thumbs-hint {
    position: absolute;
    z-index: 4;
    top: 13px;
    right: 22px;
    left: 13px;
    padding: 7px 9px;
    color: rgba(255,255,255,.58);
    background: rgba(33,24,18,.88);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    pointer-events: none;
}

.gallery-museum-thumbs-window .gallery-museum-thumbs {
    padding-top: 46px;
}

@media (max-width: 900px) {
    .gallery-museum-thumbs-window {
        height: 125px;
    }

    .gallery-museum-thumbs-window .gallery-museum-thumbs {
        height: 125px;
        padding-top: 13px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .gallery-museum-thumbs-hint {
        display: none;
    }

    .gallery-museum-thumb {
        flex: 0 0 125px;
        width: 125px;
        height: 98px;
    }
}


/* ==========================================================
   TRANSPARÊNCIA — COMPONENTES ESPECÍFICOS
   A página usa a mesma base visual das demais páginas.
========================================================== */

.transparency-hero {
    position: relative;
    overflow: hidden;
    min-height: 425px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(110deg, rgba(54,33,24,.98), rgba(91,54,38,.94) 58%, rgba(91,54,38,.72));
    color: var(--white);
}

.transparency-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -285px;
    top: -305px;
    border: 78px solid rgba(255,196,0,.09);
    border-radius: 50%;
}

.transparency-hero .container {
    position: relative;
    z-index: 2;
}

.transparency-hero-content {
    max-width: 790px;
    padding: 72px 0;
}

.transparency-hero .section-label {
    color: var(--yellow);
}

.transparency-hero h1 {
    margin: 11px 0 18px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.transparency-hero p {
    max-width: 670px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.75;
}

.transparency-intro {
    background: var(--off-white);
}

.transparency-intro-grid {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: 85px;
    align-items: start;
}

.transparency-intro h2 {
    max-width: 570px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px,4.6vw,58px);
    font-weight: 500;
    line-height: 1.04;
}

.transparency-intro-copy {
    max-width: 690px;
}

.transparency-intro-copy p {
    margin-bottom: 18px;
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.8;
}

.transparency-intro-copy p:last-child {
    margin-bottom: 0;
}

.transparency-documents {
    background: var(--yellow-soft);
}

.transparency-documents-heading {
    max-width: 790px;
    margin-bottom: 42px;
}

.transparency-documents-heading h2 {
    margin-top: 9px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px,4.7vw,59px);
    font-weight: 500;
    line-height: 1.04;
}

.transparency-documents-heading p {
    max-width: 650px;
    margin-top: 15px;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.75;
}

.transparency-document-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.transparency-document {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 130px;
    padding: 25px 28px;
    border: 1px solid rgba(74,44,32,.12);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 12px 35px rgba(35,29,24,.055);
}

.transparency-document-meta {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.transparency-document-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74,44,32,.18);
    border-radius: 3px;
    background: var(--off-white);
    color: var(--ochre);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.transparency-document h3 {
    margin-bottom: 5px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 500;
}

.transparency-document p {
    color: var(--gray-600);
    font-size: 12px;
    line-height: 1.55;
}

.transparency-document-status {
    flex: 0 0 auto;
    color: var(--earth-mid);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.transparency-principles {
    background: var(--earth-dark);
    color: var(--white);
}

.transparency-principles-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.transparency-principles-heading h2 {
    margin-top: 8px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(40px,4.7vw,58px);
    font-weight: 500;
    line-height: 1.04;
}

.transparency-principles-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(255,255,255,.18);
    border-left: 1px solid rgba(255,255,255,.10);
}

.transparency-principle {
    min-height: 205px;
    padding: 28px;
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.transparency-principle span {
    display: block;
    margin-bottom: 13px;
    color: var(--yellow);
    font-family: var(--font-title);
    font-size: 27px;
}

.transparency-principle h3 {
    margin-bottom: 8px;
    color: var(--white);
    font-size: 18px;
}

.transparency-principle p {
    max-width: 310px;
    color: rgba(255,255,255,.69);
    font-size: 13px;
    line-height: 1.65;
}

.transparency-contact {
    background: var(--off-white);
}

.transparency-contact-box {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 45px;
    align-items: center;
    padding: 45px 50px;
    border: 1px solid rgba(74,44,32,.12);
    border-radius: var(--radius);
    background: var(--yellow);
}

.transparency-contact-box h2 {
    margin-top: 8px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(34px,4vw,50px);
    font-weight: 500;
    line-height: 1.05;
}

.transparency-contact-box p {
    max-width: 620px;
    margin-top: 12px;
    color: rgba(7,90,50,.72);
    font-size: 14px;
    line-height: 1.7;
}

.transparency-contact-box .btn {
    background: var(--green-deep);
    color: var(--white);
}

@media (max-width: 820px) {
    .transparency-intro-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .transparency-document-list {
        grid-template-columns: 1fr;
    }

    .transparency-principles-grid {
        grid-template-columns: 1fr;
    }

    .transparency-contact-box {
        grid-template-columns: 1fr;
        padding: 34px 28px;
    }
}

@media (max-width: 560px) {
    .transparency-hero-content {
        padding: 58px 0;
    }

    .transparency-hero h1 {
        font-size: clamp(42px,12vw,58px);
    }

    .transparency-document {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
   CONTATO — MINI FORMULÁRIO
   Formulário simples, institucional e direto para o e-mail.
========================================================== */

.contact-page {
    background: var(--off-white);
}

.contact-hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(110deg, rgba(54,33,24,.98), rgba(91,54,38,.94) 60%, rgba(91,54,38,.74));
    color: var(--white);
}

.contact-hero::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -270px;
    top: -300px;
    border: 76px solid rgba(255,196,0,.09);
    border-radius: 50%;
    pointer-events: none;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero-content {
    max-width: 760px;
    padding: 70px 0;
}

.contact-hero .section-label {
    color: var(--yellow);
}

.contact-hero h1 {
    margin: 10px 0 17px;
    color: var(--white);
    font-family: var(--font-title);
    font-size: clamp(48px, 6vw, 74px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.contact-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.75;
}

.contact-section {
    padding: 78px 0 95px;
    background: var(--off-white);
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
    gap: 75px;
    align-items: start;
}

.contact-intro {
    padding-top: 10px;
}

.contact-intro h2 {
    max-width: 520px;
    margin: 9px 0 18px;
    color: var(--green-deep);
    font-family: var(--font-title);
    font-size: clamp(40px,4.4vw,57px);
    font-weight: 500;
    line-height: 1.04;
}

.contact-intro p {
    max-width: 500px;
    margin-bottom: 16px;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.8;
}

.contact-intro-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    color: var(--earth-mid);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-intro-note::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--yellow);
}

.contact-form-card {
    padding: 35px;
    border: 1px solid rgba(74,44,32,.13);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 22px 60px rgba(35,29,24,.08);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.contact-field.full {
    grid-column: 1 / -1;
}

.contact-field label {
    color: var(--green-deep);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 1px solid rgba(74,44,32,.18);
    border-radius: 7px;
    padding: 13px 14px;
    outline: none;
    background: #F7F4EC;
    color: var(--gray-700, #333);
    font: inherit;
    font-size: 13px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.contact-field input,
.contact-field select {
    min-height: 47px;
}

.contact-field textarea {
    min-height: 118px;
    resize: vertical;
    line-height: 1.6;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--ochre);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255,196,0,.14);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #9a948e;
}

.contact-form-help {
    grid-column: 1 / -1;
    margin-top: -2px;
    color: #657069;
    font-size: 11px;
    line-height: 1.55;
}

.contact-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 5px;
}

.contact-form-actions small {
    max-width: 320px;
    color: #657069;
    font-size: 10px;
    line-height: 1.5;
}

.contact-form-submit {
    border: 0;
    cursor: pointer;
}

.contact-form-status {
    grid-column: 1 / -1;
    display: none;
    margin-top: -3px;
    padding: 11px 13px;
    border-radius: 6px;
    background: #f7edd2;
    color: var(--earth-dark);
    font-size: 11px;
    line-height: 1.5;
}

.contact-form-status.is-visible {
    display: block;
}

@media (max-width: 850px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 620px) {
    .contact-hero-content {
        padding: 58px 0;
    }

    .contact-hero h1 {
        font-size: clamp(42px,12vw,58px);
    }

    .contact-form-card {
        padding: 24px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-field.full,
    .contact-form-help,
    .contact-form-actions,
    .contact-form-status {
        grid-column: auto;
    }

    .contact-form-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* DOACOES_MODAL_CSS */
.donation-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(18,20,18,.78);backdrop-filter:blur(4px)}
.donation-modal.is-open{display:flex}.donation-modal-dialog{position:relative;width:min(900px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:10px;background:var(--off-white);box-shadow:0 30px 100px rgba(0,0,0,.35)}
.donation-modal-close{position:absolute;top:14px;right:16px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.94);color:var(--earth-dark);font-size:25px;line-height:1}.donation-modal-close:hover{background:var(--yellow)}
.donation-modal-grid{display:grid;grid-template-columns:1.12fr .88fr;min-height:520px}.donation-modal-main{padding:48px 42px 38px;background:var(--white)}.donation-modal-brand{display:flex;justify-content:center;margin-bottom:25px}.donation-modal-brand img{width:185px;height:auto;object-fit:contain}
.donation-modal-main h2{max-width:540px;margin:0 auto 27px;color:var(--green-deep);font-family:var(--font-title);font-size:clamp(28px,3.2vw,40px);font-weight:500;line-height:1.1;text-align:center}.donation-label{display:block;margin-bottom:12px;color:var(--earth-dark);font-size:11px;font-weight:800;letter-spacing:.05em}
.donation-values{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:22px}.donation-value{min-height:43px;border:1px solid rgba(74,44,32,.18);border-radius:5px;cursor:pointer;background:var(--white);color:var(--earth-dark);font:inherit;font-size:13px;transition:.2s ease}.donation-value:hover,.donation-value.is-selected{border-color:var(--green-deep);background:var(--green-deep);color:var(--white)}
.donation-other-label{display:block;margin:5px 0 9px;color:var(--earth-dark);font-size:12px;font-weight:600}.donation-amount-input{width:100%;min-height:48px;border:1px solid rgba(74,44,32,.22);border-radius:5px;padding:12px 14px;outline:none;background:#fff;color:var(--earth-dark);font:inherit;font-size:14px}.donation-total{margin:24px 0 18px;color:var(--earth-dark);font-size:14px;font-weight:700}.donation-total strong{color:var(--green-deep)}.donation-action{width:100%;border:0;cursor:pointer;justify-content:center;background:var(--yellow);color:var(--green-deep)}.donation-action:hover{background:var(--yellow-light)}
.donation-modal-pix{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 30px;border-left:1px solid rgba(74,44,32,.08);background:var(--off-white);text-align:center}.donation-modal-pix h3{margin-bottom:22px;color:var(--green-deep);font-family:var(--font-title);font-size:26px;font-weight:500}.donation-pix-placeholder{display:flex;align-items:center;justify-content:center;width:210px;height:210px;margin-bottom:22px;border:2px dashed rgba(74,44,32,.28);background:var(--white);color:var(--earth-mid);font-size:11px;font-weight:800;letter-spacing:.08em;text-align:center}.donation-pix-placeholder img{width:100%;height:100%;object-fit:contain}.donation-modal-pix p{max-width:290px;color:var(--gray-600);font-size:13px;line-height:1.65}.donation-pix-note{margin-top:12px;color:var(--earth-mid);font-size:10px;line-height:1.5}
@media(max-width:720px){.donation-modal{padding:12px}.donation-modal-dialog{max-height:calc(100vh - 24px)}.donation-modal-grid{grid-template-columns:1fr}.donation-modal-pix{border-top:1px solid rgba(74,44,32,.08);border-left:0}.donation-values{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.donation-modal-main{padding:42px 20px 25px}.donation-values{grid-template-columns:repeat(2,1fr)}.donation-pix-placeholder{width:185px;height:185px}}


/* ==========================================================
   DOAÇÕES — VERSÃO VISUAL REFINADA
========================================================== */
.donation-modal{background:rgba(24,18,14,.84);padding:18px}
.donation-modal-dialog{width:min(960px,100%);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 35px 110px rgba(0,0,0,.48)}
.donation-modal-grid{grid-template-columns:1.08fr .92fr;min-height:570px}
.donation-modal-main{position:relative;isolation:isolate;padding:44px 46px 38px;background-image:linear-gradient(135deg,rgba(55,30,21,.78),rgba(91,48,29,.62)),url('../img/site/doacoes-bg.webp');background-size:cover;background-position:center}
.donation-modal-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(35,22,16,.10),rgba(35,22,16,.34))}
.donation-modal-brand{justify-content:flex-start;margin-bottom:30px}
.donation-modal-brand img{width:190px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));background:#fff;border-radius:7px;padding:5px 8px}
.donation-modal-main h2{max-width:520px;margin:0 0 30px;color:#fff;font-size:clamp(30px,3.5vw,43px);text-align:left;text-shadow:0 2px 16px rgba(0,0,0,.28)}
.donation-label{color:#B85F3D;font-size:12px}
.donation-values{grid-template-columns:repeat(5,1fr);gap:7px}
.donation-value{min-height:45px;border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(3px)}
.donation-value:hover,.donation-value.is-selected{border-color:var(--yellow);background:var(--yellow);color:var(--green-deep);transform:translateY(-1px)}
.donation-other-label{color:rgba(255,255,255,.9)}
.donation-amount-input{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.96)}
.donation-total{color:#fff}
.donation-total strong{color:var(--yellow)}
.donation-action{min-height:48px;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.donation-modal-pix{padding:42px 34px;background:#F7F4EC;border-left:1px solid rgba(74,44,32,.12)}
.donation-modal-pix h3{font-size:30px;margin-bottom:8px}
.donation-modal-pix h3::after{content:"";display:block;width:42px;height:3px;margin:12px auto 22px;border-radius:99px;background:var(--yellow)}
.donation-pix-placeholder{width:230px;height:230px;border:1px dashed rgba(74,44,32,.28);border-radius:8px;box-shadow:inset 0 0 0 8px rgba(74,44,32,.025),0 12px 30px rgba(74,44,32,.08)}
.donation-modal-pix p{font-size:14px}
.donation-pix-note{max-width:250px!important;padding:10px 12px;border-radius:6px;background:rgba(74,44,32,.055)}
.donation-modal-close{top:12px;right:12px;width:36px;height:36px;background:rgba(255,255,255,.96);box-shadow:0 5px 15px rgba(0,0,0,.15)}
.donation-modal-close:hover{background:var(--yellow)}
.donation-page-bg{position:relative;min-height:calc(100vh - 100px);display:flex;align-items:center;background:url('../img/site/doacoes-bg.webp') center/cover fixed}
.donation-page-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(44,27,20,.82),rgba(44,27,20,.48),rgba(44,27,20,.68))}
.donation-page-content{position:relative;z-index:1;color:#fff;padding:90px 0}
.donation-page-content h1{color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.25)}
.donation-page-content p{color:rgba(255,255,255,.88)!important}
.donation-page-content .section-label{color:var(--yellow)}
@media(max-width:720px){.donation-modal-grid{grid-template-columns:1fr}.donation-modal-main{padding:38px 24px 30px}.donation-modal-brand{justify-content:center}.donation-modal-main h2{text-align:center}.donation-values{grid-template-columns:repeat(3,1fr)}.donation-modal-pix{border-left:0;border-top:1px solid rgba(74,44,32,.12)}}
@media(max-width:430px){.donation-values{grid-template-columns:repeat(2,1fr)}.donation-pix-placeholder{width:190px;height:190px}}


/* ==========================================================
   DOAÇÕES — AJUSTE FINAL
   Logo oficial: img/site/minilogo.png
   Botão Doar visível dentro do modal sem exigir rolagem.
========================================================== */
.donation-modal-dialog{max-height:calc(100vh - 36px)}
.donation-modal-grid{min-height:0}
.donation-modal-main{padding:30px 38px 28px}
.donation-modal-brand{margin-bottom:18px}
.donation-modal-brand img{width:170px;padding:4px 7px}
.donation-modal-main h2{margin-bottom:21px;font-size:clamp(28px,3.1vw,39px);line-height:1.04}
.donation-values{margin-bottom:17px}
.donation-other-label{margin-top:3px;margin-bottom:7px}
.donation-amount-input{min-height:44px}
.donation-total{margin:15px 0 12px}
.donation-action{min-height:46px}
@media(max-width:720px){.donation-modal-main{padding:30px 22px 24px}.donation-modal-brand{margin-bottom:16px}.donation-modal-brand img{width:160px}}


/* DOACOES_VISUAL_FINAL_2026 */
.donation-modal-main{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background-image:url('../img/site/doacoes-bg.webp');
    background-size:cover;
    background-position:center;
}
.donation-modal-main::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(135deg,rgba(52,30,21,.88) 0%,rgba(78,42,28,.78) 52%,rgba(55,32,23,.68) 100%);
}
.donation-modal-main::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(circle at 85% 12%,rgba(255,196,0,.16),transparent 34%);
    pointer-events:none;
}
.donation-modal-brand{position:relative;z-index:2;justify-content:flex-start;margin-bottom:28px}
.donation-modal-brand img{
    display:block;
    width:190px;
    max-height:72px;
    object-fit:contain;
    object-position:left center;
    background:#fff;
    border-radius:7px;
    padding:5px 9px;
    box-shadow:0 7px 22px rgba(0,0,0,.20);
}
.donation-modal-main h2,.donation-modal-main form{position:relative;z-index:2}
.donation-modal-main h2{
    color:#fff;
    text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.donation-label,.donation-other-label,.donation-total{color:#fff}
.donation-amount-input{background:rgba(255,255,255,.96)}
.donation-modal-pix{background:#F7F4EC}
.donation-pix-placeholder{background:#fff;border-color:rgba(74,44,32,.25)}

/* Página de doações: imagem de fundo sem sacrificar a leitura. */
.donation-page-hero{
    position:relative;
    min-height:540px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background-image:url('../img/site/doacoes-bg.webp');
    background-size:cover;
    background-position:center;
    color:#fff;
}
.donation-page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(42,27,20,.90) 0%,rgba(58,32,22,.76) 54%,rgba(45,28,21,.38) 100%);
}
.donation-page-hero .container{position:relative;z-index:1}
.donation-page-hero h1{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.donation-page-hero p{color:rgba(255,255,255,.88)!important}
.donation-page-hero .section-label{color:var(--yellow)}
@media(max-width:720px){
 .donation-modal-brand{justify-content:center}
 .donation-modal-main{text-align:center}
 .donation-modal-main form{text-align:left}
 .donation-modal-brand img{width:175px}
}


/* ==========================================================
   DOAÇÕES — AJUSTE DEFINITIVO
   Preserva as imagens existentes do projeto:
   img/logo/logo pro nordeste.png
   img/site/minilogo.png
   img/site/doacoes-bg.webp
========================================================== */
body.donation-modal-open{overflow:hidden}

.donation-modal{
    padding:16px;
    overflow-y:auto;
    align-items:center;
}

.donation-modal-dialog{
    width:min(940px,100%);
    max-height:calc(100dvh - 32px);
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:16px;
}

.donation-modal-grid{
    min-height:0;
    height:auto;
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
}

.donation-modal-main{
    min-width:0;
    padding:34px 40px 32px;
}

.donation-modal-brand{
    margin-bottom:20px;
}

.donation-modal-brand img{
    display:block;
    width:190px;
    max-width:100%;
    height:auto;
    max-height:70px;
    object-fit:contain;
    object-position:left center;
    background:#fff;
    border-radius:6px;
    padding:4px 8px;
}

.donation-modal-main h2{
    margin:0 0 20px;
    font-size:clamp(27px,3vw,38px);
    line-height:1.06;
}

.donation-values{
    margin-bottom:15px;
}

.donation-value{
    min-height:42px;
}

.donation-other-label{
    margin:3px 0 6px;
}

.donation-amount-input{
    min-height:43px;
}

.donation-total{
    margin:13px 0 10px;
}

.donation-action{
    min-height:46px;
}

.donation-modal-pix{
    min-width:0;
    padding:34px 28px;
}

.donation-modal-pix h3{
    margin-bottom:5px;
    font-size:28px;
}

.donation-pix-placeholder{
    width:205px;
    height:205px;
    flex:0 0 auto;
    margin-bottom:18px;
}

.donation-modal-pix p{
    margin:0 0 8px;
    font-size:13px;
}

.donation-pix-note{
    margin-top:7px!important;
}

/* Fundo da página: imagem existente + camada para legibilidade. */
.donation-page-hero{
    min-height:calc(100vh - 100px);
    background-image:url('../img/site/doacoes-bg.webp');
    background-size:cover;
    background-position:center;
}

.donation-page-hero::before{
    background:linear-gradient(90deg,
        rgba(48,28,20,.92) 0%,
        rgba(61,34,23,.78) 48%,
        rgba(48,29,21,.48) 100%);
}

/* Na página de Doações, o próprio item Doações permanece destacado. */
@media(max-width:820px){
    .donation-modal-grid{grid-template-columns:1fr}
    .donation-modal-pix{border-left:0;border-top:1px solid rgba(74,44,32,.12)}
}

@media(max-width:520px){
    .donation-modal{padding:8px}
    .donation-modal-dialog{max-height:calc(100dvh - 16px);border-radius:12px}
    .donation-modal-main{padding:28px 20px 24px}
    .donation-modal-brand{justify-content:center}
    .donation-modal-brand img{width:175px;object-position:center}
    .donation-modal-main h2{text-align:center;font-size:29px}
    .donation-modal-main form{text-align:left}
    .donation-values{grid-template-columns:repeat(3,1fr)}
    .donation-modal-pix{padding:28px 20px}
}


/* DOACOES_FINAL_LAYOUT_2026_08_12 */
.donation-modal{
    box-sizing:border-box;
    padding:12px;
    overflow:auto;
}
.donation-modal-dialog{
    box-sizing:border-box;
    width:min(920px,100%);
    max-height:calc(100dvh - 24px);
    overflow:auto;
    border-radius:14px;
}
.donation-modal-grid{
    grid-template-columns:minmax(0,1.04fr) minmax(290px,.96fr);
    min-height:0;
}
.donation-modal-main{
    box-sizing:border-box;
    padding:28px 34px 25px;
}
.donation-modal-brand{margin-bottom:15px}
.donation-modal-brand img{
    width:154px;
    height:69px;
    max-height:none;
    object-fit:contain;
    padding:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
}
.donation-modal-main h2{
    margin-bottom:16px;
    font-size:clamp(26px,2.8vw,35px);
    line-height:1.07;
}
.donation-values{gap:6px;margin-bottom:13px}
.donation-value{min-height:40px}
.donation-other-label{margin:2px 0 5px}
.donation-amount-input{min-height:41px}
.donation-total{margin:11px 0 9px}
.donation-action{min-height:43px}
.donation-modal-pix{padding:28px 25px}
.donation-modal-pix h3{font-size:27px;margin-bottom:4px}
.donation-modal-pix h3::after{margin:9px auto 16px}
.donation-pix-placeholder{width:190px;height:190px;margin-bottom:15px}
.donation-modal-pix p{font-size:12.5px;line-height:1.5}
.donation-pix-note{font-size:9.5px!important;padding:8px 10px!important}
@media(max-width:820px){
    .donation-modal-grid{grid-template-columns:1fr}
    .donation-modal-pix{border-left:0;border-top:1px solid rgba(74,44,32,.12)}
}
@media(max-width:520px){
    .donation-modal{padding:6px}
    .donation-modal-dialog{max-height:calc(100dvh - 12px);border-radius:11px}
    .donation-modal-main{padding:25px 18px 22px}
    .donation-modal-brand{justify-content:center}
    .donation-modal-brand img{width:154px;height:69px}
    .donation-modal-main h2{text-align:center;font-size:28px}
    .donation-values{grid-template-columns:repeat(3,1fr)}
    .donation-modal-pix{padding:25px 18px}
}


/* ==========================================================
   AJUSTE FINAL — NÃO ALTERAR O RESTANTE DO SITE
   Logo + header + modal de doação
========================================================== */
.header{
    background: var(--green-deep) !important;
    top: 0 !important;
}
.header .logo,
.header .site-brand{opacity:1 !important;}
.header .probrasil-logo{
    width:145px !important;
    height:68px !important;
    padding:4px 7px !important;
    box-sizing:border-box !important;
    background:#fff !important;
    border-radius:6px !important;
    align-items:center !important;
    justify-content:center !important;
}
.header .probrasil-logo img{
    display:block !important;
    width:auto !important;
    max-width:131px !important;
    height:auto !important;
    max-height:58px !important;
    opacity:1 !important;
    filter:none !important;
}
.header .logo-text strong{color:#fff !important;}
.header .logo-text small{color:rgba(255,255,255,.68) !important;}
.header .nav-link{color:#fff !important;}
.header .nav-link:hover{color:var(--yellow) !important;}

.donation-modal{padding:15px !important;box-sizing:border-box !important;overflow-y:auto !important;}
.donation-modal-dialog{
    width:min(900px,100%) !important;
    max-height:92vh !important;
    min-height:0 !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
}
.donation-modal-grid{min-height:0 !important;}
.donation-modal-main{min-width:0 !important;padding:34px 38px 30px !important;box-sizing:border-box !important;}
.donation-modal-brand{margin-bottom:18px !important;}
.donation-modal-brand img{
    display:block !important;
    width:185px !important;
    max-width:100% !important;
    height:auto !important;
    opacity:1 !important;
    filter:none !important;
}
.donation-modal-pix{min-width:0 !important;padding:34px 28px !important;box-sizing:border-box !important;}
.donation-pix-placeholder{width:190px !important;height:190px !important;flex:0 0 190px !important;}
.donation-modal-main h2{font-size:clamp(26px,3vw,36px) !important;margin-bottom:20px !important;}
.donation-values{margin-bottom:17px !important;}
.donation-total{margin:18px 0 14px !important;}
@media(max-width:720px){
 .header .probrasil-logo{width:112px !important;height:56px !important;}
 .header .probrasil-logo img{max-width:100px !important;max-height:48px !important;}
 .donation-modal-dialog{max-height:96vh !important;}
 .donation-modal-grid{grid-template-columns:1fr !important;}
 .donation-modal-main{padding:30px 22px 24px !important;}
 .donation-modal-pix{padding:28px 22px !important;}
}


/* ==========================================================
   CORREÇÃO REAL DA IDENTIDADE — 12/08/2026
   NÃO ALTERA O LAYOUT DAS OUTRAS SEÇÕES.
   A logo é transparente; NÃO criar caixa branca atrás dela.
========================================================== */
.header .probrasil-logo{
    width:145px !important;
    height:68px !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}
.header .probrasil-logo img{
    display:block !important;
    width:154px !important;
    height:69px !important;
    max-width:154px !important;
    max-height:69px !important;
    object-fit:contain !important;
    background:transparent !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
}

/* Logo da janela de doação: a própria PNG já possui transparência. */
.donation-modal-brand img{
    background:transparent !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    width:185px !important;
    height:auto !important;
    max-height:69px !important;
    object-fit:contain !important;
}

/* Garante que o conteúdo da doação nunca seja cortado. */
.donation-modal{
    align-items:center !important;
    overflow-y:auto !important;
    padding:12px !important;
}
.donation-modal-dialog{
    max-height:calc(100dvh - 24px) !important;
    overflow-y:auto !important;
    min-height:0 !important;
}
@media (max-width:720px){
    .header .probrasil-logo{width:112px !important;height:56px !important;}
    .header .probrasil-logo img{width:112px !important;height:56px !important;max-width:112px !important;max-height:56px !important;}
}

/* VIVEIRO_PAGE_STYLES */
.viveiro-hero{position:relative;min-height:68vh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(90deg,rgba(45,27,19,.82),rgba(45,27,19,.48),rgba(45,27,19,.18)),url("../img/site/viveiro-inicio.jpg") center/cover no-repeat}.viveiro-hero-content{position:relative;z-index:2;padding:110px 0 82px;max-width:850px;color:#fff}.viveiro-hero .section-label{color:var(--yellow)}.viveiro-hero h1{margin:10px 0 14px;font-family:var(--font-title);font-size:clamp(52px,7vw,92px);font-weight:500;line-height:.98}.viveiro-hero p{max-width:670px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.88)}.viveiro-story{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.viveiro-story h2,.viveiro-impact h2{color:var(--green-deep);font-family:var(--font-title);font-size:clamp(42px,5vw,68px);font-weight:500;line-height:1.02;margin:12px 0 24px}.viveiro-story p,.viveiro-impact p{color:var(--gray-600);line-height:1.8}.viveiro-highlight{padding:28px;border-left:4px solid var(--yellow);background:var(--off-white)}.viveiro-highlight strong{display:block;color:var(--green-deep);font-family:var(--font-title);font-size:28px;font-weight:500;line-height:1.2;margin-bottom:10px}.viveiro-highlight span{color:var(--gray-600);font-size:14px;line-height:1.7}.viveiro-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(74,44,32,.14);margin-top:42px}.viveiro-pillar{padding:34px;background:var(--white)}.viveiro-pillar small{display:block;color:var(--ochre);font-weight:800;letter-spacing:.12em;margin-bottom:10px}.viveiro-pillar h3{color:var(--green-deep);font-family:var(--font-title);font-size:27px;font-weight:500;margin-bottom:10px}.viveiro-pillar p{font-size:14px;line-height:1.7}.viveiro-gallery{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:230px 230px;gap:12px}.viveiro-photo{position:relative;overflow:hidden;min-height:180px;background:linear-gradient(135deg,#d4a06a,#7b4c32)}.viveiro-photo:first-child{grid-row:1 / 3}.viveiro-photo-placeholder{height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-family:var(--font-title);font-size:25px}.viveiro-impact{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.viveiro-impact-card{padding:48px;background:var(--green-deep);color:#fff;position:relative;overflow:hidden}.viveiro-impact-card:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;border:70px solid rgba(255,196,0,.12);right:-120px;top:-120px}.viveiro-impact-card strong{position:relative;z-index:1;display:block;font-family:var(--font-title);font-size:36px;font-weight:500;line-height:1.1;margin-bottom:15px}.viveiro-impact-card p{position:relative;z-index:1;color:rgba(255,255,255,.8);font-size:14px}.viveiro-cta{padding:75px 0;background:var(--earth-dark);color:#fff;text-align:center}.viveiro-cta h2{font-family:var(--font-title);font-size:clamp(40px,5vw,65px);font-weight:500;margin-bottom:15px}.viveiro-cta p{max-width:650px;margin:0 auto 28px;color:rgba(255,255,255,.78);line-height:1.7}.viveiro-cta .btn{background:var(--yellow);color:var(--green-deep)}@media(max-width:850px){.viveiro-story,.viveiro-impact{grid-template-columns:1fr;gap:35px}.viveiro-pillars{grid-template-columns:1fr}.viveiro-gallery{grid-template-columns:1fr;grid-template-rows:260px 180px 180px}.viveiro-photo:first-child{grid-row:auto}}

/* VIVEIRO PHOTO SECTION FINAL */
.viveiro-gallery-section{background:var(--earth-dark)!important;color:#fff}
.viveiro-gallery-section .section-title{color:#fff!important}
.viveiro-gallery-section .section-label{color:var(--yellow)!important}
.viveiro-gallery-section .viveiro-photo{background:#315B45}
.viveiro-gallery-section .viveiro-photo img{transition:transform .5s ease}
.viveiro-gallery-section .viveiro-photo:hover img{transform:scale(1.035)}

/* VIVEIRO FINAL FIX — preserve existing design, only fix dropdown + photo cropping */

/* Projetos must look exactly like the other menu items when closed. */
.header .nav-dropdown-toggle{
    appearance:none !important;
    -webkit-appearance:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:inherit !important;
    font:inherit !important;
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
}
.header .nav-dropdown-toggle:hover,
.header .nav-dropdown-toggle:focus,
.header .nav-dropdown-toggle:active{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
}

/* Viveiro gallery: never crop the original photos. */
.viveiro-gallery{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:12px !important;
    align-items:start !important;
    background:transparent !important;
}
.viveiro-photo{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    background:#315B45 !important;
}
.viveiro-photo:first-child{
    grid-row:auto !important;
}
.viveiro-photo img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
}
.viveiro-gallery-section{
    background:var(--earth-dark) !important;
    padding-top:72px !important;
    padding-bottom:72px !important;
}
@media(max-width:850px){
    .viveiro-gallery{
        grid-template-columns:1fr !important;
    }
}

/* FINAL PROJECTS MENU FIX
   Do not inherit active underline/color from .nav-link. */
.header .nav-dropdown .nav-dropdown-toggle,
.header .nav-dropdown .nav-dropdown-toggle:hover,
.header .nav-dropdown .nav-dropdown-toggle:focus,
.header .nav-dropdown .nav-dropdown-toggle:active,
.header .nav-dropdown .nav-dropdown-toggle.active {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.header .nav-dropdown .nav-dropdown-toggle::after,
.header .nav-dropdown .nav-dropdown-toggle.active::after,
.header .nav-dropdown .nav-dropdown-toggle:hover::after {
    display: none !important;
    transform: none !important;
}

.header .nav-dropdown .nav-dropdown-toggle::before {
    border-color: #fff !important;
}

.header .nav-dropdown:hover .nav-dropdown-toggle,
.header .nav-dropdown:focus-within .nav-dropdown-toggle {
    color: #fff !important;
}

/* PRACTICE PAGE — project photos and partner identities */
.practice-gallery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:34px;
}
.practice-gallery-grid figure{
  margin:0;
  background:#fff;
  overflow:hidden;
}
.practice-gallery-grid img{
  display:block;
  width:100%;
  height:auto;
}
.practice-gallery-grid figcaption{
  padding:15px 18px;
  color:var(--gray-600);
  font-size:13px;
}
.practice-partner-logos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:32px;
  align-items:stretch;
}
.practice-partner-logo{
  min-height:120px;
  padding:18px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.practice-partner-logo img{
  display:block;
  max-width:100%;
  max-height:90px;
  width:auto;
  height:auto;
  object-fit:contain;
}
@media(max-width:850px){
  .practice-gallery-grid{grid-template-columns:1fr;}
  .practice-partner-logos{grid-template-columns:1fr 1fr;}
}

/* SUSTENTABILIDADE — final visual corrections */
.header .nav-dropdown .nav-dropdown-toggle,
.header .nav-dropdown .nav-dropdown-toggle:hover,
.header .nav-dropdown .nav-dropdown-toggle:focus,
.header .nav-dropdown .nav-dropdown-toggle:active,
.header .nav-dropdown .nav-dropdown-toggle.active{
  color:#fff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.header .nav-dropdown .nav-dropdown-toggle::after,
.header .nav-dropdown .nav-dropdown-toggle.active::after,
.header .nav-dropdown .nav-dropdown-toggle:hover::after{
  content:none !important;
  display:none !important;
  transform:none !important;
}
.header .nav-dropdown .nav-dropdown-toggle::before{
  border-color:#fff !important;
}
.ods-card-18 .ods-icon-wrap{background:#315B45}
.ods-card-18 .ods-icon-wrap img{width:70px;height:70px;object-fit:contain}
.ods-note{
  margin:28px 0 0;
  padding:18px 20px;
  border-left:3px solid var(--yellow);
  background:#fff;
  color:var(--gray-600);
  font-size:12px;
  line-height:1.7;
}
.ods-note strong{color:var(--green-deep)}
@media(max-width:600px){
  .sust-hero{background-size:300px auto !important;background-position:right bottom !important}
}

/* ==========================================================
   FINAL FIX — PROJETOS MUST MATCH THE OTHER NAV LINKS
========================================================== */
.header .nav-dropdown .nav-dropdown-toggle{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    padding:36px 12px !important;
    margin:0 !important;
    color:#fff !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:normal !important;
    letter-spacing:inherit !important;
    text-transform:inherit !important;
    height:auto !important;
    min-height:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
.header .nav-dropdown .nav-dropdown-toggle:hover,
.header .nav-dropdown .nav-dropdown-toggle:focus,
.header .nav-dropdown .nav-dropdown-toggle:active,
.header .nav-dropdown:hover .nav-dropdown-toggle,
.header .nav-dropdown:focus-within .nav-dropdown-toggle{
    color:#fff !important;
    background:transparent !important;
}
.header .nav-dropdown .nav-dropdown-toggle::after{
    content:none !important;
    display:none !important;
}
.header .nav-dropdown .nav-dropdown-toggle::before{
    flex:0 0 auto !important;
    border-color:#fff !important;
}

/* ENDEREÇO — acesso rápido ao Google Maps */
.footer-address{
    line-height:1.65;
}
.footer-map-link{
    display:inline-block;
    margin-left:10px;
    color:var(--yellow) !important;
    font-weight:700;
    text-decoration:none;
    transition:opacity .2s ease;
}
.footer-map-link:hover{
    opacity:.8;
    text-decoration:underline;
}
@media(max-width:700px){
    .footer-map-link{
        display:block;
        margin:5px 0 0;
    }
}

/* FOOTER CONTACT — endereço | e-mail | telefone */
.footer-bottom .footer-contact{
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    align-items:center !important;
    gap:28px !important;
    width:100% !important;
}

.footer-bottom .footer-contact-item{
    min-width:0;
}

.footer-bottom .footer-contact-item:nth-child(2){
    text-align:center;
}

.footer-bottom .footer-contact-item:nth-child(3){
    text-align:right;
}

.footer-address .footer-map-link{
    display:block;
    width:max-content;
    margin:6px 0 0 !important;
}

@media(max-width:700px){
    .footer-bottom .footer-contact{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .footer-bottom .footer-contact-item,
    .footer-bottom .footer-contact-item:nth-child(2),
    .footer-bottom .footer-contact-item:nth-child(3){
        text-align:left !important;
    }

    .footer-address .footer-map-link{
        margin-top:5px !important;
    }
}

/* PROJECTS — restore the same hover animation/underline used by main nav */
.header .nav-dropdown .nav-dropdown-toggle{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.header .nav-dropdown .nav-dropdown-toggle::after{
    content:"" !important;
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    bottom:25px !important;
    width:auto !important;
    height:2px !important;
    background:var(--yellow) !important;
    transform:scaleX(0) !important;
    transform-origin:center !important;
    transition:transform .25s ease !important;
    display:block !important;
}
.header .nav-dropdown:hover .nav-dropdown-toggle::after,
.header .nav-dropdown:focus-within .nav-dropdown-toggle::after,
.header .nav-dropdown .nav-dropdown-toggle:hover::after,
.header .nav-dropdown .nav-dropdown-toggle:focus-visible::after{
    transform:scaleX(1) !important;
}

/* ==========================================================
   HOME — IMPACTO COM FAIXA FOTOGRÁFICA INFINITA
   ========================================================== */
.impact-photo-section{
    position:relative;
    min-height:620px;
    overflow:hidden;
    background:#315B45;
    isolation:isolate;
}

.impact-photo-marquee{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:-3;
}

.impact-photo-track{
    display:flex;
    width:max-content;
    height:100%;
    animation:impactPhotoLoop 65s linear infinite;
    will-change:transform;
}

.impact-photo-item{
    flex:0 0 clamp(250px,24vw,430px);
    height:100%;
    overflow:hidden;
}

.impact-photo-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:saturate(.88);
}

.impact-photo-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(
            90deg,
            rgba(10,56,37,.88) 0%,
            rgba(10,56,37,.70) 28%,
            rgba(10,56,37,.72) 50%,
            rgba(10,56,37,.70) 72%,
            rgba(10,56,37,.88) 100%
        );
}

.impact-photo-section:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 45%,rgba(255,196,0,.12),transparent 34%),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18));
}

.impact-photo-content{
    position:relative;
    z-index:2;
    min-height:620px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-top:75px;
    padding-bottom:0;
}

.impact-photo-center{
    width:min(760px,92%);
    text-align:center;
    padding:25px 30px 36px;
}

.impact-photo-logo{
    display:block;
    width:min(245px,55vw);
    max-height:92px;
    object-fit:contain;
    margin:0 auto 25px;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.25));
}

.impact-photo-center .section-label{
    display:block;
    margin-bottom:8px;
    color:var(--yellow);
}

.impact-photo-center h2{
    color:#fff;
    font-family:var(--font-title);
    font-size:clamp(44px,5.5vw,76px);
    font-weight:500;
    line-height:.98;
    margin:8px 0 20px;
}

.impact-photo-center h2 span{
    color:var(--yellow);
}

.impact-photo-center p{
    max-width:680px;
    margin:0 auto;
    color:rgba(255,255,255,.88);
    font-size:16px;
    line-height:1.75;
}

.impact-photo-stats{
    width:100%;
    margin-top:8px;
    border-top:1px solid rgba(255,255,255,.25);
    border-bottom:1px solid rgba(255,255,255,.25);
}

.impact-photo-stats .impact-item{
    color:#fff;
    border-color:rgba(255,255,255,.20);
}

.impact-photo-stats .impact-item strong{
    color:var(--yellow);
}

.impact-photo-stats .impact-item > span{
    color:rgba(255,255,255,.82);
}

@keyframes impactPhotoLoop{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

@media(prefers-reduced-motion:reduce){
    .impact-photo-track{animation:none}
}

@media(max-width:700px){
    .impact-photo-section,
    .impact-photo-content{
        min-height:680px;
    }

    .impact-photo-track{
        animation-duration:52s;
    }

    .impact-photo-item{
        flex-basis:260px;
    }

    .impact-photo-overlay{
        background:rgba(10,56,37,.82);
    }

    .impact-photo-center{
        padding:20px 12px 28px;
    }

    .impact-photo-logo{
        width:190px;
        margin-bottom:18px;
    }

    .impact-photo-center h2{
        font-size:50px;
    }

    .impact-photo-center p{
        font-size:14px;
    }

    .impact-photo-stats{
        grid-template-columns:1fr 1fr !important;
    }
}

/* ==========================================================
   HOME — BLOCO FOTOGRÁFICO, SEM FILTRO VERDE
   Referência: faixa de fotos + um único bloco central.
========================================================== */
.impact-photo-section{
    position:relative;
    height:560px;
    min-height:560px;
    overflow:hidden;
    background:#F7F4EC;
    isolation:isolate;
}

.impact-photo-marquee{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
    background:#F7F4EC;
}

.impact-photo-track{
    height:100%;
    display:flex;
    width:max-content;
    animation:impactPhotoLoop 58s linear infinite;
    will-change:transform;
}

.impact-photo-item{
    flex:0 0 clamp(260px,22vw,390px);
    height:100%;
    overflow:hidden;
}

.impact-photo-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:none;
}

.impact-photo-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
    background:transparent !important;
    pointer-events:none;
}

.impact-photo-section:after{
    display:none !important;
}

.impact-photo-content{
    position:relative;
    z-index:2;
    min-height:560px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 0;
}

.impact-photo-center{
    width:min(545px,42vw);
    min-height:410px;
    box-sizing:border-box;
    margin-left:0;
    padding:54px 48px 46px;
    text-align:left;
    background:rgba(255,255,255,.91);
    box-shadow:0 14px 35px rgba(40,35,30,.14);
    border:1px solid rgba(255,255,255,.85);
    backdrop-filter:blur(2px);
}

.impact-photo-logo{
    width:210px;
    max-height:92px;
    height:auto;
    object-fit:contain;
    object-position:left center;
    display:block;
    margin:0 0 24px;
    filter:none;
}

.impact-photo-center .section-label{
    display:block;
    margin-bottom:10px;
    color:#e6a800 !important;
}

.impact-photo-center h2{
    color:#111 !important;
    font-family:var(--font-title);
    font-size:clamp(40px,4vw,58px);
    font-weight:500;
    line-height:.98;
    margin:6px 0 18px;
}

.impact-photo-center h2 span{
    color:#005b9a !important;
}

.impact-photo-center p{
    max-width:470px;
    margin:0;
    color:#1e1e1e !important;
    font-size:15px;
    line-height:1.75;
}

@media(max-width:800px){
    .impact-photo-section{
        height:600px;
        min-height:470px;
    }
    .impact-photo-content{
        min-height:470px;
    }
    .impact-photo-center{
        width:min(520px,82vw);
        min-height:auto;
        padding:40px 32px;
    }
}

@media(max-width:600px){
    .impact-photo-track{
        animation-duration:48s;
    }
    .impact-photo-item{
        flex-basis:250px;
    }
    .impact-photo-center{
        width:88vw;
        padding:32px 25px;
    }
    .impact-photo-logo{
        width:175px;
        margin-bottom:18px;
    }
    .impact-photo-center h2{
        font-size:42px;
    }
    .impact-photo-center p{
        font-size:14px;
        line-height:1.65;
    }
}

/* ==========================================================
   HOME — CTA DE DOAÇÃO COM 3 FOTOS
   ========================================================== */
.donation-photo-section{
    position:relative;
    min-height:470px;
    overflow:hidden;
    isolation:isolate;
    background:#4b3026;
}

.donation-photo-grid{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    z-index:-3;
}

.donation-photo{
    min-width:0;
    height:100%;
    overflow:hidden;
}

.donation-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.donation-photo-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:rgba(32,25,21,.42);
    pointer-events:none;
}

.donation-photo-container{
    position:relative;
    min-height:470px;
    display:flex;
    align-items:center;
}

.donation-photo-content{
    max-width:720px;
    padding:72px 0;
}

.donation-photo-content .section-label{
    color:var(--yellow);
    margin-bottom:16px;
}

.donation-photo-content h2{
    color:#fff;
    text-shadow:0 2px 18px rgba(0,0,0,.20);
}

.donation-photo-content p{
    color:rgba(255,255,255,.94);
    text-shadow:0 1px 8px rgba(0,0,0,.18);
    max-width:690px;
}

.donation-photo-content .btn-light{
    background:#fff;
    color:var(--green-deep);
    border-color:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.donation-photo-content .btn-light:hover{
    background:var(--yellow);
    border-color:var(--yellow);
    color:var(--green-deep);
}

@media(max-width:700px){
    .donation-photo-section,
    .donation-photo-container{
        min-height:650px;
    }

    .donation-photo-grid{
        grid-template-columns:1fr;
    }

    .donation-photo{
        display:none;
    }

    .donation-photo:first-child{
        display:block;
    }

    .donation-photo-overlay{
        background:rgba(20,20,18,.48);
    }

    .donation-photo-content{
        padding:55px 0;
    }

    .donation-photo-content h2{
        font-size:clamp(42px,12vw,62px);
    }
}

/* ==========================================================
   GRO HARLEM — GALERIA REPENSADA
   Menor, sem corte e respeitando a proporção original.
   ========================================================== */

.brundtland-hero-portrait{
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(36,24,19,.32);
}

.brundtland-hero-portrait::after{
    background:linear-gradient(
        90deg,
        rgba(74,44,32,.48),
        rgba(74,44,32,.08) 55%,
        transparent
    );
}

.brundtland-hero-portrait img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:28px;
    position:relative;
    z-index:1;
}

/* O carrossel agora é uma moldura menor, para que as imagens
   não precisem ser esticadas para preencher a tela. */
.brundtland-gallery .container{
    max-width:1050px;
}

.brundtland-carousel{
    width:min(100%,860px);
    min-height:0;
    height:470px;
    margin:0 auto;
    border-radius:22px;
    background:#26342E;
    box-shadow:0 18px 45px rgba(0,0,0,.20);
}

.brundtland-carousel-track{
    height:470px;
}

.brundtland-slide{
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#26342E;
}

.brundtland-slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    padding:18px 70px 58px;
}

.brundtland-slide::after{
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 52%,
        rgba(0,0,0,.72) 100%
    );
}

.brundtland-slide figcaption{
    left:70px;
    right:70px;
    bottom:24px;
}

@media(max-width:800px){
    .brundtland-hero-portrait{
        min-height:430px;
    }

    .brundtland-hero-portrait img{
        padding:20px;
    }

    .brundtland-carousel{
        width:100%;
        height:400px;
        border-radius:16px;
    }

    .brundtland-carousel-track{
        height:400px;
    }

    .brundtland-slide img{
        padding:14px 52px 55px;
    }

    .brundtland-slide figcaption{
        left:52px;
        right:52px;
        bottom:20px;
        font-size:12px;
    }
}

@media(max-width:520px){
    .brundtland-carousel{
        height:360px;
    }

    .brundtland-carousel-track{
        height:360px;
    }

    .brundtland-slide img{
        padding:12px 44px 58px;
    }

    .brundtland-slide figcaption{
        left:44px;
        right:44px;
    }
}

/* ==========================================================
   DEPOIMENTOS — NOVA PÁGINA
   ========================================================== */

.testimonials-hero{
    position:relative;
    min-height:470px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    isolation:isolate;
    background:#4b3027;
}

.testimonials-hero-image{
    position:absolute;
    inset:0;
    z-index:-3;
}

.testimonials-hero-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 62%;
}

.testimonials-hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(
        90deg,
        rgba(37,25,20,.78) 0%,
        rgba(37,25,20,.42) 45%,
        rgba(37,25,20,.12) 100%
    );
}

.testimonials-hero-content{
    padding-top:125px;
    padding-bottom:52px;
    color:#fff;
}

.testimonials-hero-content .section-label{
    color:var(--yellow);
}

.testimonials-hero-content h1{
    max-width:760px;
    color:#fff;
    font-family:var(--font-title);
    font-size:clamp(50px,6.5vw,82px);
    font-weight:500;
    line-height:.94;
    margin:12px 0 24px;
}

.testimonials-hero-content h1 span{
    display:block;
    color:var(--yellow);
}

.testimonials-hero-content p{
    max-width:620px;
    color:rgba(255,255,255,.92);
    font-size:17px;
    line-height:1.7;
}

.testimonials-section{
    position:relative;
    overflow:hidden;
    background:#f6c84c;
    padding:72px 0 65px;
}

.testimonials-section:before,
.testimonials-section:after{
    content:"";
    position:absolute;
    border:1px solid rgba(79,47,34,.12);
    border-radius:50%;
    pointer-events:none;
}

.testimonials-section:before{
    width:500px;
    height:500px;
    right:-250px;
    top:-260px;
}

.testimonials-section:after{
    width:370px;
    height:370px;
    left:-210px;
    bottom:-200px;
}

.testimonials-heading{
    position:relative;
    z-index:1;
    max-width:780px;
    margin:0 auto 30px;
    text-align:center;
}

.testimonials-heading .section-label{
    color:#fff;
}

.testimonials-heading h2{
    color:#315B45;
    font-family:var(--font-title);
    font-size:clamp(38px,4.8vw,58px);
    font-weight:500;
    line-height:1;
    margin:10px 0 14px;
}

.testimonials-heading h2 span{
    display:block;
}

.testimonials-heading p{
    max-width:650px;
    margin:0 auto;
    color:#5c4437;
    font-size:16px;
    line-height:1.7;
}

.testimonials-frame{
    position:relative;
    z-index:1;
    max-width:1120px;
    margin:0 auto;
    padding:28px;
    background:rgba(255,255,255,.96);
    border-radius:28px;
    box-shadow:0 24px 70px rgba(66,45,29,.16);
}

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.testimonial-image-card{
    margin:0;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.10);
    transition:transform .3s ease, box-shadow .3s ease;
}

.testimonial-image-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 32px rgba(0,0,0,.15);
}

.testimonial-image-card img{
    display:block;
    width:100%;
    height:auto;
}

.testimonials-instagram{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin:30px auto 0;
    color:#fff;
}

.instagram-mark{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:2px solid rgba(255,255,255,.9);
    border-radius:13px;
    font-size:29px;
    line-height:1;
}

.testimonials-instagram div{
    display:flex;
    flex-direction:column;
}

.testimonials-instagram small{
    font-size:10px;
    letter-spacing:.18em;
    opacity:.85;
}

.testimonials-instagram strong{
    font-size:22px;
}

.testimonials-instagram .btn{
    margin-left:12px;
}

.testimonials-final{
    position:relative;
    overflow:hidden;
    padding:70px 0;
    background:#315B45;
    text-align:center;
}

.testimonials-final:after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    right:-300px;
    top:-310px;
}

.testimonials-final .container{
    position:relative;
    z-index:1;
}

.testimonials-final .section-label{
    color:var(--yellow);
}

.testimonials-final h2{
    max-width:850px;
    margin:12px auto 20px;
    color:#fff;
    font-family:var(--font-title);
    font-size:clamp(40px,5vw,64px);
    font-weight:500;
    line-height:1;
}

.testimonials-final h2 span{
    color:var(--yellow);
}

.testimonials-final p{
    max-width:650px;
    margin:0 auto 32px;
    color:rgba(255,255,255,.82);
    line-height:1.7;
}

@media(max-width:800px){
    .testimonials-hero{
        min-height:430px;
    }

    .testimonials-hero-content{
        padding-top:105px;
        padding-bottom:42px;
    }

    .testimonials-hero-content h1{
        font-size:58px;
    }

    .testimonials-section{
        padding:58px 0;
    }

    .testimonials-frame{
        padding:20px;
        border-radius:25px;
    }

    .testimonials-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .testimonials-instagram{
        flex-wrap:wrap;
        gap:14px;
    }

    .testimonials-instagram .btn{
        width:100%;
        margin:5px 0 0;
        text-align:center;
    }
}

@media(max-width:520px){
    .testimonials-hero-image img{
        object-position:58% center;
    }

    .testimonials-hero-content h1{
        font-size:49px;
    }

    .testimonials-hero-content p{
        font-size:15px;
    }

    .testimonials-heading h2{
        font-size:43px;
    }

    .testimonials-instagram strong{
        font-size:18px;
    }

    .testimonials-final{
        padding:58px 0;
    }
}

/* Fotos reais enviadas para os heros */
.testimonials-hero-image img{
    object-position:center center;
}

.sustainability-hero-image img{
    object-position:center center;
}

/* ==================================================
   QUEM SOMOS — SHOWCASE COM TEXTO EM MOVIMENTO
   Mantém a identidade visual existente e adiciona
   somente a nova apresentação da seção.
================================================== */
.about-story-showcase {
    position: relative;
    overflow: hidden;
}

.about-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: center;
}

.about-story-panel {
    min-width: 0;
}

.about-story-panel h2 {
    margin: 14px 0 26px;
    max-width: 650px;
}

.about-story-window {
    position: relative;
    height: 300px;
    overflow: hidden;
    padding: 0 6px 0 0;
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.about-story-track {
    animation: aboutStoryScroll 24s linear infinite;
    will-change: transform;
}

.about-story-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-right: 10px;
}

.about-story-copy p {
    margin: 0;
    line-height: 1.8;
}

@keyframes aboutStoryScroll {
    0%, 8% {
        transform: translateY(0);
    }
    92%, 100% {
        transform: translateY(-50%);
    }
}

.about-story-window:hover .about-story-track,
.about-story-window:focus-within .about-story-track {
    animation-play-state: paused;
}

.about-photo-carousel {
    position: relative;
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    background: #0c6338;
    box-shadow: 0 24px 60px rgba(34, 54, 42, 0.16);
}

.about-photo-card {
    position: absolute;
    inset: 0;
    padding: 18px;
    opacity: 0;
    transform: scale(1.025);
    animation: aboutPhotoFade 25s infinite;
}

.about-photo-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

.about-photo-card:nth-child(1) { animation-delay: 0s; }
.about-photo-card:nth-child(2) { animation-delay: 5s; }
.about-photo-card:nth-child(3) { animation-delay: 10s; }
.about-photo-card:nth-child(4) { animation-delay: 15s; }
.about-photo-card:nth-child(5) { animation-delay: 20s; }

@keyframes aboutPhotoFade {
    0%, 16% { opacity: 1; transform: scale(1); }
    20%, 100% { opacity: 0; transform: scale(1.025); }
}

.about-photo-caption {
    position: absolute;
    left: 38px;
    right: 38px;
    bottom: 34px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.about-photo-caption span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.about-photo-caption strong {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 600;
}

.about-photo-dots {
    position: absolute;
    z-index: 6;
    right: 36px;
    bottom: 38px;
    display: flex;
    gap: 7px;
}

.about-photo-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
}

.about-photo-dots span.is-active {
    width: 24px;
    border-radius: 10px;
    background: #B85F3D;
}

@media (max-width: 900px) {
    .about-showcase-grid {
        grid-template-columns: 1fr;
    }

    .about-photo-carousel {
        min-height: 430px;
    }
}

@media (max-width: 600px) {
    .about-story-window {
        height: 270px;
    }

    .about-photo-carousel {
        min-height: 340px;
        border-radius: 20px;
    }

    .about-photo-card {
        padding: 10px;
    }

    .about-photo-card img {
        border-radius: 14px;
    }

    .about-photo-caption {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .about-photo-dots {
        right: 24px;
        bottom: 28px;
    }
}
.social-actions-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(118deg, var(--green-deep) 0%, var(--green-dark) 62%, #1f9a4c 100%);
    color: var(--white);
    padding: 76px 0 68px;
}

.social-actions-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -190px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025);
}

.social-actions-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    gap: 70px;
    align-items: end;
}

.social-actions-hero-copy h1 {
    margin: 14px 0 20px;
    max-width: 760px;
    font-family: var(--font-title);
    font-size: clamp(52px, 7vw, 88px);
    line-height: .96;
    font-weight: 500;
    letter-spacing: -.04em;
}

.social-actions-hero-copy h1 em {
    color: var(--yellow);
    font-style: normal;
}

.social-actions-hero-copy p {
    max-width: 760px;
    color: rgba(255,255,255,.84);
    font-size: 17px;
}

.social-actions-hero-note {
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 28px;
    margin-bottom: 6px;
}

.social-actions-hero-note span {
    display: block;
    margin-bottom: 12px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.social-actions-hero-note strong {
    display: block;
    font-family: var(--font-title);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 500;
}

.social-actions-intro {
    padding: 54px 0 48px;
    background: var(--off-white);
}

.social-actions-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: end;
}

.social-actions-intro h2,
.social-actions-heading h2 {
    margin-top: 10px;
    font-family: var(--font-title);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.025em;
}

.social-actions-intro p {
    max-width: 680px;
    color: var(--gray-600);
    font-size: 16px;
}

.social-actions-section {
    padding: 38px 0 72px;
    background: var(--gray-50);
}

.social-actions-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 30px;
}

.social-actions-heading h2 {
    max-width: 700px;
}

.social-actions-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.social-action-card {
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    box-shadow: var(--shadow-small);
    transition: transform .25s ease, box-shadow .25s ease;
}

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

.social-action-image {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.social-action-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.social-action-card:hover .social-action-image img {
    transform: scale(1.04);
}

.social-action-image span {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
}

.social-action-content {
    padding: 20px 20px 22px;
}

.social-action-content > span {
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .17em;
}

.social-action-content h3 {
    margin: 7px 0 10px;
    font-family: var(--font-title);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 500;
}

.social-action-content p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.55;
}

.social-actions-impact {
    padding: 58px 0;
    background: var(--earth-dark);
    color: var(--white);
}

.social-actions-impact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.social-actions-impact h2 {
    max-width: 750px;
    margin-top: 8px;
    font-family: var(--font-title);
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.05;
    font-weight: 500;
}

.social-actions-impact .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .social-actions-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .social-actions-hero-grid {
        gap: 45px;
    }
}

@media (max-width: 760px) {
    .social-actions-hero {
        padding: 56px 0 52px;
    }

    .social-actions-hero-grid,
    .social-actions-intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .social-actions-hero-copy h1 {
        font-size: clamp(48px, 15vw, 70px);
    }

    .social-actions-hero-note {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.25);
        padding: 22px 0 0;
    }

    .social-actions-heading {
        display: block;
    }

    .social-actions-cards {
        grid-template-columns: 1fr;
    }

    .social-action-image {
        height: 220px;
    }

    .social-actions-impact-inner {
        display: block;
    }

    .social-actions-impact .btn {
        display: inline-flex;
        margin-top: 25px;
    }
}


/* ============================================================
   HOME — LOCALIZAÇÃO / MAPA COMPACTO
   ============================================================ */
.home-location{
    position:relative;
    padding:72px 5vw 78px;
    background:linear-gradient(180deg,#f7f1df 0%,#fffaf0 100%);
    overflow:hidden;
}
.home-location::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    right:-150px;
    top:-180px;
    background:rgba(255,196,0,.14);
    pointer-events:none;
}
.home-location-inner{
    position:relative;
    z-index:1;
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(280px,.82fr) minmax(520px,1.45fr);
    gap:42px;
    align-items:center;
}
.home-location-copy{
    padding:8px 0 8px 8px;
}
.home-location-kicker{
    display:inline-block;
    margin-bottom:15px;
    color:#078b4a;
    font-size:11px;
    font-weight:800;
    letter-spacing:.24em;
    text-transform:uppercase;
}
.home-location-copy h2{
    margin:0 0 18px;
    color:#315B45;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(38px,4vw,62px);
    font-weight:400;
    line-height:.96;
    letter-spacing:-.035em;
}
.home-location-copy h2 em{
    color:#e8ad00;
    font-style:normal;
}
.home-location-copy p{
    max-width:430px;
    margin:0 0 25px;
    color:#555b57;
    font-size:16px;
    line-height:1.7;
}
.home-location-address{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-left:16px;
    margin-bottom:25px;
    border-left:3px solid #B85F3D;
    color:#3f4542;
    font-size:14px;
    line-height:1.55;
}
.home-location-address strong{color:#315B45;font-size:15px}
.home-location-button{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:13px 18px;
    border-radius:999px;
    background:#315B45;
    color:#fff !important;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    text-decoration:none !important;
    text-transform:uppercase;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.home-location-button span{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:50%;
    background:#B85F3D;
    color:#315B45;
    font-size:16px;
}
.home-location-button:hover{
    background:#087742;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(7,95,53,.18);
}
.home-location-map-frame{
    position:relative;
    min-height:340px;
    overflow:hidden;
    border:7px solid #fff;
    border-radius:28px;
    background:#dfe8df;
    box-shadow:0 20px 55px rgba(30,58,43,.16);
}
.home-location-map-frame iframe{
    display:block;
    width:100%;
    height:340px;
    border:0;
}
.home-location-pin{
    position:absolute;
    left:18px;
    bottom:18px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:#315B45;
    box-shadow:0 7px 22px rgba(0,0,0,.13);
    font-size:12px;
    font-weight:800;
    backdrop-filter:blur(8px);
}
.home-location-pin span{color:#e53935;font-size:18px;line-height:0}
@media(max-width:900px){
    .home-location{padding:58px 22px 64px}
    .home-location-inner{grid-template-columns:1fr;gap:28px}
    .home-location-copy{padding:0}
    .home-location-copy p{max-width:650px}
}
@media(max-width:600px){
    .home-location-copy h2{font-size:42px}
    .home-location-map-frame{min-height:280px;border-width:5px;border-radius:22px}
    .home-location-map-frame iframe{height:280px}
    .home-location-pin{left:12px;bottom:12px;font-size:11px}
}




/* ==========================================================
   QUEM SOMOS — REFINAMENTO VISUAL
   Redesign visual restrito à página sobre.html.
   Não altera a identidade das demais páginas.
========================================================== */

.about-page{
    background:
        radial-gradient(circle at 88% 8%, rgba(244,196,0,.055), transparent 24rem),
        var(--white);
}

/* Hero: mais editorial, com presença fotográfica */
.about-page .page-hero{
    min-height: 570px;
    background:
        linear-gradient(110deg, rgba(4,62,36,.98) 0%, rgba(7,90,50,.92) 54%, rgba(7,90,50,.68) 100%);
}

.about-page .page-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-240px;
    border:1px solid rgba(244,196,0,.28);
    border-radius:50%;
    box-shadow:
        0 0 0 40px rgba(244,196,0,.035),
        0 0 0 80px rgba(244,196,0,.018);
}

.about-page .page-hero-container{
    min-height:570px;
    grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);
    gap:70px;
}

.about-page .page-hero-content{
    max-width:700px;
    padding:72px 0;
}

.about-page .page-hero-content .section-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 13px;
    border:1px solid rgba(244,196,0,.34);
    border-radius:999px;
    background:rgba(244,196,0,.08);
    letter-spacing:.18em;
}

.about-page .page-hero-content h1{
    margin-top:20px;
    font-size:clamp(52px,6.2vw,82px);
    text-wrap:balance;
}

.about-page .page-hero-content p{
    max-width:570px;
    font-size:16px;
    line-height:1.85;
    color:rgba(255,255,255,.82);
}

.about-page .page-hero-image{
    position:relative;
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-page .page-hero-image::before{
    content:"";
    position:absolute;
    inset:9% -3% 9% 3%;
    border:1px solid rgba(255,255,255,.18);
    border-radius:28px;
    transform:rotate(2deg);
}

.about-page .page-hero-image::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-4px;
    bottom:12%;
    border-radius:50%;
    background:var(--yellow);
    opacity:.95;
}

.about-page .page-hero-image img{
    position:relative;
    z-index:2;
    width:100%;
    max-width:560px;
    border-radius:22px;
    filter:saturate(1.04);
    box-shadow:0 28px 70px rgba(0,0,0,.25);
}

/* História: composição mais sofisticada */
.about-page .about-story{
    padding:105px 0;
    background:
        linear-gradient(180deg,#fff 0%,#F7F4EC 100%);
}

.about-page .about-showcase-grid{
    align-items:center;
    gap:78px;
}

.about-page .about-story-panel{
    position:relative;
    padding-left:5px;
}

.about-page .about-story-panel::before{
    content:"01";
    position:absolute;
    left:-8px;
    top:-64px;
    font-family:var(--font-title);
    font-size:150px;
    line-height:1;
    color:rgba(7,90,50,.045);
    pointer-events:none;
}

.about-page .about-story-panel h2{
    position:relative;
    z-index:1;
    font-size:clamp(40px,4.5vw,62px);
    line-height:1.04;
    margin-bottom:28px;
}

.about-page .about-story-window{
    height:270px;
    max-width:620px;
}

.about-page .about-story-copy p{
    font-size:15px;
    line-height:1.85;
    color:var(--gray-600);
}

.about-page .about-photo-carousel{
    min-height:500px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(15,40,25,.16);
    background:var(--green-deep);
}

.about-page .about-photo-card img{
    transform:scale(1.01);
}

.about-page .about-photo-caption{
    left:28px;
    right:28px;
    bottom:27px;
    padding:18px 20px;
    border-radius:15px;
    background:rgba(4,45,27,.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.about-page .about-photo-caption span{
    color:var(--yellow);
    letter-spacing:.15em;
}

.about-page .about-photo-caption strong{
    font-size:19px;
}

/* Link mais elegante */
.about-page .about-story-panel .text-link{
    display:inline-flex;
    align-items:center;
    gap:13px;
    margin-top:18px;
    font-weight:700;
    letter-spacing:.08em;
}

.about-page .about-story-panel .text-link span{
    width:35px;
    height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--yellow);
    color:var(--green-deep);
    transition:transform .25s ease;
}

.about-page .about-story-panel .text-link:hover span{
    transform:translateX(5px);
}

/* Propósito: faixa mais impactante */
.about-page .about-highlight{
    position:relative;
    overflow:hidden;
    padding:105px 0;
    background:
        linear-gradient(125deg,var(--green-deep),#0b7444);
}

.about-page .about-highlight::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-280px;
    border:75px solid rgba(255,255,255,.055);
    border-radius:50%;
}

.about-page .about-highlight::after{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    left:-90px;
    bottom:-95px;
    border-radius:50%;
    background:rgba(244,196,0,.08);
}

.about-page .about-highlight-grid{
    position:relative;
    z-index:2;
    align-items:end;
    gap:70px;
}

.about-page .about-highlight h2{
    max-width:720px;
    font-size:clamp(44px,5.2vw,72px);
    line-height:1;
    text-wrap:balance;
}

.about-page .about-highlight p{
    max-width:470px;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.75);
}

/* Valores: cards com mais profundidade */
.about-page .about-values{
    padding:110px 0;
    background:#F7F4EC;
}

.about-page .about-values .section-heading{
    margin-bottom:48px;
}

.about-page .about-values .section-heading h2{
    font-size:clamp(40px,4.5vw,60px);
}

.about-page .about-values-grid{
    gap:22px;
}

.about-page .value-card{
    position:relative;
    min-height:255px;
    padding:34px 32px 32px;
    border:1px solid rgba(7,90,50,.10);
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 35px rgba(7,90,50,.055);
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.about-page .value-card::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-50px;
    bottom:-50px;
    border-radius:50%;
    background:rgba(244,196,0,.13);
}

.about-page .value-card:hover{
    transform:translateY(-7px);
    border-color:rgba(7,90,50,.20);
    box-shadow:0 22px 45px rgba(7,90,50,.11);
}

.about-page .value-number{
    display:inline-flex;
    width:45px;
    height:45px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--green-deep);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
}

.about-page .value-card h3{
    margin-top:35px;
    font-family:var(--font-title);
    font-size:32px;
    color:var(--green-deep);
}

.about-page .value-card p{
    max-width:330px;
    line-height:1.75;
}

/* Território: imagem + texto com moldura editorial */
.about-page .about-territory{
    padding:110px 0;
    background:#fff;
}

.about-page .about-territory-grid{
    gap:70px;
    align-items:center;
}

.about-page .about-territory-image{
    position:relative;
}

.about-page .about-territory-image::before{
    content:"";
    position:absolute;
    inset:20px -20px -20px 20px;
    border:2px solid var(--yellow);
    border-radius:22px;
    z-index:0;
}

.about-page .about-territory-image img{
    position:relative;
    z-index:1;
    width:100%;
    border-radius:22px;
    box-shadow:0 20px 55px rgba(0,0,0,.14);
}

.about-page .about-territory-content h2{
    font-size:clamp(42px,4.5vw,62px);
    line-height:1.04;
    margin:13px 0 25px;
}

.about-page .about-territory-content p{
    max-width:560px;
    line-height:1.85;
}

/* CTA: mais premium */
.about-page .about-cta{
    padding:95px 0;
    background:var(--yellow);
}

.about-page .about-cta-content{
    max-width:850px;
}

.about-page .about-cta-content h2{
    font-size:clamp(46px,5.5vw,70px);
    text-wrap:balance;
}

.about-page .about-cta-content p{
    font-size:16px;
    line-height:1.8;
}

/* Mobile */
@media (max-width: 900px){
    .about-page .page-hero,
    .about-page .page-hero-container{
        min-height:auto;
    }

    .about-page .page-hero-container{
        grid-template-columns:1fr;
        gap:28px;
        padding-top:30px;
        padding-bottom:55px;
    }

    .about-page .page-hero-image{
        min-height:310px;
    }

    .about-page .about-story{
        padding:75px 0;
    }

    .about-page .about-showcase-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .about-page .about-photo-carousel{
        min-height:420px;
    }

    .about-page .about-highlight-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-page .about-territory-grid{
        grid-template-columns:1fr;
        gap:55px;
    }
}

@media (max-width: 560px){
    .about-page .page-hero-content h1{
        font-size:clamp(43px,13vw,60px);
    }

    .about-page .page-hero-image{
        min-height:250px;
    }

    .about-page .about-photo-carousel{
        min-height:350px;
        border-radius:18px;
    }

    .about-page .about-values,
    .about-page .about-territory{
        padding:78px 0;
    }

    .about-page .about-highlight{
        padding:78px 0;
    }

    .about-page .value-card{
        min-height:auto;
    }
}


/* ==========================================================
   QUEM SOMOS — AJUSTE DE PROPORÇÃO
   Cards menores + hero ocupando toda a área verde.
========================================================== */

/* Hero: imagem ocupa toda a área visual verde */
.about-page .page-hero{
    min-height:600px;
    position:relative;
    background:var(--green-deep);
}

.about-page .page-hero-container{
    min-height:600px;
    grid-template-columns:1fr 1fr;
    gap:0;
    width:100%;
    max-width:none;
}

.about-page .page-hero-content{
    position:relative;
    z-index:3;
    width:min(680px, calc(100% - 80px));
    margin-left:max(40px, calc((100vw - var(--container)) / 2));
    padding:75px 0;
    justify-self:start;
}

.about-page .page-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    max-width:none;
    z-index:1;
    overflow:hidden;
}

.about-page .page-hero-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(90deg,
            rgba(4,62,36,.98) 0%,
            rgba(4,62,36,.84) 34%,
            rgba(4,62,36,.34) 62%,
            rgba(4,62,36,.08) 100%);
    border:0;
    border-radius:0;
    transform:none;
}

.about-page .page-hero-image::after{
    display:none;
}

.about-page .page-hero-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    border-radius:0;
    box-shadow:none;
    opacity:.88;
}

/* Texto branco sobre o verde/imagem para manter contraste */
.about-page .page-hero-content h1,
.about-page .page-hero-content p{
    color:#fff;
}

.about-page .page-hero-content .section-label{
    color:var(--yellow);
}

/* Valores: três cards menores lado a lado */
.about-page .about-values-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
}

.about-page .value-card{
    min-height:0;
    height:100%;
    padding:26px 24px 25px;
    border-radius:16px;
}

.about-page .value-number{
    width:38px;
    height:38px;
    font-size:11px;
}

.about-page .value-card h3{
    margin-top:25px;
    font-size:26px;
}

.about-page .value-card p{
    font-size:13px;
    line-height:1.65;
    max-width:none;
}

/* Mantém o restante da página mais compacto */
.about-page .about-values{
    padding:85px 0;
}

.about-page .about-values .section-heading{
    margin-bottom:35px;
}

@media (max-width:900px){
    .about-page .page-hero,
    .about-page .page-hero-container{
        min-height:560px;
    }

    .about-page .page-hero-content{
        width:calc(100% - 48px);
        margin-left:24px;
        padding:60px 0;
    }

    .about-page .about-values-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:680px){
    .about-page .page-hero,
    .about-page .page-hero-container{
        min-height:600px;
    }

    .about-page .page-hero-content{
        width:calc(100% - 40px);
        margin-left:20px;
        padding:55px 0;
    }

    .about-page .page-hero-image::before{
        background:linear-gradient(90deg,
            rgba(4,62,36,.96),
            rgba(4,62,36,.64));
    }

    .about-page .about-values-grid{
        grid-template-columns:1fr;
        gap:15px;
    }
}


/* ==========================================================
   QUEM SOMOS — CORREÇÃO FINAL DOS 3 VALORES
========================================================== */

/* Os três valores devem formar uma única linha no desktop. */
.about-page .about-values-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
    align-items:stretch !important;
}

/* Cards compactos */
.about-page .about-values-grid .value-card{
    min-width:0;
    min-height:190px !important;
    height:auto !important;
    padding:24px 24px 22px !important;
    border-radius:16px;
}

.about-page .about-values-grid .value-card h3{
    margin:20px 0 8px !important;
    font-size:26px !important;
}

.about-page .about-values-grid .value-card p{
    margin:0 !important;
    max-width:none !important;
    font-size:13px !important;
    line-height:1.6 !important;
}

/* O bloco verde precisa ter texto claramente branco. */
.about-page .about-highlight h2{
    color:#fff !important;
}

.about-page .about-highlight .section-label{
    color:var(--yellow) !important;
}

.about-page .about-highlight p{
    color:rgba(255,255,255,.82) !important;
}

/* Evita que regras genéricas de títulos sobrescrevam a cor. */
.about-page .about-highlight-grid > div,
.about-page .about-highlight-grid > div h2,
.about-page .about-highlight-grid > div .section-label{
    color:#fff !important;
}

.about-page .about-highlight-grid > div .section-label{
    color:var(--yellow) !important;
}

@media (max-width:900px){
    .about-page .about-values-grid{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    }
}

@media (max-width:680px){
    .about-page .about-values-grid{
        grid-template-columns:1fr !important;
    }
}


/* ==========================================================
   QUEM SOMOS — MELHOR LEITURA DO HERO
   Sombreamento sobre a foto sem esconder a imagem.
========================================================== */

.about-page .page-hero-image::before{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.52) 32%,
            rgba(0,0,0,.25) 58%,
            rgba(0,0,0,.08) 100%
        ) !important;
}

.about-page .page-hero-content{
    text-shadow: 0 3px 16px rgba(0,0,0,.55);
}

.about-page .page-hero-content h1{
    color:#fff !important;
    text-shadow:
        0 3px 18px rgba(0,0,0,.75),
        0 1px 3px rgba(0,0,0,.9);
}

.about-page .page-hero-content p{
    color:#fff !important;
    text-shadow:
        0 2px 10px rgba(0,0,0,.8);
}

.about-page .page-hero-content .section-label{
    text-shadow:0 2px 8px rgba(0,0,0,.6);
}


/* ==========================================================
   QUEM SOMOS — CONTRASTE DO TEXTO DO HERO
========================================================== */

.about-page .page-hero-content{
    position:relative;
    z-index:5;
}

.about-page .page-hero-content::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-55px;
    top:-45px;
    width:760px;
    height:440px;
    background:
        radial-gradient(
            ellipse at 42% 45%,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.48) 38%,
            rgba(0,0,0,.20) 62%,
            rgba(0,0,0,0) 78%
        );
    filter:blur(10px);
    pointer-events:none;
}

.about-page .page-hero-content h1{
    color:#fff !important;
    text-shadow:
        0 4px 8px rgba(0,0,0,.95),
        0 8px 28px rgba(0,0,0,.72) !important;
}

.about-page .page-hero-content p{
    color:#fff !important;
    text-shadow:
        0 2px 5px rgba(0,0,0,1),
        0 5px 16px rgba(0,0,0,.75) !important;
}

/* Rolagem suave para a história */
html{
    scroll-behavior:smooth;
}

#nossa-historia{
    scroll-margin-top:90px;
}


/* ==========================================================
   GALERIA — MUSEU VISUAL
   Alteração solicitada: fundo marrom -> verde.
   Somente a identidade cromática desta seção.
========================================================== */

.gallery-museum{
    background:var(--green-deep);
}

.gallery-museum-frame{
    background:#315B45;
}

.gallery-museum-main{
    background:var(--green-dark);
}


/* ==========================================================
   CRIANDO FUTURO — CTA DE INSCRIÇÃO NOS CURSOS
========================================================== */

.cf-hero-copy .cf-course-cta{
    display:inline-flex;
    align-items:center;
    gap:18px;
    margin-top:30px;
    padding:15px 18px 15px 23px;
    border-radius:999px;
    background:#B85F3D;
    color:#315B45;
    font-size:13px;
    font-weight:800;
    letter-spacing:.075em;
    line-height:1;
    text-transform:uppercase;
    text-decoration:none;
    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.12) inset;
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.cf-hero-copy .cf-course-cta:hover{
    background:#B85F3D;
    color:#315B45;
    transform:translateY(-3px);
    box-shadow:
        0 16px 34px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.18) inset;
}

.cf-course-cta-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#315B45;
    color:#fff;
    font-size:19px;
    line-height:1;
    transition:transform .25s ease;
}

.cf-course-cta:hover .cf-course-cta-arrow{
    transform:translateX(3px);
}

@media (max-width:700px){
    .cf-hero-copy .cf-course-cta{
        margin-top:24px;
        font-size:11px;
        padding:13px 15px 13px 18px;
        gap:12px;
    }

    .cf-course-cta-arrow{
        width:31px;
        height:31px;
    }
}


/* ==========================================================
   POLÍTICA DE PRIVACIDADE — MODAL
   Adicionado sem alterar componentes existentes.
========================================================== */

.privacy-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
}

.privacy-modal.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.privacy-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(3px);
}

.privacy-modal-dialog{
    position:relative;
    z-index:1;
    width:min(820px, 100%);
    max-height:min(78vh, 720px);
    overflow:hidden;
    background:#fff;
    border-radius:18px;
    box-shadow:0 25px 70px rgba(0,0,0,.30);
    transform:translateY(18px) scale(.98);
    transition:transform .22s ease;
}

.privacy-modal.is-open .privacy-modal-dialog{
    transform:translateY(0) scale(1);
}

.privacy-modal-content{
    max-height:min(78vh, 720px);
    overflow-y:auto;
    padding:42px 48px 46px;
    color:#444;
}

.privacy-modal-content h2{
    margin:8px 0 28px;
    color:var(--green-deep);
    font-size:clamp(32px,4vw,48px);
}

.privacy-modal-content h3{
    margin:28px 0 8px;
    color:var(--green-deep);
    font-size:18px;
}

.privacy-modal-content p{
    margin:0;
    line-height:1.7;
}

.privacy-modal-content a{
    color:var(--green-dark);
    font-weight:700;
    text-decoration:underline;
}

.privacy-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:var(--green-deep);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.privacy-modal-close:hover{
    background:var(--green-dark);
}

body.privacy-modal-open{
    overflow:hidden;
}

@media (max-width:600px){
    .privacy-modal{
        padding:12px;
    }

    .privacy-modal-dialog{
        max-height:88vh;
        border-radius:14px;
    }

    .privacy-modal-content{
        max-height:88vh;
        padding:36px 24px 30px;
    }
}

@media (prefers-reduced-motion:reduce){
    .privacy-modal,
    .privacy-modal-dialog{
        transition:none;
    }
}


/* Acessibilidade — regras novas e isoladas */
.skip-link{
    position:fixed;
    left:16px;
    top:16px;
    z-index:99999;
    transform:translateY(-180%);
    padding:12px 18px;
    border-radius:8px;
    background:var(--green-deep);
    color:#fff;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.skip-link:focus{
    transform:translateY(0);
    outline:3px solid var(--yellow);
    outline-offset:3px;
}
:focus-visible{
    outline:3px solid var(--yellow);
    outline-offset:3px;
}


/* ==========================================================
   SOBRE — TERRITÓRIO INTEGRADO AO BLOCO VERDE
   Ajuste isolado da seção solicitada.
========================================================== */

.about-page .about-highlight-territory{
    padding:88px 0;
}

.about-page .about-highlight-territory-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 470px);
    align-items:center;
    gap:70px;
}

.about-page .about-highlight-territory-content{
    min-width:0;
}

.about-page .about-highlight-territory-content h2{
    max-width:720px;
    margin:14px 0 25px;
    font-size:clamp(44px,5.2vw,72px);
    line-height:1;
    color:#fff;
    text-wrap:balance;
}

.about-page .about-highlight-territory-content p{
    max-width:620px;
    margin:0 0 12px;
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.82);
}

.about-page .about-highlight-territory-image{
    position:relative;
    width:100%;
    max-width:470px;
    justify-self:end;
}

.about-page .about-highlight-territory-image::before{
    content:"";
    position:absolute;
    inset:14px -12px -12px 12px;
    border:2px solid var(--yellow);
    border-radius:18px;
    z-index:0;
}

.about-page .about-highlight-territory-image img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
}

@media (max-width:900px){
    .about-page .about-highlight-territory-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .about-page .about-highlight-territory-image{
        justify-self:start;
        max-width:520px;
    }
}

@media (max-width:560px){
    .about-page .about-highlight-territory{
        padding:70px 0;
    }

    .about-page .about-highlight-territory-content h2{
        font-size:clamp(38px,11vw,54px);
    }

    .about-page .about-highlight-territory-image{
        max-width:calc(100% - 14px);
    }
}




/* SOBRE — texto automático do carrossel maior */
.about-page .about-photo-caption{
    font-size:16px;
    line-height:1.4;
}

.about-page .about-photo-caption h3,
.about-page .about-photo-caption h2{
    font-size:clamp(21px, 1.8vw, 30px);
    line-height:1.25;
}

.about-page .about-photo-caption p{
    font-size:clamp(14px, 1.15vw, 18px);
    line-height:1.5;
}


/* ==========================================================
   INDEX — SEÇÃO INSTITUCIONAL
   Versão compacta em verde.
========================================================== */

.index-actuation-strip{
    position:relative;
    padding:54px 0 58px;
    background:var(--green-deep);
    overflow:hidden;
}

.index-actuation-strip::before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    border-radius:50%;
    border:1px solid rgba(255,193,7,.22);
    right:-90px;
    top:-110px;
}

.index-actuation-strip::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
    left:-45px;
    bottom:-45px;
}

.index-actuation-intro{
    position:relative;
    z-index:1;
    max-width:720px;
    margin-bottom:30px;
}

.index-actuation-intro .section-label{
    color:var(--yellow);
}

.index-actuation-intro h2{
    margin:9px 0 0;
    color:#fff;
    font-family:var(--font-title);
    font-size:clamp(34px,4.2vw,52px);
    line-height:1.02;
    text-wrap:balance;
}

.index-actuation-items{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.18);
}

.index-actuation-item{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:16px;
    padding:25px 28px 8px 0;
    border-right:1px solid rgba(255,255,255,.18);
}

.index-actuation-item + .index-actuation-item{
    padding-left:28px;
}

.index-actuation-item:last-child{
    border-right:0;
}

.index-actuation-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex:none;
    border-radius:50%;
    background:var(--yellow);
    color:var(--green-deep);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.index-actuation-item h3{
    margin:0 0 5px;
    color:#fff;
    font-family:var(--font-title);
    font-size:22px;
}

.index-actuation-item p{
    max-width:290px;
    margin:0;
    color:rgba(255,255,255,.74);
    font-size:13px;
    line-height:1.5;
}

@media (max-width:800px){
    .index-actuation-strip{
        padding:48px 0 52px;
    }

    .index-actuation-items{
        grid-template-columns:1fr;
    }

    .index-actuation-item,
    .index-actuation-item + .index-actuation-item{
        padding:20px 0;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.18);
    }

    .index-actuation-item:last-child{
        border-bottom:0;
    }
}

/* ==========================================================
   MOBILE — CAMADA DE SEGURANÇA
   Não altera JavaScript, carrosséis ou imagens.
========================================================== */
@media (max-width:767px){
    html,body{max-width:100%;overflow-x:hidden}
    img,video,iframe{max-width:100%}
    input,textarea,select,button{max-width:100%}
    a,button{-webkit-tap-highlight-color:transparent}
    h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}
    .privacy-modal,.privacy-modal-dialog{box-sizing:border-box;width:100%}
    .index-actuation-strip .container{width:100%;box-sizing:border-box}
}
@media (max-width:480px){
    .privacy-modal{padding:8px}
    .privacy-modal-content{padding-left:20px;padding-right:20px}
    .index-actuation-intro h2{font-size:clamp(30px,9vw,42px)}
}


/* ==========================================================
   GALERIA / ACERVO — AJUSTE VISUAL
   Fundo inspirado na identidade da home e fotos sem corte.
========================================================== */

/* Fundo da área principal da galeria */
.gallery-page,
.galeria-page,
.page-gallery,
.museu-page,
.acervo-page{
    background-color:#4a2b1f;
    background-image:
        linear-gradient(rgba(67,37,25,.72),rgba(67,37,25,.72)),
        url("../img/site/hero1.svg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* Quando a página usa o fundo no elemento principal, preserve a
   identidade sem interferir no conteúdo interno. */
.gallery-page main,
.galeria-page main,
.page-gallery main,
.museu-page main,
.acervo-page main{
    background:transparent;
}

/* Fotos do acervo: preservar a imagem inteira dentro do quadro. */
.gallery-page img,
.galeria-page img,
.page-gallery img,
.museu-page img,
.acervo-page img{
    max-width:100%;
}

/* Painéis principais e miniaturas do acervo */
.gallery-page .gallery-image img,
.gallery-page .gallery-main img,
.gallery-page .gallery-thumb img,
.gallery-page .acervo-image img,
.galeria-page .gallery-image img,
.galeria-page .gallery-main img,
.galeria-page .gallery-thumb img,
.galeria-page .acervo-image img,
.museu-page .gallery-image img,
.museu-page .gallery-main img,
.museu-page .gallery-thumb img,
.museu-page .acervo-image img{
    object-fit:contain;
    object-position:center;
}

/* O quadro continua respeitando o espaço disponível; a foto não é
   cortada para preencher o quadro. */
.gallery-page .gallery-image,
.gallery-page .gallery-main,
.gallery-page .gallery-thumb,
.gallery-page .acervo-image,
.galeria-page .gallery-image,
.galeria-page .gallery-main,
.galeria-page .gallery-thumb,
.galeria-page .acervo-image,
.museu-page .gallery-image,
.museu-page .gallery-main,
.museu-page .gallery-thumb,
.museu-page .acervo-image{
    overflow:hidden;
}

/* Mobile */
@media (max-width:767px){
    .gallery-page,
    .galeria-page,
    .page-gallery,
    .museu-page,
    .acervo-page{
        background-attachment:scroll;
    }
}


/* ==========================================================
   GALERIA — AJUSTE FINAL
   1) Fundo com a mesma linguagem rupestre da Home.
   2) Fotos do museu preservadas integralmente.
========================================================== */

/* Fundo da página de galeria: usa o mesmo fundo rupestre já
   existente na identidade do site. */
body.gallery-page-body{
    background-color:#075d3a;
    background-image:
        linear-gradient(rgba(3,76,46,.78),rgba(3,76,46,.78)),
        url("../img/site/fundo-rupestre.svg");
    background-size:cover;
    background-position:center top;
    background-attachment:fixed;
}

/* A seção do museu deixa o fundo da página aparecer. */
body.gallery-page-body .gallery-museum{
    background:transparent;
}

/* O quadro mantém sua composição e dimensões, mas a foto principal
   não é mais ampliada/cortada para preencher o quadro. */
body.gallery-page-body .gallery-museum-main{
    background:#26342E;
}

body.gallery-page-body .gallery-museum-slide{
    transform:none;
}

body.gallery-page-body .gallery-museum-slide.is-active{
    transform:none;
}

body.gallery-page-body .gallery-museum-slide img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#26342E;
}

/* Miniaturas também preservam a foto inteira. */
body.gallery-page-body .gallery-museum-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#26342E;
}

/* Em telas menores, manter a mesma regra sem criar corte. */
@media (max-width:900px){
    body.gallery-page-body .gallery-museum-slide img,
    body.gallery-page-body .gallery-museum-thumb img{
        object-fit:contain;
    }
}

@media (max-width:600px){
    body.gallery-page-body{
        background-attachment:scroll;
    }
}


/* GALERIA — fotografias originais, sem filtro */
body.gallery-page-body .gallery-museum-slide::after{
    display:none !important;
}

body.gallery-page-body .gallery-museum-slide img,
body.gallery-page-body .gallery-museum-thumb img{
    filter:none !important;
    mix-blend-mode:normal !important;
}


/* IDENTIDADE — TOPO E RODAPÉ EM AZUL */
header,
.header,
.site-header,
footer,
.footer,
.site-footer{
    background-color:#315B45 !important;
}


/* ==========================================================
   AJUSTE PONTUAL — LATERAIS + TOPO/RODAPÉ + CTA FINAL
   Não altera imagens, JS, carrosséis ou animações.
========================================================== */

@media (min-width: 1200px) {
    /* As faixas laterais permanecem visíveis também nas áreas
       fixa do topo e do rodapé, alinhando tudo à largura útil do site. */
    header,
    .header,
    .site-header {
        left: 34px !important;
        right: 34px !important;
        width: calc(100% - 68px) !important;
    }

    footer,
    .footer,
    .site-footer {
        width: calc(100% - 68px) !important;
        margin-left: 34px !important;
        margin-right: 34px !important;
    }

    /* Mantém as faixas laterais acima das áreas azuis. */
    body::before,
    body::after {
        z-index: 10000 !important;
    }

    header,
    .header,
    .site-header,
    footer,
    .footer,
    .site-footer {
        z-index: 9999 !important;
    }

    /* Desce o conteúdo da última seção para equilibrar o espaço vertical. */
    .donation-photo-content {
        padding-top: 150px !important;
        padding-bottom: 70px !important;
    }
}

@media (max-width: 1199px) {
    /* Sem faixas laterais neste breakpoint, o topo e o rodapé
       continuam ocupando toda a largura normalmente. */
    header,
    .header,
    .site-header,
    footer,
    .footer,
    .site-footer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 760px) {
    .donation-photo-content {
        padding-top: 70px !important;
        padding-bottom: 55px !important;
    }
}


/* ==========================================================
   CORREÇÃO PONTUAL — MENU MOBILE
   Apenas melhora o contraste quando o menu hambúrguer é aberto.
   Desktop, links e funcionalidades existentes permanecem iguais.
========================================================== */

@media (max-width: 760px) {
    .header .menu-toggle span,
    .menu-toggle span {
        background: #FFFFFF !important;
    }

    .header .nav,
    .nav {
        background: #315B45 !important;
        border-top-color: rgba(255,255,255,.18) !important;
    }

    .header .nav .nav-link,
    .nav .nav-link,
    .header .nav .nav-dropdown-toggle,
    .nav .nav-dropdown-toggle {
        color: #FFFFFF !important;
    }

    .header .nav .nav-link:hover,
    .header .nav .nav-link:focus,
    .header .nav .nav-link:active,
    .nav .nav-link:hover,
    .nav .nav-link:focus,
    .nav .nav-link:active {
        color: #B85F3D !important;
    }

    .header .nav .nav-dropdown-menu,
    .nav .nav-dropdown-menu {
        background: rgba(0,0,158,.96) !important;
        border-color: rgba(255,255,255,.18) !important;
    }

    .header .nav .nav-dropdown-menu a,
    .nav .nav-dropdown-menu a {
        color: #FFFFFF !important;
    }

    .header .nav .nav-dropdown-menu a small,
    .nav .nav-dropdown-menu a small {
        color: rgba(255,255,255,.78) !important;
    }

    .header .nav .nav-dropdown-menu a:hover,
    .header .nav .nav-dropdown-menu a:focus,
    .nav .nav-dropdown-menu a:hover,
    .nav .nav-dropdown-menu a:focus {
        color: #B85F3D !important;
        background: rgba(255,255,255,.10) !important;
    }
}


/* ==========================================================
   IDENTIDADE CROMÁTICA — PROBRASIL NORDESTE
   Ajuste exclusivo de cores. Estrutura, imagens, animações,
   JavaScript, carrosséis e responsividade permanecem intactos.
========================================================== */
:root{
    --green:#315B45;
    --green-light:#66815C;
    --green-dark:#315B45;
    --green-deep:#315B45;
    --green-soft:#F7F4EC;

    --earth:#B85F3D;
    --earth-light:#B85F3D;
    --earth-dark:#315B45;
    --earth-deep:#26342E;
    --earth-mid:#66815C;
    --ochre:#B85F3D;

    --yellow:#B85F3D;
    --yellow-light:#B85F3D;
    --yellow-soft:#E6D5B8;
    --yellow-dark:#B85F3D;

    --off-white:#F7F4EC;
    --gray-50:#F7F4EC;
    --gray-100:#F7F4EC;
    --gray-200:#E6D5B8;
    --gray-400:#657069;
    --gray-500:#657069;
    --gray-600:#657069;
    --gray-700:#26342E;
    --gray-800:#26342E;
    --black:#26342E;
}

/* Base clara e institucional */
body{
    color:#26342E;
    background-color:#F7F4EC;
}

/* Destaques de texto secundário */
p,
.section-subtitle,
.text-muted{
    color:#657069;
}

/* Terracota reservado para chamadas e foco visual */
:where(a, button, .btn, .button, .cta, .cta-button):focus-visible{
    outline-color:#B85F3D;
}


/* ==========================================================
   AJUSTE FINAL DE CONTRASTE
   Regra solicitada:
   - fundos terracota: texto branco;
   - fundos verdes: texto branco;
   - botões de doação: amarelos com texto verde.
   Nenhuma regra de layout, imagem, animação ou JavaScript é alterada.
========================================================== */

:root {
    --donation-yellow: #FFC400;
    --donation-yellow-hover: #FFD24A;
}

/* ---------------- TERRACOTA: TEXTO BRANCO ---------------- */

.impact-section,
.donation-cta,
.about-cta,
.projects-cta,
.transparency-contact-box {
    color: #FFFFFF !important;
}

.impact-section .section-heading h2,
.impact-section .section-heading p,
.impact-section .impact-item strong,
.impact-section .impact-item span,
.donation-content h2,
.donation-content p,
.about-cta-content h2,
.about-cta-content p,
.projects-cta h2,
.transparency-contact-box h2,
.transparency-contact-box p {
    color: #FFFFFF !important;
}

/* Divisórias e detalhes nas faixas terracota com contraste claro. */
.impact-grid {
    border-top-color: rgba(255,255,255,.28) !important;
    border-bottom-color: rgba(255,255,255,.28) !important;
}

.impact-item {
    border-right-color: rgba(255,255,255,.28) !important;
}

.impact-pattern,
.donation-pattern,
.about-cta::after {
    border-color: rgba(255,255,255,.14) !important;
}

/* CTAs que ficam sobre fundo terracota permanecem legíveis. */
.about-cta .btn-primary,
.projects-cta .btn,
.transparency-contact-box .btn,
.donation-cta .btn-light {
    background: var(--donation-yellow) !important;
    color: #315B45 !important;
}

.about-cta .btn-primary:hover,
.projects-cta .btn:hover,
.transparency-contact-box .btn:hover,
.donation-cta .btn-light:hover {
    background: var(--donation-yellow-hover) !important;
    color: #315B45 !important;
}

/* CTA terracota da página Criando Futuro. */
.cf-hero-copy .cf-course-cta,
.cf-hero-copy .cf-course-cta:hover {
    color: #FFFFFF !important;
}

/* ---------------- VERDE: TEXTO BRANCO ---------------- */

/* Números e descrições da faixa verde do Criando Futuro. */
.cf-stats,
.cf-stats .cf-stat,
.cf-stats .cf-stat strong,
.cf-stats .cf-stat span {
    color: #FFFFFF !important;
}

/* Bloco verde "Mais que um curso": inclusive destaques que estavam
   terracota por estilo inline. */
.cf-more,
.cf-more h2,
.cf-more p,
.cf-more .cf-section-label,
.cf-more .cf-service strong,
.cf-more .cf-service span,
.cf-more p strong {
    color: #FFFFFF !important;
}

/* Seções verdes institucionais: mantém títulos e textos brancos. */
.brundtland-timeline,
.brundtland-timeline h2,
.brundtland-timeline p,
.viveiro-impact-card,
.viveiro-impact-card strong,
.viveiro-impact-card p,
.viveiro-cta,
.viveiro-cta h2,
.viveiro-cta p,
.viveiro-gallery-section,
.viveiro-gallery-section .section-title {
    color: #FFFFFF !important;
}

/* ---------------- DOAÇÕES: AMARELO + FONTE VERDE ---------------- */

.nav-donation,
.footer-donate-button,
.donation-action,
[data-donation-trigger].btn,
.donation-cta [data-donation-trigger],
.projects-cta [data-donation-trigger],
.about-cta [data-donation-trigger],
.transparency-contact-box [data-donation-trigger] {
    background: var(--donation-yellow) !important;
    color: #315B45 !important;
}

.nav-donation:hover,
.footer-donate-button:hover,
.donation-action:hover,
[data-donation-trigger].btn:hover,
.donation-cta [data-donation-trigger]:hover,
.projects-cta [data-donation-trigger]:hover,
.about-cta [data-donation-trigger]:hover,
.transparency-contact-box [data-donation-trigger]:hover {
    background: var(--donation-yellow-hover) !important;
    color: #315B45 !important;
}

/* Valores selecionados e ações internas da doação seguem a mesma identidade. */
.donation-value.is-selected,
.donation-value:hover {
    border-color: var(--donation-yellow) !important;
    background: var(--donation-yellow) !important;
    color: #315B45 !important;
}



/* ==========================================================
   AJUSTE PONTUAL — BOTÕES AMARELOS
   Mantém fundos e seções como estão.
   Apenas botões/chamadas que estavam terracota passam a:
   fundo amarelo + texto verde institucional.
========================================================== */

:root {
    --button-yellow: #FFC400;
    --button-yellow-hover: #FFD24A;
}

/* Botões principais e CTAs. */
.btn-primary,
.btn-light,
.nav-donation,
.footer-donate-button,
.donation-action,
.cf-hero-copy .cf-course-cta,
.viveiro-cta .btn {
    background-color: var(--button-yellow) !important;
    border-color: var(--button-yellow) !important;
    color: #315B45 !important;
}

/* Hover dos mesmos botões. */
.btn-primary:hover,
.btn-light:hover,
.nav-donation:hover,
.footer-donate-button:hover,
.donation-action:hover,
.cf-hero-copy .cf-course-cta:hover,
.viveiro-cta .btn:hover {
    background-color: var(--button-yellow-hover) !important;
    border-color: var(--button-yellow-hover) !important;
    color: #315B45 !important;
}

/* Garante que ícones e textos internos também mantenham o verde. */
.nav-donation *,
.footer-donate-button *,
.donation-action *,
.cf-hero-copy .cf-course-cta * {
    color: inherit !important;
}

/* ==========================================================
   REVISÃO FINAL DE CONTRASTE — DESKTOP E MOBILE
   Regra solicitada:
   - qualquer destaque textual sobre fundo verde fica branco;
   - elementos/botões terracota mantêm texto branco;
   - botões de doação e CTAs amarelos continuam amarelos com texto verde.
   Não altera layout, imagens, animações ou JavaScript.
========================================================== */

/* 1) Elementos terracota de destaque: tipografia branca para contraste. */
.index-actuation-number,
.social-action-image span,
.about-page .value-number,
.about-page .about-story-panel .text-link span,
.project-story-content .text-link span,
.text-link span,
.home-location-button span {
    color:#FFFFFF !important;
}

/* Quando esses elementos usam o terracota original, preserva a leitura. */
.index-actuation-number,
.social-action-image span,
.about-page .value-number,
.about-page .about-story-panel .text-link span,
.project-story-content .text-link span,
.text-link span,
.home-location-button span {
    background-color:#B85F3D !important;
}

/* 2) Todo destaque textual que aparece dentro de faixas/blocos verdes fica branco. */
.history-preview .history-year,
.footer-column h4,
.footer-map-link,
.page-hero-content .section-label,
.timeline-year,
.projects-hero .section-label,
.project-impact-item span,
.transparency-hero .section-label,
.transparency-principles-heading .section-label,
.transparency-principle span,
.contact-hero .section-label,
.viveiro-hero .section-label,
.viveiro-gallery-section .section-label,
.impact-photo-stats .impact-item strong,
.donation-photo-content .section-label,
.testimonials-final .section-label,
.testimonials-hero-content .section-label,
.social-actions-hero-copy h1 em,
.social-actions-hero-note span,
.about-page .about-photo-caption span,
.about-page .page-hero-content .section-label,
.about-page .about-highlight .section-label,
.index-actuation-intro .section-label,
.gallery-museum-caption .museum-number {
    color:#FFFFFF !important;
}

/* O botão verde de localização já tem texto branco; o ícone interno agora
   também segue a regra de contraste quando o círculo estiver terracota. */
.home-location-button,
.home-location-button span {
    color:#FFFFFF !important;
}

/* 3) Qualquer CTA que permaneça terracota deve ter texto branco, inclusive hover. */
button.btn-terra,
.btn-terra,
.button-terra,
.cta-terra,
[data-variant="terra"],
.cf-hero-copy .cf-course-cta[data-variant="terra"] {
    color:#FFFFFF !important;
}

/* 4) EXCEÇÃO PRESERVADA: botões de doação e CTAs amarelos com fonte verde. */
.nav-donation,
.nav-donation *,
.footer-donate-button,
.footer-donate-button *,
.donation-action,
.donation-action *,
[data-donation-trigger].btn,
[data-donation-trigger].btn *,
.donation-cta .btn-light,
.donation-cta .btn-light *,
.projects-cta .btn,
.projects-cta .btn *,
.about-cta .btn-primary,
.about-cta .btn-primary *,
.transparency-contact-box .btn,
.transparency-contact-box .btn *,
.btn-primary,
.btn-primary *,
.btn-light,
.btn-light *,
.cf-hero-copy .cf-course-cta,
.cf-hero-copy .cf-course-cta *,
.viveiro-cta .btn,
.viveiro-cta .btn * {
    color:#315B45 !important;
}

/* A seta circular do CTA de cursos continua verde com seta branca,
   mantendo o contraste sem mudar a identidade do componente. */
.cf-course-cta-arrow {
    background:#315B45 !important;
    color:#FFFFFF !important;
}

/* 5) Mesmo comportamento nos breakpoints mobile: nenhuma regra de cor
   anterior pode devolver terracota sobre fundo verde. */
@media (max-width:760px){
    .history-preview .history-year,
    .footer-column h4,
    .footer-map-link,
    .page-hero-content .section-label,
    .timeline-year,
    .projects-hero .section-label,
    .project-impact-item span,
    .transparency-hero .section-label,
    .transparency-principles-heading .section-label,
    .transparency-principle span,
    .contact-hero .section-label,
    .viveiro-hero .section-label,
    .viveiro-gallery-section .section-label,
    .impact-photo-stats .impact-item strong,
    .donation-photo-content .section-label,
    .testimonials-final .section-label,
    .testimonials-hero-content .section-label,
    .social-actions-hero-copy h1 em,
    .social-actions-hero-note span,
    .about-page .about-photo-caption span,
    .about-page .page-hero-content .section-label,
    .about-page .about-highlight .section-label,
    .index-actuation-intro .section-label,
    .gallery-museum-caption .museum-number {
        color:#FFFFFF !important;
    }
}


/* ==========================================================
   CORREÇÕES PONTUAIS — MENU E CARDS
   Alterações restritas ao solicitado:
   1) dropdown do menu sempre acima do conteúdo/rodapé;
   2) remove apenas a altura mínima excessiva dos cards da
      grade de projetos da página inicial.
   Nenhuma alteração em HTML, JavaScript, imagens, animações
   ou demais cards da página Projetos.
========================================================== */

/* MENU: mantém toda a cadeia do menu acima de seções e rodapé. */
.header {
    z-index: 10000 !important;
}

.header .nav {
    z-index: 10001;
}

.header .nav-dropdown {
    z-index: 10002;
}

.header .nav-dropdown-menu {
    z-index: 10003;
}

/* CARDS DA HOME: desfaz somente a min-height de 610px que é
   destinada aos cards da página Projetos e estava vazando para
   os cards da .projects-grid. */
.projects-section .projects-grid > .project-card {
    min-height: 0;
}

/* CORREÇÃO PONTUAL — MODAL DE DOAÇÃO
   O cabeçalho foi elevado para o dropdown não ser encoberto.
   O modal de doação precisa permanecer acima do cabeçalho quando aberto. */
.donation-modal {
    z-index: 10010 !important;
}

/* ==========================================================
   CORREÇÃO PONTUAL — DROPDOWN "PROJETOS" NO MOBILE
   Mantém o menu principal verde e faz o dropdown abrir/fechar
   somente pela classe .open controlada pelo JavaScript.
   Não altera desktop, HTML, animações ou demais componentes.
========================================================== */
@media (max-width: 760px) {
    .header .nav .nav-dropdown-menu,
    .nav .nav-dropdown-menu {
        background: #315B45 !important;
        display: none !important;
    }

    .header .nav .nav-dropdown.open .nav-dropdown-menu,
    .nav .nav-dropdown.open .nav-dropdown-menu {
        display: flex !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* No toque/mobile, hover e focus não devem manter o dropdown preso aberto. */
    .header .nav .nav-dropdown:hover .nav-dropdown-menu,
    .header .nav .nav-dropdown:focus-within .nav-dropdown-menu,
    .nav .nav-dropdown:hover .nav-dropdown-menu,
    .nav .nav-dropdown:focus-within .nav-dropdown-menu {
        display: none !important;
    }

    /* A regra .open precisa prevalecer também quando o item está focado. */
    .header .nav .nav-dropdown.open:hover .nav-dropdown-menu,
    .header .nav .nav-dropdown.open:focus-within .nav-dropdown-menu,
    .nav .nav-dropdown.open:hover .nav-dropdown-menu,
    .nav .nav-dropdown.open:focus-within .nav-dropdown-menu {
        display: flex !important;
    }
}


/* ==========================================================
   CORREÇÃO RESPONSIVA PONTUAL — CABEÇALHO EM LARGURAS
   INTERMEDIÁRIAS
   Evita que a navegação desktop seja comprimida quando a
   largura já não comporta logo + links + botão de doação.
   Não altera o restante do layout, imagens ou animações.
========================================================== */
@media (min-width: 761px) and (max-width: 1250px) {
    .header-container {
        gap: 16px;
    }

    .header .nav,
    .nav {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--topbar-height) + var(--header-height));
        width: 100%;
        padding: 10px 24px 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        background: #315B45 !important;
        border-top: 1px solid rgba(255,255,255,.18) !important;
        box-shadow: var(--shadow);
        overflow-y: auto;
        max-height: calc(100vh - var(--topbar-height) - var(--header-height));
    }

    .header .nav.open,
    .nav.open {
        display: flex;
    }

    .header .nav-link,
    .nav .nav-link,
    .header .nav .nav-dropdown-toggle,
    .nav .nav-dropdown-toggle {
        padding: 12px 10px;
        color: #FFFFFF !important;
        font-size: 13px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-donation {
        margin: 8px 0 0;
        padding: 14px;
        text-align: center;
    }

    .menu-toggle {
        display: flex;
        flex-shrink: 0;
    }

    .nav-dropdown {
        display: block;
    }

    .nav-dropdown-menu,
    .header .nav .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin: 3px 0 8px;
        padding: 5px;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none !important;
        background: #315B45 !important;
        border-color: rgba(255,255,255,.18) !important;
        box-shadow: none;
        border-radius: 9px;
    }

    .nav-dropdown.open .nav-dropdown-menu,
    .header .nav .nav-dropdown.open .nav-dropdown-menu {
        display: flex !important;
        flex-direction: column;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: none !important;
    }

    .nav-dropdown.open:hover .nav-dropdown-menu,
    .nav-dropdown.open:focus-within .nav-dropdown-menu {
        display: flex !important;
    }

    .nav-dropdown-menu a,
    .header .nav .nav-dropdown-menu a {
        color: #FFFFFF !important;
    }

    .nav-dropdown-menu a small,
    .header .nav .nav-dropdown-menu a small {
        color: rgba(255,255,255,.78) !important;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}


/* ==========================================================
   QUEM SOMOS — EXPANSÃO INSTITUCIONAL
   Novas seções adicionadas de forma isolada à página "Quem Somos".
   Não altera componentes, animações ou layouts das demais páginas.
========================================================== */

/* Fonte do bloco sobre ecoturismo */
.about-page .about-highlight-territory .about-source{
    margin-top:22px;
    font-size:13px;
    line-height:1.65;
    color:rgba(255,255,255,.72);
}

.about-page .about-highlight-territory .about-source a{
    color:#FFFFFF;
    text-decoration-color:rgba(255,255,255,.48);
    text-underline-offset:4px;
    transition:opacity .2s ease;
}

.about-page .about-highlight-territory .about-source a:hover{
    opacity:.78;
}


/* ---------------- NIÈDE GUIDON ---------------- */

.about-page .about-niede{
    position:relative;
    overflow:hidden;
    padding:112px 0 104px;
    background:#F7F4EC;
}

.about-page .about-niede::before{
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    left:-240px;
    top:-230px;
    border:72px solid rgba(184,95,61,.055);
    border-radius:50%;
    pointer-events:none;
}

.about-page .about-niede .container{
    position:relative;
    z-index:1;
}

.about-page .about-niede-intro{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
    align-items:center;
    gap:74px;
}

.about-page .about-niede-copy h2{
    max-width:700px;
    margin:13px 0 26px;
    color:#26342E;
    font-size:clamp(44px,5vw,68px);
    line-height:1.02;
    text-wrap:balance;
}

.about-page .about-niede-copy p{
    max-width:650px;
    margin:0 0 16px;
    color:#657069;
    font-size:16px;
    line-height:1.82;
}

.about-page .about-niede-main-photo{
    position:relative;
    margin:0;
}

.about-page .about-niede-main-photo::before{
    content:"";
    position:absolute;
    inset:18px -18px -18px 18px;
    border:2px solid #B85F3D;
    border-radius:22px;
    pointer-events:none;
}

.about-page .about-niede-main-photo img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    min-height:470px;
    object-fit:cover;
    object-position:center;
    border-radius:22px;
    box-shadow:0 24px 60px rgba(38,52,46,.16);
}

.about-page .about-niede-main-photo figcaption{
    position:absolute;
    z-index:2;
    left:22px;
    right:22px;
    bottom:22px;
    padding:13px 16px;
    border-radius:13px;
    background:rgba(38,52,46,.82);
    color:#FFFFFF;
    font-size:12px;
    line-height:1.45;
    letter-spacing:.04em;
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}

.about-page .about-niede-timeline{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    margin-top:76px;
    border-top:1px solid rgba(49,91,69,.18);
    border-bottom:1px solid rgba(49,91,69,.18);
}

.about-page .about-niede-milestone{
    position:relative;
    min-height:210px;
    padding:28px 28px 26px;
}

.about-page .about-niede-milestone + .about-niede-milestone{
    border-left:1px solid rgba(49,91,69,.15);
}

.about-page .about-niede-milestone span{
    display:block;
    margin-bottom:19px;
    color:#B85F3D;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
}

.about-page .about-niede-milestone h3{
    margin:0 0 10px;
    color:#315B45;
    font-family:var(--font-title);
    font-size:27px;
    line-height:1.08;
}

.about-page .about-niede-milestone p{
    margin:0;
    color:#657069;
    font-size:13px;
    line-height:1.7;
}

.about-page .about-niede-gallery{
    display:grid;
    grid-template-columns:1.15fr .9fr .75fr;
    align-items:stretch;
    gap:22px;
    margin-top:62px;
}

.about-page .about-niede-gallery figure{
    margin:0;
    overflow:hidden;
    border-radius:18px;
    background:#315B45;
}

.about-page .about-niede-gallery img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-page .about-niede-gallery-large{
    min-height:360px;
}

.about-page .about-niede-gallery-large img{
    object-position:center;
}

.about-page .about-niede-gallery-small{
    min-height:360px;
}

.about-page .about-niede-gallery-small img{
    object-position:center;
}

.about-page .about-niede-legacy-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:36px;
    border-radius:18px;
    overflow:hidden;
    background:#315B45;
    color:#FFFFFF;
}

.about-page .about-niede-legacy-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-85px;
    bottom:-85px;
    border:36px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.about-page .about-niede-legacy-card > *{
    position:relative;
    z-index:1;
}

.about-page .about-niede-legacy-card .section-label{
    color:#E6D5B8;
}

.about-page .about-niede-legacy-card h3{
    margin:5px 0 18px;
    color:#FFFFFF;
    font-family:var(--font-title);
    font-size:clamp(34px,3.1vw,46px);
    line-height:1.05;
}

.about-page .about-niede-legacy-card p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.78;
}


/* ---------------- ÁREAS DE ATUAÇÃO ---------------- */

.about-page .about-areas{
    padding:110px 0;
    background:#FFFFFF;
}

.about-page .about-areas-heading{
    max-width:860px;
    margin-bottom:46px;
}

.about-page .about-areas-heading h2{
    margin-bottom:18px;
    font-size:clamp(42px,5vw,66px);
    line-height:1.03;
    text-wrap:balance;
}

.about-page .about-areas-heading p{
    max-width:680px;
    margin:0;
    color:#657069;
    font-size:16px;
    line-height:1.8;
}

.about-page .about-areas-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px;
}

.about-page .about-area-card{
    position:relative;
    grid-column:span 2;
    min-height:245px;
    padding:29px 28px 26px;
    overflow:hidden;
    border:1px solid rgba(49,91,69,.12);
    border-radius:18px;
    background:#F7F4EC;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.about-page .about-area-card:nth-child(4),
.about-page .about-area-card:nth-child(5){
    grid-column:span 3;
}

.about-page .about-area-card::after{
    content:"";
    position:absolute;
    width:92px;
    height:92px;
    right:-40px;
    bottom:-40px;
    border-radius:50%;
    background:rgba(184,95,61,.09);
}

.about-page .about-area-card:hover{
    transform:translateY(-5px);
    border-color:rgba(49,91,69,.24);
    box-shadow:0 18px 42px rgba(49,91,69,.09);
}

.about-page .about-area-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#B85F3D;
    color:#FFFFFF;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.about-page .about-area-card h3{
    max-width:300px;
    margin:23px 0 11px;
    color:#315B45;
    font-family:var(--font-title);
    font-size:29px;
    line-height:1.08;
}

.about-page .about-area-card p{
    position:relative;
    z-index:1;
    max-width:500px;
    margin:0;
    color:#657069;
    font-size:14px;
    line-height:1.75;
}


/* ---------------- COMPROMISSO INSTITUCIONAL ---------------- */

.about-page .about-institutional-commitment{
    position:relative;
    overflow:hidden;
    padding:96px 0;
    background:#315B45;
}

.about-page .about-institutional-commitment::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-250px;
    top:-310px;
    border:70px solid rgba(255,255,255,.055);
    border-radius:50%;
}

.about-page .about-institutional-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    align-items:center;
    gap:78px;
}

.about-page .about-institutional-grid h2{
    max-width:720px;
    margin:13px 0 24px;
    color:#FFFFFF;
    font-size:clamp(42px,5vw,66px);
    line-height:1.03;
    text-wrap:balance;
}

.about-page .about-institutional-grid p{
    max-width:700px;
    margin:0 0 15px;
    color:rgba(255,255,255,.82);
    font-size:15px;
    line-height:1.82;
}

.about-page .about-principles-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.about-page .about-principles-list span{
    display:flex;
    align-items:center;
    min-height:68px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:13px;
    background:rgba(255,255,255,.055);
    color:#FFFFFF;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}


/* ---------------- RESPONSIVIDADE DAS NOVAS SEÇÕES ---------------- */

@media (max-width: 980px){
    .about-page .about-niede-intro,
    .about-page .about-institutional-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .about-page .about-niede-main-photo{
        max-width:720px;
    }

    .about-page .about-niede-timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-page .about-niede-milestone:nth-child(3){
        border-left:0;
        border-top:1px solid rgba(49,91,69,.15);
    }

    .about-page .about-niede-milestone:nth-child(4){
        border-top:1px solid rgba(49,91,69,.15);
    }

    .about-page .about-niede-gallery{
        grid-template-columns:1.1fr .9fr;
    }

    .about-page .about-niede-gallery-small{
        grid-column:1 / -1;
        min-height:320px;
    }

    .about-page .about-areas-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .about-page .about-area-card,
    .about-page .about-area-card:nth-child(4),
    .about-page .about-area-card:nth-child(5){
        grid-column:auto;
    }

    .about-page .about-area-card:last-child{
        grid-column:1 / -1;
    }
}

@media (max-width: 640px){
    .about-page .about-niede,
    .about-page .about-areas{
        padding:78px 0;
    }

    .about-page .about-niede-intro{
        gap:36px;
    }

    .about-page .about-niede-copy h2,
    .about-page .about-areas-heading h2,
    .about-page .about-institutional-grid h2{
        font-size:clamp(38px,11vw,54px);
    }

    .about-page .about-niede-copy p,
    .about-page .about-areas-heading p{
        font-size:15px;
    }

    .about-page .about-niede-main-photo::before{
        inset:12px -10px -10px 10px;
    }

    .about-page .about-niede-main-photo img{
        min-height:360px;
        border-radius:18px;
    }

    .about-page .about-niede-timeline{
        grid-template-columns:1fr;
        margin-top:52px;
    }

    .about-page .about-niede-milestone,
    .about-page .about-niede-milestone + .about-niede-milestone{
        min-height:auto;
        padding:24px 0;
        border-left:0;
        border-top:1px solid rgba(49,91,69,.15);
    }

    .about-page .about-niede-milestone:first-child{
        border-top:0;
    }

    .about-page .about-niede-gallery{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:42px;
    }

    .about-page .about-niede-gallery-large,
    .about-page .about-niede-gallery-small{
        min-height:300px;
    }

    .about-page .about-niede-gallery-small{
        grid-column:auto;
    }

    .about-page .about-niede-legacy-card{
        min-height:300px;
        padding:30px;
    }

    .about-page .about-areas-grid,
    .about-page .about-principles-list{
        grid-template-columns:1fr;
    }

    .about-page .about-area-card,
    .about-page .about-area-card:last-child{
        grid-column:auto;
        min-height:auto;
    }

    .about-page .about-institutional-commitment{
        padding:76px 0;
    }

    .about-page .about-institutional-grid{
        gap:38px;
    }

    .about-page .about-principles-list span{
        min-height:58px;
    }
}

/* ==========================================================
   SOBRE — HISTÓRIA + CARROSSEL + TERRITÓRIO UNIFICADOS
   Composição editorial única, substituindo a antiga faixa verde.
========================================================== */
.about-page .about-story-unified{
    padding:96px 0 102px;
    background:linear-gradient(180deg,#fff 0%,#f7f4ec 100%);
}

.about-page .about-unified-grid{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(340px,1.22fr) minmax(0,.90fr);
    gap:clamp(34px,4vw,68px);
    align-items:center;
}

.about-page .about-unified-story,
.about-page .about-unified-territory{
    min-width:0;
}

.about-page .about-unified-story::before{
    top:-54px;
    font-size:128px;
}

.about-page .about-unified-story h2,
.about-page .about-unified-territory h2{
    margin:11px 0 22px;
    color:var(--green-deep);
    font-family:var(--font-title);
    font-weight:500;
    line-height:1.05;
    text-wrap:balance;
}

.about-page .about-unified-story h2{
    font-size:clamp(37px,3.35vw,56px);
}

.about-page .about-unified-territory h2{
    font-size:clamp(31px,2.8vw,46px);
}

.about-page .about-unified-story .about-story-window{
    height:270px;
    max-width:none;
}

.about-page .about-unified-story .about-story-copy p,
.about-page .about-unified-territory-copy p{
    color:var(--gray-600);
    font-size:14px;
    line-height:1.82;
}

.about-page .about-unified-territory-copy{
    display:flex;
    flex-direction:column;
    gap:17px;
}

.about-page .about-unified-territory-copy p{
    margin:0;
}

/* Carrossel central: moldura mais limpa e protagonista visual. */
.about-page .about-unified-carousel{
    min-height:570px;
    height:570px;
    padding:12px;
    border-radius:30px;
    overflow:hidden;
    background:linear-gradient(145deg,var(--green-deep),#174833);
    box-shadow:0 26px 72px rgba(15,40,25,.18);
}

.about-page .about-unified-carousel::before{
    content:"";
    position:absolute;
    inset:12px;
    z-index:1;
    pointer-events:none;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
}

.about-page .about-unified-carousel .about-photo-card{
    padding:0;
    inset:12px;
    border-radius:22px;
    overflow:hidden;
}

.about-page .about-unified-carousel .about-photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:22px;
    transform:scale(1.015);
}

.about-page .about-unified-carousel .about-photo-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.02) 42%,rgba(4,30,20,.76) 100%);
    pointer-events:none;
}

.about-page .about-unified-carousel .about-photo-caption{
    left:30px;
    right:30px;
    bottom:28px;
    padding:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-shadow:0 3px 16px rgba(0,0,0,.45);
}

.about-page .about-unified-carousel .about-photo-caption span{
    color:rgba(255,255,255,.74);
    font-size:10px;
    letter-spacing:.22em;
}

.about-page .about-unified-carousel .about-photo-caption strong{
    max-width:300px;
    color:#fff;
    font-family:var(--font-title);
    font-size:clamp(23px,2vw,32px);
    font-weight:500;
    line-height:1.12;
}

.about-page .about-unified-carousel .about-photo-dots{
    right:30px;
    bottom:32px;
}

.about-page .about-unified-carousel .about-photo-dots span{
    width:7px;
    height:7px;
    background:rgba(255,255,255,.55);
}

.about-page .about-unified-carousel .about-photo-dots span.is-active{
    width:26px;
    background:var(--yellow);
}

.about-page .about-unified-territory .section-label{
    color:var(--green-deep);
}

.about-page .about-unified-territory .about-source{
    margin:20px 0 0;
    padding-top:17px;
    border-top:1px solid rgba(38,52,46,.16);
    color:var(--gray-600);
    font-size:11px;
    line-height:1.55;
}

.about-page .about-unified-territory .about-source a{
    color:var(--green-deep);
}

@media (max-width:1120px){
    .about-page .about-unified-grid{
        grid-template-columns:minmax(0,1fr) minmax(360px,1.05fr);
    }

    .about-page .about-unified-territory{
        grid-column:1 / -1;
        max-width:820px;
        padding-top:8px;
        border-top:1px solid rgba(38,52,46,.14);
    }

    .about-page .about-unified-territory-copy{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:20px;
    }
}

@media (max-width:800px){
    .about-page .about-story-unified{
        padding:72px 0 78px;
    }

    .about-page .about-unified-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .about-page .about-unified-carousel{
        order:2;
        width:100%;
        height:500px;
        min-height:500px;
    }

    .about-page .about-unified-territory{
        order:3;
        grid-column:auto;
        padding-top:38px;
    }

    .about-page .about-unified-territory-copy{
        display:flex;
        flex-direction:column;
        gap:16px;
    }
}

@media (max-width:560px){
    .about-page .about-story-unified{
        padding:58px 0 64px;
    }

    .about-page .about-unified-story::before{
        font-size:94px;
        top:-38px;
    }

    .about-page .about-unified-story h2{
        font-size:clamp(39px,11vw,53px);
    }

    .about-page .about-unified-territory h2{
        font-size:clamp(35px,10vw,47px);
    }

    .about-page .about-unified-story .about-story-window{
        height:245px;
    }

    .about-page .about-unified-carousel{
        height:390px;
        min-height:390px;
        padding:9px;
        border-radius:22px;
    }

    .about-page .about-unified-carousel::before,
    .about-page .about-unified-carousel .about-photo-card,
    .about-page .about-unified-carousel .about-photo-card img{
        border-radius:15px;
    }

    .about-page .about-unified-carousel::before{
        inset:9px;
    }

    .about-page .about-unified-carousel .about-photo-card{
        inset:9px;
    }

    .about-page .about-unified-carousel .about-photo-caption{
        left:22px;
        right:22px;
        bottom:21px;
    }

    .about-page .about-unified-carousel .about-photo-caption strong{
        max-width:225px;
        font-size:24px;
    }

    .about-page .about-unified-carousel .about-photo-dots{
        right:21px;
        bottom:24px;
        gap:5px;
    }

    .about-page .about-unified-carousel .about-photo-dots span.is-active{
        width:20px;
    }
}

@media (prefers-reduced-motion:reduce){
    .about-page .about-unified-carousel .about-photo-card,
    .about-page .about-unified-story .about-story-track{
        animation:none !important;
    }

    .about-page .about-unified-carousel .about-photo-card:not(:first-child){
        display:none;
    }
}


/* CORREÇÃO FINAL — carrossel e história da seção unificada
   O controle visual é feito por classes/JS para garantir funcionamento também
   quando o navegador usa preferências de redução de movimento. */
.about-page .about-unified-carousel .about-photo-card{
    opacity:0 !important;
    transform:scale(1.02);
    animation:none !important;
    transition:opacity .85s ease, transform 5.5s ease;
}
.about-page .about-unified-carousel .about-photo-card.is-active{
    opacity:1 !important;
    transform:scale(1);
    z-index:2;
}
.about-page .about-unified-carousel .about-photo-card img{
    opacity:1 !important;
    visibility:visible !important;
}
.about-page .about-unified-story .about-story-track{
    animation:none !important;
    transform:translateY(0);
    transition:transform .75s ease;
}
@media (prefers-reduced-motion:reduce){
    .about-page .about-unified-carousel .about-photo-card:first-child{
        opacity:1 !important;
    }
}