@import url('/assets/css/pages/observatorio-biodiversity.css?v=4');

:root {
    --water-ink: #342f25;
    --water-deep: #3f4936;
    --water: #936125;
    --water-light: #d9b46f;
    --water-pale: #f7f3e8;
    --water-sand: #eef2e7;
    --water-line: #e9e3d5;
    --water-muted: #756f63;
}

.energy-hero .water-hero-image {
    background-image: linear-gradient(
            90deg,
            rgba(35, 36, 27, 0.92) 0%,
            rgba(35, 36, 27, 0.58) 44%,
            rgba(35, 36, 27, 0.08) 75%
        ),
        url('/images/energia-consciente.webp');
    background-position: center;
}

.energy-hero .eyebrow {
    color: #e0bd79;
}

.energy-hero h1 em {
    color: #efd095;
}

.metric-card strong,
.journey b,
.report-card a,
.source-links a {
    color: var(--water);
}

.metric-card:nth-child(even) {
    background: var(--water-sand);
}

@media (max-width: 736px) {
    .energy-hero .water-hero-image {
        background-position: 65% center;
    }
}

/* Evolução: três indicadores, três colunas em ecrãs largos. */
@media (min-width: 1200px) {
    #panorama-global .chart-grid.chart-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* O observatorio-biodiversity.css importado redefine regras globais (margens do conteúdo a 1100px, rodapé sem
   margens, cartões de notícias em maiúsculas). Aqui repõem-se as das outras páginas de tema (Água, Ar, Solo…):
   content-width.css, base-reset.css e recursos-agua.css. */
@media (max-width: 1100px) {
    .inner { padding: 2.2em 5em 0 !important; }
}
@media (max-width: 760px) {
    .inner { padding: 1.7em 1.4em 0 !important; }
}
.footer {
    padding: 4em 5em 2em;
    opacity: 0.4;
}
@media (max-width: 760px) {
    .footer { padding: 4em 1.4em 2em; }
}