/* =====================================================================
   12 · ambiental — "Impacto ambiental" (claro). Dados da EcoLocal (L17).
   Cena fixada: a pista (SVG da cena, desenhado pelo JS em px de tela) atravessa três quadros e a
   grade põe o texto por cima. Os quadros ficam empilhados no .stage (absolutos) e a rolagem troca
   um pelo outro; em movimento reduzido viram cinco blocos de uma tela, um embaixo do outro.
   Tudo sob #ambiental.
   ===================================================================== */
#ambiental {
  overflow-x: clip;
  --am-top: clamp(18px, 3.4vh, 44px);     /* folga abaixo do HUD */
  --am-bot: clamp(22px, 4.6vh, 60px);     /* folga no pé do quadro */
  --am-bug: 34px;                          /* altura do título quando vira selo no canto */
  --am-belt: clamp(120px, 11.4vw, 300px);  /* a reta em close (quadro 1): 64 m de pista na largura da tela */
}
#ambiental .am-stage { background: transparent; }
#ambiental .checker--br { opacity: .06; }
/* unidade em minúscula (kg, t): .num e .stat__n do núcleo põem tudo em caixa alta */
#ambiental small { text-transform: none; }

/* ---------- a pista (SVG) ---------- */
#ambiental .am-track { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none;
  /* a pista esmaece sob o selo do canto: no mergulho da câmera ela passava por trás do título encolhido */
  --am-mask: linear-gradient(180deg, transparent calc(var(--hud-h) + var(--am-top) + var(--am-bug) - 4px), #000 calc(var(--hud-h) + var(--am-top) + var(--am-bug) + 14px));
  -webkit-mask-image: var(--am-mask); mask-image: var(--am-mask); }
#ambiental .am-t-surface { fill: var(--acai); fill-rule: evenodd; }
#ambiental .am-t-line { fill: none; stroke: rgba(245, 238, 224, .42); stroke-width: 1; }
#ambiental .am-t-line--edge { stroke: rgba(245, 238, 224, .85); stroke-width: 1.6; }
#ambiental .am-t-check { fill: rgba(245, 238, 224, .9); }
#ambiental .am-t-finline { fill: none; stroke: var(--offwhite); stroke-width: 3; }
#ambiental .am-t-items use { fill: var(--acai-dark); stroke: var(--offwhite); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#ambiental .am-t-items use.is-honey { stroke: var(--honey); }
#ambiental .am-lap, #ambiental .am-lap-glow { fill: none; stroke: var(--honey); stroke-linecap: round; stroke-linejoin: round; }
#ambiental .am-lap-glow { opacity: .24; }
#ambiental .am-lap-dot { fill: #fff6dc; }

/* caixas de medida (invisíveis): a câmera enquadra a pista nelas */
#ambiental .am-slot { pointer-events: none; }
#ambiental .am-slot--belt { position: absolute; left: 0; right: 0; bottom: var(--am-bot); height: var(--am-belt); }

/* ---------- grade e quadros ---------- */
#ambiental .am-wrap { position: relative; z-index: 2; height: 100%; }
#ambiental .am-f { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--hud-h) + var(--am-top) + var(--am-bug) + 18px); bottom: var(--am-bot); }

/* título: grande no quadro 1; o JS encolhe o h2 para o canto (selo) e põe a fonte ao lado */
#ambiental .am-head { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--hud-h) + var(--am-top)); display: grid; justify-items: start; gap: 4px; }
#ambiental .am-head__src { transform-origin: 0 50%; }
#ambiental .am-head__t { width: fit-content; color: var(--ink-text); transform-origin: 0 0; font-size: calc((clamp(48px, min(6vw, 10.5vh), 118px)) * var(--ts, 1)); }

/* ---------- 1 · o total ---------- */
#ambiental .am-f1 { top: calc(var(--hud-h) + var(--am-top)); bottom: calc(var(--am-bot) + var(--am-belt) + clamp(14px, 2.6vh, 34px)); display: grid; align-content: end; justify-items: end; }
#ambiental .am-total { justify-items: end; text-align: right; gap: .1em; }
#ambiental .am-total__n { font-size: calc((clamp(140px, min(41vh, 25vw), 500px)) * var(--ts, 1)); line-height: .92; color: var(--acai); letter-spacing: -.02em; }
#ambiental .am-total__n small { font-size: .36em; margin-left: .1em; letter-spacing: 0; }
#ambiental .am-total .stat__l { max-width: none; color: var(--ink-text); font-size: calc((clamp(16px, .55vw + 10px, 26px)) * var(--ts, 1)); }

/* ---------- 2 · a volta ---------- */
/* a pista é cenário: medida pela altura do quadro e livre da faixa da grade (em 2560 a faixa de 1560
   deixava a assinatura miúda no meio da tela); centrada com margem negativa, que a medida (offset*) enxerga */
#ambiental .am-slot--track, #ambiental .am-idx {
  --tw: min(100vw - 2 * var(--gutter), (100vh - var(--hud-h) - var(--am-top) - var(--am-bug) - 18px - var(--am-bot)) * 1.963);
  position: absolute; top: 0; bottom: 0; left: 50%; width: var(--tw); margin-left: calc(var(--tw) / -2);
}
/* o número mora no gramado: a pista (1,96 : 1) cabe na caixa; o gramado tem ~83% da altura dela */
#ambiental .am-idx { --trk: min(100cqw / 1.963, 100cqh); container-type: size; display: grid; place-content: center; justify-items: center; text-align: center; gap: .15em; }
#ambiental .am-idx__l { color: var(--acai); font-size: calc((clamp(14px, calc(var(--trk) * .034), 26px)) * var(--ts, 1)); letter-spacing: .14em; }
#ambiental .am-idx__n { color: var(--acai); font-size: calc((calc(var(--trk) * .37)) * var(--ts, 1)); letter-spacing: -.02em; }
#ambiental .am-fin { position: absolute; left: 0; top: 0; }  /* o JS põe na linha de chegada */
#ambiental .am-fin.is-rot .am-fin__t { transform: translateY(-50%); }  /* pista em pé: a tarja fica ao lado da linha */
#ambiental .am-fin__t { display: block; transform: translate(-50%, -100%); padding: .34em .7em .28em; font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(13px, .45vw + 8px, 19px)) * var(--ts, 1)); letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--acai-dark); background: var(--honey); clip-path: polygon(.4em 0, 100% 0, calc(100% - .4em) 100%, 0 100%); }

/* ---------- 3 · recicláveis ---------- */
#ambiental .am-f3 { display: grid; align-content: center; }
#ambiental .am-rec { --pad: clamp(44px, 4.2cqi, 64px); --lh: clamp(32px, 2.9cqi, 46px); --gs: 6px; --mb: clamp(14px, 1.4cqi, 22px); container-type: inline-size; margin: 0; }
#ambiental .am-rec__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; margin-bottom: var(--mb); }
#ambiental .am-rec__head { display: grid; gap: 2px; justify-items: start; }
#ambiental .am-rec__n { font-size: calc((clamp(76px, min(10.5cqi, 19vh), 190px)) * var(--ts, 1)); color: var(--acai); letter-spacing: -.01em; }
#ambiental .am-rec__n small { font-size: .38em; margin-left: .1em; letter-spacing: 0; }

/* frações pequenas: rótulo externo com linha guia em cotovelo (latinhas em cima, vidro embaixo: as guias não se cruzam) */
#ambiental .am-small { display: grid; justify-items: end; row-gap: var(--gs); padding-right: var(--pad); }
#ambiental .am-small li { display: flex; align-items: center; gap: 10px; height: var(--lh); white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(14px, 1.25cqi, 20px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-text-2); }
#ambiental .am-small b { font-style: italic; font-weight: 900; font-size: calc((clamp(24px, 2.3cqi, 38px)) * var(--ts, 1)); letter-spacing: 0; line-height: 1; color: var(--ink-text); }
#ambiental .am-small .am-ico { width: calc(var(--lh) * .95); }

#ambiental .am-ico { display: block; height: auto; aspect-ratio: 1; fill: none; stroke: var(--acai); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* a reta: a caixa tem a proporção da reta da pista (84,39 m × 6 raias de 1,22 m); a barra ocupa as raias 2 a 5 */
#ambiental .am-slot--bar { position: relative; width: 100%; aspect-ratio: 84.39 / 7.32; }
#ambiental .am-bar { position: absolute; left: 0; right: 0; top: 16.667%; bottom: 16.667%; }
#ambiental .am-bar__fill { position: absolute; inset: 0; background: var(--honey); transform-origin: 0 50%; }
#ambiental .am-segs { position: absolute; inset: 0; display: grid; grid-template-columns: 478fr 302fr 110fr 8fr 4fr; }
#ambiental .am-segs i { display: block; background: var(--honey); }
#ambiental .am-segs i:nth-child(even) { background: var(--honey-2); }
#ambiental .am-cut { position: absolute; top: -5px; bottom: -5px; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--offwhite); transform-origin: 50% 50%; }
#ambiental .am-bar__tip { position: absolute; left: 0; top: -30%; bottom: -30%; width: 90px; margin-left: -80px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side at 88% 50%, rgba(255, 246, 220, .95), rgba(255, 214, 107, .5) 45%, rgba(244, 178, 35, 0) 100%); }
/* a guia sai do meio da fração, sobe e dobra para o rótulo */
#ambiental .am-lead { position: absolute; bottom: 50%; right: calc(100% - var(--cx)); width: calc(var(--pad) - 8px - (100% - var(--cx))); border-top: 1.5px solid var(--ink-text); border-right: 1.5px solid var(--ink-text); }
#ambiental .am-lead--v { height: calc(50% + 16.667% * 1.5 + var(--mb) + var(--lh) / 2); }
#ambiental .am-lead--l { height: calc(50% + 16.667% * 1.5 + var(--mb) + var(--lh) * 1.5 + var(--gs)); }

#ambiental .am-under { display: grid; grid-template-columns: 478fr 302fr 122fr; }
#ambiental .am-under li { position: relative; min-width: 0; display: grid; justify-items: start; gap: 6px; padding: clamp(18px, 2.4vh, 30px) 0 0 12px; white-space: nowrap; }
#ambiental .am-under li::before { content: ''; position: absolute; left: 0; top: 0; width: 1.5px; height: calc(100% - 4px); background: linear-gradient(180deg, var(--acai) 0%, rgba(74, 31, 96, .14) 100%); }
#ambiental .am-under .am-ico { width: clamp(30px, 3.2cqi, 50px); margin-bottom: 4px; }
#ambiental .am-under b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(34px, 4.4cqi, 76px)) * var(--ts, 1)); line-height: 1; padding-top: .06em; color: var(--ink-text); }
#ambiental .am-under b small { font-size: .46em; }
#ambiental .am-under span { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(13px, 1.15cqi, 19px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-text-2); }

/* ---------- 4 · orgânicos ---------- */
#ambiental .am-f4 { display: grid; align-content: center; }
#ambiental .am-org__l { display: flex; align-items: center; gap: 12px; }
#ambiental .am-ico--leaf { width: clamp(40px, 3.4vw, 64px); stroke: var(--acai); stroke-width: 2.2; }
#ambiental .am-org__n { font-size: calc((clamp(90px, min(11vw, 20vh), 220px)) * var(--ts, 1)); color: var(--acai); letter-spacing: -.01em; }
#ambiental .am-org__n small { font-size: .38em; margin-left: .1em; letter-spacing: 0; }
#ambiental .am-org__lede { max-width: 27ch; text-wrap: balance; } /* duas linhas, sem "compostagem" sozinha na terceira */
#ambiental .am-cols { --cw: clamp(84px, 17cqi, 170px); --cg: clamp(40px, 13cqi, 150px); --lab: clamp(64px, 9vh, 96px); container-type: inline-size; margin: 0; }
#ambiental .am-plot { display: flex; justify-content: center; align-items: stretch; gap: var(--cg); height: clamp(240px, 50vh, 600px); border-bottom: 2px solid var(--acai); }
#ambiental .am-col { width: var(--cw); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
/* cada coluna é uma raia de pista em pé (as mesmas linhas da pista do quadro 2), com a faixa mel no topo */
#ambiental .am-col__bar { position: relative; display: block; width: 100%; height: calc((100% - var(--lab)) * var(--kg) / 306); transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(245, 238, 224, .36) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.67% - .5px), rgba(245, 238, 224, .36) calc(66.67% - .5px) calc(66.67% + .5px), transparent calc(66.67% + .5px)),
    linear-gradient(180deg, var(--acai) 0%, var(--acai-dark) 100%);
  box-shadow: inset 1.6px 0 0 rgba(245, 238, 224, .7), inset -1.6px 0 0 rgba(245, 238, 224, .7); }
#ambiental .am-col__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--honey); box-shadow: 0 0 14px rgba(244, 178, 35, .55); }
#ambiental .am-col__v { display: block; margin-bottom: 12px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(32px, 6cqi, 64px)) * var(--ts, 1)); line-height: 1; padding-top: .06em; white-space: nowrap; color: var(--ink-text); }
#ambiental .am-col__v small { font-size: .46em; }
#ambiental .am-axis { display: flex; justify-content: center; gap: var(--cg); margin-top: 12px; }
#ambiental .am-axis span { width: var(--cw); text-align: center; font-family: var(--f-mono); font-weight: 700; font-size: calc((clamp(13px, .35vw + 9px, 18px)) * var(--ts, 1)); letter-spacing: .1em; color: var(--ink-text-2); }

/* ---------- 5 · o destino ---------- */
#ambiental .am-f5 { display: grid; align-content: center; }
#ambiental .am-quote { gap: clamp(14px, 2.4vh, 28px); }
#ambiental .am-quote__t {
  position: relative; padding: .06em 0 0 22px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: calc((clamp(30px, min(3.1vw, 6vh), 64px)) * var(--ts, 1)); line-height: 1.12; letter-spacing: .005em; color: var(--ink-text); text-wrap: balance;
}
#ambiental .am-quote__t::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .1em; width: 5px; background: var(--honey); transform: scaleY(var(--bar, 1)); transform-origin: 50% 0; }
#ambiental .am-quote__t em { font-style: italic; color: var(--acai); }

/* a imagem: fora da grade, sangra à direita; começa depois da coluna do texto (5 de 12 da faixa larga) */
#ambiental .am-photo {
  --rv: 1;   /* 0 → 1: a cortina diagonal corre da esquerda para a direita */
  position: absolute; z-index: 1; margin: 0; right: 0;
  top: calc(var(--hud-h) + var(--am-top));
  bottom: calc(var(--cut) + 18px);
  left: max(calc(var(--gutter) + (100% - 2 * var(--gutter)) * .42 + 28px), calc(50% - 780px + var(--gutter) + (1560px - 2 * var(--gutter)) * .42 + 28px));
  container-type: size;
}
#ambiental .am-photo__clip {
  position: absolute; inset: 0; overflow: hidden; background: #ddd2e3;
  clip-path: polygon(18cqh 0, calc(18cqh + 100% * var(--rv)) 0, calc(100% * var(--rv)) 100%, 0 100%);
}
#ambiental .am-photo__clip img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 58%; transform-origin: 30% 60%; }
#ambiental .am-photo__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(14, 7, 19, .62) 0%, rgba(14, 7, 19, .22) 9%, rgba(14, 7, 19, 0) 20%); }
#ambiental .am-photo .credit { position: absolute; right: 18px; bottom: 12px; z-index: 2; }
/* fio mel na frente da cortina, na mesma inclinação (0,18 da altura) */
#ambiental .am-photo__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; margin-left: -3px; background: var(--honey); opacity: 0; transform-origin: 0 100%; transform: translateX(calc(100cqw * var(--rv))) skewX(-10.2deg); box-shadow: 0 0 18px rgba(244, 178, 35, .6); }

/* ---------- tablet em pé: a tela é alta, não larga ---------- */
@media (orientation: portrait) and (max-width: 1200px) {
  #ambiental { --am-belt: clamp(120px, 15vw, 200px); }
  #ambiental .am-head__t { font-size: calc((clamp(52px, 8vw, 100px)) * var(--ts, 1)); }
  #ambiental .am-f1 { align-content: center; justify-items: start; }
  #ambiental .am-total { justify-items: start; text-align: left; }
  #ambiental .am-total__n { font-size: calc((clamp(160px, 40vw, 420px)) * var(--ts, 1)); }
  /* a pista fica em pé (o JS gira a câmera 90° quando a caixa é mais alta que larga): ocupa o quadro inteiro */
  #ambiental .am-slot--track, #ambiental .am-idx { left: 0; width: 100%; margin-left: 0; }
  #ambiental .am-idx { --trk: min(100cqh / 1.963, 100cqw); }
  #ambiental .am-idx__n { font-size: calc((calc(var(--trk) * .29)) * var(--ts, 1)); }
  #ambiental .am-rec { --lh: clamp(38px, 4.6cqi, 52px); --pad: clamp(52px, 6cqi, 72px); --mb: clamp(18px, 2.6cqi, 30px); }
  #ambiental .am-rec__n { font-size: calc((clamp(110px, 21cqi, 220px)) * var(--ts, 1)); }
  #ambiental .am-small li { font-size: calc((clamp(15px, 2cqi, 20px)) * var(--ts, 1)); }
  #ambiental .am-small b { font-size: calc((clamp(28px, 3.6cqi, 40px)) * var(--ts, 1)); }
  #ambiental .am-under li { padding-top: clamp(24px, 3vh, 40px); }
  #ambiental .am-under .am-ico { width: clamp(40px, 6.2cqi, 64px); }
  #ambiental .am-under b { font-size: calc((clamp(40px, 6.2cqi, 76px)) * var(--ts, 1)); }
  #ambiental .am-under span { font-size: calc((clamp(13px, 2cqi, 20px)) * var(--ts, 1)); letter-spacing: .05em; }
  #ambiental .am-org { row-gap: clamp(40px, 5vh, 80px); }
  #ambiental .am-org > * { --span: 1 / -1; }
  #ambiental .am-org__n { font-size: calc((clamp(110px, 17vw, 200px)) * var(--ts, 1)); }
  #ambiental .am-plot { height: clamp(280px, 32vh, 480px); }
  #ambiental .am-f5 { align-content: start; padding-top: clamp(20px, 3vh, 48px); }
  #ambiental .am-end > * { --span: 1 / -1; }
  #ambiental .am-quote__t { font-size: calc((clamp(36px, 5.6vw, 60px)) * var(--ts, 1)); }
  #ambiental .am-photo { left: 0; top: 50%; }
}

/* ---------- movimento reduzido: cinco blocos de uma tela, estado final ---------- */
.reduced #ambiental .am-stage { height: auto; overflow: visible; }
.reduced #ambiental .am-wrap { height: auto; }
.reduced #ambiental .am-head { position: relative; left: auto; top: auto; padding-top: calc(var(--hud-h) + var(--am-top)); }
.reduced #ambiental .am-f { position: relative; inset: auto; min-height: calc(100vh - var(--hud-h)); min-height: calc(100svh - var(--hud-h)); padding-block: clamp(28px, 5vh, 64px); }
.reduced #ambiental .am-f1 { min-height: calc(100svh - var(--hud-h) - 180px); align-content: center; }
.reduced #ambiental .am-slot--belt { display: none; }
.reduced #ambiental .am-slot--track, .reduced #ambiental .am-idx { top: clamp(28px, 5vh, 64px); bottom: clamp(28px, 5vh, 64px); }
.reduced #ambiental .am-track.is-static { z-index: 0; -webkit-mask-image: none; mask-image: none; }
/* sem a câmera, a reta dos recicláveis é pintada no próprio CSS (mesmas seis raias) */
.reduced #ambiental .am-slot--bar {
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(100% / 6 - 1px), rgba(245, 238, 224, .42) calc(100% / 6 - 1px) calc(100% / 6)),
    var(--acai);
  box-shadow: inset 0 1.6px 0 rgba(245, 238, 224, .85), inset 0 -1.6px 0 rgba(245, 238, 224, .85);
}
.reduced #ambiental .am-photo { top: auto; height: calc(100svh - var(--hud-h) - var(--am-top) - var(--cut) - 18px); }
@media (orientation: portrait) and (max-width: 1200px) {
  .reduced #ambiental .am-photo { height: calc((100svh - var(--hud-h)) * .5 - var(--cut)); }
}