/* =========================================================
   PL CODE STUDIOS · site.css (versão 2, novembro de 2026)
   Visual sóbrio: Sora nos títulos (peso 400, letras juntas), Geist no texto,
   seções que alternam escuro, claro com linhas finas, metal e branco.
   1. Fontes e variáveis   2. Base   3. Botões e utilitários   4. Topo e menu
   5. Início   6. Seções e títulos   7. Por que   8. Manifesto   9. Segmentos
   10. Como funciona (celular)   11. Projetos   12. Serviços   13. Comparação
   14. Processo   15. Planos   16. Quem faz   17. Dúvidas   18. Contato
   19. Rodapé   20. Estudo de caso   21. Animações de entrada e movimento reduzido
   ========================================================= */

/* ---------- 1. Fontes e variáveis ---------- */
@font-face { font-family: 'Sora'; src: url('../fonts/sora-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --preto: #0E1014;
  --superficie: #15181E;
  --superficie-2: #1B1F26;
  --linha: #22262E;
  --borda: #2A2F38;
  --borda-forte: #3A404A;
  --texto: #EEF0F3;
  --texto-2: #A7ADB7;
  --texto-3: #8A909B;
  --cinza: #6B717C;
  --claro: #D9DCE1;
  --branco: #FFFFFF;
  --papel: #EEF0F3;
  --papel-2: #DCE0E6;
  --tinta: #0E1014;
  --tinta-2: #474D57;
  --tinta-3: #656B75;
  --apagado: #B4B9C2;
  --metal: linear-gradient(135deg, #FAFAFA 0%, #D5D6DA 55%, #A9ABB1 100%);
  --metal-faixa: linear-gradient(160deg, #F4F5F7 0%, #DADDE2 55%, #C3C7CE 100%);

  --titulo: 'Sora', 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --largura: 1200px;
  --margem: clamp(20px, 4vw, 48px);
  --raio: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--preto); color: var(--texto);
  font: 400 1rem/1.6 var(--fonte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; line-height: 1.12; color: var(--texto); }
p { color: var(--texto-2); text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--claro); color: var(--preto); }
.sprite { position: absolute; }

/* ---------- 3. Botões e utilitários ---------- */
.container { width: 100%; max-width: calc(var(--largura) + var(--margem) * 2); margin-inline: auto; padding-inline: var(--margem); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--branco); color: var(--preto); transform: translateY(-150%); transition: transform 0.3s; }
.pular:focus-visible { transform: none; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent;
  font: 500 0.9375rem/1 var(--fonte); letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.botao svg { width: 17px; height: 17px; flex: none; }
.botao:active { transform: scale(0.98); }
.botao--claro { background: var(--branco); color: var(--preto); }
.botao--claro:hover { background: var(--claro); }
.botao--escuro { background: var(--tinta); color: var(--branco); }
.botao--escuro:hover { background: #262A31; }
.botao--linha { border-color: var(--borda-forte); color: var(--texto); }
.botao--linha:hover { border-color: var(--texto); }
.botao--pequeno { min-height: 40px; padding: 0 14px; font-size: 0.875rem; border-radius: 8px; }
.botao--pequeno svg { width: 16px; height: 16px; }

.link-linha { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--borda-forte); font-weight: 500; color: var(--texto); transition: border-color 0.25s, gap 0.25s var(--ease); }
.link-linha svg { width: 16px; height: 16px; }
.link-linha:hover { border-color: var(--texto); gap: 12px; }

.icone-caixa { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--borda); color: var(--texto); transition: background-color 0.25s, border-color 0.25s; }
.icone-caixa svg { width: 16px; height: 16px; }
a.icone-caixa:hover { background: var(--branco); color: var(--preto); border-color: var(--branco); }
.etiqueta-num { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 7px; background: var(--superficie-2); font: 500 0.8125rem/1 var(--mono); color: var(--texto); }
.selo { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--borda-forte); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.selo--cliente { background: var(--branco); border-color: var(--branco); color: var(--preto); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--borda); background: var(--superficie-2); font: 600 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }
.tags li::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--cinza); }
.nota { font-size: 0.8125rem; color: var(--texto-3); }
.realce { background: linear-gradient(120deg, #C9CDD4 0%, #7E848F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.08em; }

/* ---------- 4. Topo e menu ---------- */
.topo { position: fixed; inset: 16px 0 auto; z-index: 50; padding-inline: clamp(12px, 5vw, 72px); pointer-events: none; }
.topo__barra {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  max-width: 1296px; height: 64px; margin-inline: auto; padding: 0 12px 0 20px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.08);
  background: rgb(14 16 20 / 0.62); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.marca { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--texto); }
.marca__icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--branco); color: var(--preto); }
.marca__icone svg { width: 17px; height: 19px; }
.marca__nome { font: 500 1.0625rem/1 var(--titulo); letter-spacing: -0.03em; }
.topo__links { display: none; gap: 28px; margin-right: 12px; }
.topo__links a { font-size: 0.9375rem; color: var(--texto-2); transition: color 0.2s; }
.topo__links a:hover, .topo__links a[aria-current] { color: var(--texto); }
.topo__zap span { display: none; }
@media (min-width: 560px) { .topo__zap span { display: inline; } }
@media (min-width: 1000px) { .topo__links { display: flex; } }
.topo__menu { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--branco); }
.topo__menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--preto); transition: transform 0.35s var(--ease); }
.topo__menu span:first-child { transform: translateY(-3.5px); }
.topo__menu span:last-child { transform: translateY(3.5px); }
.menu-aberto .topo__menu span:first-child { transform: rotate(45deg); }
.menu-aberto .topo__menu span:last-child { transform: rotate(-45deg); }
/* O topo fica claro sobre as seções claras */
.topo--claro .topo__barra { background: rgb(255 255 255 / 0.82); border-color: rgb(14 16 20 / 0.08); box-shadow: 0 10px 30px -18px rgb(14 16 20 / 0.35); }
.topo--claro .marca { color: var(--tinta); }
.topo--claro .marca__icone { background: var(--tinta); color: var(--branco); }
.topo--claro .topo__links a { color: var(--tinta-2); }
.topo--claro .topo__links a:hover { color: var(--tinta); }
.topo--claro .topo__zap { background: var(--tinta); color: var(--branco); }
.topo--claro .topo__menu { background: var(--tinta); }
.topo--claro .topo__menu span { background: var(--branco); }

.menu {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px var(--margem) 40px; background: var(--preto);
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-aberto .menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-aberto .topo--claro .topo__barra { background: rgb(14 16 20 / 0.62); }
.menu__links { display: grid; gap: 4px; max-width: var(--largura); width: 100%; margin-inline: auto; }
.menu__links a { padding: 8px 0; font: 400 clamp(2rem, 1.4rem + 3vw, 3.5rem)/1.1 var(--titulo); letter-spacing: -0.04em; color: var(--texto-2); transition: color 0.2s; }
.menu__links a:hover { color: var(--texto); }
.menu__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--largura); width: 100%; margin: 40px auto 0; }
.menu__rodape p { font-size: 0.875rem; color: var(--texto-3); }

/* ---------- 5. Início ---------- */
/* A entrada ocupa a tela; com .hero--portal ela fica presa enquanto a câmera atravessa o P (js/hero.js) */
.hero { position: relative; }
.hero--portal { height: 300svh; }
.hero__cena { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: max(100svh, 680px); padding: 124px 0 72px; }
.hero--portal .hero__cena { position: sticky; top: 0; height: 100svh; min-height: 0; }
.hero__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__fundo span { position: absolute; }
.hero__malha { inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 66% 46%, #000 15%, transparent 76%); mask-image: radial-gradient(ellipse 72% 72% at 66% 46%, #000 15%, transparent 76%); }
.hero__malha--luz { background-image: linear-gradient(rgb(255 255 255 / 0.22) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.22) 1px, transparent 1px); -webkit-mask-image: radial-gradient(280px circle at var(--mx, 72%) var(--my, 44%), #000, transparent); mask-image: radial-gradient(280px circle at var(--mx, 72%) var(--my, 44%), #000, transparent); }
.hero__aura { top: 50%; left: 75%; width: min(74vw, 1040px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(214 222 238 / 0.15), rgb(214 222 238 / 0.05) 48%, transparent 72%); }
.hero__anel { top: 50%; left: 75%; width: min(96vw, 1300px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.06); }
.hero__anel--2 { width: min(68vw, 920px); border-style: dashed; border-color: rgb(255 255 255 / 0.05); }

.hero__metal { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hero__reserva { position: absolute; z-index: 1; top: 50%; left: 75%; width: min(32vw, 420px); height: min(38vw, 500px); transform: translate(-50%, -50%); color: #C9CDD4; filter: drop-shadow(0 18px 50px rgb(214 222 238 / 0.2)); }
.js .hero__reserva { opacity: 0; } /* só aparece se o metal não puder rodar */
.js .hero__cena--sem-metal .hero__reserva { opacity: 1; }
.hero__cena--ativa .hero__metal { opacity: 1; }
.hero__portal { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(92vw, 14em); opacity: 0; transform: translate(-50%, -50%); margin: 0; text-align: center; font: 400 clamp(2.75rem, 1.4rem + 5.4vw, 6.5rem)/1.02 var(--titulo); letter-spacing: -0.05em; background: linear-gradient(180deg, #FFFFFF 15%, #AEB4BF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; }
.hero__estrela { position: absolute; z-index: 1; pointer-events: none; }
.hero__estrela--1 { left: 52%; top: 15%; width: clamp(38px, 5.4vw, 82px); height: clamp(38px, 5.4vw, 82px); }
.hero__estrela--2 { right: 3.5%; bottom: 18%; width: clamp(24px, 3vw, 46px); height: clamp(24px, 3vw, 46px); }
.hero__estrela--3 { right: 8%; top: 13%; width: clamp(16px, 2vw, 30px); height: clamp(16px, 2vw, 30px); }

.hero__conteudo { position: relative; z-index: 2; width: 100%; }
.hero__selo { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--borda-forte); background: rgb(21 24 30 / 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.02em; color: var(--texto-2) !important; }
.hero__ponto { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #E8ECF3; }
.hero__titulo { margin-top: 22px; max-width: 10.4em; font-size: clamp(2.625rem, 1.5rem + 3.5vw, 4.625rem); line-height: 1.03; letter-spacing: -0.045em; }
.hero__titulo:not(.hero__titulo--animado), .hero__p { background: linear-gradient(180deg, #FFFFFF 18%, #B9BEC8 62%, #8E949F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero__p { display: inline-block; padding-bottom: 0.08em; }
.hero__sub { margin-top: 24px; max-width: 29em; font-size: 1.0625rem; line-height: 1.6; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.hero__provas { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; font: 400 0.8125rem/1.3 var(--mono); color: var(--texto-3); }
.hero__provas li { display: inline-flex; align-items: center; gap: 8px; }
.hero__provas svg { width: 14px; height: 14px; color: var(--texto-2); }
.hero__rolar { position: absolute; z-index: 2; left: 50%; bottom: 22px; display: none; flex-direction: column; align-items: center; gap: 10px; margin: 0; transform: translateX(-50%); font: 400 0.75rem/1 var(--mono); letter-spacing: 0.04em; color: var(--texto-3) !important; }
.hero--portal .hero__rolar { display: flex; }
.hero__rolar span { display: block; width: 1px; height: 30px; background: linear-gradient(180deg, var(--texto-3), transparent); transform-origin: top; }

@media (min-width: 900px) and (max-width: 1240px) {
  .hero__titulo { max-width: 9.6em; font-size: clamp(2.5rem, 1rem + 3.5vw, 3.5rem); }
  .hero__sub { max-width: 25em; }
  .hero__provas { max-width: 24em; }
}
@media (max-width: 899px) {
  .hero--portal { height: 260svh; }
  .hero__cena { justify-content: flex-end; padding: 76px 0 30px; }
  .hero__reserva { top: 76px; left: 50%; width: 30svh; height: 32svh; transform: translateX(-50%); }
  .hero__cena:not(.hero__cena--ativa) .hero__conteudo { margin-top: 32svh; }
  .hero__titulo { margin-top: 16px; max-width: none; font-size: clamp(2.25rem, 9.8vw, 3.5rem); }
  .hero__sub { margin-top: 16px; font-size: 1rem; line-height: 1.5; }
  .hero__acoes { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
  .hero__acoes .botao { flex: 1 1 auto; justify-content: center; padding-inline: 12px; font-size: 0.9375rem; white-space: nowrap; }
  .hero__provas { margin-top: 20px; }
  .hero__rolar { display: none !important; }
  .hero__aura { top: 24%; left: 50%; width: 120vw; }
  .hero__anel { top: 24%; left: 50%; width: 150vw; }
  .hero__anel--2 { width: 104vw; }
  .hero__malha { -webkit-mask-image: radial-gradient(ellipse 90% 44% at 50% 24%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 90% 44% at 50% 24%, #000 15%, transparent 78%); }
  .hero__malha--luz { display: none; }
  .hero__estrela--1 { left: 8%; top: 13%; }
  .hero__estrela--2 { right: 7%; bottom: auto; top: 38%; }
  .hero__estrela--3 { right: 10%; top: 12%; }
}
@media (max-width: 899px) and (max-height: 740px) {
  .hero__provas { display: none; }
  .hero__sub { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__selo, .js .hero__sub, .js .hero__acoes, .js .hero__provas { animation: hero-sobe 1s var(--ease) both; }
  .js .hero__sub { animation-delay: 0.42s; }
  .js .hero__acoes { animation-delay: 0.54s; }
  .js .hero__provas { animation-delay: 0.66s; }
  .hero__titulo--animado .hero__p { animation: hero-palavra 1s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
  .hero__estrela use { transform-box: fill-box; transform-origin: center; animation: hero-brilho 5.5s ease-in-out infinite both; animation-delay: 2.1s; }
  .hero__estrela--2 use { animation-delay: 3s; animation-duration: 4.4s; }
  .hero__estrela--3 use { animation-delay: 3.8s; animation-duration: 6.2s; }
  .hero__ponto::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #E8ECF3; animation: hero-pulso 2.4s var(--ease) infinite; }
  .hero__anel { animation: hero-gira 90s linear infinite; }
  .hero__anel--2 { animation-direction: reverse; animation-duration: 70s; }
  .hero__aura { animation: hero-respira 7s ease-in-out infinite; }
  .hero__rolar span { animation: hero-rolar 2s var(--ease) infinite; }
}
@keyframes hero-sobe { from { opacity: 0; transform: translateY(16px); } }
@keyframes hero-palavra { from { opacity: 0; transform: translateY(0.55em) rotate(2deg); filter: blur(10px); } }
@keyframes hero-brilho { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(-40deg); } 30%, 62% { opacity: 1; transform: scale(1) rotate(0); } 80% { opacity: 0.25; transform: scale(0.6) rotate(25deg); } }
@keyframes hero-pulso { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(1.7); } }
@keyframes hero-gira { to { rotate: 360deg; } }
@keyframes hero-respira { 50% { opacity: 0.62; } }
@keyframes hero-rolar { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) { .hero__anel, .hero__anel--2 { animation: none; } }

/* Molduras de navegador e celular (estudos de caso) */
.janela { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.9); }
.janela__barra { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--borda); }
.janela__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--borda-forte); }
.janela__barra span { margin-inline: auto; padding: 3px 12px; border-radius: 6px; background: var(--preto); font: 400 0.6875rem/1.4 var(--mono); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.janela img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }
.aparelho { position: absolute; left: 0; bottom: 0; width: 27%; padding: 5px; border-radius: 26px; background: #1A1D23; border: 1px solid var(--borda-forte); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.95); }
.aparelho img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 21px; }

/* ---------- 6. Seções e títulos ---------- */
.secao { position: relative; padding-block: clamp(96px, 11vw, 150px); }
.secao--borda { border-top: 1px solid var(--linha); }
.secao--clara { background: var(--papel); color: var(--tinta); }
.secao--branca { background: var(--branco); color: var(--tinta); }
:is(.secao--clara, .secao--branca) :is(h2, h3) { color: var(--tinta); }
:is(.secao--clara, .secao--branca) p { color: var(--tinta-2); }
/* Linhas verticais finas, como uma folha quadriculada, só nas seções claras */
.secao--linhas::before {
  content: ''; position: absolute; inset: 0; margin-inline: auto; pointer-events: none;
  width: min(100%, var(--largura)); border-inline: 1px solid var(--papel-2);
  background-image: linear-gradient(to right, var(--papel-2) 1px, transparent 1px); background-size: 100px 100%; background-position: 100px 0;
}
.secao--linhas > .container { position: relative; }
.titulo-xl { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4rem); line-height: 1.02; letter-spacing: -0.045em; }
.titulo-l { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.04em; }
.cabeca { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 72px); }
.cabeca p { font-size: 1.0625rem; max-width: 34em; }
.cabeca--centro { justify-items: center; text-align: center; }
@media (min-width: 900px) { .cabeca--lado { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; column-gap: 64px; } }
.cartao { padding: clamp(24px, 3vw, 30px); border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); }

/* ---------- 7. Por que ter um site ---------- */
.abertura { display: grid; gap: 40px; align-items: center; padding-bottom: clamp(48px, 6vw, 64px); border-bottom: 1px solid var(--linha); }
@media (min-width: 1000px) { .abertura { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; } }
.abertura .titulo-xl { max-width: 12em; }
.abertura__cartao { display: grid; gap: 16px; justify-items: start; }
.abertura__cartao h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.abertura__cartao p:not(.nota) { font-size: 0.9375rem; }
.recursos { display: grid; gap: 16px; margin-top: clamp(40px, 5vw, 48px); }
@media (min-width: 900px) { .recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.recurso { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 340px; padding: 24px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); transition: border-color 0.3s; }
.recurso:hover { border-color: var(--borda-forte); }
.recurso__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(56px, 6vw, 88px); }
.recurso__rodape { margin-top: auto; }
.recurso h3 { font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2rem); letter-spacing: -0.035em; }
.recurso p { position: relative; z-index: 1; font-size: 0.9375rem; }
.recurso__rodape { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linha); font: 400 0.8125rem/1.4 var(--mono) !important; color: var(--texto) !important; }
.recurso__rodape svg { width: 15px; height: 15px; flex: none; color: var(--claro); }
.recurso__num { position: absolute; right: -6px; bottom: 30px; font: 600 9rem/1 var(--titulo); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px var(--linha); pointer-events: none; }

/* ---------- 8. Manifesto ---------- */
.manifesto { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .manifesto { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 80px; } }
.manifesto__texto { font: 400 clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem)/1.18 var(--titulo); letter-spacing: -0.035em; color: var(--tinta) !important; }
.manifesto__texto .palavra { transition: color 0.35s; }
.js .manifesto__texto[data-iluminar] .palavra { color: var(--apagado); }
.js .manifesto__texto[data-iluminar] .palavra.acesa { color: var(--tinta); }
.manifesto .botao { margin-top: 40px; }
.manifesto__lado { display: grid; gap: 28px; justify-items: start; }
.manifesto__simbolo { width: clamp(140px, 18vw, 220px); height: auto; aspect-ratio: 640 / 730; color: var(--tinta); }
.manifesto__legenda { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--papel-2); max-width: 22em; }
.manifesto__legenda h3 { font-size: 1.375rem; letter-spacing: -0.03em; }
.manifesto__legenda p { font-size: 0.9375rem; }

/* ---------- 9. Segmentos ---------- */
.segmentos { padding-block: clamp(80px, 9vw, 112px); border-bottom: 1px solid var(--linha); }
.segmentos__texto { max-width: 34em; margin-bottom: 44px; text-align: center; font-size: 1.0625rem; }
.faixa-segmentos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa-segmentos__trilho { display: flex; gap: 12px; width: max-content; animation: rolar-faixa 48s linear infinite; }
.faixa-segmentos:hover .faixa-segmentos__trilho { animation-play-state: paused; }
.faixa-segmentos__trilho li { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 176px; height: 112px; padding: 16px; border-radius: 12px; border: 1px solid var(--borda); background: linear-gradient(160deg, #1D2129, #12151A 70%); color: var(--texto); font-weight: 500; font-size: 0.9375rem; transition: border-color 0.3s, translate 0.4s var(--ease); }
.faixa-segmentos__trilho li::after { content: ''; position: absolute; inset: 0 -60%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.16) 50%, transparent 58%); translate: -55% 0; transition: translate 0.8s var(--ease); pointer-events: none; }
.faixa-segmentos__trilho li:hover { border-color: #5F646D; translate: 0 -3px; }
.faixa-segmentos__trilho li:hover::after { translate: 55% 0; }
.faixa-segmentos__trilho svg { width: 22px; height: 22px; fill: none; stroke: #D9DCE1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes rolar-faixa { to { transform: translateX(-50%); } }

/* ---------- 10. Como funciona (celular que acompanha a rolagem) ---------- */
.demo { position: relative; }
@media (min-width: 1000px) {
  .demo { height: 320vh; }
  .demo__fixo { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
}
.demo__fixo { padding-block: clamp(96px, 10vw, 120px); }
.demo__grade { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .demo__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.demo__sub { margin-top: 18px; font-size: 1.0625rem; }
.passos { margin-top: 40px; border-top: 1px solid var(--linha); }
.passo { position: relative; padding: 22px 0 22px 36px; border-bottom: 1px solid var(--linha); transition: opacity 0.4s; }
.passo::before { content: ''; position: absolute; left: 0; top: 30px; width: 12px; height: 12px; border-radius: 2px; background: var(--borda-forte); transition: background-color 0.4s; }
.passo h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.passo p { margin-top: 6px; max-width: 30em; font-size: 0.9375rem; }
.js .passo { opacity: 0.4; }
.js .passo.ativo { opacity: 1; }
.passo.ativo::before { background: var(--branco); }
.demo__palco { display: grid; justify-items: center; gap: 16px; }
.demo__palco figcaption { font-size: 0.8125rem; color: var(--texto-3); }

.celular { position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 620; padding: 10px; border-radius: 46px; background: #08090B; border: 1px solid var(--borda-forte); box-shadow: 0 50px 100px -40px rgb(0 0 0 / 0.95), inset 0 0 0 2px #1C1F25; }
.celular__ilha { position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 24px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.tela { position: absolute; inset: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; border-radius: 37px; background: #FFFFFF; color: #15181E; font-size: 12px; line-height: 1.4; opacity: 0; transition: opacity 0.5s var(--ease); }
.celular[data-tela='0'] .tela--busca, .celular[data-tela='1'] .tela--site, .celular[data-tela='2'] .tela--chat { opacity: 1; }
.tela__status { display: flex; justify-content: space-between; align-items: center; padding: 2px 10px 6px; font-weight: 600; font-size: 12px; }
.tela__status i { width: 22px; height: 9px; border-radius: 3px; background: #15181E; }
.busca { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 20px; background: #F1F3F6; font-size: 12.5px; }
.busca svg { width: 15px; height: 15px; fill: none; stroke: #5B616B; stroke-width: 2; stroke-linecap: round; }
.filtros { display: flex; gap: 6px; overflow: hidden; }
.filtros span { flex: none; padding: 5px 9px; border-radius: 7px; border: 1px solid #DDE1E6; font-size: 10.5px; color: #3B414A; }
.mapa { position: relative; height: 104px; border-radius: 12px; background: linear-gradient(115deg, transparent 44%, #FFFFFF 44% 50%, transparent 50%), #E3E7EC; overflow: hidden; }
.mapa::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#FFFFFF 2px, transparent 2px), linear-gradient(90deg, #FFFFFF 2px, transparent 2px); background-size: 34px 34px; opacity: 0.8; }
.mapa i, .mapa b { position: absolute; width: 13px; height: 13px; border-radius: 3px; background: #9AA1AC; }
.mapa i:nth-child(1) { left: 20%; top: 30%; } .mapa i:nth-child(2) { left: 70%; top: 22%; } .mapa i:nth-child(3) { left: 80%; top: 68%; }
.mapa b { left: 46%; top: 48%; width: 20px; height: 20px; background: #15181E; box-shadow: 0 0 0 5px rgb(21 24 30 / 0.15); }
.resultado { display: grid; gap: 3px; padding-block: 10px; border-block: 1px solid #ECEEF1; }
.resultado strong { font-size: 14px; }
.resultado span { font-size: 11px; color: #5B616B; }
.resultado em { font-style: normal; color: #1E8E3E; }
.resultado__botoes { display: flex; gap: 6px; margin-top: 6px; }
.resultado__botoes span { padding: 4px 10px; border-radius: 12px; border: 1px solid #DDE1E6; font-size: 11px; color: #15181E; }
.resultado__botoes span.ativo { background: #15181E; border-color: #15181E; color: #FFFFFF; }
.esqueleto { display: grid; gap: 6px; }
.esqueleto i { height: 8px; border-radius: 4px; background: #ECEEF1; }
.esqueleto i:nth-child(1) { width: 55%; } .esqueleto i:nth-child(2) { width: 80%; } .esqueleto i:nth-child(3) { width: 40%; }
.endereco { padding: 7px 12px; border-radius: 14px; background: #F1F3F6; font: 400 11px/1.3 var(--mono); color: #5B616B; }
.site-capa { display: grid; gap: 4px; padding: 52px 16px 16px; border-radius: 14px; background: linear-gradient(160deg, #20242C, #0E1014); color: #FFFFFF; }
.site-capa strong { font: 500 20px/1.1 var(--titulo); letter-spacing: -0.03em; }
.site-capa span { font-size: 11px; color: #C9CDD4; }
.site-rotulo { font-weight: 600; font-size: 12.5px; color: #15181E !important; }
.site-precos li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #ECEEF1; font-size: 12px; }
.site-precos b { font: 500 11.5px/1.4 var(--mono); }
.site-botao { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 12px; border-radius: 12px; background: #1FAF55; color: #FFFFFF; font-weight: 600; font-size: 12.5px; }
.site-botao svg { width: 15px; height: 15px; }
.tela--chat { gap: 0; padding: 16px 0 12px; background: #EFEAE2; }
.tela--chat .tela__status { padding-inline: 24px; background: #F7F7F7; }
.chat__topo { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; background: #F7F7F7; border-bottom: 1px solid #E2E2E2; }
.chat__topo strong { display: block; font-size: 13px; }
.chat__topo small { font-size: 10.5px; color: #5B616B; }
.chat__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #15181E; color: #FFFFFF; font-weight: 600; font-size: 11px; }
.chat__corpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.chat__dia { align-self: center; padding: 3px 8px; border-radius: 6px; background: #FFFFFF; font-size: 10px; color: #5B616B; }
.balao { position: relative; max-width: 82%; padding: 7px 10px 16px; border-radius: 10px; font-size: 12px; color: #15181E !important; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
.balao small { position: absolute; right: 8px; bottom: 3px; font-size: 9px; color: #6B717C; }
.balao--eu { align-self: flex-end; background: #D9FDD3; }
.balao--eles { align-self: flex-start; background: #FFFFFF; }
.chat__campo { display: flex; align-items: center; gap: 8px; margin: 0 10px; }
.chat__campo span { flex: 1; padding: 9px 14px; border-radius: 18px; background: #FFFFFF; font-size: 11.5px; color: #8A909B; }
.chat__campo i { width: 34px; height: 34px; border-radius: 50%; background: #1FAF55; }
/* Mensagens do chat entram em sequência quando a tela aparece */
.js .celular[data-tela='2'] .balao { animation: balao-entra 0.5s var(--ease) both; }
.js .celular[data-tela='2'] .balao--eles { animation-delay: 1s; }
@keyframes balao-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 11. Projetos ---------- */
.filtros { position: relative; display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto clamp(32px, 4vw, 44px); padding: 4px; overflow-x: auto; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros__marca { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #C9CDD4); box-shadow: 0 4px 18px rgb(214 222 238 / 0.22); transition: transform 0.45s var(--ease), width 0.45s var(--ease); }
.filtros button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 500 0.875rem/1 var(--corpo, inherit); color: var(--texto-2); white-space: nowrap; cursor: pointer; transition: color 0.3s; }
.filtros button:hover { color: var(--texto); }
.filtros button[aria-pressed='true'] { color: var(--preto); }
.filtros small { font: 500 0.6875rem/1 var(--mono); opacity: 0.65; }
.projetos { display: grid; gap: 16px; }
@media (min-width: 640px) { .projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .projetos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projeto { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); transition: border-color 0.3s, translate 0.4s var(--ease); }
.projeto[hidden] { display: none; }
.projeto:hover { border-color: var(--borda-forte); translate: 0 -4px; }
.projeto__imagem { overflow: hidden; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.projeto__imagem img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.projeto:hover .projeto__imagem img { transform: scale(1.04); }
.projeto__info { display: grid; gap: 8px; justify-items: start; padding: 18px 20px 20px; }
.projeto__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--texto-3) !important; }
.projeto__meta .selo { height: 22px; padding: 0 8px; font-size: 0.625rem; }
.projeto h3 { font-size: 1.3125rem; letter-spacing: -0.03em; }
.projeto__info > p:not(.projeto__meta) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 0.875rem; line-height: 1.5; }
.projeto .link-linha { margin-top: 4px; padding-bottom: 3px; font-size: 0.875rem; }
@media (max-width: 639px) {
  .projeto { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
  .projeto__imagem { border-bottom: 0; border-right: 1px solid var(--borda); }
  .projeto__imagem img { height: 100%; aspect-ratio: auto; object-position: top left; }
  .projeto__info { padding: 14px; gap: 6px; }
  .projeto h3 { font-size: 1.125rem; }
  .projeto__info > p:not(.projeto__meta) { display: none; }
  .projeto .link-linha { font-size: 0.8125rem; }
  .filtros { margin-inline: -4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .projetos .projeto.visivel { animation: projeto-entra 0.55s var(--ease) both; }
}
@keyframes projeto-entra { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* ---------- 12. Serviços ---------- */
.servicos { display: grid; gap: 16px; }
.servico { display: grid; overflow: hidden; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--preto); }
@media (min-width: 900px) { .servico { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 290px; } }
.servico > div { padding: 28px; }
.servico > div + div { border-top: 1px solid var(--borda); }
@media (min-width: 900px) { .servico > div + div { border-top: 0; border-left: 1px solid var(--borda); } }
.servico__nome { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 28px; }
.servico__nome h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 8em; }
.servico__texto { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.servico__texto p { font-size: 0.9375rem; }
.servico__arte { display: grid; place-items: center; background: var(--superficie); }
.arte { position: relative; width: 100%; max-width: 330px; }
.arte i, .arte b, .arte span { display: block; }
.arte--site { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); }
.arte--site i { height: 10px; border-radius: 4px; background: var(--borda); }
.arte--site .a1 { grid-column: 1 / -1; width: 30%; height: 12px; }
.arte--site .a2 { width: 90%; height: 14px; background: var(--borda-forte); }
.arte--site .a3 { grid-row: span 3; height: 92px; border-radius: 8px; background: var(--borda); }
.arte--site .a4 { width: 70%; }
.arte--site .a5 { width: 46%; height: 22px; border-radius: 6px; background: var(--claro); }
.arte--landing { display: flex; align-items: center; justify-content: center; gap: 14px; }
.arte--landing .tela-a, .arte--landing .tela-b { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); }
.arte--landing .tela-a { width: 46%; }
.arte--landing .tela-b { width: 34%; padding-block: 18px; border-radius: 16px; }
.arte--landing i { height: 9px; border-radius: 4px; background: var(--borda); }
.arte--landing i:first-child { height: 48px; border-radius: 6px; }
.arte--landing b { height: 20px; border-radius: 6px; background: var(--claro); }
.arte--landing .seta-arte { width: 22px; height: 1px; background: var(--cinza); }
.arte--catalogo { display: flex; align-items: center; justify-content: center; gap: 22px; }
.arte--catalogo .lista { display: grid; gap: 8px; width: 46%; padding: 14px; border-radius: 16px; border: 1px solid var(--borda); background: var(--superficie-2); }
.arte--catalogo .lista i { height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--borda-forte) 26%, transparent 26% 32%, var(--borda) 32%); }
.arte--catalogo .qr { width: 86px; aspect-ratio: 1; border-radius: 8px; background:
  conic-gradient(from 90deg at 2px 2px, var(--superficie-2) 90deg, transparent 0) 0 0 / 14px 14px,
  repeating-linear-gradient(45deg, var(--borda-forte) 0 4px, transparent 4px 9px), var(--superficie-2); border: 6px solid var(--superficie-2); outline: 1px solid var(--borda); }
.arte--marca { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.arte--marca .logo-arte { grid-row: span 2; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 20px; background: var(--branco); color: var(--preto); }
.arte--marca .logo-arte svg { width: 46px; height: 52px; }
.arte--marca .cores { display: flex; gap: 8px; }
.arte--marca .cores i { width: 30px; height: 30px; border-radius: 8px; }
.arte--marca .cores i:nth-child(1) { background: var(--branco); } .arte--marca .cores i:nth-child(2) { background: var(--claro); }
.arte--marca .cores i:nth-child(3) { background: var(--cinza); } .arte--marca .cores i:nth-child(4) { background: var(--borda); }
.arte--marca .fonte-arte { font: 400 2.75rem/1 var(--titulo); letter-spacing: -0.04em; color: var(--texto); }

/* ---------- 13. Comparação ---------- */
.comparacao__titulo { text-align: center; max-width: 22em; margin: 0 auto clamp(48px, 6vw, 72px); }
.comparacao { display: grid; overflow: hidden; border-radius: var(--raio); box-shadow: 0 40px 80px -50px rgb(14 16 20 / 0.45); }
@media (min-width: 900px) { .comparacao { grid-template-columns: 1fr 1fr; } }
.comparacao__lado { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 52px); }
.comparacao__lado--sem { background: #181B21; }
.comparacao__lado--com { background: var(--branco); }
.comparacao__rotulo { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.comparacao__lado--sem .comparacao__rotulo { color: var(--texto-3) !important; }
.comparacao__lado--com .comparacao__rotulo { color: var(--tinta-3) !important; }
.comparacao h3 { margin: 18px 0 48px; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.06; letter-spacing: -0.04em; }
.comparacao__lado--sem h3 { color: var(--texto-3) !important; }
.comparacao ul { margin-top: auto; }
.comparacao li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid; font-size: 0.9375rem; }
.comparacao li svg { width: 16px; height: 16px; flex: none; }
.comparacao__lado--sem li { border-color: var(--borda); color: var(--texto-2); }
.comparacao__lado--sem li svg { color: var(--cinza); }
.comparacao__lado--com li { border-color: #E3E6EA; color: var(--tinta); }

/* ---------- 14. Processo ---------- */
.faixa-processo { position: relative; padding-block: clamp(120px, 12vw, 170px); background: var(--metal-faixa); color: var(--tinta); }
/* Recortes no topo e na base, como abas, ligando às seções vizinhas */
.faixa-processo::before, .faixa-processo::after { content: ''; position: absolute; left: 50%; width: min(488px, 42%); height: 48px; transform: translateX(-50%); }
.faixa-processo::before { top: 0; background: var(--papel); border-radius: 0 0 16px 16px; }
.faixa-processo::after { bottom: 0; background: var(--preto); border-radius: 16px 16px 0 0; }
.faixa-processo :is(h2, h3) { color: var(--tinta); }
.faixa-processo p { color: var(--tinta-2); }
.etapas { display: grid; gap: 16px; }
@media (min-width: 640px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etapa { display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 24px; border-radius: var(--raio); background: rgb(255 255 255 / 0.55); border: 1px solid rgb(255 255 255 / 0.9); box-shadow: 0 20px 40px -30px rgb(14 16 20 / 0.35); }
.etapa__blocos { display: flex; gap: 5px; margin-bottom: 26px; }
.etapa__blocos i { width: 12px; height: 12px; border-radius: 2px; background: rgb(14 16 20 / 0.18); }
.etapa__blocos i.on { background: var(--tinta); }
.etapa h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.etapa p { font-size: 0.9375rem; }
.faixa-processo__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 48px; }
.faixa-processo__acao p { font-size: 0.9375rem; font-weight: 500; color: var(--tinta) !important; }

/* ---------- 15. Planos ---------- */
.planos { display: grid; gap: 16px; }
@media (min-width: 1000px) { .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plano { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 3vw, 34px); border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); }
.plano--destaque { background: linear-gradient(180deg, #1C2027, var(--superficie) 70%); border-color: var(--borda-forte); }
.plano--destaque::after { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: var(--metal); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.plano__nome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.plano h3 { font-size: 1.625rem; letter-spacing: -0.035em; }
.plano__para { font-size: 0.9375rem; }
.plano__preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding-block: 20px; border-block: 1px solid var(--linha); font: 400 clamp(3rem, 2.4rem + 2vw, 4rem)/0.95 var(--titulo); letter-spacing: -0.05em; color: var(--texto) !important; }
.plano__preco small { font: 500 1rem/1 var(--mono); letter-spacing: 0; color: var(--texto-2); }
.plano__preco span { margin-left: 6px; font: 400 0.875rem/1 var(--fonte); letter-spacing: 0; color: var(--texto-3); }
.plano__preco--texto { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); flex-direction: column; align-items: flex-start; gap: 10px; }
.plano__preco--texto span { margin-left: 0; }
.plano__itens { display: grid; gap: 11px; }
.plano__itens li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--texto-2); }
.plano__itens li::before { content: ''; flex: none; width: 15px; height: 15px; margin-top: 4px; background: var(--claro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plano__itens .plano__mais { color: var(--texto); font-weight: 500; }
.plano__itens .plano__mais::before { -webkit-mask: none; mask: none; background: none; width: 0; margin: 0; }
.plano .botao { width: 100%; margin-top: auto; }
.adicionais { margin-top: 16px; padding: clamp(24px, 3vw, 34px); border-radius: var(--raio); border: 1px solid var(--borda); }
.adicionais h3 { font-size: 1.375rem; letter-spacing: -0.03em; margin-bottom: 16px; }
.adicionais ul { display: grid; column-gap: 48px; }
@media (min-width: 800px) { .adicionais ul { grid-template-columns: 1fr 1fr; } }
.adicionais li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linha); font-size: 0.9375rem; color: var(--texto-2); }
.adicionais b { font: 500 0.875rem/1.6 var(--mono); color: var(--texto); white-space: nowrap; }
.adicionais .nota { margin-top: 18px; }
.campo--marcado :is(input, select) { border-color: var(--branco) !important; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.12); }

/* ---------- 16. Quem faz ---------- */
.sobre { display: grid; gap: 32px; }
@media (min-width: 900px) { .sobre { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; } }
.sobre__assinatura { display: grid; gap: 4px; margin-top: 28px; }
.sobre__assinatura strong { font: 500 1.0625rem/1.3 var(--fonte); color: var(--texto); }
.sobre__assinatura span { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.sobre__texto { display: grid; gap: 20px; }
.sobre__destaque { font: 400 clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem)/1.35 var(--titulo); letter-spacing: -0.025em; color: var(--texto) !important; }
.sobre__texto p:not(.sobre__destaque) { font-size: 1.0625rem; max-width: 36em; }

/* ---------- 17. Dúvidas ---------- */
.duvidas-grade { display: grid; gap: 48px; }
@media (min-width: 1000px) { .duvidas-grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; } .duvidas__lado { position: sticky; top: 120px; } }
.duvidas__lado { display: grid; gap: 18px; justify-items: start; }
.duvidas__lado .titulo-l { max-width: 8em; }
.duvidas { border-top: 1px solid #E3E6EA; }
.duvida { border-bottom: 1px solid #E3E6EA; }
.duvida summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font: 400 clamp(1.125rem, 1rem + 0.45vw, 1.375rem)/1.3 var(--titulo); letter-spacing: -0.02em; color: var(--tinta); }
.duvida summary::-webkit-details-marker { display: none; }
.duvida__icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #DDE1E6; color: var(--tinta); transition: transform 0.35s var(--ease), background-color 0.25s; }
.duvida__icone svg { width: 15px; height: 15px; }
.duvida[open] .duvida__icone { transform: rotate(45deg); background: var(--tinta); color: var(--branco); border-color: var(--tinta); }
.duvida summary:hover .duvida__icone { border-color: var(--tinta); }
.duvida__resposta { padding: 0 56px 24px 0; }
.duvida__resposta p { font-size: 1rem; }
.duvida__resposta a { text-decoration: underline; text-underline-offset: 3px; color: var(--tinta); }

/* ---------- 18. Contato ---------- */
.contato__chamada { display: grid; justify-items: center; gap: 22px; max-width: 760px; margin: 0 auto clamp(48px, 6vw, 64px); text-align: center; }
.contato__simbolo { width: 64px; height: 73px; color: var(--texto); }
.contato__chamada p { font-size: 1.0625rem; max-width: 34em; }
.formulario { display: grid; gap: 18px; max-width: 760px; margin-inline: auto; padding: clamp(24px, 4vw, 36px); border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); }
.campos-duplos { display: grid; gap: 18px; }
@media (min-width: 640px) { .campos-duplos { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 0.875rem; font-weight: 500; color: var(--texto); }
.campo label span { color: var(--texto-3); font-weight: 400; }
.campo :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--borda); background: var(--preto); color: var(--texto); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.campo textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7ADB7' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.campo select optgroup, .campo select option { background: var(--preto); color: var(--texto); }
.campo :is(input, select, textarea):hover { border-color: var(--borda-forte); }
.campo :is(input, select, textarea):focus { outline: none; border-color: var(--claro); box-shadow: 0 0 0 4px rgb(217 220 225 / 0.12); }
.campo [aria-invalid='true'] { border-color: #E5484D; }
.campo ::placeholder { color: var(--cinza); }
.formulario__aviso { padding: 12px 14px; border-radius: 10px; background: var(--superficie-2); color: var(--texto) !important; font-size: 0.9375rem; white-space: pre-line; }
.formulario__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 40px; }
.canais li { display: grid; gap: 4px; text-align: center; }
.canais span { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.canais a { font-weight: 500; border-bottom: 1px solid var(--borda-forte); padding-bottom: 2px; }
.canais a:hover { border-color: var(--texto); }

/* ---------- 19. Rodapé ---------- */
.rodape { padding: 72px 0 32px; border-top: 1px solid var(--linha); }
.rodape__grade { display: grid; gap: 40px; }
@media (min-width: 800px) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr; } }
.rodape__marca { display: grid; gap: 16px; justify-items: start; }
.rodape__marca p { max-width: 24em; font-size: 0.9375rem; }
.rodape h2 { margin-bottom: 14px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.rodape ul { display: grid; gap: 10px; }
.rodape ul a { color: var(--texto-2); transition: color 0.2s; }
.rodape ul a:hover { color: var(--texto); }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 0.875rem; }
.rodape__base p, .rodape__base a { color: var(--texto-3); }
.rodape__base a:hover { color: var(--texto); }
.rodape__base .pl-rodape { width: auto; padding: 0; justify-content: flex-start; gap: 6px 24px; font-size: inherit; color: var(--texto-3); opacity: 1; }

/* ---------- 20. Estudo de caso (projetos/*.html) ---------- */
.caso-topo { padding: 150px 0 clamp(56px, 7vw, 80px); }
.caso-voltar { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 0.9375rem; color: var(--texto-2); }
.caso-voltar:hover { color: var(--texto); }
.caso-voltar svg { width: 16px; height: 16px; transform: rotate(-135deg); }
.caso-topo .projeto__meta { margin-bottom: 20px; }
.caso-topo h1 { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 4.75rem); line-height: 1; letter-spacing: -0.05em; }
.caso-topo .caso-resumo { margin-top: 22px; max-width: 34em; font-size: 1.125rem; }
.caso-topo .botao { margin-top: 32px; }
.caso-aviso { margin-top: 24px; max-width: 46em; padding: 14px 16px; border-radius: 10px; border: 1px dashed var(--borda-forte); font-size: 0.9375rem; }
.caso-capa { position: relative; margin-top: clamp(48px, 6vw, 72px); padding-bottom: 7%; }
.caso-capa .janela { width: 88%; }
.caso-capa .aparelho { left: auto; right: 0; width: 20%; }
.caso-ficha { display: grid; gap: 1px; margin-top: clamp(48px, 6vw, 72px); overflow: hidden; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--borda); }
@media (min-width: 800px) { .caso-ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.caso-ficha div { display: grid; gap: 6px; padding: 20px 22px; background: var(--superficie); }
.caso-ficha dt { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.caso-ficha dd { margin: 0; color: var(--texto); }
.caso-ficha a { border-bottom: 1px solid var(--borda-forte); }
.caso-texto { display: grid; gap: 40px; }
@media (min-width: 1000px) { .caso-texto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.caso-texto > div > p { margin-top: 20px; font-size: 1.0625rem; }
.caso-itens { border-top: 1px solid var(--linha); }
.caso-itens li { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--linha); color: var(--texto-2); }
.caso-itens svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--claro); }
.caso-telas { display: grid; gap: clamp(32px, 4vw, 48px); }
.caso-telas figure { display: grid; gap: 14px; }
.caso-telas figcaption { font-size: 0.9375rem; color: var(--texto-3); }
.caso-proximo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding-block: clamp(64px, 8vw, 96px); border-top: 1px solid var(--linha); }
.caso-proximo span { display: block; margin-bottom: 10px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.caso-proximo a.caso-proximo__nome { font: 400 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/1 var(--titulo); letter-spacing: -0.045em; transition: color 0.2s; }
.caso-proximo a.caso-proximo__nome:hover { color: var(--claro); }

/* ---------- 20b. Acabamento metálico (vale para todas as páginas) ---------- */
.etiqueta-secao { display: inline-flex; align-items: center; gap: 7px; width: fit-content; height: 28px; padding: 0 12px 0 9px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); font: 500 0.6875rem/1 var(--mono) !important; letter-spacing: 0.05em; color: var(--texto-2) !important; }
.etiqueta-secao svg { width: 12px; height: 12px; }
[data-tema] .etiqueta-secao { border-color: rgb(14 16 20 / 0.18); background: rgb(255 255 255 / 0.5); color: var(--tinta-2) !important; }
.secao:not([data-tema]) .titulo-l, .secao:not([data-tema]) .titulo-xl, .caso-topo h1 { background-image: linear-gradient(105deg, transparent 43%, rgb(255 255 255 / 0.95) 50%, transparent 57%), linear-gradient(180deg, #FFFFFF 22%, #AEB4BF 100%); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.08em; }
.realce { -webkit-text-fill-color: currentColor; }

/* Luz que segue o cursor nos cartões */
.projeto, .recurso, .plano, .cartao { --sx: 50%; --sy: 0%; }
.projeto::after, .recurso::after, .plano::before, .cartao::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(320px circle at var(--sx) var(--sy), rgb(226 232 244 / 0.1), transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.cartao { position: relative; }
.projeto:hover::after, .recurso:hover::after, .plano:hover::before, .cartao:hover::after { opacity: 1; }

/* Brilho que atravessa o botão principal */
.botao--claro { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF, #D9DCE2); }
.botao--claro::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.9), transparent); transform: skewX(-18deg); transition: left 0.7s var(--ease); pointer-events: none; }
.botao--claro:hover::after { left: 125%; }

/* Marca gigante no fim de cada página */
.rodape { overflow: hidden; padding-bottom: 0; }
.rodape .container { padding-bottom: 8px; }
.rodape__gigante { margin: 0; padding-top: 0.04em; text-align: center; font: 400 clamp(5rem, 21.5vw, 22rem)/1.12 var(--titulo); letter-spacing: -0.065em; white-space: nowrap; background-image: radial-gradient(360px circle at var(--gx, -400px) 42%, #FFFFFF, transparent 72%), linear-gradient(180deg, #E9ECF1 8%, #8D939E 52%, rgb(141 147 158 / 0.04) 88%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: -0.22em; user-select: none; pointer-events: none; }

/* Serviços: sites de verdade no lugar dos rascunhos */
.servico__arte { overflow: hidden; }
.arte-real { position: relative; width: 100%; max-width: 330px; margin: 0 auto; padding-left: 13%; }
.arte-real .janela { border-radius: 9px; box-shadow: 0 26px 50px -24px rgb(0 0 0 / 0.9); transition: transform 0.7s var(--ease); }
.arte-real .janela__barra { height: 20px; gap: 4px; padding: 0 8px; }
.arte-real .janela__barra i { width: 5px; height: 5px; }
.arte-real .aparelho { left: 0; bottom: -14px; width: 26%; padding: 3px; border-radius: 13px; transition: transform 0.7s var(--ease); }
.arte-real .aparelho img { border-radius: 10px; }
.servico:hover .arte-real .janela { transform: translateY(-5px); }
.servico:hover .arte-real .aparelho { transform: translateY(-9px); }
.logo-cromo { grid-row: 1 / span 2; align-self: center; width: 104px; height: auto; filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.6)); }

/* O P cromado nas outras partes */
.manifesto__simbolo { width: auto; height: clamp(170px, 19vw, 250px); filter: drop-shadow(0 22px 26px rgb(14 16 20 / 0.28)); }
.contato__simbolo { width: auto; height: clamp(84px, 9vw, 112px); }

/* Estudo de caso com o mesmo fundo da entrada */
.caso-topo { position: relative; isolation: isolate; }
.caso-topo::before { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; height: 640px; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 68px 68px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 76%); mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 76%); pointer-events: none; }

/* ---------- 20b2. Acabamento geral ---------- */
html { scrollbar-color: #3A404A #0E1014; scrollbar-width: thin; interpolate-size: allow-keywords; }
.sobre__destaque { background: linear-gradient(180deg, #FFFFFF 20%, #B4BAC4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.campo :is(input, select, textarea) { transition: border-color 0.25s, box-shadow 0.25s; }
.campo :is(input, select, textarea):focus { border-color: #E9ECF1; box-shadow: 0 0 0 4px rgb(214 222 238 / 0.14), 0 0 26px -6px rgb(214 222 238 / 0.45); }
.menu::after { content: ''; position: absolute; right: -5%; bottom: -7%; width: min(68vw, 500px); aspect-ratio: 1100 / 1320; background: url('../img/p-cromo.webp') center / contain no-repeat; opacity: 0.14; pointer-events: none; }
.caso-proximo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; }
.caso-proximo__foto { display: block; width: clamp(96px, 24vw, 300px); overflow: hidden; border-radius: 10px; border: 1px solid var(--borda); }
.caso-proximo__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.8s var(--ease); }
.caso-proximo:hover .caso-proximo__foto img { transform: scale(1.05); }

/* ---------- 20b3. Mural de sites ---------- */
.mural { position: relative; overflow: hidden; padding-top: clamp(84px, 10vw, 130px); border-top: 1px solid var(--linha); }
.mural__cabeca { text-align: center; }
.mural__titulo { font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4.5rem); line-height: 1.04; letter-spacing: -0.045em; background: linear-gradient(180deg, #FFFFFF 20%, #AEB4BF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.08em; }
.mural__cabeca p { margin-top: 12px; font-size: 1.0625rem; }
.mural__palco { display: grid; gap: 16px; margin-top: clamp(44px, 6vw, 72px); transform: perspective(1500px) rotateX(13deg) rotateZ(-4deg) scale(1.14); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mural__trilho { display: flex; gap: 16px; width: max-content; }
.mural__trilho img { flex: none; width: clamp(230px, 27vw, 420px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--borda-forte); box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.9); }
.faixa-metal { overflow: hidden; margin-top: clamp(64px, 8vw, 110px); padding-block: 10px 26px; border-top: 1px solid var(--linha); }
.faixa-metal__trilho { display: flex; width: max-content; }
.faixa-metal span { padding-right: 0.3em; font: 400 clamp(3rem, 1rem + 8vw, 8.5rem)/1.16 var(--titulo); letter-spacing: -0.05em; white-space: nowrap; background: linear-gradient(180deg, #F4F6F9 12%, #7E848F 88%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@keyframes mural-corre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .mural__trilho { animation: mural-corre 110s linear infinite; }
  .mural__trilho--volta { animation-direction: reverse; }
  .faixa-metal__trilho { animation: mural-corre 46s linear infinite; }
}

/* ---------- 20c. Efeitos (só sem "reduzir movimento") ---------- */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  /* Reflexo que passa pelos títulos quando eles aparecem */
  .secao:not([data-tema]) .visivel .titulo-l, .secao:not([data-tema]) .visivel .titulo-xl, .secao:not([data-tema]) .titulo-l.visivel, .secao:not([data-tema]) .titulo-xl.visivel, .caso-topo h1.visivel { animation: titulo-brilho 1.7s var(--ease) 0.3s both; }
  /* Imagem dos projetos abre de cima para baixo, e o card inclina com o cursor */
  .js .projeto:not(.visivel) .projeto__imagem img { clip-path: inset(0 0 100% 0); }
  .projeto__imagem img { transition: transform 0.9s var(--ease), clip-path 1s var(--ease); }
  .js .projetos > .projeto.visivel:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .js .projetos > .projeto.visivel { transition: border-color 0.3s, translate 0.4s var(--ease), transform 0.25s ease-out; }
  /* Borda cromada girando no plano recomendado */
  .plano--destaque::after { background: conic-gradient(from var(--giro), #5F646D, #FFFFFF 12%, #8D939E 28%, #5F646D 50%, #FFFFFF 62%, #8D939E 78%, #5F646D); animation: plano-giro 7s linear infinite; }
  /* Os blocos de cada etapa acendem em sequência */
  .etapa.visivel .etapa__blocos i.on { animation: bloco-acende 0.5s var(--ease) both; }
  .etapa.visivel .etapa__blocos i.on:nth-child(2) { animation-delay: 0.15s; }
  .etapa.visivel .etapa__blocos i.on:nth-child(3) { animation-delay: 0.3s; }
  .etapa.visivel .etapa__blocos i.on:nth-child(4) { animation-delay: 0.45s; }
  /* Imagens entram suavemente */
  .js img[loading='lazy'] { opacity: 0; transition: opacity 0.6s var(--ease), transform 0.9s var(--ease), clip-path 1s var(--ease); }
  .js img[loading='lazy'].carregada { opacity: 1; }
  /* Menu com entrada em cascata */
  .js .menu__links a { opacity: 0; transform: translateY(20px); transition: color 0.2s, opacity 0.5s var(--ease), transform 0.6s var(--ease); }
  .menu-aberto .menu__links a { opacity: 1; transform: none; }
  .menu-aberto .menu__links a:nth-child(2) { transition-delay: 0s, 0.05s, 0.05s; }
  .menu-aberto .menu__links a:nth-child(3) { transition-delay: 0s, 0.1s, 0.1s; }
  .menu-aberto .menu__links a:nth-child(4) { transition-delay: 0s, 0.15s, 0.15s; }
  .menu-aberto .menu__links a:nth-child(5) { transition-delay: 0s, 0.2s, 0.2s; }
  .menu-aberto .menu__links a:nth-child(6) { transition-delay: 0s, 0.25s, 0.25s; }
  /* Respostas das dúvidas abrem suavemente */
  .duvida::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
  .duvida[open]::details-content { block-size: auto; }
  /* Transição entre páginas: a foto do projeto vira a capa do estudo de caso */
  @view-transition { navigation: auto; }
  .topo { view-transition-name: topo; }
  ::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
  /* O P cromado flutua */
  .manifesto__simbolo, .contato__simbolo { animation: p-flutua 7s ease-in-out infinite; }
  /* Linha de leitura no topo */
  .topo__barra::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #E9ECF1 18%, #8D939E); transform: scaleX(var(--leitura, 0)); transform-origin: left; pointer-events: none; }
}
@keyframes titulo-brilho { to { background-position: -60% 0, 0 0; } }
@keyframes plano-giro { to { --giro: 360deg; } }
@keyframes bloco-acende { from { opacity: 0.15; transform: scale(0.6); } }
@keyframes p-flutua { 50% { transform: translateY(-9px) rotate(-1.4deg); } }

/* ---------- 21. Animações de entrada e movimento reduzido ----------
   Só escondem com JS ativo e sem "reduzir movimento"; o main.js mostra cada bloco ao entrar na tela. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar], .js [data-revelar-grupo] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
  .js [data-revelar]:not(.visivel) { filter: blur(7px); }
  .js [data-revelar].visivel, .js [data-revelar-grupo] > .visivel { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .faixa-segmentos__trilho { flex-wrap: wrap; width: auto; justify-content: center; padding-inline: var(--margem); }
  .faixa-segmentos__trilho li[aria-hidden='true'] { display: none; }
}