/* O @import daqui foi para um <link> no base.html: importação em cascata é serial —
   o navegador só descobria fonts.css depois de baixar e interpretar este arquivo,
   somando uma viagem inteira antes de qualquer fonte começar a chegar. */

/* ═══════════════════════════════════════════════════════════════════════════
   AUSPÍCIO — sistema visual
   Conceito: Instituto de Registro Celeste. Documento, gravura, instrumento de
   precisão. A confiança vem da sobriedade: filete em vez de sombra, tinta em
   vez de gradiente, latão só onde algo foi de fato verificado.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F4F0E8; --paper-2:#EBE5D8; --paper-3:#E2DACA;
  --ink:#14161C; --ink-2:#535867; --ink-3:#5A606D;
  --indigo:#1B2A4A; --indigo-2:#2B4272; --indigo-soft:#E8EAF0;
  --night:#0B0E14; --night-2:#151A25;
  --brass:#9C7A3E; --brass-2:#C4A263; --brass-soft:#F0E6D0;
  /* latão para TEXTO: o tom decorativo (#9C7A3E) só dá 3.5:1 sobre papel */
  --brass-text:#775B29;
  --good:#3F6247; --good-soft:#E4EDE4;
  --mixed:#8A6D2F;
  --warn:#94502F; --warn-soft:#F5E4DB;
  --line:rgba(20,22,28,.13); --line-2:rgba(20,22,28,.07);

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --w:1180px; --w-read:680px;
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:17px; line-height:1.62;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--indigo-2); text-decoration:none; text-underline-offset:.18em}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--indigo-2); outline-offset:3px; border-radius:2px}
::selection{background:var(--brass-soft); color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

/* ── Tipografia ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600; color:var(--indigo);
  line-height:1.12; letter-spacing:-.014em; margin:0 0 .5em;
  font-variation-settings:'opsz' 96;
}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:600; font-variation-settings:'opsz' 144}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:clamp(1.14rem,2vw,1.32rem); font-variation-settings:'opsz' 40}
h4{font-size:1.02rem; font-family:var(--font-ui); font-weight:600; letter-spacing:0}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.06rem,1.9vw,1.24rem); color:var(--ink-2); line-height:1.58; max-width:60ch}
.serif{font-family:var(--font-display)}
strong{font-weight:600}
small{font-size:.86rem}

.eyebrow{
  font-family:var(--font-ui); font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:120px}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:""; flex:1; height:1px; background:var(--line); max-width:120px}
.mono{font-family:var(--font-mono); font-size:.86em; letter-spacing:-.02em}

/* ── Estrutura ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--w); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem)}
.read{max-width:var(--w-read)}
form.read,.read-center{margin-left:auto; margin-right:auto}
section{padding:clamp(3.4rem,7vw,6rem) 0}
.section-tight{padding:clamp(2.2rem,4vw,3.4rem) 0}

/* textura: a grade do templum — o campo celeste que o áugure demarcava */
.templum{position:relative; isolation:isolate}
.templum::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-2) 1px,transparent 1px);
  background-size:clamp(60px,8vw,96px) clamp(60px,8vw,96px);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 78%);
}

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(244,240,232,.93);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.site-head .bar{display:flex; align-items:center; gap:1.6rem; height:66px}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--indigo); flex-shrink:0}
.brand:hover{text-decoration:none}
.brand svg{width:29px; height:29px}
.brand b{
  font-family:var(--font-display); font-size:1.24rem; font-weight:600;
  letter-spacing:.02em; font-variation-settings:'opsz' 40;
}
.nav{display:flex; gap:1.5rem; margin-left:auto; align-items:center; flex-shrink:0}
.nav a{
  color:var(--ink-2); font-size:.895rem; font-weight:500; padding:.3rem 0;
  border-bottom:1.5px solid transparent; white-space:nowrap;
}
.nav a:hover,.nav a[aria-current]{color:var(--indigo); border-color:var(--brass); text-decoration:none}
/* `.nav a` tem especificidade maior que `.btn-*` e sobrescrevia a cor do botão.
   Sem isto, o CTA do cabeçalho fica cinza sobre azul-escuro (contraste 2:1). */
.nav a.btn{border-bottom-color:transparent}
.nav a.btn-primary{color:var(--paper)}
.nav a.btn-primary:hover{color:var(--paper); border-color:var(--indigo-2)}
.nav a.btn-ghost{color:var(--indigo)}
.nav a.btn-brass{color:#fff}
.nav-cta{margin-left:.4rem}
.burger{display:none; margin-left:auto; background:none; border:1px solid rgba(20,22,28,.55);
  border-radius:var(--r); padding:.45rem .6rem; cursor:pointer}
.burger span{display:block; width:19px; height:1.6px; background:var(--indigo); margin:3.5px 0}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-ui); font-size:.9rem; font-weight:600; letter-spacing:.005em;
  padding:.72rem 1.35rem; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:all .18s var(--ease); text-align:center; line-height:1.2;
  white-space:nowrap; flex-shrink:0;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--indigo); color:var(--paper); border-color:var(--indigo)}
.btn-primary:hover{background:var(--indigo-2); border-color:var(--indigo-2)}
/* A borda era `--line` (rgba(20,22,28,.13)) = 1,30:1 contra o papel: um botão que
   mal se vê. WCAG 1.4.11 pede 3:1 para componente; .55 dá 3,87:1. */
.btn-ghost{background:transparent; color:var(--indigo); border-color:rgba(20,22,28,.55)}
.btn-ghost:hover{border-color:var(--indigo); background:rgba(27,42,74,.04)}
.btn-brass{background:#80622D; color:#fff; border-color:#80622D}
.btn-brass:hover{background:#6E5426; border-color:#6E5426}
.btn-lg{padding:.92rem 1.8rem; font-size:.97rem}
.btn-sm{padding:.44rem .85rem; font-size:.81rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ── Selos e etiquetas ──────────────────────────────────────────────────── */
.seal{
  display:inline-flex; align-items:center; gap:.42rem; font-size:.76rem; font-weight:600;
  letter-spacing:.028em; padding:.3rem .62rem; border-radius:2px; border:1px solid;
  white-space:nowrap; line-height:1.3;
}
.seal svg{width:13px; height:13px; flex-shrink:0}
/* latão = verificado. Nunca usar latão para outra coisa. */
.seal-verified{color:var(--brass-text); border-color:rgba(156,122,62,.42); background:var(--brass-soft)}
.seal-identity{color:var(--indigo); border-color:rgba(27,42,74,.28); background:var(--indigo-soft)}
.seal-neutral{color:var(--ink-2); border-color:var(--line); background:var(--paper-2)}
.seal-good{color:var(--good); border-color:rgba(63,98,71,.3); background:var(--good-soft)}
.seal-warn{color:var(--warn); border-color:rgba(148,80,47,.32); background:var(--warn-soft)}
.seal-lg{font-size:.83rem; padding:.42rem .82rem}

/* ── Registro: o "card" desta marca. Filete no topo, sem sombra. ────────── */
.record{
  background:#FBF9F5; border:1px solid var(--line); border-top:2px solid var(--indigo);
  border-radius:0 0 var(--r) var(--r); padding:1.5rem 1.6rem; position:relative;
}
.record-plain{border-top-color:var(--line); background:transparent}
.record-brass{border-top-color:var(--brass)}
a.record{display:block; color:inherit; transition:border-color .18s var(--ease),
  background .18s var(--ease), transform .18s var(--ease)}
a.record:hover{text-decoration:none; background:#fff; border-color:rgba(20,22,28,.24);
  transform:translateY(-2px)}

.grid{display:grid; gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Linha final incompleta parece carregamento que falhou — é o mesmo problema que a
   vitrine da home teve com cinco cartões numa grade de três. Quando a contagem não
   fecha, o último item ocupa a linha inteira em vez de deixar um buraco ao lado.
   `:nth-last-child(1)` combinado com `:nth-child(odd)` identifica o ímpar sobrando. */
.g2 > :last-child:nth-child(odd){grid-column:1 / -1}
.g3 > :last-child:nth-child(3n+1){grid-column:1 / -1}

/* ── Bloco de nota — a peça central da marca ────────────────────────────── */
.score{display:flex; align-items:baseline; gap:.28rem; font-family:var(--font-display)}
.score-n{
  font-size:clamp(2.8rem,6.5vw,4.2rem); font-weight:600; line-height:.92;
  letter-spacing:-.035em; font-variation-settings:'opsz' 144; color:var(--indigo);
}
.score-d{font-size:1.05rem; color:var(--ink-3); font-weight:400}
.score.tone-good .score-n{color:var(--good)}
.score.tone-mixed .score-n{color:var(--mixed)}
.score.tone-warn .score-n{color:var(--warn)}
.score.tone-neutral .score-n{color:var(--ink-3)}
.score-sm .score-n{font-size:2rem; font-variation-settings:'opsz' 60}
.score-xs .score-n{font-size:1.5rem; font-variation-settings:'opsz' 40}

.metrics{display:grid; gap:.85rem; margin:1.4rem 0 0}
.metric{display:grid; grid-template-columns:1fr auto; gap:.5rem .9rem; align-items:center}
.metric-label{font-size:.87rem; color:var(--ink-2); line-height:1.35}
.metric-val{font-family:var(--font-display); font-weight:600; font-size:1.06rem;
  font-variation-settings:'opsz' 30; color:var(--indigo)}
/* Chamava-se `.bar` e colidia com o `.bar` do cabeçalho (`<div class="wrap bar">`):
   o cabeçalho herdava daqui o fundo `--paper-3` e ficava com a cor desta barrinha
   de 3px, cobrindo só os 1180px do `.wrap` — duas faixas claras nas pontas, como
   se a barra do topo não encaixasse na janela. */
.metric-bar{grid-column:1/-1; height:3px; background:var(--paper-3);
  border-radius:2px; overflow:hidden}
.metric-bar>i{display:block; height:100%; background:var(--indigo); border-radius:2px}
.metric-bar.good>i{background:var(--good)} .metric-bar.warn>i{background:var(--warn)}
.metric-bar.mixed>i{background:var(--mixed)}

/* ── Avaliação ──────────────────────────────────────────────────────────── */
.review{padding:1.7rem 0; border-bottom:1px solid var(--line)}
.review:last-child{border-bottom:0}
.review-head{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.75rem}
.review-who{font-weight:600; font-size:.93rem; color:var(--ink)}
.review-meta{font-size:.8rem; color:var(--ink-3); margin-left:auto; white-space:nowrap}
.review-body{font-family:var(--font-display); font-size:1.045rem; line-height:1.66;
  color:var(--ink); font-variation-settings:'opsz' 14; max-width:66ch}
.review-facts{display:flex; flex-wrap:wrap; gap:.4rem; margin:.95rem 0 0}
.fact{font-size:.755rem; padding:.24rem .55rem; border-radius:2px; border:1px solid var(--line);
  color:var(--ink-2); background:var(--paper-2); letter-spacing:.01em}
.fact.yes{color:var(--good); border-color:rgba(63,98,71,.26); background:var(--good-soft)}
.fact.no{color:var(--warn); border-color:rgba(148,80,47,.26); background:var(--warn-soft)}

/* resposta do profissional: recuada, filete lateral de latão */
.reply{margin:1.1rem 0 0 0; padding:1rem 1.2rem; background:var(--paper-2);
  border-left:2px solid var(--brass); border-radius:0 var(--r) var(--r) 0}
.reply-head{font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brass-text); margin-bottom:.45rem}
.reply p{margin:0; font-size:.94rem; color:var(--ink-2)}

/* ── Formulários ────────────────────────────────────────────────────────── */
.field{margin-bottom:1.25rem}
.field label{display:block; font-size:.855rem; font-weight:600; margin-bottom:.4rem; color:var(--ink)}
.field .hint{font-size:.79rem; color:var(--ink-3); margin:.3rem 0 0; font-weight:400; line-height:1.45}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],
input[type=number],select,textarea{
  width:100%; font-family:var(--font-ui); font-size:.96rem; color:var(--ink);
  /* A borda era rgba(20,22,28,.2) — 1,53:1 contra o papel. A WCAG 1.4.11 pede 3:1
     para componente de interface, e com razão: abaixo disso quem tem baixa visão não
     enxerga onde o campo começa e termina. Medido: .55 dá 3,87:1. Nenhuma bateria
     pegava, porque todas mediam contraste de TEXTO, não de componente. */
  padding:.66rem .8rem; background:#FFFDFA; border:1px solid rgba(20,22,28,.55);
  border-radius:var(--r); transition:border-color .16s,box-shadow .16s;
}
textarea{font-family:var(--font-display); font-size:1rem; line-height:1.6; resize:vertical;
  min-height:150px; font-variation-settings:'opsz' 14}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--indigo-2); box-shadow:0 0 0 3px rgba(43,66,114,.12)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23535867' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:11px;
  padding-right:2.2rem; cursor:pointer}

/* escolha binária / escala — bloco de resposta estruturada */
.choice{display:flex; gap:.5rem; flex-wrap:wrap}
.choice input{position:absolute; opacity:0; width:0; height:0}
/* São os elementos mais tocados do produto: dez perguntas, duas ou três opções cada,
   e é aqui que o dado nasce. Tinham 41px de altura (o alvo confortável é 44) e borda
   de 1,53:1 contra o papel — a mesma borda invisível dos campos. */
.choice label{
  display:inline-flex; align-items:center; justify-content:center; margin:0; cursor:pointer;
  min-height:44px; padding:.5rem 1rem; border:1px solid rgba(20,22,28,.55);
  border-radius:var(--r);
  font-size:.885rem; font-weight:500; background:#FFFDFA; transition:all .15s var(--ease);
}
.choice label:hover{border-color:var(--indigo-2)}
.choice input:checked+label{background:var(--indigo); color:var(--paper); border-color:var(--indigo)}
.choice input:focus-visible+label{outline:2px solid var(--indigo-2); outline-offset:2px}
/* Onze opções (0 a 10) não fecham em grade nenhuma — 11 é primo. Em grade de 6 sobra
   uma linha de 5 encostada à esquerda, com cara de item faltando. Em flex a última
   linha centraliza sozinha e a quebra vira simetria. */
.scale{display:flex; flex-wrap:wrap; justify-content:center; gap:.28rem}
.scale label{flex:1 1 auto; min-width:2.4rem}
.scale label{padding:.5rem .1rem; font-size:.82rem; min-height:44px}

.form-note{font-size:.85rem; color:var(--ink-2); background:var(--paper-2);
  border-left:2px solid var(--indigo); padding:.85rem 1rem; margin:0 0 1.5rem; border-radius:0 var(--r) var(--r) 0}

/* ── Busca ──────────────────────────────────────────────────────────────── */
.searchbox{display:flex; gap:.55rem; flex-wrap:wrap}
.searchbox .grow{flex:1 1 260px; min-width:0}
.searchbox input[type=search]{padding:.88rem 1rem; font-size:1rem}

/* ── Seções escuras (momentos de marca) ─────────────────────────────────── */
.night{background:var(--night); color:#D6D3CC}
.night h1,.night h2,.night h3{color:#F6F3EC}
.night .lead,.night p{color:#A9A79F}
.night a{color:var(--brass-2)}
.night .record{background:var(--night-2); border-color:rgba(255,255,255,.1);
  border-top-color:var(--brass)}
.night .metric-val,.night .score-n{color:#F6F3EC}
.night .eyebrow{color:#8B887F}
.night .eyebrow::after,.night .eyebrow::before{background:rgba(255,255,255,.16)}
.night a.btn-brass{color:#fff}
.night a.btn-primary{color:var(--paper)}
.night .btn-ghost{color:#F6F3EC; border-color:rgba(255,255,255,.45)}
.night .btn-ghost:hover{border-color:var(--brass-2); background:rgba(255,255,255,.05)}
.night .templum::before{
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px)}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.site-foot{background:var(--night); color:#8B887F; padding:4rem 0 2.2rem; font-size:.87rem}
.site-foot h4{color:#F6F3EC; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:1rem; font-weight:600}
.site-foot a{color:#B5B2AA; display:block; padding:.24rem 0}
.site-foot a:hover{color:var(--brass-2)}
.foot-grid{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2.4rem}
.foot-bottom{margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem}

/* ── Utilitários ────────────────────────────────────────────────────────── */
.stack>*+*{margin-top:var(--gap,1rem)}
.row{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.center{text-align:center}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.tiny{font-size:.78rem; line-height:1.5}
.nowrap{white-space:nowrap}
.pill{display:inline-block; font-size:.76rem; padding:.2rem .55rem; border:1px solid var(--line);
  border-radius:99px; color:var(--ink-2); background:var(--paper-2)}
.divider{height:1px; background:var(--line); margin:2.2rem 0}
.divider-double{height:4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:2.6rem 0}

.pular{
  position:absolute; left:.6rem; top:-3rem; z-index:100;
  background:var(--indigo); color:var(--paper); padding:.7rem 1.1rem;
  border-radius:0 0 var(--r) var(--r); font-size:.9rem; font-weight:600;
  transition:top .16s var(--ease);
}
.pular:focus{top:0; text-decoration:none}

.notice{padding:1rem 1.15rem; border-radius:var(--r); font-size:.9rem; border:1px solid; margin-bottom:1.4rem}
.notice-info{background:var(--indigo-soft); border-color:rgba(27,42,74,.2); color:var(--indigo)}
.notice-warn{background:var(--warn-soft); border-color:rgba(148,80,47,.25); color:var(--warn)}
.notice-good{background:var(--good-soft); border-color:rgba(63,98,71,.25); color:var(--good)}

.error-page{padding:7rem 0; text-align:center; max-width:520px}
.err-code{font-family:var(--font-display); font-size:5rem; color:var(--paper-3); line-height:1;
  font-variation-settings:'opsz' 144; font-weight:600}

.demo-banner{background:var(--brass-soft); border-bottom:1px solid rgba(156,122,62,.3);
  color:#6E5426; font-size:.815rem; padding:.55rem 0; text-align:center; line-height:1.45}

/* ── Documento longo (termos, privacidade, diretrizes, guias) ───────────── */
.doc{font-size:1.02rem}
.doc h2{
  font-size:1.32rem; margin:2.8rem 0 .8rem; padding-top:1.5rem;
  border-top:1px solid var(--line); font-variation-settings:'opsz' 40;
}
.doc h2:first-child{margin-top:0; padding-top:0; border-top:0}
.doc h3{font-size:1.06rem; margin:1.8rem 0 .5rem}
.doc p{color:var(--ink-2); line-height:1.72}
.doc strong{color:var(--ink)}
.doc ul,.doc ol{color:var(--ink-2); line-height:1.78; padding-left:1.3rem; margin:0 0 1.2rem}
.doc li{margin-bottom:.45rem}
.doc li::marker{color:var(--ink-3)}
.doc blockquote{margin:1.4rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:2px solid var(--brass);
  font-family:var(--font-display); color:var(--ink); font-style:italic}
.doc-table-wrap{overflow-x:auto; margin:1.2rem 0 1.6rem; -webkit-overflow-scrolling:touch}
.doc-table-wrap .doc-table{margin:0; min-width:420px}
.doc-table{width:100%; border-collapse:collapse; margin:1.2rem 0 1.6rem; font-size:.87rem}
.doc-table th{
  text-align:left; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:.5rem .7rem .5rem 0;
  border-bottom:1px solid var(--line);
}
.doc-table td{padding:.7rem .7rem .7rem 0; border-bottom:1px solid var(--line-2);
  color:var(--ink-2); vertical-align:top}
.doc-table td:first-child{color:var(--ink); font-weight:500}

/* ── Duas colunas com colapso automático ────────────────────────────────── */
.split{display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.split-aside{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}
.split-perfil{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
@media(max-width:820px){ .split-perfil{grid-template-columns:1fr} }
@media(max-width:820px){ .split-aside{grid-template-columns:1fr} }

/* ── Artigo com sumário lateral ─────────────────────────────────────────── */
.artigo{display:grid; grid-template-columns:minmax(0,var(--w-read)) minmax(200px,260px);
  gap:clamp(2rem,5vw,4rem); align-items:start}
.artigo .doc{min-width:0}
.artigo-aside{position:sticky; top:90px}
.toc ol{list-style:none; counter-reset:toc; padding:0; margin:0}
.toc li{counter-increment:toc; margin-bottom:.55rem; line-height:1.35}
.toc li::before{content:counter(toc,decimal-leading-zero); font-family:var(--font-mono);
  font-size:.68rem; color:var(--ink-3); margin-right:.5rem}
.toc a{font-size:.845rem; color:var(--ink-2)}
.toc a:hover{color:var(--indigo)}
.doc h2{scroll-margin-top:90px}

@media(max-width:900px){
  .artigo{grid-template-columns:1fr}
  .artigo-aside{position:static; order:-1}
  .toc{display:none}
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:2rem}
}
@media(max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .nav{display:none; position:absolute; top:66px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 1.2rem 1.2rem; margin:0}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0; border-bottom:1px solid var(--line-2)}
  .nav-cta{margin:.7rem 0 0}
  .g2,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .scale label{flex:0 1 calc(16.66% - .28rem)}
  .review-meta{margin-left:0; width:100%}
}

/* ── Correções de tela estreita ──────────────────────────────────────────────
   Estas nasceram de olhar o site num iPhone emulado, não de medir nada: as
   baterias diziam que nada transbordava, e não transbordava mesmo — o problema
   era a composição. */
.so-estreito{display:none}
@media(max-width:560px){
  .so-largo{display:none}
  .so-estreito{display:inline}

  /* o traço decorativo e o espaçamento largo empurravam o rótulo para 3 linhas */
  .eyebrow{letter-spacing:.12em; gap:0}
  .eyebrow::after,.eyebrow.center::before{display:none}

  /* três números em linha viravam 2 + 1: a linha quebrada parece defeito */
  /* align-items:center do .row centraliza na horizontal quando vira coluna —
     os números ficavam centrados no meio de um hero todo alinhado à esquerda */
  .hero-stats{flex-direction:column; align-items:flex-start;
    gap:.55rem!important; margin-top:2rem!important}

  /* selos de larguras diferentes empilhados faziam escada; em bloco ficam alinhados */
  .seal-stack{flex-direction:column; align-items:flex-start}
  .seal-stack .seal{width:100%; justify-content:center}
}

/* ── Alvos de toque (WCAG 2.5.5 / Apple HIG: 44px) ───────────────────────────
   O botão do menu tinha 40×35 — e no celular ele é o único caminho para navegar.
   Os links do rodapé tinham 30px de altura, empilhados: dedo grande erra o alvo. */
@media(max-width:760px){
  .burger{min-width:44px; min-height:44px; display:flex; flex-direction:column;
    align-items:center; justify-content:center}
  .site-foot a{min-height:44px; display:flex; align-items:center; padding:0}
  .site-foot .brand{min-height:44px}
  .site-head .brand{min-height:44px; align-items:center}
  .nav a{min-height:44px; display:flex; align-items:center}
  .btn{min-height:44px}   /* estavam com 42px: faltavam dois pixels para o mínimo */
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

@media print{
  .site-head,.site-foot,.btn,.nav{display:none}
  body{background:#fff; font-size:11pt}
}

/* ── Bloco de código para copiar ────────────────────────────────────────── */
.codigo{
  font-family:var(--font-mono); font-size:.78rem; line-height:1.55; margin:0;
  background:var(--night); color:#C9D3E6; padding:.85rem 1rem; border-radius:var(--r);
  overflow-x:auto; white-space:pre-wrap; word-break:break-all; -webkit-overflow-scrolling:touch;
}

/* ── Guia em destaque ────────────────────────────────────────────────────────
   O hub ordena por procura mensal, e o primeiro item ganha a largura inteira.
   Sem isto, o assunto que traz 165 mil buscas/mês ocupava a mesma célula de um
   assunto que traz 880. */
/* `a.record` tem especificidade (0,1,1) e fixa display:block — uma regra `.destaque`
   sozinha (0,1,0) perde e o flex nunca chega a valer. É a terceira vez que a
   especificidade morde neste arquivo (antes foi `.nav a` sobre `.btn-primary`,
   pintando o botão de cinza sobre azul). Seletor com o mesmo peso, sempre. */
a.record.destaque{display:flex; align-items:center; justify-content:space-between;
  gap:2rem; margin-bottom:1.6rem; border-top-width:2px; padding:1.9rem 1.7rem}
.destaque .destaque-seta{font-size:1.5rem; color:var(--brass-text); flex-shrink:0;
  transition:transform .2s var(--ease)}
.destaque:hover .destaque-seta{transform:translateX(4px)}
@media(max-width:640px){
  a.record.destaque{flex-direction:column; align-items:flex-start; gap:1rem}
  .destaque .destaque-seta{align-self:flex-end}
}

/* ── Fecho do guia ───────────────────────────────────────────────────────────
   O convite fica no fim do artigo porque é ali que a pessoa terminou de se
   informar. Fundo de papel mais forte para separar do corpo do texto sem
   parecer anúncio — o guia é conteúdo, não isca. */
.fecho-guia{
  display:flex; align-items:center; justify-content:space-between; gap:2.4rem;
  max-width:var(--w-read); margin:3rem 0 0; padding:1.9rem 1.8rem;
  background:var(--paper-2); border:1px solid var(--line);
  border-left:2px solid var(--brass); border-radius:0 var(--r) var(--r) 0;
}
.fecho-acao{flex-shrink:0; text-align:right}
@media(max-width:700px){
  .fecho-guia{flex-direction:column; align-items:flex-start; gap:1.3rem}
  .fecho-acao{text-align:left; width:100%}
  .fecho-acao .btn{width:100%}
}

/* ── Responder no painel ─────────────────────────────────────────────────────
   Fechado por padrão: o profissional entra para ler, não para escrever. */
.responder{margin-top:1rem}
.responder > summary{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--font-ui); font-size:.85rem; font-weight:600;
  color:var(--indigo-2); padding:.45rem .8rem; border:1px solid var(--line);
  border-radius:var(--r); background:var(--paper); list-style:none;
  min-height:44px; box-sizing:border-box;
}
.responder > summary::-webkit-details-marker{display:none}
.responder > summary::before{content:"+"; font-size:1.05rem; line-height:1; color:var(--brass-text)}
.responder[open] > summary::before{content:"−"}
.responder > summary:hover{border-color:var(--indigo); background:#fff}

/* Rótulo só para leitor de tela — usado no campo de busca da página de erro, onde
   um <label> visível competiria com o texto da mensagem. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── Duas portas para o profissional ─────────────────────────────────────────
   Reivindicar e cadastrar são situações diferentes e o site oferecia só a
   primeira. Lado a lado, com a diferença dita antes do botão. */
.dois-caminhos{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
.caminho{background:#FBF9F5; border:1px solid var(--line); border-top:2px solid var(--line);
  border-radius:0 0 var(--r) var(--r); padding:1.4rem 1.4rem 1.5rem}
.caminho-destaque{border-top-color:var(--brass); background:var(--brass-soft)}
/* Os cartões vivem dentro da seção escura, mas têm fundo de papel. Sem isto as regras
   de `.night` pintam o texto de claro sobre claro — o botão "Reivindicar" ficou em
   1,05:1, praticamente invisível. É a mesma armadilha de contexto do `.nav a` sobre
   o `.btn-primary`, agora com o fundo invertido. */
.night .caminho, .night .caminho p, .night .caminho .eyebrow{color:var(--ink-2)}
.night .caminho .eyebrow{color:var(--ink-3)}
.night .caminho .btn-ghost{color:var(--indigo); border-color:rgba(20,22,28,.55)}
.night .caminho .btn-ghost:hover{color:var(--indigo); border-color:var(--indigo);
  background:rgba(27,42,74,.04)}
.night .caminho .btn-brass{color:#fff}
@media(max-width:700px){ .dois-caminhos{grid-template-columns:1fr} }

/* ── Hero com a carta celeste ────────────────────────────────────────────────
   O site tinha o conceito de "Instituto de Registro Celeste" escrito no briefing
   e nada disso na tela — fundo chapado e uma grade quase invisível. A imagem é
   um livro de registro sob uma carta celeste gravada: junta o que a plataforma
   faz (registro) com o mundo de quem a usa (céu), sem cair em bola de cristal.

   O texto vive em cima dela, então o degradê não é decoração: é o que garante
   contraste. Sem ele, o título branco cai sobre estrela clara. */
.hero-celeste{position:relative; isolation:isolate; overflow:hidden}
.hero-celeste::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("/static/img/hero/celeste-1600.webp") center 38% / cover no-repeat;
}
.hero-celeste::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, var(--night) 0%, rgba(11,14,20,.94) 38%,
                    rgba(11,14,20,.72) 60%, rgba(11,14,20,.55) 100%),
    linear-gradient(to bottom, rgba(11,14,20,.5) 0%, transparent 30%,
                    transparent 70%, var(--night) 100%);
}
@media(max-width:900px){
  .hero-celeste::before{background-image:url("/static/img/hero/celeste-900.webp")}
  /* em tela estreita o texto ocupa tudo: a imagem passa a ser atmosfera, não cena */
  .hero-celeste::after{background:
    linear-gradient(to bottom, rgba(11,14,20,.93) 0%, rgba(11,14,20,.88) 55%,
                    var(--night) 100%)}
}

/* ── A promessa central ──────────────────────────────────────────────────────
   "Sua identidade é privada. Sua experiência é pública." é a tese do produto e
   vivia numa faixa bege, com peso de separador. Agora é o único respiro escuro
   entre duas seções de papel — a alternância cria o ritmo que faltava. */
.secao-promessa{
  position:relative; overflow:hidden;
  padding:clamp(3.4rem,7vw,5.4rem) 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(156,122,62,.10), transparent 60%),
    var(--night);
}
.marca-filete{
  display:block; width:64px; height:1px; margin:0 auto 1.8rem;
  background:linear-gradient(to right, transparent, var(--brass-2), transparent);
}
.promessa{
  font-size:clamp(1.5rem,4vw,2.6rem); color:#F6F3EC;
  max-width:20ch; margin:0 auto; line-height:1.28;
  font-variation-settings:'opsz' 96; letter-spacing:-.012em;
}

/* ── Textura de papel ────────────────────────────────────────────────────────
   Fundo chapado é o que faz uma interface parecer planilha. O grão é sutil o
   bastante para não competir com o texto e suficiente para o papel virar
   material — é gerado em SVG, sem requisição extra nem imagem para carregar. */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){ body::before{opacity:.02} }

/* ── Cabeçalho do registro ───────────────────────────────────────────────────
   A página de perfil é onde a decisão de contratar acontece, e o topo dela era
   papel liso — indistinguível de qualquer outra página. Agora usa a mesma
   linguagem do hero: nanquim, filete de latão e a carta celeste ao fundo, bem
   apagada. Dá peso de registro público ao que é, de fato, um registro público. */
.cabecalho-registro{
  position:relative; overflow:hidden;
  border-bottom:2px solid var(--brass);
  background:var(--night);
}
.cabecalho-registro::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url("/static/img/hero/celeste-fundo.webp") right 30% / cover no-repeat;
  opacity:.22;
}
.cabecalho-registro::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(95deg, var(--night) 0%, rgba(11,14,20,.95) 45%,
                             rgba(11,14,20,.78) 100%);
}
.cabecalho-registro > .wrap{position:relative; z-index:1}
.cabecalho-registro h1{color:#F6F3EC}
.cabecalho-registro .tiny.dim, .cabecalho-registro .dim{color:#8B887F}
.cabecalho-registro .tiny.dim a{color:#B5B2AA}
.cabecalho-registro p.lead, .cabecalho-registro .subtitulo{color:#B5B2AA}
/* Sobre nanquim, o azul do botão primário quase some (3,4:1 contra o fundo) e o
   botão de contorno claro fica MAIS visível que ele — a ação principal parecendo
   secundária. Latão é a cor de ação em fundo escuro neste sistema; é o que o hero
   da home já faz. */
.cabecalho-registro a.btn-primary{
  background:#80622D; border-color:#80622D; color:#fff;
}
.cabecalho-registro a.btn-primary:hover{background:#6E5426; border-color:#6E5426}
.cabecalho-registro a.btn-ghost{color:#F6F3EC; border-color:rgba(255,255,255,.45)}
.cabecalho-registro a.btn-ghost:hover{border-color:var(--brass-2);
  background:rgba(255,255,255,.05); color:#F6F3EC}

/* ── Campos sobre fundo escuro ───────────────────────────────────────────────
   A borda escura dos campos some sobre nanquim (1,07:1 no campo de busca do hero).
   Medido: branco a 45% dá 4,51:1 — folga confortável sobre os 3:1 exigidos. */
.night input[type=text], .night input[type=email], .night input[type=search],
.night input[type=tel], .night input[type=password], .night select, .night textarea,
.hero-celeste input[type=search], .hero-celeste input[type=text]{
  border-color:rgba(255,255,255,.45);
}
.night input:focus, .hero-celeste input:focus{
  border-color:var(--brass-2); box-shadow:0 0 0 3px rgba(196,162,99,.22);
}

/* ── Caixas de seleção e opção ───────────────────────────────────────────────
   Nativas, vinham com 13×13 px — metade do dedo de qualquer pessoa, e a que aceita
   os termos é obrigatória para criar conta. O rótulo inteiro já é clicável (e é
   isso que salva o toque), mas ele tinha 20 px de altura. Aqui a caixa cresce e o
   rótulo ganha altura de alvo real, sem virar bloco pesado. */
input[type=checkbox], input[type=radio]{
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--indigo-2);   /* a marca sai no azul do sistema, não no do SO */
  cursor:pointer;
}
label:has(> input[type=checkbox]), label:has(> input[type=radio]){
  min-height:44px; padding:.5rem 0; cursor:pointer; align-items:center;
}
/* dentro do rótulo o link continua sendo link: clicar nele abre o documento,
   clicar em qualquer outro ponto marca a caixa */
label:has(> input[type=checkbox]) a{position:relative; z-index:1}