/* =========================================================================
   HPool hidro-design
   Paleta e tipografia vindas do CSS de producao do proprio cliente.
   Decisoes justificadas em direcao-de-arte.md.
   ========================================================================= */

/* ---------- fontes locais (SIL OFL), sem requisicao a CDN ---------------- */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* as cinco cores, todas colhidas do CSS do cliente */
  --marca:  #363b44;   /* grafite da marca */
  --acao:   #44bef1;   /* azul agua, cor dos botoes do cliente */
  --escura: #252930;   /* neutra escura */
  --clara:  #f4f6f8;   /* neutra clara */
  --apoio:  #055783;   /* azul profundo, o veu sobre imagem */

  /* derivadas, todas com contraste medido em direcao-de-arte.md */
  --escura-fundo:  #1e2127;
  --tinta:         #ffffff;             /* sobre escuro: 14,60:1 */
  --tinta-2:       #c9d3e0;             /* sobre escuro:  9,65:1 */
  --tinta-clara:   #252930;             /* sobre claro:  14,60:1 */
  --tinta-clara-2: #5b6472;             /* sobre claro:   5,98:1 */
  --botao-tinta:   #0b0d10;             /* sobre --acao:  9,16:1 */
  --linha:         rgb(255 255 255 / 0.14);
  --linha-clara:   rgb(37 41 48 / 0.14);

  /* tipografia: uma escala, tudo em clamp, nenhum px fixo em texto */
  --fonte-corpo:  "Lato", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;

  --t-xs:      clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
  --t-sm:      clamp(0.88rem, 0.85rem + 0.15vw, 0.97rem);
  --t-base:    clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --t-md:      clamp(1.13rem, 1.04rem + 0.40vw, 1.38rem);
  --t-lg:      clamp(1.35rem, 1.18rem + 0.75vw, 1.85rem);
  --t-xl:      clamp(1.70rem, 1.38rem + 1.40vw, 2.60rem);
  --t-2xl:     clamp(2.10rem, 1.58rem + 2.30vw, 3.70rem);
  --t-3xl:     clamp(2.15rem, 1.55rem + 2.90vw, 5.20rem);
  --t-display: clamp(3.10rem, 1.90rem + 5.20vw, 7.00rem);

  /* espacamento: uma progressao so */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;   --e-5: 1.5rem;
  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;    --e-9: 6rem;   --e-10: 8rem;
  --secao: clamp(3.5rem, 2rem + 7vw, 9rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 2.5rem);
  --largura: 78rem;
  --leitura: 42rem;

  /* forma */
  --r-1: 2px; --r-2: 6px; --r-3: 14px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgb(11 13 16 / .06), 0 8px 28px rgb(11 13 16 / .08);
  --sombra-2: 0 6px 24px rgb(11 13 16 / .38);

  /* movimento */
  --transicao: 180ms cubic-bezier(.2, .7, .3, 1);
  --altura-barra: 4.25rem;
}

/* breakpoints declarados: 40rem 640px · 52rem 832px · 64rem 1024px · 80rem 1280px */

/* ---------- reset enxuto ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-inline-size: 100%; height: auto; }
/* picture some do layout: sem isso ele quebra a cadeia de altura e a foto de
   fundo do hero nao preenche a secao (block-size:100% no img nao resolveria) */
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  margin: 0;
  background: var(--escura-fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* nunca deixar a pagina rolar de lado */
main { overflow-x: clip; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
strong { font-weight: 700; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

::selection { background: var(--acao); color: var(--botao-tinta); }

.pula-para-conteudo {
  position: absolute; inset-block-start: -100vh; inset-inline-start: var(--e-4);
  z-index: 100; padding: var(--e-3) var(--e-5);
  background: var(--acao); color: var(--botao-tinta); font-weight: 700;
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.pula-para-conteudo:focus { inset-block-start: 0; }

.oculto-visual {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- estrutura --------------------------------------------------- */
.env {
  inline-size: min(100% - (var(--gutter) * 2), var(--largura));
  margin-inline: auto;
}
.env--estreita { inline-size: min(100% - (var(--gutter) * 2), 58rem); margin-inline: auto; }

.secao { padding-block: var(--secao); }
.secao--clara { background: var(--clara); color: var(--tinta-clara); }
.secao--clara h2, .secao--clara h3 { color: var(--tinta-clara); }
.secao--marca { background: var(--marca); }

/* seguranca de performance abaixo da dobra */
.adiar { content-visibility: auto; contain-intrinsic-size: auto 900px; }

.eyebrow {
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acao);
  margin-block-end: var(--e-4);
}
.secao--clara .eyebrow { color: var(--apoio); }

.titulo-secao { font-size: var(--t-2xl); max-inline-size: 22ch; }
.linha-apoio {
  font-size: var(--t-md); color: var(--tinta-2);
  max-inline-size: var(--leitura); margin-block-start: var(--e-5);
}
.secao--clara .linha-apoio { color: var(--tinta-clara-2); }

/* ---------- botoes ------------------------------------------------------ */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-block-size: 3rem; min-inline-size: 3rem;              /* area de toque 44px+ */
  padding: var(--e-3) var(--e-6);
  font-family: var(--fonte-corpo); font-size: var(--t-sm); font-weight: 900;
  letter-spacing: .02em; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--transicao), background-color var(--transicao),
              border-color var(--transicao), color var(--transicao);
}
.bt svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

.bt--primario { background: var(--acao); color: var(--botao-tinta); }
.bt--primario:hover { background: #63cbf5; }
.bt--primario:active { transform: scale(.97); }

.bt--vazado { background: transparent; color: var(--tinta); border-color: var(--linha); }
.bt--vazado:hover { border-color: var(--acao); color: var(--acao); }
.bt--vazado:active { transform: scale(.97); }

.secao--clara .bt--vazado { color: var(--tinta-clara); border-color: var(--linha-clara); }
.secao--clara .bt--vazado:hover { color: var(--apoio); border-color: var(--apoio); }

/* ---------- barra superior ---------------------------------------------- */
.barra {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: var(--escura);
  border-block-end: 1px solid var(--linha);
}
.barra__env {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-block-size: var(--altura-barra);
}
/* min-block-size 2.75rem = 44px de area de toque em todo link, nao so no CTA */
.marca-logo {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  min-block-size: 2.75rem;
}
.marca-logo__sub { align-self: flex-end; padding-block-end: .28rem; }
.marca-logo__nome {
  font-family: var(--fonte-corpo); font-weight: 900; font-size: 1.45rem;
  letter-spacing: -.04em; color: var(--tinta); line-height: 1;
}
.marca-logo__nome b { color: var(--acao); font-weight: 900; }
.marca-logo__sub {
  font-family: var(--fonte-corpo); font-size: .62rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2);
}
.barra .bt { padding-inline: var(--e-4); }
.barra__rotulo { display: none; }
@media (min-width: 40rem) { .barra__rotulo { display: inline; } .barra .bt { padding-inline: var(--e-5); } }

/* navegacao entre paginas */
.navi { display: none; }
@media (min-width: 64rem) {
  .navi { display: flex; gap: var(--e-6); margin-inline-start: auto; margin-inline-end: var(--e-6); }
  .navi a {
    font-size: var(--t-sm); font-weight: 700; text-decoration: none; color: var(--tinta-2);
    padding-block: var(--e-2); border-block-end: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
  }
  .navi a:hover { color: var(--tinta); }
  .navi a[aria-current="page"] { color: var(--tinta); border-block-end-color: var(--acao); }
}

/* ---------- ATO 1: primeira dobra --------------------------------------- */
.dobra { position: relative; isolation: isolate; overflow: hidden; }
.dobra__fundo {
  position: absolute; inset: 0; z-index: -2;
}
.dobra__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 58%; }
/* no celular o veu e so vertical: veu lateral forte apagaria a foto inteira */
.dobra::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(30 33 39 / .96) 30%, rgb(30 33 39 / .74) 56%, rgb(30 33 39 / .22) 100%);
}
@media (min-width: 52rem) {
  .dobra::after {
    background:
      linear-gradient(to right, rgb(30 33 39 / .93) 0%, rgb(30 33 39 / .72) 46%, rgb(30 33 39 / .25) 78%, rgb(30 33 39 / .10) 100%),
      linear-gradient(to top, rgb(30 33 39 / .92) 0%, rgb(30 33 39 / .10) 46%);
  }
}
.dobra__env {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-block-size: min(46rem, calc(100svh - var(--altura-barra)));
  padding-block: var(--e-9) var(--e-8);
}
.dobra h1 { font-size: var(--t-3xl); max-inline-size: 17ch; }
.dobra__sub {
  font-size: var(--t-md); color: var(--tinta-2);
  max-inline-size: 40ch; margin-block-start: var(--e-5);
}
.dobra__acoes {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin-block-start: var(--e-6);
}
.dobra__provinha {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  margin-block-start: var(--e-6); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linha);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.dobra__provinha li { display: flex; align-items: center; gap: var(--e-2); }
.dobra__provinha li::before {
  content: ""; inline-size: .4rem; block-size: .4rem; border-radius: 50%;
  background: var(--acao); flex: none;
}

/* as duas portas: qual e a situacao do visitante */
.portas {
  display: grid; gap: var(--e-3);
  grid-template-columns: 1fr;
  margin-block-start: var(--e-7);
}
@media (min-width: 40rem) { .portas { grid-template-columns: 1fr 1fr; gap: var(--e-4); } }
.porta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5); min-block-size: 3.5rem;
  background: rgb(37 41 48 / .78);
  border: 1px solid var(--linha); border-radius: var(--r-2);
  text-decoration: none; color: var(--tinta);
  font-weight: 700; font-size: var(--t-sm);
  backdrop-filter: blur(6px);
  transition: border-color var(--transicao), background-color var(--transicao), transform var(--transicao);
}
.porta:hover { border-color: var(--acao); background: rgb(37 41 48 / .95); }
.porta:active { transform: scale(.99); }
.porta span { display: block; }
.porta small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--tinta-2); margin-block-start: .15rem; }
.porta svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--acao); flex: none; }

/* ---------- ATO 2: faixa de prova --------------------------------------- */
.provas { display: grid; gap: var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .provas { grid-template-columns: repeat(3, 1fr); gap: var(--e-8); } }
.prova__num {
  font-family: var(--fonte-corpo); font-weight: 900;
  font-size: var(--t-2xl); line-height: 1; letter-spacing: -.03em;
  color: var(--acao);
  font-variant-numeric: tabular-nums;
}
.prova__rot {
  font-size: var(--t-xs); font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); margin-block-start: var(--e-3);
}
/* :not([class]) pega so o paragrafo de descricao. Sem isso esta regra vence
   .prova__num por especificidade e o numero grande sai em tamanho de corpo. */
.prova p:not([class]) { font-size: var(--t-sm); color: var(--tinta-2); margin-block-start: var(--e-2); max-inline-size: 34ch; }
.prova { padding-block-start: var(--e-4); border-block-start: 2px solid var(--linha); }

/* ---------- cena travada (sticky) --------------------------------------- */
.cena { position: relative; }
.cena__palco {
  position: sticky; inset-block-start: var(--altura-barra);
  block-size: calc(100svh - var(--altura-barra));
  overflow: hidden;
}
.cena__palco img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cena__palco::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(30 33 39 / .90) 6%, rgb(30 33 39 / .15) 62%);
}

/* legendas que passam ao lado da cena travada */
.cena__legendas { position: relative; margin-block-start: calc(-100svh + var(--altura-barra)); }
/* uma tela inteira por legenda: com menos que isso duas aparecem juntas e a
   troca deixa de ser troca */
.legenda {
  min-block-size: 100svh;
  display: flex; align-items: center;
  padding-inline: var(--gutter);
}
.legenda__caixa {
  inline-size: min(100%, 30rem);
  background: rgb(30 33 39 / .90);
  border: 1px solid var(--linha); border-inline-start: 3px solid var(--acao);
  border-radius: var(--r-2);
  padding: var(--e-5) var(--e-5);
  backdrop-filter: blur(8px);
}
.legenda h3 { font-size: var(--t-lg); }
.legenda p { font-size: var(--t-sm); color: var(--tinta-2); margin-block-start: var(--e-3); }
.legenda__tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acao);
  margin-block-end: var(--e-3);
}

/* ---------- cartoes de oferta ------------------------------------------- */
.ofertas { display: grid; gap: var(--e-5); grid-template-columns: 1fr; margin-block-start: var(--e-8); }
@media (min-width: 52rem) { .ofertas { grid-template-columns: repeat(3, 1fr); } }
.oferta {
  display: flex; flex-direction: column;
  background: var(--marca); border: 1px solid var(--linha); border-radius: var(--r-3);
  overflow: hidden; text-decoration: none; color: var(--tinta);
  transition: transform var(--transicao), border-color var(--transicao);
}
.oferta:hover { border-color: var(--acao); }
.oferta:active { transform: scale(.995); }
.oferta img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.oferta__corpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.oferta h3 { font-size: var(--t-lg); }
.oferta p { font-size: var(--t-sm); color: var(--tinta-2); }
.oferta__link {
  margin-block-start: auto; padding-block-start: var(--e-3);
  font-family: var(--fonte-corpo); font-size: var(--t-xs); font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acao);
  display: inline-flex; align-items: center; gap: var(--e-2);
}

/* ---------- ATO 3: corte tecnico da membrana ---------------------------- */
.corte-cena { background: var(--escura); padding-block: var(--secao); }
.membrana__grade { display: grid; gap: var(--e-7); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64rem) { .membrana__grade { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }

.corte {
  position: relative; inline-size: 100%; aspect-ratio: 5 / 4;
  background: linear-gradient(180deg, #2b303a 0%, #20242b 100%);
  border: 1px solid var(--linha); border-radius: var(--r-3);
  overflow: hidden;
}
.corte svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

/* estado final por padrao: sem suporte a scroll-driven, o desenho ja esta pronto */
.camada { transform-box: fill-box; transform-origin: left center; }

.membrana__lista { counter-reset: v; margin-block-start: var(--e-6); }
.membrana__lista li {
  position: relative; padding-inline-start: var(--e-7); padding-block: var(--e-3);
  border-block-end: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tinta-2);
}
.membrana__lista li::before {
  counter-increment: v; content: counter(v, decimal-leading-zero);
  position: absolute; inset-inline-start: 0;
  font-family: var(--fonte-corpo); font-weight: 900; font-size: var(--t-xs);
  color: var(--acao); letter-spacing: .08em;
}
.membrana__lista li b { color: var(--tinta); }

/* ---------- ATO 3: passos com numero grande travado --------------------- */
.passos { display: grid; gap: var(--e-6); grid-template-columns: 1fr; }
@media (min-width: 64rem) { .passos { grid-template-columns: 9rem 1fr; gap: var(--e-9); align-items: start; } }
.passos__fixo { display: none; }
@media (min-width: 64rem) {
  .passos__fixo {
    display: block; position: sticky; inset-block-start: calc(var(--altura-barra) + var(--e-8));
    font-family: var(--fonte-corpo); font-weight: 900; font-size: 8rem; line-height: .8;
    color: transparent; -webkit-text-stroke: 2px var(--linha-clara);
    font-variant-numeric: tabular-nums;
  }
}
.passo {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-4) var(--e-5);
  padding-block: var(--e-6); border-block-start: 1px solid var(--linha-clara);
}
.passo__n {
  font-family: var(--fonte-corpo); font-weight: 900; font-size: var(--t-sm);
  color: var(--apoio); letter-spacing: .1em; padding-block-start: .35rem;
}
.passo h3 { font-size: var(--t-lg); }
.passo p { grid-column: 2; font-size: var(--t-sm); color: var(--tinta-clara-2); max-inline-size: 52ch; }

/* ---------- ATO 4: objecoes --------------------------------------------- */
.objecoes { display: grid; gap: var(--e-5); grid-template-columns: 1fr; margin-block-start: var(--e-8); }
@media (min-width: 52rem) { .objecoes { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
.objecao {
  padding: var(--e-6); background: var(--marca);
  border: 1px solid var(--linha); border-radius: var(--r-3);
}
.objecao h3 {
  font-family: var(--fonte-corpo); font-weight: 900; font-size: var(--t-md);
  letter-spacing: -.01em; line-height: 1.35; color: var(--tinta);
}
.objecao h3::before { content: "“"; color: var(--acao); }
.objecao h3::after  { content: "”"; color: var(--acao); }
.objecao p { font-size: var(--t-sm); color: var(--tinta-2); margin-block-start: var(--e-4); }

/* grifo que se preenche */
.grifo {
  color: var(--tinta); font-weight: 700;
  background-image: linear-gradient(var(--acao), var(--acao));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 2px;
  padding-block-end: .1em;
}

/* ---------- prova social ------------------------------------------------ */
.depoimentos { display: grid; gap: var(--e-6); grid-template-columns: 1fr; margin-block-start: var(--e-8); }
@media (min-width: 52rem) { .depoimentos { grid-template-columns: 1fr 1fr; } }
.depoimento {
  display: flex; flex-direction: column; gap: var(--e-5);
  padding: var(--e-6); background: var(--clara); color: var(--tinta-clara);
  border-radius: var(--r-3);
}
.depoimento blockquote { font-size: var(--t-md); line-height: 1.5; }
.depoimento blockquote p + p { margin-block-start: var(--e-4); }
.depoimento figcaption { display: flex; align-items: center; gap: var(--e-4); margin-block-start: auto; }
.depoimento img { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; object-fit: cover; flex: none; }
.depoimento cite { font-style: normal; font-weight: 900; font-size: var(--t-sm); }
.depoimento cite small { display: block; font-weight: 400; color: var(--tinta-clara-2); }
.depoimento__fonte { font-size: var(--t-xs); color: var(--tinta-clara-2); }

/* ---------- FAQ --------------------------------------------------------- */
.faq { margin-block-start: var(--e-8); }
.faq details { border-block-end: 1px solid var(--linha-clara); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-5);
  padding-block: var(--e-5); min-block-size: 3rem;
  font-family: var(--fonte-corpo); font-weight: 900; font-size: var(--t-md);
  line-height: 1.4; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; inline-size: 1rem; block-size: 1rem; margin-block-start: .45rem;
  border-inline-end: 2px solid var(--apoio); border-block-end: 2px solid var(--apoio);
  transform: rotate(45deg); transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p {
  padding-block-end: var(--e-6); max-inline-size: var(--leitura);
  font-size: var(--t-sm); color: var(--tinta-clara-2);
}
.faq details p + p { margin-block-start: var(--e-4); }

/* ---------- ATO 5: frase sozinha e fechamento --------------------------- */
.frase { padding-block: clamp(5rem, 3rem + 12vw, 12rem); text-align: center; }
.frase p {
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -.02em;
  max-inline-size: 20ch; margin-inline: auto; text-wrap: balance;
}
.frase small {
  display: block; margin-block-start: var(--e-5);
  font-family: var(--fonte-corpo); font-size: var(--t-xs); font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2);
}

.fechamento { position: relative; isolation: isolate; overflow: hidden; }
.fechamento__fundo { position: absolute; inset: 0; z-index: -2; }
.fechamento__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fechamento::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgb(5 87 131 / .93), rgb(30 33 39 / .88));
}
.fechamento__env { padding-block: var(--secao); }
.fechamento h2 { font-size: var(--t-2xl); max-inline-size: 20ch; }
.fechamento p { font-size: var(--t-md); color: var(--tinta-2); max-inline-size: 46ch; margin-block-start: var(--e-5); }
.fechamento .bt { margin-block-start: var(--e-6); }
.fechamento__dados {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin-block-start: var(--e-7); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tinta-2);
}

/* ---------- rodape ------------------------------------------------------ */
.rodape { background: var(--escura); border-block-start: 1px solid var(--linha); padding-block: var(--e-8) var(--e-9); }
.rodape__grade { display: grid; gap: var(--e-7); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e-8); } }
.rodape h2 { font-family: var(--fonte-corpo); font-size: var(--t-xs); font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); margin-block-end: var(--e-4); }
.rodape address { font-style: normal; font-size: var(--t-sm); color: var(--tinta-2); line-height: 2.2; }
.rodape address a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  color: var(--tinta); text-decoration: none; font-weight: 700;
}
.rodape address a:hover { color: var(--acao); }
.rodape ul a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  font-size: var(--t-sm); color: var(--tinta-2); text-decoration: none;
}
.rodape ul a:hover { color: var(--acao); }
.rodape__fim {
  margin-block-start: var(--e-8); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linha);
  font-size: var(--t-xs); color: var(--tinta-2);
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); justify-content: space-between;
}

/* ---------- botao fixo do celular --------------------------------------- */
.fixo {
  position: fixed; z-index: 60;
  inset-inline: 0; inset-block-end: 0;
  display: flex; justify-content: center;
  /* o veu evita que o botao pouse em cima de uma linha de texto pela metade */
  padding: var(--e-8) var(--gutter) calc(var(--e-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--escura-fundo) 42%, rgb(30 33 39 / .82) 68%, transparent 100%);
  transform: translateY(150%);
  transition: transform 280ms cubic-bezier(.2,.7,.3,1), opacity 200ms linear;
  opacity: 0;
  pointer-events: none;
}
.fixo.esta-visivel { transform: translateY(0); opacity: 1; pointer-events: auto; }
.fixo .bt { inline-size: 100%; box-shadow: var(--sombra-2); }
@media (min-width: 64rem) { .fixo { display: none; } }

/* ---------- pagina interna: cabecalho curto ----------------------------- */
.capa { position: relative; isolation: isolate; overflow: hidden; }
.capa__fundo { position: absolute; inset: 0; z-index: -2; }
.capa__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 55%; }
.capa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgb(30 33 39 / .94) 12%, rgb(30 33 39 / .62) 70%, rgb(30 33 39 / .3) 100%);
}
.capa__env { padding-block: clamp(3.5rem, 2rem + 9vw, 8rem); }
.capa h1 { font-size: var(--t-2xl); max-inline-size: 20ch; }
/* :not([class]) preserva a trilha, que tambem e um <p> dentro da capa */
.capa p:not([class]) { font-size: var(--t-md); color: var(--tinta-2); max-inline-size: 48ch; margin-block-start: var(--e-5); }
.capa .bt { margin-block-start: var(--e-6); }

.trilha { font-size: var(--t-xs); color: var(--tinta-2); margin-block-end: var(--e-4); }
.trilha a {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  color: var(--tinta-2); text-decoration: none;
}
.trilha a:hover { color: var(--acao); }

/* ---------- blocos de texto tecnico ------------------------------------- */
.texto { max-inline-size: var(--leitura); }
.texto p + p { margin-block-start: var(--e-5); }
.texto h3 { font-size: var(--t-lg); margin-block-start: var(--e-7); margin-block-end: var(--e-4); }

.duas-colunas { display: grid; gap: var(--e-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64rem) { .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--e-9); } }

.figura img { inline-size: 100%; border-radius: var(--r-3); }
.figura figcaption { font-size: var(--t-xs); color: var(--tinta-2); margin-block-start: var(--e-3); }
.secao--clara .figura figcaption { color: var(--tinta-clara-2); }

/* galeria de obra */
.galeria { display: grid; gap: var(--e-4); grid-template-columns: 1fr; margin-block-start: var(--e-8); }
@media (min-width: 40rem) { .galeria { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }
.obra { position: relative; border-radius: var(--r-3); overflow: hidden; background: var(--marca); }
.obra img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.obra figcaption { padding: var(--e-4) var(--e-5) var(--e-5); }
.obra h3 { font-family: var(--fonte-corpo); font-size: var(--t-sm); font-weight: 900; }
.obra p { font-size: var(--t-xs); color: var(--tinta-2); margin-block-start: var(--e-2); }

/* lista de itens tecnicos */
.itens { display: grid; gap: var(--e-5); grid-template-columns: 1fr; margin-block-start: var(--e-7); }
@media (min-width: 52rem) { .itens { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
.item { padding-block-start: var(--e-4); border-block-start: 2px solid var(--linha); }
.secao--clara .item { border-block-start-color: var(--linha-clara); }
.item h3 { font-family: var(--fonte-corpo); font-size: var(--t-md); font-weight: 900; }
.item p { font-size: var(--t-sm); color: var(--tinta-2); margin-block-start: var(--e-3); }
.secao--clara .item p { color: var(--tinta-clara-2); }

/* ---------- ANIMACAO: so entrada, so transform/opacity/clip-path -------- */
/* Sem suporte a scroll-driven, tudo fica no estado final. Nada nasce invisivel. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: entra linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    .revela-linha > * {
      animation: entra-linha linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
    .revela-linha > *:nth-child(2) { animation-range: entry 9% cover 34%; }
    .revela-linha > *:nth-child(3) { animation-range: entry 13% cover 38%; }

    .dobra__fundo img {
      animation: respira linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .grifo {
      animation: preenche linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }
    /* as camadas do corte tecnico abrem uma a uma conforme o desenho sobe */
    .corte { view-timeline-name: --corte; view-timeline-axis: block; }
    .camada { animation: abre linear both; animation-timeline: --corte; }
    .camada--1   { animation-range: cover 14% cover 34%; }
    .camada--2   { animation-range: cover 27% cover 47%; }
    .camada--3   { animation-range: cover 40% cover 60%; }
    .camada--rot { animation-range: cover 53% cover 71%; }
  }
}

@keyframes entra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entra-linha {
  from { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }
}
@keyframes respira {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@keyframes preenche {
  from { background-size: 0% 2px; }
  to   { background-size: 100% 2px; }
}
@keyframes abre {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* contador: o valor final ja esta no HTML, o JS so anima se puder */
.conta { font-variant-numeric: tabular-nums; }

/* ---------- movimento reduzido ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
  }
  .grifo { background-size: 100% 2px; }
  .camada { opacity: 1; transform: none; }
  .cena__palco { position: static; block-size: auto; }
  .cena__legendas { margin-block-start: 0; }
  .legenda { min-block-size: 0; padding-block: var(--e-6); }
  .passos__fixo { position: static; }
}

/* ---------- impressao --------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .barra, .fixo, .dobra__fundo, .fechamento__fundo, .capa__fundo { display: none; }
  .dobra::after, .fechamento::after, .capa::after { display: none; }
  .secao, .dobra__env, .capa__env, .fechamento__env { padding-block: 1rem; }
  .cena__palco { position: static; block-size: auto; }
  .cena__legendas { margin-block-start: 0; }
  .legenda { min-block-size: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
  .faq details { open: true; }
}