/* ==========================================================================
   Rok Ads — sistema de design
   Paleta e tipografia de marca/design-guide.md.
   Um arquivo só, compartilhado pelas seis páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   --accent-text existe por motivo técnico: carmim #D91149 sobre #0A0A0A dá
   3,89:1 e reprova AA em texto pequeno. Carmim fica em preenchimento e
   display grande; texto pequeno de destaque usa --accent-text.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#0A0A0A;
  --surface:#141414;
  --surface-2:#1A1A1A;
  --line:#262626;
  --line-strong:#383838;
  --heading:#FFFFFF;
  --body:#E8E8E8;
  --muted:#9A9A9A;
  --accent:#D91149;
  --accent-hover:#C20E40;
  --accent-text:#FF3D6B;
  --vinho:#6A0827;
  --on-accent:#FFFFFF;
  --shade:rgba(255,255,255,.035);

  --display:'Sora',system-ui,-apple-system,sans-serif;
  --text:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --gap-section:clamp(72px,9vw,128px);
  --radius:16px;
  --radius-sm:10px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F2F2F2;
  --surface:#FFFFFF;
  --surface-2:#EAEAEA;
  --line:#E2E2E2;
  --line-strong:#CFCFCF;
  --heading:#0A0A0A;
  --body:#3A3A3A;
  --muted:#6B6B6B;
  --accent:#D91149;
  --accent-hover:#B80F3D;
  --accent-text:#A80D38;
  --shade:rgba(0,0,0,.025);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{font-family:var(--display);color:var(--heading);line-height:1.08;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:700;letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(1.75rem,3.4vw,2.65rem);letter-spacing:-.028em}
h3{font-size:clamp(1.3rem,2.1vw,1.7rem);letter-spacing:-.022em}
h4{font-size:1.0625rem;letter-spacing:-.01em}
p{margin-bottom:1.05em}
p:last-child{margin-bottom:0}
strong{color:var(--heading);font-weight:600}

:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   PRIMITIVAS
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap-section);position:relative}
.section-sm{padding-block:clamp(48px,6vw,80px)}
/* quando o hero acima já deu o respiro, não somar padding em cima */
.section-tight{padding-block:0 clamp(52px,6.5vw,88px)}
.rule{border-top:1px solid var(--line)}
.measure{max-width:62ch}
.measure-tight{max-width:52ch}
.shade{background:var(--shade)}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:1.4rem;
}
.eyebrow b{color:var(--accent-text);font-weight:500}
.lede{font-size:clamp(1.09rem,1.55vw,1.26rem);color:var(--body);line-height:1.6}
.note{font-family:var(--mono);font-size:.75rem;line-height:1.65;color:var(--muted)}
.note-b{color:var(--accent-text);font-weight:500}

/* rótulo de papel do serviço — corrige / constrói / traz / orienta */
.papel{
  display:inline-block;font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid var(--line-strong);
  border-radius:999px;padding:.42em .9em;
}

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */
/* Botão tem quatro estados visíveis: repouso, hover, foco e pressionado.
   Botão secundário ganha superfície própria, e não só borda, senão não lê
   como botão. Link continua parecendo link (sublinhado), botão parece botão. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:600;font-size:.9375rem;line-height:1;
  padding:.86em 1.35em;border-radius:9px;border:1px solid transparent;
  cursor:pointer;text-align:center;user-select:none;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{background:var(--accent-hover);transform:translateY(0) scale(.985)}

.btn-ghost{border-color:var(--line-strong);color:var(--heading);background:var(--surface-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text);background:var(--surface)}
.btn-ghost:active{transform:scale(.985)}

.btn-lg{font-size:1.0125rem;padding:1.02em 1.7em}
.btn-sm{font-size:.875rem;padding:.72em 1.1em}
/* estado de "trabalhando", pro clique não parecer que não fez nada */
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

.textlink{
  color:var(--muted);font-size:.9375rem;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.textlink:hover{color:var(--accent-text);border-bottom-color:var(--accent)}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.header.is-stuck{
  background:var(--bg);
  border-bottom-color:var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .header.is-stuck{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(140%) blur(14px)}
}
.header-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:74px}

.brand{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.03em;color:var(--heading);flex-shrink:0}
.brand i{color:var(--accent-text);font-style:normal}

.nav{display:none;align-items:center;gap:clamp(16px,2.4vw,30px);margin-left:auto}
.nav a{font-size:.9375rem;color:var(--muted);transition:color .18s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--heading)}
@media (min-width:900px){ .nav{display:flex} }

/* ---------- menu suspenso de Serviços ----------
   :focus-within junto de :hover faz o menu abrir também pelo teclado.
   Nielsen: reconhecer em vez de lembrar. Os quatro serviços ficam visíveis
   com o papél de cada um, em vez de escondidos atrás de um clique. */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a::after{
  content:"";width:0;height:0;margin-left:.42em;
  border:3.5px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);transition:transform .18s ease;
}
.nav-item:hover > a::after,.nav-item:focus-within > a::after{transform:translateY(2px) rotate(180deg)}
/* ponte invisível: sem ela o mouse "cai" no vão entre o link e o menu */
.nav-item::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:12px}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:252px;padding:.45rem;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .17s ease,transform .17s ease,visibility .17s;
}
:root[data-theme="light"] .dropdown{box-shadow:0 16px 40px rgba(0,0,0,.12)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown a{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.6rem .7rem;border-radius:8px;
  font-size:.9375rem;color:var(--heading);
  transition:background .15s ease;
}
.dropdown a:hover{background:var(--shade);color:var(--heading)}
.dd-papel{
  font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);
}
.dd-todos{
  border-top:1px solid var(--line);margin-top:.35rem;padding-top:.65rem;
  font-size:.875rem;color:var(--muted);
}
.dd-todos:hover{color:var(--heading)}

.header-act{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:900px){ .header-act{margin-left:0} }

.theme-btn{
  width:38px;height:38px;display:grid;place-items:center;flex-shrink:0;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;color:var(--muted);transition:color .18s ease,border-color .18s ease;
}
.theme-btn:hover{color:var(--heading);border-color:var(--line-strong)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}

/* um rótulo por vez: dois itens de flex herdariam o gap do .btn */
.header-act .btn{font-size:.8125rem;padding:.72em .95em}
.header-act .btn .long{display:none}
@media (min-width:520px){
  .header-act .btn{font-size:.875rem;padding:.72em 1.1em}
  .header-act .btn .long{display:inline}
  .header-act .btn .short{display:none}
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{padding-top:clamp(46px,7vw,92px);padding-bottom:clamp(44px,6vw,76px)}
.hero h1{max-width:22ch}
.hero .lede{margin-top:1.55rem;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,24px);margin-top:2.4rem}
.hero-sm h1{max-width:26ch;font-size:clamp(2rem,4.2vw,3.2rem)}

/* --------------------------------------------------------------------------
   FAIXA DE PAPÉIS (assinatura da home)
   Quatro colunas, sem seta e sem ponto: "orienta" não vem depois de "traz",
   e desenhar sequência aqui seria inventar informação.
   -------------------------------------------------------------------------- */
.papeis{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){ .papeis{grid-template-columns:repeat(4,1fr)} }
.papel-cel{background:var(--bg);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:.9rem}
.papel-cel .papel{align-self:flex-start}
.papel-nome{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--heading);letter-spacing:-.02em}
.papel-cel p{font-size:.9375rem;color:var(--muted);margin:0}
/* o botão desce pro rodapé da célula: quatro botões alinhados na mesma linha */
.papel-cel .btn{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   BLOCO DE PROBLEMA
   -------------------------------------------------------------------------- */
.problem h2{max-width:26ch}
.problem-body{margin-top:2.1rem}
.problem-punch{
  margin-top:2.3rem;padding-left:1.35rem;border-left:2px solid var(--accent);
  font-family:var(--display);font-size:clamp(1.18rem,2vw,1.46rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.35;color:var(--heading);
}

/* --------------------------------------------------------------------------
   QUADROS DE SERVIÇO (página /servicos)
   -------------------------------------------------------------------------- */
.quadros{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,52px)}
.quadro{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.2vw,40px);
  display:grid;gap:clamp(22px,3.2vw,48px);
  transition:border-color .2s ease;
  scroll-margin-top:100px;
}
@media (min-width:900px){ .quadro{grid-template-columns:5fr 7fr} }
.quadro:hover{border-color:var(--line-strong)}
.quadro-head{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.quadro-head h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.quadro-head p{color:var(--muted);font-size:1rem;margin:0}
.quadro-foot{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.quadro-preco{font-family:var(--mono);font-size:.8125rem;color:var(--heading)}
.quadro-preco span{color:var(--muted)}
/* a porta de entrada ganha destaque, senão a oferta mais fácil de vender se perde */
.quadro-destaque{border-left:2px solid var(--accent)}
.quadro .spec li:last-child{border-bottom:none}

/* --------------------------------------------------------------------------
   LISTAS DE ESPECIFICAÇÃO
   -------------------------------------------------------------------------- */
.spec{border-top:1px solid var(--line)}
/* Marcador em position:absolute, e NAO como item de grid. Com display:grid no
   <li>, todo <strong> ou <a> inline dentro dele virava um item de grid extra e
   jogava o resto do texto para a linha de baixo. */
.spec li{
  position:relative;padding:1rem 0 1rem 1.55rem;
  border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.6;
}
.spec li::before{
  content:"";position:absolute;left:0;top:1.65em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* passos numerados — só onde a sequência é real */
.steps{margin-top:2.8rem;border-top:1px solid var(--line)}
.step{display:grid;gap:.5rem 2rem;padding-block:clamp(22px,2.8vw,32px);border-bottom:1px solid var(--line)}
@media (min-width:820px){ .step{grid-template-columns:auto 15rem 1fr;align-items:baseline} }
.step-n{font-family:var(--mono);font-size:.8125rem;color:var(--accent-text);letter-spacing:.06em;font-weight:500}
.step h4{font-size:1.09rem}
.step p{font-size:.9688rem;color:var(--muted);margin:0}

/* --------------------------------------------------------------------------
   PÁGINAS DE SERVIÇO
   -------------------------------------------------------------------------- */
/* duas colunas assimétricas, o padrão de leitura do site */
.cols{display:grid;gap:clamp(26px,3.5vw,56px)}
@media (min-width:900px){ .cols{grid-template-columns:5fr 7fr} }

/* sintomas numerados: em vez de afirmar valor, o leitor se autodiagnostica */
.sintomas{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2.4rem}
@media (min-width:780px){ .sintomas{grid-template-columns:repeat(2,1fr)} }
.sintoma{background:var(--bg);padding:clamp(20px,2.4vw,28px);display:flex;gap:1.1rem;align-items:flex-start}
.sintoma-n{font-family:var(--mono);font-size:.75rem;color:var(--accent-text);font-weight:500;flex-shrink:0;padding-top:.25em}
.sintoma p{margin:0;font-size:.9688rem;line-height:1.6}

/* prazo declarado */
.prazo{
  margin-top:2.4rem;padding:clamp(22px,2.6vw,32px);
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline;
}
.prazo-n{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--heading);letter-spacing:-.03em;line-height:1.05}
.prazo-t{font-size:.9688rem;color:var(--muted);max-width:42ch}

/* preço */
.preco{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;align-items:baseline}
.preco-n{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--heading);letter-spacing:-.03em;line-height:1}
.preco-t{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   TRILHA DO CLIENTE (página da Auditoria)
   Trecho rastreado = linha cheia em carmim. Trecho às cegas = tracejado.
   A distinção carrega o argumento sem precisar de legenda.
   -------------------------------------------------------------------------- */
.trail{margin-top:clamp(30px,4vw,44px);max-width:880px}
.trail-graph{position:relative;padding-top:14px}
.trail-line{
  position:absolute;top:19px;left:12.5%;right:12.5%;height:1px;
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 5px,transparent 5px 11px);
}
.trail-line::after{content:"";position:absolute;inset:0 auto 0 0;width:33.333%;background:var(--accent)}
.trail-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.trail-step{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.trail-dot{width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);position:relative;z-index:1}
.trail-step.is-lit .trail-dot{background:var(--accent);border-color:var(--accent)}
.trail-name{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--muted)}
.trail-step.is-lit .trail-name{color:var(--heading)}
.trail-caption{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);max-width:62ch}

/* --------------------------------------------------------------------------
   QUEM TOCA
   -------------------------------------------------------------------------- */
.who{display:grid;gap:clamp(30px,4.5vw,62px)}
@media (min-width:940px){ .who{grid-template-columns:5fr 7fr} }
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,32px)}
.who-name{font-family:var(--display);font-weight:600;font-size:1.22rem;color:var(--heading);letter-spacing:-.02em}
.who-role{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em;margin-top:.45rem;display:block}
.who-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.who-links a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.who-links a:hover{color:var(--accent-text)}

/* --------------------------------------------------------------------------
   QUALIFICAÇÃO
   -------------------------------------------------------------------------- */
.fit{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2.5rem}
@media (min-width:820px){ .fit{grid-template-columns:1fr 1fr} }
.fit-col{background:var(--bg);padding:clamp(24px,3vw,34px)}
.fit-col h4{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.35rem}
.fit-yes h4{color:var(--accent-text)}
.fit-no h4{color:var(--muted)}
/* mesmo motivo do .spec li: marcador em absoluto, conteudo inline livre */
.fit-col li{position:relative;padding:.72rem 0 .72rem 1.5rem;font-size:.9688rem;line-height:1.55}
.fit-col li + li{border-top:1px solid var(--line)}
.fit-col li::before{position:absolute;left:0;top:.66rem;font-family:var(--mono);font-size:.9rem;line-height:1.6}
.fit-yes li::before{content:"+";color:var(--accent-text)}
.fit-no li::before{content:"–";color:var(--muted)}
.fit-no li{color:var(--muted)}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:1.1rem;cursor:pointer;list-style:none;
  padding-block:1.3rem;font-family:var(--display);font-weight:600;font-size:1.06rem;
  letter-spacing:-.015em;color:var(--heading);transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--accent-text);font-size:1.15rem;line-height:1.35;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq-a{padding-bottom:1.5rem;max-width:66ch;color:var(--muted);font-size:.9688rem}

/* --------------------------------------------------------------------------
   FORMULÁRIO
   -------------------------------------------------------------------------- */
.contact-in{display:grid;gap:clamp(32px,4.5vw,62px)}
@media (min-width:940px){ .contact-in{grid-template-columns:1fr 1fr;align-items:start} }
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:.82rem .95rem;font-size:.9688rem;transition:border-color .18s ease;
}
.field textarea{resize:vertical;min-height:80px;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--accent);outline-offset:1px}
/* o campo que faltou fica marcado, em vez de só um aviso genérico no fim */
.field [aria-invalid="true"]{border-color:var(--accent)}
.field label .opc{color:var(--muted);letter-spacing:.08em;text-transform:none;font-size:.6875rem}
.field select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* Campo-armadilha: invisível e fora da tabulação para gente, mas robô que só
   lê o HTML preenche tudo e se entrega. Não usar display:none, que alguns
   robôs detectam. O recorte abaixo esconde sem criar rolagem lateral. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.form .btn{width:100%;margin-top:.45rem}
.form-note{margin-top:1.05rem}
.form-err{display:none;margin-top:.85rem;font-family:var(--mono);font-size:.75rem;color:var(--accent-text)}
.form-err.is-on{display:block}

/* --------------------------------------------------------------------------
   FECHO + FOOTER
   -------------------------------------------------------------------------- */
.fecho h2{max-width:30ch}
.fecho-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}

.footer{border-top:1px solid var(--line);padding-block:clamp(38px,5vw,58px)}
.footer-in{display:flex;flex-wrap:wrap;gap:1.5rem 2.6rem;align-items:baseline}
.footer-in .brand{font-size:1.06rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem}
.footer-nav a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.footer-nav a:hover{color:var(--accent-text)}
.footer-links{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;margin-left:auto}
.footer-links a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.footer-links a:hover{color:var(--accent-text)}
.footer-legal{width:100%;padding-top:1.7rem;border-top:1px solid var(--line);margin-top:.5rem}

/* --------------------------------------------------------------------------
   MOVIMENTO — um efeito só
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.quadro:hover{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   CONSENTIMENTO DE COOKIES
   Barra no rodapé, injetada por assets/js/consent.js.

   Os dois botões têm o mesmo tamanho, o mesmo peso e o mesmo alcance de
   clique. Recusar escondido, apagado ou menor que aceitar é a irregularidade
   mais comum em banner de cookie e a mais fácil de autuar: o consentimento
   deixa de ser livre. O contraste entre eles é só de cor, para o olho achar o
   par, nunca de proeminência.
   -------------------------------------------------------------------------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 40px rgba(0,0,0,.28);
  transform:translateY(101%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"] .consent{box-shadow:0 -14px 40px rgba(0,0,0,.10)}
.consent.is-on{transform:translateY(0)}

.consent-in{
  max-width:var(--wrap);margin:0 auto;
  padding:1.15rem var(--pad);
  display:flex;align-items:center;gap:1.6rem;
}
.consent-txt{flex:1 1 auto;min-width:0}
.consent-txt p{margin:0;font-size:.875rem;line-height:1.55;color:var(--muted)}
.consent-txt p:first-child{color:var(--body);margin-bottom:.22rem}
.consent-txt strong{color:var(--heading);font-weight:600}
.consent-txt a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

.consent-btns{flex:0 0 auto;display:flex;gap:.6rem}
/* largura mínima igual nos dois: nenhum dos lados parece o caminho natural */
.consent-btns .btn{min-width:8.5rem;justify-content:center;font-size:.875rem;padding:.72em 1.1em}

@media (max-width:720px){
  .consent-in{flex-direction:column;align-items:stretch;gap:1rem;padding:1.1rem var(--pad)}
  .consent-btns{width:100%}
  /* no celular cada um fica com metade exata da largura */
  .consent-btns .btn{flex:1 1 0;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .consent{transition:none;transform:translateY(0)}
}