.sustentabilidade-lead { position: relative; z-index: 2; margin-top: -11vw; padding: var(--esp-sec-y) 0; }
.sustentabilidade-lead__text { max-width: 39rem; margin: 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-lead__title { margin: 1.75rem 0 0; font-weight: 700; }

@media (max-width: 768px) {
  .sustentabilidade-lead { margin-top: -28vw; }
}

.sustentabilidade-sol { padding: 0 0 var(--esp-sec-y); }
.sustentabilidade-sol__card { background: var(--esp-bg); border-radius: var(--esp-radius-xl); overflow: hidden; }
/* fundo do miolo fica no painel (abaixo das abas); atrás das abas é branco (card) */
.sustentabilidade-sol__panel { background: var(--esp-bg-soft); }

.sustentabilidade-sol__tabs { display: flex; gap: 0.5rem; }
.sustentabilidade-sol__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: 1.5rem 1rem; background: var(--esp-bg); border: 1px solid var(--esp-bg-soft); cursor: pointer; text-align: center;
  border-radius: var(--esp-radius-lg) var(--esp-radius-lg) 0 0;
  font: 300 var(--fs-h3)/1.2 var(--esp-font); color: var(--esp-gray); }   /* gray (não muted): a 80% de opacidade ainda passa AA 4.5 no mobile (20px) */
/* cantos externos acompanham o raio do card (senão a borda não fecha no canto) */
.sustentabilidade-sol__tab:first-child { border-top-left-radius: var(--esp-radius-xl); }
.sustentabilidade-sol__tab:last-child { border-top-right-radius: var(--esp-radius-xl); }
.sustentabilidade-sol__tab.is-active { background: var(--esp-bg-soft); border-color: transparent; color: var(--esp-ink); font-weight: 700; }
.sustentabilidade-sol__tab:not(.is-active) .sustentabilidade-sol__tab-label { opacity: 0.8; }
.sustentabilidade-sol__chevron { width: 1.6rem; height: 1.6rem; flex-shrink: 0; opacity: 0;
  background: var(--esp-yellow); -webkit-mask: no-repeat center/contain; mask: no-repeat center/contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); }
.sustentabilidade-sol__tab.is-active .sustentabilidade-sol__chevron { opacity: 1; }

/* o padding fica no __pad (conteúdo do topo); o ciclo é irmão full-width do painel, sem margens negativas */
.sustentabilidade-sol__pad { padding: 3rem 2.75rem 0; }
.sustentabilidade-sol__pad--portfolio { padding-bottom: 3.5rem; }
.sustentabilidade-sol__portfolio { max-width: 66rem; }

.sustentabilidade-sol__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 3.5rem; align-items: start; }
.sustentabilidade-duo { max-width: 22rem; }

.sustentabilidade-sol__cera { margin-top: 3.5rem; }
.sustentabilidade-sol__cera .esp-h3 { margin-top: 1rem; }
.sustentabilidade-sol__cera .esp-lead { max-width: 62rem; }

.sustentabilidade-sol__detail { position: relative; z-index: 2; margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.sustentabilidade-sol__detail-media { padding-top: 1rem; }

.sustentabilidade-stats { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* badge + título na linha 1; texto ocupa a largura toda na linha 2. Cantos folha (TR/BL grandes). */
.sustentabilidade-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 1rem; align-items: center;
  padding: 1rem; background: #fff; border-radius: var(--esp-radius-leaf); box-shadow: var(--esp-sh-card); }
.sustentabilidade-stat__num { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;
  background: var(--esp-cyan); border-radius: var(--esp-radius-round); color: #fff; font: 700 var(--fs-h3)/1 var(--esp-font); }
.sustentabilidade-stat__num span { font-size: 0.55em; }
.sustentabilidade-stat__title { margin: 0; font: 700 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-cyan); }
.sustentabilidade-stat__text { grid-column: 1 / -1; margin: 0; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-stat__text strong { color: var(--esp-gray); }

.sustentabilidade-sol__intro-txt .esp-btn { margin-top: 2rem; }
.sustentabilidade-proc { padding: 7rem 2.75rem 0 2.75rem; text-align: center; }
.sustentabilidade-proc__title { margin: 0; font: 700 var(--fs-h2)/1 var(--esp-font); color: var(--esp-cyan); }

/* infográfico do processo: SVG (ícones+setas) + rótulos sobrepostos por % (âncoras medidas no SVG). desktop 1419×406 / mobile 818×644 (via <picture>) */
.sustentabilidade-bioatr { position: relative; margin-top: 2.5rem; aspect-ratio: 1419 / 406; text-align: left; }
.sustentabilidade-bioatr__svg { position: absolute; inset: 0; }
.sustentabilidade-bioatr__svg img { width: 100%; height: 100%; display: block; }
.sustentabilidade-bioatr__lbl { position: absolute; transform: translateY(-50%); white-space: nowrap; font: 400 var(--fs-lead)/1.2 var(--esp-font); color: var(--esp-muted); }
.sustentabilidade-bioatr__lbl b { display: block; font-weight: 700; color: var(--esp-gray); }
.sustentabilidade-bioatr__lbl .is-reno { color: var(--esp-cyan); }
.sustentabilidade-bioatr__cert { position: absolute; transform: translateY(-50%); font: 700 var(--fs-sm)/1 var(--esp-font); letter-spacing: 0.03em; color: var(--esp-muted); }
.sustentabilidade-bioatr__lbl--in-reno { right: 78%; top: 28%; text-align: right; }
.sustentabilidade-bioatr__lbl--in-foss { right: 78%; top: 82%; text-align: right; }
.sustentabilidade-bioatr__lbl--asset { left: 47.5%; top: 80%; transform: translate(-50%, -50%); text-align: center; }
.sustentabilidade-bioatr__lbl--out-reno { left: 72%; top: 28%; }
.sustentabilidade-bioatr__lbl--out-foss { left: 72%; top: 82%; }
.sustentabilidade-bioatr__cert--left { left: 27.5%; top: 5%; }
.sustentabilidade-bioatr__cert--right { left: 68%; top: 5%; }

@media (max-width: 900px) {
  .sustentabilidade-sol__intro,
  .sustentabilidade-sol__detail { grid-template-columns: 1fr; gap: 2.5rem; }
  .sustentabilidade-sol__detail-media { order: -1; }
  .sustentabilidade-duo { max-width: 20rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  /* card full-bleed: remove a margem lateral (o padding interno do __pad/abas já dá o respiro) */
  .sustentabilidade-sol > .esp-container { padding-left: 0; padding-right: 0; }
  .sustentabilidade-sol__pad { padding: 2rem 1.35rem 0; }
  /* 3 abas seguem lado a lado no mobile (encolhem p/ caber, não empilham) */
  .sustentabilidade-sol__tab { padding: 1rem 0.5rem; gap: 0.6rem; font-size: var(--fs-sm); }
  .sustentabilidade-stats { grid-template-columns: 1fr; }
  .sustentabilidade-proc { padding: 2.5rem 1.35rem; }
}

/* --sus-cycle-overlap = fonte ÚNICA de quanto o ciclo sobe atrás dos stats (wave atrás via z-index) */
.sustentabilidade-cycle {
  --sus-cycle-overlap: 13rem;
  --sus-cycle-clear: calc(8vw - 4rem);   /* respiro do conteúdo abaixo da wave, somado ao overlap */
  position: relative; z-index: 1;         /* abaixo do .detail (z-index 2) → wave atrás dos cards */
  margin-top: calc(-1 * var(--sus-cycle-overlap)); color: #fff;
}
/* fechamento decrescente (esq. alta → dir. baixa), mesma inclinação das outras páginas.
   min(21vw, 19rem): trava a queda quando o container bate o max-width (senão o ângulo dispara em telas largas). */
.sustentabilidade-cycle__bg { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 calc(100% - min(27vw, 22rem))); }
.sustentabilidade-cycle__wave { display: block; width: 100%; height: auto; }   /* wave em proporção natural */
.sustentabilidade-cycle__fill { flex: 1; margin-top: -1px; background: var(--esp-grad-cycle); }
.sustentabilidade-cycle__inner { position: relative; z-index: 1; padding: calc(var(--sus-cycle-overlap) + var(--sus-cycle-clear)) 3rem 3rem; }

.sustentabilidade-cycle__top { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.08fr); gap: 3.5rem; align-items: start; }
.sustentabilidade-cycle__notes { display: flex; flex-direction: column; gap: 1.5rem; }
.sustentabilidade-cycle__note { display: flex; gap: 1.5rem; align-items: inherit; background: #fff; border-radius: var(--esp-radius-lg); padding: 1.75rem; box-shadow: var(--esp-sh-card); }
.sustentabilidade-cycle__ico { width: 3.5rem; height: auto; max-width: none; flex-shrink: 0; }
.sustentabilidade-cycle__note p { margin: 0; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-cycle__note p strong { color: var(--esp-gray); }

/* reveal do infográfico da cera: cards pop em sequência (fóssil → verde por último), lead/rodapés fecham */
.js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__card { opacity: 0; transform: translateY(6px) scale(.92);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__card--dark { transition-delay: .35s; }
.js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__card--green { transition-delay: .6s; }
.js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__lead,
.js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__foot { opacity: 0; transition: opacity .45s ease .85s; }
.js .sustentabilidade-cycle__graphic[data-reveal].is-in .sustentabilidade-info__card { opacity: 1; transform: none; }
.js .sustentabilidade-cycle__graphic[data-reveal].is-in .sustentabilidade-info__lead,
.js .sustentabilidade-cycle__graphic[data-reveal].is-in .sustentabilidade-info__foot { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__card,
  .js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__lead,
  .js .sustentabilidade-cycle__graphic[data-reveal] .sustentabilidade-info__foot { transition: none; }
}

/* infográfico: diagrama (SVG + cards sobrepostos por %) + descrição. SVG desktop 807×458 / mobile 1071×859 (via <picture>) */
.sustentabilidade-info { position: relative; }
.sustentabilidade-info__diagram { position: relative; aspect-ratio: 807 / 458; }
.sustentabilidade-info__svg { position: absolute; inset: 0; }
.sustentabilidade-info__svg img { width: 100%; height: 100%; display: block; }
.sustentabilidade-info__card { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.sustentabilidade-info__card b { font: 700 var(--fs-h2)/1 var(--esp-font); }
.sustentabilidade-info__card sup { font-size: 0.55em; }
.sustentabilidade-info__card > span { font: 700 var(--fs-sm)/1.2 var(--esp-font); }
.sustentabilidade-info__card--dark { left: 55%; top: 0.7%; width: 24.8%; height: 43.7%; gap: 1.5rem; }
.sustentabilidade-info__card--green { left: 34.7%; top: 55.7%; width: 24.8%; height: 43.7%; gap: 1.5rem; }
.sustentabilidade-info__card--green b { font-size: var(--fs-h3); }
/* descrição: overlay no bottom-left do diagrama (desktop) → vira fluxo abaixo do diagrama no mobile */
.sustentabilidade-info__lead { position: absolute; left: -2%; top: 66%; width: 34%; text-align: right; font: 400 var(--fs-body)/1.2 var(--esp-font); color: #fff; }
.sustentabilidade-info__lead strong { font-weight: 700; }
.sustentabilidade-info__foot { list-style: none; counter-reset: fn; margin: 1.5rem 0 0; padding: 0; font: 400 var(--fs-sm)/1.5 var(--esp-font); color: rgba(255, 255, 255, .9); }
.sustentabilidade-info__foot li { position: relative; padding-left: 1.7rem; margin-top: 0.4rem; }
.sustentabilidade-info__foot a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.sustentabilidade-info__foot a:hover { color: #fff; }
.sustentabilidade-info__foot li::before { counter-increment: fn; content: "(" counter(fn) ")"; position: absolute; left: 0; font-weight: 700; }

/* mobile: SVG vertical (viewBox 1071×859, via <picture>) full-bleed; texto no tamanho padrão (herda os --fs-*); descrição desce pro fluxo. */
@media (max-width: 768px) {
  .sustentabilidade-info__diagram { aspect-ratio: 1071 / 859; width: 100vw; margin-inline: calc(50% - 50vw); }
  /* posições dos cards medidas no SVG mobile (getBBox) */
  .sustentabilidade-info__card--dark { left: 43.6%; top: 0%; width: 35.5%; height: 39.8%; }
  .sustentabilidade-info__card--green { left: 18.1%; top: 51.2%; width: 35.5%; height: 39.8%; }
  .sustentabilidade-info__lead { position: static; left: auto; top: auto; width: auto; text-align: left; margin-top: 1.5rem; }
}

.sustentabilidade-cycle__bottom { margin-top: 7rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: end; }   /* 7rem: a foto __extra sobe -29% (~125px) — folga REAL disclaimer→foto ≈ 36px */
/* folha espelhada (mesmos valores do --esp-radius-leaf, ordem invertida) */
.sustentabilidade-cycle__cta { align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--esp-cyan); border-radius: var(--esp-radius-leaf-rev); padding: 2.5rem; }
.sustentabilidade-cycle__cta p { margin: 0 0 1.75rem; font: 400 var(--fs-body)/1.5 var(--esp-font); color: #fff; }
.sustentabilidade-cycle__cta p strong { font-weight: 700; }
.sustentabilidade-cycle__btn { align-self: flex-start; }

.sustentabilidade-cycle__gallery { align-self: end; }
.sustentabilidade-dest { max-width: 27rem; margin-left: auto; }
.sustentabilidade-dest__deco { overflow: hidden; border: 0; }
.sustentabilidade-dest__deco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sustentabilidade-dest__extra { position: absolute; left: 27%; top: -29%; width: 25%; aspect-ratio: 1; overflow: hidden; border-radius: var(--esp-shape-blob-alt); z-index: 3; }
.sustentabilidade-dest__extra img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  /* mobile empilha: sem overlap (wave não fica atrás dos stats); padding-top = clear (22vw p/ a wave mais alta) */
  .sustentabilidade-cycle { --sus-cycle-overlap: 0rem; --sus-cycle-clear: 22vw; }
  /* minmax(0,1fr) evita o overflow do min-content do SVG (1fr = minmax(auto,1fr) deixava a caixa vazar ~20px à direita) */
  .sustentabilidade-cycle__top { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sustentabilidade-cycle__bottom { grid-template-columns: minmax(0, 1fr); gap: 6rem; }
  .sustentabilidade-cycle__inner { padding-inline: 1.5rem; padding-bottom: 2.5rem; }
  .sustentabilidade-dest { margin: 0 auto; }
}

.sustentabilidade-outro { padding: 3.5rem 2.75rem; }

.sustentabilidade-video { max-width: 44rem; margin: 0 auto 4rem; aspect-ratio: 16 / 9; border-radius: var(--esp-radius-xl); overflow: hidden; position: relative; }

/* descrições dos blocos = body (não esp-lead — no layout são menores que o lead) */
.sustentabilidade-prog p,
.sustentabilidade-certs__head p { margin: 1rem 0 0; max-width: 62rem; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-prog .esp-h3 { margin-top: 1rem; }
.sustentabilidade-prog__cta { margin-top: 2rem; }

.sustentabilidade-certs { margin-top: 4rem; }
.sustentabilidade-certs__head .esp-h3 { margin-top: 1rem; }
.sustentabilidade-certs__grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.sustentabilidade-certs__grid--single { grid-template-columns: 1fr; }   /* aba Balanço: só ISCC → largura toda */
.sustentabilidade-cert { display: flex; gap: 1.5rem; align-items: flex-start; }
.sustentabilidade-cert__logo { flex-shrink: 0; width: 7.5rem; height: auto; }
.sustentabilidade-cert__body p { margin: 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-cert__body p + p { margin-top: 1rem; }
.sustentabilidade-cert__body strong { color: var(--esp-gray); }
.sustentabilidade-certs__action { margin-top: 3rem; }

.sustentabilidade-impacto { padding: var(--esp-sec-y) 0; }
.sustentabilidade-impacto__intro { margin: 1.5rem 0 0; max-width: 70rem; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-impacto__intro strong { color: var(--esp-gray); }
.sustentabilidade-impacto__grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.sustentabilidade-impacto__photo { width: 100%; height: auto; display: block; border-radius: var(--esp-radius-leaf); }
.sustentabilidade-impacto__title { margin: 1.5rem 0 0; color: var(--esp-cyan); }
.sustentabilidade-impacto__col p { margin: 1rem 0 0; font: 400 var(--fs-body)/1.5 var(--esp-font); color: var(--esp-body); }
.sustentabilidade-impacto__col p strong { color: var(--esp-gray); }

/* boxes de destaque (azul = ACV/pegada · cinza = ESG). --blue: ícone à esq. · --esg: ícone à dir. (ordem no DOM) */
.sustentabilidade-callout { margin-top: 3rem; display: flex; align-items: center; gap: 3rem; padding: 2.5rem 3rem; border-radius: var(--esp-radius-xl); color: #fff; }
.sustentabilidade-callout--blue { background: var(--esp-cyan); }
.sustentabilidade-callout--esg { background: var(--esp-gray); }
.sustentabilidade-callout__ico { width: 6.5rem; height: auto; flex-shrink: 0; }
.sustentabilidade-callout__body { flex: 1; }
.sustentabilidade-callout__body p { margin: 0 0 1.75rem; font: 400 var(--fs-body)/1.5 var(--esp-font); }
.sustentabilidade-callout--blue .sustentabilidade-callout__body p { font-weight: 700; }
.sustentabilidade-callout__title { margin: 0 0 1rem; font: 700 var(--fs-h3)/1.2 var(--esp-font); color: #fff; }

@media (max-width: 768px) {
  .sustentabilidade-outro { padding: 2.5rem 1.35rem; }
  .sustentabilidade-certs__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* selo acima do texto → texto usa a largura toda */
  .sustentabilidade-cert { flex-direction: column; }

  /* infográfico: SVG mobile (818×644); rótulos ACIMA/ABAIXO dos ícones (âncoras medidas no SVG mobile) */
  .sustentabilidade-bioatr { aspect-ratio: 818 / 644; }
  .sustentabilidade-bioatr__lbl { font-size: var(--fs-sm); }
  .sustentabilidade-bioatr__cert { font-size: var(--fs-xs); }
  .sustentabilidade-bioatr__lbl--in-reno { right: auto; left: 5%; top: 16.5%; text-align: left; }
  .sustentabilidade-bioatr__lbl--in-foss { right: auto; left: 5%; top: 98%; text-align: left; }
  .sustentabilidade-bioatr__lbl--out-reno { left: 52%; top: 13%; }
  .sustentabilidade-bioatr__lbl--out-foss { left: 66%; top: 98%; }
  .sustentabilidade-bioatr__lbl--asset { left: 37%; top: 78%; transform: translateY(-50%); text-align: left; }
  .sustentabilidade-bioatr__cert--left { left: 10.5%; top: 29.5%; }
  /* checkbox direito fica no canto (81,5%) → texto à esquerda dele (espelha o lado esq., sem estourar) */
  .sustentabilidade-bioatr__cert--right { left: auto; right: 2.5%; top: 29.5%; text-align: right; }

  /* Impacto: colunas empilham; boxes viram coluna com o ícone no topo */
  .sustentabilidade-impacto__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sustentabilidade-callout { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2rem; }
  .sustentabilidade-callout--esg { flex-direction: column-reverse; }
}