/* ---------- Tokens ---------- */
:root{
  --branco:#ffffff;
  --preto:#000000;
  --cinza:#6e6e6e;         /* "travado", texto secundário sobre branco */
  --cinza-fraco:#b9b9b9;   /* traços sobre preto */

  /* Acento: verde-limão técnico.
     Alternativa em avaliação: #ff5a1f (laranja de sinalização).
     Trocar só aqui. Ver regra de uso na spec, seção 3.1. */
  --acento:#c8ff00;

  --fs-hero:clamp(2.75rem, 10.5vw, 9rem);
  --fs-h2:clamp(2rem, 5.5vw, 4.5rem);
  --fs-h3:clamp(1.35rem, 2.6vw, 2rem);
  --fs-body:clamp(1.05rem, 1.15vw, 1.2rem);
  --fs-label:0.7rem;

  --pad-secao:clamp(5rem, 12vw, 11rem);
  --gutter:clamp(1.25rem, 5vw, 5rem);
  --maxw:1440px;

  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--branco);
  color:var(--preto);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none}
:focus-visible{outline:3px solid var(--preto);outline-offset:3px}
.secao--escura :focus-visible,
.rodape :focus-visible{outline-color:var(--acento)}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.secao{position:relative;padding-block:var(--pad-secao);background:var(--branco);color:var(--preto)}
.secao--escura{background:var(--preto);color:var(--branco)}

/* Costura entre duas seções escuras adjacentes.
   As alturas das seções são fracionárias (clamp com vw), e o arredondamento
   sub-pixel deixa passar uma linha do branco do body entre as caixas. Um
   pixel inteiro de sobreposição fecha a fresta em qualquer largura e em
   qualquer densidade de tela (a fresta é sempre menor que 1px de CSS); o
   padding compensa o pixel para a altura visual não mudar. */
.secao--escura + .secao--escura{
  margin-top:-1px;
  padding-top:calc(var(--pad-secao) + 1px);
}

.secao__num{
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cinza);
  display:flex;gap:1.25rem;align-items:center;
  padding-bottom:1rem;margin-bottom:clamp(2rem,5vw,4rem);
  border-bottom:1px solid currentColor;
}
.secao--escura .secao__num{color:var(--cinza-fraco)}
.secao__num span:last-child{margin-left:auto}

.secao__titulo{
  font-size:var(--fs-h2);
  font-weight:900;
  line-height:0.98;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* ---------- Cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gutter);
  background:var(--branco);
  border-bottom:1px solid var(--preto);
}
.topo__marca img{width:clamp(84px,9vw,120px);height:auto}
.topo__acoes{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.25rem)}

/* ---------- Seletor de idioma ---------- */
.idiomas{display:flex;align-items:center;gap:.45rem}
.idioma{
  display:block;line-height:0;
  border:1px solid var(--cinza);
  /* A bandeira inativa fica dessaturada para nao competir com o CTA, que e
     o unico elemento colorido do cabecalho. */
  filter:saturate(.15);opacity:.55;
  transition:filter .15s ease, opacity .15s ease, border-color .15s ease;
}
.idioma:hover,.idioma:focus-visible{filter:none;opacity:1}
.idioma.is-atual{filter:none;opacity:1;border-color:var(--preto)}
.idioma svg{display:block;width:clamp(20px,2.2vw,24px);height:auto}

@media (max-width:420px){
  .topo__acoes{gap:.6rem}
  .btn-cta--pequeno{padding:.55rem .75rem;font-size:.68rem}
}

/* ---------- CTA ---------- */
.btn-cta{
  display:inline-block;
  font-family:var(--mono);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--preto);
  background:var(--acento);
  border:2px solid var(--preto);   /* garante contraste do botão sobre branco */
  padding:1.15rem 2rem;
  transition:transform .15s ease;
}
.btn-cta:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--preto)}
.secao--escura .btn-cta{border-color:var(--acento)}
.secao--escura .btn-cta:hover{box-shadow:4px 4px 0 var(--branco)}
.btn-cta--pequeno{padding:.6rem 1rem;font-size:.75rem}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------- Revelação ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:calc(var(--atraso, 0) * 90ms);
}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- Desenho de linha ---------- */
/* Sem vector-effect:non-scaling-stroke: combinada com pathLength=1 ela quebra
   o traço em segmentos em vez de desenhar uma linha contínua (w3c/svgwg#323).
   Consequência aceita: em SVG com preserveAspectRatio=none a espessura do
   traço é distorcida pela escala. Mantenha a distorção pequena - não estique
   um viewBox muito além da proporção em que ele será renderizado. */
.traco{
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--draw, 1));
  fill:none;
}
.js [data-draw]{--draw:0}
.js [data-draw="reveal"].is-visible{--draw:1}
.js [data-draw="reveal"] .traco{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-draw]{--draw:1}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(4rem, 10vw, 8rem) clamp(5rem, 12vw, 10rem)}
.hero__titulo{
  font-size:var(--fs-hero);
  font-weight:900;
  line-height:0.9;
  letter-spacing:-0.035em;
  text-wrap:balance;
  max-width:16ch;
}
.hero__titulo-2{
  display:block;
  margin-top:.35em;
  font-size:.44em;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.02em;
  max-width:24ch;
}
.hero__fio{
  display:block;width:100%;height:60px;
  margin-block:clamp(2rem,5vw,3.5rem);
  color:var(--preto);
}
.hero__linha{max-width:56ch;margin-bottom:2.5rem;color:var(--cinza);font-size:var(--fs-body)}

@media (max-width:640px){
  .hero__titulo{max-width:none}
  .hero__fio{height:36px}
}

/* ---------- Problema ---------- */
.problema__fio{
  display:block;width:100%;height:120px;
  margin-block:clamp(2.5rem,6vw,4.5rem) 0;
}
.sintomas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  /* O gap separa o texto da regua do item vizinho. Com o padding-right de
     1.5rem no proprio item, a regua fica com folga igual dos dois lados, e o
     primeiro item continua encostado na margem, alinhado com o titulo. */
  column-gap:1.5rem;
  border-top:1px solid var(--cinza-fraco);
}
.sintoma{
  padding:1.75rem 1.5rem 2.5rem 0;
  border-right:1px solid var(--cinza-fraco);
}
.sintoma:last-child{border-right:0}
.sintoma__rotulo{
  display:block;
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--acento);
  margin-bottom:.85rem;
}
.sintoma p{font-size:var(--fs-body);line-height:1.4;max-width:26ch}
.problema__fecho{
  margin-top:clamp(3rem,7vw,5rem);
  max-width:52ch;
  display:grid;gap:1.25rem;
  font-size:clamp(1.15rem,1.7vw,1.4rem);
}

@media (max-width:900px){
  .sintomas{grid-template-columns:repeat(2,1fr)}
  .sintoma{padding-inline:0 1.25rem}
  .sintoma:nth-child(2){border-right:0}
  .sintoma:nth-child(3),.sintoma:nth-child(4){border-top:1px solid var(--cinza-fraco)}
}
@media (max-width:560px){
  .sintomas{grid-template-columns:1fr}
  .sintoma{border-right:0;border-top:1px solid var(--cinza-fraco);padding-block:1.5rem}
  .sintoma:first-child{border-top:0}
  .problema__fio{height:80px}
}

/* ---------- Comparativo ---------- */
.comparativo__grade{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;align-items:stretch;
}
.coluna{
  padding:2.5rem 2rem;
  border:2px solid var(--preto);
}
.coluna__titulo{
  font-family:var(--mono);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--cinza);
  margin-bottom:1.25rem;
}
.coluna p{max-width:34ch;font-size:var(--fs-body);line-height:1.5}
.coluna strong{font-weight:700}

.coluna--delt .coluna__titulo{color:var(--preto)}

@media (max-width:900px){
  .comparativo__grade{grid-template-columns:1fr}
  .coluna{padding:2rem 1.5rem}
}

/* ---------- Método ---------- */
.etapas{list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0}
.etapa{
  display:grid;
  grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--preto);
}
.etapa__num{
  font-size:clamp(3.5rem,7vw,7rem);
  font-weight:900;
  line-height:0.85;
  letter-spacing:-0.05em;
}
.etapa__corpo{max-width:62ch;display:grid;gap:1.15rem}
.etapa__titulo{
  font-size:var(--fs-h3);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
}
.etapa__fio{display:block;width:100%;height:40px;margin-block:.25rem}
.etapa__destaque{font-size:1.15rem}
.tecnologias{margin:0;padding:0;list-style:none;display:grid;gap:.85rem}
.tecnologias li{
  padding-left:1.5rem;position:relative;
  border-left:2px solid var(--preto);
  padding-block:.15rem;
}

@media (max-width:760px){
  .etapa{grid-template-columns:1fr;gap:1rem}
  .etapa__num{font-size:3rem}
}

/* ---------- Medição ---------- */
.medicao__grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
  margin-top:clamp(2.5rem,6vw,4rem);
}
.medicao__texto{display:grid;gap:1.25rem;max-width:46ch}
.medicao__frase{
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:900;
  letter-spacing:-0.025em;
  line-height:1.05;
}
.grafico{margin:0}
.grafico__svg{display:block;width:100%;height:auto}
.grafico__legenda{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  margin-top:1rem;
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.grafico__chave{display:flex;align-items:center;gap:.55rem}
.grafico__chave::before{content:"";width:1.5rem;height:3px;background:currentColor}
.grafico__chave--antes{color:var(--cinza-fraco)}
.grafico__chave--marco{color:var(--cinza-fraco)}
.grafico__chave--marco::before{height:0;border-top:1px dashed currentColor}
.grafico__chave--depois{color:var(--acento)}
.grafico__nota{
  margin-top:1.25rem;
  max-width:52ch;
  font-size:.9rem;
  line-height:1.45;
  color:var(--cinza-fraco);
}

@media (max-width:860px){
  .medicao__grade{grid-template-columns:1fr}
}

/* O motor de desenho (.traco) aplica a mesma fração de --draw a todo path
   dentro de um [data-draw]. Com duas linhas no mesmo SVG isso as desenharia
   em paralelo (a de acento já começaria a aparecer antes da cinza terminar).
   Aqui a cinza usa a primeira metade do scroll e o acento a segunda metade,
   para que a de acento só continue depois que a cinza tiver parado - como
   pede o texto da seção. Seletor com 3 classes garante a precedência sobre
   a regra genérica .traco, sem depender da ordem no arquivo. */
.grafico__svg .traco.grafico__linha--antes{
  stroke-dashoffset:calc(1 - min(1, var(--draw, 1) * 2));
}
.grafico__svg .traco.grafico__linha--depois{
  stroke-dashoffset:calc(1 - max(0, var(--draw, 1) * 2 - 1));
}

.capacidade__corpo{
  margin-top:clamp(2.5rem,6vw,4rem);
  max-width:56ch;display:grid;gap:1.75rem;
}
.capacidade__fecho{
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--cinza);
}
.capacidade__fecho strong{font-weight:900;color:var(--preto)}

/* ---------- Casos (oculta) ---------- */
.casos__grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:1.5rem;margin-top:clamp(2.5rem,6vw,4rem);
}
.caso{border:2px solid var(--preto);padding:2rem}
.caso__titulo{font-size:var(--fs-h3);font-weight:900;letter-spacing:-0.02em;margin-bottom:1.5rem}
.caso__campos{margin:0;display:grid;gap:.35rem}
.caso__campos dt{
  font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--cinza);
  margin-top:1rem;
}
.caso__campos dd{margin:0;font-size:var(--fs-body);line-height:1.4}
.caso__antes{color:var(--cinza)}
.caso__depois{font-weight:900;font-size:1.35rem}

/* ---------- Chamada final ---------- */
.fechamento__titulo{
  font-size:clamp(2.25rem,6.5vw,5.5rem);
  font-weight:900;
  line-height:0.95;
  letter-spacing:-0.03em;
  max-width:18ch;
  text-wrap:balance;
}
.fechamento__linha{
  margin-block:1.75rem 3rem;
  font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--cinza-fraco);
}

/* ---------- Sobre ---------- */
.sobre__corpo{
  margin-top:clamp(2.5rem,6vw,4rem);
  max-width:58ch;display:grid;gap:1.5rem;
}
.sobre__frase{
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-weight:900;line-height:1.05;letter-spacing:-0.025em;
}

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--preto);color:var(--branco);
  border-top:1px solid var(--cinza-fraco);
  padding-block:2.5rem;
}
.rodape__linha{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.5rem 2.5rem;justify-content:space-between;
}
.rodape__marca{width:96px}
.rodape__nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.rodape__nav a{
  font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:0.18em;text-transform:uppercase;
  text-decoration:none;color:var(--cinza-fraco);
}
.rodape__nav a:hover{color:var(--acento)}
.rodape__ano{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:0.18em;color:var(--cinza-fraco)}