/* Prisma Studios — estilos compartilhados (index, contato, privacidade, termos)
   Direção visual (referências: AREA 17, DNCO, Hyper, Agencja brandingowa): página branca
   e monocromática, a tipografia faz o trabalho, bordas finas sem sombra, botões em pílula
   e uma única cor de destaque — o azul da Prisma. O roxo/azul da marca vive no Pixel e nos prismas. */

:root{
  --bg: #FFFFFF;
  --soft: #F4F4F4;
  --paper: #F2F2F0;
  --line: #E6E6E6;
  --line-strong: #CFCFCF;
  --ink: #111113;
  --ink-2: #555559;
  --ink-3: #8A8A8F;
  --cobalt: #2743FF;
  --cobalt-press: #1B33D6;
  --dark: #111113;
  --violet: #7A4DFF;
  /* degradê da logo (azul em cima, roxo embaixo) e a versão clara dele, usada atrás de texto escuro */
  --brand-gradient: linear-gradient(135deg, #2743FF 0%, #5A48FF 52%, #7A4DFF 100%);
  --brand-wash: linear-gradient(130deg, #F3F5FF 0%, #CDD5FF 34%, #9FB0FF 62%, #7A4DFF 100%);
  --ok: #15803D;
  --error: #C42B4A;

  --font: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Space Grotesk', 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --max: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --r-card: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vh: 100vh;
}
@supports (height: 100svh){ :root{ --vh: 100svh; } }

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

body{
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; }
button{ font: inherit; color: inherit; }
::selection{ background: var(--cobalt); color: #fff; }
:focus-visible{ outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3{ font-weight: 400; text-wrap: balance; color: var(--ink); }
.wrap{ width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
.section{ padding-block: clamp(4.5rem, 10vw, 8.5rem); position: relative; }

.eyebrow{ display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; text-align: center; }
.h-section{ font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 20ch; margin-inline: auto; text-align: center; }
.section-head{ margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
/* títulos animados linha a linha: a máscara de cada linha tinha exatamente a altura da linha e cortava
   acentos e as pernas de g, j, p e ç (e a última letra, por causa do espaçamento negativo).
   O recorte passa a ter folga em volta, sem mexer no espaçamento entre as linhas. */
.title-line-mask{ overflow: visible !important; clip-path: inset(-0.2em -0.14em); }

.skip{
  position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff;
  padding: 0.6rem 1rem; border-radius: 999px; font-weight: 500; transition: top 150ms ease;
}
.skip:focus{ top: 0.6rem; }

/* ---------- botões e links ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 500; font-size: 15px; line-height: 20px; white-space: nowrap;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: var(--cobalt); }
.btn-secondary{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover{ border-color: var(--ink); }
.btn.is-lg{ padding: 13px 24px; }
.has-arrow::after{
  content: ''; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 220ms var(--ease-out);
}
.has-arrow:hover::after{ transform: translateX(3px); }
.link-accent{ display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.3em; transition: color 160ms ease, text-decoration-color 160ms ease; }
.link-accent:hover{ color: var(--cobalt); text-decoration-color: currentColor; }
.chip{ display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-3); padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; }

/* ---------- navegação ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-shell{ width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand{ display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.brand img{ height: 24px; width: auto; }
.brand b{ font-weight: 500; color: var(--cobalt); }
.site-nav{ display: flex; align-items: center; gap: 2px; }
.site-nav a:not(.btn){ font-size: 14px; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease; }
.site-nav a:not(.btn):hover{ color: var(--ink); background: var(--soft); }
.site-nav .btn{ margin-left: 10px; padding: 9px 16px; font-size: 14px; }
@media (max-width: 760px){ .site-nav a:not(.btn){ display: none; } }
@media (max-width: 440px){
  .brand{ font-size: 12px; letter-spacing: 0.16em; gap: 8px; }
  .site-nav .btn{ margin-left: 0; padding: 8px 13px; }
  .site-nav .has-arrow::after{ display: none; }
}
@media (max-width: 350px){ .brand span{ display: none; } }

/* ---------- hero ---------- */
.hero{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero-copy{ position: relative; z-index: 2; }
.hero h1{ font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 5.6vw, 4.5rem); line-height: 1.03; letter-spacing: -0.04em; max-width: 8.2em; text-wrap: wrap; }
.hero h1 span{ display: block; text-wrap: balance; }
/* linha pequena acima do título: diz ao visitante (e ao Google) o que a Prisma faz e onde */
.hero h1 .hero-kicker{ font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: #33375A; margin-bottom: 16px; }
.hero-sub{ font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); max-width: 36ch; margin-top: 26px; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-note{ font-size: 13px; color: var(--ink-3); margin-top: 16px; }
html.js:not(.intro-done) .hero [data-intro]{ opacity: 0; }

/* palco 3D: o Pixel surge do meio dos prismas */
.hero-3d{ position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: end; }
.hero-3d > canvas{
  position: absolute; inset: -5%; width: 110%; height: 110%; display: block; pointer-events: none;
  opacity: 0; transition: opacity 700ms ease;
}
.hero-3d.is-live > canvas{ opacity: 1; }
.logo-poster{ position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 500ms ease; }
.logo-poster img{ width: 30%; height: auto; }
.is-live > .logo-poster{ opacity: 0; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-3d{ max-width: 460px; justify-self: center; }
}

/* ---------- processo: o Pixel conta os três passos no ritmo da rolagem ----------
   a seção tem o mesmo fundo azul e roxo animado do hero, emendado nele (sem faixa nem linha entre os dois).
   Ela fica presa na tela enquanto a página rola por trás: cada terço do caminho é um passo, e o trilho
   embaixo enche junto. Em telas baixas demais para prender a seção (.is-scrolly ausente), os passos
   trocam sozinhos e no toque. */
.guide-section{ position: relative; background: #E4E8FF; }
.guide-track{ position: relative; }
.guide{
  position: relative; isolation: isolate; overflow: hidden; color: var(--ink); padding-block: clamp(4rem, 9vw, 7rem);
  /* sem WebGL: o degradê do hero espelhado, para começar do mesmo jeito que o hero termina */
  background: linear-gradient(50deg, #F3F5FF 0%, #CDD5FF 34%, #9FB0FF 62%, #7A4DFF 100%);
}
.guide-bg{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.guide.has-shader .guide-bg{ opacity: 1; }
.guide-inner{ display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 5vw, 4rem); align-items: center; }
.guide-head{ grid-column: 1 / -1; }
.guide-head .h-section{ max-width: none; }
.guide .eyebrow{ color: #4F5480; }

html.js .guide-track.is-scrolly::after{ content: ''; display: block; height: 165vh; }
html.js .is-scrolly > .guide{ position: sticky; top: 0; height: 100vh; padding-block: 0; }
html.js .is-scrolly .guide-inner{ height: var(--vh); padding-block: calc(var(--header-h) + 16px) 28px; }

/* palco do Pixel: sem moldura, só um clarão atrás dele */
.guide-stage{ position: relative; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; }
.guide-stage::before{
  content: ''; position: absolute; left: 50%; top: 47%; height: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.28) 55%, rgba(255,255,255,0) 100%);
}
.is-scrolly .guide-stage{ aspect-ratio: auto; max-height: 660px; height: 100%; min-height: 0; }
.guide-confetti{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.guide-confetti i{ position: absolute; left: 50%; top: 46%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; }

/* cenário de cada passo: etiquetas de vidro que brotam em volta do Pixel */
.guide-props{ position: absolute; inset: 0; visibility: hidden; transition: visibility 0s 350ms; }
.guide[data-step="0"] .guide-props[data-for="0"], .guide[data-step="1"] .guide-props[data-for="1"], .guide[data-step="2"] .guide-props[data-for="2"]{ visibility: visible; transition-delay: 0s; }
.prop, .prop-wire{
  position: absolute; opacity: 0; scale: 0.6;
  transition: opacity 260ms ease, scale 260ms ease;
  animation: prop-float 5s ease-in-out calc(var(--i) * -1.3s) infinite;
}
.prop{
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; line-height: 20px; color: var(--ink); background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 12px 26px -18px rgba(40,40,130,0.55);
}
.guide[data-step="0"] [data-for="0"] > :is(.prop, .prop-wire),
.guide[data-step="1"] [data-for="1"] > :is(.prop, .prop-wire),
.guide[data-step="2"] [data-for="2"] > :is(.prop, .prop-wire){
  opacity: 1; scale: 1;
  transition: opacity 320ms ease calc(280ms + var(--i) * 110ms), scale 620ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(280ms + var(--i) * 110ms);
}
@keyframes prop-float{ 50%{ translate: 0 -7px; } }
.p-tl{ left: 6%; top: 7%; } .p-tr{ right: 6%; top: 15%; } .p-bl{ left: 5%; bottom: 16%; } .p-br{ right: 6%; bottom: 7%; }
.prop .ico{ flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt); color: #fff; font-style: normal; }
.prop .ico svg{ width: 14px; height: 14px; }
.prop .ico.is-text{ font-size: 10px; font-weight: 500; letter-spacing: -0.04em; }
.prop .ico.is-ok{ background: #22C55E; color: #fff; }
.prop .live{ flex-shrink: 0; width: 8px; height: 8px; margin: 0 3px 0 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.22); animation: led 1.6s ease-in-out infinite; }
.swatches{ display: inline-flex; padding-left: 3px; }
.swatches i{ width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; margin-left: -5px; background: #2743FF; }
.swatches i:first-child{ margin-left: 0; } .swatches i:nth-child(2){ background: #7A4DFF; } .swatches i:nth-child(3){ background: #FFBE2E; }
/* passo 1: uma varredura de radar atrás dele */
.scan{
  position: absolute; left: 50%; top: 47%; height: 78%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(39,67,255,0) 0deg, rgba(39,67,255,0.2) 70deg, rgba(39,67,255,0) 72deg),
    repeating-radial-gradient(circle, transparent 0 22%, rgba(39,67,255,0.16) 22% calc(22% + 1px));
  animation: scan-spin 4.5s linear infinite;
}
@keyframes scan-spin{ to{ rotate: 360deg; } }
/* passo 2: uma página sendo montada, peça por peça */
.prop-wire{ width: 104px; padding: 8px; border-radius: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background: #fff; box-shadow: 0 18px 30px -20px rgba(40,40,130,0.6); }
.prop-wire i{ height: 6px; border-radius: 3px; background: #D9DCEF; grid-column: 1 / -1; animation: wire-build 4.2s var(--ease-out) infinite; }
.prop-wire i:nth-child(1){ width: 42%; }
.prop-wire i:nth-child(2){ height: 30px; border-radius: 6px; background: var(--brand-gradient); animation-delay: 0.3s; }
.prop-wire i:nth-child(3){ width: 78%; animation-delay: 0.6s; }
.prop-wire i:nth-child(4){ grid-column: span 1; height: 16px; border-radius: 4px; box-shadow: 31px 0 0 #D9DCEF, 62px 0 0 #D9DCEF; animation-delay: 0.9s; }
@keyframes wire-build{ 0%{ opacity: 0; transform: translateY(6px) scale(0.9); } 14%, 88%{ opacity: 1; transform: none; } 100%{ opacity: 0; transform: none; } }
/* passo 3: sinal saindo do site publicado */
.rings{ position: absolute; left: 50%; top: 47%; height: 86%; aspect-ratio: 1; translate: -50% -50%; }
.rings i{ position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(39,67,255,0.4); opacity: 0; animation: ring-out 3.2s ease-out infinite; }
.rings i + i{ animation-delay: 1.6s; }
@keyframes ring-out{ 0%{ scale: 0.3; opacity: 0.7; } 100%{ scale: 1.2; opacity: 0; } }
.guide:not([data-step="0"]) .scan, .guide:not([data-step="2"]) .rings i, .guide:not([data-step="1"]) .prop-wire i{ animation-play-state: paused; }

/* balão de fala: branco, cantos bem redondos e o rabinho apontando para o Pixel */
.guide-bubble{
  position: relative; display: grid; padding: 22px 26px 24px;
  border-radius: 26px; background: #fff; color: var(--ink);
  box-shadow: 0 26px 60px -34px rgba(40,36,130,0.6);
}
.guide-bubble::before{
  content: ''; position: absolute; left: -18px; top: 46px; width: 30px; height: 26px; background: #fff;
  clip-path: polygon(100% 0, 0 55%, 100% 100%);
  border-radius: 4px;
}
.guide-step{ grid-area: 1 / 1; }
.guide-step .num{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.guide-step .num::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,0.2); }
.guide-step h3{ font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--cobalt); margin-bottom: 8px; }
.guide-step p{ font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.42; letter-spacing: -0.012em; color: var(--ink); max-width: 36ch; }
.guide-step .unsaid{ color: transparent; }
.guide-step p.is-typing .said::after{ content: ''; display: inline-block; width: 2px; height: 1.05em; margin: 0 -2px 0 0; vertical-align: -0.15em; background: var(--cobalt); animation: caret 0.8s steps(1) infinite; }
@keyframes caret{ 50%{ opacity: 0; } }
html.js .guide-step:not(.is-current){ visibility: hidden; opacity: 0; }
html.js .guide-step.is-current{ animation: step-in 450ms var(--ease-out); }
html:not(.js) .guide-bubble{ display: block; }
html:not(.js) .guide-step + .guide-step{ margin-top: 20px; }
@keyframes step-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

/* trilho dos passos: cada barra enche enquanto o Pixel fala daquele passo (clicar leva até ele) */
.guide-nav{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.guide-dot{
  position: relative; display: grid; gap: 2px; justify-items: start; align-content: start; text-align: left;
  padding: 14px 0 4px; border: 0; background: none; cursor: pointer;
  font-size: 14px; line-height: 1.25; color: rgba(17,17,19,0.55); transition: color 200ms ease;
}
.guide-dot b{ font-family: var(--mono); font-weight: 400; font-size: 12px; color: inherit; }
.guide-dot::before, .guide-dot::after{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; }
.guide-dot::before{ background: rgba(17,17,19,0.14); }
.guide-dot::after{ background: var(--ink); transform-origin: left; transform: scaleX(0); }
.guide-dot:hover, .guide-dot[aria-pressed="true"], .guide-dot.is-done{ color: var(--ink); }
.guide-dot[aria-pressed="true"]::after{ transform: scaleX(var(--p, 0)); }
.guide-dot.is-done::after{ transform: scaleX(1); }
html:not(.js) .guide-nav{ display: none; }

.guide-hint{ display: none; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: #4F5480; }
.is-scrolly .guide-hint{ display: flex; }
.guide-hint i{ flex-shrink: 0; position: relative; width: 16px; height: 26px; border-radius: 9px; border: 1.5px solid rgba(17,17,19,0.5); }
.guide-hint i::after{ content: ''; position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--ink); animation: hint-wheel 1.6s ease-in-out infinite; }
@keyframes hint-wheel{ 0%{ translate: 0 0; opacity: 1; } 70%, 100%{ translate: 0 8px; opacity: 0; } }

@media (max-width: 860px){
  .guide{ padding-block: 3.5rem; }
  .guide-inner{ grid-template-columns: 1fr; grid-template-rows: none; gap: 0; align-items: stretch; }
  .guide-copy{ display: contents; }
  .guide-head .eyebrow{ margin-bottom: 8px; }
  .guide-head .h-section{ margin-bottom: 10px; font-size: 1.7rem; }
  .guide-stage{ aspect-ratio: 1; max-height: 340px; }
  .guide-bubble{ margin-top: 22px; padding: 16px 18px 18px; border-radius: 22px; }
  .guide-bubble::before{ left: 40px; top: -16px; width: 28px; height: 22px; clip-path: polygon(0 100%, 35% 0, 100% 100%); }
  .guide-step .num{ margin-bottom: 4px; }
  .guide-step h3{ margin-bottom: 6px; }
  .guide-nav{ margin-top: 16px; gap: 8px; }
  .guide-dot{ font-size: 12px; padding-top: 12px; }
  .guide-hint, .is-scrolly .guide-hint{ display: none; }
  .prop{ font-size: 11px; line-height: 16px; gap: 5px; padding: 4px 9px 4px 5px; }
  .prop .ico{ width: 18px; height: 18px; } .prop .ico svg{ width: 12px; height: 12px; }
  .prop-wire{ width: 78px; padding: 6px; gap: 4px; }
  .prop-wire i:nth-child(2){ height: 20px; } .prop-wire i:nth-child(4){ height: 11px; box-shadow: 23px 0 0 #D9DCEF, 47px 0 0 #D9DCEF; }
  .p-tl{ left: 0; top: 8%; } .p-tr{ right: 0; top: 14%; } .p-bl{ left: 0; bottom: 14%; } .p-br{ right: 0; bottom: 8%; }
  html.js .is-scrolly .guide-inner{ grid-template-rows: auto minmax(0, 1fr) auto auto; padding-block: calc(var(--header-h) + 14px) 22px; }
  html.js .is-scrolly .guide-stage{ max-height: none; }
  /* com a seção presa, o botão do WhatsApp fica por cima do canto: o trilho abre espaço para ele */
  html.js .is-scrolly .guide-nav{ padding-right: 56px; }
}
/* celular com a tela mais baixa: some o rótulo "Processo" e o trilho fica só com os números, para sobrar palco pro Pixel */
@media (max-width: 860px) and (max-height: 780px){
  html.js .is-scrolly .guide-head .eyebrow{ display: none; }
  html.js .is-scrolly .guide-dot span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js .is-scrolly .guide-bubble{ margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .prop, .prop-wire, .scan, .rings i, .prop-wire i, .guide-hint i::after{ animation: none; }
  .rings i{ opacity: 0.4; scale: 0.9; }
}

/* ---------- site vs redes sociais ---------- */
.compare-card{ border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.versus{ width: 100%; border-collapse: collapse; }
.versus th{ text-align: left; width: 50%; padding: 16px 24px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); }
.versus th:first-child{ color: var(--ink-3); }
.versus th + th, .versus td + td{ border-left: 1px solid var(--line); }
.versus td{ border-top: 1px solid var(--line); padding: 20px 24px; vertical-align: top; font-size: 16px; line-height: 1.5; }
.versus tbody tr:first-child td{ border-top: 0; }
.versus td:first-child{ color: var(--ink-2); }
.versus .mark{ display: flex; gap: 12px; align-items: flex-start; }
.versus .ico{ flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.versus .ico svg{ width: 12px; height: 12px; }
.versus td:first-child .ico{ background: #FDECEF; color: var(--error); }
.versus td:last-child .ico{ background: #E7F6EC; color: var(--ok); }
@media (max-width: 700px){
  .versus, .versus tbody, .versus tr, .versus td{ display: block; width: 100%; }
  .versus thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .versus tr + tr{ border-top: 1px solid var(--line); }
  .versus td{ border: 0; padding: 14px 18px 0; }
  .versus td + td{ border-left: 0; padding-bottom: 16px; }
  .versus td::before{ content: attr(data-col); display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
}

/* ---------- diferenciais ---------- */
.cards-3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.story{ border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.story-top{ height: 160px; display: grid; place-items: center; background: var(--soft); }
.story-top svg{ width: 44px; height: 44px; color: var(--ink); }
.story-body{ padding: 22px 24px 26px; }
.story h3{ font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; margin: 16px 0 8px; }
.story p{ color: var(--ink-2); }
@media (max-width: 860px){ .cards-3{ grid-template-columns: 1fr; } .story-top{ height: 120px; } }

/* ---------- serviços: índice tipográfico + painel pastel ----------
   referências: Spacelab (índice com o item ativo em preto e o resto em cinza),
   Websmith (cartões de serviço em tons pastel) e Programa (blocos numerados) */
.svc{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(2rem, 5vw, 4.5rem); align-items: start; }
.svc-list{ border-top: 1px solid var(--ink); }
.svc-list li{ border-bottom: 1px solid var(--line-strong); }
.svc-item{
  position: relative; width: 100%; display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -0.04em; color: #B2B4B1;
  transition: color 250ms ease, padding-left 350ms var(--ease-out);
}
.svc-item .svc-n{ font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: inherit; transform: translateY(-0.4em); }
.svc-item:hover{ color: var(--ink-2); }
.svc-item[aria-pressed="true"]{ color: var(--ink); padding-left: 14px; }
.svc-item::after{
  content: ''; margin-left: auto; align-self: center; width: 22px; height: 22px; flex-shrink: 0; background: currentColor; opacity: 0;
  transform: translateX(-10px); transition: opacity 250ms ease, transform 350ms var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.svc-item[aria-pressed="true"]::after{ opacity: 1; transform: none; }
.svc-item::before{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform-origin: left; transform: scaleX(0);
}
.svc-item[aria-pressed="true"]::before{ transform: scaleX(var(--p, 0)); }

.svc-panel{ position: sticky; top: 96px; }
.svc-card{ display: none; gap: 20px; align-content: start; min-height: 430px; padding: 16px 16px 28px; border-radius: 24px; background: #E1E7FF; }
.svc-card.is-current{ display: grid; animation: step-in 500ms var(--ease-out); }
html:not(.js) .svc-card{ display: grid; margin-bottom: 12px; }
.svc-card .viz{ height: 130px; zoom: 1.75; background: rgba(255,255,255,0.6); border-radius: 8px; margin: 0; }
.svc-card .viz-site{ zoom: 1; height: 227px; display: grid; place-items: center; overflow: hidden; padding: 0 26px; background: rgba(255,255,255,0.6); border-radius: 14px; }
.svc-card .viz-site .mock{ width: 100%; }
.svc-text{ padding-inline: 10px; display: grid; gap: 8px; justify-items: start; }
.svc-text .svc-n{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.svc-text h3{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -0.04em; }
.svc-text p{ color: var(--ink-2); max-width: 44ch; }
.svc-text .link-accent{ margin-top: 6px; }

/* mini navegador ilustrando um site */
.mock{ border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.mock-bar{ height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.mock-bar i{ width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.mock-bar em{ margin-left: 8px; height: 12px; flex: 1; max-width: 140px; border-radius: 4px; background: var(--soft); }
.mock-body{ padding: 14px; display: grid; gap: 8px; }
.mock-hero{ height: 76px; border-radius: 6px; background: var(--ink); position: relative; overflow: hidden; }
.mock-hero::after{ content: ''; position: absolute; left: 12px; top: 16px; width: 46%; height: 10px; border-radius: 3px; background: rgba(255,255,255,0.9); box-shadow: 0 18px 0 -2px rgba(255,255,255,0.45); }
.mock-line{ height: 8px; border-radius: 3px; background: var(--soft); }
.mock-line.w60{ width: 60%; } .mock-line.w80{ width: 80%; }
.mock-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.mock-row span{ height: 34px; border-radius: 5px; border: 1px solid var(--line); }
.mock-row span:first-child{ background: var(--cobalt); border-color: var(--cobalt); }

@media (max-width: 860px){
  .svc{ grid-template-columns: 1fr; gap: 20px; }
  .svc-panel{ position: static; order: -1; }
  .svc-item{ font-size: 1.35rem; padding: 14px 0; }
  .svc-card .viz{ zoom: 1.35; }
  .svc-card .viz-site{ zoom: 1; height: 176px; }
  .svc-card .viz-site .mock{ transform: scale(0.8); }
}

/* ---------- orçamento ---------- */
.quote-head{ display: grid; justify-items: center; gap: 22px; text-align: center; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.quote-lead{ display: grid; justify-items: center; }
.quote-lead p{ color: var(--ink-2); font-size: 1.0625rem; max-width: 52ch; }
.quote-lead .btn{ margin-top: 22px; }
.quote-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.q-card{ padding: 22px 24px 8px 0; display: flex; flex-direction: column; gap: 44px; }
.q-card + .q-card{ padding-left: 24px; border-left: 1px solid var(--line); }
.q-card .num{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.q-card h3{ font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 8px; }
.q-card p{ color: var(--ink-2); }
@media (max-width: 1000px){
  .quote-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-card:nth-child(3){ padding-left: 0; border-left: 0; }
  .q-card:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 560px){
  .quote-grid{ grid-template-columns: 1fr; }
  .q-card, .q-card + .q-card{ padding: 20px 0; min-height: 0; border-left: 0; }
  .q-card + .q-card{ border-top: 1px solid var(--line); }
}

/* ---------- dúvidas ---------- */
.faq-grid{ display: grid; gap: clamp(2rem, 4vw, 3rem); justify-items: center; }
.faq-aside{ text-align: center; }
.faq-list{ width: min(100%, 820px); }
.faq-aside p{ color: var(--ink-2); margin-top: 18px; }
.faq-aside .link-accent{ margin-top: 4px; }
.faq-list{ border-top: 1px solid var(--ink); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; transition: color 150ms ease;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover{ color: var(--cobalt); }
.faq-item summary::after{
  content: ''; flex-shrink: 0; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform 250ms var(--ease-out);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color: var(--ink-2); padding: 0 48px 24px 0; max-width: 68ch; }
@media (max-width: 860px){
  .faq-item p{ padding-right: 0; }
}

/* ---------- chamada final ---------- */
.final-panel{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: center;
  padding: clamp(28px, 5.5vw, 72px); border-radius: 20px; background: var(--dark); color: #F4F4F5; overflow: hidden; position: relative; isolation: isolate;
}
.final-panel::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 78% 50%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 55% 70% at 78% 50%, #000, transparent 75%);
}
.final-panel h2{ color: #fff; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 4.8vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; max-width: 8.6em; }
.final-text{ color: #A9A9B2; font-size: 1.1rem; max-width: 42ch; margin-top: 22px; }
.final-ctas{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.final-direct{ margin-top: 22px; font-size: 14px; color: #8C8C95; }
.final-direct a{ color: #D4D4DA; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 0.25em; }
.final-direct a:hover{ color: #fff; }
.final-3d{ position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; margin-block: -24px; }
.final-3d canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms ease; }
.final-3d.is-live canvas{ opacity: 1; }
@media (max-width: 860px){
  .final-panel{ grid-template-columns: 1fr; }
  .final-3d{ max-width: 300px; order: -1; margin-block: -16px 0; }
}

/* ---------- rodapé ---------- */
.site-footer{ border-top: 1px solid var(--line); padding-block: 56px 32px; margin-top: clamp(3rem, 6vw, 5rem); font-size: 14px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer-grid .footer-title{ font-size: 13px; font-weight: 400; color: var(--ink-3); margin-bottom: 14px; }
.footer-grid li + li{ margin-top: 8px; }
.footer-grid li a, .footer-grid p{ color: var(--ink-2); }
.footer-grid li a{ transition: color 150ms ease; }
.footer-grid li a:hover{ color: var(--ink); }
.footer-brand{ margin-bottom: 14px; }
.footer-legal{ line-height: 1.7; }
.footer-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: 28px; } }

/* ---------- WhatsApp ---------- */
.whatsapp-float{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
  background: #1FAF54; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(10,60,30,0.6);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.whatsapp-float svg{ width: 26px; height: 26px; }
.whatsapp-float:hover{ background: #189247; transform: translateY(-2px); }
.whatsapp-float:active{ transform: scale(0.95); }

/* ---------- páginas internas (contato e textos legais) ---------- */
.page{ padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem); }
.page h1{ font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; }
.page-lead{ color: var(--ink-2); font-size: 1.125rem; max-width: 44ch; margin-top: 22px; }

.contact-grid{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-intro{ position: sticky; top: 100px; }
.contact-direct{ margin-top: 32px; padding: 20px; border-radius: var(--r-card); background: var(--soft); color: var(--ink-2); font-size: 14px; }
.contact-direct a{ display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 16px; font-weight: 500; margin-top: 8px; transition: color 150ms ease; }
.contact-direct a:hover{ color: var(--cobalt); }
.company-line{ margin-top: 16px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-intro{ position: static; }
}

.lead-form{ border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 3.5vw, 34px); }
.row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ .row{ grid-template-columns: 1fr; gap: 0; } }
.field{ margin-bottom: 20px; }
.lead-form label{ display: block; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.lead-form label .opt{ font-weight: 400; color: var(--ink-3); }
.lead-form input[type="text"], .lead-form input[type="email"], .lead-form input[type="tel"], .lead-form input[type="url"], .lead-form textarea{
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-strong);
  font: inherit; font-size: 15px; color: var(--ink); background: var(--bg);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lead-form input::placeholder, .lead-form textarea::placeholder{ color: var(--ink-3); }
.lead-form input:focus, .lead-form textarea:focus{ outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,19,0.08); }
.lead-form textarea{ resize: vertical; min-height: 110px; }
.radio-group{ display: flex; gap: 20px; }
.radio-group label{ display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink-2); margin: 0; cursor: pointer; }
.radio-group input, .lf-consent-label input{ accent-color: var(--ink); width: 16px; height: 16px; }
.plan-select{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px){ .plan-select{ grid-template-columns: 1fr; } }
.lead-form .plan-option{
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg); cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.lead-form .plan-option::before{ content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); transition: border-color 160ms ease, box-shadow 160ms ease; }
.lead-form .plan-option:hover{ border-color: var(--ink-3); }
.plan-option input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.lead-form .plan-option:has(input:checked){ border-color: var(--ink); background: var(--soft); }
.lead-form .plan-option:has(input:checked)::before{ border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--soft), inset 0 0 0 8px var(--ink); }
.plan-option:has(input:focus-visible){ outline: 2px solid var(--cobalt); outline-offset: 2px; }
.plan-name{ font-weight: 500; font-size: 14px; }
.lf-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .lf-consent-label{ display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.lf-consent-label input{ margin-top: 3px; flex-shrink: 0; }
.lf-consent-label a{ color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.lead-form button[type="submit"]{ width: 100%; padding: 13px 16px; }
.lead-form button[type="submit"]:disabled{ opacity: 0.6; cursor: not-allowed; }
.form-msg{ margin-top: 16px; padding: 12px 14px; border-radius: 10px; display: none; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.form-msg.ok{ display: flex; background: #E7F6EC; color: #0F5F2E; }
.form-msg.err{ display: flex; background: #FDECEF; color: #9C1F38; }
.form-msg svg{ flex-shrink: 0; }
.field-err{ color: var(--error); font-size: 13px; font-weight: 500; margin-top: 6px; display: none; }

.legal{ max-width: 46rem; }
.legal .updated{ color: var(--ink-3); font-size: 14px; margin: 16px 0 40px; }
.legal h2{ font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; margin: 44px 0 12px; }
.legal p{ margin-bottom: 16px; color: var(--ink-2); }
.legal ul{ list-style: disc; margin: 0 0 16px 20px; color: var(--ink-2); }
.legal li{ margin-bottom: 8px; }
.legal strong{ color: var(--ink); font-weight: 500; }
.legal a{ color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.legal a:hover{ color: var(--cobalt); }
.legal .box{ background: var(--soft); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.legal table{ width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.legal th, .legal td{ text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.legal th{ color: var(--ink); font-weight: 500; }

/* ---------- fundos: seções alternam entre cinza papel e branco (referência: AREA 17 e Bejamas) ---------- */
.is-paper{ background: var(--paper); }
.is-paper + .section, .section + .is-paper, .section + .section{ border-top: 0; }
.story{ background: var(--paper); border-color: transparent; }
.story-top{ background: #fff; margin: 8px 8px 0; border-radius: 10px; height: 168px; }
.is-paper .faq-list{ border-top-color: var(--ink); }

/* ---------- fundo animado do hero (efeito waterPlane do ShaderGradient) ---------- */
.hero{ position: relative; isolation: isolate; overflow: hidden; background: var(--brand-wash); }
.hero-bg{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.hero.has-shader .hero-bg{ opacity: 1; }
.hero .hero-sub{ color: #33375A; }
.hero .hero-note{ color: #4F5480; }

/* chamada final: o mesmo fundo azul e roxo animado ocupa a seção inteira (sem cartão); textos escuros */
.final-band{ position: relative; isolation: isolate; overflow: hidden; background: var(--brand-wash); }
.final-panel{ background: none; padding: 0; border-radius: 0; overflow: visible; color: var(--ink); }
.final-panel::before{ display: none; }
.panel-bg{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.final-band.has-shader .panel-bg{ opacity: 1; }
.site-footer.is-flush{ margin-top: 0; }
.final-panel{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
.final-panel h2{ max-width: 12em; }
.final-panel .final-ctas{ justify-content: center; }
.final-panel .final-3d{ order: -1; max-width: 280px; margin-block: -24px 0; }
.final-panel h2{ color: var(--ink); }
.final-panel .final-text{ color: #33375A; }
.final-panel .final-direct{ color: #4F5480; }
.final-panel .final-direct a{ color: var(--ink); text-decoration-color: rgba(17,17,19,0.3); }
.final-panel .final-direct a:hover{ color: var(--cobalt); }

/* ---------- site x redes: título ao lado de uma busca no Google (referência: Bejamas, coluna dividida) ---------- */
.split-head{ display: grid; justify-items: center; gap: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.split-head .search-mock{ width: min(100%, 560px); }
.search-mock{ background: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 24px 50px -36px rgba(17,17,19,0.5); }
.sm-bar{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.sm-bar svg{ width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.sm-query{ overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ink); width: 26ch; animation: type 5.5s steps(26) infinite, caret-blink 0.8s steps(1) infinite; }
@keyframes type{ 0%{ width: 0; } 45%, 100%{ width: 26ch; } }
@keyframes caret-blink{ 50%{ border-color: transparent; } }
.sm-result{ display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; }
.sm-result.is-you{ background: #F1F3FF; box-shadow: inset 0 0 0 1px rgba(39,67,255,0.25); animation: rise 5.5s var(--ease-out) infinite; }
@keyframes rise{ 0%, 46%{ opacity: 0.3; filter: grayscale(1); transform: translateY(4px); } 56%, 100%{ opacity: 1; filter: none; transform: none; } }
.sm-url{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.sm-url i{ width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #2743FF, #7A4DFF); }
.sm-result b{ font-weight: 500; font-size: 18px; color: var(--cobalt); }
.sm-chips{ display: flex; gap: 6px; }
.sm-chips em{ font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(39,67,255,0.25); color: var(--ink-2); background: #fff; }
.sm-sk{ display: block; height: 9px; border-radius: 4px; background: var(--soft); }
.sm-sk.w30{ width: 30%; } .sm-sk.w40{ width: 40%; } .sm-sk.w60{ width: 60%; } .sm-sk.w70{ width: 70%; }

/* ---------- diferenciais: mini animações ---------- */
.story-top > div{ position: relative; width: 170px; max-width: 80%; }
.story-top svg{ width: 100%; height: auto; color: var(--ink); }
.viz-draw .ruler, .viz-draw .ticks{ stroke: var(--line-strong); stroke-width: 2; }
.viz-draw .draw{ stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 4s var(--ease-out) infinite; }
.viz-draw .pencil{ fill: var(--cobalt); offset-path: path('M18 58 C 40 20, 64 20, 80 42 S 120 70, 142 24'); offset-rotate: 0deg; animation: pencil 4s var(--ease-out) infinite; }
@keyframes draw{ 0%{ stroke-dashoffset: 1; } 55%, 85%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 0; opacity: 0; } }
@keyframes pencil{ 0%{ offset-distance: 0%; } 55%, 100%{ offset-distance: 100%; } }
.viz-ease .axis{ stroke: var(--line-strong); stroke-width: 2; }
.viz-ease .curve{ stroke: var(--ink); stroke-width: 3; }
.ease-dot{
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--cobalt); box-shadow: 0 0 0 5px rgba(39,67,255,0.15);
  offset-path: path('M20 76 C 70 76, 80 14, 144 14'); offset-rotate: 0deg;
  animation: ease-run 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
.viz-ease svg{ overflow: visible; }
.viz-ease{ aspect-ratio: 160 / 90; }
.viz-ease .ease-dot{ transform-origin: 0 0; }
@keyframes ease-run{ from{ offset-distance: 0%; } to{ offset-distance: 100%; } }
.viz-speed{ width: 104px !important; }
.viz-speed .track{ stroke: var(--soft); stroke-width: 9; }
.viz-speed .fill{ stroke: #16A34A; stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; animation: gauge 3.2s var(--ease-out) infinite; }
.viz-speed .bolt{ fill: var(--ink); }
@keyframes gauge{ 0%{ stroke-dashoffset: 1; } 60%, 90%{ stroke-dashoffset: 0.04; } 100%{ stroke-dashoffset: 0.04; opacity: 0.4; } }

/* ---------- serviços: cenas pequenas em cada cartão ---------- */
.viz{ position: relative; height: 92px; border-radius: 10px; background: var(--paper); overflow: hidden; margin-bottom: auto; }
/* agenda: um horário sendo marcado */
.viz-cal{ padding: 10px 12px; display: grid; gap: 6px; }
.cal-head{ display: flex; gap: 6px; }
.cal-head i{ height: 6px; width: 34%; border-radius: 3px; background: var(--line-strong); }
.cal-head i + i{ width: 16%; }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid span{ height: 14px; border-radius: 3px; background: #fff; }
.cal-grid .is-booked{ animation: book 3.4s var(--ease-out) infinite; }
@keyframes book{ 0%, 30%{ background: #fff; transform: scale(1); } 40%{ transform: scale(1.35); } 50%, 100%{ background: var(--cobalt); transform: scale(1); } }
/* servidor com luzes piscando */
.viz-server{ display: grid; align-content: center; gap: 6px; padding: 10px 26%; }
.srv{ display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 4px; background: var(--dark); }
.srv i{ width: 5px; height: 5px; border-radius: 50%; background: #4ADE80; animation: led 1.4s steps(1) infinite; }
.srv i + i{ background: #8C9CFF; animation-delay: 0.35s; }
.srv:nth-child(2) i{ animation-delay: 0.6s; } .srv:nth-child(3) i{ animation-delay: 0.9s; }
.srv b{ margin-left: auto; width: 34%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); }
@keyframes led{ 50%{ opacity: 0.2; } }
/* publicação: barra enchendo até ficar "no ar" */
.viz-live{ display: grid; align-content: center; gap: 12px; padding: 0 16%; }
.live-track{ height: 8px; border-radius: 4px; background: #fff; overflow: hidden; }
.live-track span{ display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; animation: upload 3.6s var(--ease-out) infinite; }
@keyframes upload{ 0%{ transform: scaleX(0); } 60%, 100%{ transform: scaleX(1); } }
.live-status{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); animation: live-on 3.6s steps(1) infinite; }
.live-status i{ width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.2); }
@keyframes live-on{ 0%{ opacity: 0.25; } 62%{ opacity: 1; } }
/* busca: digitando o nome do negócio */
.viz-search{ display: grid; align-content: center; gap: 8px; padding: 0 12%; }
.vs-bar{ display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 13px; }
.vs-bar svg{ width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.vs-type{ overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ink); width: 11ch; animation: type-short 4s steps(11) infinite, caret-blink 0.8s steps(1) infinite; }
@keyframes type-short{ 0%{ width: 0; } 50%, 100%{ width: 11ch; } }
.vs-line{ height: 7px; width: 80%; border-radius: 4px; background: var(--line-strong); }
.vs-line.is-short{ width: 55%; background: var(--line); }
/* mapa: o pin cai e marca o lugar */
.viz-map svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-map svg path{ stroke: #fff; stroke-width: 9; }
.map-pin{ position: absolute; left: 50%; top: 18px; width: 24px; margin-left: -12px; animation: pin-drop 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.map-pin svg{ position: static; width: 24px; height: 32px; }
.map-pin path{ fill: #E5484D; }
.map-ripple{ position: absolute; left: 50%; top: 50px; width: 28px; height: 10px; margin-left: -14px; border-radius: 50%; border: 2px solid rgba(229,72,77,0.5); animation: ripple 3.2s ease-out infinite; }
@keyframes pin-drop{ 0%{ transform: translateY(-60px); opacity: 0; } 20%{ opacity: 1; } 35%, 100%{ transform: none; opacity: 1; } }
@keyframes ripple{ 0%, 32%{ transform: scale(0.3); opacity: 0; } 40%{ opacity: 1; } 80%, 100%{ transform: scale(2.2); opacity: 0; } }


/* ---------- cabeçalho transparente: some no topo, vira vidro fosco ao rolar ---------- */
:root{ --header-h: 68px; }
.site-header{
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color 350ms ease, border-color 350ms ease, backdrop-filter 350ms ease, -webkit-backdrop-filter 350ms ease, box-shadow 350ms ease;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(255,255,255,0.55);
  box-shadow: 0 1px 0 rgba(17,17,19,0.05), 0 12px 30px -24px rgba(17,17,19,0.35);
}
.hero{ padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)); }
.page{ padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)); }
.contact-intro, .svc-panel{ top: calc(var(--header-h) + 28px); }

/* ---------- Pixel do site: um único mascote, fixo na tela, que se move e muda de tamanho ----------
   o canvas é desenhado no tamanho em que ele aparece no hero e encolhido (transform) para os outros lugares */
.pixel-site{
  --w: 373px; --h: 560px;
  position: fixed; left: 0; top: 0; z-index: 45; width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  pointer-events: none; will-change: transform; opacity: 0; transition: opacity 500ms ease;
}
.pixel-site.is-live{ opacity: 1; }
/* voo de entrada do hero: dentro do palco dos prismas e antes do canvas deles, ou seja, atrás dos blocos */
.pixel-site.is-behind{ position: absolute; z-index: auto; }
.pixel-site canvas{ display: block; width: 100%; height: 100%; }
.pixel-site button{ position: absolute; inset: 21% 21% 18%; border: 0; border-radius: 40%; background: none; cursor: pointer; pointer-events: auto; }
/* no toque, saindo de cena ele não intercepta nada (os botões da página ficam livres); nos palcos, tocar nele comemora */
@media (hover: none){ .pixel-site:not(.is-docked) button{ display: none; } }
@media (max-width: 860px){ .pixel-site{ --w: 293px; --h: 440px; } }

/* laços de animação parados enquanto a seção está fora da tela */
.is-asleep, .is-asleep *, .is-asleep *::before, .is-asleep *::after{ animation-play-state: paused !important; }

/* ---------- botões de vidro líquido ----------
   fundo translúcido, bordas acesas por dentro e um reflexo que segue o ponteiro
   (sem desfoque de fundo: sobre o degradê liso ele não muda nada à vista e pesa a cada quadro) */
.btn{
  position: relative; isolation: isolate; overflow: hidden;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 300ms ease, transform 220ms var(--ease-out);
}
.btn::before{
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(90px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,0.55), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 52%);
  opacity: 0.7; transition: opacity 250ms ease;
}
.btn:hover::before{ opacity: 1; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(0.97); }
.btn-primary{
  background: rgba(17,17,19,0.78); color: #fff; border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 1px rgba(255,255,255,0.08), inset 0 0 16px rgba(255,255,255,0.06), 0 12px 26px -14px rgba(17,17,19,0.7);
}
.btn-primary::before{ opacity: 0.35; }
.btn-primary:hover{ background: rgba(39,67,255,0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 18px rgba(255,255,255,0.12), 0 14px 30px -14px rgba(39,67,255,0.75); }
.btn-primary:hover::before{ opacity: 0.6; }
.btn-secondary{
  background: rgba(255,255,255,0.32); color: var(--ink); border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.4), inset 0 0 18px rgba(255,255,255,0.35), 0 10px 26px -16px rgba(60,40,120,0.5);
}
.btn-secondary:hover{ background: rgba(255,255,255,0.5); border-color: #fff; }
/* em fundo branco o vidro claro precisa de um contorno para não sumir */
.page .btn-secondary, .site-header .btn-secondary, .is-paper .btn-secondary{ border-color: rgba(17,17,19,0.14); }

/* ---------- página de orçamento com o fundo azul e roxo do hero ---------- */
.page-glow{ position: relative; isolation: isolate; overflow: hidden; background: var(--brand-wash); }
.page-bg{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms ease; }
.page-glow.has-shader .page-bg{ opacity: 1; }
.page-glow .page-lead{ color: #33375A; }
.page-glow .company-line{ color: #4F5480; }
.page-glow .contact-direct, .page-glow .lead-form{
  background: rgba(255,255,255,0.66); border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 60px -34px rgba(60,40,120,0.55);
}
.page-glow .lead-form input[type="text"], .page-glow .lead-form input[type="email"], .page-glow .lead-form input[type="tel"],
.page-glow .lead-form input[type="url"], .page-glow .lead-form textarea, .page-glow .lead-form .plan-option{ background: rgba(255,255,255,0.85); }
.page-glow + .site-footer{ margin-top: 0; }

/* ---------- ajustes finos do celular ---------- */
@media (max-width: 520px){
  .hero-ctas .btn, .final-ctas .btn{ flex: 1 1 100%; }
  .link-accent{ padding-block: 8px; }
  .hero{ padding-top: calc(var(--header-h) + 2rem); }
}

/* ---------- TESTE: o fundo do hero na página inteira ----------
   liga com class="is-wash" no <html> da página inicial. Um único fundo animado fica fixo atrás de tudo
   (canvas.page-wash) e as seções ficam transparentes; o que tinha texto direto no fundo ganha um painel
   branco translúcido, para continuar legível nos trechos mais roxos.
   Para desfazer: tirar a classe do <html> (este bloco inteiro deixa de valer). */
.page-wash{ display: none; }
html.is-wash{ background: linear-gradient(130deg, #F3F5FF 0%, #CDD5FF 34%, #9FB0FF 62%, #7A4DFF 100%) fixed; }
html.is-wash body{
  background: transparent;
  --ink-2: #33375A; --ink-3: #4F5480; --line: rgba(17,17,19,0.1); --line-strong: rgba(17,17,19,0.2);
}
html.is-wash .page-wash{
  display: block; position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none; opacity: 0; transition: opacity 900ms ease;
}
html.is-wash .page-wash.has-shader{ opacity: 1; }
html.is-wash :is(.hero, .guide-section, .guide, .final-band, .is-paper){ background: none; }
html.is-wash :is(.hero-bg, .guide-bg, .panel-bg){ display: none; }
html.is-wash :is(.compare-card, .story, .quote-grid, .faq-list){
  background: rgba(255,255,255,0.64); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 24px 50px -38px rgba(40,40,130,0.55);
}
html.is-wash .quote-grid{ border-radius: 18px; padding: 4px 24px 14px; }
html.is-wash .faq-list{ border-radius: 18px; padding: 2px 24px; }
html.is-wash .faq-item:last-child{ border-bottom: 0; }
html.is-wash .svc-card{ border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 24px 50px -38px rgba(40,40,130,0.55); }
html.is-wash .svc-list{ border-top-color: rgba(17,17,19,0.55); }
html.is-wash .svc-item{ color: rgba(17,17,19,0.42); }
html.is-wash .svc-item:hover{ color: rgba(17,17,19,0.72); }
html.is-wash .svc-item[aria-pressed="true"]{ color: var(--ink); }
html.is-wash .site-footer{ background: rgba(255,255,255,0.62); border-top-color: rgba(255,255,255,0.9); }