/* ============================================================
   TK7 Engenharia e Piso — site.css
   Componentes de página, construídos sobre tokens.css.
   Nada de cor/fonte literal aqui: só tokens.
   ============================================================ */

html { overflow-x: clip; scroll-padding-top: 92px; } /* nunca overflow-x no body */

/* imagem: libera a altura para o aspect-ratio do CSS vencer os
   atributos width/height do HTML (armadilha paga) */
img { height: auto; }

/* ---------- LOADER ---------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--graphite-950);
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader img { width: 128px; opacity: .92; }
.loader__bar {
  position: absolute; bottom: 0; left: 0; height: 2px;
  width: 0; background: var(--accent);
  transition: width .4s linear;
}
html:not(.js) .loader { display: none; }

/* ---------- HEADER --------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(14, 16, 19, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: 76px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-muted); position: relative; padding-block: 4px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__cta { flex: none; }
/* o CTA dentro do .nav existe só para o menu off-canvas do mobile.
   No desktop quem aparece é o .header__cta, senão os dois somam largura
   e estouram o header (medido: 43px de overflow em 1024px). */
.nav > .btn { display: none; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); cursor: pointer;
  position: relative; flex: none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: ''; position: absolute; left: 50%; width: 20px; height: 2px;
  background: var(--text); transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; left: 0; transform: none; }
.nav-toggle span::after  { top:  7px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-90deg); top: 0; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--graphite-950);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-4) var(--gutter) var(--sp-8);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .nav a::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: var(--sp-5); }
}

/* ---------- HERO ----------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: var(--sp-24) var(--sp-16);
  overflow: hidden; background: var(--graphite-950);
}
.hero__media { position: absolute; inset: 0; z-index: 0; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,16,19,.95) 0%, rgba(14,16,19,.74) 44%, rgba(14,16,19,.32) 100%),
    linear-gradient(to right, rgba(14,16,19,.60) 0%, rgba(14,16,19,0) 68%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 21ch; margin-bottom: var(--sp-5); }
.hero .lead { max-width: 56ch; color: var(--graphite-100); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (max-width: 560px) {
  .hero { padding-bottom: var(--sp-12); }
  .hero__actions .btn { width: 100%; }
}

/* faixa de credibilidade */
.credbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.credbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.credbar__item {
  padding: var(--sp-6) var(--sp-5);
  border-left: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; gap: var(--sp-3); align-items: flex-start;
}
.credbar__item:first-child { border-left: 0; }
/* o ícone da faixa de credibilidade fica em grafite: são 4 em fileira logo
   abaixo do hero e competiriam com o botão primário na mesma dobra */
.credbar__item svg { flex: none; width: 20px; height: 20px; color: var(--graphite-300); margin-top: 2px; }
@media (max-width: 900px) {
  .credbar__grid { grid-template-columns: 1fr 1fr; }
  .credbar__item:nth-child(3) { border-left: 0; }
  .credbar__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .credbar__grid { grid-template-columns: 1fr; }
  .credbar__item { border-left: 0; }
  .credbar__item + .credbar__item { border-top: 1px solid var(--line); }
}

/* ---------- CABEÇALHO DE SEÇÃO --------------------------- */
.sec-head { max-width: 760px; margin-bottom: var(--sp-12); }
.sec-head--wide { max-width: 900px; }
.sec-head .lead { margin-top: var(--sp-4); }

/* ---------- SPLIT EDITORIAL (dor / sobre) ---------------- */
.split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.split__media { display: block; position: relative; border-radius: var(--r-md); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__media figcaption {
  position: absolute; inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--off-white);
  background: rgba(14,16,19,.78); backdrop-filter: blur(6px);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* sintomas: lista editorial em duas colunas, marcador de risco */
.symptoms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-8); margin: 0; padding: 0; list-style: none; }
.symptoms li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.symptoms li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--danger); flex: none; }
@media (max-width: 720px) { .symptoms { grid-template-columns: 1fr; } }
/* dentro do split a coluna é estreita e a lista tem 5 itens: em 2 colunas
   sobraria 1 órfão na última linha (armadilha nº 4 do vault) */
.split .symptoms { grid-template-columns: 1fr; }

/* ---------- TIMELINE HORIZONTAL (etapas — LP01) ---------- */
.tl { position: relative; }
.tl__track { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-6); position: relative; }
.tl__line, .tl__line-fill {
  position: absolute; top: 15px; left: calc(100% / 12); height: 2px;
  width: calc(100% - (100% / 6));
}
.tl__line { background: var(--graphite-600); }
.tl__line-fill {
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease);
}
[data-timeline].is-drawn .tl__line-fill { transform: scaleX(1); }
.tl__item { position: relative; padding-top: 48px; }
.tl__dot {
  position: absolute; top: 4px; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--graphite-600);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
[data-timeline].is-drawn .tl__item .tl__dot { border-color: var(--accent); color: var(--accent); }
.tl__item h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.tl__item p { font-size: var(--fs-sm); color: var(--text-muted); }
.tl__media { display: block; margin-bottom: var(--sp-4); border-radius: var(--r-sm); overflow: hidden; }
.tl__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 1024px) {
  .tl__track { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-10); }
  .tl__line, .tl__line-fill { display: none; }
}
@media (max-width: 700px) {
  .tl__track { grid-template-columns: 1fr; row-gap: var(--sp-8); }
  .tl__item { padding-top: 0; padding-left: 52px; }
  .tl__dot { top: 0; }
}

/* ---------- PILHA STICKY (aplicações — LP01) ------------- */
.stack { display: grid; grid-template-columns: 380px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
/* neutraliza o utilitário .stack do tokens.css, que dava margin-top ao
   segundo filho e desalinhava a coluna direita em 16px */
.stack > * + * { margin-top: 0; }
.stack__aside { position: sticky; top: 120px; }
.stack__count {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-dim);
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.stack__list { display: grid; gap: var(--sp-4); }
.stack__card {
  position: sticky;
  top: calc(96px + var(--i) * 18px);
  z-index: var(--i);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-5);
  align-items: start;
  opacity: 0; transition: opacity .6s var(--ease); /* sticky: só opacity, nunca transform */
}
.stack__card.is-in { opacity: 1; }
html:not(.js) .stack__card { opacity: 1; }
.stack__icon {
  width: 56px; height: 56px; border-radius: var(--r-sm);
  background: var(--graphite-900); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--accent-text);
}
.stack__icon svg { width: 28px; height: 28px; }
.stack__idx {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); color: var(--text-dim); display: block; margin-bottom: var(--sp-2);
}
.stack__card h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.stack__card p { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 900px) {
  .stack { grid-template-columns: 1fr; }
  .stack__aside { position: static; }
  .stack__card { position: static; top: auto; }
}
@media (max-width: 560px) {
  .stack__card { grid-template-columns: 1fr; padding: var(--sp-6); }
}

/* ---------- SPLIT ALTERNADO (acabamentos — LP02) --------- */
.alt { display: grid; gap: 0; }
.alt__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.alt__row:first-child { border-top: 0; padding-top: 0; }
.alt__row:nth-child(even) .alt__media { order: 2; }
.alt__media { display: block; border-radius: var(--r-md); overflow: hidden; }
.alt__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.alt__num {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: var(--fw-black); line-height: 1;
  -webkit-text-stroke: 1px var(--graphite-500); color: transparent;
  transition: color .8s var(--ease), -webkit-text-stroke-color .8s var(--ease);
  display: block; margin-bottom: var(--sp-4);
}
[data-reveal].is-in .alt__num, .alt__row.is-in .alt__num { color: var(--accent); -webkit-text-stroke-color: transparent; }
.alt__row h3 { margin-bottom: var(--sp-3); }
.alt__row p { color: var(--text-muted); }
.alt__specs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
@media (max-width: 900px) {
  .alt__row { grid-template-columns: 1fr; }
  .alt__row:nth-child(even) .alt__media { order: 0; }
}

/* ---------- LISTA EDITORIAL COM SWEEP (ambientes — LP02) - */
.edit-list { border-top: 1px solid var(--line); }
.edit-list__item {
  position: relative; display: grid;
  grid-template-columns: 64px 1fr auto; gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}
/* o sweep do hover é de SUPERFÍCIE, não de acento: uma faixa âmbar cheia
   na largura da linha violaria a regra "laranja nunca em bloco grande" */
.edit-list__item::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--surface-raised);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease);
}
.edit-list__item::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; z-index: 1;
  background: var(--accent);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}
.edit-list__item:hover::after { transform: scaleY(1); }
.edit-list__item:hover::before { transform: translateY(0); }
.edit-list__item > * { position: relative; z-index: 1; }
.edit-list__idx { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-dim); transition: color var(--dur) var(--ease); }
.edit-list__item h3 { font-size: var(--fs-h4); margin: 0 0 4px; }
.edit-list__item p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; transition: color var(--dur) var(--ease); }
.edit-list__arrow { width: 24px; height: 24px; color: var(--text-dim); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.edit-list__item:hover h3 { color: var(--text); }
.edit-list__item:hover p { color: var(--text-muted); }
.edit-list__item:hover .edit-list__idx,
.edit-list__item:hover .edit-list__arrow { color: var(--accent-text); }
.edit-list__item:hover .edit-list__arrow { transform: translateX(6px); }
@media (max-width: 620px) {
  .edit-list__item { grid-template-columns: 44px 1fr; padding-inline: var(--sp-3); }
  .edit-list__arrow { display: none; }
}

/* ---------- STEPPER VERTICAL (processo — LP02) ----------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.steps__list { position: relative; padding-left: 44px; }
.steps__spine {
  position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px;
  background: var(--graphite-600);
}
.steps__spine::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.8s var(--ease);
}
[data-timeline].is-drawn .steps__spine::after { transform: scaleY(1); }
.steps__item { position: relative; padding-bottom: var(--sp-10); }
.steps__item:last-child { padding-bottom: 0; }
.steps__item::before {
  content: ''; position: absolute; left: -44px; top: 4px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--graphite-600);
  transition: border-color var(--dur) var(--ease);
}
.steps__item::after {
  content: ''; position: absolute; left: -33px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--graphite-600); transition: background var(--dur) var(--ease);
}
[data-timeline].is-drawn .steps__item::before { border-color: var(--accent); }
[data-timeline].is-drawn .steps__item::after { background: var(--accent); }
.steps__item h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.steps__item p { font-size: var(--fs-sm); color: var(--text-muted); }
.steps__media { display: block; border-radius: var(--r-md); overflow: hidden; position: sticky; top: 120px; }
/* elemento sticky entra SÓ por opacidade: translateY faz ele saltar
   no instante em que cola (armadilha nº 7 do vault) */
.steps__media[data-reveal] { transform: none; }
.steps__media[data-reveal].is-in { transform: none; }
.steps__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps__media { position: static; order: -1; }
  .steps__media img { aspect-ratio: 3 / 2; }
}

/* ---------- CARDS COM IMAGEM (serviços — LP03) ----------- */
.imgcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.imgcard {
  position: relative; display: flex; flex-direction: column;
  min-height: 420px; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  isolation: isolate;
}
.imgcard__media { position: absolute; inset: 0; z-index: -1; display: block; }
.imgcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.imgcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* véu mais alto e mais fechado que o padrão: as fotos de piso danificado
     são visualmente ruidosas e o texto do card cai justo sobre elas */
  background: linear-gradient(to top, rgba(14,16,19,.97) 32%, rgba(14,16,19,.80) 66%, rgba(14,16,19,.46) 100%);
}
.imgcard:hover .imgcard__media img { transform: scale(1.06); }
.imgcard__body { margin-top: auto; padding: var(--sp-6); }
.imgcard__body h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.imgcard__body p { font-size: var(--fs-sm); color: var(--graphite-100); margin: 0; }
.imgcard__idx {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); color: var(--accent); display: block; margin-bottom: var(--sp-2);
}
@media (max-width: 900px) { .imgcards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .imgcards { grid-template-columns: 1fr; } }

/* ---------- FIO CONDUTOR (como funciona — LP03) ---------- */
.thread { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.thread__aside { position: sticky; top: 120px; }
.thread__meter { margin-top: var(--sp-6); }
.thread__meter-bar { height: 3px; background: var(--graphite-700); border-radius: 2px; overflow: hidden; }
.thread__meter-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }
.thread__meter-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); color: var(--text-dim); margin-top: var(--sp-3);
}
.thread__list { display: grid; gap: 0; }
.thread__node {
  position: relative; padding: var(--sp-8) 0 var(--sp-8) 60px;
  border-top: 1px solid var(--line);
}
.thread__node:first-child { border-top: 0; padding-top: 0; }
.thread__node::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px;
  background: var(--graphite-700);
}
.thread__node:first-child::before { top: 8px; }
.thread__node:last-child::before { bottom: auto; height: 40px; }
.thread__node > .thread__bullet {
  position: absolute; left: 6px; top: var(--sp-8);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--graphite-600);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.thread__node:first-child > .thread__bullet { top: 4px; }
.thread__node.is-active > .thread__bullet {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-dim);
}
.thread__node h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.thread__node p { color: var(--text-muted); max-width: 62ch; }
@media (max-width: 900px) {
  .thread { grid-template-columns: 1fr; }
  .thread__aside { position: static; }
}

/* ---------- COMPARATIVA (2 cards, design elevado) -------- */
.compare2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.cmp {
  position: relative; border-radius: var(--r-md);
  padding: var(--sp-8);
  background: var(--graphite-900);
  border: 1px dashed var(--graphite-600);
  overflow: hidden;
}
.cmp__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.cmp__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-dim);
}
.cmp h3 { font-size: var(--fs-h3); margin: 0; }
.cmp__rows { margin: 0; }
.cmp__row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding-block: var(--sp-4);
  border-top: 1px dashed var(--graphite-600);
}
.cmp__row:first-child { border-top: 0; padding-top: 0; }
.cmp__row dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-dim);
}
.cmp__row dd { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
/* a diferença de altura entre os dois cards precisa vir da ESTRUTURA, não do
   comprimento do texto: sem isso, um dd mais longo no card alternativo poderia
   inverter a hierarquia silenciosamente. */
.compare2 > .cmp:not(.cmp--own) .cmp__row { padding-block: calc(var(--sp-4) - 3px); }
.compare2 > .cmp:not(.cmp--own) .cmp__row dd { line-height: 1.45; }

/* card recomendado: sólido, maior, com filete que desenha */
.cmp--own {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: calc(var(--sp-8) + var(--sp-3)) var(--sp-8);
  box-shadow: var(--sh-lg);
}
.cmp--own::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease) .2s;
}
.cmp--own.is-drawn::before { transform: scaleX(1); }
html:not(.js) .cmp--own::before { transform: scaleX(1); }
.cmp--own .cmp__row { border-top-style: solid; border-top-color: var(--line); }
.cmp--own .cmp__row dd { color: var(--text); }
.cmp--own .cmp__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--sp-3);
}
.cmp__note { margin-top: var(--sp-8); font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 780px) {
  .compare2 { grid-template-columns: 1fr; align-items: stretch; }
  .cmp--own { padding: var(--sp-8); }
}

/* ---------- PORTFÓLIO + LIGHTBOX ------------------------- */
.folio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.folio__card {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.folio__card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.folio__media { display: block; overflow: hidden; }
.folio__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.folio__card:hover .folio__media img { transform: scale(1.05); }
.folio__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.folio__over {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: var(--sp-2);
}
.folio__body h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.folio__count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); }
/* botão de rótulo curto esticado sobre o card (nunca <button> com fluxo dentro) */
.folio__btn {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: 0; cursor: pointer;
  font: 0/0 a; color: transparent;
}
.folio__btn::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); }
.folio__btn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 900px) { .folio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .folio { grid-template-columns: 1fr; } }

.lb {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(9, 10, 12, .96);
  display: none; padding: var(--sp-6);
}
.lb.is-open { display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-4); }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.lb__title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--graphite-200); }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; border-radius: var(--r-sm); }
.lb__bottom { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); }
.lb__btn {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  background: var(--graphite-800); border: 1px solid var(--line-strong);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
}
.lb__btn:hover { border-color: var(--accent); color: var(--accent); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__counter { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--graphite-200); min-width: 72px; text-align: center; }
body.lb-locked { overflow: hidden; }

/* ---------- ANTES / DEPOIS ------------------------------- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--r-md); overflow: hidden; }
.ba figure { margin: 0; position: relative; display: block; }
.ba img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ba figcaption {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  padding: 4px var(--sp-3); border-radius: var(--r-xs);
  background: rgba(14,16,19,.86);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--off-white);
}
.ba-item h3 { font-size: var(--fs-h4); margin: var(--sp-4) 0 var(--sp-2); }
.ba-item p { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 860px) { .ba-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ------------------------------------------ */
.faq-wrap { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-aside { position: sticky; top: 120px; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
/* o tokens.css traz a variante <details> do design system, com seta em ::after
   e padding no próprio .faq__a. Aqui o acordeão é por JS, com ícone +/×, então:
   1) a seta do DS sai, senão ficam duas afordâncias no mesmo botão;
   2) o padding sai do .faq__a e vai para o <p>, porque com box-sizing:border-box
      o padding funciona como piso de altura e vazava 24px da resposta fechada. */
.faq__q::after { display: none; }
.faq__a { padding-bottom: 0; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-6) 0;
  background: none; border: 0; color: inherit;
  font-family: var(--font-text); font-size: var(--fs-h4); font-weight: var(--fw-medium);
  text-align: left; cursor: pointer;
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--accent);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__icon::before { inset: 8px 0 auto 0; height: 2px; }
.faq__icon::after  { inset: 0 8px auto 8px; width: 2px; height: 18px; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease); }
.faq__a p { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: 72ch; margin: 0; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* ---------- CTA FINAL ----------------------------------- */
.cta { background: var(--bg-deep); }
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.how { position: relative; padding-left: 44px; }
.how__spine { position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: var(--graphite-700); }
.how__spine::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease);
}
[data-timeline].is-drawn .how__spine::after { transform: scaleY(1); }
.how__step { position: relative; padding-bottom: var(--sp-8); }
.how__step:last-child { padding-bottom: 0; }
.how__step::before {
  content: ''; position: absolute; left: -44px; top: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-deep); border: 2px solid var(--graphite-600);
  display: block; transition: border-color var(--dur) var(--ease);
}
[data-timeline].is-drawn .how__step::before { border-color: var(--accent); }
.how__n {
  position: absolute; left: -44px; top: 2px; width: 32px; height: 32px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); z-index: 1;
}
.how__step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.how__step p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.cta__box { }
.cta__phones { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.cta__phones a { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.cta__phones a:hover { color: var(--accent); }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cta__box .btn { width: 100%; } }

/* ---------- FOOTER -------------------------------------- */
.site-footer {
  background: var(--graphite-950);
  border-top: 3px solid var(--accent);
  padding-block: var(--sp-16) var(--sp-8);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); }
.site-footer img { height: 64px; width: auto; margin-bottom: var(--sp-4); }
.site-footer .footer-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--text-dim);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- BARRA FIXA MOBILE --------------------------- */
.stickybar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: none;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(14,16,19,.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .stickybar { display: block; } }

/* ---------- BANNER DE COOKIES --------------------------
   Fica à DIREITA/embaixo com largura limitada, porque o CTA do
   hero fica à esquerda (armadilha paga). Em ≤560px vai full-width
   no rodapé, acima da barra fixa. */
.cookie {
  position: fixed; z-index: 300;
  right: var(--sp-6); bottom: var(--sp-6);
  width: min(420px, calc(100vw - 48px));
  background: var(--graphite-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-6);
  display: none;
}
.cookie.is-visible { display: block; }
.cookie p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 900px) { .cookie { bottom: calc(88px + var(--sp-3) + env(safe-area-inset-bottom)); } }
/* ≤560px o banner vai para o TOPO, não para o rodapé.
   Motivo medido: o hero é full-bleed com o conteúdo ancorado embaixo, então
   o CTA fica exatamente na faixa do rodapé. Com o banner embaixo em largura
   total ele cobria o CTA do hero (armadilha nº 5 do vault). No topo ele
   continua não sendo interstitial: a página rola atrás e ele é dispensável. */
@media (max-width: 560px) {
  .cookie {
    right: 0; left: 0; top: 76px; bottom: auto;
    width: 100%; border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
    padding: var(--sp-5) var(--gutter);
  }
  .cookie p { margin-bottom: var(--sp-4); }
  .cookie__actions .btn { flex: 1 1 130px; min-height: 46px; }
}

/* ---------- PÁGINAS DE CONTEÚDO / FORMULÁRIO ----------- */
.page-head { padding-block: calc(var(--sp-16) + 40px) var(--sp-12); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--sp-12); }
.prose h3 { margin-top: var(--sp-8); }
.prose ul { padding-left: var(--sp-5); color: var(--text-muted); }
.prose li { margin-bottom: var(--sp-2); }
.prose p { color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
.form-grid .field--full { grid-column: 1 / -1; }
.form-note { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--sp-4); }
.form-status { margin-top: var(--sp-4); font-size: var(--fs-sm); }
.form-status[data-state="ok"] { color: var(--success); }
.form-status[data-state="err"] { color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- REVEAL (estado base; a camada rica é do motion) */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-in { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }
html:not(.js) .faq__a { max-height: none !important; }
html:not(.js) .cmp--own::before,
html:not(.js) .tl__line-fill,
html:not(.js) .steps__spine::after,
html:not(.js) .how__spine::after { transform: none !important; }