/* =============================================================================
   SemearIA: visuais procedurais (V4 Sisteminha, V5 agrofloresta, V6 terra, V7 rádio,
   comparador V8 × V9). Cada visual tem uma raiz [data-visual]; fora da tela recebe .fora
   e pausa (visuais.js). Com movimento reduzido, tudo fica parado no estado final.
   Esquemas são desenhos do site, nunca imagem do jogo: a legenda vem do componente esquema.
   ============================================================================= */

[data-visual] { position: relative; }
[data-visual].fora, [data-visual].fora * { animation-play-state: paused !important; }
/* altura útil do palco: o visual nunca empurra a seção para além de uma tela */
:root { --palco-h: calc(100dvh - var(--header-h) - var(--pager-h)); }

/* ---------- V4 · anel do Sisteminha ---------- */
.sisteminha { width: min(100%, 560px, calc(var(--palco-h) * .9 - 60px)); margin-inline: auto; }
.sisteminha__arte { display: block; width: 100%; height: auto; overflow: visible; }
.anel__guia { fill: none; stroke: var(--ouro); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 2 6; }
.anel__guia--mar { stroke: var(--mar); stroke-opacity: .28; stroke-dasharray: none; }
.anel__trilhos path { fill: none; stroke: var(--ouro); stroke-opacity: .5; stroke-width: 1.5; }
.anel__seta { fill: none; stroke: var(--ouro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.anel__fluxo { fill: none; stroke: var(--ouro-claro); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 6 94; animation: fluxo 12s linear infinite; }
.anel__fluxo--agua { stroke: var(--mar); }
.anel__nos circle { fill: var(--laca); stroke: url(#talha-mel) var(--ouro); stroke-width: 2; }
.anel__nos-fio circle { fill: none; stroke: var(--mar); stroke-opacity: .5; stroke-width: 1; }
.anel__icones path { fill: none; stroke: var(--ouro-claro); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
/* os nomes recortam o traço que passa por trás (halo da cor do fundo, como rótulo de mapa);
   numa seção que não seja tinta, defina --anel-fundo com a cor dela */
.anel__nomes text { font: 600 12.5px Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; fill: var(--creme); text-anchor: middle; paint-order: stroke; stroke: var(--anel-fundo, var(--tinta)); stroke-width: 8px; stroke-linejoin: round; }
.anel__trocas text { font: italic 500 17px Cormorant, Georgia, serif; fill: var(--texto-suave); }
.anel__trocas .anel__troca--esq { text-anchor: end; }
.anel__losango { fill: var(--ouro); }
.anel__centro { font: italic 500 21px Cormorant, Georgia, serif; fill: var(--texto); text-anchor: middle; }
@keyframes fluxo { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- V5 · perfil da agrofloresta (arte gerada) ---------- */
.agrofloresta { width: 100%; }
.agrofloresta__arte { display: flex; }
.agrofloresta__zona { display: block; flex: 1 1 0; min-width: 0; width: 100%; height: auto; overflow: hidden; }
.agrofloresta__ano { font: 600 11px Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; fill: var(--papel-ouro); }
/* compacto: faixa baixa; a altura acompanha a tela para a seção caber com a cabeça e a grade */
.agrofloresta--compacta { width: min(100%, max(520px, calc((var(--palco-h) - 370px) * 6.1))); margin-inline: auto; }
/* as zonas sobem em sequência quando a figura entra na tela (visuais.js põe .espera e .visivel) */
.agrofloresta.espera .agrofloresta__zona { opacity: 0; transform: translateY(14px); }
.agrofloresta.visivel .agrofloresta__zona { animation: surgir .9s cubic-bezier(.2, .7, .2, 1) both; }
.agrofloresta.visivel .agrofloresta__zona:nth-child(2) { animation-delay: .3s; }
.agrofloresta.visivel .agrofloresta__zona:nth-child(3) { animation-delay: .6s; }

/* ---------- V6 · terra sarando ---------- */
.terra { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0c1711; border: 1px solid var(--ouro-linha); }
/* sem JS: uma grade parada (verde no estado final, terra rachada no estágio 0) */
.terra::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#0c1711 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, #0c1711 1px, transparent 1px) 0 0 / 10px 10px, radial-gradient(ellipse at 66% 40%, #1f5a33 0 22%, transparent 46%), radial-gradient(ellipse at 22% 70%, #2f6b3a 0 18%, transparent 40%), linear-gradient(160deg, #6f8f3e, #4f6f35); }
.terra[data-estagio='0']::before { background: linear-gradient(#0c1711 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, #0c1711 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(160deg, #7a5b3a, #5e4329); }
.terra.pronta::before { display: none; }
.terra__tela { position: relative; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.terra--fundo { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.terra__legenda { position: absolute; left: 10px; top: 10px; margin: 0; padding: 6px 10px 5px; background: rgba(8, 20, 15, .78); border: 1px solid var(--ouro-linha); font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(195, 185, 159, .55); white-space: nowrap; }
.terra__legenda span { transition: color .4s; }
.terra__legenda .feita { color: var(--texto); }
.terra__legenda .atual { color: var(--ouro); }
.terra--fundo .terra__legenda { display: none; }

/* ---------- V7 · rádio do Rasta ---------- */
.radio { margin: 0; --amp: 1; }
.radio[data-faixa='1'] { --amp: .62; }
.radio[data-faixa='2'] { --amp: .82; }
.radio[data-faixa='3'] { --amp: .5; }
.radio[data-faixa='4'] { --amp: 1.12; }
.radio__painel { position: relative; padding: clamp(14px, 2.4vh, 26px) clamp(14px, 1.8vw, 26px) clamp(12px, 2vh, 22px); background: linear-gradient(180deg, rgba(20, 48, 58, .5), rgba(8, 20, 15, .82)); border: 1px solid var(--ouro-linha); box-shadow: var(--sombra); }
.radio__painel::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(235, 189, 92, .1); pointer-events: none; }
.radio__dial { position: relative; height: clamp(34px, 5.4vh, 46px); }
.radio__escala { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radio__marcas { fill: none; stroke: var(--ouro); stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.radio__marcas--faixa { stroke-opacity: .85; }
.radio__agulha { position: absolute; top: 2px; bottom: 0; left: calc(10% + var(--faixa) * 20%); width: 2px; margin-left: -1px; background: var(--ouro); box-shadow: 0 0 0 1px rgba(8, 20, 15, .6); transition: left .4s cubic-bezier(.3, .7, .2, 1); }
.radio__agulha::before { content: ''; position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; background: var(--ouro); clip-path: var(--losango); transform: translateX(-50%); }
.radio__onda { position: relative; height: clamp(64px, 12vh, 118px); margin-top: clamp(10px, 1.6vh, 16px); overflow: hidden; background: linear-gradient(rgba(95, 179, 173, .1) 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, rgba(95, 179, 173, .08) 1px, transparent 1px) 0 0 / 10% 100%, #07120f; border: 1px solid rgba(95, 179, 173, .22); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.radio__onda-faixa { position: absolute; inset: 0 auto 0 0; width: 200%; animation: onda 14s linear infinite; }
.radio__onda-arte { display: block; width: 100%; height: 100%; overflow: visible; transform: scaleY(var(--amp)); transition: transform .4s cubic-bezier(.3, .7, .2, 1); }
.radio__onda-halo { fill: none; stroke: var(--mar); stroke-opacity: .18; stroke-width: 6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.radio__onda-linha { fill: none; stroke: var(--mar); stroke-opacity: 1; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes onda { to { transform: translateX(-50%); } }
.radio__faixas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(10px, 1.6vh, 16px); }
/* rótulos em versalete do Cinzel (minúsculas = versaletes): "Regeneração" cabe na coluna de 20%
   (sem respiro lateral e com espaçamento curto; o painel do rádio fica perto de 550 px nas telas largas) */
.radio__faixa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 600 calc(var(--fs-mini) * 1.08)/1.25 Cinzel, serif; letter-spacing: .03em; text-align: center; color: var(--texto-suave); transition: color .2s; }
.radio__faixa::before { content: ''; width: 7px; height: 7px; flex: none; background: var(--ouro-escuro); clip-path: var(--losango); transition: background .2s; }
.radio__faixa:hover { color: var(--ouro-claro); }
.radio__faixa[aria-pressed='true'] { color: var(--ouro); }
.radio__faixa[aria-pressed='true']::before { background: var(--ouro); }
.radio__faixa:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.radio__texto { min-height: 2.9em; margin: clamp(8px, 1.4vh, 14px) 0 0; padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid var(--ouro-linha); font-size: calc(var(--fs-lead) * .96); font-style: italic; line-height: 1.4; color: var(--creme); }

/* ---------- comparador · curvas de nível × tiles (o mesmo campo) ---------- */
.comparar--relevo { aspect-ratio: 120 / 68; background: #1d4b4a; }
.comparar--relevo .comparar__depois { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: fill; }
.comparar__grade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.comparar__grade path { fill: none; stroke: #08140f; stroke-opacity: .22; stroke-width: .07; }
.comparar__grade-maior path { stroke-opacity: .32; stroke-width: .12; }
/* o lado das curvas: papel de levantamento com as curvas em sépia (máscara recolorida por token) */
.comparar__curvas { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, #f6eedb 0%, transparent 65%), var(--papel); }
.comparar__curvas::before { content: ''; position: absolute; inset: 0; background: var(--papel-ouro); -webkit-mask: url("../visuais/relevo.c60e5e35effa.svg") center / 100% 100% no-repeat; mask: url("../visuais/relevo.c60e5e35effa.svg") center / 100% 100% no-repeat; }
.comparar__coordenadas { position: absolute; left: 12px; bottom: 9px; font: italic 500 calc(var(--fs-corpo) * .92)/1 Cormorant, Georgia, serif; color: var(--papel-suave); }
.comparar--relevo .comparar__rotulo { z-index: 1; }
.comparar__legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 600 calc(var(--fs-mini) * .92)/1.2 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.comparar__legenda li { display: flex; align-items: center; gap: 7px; }
.comparar__amostra { width: 11px; height: 11px; flex: none; border: 1px solid rgba(0, 0, 0, .35); }
.comparar__amostra--mar { background: #2b6662; }
.comparar__amostra--areia { background: #c9ad72; }
.comparar__amostra--baixada { background: #7a9850; }
.comparar__amostra--encosta { background: #4f7a42; }
.comparar__amostra--serra { background: #335c3b; }
.comparar__amostra--rio { background: #3f8f8a; }

/* ---------- telas menores ---------- */
@media (max-width: 760px) {
    .sisteminha { width: min(100%, 440px); }
    .agrofloresta--compacta { width: 100%; }
    .agrofloresta__arte { flex-direction: column; gap: 6px; }
    /* em coluna, flex: 1 1 0 zeraria a altura das zonas e o perfil sumiria */
    .agrofloresta__zona { flex: none; }
    .agrofloresta__divisa { display: none; }
    .radio__faixas { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
    .radio__faixa { flex-direction: row; gap: 7px; padding: 7px 8px; }
    .radio__texto { min-height: 4.3em; }
    /* a legenda das fases sai de cima da grade e fica logo abaixo dela */
    .terra:not(.terra--fundo) { aspect-ratio: auto; background: none; border: 0; overflow: visible; }
    .terra:not(.terra--fundo)::before { inset: 0 0 auto; aspect-ratio: 16 / 9; }
    .terra:not(.terra--fundo) .terra__tela { height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--ouro-linha); }
    .terra__legenda { position: static; margin-top: 8px; padding: 0; background: none; border: 0; white-space: normal; }
    .comparar--relevo .comparar__rotulo { top: 8px; }
    .comparar--relevo .comparar__rotulo--antes { left: 8px; }
    .comparar--relevo .comparar__rotulo--depois { right: 8px; }
}

/* ---------- movimento reduzido: estado final, sem rolagem nem varredura ---------- */
@media (prefers-reduced-motion: reduce) {
    .agrofloresta.espera .agrofloresta__zona { opacity: 1; transform: none; }
    .radio__onda-faixa, .anel__fluxo { animation: none !important; }
    .radio__agulha, .radio__onda-arte { transition: none; }
}