@charset "UTF-8";
/* =============================================================================
   BioCSystems · style.css
   -----------------------------------------------------------------------------
   Toda a aparência do site em um único arquivo. É usado por todas as páginas:
   index.html, equipe.html e as versões em inglês em /en/.

   IDENTIDADE (manual de marca)
     Verde da marca ....... #00D462  (destaques, números, botões)
     Verde-escuro ......... #0A451E  (fundos verdes, texto sobre menta)
     Menta ................ #EBFFEE  (fundos claros e texto sobre o escuro)
     Preto esverdeado ..... #141914  (fundo escuro principal)
     Fonte ................ Poppins (300 a 800), hospedada no próprio site

   TAMANHOS DE TELA
     Computador ........... @media (min-width: 1024px)
     Tablet e celular ..... @media (max-width: 1023.98px)
     O topo vira o botão "Menu" abaixo de 1200 px.
     Cada seção tem um bloco para computador e outro para tablet/celular.

   VARIÁVEIS GLOBAIS (definidas na parte 3)
     --gut  margem lateral do conteúdo (20 px no celular, até 72 px no computador)
     --t    tamanho dos títulos de seção (32 / 40 / até 56 px)
     --t3   tamanho dos nomes em listas (26 / 30 / até 40 px)

   ÍNDICE
      0. Fontes (Poppins)
      1. Base: reset e elementos gerais
      2. Topo fixo, navegação e menu do celular
      3. Sistema: margens e tamanhos de título comuns
      4. Abertura (.hero)
      5. Como atuamos (#metodo)
      6. 01 · Consultoria (#consultoria)
      7. 02 · Plataforma (#plataforma)
      8. 03 · Produtos (#produtos)
      9. 04 · Circularidade (#circularidade)
     10. Onde atuamos (#setores)
     11. Quem somos (#quem-somos)
     12. Contato e rodapé (#contato, footer)
     13. Página Equipe (#equipe)
     14. Ajustes finais de títulos e margens (precisa ficar depois das seções)
     15. Seletor de idioma PT · EN
     16. Classes utilitárias (u-*)

   ANIMAÇÕES
     Os estados iniciais escondidos só valem quando o JavaScript adiciona a
     classe "M" à seção; as classes "in", "on" e "act" mostram os elementos.
     Quem ativa "reduzir movimento" no aparelho vê tudo parado.
   ========================================================================== */

/* =============================================================================
   0. FONTES
   -----------------------------------------------------------------------------
   Poppins em cinco pesos (300, 400, 600, 700 e 800), com os arquivos .woff2
   em assets/fonts/. Há duas versões de cada peso: "latin" (letras básicas) e
   "latin-ext" (caracteres extras). O navegador baixa só o que a página usa.
   ========================================================================== */
/* Poppins (OFL), hospedada no próprio site: a fonte da marca. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(../fonts/poppins-latin-300-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(../fonts/poppins-latin-ext-300-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/poppins-latin-400-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/poppins-latin-600-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/poppins-latin-700-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/poppins-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/poppins-latin-800-normal.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/poppins-latin-ext-800-normal.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================================
   1. BASE: RESET E ELEMENTOS GERAIS
   -----------------------------------------------------------------------------
   Regras que valem para a página inteira: largura das caixas incluindo a
   borda, fonte padrão, fundo escuro, links sem sublinhado e o contorno verde
   que aparece ao navegar pelo teclado (:focus-visible).
   ========================================================================== */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #141914;
  color: #ebffee;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
video {
  display: block;
}
button {
  font: inherit;
}
[id] {
  scroll-margin-top: 0;
}
:focus-visible {
  outline: 2px solid #00d462;
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================================
   2. TOPO FIXO, NAVEGAÇÃO E MENU DO CELULAR
   -----------------------------------------------------------------------------
   O topo (.hd) fica fixo e muda de cor conforme a seção abaixo dele: o
   JavaScript copia o data-tone da seção ("dark", "light" ou "green") para o
   topo. A classe "solid" dá fundo ao topo depois que a página rola.
   ========================================================================== */
/* Topo fixo (.hd) e suas variações de cor (data-tone e .solid) */
.hd {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 92px;
  padding: 0 clamp(24px, 5vw, 72px);
  color: #ebffee;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.45s,
    border-color 0.45s;
}
.hd.solid {
  background: #141914;
  border-color: rgba(235, 255, 238, 0.12);
}
.hd.solid[data-tone='light'] {
  background: #ebffee;
  color: #141914;
  border-color: rgba(20, 25, 20, 0.12);
}
.hd.solid[data-tone='green'] {
  background: #0a451e;
  border-color: rgba(235, 255, 238, 0.16);
}
.hd .lg {
  height: 30px;
  width: auto;
  display: block;
}
/* Links do menu no computador (.hnav); o link ativo ganha a classe "on" */
.hnav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 2.4vw, 44px);
  padding: 0 28px;
  font-size: 17px;
  font-weight: 500;
}
.hnav a {
  opacity: 0.84;
  padding: 6px 0;
  transition:
    opacity 0.3s,
    box-shadow 0.3s;
}
.hnav a:hover,
.hnav a.on {
  opacity: 1;
  box-shadow: 0 2px 0 #00d462;
}
.hd[data-tone='light'] .hnav a:hover,
.hd[data-tone='light'] .hnav a.on {
  box-shadow: 0 2px 0 #0a451e;
}
.hnav i {
  width: 1px;
  height: 18px;
  background: currentColor;
  opacity: 0.3;
}
/* Lado direito do topo: idioma, botão Contato e botão Menu (.hr) */
.hr {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.9vw, 28px);
  margin-left: auto;
}
/* Seletor de idioma no topo (.lang) */
.lang {
  font-size: 15px;
  white-space: nowrap;
}
.lang span {
  opacity: 0.6;
}
/* Botão "Contato" do topo (.hcta) */
.hcta {
  background: #00d462;
  color: #141914;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  transition: transform 0.3s;
}
.hcta:hover {
  transform: translateY(-1px);
}
.hd.solid[data-tone='light'] .hcta {
  background: #141914;
  color: #ebffee;
}
/* Botão "Menu" do celular (.mbtn) */
.mbtn {
  display: none;
  background: none;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  opacity: 0.9;
}
/* Menu do celular em tela cheia (.mmenu) */
.mmenu {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 49;
  background: #141914;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mmenu[hidden] {
  display: none;
}
.mmenu nav {
  display: grid;
}
.mmenu nav a {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 16px 0;
  border-bottom: 1px solid rgba(235, 255, 238, 0.14);
}
.mmenu p {
  font-size: 15px;
  color: rgba(235, 255, 238, 0.7);
}
/* --- Telas até 1199 px: topo com o botão "Menu" --- */
@media (max-width: 1199.98px) {
  /* Topo fixo (.hd) e suas variações de cor (data-tone e .solid) */
  .hd {
    height: 68px;
  }
  .hd .lg {
    height: 24px;
  }
  /* Links do menu no computador (.hnav); o link ativo ganha a classe "on" */
  .hnav,
  .lang,
  .hcta {
    display: none;
  }
  /* Botão "Menu" do celular (.mbtn) */
  .mbtn {
    display: block;
  }
}

/* =============================================================================
   3. SISTEMA: MARGENS E TAMANHOS DE TÍTULO COMUNS
   -----------------------------------------------------------------------------
   Variáveis que deixam todas as seções com as mesmas margens laterais (--gut)
   e os mesmos tamanhos de título (--t e --t3). Mudar aqui muda o site todo.
   ========================================================================== */
:root {
  --gut: max(20px, calc((100% - 600px) / 2));
  --t: min(32px, calc((100vw - 40px) / 10.1));
  --t3: 26px;
}
/* --- Tablet (a partir de 600 px) --- */
@media (min-width: 600px) {
  :root {
    --t: 40px;
    --t3: 30px;
  }
}
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  :root {
    --gut: max(clamp(40px, 5vw, 72px), calc((100% - 1296px) / 2));
    --t: clamp(44px, 3.8889vw, 56px);
    --t3: clamp(30px, 2.7778vw, 40px);
  }
}
.hd,
.mmenu {
  padding-left: var(--gut);
  padding-right: var(--gut);
}
main h2 {
  white-space: normal;
  text-wrap: balance;
}

/* =============================================================================
   4. ABERTURA (.hero)
   -----------------------------------------------------------------------------
   Primeira tela: frase "Da pesquisa à descarbonização", texto de apoio e a
   folha da marca à direita. A folha é uma máscara (folha-cheia.svg) com o vídeo
   de abertura dentro; as linhas verdes atrás dela se desenham ao carregar
   (animação "dr"). No celular, a folha fica embaixo do texto.
   ========================================================================== */
/* Abertura (.hero): composição, folha com vídeo (.leaf), linhas (.lines) e textos */
.hero {
  position: relative;
  overflow: hidden;
  background: #141914;
  color: #ebffee;
  height: min(62.5vw, 900px);
}
.hero .stage {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 1440px);
  height: 100%;
  pointer-events: none;
}
.hero .lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero .lines path {
  fill: none;
  stroke: #00d462;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: dr 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
.hero .lines path:nth-child(2) {
  animation-delay: 0.47s;
}
.hero .lines path:nth-child(3) {
  animation-delay: 0.59s;
}
/* Animação "dr" */
@keyframes dr {
  to {
    stroke-dashoffset: 0;
  }
}
.hero .lines.m {
  display: none;
}
.hero .leaf {
  position: absolute;
  left: 57.5%;
  top: 12%;
  width: 58%;
  aspect-ratio: 412/383;
  -webkit-mask: url(../img/folha-cheia.svg) center/100% 100% no-repeat;
  mask: url(../img/folha-cheia.svg) center/100% 100% no-repeat;
  overflow: hidden;
  background: #0a451e;
}
.hero .leaf video,
.hero .leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero .txt {
  position: absolute;
  left: var(--gut);
  top: 59.45%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(
    calc(100% - 0.425 * min(100%, 1440px) - var(--gut) - 64px),
    calc(0.48056 * min(100%, 1440px))
  );
}
.hero h1 {
  margin: 0;
  font-weight: 400;
  font-size: var(--t);
  line-height: 1.04;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.hero h1 b {
  font-weight: 700;
  color: #00d462;
}
.hero h1 .l {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.hero h1 .l > span {
  display: inline-block;
  transform: translateY(105%);
  animation: up 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.hero h1 .l:nth-child(2) > span {
  animation-delay: 0.2s;
}
/* Animação "up" */
@keyframes up {
  to {
    transform: none;
  }
}
.hero .sub {
  margin: 30px 0 0;
  font-size: 22px;
  line-height: 1.55;
  color: rgba(235, 255, 238, 0.78);
  text-wrap: pretty;
  opacity: 0;
  animation: fd 1s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero .cred {
  margin: 44px 0 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  gap: 14px;
  align-items: center;
  opacity: 0;
  animation: fd 1s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero .cred:before {
  content: '';
  width: 32px;
  height: 2px;
  background: #00d462;
}
/* Animação "fd" */
@keyframes fd {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  /* Abertura (.hero): composição, folha com vídeo (.leaf), linhas (.lines) e textos */
  .hero {
    height: auto;
    --F: min(100vw, 460px);
  }
  .hero .stage {
    position: relative;
    width: var(--F);
    height: calc(var(--F) * 1.3133);
    margin-left: auto;
  }
  .hero .lines {
    display: none;
  }
  .hero .lines.m {
    display: block;
    height: calc(var(--F) * 2.1641);
  }
  .hero .lines.m path {
    stroke-width: 3.5;
  }
  /* No celular a folha é maior que a tela e vaza pela direita, como no
     computador; as três linhas verdes saem da borda de baixo dela. */
  .hero .leaf {
    left: -10%;
    top: calc(var(--F) * 0.2164);
    width: 118%;
  }
  .hero .txt {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 60px var(--gut) 48px;
  }
  .hero .sub {
    font-size: 18px;
    margin-top: 18px;
    max-width: 560px;
  }
  .hero .cred {
    font-size: 15px;
    margin-top: 24px;
  }
}
/* --- Sem animação, para quem ativou "reduzir movimento" no aparelho --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   5. COMO ATUAMOS (#metodo)
   -----------------------------------------------------------------------------
   Fundo menta. As quatro frentes (Consultoria, Plataforma, Produtos e
   Circularidade) em linhas (.row), cada uma com número, nome, descrição,
   estágio e seta. A linha no centro da tela ganha a classe "act" e fica
   destacada.
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #metodo {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  /* Container da seção (.wrap) */
  #metodo .wrap {
    padding: 56px 72px 48px;
    position: relative;
    z-index: 1;
  }
  /* Cabeçalho: rótulo, título e introdução (.head) */
  #metodo .head {
    display: grid;
    grid-template-columns: 1fr 400px;
    align-items: end;
    gap: 40px;
    margin-bottom: 40px;
  }
  /* Rótulo pequeno com bolinha verde acima do título (.label) */
  #metodo .label {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: #0a451e;
  }
  #metodo .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00a84e;
  }
  #metodo h2 {
    margin: 0;
    font-weight: 400;
    font-size: 52px;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  #metodo h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #metodo .intro {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Lista das quatro frentes (.rows) */
  #metodo .rows {
    border-top: 1px solid #141914;
  }
  /* Cada frente (.row): número, nome, descrição, estágio e seta; "in" = entrou, "act" = destacada */
  #metodo .row {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 420px 168px 24px;
    align-items: center;
    column-gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(20, 25, 20, 0.14);
  }
  #metodo .row:before {
    content: '';
    position: absolute;
    inset: -1px -24px 0;
    border-radius: 16px;
    background: #0a451e;
    opacity: 0;
    z-index: -1;
  }
  #metodo .n {
    font-size: 15px;
    font-weight: 500;
    padding-top: 0;
    color: #0a451e;
  }
  #metodo h3 {
    margin: 0;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  /* Bloco de texto de cada frente (.info) */
  #metodo .info p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
  }
  #metodo .info .ent,
  #metodo .ent {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Etiqueta de estágio, como "Em operação" (.st) */
  #metodo .st {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 0;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .st i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00a84e;
  }
  /* Seta de cada frente (.arr) */
  #metodo .arr {
    width: 22px;
    height: 22px;
    margin-top: 0;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .row.hov {
    color: #ebffee;
  }
  #metodo .row.hov:before {
    opacity: 1;
  }
  #metodo .row.hov .n {
    color: #00d462;
  }
  #metodo .row.hov h3 {
    color: #00d462;
  }
  #metodo .row.hov .arr {
    color: #00d462;
    transform: translateX(4px);
  }
  #metodo .row.hov .ent,
  #metodo .row.hov .st {
    color: #ebffee;
    opacity: 0.75;
  }
  /* Versão em cartões das frentes (.cards) */
  #metodo .cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  /* Cartão de cada frente (.card) */
  #metodo .card {
    border: 1px solid rgba(20, 25, 20, 0.14);
    border-radius: 20px;
    padding: 24px;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(235, 255, 238, 0.03);
  }
  #metodo .card .ct {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #metodo .card h3 {
    margin-top: auto;
    padding-top: 120px;
  }
  #metodo .card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .card .ent {
    font-size: 13px;
  }
  #metodo .more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
  }
  #metodo .more .arr {
    margin: 0;
    color: currentColor;
    width: 18px;
    height: 18px;
  }
  #metodo .card.hov {
    background: #0a451e;
    color: #ebffee;
    border-color: transparent;
  }
  #metodo .card.hov p,
  #metodo .card.hov .st {
    color: rgba(20, 25, 20, 0.7);
  }
  #metodo .card.hov .n {
    color: #00d462;
  }
  #metodo .card.hov .st i {
    background: #00d462;
  }
  /* Folha em contorno decorativa (.leafo) */
  #metodo .leafo {
    position: absolute;
    right: -90px;
    bottom: -140px;
    width: 520px;
    z-index: 0;
    opacity: 0.35;
  }
  #metodo .leafo path {
    fill: #0a451e;
  }
  #metodo .rows {
    border-top: none;
    position: relative;
  }
  #metodo .rows:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.72);
    transform-origin: left;
    transform: scaleX(var(--k, 0));
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row {
    border-bottom: none;
  }
  #metodo .row:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row.in:after {
    transform: scaleX(1);
  }
  #metodo .row.in > * {
    opacity: 1;
    transform: none;
  }
  #metodo .row:before {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row h3,
  #metodo .row .n,
  #metodo .row .arr,
  #metodo .row .ent,
  #metodo .row .st,
  #metodo .row .info p {
    transition:
      color 0.45s,
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row.act {
    color: #ebffee;
  }
  #metodo .row.act:before {
    opacity: 1;
  }
  #metodo .row.act h3,
  #metodo .row.act .n,
  #metodo .row.act .arr {
    color: #00d462;
  }
  #metodo .row.act .ent,
  #metodo .row.act .st {
    color: rgba(235, 255, 238, 0.75);
  }
  #metodo h3,
  #metodo .n,
  #metodo .st,
  #metodo .info p {
    text-box: trim-both cap alphabetic;
  }
  #metodo .info .ent {
    margin-top: 16px;
  }
  #metodo .head {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
  }
  #metodo .head > :first-child {
    grid-column: 1/8;
  }
  #metodo .head > .intro {
    grid-column: 8/13;
  }
  #metodo .label {
    font-size: 16px !important;
  }
  #metodo h2 {
    font-size: 64px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  #metodo .intro {
    font-size: 20px !important;
    line-height: 1.6 !important;
    max-width: none;
  }
  /* Botões da seção (.btn) */
  #metodo .btn {
    font-size: 17px !important;
  }
  #metodo .act p {
    font-size: 16px !important;
  }
  #metodo .wrap {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  #metodo .head {
    margin-bottom: 56px !important;
  }
  #metodo .label {
    margin-bottom: 28px !important;
  }
  #metodo .row {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    padding: 32px 0 !important;
  }
  #metodo .row > .n {
    grid-column: 1/2;
  }
  #metodo .row > h3 {
    grid-column: 2/6;
  }
  #metodo .row > .info {
    grid-column: 6/10;
  }
  #metodo .row > .st {
    grid-column: 10/12;
  }
  #metodo .row > .arr {
    grid-column: 12/13;
    justify-self: end;
  }
  #metodo .n {
    font-size: 16px !important;
  }
  #metodo .info p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  #metodo .info .ent {
    font-size: 15px !important;
    margin-top: 16px !important;
  }
  #metodo .st {
    font-size: 15px !important;
  }
  #metodo .head {
    margin-top: 0;
  }
  #metodo .row > .st {
    white-space: nowrap;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #metodo {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  /* Container da seção (.wrap) */
  #metodo .wrap {
    padding: 56px 72px 48px;
    position: relative;
    z-index: 1;
  }
  /* Cabeçalho: rótulo, título e introdução (.head) */
  #metodo .head {
    display: grid;
    grid-template-columns: 1fr 400px;
    align-items: end;
    gap: 40px;
    margin-bottom: 40px;
  }
  /* Rótulo pequeno com bolinha verde acima do título (.label) */
  #metodo .label {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: #0a451e;
  }
  #metodo .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00a84e;
  }
  #metodo h2 {
    margin: 0;
    font-weight: 400;
    font-size: 52px;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  #metodo h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #metodo .intro {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Lista das quatro frentes (.rows) */
  #metodo .rows {
    border-top: 1px solid #141914;
  }
  /* Cada frente (.row): número, nome, descrição, estágio e seta; "in" = entrou, "act" = destacada */
  #metodo .row {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 420px 168px 24px;
    align-items: center;
    column-gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(20, 25, 20, 0.14);
  }
  #metodo .row:before {
    content: '';
    position: absolute;
    inset: -1px -24px 0;
    border-radius: 16px;
    background: #0a451e;
    opacity: 0;
    z-index: -1;
  }
  #metodo .n {
    font-size: 15px;
    font-weight: 500;
    padding-top: 0;
    color: #0a451e;
  }
  #metodo h3 {
    margin: 0;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  /* Bloco de texto de cada frente (.info) */
  #metodo .info p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
  }
  #metodo .info .ent,
  #metodo .ent {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Etiqueta de estágio, como "Em operação" (.st) */
  #metodo .st {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    padding-top: 0;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .st i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00a84e;
  }
  /* Seta de cada frente (.arr) */
  #metodo .arr {
    width: 22px;
    height: 22px;
    margin-top: 0;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .row.hov {
    color: #ebffee;
  }
  #metodo .row.hov:before {
    opacity: 1;
  }
  #metodo .row.hov .n {
    color: #00d462;
  }
  #metodo .row.hov h3 {
    color: #00d462;
  }
  #metodo .row.hov .arr {
    color: #00d462;
    transform: translateX(4px);
  }
  #metodo .row.hov .ent,
  #metodo .row.hov .st {
    color: #ebffee;
    opacity: 0.75;
  }
  /* Versão em cartões das frentes (.cards) */
  #metodo .cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  /* Cartão de cada frente (.card) */
  #metodo .card {
    border: 1px solid rgba(20, 25, 20, 0.14);
    border-radius: 20px;
    padding: 24px;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(235, 255, 238, 0.03);
  }
  #metodo .card .ct {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #metodo .card h3 {
    margin-top: auto;
    padding-top: 120px;
  }
  #metodo .card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(20, 25, 20, 0.72);
  }
  #metodo .card .ent {
    font-size: 13px;
  }
  #metodo .more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
  }
  #metodo .more .arr {
    margin: 0;
    color: currentColor;
    width: 18px;
    height: 18px;
  }
  #metodo .card.hov {
    background: #0a451e;
    color: #ebffee;
    border-color: transparent;
  }
  #metodo .card.hov p,
  #metodo .card.hov .st {
    color: rgba(20, 25, 20, 0.7);
  }
  #metodo .card.hov .n {
    color: #00d462;
  }
  #metodo .card.hov .st i {
    background: #00d462;
  }
  /* Folha em contorno decorativa (.leafo) */
  #metodo .leafo {
    position: absolute;
    right: -90px;
    bottom: -140px;
    width: 520px;
    z-index: 0;
    opacity: 0.35;
  }
  #metodo .leafo path {
    fill: #0a451e;
  }
  #metodo .rows {
    border-top: none;
    position: relative;
  }
  #metodo .rows:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.72);
    transform-origin: left;
    transform: scaleX(var(--k, 0));
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row {
    border-bottom: none;
  }
  #metodo .row:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row.in:after {
    transform: scaleX(1);
  }
  #metodo .row.in > * {
    opacity: 1;
    transform: none;
  }
  #metodo .row:before {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row h3,
  #metodo .row .n,
  #metodo .row .arr,
  #metodo .row .ent,
  #metodo .row .st,
  #metodo .row .info p {
    transition:
      color 0.45s,
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #metodo .row.act {
    color: #ebffee;
  }
  #metodo .row.act:before {
    opacity: 1;
  }
  #metodo .row.act h3,
  #metodo .row.act .n,
  #metodo .row.act .arr {
    color: #00d462;
  }
  #metodo .row.act .ent,
  #metodo .row.act .st {
    color: rgba(235, 255, 238, 0.75);
  }
  #metodo h3,
  #metodo .n,
  #metodo .st,
  #metodo .info p {
    text-box: trim-both cap alphabetic;
  }
  #metodo .info .ent {
    margin-top: 16px;
  }
  #metodo .wrap {
    padding: 64px 20px 64px;
  }
  #metodo .head {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 24px;
    margin-bottom: 36px;
  }
  #metodo .label {
    font-size: 15px;
    margin: 0 0 20px;
  }
  #metodo h2 {
    font-size: 38px;
  }
  #metodo .intro {
    font-size: 18px;
  }
  #metodo .rows {
    border-top: 1px solid #141914;
  }
  #metodo .row {
    display: grid;
    grid-template-columns: 36px 1fr 20px;
    column-gap: 12px;
    row-gap: 14px;
    padding: 26px 0;
    align-items: start;
  }
  #metodo .row .n {
    grid-row: 1;
    padding-top: 6px;
  }
  #metodo .row h3 {
    grid-column: 2;
    font-size: 32px;
  }
  #metodo .row .arr {
    grid-column: 3;
    grid-row: 1;
    width: 20px;
    height: 20px;
    margin-top: 4px;
  }
  #metodo .row .info {
    grid-column: 2/4;
  }
  #metodo .row .st {
    grid-column: 2/4;
  }
  #metodo .info p {
    font-size: 16px;
  }
  #metodo .info .ent {
    font-size: 15px;
    margin-top: 12px;
  }
  #metodo .st {
    font-size: 15px;
  }
  #metodo .row:before {
    inset: -1px -12px 0;
  }
}

/* =============================================================================
   6. 01 · CONSULTORIA (#consultoria)
   -----------------------------------------------------------------------------
   Fundo escuro. Título "Descarbonizar exige medir.", os quatro serviços
   (.svc), a faixa "Normas e métodos" (.norms) e o carrossel de resultados
   (.proof) com o −51% do bambu e as barras de comparação.
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #consultoria {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #consultoria h2,
  #consultoria h3,
  #consultoria h4,
  #consultoria p,
  #consultoria .n {
    text-box: trim-both cap alphabetic;
  }
  #consultoria .wrap {
    padding: 96px 72px 104px;
  }
  #consultoria .label {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #consultoria .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #consultoria .head {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 48px;
    align-items: end;
  }
  #consultoria h2 {
    margin: 0;
    font-weight: 400;
    font-size: 64px;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  #consultoria h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #consultoria .intro {
    margin: 0;
    text-wrap: pretty;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Os quatro serviços em colunas (.svc) */
  #consultoria .svc {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Cada serviço (.s) */
  #consultoria .s {
    padding: 32px 28px 8px 0;
    border-right: 1px solid rgba(235, 255, 238, 0.12);
    padding-left: 28px;
  }
  #consultoria .s:first-child {
    padding-left: 0;
  }
  #consultoria .s:last-child {
    border-right: 0;
  }
  #consultoria .k {
    font-size: 14px;
    font-weight: 500;
    color: #00d462;
  }
  #consultoria h4 {
    margin: 22px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #consultoria .s p {
    margin: 20px 0 0;
    text-wrap: pretty;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Carrossel de resultados (.proof) */
  #consultoria .proof {
    margin-top: 88px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: start;
    background: #0a451e;
    border-radius: 24px;
    padding: 48px 56px;
  }
  #consultoria .pl {
    font-size: 14px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.8);
    margin: 0 0 28px;
  }
  /* Número grande do resultado, como −51% (.big) */
  #consultoria .big {
    font-size: 144px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #00d462;
  }
  /* Frase que explica o resultado (.claim) */
  #consultoria .claim {
    margin: 22px 0 0;
    font-size: 20px;
    line-height: 1.45;
  }
  #consultoria .claim b {
    font-weight: 600;
  }
  /* Barras de comparação "longe × perto da plantação" (.bars) */
  #consultoria .bars {
    display: grid;
    gap: 22px;
  }
  /* Cada barra de comparação (.bar) */
  #consultoria .bar .m {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: rgba(235, 255, 238, 0.85);
  }
  #consultoria .track {
    height: 26px;
    border-radius: 999px;
    background: rgba(235, 255, 238, 0.1);
    overflow: hidden;
  }
  /* Preenchimento da barra (.fill) */
  #consultoria .fill {
    height: 100%;
    border-radius: 999px;
    background: #ebffee;
  }
  #consultoria .bar.b .fill {
    background: #00d462;
    width: 49%;
  }
  /* Fonte do resultado com link para o DOI (.src) */
  #consultoria .src {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(235, 255, 238, 0.72);
  }
  #consultoria .src u {
    text-underline-offset: 3px;
  }
  /* Área do botão de ação (.act) */
  #consultoria .act {
    margin-top: 56px;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  #consultoria .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  #consultoria .act p {
    margin: 0;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Área onde os resultados se sobrepõem (.stage) */
  #consultoria .stage {
    display: grid;
  }
  #consultoria .stage > .slide {
    grid-area: 1/1;
  }
  #consultoria .svc {
    margin-top: 72px;
  }
  /* Faixa "Normas e métodos" (.norms) */
  #consultoria .norms {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
    padding-top: 28px;
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  #consultoria .norms .nl {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
  }
  #consultoria .ng {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 32px;
    align-content: start;
  }
  #consultoria .nm {
    display: grid;
    gap: 14px;
    align-content: start;
  }
  #consultoria .nm b,
  #consultoria .nm span {
    text-box: trim-both cap alphabetic;
  }
  #consultoria .nm b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  #consultoria .nm span {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(235, 255, 238, 0.72);
  }
  #consultoria .proof {
    display: block;
    margin-top: 88px;
    background: #0a451e;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
  }
  #consultoria .pbar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 56px;
    height: 76px;
    border-bottom: 1px solid rgba(235, 255, 238, 0.14);
  }
  #consultoria .pbar .pl {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Abas do carrossel (.tabs) */
  #consultoria .tabs {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }
  /* Cada aba do carrossel (.tab); --p é o progresso da aba ativa */
  #consultoria .tab {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 999px;
    color: rgba(235, 255, 238, 0.8);
  }
  #consultoria .tab.on {
    background: rgba(235, 255, 238, 0.1);
    color: #ebffee;
  }
  #consultoria .tab.on:after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #00d462 38%, rgba(235, 255, 238, 0.2) 38%);
  }
  /* Setas do carrossel (.nav2 / .nb) */
  #consultoria .nav2 {
    display: flex;
    gap: 8px;
  }
  #consultoria .nb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(235, 255, 238, 0.3);
    display: grid;
    place-items: center;
  }
  /* Contador "01 / 01" (.cnt) */
  #consultoria .cnt {
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Cada resultado do carrossel (.slide) */
  #consultoria .slide {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: start;
    padding: 48px 56px 56px;
    min-height: 0;
  }
  #consultoria .slide .tg {
    margin: 0 0 26px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Resultado de exemplo, com padrão listrado (.ph) */
  #consultoria .ph .big {
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 212, 98, 0.7);
  }
  #consultoria .ph .fill {
    background: repeating-linear-gradient(
      -45deg,
      rgba(235, 255, 238, 0.35) 0 6px,
      rgba(235, 255, 238, 0.12) 6px 12px
    ) !important;
  }
  #consultoria .ph .src {
    color: #ffd27a;
  }
  #consultoria .flag {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #141914;
    background: #ffd27a;
    border-radius: 6px;
    padding: 3px 7px;
    vertical-align: 2px;
  }
  #consultoria .head {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
  }
  #consultoria .head > :first-child {
    grid-column: 1/8;
  }
  #consultoria .head > .intro {
    grid-column: 8/13;
  }
  #consultoria .label {
    font-size: 16px !important;
  }
  #consultoria h2 {
    font-size: 64px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  #consultoria .intro {
    font-size: 20px !important;
    line-height: 1.6 !important;
    max-width: none;
  }
  #consultoria .btn {
    font-size: 17px !important;
  }
  #consultoria .act p {
    font-size: 16px !important;
  }
  #consultoria .svc {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 24px;
    border-top: 0 !important;
  }
  #consultoria .s {
    padding: 28px 0 0 !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(235, 255, 238, 0.24);
  }
  #consultoria .k {
    font-size: 15px !important;
  }
  #consultoria h4 {
    font-size: 24px !important;
    margin-top: 24px !important;
  }
  #consultoria .s p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    margin-top: 20px !important;
  }
  #consultoria .norms {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    margin-top: 72px !important;
    padding-top: 28px !important;
  }
  #consultoria .norms .nl {
    grid-column: 1/4;
    font-size: 16px !important;
  }
  #consultoria .ng {
    grid-column: 4/13;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 36px !important;
  }
  #consultoria .nm {
    gap: 16px !important;
  }
  #consultoria .nm b {
    font-size: 19px !important;
  }
  #consultoria .nm span {
    font-size: 16px !important;
    color: rgba(235, 255, 238, 0.76) !important;
  }
  #consultoria .pbar {
    height: 84px !important;
  }
  #consultoria .pbar .pl,
  #consultoria .tab,
  #consultoria .cnt {
    font-size: 16px !important;
  }
  #consultoria .nb {
    width: 44px !important;
    height: 44px !important;
  }
  #consultoria .slide .tg {
    font-size: 16px !important;
  }
  #consultoria .claim {
    font-size: 23px !important;
    line-height: 1.45 !important;
  }
  #consultoria .bar .m {
    font-size: 16px !important;
  }
  #consultoria .src {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  #consultoria .slide > div:last-child {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
  }
  #consultoria .intro,
  #consultoria .s p,
  #consultoria .act p {
    color: rgba(235, 255, 238, 0.8) !important;
  }
  #consultoria .tab {
    cursor: pointer;
  }
  #consultoria .nb {
    cursor: pointer;
  }
  #consultoria .tab.on:after {
    background: linear-gradient(
      90deg,
      #00d462 var(--p, 0%),
      rgba(235, 255, 238, 0.2) var(--p, 0%)
    ) !important;
  }
  /* Navegação do carrossel no celular (.mnav) */
  #consultoria .mnav {
    display: none;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #consultoria {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #consultoria h2,
  #consultoria h3,
  #consultoria h4,
  #consultoria p,
  #consultoria .n {
    text-box: trim-both cap alphabetic;
  }
  #consultoria .wrap {
    padding: 56px 20px 64px;
  }
  #consultoria .label {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #consultoria .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #consultoria .head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: end;
  }
  #consultoria h2 {
    margin: 0;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  #consultoria h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #consultoria .intro {
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Os quatro serviços em colunas (.svc) */
  #consultoria .svc {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Cada serviço (.s) */
  #consultoria .s {
    padding: 24px 0;
    border-bottom: 1px solid rgba(235, 255, 238, 0.12);
  }
  #consultoria .s:first-child {
    padding-left: 0;
  }
  #consultoria .s:last-child {
    border-right: 0;
  }
  #consultoria .k {
    font-size: 14px;
    font-weight: 500;
    color: #00d462;
  }
  #consultoria h4 {
    margin: 22px 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #consultoria .s p {
    margin: 20px 0 0;
    text-wrap: pretty;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Carrossel de resultados (.proof) */
  #consultoria .proof {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    background: #0a451e;
    border-radius: 18px;
    padding: 28px 22px;
  }
  #consultoria .pl {
    font-size: 14px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.8);
    margin: 0 0 28px;
  }
  /* Número grande do resultado, como −51% (.big) */
  #consultoria .big {
    font-size: 88px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #00d462;
  }
  /* Frase que explica o resultado (.claim) */
  #consultoria .claim {
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 1.45;
  }
  #consultoria .claim b {
    font-weight: 600;
  }
  /* Barras de comparação "longe × perto da plantação" (.bars) */
  #consultoria .bars {
    display: grid;
    gap: 22px;
  }
  /* Cada barra de comparação (.bar) */
  #consultoria .bar .m {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: rgba(235, 255, 238, 0.85);
  }
  #consultoria .track {
    height: 18px;
    border-radius: 999px;
    background: rgba(235, 255, 238, 0.1);
    overflow: hidden;
  }
  /* Preenchimento da barra (.fill) */
  #consultoria .fill {
    height: 100%;
    border-radius: 999px;
    background: #ebffee;
  }
  #consultoria .bar.b .fill {
    background: #00d462;
    width: 49%;
  }
  /* Fonte do resultado com link para o DOI (.src) */
  #consultoria .src {
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(235, 255, 238, 0.72);
  }
  #consultoria .src u {
    text-underline-offset: 3px;
  }
  /* Área do botão de ação (.act) */
  #consultoria .act {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #consultoria .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  #consultoria .act p {
    margin: 0;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Área onde os resultados se sobrepõem (.stage) */
  #consultoria .stage {
    display: grid;
  }
  #consultoria .stage > .slide {
    grid-area: 1/1;
  }
  /* Faixa "Normas e métodos" (.norms) */
  #consultoria .norms {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  #consultoria .norms .nl {
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
  }
  #consultoria .ng {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 24px;
    align-content: start;
  }
  #consultoria .nm {
    display: grid;
    gap: 12px;
    align-content: start;
  }
  #consultoria .nm b,
  #consultoria .nm span {
    text-box: trim-both cap alphabetic;
  }
  #consultoria .nm b {
    font-size: 15px;
    font-weight: 600;
  }
  #consultoria .nm span {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(235, 255, 238, 0.72);
  }
  #consultoria .proof {
    display: block;
    margin-top: 56px;
    background: #0a451e;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
  }
  #consultoria .pbar {
    padding: 20px 22px 0;
  }
  #consultoria .pbar .pl {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Abas do carrossel (.tabs) */
  #consultoria .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(235, 255, 238, 0.14);
    margin: 0 -22px;
    padding: 0 12px 14px;
  }
  /* Cada aba do carrossel (.tab); --p é o progresso da aba ativa */
  #consultoria .tab {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 999px;
    color: rgba(235, 255, 238, 0.8);
    white-space: nowrap;
  }
  #consultoria .tab.on {
    background: rgba(235, 255, 238, 0.1);
    color: #ebffee;
  }
  #consultoria .tab.on:after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #00d462 38%, rgba(235, 255, 238, 0.2) 38%);
  }
  /* Setas do carrossel (.nav2 / .nb) */
  #consultoria .nav2,
  #consultoria .cnt {
    display: none;
  }
  /* Cada resultado do carrossel (.slide) */
  #consultoria .slide {
    padding: 26px 22px 28px;
    display: grid;
    gap: 24px;
  }
  #consultoria .slide .tg {
    display: none;
  }
  /* Resultado de exemplo, com padrão listrado (.ph) */
  #consultoria .ph .big {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 212, 98, 0.7);
  }
  #consultoria .ph .fill {
    background: repeating-linear-gradient(
      -45deg,
      rgba(235, 255, 238, 0.35) 0 6px,
      rgba(235, 255, 238, 0.12) 6px 12px
    ) !important;
  }
  #consultoria .ph .src {
    color: #ffd27a;
  }
  /* Navegação do carrossel no celular (.mnav) */
  #consultoria .mnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 22px;
  }
  #consultoria .mnav .cnt {
    display: block;
  }
  #consultoria .mnav .nb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(235, 255, 238, 0.3);
    display: grid;
    place-items: center;
  }
  #consultoria .mnav .g {
    display: flex;
    gap: 8px;
  }
  #consultoria .flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #141914;
    background: #ffd27a;
    border-radius: 6px;
    padding: 3px 6px;
    vertical-align: 2px;
  }
  #consultoria .label {
    font-size: 15px !important;
  }
  #consultoria h2 {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }
  #consultoria .intro {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
  #consultoria .btn {
    font-size: 16px !important;
  }
  #consultoria .act p {
    font-size: 16px !important;
  }
  #consultoria .svc .s:last-child {
    border-bottom: 0 !important;
  }
  #consultoria .norms {
    margin-top: 28px !important;
  }
  #consultoria .ng {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }
  #consultoria .nm {
    gap: 10px !important;
  }
  #consultoria .k {
    font-size: 15px !important;
  }
  #consultoria h4 {
    font-size: 21px !important;
  }
  #consultoria .s p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  #consultoria .nl {
    font-size: 15px !important;
  }
  #consultoria .nm b {
    font-size: 17px !important;
  }
  #consultoria .nm span {
    font-size: 15px !important;
    color: rgba(235, 255, 238, 0.76) !important;
  }
  #consultoria .pbar .pl,
  #consultoria .tab,
  #consultoria .cnt {
    font-size: 15px !important;
  }
  #consultoria .claim {
    font-size: 19px !important;
  }
  #consultoria .bar .m {
    font-size: 15px !important;
  }
  #consultoria .src {
    font-size: 15px !important;
  }
  #consultoria .intro,
  #consultoria .s p,
  #consultoria .act p {
    color: rgba(235, 255, 238, 0.8) !important;
  }
  #consultoria .tab {
    cursor: pointer;
  }
  #consultoria .nb {
    cursor: pointer;
  }
  #consultoria .tab.on:after {
    background: linear-gradient(
      90deg,
      #00d462 var(--p, 0%),
      rgba(235, 255, 238, 0.2) var(--p, 0%)
    ) !important;
  }
}

/* =============================================================================
   7. 02 · PLATAFORMA (#plataforma)
   -----------------------------------------------------------------------------
   Fundo menta com o gradiente da marca. Ilustração da interface da
   plataforma (.app): barra lateral (.side), gráfico MACC (.plot) desenhado
   pelo JavaScript, etiqueta da tecnologia (.tip), painel de detalhes (.det) e
   rastreio do resultado (.steps). Abaixo, três recursos (.feat).
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #plataforma {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #plataforma h2,
  #plataforma h4,
  #plataforma h5,
  #plataforma p,
  #plataforma .t {
    text-box: trim-both cap alphabetic;
  }
  #plataforma .label {
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #plataforma .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #plataforma h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  #plataforma h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #plataforma .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.65;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Janela da interface (.app) */
  #plataforma .app {
    background: #fff;
    border: 1px solid rgba(20, 25, 20, 0.08);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.45),
      0 2px 4px rgba(10, 69, 30, 0.04),
      0 32px 80px -32px rgba(10, 69, 30, 0.28);
    overflow: hidden;
  }
  /* Barra superior da janela (.ab) */
  #plataforma .ab {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(20, 25, 20, 0.07);
  }
  #plataforma .ab .lf {
    color: #00d462;
    display: grid;
  }
  /* Título da janela e selo "Versão alfa" (.cr) */
  #plataforma .cr {
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #plataforma .cr b {
    font-weight: 600;
    color: #141914;
  }
  #plataforma .cr i {
    font-style: normal;
    opacity: 0.5;
  }
  /* Seletor de cenário Base / Otimista / Conservador; a pílula (.pill) desliza até a opção ativa */
  #plataforma .seg {
    position: relative;
    display: flex;
    background: #f2f5f2;
    border-radius: 999px;
    padding: 4px;
  }
  #plataforma .seg span {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    color: rgba(20, 25, 20, 0.66);
    transition: color 0.5s;
  }
  #plataforma .seg span.on {
    color: #141914;
  }
  #plataforma .seg .pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(20, 25, 20, 0.1),
      0 0 0 1px rgba(20, 25, 20, 0.04);
    transition:
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Selo "Versão alfa" (.alpha) */
  #plataforma .alpha {
    font-size: 13px;
    font-weight: 600;
    color: #0a451e;
    background: #ddf8e4;
    border-radius: 999px;
    padding: 6px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  #plataforma .alpha:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Barra lateral com os grupos Análise e Saída (.side) */
  #plataforma .side {
    border-right: 1px solid rgba(20, 25, 20, 0.07);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fbfdfb;
  }
  #plataforma .side .g {
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.62);
    padding: 14px 12px 8px;
  }
  #plataforma .side .g:first-child {
    padding-top: 4px;
  }
  #plataforma .side a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(20, 25, 20, 0.72);
  }
  #plataforma .side a svg {
    opacity: 0.8;
  }
  #plataforma .side a.on {
    background: #ebffee;
    color: #0a451e;
    box-shadow: inset 0 0 0 1px rgba(10, 69, 30, 0.08);
  }
  #plataforma .side a.on svg {
    opacity: 1;
  }
  #plataforma .side .ex {
    margin-top: auto;
    justify-content: center;
    border: 1px solid rgba(20, 25, 20, 0.14);
    color: #141914;
    font-weight: 600;
  }
  /* Área principal da interface (.main) */
  #plataforma .main {
    position: relative;
    padding: 28px 32px 24px;
    min-width: 0;
  }
  /* Cabeçalho do gráfico (.mh) */
  #plataforma .mh {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  #plataforma .mh h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  #plataforma .mh p {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Legenda das cores (.leg) */
  #plataforma .leg {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.72);
    white-space: nowrap;
  }
  #plataforma .leg i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: -1px;
  }
  /* Área do gráfico MACC (.plot); o SVG é desenhado pelo JavaScript */
  #plataforma .plot {
    position: relative;
  }
  /* Eixos e rótulos do gráfico (.ax) */
  #plataforma .ax {
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  #plataforma .yl {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
  }
  #plataforma .xl {
    display: flex;
    justify-content: space-between;
  }
  /* Etiqueta da tecnologia selecionada (.tip); "dn" = abaixo da barra */
  #plataforma .tip {
    position: absolute;
    left: 0;
    top: 0;
    background: #141914;
    color: #ebffee;
    border-radius: 10px;
    padding: 11px 14px 12px;
    white-space: nowrap;
    box-shadow: 0 8px 24px -8px rgba(20, 25, 20, 0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
  }
  #plataforma .tip.dn:after {
    bottom: auto;
    top: -5px;
  }
  #plataforma .tip {
    transition: opacity 0.5s;
  }
  #plataforma .tip b {
    display: block;
    font-size: 14px;
    font-weight: 600;
  }
  #plataforma .tip span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(235, 255, 238, 0.75);
  }
  #plataforma .tip span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d462;
  }
  #plataforma .tip:after {
    content: '';
    position: absolute;
    left: var(--ax, 50%);
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #141914;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
  }
  /* Painel de detalhes da tecnologia (.det) */
  #plataforma .det {
    border-left: 1px solid rgba(20, 25, 20, 0.07);
    padding: 28px 24px;
  }
  #plataforma .dh {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #plataforma .det h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  /* Selo "Economiza" / "Com custo" (.chip) */
  #plataforma .chip {
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 10px;
    background: #ddf8e4;
    color: #0a451e;
    transition:
      background 0.4s,
      color 0.4s;
  }
  #plataforma .chip.c {
    background: #e7ece8;
    color: #141914;
  }
  /* Linhas de dados do painel (.rows) */
  #plataforma .rows {
    margin-top: 20px;
  }
  #plataforma .r {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(20, 25, 20, 0.07);
    font-size: 14px;
  }
  #plataforma .r span {
    color: rgba(20, 25, 20, 0.66);
  }
  #plataforma .r b {
    font-weight: 500;
  }
  #plataforma .st {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 600;
  }
  /* Rastreio do resultado em quatro passos (.steps / .sp) */
  #plataforma .steps {
    margin-top: 16px;
    display: grid;
    gap: 0;
  }
  #plataforma .sp {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 16px;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.8);
  }
  #plataforma .sp:not(:last-child):before {
    content: '';
    position: absolute;
    left: 9.5px;
    top: 22px;
    bottom: 2px;
    width: 1px;
    background: rgba(10, 69, 30, 0.22);
  }
  #plataforma .sp .c {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0a451e;
    color: #ebffee;
    display: grid;
    place-items: center;
  }
  #plataforma .sp .tx {
    padding-top: 1px;
    line-height: 1.35;
  }
  #plataforma .sp .tx small {
    display: block;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Legenda "Ilustração da interface, sem dados reais" (.cap) */
  #plataforma .cap {
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Os três recursos abaixo da interface (.feat / .f) */
  #plataforma .feat {
    display: grid;
    border-top: 1px solid rgba(20, 25, 20, 0.2);
  }
  #plataforma .f .n {
    font-size: 14px;
    font-weight: 500;
    color: #0a451e;
  }
  #plataforma .f h4 {
    margin: 22px 0 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #plataforma .f p {
    margin: 20px 0 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.72);
  }
  #plataforma .act {
    display: flex;
    align-items: center;
  }
  /* Botões da seção (.btn) */
  #plataforma .btn {
    background: #141914;
    color: #ebffee;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  #plataforma .act p {
    margin: 0;
    font-size: 15px;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Elementos que entram com leve subida quando a interface aparece (.fx) */
  #plataforma .fx {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #plataforma .in .fx {
    opacity: 1;
    transform: none;
  }
  #plataforma .wrap {
    padding: 112px 72px 112px;
  }
  #plataforma .head {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 48px;
    align-items: end;
  }
  #plataforma h2 {
    font-size: 64px;
  }
  #plataforma .intro {
    font-size: 18px;
  }
  #plataforma .app {
    margin-top: 72px;
    border-radius: 20px;
  }
  #plataforma .ab {
    height: 60px;
    padding: 0 20px 0 22px;
  }
  #plataforma .ab .sp1 {
    margin-left: auto;
  }
  #plataforma .body {
    display: grid;
    grid-template-columns: 224px 1fr 300px;
    min-height: 520px;
  }
  #plataforma .plot {
    margin-top: 28px;
    padding-left: 34px;
  }
  #plataforma .xl {
    margin: 12px 0 0 34px;
  }
  #plataforma .capw {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  #plataforma .feat {
    margin-top: 72px;
    grid-template-columns: repeat(4, 1fr);
  }
  #plataforma .f {
    padding: 32px 32px 8px;
    border-right: 1px solid rgba(20, 25, 20, 0.12);
  }
  #plataforma .f:first-child {
    padding-left: 0;
  }
  #plataforma .f:last-child {
    border-right: 0;
  }
  #plataforma .f h4 {
    font-size: 22px;
  }
  #plataforma .f p {
    font-size: 15.5px;
  }
  #plataforma .act {
    margin-top: 56px;
    gap: 28px;
  }
  /* Seletor de cenário no celular (.mseg) */
  #plataforma .mseg {
    display: none;
  }
  #plataforma .head {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
  }
  #plataforma .head > :first-child {
    grid-column: 1/8;
  }
  #plataforma .head > .intro {
    grid-column: 8/13;
  }
  #plataforma .label {
    font-size: 16px !important;
  }
  #plataforma h2 {
    font-size: 64px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  #plataforma .intro {
    font-size: 20px !important;
    line-height: 1.6 !important;
    max-width: none;
  }
  #plataforma .btn {
    font-size: 17px !important;
  }
  #plataforma .act p {
    font-size: 16px !important;
  }
  #plataforma .feat {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 24px;
    border-top: 0 !important;
  }
  #plataforma .f {
    padding: 28px 0 0 !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(20, 25, 20, 0.22);
  }
  #plataforma .f .n {
    font-size: 15px !important;
  }
  #plataforma .f h4 {
    font-size: 24px !important;
    margin-top: 24px !important;
  }
  #plataforma .f p {
    font-size: 17px !important;
    margin-top: 20px !important;
  }
  #plataforma .body {
    grid-template-columns: 232px minmax(0, 1fr) 320px !important;
  }
  #plataforma .cr,
  #plataforma .seg span,
  #plataforma .side a,
  #plataforma .side .g,
  #plataforma .leg,
  #plataforma .ax,
  #plataforma .tip b,
  #plataforma .tip span,
  #plataforma .r,
  #plataforma .st,
  #plataforma .sp,
  #plataforma .sp .tx small {
    font-size: 15px !important;
  }
  #plataforma .alpha,
  #plataforma .chip {
    font-size: 14px !important;
  }
  #plataforma .mh {
    flex-direction: column !important;
    gap: 0 !important;
  }
  #plataforma .mh .leg {
    margin-top: 22px;
  }
  #plataforma .mh h4 {
    font-size: 22px !important;
  }
  #plataforma .mh p {
    font-size: 15px !important;
    margin-top: 16px !important;
  }
  #plataforma .det h5 {
    font-size: 22px !important;
  }
  #plataforma .cap {
    font-size: 15px !important;
  }
  /* Legenda no celular (.mleg) */
  #plataforma .mleg {
    display: none;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #plataforma {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #plataforma h2,
  #plataforma h4,
  #plataforma h5,
  #plataforma p,
  #plataforma .t {
    text-box: trim-both cap alphabetic;
  }
  #plataforma .label {
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #plataforma .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #plataforma h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  #plataforma h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #plataforma .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.65;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Janela da interface (.app) */
  #plataforma .app {
    background: #fff;
    border: 1px solid rgba(20, 25, 20, 0.08);
    box-shadow:
      0 0 0 6px rgba(255, 255, 255, 0.45),
      0 2px 4px rgba(10, 69, 30, 0.04),
      0 32px 80px -32px rgba(10, 69, 30, 0.28);
    overflow: hidden;
  }
  /* Barra superior da janela (.ab) */
  #plataforma .ab {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(20, 25, 20, 0.07);
  }
  #plataforma .ab .lf {
    color: #00d462;
    display: grid;
  }
  /* Título da janela e selo "Versão alfa" (.cr) */
  #plataforma .cr {
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.6);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #plataforma .cr b {
    font-weight: 600;
    color: #141914;
  }
  #plataforma .cr i {
    font-style: normal;
    opacity: 0.5;
  }
  /* Seletor de cenário Base / Otimista / Conservador; a pílula (.pill) desliza até a opção ativa */
  #plataforma .seg {
    position: relative;
    display: flex;
    background: #f2f5f2;
    border-radius: 999px;
    padding: 4px;
  }
  #plataforma .seg span {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    color: rgba(20, 25, 20, 0.66);
    transition: color 0.5s;
  }
  #plataforma .seg span.on {
    color: #141914;
  }
  #plataforma .seg .pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(20, 25, 20, 0.1),
      0 0 0 1px rgba(20, 25, 20, 0.04);
    transition:
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Selo "Versão alfa" (.alpha) */
  #plataforma .alpha {
    font-size: 13px;
    font-weight: 600;
    color: #0a451e;
    background: #ddf8e4;
    border-radius: 999px;
    padding: 6px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  #plataforma .alpha:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Barra lateral com os grupos Análise e Saída (.side) */
  #plataforma .side {
    border-right: 1px solid rgba(20, 25, 20, 0.07);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fbfdfb;
  }
  #plataforma .side .g {
    font-size: 14px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.62);
    padding: 14px 12px 8px;
  }
  #plataforma .side .g:first-child {
    padding-top: 4px;
  }
  #plataforma .side a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(20, 25, 20, 0.72);
  }
  #plataforma .side a svg {
    opacity: 0.8;
  }
  #plataforma .side a.on {
    background: #ebffee;
    color: #0a451e;
    box-shadow: inset 0 0 0 1px rgba(10, 69, 30, 0.08);
  }
  #plataforma .side a.on svg {
    opacity: 1;
  }
  #plataforma .side .ex {
    margin-top: auto;
    justify-content: center;
    border: 1px solid rgba(20, 25, 20, 0.14);
    color: #141914;
    font-weight: 600;
  }
  /* Área principal da interface (.main) */
  #plataforma .main {
    position: relative;
    padding: 28px 32px 24px;
    min-width: 0;
  }
  /* Cabeçalho do gráfico (.mh) */
  #plataforma .mh {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  #plataforma .mh h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  #plataforma .mh p {
    margin: 14px 0 0;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Legenda das cores (.leg) */
  #plataforma .leg {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.72);
    white-space: nowrap;
  }
  #plataforma .leg i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: -1px;
  }
  /* Área do gráfico MACC (.plot); o SVG é desenhado pelo JavaScript */
  #plataforma .plot {
    position: relative;
  }
  /* Eixos e rótulos do gráfico (.ax) */
  #plataforma .ax {
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  #plataforma .yl {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
  }
  #plataforma .xl {
    display: flex;
    justify-content: space-between;
  }
  /* Etiqueta da tecnologia selecionada (.tip); "dn" = abaixo da barra */
  #plataforma .tip {
    position: absolute;
    left: 0;
    top: 0;
    background: #141914;
    color: #ebffee;
    border-radius: 10px;
    padding: 11px 14px 12px;
    white-space: nowrap;
    box-shadow: 0 8px 24px -8px rgba(20, 25, 20, 0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
  }
  #plataforma .tip.dn:after {
    bottom: auto;
    top: -5px;
  }
  #plataforma .tip {
    transition: opacity 0.5s;
  }
  #plataforma .tip b {
    display: block;
    font-size: 14px;
    font-weight: 600;
  }
  #plataforma .tip span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(235, 255, 238, 0.75);
  }
  #plataforma .tip span i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d462;
  }
  #plataforma .tip:after {
    content: '';
    position: absolute;
    left: var(--ax, 50%);
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #141914;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
  }
  /* Painel de detalhes da tecnologia (.det) */
  #plataforma .det {
    border-left: 1px solid rgba(20, 25, 20, 0.07);
    padding: 28px 24px;
  }
  #plataforma .dh {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #plataforma .det h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  /* Selo "Economiza" / "Com custo" (.chip) */
  #plataforma .chip {
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 10px;
    background: #ddf8e4;
    color: #0a451e;
    transition:
      background 0.4s,
      color 0.4s;
  }
  #plataforma .chip.c {
    background: #e7ece8;
    color: #141914;
  }
  /* Linhas de dados do painel (.rows) */
  #plataforma .rows {
    margin-top: 20px;
  }
  #plataforma .r {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(20, 25, 20, 0.07);
    font-size: 14px;
  }
  #plataforma .r span {
    color: rgba(20, 25, 20, 0.66);
  }
  #plataforma .r b {
    font-weight: 500;
  }
  #plataforma .st {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 600;
  }
  /* Rastreio do resultado em quatro passos (.steps / .sp) */
  #plataforma .steps {
    margin-top: 16px;
    display: grid;
    gap: 0;
  }
  #plataforma .sp {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 16px;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.8);
  }
  #plataforma .sp:not(:last-child):before {
    content: '';
    position: absolute;
    left: 9.5px;
    top: 22px;
    bottom: 2px;
    width: 1px;
    background: rgba(10, 69, 30, 0.22);
  }
  #plataforma .sp .c {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0a451e;
    color: #ebffee;
    display: grid;
    place-items: center;
  }
  #plataforma .sp .tx {
    padding-top: 1px;
    line-height: 1.35;
  }
  #plataforma .sp .tx small {
    display: block;
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Legenda "Ilustração da interface, sem dados reais" (.cap) */
  #plataforma .cap {
    font-size: 14px;
    color: rgba(20, 25, 20, 0.66);
  }
  /* Os três recursos abaixo da interface (.feat / .f) */
  #plataforma .feat {
    display: grid;
    border-top: 1px solid rgba(20, 25, 20, 0.2);
  }
  #plataforma .f .n {
    font-size: 14px;
    font-weight: 500;
    color: #0a451e;
  }
  #plataforma .f h4 {
    margin: 22px 0 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #plataforma .f p {
    margin: 20px 0 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.72);
  }
  #plataforma .act {
    display: flex;
    align-items: center;
  }
  /* Botões da seção (.btn) */
  #plataforma .btn {
    background: #141914;
    color: #ebffee;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  #plataforma .act p {
    margin: 0;
    font-size: 15px;
    color: rgba(20, 25, 20, 0.72);
  }
  /* Elementos que entram com leve subida quando a interface aparece (.fx) */
  #plataforma .fx {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #plataforma .in .fx {
    opacity: 1;
    transform: none;
  }
  #plataforma .wrap {
    padding: 64px 20px 64px;
  }
  #plataforma .head {
    display: grid;
    gap: 24px;
  }
  #plataforma h2 {
    font-size: 36px;
  }
  #plataforma .intro {
    font-size: 16px;
  }
  #plataforma .app {
    margin-top: 44px;
    border-radius: 16px;
  }
  #plataforma .ab {
    height: 52px;
    padding: 0 14px;
  }
  #plataforma .ab .alpha {
    margin-left: auto;
  }
  #plataforma .cr .p1,
  #plataforma .cr i {
    display: none;
  }
  #plataforma .ab .sp1 {
    display: none;
  }
  #plataforma .side,
  #plataforma .det {
    display: none;
  }
  #plataforma .main {
    padding: 22px 16px 18px;
  }
  #plataforma .mh {
    flex-direction: column;
    gap: 0;
  }
  #plataforma .mh .leg {
    display: none;
  }
  #plataforma .mh h4 {
    font-size: 17px;
  }
  #plataforma .mh p {
    text-wrap: balance;
  }
  /* Seletor de cenário no celular (.mseg) */
  #plataforma .mseg {
    margin-top: 20px;
  }
  #plataforma .mseg .seg {
    width: 100%;
  }
  #plataforma .mseg .seg span {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    font-size: 14px;
  }
  #plataforma .plot {
    margin-top: 22px;
    padding-left: 0;
  }
  #plataforma .yl {
    display: none;
  }
  #plataforma .xl {
    margin: 12px 0 0 0;
    gap: 12px;
  }
  /* Legenda no celular (.mleg) */
  #plataforma .mleg {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(20, 25, 20, 0.07);
  }
  #plataforma .mleg .leg {
    gap: 18px;
  }
  #plataforma .capw {
    margin-top: 16px;
  }
  #plataforma .feat {
    margin-top: 44px;
    grid-template-columns: 1fr;
  }
  #plataforma .f {
    padding: 24px 0;
    border-bottom: 1px solid rgba(20, 25, 20, 0.12);
  }
  #plataforma .f:last-child {
    border-bottom: 0;
  }
  #plataforma .f h4 {
    font-size: 20px;
  }
  #plataforma .f p {
    font-size: 15px;
  }
  #plataforma .act {
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #plataforma .label {
    font-size: 15px !important;
  }
  #plataforma h2 {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }
  #plataforma .intro {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
  #plataforma .btn {
    font-size: 16px !important;
  }
  #plataforma .act p {
    font-size: 16px !important;
  }
  #plataforma .f .n {
    font-size: 15px !important;
  }
  #plataforma .f h4 {
    font-size: 21px !important;
  }
  #plataforma .f p {
    font-size: 16px !important;
  }
  #plataforma .cr,
  #plataforma .leg,
  #plataforma .ax,
  #plataforma .tip b,
  #plataforma .tip span {
    font-size: 15px !important;
  }
  #plataforma .seg span {
    font-size: 14px !important;
  }
  #plataforma .mh h4 {
    font-size: 19px !important;
  }
  #plataforma .mh p {
    font-size: 15px !important;
  }
  #plataforma .cap {
    font-size: 15px !important;
  }
  #plataforma .alpha {
    font-size: 14px !important;
  }
}

/* =============================================================================
   8. 03 · PRODUTOS (#produtos)
   -----------------------------------------------------------------------------
   Fundo verde-escuro. Três produtos em colunas iguais (.p): bambu
   engenheirado, bioconcretos e biochar, cada um com foto (.ph), selo de estágio
   (.chip), nome e descrição. Abaixo, a nota "Pegada medida desde o protótipo"
   (.note) e o botão de parceria.
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #produtos {
    background: #0a451e;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #produtos h2,
  #produtos h4,
  #produtos p,
  #produtos .t {
    text-box: trim-both cap alphabetic;
  }
  #produtos .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #produtos .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #produtos h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #produtos h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #produtos .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Foto do produto (.ph) */
  #produtos .ph {
    position: relative;
    overflow: hidden;
    background: #123e22;
  }
  #produtos .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #produtos .ph:after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(235, 255, 238, 0.08);
    border-radius: inherit;
    pointer-events: none;
  }
  /* Selo de estágio sobre a foto (.chip) */
  #produtos .chip {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #ebffee;
    background: rgba(20, 25, 20, 0.62);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #produtos .chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Espaço para foto que ainda não existe (.empty) */
  #produtos .empty {
    display: grid;
    place-items: center;
    background: radial-gradient(120% 90% at 30% 20%, #1d5a33 0%, #0e3a1c 55%, #0b2f17 100%);
  }
  #produtos .empty svg {
    width: 42%;
    opacity: 0.5;
  }
  #produtos .empty .ft {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.75);
  }
  /* Cada produto (.p) */
  #produtos .p .n {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
  }
  #produtos .p h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #produtos .p p {
    margin: 20px 0 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  #produtos .p .m {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Aplicações do produto (.tl) */
  #produtos .tl {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  /* Nota e link para o resultado do bambu (.note) */
  #produtos .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(235, 255, 238, 0.2);
  }
  #produtos .note p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.6;
  }
  #produtos .note p b {
    color: #ebffee;
    font-weight: 600;
  }
  /* Link com seta (.lk) */
  #produtos .lk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #00d462;
    white-space: nowrap;
  }
  #produtos .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  /* Área do botão de ação (.act) */
  #produtos .act {
    display: flex;
    align-items: center;
  }
  #produtos .act p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
  }
  #produtos .wrap {
    padding: 112px 72px 112px;
  }
  #produtos .head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  #produtos .head > :first-child {
    grid-column: 1/8;
  }
  #produtos .head > .intro {
    grid-column: 8/13;
  }
  #produtos .label {
    font-size: 16px;
  }
  #produtos h2 {
    font-size: 64px;
  }
  #produtos .intro {
    font-size: 20px;
  }
  /* Grade dos três produtos (.grid) */
  #produtos .grid {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  #produtos .ph {
    aspect-ratio: 4/5;
    border-radius: 20px;
  }
  #produtos .p .body {
    margin-top: 28px;
  }
  #produtos .p p {
    font-size: 17px;
  }
  #produtos .note {
    margin-top: 80px;
    padding-top: 28px;
  }
  #produtos .note p {
    font-size: 17px;
    max-width: 760px;
  }
  #produtos .lk {
    font-size: 17px;
  }
  #produtos .act {
    margin-top: 56px;
    gap: 28px;
  }
  #produtos .btn {
    font-size: 17px;
  }
  #produtos .act p {
    font-size: 16px;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #produtos {
    background: #0a451e;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #produtos h2,
  #produtos h4,
  #produtos p,
  #produtos .t {
    text-box: trim-both cap alphabetic;
  }
  #produtos .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #produtos .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #produtos h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #produtos h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #produtos .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Foto do produto (.ph) */
  #produtos .ph {
    position: relative;
    overflow: hidden;
    background: #123e22;
  }
  #produtos .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #produtos .ph:after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(235, 255, 238, 0.08);
    border-radius: inherit;
    pointer-events: none;
  }
  /* Selo de estágio sobre a foto (.chip) */
  #produtos .chip {
    position: absolute;
    left: 16px;
    top: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #ebffee;
    background: rgba(20, 25, 20, 0.62);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #produtos .chip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Espaço para foto que ainda não existe (.empty) */
  #produtos .empty {
    display: grid;
    place-items: center;
    background: radial-gradient(120% 90% at 30% 20%, #1d5a33 0%, #0e3a1c 55%, #0b2f17 100%);
  }
  #produtos .empty svg {
    width: 42%;
    opacity: 0.5;
  }
  #produtos .empty .ft {
    position: absolute;
    bottom: 16px;
    right: 16px;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.75);
  }
  /* Cada produto (.p) */
  #produtos .p .n {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
  }
  #produtos .p h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #produtos .p p {
    margin: 20px 0 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  #produtos .p .m {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.76);
  }
  /* Aplicações do produto (.tl) */
  #produtos .tl {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  /* Nota e link para o resultado do bambu (.note) */
  #produtos .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(235, 255, 238, 0.2);
  }
  #produtos .note p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.6;
  }
  #produtos .note p b {
    color: #ebffee;
    font-weight: 600;
  }
  /* Link com seta (.lk) */
  #produtos .lk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #00d462;
    white-space: nowrap;
  }
  #produtos .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  /* Área do botão de ação (.act) */
  #produtos .act {
    display: flex;
    align-items: center;
  }
  #produtos .act p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
  }
  #produtos .wrap {
    padding: 64px 20px 64px;
  }
  #produtos .head {
    display: grid;
    gap: 24px;
  }
  #produtos .label {
    font-size: 15px;
  }
  #produtos h2 {
    font-size: 40px;
  }
  #produtos .intro {
    font-size: 18px;
  }
  /* Grade dos três produtos (.grid) */
  #produtos .grid {
    margin-top: 44px;
    display: grid;
    gap: 44px;
  }
  #produtos .ph {
    aspect-ratio: 4/3;
    border-radius: 18px;
  }
  #produtos .p .body {
    margin-top: 24px;
  }
  #produtos .p h4 {
    font-size: 21px;
  }
  #produtos .p p {
    font-size: 16px;
  }
  #produtos .note {
    margin-top: 48px;
    padding-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  #produtos .note p {
    font-size: 16px;
  }
  #produtos .lk {
    font-size: 16px;
  }
  #produtos .act {
    margin-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #produtos .btn {
    font-size: 16px;
  }
  #produtos .act p {
    font-size: 16px;
  }
}

/* =============================================================================
   9. 04 · CIRCULARIDADE (#circularidade)
   -----------------------------------------------------------------------------
   Fundo menta. Diagrama em três colunas: resíduos estudados (.in) →
   cartão verde "Como transformamos" (.card, com os passos .st) → produtos
   (.out). No computador, os fios (svg.wires) são desenhados pelo JavaScript.
   No celular, os blocos ficam empilhados com setas (.dn).
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #circularidade {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #circularidade h2,
  #circularidade h4,
  #circularidade h5,
  #circularidade p,
  #circularidade .t,
  #circularidade .it b,
  #circularidade .it span,
  #circularidade .st b,
  #circularidade .st p,
  #circularidade .cl,
  #circularidade .st .n {
    text-box: trim-both cap alphabetic;
  }
  #circularidade .label {
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #circularidade .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #circularidade h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #circularidade h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #circularidade .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  /* Área do diagrama (.flow) */
  #circularidade .flow {
    position: relative;
  }
  /* Título de cada coluna (.cl) */
  #circularidade .cl {
    font-size: 16px;
    font-weight: 600;
    color: #0a451e;
    display: block;
    letter-spacing: 0.005em;
  }
  /* Colunas de resíduos e de produtos (.list) */
  #circularidade .list {
    margin-top: 24px;
    border-top: 1px solid rgba(20, 25, 20, 0.9);
  }
  /* Cada resíduo ou produto (.it) e o ponto de ligação do fio (.pt) */
  #circularidade .it {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(20, 25, 20, 0.14);
    position: relative;
  }
  #circularidade .it b {
    font-weight: 600;
    color: #141914;
  }
  #circularidade .it > span {
    font-size: 15px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
    white-space: nowrap;
  }
  #circularidade .it .pt {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #ebffee;
    border: 1.5px solid #0a451e;
  }
  #circularidade .it {
    display: block !important;
  }
  #circularidade .it > span {
    display: block;
    margin-top: 12px;
    white-space: normal;
  }
  /* Cartão central "Como transformamos" (.card) */
  #circularidade .card {
    background: #0a451e;
    color: #ebffee;
    border-radius: 24px;
    position: relative;
    z-index: 1;
  }
  #circularidade .card .cl {
    color: #00d462;
  }
  /* Passos 01 a 04 dentro do cartão (.st) */
  #circularidade .st {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 16px;
    align-items: baseline;
    border-top: 1px solid rgba(235, 255, 238, 0.16);
  }
  #circularidade .st .n {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
    display: block;
    margin-top: 0;
  }
  #circularidade .st b {
    font-weight: 600;
    display: block;
  }
  #circularidade .st p {
    margin: 12px 0 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.5;
  }
  /* Fios curvos do diagrama (svg.wires) */
  #circularidade svg.wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  #circularidade svg.wires path {
    fill: none;
    transition: none;
    stroke: #0a451e;
    stroke-opacity: 0.5;
    stroke-width: 1.75;
  }
  /* Chamada "Tem um resíduo parado no pátio?" (.note) */
  #circularidade .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(20, 25, 20, 0.2);
  }
  #circularidade .note p {
    margin: 0;
    color: rgba(20, 25, 20, 0.74);
    line-height: 1.6;
  }
  #circularidade .note p b {
    color: #141914;
    font-weight: 600;
  }
  #circularidade .btn {
    background: #141914;
    color: #ebffee;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  /* Setas entre os blocos no celular (.dn) */
  #circularidade .dn {
    display: none;
  }
  /* Elementos que se revelam por máscara (.rv) */
  #circularidade .rv {
    text-box: none !important;
    line-height: 1.25;
    display: block;
    overflow: hidden;
    padding: 0.08em 0 0.3em;
    margin: -0.08em 0 -0.3em;
  }
  #circularidade .rv > span {
    display: inline-block;
  }
  #circularidade.M .rv > span {
    transform: translateY(70%);
    clip-path: inset(0 -5% 101% -5%);
    opacity: 0;
    transition:
      transform 1s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s;
  }
  #circularidade.M .fd {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .ln {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .pt {
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #circularidade.M .card {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition:
      opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .on .rv > span,
  #circularidade.M .on.rv > span {
    transform: none;
    clip-path: inset(-30% -5% -30% -5%);
    opacity: 1;
  }
  #circularidade.M .on.fd,
  #circularidade.M .on .fd {
    opacity: 1;
    transform: none;
  }
  #circularidade.M .on.ln {
    transform: none;
  }
  #circularidade.M .on.pt,
  #circularidade.M .on .pt {
    transform: none;
  }
  #circularidade.M .card.on {
    opacity: 1;
    transform: none;
  }
  #circularidade .it {
    border-bottom: 0 !important;
  }
  #circularidade .it > .hr {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
  }
  #circularidade .it:after {
    content: none;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
  }
  #circularidade .list {
    border-top: 0 !important;
    position: relative;
  }
  #circularidade .list > .tr {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.9);
  }
  #circularidade .wrap {
    padding: 112px 72px 112px;
  }
  #circularidade .head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  #circularidade .head > :first-child {
    grid-column: 1/8;
  }
  #circularidade .head > .intro {
    grid-column: 8/13;
  }
  #circularidade .label {
    font-size: 16px;
  }
  #circularidade h2 {
    font-size: 64px;
  }
  #circularidade .intro {
    font-size: 20px;
  }
  #circularidade .flow {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  #circularidade .in,
  #circularidade .out {
    padding-top: 40px;
  }
  #circularidade .list {
    margin-top: 28px !important;
  }
  #circularidade .in {
    grid-column: 1/4;
  }
  #circularidade .card {
    grid-column: 5/9;
    padding: 40px 40px 14px;
  }
  #circularidade .out {
    grid-column: 10/13;
  }
  #circularidade .it {
    padding: 24px 0;
  }
  #circularidade .it b {
    font-size: 19px;
    letter-spacing: -0.005em;
  }
  #circularidade .out .it > span {
    font-size: 16px;
  }
  #circularidade .in .it .pt {
    right: -28px;
  }
  #circularidade .out .it .pt {
    left: -28px;
  }
  #circularidade .card .cl {
    margin-bottom: 28px;
  }
  #circularidade .st {
    padding: 24px 0 26px;
  }
  #circularidade .st b {
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  #circularidade .st p {
    font-size: 17px;
    color: rgba(235, 255, 238, 0.86);
  }
  #circularidade .st .n {
    font-size: 16px !important;
  }
  #circularidade .note {
    margin-top: 88px;
    padding-top: 28px;
  }
  #circularidade .note p {
    font-size: 17px;
    max-width: 760px;
  }
  #circularidade .btn {
    font-size: 17px;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #circularidade {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #circularidade h2,
  #circularidade h4,
  #circularidade h5,
  #circularidade p,
  #circularidade .t,
  #circularidade .it b,
  #circularidade .it span,
  #circularidade .st b,
  #circularidade .st p,
  #circularidade .cl,
  #circularidade .st .n {
    text-box: trim-both cap alphabetic;
  }
  #circularidade .label {
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #circularidade .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #circularidade h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #circularidade h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #circularidade .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  /* Área do diagrama (.flow) */
  #circularidade .flow {
    position: relative;
  }
  /* Título de cada coluna (.cl) */
  #circularidade .cl {
    font-size: 16px;
    font-weight: 600;
    color: #0a451e;
    display: block;
    letter-spacing: 0.005em;
  }
  /* Colunas de resíduos e de produtos (.list) */
  #circularidade .list {
    margin-top: 24px;
    border-top: 1px solid rgba(20, 25, 20, 0.9);
  }
  /* Cada resíduo ou produto (.it) e o ponto de ligação do fio (.pt) */
  #circularidade .it {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(20, 25, 20, 0.14);
    position: relative;
  }
  #circularidade .it b {
    font-weight: 600;
    color: #141914;
  }
  #circularidade .it > span {
    font-size: 15px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
    white-space: nowrap;
  }
  #circularidade .it .pt {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #ebffee;
    border: 1.5px solid #0a451e;
  }
  #circularidade .it {
    display: block !important;
  }
  #circularidade .it > span {
    display: block;
    margin-top: 12px;
    white-space: normal;
  }
  /* Cartão central "Como transformamos" (.card) */
  #circularidade .card {
    background: #0a451e;
    color: #ebffee;
    border-radius: 24px;
    position: relative;
    z-index: 1;
  }
  #circularidade .card .cl {
    color: #00d462;
  }
  /* Passos 01 a 04 dentro do cartão (.st) */
  #circularidade .st {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 16px;
    align-items: baseline;
    border-top: 1px solid rgba(235, 255, 238, 0.16);
  }
  #circularidade .st .n {
    font-size: 15px;
    font-weight: 500;
    color: #00d462;
    display: block;
    margin-top: 0;
  }
  #circularidade .st b {
    font-weight: 600;
    display: block;
  }
  #circularidade .st p {
    margin: 12px 0 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.5;
  }
  /* Fios curvos do diagrama (svg.wires) */
  #circularidade svg.wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  #circularidade svg.wires path {
    fill: none;
    transition: none;
    stroke: #0a451e;
    stroke-opacity: 0.5;
    stroke-width: 1.75;
  }
  /* Chamada "Tem um resíduo parado no pátio?" (.note) */
  #circularidade .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(20, 25, 20, 0.2);
  }
  #circularidade .note p {
    margin: 0;
    color: rgba(20, 25, 20, 0.74);
    line-height: 1.6;
  }
  #circularidade .note p b {
    color: #141914;
    font-weight: 600;
  }
  #circularidade .btn {
    background: #141914;
    color: #ebffee;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  /* Setas entre os blocos no celular (.dn) */
  #circularidade .dn {
    display: none;
  }
  /* Elementos que se revelam por máscara (.rv) */
  #circularidade .rv {
    text-box: none !important;
    line-height: 1.25;
    display: block;
    overflow: hidden;
    padding: 0.08em 0 0.3em;
    margin: -0.08em 0 -0.3em;
  }
  #circularidade .rv > span {
    display: inline-block;
  }
  #circularidade.M .rv > span {
    transform: translateY(70%);
    clip-path: inset(0 -5% 101% -5%);
    opacity: 0;
    transition:
      transform 1s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s;
  }
  #circularidade.M .fd {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .ln {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .pt {
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #circularidade.M .card {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition:
      opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .on .rv > span,
  #circularidade.M .on.rv > span {
    transform: none;
    clip-path: inset(-30% -5% -30% -5%);
    opacity: 1;
  }
  #circularidade.M .on.fd,
  #circularidade.M .on .fd {
    opacity: 1;
    transform: none;
  }
  #circularidade.M .on.ln {
    transform: none;
  }
  #circularidade.M .on.pt,
  #circularidade.M .on .pt {
    transform: none;
  }
  #circularidade.M .card.on {
    opacity: 1;
    transform: none;
  }
  #circularidade .it {
    border-bottom: 0 !important;
  }
  #circularidade .it > .hr {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
  }
  #circularidade .it:after {
    content: none;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.14);
  }
  #circularidade .list {
    border-top: 0 !important;
    position: relative;
  }
  #circularidade .list > .tr {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(20, 25, 20, 0.9);
  }
  #circularidade .wrap {
    padding: 64px 20px 64px;
  }
  #circularidade .head {
    display: grid;
    gap: 24px;
  }
  #circularidade .label {
    font-size: 15px;
  }
  #circularidade h2 {
    font-size: 40px;
  }
  #circularidade .intro {
    font-size: 18px;
  }
  #circularidade .flow {
    margin-top: 44px;
    display: grid;
    gap: 0;
  }
  #circularidade .it {
    padding: 20px 0;
  }
  #circularidade .it b {
    font-size: 18px;
  }
  #circularidade .it .pt,
  #circularidade svg.wires {
    display: none;
  }
  #circularidade .dn {
    display: grid;
    place-items: center;
    height: 64px;
    color: #0a451e;
  }
  #circularidade .card {
    padding: 28px 22px 6px;
    border-radius: 18px;
  }
  #circularidade .card .cl {
    margin-bottom: 22px;
  }
  #circularidade .st {
    padding: 20px 0 22px;
  }
  #circularidade .st b {
    font-size: 20px;
  }
  #circularidade .st p {
    font-size: 16px;
    color: rgba(235, 255, 238, 0.86);
  }
  #circularidade .note {
    margin-top: 56px;
    padding-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  #circularidade .note p {
    font-size: 16px;
  }
  #circularidade .btn {
    font-size: 16px;
  }
}

/* =============================================================================
   10. ONDE ATUAMOS (#setores)
   -----------------------------------------------------------------------------
   Fundo escuro. Lista de cinco setores (.s) à esquerda e vídeo (.media) à
   direita. O setor ativo ("on") acende, abre a descrição e mostra a barra de
   progresso (.bar); os vídeos trocam com fusão de 1 s.
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #setores {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #setores h2,
  #setores h3,
  #setores p,
  #setores .n {
    text-box: trim-both cap alphabetic;
  }
  #setores .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #setores .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #setores h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #setores h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #setores .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Lista de setores (.list) */
  #setores .list {
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Cada setor (.s); "on" = ativo */
  #setores .s {
    position: relative;
    border-bottom: 1px solid rgba(235, 255, 238, 0.14);
    cursor: pointer;
  }
  #setores .s .row {
    display: flex;
    align-items: baseline;
    gap: 20px;
  }
  #setores .s .n {
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.6);
    width: 28px;
    flex: none;
    transition: color 0.4s;
  }
  #setores .s h3 {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: rgba(235, 255, 238, 0.5);
    transition: color 0.5s;
  }
  #setores .s .d {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #setores .s .d > div {
    overflow: hidden;
  }
  #setores .s .d p {
    text-box: none;
    margin: 0;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.82);
    opacity: 0;
    transition: opacity 0.5s;
  }
  #setores .s .bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: #00d462;
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  #setores .s.on h3 {
    color: #ebffee;
  }
  #setores .s.on .n {
    color: #00d462;
  }
  #setores .s.on .d {
    grid-template-rows: 1fr;
  }
  #setores .s.on .d p {
    opacity: 1;
    transition-delay: 0.15s;
  }
  /* Vídeos dos setores (.media / .v) */
  #setores .media {
    position: relative;
    overflow: hidden;
    background: #0a451e;
  }
  #setores .media .v {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #setores .media .v.on {
    opacity: 1;
  }
  #setores .media img,
  #setores .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 6s linear;
  }
  #setores .media .v.on img,
  #setores .media .v.on video {
    transform: scale(1);
  }
  #setores .media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 25, 20, 0) 55%, rgba(20, 25, 20, 0.55));
    pointer-events: none;
  }
  /* Legenda sobre o vídeo, como "03 / 05 Óleo e gás" (.cap) */
  #setores .cap {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
  }
  #setores .cap .ct {
    font-variant-numeric: tabular-nums;
    color: rgba(235, 255, 238, 0.85);
  }
  #setores .cap .nm {
    color: #ebffee;
  }
  /* Chamada "Seu setor não está na lista?" (.note) */
  #setores .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(235, 255, 238, 0.2);
  }
  #setores .note p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.6;
  }
  #setores .note p b {
    color: #ebffee;
    font-weight: 600;
  }
  #setores .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  #setores .wrap {
    padding: 112px 72px 112px;
  }
  #setores .head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  #setores .head > :first-child {
    grid-column: 1/8;
  }
  #setores .head > .intro {
    grid-column: 8/13;
  }
  #setores .label {
    font-size: 16px;
  }
  #setores h2 {
    font-size: 64px;
  }
  #setores .intro {
    font-size: 20px;
  }
  /* Lista e vídeo lado a lado (.body) */
  #setores .body {
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: stretch;
  }
  #setores .list {
    grid-column: 1/6;
  }
  #setores .media {
    grid-column: 7/13;
    border-radius: 24px;
  }
  #setores .s {
    padding: 30px 0 !important;
  }
  #setores .s {
    padding: 26px 0;
  }
  #setores .s h3 {
    font-size: 44px;
  }
  #setores .s .d p {
    font-size: 17px;
    padding: 22px 0 8px 48px;
    margin-bottom: -6px;
  }
  #setores .note {
    margin-top: 88px;
    padding-top: 28px;
  }
  #setores .note p {
    font-size: 17px;
    max-width: 760px;
  }
  #setores .btn {
    font-size: 17px;
  }
  #setores .s h3 {
    font-size: clamp(34px, 3.06vw, 44px);
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #setores {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #setores h2,
  #setores h3,
  #setores p,
  #setores .n {
    text-box: trim-both cap alphabetic;
  }
  #setores .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
  }
  #setores .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #setores h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #setores h2 b {
    font-weight: 700;
    color: #00d462;
  }
  #setores .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Lista de setores (.list) */
  #setores .list {
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Cada setor (.s); "on" = ativo */
  #setores .s {
    position: relative;
    border-bottom: 1px solid rgba(235, 255, 238, 0.14);
    cursor: pointer;
  }
  #setores .s .row {
    display: flex;
    align-items: baseline;
    gap: 20px;
  }
  #setores .s .n {
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.6);
    width: 28px;
    flex: none;
    transition: color 0.4s;
  }
  #setores .s h3 {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: rgba(235, 255, 238, 0.5);
    transition: color 0.5s;
  }
  #setores .s .d {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #setores .s .d > div {
    overflow: hidden;
  }
  #setores .s .d p {
    text-box: none;
    margin: 0;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.82);
    opacity: 0;
    transition: opacity 0.5s;
  }
  #setores .s .bar {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: #00d462;
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  #setores .s.on h3 {
    color: #ebffee;
  }
  #setores .s.on .n {
    color: #00d462;
  }
  #setores .s.on .d {
    grid-template-rows: 1fr;
  }
  #setores .s.on .d p {
    opacity: 1;
    transition-delay: 0.15s;
  }
  /* Vídeos dos setores (.media / .v) */
  #setores .media {
    position: relative;
    overflow: hidden;
    background: #0a451e;
  }
  #setores .media .v {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #setores .media .v.on {
    opacity: 1;
  }
  #setores .media img,
  #setores .media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 6s linear;
  }
  #setores .media .v.on img,
  #setores .media .v.on video {
    transform: scale(1);
  }
  #setores .media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 25, 20, 0) 55%, rgba(20, 25, 20, 0.55));
    pointer-events: none;
  }
  /* Legenda sobre o vídeo, como "03 / 05 Óleo e gás" (.cap) */
  #setores .cap {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
  }
  #setores .cap .ct {
    font-variant-numeric: tabular-nums;
    color: rgba(235, 255, 238, 0.85);
  }
  #setores .cap .nm {
    color: #ebffee;
  }
  /* Chamada "Seu setor não está na lista?" (.note) */
  #setores .note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(235, 255, 238, 0.2);
  }
  #setores .note p {
    margin: 0;
    color: rgba(235, 255, 238, 0.8);
    line-height: 1.6;
  }
  #setores .note p b {
    color: #ebffee;
    font-weight: 600;
  }
  #setores .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  #setores .wrap {
    padding: 64px 20px 64px;
  }
  #setores .head {
    display: grid;
    gap: 24px;
  }
  #setores .label {
    font-size: 15px;
  }
  #setores h2 {
    font-size: 38px;
  }
  #setores .intro {
    font-size: 18px;
  }
  /* Lista e vídeo lado a lado (.body) */
  #setores .body {
    margin-top: 40px;
    display: flex;
    flex-direction: column-reverse;
    gap: 28px;
  }
  #setores .media {
    height: 240px;
    border-radius: 18px;
  }
  #setores .s {
    padding: 20px 0;
  }
  #setores .s h3 {
    font-size: 28px;
  }
  #setores .s .d p {
    font-size: 16px;
    padding: 16px 0 8px 48px;
    margin-bottom: -6px;
  }
  #setores .note {
    margin-top: 56px;
    padding-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  #setores .note p {
    font-size: 16px;
  }
  #setores .btn {
    font-size: 16px;
  }
}

/* =============================================================================
   11. QUEM SOMOS (#quem-somos)
   -----------------------------------------------------------------------------
   Fundo menta. Título "Origem na COPPE/UFRJ." e os três vínculos (.aff):
   NUMATS, Incubadora COPPE/UFRJ e FAPERJ. Há estilos de citação (.qt) e de
   publicações (.pubs) que hoje não aparecem na página.
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #quem-somos {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #quem-somos h2,
  #quem-somos h4,
  #quem-somos p,
  #quem-somos .t,
  #quem-somos .k,
  #quem-somos .y,
  #quem-somos .qt {
    text-box: trim-both cap alphabetic;
  }
  #quem-somos p {
    text-wrap: pretty;
  }
  /* Cada vínculo (.a) */
  #quem-somos .a p,
  #quem-somos .intro {
    text-wrap: balance;
  }
  #quem-somos .wrap {
    position: relative;
    overflow: hidden;
  }
  /* Folha em contorno (.lf) */
  #quem-somos .lf {
    color: #0a451e;
    pointer-events: none;
    display: block;
  }
  #quem-somos .label {
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    position: relative;
  }
  #quem-somos .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #quem-somos h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #quem-somos h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #quem-somos .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  #quem-somos .head,
  #quem-somos .qw,
  #quem-somos .aff,
  #quem-somos .pubs {
    position: relative;
  }
  /* Frase-manifesto (.qt), hoje fora da página */
  #quem-somos .qt {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
  }
  #quem-somos .qt b {
    font-weight: 600;
    color: #0a451e;
  }
  #quem-somos .a {
    border-top: 1px solid rgba(20, 25, 20, 0.9);
  }
  #quem-somos .a .k {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
  }
  #quem-somos .a h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #quem-somos .a p {
    margin: 0;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  #quem-somos .pl {
    font-size: 16px;
    font-weight: 600;
    color: #0a451e;
    margin: 0;
  }
  #quem-somos .pub {
    display: grid;
    border-top: 1px solid rgba(20, 25, 20, 0.16);
  }
  #quem-somos .pub:last-child {
    border-bottom: 1px solid rgba(20, 25, 20, 0.16);
  }
  #quem-somos .pub .y {
    font-size: 15px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
  }
  #quem-somos .pub h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  #quem-somos .pub p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(20, 25, 20, 0.72);
  }
  #quem-somos .pub .doi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(10, 69, 30, 0.35);
  }
  #quem-somos .wrap {
    padding: 112px 72px 112px;
  }
  #quem-somos .qw {
    align-items: center;
  }
  #quem-somos .lfw {
    grid-column: 10/13;
    justify-self: end;
  }
  #quem-somos .lf {
    width: 250px;
    height: auto;
  }
  #quem-somos .head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
  }
  #quem-somos .head > :first-child {
    grid-column: 1/8;
  }
  #quem-somos .head > .intro {
    grid-column: 8/13;
  }
  #quem-somos .label {
    font-size: 16px;
  }
  #quem-somos h2 {
    font-size: 64px;
  }
  #quem-somos .intro {
    font-size: 20px;
  }
  #quem-somos .qw {
    margin-top: 96px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  #quem-somos .qt {
    grid-column: 1/10;
    font-size: 40px;
  }
  /* Os três vínculos institucionais (.aff) */
  #quem-somos .aff {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  #quem-somos .a {
    padding-top: 28px;
  }
  #quem-somos .a h4 {
    font-size: 24px;
    margin-top: 24px;
  }
  #quem-somos .a p {
    font-size: 17px;
    margin-top: 20px;
  }
  /* Lista de publicações (.pubs / .pub), hoje fora da página */
  #quem-somos .pubs {
    margin-top: 96px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  #quem-somos .pl {
    grid-column: 1/4;
    padding-top: 30px;
  }
  #quem-somos .pls {
    grid-column: 4/13;
  }
  #quem-somos .pub {
    grid-template-columns: 96px 1fr;
    column-gap: 24px;
    padding: 30px 0;
  }
  #quem-somos .pub h4 {
    font-size: 20px;
  }
  #quem-somos .pub p {
    margin-top: 22px;
  }
  #quem-somos .pub .doi {
    margin-top: 16px;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #quem-somos {
    background: #ebffee;
    color: #141914;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #quem-somos h2,
  #quem-somos h4,
  #quem-somos p,
  #quem-somos .t,
  #quem-somos .k,
  #quem-somos .y,
  #quem-somos .qt {
    text-box: trim-both cap alphabetic;
  }
  #quem-somos p {
    text-wrap: pretty;
  }
  /* Cada vínculo (.a) */
  #quem-somos .a p,
  #quem-somos .intro {
    text-wrap: balance;
  }
  #quem-somos .wrap {
    position: relative;
    overflow: hidden;
  }
  /* Folha em contorno (.lf) */
  #quem-somos .lf {
    color: #0a451e;
    pointer-events: none;
    display: block;
  }
  #quem-somos .label {
    font-weight: 500;
    color: #0a451e;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    position: relative;
  }
  #quem-somos .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  #quem-somos h2 {
    margin: 0;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  #quem-somos h2 b {
    font-weight: 700;
    color: #0a451e;
  }
  #quem-somos .intro {
    margin: 0;
    text-wrap: pretty;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  #quem-somos .head,
  #quem-somos .qw,
  #quem-somos .aff,
  #quem-somos .pubs {
    position: relative;
  }
  /* Frase-manifesto (.qt), hoje fora da página */
  #quem-somos .qt {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
  }
  #quem-somos .qt b {
    font-weight: 600;
    color: #0a451e;
  }
  #quem-somos .a {
    border-top: 1px solid rgba(20, 25, 20, 0.9);
  }
  #quem-somos .a .k {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
  }
  #quem-somos .a h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  #quem-somos .a p {
    margin: 0;
    line-height: 1.6;
    color: rgba(20, 25, 20, 0.74);
  }
  #quem-somos .pl {
    font-size: 16px;
    font-weight: 600;
    color: #0a451e;
    margin: 0;
  }
  #quem-somos .pub {
    display: grid;
    border-top: 1px solid rgba(20, 25, 20, 0.16);
  }
  #quem-somos .pub:last-child {
    border-bottom: 1px solid rgba(20, 25, 20, 0.16);
  }
  #quem-somos .pub .y {
    font-size: 15px;
    font-weight: 500;
    color: rgba(20, 25, 20, 0.72);
  }
  #quem-somos .pub h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: pretty;
  }
  #quem-somos .pub p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(20, 25, 20, 0.72);
  }
  #quem-somos .pub .doi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #0a451e;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(10, 69, 30, 0.35);
  }
  #quem-somos .wrap {
    padding: 64px 20px 64px;
  }
  #quem-somos .lfw {
    display: none;
  }
  #quem-somos .head {
    display: grid;
    gap: 24px;
  }
  #quem-somos .label {
    font-size: 15px;
  }
  #quem-somos h2 {
    font-size: 38px;
  }
  #quem-somos .intro {
    font-size: 18px;
  }
  #quem-somos .qw {
    margin-top: 56px;
  }
  #quem-somos .qt {
    font-size: 26px;
  }
  /* Os três vínculos institucionais (.aff) */
  #quem-somos .aff {
    margin-top: 48px;
    display: grid;
    gap: 36px;
  }
  #quem-somos .a {
    padding-top: 22px;
  }
  #quem-somos .a h4 {
    font-size: 21px;
    margin-top: 20px;
  }
  #quem-somos .a p {
    font-size: 16px;
    margin-top: 16px;
  }
  /* Lista de publicações (.pubs / .pub), hoje fora da página */
  #quem-somos .pubs {
    margin-top: 56px;
  }
  #quem-somos .pl {
    margin-bottom: 22px;
  }
  #quem-somos .pub {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 24px 0;
  }
  #quem-somos .pub h4 {
    font-size: 18px;
  }
  #quem-somos .pub p {
    margin-top: 20px;
  }
  #quem-somos .pub .doi {
    margin-top: 14px;
  }
}

/* =============================================================================
   12. CONTATO E RODAPÉ (#contato, footer)
   -----------------------------------------------------------------------------
   Bloco com o vídeo da floresta (.vc) e a frase "Menos carbono. Mais futuro."
   (.vi), que sobe quando aparece. Depois, o texto de contato, e-mail e LinkedIn
   (.ml) e o rodapé: logo, colunas de links (.fc), faixa de apoio (.sup) e linha
   legal (.lg).
   ========================================================================== */
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #contato {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #contato h2,
  #contato p,
  #contato .t,
  #contato .k,
  #contato .big,
  #contato .ml {
    text-box: trim-both cap alphabetic;
  }
  #contato p {
    text-wrap: pretty;
  }
  #contato .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 36px;
  }
  #contato .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Frase grande "Menos carbono. Mais futuro." (.big) */
  #contato .big {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
  }
  #contato .big span {
    display: block;
  }
  #contato .big span:first-child {
    font-weight: 400;
    color: #ebffee;
  }
  #contato .big span:last-child {
    color: #00d462;
  }
  /* Texto e contatos abaixo do vídeo (.ct) */
  #contato .ct {
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Bloco com o vídeo da floresta (.vc); "on" = vídeo se aproximando */
  #contato .vc {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  #contato .vc img,
  #contato .vc video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #contato .vc .sh {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20, 25, 20, 0.3) 0%,
      rgba(20, 25, 20, 0.38) 30%,
      rgba(20, 25, 20, 0.7) 55%,
      rgba(20, 25, 20, 0.86) 80%,
      #141914 100%
    );
  }
  /* Frase sobre o vídeo (.vi) */
  #contato .vi {
    position: relative;
    width: 100%;
  }
  #contato.M .big span {
    transform: translateY(40%);
    clip-path: inset(0 -2% 100% -2%);
    transition:
      transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #contato.M .big span:last-child {
    transition-delay: 0.12s;
  }
  #contato.M .on .big span {
    transform: none;
    clip-path: inset(-20% -2% -25% -2%);
  }
  #contato.M .vi .label {
    opacity: 0;
    transition: opacity 0.8s;
  }
  #contato.M .on .label {
    opacity: 1;
  }
  #contato .vc video {
    transform: scale(1.08);
    transition: transform 9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #contato .vc.on video {
    transform: scale(1);
  }
  #contato .big span:first-child {
    color: #ebffee;
  }
  #contato .vi .label {
    color: #ebffee;
  }
  #contato .ct p {
    margin: 0;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Linhas de e-mail e LinkedIn (.ml) */
  #contato .ml {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
    color: #ebffee;
    border-bottom: 1px solid rgba(235, 255, 238, 0.22);
  }
  #contato .ml .k {
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.72);
  }
  #contato .ml b {
    font-weight: 600;
  }
  #contato .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 18px 30px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  /* Rodapé (footer) */
  #contato footer {
    border-top: 1px solid rgba(235, 255, 238, 0.14);
  }
  /* Colunas de links do rodapé (.fc) */
  #contato .fc h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #00d462;
    text-box: trim-both cap alphabetic;
  }
  #contato .fc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
  }
  #contato .fc li {
    font-size: 16px;
    color: rgba(235, 255, 238, 0.82);
    text-box: trim-both cap alphabetic;
  }
  /* Faixa de apoio: FAPERJ, Incubadora e NUMATS (.sup) */
  #contato .sup {
    border-top: 1px solid rgba(235, 255, 238, 0.14);
    display: grid;
  }
  #contato .sup .s .k {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.66);
  }
  #contato .sup .s b {
    display: block;
    font-weight: 600;
    color: #ebffee;
  }
  #contato .sup .s span.d {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(235, 255, 238, 0.74);
  }
  /* Linha legal: razão social, CNPJ e © (.lg) */
  #contato .lg {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.66);
    border-top: 1px solid rgba(235, 255, 238, 0.14);
  }
  #contato .lg b {
    font-weight: 600;
    color: #ebffee;
  }
  #contato .vc {
    height: 820px;
  }
  #contato .vi {
    padding: 0 72px 72px;
  }
  #contato .wrap {
    padding: 0 72px 120px;
  }
  #contato .label {
    font-size: 16px;
  }
  #contato .big {
    font-size: 168px;
  }
  #contato .ct {
    margin-top: 0;
    padding-top: 36px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  #contato .ct p {
    grid-column: 1/6;
    font-size: 20px;
  }
  #contato .cl {
    grid-column: 7/13;
  }
  #contato .ml {
    padding: 26px 0;
    font-size: 24px;
  }
  #contato .ml:first-child {
    padding-top: 0;
  }
  #contato .btn {
    margin-top: 36px;
    font-size: 17px;
  }
  #contato footer {
    padding: 72px 72px 40px;
  }
  /* Grade do rodapé (.fg) */
  #contato .fg {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  /* Logo e frase do rodapé (.fl) */
  #contato .fl {
    grid-column: 1/5;
  }
  #contato .fl svg {
    height: 30px;
    width: auto;
    display: block;
  }
  #contato .fl p {
    margin: 28px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.74);
    max-width: 340px;
    text-box: trim-both cap alphabetic;
  }
  #contato .fc {
    grid-column: span 2;
  }
  #contato .fc:nth-child(2) {
    grid-column: 7/9;
  }
  #contato .fc ul {
    margin-top: 24px;
    gap: 18px;
  }
  #contato .sup {
    margin-top: 72px;
    padding-top: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
  #contato .sup .s b {
    font-size: 18px;
    margin-top: 18px;
  }
  #contato .sup .s span.d {
    margin-top: 12px;
  }
  #contato .lg {
    margin-top: 56px;
    padding-top: 28px;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #contato {
    background: #141914;
    color: #ebffee;
    font-family: Poppins;
    -webkit-font-smoothing: antialiased;
  }
  #contato h2,
  #contato p,
  #contato .t,
  #contato .k,
  #contato .big,
  #contato .ml {
    text-box: trim-both cap alphabetic;
  }
  #contato p {
    text-wrap: pretty;
  }
  #contato .label {
    font-weight: 500;
    color: #00d462;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 36px;
  }
  #contato .label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00d462;
  }
  /* Frase grande "Menos carbono. Mais futuro." (.big) */
  #contato .big {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
  }
  #contato .big span {
    display: block;
  }
  #contato .big span:first-child {
    font-weight: 400;
    color: #ebffee;
  }
  #contato .big span:last-child {
    color: #00d462;
  }
  /* Texto e contatos abaixo do vídeo (.ct) */
  #contato .ct {
    border-top: 1px solid rgba(235, 255, 238, 0.22);
  }
  /* Bloco com o vídeo da floresta (.vc); "on" = vídeo se aproximando */
  #contato .vc {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  #contato .vc img,
  #contato .vc video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #contato .vc .sh {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20, 25, 20, 0.3) 0%,
      rgba(20, 25, 20, 0.38) 30%,
      rgba(20, 25, 20, 0.7) 55%,
      rgba(20, 25, 20, 0.86) 80%,
      #141914 100%
    );
  }
  /* Frase sobre o vídeo (.vi) */
  #contato .vi {
    position: relative;
    width: 100%;
  }
  #contato.M .big span {
    transform: translateY(40%);
    clip-path: inset(0 -2% 100% -2%);
    transition:
      transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #contato.M .big span:last-child {
    transition-delay: 0.12s;
  }
  #contato.M .on .big span {
    transform: none;
    clip-path: inset(-20% -2% -25% -2%);
  }
  #contato.M .vi .label {
    opacity: 0;
    transition: opacity 0.8s;
  }
  #contato.M .on .label {
    opacity: 1;
  }
  #contato .vc video {
    transform: scale(1.08);
    transition: transform 9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #contato .vc.on video {
    transform: scale(1);
  }
  #contato .big span:first-child {
    color: #ebffee;
  }
  #contato .vi .label {
    color: #ebffee;
  }
  #contato .ct p {
    margin: 0;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.8);
  }
  /* Linhas de e-mail e LinkedIn (.ml) */
  #contato .ml {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
    color: #ebffee;
    border-bottom: 1px solid rgba(235, 255, 238, 0.22);
  }
  #contato .ml .k {
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.72);
  }
  #contato .ml b {
    font-weight: 600;
  }
  #contato .btn {
    background: #00d462;
    color: #141914;
    font-weight: 600;
    padding: 18px 30px;
    border-radius: 999px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  /* Rodapé (footer) */
  #contato footer {
    border-top: 1px solid rgba(235, 255, 238, 0.14);
  }
  /* Colunas de links do rodapé (.fc) */
  #contato .fc h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #00d462;
    text-box: trim-both cap alphabetic;
  }
  #contato .fc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
  }
  #contato .fc li {
    font-size: 16px;
    color: rgba(235, 255, 238, 0.82);
    text-box: trim-both cap alphabetic;
  }
  /* Faixa de apoio: FAPERJ, Incubadora e NUMATS (.sup) */
  #contato .sup {
    border-top: 1px solid rgba(235, 255, 238, 0.14);
    display: grid;
  }
  #contato .sup .s .k {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: rgba(235, 255, 238, 0.66);
  }
  #contato .sup .s b {
    display: block;
    font-weight: 600;
    color: #ebffee;
  }
  #contato .sup .s span.d {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(235, 255, 238, 0.74);
  }
  /* Linha legal: razão social, CNPJ e © (.lg) */
  #contato .lg {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 15px;
    color: rgba(235, 255, 238, 0.66);
    border-top: 1px solid rgba(235, 255, 238, 0.14);
  }
  #contato .lg b {
    font-weight: 600;
    color: #ebffee;
  }
  #contato .vc {
    height: 560px;
  }
  #contato .vi {
    padding: 0 20px 44px;
  }
  #contato .wrap {
    padding: 0 20px 64px;
  }
  #contato .label {
    font-size: 15px;
  }
  #contato .big {
    font-size: 60px;
  }
  #contato .ct {
    margin-top: 0;
    padding-top: 28px;
    display: grid;
    gap: 36px;
  }
  #contato .ct p {
    font-size: 18px;
  }
  #contato .ml {
    padding: 22px 0;
    font-size: 18px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  #contato .ml:first-child {
    padding-top: 0;
  }
  #contato .btn {
    margin-top: 28px;
    font-size: 16px;
  }
  #contato footer {
    padding: 56px 20px 32px;
  }
  /* Grade do rodapé (.fg) */
  #contato .fg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
    column-gap: 20px;
  }
  /* Logo e frase do rodapé (.fl) */
  #contato .fl {
    grid-column: 1/3;
  }
  #contato .fl svg {
    height: 24px;
    width: auto;
    display: block;
  }
  #contato .fl p {
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(235, 255, 238, 0.74);
  }
  #contato .fc:last-child {
    grid-column: 1/3;
  }
  #contato .fc ul {
    margin-top: 20px;
    gap: 16px;
  }
  #contato .sup {
    margin-top: 48px;
    padding-top: 28px;
    gap: 28px;
  }
  #contato .sup .s b {
    font-size: 17px;
    margin-top: 14px;
  }
  #contato .sup .s span.d {
    margin-top: 10px;
  }
  #contato .lg {
    margin-top: 40px;
    padding-top: 24px;
    flex-direction: column;
    gap: 12px;
  }
  #contato .lg .sep {
    display: none;
  }
  #contato .lg .cn {
    display: block;
    margin-top: 8px;
  }
}

/* =============================================================================
   13. PÁGINA EQUIPE (#equipe)
   -----------------------------------------------------------------------------
   Estilos usados só em equipe.html. A página tem a classe "pg-equipe" no
   <html>, e as regras que não são do #equipe ficam limitadas a ela, para não
   afetar a página inicial (fundo escuro desde o início e altura do topo).
   A seção #equipe tem fundo menta, título, introdução e a lista dos sócios
   (.pp), cada um com papel (.k), nome, bio (.bio) e links (.lk).
   ========================================================================== */
#equipe {
  background: #ebffee;
  color: #141914;
}
#equipe h2,
#equipe h3,
#equipe p,
#equipe .k {
  text-box: trim-both cap alphabetic;
}
#equipe .label {
  font-weight: 500;
  color: #0a451e;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font-size: 16px;
}
#equipe .label:before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d462;
}
#equipe h2 {
  margin: 0;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-size: 64px;
}
#equipe h2 b {
  font-weight: 700;
  color: #0a451e;
}
#equipe .intro {
  margin: 0;
  line-height: 1.6;
  color: rgba(20, 25, 20, 0.74);
  font-size: 20px;
  text-wrap: pretty;
}
#equipe .list {
  border-top: 1px solid #141914;
}
#equipe .pp {
  border-bottom: 1px solid rgba(20, 25, 20, 0.16);
}
#equipe .k {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #0a451e;
}
#equipe h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
#equipe .bio {
  margin: 0;
  line-height: 1.6;
  color: rgba(20, 25, 20, 0.78);
  text-wrap: pretty;
}
#equipe .lk {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
#equipe .lk a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #0a451e;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(10, 69, 30, 0.35);
}
@media (min-width: 1024px) {
  #equipe .wrap {
    padding: 208px 72px 112px;
  }
  #equipe .head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
    margin-bottom: 80px;
  }
  #equipe .head h2 {
    grid-column: 1/8;
  }
  #equipe .head .intro {
    grid-column: 8/13;
  }
  #equipe .pp {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    padding: 44px 0;
    align-items: start;
  }
  #equipe .nm {
    grid-column: 1/7;
  }
  #equipe .k {
    margin-bottom: 24px;
  }
  #equipe h3 {
    font-size: clamp(36px, 3.33vw, 48px);
  }
  #equipe .bio {
    grid-column: 7/11;
    font-size: 17px;
    padding-top: 39px;
  }
  #equipe .lk {
    grid-column: 11/13;
    justify-content: flex-end;
    padding-top: 39px;
  }
}
@media (max-width: 1023.98px) {
  #equipe .wrap {
    padding: 124px 20px 64px;
  }
  #equipe .head {
    display: grid;
    gap: 24px;
    margin-bottom: 44px;
  }
  #equipe h2 {
    font-size: 38px;
  }
  #equipe .intro {
    font-size: 18px;
  }
  #equipe .pp {
    padding: 28px 0;
    display: grid;
    gap: 18px;
  }
  #equipe .k {
    margin-bottom: 16px;
  }
  #equipe h3 {
    font-size: 30px;
  }
  #equipe .bio {
    font-size: 16px;
  }
}
#equipe h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#equipe .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
.pg-equipe {
  color-scheme: dark;
}
.pg-equipe,
.pg-equipe body {
  background: #141914;
}
.pg-equipe .hd {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(92px + env(safe-area-inset-top, 0px));
}
@media (max-width: 1199.98px) {
  .pg-equipe .hd {
    height: calc(68px + env(safe-area-inset-top, 0px));
  }
}

/* =============================================================================
   14. AJUSTES FINAIS DE TÍTULOS E MARGENS
   -----------------------------------------------------------------------------
   Garante que todas as seções usem o mesmo tamanho de título (--t) e as mesmas
   margens (--gut). Usa !important para vencer as regras das seções, por isso
   precisa ficar depois delas.
   ========================================================================== */
#metodo h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#metodo .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#consultoria h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#consultoria .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#plataforma h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#plataforma .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#produtos h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#produtos .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#circularidade h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#circularidade .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#setores h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#setores .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#quem-somos h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#quem-somos .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#contato h2 {
  font-size: var(--t) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
}
#contato .wrap {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#metodo h3,
#setores .s h3,
#equipe h3 {
  font-size: var(--t3) !important;
}
#contato .vi,
#contato footer {
  padding-left: var(--gut) !important;
  padding-right: var(--gut) !important;
}
#contato .big span {
  display: block;
}
#consultoria .stage {
  grid-template-columns: minmax(0, 1fr);
}
#consultoria .slide,
#consultoria .slide > div {
  min-width: 0;
}
#consultoria .flag {
  font-size: 13px !important;
}
main .btn {
  max-width: 100%;
  white-space: normal !important;
  text-align: left;
}
#produtos .p .n {
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
#produtos .tl {
  gap: 14px !important;
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #produtos .p .n {
    font-size: 21px !important;
  }
}
#consultoria .norms {
  display: block !important;
  margin-top: 48px !important;
  padding-top: 24px !important;
}
#consultoria .norms .nl {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 0 0 20px !important;
}
#consultoria .ng {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 18px !important;
}
#consultoria .nm {
  gap: 10px !important;
  min-width: 0;
}
#consultoria .big {
  font-size: calc(var(--t) * 2.25) !important;
}
#consultoria .nm b {
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
#consultoria .nm span {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: rgba(235, 255, 238, 0.72) !important;
}
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #consultoria .ng {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
  }
}
/* --- Telas a partir de 1200 px --- */
@media (min-width: 1200px) {
  #consultoria .ng {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #consultoria .norms {
    margin-top: 32px !important;
  }
}
/* --- Tablet e celular (telas até 1023 px) --- */
@media (max-width: 1023.98px) {
  #circularidade .dn {
    position: relative;
  }
  #circularidade .dn svg {
    position: relative;
    z-index: 1;
  }
  #circularidade.M .dn svg {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #circularidade.M .dn.on svg {
    opacity: 1;
    transform: none;
  }
  #circularidade .dn:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #00d462;
    opacity: 0;
  }
  #circularidade.M .dn.on:before {
    animation: circdrip 1.9s cubic-bezier(0.45, 0, 0.55, 1) 0.8s infinite;
  }
  /* Animação "circdrip" */
  @keyframes circdrip {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
    18% {
      opacity: 1;
    }
    78% {
      opacity: 1;
      transform: translateY(46px);
    }
    100% {
      opacity: 0;
      transform: translateY(52px);
    }
  }
}
#contato .vc {
  height: clamp(560px, 75vw, 640px) !important;
}
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) {
  #contato .vc {
    height: clamp(560px, 50vw, 720px) !important;
  }
}
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #setores .list {
    grid-column: 1/7;
  }
  #setores .media {
    grid-column: 8/13;
  }
  #plataforma .side {
    display: none;
  }
  #plataforma .body {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}
/* --- Computador (telas a partir de 1024 px) --- */
@media (min-width: 1024px) and (max-width: 1399.98px) {
  #contato .fl {
    grid-column: 1/-1;
    margin-bottom: 48px;
  }
  #contato .fc:nth-child(2) {
    grid-column: 1/5;
  }
  #contato .fc:nth-child(3) {
    grid-column: 5/9;
  }
  #contato .fc:nth-child(4) {
    grid-column: 9/13;
  }
}

/* =============================================================================
   15. SELETOR DE IDIOMA PT · EN
   -----------------------------------------------------------------------------
   O idioma atual aparece em negrito; o outro é um link mais claro que fica
   sublinhado ao passar o mouse. Aparece no topo (.lang), no menu do celular
   (.lng) e no rodapé (.lsw).
   ========================================================================== */
.lang a,
.lsw {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.lang a:hover,
.lsw:hover,
.lang a:focus-visible,
.lsw:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang b,
.lng b {
  font-weight: 700;
}

/* =============================================================================
   16. CLASSES UTILITÁRIAS (u-*)
   -----------------------------------------------------------------------------
   Estilos pontuais que antes ficavam dentro do HTML (atributo style="").
   Cada classe faz uma coisa só, descrita no próprio nome: atraso de animação,
   posição de foto, largura de barra, cor da legenda. Usam !important para
   manter a mesma força que tinham dentro do HTML.
   ========================================================================== */
.u-background-00d462 {
  background: #00d462 !important;
}
.u-background-0a451e {
  background: #0a451e !important;
}
.u-font-style-normal {
  font-style: normal !important;
}
.u-object-position-35pct-55pct {
  object-position: 35% 55% !important;
}
.u-object-position-62pct-50pct {
  object-position: 62% 50% !important;
}
.u-object-position-center {
  object-position: center !important;
}
.u-transition-delay-0p58s {
  transition-delay: 0.58s !important;
}
.u-transition-delay-0p5s {
  transition-delay: 0.5s !important;
}
.u-transition-delay-0p66s {
  transition-delay: 0.66s !important;
}
.u-transition-delay-0p74s {
  transition-delay: 0.74s !important;
}
.u-transition-delay-p16s {
  transition-delay: 0.16s !important;
}
.u-transition-delay-p1s {
  transition-delay: 0.1s !important;
}
.u-transition-delay-p22s {
  transition-delay: 0.22s !important;
}
.u-transition-delay-p4s {
  transition-delay: 0.4s !important;
}
.u-width-100pct {
  width: 100% !important;
}
.u-width-49pct {
  width: 49% !important;
}
.u-svg-block {
  display: block !important;
  overflow: visible !important;
}

/* Link "Acesse o site" nos cards da faixa de apoio */
#contato .sup .s a.lk {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ebffee;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contato .sup .s a.lk:hover,
#contato .sup .s a.lk:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* Linhas de contato (.ml): o valor ocupa o espaço do meio e começa sempre
   no mesmo ponto, à esquerda, mesmo quando o texto é curto (ex.: @biocsystems) */
#contato .ml .k {
  flex: 0 0 auto;
  min-width: 5.5em;
}
#contato .ml b {
  flex: 1 1 auto;
  text-align: left;
}
#contato .ml svg {
  flex: 0 0 auto;
}

/* =============================================================================
   POP-UP "SOLICITAR UMA PROPOSTA" (<dialog class="prop">)
   ========================================================================== */
dialog.prop {
  border: 0;
  padding: 0;
  background: transparent;
  color: #ebffee;
  max-width: min(520px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: visible;
}
dialog.prop::backdrop {
  background: rgba(10, 14, 10, 0.72);
  backdrop-filter: blur(6px);
}
dialog.prop[open] {
  animation: prop-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes prop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.prop .pf {
  position: relative;
  box-sizing: border-box;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 40px 36px 32px;
  background: #141914;
  border: 1px solid rgba(235, 255, 238, 0.16);
  border-radius: 24px;
  font-family: inherit;
}
.prop .px {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(235, 255, 238, 0.72);
  cursor: pointer;
}
.prop .px:hover { background: rgba(235, 255, 238, 0.1); color: #ebffee; }
.prop .pk {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #00d462;
}
.prop h2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  color: #ebffee;
}
.prop .ps {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(235, 255, 238, 0.72);
}
.prop label { display: block; margin: 0 0 16px; }
.prop label span {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(235, 255, 238, 0.86);
}
.prop label i { font-style: normal; color: rgba(235, 255, 238, 0.5); }
.prop input[type="text"],
.prop input[type="email"],
.prop textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 16px;
  color: #ebffee;
  background: rgba(235, 255, 238, 0.06);
  border: 1px solid rgba(235, 255, 238, 0.22);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.prop textarea { resize: vertical; min-height: 110px; }
.prop ::placeholder { color: rgba(235, 255, 238, 0.4); }
.prop input:focus,
.prop textarea:focus {
  border-color: #00d462;
  background: rgba(235, 255, 238, 0.09);
}
.prop .bad { border-color: #ff8a7a !important; }
.prop .hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.prop .pb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 16px 32px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #141914;
  background: #00d462;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}
.prop .pb:hover { transform: translateY(-1px); }
.prop .pb:disabled { opacity: 0.6; cursor: wait; transform: none; }
.prop .pst {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(235, 255, 238, 0.86);
}
.prop .pst.err { color: #ff9d90; }
.prop .pst.ok { color: #00d462; }
@media (max-width: 480px) {
  .prop .pf { padding: 32px 22px 24px; border-radius: 20px; }
  .prop h2 { font-size: 26px; }
  .prop .pb { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.prop[open] { animation: none; }
}

/* Acessibilidade: link de idioma do rodapé com contraste suficiente e sublinhado */
.lsw {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   VÍDEOS SEM TREMOR
   Os vídeos de "Onde atuamos" e do fecho (contato) tinham um zoom lento via
   CSS (scale) enquanto tocavam; esse zoom em vídeo em movimento faz a imagem
   tremer. O zoom continua nas fotos; os vídeos ficam parados no tamanho final,
   cada um em sua própria camada de GPU.
   ========================================================================== */
#setores .media video,
#setores .media .v.on video,
#contato .vc video,
#contato .vc.on video {
  transform: translateZ(0) !important;
  transition: none !important;
  will-change: transform;
  backface-visibility: hidden;
}

/* =============================================================================
   PÁGINA DE POLÍTICA DE PRIVACIDADE (reaproveita o #equipe)
   ========================================================================== */
#equipe .lgl {
  margin-top: 56px;
  max-width: 760px;
  border-top: 1px solid #141914;
}
#equipe .lgl h3 {
  margin: 40px 0 12px;
  font-size: 24px !important;
  line-height: 1.2 !important;
  text-box: normal;
}
#equipe .lbody {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(20, 25, 20, 0.82);
}
#equipe .lbody p,
#equipe .lbody ul {
  margin: 0 0 12px;
  text-box: normal;
}
#equipe .lbody ul { padding-left: 22px; }
#equipe .lbody li { margin: 0 0 8px; }
#equipe .lbody a {
  color: #0a451e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Aviso de privacidade no formulário do pop-up */
.prop .pcons {
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(235, 255, 238, 0.66);
}
.prop .pcons a {
  color: #ebffee;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   FOCO VISÍVEL (navegação por teclado)
   Contorno verde-escuro sobre fundo claro; verde-claro sobre fundo escuro.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0a451e;
  outline-offset: 3px;
  border-radius: 4px;
}
[data-tone='dark'] a:focus-visible,
[data-tone='dark'] button:focus-visible,
[data-tone='green'] a:focus-visible,
[data-tone='green'] button:focus-visible,
.hd[data-tone='dark'] a:focus-visible,
.hd[data-tone='dark'] button:focus-visible,
#contato a:focus-visible,
#contato button:focus-visible,
dialog.prop a:focus-visible,
dialog.prop button:focus-visible,
.mmenu a:focus-visible {
  outline-color: #00d462;
}
.btn:focus-visible,
.hcta:focus-visible,
.mbtn:focus-visible {
  border-radius: 999px;
}
dialog.prop input:focus-visible,
dialog.prop textarea:focus-visible {
  outline: 2px solid #00d462;
  outline-offset: 2px;
}

/* Celular: nas linhas de contato o rótulo fica em cima e o valor embaixo,
   para caber textos longos (ex.: o número do WhatsApp) sem quebrar a seta */
@media (max-width: 600px) {
  #contato .ml {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
  }
  #contato .ml .k {
    grid-column: 1 / -1;
    min-width: 0;
  }
  #contato .ml b {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 20px;
  }
  #contato .ml svg {
    grid-column: 2;
    grid-row: 2;
  }
}

/* =============================================================================
   BOTÕES DA ABERTURA (.hero .cta): "Solicitar uma proposta" (principal) e
   "Ver a plataforma" (leva à versão alfa)
   ========================================================================== */
.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
  opacity: 0;
  animation: fd 1s 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero .hb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.hero .hb.p {
  background: #00d462;
  color: #141914;
}
.hero .hb.s {
  color: #ebffee;
  border: 1px solid rgba(235, 255, 238, 0.45);
}
.hero .hb:hover {
  transform: translateY(-1px);
}
.hero .hb.s:hover {
  border-color: #ebffee;
  background: rgba(235, 255, 238, 0.08);
}
.hero .cta + .cred {
  margin-top: 30px;
}
@media (max-width: 1023.98px) {
  .hero .cta {
    margin-top: 22px;
    gap: 10px;
  }
  .hero .hb {
    padding: 13px 20px;
    font-size: 15px;
  }
  .hero .cta + .cred {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .hero .hb {
    flex: 1 1 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}