/* index.css — bioCultura homepage
   Hero: gerido pelo bio-banner-hero centralizado */

:root {
    --ink: #27312c;
    --muted: #6f7973;
    --forest: #536b57;
    --leaf: #81966e;
    --clay: #a66f50;
    --sky: #6d8992;
    --pale: #f1f4ee;
    --sand: #f7f2e9;
    --line: #e6eae5;
}

body, input, select, textarea {
    font-family: "Source Sans Pro", sans-serif !important;
    color: var(--ink);
}

section, #header, hr, .major {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    height: 100vh !important;
    width: 18em !important;
    overflow: hidden !important;
    z-index: 10000;
    background: #fff;
    border-right: 1px solid #f2f2f2 !important;
}

#wrapper { padding-left: 18em !important; }

.inner {
    padding: 2.2em 4em 0 !important;
    max-width: 1600px !important;
    margin: auto;
    width: 100%;
    box-sizing: border-box;
}

.eyebrow {
    display: block;
    font-size: 0.65em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #98a19b;
    margin-bottom: 16px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 4.8em;
    align-items: start;
    padding-bottom: 4em !important;
}

.hero h1 {
    font-size: 4.45em;
    letter-spacing: -3.5px;
    line-height: 0.96;
    margin: 0.1em 0 0.35em;
    color: var(--ink);
    max-width: 780px;
}

.hero h1 em { font-style: normal; color: var(--forest); }

.lead {
    font-size: 1.18em;
    line-height: 1.75;
    color: var(--muted);
    max-width: 720px;
}

.actions { display: flex; gap: 0.7em; flex-wrap: wrap; margin-top: 2em; }

.action {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 99px;
    padding: 0.8em 1.25em;
    font-size: 0.78em;
    font-weight: 700;
    border: 1px solid var(--line);
    color: var(--ink);
}

.action.primary {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

.water-hero-image {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;
    border-radius: 50%;
    justify-self: center;
    background: #edf2eb url("/images/observatorio-planeta-v2.webp") center/cover no-repeat;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 35px 90px rgba(45, 65, 51, 0.2);
}

/* Home nav */
.home-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    gap: .5em;
    overflow: auto;
    margin-bottom: 1.5em;
    padding: .7em 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.home-nav a {
    flex: none;
    color: #78827b;
    font-size: .62em;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5em .9em;
    border-radius: 20px;
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background .2s, color .2s;
}

/* Sections */
.block {
    border-top: 1px solid var(--line);
    padding: 4em 0 !important;
}

html body #main :is(#structure, #inventories, #atlas, #highlights, #today, #news-block) {
    scroll-margin-top: 6.5rem;
}

.head {
    display: grid;
    grid-template-columns: 180px minmax(0, 870px);
    gap: 2em;
    margin-bottom: 2.2em;
}

.head h2 {
    font-family: Georgia, serif !important;
    font-size: clamp(2.3em, 4vw, 4em);
    line-height: 1;
    letter-spacing: -.04em;
    margin: 0;
    color: var(--ink);
}

.head p { margin: 0; color: var(--muted); line-height: 1.72; }

.path {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--line);
}

.step, .step:nth-child(2), .step:nth-child(3) {
    padding: 1.7em;
    min-height: 260px;
    border-radius: 0;
    border-top: 3px solid transparent;
    background: #fff;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background .2s, transform .2s;
}

.step:nth-child(1) { border-top-color: #6b8f47; }
.step:nth-child(2) { border-top-color: #a66f50; }
.step:nth-child(3) { border-top-color: #3f7373; }

.step:hover { z-index: 2; background: #f4f7f1; transform: translateY(-3px); }
.step:nth-child(2):hover { background: #faf3e9; }
.step:nth-child(3):hover { background: #eef4f4; }

.step small { font-size: 0.65em; text-transform: uppercase; letter-spacing: 1.2px; color: var(--clay); }
.step:nth-child(1) small { color: #557a3a; }
.step:nth-child(2) small { color: #a66f50; }
.step:nth-child(3) small { color: #3f7373; }
.step h3 { font-size: 1.32em; margin: 0.35em 0 0.5em; color: var(--ink); }
.step p { font-size: 0.9em; line-height: 1.62; color: var(--muted); }
.step b { position: absolute; right: 1.3em; bottom: 1.1em; color: var(--forest); }

.pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }

.number {
    --accent: var(--forest);
    display: grid;
    grid-template-rows: 3.15em auto 1fr auto;
    align-content: start;
    padding: 1.5em;
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 14px;
}

.number small { display: block; text-transform: uppercase; letter-spacing: 1.1px; color: #939d96; }
.number strong { display: block; align-self: start; font-size: 2.25em; line-height: 1; color: var(--accent); margin: 0.18em 0 0.55em; }
.number span { font-size: 0.78em; color: var(--muted); }
.number .source { display: block; margin-top: 0.7em; font-size: 0.7em; color: var(--muted); }

.pulse-notes { display: grid; gap: 0.6em; margin-top: 1.3em; }
.pulse-notes p { margin: 0; font-size: 0.85em; line-height: 1.55; color: var(--muted); }
.pulse-notes strong { color: var(--ink); }

.honesty { margin-top: 1em; font-size: 0.78em; color: #949c97; }

.home-feature { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(2.4rem,4vw,3.8rem) !important; border-radius:24px; background:var(--home-feature-bg, #f6f2e9); border-top:none !important; margin:2rem 0 !important; }
.home-feature.theme-earth { --home-feature-bg: #f3ece0; }
.home-feature.theme-wine { --home-feature-bg: #f7eeec; }
.home-feature.compact { grid-template-columns: 1fr; padding:clamp(2rem,3.4vw,3rem) !important; }
.home-feature.compact .home-feature-copy h2,
.home-feature.compact .home-feature-copy p { max-width: none; }
.home-feature-copy h2 { max-width:780px; margin:0 0 .45em; color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.1rem,4vw,3.7rem); line-height:1; letter-spacing:-.045em; }
.home-feature-copy p { max-width:760px; margin:0 0 1.4rem; color:var(--muted); line-height:1.7; }
.home-feature-copy a { color:var(--forest); font-size:.78rem; font-weight:900; text-decoration:none; }
.home-feature-facts { margin:0; border-top:1px solid var(--line); }
.home-feature-facts div { display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:baseline; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.home-feature-facts dt { color:var(--forest); font-family:Georgia,"Times New Roman",serif; font-size:1.75rem; line-height:1; }
.home-feature-facts dd { margin:0; color:var(--muted); font-size:.78rem; line-height:1.45; }

.portugal-note {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 2em;
    align-items: center;
    margin-top: 1.5em;
    padding: 1.5em 1.7em;
    border-radius: 16px;
    background: #243d31;
    color: #fff;
}

.portugal-note-label { display: flex; align-items: center; gap: .6em; }
.portugal-icon { width: 22px; height: 22px; flex: 0 0 auto; fill: #7fbf9e; }
.portugal-note span { color: #bad0c0; font-size: .62em; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.portugal-note p { margin: 0; color: #e0e9e2; font-size: .78em; line-height: 1.65; }
.portugal-note a { color: #fff; font-size: .68em; font-weight: 900; white-space: nowrap; }

.reading-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin-top: 3em; }
.reading-route article { padding-top: 1.2em; border-top: 2px solid #b7c9b9; }
.reading-route span { color: var(--clay); font-size: .58em; font-weight: 900; }
.reading-route h3 { margin: .6em 0 .4em; font-size: 1em; color: var(--ink); }
.reading-route p { margin: 0; color: var(--muted); font-size: .74em; line-height: 1.55; }

.atlas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }

.portal {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 1.2em;
    padding: 1.5em;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: 0.25s;
}

.portal:hover { transform: translateY(-3px); border-color: #b8c4b9; }

.portal-mark {
    width: 95px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 0 !important;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.7em;
    background: var(--pale);
    color: var(--forest);
}

.portal:nth-child(2n) .portal-mark { background: var(--sand); color: var(--clay); }
.portal h3 { font-size: 1.15em; color: var(--ink); margin: 0.1em 0 0.35em; }
.portal p { font-size: 0.86em; line-height: 1.55; color: var(--muted); margin: 0; }

.portal-links { display: flex; flex-wrap: wrap; gap: 0.45em 0.9em; margin-top: 0.85em; }
.portal-links a { color: var(--forest); font-size: 0.67em; font-weight: 800; text-decoration: none; border: 0 !important; }
.portal-links a:hover { color: var(--clay); }

.portal-chart { margin: 0.9em 0 0.15em; }

.stack-track { display: flex; height: 13px; border-radius: 8px; overflow: hidden; background: var(--pale); }
.stack-track span { height: 100%; transition: width .3s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; margin-top: 0.55em; }
.chart-legend-item { font-size: 0.66em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4em; }
.chart-legend-item b { color: var(--ink); font-weight: 800; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

.chart-note { font-size: 0.66em; color: var(--muted); line-height: 1.5; margin: 0.55em 0 0; }

.growth-chart { display: flex; flex-direction: column; gap: 0.9em; }
.growth-row { display: grid; grid-template-columns: 1fr; gap: 0.2em; }
.growth-label { font-size: 0.68em; font-weight: 800; letter-spacing: 0.2px; }
.bar-row { display: flex; align-items: center; gap: 0.5em; }
.bar-year { flex: 0 0 auto; min-width: 4.6em; font-size: 0.62em; color: var(--muted); white-space: nowrap; }
.bar-track { flex: 1 1 auto; height: 7px; background: var(--pale); border-radius: 5px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.bar-value { flex: 0 0 auto; min-width: 3.4em; text-align: right; font-size: 0.7em; color: var(--ink); }
.growth-unit { font-size: 0.6em; color: var(--muted); }

.percent-chart { display: flex; flex-direction: column; gap: 0.7em; }
.percent-row { display: grid; grid-template-columns: 1fr; gap: 0.2em; }
.percent-label { font-size: 0.68em; font-weight: 800; letter-spacing: 0.2px; }
.percent-note { font-size: 0.6em; color: var(--muted); }

.today { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1em; }

.local, .encounter { border-radius: 18px; padding: 2em; min-height: 245px; }

.local { background: #405447; color: #fff; }
.local small, .encounter small { font-size: 0.65em; text-transform: uppercase; letter-spacing: 1.2px; }
.local small { color: #bdcbbf; }
.local h3 { color: #fff; font-size: 1.55em; margin: 0.35em 0; }
.local p { color: #dce5de; line-height: 1.65; }
.local a { color: #fff; font-size: 0.8em; }

.encounter { background: var(--sand); display: grid; grid-template-columns: 1fr 120px; gap: 1em; }
.encounter h3 { font-size: 1.35em; margin: 0.35em 0; color: var(--ink); }
.encounter em { display: block; color: var(--muted); font-size: 0.85em; }
.encounter p { font-size: 0.86em; line-height: 1.55; color: var(--muted); }
.encounter a { color: var(--forest); font-size: 0.8em; }

.species-image { width: 120px; height: 160px; border-radius: 60px; object-fit: cover; background: #e8e3d8; }

.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.news a { text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 1.4em; display: flex; flex-direction: column; min-height: 155px; }
.news small { color: #949d97; }
.news h3 { font-size: 1.04em; line-height: 1.4; color: var(--ink); margin: 0.4em 0 auto; }
.news span { font-size: 0.7em; color: var(--forest); margin-top: 1em; }
.news-controls { display: flex; justify-content: center; margin-top: 1.5em; }
.news-controls .action { min-width: 10rem; border-color: var(--line) !important; background: #fff !important; color: var(--forest) !important; box-shadow: none !important; }

.manifesto {
    background: linear-gradient(135deg, #dfeadb, #f6eee1);
    border-radius: 26px;
    padding: 3.5em;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2em;
}

.manifesto h2 { font-size: 2em; margin: 0 0 0.35em; color: var(--ink); }
.manifesto p { color: var(--muted); max-width: 800px; margin: 0; line-height: 1.65; }
.manifesto a { white-space: nowrap; }

.empty { color: #999; font-style: italic; }

.footer { padding: 4em 0 2em; border-top: 1px solid var(--line); opacity: 0.4; text-align: right; }
.footer-wordmark { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.bio-footer-mark { width: 44px; height: 44px; object-fit: contain; }
.bio-wordmark { display: inline-block; text-align: center; line-height: 1; font-family: "Georgia", "Times New Roman", serif; }
.bio-wordmark strong { display: block; font-size: 1.15em; font-weight: 400; letter-spacing: -0.4px; color: #81966e; line-height: 1; font-family: inherit; }
.bio-wordmark small { display: block; margin-top: 2px; font-size: 0.43em; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #a66f50; line-height: 1; font-family: inherit; }

/* Responsive */
@media (max-width: 1280px) {
    #sidebar { position: relative !important; width: 100% !important; height: auto !important; }
    #wrapper { padding-left: 0 !important; }
    .hero { grid-template-columns: 1fr; }
    .hero-image { max-width: 400px; }
    .pulse { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
    .portugal-note { grid-template-columns: 1fr; }
    .portugal-note a { white-space: normal; }
    .reading-route { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .inner { padding: 1.7em 1.4em 0 !important; }
    .head { grid-template-columns: 1fr; gap: 0.7em; }
    .path, .pulse, .atlas, .today, .news { grid-template-columns: 1fr; }
    .portal { grid-template-columns: 70px 1fr; }
    .portal-mark { width: 70px; }
    .encounter { grid-template-columns: 1fr; }
    .species-image { width: 100%; height: 210px; border-radius: 12px; }
    .manifesto { grid-template-columns: 1fr; padding: 2em; }
    .reading-route { grid-template-columns: 1fr; }
    .step { min-height: 230px; }
    .portugal-note { padding: 1.4em; }
    .home-nav { margin-bottom: 0; }
    .home-feature { grid-template-columns:1fr; }
}
/* hero-image dentro de bio-banner-hero: posicionamento absoluto como as outras imagens */
body[data-hero-theme] #main .bio-banner-hero > .hero-image {
    position: absolute !important;
    z-index: 5 !important;
    top: 0 !important;
    right: clamp(-68px, -3.55vw, -38px) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(470px, 40vw) !important;
    height: min(470px, 40vw) !important;
    max-width: none !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 50% !important;
    box-shadow: 0 28px 70px rgba(27,48,36,.18) !important;
    transform: none !important;
    justify-self: unset !important;
    align-self: unset !important;
}

@media screen and (max-width: 760px) {
    body[data-hero-theme] #main .bio-banner-hero > .hero-image {
        top: auto !important;
        right: 50% !important;
        bottom: 0 !important;
        width: min(270px, 76vw) !important;
        height: min(270px, 76vw) !important;
        transform: translateX(50%) !important;
    }
}