/* =============================================================================
   SemearIA: Almanaque da Mata (/bioma/mata-atlantica/), plano D.3. Dono: T5.
   Só classes com o prefixo da página (.bioma-…). Cada seção cabe no palco em
   1366×768 e 1920×1080; para caber, carrossel e grade, nunca fonte menor.
   ============================================================================= */

/* ---------- 1 · entrada ---------- */
/* a nota "Ilustração do site" fica no canto de baixo da seção, como na home */
.bioma-almanaque .slide__conteudo { position: static; }
.bioma-contagens { margin: 0 0 clamp(8px, 1.4vh, 14px); color: var(--creme); }
.bioma-contagens b { color: var(--ouro); font-weight: 600; }
.bioma-contagens span { white-space: nowrap; }
/* a mesma medida do lead: o texto fica na faixa do véu de .70 ou mais (A.1) */
.bioma-referencia { max-width: 30em; margin: 0; }

/* ---------- 2 · as estações (papel) ---------- */
.bioma-estacoes__cartoes { gap: clamp(12px, 1.4vw, 18px); grid-auto-rows: 1fr; }
.bioma-estacao { padding: clamp(14px, 2.2vh, 22px) clamp(16px, 1.5vw, 22px); }
.bioma-estacao__titulo { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(6px, 1vh, 10px); }
.bioma-estacao__titulo .icone { width: 24px; height: 24px; }
/* a cor da estação no topo do cartão e no ícone: os cartões são a legenda do anel */
.bioma-estacao--chuvosa { border-top: 3px solid var(--mar-papel); }
.bioma-estacao--seca { border-top: 3px solid var(--papel-ouro); }
.bioma-estacao--chuvosa .bioma-estacao__titulo .icone { color: var(--mar-papel); }
.bioma-estacao--seca .bioma-estacao__titulo .icone { color: var(--papel-ouro); }
.bioma-estacao__clima { margin-bottom: .35em; }
.bioma-estacao__foco { margin: 0; color: var(--texto-suave); }
.bioma-eventos { margin-top: clamp(14px, 2.4vh, 24px); gap: 6px; }
.bioma-estacoes__esquema { justify-self: center; width: min(100%, clamp(300px, 60vh, 470px)); }

/* anel de 12 meses (V: esquema do calendário) */
.bioma-meses__arte { display: block; width: 100%; height: auto; overflow: visible; }
.bioma-meses__fio { fill: none; stroke: var(--papel-linha); stroke-width: 1; }
.bioma-meses__tiques line { stroke: var(--papel-ouro); stroke-opacity: .5; stroke-width: 1; }
.bioma-meses__mes { fill: var(--papel-2); }
.bioma-meses__mes--chuvosa { fill: var(--mar-papel); }
.bioma-meses__mes--seca { fill: var(--papel-ouro); }
.bioma-meses__iniciais text { font: 600 13px/1 Cinzel, serif; fill: var(--papel); text-anchor: middle; dominant-baseline: central; }
.bioma-meses__estacao { font: 600 10.5px/1 Cinzel, serif; letter-spacing: .24em; }
.bioma-meses__estacao--chuvosa { fill: var(--mar-papel); }
.bioma-meses__estacao--seca { fill: var(--papel-ouro); }
.bioma-meses__marco, .bioma-meses__losango { fill: var(--papel-ouro); }
.bioma-meses__centro { font: italic 500 18px/1 Cormorant, Georgia, serif; fill: var(--papel-tinta); text-anchor: middle; }
/* na primeira vista os meses acendem um a um, a partir de janeiro (sem JS, o anel já vem aceso) */
.bioma-meses__mes { transition: opacity .45s ease calc(.25s + var(--i, 0) * 55ms); }
body:not(.sem-js) .bioma-estacoes__esquema.revelar:not(.visivel) .bioma-meses__mes { opacity: 0; }

/* ---------- 3 · água e solo (laca) ---------- */
/* cada coluna fecha com uma nota em itálico sobre um fio */
.bioma-agua-solo__colunas { align-items: start; }
/* a água tem menos texto que o solo: coluna mais estreita, para as duas terem a mesma altura */
@media (min-width: 801px) {
    .quadro .bioma-agua-solo__colunas { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.bioma-agua-solo__coluna { display: flex; flex-direction: column; }
.bioma-agua-solo__coluna--solo { padding-left: clamp(0px, 3vw, 44px); border-left: 1px solid var(--ouro-linha); }
.bioma-agua-solo__titulo { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(10px, 1.8vh, 18px); }
.bioma-agua-solo__titulo .icone { width: 28px; height: 28px; }
.bioma-agua-solo__coluna > p.suave:last-child { margin: clamp(6px, 1.2vh, 12px) 0 0; padding-top: clamp(10px, 1.6vh, 14px); border-top: 1px solid var(--ouro-linha); font-style: italic; }
.bioma-passos { margin: clamp(10px, 1.8vh, 18px) 0 clamp(16px, 2.6vh, 26px); gap: clamp(8px, 1.4vh, 14px); }

/* ---------- 4 · a sucessão (papel, largo) ---------- */
/* V5 (três zonas de 480 × 250 lado a lado): a largura é limitada pela altura do palco, para o perfil
   ocupar no máximo um terço dele; o stub da fundação (um svg só) recebe uma altura fixa */
.bioma-sucessao__perfil .agrofloresta { width: min(100%, calc((100dvh - var(--header-h) - var(--pager-h)) * 1.9)); margin-inline: auto; }
.bioma-sucessao__perfil svg.agrofloresta__arte { display: block; width: 100%; height: clamp(120px, 24vh, 260px); }
.bioma-estagios { margin-top: clamp(14px, 2.6vh, 28px); grid-auto-rows: 1fr; }
.bioma-estagio { padding-top: clamp(10px, 1.6vh, 16px); border-top: 1px solid var(--ouro-linha); }
.bioma-estagio__nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: clamp(4px, .8vh, 8px); }
.bioma-estagio__periodo { font: 600 var(--fs-mini)/1.2 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.bioma-estagio__especies { margin-bottom: .3em; }
.bioma-estagio__papel { margin: 0; font-style: italic; color: var(--texto-suave); }

/* ---------- 5 · as espécies (laca, carrossel 3 × 2) ---------- */
.bioma-especies__aviso { margin-top: clamp(12px, 2vh, 20px); }
.bioma-especies__carrossel .carrossel__pagina { gap: clamp(10px, 1.6vh, 16px) clamp(12px, 1.4vw, 20px); }
/* com JS e tela larga, as páginas ocupam a mesma célula: todas têm a altura da mais alta (a da juçara)
   e nada pula ao folhear; as páginas fora de vista ficam invisíveis e fora do foco. Sem JS, todas
   aparecem (componente); no celular, cada página tem a própria altura. */
@media (min-width: 761px) {
    body:not(.sem-js) .bioma-especies__carrossel { display: grid; }
    body:not(.sem-js) .bioma-especies__carrossel > .carrossel__pagina { grid-area: 1 / 1; }
    body:not(.sem-js) .bioma-especies__carrossel > .carrossel__pagina[hidden] { display: grid !important; visibility: hidden; }
    body:not(.sem-js) .bioma-especies__carrossel > .carrossel__controles { grid-area: 2 / 1; }
}
.bioma-especie { display: flex; flex-direction: column; padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.4vw, 20px); }
.bioma-especie__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bioma-especie__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.cartao .bioma-especie__nome { margin: 0; }
.bioma-especie__icone { width: 24px; height: 24px; margin-top: 1px; }
.bioma-especie__cientifico { margin: 2px 0 0; min-height: 1.55em; }
.bioma-especie__pendencia { margin: clamp(4px, .8vh, 8px) 0 0; line-height: 1.4; color: var(--texto); }
/* as etiquetas ficam no pé de todos os cartões, alinhadas na grade */
.bioma-especie__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: auto; padding-top: clamp(10px, 1.6vh, 14px); }
.bioma-especie__estrato { margin: 0; font: 600 calc(var(--fs-mini) * .92)/1.3 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); }
.bioma-especie__funcoes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.bioma-especie__funcoes li { padding: 3px 8px; font: 600 calc(var(--fs-mini) * .86)/1.25 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--texto); background: var(--ouro-tenue); border: 1px solid var(--ouro-linha); }
.bioma-especie--pendente { border-color: color-mix(in srgb, var(--mar) 55%, transparent); }
/* telas largas: a nota da juçara e das abelhas fica ao lado da cabeça, e o carrossel ganha a altura toda */
@media (min-width: 1121px) {
    .bioma-especies__arranjo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); grid-template-areas: "cabeca aviso" "carrossel carrossel"; align-items: end; column-gap: clamp(28px, 4vw, 72px); row-gap: clamp(14px, 2.6vh, 28px); }
    .bioma-especies__arranjo > .cabeca { grid-area: cabeca; margin-bottom: 0; }
    .bioma-especies__arranjo > .carrossel { grid-area: carrossel; }
    .bioma-especies__aviso { grid-area: aviso; margin: 0; }
}

/* ---------- 6 · o Sisteminha (tinta) ---------- */
.bioma-criacoes { margin: clamp(12px, 2.2vh, 22px) 0; gap: 6px; }
.bioma-criacao b { font-weight: 600; }
.bioma-criacao__nota { color: var(--texto-suave); font-style: italic; }
.bioma-sisteminha__esquema { justify-self: center; width: min(100%, clamp(280px, 58vh, 460px)); }

/* ---------- 7 · os desafios (laca) ---------- */
.bioma-desafios__grade { grid-auto-rows: 1fr; gap: clamp(12px, 2vh, 20px) clamp(14px, 1.8vw, 24px); }
.bioma-desafio { display: flex; flex-direction: column; padding: clamp(14px, 2.3vh, 24px) clamp(16px, 1.6vw, 24px); }
.bioma-desafio__icone { width: 28px; height: 28px; margin-bottom: clamp(8px, 1.4vh, 14px); }
.cartao .bioma-desafio__nome { margin-bottom: 6px; }
.bioma-desafio__texto { margin: 0; color: var(--texto-suave); }

/* ---------- 8 · a regeneração (papel) ---------- */
.bioma-regeneracao__aviso { margin-top: clamp(12px, 2vh, 20px); }
.bioma-indicador { display: grid; grid-template-columns: 26px 72px minmax(0, 1fr); align-items: baseline; gap: 14px; }
.bioma-indicador .icone { width: 22px; height: 22px; align-self: start; margin-top: 1px; }
.bioma-indicador__nome { font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }

/* ---------- 9 · bioma é módulo (tinta sobre o relevo) ---------- */
.bioma-modulo__nota { max-width: 62ch; margin: 0 auto; text-align: center; }
.bioma-modulo__acoes { justify-content: center; }

/* ---------- responsivo ---------- */
@media (max-width: 1120px) {
    .bioma-estacoes__esquema, .bioma-sisteminha__esquema { width: min(100%, 420px); }
}
@media (max-width: 800px) {
    .bioma-agua-solo__coluna--solo { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--ouro-linha); }
}
/* tablet em pé: os cartões curtos continuam em duas colunas */
@media (min-width: 561px) and (max-width: 800px) {
    .quadro .bioma-desafios__grade, .quadro .bioma-estacoes__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .bioma-indicador { grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; }
    .bioma-indicador__texto { grid-column: 2; }
    /* contorno local (pendência para o T2): no celular o V5 vira coluna, e as zonas com flex: 1 1 0
       ficavam com altura zero; aqui cada zona volta a ter a altura do próprio desenho */
    .bioma-sucessao__perfil .agrofloresta__zona { flex: none; }
}