/* Estagiário do Pastor. Paleta de 21/09/2026.
   Tom sóbrio: muito espaço, títulos em caixa normal, vermelho só como detalhe.
   Anton fica restrito ao título do topo e aos números grandes. */
:root {
  --preto: #0D0D0D;
  --branco: #FFFFFF;
  --vermelho: #E50914;
  --vermelho-escuro: #B8070F;
  --amarelo: #FCFCA6;
  --marinho: #0D1B2A;
  --bone: #1E3A8A;
  --azul-claro: #3B82F6;
  --grafite: #1F1F1F;
  --cinza-escuro: #333333;
  --cinza: #B3B3B3;
  --gelo: #F5F5F5;
  --linha: #E3E3E3;
  --texto-suave: #5A5A5A;
  --titulo: "Anton", Impact, sans-serif;
  --texto: "Montserrat", system-ui, sans-serif;
  --largura: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--branco); color: var(--preto); font: 400 17px/1.7 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

h1 { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .98; font-size: clamp(3rem, 7.4vw, 6.4rem); margin: 0 0 .45em; }
h2 { font-family: var(--texto); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 0 .6em; max-width: 22ch; }
h3, .h3 { font-family: var(--texto); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; font-size: 1.15rem; margin: 0 0 .5em; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--branco); color: var(--preto); padding: 8px 14px; z-index: 50; }
.pular:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.aviso-dev { background: var(--grafite); color: var(--cinza); font-size: .75rem; text-align: center; padding: 6px 16px; letter-spacing: .02em; }

.largura { max-width: var(--largura); margin: 0 auto; padding: 0 32px; }
.largura-texto { max-width: 680px; }
.secao { padding: clamp(80px, 11vw, 144px) 0; }
.secao-clara { background: var(--gelo); }
.secao-escura { background: var(--marinho); color: var(--branco); }
.secao-escura h2 { color: var(--branco); }

.chapeu { display: flex; align-items: center; gap: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 26px; }
.chapeu::before { content: ""; width: 28px; height: 1px; background: var(--vermelho); }
.chapeu-claro { color: rgba(255,255,255,.62); }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.25rem); line-height: 1.6; max-width: 44ch; color: rgba(255,255,255,.78); font-weight: 400; }
.lead-escuro { font-size: 1.12rem; max-width: 54ch; color: var(--texto-suave); }

/* Botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 28px; border-radius: 2px; font-weight: 600; font-size: .9rem; letter-spacing: .02em; text-decoration: none; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.bt::after { content: "→"; transition: transform .25s ease; }
.bt:hover::after { transform: translateX(4px); }
.bt-vermelho { background: var(--vermelho); color: var(--branco); }
.bt-vermelho:hover { background: var(--vermelho-escuro); }
.bt-amarelo { background: var(--branco); color: var(--preto); }
.bt-amarelo:hover { background: var(--gelo); }
.bt-escuro { background: var(--preto); color: var(--branco); }
.bt-escuro:hover { background: var(--grafite); }
.bt-linha { border-color: rgba(255,255,255,.35); color: var(--branco); }
.bt-linha:hover { border-color: var(--branco); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(13,27,42,.97); backdrop-filter: blur(10px); color: var(--branco); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo-in { max-width: var(--largura); margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: .78rem; line-height: 1.15; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.75); }
.marca img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.marca b { display: block; color: var(--branco); font-weight: 700; }
.menu { display: flex; align-items: center; gap: 36px; }
.menu ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.menu ul a { text-decoration: none; font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.7); padding: 6px 0; transition: color .2s ease; }
.menu ul a:hover, .menu ul a[aria-current] { color: var(--branco); }
.menu ul a[aria-current] { box-shadow: inset 0 -1px 0 var(--vermelho); }
.menu .bt { min-height: 42px; padding: 10px 20px; font-size: .84rem; }
.menu .bt::after { display: none; }
.menu-bt { display: none; background: none; border: 1px solid rgba(255,255,255,.35); color: var(--branco); border-radius: 2px; padding: 8px 16px; font: 500 .85rem var(--texto); }

/* Hero */
.hero { background: var(--marinho); color: var(--branco); overflow: hidden; }
.hero-in { max-width: var(--largura); margin: 0 auto; padding: clamp(72px, 10vw, 128px) 32px 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; }
.hero-texto { padding-bottom: clamp(72px, 10vw, 128px); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-foto { position: relative; margin: 0 22px 56px auto; width: 100%; max-width: 440px; }
/* Moldura de visor de câmera: bloco azul deslocado atrás, cantos de enquadramento e o REC */
.visor { position: relative; isolation: isolate; }
.visor::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(30,58,138,.7), rgba(30,58,138,.2)); }
.visor img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 20%; }
.visor-canto { position: absolute; width: 34px; height: 34px; border-color: rgba(255,255,255,.9); border-style: solid; border-width: 0; }
.visor-canto--1 { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; }
.visor-canto--2 { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; }
.visor-canto--3 { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; }
.visor-canto--4 { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; }
.visor-rec { position: absolute; top: 24px; left: 60px; display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: var(--branco); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.visor-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 3px rgba(229,9,20,.25); animation: rec 2s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }
.hero-foto figcaption { position: relative; z-index: 1; margin-top: 44px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); padding-left: 16px; border-left: 2px solid var(--vermelho); }
.hero-in { align-items: center; }

/* Credenciais abaixo do topo */
.credenciais { background: var(--preto); color: rgba(255,255,255,.72); }
.credenciais ul { max-width: var(--largura); margin: 0 auto; padding: 26px 32px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: .86rem; }
.credenciais li { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18); }
.credenciais b { display: block; color: var(--branco); font-weight: 600; }

/* Listas em grade com linha fina no lugar de cartões */
.grade { display: grid; gap: 0 48px; margin-top: 56px; }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.cartao { position: relative; padding: 32px 0 40px; border-top: 1px solid var(--linha); }
.secao-escura .cartao { border-color: rgba(255,255,255,.14); }
.cartao p { color: var(--texto-suave); }
.secao-escura .cartao p { color: rgba(255,255,255,.7); }
.cartao p:last-child { margin-bottom: 0; }
.cartao-link { display: block; text-decoration: none; transition: border-color .3s ease; }
.cartao-link:hover { border-top-color: var(--vermelho); }
.cartao-link:hover h2, .cartao-link:hover h3 { color: var(--vermelho); }
.cartao-link h2, .cartao-link h3 { transition: color .25s ease; }
.mais { display: inline-block; margin-top: 18px; font-weight: 600; font-size: .84rem; letter-spacing: .02em; color: var(--preto); }
.mais::after { content: " →"; }
.num { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--vermelho); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.etiqueta { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); border: 1px solid var(--linha); padding: 3px 9px; margin-bottom: 16px; }
.etiqueta-rascunho { color: var(--vermelho); border-color: var(--vermelho); }
.cartao-destaque { background: var(--marinho); color: var(--branco); border: 0; padding: 40px 36px; }
.cartao-destaque p { color: rgba(255,255,255,.75); }
.cartao-destaque .mais { color: var(--branco); }

/* Ciclo */
.ciclo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.ciclo > div p { color: rgba(255,255,255,.72); max-width: 42ch; }
.ciclo-passos { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.ciclo-passos li { counter-increment: c; position: relative; padding: 22px 0 22px 56px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.ciclo-passos li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ciclo-passos li::before { content: "0" counter(c); position: absolute; left: 0; top: 24px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--vermelho); }
.ciclo-passos b { color: var(--branco); font-weight: 600; }

/* Passos */
.passos { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 32px; }
.passos li { padding-top: 28px; border-top: 1px solid var(--cinza); }
.passos h3 { font-size: 1.02rem; }
.passos p { font-size: .93rem; margin: 0; color: var(--texto-suave); }

/* Cases */
.case-rotulo { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.case-numero { font-size: .98rem; color: var(--texto-suave); }
.case-numero s, .case-grande s { text-decoration: none; }
.case-numero b { display: block; font-family: var(--titulo); font-weight: 400; font-size: 3.2rem; line-height: 1.05; color: var(--preto); margin: 10px 0 2px; letter-spacing: .01em; }
.case-grande { font-size: 1.05rem; color: var(--texto-suave); margin-bottom: 2em; }
.case-grande b { display: block; font-family: var(--titulo); font-weight: 400; font-size: clamp(3.4rem, 9vw, 6rem); line-height: 1; color: var(--preto); margin: 8px 0; }
.citacao { margin: 2em 0 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--vermelho); font-size: 1.45rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }

/* Sobre */
.sobre-resumo, .sobre-abre { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.sobre-resumo img, .sobre-abre img { aspect-ratio: 4/5; object-fit: cover; filter: saturate(.85); }
.sobre-resumo p { color: var(--texto-suave); }
.linha-tempo { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 40px; }
.linha-tempo li { padding-top: 24px; border-top: 1px solid var(--cinza); }
.linha-tempo h3 { font-size: 1.05rem; }
.linha-tempo p { font-size: .93rem; color: var(--texto-suave); }
.quando { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vermelho); margin-bottom: 10px; }

/* Materiais */
.lista-materiais { list-style: none; margin: 48px 0 44px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.lista-materiais a { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--cinza); text-decoration: none; font-weight: 500; transition: color .2s ease; }
.lista-materiais a:hover { color: var(--vermelho); }
.mat-num { flex: none; min-width: 5.5em; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vermelho); }
.material .mat-num { display: block; margin-bottom: 14px; }

/* FAQ */
.faq { margin-top: 40px; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 48px 26px 0; font-weight: 500; font-size: 1.06rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 34px; width: 9px; height: 9px; border-right: 1.5px solid var(--preto); border-bottom: 1.5px solid var(--preto); transform: rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 38px; }
.faq details p { padding-bottom: 26px; color: var(--texto-suave); max-width: 62ch; }

/* Serviço */
.servico { display: grid; grid-template-columns: 1.4fr .8fr; gap: 80px; align-items: start; }
.servico h2 { font-size: 1.5rem; margin-top: 1.8em; }
.servico h2:first-child { margin-top: 0; }
.servico p { color: var(--texto-suave); }
.lista { padding-left: 0; list-style: none; margin: 0; }
.lista li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid var(--linha); color: var(--texto-suave); }
.lista li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 12px; height: 1px; background: var(--vermelho); }
.servico aside { position: sticky; top: 110px; }
.palavra { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); margin: 14px 0 0; }
.cartao-destaque .palavra { color: rgba(255,255,255,.55); }
.palavra b { color: var(--preto); letter-spacing: .1em; }
.palavra-grande { font-family: var(--titulo); font-size: 3rem; line-height: 1; letter-spacing: .02em; color: var(--branco); margin: 6px 0 22px; }
.preco { font-weight: 600; font-size: 1.05rem; color: var(--preto); }
.cartao-destaque .preco { color: var(--branco); }

/* Cabeça das páginas internas */
.cabeca { background: var(--marinho); color: var(--branco); padding: clamp(80px, 10vw, 128px) 0 clamp(64px, 8vw, 96px); }
.cabeca h1 { font-size: clamp(2.8rem, 6vw, 5rem); }

/* Chamada final */
.cta-final { background: var(--preto); color: var(--branco); padding: clamp(88px, 11vw, 144px) 0; }
.cta-final .largura { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: center; }
.cta-final h2 { color: var(--branco); }
.cta-foto { margin: 0; position: relative; padding: 0 0 18px 18px; }
.cta-foto::before { content: ""; position: absolute; left: 0; bottom: 0; top: 18px; right: 18px; border: 1px solid rgba(229,9,20,.6); }
.cta-foto img { position: relative; aspect-ratio: 4/5; object-fit: cover; object-position: top; filter: saturate(.85); }
.cta-final p { color: rgba(255,255,255,.7); max-width: 46ch; margin-bottom: 28px; }

/* Lema e rodapé */
.missao { background: var(--preto); color: var(--branco); padding: 0 0 72px; }
.missao p { max-width: var(--largura); margin: 0 auto; padding: 48px 32px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.missao em { font-style: normal; color: var(--vermelho); }
.rodape { background: var(--preto); color: rgba(255,255,255,.6); font-size: .88rem; }
.rodape-in { max-width: var(--largura); margin: 0 auto; padding: 0 32px 48px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.redes { display: flex; gap: 10px; margin-top: 18px; }
.redes-item { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; transition: filter .2s ease, transform .2s ease; }
.redes-item svg { width: 18px; height: 18px; }
.redes-item:hover { filter: brightness(1.1); transform: translateY(-2px); }
.redes-item--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.redes-item--whatsapp { background: #25D366; }
.rodape-marca { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--branco); margin-bottom: 10px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; }
.rodape a { text-decoration: none; transition: color .2s ease; }
.rodape a:hover { color: var(--branco); }
.rodape-pe { max-width: var(--largura); margin: 0 auto; padding: 22px 32px 30px; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: rgba(255,255,255,.4); }

/* Tablet */
@media (max-width: 1080px) {
  .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .linha-tempo { grid-template-columns: repeat(2, 1fr); }
  .credenciais ul { grid-template-columns: repeat(2, 1fr); }
}

/* Celular */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .largura, .topo-in, .hero-in, .credenciais ul, .rodape-in, .rodape-pe { padding-left: 20px; padding-right: 20px; }
  .missao p { padding-left: 20px; padding-right: 20px; }
  .menu-bt { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--marinho); flex-direction: column; align-items: stretch; padding: 8px 20px 24px; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .menu.aberto { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .hero-in { grid-template-columns: 1fr; gap: 0; }
  .hero-texto { padding-bottom: 40px; }
  .hero-foto { margin: 0 auto 56px; max-width: 340px; padding-right: 22px; }
  .cta-foto { max-width: 300px; }
  .grade-2, .grade-3, .grade-4, .passos, .lista-materiais, .credenciais ul { grid-template-columns: 1fr; }
  .grade { margin-top: 36px; }
  .ciclo, .sobre-resumo, .sobre-abre, .servico, .cta-final .largura { grid-template-columns: 1fr; gap: 40px; }
  .linha-tempo { grid-template-columns: 1fr; gap: 32px; }
  .servico aside { position: static; }
  .acoes .bt { flex: 1 1 100%; }
}

/* ===== Camada de impacto (03/10/2026) =====
   Movimento contido: aparece em cascata na rolagem, números contam, o lema acende palavra por palavra.
   Tudo some com prefers-reduced-motion e sem JavaScript o conteúdo aparece normal. */

/* Ajustes da revisão Vercel */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
[id] { scroll-margin-top: 96px; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(229,9,20,.15); }

/* Grão nas seções escuras, para tirar o chapado do digital */
.hero, .secao-escura, .cta-final, .manifesto, .cabeca, .proximo-case { position: relative; isolation: isolate; }
.hero::after, .secao-escura::after, .cta-final::after, .manifesto::after, .cabeca::after, .proximo-case::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.hero { background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(30,58,138,.55), transparent 70%), var(--marinho); }

/* Palavra de destaque do título: sublinhado vermelho que se desenha */
.destaque { position: relative; display: inline-block; }
.destaque::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--vermelho); transform-origin: left; transform: scaleX(1); }
.js .destaque::after { transform: scaleX(0); animation: risco .9s cubic-bezier(.65,0,.35,1) .7s forwards; }
@keyframes risco { to { transform: scaleX(1); } }

/* Aparecer na rolagem */
.js [data-revela], .js [data-revela-grupo] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0s); }
.js [data-revela].visivel, .js [data-revela-grupo].visivel > * { opacity: 1; transform: none; }

/* Dores com número grande vazado */
.dores .num { font-family: var(--titulo); font-weight: 400; font-size: 4.2rem; line-height: 1; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px var(--vermelho); margin-bottom: 22px; }

/* Lema em tela cheia: as palavras acendem com a rolagem */
.manifesto { background: var(--preto); color: var(--branco); padding: clamp(120px, 18vw, 240px) 32px; overflow: hidden; }
.manifesto-frase { max-width: var(--largura); margin: 0 auto; font-family: var(--titulo); font-weight: 400; text-transform: uppercase; line-height: 1.16; font-size: clamp(3.4rem, 11vw, 10rem); letter-spacing: .005em; }
.manifesto-frase span { display: inline-block; transition: color .6s ease; }
.js .manifesto-frase span { color: rgba(255,255,255,.1); }
.js .manifesto-frase span.acesa { color: var(--branco); }
.manifesto-frase em { font-style: normal; color: var(--vermelho); }

/* Ciclo em roda */
.roda { display: block; width: 100%; max-width: 420px; margin-top: 48px; overflow: visible; }
.roda-trilho { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.roda-arco { fill: none; stroke: var(--vermelho); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 200px 200px; }
.js .roda-arco { stroke-dashoffset: 100; transition: stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1); }
.js .ciclo.visivel .roda-arco { stroke-dashoffset: 0; }
.roda-no circle { fill: var(--marinho); stroke: rgba(255,255,255,.5); stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; }
.roda-no text { fill: rgba(255,255,255,.55); font: 600 15px var(--texto); letter-spacing: .04em; transition: fill .4s ease; }
.roda-no.ativo circle { fill: var(--vermelho); stroke: var(--vermelho); }
.roda-no.ativo text { fill: var(--branco); }
.roda-orbita { transform-origin: 200px 200px; transition: transform 1.1s cubic-bezier(.65,0,.35,1); }
.roda-orbita circle { fill: var(--branco); }
.ciclo-passos li { transition: color .4s ease, background-color .4s ease; }
.ciclo-passos li::after { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 2px; background: var(--vermelho); transform: scaleY(0); transition: transform .4s ease; }
.ciclo-passos li.ativo { color: var(--branco); background: linear-gradient(90deg, rgba(229,9,20,.12), transparent 70%); }
.ciclo-passos li.ativo::after { transform: scaleY(1); }

/* Passos: a linha de cima se desenha */
.passos li { position: relative; border-top-color: transparent; }
.passos li::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--cinza); transform-origin: left; }
.passos li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); }
.js .passos li::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.65,0,.35,1); transition-delay: var(--atraso, 0s); }
.js .passos.visivel li::before { transform: scaleX(1); }

/* Na página inicial o lema já aparece grande, então o rodapé começa direto */
.home .rodape-in { padding-top: 64px; }
.home .rodape { border-top: 1px solid rgba(255,255,255,.1); }

/* Números que contam */
[data-conta] { font-variant-numeric: tabular-nums; }

/* Foto do sobre com moldura deslocada, como a do topo */
.sobre-resumo img { box-shadow: 22px 22px 0 -1px var(--gelo), 22px 22px 0 0 var(--cinza); }

/* ===== Páginas internas ===== */
.cabeca { background: radial-gradient(ellipse 55% 90% at 85% 30%, rgba(30,58,138,.5), transparent 70%), var(--marinho); overflow: hidden; }
.cabeca h1 { position: relative; padding-bottom: .28em; }
.cabeca h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.6em; height: .07em; min-height: 4px; background: var(--vermelho); transform-origin: left; }
.js .cabeca h1::after { transform: scaleX(0); animation: risco .9s cubic-bezier(.65,0,.35,1) .5s forwards; }

/* Números grandes vazados também em serviços e materiais */
.num-grande, .materiais-lista .mat-num { display: block; font-family: var(--titulo); font-weight: 400; font-size: 3.6rem; line-height: 1; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px var(--vermelho); margin-bottom: 18px; min-width: 0; }

/* Linha do tempo: a linha se desenha e ganha um ponto, como os passos */
.linha-tempo li { position: relative; border-top-color: transparent; }
.linha-tempo li::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--cinza); transform-origin: left; }
.linha-tempo li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); }
.js .linha-tempo li::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.65,0,.35,1); transition-delay: var(--atraso, 0s); }
.js .linha-tempo.visivel li::before { transform: scaleX(1); }
.sobre-abre img { box-shadow: 22px 22px 0 -1px var(--branco), 22px 22px 0 0 var(--cinza); }

/* Cartão de serviço do lado: grão e um brilho discreto */
.cartao-destaque { position: relative; isolation: isolate; overflow: hidden; }
.cartao-destaque::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 0%, rgba(229,9,20,.18), transparent 55%); }

/* Cases com o print do perfil */
.cases-grade { gap: 64px 48px; }
.case-cartao { display: block; text-decoration: none; color: inherit; }
.case-print { margin: 0 0 28px; position: relative; background: var(--branco); border: 1px solid var(--linha); overflow: hidden; }
.case-print img { width: 100%; aspect-ratio: 1000/680; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.case-cartao:hover .case-print img { transform: scale(1.03); }
.case-cartao h2, .case-cartao h3 { transition: color .25s ease; }
.case-cartao:hover h2, .case-cartao:hover h3 { color: var(--vermelho); }
.case-cartao .case-numero b { font-size: 3.6rem; }
.case-pagina { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.case-print--grande { margin: 8px 22px 0 0; overflow: visible; border: 0; background: none; }
.case-print--grande img { border: 1px solid var(--linha); box-shadow: 22px 22px 0 -1px var(--branco), 22px 22px 0 0 var(--vermelho); }
.case-print--grande figcaption { margin-top: 40px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); padding-left: 14px; border-left: 2px solid var(--vermelho); }
.case-print--grande a { color: var(--preto); font-weight: 600; text-decoration: none; }
.case-print--grande a:hover { color: var(--vermelho); }
.proximo-case { background: var(--marinho); color: var(--branco); }
.proximo-case a { display: block; padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); text-decoration: none; }
.proximo-case .chapeu { margin-bottom: 14px; }
.proximo-nome { display: inline-flex; align-items: center; gap: .4em; font-family: var(--titulo); text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.1; }
.proximo-nome::after { content: "→"; font-family: var(--texto); font-size: .6em; color: var(--vermelho); transition: transform .3s ease; }
.proximo-case a:hover .proximo-nome::after { transform: translateX(10px); }

/* Contato: o WhatsApp como peça principal */
.contato-lista .cartao { padding: 44px 40px; border: 1px solid var(--linha); }
.contato-lista .cartao-destaque { border: 0; }
.contato-lista .h3 { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; font-size: 2.6rem; letter-spacing: .01em; line-height: 1; margin-bottom: .4em; }

/* 404 */
.erro-num { font-family: var(--titulo); font-size: clamp(7rem, 24vw, 18rem); line-height: .9; margin: 0 0 32px; color: transparent; -webkit-text-stroke: 1px var(--vermelho); }

@media (max-width: 820px) {
  .manifesto { padding-left: 20px; padding-right: 20px; }
  .ciclo-passos li::after { left: -12px; }
  .case-pagina { grid-template-columns: 1fr; gap: 48px; }
  .case-print--grande { margin-right: 14px; }
  .case-print--grande img { box-shadow: 14px 14px 0 -1px var(--branco), 14px 14px 0 0 var(--vermelho); }
  .sobre-abre img { box-shadow: 14px 14px 0 -1px var(--branco), 14px 14px 0 0 var(--cinza); margin-right: 14px; }
  .contato-lista .cartao { padding: 32px 24px; }
  .num-grande, .materiais-lista .mat-num { font-size: 2.8rem; }
  .roda { max-width: 320px; margin: 32px auto 0; }
  .dores .num { font-size: 3.2rem; }
  .sobre-resumo img { box-shadow: 14px 14px 0 -1px var(--gelo), 14px 14px 0 0 var(--cinza); margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-revela], .js [data-revela-grupo] > * { opacity: 1; transform: none; }
  .js .destaque::after, .js .passos li::before, .js .linha-tempo li::before, .js .cabeca h1::after { transform: scaleX(1); }
  .js .roda-arco { stroke-dashoffset: 0; }
  .js .manifesto-frase span { color: var(--branco); }
}

.material-status { display: block; font: 700 .72rem Montserrat, sans-serif; text-transform: uppercase; margin-top: .4rem; opacity: .65; }
.material-dialog { border: 0; border-top: 5px solid #c62828; padding: 2.5rem; color: #0d1b2a; background: #fff; width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; }
.material-dialog::backdrop { background: rgb(13 27 42 / .8); }
.material-dialog h2 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; margin-bottom: 1rem; }
.material-dialog p { margin-bottom: 1.3rem; }
.material-dialog-close { position: absolute; top: .5rem; right: .75rem; border: 0; background: transparent; font-size: 2rem; cursor: pointer; padding: .25rem .75rem; }
.material-dialog-selected { font-weight: 700; }
.material-dialog-note { font-size: .8rem; margin-top: 1.25rem; }
@media (max-width: 480px) { .material-dialog { padding: 2.2rem 1.25rem 1.25rem; } .material-dialog .bt { width: 100%; text-align: center; } }

.material-dialog [hidden] { display: none !important; }
.material-dialog [data-material-confirmar] { margin-top: .75rem; }