@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   OVERCLOCK WEB — direção "Painel Aberto"
   Site cartão de visita. HTML + CSS + JS puros. Sem build, sem framework.

   A metáfora é 100% geométrica e 0% lexical: arco, agulha, régua, marcação e
   algarismo. Nenhuma palavra de automóvel entra no texto que o cliente lê.

   Ordem do arquivo: @font-face → :root → reset → base → utilidades →
   componentes → seções → movimento → media → print
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. FONTES ───────────────────────────── */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/outfit-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallbacks com métricas casadas: a troca de fonte não desloca o texto (CLS 0) */
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 99.5%; descent-override: 26.1%; line-gap-override: 0%; size-adjust: 96.8%;
}
@font-face {
  font-family: 'Chakra Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 104%; descent-override: 29%; line-gap-override: 0%; size-adjust: 95.4%;
}

/* ───────────────────────────── 2. TOKENS ───────────────────────────── */

:root {
  /* cor — amostrada pixel a pixel das artes oficiais */
  --bg:        #0A0F1E;
  --surface:   #101830;
  --line:      #263257;
  --blue:      #2563EB;   /* gráfico apenas: 3,69:1 reprova como texto */
  --cyan:      #22D3EE;
  --text:      #F2F6FF;
  --text-2:    #C3CCE0;
  --muted:     #8C909C;

  /* derivados */
  --bg-2:      #0C1224;
  --well:      #0D1327;
  --bar:       #0D1426;
  --surface-2: #17213E;
  --line-soft: #1A2440;
  --line-2:    #38456E;
  --line-input:#5A6BA3;   /* 3,57:1 no well — WCAG 1.4.11 */
  --cyan-dim:  #0891B2;
  --cyan-lit:  #67E3F5;

  /* washes */
  --tick:       rgba(195,204,224,.14);
  --tick-major: rgba(195,204,224,.30);
  --hairline:   rgba(242,246,255,.05);
  --glow-blue:  rgba(37,99,235,.14);
  --cyan-wash:  rgba(34,211,238,.10);
  --cyan-line:  rgba(34,211,238,.28);

  /* espaço — base 8 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* layout */
  --wrap:    1160px;
  --prose:   62ch;
  --gutter:  clamp(20px, 5vw, 40px);
  --sec-pad: clamp(72px, 9vw, 128px);

  /* raio */
  --r-card:20px; --r-well:12px; --r-tile:14px;
  --r-chip:8px;  --r-pill:999px; --r-focus:4px;
  --chamfer:10px;

  /* sombra — a única projetada do site é a do pill primário */
  --sh-inset:    inset 0 1px 0 var(--hairline);
  --sh-inset-on: inset 0 1px 0 rgba(34,211,238,.22);
  --sh-well:     inset 0 1px 2px rgba(0,0,0,.55);
  --sh-cta:      0 12px 32px -14px rgba(34,211,238,.45);

  /* duração */
  --d-press:90ms; --d-fast:160ms; --d-ui:220ms; --d-move:320ms;
  --d-in:620ms;   --d-count:1100ms; --d-boot:1200ms; --stagger:70ms;

  /* easing */
  --e-out-quint: cubic-bezier(.22,1,.36,1);
  --e-out-expo:  cubic-bezier(.16,1,.30,1);
  --e-ui:        cubic-bezier(.20,0,0,1);
  --e-rev:       cubic-bezier(.34,1.30,.40,1);

  --lift:18px; --lift-lg:26px;

  /* z-index — escada fechada */
  --z-grain:1; --z-rail:5; --z-sticky:20; --z-header:30; --z-skip:60;

  /* tipografia */
  --font-display:'Chakra Petch','Chakra Fallback','Segoe UI',system-ui,sans-serif;
  --font-body:'Outfit','Outfit Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --t-display: clamp(2rem,      1.10rem  + 4.00vw, 4.5rem);
  --t-h2:      clamp(1.625rem,  1.333rem + 1.30vw, 2.5rem);
  --t-h3:      clamp(1.25rem,   1.167rem + 0.37vw, 1.5rem);
  --t-stat:    clamp(2.25rem,   1.50rem  + 3.30vw, 3.75rem);
  --t-lead:    clamp(1.0625rem, 0.979rem + 0.37vw, 1.3125rem);
  --t-body:    clamp(1rem,      0.958rem + 0.19vw, 1.125rem);
  --t-small:   clamp(0.875rem,  0.854rem + 0.09vw, 0.9375rem);
  --t-eyebrow: clamp(0.75rem,   0.729rem + 0.09vw, 0.8125rem);
}

/* A faixa clara — escopada, nunca global. Existe uma no site.
   #0891B2 sobre #F2F6FF dá 3,40:1 e reprova; #0E7490 dá 4,95:1. */
[data-plate] {
  --plate-bg:     #F2F6FF;
  --plate-card:   #FFFFFF;
  --plate-line:   #D4DCEC;
  --plate-ink:    #0A0F1E;
  --plate-muted:  #4A5264;
  --plate-accent: #0E7490;
  --plate-focus:  #155E75;
  --plate-tick:   rgba(10,15,30,.16);
}

/* ───────────────────────────── 3. RESET ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-body)/1.65 var(--font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--bg); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
p { text-wrap: pretty; hyphens: none; }

/* ───────────────────────── 4. FOCO E UTILIDADES ───────────────────── */

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-focus);
}
[data-plate] :focus-visible { outline-color: var(--plate-focus); }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: var(--z-skip);
  padding: var(--s3) var(--s5);
  background: var(--cyan); color: var(--bg);
  border-radius: var(--r-chip);
  font: 700 16px/1 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--prose); }

/* ─────────────────────── 5. GRÃO, RÉGUAS, ARESTAS ─────────────────── */

/* Grão estático. Sem mix-blend-mode: ele cria stacking context, briga com
   view-transition-name e paga composição de tela cheia por frame. */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A régua: uma receita, girada. O motivo estrutural do site. */
.rule {
  height: 1px; border: 0;
  background: repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px);
}
[data-plate] .rule {
  background: repeating-linear-gradient(to right, var(--plate-tick) 0 1px, transparent 1px 8px);
}

/* Aresta de tampo: separador full-bleed de duas linhas */
.edge { border-top: 1px solid var(--line); box-shadow: 0 1px 0 var(--hairline); }

/* ──────────────────────── 6. RÉGUA LATERAL FIXA ───────────────────── */

.rail { display: none; }

/* A régua só aparece quando CABE fora da coluna de texto.
   O conteúdo começa em max(0,(100vw − 1160)/2) + 40px, e o rótulo vertical
   termina 65px depois da borda da régua. Abaixo de 1242px de viewport não
   sobra essa folga e o rótulo era pintado POR CIMA do parágrafo — medido:
   28 linhas de texto atravessadas a 1024px, faixa que inclui iPad mini,
   Air e Pro em paisagem. Em vez de remendar, o gatilho subiu. */
@media (min-width: 1242px) {
  .rail {
    display: block;
    position: fixed;
    left: max(40px, calc((100vw - var(--wrap)) / 2 - 56px));
    top: 96px; bottom: 32px;
    width: 1px; z-index: var(--z-rail);
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--tick) 0 1px, transparent 1px 8px);
  }
  .rail__fill {
    position: absolute; inset: 0;
    background: var(--cyan);
    transform: scaleY(0); transform-origin: top;
  }
  .rail__read {
    position: absolute; left: 14px; top: 0;
    display: flex; align-items: baseline; gap: 8px;
    white-space: nowrap;
    font: 600 11px/1 var(--font-display);
    letter-spacing: .32em; text-transform: uppercase;
    color: var(--muted);
    opacity: 0; transition: opacity 140ms var(--e-ui);
    writing-mode: vertical-rl;
  }
  .rail__read.is-on { opacity: 1; }
  .rail__read b { color: var(--cyan); font-weight: 600; }
}

/* ───────────────────────────── 7. HEADER ──────────────────────────── */

/* ATENÇÃO — não coloque `view-transition-name` neste elemento.
   Um elemento com view-transition-name forma um backdrop root, e a partir
   daí o `backdrop-filter` do ::before deixa de enxergar a página: o vidro
   para de desfocar e o texto do conteúdo atravessa nítido por cima do
   wordmark, em toda a rolagem. Foi medido: com o nome, o maior salto de
   luminância entre pixels vizinhos sob a barra vai de 1 para 49.
   A transição entre a home e o case continua funcionando pelo root e pelo
   `brand` do lockup — que não tem backdrop-filter e por isso é seguro. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: 60px;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* .92 e não .78: o vidro é reforço, não a única defesa. Onde o
     backdrop-filter não existe ou é desligado, o scrim sozinho tem de
     segurar o texto que passa por baixo — inclusive sobre a faixa clara. */
  background: rgba(10,15,30,.92);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity var(--d-ui) var(--e-ui);
}
.site-header.is-stuck::before { opacity: 1; }

/* Sem JavaScript a classe `is-stuck` nunca chega, e aí o conteúdo passava
   por baixo do logotipo sem nenhum fundo. O scrim entra por padrão e o JS
   apenas o esconde enquanto o hero está no topo. */
html:not(.js) .site-header::before { opacity: 1; }

.site-header__in {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}

.lockup {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-right: var(--s2);
  font: 700 clamp(15px, 1.4vw, 17px)/1 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  view-transition-name: brand;
}
.lockup .gauge { height: 1.66em; width: 1.66em; margin-right: .76em; flex: none; }
.lockup i { font-style: normal; color: var(--cyan); margin-left: .28em; }

.site-header .btn { display: none; }

/* ── menu ────────────────────────────────────────────────────────────
   Até existir uma segunda página de conteúdo não havia menu nenhum, de
   propósito. Com o portfólio, ele passou a ser necessário: sem menu
   ninguém acha a outra página. Continua com um item só — menu de seis
   links é o que denuncia site institucional genérico. */
.site-nav { margin-right: auto; margin-left: var(--s5); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--s2);
  font: 600 var(--t-small)/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  transition: color var(--d-fast) var(--e-ui);
}
.site-nav a:hover { color: var(--cyan); }
.site-nav a[aria-current="page"] { color: var(--cyan); }
.site-nav a[aria-current="page"]::before {
  content: ""; width: 5px; height: 5px; background: var(--cyan);
  margin-right: var(--s2); flex: none;
}
/* Em 320px o logotipo e o menu disputam 280px de largura útil e o menu
   transbordava 13px. Aqui os dois cedem um pouco, em vez de um sumir. */
@media (max-width: 430px) {
  .site-nav { margin-left: var(--s2); }
  .site-nav a { letter-spacing: .04em; padding-inline: 0; font-size: 13px; }
  .site-nav a[aria-current="page"]::before { margin-right: 5px; }
  .lockup { font-size: 14px; }
  .lockup .gauge { margin-right: .5em; }
}

/* ───────────────────────────── 8. BOTÃO ───────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s6);
  font: 700 16px/1 var(--font-display);
  letter-spacing: .02em; text-transform: uppercase;
  border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--d-fast) var(--e-ui),
              border-color     var(--d-fast) var(--e-ui),
              color            var(--d-fast) var(--e-ui),
              box-shadow       var(--d-fast) var(--e-ui),
              translate        var(--d-fast) var(--e-ui),
              scale            var(--d-press) var(--e-ui);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--cyan); color: var(--bg); box-shadow: var(--sh-cta); }
.btn--primary:hover { background: var(--cyan-lit); translate: 0 -2px;
                      box-shadow: 0 16px 36px -12px rgba(34,211,238,.55); }
.btn--primary:active { scale: .97; translate: 0 0;
                       box-shadow: 0 6px 18px -10px rgba(34,211,238,.5); }

.btn--ghost { background: transparent; color: var(--cyan); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--cyan); background: var(--cyan-wash); }
.btn--ghost:active { scale: .97; }
.btn--ghost.is-done { border-color: var(--cyan); background: var(--cyan-wash); }

.btn--sm { min-height: 40px; padding: 0 var(--s5); font-size: 14px; }
.btn--wide { width: 100%; }

/* Faixa clara: o pill oficial publicado é azul sólido com texto branco
   (Publicacoes/02/overclockweb-ux-5-direct.png). #FFF sobre #2563EB = 5,17:1. */
[data-plate] .btn--primary { background: var(--blue); color: #FFFFFF;
                             box-shadow: 0 12px 32px -14px rgba(37,99,235,.55); }
[data-plate] .btn--primary:hover { background: #1E4FBC; }

/* Link de texto com seta */
.arrowlink {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 48px;                 /* alvo de toque, WCAG 2.5.5 */
  font: 700 var(--t-small)/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none;
}
.arrowlink svg { width: 16px; height: 16px; transition: translate var(--d-fast) var(--e-ui); }
.arrowlink:hover { color: var(--cyan-lit); }
.arrowlink:hover svg { translate: 4px 0; }

.quiet {
  display: inline-block; padding-block: 6px;   /* ≥24px de alvo, WCAG 2.5.8 */
  color: var(--muted); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  font-size: var(--t-small);
}
.quiet:hover { color: var(--text-2); }

/* ──────────────────── 9. EYEBROW, CARTÃO, WELL, PLACA ─────────────── */

/* Ciano, não cinza: em 100% das peças oficiais o eyebrow é ciano
   ("O QUE FAZEMOS", "NOSSOS SERVIÇOS"). #22D3EE sobre #0A0F1E dá 10,56:1. */
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font: 600 var(--t-eyebrow)/1.2 var(--font-display);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--cyan); margin-right: -.32em;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--cyan); flex: none; }
[data-plate] .eyebrow { color: var(--plate-accent); }
[data-plate] .eyebrow::before { background: var(--plate-accent); }

.label {
  font: 600 var(--t-eyebrow)/1.2 var(--font-display);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted); margin-right: -.32em;
}

.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-inset);
  padding: var(--s5);
  transition: border-color var(--d-fast) var(--e-ui),
              background-color var(--d-fast) var(--e-ui),
              box-shadow var(--d-fast) var(--e-ui),
              translate var(--d-fast) var(--e-ui);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--line-2); background: var(--surface-2);
                translate: 0 -2px; box-shadow: var(--sh-inset-on); }
  .card:hover .card__arc { stroke: var(--cyan); }
}
.card:focus-within { border-color: var(--line-2); box-shadow: var(--sh-inset-on); }

.card__arc {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  stroke: var(--line); fill: none; stroke-width: 2; stroke-linecap: round;
  transition: stroke var(--d-ui) var(--e-out-quint);
}
.card__tile {
  width: 56px; height: 56px; border-radius: var(--r-tile);
  background: var(--well); border: 1px solid var(--line);
  display: grid; place-items: center;
  margin-bottom: var(--s4);
}
.card__tile svg { width: 26px; height: 26px; stroke: var(--cyan);
                  stroke-width: 1.75; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.card p { color: var(--text-2); }
.card__for {
  display: block; margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font: 600 var(--t-eyebrow)/1.5 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.well {
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--r-well); box-shadow: var(--sh-well);
  padding: 14px 16px;
}

/* Plaqueta chanfrada: duas camadas, porque clip-path mata a borda.
   `display:grid` faz o miolo esticar até o fim da plaqueta — sem isso,
   quando as plaquetas da grade ficam com alturas iguais, sobra uma faixa
   da cor da borda no pé da mais curta (medida: 29,7px em "Arquivos"). */
.plate {
  display: grid;
  background: var(--line); padding: 1px;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.plate > * {
  background: var(--surface); padding: var(--s4) var(--s5);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.plate--well > * { background: var(--well); }
/* Numa plaqueta o rótulo sempre abre a linha; o valor vem embaixo.
   Sem isto os dois correm juntos na mesma linha e o rótulo vira ruído. */
.plate > * > .label { display: block; margin-bottom: var(--s2); }

/* ─────────────────────────── 10. SEÇÕES ───────────────────────────── */

.section { padding-block: var(--sec-pad); position: relative; }
.section__head { margin-bottom: var(--s7); }
.section__head .eyebrow { margin-bottom: var(--s4); }
.section h2 { font-size: var(--t-h2); letter-spacing: -.02em; line-height: 1.12; }
.section__sub { margin-top: var(--s4); color: var(--text-2); font-size: var(--t-lead);
                font-weight: 300; max-width: var(--prose); }
.section--alt { background: var(--bg-2); }

/* fio que cresce sob o título */
.growline { height: 1px; background: var(--cyan); opacity: .45;
            transform: scaleX(0); transform-origin: left; margin-top: var(--s5); }

/* ── HERO ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(100svh, 780px);
  display: flex; align-items: center;
  padding-block: var(--s9) var(--s7);
  overflow: hidden;
}
.hero__halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 440px at 22% 26%, var(--glow-blue), transparent 70%);
}
/* No celular a marca abre a dobra, acima do eyebrow — é a ordem do próprio
   lockup empilhado que a marca publica. No DOM ela vem depois do texto
   (o título é que deve ser lido primeiro), então a ordem visual é invertida
   aqui e desfeita no desktop, onde as duas colunas convivem. */
.hero__in { position: relative; width: 100%; display: flex; flex-direction: column; }
.hero__art { order: -1; }
.hero .gauge--big { width: 104px; height: 104px; margin-bottom: var(--s6); overflow: visible; }
.hero .eyebrow { margin-bottom: var(--s5); }

.hero h1 {
  font-size: var(--t-display);
  line-height: .98; letter-spacing: -.03em;
  margin-bottom: var(--s5);
}
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

.hero__lead {
  font-size: var(--t-lead); font-weight: 300; color: var(--text-2);
  max-width: 52ch; margin-bottom: var(--s6);
}
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.hero__note { font-size: var(--t-small); color: var(--muted); }

/* a régua de fechamento do hero — a única afordância de rolagem */
.hero__ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px);
  overflow: hidden;
}
.hero__ruler i {
  position: absolute; top: 0; left: 0; width: 24px; height: 1px;
  background: var(--cyan);
}

/* ── PÁGINA DO PORTFÓLIO ─────────────────────────────────────────── */

.port-hero {
  position: relative;
  padding-block: clamp(72px, 12vw, 140px) var(--s8);
  overflow: hidden;
}
.port-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 380px at 20% 0%, var(--glow-blue), transparent 70%);
}
.port-hero > .wrap { position: relative; }
.port-hero .eyebrow { margin-bottom: var(--s5); }
.port-hero h1 {
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: var(--s5);
}
.port-hero__lead {
  font-size: var(--t-lead); font-weight: 300; color: var(--text-2);
  max-width: 54ch;
}

/* cada peça do portfólio */
.obra { background: var(--bg-2); }
.obra--alt { background: var(--bg); }

.obra__fatos { display: grid; gap: var(--s3); }
.obra__fatos .plate > div { display: grid; gap: 4px; }
.obra__fatos .plate span:last-child { color: var(--text-2); }
@media (min-width: 768px) {
  .obra__fatos { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

.close__portfolio { margin-top: var(--s7); }

/* ── 01 PARA QUEM É ──────────────────────────────────────────────── */

.who__list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-well); overflow: hidden;
  margin-block: var(--s6);
}
.who__list li {
  background: var(--bg); padding: var(--s4) var(--s4);
  font: 500 var(--t-small)/1.3 var(--font-body);
  color: var(--text-2);
  display: flex; align-items: center; gap: var(--s3);
}
.who__list li::before { content: ""; width: 1px; height: 14px; background: var(--cyan);
                        opacity: .55; flex: none; }
.section--alt .who__list li { background: var(--bg-2); }

.who__close { font-size: var(--t-lead); font-weight: 300; color: var(--text); }

.nope { margin-top: var(--s7); }
.nope ul { list-style: none; padding: 0; margin-block: var(--s4); display: grid; gap: var(--s4); }
.nope li { color: var(--text-2); padding-left: var(--s5); position: relative; }
.nope li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.nope b { color: var(--text); font-weight: 600; }
.nope__end { margin-top: var(--s4); color: var(--text); }

/* ── 02 SERVIÇOS ─────────────────────────────────────────────────── */

.grid3 { display: grid; gap: var(--s4); }
.section__foot {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-small);
}
.section__foot b { color: var(--text-2); font-weight: 600; }

/* ── 03 COMO FUNCIONA ────────────────────────────────────────────── */

.steps { position: relative; display: grid; gap: var(--s6); padding-left: var(--s7); }
.steps__spine {
  position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: var(--line);
}
.steps__spine i { position: absolute; inset: 0; background: var(--cyan);
                  transform: scaleY(0); transform-origin: top; }

.step { position: relative; }
.step::before {
  content: ""; position: absolute; left: calc(-1 * var(--s7) + 6px); top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  transition: border-color var(--d-ui) var(--e-ui), background-color var(--d-ui) var(--e-ui);
}
.section--alt .step::before { background: var(--bg-2); }
.step.is-on::before { border-color: var(--cyan); background: var(--cyan); }
.step__n {
  font: 600 var(--t-eyebrow)/1.2 var(--font-display);
  letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
  transition: color var(--d-ui) var(--e-ui);
}
.step.is-on .step__n { color: var(--cyan); }
.step h3 { font-size: var(--t-h3); margin-block: var(--s2) var(--s3); }
.step p { color: var(--text-2); max-width: var(--prose); }
.step .well { margin-top: var(--s4); max-width: 46ch; }
.step .well .label { display: block; margin-bottom: 4px; }
.step .well span { font-size: var(--t-small); color: var(--text-2); }

.closing { margin-top: var(--s8); display: grid; gap: var(--s4); max-width: var(--prose); }
.closing p { color: var(--text-2); }
.closing b { color: var(--text); font-weight: 600; }

/* ── 04 FAIXA CLARA ──────────────────────────────────────────────── */

.plateband {
  background: var(--plate-bg); color: var(--plate-ink);
}
.plateband h2 { color: var(--plate-ink); }
.plateband .section__sub { color: var(--plate-muted); }
.plateband .label { color: var(--plate-muted); }

.box { list-style: none; padding: 0; display: grid; gap: 1px;
       background: var(--plate-line); border: 1px solid var(--plate-line);
       border-radius: var(--r-card); overflow: hidden; }
.box li {
  background: var(--plate-card); padding: var(--s4) var(--s5);
  display: flex; align-items: flex-start; gap: var(--s4);
  color: var(--plate-ink);
}
.box li svg { width: 20px; height: 20px; flex: none; margin-top: 3px;
              stroke: var(--plate-accent); stroke-width: 2.2; fill: none;
              stroke-linecap: round; stroke-linejoin: round; }

.plateband .aside {
  margin-top: var(--s7); display: grid; gap: var(--s5);
}
.plateband .aside > div {
  border-left: 2px solid var(--plate-accent);
  padding-left: var(--s5);
  color: var(--plate-muted);
}
.plateband .aside b { color: var(--plate-ink); font-weight: 600; display: block; }

.plateband .scope { margin-top: var(--s7); display: grid; gap: var(--s5); }
.plateband .scope > div { }
.plateband .scope p { color: var(--plate-muted); margin-top: var(--s2); }
.plateband .scope strong { color: var(--plate-ink); }

/* ── 05 O QUE FICA SEU ───────────────────────────────────────────── */

.owns { display: grid; gap: var(--s3); }
.owns .plate > div { display: grid; grid-template-columns: 1fr; gap: 4px; }
.owns .plate span { color: var(--text-2); }

/* ── 06 CASE ─────────────────────────────────────────────────────── */

.case { background: var(--bg-2); }
.case__status { margin-block: var(--s6); }
.case__status .label { display: block; margin-bottom: var(--s2); color: var(--cyan); }
.case__status strong {
  display: block; font: 700 var(--t-small)/1.55 var(--font-display);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
}

.reads {
  display: grid; gap: var(--s6);
  margin-block: var(--s8);
}
.read__n {
  font: 700 var(--t-stat)/1 var(--font-body);
  letter-spacing: -.02em; color: var(--cyan);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.read .label { display: block; margin-top: var(--s3); }
.read__sub { display: block; margin-top: var(--s2); font-size: var(--t-small); color: var(--muted); }
.read__draw { margin-top: var(--s4); height: 18px; }
.read__draw svg { width: 100%; height: 100%; overflow: visible; }

/* ── as telas reais do case ─────────────────────────────────────────── */

.shots { display: grid; gap: var(--s4); margin-block: var(--s7); }

.shot { margin: 0; }
.shot a {
  display: block; position: relative;
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--sh-inset);
  transition: border-color var(--d-fast) var(--e-ui),
              translate var(--d-fast) var(--e-ui);
}
@media (hover: hover) and (pointer: fine) {
  .shot a:hover { border-color: var(--cyan); translate: 0 -2px; }
}
/* A imagem nasce com width/height no HTML: a proporção fica reservada e
   a página não pula quando ela chega. */
.shot img { width: 100%; height: auto; display: block; }

.shot figcaption {
  margin-top: var(--s3);
  font-size: var(--t-small); line-height: 1.55; color: var(--muted);
}
.shot figcaption b { color: var(--text-2); font-weight: 600; }

/* "toque para ampliar" só onde o print não se lê: telas estreitas */
.shot a::after {
  content: "Toque para ampliar";
  position: absolute; right: var(--s3); bottom: var(--s3);
  padding: 5px 10px; border-radius: var(--r-chip);
  background: rgba(10,15,30,.86); color: var(--cyan);
  font: 600 11px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
  .shot a::after { content: "Ver em tamanho real"; opacity: 0;
                   transition: opacity var(--d-fast) var(--e-ui); }
  .shot a:hover::after, .shot a:focus-visible::after { opacity: 1; }
}

.shots__nota {
  font-size: var(--t-small); color: var(--muted);
  max-width: var(--prose); margin-bottom: var(--s8);
  padding-left: var(--s4); border-left: 1px solid var(--line);
}

@media (min-width: 900px) {
  .shots { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .shot--larga { grid-column: 1 / -1; }
}

.comb { margin-block: var(--s8); }
.comb__box { height: 96px; }
.comb__box svg { width: 100%; height: 100%; }
.comb__cap { margin-top: var(--s4); color: var(--text-2); font-size: var(--t-small); }
.comb__cap b { color: var(--text); font-weight: 600; }

/* Uma linha por <div>, rótulo à esquerda e valor à direita.
   O filete pontilhado é o FUNDO da linha — não um elemento, porque <div>
   dentro de <dl> só admite <dt> e <dd>. O rótulo e o valor têm fundo
   próprio e mascaram o pontilhado nos dois extremos, que é a técnica
   clássica de linha-guia de sumário. */
.spec { display: grid; gap: var(--s3); --spec-mask: var(--bg-2); }
.spec > div {
  display: flex; align-items: baseline; gap: var(--s4);
}
.spec dt {
  font: 600 var(--t-eyebrow)/1.4 var(--font-display);
  letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
  margin-right: -.32em;
}
.spec dd {
  margin: 0 0 0 auto; text-align: right;
  font: 500 var(--t-small)/1.4 var(--font-body); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spec__note { margin-top: var(--s5); font-size: var(--t-small); color: var(--muted); }

.case__body { margin-top: var(--s8); display: grid; gap: var(--s5); max-width: var(--prose); }
.case__body p { color: var(--text-2); }

.decision { margin-top: var(--s7); }
.decision .label { display: block; margin-bottom: var(--s4); color: var(--cyan); }
.decision p { color: var(--text-2); margin-bottom: var(--s4); }
.decision p:last-child { margin-bottom: 0; }
.decision b { color: var(--text); font-weight: 600; }

.case__out { margin-top: var(--s8); display: grid; gap: var(--s5); }

/* ── 07 FAQ ──────────────────────────────────────────────────────── */

.faq { display: grid; gap: 1px; background: var(--line);
       border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.faq details { background: var(--bg); }
.section--alt .faq details { background: var(--bg-2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--s5); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 48px;
  transition: background-color var(--d-fast) var(--e-ui);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface); }
.faq summary h3 { font-size: var(--t-h3); font-weight: 700; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  rotate: 45deg; translate: 0 -3px;
  transition: rotate var(--d-ui) var(--e-ui), translate var(--d-ui) var(--e-ui);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq__a { padding: 0 var(--s5) var(--s5); color: var(--text-2); max-width: var(--prose); }
.faq__a p + p { margin-top: var(--s4); }

/* ── 08 FECHO ────────────────────────────────────────────────────── */

.close { text-align: center; }
.close .eyebrow { justify-content: center; }
.close h2 {
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -.03em;
  margin-block: var(--s5);
}
.close__lead { font-size: var(--t-lead); font-weight: 300; color: var(--text-2);
               max-width: 50ch; margin: 0 auto var(--s7); }

.console { max-width: 620px; margin: 0 auto; text-align: left; }
.console .label { display: block; margin-bottom: var(--s3); }
.console__msg {
  font-size: var(--t-body); color: var(--text-2); line-height: 2.1;
}
.console__msg b { color: var(--text); font-weight: 600; }

.field {
  font: 400 16px/1.4 var(--font-body); color: var(--text);
  background: transparent; border: 0;
  border-bottom: 1px solid var(--line-input);
  padding: 4px 4px; min-height: 36px; max-width: 100%;
  transition: border-color var(--d-fast) var(--e-ui);
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:hover { border-bottom-color: var(--line-2); }
.field:focus-visible { border-bottom-color: var(--cyan); outline-offset: 4px; }
select.field { appearance: none; -webkit-appearance: none; cursor: pointer;
               padding-right: 18px; }
.selectwrap { position: relative; display: inline-block; }
.selectwrap::after {
  content: ""; position: absolute; right: 4px; top: 50%; pointer-events: none;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 1.75px solid var(--cyan); border-bottom: 1.75px solid var(--cyan);
  rotate: 45deg;
}
.console__hint { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); }

/* A mensagem em texto puro, mostrada só quando a cópia automática falha */
.console__plain {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--bg); border: 1px dashed var(--line-input);
  border-radius: var(--r-well);
  color: var(--text); font-size: var(--t-small); line-height: 1.6;
  -webkit-user-select: text; user-select: text;
}
.console__plain[hidden] { display: none; }

.close__buttons {
  display: flex; flex-direction: column; gap: var(--s3);
  margin-top: var(--s6);
}
.close__after { margin-top: var(--s5); font-size: var(--t-small); color: var(--muted); }
.teardown {
  margin-top: var(--s8); max-width: 620px; margin-inline: auto;
}
.teardown b { color: var(--text); font-weight: 600; }
.teardown span { color: var(--text-2); }

/* ── RODAPÉ ──────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s8);
  text-align: center;
}
.site-footer .gauge { width: 24px; height: 24px; margin: 0 auto var(--s5); }
.site-footer__sig {
  font: 600 11px/1.6 var(--font-display);
  letter-spacing: .47em; text-transform: uppercase; color: var(--muted);
  margin-right: -.47em;
}
.site-footer__contato {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s2) var(--s3); margin-top: var(--s3);
}
/* --muted e não --line-2: o separador é texto visível, e #38456E sobre o
   fundo dá 1,95:1. #8C909C dá 5,99:1 e passa em AA. */
.site-footer__contato span { color: var(--muted); }
.site-footer a { color: var(--text-2); text-decoration: none; display: inline-block;
                 padding-block: var(--s2); font-weight: 500; }
.site-footer a:hover { color: var(--cyan); }

/* Número e perfil escritos, no fecho: contato visível é sinal de que há
   gente atrás do site — vale desproporcionalmente para negócio novo. */
.contato {
  display: inline-block; padding-block: 4px;   /* dedo grosso, número pequeno */
  color: var(--cyan); text-decoration: none; font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--cyan-line);
  transition: color var(--d-fast) var(--e-ui), border-color var(--d-fast) var(--e-ui);
}
.contato:hover { color: var(--cyan-lit); border-bottom-color: var(--cyan-lit); }
.site-footer small { display: block; margin-top: var(--s4); color: var(--muted);
                     font-size: var(--t-small); }

/* ── BARRA FIXA INFERIOR (celular) ───────────────────────────────── */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: rgba(13,20,38,.92);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 -1px 0 var(--line);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s4);
  opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity var(--d-ui) var(--e-out-quint), translate var(--d-ui) var(--e-out-quint);
}
.dock.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
/* A barra é fixa: sem esta folga ela cobre o último bloco da página,
   que é justamente a oferta de auditoria gratuita. */
@media (max-width: 767px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
.dock__note { font-size: 13px; color: var(--muted); flex: none; }
.dock .btn { flex: 1; white-space: nowrap; }

/* Abaixo de 400px o rótulo "CHAME NO DIRECT" quebrava em duas linhas —
   inclui os 360px de boa parte dos Android. O aviso de prazo sai; ele já
   está no hero e no fecho, e o botão é o que não pode ceder. */
@media (max-width: 399px) {
  .dock__note { display: none; }
  .dock .btn { padding-inline: var(--s4); }
}

/* ─────────────────────────── 11. MOVIMENTO ────────────────────────── */

/* Regra inegociável: o estado base do CSS é o estado FINAL e visível.
   opacity:0 só existe atrás de .js, e some com a classe .is-in.

   As revelações são TRANSIÇÃO, não animação, de propósito: o estado final
   vem da classe (uma computed style), não de uma animação que precisa
   rodar até o fim. Animação com fill-mode:forwards prende o elemento no
   primeiro quadro sempre que o navegador resolve não rodá-la — e aí o
   conteúdo simplesmente não aparece. Com transição, o pior caso é o bloco
   surgir sem deslizar. */

.js .reveal {
  opacity: 0; translate: 0 var(--lift);
  transition: opacity var(--d-in) var(--e-out-quint),
              translate var(--d-in) var(--e-out-quint);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* hero — só com JS ativo, e sempre com estado final garantido por `both` */
.js .hero h1 .line > span { translate: 0 100%; }
.js .hero.is-boot h1 .line > span { animation: mask-up 700ms var(--e-out-quint) both; }
.js .hero h1 .line:nth-child(1) > span { animation-delay: 160ms; }
.js .hero h1 .line:nth-child(2) > span { animation-delay: 240ms; }
.js .hero h1 .line:nth-child(3) > span { animation-delay: 320ms; }
@keyframes mask-up { from { translate: 0 100%; } to { translate: 0 0; } }

.js .hero__fade { opacity: 0; }
.js .hero.is-boot .hero__fade { animation: hero-in var(--d-in) var(--e-out-quint) both; }
@keyframes hero-in {
  from { opacity: 0; translate: 0 var(--lift); }
  to   { opacity: 1; translate: 0 0; }
}

/* o tacômetro — a marca se desenha na abertura */
.gauge { overflow: visible; }
.g-needle { transform-box: view-box; transform-origin: 32px 32px; }
.g-arc, .g-tick, .g-fill { stroke-dasharray: 100; }
.g-arc, .g-tick { stroke-dashoffset: 0; }
.g-fill { stroke-dashoffset: 100; }

.js .hero.is-boot .g-arc    { animation: arc-draw 900ms var(--e-out-expo) 120ms both; }
.js .hero.is-boot .g-tick   { animation: arc-draw 420ms var(--e-out-quint) 900ms both; }
.js .hero.is-boot .g-pivot  { animation: pivot-pop 500ms var(--e-rev) 200ms both;
                              transform-box: view-box; transform-origin: 32px 32px; }
.js .hero.is-boot .g-needle { animation: needle-sweep var(--d-boot) var(--e-rev) 240ms both; }
@keyframes arc-draw    { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pivot-pop   { from { scale: 0; } to { scale: 1; } }
@keyframes needle-sweep{ from { rotate: -104deg; } to { rotate: 0deg; } }

/* dica de rolagem */
.js .hero__ruler i { animation: hint 2400ms var(--e-ui) infinite; }
@keyframes hint {
  0%   { translate: 0 0;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { translate: calc(100vw - 24px) 0; opacity: 0; }
}

/* o fio que cresce sob o título da seção */
.js .growline {
  transform: scaleX(0);
  transition: transform 560ms var(--e-out-expo);
}
.js .growline.is-in { transform: scaleX(1); }

/* o pente: a revelação é um retângulo de cobertura que desliza — nunca
   scaleX sobre os fios, que re-rasteriza e engrossa o traço.
   Também por transição: se ela não rodar, a cobertura vai direto para
   fora e o pente aparece. Com animação, ela ficaria parada em cima. */
.comb__cover {
  transform-box: fill-box; transform-origin: left;
  transition: translate 700ms var(--e-out-expo) 120ms;
}
.js .comb.is-in .comb__cover { translate: 100% 0; }

/* ── A ASSINATURA: o tacômetro de rolagem ─────────────────────────
   A agulha varre o vão de 60° do anel e um arco ciano sela o vão atrás
   dela. No topo da página o desenho é o logo, com a abertura. No fim, o
   círculo está fechado. Ler o site é completar a leitura do instrumento. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header .g-needle {
      animation: tach linear both;
      animation-timeline: scroll(root block);
    }
    .site-header .g-fill {
      animation: seal linear both;
      animation-timeline: scroll(root block);
    }
    .rail__fill {
      animation: railfill linear both;
      animation-timeline: scroll(root block);
    }
    .steps__spine i {
      animation: railfill linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 55%;
    }
  }
}
/* +62°: a agulha sai de 45° e vai a −17°, atravessando o vão de 60°
   inteiro e ultrapassando a ponta do arco em 17°. */
@keyframes tach     { from { rotate: 0deg; }            to { rotate: 62deg; } }
@keyframes seal     { from { stroke-dashoffset: 100; }  to { stroke-dashoffset: 0; } }
@keyframes railfill { from { transform: scaleY(0); }    to { transform: scaleY(1); } }

/* ── Rede de segurança de movimento ───────────────────────────────
   1ms, jamais `none`: `none` trava no primeiro keyframe qualquer elemento
   cujo estado final venha de animation-fill-mode:forwards — some conteúdo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .hero__fade { opacity: 1; translate: none; }
  .js .hero h1 .line > span { translate: none; }
  .js .growline { transform: scaleX(1); }
  .g-fill { opacity: 0; }
  .steps__spine i, .rail__fill { transform: scaleY(1); }
  .hero__ruler i { display: none; }
}

/* ──────────────── 11b. SEM JAVASCRIPT E CONTRASTE ALTO ─────────────── */

/* Nada pode prometer o que não vai aparecer. Sem JS, o pente de 778 fios
   e os blocos contáveis não são desenhados — então a caixa vazia sai de
   cena junto, em vez de deixar um vão de 96px sob a legenda. Os números e
   a ficha técnica, que são a prova, continuam em texto no HTML. */
html:not(.js) .comb__box,
html:not(.js) .read__draw { display: none; }

/* O botão de copiar depende de JS para existir. Sem ele seria um controle
   habilitado que não faz nada — pior que ausente. O roteiro continua na
   tela, visível e selecionável à mão. */
html:not(.js) #btnCopiar { display: none; }

/* A barra fixa cobre o rodapé da tela. Quando o foco chega por teclado, o
   navegador encosta o elemento na borda inferior — e ele some por baixo
   dela. A folga de rolagem devolve o CTA final para a área visível. */
@media (max-width: 767px) {
  a, button, input, select, summary { scroll-margin-bottom: 96px; }
}

/* Contraste alto do Windows: o sistema descarta as cores do site, e as
   duas barras fixas ficam sem nada que as separe do conteúdo por baixo. */
@media (forced-colors: active) {
  .site-header::before { opacity: 1; border-bottom: 1px solid CanvasText; }
  .site-header, .dock { background: Canvas; }
  .dock { border-top: 1px solid CanvasText; }
  .grain, .hero__halo { display: none; }
  .comb__cover { display: none; }      /* vira um retângulo opaco varrendo a tela */
  .btn { border: 1px solid CanvasText; }
}

/* ─────────────────────── 12. VIEW TRANSITIONS ─────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: 120ms; animation-timing-function: cubic-bezier(.40,0,1,1); }
::view-transition-new(root) { animation-duration: 260ms; animation-delay: 60ms;
                              animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-group(header),
::view-transition-group(brand) { animation-duration: 320ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(header), ::view-transition-new(header),
  ::view-transition-old(brand), ::view-transition-new(brand) {
    animation-duration: 1ms !important;
  }
}

/* ──────────────────────────── 13. MEDIA ───────────────────────────── */

@media (min-width: 600px) {
  .who__list li { font-size: var(--t-body); }
  .close__buttons { flex-direction: row; justify-content: center; }
  .close__buttons .btn { min-width: 220px; }
  .owns .plate > div { grid-template-columns: 150px 1fr; gap: var(--s4); align-items: baseline; }
  .owns .plate > div .label { margin-bottom: 0; }
  /* O pontilhado entra só onde a linha é larga o bastante para ele ligar
     o rótulo ao valor sem apertar o texto. */
  .spec > div {
    background-image: radial-gradient(circle, var(--line) .5px, transparent .5px);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-position: 0 calc(1em - 1px);
  }
  .spec dt, .spec dd { background: var(--spec-mask); }
  .spec dt { padding-right: var(--s2); }
  .spec dd { padding-left: var(--s2); }
}

@media (min-width: 768px) {
  html { scroll-padding-top: 104px; }
  .site-header { height: 72px; }
  /* `visibility:hidden` e não só `opacity:0`: opacity mantém o botão na
     ordem de tabulação, e aí o terceiro Tab da página caía num ponto de
     foco invisível que ainda respondia a Enter — WCAG 2.4.7 reprovado e o
     visitante jogado para fora do site sem entender por quê.
     O delay na visibilidade deixa o fade de saída acontecer antes de sumir. */
  .site-header .btn {
    display: inline-flex; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--d-ui) var(--e-ui),
                visibility 0s linear var(--d-ui);
  }
  .site-header.is-stuck .btn {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
  .dock { display: none; }
  .who__list { grid-template-columns: repeat(4, 1fr); }
  .reads { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .nope ul { gap: var(--s5); }
  .hero__cta { flex-direction: row; align-items: center; gap: var(--s5); }
  .plateband .aside { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .plateband .scope { grid-template-columns: 1fr 1fr; gap: var(--s7); }
}

@media (min-width: 900px) {
  .grid3 { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .card { padding: var(--s6); }
  .steps { padding-left: var(--s8); gap: var(--s7); }
  .steps__spine { left: 15px; }
  .step::before { left: calc(-1 * var(--s8) + 9px); }
  .reads { grid-template-columns: repeat(4, 1fr); }
  .box { grid-template-columns: 1fr 1fr; }
  .owns { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

@media (min-width: 1024px) {
  .hero__in { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s8); align-items: center; }
  .hero .gauge--big { width: 220px; height: 220px; margin: 0; justify-self: end; }
  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__art  { grid-column: 2; grid-row: 1; order: 0; }
  .comb__box { height: 128px; }
  .case__body { max-width: 68ch; }
}


/* NOTA DE DESEMPENHO — `content-visibility: auto` foi testado e REMOVIDO.
   Ele pausa animações e transições nas seções fora da tela, então blocos
   revelados por rolagem ficavam presos invisíveis (medido: 9 elementos nas
   seções 07 e 08, justamente o FAQ e o fecho). Pior: a seção 03 usa
   `animation-timeline: view()`, e content-visibility num ancestral quebra
   a timeline. A página é leve o bastante para não precisar dele — o ganho
   era marginal e o risco era a seção de conversão não aparecer. */

/* ──────────────────────────── 14. PRINT ───────────────────────────── */

@media print {
  .grain, .rail, .dock, .site-header, .hero__ruler, .comb__cover { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .well, .plate > * { background: #fff; border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}