/* tectoniq.com.br — CSS da landing. Depende dos tokens da marca (assets/brand/*).
   Prefixo .site-* pra não colidir com as classes .tq-* da marca. Zero gradiente/sombra decorativa. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--tq-blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Todo texto vivo herda Geologica. A única exceção é o wordmark oficial,
   cuja família própria permanece isolada em `.tq-wordmark`. */
.tq-body{font-family:var(--tq-font-body)}
.tq-body :where(button,input,textarea,select,option){font-family:var(--tq-font-body)}

/* Foco visível (acessibilidade) — o azul da marca */
:focus-visible{outline:2px solid var(--tq-blue);outline-offset:3px;border-radius:4px}
.tq-surface-dark :focus-visible{outline-color:var(--tq-sky)}

/* Skip link */
.site-skip{position:absolute;left:-999px;top:8px;background:var(--tq-blue);color:#fff;
  padding:10px 16px;border-radius:9999px;z-index:100}
.site-skip:focus{left:16px}

.site-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.site-eyebrow{font:var(--tq-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--tq-blue);
  display:inline-block;margin:0 0 18px}
.tq-surface-dark .site-eyebrow{color:var(--tq-sky)}

/* Botões — reforço de estados sobre a base .tq-btn da marca */
.tq-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1;
  transition:filter .15s ease,transform .15s ease,background .15s ease,color .15s ease}
.tq-btn:hover{text-decoration:none}
.tq-btn--primary:hover{filter:brightness(.93)}
.tq-btn--secondary:hover{background:var(--tq-ink);color:var(--tq-canvas)}
.tq-btn--dark:hover{filter:brightness(1.12)}
.tq-btn:active{transform:translateY(1px)}

/* ---------- NAV ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--tq-canvas) 97%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid transparent;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.site-nav.is-stuck{border-bottom-color:var(--tq-line)}
/* No topo, a nav flutua transparente sobre o hero escuro (texto claro).
   Ao rolar (.is-stuck) ela volta ao canvas sólido — o site.js aplica a classe. */
.site-nav:not(.is-stuck){background:transparent;backdrop-filter:none;color:var(--tq-on-dark)}
.site-nav:not(.is-stuck) .tq-wordmark{color:var(--tq-on-dark)}
.site-nav:not(.is-stuck) .tq-wordmark .q{color:var(--tq-sky)}
.site-nav:not(.is-stuck) .site-nav__links a{color:color-mix(in srgb,var(--tq-on-dark) 82%,transparent)}
.site-nav:not(.is-stuck) .site-nav__links a:hover{color:var(--tq-on-dark)}
.site-nav:not(.is-stuck) .site-nav__cta{background:var(--tq-blue);color:#fff}
.site-nav__row{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.site-brand{display:inline-flex;align-items:center;gap:11px}
.site-brand__mark{width:28px;height:28px;flex:0 0 auto}
.site-brand .tq-wordmark{font-size:17px}
/* Navbar sem marca no topo do hero (o hero já traz o lockup): ícone + nome só
   aparecem quando a nav gruda ao rolar (.is-stuck). */
.site-brand{transition:opacity .28s ease,transform .28s ease}
.site-nav:not(.is-stuck) .site-brand{opacity:0;visibility:hidden;transform:translateX(-8px);pointer-events:none}
.site-nav__links{display:flex;align-items:center;gap:28px}
.site-nav__links a:not(.site-nav__cta){color:var(--tq-muted);font:600 14px/1 var(--tq-font-display);text-decoration:none}
.site-nav__links a:not(.site-nav__cta):hover{color:var(--tq-ink)}
.site-nav__links a.site-nav__cta{color:#fff}
.site-nav__cta{font-size:14px;padding:10px 18px}
@media(max-width:760px){.site-nav__links a:not(.site-nav__cta){display:none}}
@media(max-width:360px){
  .site-wrap{padding-inline:16px}
  .site-nav__row{gap:10px}
  .site-brand{gap:8px}
  .site-brand__mark{width:26px;height:26px}
  .site-brand .tq-wordmark{font-size:15px}
  .site-nav__cta{font-size:13px;padding:10px 13px;white-space:nowrap}
}

/* ---------- HERO (vídeo de fundo em loop) ---------- */
/* full-bleed escuro: começa no topo da página e ocupa a dobra inteira.
   A nav é uma pílula `position:fixed` (nav-pill.css), então NÃO ocupa espaço no
   fluxo e o hero não leva margin-top negativa — se levasse, a dobra terminaria
   antes de 100svh e a seção branca seguinte apareceria como faixa no rodapé. */
.site-hero--video{position:relative;isolation:isolate;overflow:hidden;
  /* svh = altura com a barra do navegador ABERTA (a menor). Sozinha, ela deixa o
     hero curto quando a barra recolhe no scroll e a faixa branca volta no mobile.
     dvh acompanha o viewport atual; o svh acima fica de fallback pra browser velho. */
  min-height:100svh;
  min-height:100dvh;
  display:flex;align-items:center;
  /* folga no topo pro conteúdo não encostar na pílula flutuante (top:20px + ~52px) */
  padding:calc(72px + clamp(24px,6vw,72px)) 0 clamp(48px,8vw,96px)}

/* Camada de vídeo — cobre a seção, sem esticar (object-fit:cover) */
.site-hero__video{position:absolute;inset:0;z-index:-1}
.site-hero__video video{width:100%;height:100%;object-fit:cover;display:block}
/* Scrim: escurece topo/base pra garantir contraste AAA do texto on-dark.
   Sem cor nova — só o próprio bedrock em opacidades diferentes. */
.site-hero__scrim{position:absolute;inset:0;
  background:
    radial-gradient(115% 68% at 50% 46%,
      color-mix(in srgb,var(--tq-bedrock) 60%,transparent) 0%,
      transparent 66%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--tq-bedrock) 74%,transparent) 0%,
      color-mix(in srgb,var(--tq-bedrock) 40%,transparent) 44%,
      color-mix(in srgb,var(--tq-bedrock) 72%,transparent) 100%)}

.site-hero__content{position:relative;text-align:center;width:100%}
/* Lockup do hero: ícone + wordmark lado a lado, centralizados */
.site-hero__lockup{display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,26px);flex-wrap:wrap}
.site-hero__mark{height:clamp(28px,5vw,46px);width:auto;flex:0 0 auto}
.site-hero .tq-wordmark{font-size:clamp(26px,5vw,46px);line-height:1}
/* M3: headline cinético grande + palavra que rotaciona (amplitude/agnóstico de setor) */
.site-hero__tagline{font:var(--tq-display);font-size:clamp(30px,6vw,60px);letter-spacing:-.028em;
  color:var(--tq-on-dark);margin:26px auto 0;line-height:1.04;text-wrap:balance}
.site-hero__l1{display:block}
.site-hero__rotline{display:block;overflow:hidden;padding:.06em 0}
.site-hero__rot{display:inline-block;color:var(--tq-sky);will-change:transform,opacity}
.site-hero__sub{font:var(--tq-text);font-size:clamp(16px,2vw,19px);color:var(--tq-on-dark);opacity:.85;
  max-width:60ch;margin:20px auto 0;text-wrap:pretty}
.site-hero__cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* botão secundário (ghost) sobre superfície escura: borda/texto claros */
.site-hero--video .tq-btn--secondary{color:var(--tq-on-dark);border-color:var(--tq-on-dark)}
.site-hero--video .tq-btn--secondary:hover{background:var(--tq-on-dark);color:var(--tq-ink)}
.site-hero__micro{margin:30px auto 0;display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;
  font:var(--tq-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--tq-on-dark);opacity:.72}
.site-hero__micro span{display:inline-flex;align-items:center;gap:8px}
.site-hero__micro span::before{content:"";width:5px;height:5px;border-radius:9999px;background:var(--tq-sky)}

/* ---------- SEÇÃO ---------- */
.site-section{padding:clamp(56px,9vw,96px) 0}
.site-section--soft{background:var(--tq-cloud)}
.site-section__head{max-width:60ch}
.site-section__head h2{font:var(--tq-h2);letter-spacing:-.02em;color:var(--tq-ink);margin:0}
.site-section__head p{font:var(--tq-text);color:var(--tq-body);margin:14px 0 0;max-width:56ch}

/* ---------- SERVIÇOS · FALHA TECTÔNICA ----------
   O antes é deliberadamente solto; o depois é uma trilha operacional contínua.
   GSAP 3.15 + ScrollTrigger orquestram somente transform/opacity e a variável da linha. */
.site-fault-section{position:relative;overflow:hidden;scroll-margin-top:66px;background:#fff;color:var(--tq-ink);
  border-block:1px solid var(--tq-line)}
.site-fault__intro{max-width:760px}
.site-fault__intro h2{font:var(--tq-display);font-size:clamp(34px,5.2vw,60px);line-height:1.01;
  letter-spacing:-.035em;color:var(--tq-ink);margin:0;max-width:18ch;text-wrap:balance}
.site-fault__intro h2 b{color:var(--tq-blue);font-weight:inherit}
.site-fault__intro>p:last-child{font:var(--tq-text);font-size:clamp(16px,1.8vw,19px);line-height:1.6;
  color:var(--tq-body);margin:22px 0 0;max-width:62ch}

.site-fault__switcher{display:flex;align-items:stretch;gap:10px;margin-top:36px;flex-wrap:wrap}
.site-fault__story,.site-fault__replay{appearance:none;border:1px solid color-mix(in srgb,var(--tq-blue) 25%,var(--tq-line));
  background:#fff;color:var(--tq-body);min-height:52px;border-radius:9999px;padding:8px 15px;
  font-family:var(--tq-font-display);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.site-fault__story{display:grid;grid-template-columns:28px auto;grid-template-rows:auto auto;column-gap:9px;text-align:left}
.site-fault__story>span{grid-row:1/3;display:grid;width:28px;height:28px;place-items:center;align-self:center;
  border-radius:8px;background:var(--tq-cloud);color:var(--tq-blue)}
.site-fault__story img{display:block;width:22px;height:22px;object-fit:contain}
.site-fault__story strong{align-self:end;font-size:12px;font-weight:650}
.site-fault__story small{align-self:start;margin-top:2px;font-size:9px;letter-spacing:.04em;opacity:.7}
.site-fault__story:hover,.site-fault__replay:hover{border-color:var(--tq-blue);color:var(--tq-ink)}
.site-fault__story:active,.site-fault__replay:active{transform:translateY(1px)}
.site-fault__story.is-active{border-color:var(--tq-blue);background:var(--tq-blue);color:#fff}
.site-fault__story.is-active>span{background:#fff;color:var(--tq-blue)}
.site-fault__replay{display:inline-flex;align-items:center;gap:7px;font-size:12px}
.site-fault__replay span{font-size:17px}
.site-fault__note{margin:10px 0 0;color:var(--tq-muted);
  font:500 10.5px/1.5 var(--tq-font-body);letter-spacing:.02em}

.site-fault__stage{display:grid;grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);gap:26px;
  align-items:stretch;margin-top:28px}
.site-fault__before,.site-fault__after{position:relative;min-width:0;min-height:390px;padding:24px;
  border:1px solid color-mix(in srgb,var(--tq-blue) 18%,var(--tq-line));border-radius:16px}
.site-fault__before{overflow:hidden;background:var(--tq-cloud)}
.site-fault__after{background:#fff}
.site-fault__label{position:relative;z-index:3;margin:0;color:var(--tq-muted);
  font:600 10.5px/1.4 var(--tq-font-body);letter-spacing:.13em}

.site-fault__fragments{position:relative;min-height:310px;margin-top:10px}
.site-fault__break{position:absolute;z-index:0;display:block;height:1px;background:color-mix(in srgb,var(--tq-blue) 24%,transparent);
  transform-origin:left}
.site-fault__break--a{left:5%;top:34%;width:42%;transform:rotate(19deg)}
.site-fault__break--b{right:4%;bottom:28%;width:36%;transform:rotate(-16deg)}
.site-fault__fragment{position:absolute;z-index:2;display:grid;
  grid-template-columns:minmax(38px,auto) minmax(0,1fr);align-items:center;gap:10px;
  width:47%;min-height:68px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--tq-blue) 24%,var(--tq-line));
  border-radius:10px;background:#fff;color:var(--tq-ink)}
.site-fault__source{display:grid;min-width:38px;height:38px;padding:0 6px;place-items:center;
  background:#fff}
.site-fault__source img{display:block;width:27px;height:27px;object-fit:contain}
.site-fault__fragment>span:last-child{display:grid;gap:4px;min-width:0}
.site-fault__fragment strong{overflow:visible;text-overflow:clip;font:620 12px/1.2 var(--tq-font-display);white-space:normal}
.site-fault__fragment>span:last-child small{overflow:visible;text-overflow:clip;color:var(--tq-muted);
  font:500 10px/1.25 var(--tq-font-body);white-space:normal}
.site-fault__fragment:nth-child(3){left:0;top:10%;transform:rotate(-3.5deg)}
.site-fault__fragment:nth-child(4){right:0;top:1%;transform:rotate(2.5deg)}
.site-fault__fragment:nth-child(5){left:25%;top:39%;transform:rotate(1.5deg)}
.site-fault__fragment:nth-child(6){right:0;top:68%;transform:rotate(-2.5deg)}
.site-fault__fragment:nth-child(7){left:0;top:78%;transform:rotate(3deg)}

.site-fault__core{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.site-fault__line{position:absolute;inset:0 auto;left:50%;width:1px;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--tq-blue) 34%,transparent) 0 28%,
    transparent 28% 72%,
    color-mix(in srgb,var(--tq-blue) 34%,transparent) 72% 100%);
  transform:rotate(8deg);transform-origin:center}
.site-fault__mark{position:relative;z-index:1;width:88px;height:88px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tq-blue) 38%,transparent);border-radius:21px;background:#fff}
.site-fault__slab{position:absolute;left:17px;width:54px;height:24px;border-radius:7px;--fault-slip:7px}
.site-fault__slab--top{top:17px;background:var(--tq-blue);transform:translateX(var(--fault-slip)) skewX(-10deg)}
.site-fault__slab--bottom{bottom:17px;background:var(--tq-ink);transform:translateX(calc(-1 * var(--fault-slip))) skewX(-10deg)}
.site-fault__core>strong,.site-fault__core>small{position:relative;z-index:1;display:block}
.site-fault__core>strong{margin-top:17px;color:var(--tq-ink);font:650 15px/1.2 var(--tq-font-display)}
.site-fault__core>small{margin-top:6px;color:var(--tq-muted);font:500 8.5px/1.4 var(--tq-font-body)}

.site-fault__flow{position:relative;display:grid;margin:24px 0 0;padding:0;list-style:none;--fault-flow-scale:1}
.site-fault__flow::before{position:absolute;z-index:0;top:35px;bottom:35px;left:18px;width:1px;
  background:var(--tq-blue);content:"";transform:scaleY(var(--fault-flow-scale));transform-origin:top}
.site-fault__flow li{position:relative;z-index:1;display:grid;
  grid-template-columns:36px minmax(0,1fr) minmax(48px,auto);gap:13px;align-items:center;min-height:71px;
  padding:13px 0;border-top:1px solid var(--tq-line);color:var(--tq-ink)}
.site-fault__flow li:last-child{border-bottom:1px solid var(--tq-line)}
.site-fault__flow-app{position:relative;z-index:1;display:grid;width:36px;height:36px;place-items:center;
  background:#fff}
.site-fault__flow-app img{display:block;width:28px;height:28px;object-fit:contain}
.site-fault__flow-copy{display:grid;gap:5px;min-width:0}
.site-fault__flow-copy small{color:var(--tq-blue);font:650 10px/1.15 var(--tq-font-body);letter-spacing:.1em}
.site-fault__flow strong{overflow:hidden;text-overflow:ellipsis;font:600 12px/1.25 var(--tq-font-display);white-space:nowrap}
.site-fault__flow-state{justify-self:end;max-width:86px;color:var(--tq-muted);font:600 10px/1.2 var(--tq-font-body);
  letter-spacing:.06em;text-align:right;white-space:normal}
.site-fault__caption{margin:22px 0 0;text-align:center;color:var(--tq-muted);
  font:500 10.5px/1.5 var(--tq-font-body)}

@media(max-width:840px){
  .site-fault__stage{grid-template-columns:1fr;gap:18px}
  .site-fault__before{min-height:430px;padding:20px}
  .site-fault__after{min-height:0;padding:20px}
  .site-fault__fragments{min-height:350px;margin-top:12px}
  .site-fault__fragment{width:44%}
  .site-fault__core{display:grid;grid-template-columns:1fr auto auto 1fr;gap:12px;min-height:84px}
  .site-fault__core::before,.site-fault__core::after{height:1px;background:color-mix(in srgb,var(--tq-blue) 36%,transparent);content:""}
  .site-fault__line{display:none}
  .site-fault__mark{width:54px;height:54px;border-radius:14px}
  .site-fault__slab{left:10px;width:34px;height:14px;border-radius:4px;--fault-slip:4px}
  .site-fault__slab--top{top:11px}
  .site-fault__slab--bottom{bottom:11px}
  .site-fault__core>strong{margin:0;text-align:left;font-size:13px}
  .site-fault__core>small{display:none}
  .site-fault__flow{margin-top:18px}
}
@media(max-width:560px){
  .site-fault__intro h2{font-size:clamp(33px,10.5vw,43px)}
  .site-fault__switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:28px}
  .site-fault__story{display:flex;min-width:0;min-height:76px;padding:8px 5px;border-radius:13px;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
  .site-fault__story>span{width:26px;height:26px}
  .site-fault__story strong{align-self:center;width:100%;font-size:10.5px;line-height:1.15;text-align:center}
  .site-fault__story small{align-self:center;width:100%;margin:0;font-size:8px;line-height:1.2;text-align:center}
  .site-fault__replay{grid-column:1/-1;justify-content:center;min-height:40px;padding-block:6px}
  .site-fault__note{text-align:center}
  .site-fault__before{min-height:500px;padding:18px 16px}
  .site-fault__fragments{min-height:422px;margin-top:10px}
  .site-fault__fragment{width:58%;min-height:70px;padding:9px 10px}
  .site-fault__fragment:nth-child(3){left:1%;top:6%;transform:rotate(-4deg)}
  .site-fault__fragment:nth-child(4){right:0;top:24%;transform:rotate(3deg)}
  .site-fault__fragment:nth-child(5){left:7%;top:44%;transform:rotate(-1.5deg)}
  .site-fault__fragment:nth-child(6){right:2%;top:63%;transform:rotate(3.5deg)}
  .site-fault__fragment:nth-child(7){left:0;top:81%;transform:rotate(-2.5deg)}
  .site-fault__break--a{left:8%;top:33%;width:55%;transform:rotate(28deg)}
  .site-fault__break--b{right:2%;bottom:25%;width:48%;transform:rotate(-24deg)}
  .site-fault__source{min-width:36px;height:36px}
  .site-fault__fragment strong{overflow:visible;text-overflow:clip;
    font-size:11.5px;line-height:1.2;white-space:normal}
  .site-fault__fragment>span:last-child small{overflow:visible;text-overflow:clip;
    font-size:9.5px;line-height:1.25;white-space:normal}
  .site-fault__core{grid-template-columns:1fr auto auto 1fr;gap:8px}
  .site-fault__after{padding:18px 16px}
  .site-fault__flow li{grid-template-columns:36px minmax(0,1fr) minmax(45px,auto);gap:10px;min-height:76px}
  .site-fault__flow strong{overflow:visible;text-overflow:clip;font-size:11.5px;white-space:normal}
  .site-fault__flow-copy small{line-height:1.25}
  .site-fault__caption{text-align:left}
}

/* ---------- COMO FUNCIONA (passos) ---------- */
.site-steps{display:grid;gap:28px;grid-template-columns:1fr;margin-top:40px;counter-reset:step}
@media(min-width:760px){.site-steps{grid-template-columns:repeat(3,1fr);gap:24px}}
.site-step{position:relative;padding-top:8px;border-top:2px solid var(--tq-line)}
.site-step__n{font:var(--tq-font-mono);font-size:13px;letter-spacing:.1em;color:var(--tq-blue);
  font-weight:600;display:block;margin-bottom:12px}
.site-step h3{font:var(--tq-h3);color:var(--tq-ink);margin:0 0 6px}
.site-step p{font:var(--tq-text);color:var(--tq-body);margin:0}

/* ---------- COMO FUNCIONA · Numerais editoriais (cor geada) ----------
   Sem ícones: o kit "linha fina em círculo" dá cara de IA genérica. Aqui o visual vem de
   NUMERAIS gigantes + um filete azul que cresce sob cada título. Reveal em cascata quando a
   seção entra na tela (site.js adiciona .in em [data-animate]). Só tokens da marca. */
.site-section__head h2 b{color:var(--tq-blue);font-weight:inherit}

.como-flow{margin-top:clamp(42px,6vw,72px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,40px)}
/* card: padding + borda transparente reservada (sem pulo no hover). Reveal usa a
   propriedade `translate` (independente de `transform`) pra não brigar com o hover. */
.como-step{position:relative;opacity:0;translate:0 22px;padding:24px 22px;border-radius:16px;border:1px solid transparent}
.como-flow.in .como-step{animation:comoRise .6s cubic-bezier(.2,.9,.25,1) forwards}
.como-flow.in .como-step:nth-child(2){animation-delay:.12s}
.como-flow.in .como-step:nth-child(3){animation-delay:.28s}
.como-flow.in .como-step:nth-child(4){animation-delay:.44s}
@keyframes comoRise{to{opacity:1;translate:0 0}}

.como-numly{font:700 clamp(52px,8vw,92px)/1 var(--tq-font-display);letter-spacing:-.05em;
  color:color-mix(in srgb,var(--tq-ink) 16%,transparent)}
.como-numly b{color:var(--tq-blue);font-weight:inherit;transition:color .2s ease .18s}
/* O "01" só fica azul quando NENHUM card está sob o mouse; ao focar qualquer card,
   só o numeral do card ativo acende (o 01 volta pro tom neutro). */
.como-flow:has(.como-step:hover) .como-numly b{color:inherit}
.como-num{display:block;margin-top:14px;font:600 11px/1 var(--tq-font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tq-muted)}
.como-step h3{font:600 clamp(19px,2.2vw,24px)/1.15 var(--tq-font-display);color:var(--tq-ink);
  margin:8px 0 8px;letter-spacing:-.01em}
.como-step h3::after{content:"";display:block;height:3px;width:0;background:var(--tq-blue);border-radius:2px;margin-top:12px}
.como-flow.in .como-step h3::after{animation:comoGrow .6s cubic-bezier(.2,.8,.2,1) forwards}
.como-flow.in .como-step:nth-child(1) h3::after{animation-delay:.35s}
.como-flow.in .como-step:nth-child(2) h3::after{animation-delay:.47s}
.como-flow.in .como-step:nth-child(3) h3::after{animation-delay:.63s}
.como-flow.in .como-step:nth-child(4) h3::after{animation-delay:.79s}
@keyframes comoGrow{to{width:40px}}
.como-step p{font:var(--tq-text);font-size:14.5px;color:var(--tq-body);margin:0}

/* Hover: levanta o CARD inteiro. Profundidade por superfície (fica canvas sobre a geada
   + ganha borda), sem sombra. O numeral acende em azul e cresce, o filete estica. */
.como-step{transition:transform .32s cubic-bezier(.2,.85,.25,1),background .3s ease,border-color .3s ease}
.como-numly{transition:color .3s ease,transform .32s cubic-bezier(.2,.85,.25,1)}
.como-step h3::after{transition:width .32s cubic-bezier(.2,.85,.25,1)}
@media(hover:hover){
  .como-step:hover{transform:translateY(-12px);background:var(--tq-canvas);border-color:var(--tq-line)}
  .como-step:hover .como-numly{color:var(--tq-blue);transform:scale(1.08)}
  .como-step:hover h3::after{width:64px}
}

@media(max-width:720px){.como-flow{grid-template-columns:1fr 1fr;gap:34px 24px}}
@media(max-width:460px){.como-flow{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .como-step{opacity:1;translate:0 0}
  .como-step h3::after{width:40px}
}

/* ---------- FAIXA BEDROCK (diferencial) ---------- */
.site-band{background:var(--tq-bedrock);color:var(--tq-on-dark)}
.site-band__inner{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
  padding-block:clamp(56px,9vw,92px)}
@media(min-width:860px){.site-band__inner{grid-template-columns:1.15fr .85fr;gap:56px}}
.site-band h2{font:var(--tq-display);font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;
  color:var(--tq-on-dark);margin:0;text-wrap:balance}
.site-band p{font:var(--tq-text);font-size:17px;color:var(--tq-on-dark);opacity:.82;margin:22px 0 0;max-width:52ch}
.site-band p b{color:var(--tq-on-dark);opacity:1;font-weight:600}
.site-band__art{display:flex;justify-content:center}
.site-band__art svg{width:min(300px,80%);height:auto}

/* "O modelo" — Direção 3: frase-âncora que sobe por máscara (CSS puro; 1x ao entrar via .in) */
.site-band__quote{margin:14px 0 0}
.site-band__quote .tq-rev{display:block;overflow:hidden}
.site-band__quote .tq-rev i{display:block;font-style:normal;font:var(--tq-display);
  font-size:clamp(30px,5.2vw,58px);letter-spacing:-.03em;line-height:1.05;color:var(--tq-on-dark);transform:translateY(105%)}
.site-band__quote .tq-rev i em{font-style:normal;color:var(--tq-sky)}
@media(prefers-reduced-motion:no-preference){
  [data-animate].in .site-band__quote .tq-rev i{animation:tqRise .9s cubic-bezier(.2,.7,.2,1) forwards}
  [data-animate].in .site-band__quote .tq-rev:nth-child(2) i{animation-delay:.12s}
}
@keyframes tqRise{to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.site-band__quote .tq-rev i{transform:none}}
.site-band__stamp{display:inline-flex;align-items:center;gap:10px;margin:26px 0 0;
  font:600 13px/1 var(--tq-font-mono);letter-spacing:.06em;color:var(--tq-sky)}
.site-band__stamp .dot{width:8px;height:8px;border-radius:999px;background:var(--tq-sky)}

/* Contato — janela de chat (Direção 1A): cartão escuro, balões e campo que abre o WhatsApp */
.site-chat{display:flex;flex-direction:column;background:color-mix(in srgb,var(--tq-on-dark) 5%,var(--tq-bedrock));color:var(--tq-on-dark);
  border:1px solid color-mix(in srgb,var(--tq-on-dark) 14%,transparent);border-radius:18px;overflow:hidden}
.site-chat__top{display:flex;align-items:center;gap:11px;padding:14px 16px;
  background:color-mix(in srgb,var(--tq-on-dark) 6%,var(--tq-bedrock));
  border-bottom:1px solid color-mix(in srgb,var(--tq-on-dark) 12%,transparent)}
.site-chat__ava{width:34px;height:34px;border-radius:50%;background:var(--tq-sky);display:grid;place-items:center;
  color:#04203f;font:700 13px/1 var(--tq-font-mono)}
.site-chat__who{display:block;font:700 14px/1.2 var(--tq-font-display);color:var(--tq-on-dark)}
.site-chat__stat{display:flex;align-items:center;gap:6px;font:400 12px/1.3 var(--tq-font-mono);color:#7fdca0}
.site-chat__stat::before{content:"";width:7px;height:7px;border-radius:50%;background:#25D366}
.site-chat__body{padding:18px 16px;display:flex;flex-direction:column;gap:10px;min-height:128px}
.site-chat__bub{align-self:flex-start;max-width:86%;padding:12px 15px;border-radius:16px;border-bottom-left-radius:5px;
  background:color-mix(in srgb,var(--tq-on-dark) 12%,var(--tq-bedrock));color:var(--tq-on-dark);font:var(--tq-text);font-size:14.5px}
.site-chat__typing{align-self:flex-start;display:inline-flex;gap:4px;padding:14px 16px;border-radius:16px;border-bottom-left-radius:5px;
  background:color-mix(in srgb,var(--tq-on-dark) 12%,var(--tq-bedrock))}
.site-chat__typing i{width:7px;height:7px;border-radius:50%;background:#7C93B4;display:block}
@media(prefers-reduced-motion:no-preference){
  .site-chat__typing i{animation:tqBlink 1.3s infinite}
  .site-chat__typing i:nth-child(2){animation-delay:.2s}.site-chat__typing i:nth-child(3){animation-delay:.4s}
}
@keyframes tqBlink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.site-chat__bar{display:flex;gap:8px;padding:12px;background:color-mix(in srgb,var(--tq-on-dark) 6%,var(--tq-bedrock));
  border-top:1px solid color-mix(in srgb,var(--tq-on-dark) 12%,transparent)}
.site-chat__bar input{flex:1;min-width:0;background:var(--tq-bedrock);color:var(--tq-on-dark);
  font-family:var(--tq-font-display);font-size:14px;border-radius:999px;padding:12px 16px;outline:none;
  border:1.5px solid color-mix(in srgb,var(--tq-on-dark) 16%,transparent)}
.site-chat__bar input::placeholder{color:#8fa2ba}
.site-chat__bar input:focus{border-color:var(--tq-sky)}
.site-chat__send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;background:#25D366;color:#04311a;
  cursor:pointer;display:grid;place-items:center;transition:filter .15s}
.site-chat__send:hover{filter:brightness(1.06)}
.site-chat__send svg{width:20px;height:20px}
.site-chat .site-form__status{color:var(--tq-sky);margin:0;padding:10px 16px 0;font-size:13px}
.site-chat__note{font:var(--tq-text);font-size:12.5px;color:#8fa2ba;margin:0;padding:12px 16px 14px}

/* ---------- CONTATO ---------- */
/* Contato = FECHAMENTO: fundo BRANCO com um gradiente azul "líquido" bem sutil (sussurro, não domina) */
.site-contact{position:relative;overflow:hidden;isolation:isolate;background:#fff;color:var(--tq-ink)}
.site-contact__glow{position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(72px);opacity:.42;
  background:
    radial-gradient(40% 46% at 20% 28%, color-mix(in srgb,var(--tq-sky) 30%,transparent), transparent 72%),
    radial-gradient(38% 44% at 82% 72%, color-mix(in srgb,var(--tq-blue) 20%,transparent), transparent 70%),
    radial-gradient(30% 36% at 64% 20%, color-mix(in srgb,var(--tq-sky) 22%,transparent), transparent 74%)}
@media(prefers-reduced-motion:no-preference){.site-contact__glow{animation:tqLiquid 22s ease-in-out infinite alternate}}
@keyframes tqLiquid{
  0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1.05)}
  50%{transform:translate3d(5%,4%,0) rotate(9deg) scale(1.18)}
  100%{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.08)}
}
.site-contact__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:860px){.site-contact__inner{grid-template-columns:1.05fr .95fr;gap:64px}}
.site-contact__title{font:var(--tq-display);font-size:clamp(34px,5.2vw,58px);letter-spacing:-.035em;line-height:1.02;
  color:var(--tq-ink);margin:16px 0 0;text-wrap:balance}
.site-contact__lead{font:var(--tq-text);font-size:17px;color:var(--tq-body);margin:18px 0 0;max-width:40ch}
.site-contact__form{display:flex;flex-direction:column;gap:16px}
.site-contact__field{display:flex;flex-direction:column;gap:7px}
.site-contact__field label{font:600 13px/1 var(--tq-font-display);color:var(--tq-ink)}
.site-contact__form input,.site-contact__form textarea{font:400 15px/1.45 var(--tq-font-display);color:var(--tq-ink);
  background:#fff;border:1.5px solid var(--tq-line);
  border-radius:12px;padding:14px 15px;width:100%;outline:none;transition:border-color .18s}
.site-contact__form textarea{min-height:96px;resize:vertical}
.site-contact__form input::placeholder,.site-contact__form textarea::placeholder{color:var(--tq-muted)}
.site-contact__form input:focus,.site-contact__form textarea:focus{border-color:var(--tq-blue)}
.site-contact__form .tq-btn--primary{width:100%;margin-top:2px}
.site-contact__form .site-form__status{color:var(--tq-blue);margin:0;font-size:13px}
.site-contact__note{font:var(--tq-text);font-size:12.5px;color:var(--tq-muted);margin:0}

/* Gradiente azul "líquido" REUTILIZÁVEL para fundos escuros (O MODELO, rodapé). Só azul + sky. */
.tq-liquid{position:relative;overflow:hidden;isolation:isolate}
.tq-liquid > *{position:relative;z-index:1}
.tq-liquid::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;filter:blur(66px);opacity:.5;
  background:
    radial-gradient(38% 44% at 22% 30%, color-mix(in srgb,var(--tq-blue) 88%,transparent), transparent 70%),
    radial-gradient(36% 42% at 80% 70%, color-mix(in srgb,var(--tq-sky) 52%,transparent), transparent 68%),
    radial-gradient(30% 36% at 60% 20%, color-mix(in srgb,var(--tq-blue) 58%,transparent), transparent 72%)}
@media(prefers-reduced-motion:no-preference){.tq-liquid::before{animation:tqLiquid 22s ease-in-out infinite alternate}}
.site-channels{display:flex;flex-direction:column;gap:14px}
.site-channel{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--tq-line);
  border-radius:14px;background:var(--tq-canvas);transition:border-color .18s ease}
.site-channel:hover{border-color:var(--tq-blue);text-decoration:none}
.site-channel svg{width:24px;height:24px;flex:0 0 auto;color:var(--tq-blue)}
.site-channel b{font:var(--tq-h3);color:var(--tq-ink);display:block}
.site-channel span{font:var(--tq-text);font-size:14px;color:var(--tq-muted)}

/* Formulário */
.site-form{display:flex;flex-direction:column;gap:16px}
.site-field label{font:600 13px/1 var(--tq-font-display);color:var(--tq-ink);display:block;margin-bottom:7px}
.site-field input,.site-field textarea{width:100%;font:var(--tq-text);color:var(--tq-ink);
  background:var(--tq-canvas);border:1px solid var(--tq-line);border-radius:12px;padding:13px 15px}
.site-field textarea{min-height:120px;resize:vertical}
.site-field input:focus,.site-field textarea:focus{outline:2px solid var(--tq-blue);outline-offset:0;border-color:transparent}
.site-form__note{font:var(--tq-text);font-size:13px;color:var(--tq-muted);margin:0}
.site-form__status{font:600 14px/1.4 var(--tq-font-display);margin:0;min-height:1.2em}
.site-form__status.ok{color:var(--tq-blue)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--tq-bedrock);color:var(--tq-on-dark);padding:56px 0 40px}
.site-footer__row{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.site-footer .tq-wordmark{font-size:24px}
.site-footer__tag{font:var(--tq-text);color:var(--tq-on-dark);opacity:.7;margin:10px 0 0;max-width:32ch;line-height:1.5}
.site-footer__pills{display:flex;flex-direction:column;gap:6px;min-width:230px;padding:12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--tq-on-dark) 13%,transparent);
  background:color-mix(in srgb,var(--tq-on-dark) 5%,transparent)}
.site-footer__pills-label{font:700 11px/1 var(--tq-font-display);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tq-on-dark) 55%,transparent);padding:6px 16px 8px}
.site-footer__pill{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:11px;
  color:var(--tq-on-dark);text-decoration:none;font:600 14px/1 var(--tq-font-display);
  transition:background .18s ease,color .18s ease}
.site-footer__pill svg{width:19px;height:19px;flex:0 0 auto;color:var(--tq-sky)}
.site-footer__pill:hover{color:var(--tq-sky);background:color-mix(in srgb,var(--tq-sky) 12%,transparent)}
.site-footer__legal{margin-top:30px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--tq-on-dark) 14%,transparent);
  font:var(--tq-text);font-size:13px;color:var(--tq-on-dark);opacity:.55}

/* ---------- MOTION (respeita prefers-reduced-motion) ---------- */
@media(prefers-reduced-motion:no-preference){
  [data-animate]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.3,1)}
  [data-animate].in{opacity:1;transform:none}
}

/* ---------- LOADER (intro de marca "Traço · Escrita") ----------
   A marca se DESENHA (contorno das placas → preenche) e o NOME é revelado da esquerda p/ a
   direita por clip, já no tracking final — sem fade e sem expansão; o Q acende no fim.
   Overlay bedrock opaco desde o 1º frame (zero flash) e some sozinho por CSS (tqld-out,
   forwards) — robusto sem JS. O logo fica completo por ~0,6s antes de dissolver (respiro curto).
   Duração total ≈ 3,0s. Respiro = delay do tqld-out abaixo (logo pronto ~1,7s; delay 2,3s).
   Saída SUTIL: fade + leve escala (o "preto" abre e expande) e o hero entra junto (.tq-entered).
   Sem cor nova: só bedrock + on-dark + sky. */
.tqld{position:fixed;inset:0;z-index:9999;background:var(--tq-bedrock);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:tqld-out .7s cubic-bezier(.4,0,.2,1) 2.3s forwards}
.tqld[hidden]{display:none}
.tqld__stage{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4.5vw,42px)}

/* Marca que se desenha (SVG): o contorno corre (stroke-dashoffset) e depois preenche */
.tqld__mark{width:clamp(150px,34vw,230px);height:auto;overflow:visible}
.tqld__r{fill-opacity:0;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-dasharray:210;stroke-dashoffset:210;
  animation:tqld-draw .65s cubic-bezier(.5,0,.15,1) .1s both, tqld-fill .3s ease .6s both}
.tqld__r--light{stroke:var(--tq-on-dark);fill:var(--tq-on-dark)}
.tqld__r--sky{stroke:var(--tq-sky);fill:var(--tq-sky)}
@keyframes tqld-draw{to{stroke-dashoffset:0}}
@keyframes tqld-fill{to{fill-opacity:1}}

/* Nome: revelado L→R por clip, já no tracking final (.26em) — sem fade, sem expansão */
.tqld__word{font-size:clamp(30px,7vw,52px);line-height:1;
  clip-path:inset(0 100% 0 -0.12em);
  animation:tqld-write .6s cubic-bezier(.55,0,.15,1) .8s both}
@keyframes tqld-write{to{clip-path:inset(0 -0.16em 0 -0.12em)}}
/* Q acende no fim (on-dark → sky) */
.tqld__word .q{animation:tqld-qign .45s ease 1.25s both}
@keyframes tqld-qign{from{color:var(--tq-on-dark)}to{color:var(--tq-sky)}}

/* Saída: dissolve + leve escala (o "preto" abre e expande) revelando o hero (bedrock→bedrock) */
@keyframes tqld-out{to{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.06)}}

/* Trava o scroll enquanto a intro roda (o site.js aplica/remove) */
.tqld-lock,.tqld-lock body{overflow:hidden}

/* Reveal do hero quando a intro dissolve (o site.js põe .tq-entered no body):
   o conteúdo entra suave (sobe + expande de .985→1) e o vídeo faz fade-in — sem corte. */
.tq-entered .site-hero__content{animation:tqld-hero-in .85s cubic-bezier(.22,.61,.36,1) both}
.tq-entered .site-hero__video{animation:tqld-hero-fade 1s ease both}
@keyframes tqld-hero-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tqld-hero-fade{from{opacity:0}to{opacity:1}}

/* Acessibilidade: sem movimento → sem intro, conteúdo instantâneo */
@media(prefers-reduced-motion:reduce){
  .tqld{display:none}
  .tq-entered .site-hero__content,.tq-entered .site-hero__video{animation:none!important}
}

/* Eixos da Geologica vêm depois dos shorthands `font`, que resetam variation-settings. */
.tq-body :where(h1,h2,h3,h4,h5,h6,strong,b,button){font-variation-settings:var(--tq-font-settings-display)}
.tq-body :where(input,textarea,select,option){font-variation-settings:var(--tq-font-settings-body)}