/* =============================================================================
   ALUMIHAUS v3 — alumihaus.css
   Estrutura da Typografiya (grade em terços na largura da janela, margem 80/40/20,
   calha 40/20, ar de 200 entre seções, cabeçalho que some ao descer, rodapé-colofão),
   pele da Alumihaus (branco, Helvetica Neue LT Pro em dois pesos, título bold em
   caixa alta com ponto, verde #17DB7F). As seções seguem o desenho do Gabriel
   (textos/home/PAGINA_HOME.png, 2026-09-17).

   Uma fonte só: Helvetica Neue LT Pro (Adobe Fonts). Nenhuma outra, nunca.
   Movimento: transform e opacity, só. Uma curva de entrada, uma de saída.
   ========================================================================== */

/* 0. Tokens ---------------------------------------------------------------- */
:root {
  --chao:        #FFFFFF;
  --tinta:       #000000;
  --cinza:       #666B70;   /* texto secundário: 5,38:1 sobre branco */
  --cinza-claro: #B1B1B1;   /* hover de menu e link, como na referência */
  --superficie:  #F2F3F4;   /* rodapé */
  --verde:       #17DB7F;   /* lâmina da esquadria e números da metodologia */
  --vermelho:    #EE1D48;   /* erro do formulário de contato */
  --linha:       #000000;   /* as linhas da metodologia */

  --fonte: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* tipo (mobile primeiro; os degraus vêm nas media queries) */
  --t-heroi: 40px;  --lh-heroi: 42px;
  --t-titulo: 24px; --lh-titulo: 30px;
  --t-corpo: 16px;  --lh-corpo: 26px;
  --t-menor: 15px;  --lh-menor: 24px;
  --t-menu: 12px;   --lh-menu: 16px;
  --t-numero: 88px;
  --medida: 34em;                       /* teto do parágrafo */

  /* grade */
  --margem: 20px;
  --calha: 20px;

  /* ritmo vertical */
  --secao: 80px;
  --titulo-texto: 40px;
  --paragrafo: 1em;
  --cabecalho: 56px;

  /* movimento */
  --entrada: cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out forte */
  --dentro:  cubic-bezier(0.77, 0, 0.175, 1);       /* ease-in-out forte */
  --fade:    cubic-bezier(0.645, 0.045, 0.355, 1);  /* o fade da referência */
}
@media (min-width: 576px) {
  :root { --margem: 40px; --t-heroi: 48px; --lh-heroi: 50px; }
}
@media (min-width: 768px) {
  :root {
    --calha: 40px;
    --t-titulo: 28px; --lh-titulo: 34px;
    --t-corpo: 17px;  --lh-corpo: 28px;
    --t-heroi: 56px;  --lh-heroi: 58px;
    --t-numero: 104px;
    --secao: 120px;
    --cabecalho: 80px;
  }
}
@media (min-width: 992px) {
  :root {
    --margem: 80px;
    --t-menu: 13px; --lh-menu: 18px;
    --t-heroi: 64px; --lh-heroi: 66px;
    --secao: 160px;
    --cabecalho: 96px;
  }
}
@media (min-width: 1400px) {
  :root {
    --t-titulo: 32px; --lh-titulo: 38px;
    --t-heroi: 72px;  --lh-heroi: 74px;
    --t-menor: 16px;  --lh-menor: 26px;
    --t-numero: 128px;
    --secao: 200px;
    --cabecalho: 112px;
  }
}
@media (min-width: 1800px) {
  :root {
    --t-heroi: 84px; --lh-heroi: 86px;
    --t-corpo: 18px; --lh-corpo: 30px;
    --t-menor: 17px; --lh-menor: 28px;
    --t-menu: 14px;  --lh-menu: 20px;
  }
}
/* janelas muito largas (2560–3000 CSS px, o monitor do Gabriel): tudo sobe um degrau */
@media (min-width: 2400px) {
  :root {
    --t-heroi: 104px; --lh-heroi: 106px;
    --t-titulo: 44px; --lh-titulo: 50px;
    --t-corpo: 23px;  --lh-corpo: 34px;
    --t-menor: 21px;  --lh-menor: 32px;
    --t-menu: 17px;   --lh-menu: 24px;
    --t-numero: 190px;
    --secao: 240px;
    --cabecalho: 128px;
  }
}

/* 1. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--cabecalho);
  background: var(--chao);
  /* 🔁 2026-09-29: sem a barra de rolagem à direita, a pedido do Gabriel. A
     página continua rolando por roda, toque e teclado */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }
/* o que o Lenis pede (lenis.css), para a rolagem suave do alumihaus.js § 0 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* o lenis.css também tira o clique dos iframes; aqui não — o Contato e a
   Política têm iframes que precisam continuar clicáveis */
body {
  margin: 0;
  font-family: var(--fonte);
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--tinta);
  background: var(--chao);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--verde); color: var(--tinta); }

.pular {
  position: absolute; left: var(--margem); top: -100px; z-index: 100;
  padding: 8px 12px; background: var(--tinta); color: var(--chao);
}
.pular:focus { top: 8px; }

/* 2. Grade e tipos --------------------------------------------------------- */
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--calha);
  row-gap: var(--titulo-texto);
  padding-left: var(--margem);
  padding-right: var(--margem);
}
@media (min-width: 768px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .c1 { grid-column: 1; }
  .c2 { grid-column: 2; }
  .c3 { grid-column: 3; }
}

.titulo {
  font-weight: 700;
  font-size: var(--t-titulo);
  line-height: var(--lh-titulo);
  text-transform: uppercase;
  letter-spacing: 0;
  max-width: 14em;
}
.texto { max-width: var(--medida); }
.texto p + p { margin-top: var(--paragrafo); }

.rotulo {
  font-size: var(--t-menu);
  line-height: var(--lh-menu);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 20px;
}

/* a ação: link sublinhado de 1 px, encostado na margem direita a partir de 992 */
.acao { font-size: var(--t-menor); line-height: var(--lh-menor); }
.acao a, .texto-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .acao a:hover, .texto-link:hover { color: var(--cinza-claro); }
}
@media (min-width: 992px) { .acao { text-align: right; align-self: start; } }

/* 3. Cabeçalho ------------------------------------------------------------- */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--cabecalho);
  background: var(--chao);
  color: var(--tinta);
  transform: translateY(0);
  transition: transform 0.6s var(--dentro), background-color 0.4s ease, color 0.4s ease;
}
.cabecalho--oculto { transform: translateY(-100%); }
.cabecalho[data-sobre-foto] { background: transparent; color: var(--chao); }
.cabecalho__grade { height: 100%; align-items: center; row-gap: 0; }
.cabecalho__marca { display: flex; align-items: center; height: 100%; }
.cabecalho__marca svg { height: 12px; width: auto; fill: currentColor; }
@media (min-width: 992px) { .cabecalho__marca svg { height: 13px; } }
@media (min-width: 1400px) { .cabecalho__marca svg { height: 14px; } }
@media (min-width: 2400px) { .cabecalho__marca svg { height: 18px; } }

.cabecalho__nav, .cabecalho__contato { display: none; }
.cabecalho__link, .cabecalho__contato {
  font-size: var(--t-menu); line-height: var(--lh-menu);
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cabecalho__link:hover, .cabecalho__contato:hover { color: var(--cinza-claro); }
}
@media (min-width: 992px) {
  .cabecalho__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecalho__nav { display: block; grid-column: 2 / 4; }
  .cabecalho__lista { display: flex; flex-wrap: nowrap; column-gap: 40px; white-space: nowrap; }
  .cabecalho__contato { display: block; position: absolute; right: var(--margem); top: 50%; transform: translateY(-50%); }
}
@media (min-width: 1400px) { .cabecalho__lista { column-gap: 56px; } }
@media (min-width: 1800px) { .cabecalho__lista { column-gap: 72px; } }
@media (min-width: 2400px) { .cabecalho__lista { column-gap: 96px; } }

/* hambúrguer de duas linhas (< 992) */
.hamburguer {
  position: absolute; right: calc(var(--margem) - 12px); top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; place-items: center;
}
.hamburguer span {
  grid-area: 1 / 1; display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--entrada);
}
.hamburguer span:first-child { transform: translateY(-4px); }
.hamburguer span:last-child  { transform: translateY(4px); }
.hamburguer[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.hamburguer[aria-expanded="true"] span:last-child  { transform: rotate(-45deg); }
/* a partir de 992 quem vale é o menu na barra: o hambúrguer sai. A regra vive
   aqui, e não no bloco de ≥ 992 acima, porque as declarações de .hamburguer
   vêm depois dele e têm a mesma especificidade — lá, o display: grid ganhava e
   o botão ficava por cima de "Contato". */
@media (min-width: 992px) { .hamburguer { display: none; } }

.menu {
  position: fixed; inset: var(--cabecalho) 0 0 0; z-index: 40;
  background: var(--chao); color: var(--tinta);
  padding: 40px var(--margem);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s var(--entrada), visibility 0s linear 0.25s;
}
.menu[data-aberto="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__lista a {
  display: block; padding: 12px 0;
  font-weight: 700; font-size: 28px; line-height: 34px; text-transform: uppercase;
}
.menu__nota { color: var(--cinza); font-size: var(--t-menor); line-height: var(--lh-menor); }
body[data-menu="aberto"] { overflow: hidden; }
body[data-menu="aberto"] .cabecalho { background: var(--chao); color: var(--tinta); }
@media (min-width: 992px) { .menu { display: none; } }

/* 4. Hero ------------------------------------------------------------------ */
.heroi {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  color: var(--chao);
  background: #17191c;
  overflow: hidden;
  isolation: isolate;
}
.heroi__fotos { position: absolute; inset: 0; z-index: -1; }
.heroi__foto {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.9s var(--fade), transform 1.6s var(--entrada);
  will-change: opacity, transform;
}
.heroi__foto[data-ativa] { opacity: 1; transform: none; }
.heroi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* leve escurecimento para o texto branco, sem afogar a foto */
.heroi__fotos::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%);
  pointer-events: none;
}

.heroi__grade {
  flex: 1 1 auto;
  padding-top: calc(var(--cabecalho) + 32px);
  padding-bottom: 32px;
  row-gap: 48px;
  align-content: space-between;
}
.heroi__texto {
  max-width: var(--medida);
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
}
.heroi__paragrafos p + p { margin-top: var(--paragrafo); }


.heroi__titulo {
  font-weight: 700;
  font-size: var(--t-heroi); line-height: var(--lh-heroi);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  align-self: end;
}
.heroi__titulo .linha { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.heroi__titulo .linha > span { display: block; transition: transform 0.9s var(--entrada), opacity 0.6s ease; }

@media (min-width: 768px) {
  .heroi__grade { padding-top: calc(var(--cabecalho) + 40px); padding-bottom: 40px; }
  .heroi__texto { grid-column: 2; }
  .heroi__titulo { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .heroi__grade { padding-bottom: 44px; grid-template-rows: 1fr auto; }
  .heroi__texto {
    grid-column: 2 / 4; grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: var(--medida);
    align-self: center;
    padding-top: 0;
  }
  .heroi__titulo { grid-column: 1 / 4; grid-row: 2; }
}

/* a entrada da página — só com JavaScript e só uma vez */
html[data-js]:not([data-pronto]) .heroi__foto[data-ativa] { opacity: 0; transform: scale(1.08); }
html[data-js]:not([data-pronto]) .cabecalho,
html[data-js]:not([data-pronto]) .heroi__paragrafos { opacity: 0; }
html[data-js]:not([data-pronto]) .heroi__titulo .linha > span { transform: translateY(105%); }
html[data-pronto] .heroi__foto[data-ativa] { transition: opacity 1.2s var(--fade), transform 2.4s var(--entrada); }
html[data-pronto] .cabecalho { transition: transform 0.6s var(--dentro), background-color 0.4s ease, color 0.4s ease, opacity 0.8s ease 0.7s; }
html[data-pronto] .heroi__paragrafos { transition: opacity 0.9s ease 0.9s; }
html[data-pronto] .heroi__titulo .linha:nth-child(1) > span { transition: transform 1.1s var(--entrada) 0.45s; }
html[data-pronto] .heroi__titulo .linha:nth-child(2) > span { transition: transform 1.1s var(--entrada) 0.58s; }

/* 5. A esquadria — lâmina verde com a peça em 3D ---------------------------- */
.esquadria {
  background: var(--verde);
  color: var(--chao);
  overflow-x: clip;               /* a sangria da tela da peça não abre scroll lateral */
}
.esquadria__fixo { padding: 60px 0; }
.esquadria__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--calha);
  row-gap: 40px;
  padding: 0 var(--margem);
}
.esquadria__titulo { color: var(--chao); }
.esquadria__peca {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  margin: 0 auto;
}
.esquadria__peca[data-estado="sem-webgl"] { display: none; }
/* a tela sangra além da caixa do desenho: a peça girando com o mouse e as ferragens
   em voo têm onde caber sem cortar. A caixa continua sendo o quadro do desenho;
   a tela é transparente e não recebe clique. No celular só sangra na vertical — na
   horizontal sairia da tela; ali o peca-3d.js afasta a câmera quanto precisar */
.esquadria__tela {
  position: absolute; inset: -20% 0;
  width: 100%; height: 140%; max-width: none;
  pointer-events: none;
}
@media (min-width: 768px) {
  .esquadria__tela { inset: -30% -35%; width: 170%; height: 160%; }
}
.esquadria__texto { max-width: var(--medida); }
.esquadria__texto p + p { margin-top: var(--paragrafo); }
.esquadria__acao a { border-color: rgba(255,255,255,.7); }
@media (hover: hover) and (pointer: fine) { .esquadria__acao a:hover { color: rgba(255,255,255,.7); } }

@media (min-width: 768px) {
  .esquadria__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esquadria__titulo { grid-column: 1 / -1; }
  .esquadria__peca { grid-column: 1; align-self: start; position: sticky; top: calc(var(--cabecalho) + 20px); }
  .esquadria__texto { grid-column: 2; }
  .esquadria__acao { grid-column: 2; }
}
@media (min-width: 992px) {
  /* a lâmina fica presa na tela enquanto a peça se monta: a seção é alta, o
     conteúdo é sticky. 400vh → 300vh de percurso para o scroll comandar a montagem.
     2026-09-29: eram 260vh; a peça se montava rápido demais */
  .esquadria { height: 400vh; }
  .esquadria__fixo {
    position: sticky; top: 0;
    min-height: 100vh;
    padding: calc(var(--cabecalho) + 40px) 0 56px;
    display: flex; flex-direction: column;
  }
  .esquadria__grade {
    flex: 1 1 auto;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    row-gap: 24px;
  }
  .esquadria__titulo { grid-column: 1 / 7; grid-row: 1; }
  .esquadria__peca {
    grid-column: 2 / 8; grid-row: 2;
    position: relative; align-self: center;   /* referência da tela com sangria */
    aspect-ratio: auto; height: 100%; max-height: min(62vh, 640px); width: 100%;
  }
  .esquadria__texto { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; padding-top: 2px; }
  .esquadria__acao { grid-column: 8 / 13; grid-row: 3; text-align: right; }
}

/* 6. Metodologia ----------------------------------------------------------- */
.metodo { padding-top: var(--secao); }
.metodo__cabeca { align-items: start; row-gap: 20px; margin-bottom: 48px; }
.etapas {
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.etapa {
  display: flex; flex-direction: column; justify-content: space-between; row-gap: 48px;
  padding: 28px var(--margem) 36px;
  border-bottom: 1px solid var(--linha);
}
.etapa__texto { max-width: var(--medida); }
.etapa__numero {
  display: block;
  font-weight: 400;
  font-size: var(--t-numero); line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--verde);
  margin-left: -0.04em;
}
.etapa__titulo {
  font-weight: 700; font-size: var(--t-titulo); line-height: var(--lh-titulo);
  text-transform: uppercase; margin-top: 12px; max-width: 12em;
}
/* 🔁 2026-09-29 — a coluna deixou de ser estática, a pedido do Gabriel (ref.
   de colunas com a peça em raio-x). Cada etapa leva uma peça do catálogo
   técnico Chroma em perspectiva, desenhada em traço verde; o traço se desenha
   quando a coluna entra na tela. Com o mouse em cima, o verde desce de cima
   para baixo e cobre a coluna inteira; texto, número e traço viram branco.
   Só transform no verde (scaleY), só cor no resto. */
.etapa { position: relative; isolation: isolate; overflow: hidden; }
.etapa::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--verde);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 0.4s var(--entrada);
}
.etapa__texto, .etapa__numero, .etapa__titulo, .etapa__desenho { transition: color 0.3s ease; }
.etapa__texto, .etapa__pe { position: relative; z-index: 1; }   /* o desenho passa por baixo do texto */
.etapa__desenho {
  flex: 1 1 auto; min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  color: var(--verde);
  pointer-events: none;
}
.etapa__desenho svg {
  display: block; width: 100%; height: 100%; max-height: 420px;
  overflow: visible;
  /* as quatro peças ocupam a mesma área na coluna, não a mesma largura:
     --escala vem do alumihaus.js § 5b; sem JS, cada uma cabe inteira */
  transform: scale(var(--escala, 1));
}
.etapa__desenho svg * {
  fill: none; stroke: currentColor; stroke-width: 1.1px;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* com o traço tracejado para a animação, o Chrome mede o tracejado na tela se
   o traço for "non-scaling" e o desenho vira pontilhado. Com JS, a espessura
   vem em unidades do desenho (--traco, calculado no alumihaus.js § 5b) */
html[data-js] .etapa__desenho svg[style] * { vector-effect: none; stroke-width: var(--traco); }
/* o traço se desenha na entrada: cada path tem pathLength="1" */
html[data-js] .etapa[data-revelar] .etapa__desenho [pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
html[data-js] .etapa[data-revelar].visivel .etapa__desenho [pathLength] { stroke-dashoffset: 0; }
@media (hover: hover) {
  .etapa:hover::before { transform: scaleY(1); transition-duration: 0.6s; }
  .etapa:hover .etapa__texto,
  .etapa:hover .etapa__numero,
  .etapa:hover .etapa__titulo,
  .etapa:hover .etapa__desenho { color: var(--chao); }
  .etapa:hover .etapa__texto,
  .etapa:hover .etapa__numero,
  .etapa:hover .etapa__titulo,
  .etapa:hover .etapa__desenho { transition-delay: 0.12s; }
}
@media (min-width: 768px) {
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapa { padding: 28px var(--calha) 40px; min-height: 480px; }
  .etapa:nth-child(even) { border-left: 1px solid var(--linha); }
  .etapa:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
  .etapa:nth-child(n+3) { border-bottom: 0; }
}
/* em duas colunas, a coluna da ponta encosta na margem da página; a regra vale
   só aqui — em quatro colunas (≥ 1200) quem encosta é a primeira e a última, e
   ímpar/par deixaria a calha do meio com 160 px contra 96 px das outras */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .etapa:nth-child(odd)  { padding-left: var(--margem); }
  .etapa:nth-child(even) { padding-right: var(--margem); }
}
@media (min-width: 992px) {
  .metodo__cabeca { margin-bottom: 56px; }
}
/* quatro colunas só a partir de 1200: em 992–1199 a coluna teria ~240 px, onde
   "ACOMPANHAMENTO" não cabe e a página vazava 28 px para o lado. Até 1199 as
   etapas ficam em 2 × 2, como em 768. */
@media (min-width: 1200px) {
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etapa { padding: 28px 32px 40px; min-height: 520px; border-bottom: 0 !important; }
  .etapa:first-child { padding-left: var(--margem); }
  .etapa:last-child  { padding-right: var(--margem); }
  .etapa + .etapa { border-left: 1px solid var(--linha); }
  .etapa__titulo { font-size: 24px; line-height: 30px; }
}
@media (min-width: 1400px) {
  .etapa { padding: 32px 40px 48px; min-height: 560px; }
  .etapa__titulo { font-size: 28px; line-height: 34px; }
}
@media (min-width: 2400px) {
  .etapa { padding: 40px 48px 56px; min-height: 720px; }
  .etapa__titulo { font-size: 36px; line-height: 42px; }
}

/* revelação suave dos blocos — só opacidade e 8 px */
[data-revelar] { opacity: 0; transform: translateY(8px); transition: opacity 0.7s ease, transform 0.7s var(--entrada); }
[data-revelar].visivel { opacity: 1; transform: none; }
.etapa:nth-child(2)[data-revelar] { transition-delay: 0.06s; }
.etapa:nth-child(3)[data-revelar] { transition-delay: 0.12s; }
.etapa:nth-child(4)[data-revelar] { transition-delay: 0.18s; }

/* 7. Sobre ------------------------------------------------------------------ */
.sobre { padding-top: var(--secao); }
.sobre__foto {
  margin: 64px calc(var(--margem) / 2) 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
@media (min-width: 768px) { .sobre__foto { aspect-ratio: 2 / 1; margin-top: 80px; } }
@media (min-width: 992px) {
  .sobre__texto { grid-column: 2; }
  .sobre__foto { aspect-ratio: 2 / 1; margin-top: 100px; }
}

/* o fade único das imagens ao entrar na tela (a referência) */
[data-fade] { opacity: 0; transition: opacity 1s var(--fade) 0.4s; }
[data-fade].visivel { opacity: 1; }

/* 8. Envie o seu projeto ---------------------------------------------------- */
.envie { padding: var(--secao) 0; }
.envie__contatos li + li { margin-top: 8px; }
.envie__contatos a { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .envie__contatos a:hover { color: var(--cinza-claro); } }
@media (min-width: 992px) { .envie__contatos { text-align: right; } }

/* 9. Rodapé ----------------------------------------------------------------- */
.rodape {
  background: var(--superficie);
  padding: 60px 0 40px;
  font-size: var(--t-menor); line-height: var(--lh-menor);
}
.rodape__grade { row-gap: 40px; }
.rodape__colofao p + p { margin-top: 0; }
.rodape a { transition: color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .rodape a:hover { color: var(--cinza-claro); } }
.rodape__legal {
  margin-top: 60px;
  row-gap: 4px;
  color: var(--cinza);
  font-size: var(--t-menu); line-height: var(--lh-menu);
  letter-spacing: 0.06em; text-transform: uppercase;
}
@media (min-width: 992px) {
  .rodape { padding: 120px 0 40px; }
  .rodape__legal { margin-top: 120px; }
  .rodape__legal .c3 { text-align: right; }
}

/* 10. Página interna no padrão /philosophy da referência --------------------
   Medido em typografiya.com/philosophy na janela do Gabriel (2951 × 1526 CSS px):
   · main  padding-top 320 (cabeçalho + ar), padding-bottom 200
   · abertura  título na coluna 1, parágrafo na coluna 2, coluna 3 vazia
   · faixa  foto 3:2 na largura inteira da janela, a 200 da abertura
   · bloco  margin-top 200; título col 1, texto col 2, ação col 3;
            foto a 100 do texto, 66,67 % da janela, quadrada, sangrando até a
            borda, calha de 40 do lado de dentro. Alterna esquerda / direita.
   Aqui os 200/100 viram --secao e --secao/2, que já escalam com a janela.  */
.pagina { padding-top: calc(var(--cabecalho) + var(--secao)); }

/* a faixa de foto na largura da janela (o slider da referência, sem slider) */
.faixa { margin-top: var(--secao); }
.faixa img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* o bloco: cabeça em três colunas, foto de 2/3 sangrando abaixo */
.bloco { margin-top: var(--secao); }
.bloco__foto { margin-top: calc(var(--secao) / 2); }
.bloco__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 992px) {
  .bloco__foto { width: 66.6667%; padding-right: var(--calha); }
  .bloco__foto img { aspect-ratio: 1 / 1; }
  .bloco--direita .bloco__foto {
    margin-left: 33.3333%;
    padding-right: 0;
    padding-left: var(--calha);
  }
}

/* 11. Movimento reduzido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  html[data-js]:not([data-pronto]) .heroi__foto[data-ativa],
  html[data-js]:not([data-pronto]) .cabecalho,
  html[data-js]:not([data-pronto]) .heroi__paragrafos { opacity: 1; transform: none; }
  html[data-js]:not([data-pronto]) .heroi__titulo .linha > span { transform: none; }
  [data-revelar], [data-fade] { opacity: 1; transform: none; }
  html[data-js] .etapa[data-revelar] .etapa__desenho [pathLength] { stroke-dashoffset: 0; }
  .esquadria, html .p-home .esquadria { height: auto; }
  .esquadria__fixo, html .p-home .esquadria__fixo { position: static; }
}

/* 12. Sobre nós — o desenho do Gabriel (textos/sobre-nos/PAGINA_SOBRE.png) ---
   Desenho de 3812 px de largura, conferido na janela dele (2951 CSS px). A
   grade, o cabeçalho e o rodapé continuam os do site (margem 80, calha 40);
   do desenho vem o resto, em proporção da janela:
   · corpo 20,8 / 25 px no desenho → 0,546vw / 1,2 (16 px a 2951)
   · título 50 / 59 px, peso 500 → 1,323vw / 1,17 (39 px a 2951)
   · texto com 951 px de largura → 25vw
   · faixa 3812 × 1384; galeria: ativa 1728 × 1229 a 1643 da borda, com barra
     verde de 25; as outras 561 × 654, calha 36; equipe 875 × 1131, calha 36,
     a primeira começando a −462
   · ferragem CHRC-450: 957 de largura, a 2587 da borda e 94 abaixo do topo do
     texto de "O que mudou", atravessando até "A equipe"
   Os intervalos verticais viram múltiplos de --secao (240 a 2951).          */
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* 🔁 2026-09-25: o que era só da Sobre nós virou o padrão do site inteiro, a
   pedido do Gabriel — corpo, título, peso 500, coluna de texto de 25vw e a
   ação no tamanho do corpo. A home segue estes valores (§ 13). */
.titulo, .heroi__titulo, .etapa__titulo { font-weight: 500; }
@media (max-width: 991.98px) { .q { display: none; } }
@media (min-width: 992px) {
  .titulo { max-width: none; }
  .p-sobre .pagina { padding-top: calc(var(--cabecalho) + var(--secao) * 0.83); }
}
@media (min-width: 1800px) {
  :root {
    --t-corpo: max(15px, 0.546vw);  --lh-corpo: 1.21;
    --t-titulo: max(32px, 1.323vw); --lh-titulo: 1.17;
  }
  .texto { max-width: 25vw; }
  .acao { font-size: var(--t-corpo); line-height: var(--lh-corpo); }
}

/* a faixa: o disco da serra, no recorte do desenho */
.faixa--serra img { aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .faixa--serra img { aspect-ratio: 3812 / 1384; } }

/* antes × depois */
.reforma {
  margin-top: var(--secao);
  /* frações da largura da janela, lidas pelo sobre.js */
  --g-x: 0.0533; --g-W: 0.8;    --g-H: 0.569;
  --g-w: 0.32;   --g-h: 0.373;  --g-calha: 0.027; --g-barra: 0.008;
  --g-tempo: 5s;
}
@media (min-width: 768px) {
  .reforma {
    --g-x: 0.052; --g-W: 0.6;   --g-H: 0.427;
    --g-w: 0.25;  --g-h: 0.291; --g-calha: 0.015; --g-barra: 0.006;
  }
}
@media (min-width: 992px) {
  .reforma {
    --g-x: 0.4310; --g-W: 0.4533; --g-H: 0.3224;
    --g-w: 0.1472; --g-h: 0.1716; --g-calha: 0.00944; --g-barra: 0.00656;
  }
}
.reforma__rotulo {
  font-weight: 500;
  font-size: var(--t-menu); line-height: 1.2;
  text-transform: uppercase;
}
@media (min-width: 1800px) { .reforma__rotulo { font-size: max(14px, 0.63vw); } }
.reforma__janela { margin-top: 40px; overflow: hidden; }
@media (min-width: 992px) { .reforma__janela { margin-top: calc(var(--secao) * 0.42); } }

/* sem JavaScript: as cinco lado a lado, rolando */
.reforma__trilho {
  display: flex; column-gap: 12px;
  padding: 0 var(--margem);
  overflow-x: auto; scrollbar-width: none;
}
.reforma__trilho::-webkit-scrollbar { display: none; }
.reforma__slide { flex: 0 0 auto; width: 70vw; }
.reforma__botao {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: #e9eaeb; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reforma__botao img { width: 100%; height: 100%; object-fit: cover; }
.reforma__barra { display: block; height: 6px; background: transparent; overflow: hidden; }
.reforma__barra span {
  display: block; width: 100%; height: 100%;
  background: var(--verde);
  transform: scaleX(0); transform-origin: left center;
}

/* com JavaScript: posições absolutas, a ativa cresce */
.reforma--js .reforma__trilho {
  display: block; position: relative; overflow: visible; padding: 0;
  touch-action: pan-y;
}
.reforma--js .reforma__slide {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column;
  transition:
    transform 0.9s var(--dentro),
    width 0.9s var(--dentro),
    height 0.9s var(--dentro);
}
.reforma--js .reforma__slide[data-salto] { transition: none; }
.reforma--js .reforma__botao { flex: 1 1 auto; min-height: 0; }
.reforma--js .reforma__barra { flex: 0 0 auto; height: var(--barra, 6px); opacity: 0; transition: opacity 0.4s ease; }
.reforma--js .reforma__slide[data-ativa] .reforma__barra { opacity: 1; }
.reforma--js .reforma__slide[data-ativa] .reforma__botao { cursor: default; }
.reforma__slide[data-ativa][data-correndo] .reforma__barra span {
  animation: reforma-barra var(--g-tempo) linear forwards;
}
/* mais específica que a regra acima: o atalho `animation` zeraria a pausa */
.reforma[data-pausado] .reforma__slide[data-ativa][data-correndo] .reforma__barra span { animation-play-state: paused; }
.reforma--parado .reforma__slide[data-ativa] .reforma__barra span { transform: none; }
@keyframes reforma-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .reforma--js .reforma__slide:not([data-ativa]) .reforma__botao img { transition: opacity 0.3s ease; }
  .reforma--js .reforma__slide:not([data-ativa]) .reforma__botao:hover img { opacity: 0.85; }
}

/* o que mudou + a equipe, com a ferragem atravessando na coluna 3 */
.compromisso { margin-top: var(--secao); }
.compromisso .bloco { margin-top: 0; }
.compromisso__equipe { margin-top: var(--secao) !important; }
.compromisso__desenho {
  margin: var(--secao) auto 0;
  padding: 0 var(--margem);
  max-width: 560px;
}
.compromisso__desenho img { width: 100%; height: auto; }
/* a ferragem em 3D (ferragem-3d.js): a imagem continua dando o quadro e o
   tamanho, invisível; a tela sangra além dela para a peça girar com o mouse sem
   cortar. No celular só sangra na vertical — na horizontal sairia da página */
.compromisso__desenho { position: relative; }
.compromisso__tela {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%; max-width: none;
  pointer-events: none;
  opacity: 0;
}
.compromisso__desenho[data-estado="pronto"] img { opacity: 0; }
.compromisso__desenho[data-estado="pronto"] .compromisso__tela { opacity: 1; }
@media (min-width: 992px) {
  .compromisso__tela { left: -10%; width: 120%; }
}
@media (min-width: 992px) {
  .compromisso { position: relative; }
  .compromisso__equipe { margin-top: calc(var(--secao) * 1.7) !important; }
  .compromisso__desenho {
    position: absolute; top: 2.47vw; left: 67.86%;
    width: 25.1%; max-width: none;
    margin: 0; padding: 0;
  }
}

/* a equipe: faixa que sangra dos dois lados */
.equipe { margin-top: var(--secao); }
@media (min-width: 992px) { .equipe { margin-top: calc(var(--secao) * 0.7); } }
.equipe__janela {
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.equipe__janela::-webkit-scrollbar { display: none; }
.equipe__janela:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.equipe__faixa {
  display: flex; column-gap: 12px;
  width: max-content;
  padding: 0 var(--margem);
}
.equipe__pessoa { flex: 0 0 auto; width: 64vw; }
.equipe__foto { aspect-ratio: 875 / 1131; background: var(--verde); }
/* 🔁 2026-09-30: enquanto não há foto, o quadro verde não aparece — ficam nome e
   função. Quando a foto entrar (um <img> dentro do .equipe__foto), a regra deixa de
   valer sozinha. Desenho da troca para o v3, § 4.1 */
.equipe__foto:empty { display: none; }
.equipe__nome {
  display: flex; align-items: center; justify-content: center; column-gap: 10px;
  margin-top: 16px;
  font-weight: 500; font-size: 18px; line-height: 1.17;
  text-transform: uppercase; white-space: nowrap;
}
.equipe__nome::before {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px; background: var(--verde);
}
@media (min-width: 768px) { .equipe__pessoa { width: 40vw; } }
@media (min-width: 992px) {
  .equipe__faixa { column-gap: 0.944vw; padding: 0; }
  .equipe__pessoa { width: 22.95vw; }
  .equipe__nome {
    margin-top: calc(var(--secao) * 0.31);
    font-size: var(--t-titulo); column-gap: 0.7vw;
  }
  .equipe__nome::before { width: max(8px, 0.446vw); height: max(8px, 0.446vw); }
}
.equipe__janela[data-arrastando] { cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .equipe__janela { cursor: grab; } }

/* envie: título, texto e contatos na mesma linha; sublinhado verde — em todas as páginas */
.envie__contatos a { border-bottom-color: var(--verde); }
@media (min-width: 992px) {
  .envie { padding-top: calc(var(--secao) * 1.85); }
  .envie .grade { align-items: center; }
  .envie__contatos li + li { margin-top: 1.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .reforma__slide[data-ativa] .reforma__barra span { animation: none; transform: none; }
}

/* 13. Home — o desenho do Gabriel (textos/home/PAGINA_HOME.png) --------------
   Refeita em 2026-09-23 medindo o PNG por pixel (3812 px de largura = 100vw;
   1 px do desenho = 0,02623vw). A partir de 1200 a home segue o desenho em
   proporção da janela; abaixo disso vale o responsivo das seções 4 a 7.
   · texto corrido  34,6 / 43,5 px → 0,9077vw / 1,257    (26,8 px a 2951)
   · texto da hero  40,3 / 49 px → 1,057vw / 1,216     (31,2 px a 2951)
   · títulos        72,2 / 83 px, peso 500, tracking −28 → 1,894vw / 1,15
   · título da hero 136,6 / 155 px, peso 500, tracking −39 → 3,583vw / 1,135
   · números        347 px, peso 500, tracking −30, verde → 9,10vw
   (tamanho pela altura das maiúsculas no PNG; tracking pela largura da linha,
   comparada com a da fonte medida no navegador)
   · margem das seções 200 (esquerda) e 206 (direita); cabeçalho e título da
     hero a 163
   · hero sem escurecimento: a foto é o recorte exato do desenho (home-serra-*)
   · lâmina verde 1514 px de altura, a 46 px da hero — não fica mais presa na
     tela; a peça monta enquanto a lâmina atravessa a janela (peca-3d.js)
   · metodologia: linhas verdes de 2 px, colunas de 961, barra verde de 25 embaixo
   · cozinha: faixa de 3812 × 1514 sangrando, recortada do original
   🔁 2026-09-25: as regras desta seção valiam também para `.p-publico` (Para
   arquitetos e Para engenheiros). 🔁 2026-09-29: as duas páginas saíram do
   site, e com elas as portas da hero; o seletor voltou a ser só `.p-home`.
   `text-box: trim-both cap alphabetic` faz a caixa do texto começar na altura
   das maiúsculas e terminar na linha de base — as distâncias do desenho, que
   foram medidas assim, passam direto para o CSS.
   🔁 2026-09-25: a pedido do Gabriel, a home saiu da escala do PNG e passou à
   da Sobre nós (corpo 16 / título 39 a 2951, margem 80, grade de três colunas,
   intervalos em --secao). As medidas acima valem como histórico da composição;
   os tamanhos que valem são os do bloco ≥ 1200 abaixo.                     */

/* o menu fica no centro da janela — nos dois desenhos (home e sobre nós) */
@media (min-width: 992px) {
  .cabecalho__nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (min-width: 1800px) {
  .cabecalho__lista { column-gap: 3.5vw; }
  .cabecalho__marca svg { width: 7.08vw; height: auto; }   /* 270 px no desenho */
}

/* quebras de linha do desenho: só onde a composição é a dele */
@media (max-width: 1199.98px) { .p-home .q { display: none; } }

@media (min-width: 1200px) {
  /* 🔁 2026-09-25: a home deixou a escala do PAGINA_HOME.png e passou a seguir a
     Sobre nós — o padrão do site (§ 12). Texto e títulos são os tokens da raiz;
     margem, colunas e intervalos são os da grade (80 / calha 40 / --secao).
     O que não tem par na Sobre nós (título da hero, números) foi
     reduzido na mesma razão do desenho: ×0,7 nos títulos, ×0,6 no corpo. */
  .p-home {
    --h-heroi: max(44px, 2.508vw);           /* 3,583vw × 0,7 → 74 px a 2951 */
    --h-numero: max(104px, 6.37vw);          /* 9,10vw × 0,7 → 188 px */
    --h-linha: max(1px, 0.0525vw);           /* 2 */
    /* a coluna da grade de três, contada dentro de um bloco na largura da janela */
    --h-col: calc((100% - 2 * var(--margem) - 2 * var(--calha)) / 3);
  }

  .p-home .heroi__titulo,
  .p-home .etapa__titulo,
  .p-home .etapa__numero { font-weight: 500; max-width: none; }
  /* o título da etapa vive numa coluna de 1/4: até 1800 ele não pode ser o título cheio ("ACOMPANHAMENTO" não cabe) */
  .p-home .etapa__titulo { font-size: min(var(--t-titulo), 2vw); line-height: var(--lh-titulo); }
  .p-home .titulo,
  .p-home .heroi__paragrafos,
  .p-home .heroi__titulo,
  .p-home .esquadria__texto,
  .p-home .etapa__texto,
  .p-home .etapa__numero,
  .p-home .etapa__titulo,
  .p-home .sobre__texto { text-box: trim-both cap alphabetic; }
  /* as quebras do desenho da home foram feitas para o texto grande; nas
     colunas da grade elas partiriam a linha no meio */
  .p-home .heroi__paragrafos .q,
  .p-home .esquadria__texto .q { display: none; }

  /* hero ------------------------------------------------------------------ */
  .p-home .heroi { min-height: max(100svh, 44vw); }
  .p-home .heroi__fotos::after { display: none; }
  .p-home .heroi__foto[data-foto="home"] img { object-position: 50% 50%; }
  .p-home .heroi__grade { display: block; padding: 0; }
  .p-home .heroi__texto {
    position: absolute; top: 14.822vw;
    left: calc(var(--margem) + 2 * var(--h-col) + 2 * var(--calha));   /* coluna 3 */
    width: var(--h-col); max-width: var(--medida);
    font-size: var(--t-corpo); line-height: var(--lh-corpo);
  }
  .p-home .heroi__paragrafos p + p { margin-top: var(--paragrafo); }
  .p-home .heroi__titulo {
    position: absolute; left: var(--margem); bottom: 2.44vw;
    font-size: var(--h-heroi); line-height: 1.135; letter-spacing: 0;
  }
  .p-home .heroi__titulo .linha { padding-bottom: 0; margin-bottom: 0; }

  /* a esquadria — lâmina verde: título na coluna 1, peça na 2, texto na 3 ---- */
  /* a lâmina fica presa enquanto a peça se monta: a seção é a lâmina + 110vh de
     percurso. Quando a lâmina é mais alta que a janela, o sticky prende com a borda
     de baixo alinhada à da janela (top negativo), para o link não ficar escondido.
     2026-09-29: antes rolava com a página, e a montagem era rápida demais */
  .p-home .esquadria { height: calc(39.717vw + 110vh); margin-top: 1.207vw; }  /* 46 de branco */
  .p-home .esquadria__fixo {
    position: sticky; top: min(0px, calc(100vh - 39.717vw));
    min-height: 39.717vw;                                         /* 1514 */
    padding: 4.879vw 0 4.879vw;
    display: flex; flex-direction: column;
  }
  .p-home .esquadria__grade {
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: var(--calha); row-gap: 0; padding: 0 var(--margem);
  }
  .p-home .esquadria__titulo { grid-column: 1; grid-row: 1; max-width: 13em; }
  .p-home .esquadria__texto {
    grid-column: 3; grid-row: 1 / 3; align-self: start;
    margin: 0; padding: 0; max-width: var(--medida);
    font-size: var(--t-corpo); line-height: var(--lh-corpo);
  }
  .p-home .esquadria__texto p + p { margin-top: var(--paragrafo); }
  .p-home .esquadria__acao {
    grid-column: 3; grid-row: 3; justify-self: end; align-self: end;
    padding-top: 2vw;
  }
  .p-home .esquadria__peca {
    position: absolute; top: 7.739vw;
    left: calc(var(--margem) + var(--h-col) + var(--calha) + (var(--h-col) - 22.456vw) / 2);   /* centrada na coluna 2 */
    width: 22.456vw; height: 29.643vw; max-height: none;          /* 856 × 1130 */
    aspect-ratio: auto; margin: 0;
  }

  /* nossa metodologia ----------------------------------------------------- */
  .p-home .metodo { padding-top: var(--secao); }
  .p-home .metodo__cabeca {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 0 var(--margem);
    margin-bottom: calc(var(--secao) / 2);
  }
  .p-home .etapas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--h-linha) solid var(--verde);
    border-bottom: 0.656vw solid var(--verde);                     /* 25 */
  }
  .p-home .etapa,
  .p-home .etapa:first-child,
  .p-home .etapa:last-child {
    /* 🔁 2026-09-25: retângulo em pé, 2:3, a pedido do Gabriel — é a moldura da
       foto que vai se revelar ao passar o mouse. Texto no topo, número e título
       na base (o flex com space-between da § 6). */
    min-height: 0; aspect-ratio: 2 / 3;
    padding: 2.02vw max(20px, 1.36vw) 2.44vw max(var(--calha), 2.71vw);   /* 80 da divisória a 2951, como a página a 80 da borda; 40 nas janelas menores */
    border-left: var(--h-linha) solid var(--verde);
    row-gap: 3vw;
  }
  .p-home .etapa:first-child { border-left: 0; padding-left: var(--margem); }
  .p-home .etapa__texto { max-width: none; font-size: var(--t-corpo); line-height: var(--lh-corpo); }
  .p-home .etapa__numero { font-size: var(--h-numero); line-height: 1; margin-left: 0; letter-spacing: -0.03em; }
  .p-home .etapa__titulo { margin-top: 1.2vw; }
  /* o desenho ocupa o vão entre o texto e o número, na largura da coluna */
  .p-home .etapa__desenho { min-height: 0; }
  .p-home .etapa__desenho svg { max-height: none; max-width: 100%; }

  /* sobre: título / texto / ação na grade, faixa da cozinha abaixo ---------- */
  .p-home .sobre { padding-top: var(--secao); }
  .p-home .sobre__foto {
    margin: var(--secao) 0 0;
    aspect-ratio: 3812 / 1514;
  }
  .p-home .sobre__foto img { object-position: 50% 50%; }
}
/* a coluna de texto de 25vw vale a partir de 1800, como o .texto da Sobre nós */
@media (min-width: 1800px) {
  .p-home .heroi__texto,
  .p-home .esquadria__texto { max-width: 25vw; }
}


/* 13b, 14 e 15 — as portas da hero, Para arquitetos e Para engenheiros: saíram
   em 2026-09-29, com as duas páginas de público. Ficam no histórico do git. */

/* 16. Soluções (solucoes.html) — reescrita em 2026-09-25 a partir da 2ª versão do
   esqueleto (esqueletos/solucoes.svg, do desenho textos/solucoes/PAGINA_SISTEMAS.png);
   tudo escopado em .p-solucoes. Substitui a versão de linhas com lugar de 3D. */
/* =============================================================================
   Medidas do esqueleto, a 2951 (--secao 240, margem 80, calha 40, coluna 898):
   · abertura  a da Sobre nós: título col. 1, texto col. 2, a 199 do cabeçalho
               (--secao × 0,83); faixa 3812:1384 a --secao
   · decide    título col. 1 e texto col. 2 a --secao da faixa; a --secao/2, o
               desenho (col. 1, quadro 1:1) e a lista (col. 2), alinhados pelo
               topo. Item: número verde e título em 18,6 / 500, caixa alta, o
               título a 60 da borda do número; texto 16 a ~20 do título; 60
               entre itens; fio cinza de 1 px a 12 da borda, do pé de um número
               até ~30 do próximo
   · números   três colunas a --secao; rótulo 17 em caixa alta; número de 188
               (6,37vw, o da metodologia da home) a ~24 do rótulo; o 3º em verde
   · lâmina    verde, a --secao dos números; título col. 1 e texto col. 3 a 144
               do topo (--secao × 0,6); cartões a 120 (--secao/2) do título,
               898 × 988, calha entre eles, 144 de pé. No cartão: nome no
               tamanho do título a 60 da borda (2,03vw), número 17 no canto
               direito, desenho em linhas pretas; o painel branco (53 % do
               cartão) desce do topo ao apontar ou focar
   · envie     o componente padrão; a faixa da puncionadeira colada ao rodapé
   Até 991 tudo empilha. Cartões: uma coluna, duas a partir de 768, três a partir
   de 1400 — entre 992 e 1399 a coluna de 1/3 não comporta o parágrafo no painel.
   O painel só existe com mouse e a partir de 992; no celular, em telas sem
   hover e abaixo de 992, o parágrafo fica sempre abaixo do nome.
   ========================================================================== */

.p-solucoes {
  --s-nome: var(--t-corpo);            /* o nome pequeno em caixa alta: 18,6 a 2951 */
  --s-numero: var(--t-numero);         /* 88 / 104 / 128; a escala da home a partir de 1200 */
  --s-dentro: max(20px, 2.033vw);      /* 60 a 2951: o respiro dentro do cartão */
  --s-recuo: max(40px, 2.033vw);       /* 60 a 2951: do número ao título, na lista */
  --s-criterio: max(40px, 2.44vw);     /* 72 a 2951: o número de cada critério */
}
@media (min-width: 1200px) { .p-solucoes { --s-numero: max(104px, 6.37vw); } }   /* 188 a 2951 */
@media (min-width: 1800px) { .p-solucoes { --s-nome: max(14px, 0.63vw); } }

/* a abertura começa onde começa a da Sobre nós */
@media (min-width: 992px) {
  .p-solucoes .pagina { padding-top: calc(var(--cabecalho) + var(--secao) * 0.83); }
}

/* até 991, uma coluna só (a abertura segue a da Sobre nós) */
@media (max-width: 991.98px) {
  .p-solucoes :is(.decide__corpo, .numeros__grade, .sistemas__cabeca) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 1. As faixas: 3:2 no celular, o recorte da faixa da Sobre nós acima ------ */
.p-solucoes .faixa img { aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .p-solucoes .faixa img { aspect-ratio: 3812 / 1384; } }
.p-solucoes .faixa--perfis img { object-position: 50% 50%; }
.p-solucoes .faixa--puncionadeira img { object-position: 50% 50%; }
/* colada ao rodapé; o "Envie o seu projeto" já tem --secao de pé */
.p-solucoes .faixa--puncionadeira { margin-top: 0; }

/* 2. O que decide o sistema ------------------------------------------------- */
/* "a altura, pelo sistema." numa linha só; abaixo de 1400 a coluna é estreita
   demais e a quebra deixaria "folhas;" sozinho */
@media (max-width: 1399.98px) { .p-solucoes .decide__cabeca .q { display: none; } }
/* 🔁 2026-09-30: o parágrafo desce para baixo do título, na coluna 1, a pedido
   do Gabriel — preenche o branco sob o título; a coluna 2 fica só com a lista */
.p-solucoes .decide__apoio {
  margin-top: var(--titulo-texto);
  max-width: var(--medida);
}
@media (min-width: 992px) {
  .p-solucoes .decide__apoio { margin-top: max(24px, calc(var(--secao) / 6)); }
}
@media (min-width: 1800px) { .p-solucoes .decide__apoio { max-width: 23vw; } }
.p-solucoes .decide { margin-top: var(--secao); }
/* 🔁 2026-09-30: título, lista e ferragem numa linha só — o corpo não desce mais */
.p-solucoes .decide__corpo { align-items: start; }
/* 🔁 2026-09-30: a ferragem sai da coluna 1, onde ocupava a largura inteira, e
   vai para a coluna 3, como na Sobre nós: título na 1, texto e critérios na 2,
   desenho na 3 — no mesmo tamanho de lá (25,1 % da página) e em 3D pelo mesmo
   ferragem-3d.js. A imagem dá o quadro e o tamanho, invisível quando o 3D está
   pronto; a tela sangra além dela para a peça girar com o mouse sem cortar. */
.p-solucoes .decide__desenho {
  position: relative;
  margin: calc(var(--secao) / 2) auto 0;
  width: 100%; max-width: 560px;
}
.p-solucoes .decide__desenho img { width: 100%; height: auto; }
.p-solucoes .decide__tela {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%; max-width: none;
  pointer-events: none;
  opacity: 0;
}
.p-solucoes .decide__desenho[data-estado="pronto"] img { opacity: 0; }
.p-solucoes .decide__desenho[data-estado="pronto"] .decide__tela { opacity: 1; }
@media (min-width: 992px) {
  .p-solucoes .decide__desenho {
    grid-row: 1; justify-self: center;
    width: 81.9%; max-width: none;     /* 740 de 903 a 2951: o da Sobre nós */
    margin: 0;
  }
  .p-solucoes .decide__tela { left: -10%; width: 120%; }
}

/* 🔁 2026-09-30: o número de cada critério cresce (de 18,6 para 72 a 2951), a
   pedido do Gabriel, e ocupa a própria coluna, do título ao fim do texto; o fio
   cinza desce do pé dele ao próximo. */
.p-solucoes .criterio {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--s-criterio) * 1.2) minmax(0, 1fr);
  column-gap: var(--s-recuo);
  padding-bottom: calc(var(--secao) / 4);
}
.p-solucoes .criterio:last-child { padding-bottom: 0; }
.p-solucoes .criterio__titulo {
  font-weight: 500;
  font-size: var(--s-nome); line-height: 1.2;
  text-transform: uppercase;
}
.p-solucoes .criterio__numero {
  grid-column: 1; grid-row: 1 / span 2;
  font-weight: 500;
  font-size: var(--s-criterio); line-height: 1;
  color: var(--verde);
}
.p-solucoes .criterio__titulo { grid-column: 2; grid-row: 1; }
.p-solucoes .criterio__texto {
  grid-column: 2; grid-row: 2;
  margin-top: max(8px, calc(var(--secao) / 16));
  max-width: var(--medida);
}
/* o fio cinza que liga os números: do pé de um ao próximo */
.p-solucoes .criterio:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--s-criterio) * 0.6);
  top: calc(var(--s-criterio) + max(8px, calc(var(--secao) / 20)));
  bottom: max(8px, calc(var(--secao) / 12));
  border-left: 1px solid var(--cinza);
}
@media (min-width: 1800px) { .p-solucoes .criterio__texto { max-width: 23vw; } }

/* 3. Números ---------------------------------------------------------------- */
.p-solucoes .numeros { margin-top: var(--secao); }
.p-solucoes .numeros__grade { row-gap: calc(var(--secao) / 2); }
/* 🔁 2026-09-30: rótulo e número centralizados na coluna, a pedido do Gabriel */
.p-solucoes .numero { text-align: center; }
.p-solucoes .numero__rotulo {
  font-size: var(--t-menu); line-height: var(--lh-menu);
  letter-spacing: 0.08em; text-transform: uppercase;
  max-width: 18em;
  margin-inline: auto;
}
.p-solucoes .numero__valor {
  margin-top: max(12px, calc(var(--secao) / 10));
  font-weight: 500;
  font-size: var(--s-numero); line-height: 1;
  letter-spacing: -0.03em;
}
.p-solucoes .numero--verde .numero__valor { color: var(--verde); }

/* 4. A lâmina verde com os seis sistemas ------------------------------------ */
.p-solucoes .sistemas {
  margin-top: var(--secao);
  padding: calc(var(--secao) * 0.6) 0;
  background: var(--verde);
  color: var(--chao);
}
.p-solucoes .sistemas__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--calha);
  margin-top: calc(var(--secao) / 2);
  padding: 0 var(--margem);
}
@media (min-width: 768px)  { .p-solucoes .sistemas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .p-solucoes .sistemas__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* o cartão — sem painel: nome, parágrafo e desenho, um embaixo do outro */
.p-solucoes .sistema {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  padding: var(--s-dentro);
  background: var(--chao);
  color: var(--tinta);
  overflow: hidden;
}
.p-solucoes .sistema:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.p-solucoes .sistema__cabeca {
  display: flex; justify-content: space-between; align-items: flex-start;
  column-gap: 1em;
}
.p-solucoes .sistema__nome { max-width: none; }
.p-solucoes .sistema__numero {
  flex: 0 0 auto;
  font-size: var(--t-menu); line-height: var(--lh-menu);
}
.p-solucoes .sistema__cabeca--painel { display: none; }
.p-solucoes .sistema__texto { margin-top: calc(var(--titulo-texto) / 2); max-width: var(--medida); }
/* a imagem do sistema: render de cena-sistemas/, na proporção do cartão */
.p-solucoes .sistema__imagem {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 898 / 988;
  object-fit: cover;
  margin-top: var(--calha);
}

/* com mouse, a partir de 992: a imagem ocupa o cartão inteiro, nome e número por
   cima dela, e o painel branco desce do topo ao apontar, focar ou tocar */
@media (hover: hover) and (min-width: 992px) {
  .p-solucoes .sistema {
    display: block;
    aspect-ratio: 898 / 988;
    height: auto;
    padding: 0;
    cursor: default;
  }
  .p-solucoes .sistema__cabeca {
    position: absolute; z-index: 1; top: var(--s-dentro); left: var(--s-dentro); right: var(--s-dentro);
  }
  .p-solucoes .sistema__imagem {
    position: absolute; inset: 0; margin: 0;
    width: 100%; height: 100%;
  }
  .p-solucoes .sistema__painel {
    position: absolute; z-index: 1;
    inset: 0 0 auto 0;
    min-height: 53%;
    padding: var(--s-dentro);
    background: var(--chao);           /* 🔁 2026-09-30: branco, não mais preto (Gabriel) */
    color: var(--tinta);
    transform: translateY(-101%);
    transition: transform 0.45s var(--entrada);
  }
  .p-solucoes .sistema__cabeca--painel { display: flex; position: static; }
  /* 🔁 2026-09-30: sobre a imagem, nada; nome e número aparecem com o painel
     (Gabriel). O h3 continua na página, escondido só à vista: é ele que dá
     nome ao cartão para o leitor de tela */
  .p-solucoes .sistema__cabeca:not(.sistema__cabeca--painel) .sistema__nome {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .p-solucoes .sistema__cabeca:not(.sistema__cabeca--painel) .sistema__numero { display: none; }
  .p-solucoes .sistema__texto { margin-top: calc(var(--s-dentro) / 2); }
  .p-solucoes .sistema:is(:hover, :focus, :focus-within) .sistema__painel { transform: none; }
}
@media (hover: hover) and (min-width: 1800px) {
  .p-solucoes .sistema__texto { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p-solucoes .sistema__painel { transition: none; }
}

/* 🔁 2026-09-29: cada cartão leva à página do sistema (sistemas/<slug>.html). O
   link cobre o cartão inteiro; o painel desce ao apontar ou ao focar o link. */
.p-solucoes .sistema__link { position: absolute; inset: 0; z-index: 2; }
.p-solucoes .sistema__link:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
@media (hover: hover) and (min-width: 992px) { .p-solucoes .sistema { cursor: pointer; } }

/* 5. O corte na altura das maiúsculas, como nas outras páginas ------------- */
@media (min-width: 1200px) {
  .p-solucoes :is(.decide__cabeca, .sistemas__cabeca) :is(.titulo, .texto),
  .p-solucoes :is(.criterio__numero, .criterio__titulo, .criterio__texto),
  .p-solucoes :is(.numero__rotulo, .numero__valor) { text-box: trim-both cap alphabetic; }
  .p-solucoes .criterio__texto { margin-top: max(8px, calc(var(--secao) / 10)); }
  .p-solucoes .criterio { padding-bottom: calc(var(--secao) / 3); }
}

/* 17. Contato (contato.html) — escrita em 2026-09-25 a partir de esqueletos/contato.svg;
   tudo escopado em .p-contato. Veio de _parcial-contato.css, juntado aqui. */
/* =============================================================================
   ALUMIHAUS v3 — _parcial-contato.css
   Página Contato (contato.html), montada do esqueleto aprovado
   (esqueletos/contato.svg, 2951 px). Tudo escopado em body.p-contato; entra
   depois do alumihaus.css e usa os tokens dele.

   Medidas do esqueleto, a 2951:
   · abertura  a mesma da Sobre nós: título col. 1, texto col. 2, a 199 do
               cabeçalho (--secao × 0,83)
   · formulário  a --secao da abertura. Título col. 1; formulário na col. 2,
               com 738 de largura (25vw, a coluna de texto); "O que ter em mãos"
               na col. 3, alinhado pelo topo
   · campo     rótulo 18,6 / 500 / caixa alta (o rótulo pequeno da Sobre nós,
               .reforma__rotulo); a linha de 1 px a ~49 da linha de base do
               rótulo; 87 da linha até o próximo rótulo (--secao × 0,29)
   · opções    marcador quadrado de 8 px, o verde de .equipe__nome::before:
               cheio = marcado, contorno = não marcado; 10 do marcador ao texto;
               40 entre opções (a calha)
   · Enviar    18,6 / 500 / caixa alta, sublinhado verde, à direita da coluna
   · lista     "O que ter em mãos": fios de 1 px, 52 por item, sem numeração
   · onde      a --secao do formulário; ficha a 89 do título (--secao × 0,37);
               linhas de 90 com fio de 1 px, de margem a margem: rótulo col. 1,
               dado col. 2, ação col. 3 à direita, sublinhado verde
   · faixa     gaxetas, 3812:1384 (como a da serra), a --secao da ficha,
               colada ao rodapé
   Sem o bloco "Envie o seu projeto": a página já é ele.

   Os estados vêm do <script> inline do contato.html (não mexer nele):
   .e-invalido e aria-invalid no campo, [hidden] nas mensagens de erro,
   button[disabled][aria-busy] durante o envio, #formulario-sucesso no fim.
   ========================================================================== */

/* 1. Abertura e ritmo das seções ------------------------------------------- */
@media (min-width: 992px) {
  .p-contato .pagina { padding-top: calc(var(--cabecalho) + var(--secao) * 0.83); }
}
.p-contato .contato { margin-top: var(--secao); align-items: start; }
.p-contato .onde { margin-top: var(--secao); }

/* o rótulo pequeno: o mesmo da Sobre nós (.reforma__rotulo) */
.p-contato .campo__rotulo,
.p-contato .maos__rotulo,
.p-contato .onde__linha dt,
.p-contato .botao {
  font-weight: 500;
  font-size: max(13px, var(--t-menu)); line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (min-width: 1800px) {
  .p-contato .campo__rotulo,
  .p-contato .maos__rotulo,
  .p-contato .onde__linha dt,
  .p-contato .botao { font-size: max(14px, 0.63vw); }
}

/* 2. Formulário ------------------------------------------------------------ */
.p-contato .formulario { position: relative; }
.p-contato .campo { margin: 0; }
.p-contato .campo + .campo { margin-top: max(32px, calc(var(--secao) * 0.29)); }
.p-contato .campo__rotulo { display: block; color: var(--tinta); }

/* campo = linha de 1 px, sem caixa nem canto */
.p-contato .campo__controle {
  display: block; width: 100%;
  min-height: 44px;
  margin: 0; padding: 10px 0 8px;
  font: inherit; font-size: var(--t-corpo); line-height: var(--lh-corpo);
  color: var(--tinta);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.p-contato textarea.campo__controle {
  min-height: calc(var(--lh-corpo) * 4 + 18px);
  resize: vertical;
}
/* foco: a linha engrossa para 3 px, em preto (o verde não tem contraste no branco) */
.p-contato .campo__controle:focus { outline: none; box-shadow: 0 2px 0 0 var(--tinta); }
.p-contato .campo__controle.e-invalido { border-bottom-color: var(--vermelho); }
.p-contato .campo__controle.e-invalido:focus { box-shadow: 0 2px 0 0 var(--vermelho); }

/* sem JavaScript o <select> fica na tela, com a mesma linha */
.p-contato select.campo__controle { cursor: pointer; }
.p-contato .campo__selecao { display: block; }
.p-contato .campo__selecao--substituida {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* anexo: o texto nativo do navegador ("Escolher arquivos") vira link verde */
.p-contato input[type="file"].campo__controle { color: var(--cinza); cursor: pointer; }
.p-contato input[type="file"].campo__controle::file-selector-button {
  margin: 0 16px 0 0; padding: 0 0 1px;
  font: inherit; color: var(--tinta);
  background: none; border: 0; border-bottom: 1px solid var(--verde); border-radius: 0;
  cursor: pointer;
}

.p-contato .campo__apoio {
  margin-top: 8px;
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
  color: var(--cinza);
}

/* erro: frase no tamanho do corpo logo abaixo da linha, com o quadrado de
   8 px em vermelho (o texto fica em preto: o vermelho não tem 4,5:1 no branco) */
.p-contato .campo__erro {
  margin-top: 8px;
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
  color: var(--tinta);
}
.p-contato .campo__erro:not([hidden]) { display: flex; align-items: baseline; column-gap: 10px; }
.p-contato .campo__erro::before {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px; background: var(--vermelho);
  transform: translateY(-0.1em);
}

/* opções: marcadores quadrados no lugar dos <select> (contato.js) */
.p-contato .opcoes {
  display: flex; flex-direction: column;
  margin-top: 6px;
}
.p-contato .opcao {
  display: flex; align-items: center; column-gap: 10px;
  min-height: 44px;
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
  cursor: pointer;
}
.p-contato .opcao__marca,
.p-contato .campo__caixa {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  width: 8px; height: 8px; margin: 0;
  border: 1px solid var(--verde); border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.p-contato .opcao__marca:checked,
.p-contato .campo__caixa:checked { background: var(--verde); }
.p-contato .opcao__marca:focus-visible,
.p-contato .campo__caixa:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.p-contato .opcoes[aria-invalid="true"] .opcao__marca,
.p-contato .campo__caixa.e-invalido { border-color: var(--vermelho); }
@media (hover: hover) and (pointer: fine) {
  .p-contato .opcao:hover .opcao__marca:not(:checked) { background: rgba(23, 219, 127, 0.35); }
}
@media (min-width: 576px) {
  .p-contato .opcoes { flex-direction: row; flex-wrap: wrap; column-gap: var(--calha); margin-top: 0; }
}
@media (min-width: 992px) {
  /* no desktop a linha de opções fica colada ao rótulo, como no esqueleto */
  .p-contato .opcoes { row-gap: 0; }
  .p-contato .opcao { min-height: 0; padding: 8px 0; }
  .p-contato .opcoes { margin-top: 10px; }
}

/* consentimento */
.p-contato .campo--consentimento label {
  display: flex; align-items: baseline; column-gap: 10px;
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
  cursor: pointer;
}
.p-contato .campo--consentimento .campo__caixa { transform: translateY(-0.05em); }
.p-contato .ligacao { border-bottom: 1px solid var(--verde); padding-bottom: 1px; transition: color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .p-contato .ligacao:hover { color: var(--cinza-claro); } }

/* Enviar: link sublinhado em verde, à direita da coluna, no lugar do botão */
.p-contato .formulario__acoes {
  display: flex; flex-direction: column; align-items: flex-end;
  margin-top: max(40px, calc(var(--secao) * 0.33));
}
.p-contato .botao {
  display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding: 0;
  font-family: inherit;
  color: var(--tinta); background: none;
  border: 0; border-radius: 0;
  cursor: pointer;
}
.p-contato .botao__rotulo span {
  display: inline-block;
  border-bottom: 1px solid var(--verde); padding-bottom: 2px;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) { .p-contato .botao:hover .botao__rotulo span { color: var(--cinza-claro); } }
.p-contato .botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
/* enviando: o script troca o texto por "Enviando…" e trava o botão */
.p-contato .botao[disabled] { cursor: progress; }
.p-contato .botao[disabled] .botao__rotulo span { color: var(--cinza); border-bottom-color: var(--cinza-claro); }
.p-contato #formulario-falha { align-self: stretch; margin-top: 16px; }

/* sucesso: o formulário dá lugar a "Recebemos." */
.p-contato .sucesso .titulo { outline: none; }
.p-contato .sucesso p { margin-top: var(--titulo-texto); max-width: var(--medida); }

/* 3. O que ter em mãos (coluna 3) ------------------------------------------ */
.p-contato .maos { margin-top: var(--secao); }
.p-contato .maos__rotulo { color: var(--cinza); }
.p-contato .maos .titulo { margin-top: max(16px, calc(var(--secao) * 0.1)); }
.p-contato .maos__texto { margin-top: max(12px, calc(var(--secao) * 0.05)); }
.p-contato .maos__lista {
  margin-top: max(24px, calc(var(--secao) * 0.2));
  border-top: 1px solid var(--linha);
}
.p-contato .maos__lista li {
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}

/* 4. Onde estamos ----------------------------------------------------------- */
.p-contato .onde__ficha {
  margin: max(32px, calc(var(--secao) * 0.37)) var(--margem) 0;
  border-top: 1px solid var(--linha);
}
.p-contato .onde__linha {
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linha);
}
.p-contato .onde__linha dd { margin: 0; }
.p-contato .onde__linha address { font-style: normal; }
.p-contato .onde__acao a {
  display: inline-block;
  border-bottom: 1px solid var(--verde); padding-bottom: 1px;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) { .p-contato .onde__acao a:hover { color: var(--cinza-claro); } }
@media (max-width: 991.98px) {
  /* alvo de toque de 44 px no celular sem mudar o desenho do sublinhado */
  .p-contato .onde__acao a { padding: 12px 0 1px; margin-top: -12px; }
}
@media (min-width: 992px) {
  .p-contato .onde__linha {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--calha);
    align-items: baseline;
    padding: calc(var(--secao) * 0.14) 0;
  }
  .p-contato .onde__dado { grid-column: 2; max-width: 25vw; }
  .p-contato .onde__acao { grid-column: 3; text-align: right; }
}

/* 5. A faixa das gaxetas, colada ao rodapé ------------------------------------ */
.p-contato .faixa--gaxetas img { aspect-ratio: 3 / 2; object-position: 50% 45%; }
@media (min-width: 768px) { .p-contato .faixa--gaxetas img { aspect-ratio: 3812 / 1384; } }

/* 6. Formulário na grade ------------------------------------------------------ */
@media (min-width: 768px) {
  .p-contato .contato > * { grid-column: 1 / -1; }
  .p-contato .contato__formulario,
  .p-contato .maos { max-width: 560px; }
}
/* 992–1199: a coluna teria 250 px — o formulário ocupa as colunas 2 e 3 e a
   lista desce para baixo dele */
@media (min-width: 992px) {
  .p-contato .contato .titulo.c1 { grid-column: 1; grid-row: 1; }
  .p-contato .contato__formulario { grid-column: 2 / 4; grid-row: 1; }
  .p-contato .maos { grid-column: 2 / 4; grid-row: 2; }
}
@media (min-width: 1200px) {
  .p-contato .contato__formulario { grid-column: 2; max-width: none; }
  .p-contato .maos { grid-column: 3; grid-row: 1; margin-top: 0; max-width: none; }
}
@media (min-width: 1800px) {
  .p-contato .contato__formulario,
  .p-contato .maos { max-width: 25vw; }
}

/* 18. Como trabalhamos (como-trabalhamos.html) — escrita em 2026-09-25 no padrão da Sobre nós;
   veio de _parcial-como-trabalhamos.css, juntado aqui. */
/* =============================================================================
   ALUMIHAUS v3 — _parcial-como-trabalhamos.css
   Página Como trabalhamos (como-trabalhamos.html), 2026-09-25. Parcial: o
   executor principal junta estas regras no alumihaus.css. Tudo escopado em
   body.p-como-trabalhamos; entra depois do alumihaus.css e usa os tokens dele.

   Sem esqueleto SVG: a composição vem de textos/como-trabalhamos/00-estrutura.md
   e das páginas irmãs (Sobre nós, Soluções). Medidas na janela de 2951
   (--secao 240, margem 80, calha 40):
   · abertura  a mesma da Sobre nós: título col. 1, texto col. 2, a 199 do
               cabeçalho (--secao × 0,83) → y 327
   · faixa     foto de oficina sangrando, 3812:1384 (o recorte da faixa da serra)
   (🔁 2026-09-29: etapas, fotos entre elas e envie abaixo foram substituídos
   pelos painéis — ver o bloco 🔁 logo depois da faixa.)
   · etapas    uma por linha, fio verde de 2 px na largura inteira da janela
               entre elas (como os sistemas de Soluções). Col. 1: número verde de
               188 (a escala da metodologia da home) e o nome da etapa a 60 dele;
               col. 2: "quem faz" em uma linha e o texto a 50; col. 3: "o que
               você recebe", lista com fio verde de 1 px entre os itens. Número,
               "quem faz" e o rótulo da lista alinhados pelo topo, a 40 do fio
   · fotos     entre 02 e 03 (esquerda) e entre 03 e 04 (direita): o
               .bloco__foto da Sobre nós, 2/3 da janela, quadrada, sangrando,
               a 120 (--secao / 2) do texto e da etapa seguinte
   · envie     o componente fixo do site (alumihaus.css § 8 e § 12)
   Até 1199 a lista "o que você recebe" desce para baixo do texto (na coluna de
   três terços, a 992, "ACOMPANHAMENTO" não caberia no título); no celular tudo
   empilha: número, nome, quem faz, texto, lista.
   ========================================================================== */

.p-como-trabalhamos {
  --ct-fio: 2px;                        /* o fio verde entre as etapas */
  --ct-numero: var(--t-numero);         /* 88 / 104 / 128 — sobe para a escala da home a partir de 1200 */
}

/* a abertura começa onde começa a da Sobre nós */
@media (min-width: 992px) {
  .p-como-trabalhamos .pagina { padding-top: calc(var(--cabecalho) + var(--secao) * 0.83); }
}

/* a faixa da oficina: 3:2 no celular, o recorte da faixa da Sobre nós acima */
.p-como-trabalhamos .faixa--oficina img { aspect-ratio: 3 / 2; object-position: 50% 45%; }
@media (min-width: 768px) {
  .p-como-trabalhamos .faixa--oficina img { aspect-ratio: 3812 / 1384; }
}

/* 🔁 2026-09-29 — as etapas viram painéis na composição da Storey Architecture
   (esqueletos/como-trabalhamos.svg, aprovado pelo Gabriel). Medidas a 2951:
   · painel    fio verde de 2 px em cima; nome da etapa na col. 1 e "quem faz"
               + texto na col. 2, a 40 do fio; embaixo, a --secao do texto, o
               número (15vw, cinza #E6E6E6, a escala e a cor da Storey) na
               col. 1 e a foto 5:3 na col. 2, com a largura do texto, os dois
               alinhados pela base; --secao / 2 de ar embaixo. Col. 3 vazia.
   · fecho     foto na janela inteira, título de hero centrado em branco,
               texto e contatos embaixo dele (substitui o .envie nesta página)
   · movimento (alumihaus.js § 7) ≥ 768: o painel que passa do topo da janela
               desce 1/3 do que já passou (sobe a 2/3 da velocidade) e o véu
               preto vai de 0 a 40% ao longo da altura dele; o seguinte, com
               z-index maior, o cobre. Medido na Storey com a roda do mouse.
               Linhas do texto por máscara; foto por cobertura preta que
               recolhe, com a imagem voltando de scale 1,2. Em qualquer largura,
               menos com movimento reduzido.
   A lista "o que você recebe" saiu da página (pedido do Gabriel, 2026-09-29). */

.p-como-trabalhamos {
  --ct-numero-cor: var(--verde);         /* 🔁 2026-09-29: verde, como os números da metodologia (era o cinza #E6E6E6 da Storey); decorativo (aria-hidden) */
  --ct-veu: 0;                           /* escrito pelo JS em cada painel */
}

.p-como-trabalhamos .ct-etapas { margin-top: var(--secao); }

.p-como-trabalhamos .ct-painel {
  position: relative;
  background: var(--chao);
  border-top: var(--ct-fio) solid var(--verde);
  padding-top: var(--calha);
  padding-bottom: calc(var(--secao) / 2);
  row-gap: var(--titulo-texto);
  will-change: transform;
}
/* cada painel cobre o anterior; o fecho cobre o último */
.p-como-trabalhamos .ct-painel:nth-child(1) { z-index: 1; }
.p-como-trabalhamos .ct-painel:nth-child(2) { z-index: 2; }
.p-como-trabalhamos .ct-painel:nth-child(3) { z-index: 3; }
.p-como-trabalhamos .ct-painel:nth-child(4) { z-index: 4; }

.p-como-trabalhamos .ct-painel__veu {
  position: absolute; inset: 0;
  background: var(--tinta);
  opacity: var(--ct-veu);
  pointer-events: none;
  z-index: 2;
}

.p-como-trabalhamos .ct-painel__titulo { max-width: 14em; }
.p-como-trabalhamos .ct-painel__texto  { margin-top: var(--calha); }
/* sem palavra sozinha na última linha ("produção.") */
.p-como-trabalhamos .ct-painel__texto p { text-wrap: pretty; }
/* 992–1199: na coluna de um terço, "ACOMPANHAMENTO." passa da coluna */
@media (min-width: 992px) and (max-width: 1199px) {
  .p-como-trabalhamos .ct-painel__titulo { font-size: min(var(--t-titulo), 2.4vw); }
}

/* "quem faz": o nome curto em caixa alta, 500 */
.p-como-trabalhamos .ct-nome {
  font-weight: 500;
  font-size: var(--t-corpo); line-height: 1.2;
  text-transform: uppercase;
}
.p-como-trabalhamos .ct-quem__rotulo { color: var(--cinza); margin-right: 0.6em; }

/* o número: no celular, em cima do nome da etapa; a partir de 768, embaixo */
.p-como-trabalhamos .ct-painel__numero {
  order: -1;
  font-weight: 400;
  font-size: var(--t-numero); line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ct-numero-cor);
  margin-left: -0.05em;
}

/* a foto: 5:3, com a largura do texto */
.p-como-trabalhamos .ct-painel__foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 3;
  max-width: var(--medida);
  background: var(--tinta);
}
.p-como-trabalhamos .ct-painel__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform-origin: 50% 100%;
}

@media (min-width: 768px) {
  .p-como-trabalhamos .ct-painel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--secao);
  }
  .p-como-trabalhamos .ct-painel__titulo { grid-column: 1; grid-row: 1; }
  .p-como-trabalhamos .ct-painel__corpo  { grid-column: 2; grid-row: 1; }
  .p-como-trabalhamos .ct-painel__numero {
    grid-column: 1; grid-row: 2; align-self: end;
    font-size: 15vw;
    text-box: trim-both cap alphabetic;   /* a base do número na base da foto */
  }
  .p-como-trabalhamos .ct-painel__foto   { grid-column: 2; grid-row: 2; }
}
@media (min-width: 992px) {
  .p-como-trabalhamos .ct-painel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* até 1199 a coluna de um terço espreme o texto: ele e a foto ocupam col. 2 e 3 */
  .p-como-trabalhamos :is(.ct-painel__corpo, .ct-painel__foto) { grid-column: 2 / 4; }
}
@media (min-width: 1200px) {
  .p-como-trabalhamos :is(.ct-painel__corpo, .ct-painel__foto) { grid-column: 2; }
}
@media (min-width: 1200px) {
  .p-como-trabalhamos .ct-painel { border-top-width: var(--h-linha, 2px); }
  .p-como-trabalhamos .ct-painel__titulo,
  .p-como-trabalhamos .ct-nome,
  .p-como-trabalhamos .ct-painel__texto { text-box: trim-both cap alphabetic; }
  .p-como-trabalhamos .ct-painel__texto { margin-top: calc(var(--calha) * 1.25); }   /* 50 a 2951 */
}
@media (min-width: 1800px) {
  .p-como-trabalhamos .ct-nome { font-size: max(var(--t-corpo), 0.63vw); }
  .p-como-trabalhamos .ct-painel__foto { max-width: 25vw; }
}

/* o fecho: foto na janela inteira ----------------------------------------- */
.p-como-trabalhamos .ct-fecho {
  position: relative; z-index: 5;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--secao) var(--margem);
  color: var(--chao);
  background: #17191c;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.p-como-trabalhamos .ct-fecho__foto { position: absolute; inset: 0; z-index: -1; }
.p-como-trabalhamos .ct-fecho__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* véu para o branco ler sobre o céu claro da foto */
.p-como-trabalhamos .ct-fecho__foto::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.p-como-trabalhamos .ct-fecho__titulo {
  font-weight: 500;
  font-size: var(--t-heroi); line-height: 1.135;
  text-transform: uppercase;
}
.p-como-trabalhamos .ct-fecho__texto {
  max-width: var(--medida);
  margin: var(--titulo-texto) auto 0;
}
.p-como-trabalhamos .ct-fecho__contatos {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: calc(var(--calha) * 1.5); row-gap: 8px;
  margin-top: calc(var(--calha) * 1.5);
}
.p-como-trabalhamos .ct-fecho__contatos a {
  border-bottom: 1px solid var(--verde); padding-bottom: 1px;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .p-como-trabalhamos .ct-fecho__contatos a:hover { color: var(--cinza-claro); }
}
.p-como-trabalhamos .ct-fecho__contatos a:focus-visible { outline: 2px solid var(--chao); outline-offset: 4px; }
@media (min-width: 1200px) {
  .p-como-trabalhamos .ct-fecho__titulo { font-size: max(44px, 2.508vw); }   /* 74 a 2951, o da hero */
}
@media (min-width: 1800px) {
  .p-como-trabalhamos .ct-fecho__texto { max-width: 25vw; }
}

/* o movimento — só quando o JS marcou a página (html.ct-anima) ------------- */
/* as linhas: cada uma numa máscara; o texto sobe de dentro dela */
/* a máscara tem folga em cima e embaixo: com o text-box aparado na primeira
   linha, 0,08 cortava o topo dos acentos e a perna do ç, g, p, q */
.p-como-trabalhamos .linha { display: block; overflow: hidden; padding-block: 0.2em; margin-block: -0.2em; }
.p-como-trabalhamos .linha > span { display: block; }
.p-como-trabalhamos [data-linha-unica] .linha { display: block; }
.ct-anima .p-como-trabalhamos .linha > span {
  transform: translateY(105%);
  transition: transform 0.9s var(--entrada);
  transition-delay: calc(var(--i, 0) * 0.06s);
}
.ct-anima .p-como-trabalhamos .visivel .linha > span { transform: none; }

/* a foto: a cobertura preta recolhe para cima; a imagem volta de 1,2 */
.p-como-trabalhamos .ct-painel__foto::after {
  content: ""; position: absolute; inset: 0;
  background: var(--tinta);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.ct-anima .p-como-trabalhamos .ct-painel__foto::after {
  transform: scaleY(1);
  transition: transform 1.2s var(--dentro);
}
.ct-anima .p-como-trabalhamos .ct-painel__foto img {
  transform: scale(1.2);
  transition: transform 1.6s var(--entrada);
}
.ct-anima .p-como-trabalhamos .ct-painel__foto.visivel::after { transform: scaleY(0); }
.ct-anima .p-como-trabalhamos .ct-painel__foto.visivel img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ct-anima .p-como-trabalhamos .linha > span,
  .ct-anima .p-como-trabalhamos .ct-painel__foto img { transform: none; }
  .ct-anima .p-como-trabalhamos .ct-painel__foto::after { transform: scaleY(0); }
  .p-como-trabalhamos .ct-painel { transform: none !important; }
  .p-como-trabalhamos .ct-painel__veu { display: none; }
}

/* 19. Política de privacidade (politica-de-privacidade.html) — escrita em 2026-09-25 no padrão da Sobre nós;
   veio de _parcial-politica-de-privacidade.css, juntado aqui. */
/* =============================================================================
   ALUMIHAUS v3 — _parcial-politica-de-privacidade.css
   Página Política de privacidade (politica-de-privacidade.html). Sem esqueleto:
   página de leitura na régua da Sobre nós. Parcial para ser juntado ao
   alumihaus.css; toda regra vale só em body.p-politica.

   O texto é o da versão de 15/09 (v3.css), palavra por palavra. Mudou só a
   marcação. Sem foto e sem "Envie o seu projeto": é uma página jurídica.

   Medidas, na janela de 2951 (--secao 240, margem 80, calha 40):
   · abertura  a da Sobre nós: "POLÍTICA DE PRIVACIDADE." na coluna 1, a data
               e o índice na coluna 2, os dois em y 327 (cabeçalho 128 +
               --secao × 0,83). O índice é o da página antiga; aqui ele ocupa
               o lugar do parágrafo de abertura, com fio de 1 px entre os itens
   · seções   dez blocos, a --secao da abertura. Título na coluna 1, texto na
              coluna 2 (.texto, 25vw a partir de 1800), alinhados pela linha
              de base da primeira linha. Fio de 1 px de margem a margem entre
              as seções, com --secao/4 de ar de cada lado: o intervalo entre
              uma seção e a outra é --secao/2 (120), não --secao, porque o
              texto é longo e a página não pode virar dez telas de branco
   · títulos  um degrau abaixo do .titulo: o nome pequeno em caixa alta, peso
              500, 18,6 px a 2951 (0,63vw) — o mesmo de .reforma__rotulo e dos
              nomes de etapa/documento das outras páginas. Motivo: são dez
              títulos, alguns com 30+ caracteres; no tamanho de .titulo (39)
              cada um viraria um segundo H1 e competiria com o da página
   · listas   sem marcador, fio de 1 px entre os itens (não em volta)
   · fim      --secao de ar entre a última seção e o rodapé
   ========================================================================== */

/* 1. Abertura --------------------------------------------------------------- */
@media (min-width: 992px) {
  :is(.p-politica, .p-texto) .pagina { padding-top: calc(var(--cabecalho) + var(--secao) * 0.83); }
}
:is(.p-politica, .p-texto) .pagina { padding-bottom: var(--secao); }

/* a data: o rótulo pequeno do site, em cinza, sem a margem de baixo do .rotulo */
:is(.p-politica, .p-texto) .politica__data {
  font-weight: 500;
  font-size: var(--t-menu); line-height: var(--lh-menu);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cinza);
}
@media (min-width: 1800px) {
  :is(.p-politica, .p-texto) .politica__data { font-size: max(14px, 0.63vw); line-height: 1.2; letter-spacing: 0; }
}

/* o índice: uma linha por seção, fio de 1 px entre elas */
:is(.p-politica, .p-texto) .politica__indice { margin-top: max(24px, calc(var(--secao) / 4)); }
:is(.p-politica, .p-texto) .politica__indice li + li { border-top: 1px solid var(--linha); }
:is(.p-politica, .p-texto) .politica__indice a {
  display: block;
  padding: 10px 0;                    /* 26 + 20 = 46: alvo de toque de 44 no celular */
  transition: color 0.3s ease;
}
:is(.p-politica, .p-texto) .politica__indice li:first-child a { padding-top: 0; }
@media (hover: hover) and (pointer: fine) {
  :is(.p-politica, .p-texto) .politica__indice a:hover { color: var(--cinza-claro); }
}
@media (min-width: 992px) {
  :is(.p-politica, .p-texto) .politica__indice a { padding: max(8px, calc(var(--secao) / 24)) 0; }   /* 10 a 2951 */
  :is(.p-politica, .p-texto) .politica__indice li:first-child a { padding-top: 0; }
}

/* 2. As seções ---------------------------------------------------------------- */
:is(.p-politica, .p-texto) .politica { margin-top: var(--secao); }

:is(.p-politica, .p-texto) .politica__secao {
  position: relative;
  row-gap: 16px;
  padding-top: calc(var(--secao) / 4);
  padding-bottom: calc(var(--secao) / 4);
}
/* o fio: de margem a margem, em cima de cada seção e embaixo da última */
:is(.p-politica, .p-texto) .politica__secao::before {
  content: "";
  position: absolute; top: 0; left: var(--margem); right: var(--margem);
  border-top: 1px solid var(--linha);
}
:is(.p-politica, .p-texto) .politica__secao:last-child::after {
  content: "";
  position: absolute; bottom: 0; left: var(--margem); right: var(--margem);
  border-top: 1px solid var(--linha);
}
:is(.p-politica, .p-texto) .politica__titulo {
  font-weight: 500;
  font-size: var(--t-corpo); line-height: var(--lh-corpo);
  text-transform: uppercase;
  max-width: 24em;
}
@media (min-width: 768px) {
  /* em duas colunas o título fica na primeira e o texto na segunda */
  :is(.p-politica, .p-texto) .politica__secao { align-items: baseline; }
}
@media (min-width: 1800px) {
  :is(.p-politica, .p-texto) .politica__titulo { font-size: max(14px, 0.63vw); line-height: 1.2; }
}

/* o texto: parágrafos e listas com o mesmo intervalo de parágrafo */
:is(.p-politica, .p-texto) .politica__secao .texto > * + * { margin-top: var(--paragrafo); }
:is(.p-politica, .p-texto) .politica__lista li { padding: 0.5em 0; }
:is(.p-politica, .p-texto) .politica__lista li:first-child { padding-top: 0; }
:is(.p-politica, .p-texto) .politica__lista li + li { border-top: 1px solid var(--linha); }

/* o e-mail no meio do texto: sublinhado verde, como o .ligacao do Contato */
:is(.p-politica, .p-texto) .ligacao {
  border-bottom: 1px solid var(--verde);
  padding-bottom: 1px;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  :is(.p-politica, .p-texto) .ligacao:hover { color: var(--cinza-claro); }
}

/* 20. Página de sistema (sistemas/<slug>.html, geradas por sistemas/_gerar.py) —
   escrita em 2026-09-29 do esqueleto aprovado esqueletos/sistema-correr.svg, na
   composição da página de produto da Geste (geste.co/product/brume).
   · hero      foto na janela inteira, presa atrás (sticky); título centrado embaixo
   · cartão    seção de duas telas com o conteúdo preso: giro de 7 quadros nas col.
               1–2 sobre o fundo liso #F2F1EF (o dos renders); nome, frase e
               acordeão na col. 3. A tela cheia sobe por cima dele (margin −100svh)
   · de perto  o perfil a centímetros (o grão do material), uma imagem por cor que
               troca com a barra; só aparece com detalhe-<cor>.webp das quatro cores
   · galeria   presa por uma tela de rolagem (seção de 200svh, como a Geste); a faixa anda para o lado
               (alumihaus.js § 8). Sem .si-anima (celular, movimento reduzido):
               fileira com rolagem lateral nativa
   · ficha     desenhos em quatro colunas e a tabela em duas metades, fio verde
   · outros    os cinco sistemas lado a lado, sem calha, como a fileira da Geste
   · barra     fixa no pé: cores (trocam o giro e o de perto), nome, Envie o seu projeto      */

.p-sistema { --si-fundo: #F2F1EF; --si-barra: 64px; }
.p-sistema .pagina.si { padding-top: 0; }

/* hero ------------------------------------------------------------------------ */
.si-heroi {
  position: sticky; top: 0; z-index: 0;
  height: 100svh;
  overflow: hidden;
  background: #17191c;
  color: var(--chao);
}
.si-heroi__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-heroi::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%),
              linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 25%);
}
.si-heroi__titulo {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 14svh;
  text-align: center;
  font-weight: 500; font-size: var(--t-heroi); line-height: 1.135;
  text-transform: uppercase;
}
@media (min-width: 1200px) { .si-heroi__titulo { font-size: max(44px, 2.508vw); } }

/* o cartão --------------------------------------------------------------------- */
.si-cartao { position: relative; z-index: 1; background: var(--si-fundo); }
.si-cartao__fixo {
  background: var(--si-fundo);
  padding-top: calc(var(--cabecalho) + var(--calha));
  padding-bottom: calc(var(--secao) / 2);
  row-gap: var(--titulo-texto);
}
.si-giro { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.si-giro__quadros {
  position: relative;
  width: 100%; max-width: 100%;
  aspect-ratio: 1 / 1;
  touch-action: pan-y;
  cursor: grab;
}
.si-giro__quadros img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; user-select: none; -webkit-user-drag: none; }
.si-giro__quadros img.ativo { display: block; }
.si-giro__quadros .si-giro__provisoria { object-fit: cover; }
.si-giro__pontos { display: flex; justify-content: center; margin-top: 8px; }
.si-giro__pontos button {
  width: 36px; height: 44px;                        /* a área de toque; o traço é o ::before */
  display: grid; place-items: center;
}
.si-giro__pontos button::before {
  content: ""; display: block; width: 14px; height: 4px; background: var(--cinza-claro);
  transition: width 0.3s var(--entrada), background-color 0.3s ease;
}
.si-giro__pontos button[aria-pressed="true"]::before { width: 32px; background: var(--tinta); }
.si-giro__pontos button:focus-visible { outline: 2px solid var(--tinta); outline-offset: -6px; }

.si-cartao__titulo { font-weight: 500; font-size: var(--t-titulo); line-height: var(--lh-titulo); }
.si-cartao__nome { display: block; text-transform: uppercase; }
.si-cartao__frase { display: block; color: var(--cinza); max-width: 22em; }

.si-acordeao { margin-top: var(--titulo-texto); }
.si-acordeao details { border-top: 1px solid var(--verde); }
.si-acordeao summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px;
  font-weight: 500; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.si-acordeao summary::-webkit-details-marker { display: none; }
.si-acordeao summary::after { content: "+"; font-weight: 400; }
.si-acordeao details[open] summary::after { content: "\2212"; }
.si-acordeao summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.si-acordeao details > :not(summary) { padding-bottom: calc(var(--calha) * 0.75); max-width: var(--medida); }
.si-acordeao__lista li + li { margin-top: 4px; }

@media (min-width: 992px) {
  .si-cartao { height: 200svh; }
  .si-cartao__fixo {
    position: sticky; top: 0;
    height: 100svh;
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: calc(var(--calha) + var(--si-barra) + var(--calha));
  }
  .si-giro { grid-column: 1 / 3; min-height: 0; }
  .si-giro__quadros { width: auto; height: calc(100% - 52px); }
  .si-cartao__texto {
    grid-column: 3;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 0;
  }
}
@media (min-width: 1800px) { .si-acordeao details > :not(summary) { max-width: none; } }

/* a tela cheia ------------------------------------------------------------------ */
.si-tela {
  position: relative; z-index: 2;
  min-height: 100svh;
  overflow: hidden;
  background: #17191c;
  color: var(--chao);
}
.si-tela__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.si-tela::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 45%);
}
.si-tela__texto { position: relative; z-index: 1; padding-top: calc(var(--cabecalho) + var(--secao) / 2); row-gap: var(--titulo-texto); }
.si-tela__texto .texto { grid-row: 2; }
.si-a-escrever { opacity: 0.8; }
@media (min-width: 992px) {
  .si-tela { min-height: calc(100svh + 100px); margin-top: -100svh; }
}

/* de perto: o material ----------------------------------------------------------- */
/* sobe por cima da tela cheia, no fundo liso dos renders; imagem nas col. 1–2, como o giro */
.si-detalhe { position: relative; z-index: 3; background: var(--si-fundo); padding: var(--secao) 0; }
.si-detalhe__grade { row-gap: var(--titulo-texto); }
.si-detalhe__quadro { position: relative; aspect-ratio: 1 / 1; }
.si-detalhe__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.si-detalhe__quadro img.ativo { display: block; }
.si-detalhe__cor { margin-top: 12px; font-size: var(--t-menor); font-weight: 500; text-transform: uppercase; color: var(--cinza); }
@media (min-width: 992px) {
  .si-detalhe { padding: 0; }
  .si-detalhe__grade { min-height: 100svh; align-items: center; padding-top: calc(var(--calha) * 2); padding-bottom: calc(var(--calha) * 2 + var(--si-barra)); }
  .si-detalhe__quadro { grid-column: 1 / 3; grid-row: 1; width: min(100%, calc(100svh - var(--calha) * 4 - var(--si-barra))); justify-self: center; }   /* cabe na tela e nunca passa das duas colunas */
  .si-detalhe__texto { grid-column: 3; grid-row: 1; align-self: start; }
}

/* a galeria ---------------------------------------------------------------------- */
.si-galeria { position: relative; z-index: 3; background: var(--si-fundo); }
.si-galeria__fixo { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; }
.si-galeria__faixa { display: flex; }
.si-galeria__item { flex: 0 0 85vw; height: 70svh; scroll-snap-align: start; position: relative; }
.si-galeria__item figure { position: relative; height: 100%; margin: 0; }
.si-galeria__item--recorte figure { display: grid; place-items: center; background: var(--si-fundo); }
.si-galeria__item--recorte img { width: 72%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.si-galeria__item--close img { width: 100%; height: 100%; object-fit: cover; }
.si-galeria__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 6%;
  text-align: center;
  font-size: var(--t-menor); text-transform: uppercase; font-weight: 500;
}
.si-galeria__contador {
  position: absolute; right: var(--margem); top: 50%; transform: translateY(-50%);
  font-weight: 500; font-size: var(--t-titulo);
  z-index: 2;
  color: var(--tinta);                 /* preto: lê no fundo liso e nos renders claros */
  pointer-events: none;
}
.si-galeria__seta { display: none; }
@media (min-width: 768px) { .si-galeria__item { flex-basis: 50vw; } }

.si-anima .si-galeria { height: 200svh; }                  /* duas telas, como a Geste: a faixa anda mais que a rolagem */
.si-anima .si-galeria__fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; scroll-snap-type: none; }
.si-anima .si-galeria__faixa { height: 100%; will-change: transform; }
.si-anima .si-galeria__item { height: 100%; }
.si-anima .si-galeria__item--recorte img { width: 62%; }
.si-anima .si-galeria__seta {
  display: block;
  position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 1;
}
.si-anima .si-galeria__seta--ant { left: 0; cursor: w-resize; }
.si-anima .si-galeria__seta--prox { right: 0; cursor: e-resize; }
.si-galeria__seta:focus-visible { outline: 2px solid var(--verde); outline-offset: -4px; }

/* a ficha técnica ------------------------------------------------------------------ */
.si-ficha { position: relative; z-index: 3; background: var(--chao); padding: var(--secao) 0 calc(var(--secao) / 2); }
.si-ficha__desenhos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--calha);
  padding: 0 var(--margem);
  margin-top: calc(var(--secao) / 2);
}
.si-ficha__desenhos figure { margin: 0; }
.si-ficha__desenhos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--si-fundo); }
.si-ficha__desenhos figcaption { margin-top: 12px; font-size: var(--t-menor); text-transform: uppercase; font-weight: 500; }
.si-ficha__tabela {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--calha);
  padding: 0 var(--margem);
  margin-top: calc(var(--secao) / 2);
}
.si-ficha__tabela dl > div {
  display: flex; justify-content: space-between; column-gap: 1em;
  padding: 12px 0;
  border-top: 1px solid var(--verde);
}
.si-ficha__tabela dt { color: var(--cinza); }
.si-ficha__tabela dd { text-align: right; }
@media (min-width: 768px) {
  .si-ficha__desenhos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .si-ficha__tabela { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* outros sistemas -------------------------------------------------------------------- */
.si-outros { position: relative; z-index: 3; background: var(--chao); padding: calc(var(--secao) / 2) 0 var(--secao); }
.si-outros__lista {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(var(--secao) / 4);
}
.si-outro { display: block; padding-bottom: var(--calha); }
.si-outro img { display: block; width: 100%; height: auto; aspect-ratio: 898 / 988; object-fit: cover; transition: opacity 0.3s ease; }
.si-outro__nome, .si-outro__numero { display: inline-block; margin-top: 12px; padding-left: var(--margem); font-weight: 500; text-transform: uppercase; }
.si-outro__numero { color: var(--cinza); padding-left: 0.6em; }
.si-outro:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .si-outro:hover img { opacity: 0.85; } }
@media (min-width: 992px) {
  .si-outros__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .si-outro__nome { padding-left: calc(var(--calha) / 2); }
}

/* a barra fixa --------------------------------------------------------------------------- */
.si-barra {
  position: fixed; z-index: 40;
  left: 0; right: 0; bottom: 0;
  height: var(--si-barra);
  display: flex; align-items: center; column-gap: 20px;
  padding: 0 var(--margem);
  background: var(--tinta); color: var(--chao);
  white-space: nowrap;
  transition: transform 0.45s var(--dentro);
}
.si-barra--oculta { transform: translateY(110%); }
.si-barra__cores { display: flex; }
.si-cor { width: 36px; height: 44px; display: grid; place-items: center; }
.si-cor::before { content: ""; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.35); }
.si-cor[aria-checked="true"]::before { outline: 1px solid var(--chao); outline-offset: 3px; }
.si-cor:focus-visible { outline: 2px solid var(--verde); outline-offset: -4px; }
.si-cor--preto::before   { background: #1C1C1C; }
.si-cor--branco::before  { background: #F4F4F2; }
.si-cor--bronze::before  { background: #5E4A3A; }
.si-cor--natural::before { background: #B8BBBE; }
.si-barra__nome { font-weight: 500; text-transform: uppercase; font-size: var(--t-menor); display: none; }
.si-barra__nome [data-cor-nome] { color: var(--cinza-claro); margin-left: 0.4em; }
.si-barra__envie {
  margin-left: auto;
  font-weight: 500; text-transform: uppercase; font-size: var(--t-menor);
  border-bottom: 1px solid var(--verde); padding-bottom: 1px;
}
.si-barra__envie:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .si-barra__envie:hover { color: var(--cinza-claro); } }
@media (min-width: 576px) { .si-barra__nome { display: block; } }
@media (min-width: 992px) {
  .si-barra {
    left: 50%; right: auto; bottom: var(--calha);
    width: auto; min-width: min(720px, calc(100vw - 2 * var(--margem)));
    padding: 0 24px 0 12px;
    transform: translateX(-50%);
  }
  .si-barra--oculta { transform: translate(-50%, calc(100% + var(--calha) * 2)); }
}
/* no celular o rodapé não fica atrás da barra */
.p-sistema .rodape { padding-bottom: var(--si-barra); }
@media (min-width: 992px) { .p-sistema .rodape { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  .si-barra, .si-giro__pontos button::before { transition: none; }
}