/* ═══════════════════════════════════════════════════════════════
   Zafar Contabilidade — mundo visual "Sinalização de Repartição"
   Placa esmaltada · passo numerado · carimbo · régua de aresta

   TRÊS DISCIPLINAS HERDADAS (doações dos desafiantes recusados):
   1. módulo único  — --u governa TODO espaçamento. Sem exceção, sem valor solto.
   2. estado é marca física — carimbo, perfuração, faixa. Nunca pastilha colorida.
   3. cor por lei   — --signal marca o papel de AÇÃO e nada mais. Nem rótulo,
      nem fita, nem sombra decorativa. Buscar por --signal antes de usar.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── módulo. Todo espaço da página é múltiplo inteiro disto. ── */
  --u: 8px;

  /* ── esmalte ── */
  --enamel:    #FBFAF7;
  --enamel-2:  #F0EDE6;
  --enamel-3:  #DDD8CC;
  /* tinta ligeiramente mais neutra que o navy da marca: sobre esmalte ela
     precisa ler como tinta impressa, não como a cor institucional */
  --ink:       #0C1A28;
  --ink-70:    rgba(12,26,40,.72);
  --ink-45:    rgba(12,26,40,.46);

  /* ── campo institucional: o navy da marca, carregando 30-60% da superfície.
     Verde + amarelo lia como auto escola no Brasil; a gramática de sinalização
     não depende daquela paleta — aeroporto e ferrovia vivem de azul escuro. ── */
  --field:      #021b31;
  --field-deep: #01101D;
  --field-tint: #E2E7ED;
  --on-field:   #FBFAF7;
  --on-field-70:rgba(251,250,247,.88);

  /* ── POR LEI: o dourado da marca, só na ação primária. Buscar por --signal
     antes de usar em qualquer lugar novo. ── */
  --signal:     #B89246;
  --signal-ink: #021b31;

  /* painel de senha: branco aceso sobre vidro. NÃO é dourado de propósito —
     o dourado é lei da ação, e um dígito dourado furaria essa lei. */
  --lit:        #EAF1F8;

  /* uma família, dois extremos do eixo de largura */
  /* uma família, três posições no eixo de largura real (62..125) */
  --ff: "Archivo", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;
  --w-plate: 62%;   /* letreiro de placa — o extremo condensado do binário */
  --w-cond:  78%;   /* rótulos e navegação */
  --w-norm:  100%;  /* texto corrido */

  --wrap: calc(var(--u) * 150);   /* 1200 */
  --pad:  clamp(calc(var(--u)*2), 4vw, calc(var(--u)*5));
  --hair: 1px;
  /* espessura de traço, não de espaço: --u governa espaçamento, aresta é traço */
  --edge: 2px;
  --edge-hi: #FFFFFF;
  --edge-lo: var(--enamel-3);
  /* verso da chapa: sobre esmalte é tinta; sobre campo escuro precisa clarear,
     senão a sombra dura — assinatura deste mundo — desaparece */
  --act-back: var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--enamel);
  color:var(--ink);
  font-family:var(--ff);
  font-stretch:var(--w-norm);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  font-weight:440;
  line-height:1.5;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* superfícies do navegador: são parte do design, não sobra do sistema */
::selection{ background:var(--field); color:var(--on-field); }
:focus-visible{ outline:3px solid var(--ink); outline-offset:calc(var(--u)*.25); }
::-webkit-scrollbar{ width:calc(var(--u)*1.5); }
::-webkit-scrollbar-track{ background:var(--enamel-2); }
::-webkit-scrollbar-thumb{ background:var(--field); }
html{ scrollbar-color:var(--field) var(--enamel-2); scrollbar-width:thin; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--enamel);
  padding:calc(var(--u)*1.5) calc(var(--u)*3); font-weight:700;
}
.skip:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── letreiro de placa: condensada, caixa alta, apertada ────────── */
.sign{
  font-stretch:var(--w-plate);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.92;
  margin:0;
  text-wrap:balance;
}
/* teto em 4.6rem: acima disso a ação primária cai abaixo da dobra, e numa
   página que existe para converter isso é falha, não escolha */
.sign--xl{ font-size:clamp(2.3rem, 1.3rem + 3.9vw, 4.6rem); }
.sign--l { font-size:clamp(2rem, 1.2rem + 3.4vw, 3.8rem); }
.sign--m { font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem); }
/* placa invertida: o destaque da sinalização. Não usa cor — usa chapa. */
.sign em{
  font-style:normal;
  background:var(--on-field); color:var(--field-deep);
  padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.sec--paper .sign em,.legal .sign em{ background:var(--ink); color:var(--enamel); }

/* rótulo de sinalização: condensada, caixa alta, espaçada */
.label{
  font-stretch:var(--w-cond);
  font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  margin:0;
}

p{ margin:0; text-wrap:pretty; }
p + p{ margin-top:calc(var(--u)*1.5); }
.lede{ font-size:clamp(1.06rem,1rem + .4vw,1.22rem); line-height:1.45; max-width:52ch; }

/* ── ação. O amarelo mora aqui e em lugar nenhum. ──────────────── */
.act{
  display:inline-flex; align-items:center; gap:calc(var(--u)*1.5);
  padding:calc(var(--u)*2.25) calc(var(--u)*3.5);
  font-family:var(--ff); font-stretch:var(--w-cond);
  font-size:1.0625rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none;
  background:var(--signal); color:var(--signal-ink);
  border:0; border-radius:0;
  box-shadow:calc(var(--u)*.75) calc(var(--u)*.75) 0 var(--act-back);
  transition:transform .14s linear, box-shadow .14s linear;
}
.act:hover{
  transform:translate(calc(var(--u)*.375), calc(var(--u)*.375));
  box-shadow:calc(var(--u)*.375) calc(var(--u)*.375) 0 var(--act-back);
}
.act:active{ transform:translate(calc(var(--u)*.75), calc(var(--u)*.75)); box-shadow:0 0 0 var(--act-back); }
.act svg{ flex:none; }

/* ação secundária: sem cor, só chapa vazada */
.act--plain{
  background:transparent; color:inherit;
  box-shadow:inset 0 0 0 2px currentColor;
}
.act--plain:hover{ background:var(--ink); color:var(--enamel); box-shadow:inset 0 0 0 2px var(--ink); transform:none; }
.band .act--plain:hover{ background:var(--on-field); color:var(--field-deep); box-shadow:inset 0 0 0 2px var(--on-field); }

/* ação secundária subordinada: dois botões de peso igual dividem a decisão */
.quiet{
  display:inline-flex; align-items:center; gap:calc(var(--u)*1.25);
  font-stretch:var(--w-cond); font-size:.9375rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; padding-bottom:calc(var(--u)*.5);
  border-bottom:2px solid currentColor;
  transition:gap .14s linear;
}
.quiet:hover{ gap:calc(var(--u)*2.25); }

/* ── faixa sangrada ─────────────────────────────────────────────── */
.band,.plan--pick{ --act-back:var(--on-field); }
.band{ background:var(--field); color:var(--on-field); }
.band--deep{ background:var(--field-deep); }

/* Régua de aresta: encerra cada faixa. Era fita zebrada de risco — que lia
   como obra e reforçava a leitura de auto escola. Traço medido lê institucional. */
.tape{
  height:calc(var(--u)*1.25);
  background:
    repeating-linear-gradient(90deg,
      var(--on-field-70) 0 2px, transparent 2px calc(var(--u)*2)),
    var(--field-deep);
}

/* ═══════════ NAVEGAÇÃO — chapa branca, logo na sua própria placa ═══════════ */
.nav{
  position:sticky; top:0; z-index:80;
  background:var(--enamel);
  border-bottom:2px solid var(--ink);
}
.nav__in{
  display:flex; align-items:stretch; justify-content:space-between; gap:calc(var(--u)*3);
  min-height:calc(var(--u)*10);
}
.brand{
  display:flex; align-items:center; text-decoration:none;
  padding-right:calc(var(--u)*3);
  border-right:var(--hair) solid var(--enamel-3);
}
.brand img{ height:calc(var(--u)*6.5); width:auto; }

.nav__links{ display:flex; align-items:center; gap:calc(var(--u)*3.5); }
.nav__links a:not(.act){
  font-stretch:var(--w-cond); font-size:.9375rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding:calc(var(--u)*1) 0;
  border-bottom:3px solid transparent;
  transition:border-color .12s linear;
}
.nav__links a:not(.act):hover{ border-bottom-color:var(--field); }
.nav .act{ padding:calc(var(--u)*1.5) calc(var(--u)*2.5); font-size:.9375rem; box-shadow:calc(var(--u)*.5) calc(var(--u)*.5) 0 var(--act-back); }

.burger{ display:none; width:calc(var(--u)*5.5); height:calc(var(--u)*5.5); background:none; border:0; cursor:pointer; padding:calc(var(--u)*1.5); }
.burger span{ display:block; height:2.5px; background:var(--ink); margin:calc(var(--u)*.625) 0; transition:transform .18s linear, opacity .12s linear; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(calc(var(--u)*.875)) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(calc(var(--u)*-.875)) rotate(-45deg); }

@media (max-width:1000px){
  .burger{ display:block; align-self:center; }
  .brand{ border-right:0; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--enamel); border-bottom:2px solid var(--ink);
    padding:0 var(--pad) calc(var(--u)*3);
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .22s linear, visibility .22s;
  }
  .nav__links.is-open{ max-height:85vh; visibility:visible; overflow-y:auto; }
  .nav__links a:not(.act){
    padding:calc(var(--u)*2.25) 0; font-size:1.125rem;
    border-bottom:var(--hair) solid var(--enamel-3);
  }
  .nav__links .act{ margin-top:calc(var(--u)*3); justify-content:center; }
}

/* ═══════════ HERO — a placa que conduz ═══════════ */
.lead{ position:relative; }
.lead__in{ padding-block:clamp(calc(var(--u)*6), 9vw, calc(var(--u)*14)); }

.lead h1{ color:var(--on-field); }
.lead .lede{ color:var(--on-field-70); margin-top:calc(var(--u)*3); }
.lead__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--u)*2); margin-top:calc(var(--u)*4); }
.lead__foot{
  margin-top:calc(var(--u)*5); padding-top:calc(var(--u)*2.5);
  border-top:var(--hair) solid var(--on-field-70);
  color:var(--on-field-70);
}

.lead__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(calc(var(--u)*4), 6vw, calc(var(--u)*10)); align-items:center;
}
@media (max-width:960px){ .lead__grid{ grid-template-columns:1fr; } }

/* ═══════════ PAINEL DE SENHA — o movimento autoral da página ═══════════ */
.panel{
  background:var(--field-deep);
  border:3px solid rgba(244,246,243,.22);
  padding:calc(var(--u)*3);
}
.panel__cap{
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--on-field-70);
  padding-bottom:calc(var(--u)*2);
  border-bottom:var(--hair) solid rgba(244,246,243,.22);
}
/* dígito de painel de senha: aceso sobre vidro escuro.
   Não é --signal: aquele amarelo é lei da ação primária. Este é âmbar de lâmpada. */
.panel__now{
  font-stretch:var(--w-plate); font-weight:800;
  font-size:clamp(4rem, 2rem + 9vw, 7.5rem); line-height:.85;
  padding:calc(var(--u)*2) 0 calc(var(--u)*1);
  font-variant-numeric:tabular-nums;
  color:var(--lit);
  text-shadow:0 0 calc(var(--u)*3) rgba(234,241,248,.35);
}
.panel__rows{ list-style:none; margin:calc(var(--u)*2) 0 0; padding:0; display:grid; gap:var(--u); }
.panel__rows li{
  display:grid; grid-template-columns:calc(var(--u)*5) 1fr auto;
  align-items:center; gap:calc(var(--u)*2);
  padding:calc(var(--u)*1.5) 0;
  border-top:var(--hair) solid rgba(244,246,243,.16);
  color:var(--on-field-70);
  font-stretch:var(--w-cond); letter-spacing:.06em; text-transform:uppercase;
  font-size:.875rem; font-weight:700;
}
.panel__rows b{ font-variant-numeric:tabular-nums; color:var(--on-field); }
/* estado é marca física: faixa de protocolado, não pastilha */
.panel__rows .is-done{ color:var(--on-field); }
.panel__rows .is-done span:last-child{
  background:var(--on-field); color:var(--field-deep);
  padding:calc(var(--u)*.25) calc(var(--u));
}

/* ── requisição de diagnóstico (coluna direita do hero) ── */
.req{ background:var(--field-deep); border:var(--edge) solid rgba(251,250,247,.22); padding:calc(var(--u)*3); }
.req__cap{ color:var(--on-field-70); padding-bottom:calc(var(--u)*2);
  border-bottom:var(--hair) solid rgba(251,250,247,.22); }
.req__lede{ margin-top:calc(var(--u)*2); font-size:.9375rem; color:var(--on-field-70); line-height:1.45; }
.req__field{ display:block; margin-top:calc(var(--u)*2.5); }
.req__field > span{
  display:block; margin-bottom:calc(var(--u)); color:var(--on-field-70);
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.req input,.req select{
  width:100%; box-sizing:border-box;
  padding:calc(var(--u)*1.75) calc(var(--u)*2);
  font-family:var(--ff); font-stretch:var(--w-norm); font-size:1rem; font-weight:500;
  color:var(--on-field); background:rgba(251,250,247,.06);
  border:var(--edge) solid rgba(251,250,247,.30); border-radius:0;
  appearance:none;
}
.req input::placeholder{ color:rgba(251,250,247,.42); }
.req input:focus,.req select:focus{ outline:none; border-color:var(--signal); background:rgba(251,250,247,.10); }
.req select{ background-image:none; cursor:pointer; }
.req select option{ background:var(--field-deep); color:var(--on-field); }
.req .act{ width:100%; justify-content:center; margin-top:calc(var(--u)*3); }


.idplate{ margin:calc(var(--u)*2) 0 0; padding:0; }
.idplate > div{
  display:grid; grid-template-columns:calc(var(--u)*11) 1fr; gap:calc(var(--u)*2);
  padding:calc(var(--u)*2) 0;
  border-top:var(--hair) solid rgba(251,250,247,.22);
}
.idplate dt{
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-field-70);
}
.idplate dd{ margin:0; font-size:.9375rem; line-height:1.45; }
.idplate a{
  display:block; margin-top:calc(var(--u)*.5);
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-field-70); text-decoration:underline;
  text-underline-offset:calc(var(--u)*.375);
}
.idplate a:hover{ color:var(--on-field); }
@media (max-width:520px){
  .idplate > div{ grid-template-columns:1fr; gap:calc(var(--u)*.75); }
}

/* ── barra fixa de conversão, só no mobile ── */
.sticky{ display:none; }
@media (max-width:860px){
  .sticky{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; align-items:center; justify-content:space-between;
    gap:calc(var(--u)*2);
    padding:calc(var(--u)*2) calc(var(--u)*2.5);
    background:var(--signal); color:var(--signal-ink);
    border-top:2px solid var(--ink); text-decoration:none;
    font-stretch:var(--w-cond); text-transform:uppercase;
  }
  .sticky span{ font-size:.8125rem; font-weight:700; letter-spacing:.1em; }
  .sticky strong{ font-size:1rem; font-weight:800; letter-spacing:.06em; }
  /* a barra cobre o rodapé sem isto */
  .foot{ padding-bottom:calc(var(--u)*9); }
}

/* ── o que é comum aos três planos, dito uma vez só ── */
.plans__all{
  margin:0 0 calc(var(--u)*4); max-width:70ch;
  padding:calc(var(--u)*2) 0; border-block:2px solid var(--ink);
  font-size:1rem;
}

/* ═══════════ O PERCURSO — passos numerados em placa ═══════════ */
.sec{ padding-block:clamp(calc(var(--u)*7), 9vw, calc(var(--u)*13)); }
/* a prancha em que as chapas se apoiam: sem ela, "chapa" era só um retângulo
   de fio sobre o mesmo branco do papel */
.sec--paper{ background:var(--enamel-2); }
.sec--paper + .sec--paper{ padding-top:0; }

/* ritmo: 104px em todas as seções fazia a página respirar igual em tudo */
.sec--dense{ padding-block:clamp(calc(var(--u)*6),  7vw, calc(var(--u)*10)); }
.sec--quiet{ padding-block:clamp(calc(var(--u)*9), 12vw, calc(var(--u)*17)); }
section[id]{ scroll-margin-top:calc(var(--u)*12); }
/* 48% da faixa do título estava vazia: a goteira vira informação de
   sinalização — o leitor sabe em que placa está */
.sec__head{
  display:grid; grid-template-columns:calc(var(--u)*8) minmax(0,64ch);
  column-gap:calc(var(--u)*3); margin-bottom:calc(var(--u)*7);
}
.sec__head > *{ grid-column:2; }
.sec__head[data-plate]::before{
  content:attr(data-plate); grid-column:1; grid-row:1 / -1; align-self:start;
  font-stretch:var(--w-plate); font-weight:800;
  font-size:1.125rem; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  color:var(--ink-70); padding-bottom:var(--u);
  border-bottom:var(--edge) solid currentColor;
}
.band .sec__head[data-plate]::before{ color:var(--on-field-70); }
@media (max-width:720px){
  .sec__head{ grid-template-columns:minmax(0,1fr); }
  .sec__head > *{ grid-column:1; }
  .sec__head[data-plate]::before{
    grid-row:auto; justify-self:start; margin-bottom:calc(var(--u)*2);
  }
}

/* ── 3+4. fronteiras: régua sobre papel, e o par seta+destino ── */
.tape--paper{
  background:
    repeating-linear-gradient(90deg,
      var(--ink) 0 var(--edge), transparent var(--edge) calc(var(--u)*2)),
    var(--enamel-3);
}
.dest{
  display:flex; align-items:center; gap:calc(var(--u)*2);
  margin-top:calc(var(--u)*6); padding-top:calc(var(--u)*2);
  border-top:var(--edge) solid currentColor;
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-70);
}
.band .dest{ color:var(--on-field-70); }
.dest__to{ color:var(--ink); }
.band .dest__to{ color:var(--on-field); }
.dest__n{ margin-left:auto; font-variant-numeric:tabular-nums; }
/* seta de DESTINO, nunca dourada: dourado significa ação, e destino não é ação */
.dest__arrow{
  flex:none; width:calc(var(--u)*1.5); height:calc(var(--u)*2.5);
  background:currentColor;
  clip-path:polygon(37% 0,63% 0,63% 58%,100% 58%,50% 100%,0 58%,37% 58%);
}
@media (max-width:560px){
  .dest span:not(.dest__to):not(.dest__n){ display:none; }
}
.sec__head .lede{ margin-top:calc(var(--u)*3); color:var(--ink-70); }
.band .sec__head .lede{ color:var(--on-field-70); }

.route{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
  border-left:2px solid var(--ink);
}
.wicket{
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:calc(var(--u)*3);
  background:var(--enamel);
  /* aresta de esmalte: dois traços chapados, zero blur, zero raio */
  box-shadow:
    inset  var(--edge)  var(--edge) 0 var(--edge-hi),
    inset calc(var(--edge)*-1) calc(var(--edge)*-1) 0 var(--edge-lo);
  position:relative;
  transition:background .12s linear;
}
.wicket:hover{ background:var(--field-tint); }
.wicket.is-stamped .wicket__by{ opacity:1; transform:rotate(-2.5deg) scale(1); }
.wicket.is-stamped .wicket__by--you{ transform:rotate(1.5deg) scale(1); }
.wicket__n{
  font-stretch:var(--w-cond); font-weight:800;
  font-size:clamp(2.4rem,1.4rem + 2.6vw,3.4rem); line-height:.85;
  font-variant-numeric:tabular-nums;
  color:var(--field);
  display:block; margin-bottom:calc(var(--u)*3);
}
.wicket h3{ margin:0 0 calc(var(--u)*1.5); font-stretch:var(--w-cond); font-size:1.25rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:1.05; }
.wicket p{ color:var(--ink-70); font-size:1rem; }
/* quem faz o quê: carimbo, não legenda colorida */
.wicket__by{
  opacity:0; transform:rotate(-2.5deg) scale(1.12);
  transition:opacity .18s linear, transform .22s cubic-bezier(.2,.8,.3,1);
  margin-top:calc(var(--u)*3);
  display:inline-block;
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  padding:calc(var(--u)*.75) calc(var(--u)*1.5);
  border:2px solid currentColor;
  transform:rotate(-2.5deg);
}
.wicket__by--us{ color:var(--field); }
.wicket__by--you{ color:var(--ink-70); border-style:dashed; transform:rotate(1.5deg); }
@media (max-width:900px){ .route{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .route{ grid-template-columns:1fr; } }

/* ═══════════ O QUE FICA NA CASA ═══════════ */
.own{ counter-reset:own; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  border-top:2px solid currentColor; }
.own__item{
  background:var(--field);
  box-shadow:
    inset  var(--edge)  var(--edge) 0 rgba(251,250,247,.16),
    inset calc(var(--edge)*-1) calc(var(--edge)*-1) 0 var(--field-deep);
  counter-increment:own;
  padding:calc(var(--u)*5) calc(var(--u)*4);
  border-bottom:2px solid currentColor;
  border-right:var(--hair) solid rgba(244,246,243,.28);
}
.own__item:last-child{ border-right:0; }
/* numeração romana: a promessa literal do título "os três dentro de casa",
   e não colide com os passos 01-04 do percurso */
.own__item::before{
  content:counter(own,upper-roman);
  display:block; margin-bottom:calc(var(--u)*2.5);
  font-stretch:var(--w-plate); font-weight:800;
  font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem); line-height:.85;
  color:var(--on-field-70);
}
.own__item h3{ margin:0 0 calc(var(--u)*2); font-stretch:var(--w-cond); font-size:1.375rem; font-weight:800; text-transform:uppercase; line-height:1.02; }
.own__item p{ color:var(--on-field-70); }
.own__tag{
  display:inline-block; margin-bottom:calc(var(--u)*2.5);
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  padding:calc(var(--u)*.75) calc(var(--u)*1.5);
  background:var(--on-field); color:var(--field-deep);
}
@media (max-width:860px){ .own{ grid-template-columns:1fr; } .own__item{ border-right:0; } }

/* ═══════════ PLANOS — placas ═══════════ */
.plans{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(var(--u)*3); align-items:stretch;
}
.plan{
  display:flex; flex-direction:column;
  padding:calc(var(--u)*3);
  background:var(--enamel);
  border:2px solid var(--ink); border-radius:0;
  box-shadow:
    inset  var(--edge)  var(--edge) 0 var(--edge-hi),
    inset calc(var(--edge)*-1) calc(var(--edge)*-1) 0 var(--edge-lo),
    calc(var(--u)*.75) calc(var(--u)*.75) 0 var(--ink);
}
/* a placa recomendada é o campo institucional, não um cartão "destacado" */
.plan--pick{
  background:var(--field); color:var(--on-field);
  border-color:var(--field);
  box-shadow:
    inset  var(--edge)  var(--edge) 0 rgba(251,250,247,.20),
    inset calc(var(--edge)*-1) calc(var(--edge)*-1) 0 var(--field-deep),
    calc(var(--u)*.75) calc(var(--u)*.75) 0 var(--ink);
}
.plan__name{
  font-stretch:var(--w-cond); font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin:0;
  color:var(--ink-70);
}
.plan--pick .plan__name{ color:var(--on-field-70); }
/* preço cheio riscado: sem ele o "válido nos 6 primeiros meses" lê como
   pegadinha, e preço promocional sem o valor regular é exposição de CDC */
.plan__from{
  display:block; margin-top:calc(var(--u)*2);
  font-stretch:var(--w-cond); font-size:.8125rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45);
}
.plan__from s{ text-decoration-thickness:2px; text-underline-offset:0; }
.plan--pick .plan__from{ color:var(--on-field-70); }
.plan__price{
  font-stretch:var(--w-plate); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,1.8rem + 2.6vw,3.6rem); line-height:.9;
  margin:calc(var(--u)*.5) 0 var(--u);
}
.plan__after{
  margin-top:calc(var(--u)*1.5);
  font-size:.875rem; color:var(--ink-70);
}
.plan--pick .plan__after{ color:var(--on-field-70); }
.plan__price small{
  display:block; font-stretch:var(--w-cond); font-size:.8125rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-top:calc(var(--u)*1.5);
  color:var(--ink-70);
}
.plan--pick .plan__price small{ color:var(--on-field-70); }
/* acréscimo por funcionário: carimbo, não pastilha */
.plan__extra{
  align-self:flex-start; margin-top:calc(var(--u)*2);
  font-stretch:var(--w-cond); font-size:.75rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:calc(var(--u)*.75) calc(var(--u)*1.5);
  border:2px solid currentColor; transform:rotate(-1.5deg);
}
.plan__list{
  list-style:none; margin:calc(var(--u)*3) 0 calc(var(--u)*3); padding:calc(var(--u)*3) 0 0;
  border-top:2px solid currentColor;
  display:grid; gap:calc(var(--u)*1.5); flex:1;
}
.plan__list li{ position:relative; padding-left:calc(var(--u)*3.5); font-size:1rem; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:calc(var(--u)*2); height:2px; background:currentColor;
}
.plan__list .is-plus{ font-weight:700; }
.plan__list .is-plus::before{ height:calc(var(--u)); top:.35em; }
.plan .act{ width:100%; justify-content:center; }
.plans__note{ margin-top:calc(var(--u)*4); color:var(--ink-70); max-width:66ch; font-size:.9375rem; }
@media (max-width:940px){
  .plans{ grid-template-columns:1fr; max-width:calc(var(--u)*58); margin-inline:auto; }
}

/* ═══════════ TABELA DE GUICHÊ (não usada na home) ═══════════ */
.fare{ width:100%; border-collapse:collapse; }
.fare caption{ text-align:left; padding-bottom:calc(var(--u)*3); color:var(--ink-70); }
.fare th,.fare td{ padding:calc(var(--u)*2.5) calc(var(--u)*2); text-align:left; vertical-align:top; border-bottom:var(--hair) solid var(--enamel-3); }
.fare thead th{
  font-stretch:var(--w-cond); font-size:.8125rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); white-space:nowrap;
}
.fare tbody th{ font-stretch:var(--w-cond); font-size:1.125rem; font-weight:800; text-transform:uppercase; }
.fare .price{
  font-stretch:var(--w-cond); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); line-height:1; white-space:nowrap;
}
.fare .price small{ font-size:.875rem; font-weight:700; letter-spacing:.08em; display:block; margin-top:calc(var(--u)*.75); color:var(--ink-70); }
.fare tr.is-picked th,.fare tr.is-picked td{ background:var(--field-tint); }
.fare__note{ margin-top:calc(var(--u)*3); color:var(--ink-70); max-width:66ch; font-size:.9375rem; }
.fare__wrap{ overflow-x:auto; }
@media (max-width:760px){ .fare{ min-width:calc(var(--u)*72); } }

/* ═══════════ PROVA — o que ainda falta você me mandar ═══════════ */
.proof{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(var(--u)*3); }
.proof__cell{ border:2px solid var(--ink); padding:calc(var(--u)*3); }
.proof__n{ font-stretch:var(--w-cond); font-weight:800; font-size:clamp(2.2rem,1.4rem + 2vw,3rem); line-height:.9; font-variant-numeric:tabular-nums; display:block; }
.proof__cell p{ margin-top:calc(var(--u)*1.5); color:var(--ink-70); font-size:.9375rem; }
/* marcador de dado ainda não fornecido — perfuração, não pastilha */
.pending{
  background:repeating-linear-gradient(-45deg, var(--enamel-2) 0 calc(var(--u)*.75), transparent calc(var(--u)*.75) calc(var(--u)*1.5));
  outline:2px dashed var(--ink-45); outline-offset:-2px;
  color:var(--ink-45);
}
@media (max-width:760px){ .proof{ grid-template-columns:1fr; } }

/* ═══════════ RODAPÉ ═══════════ */
.foot{ background:var(--ink); color:rgba(242,241,236,.72); padding-top:calc(var(--u)*7); }
.foot__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:calc(var(--u)*4); padding-bottom:calc(var(--u)*5); }
.foot__name{ font-stretch:var(--w-cond); font-size:1.5rem; font-weight:800; text-transform:uppercase; color:var(--enamel); }
.foot h4{ font-stretch:var(--w-cond); font-size:.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--enamel); margin:0 0 calc(var(--u)*2); }
.foot__col{ display:flex; flex-direction:column; gap:calc(var(--u)*1.5); align-items:flex-start; }
.foot__col a{ font-size:.9375rem; text-decoration:none; border-bottom:var(--hair) solid transparent; }
.foot__col a:hover{ border-bottom-color:var(--enamel); }
.foot address{ font-style:normal; font-size:.9375rem; line-height:1.55; }
.foot__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:calc(var(--u)*1.5);
  border-top:var(--hair) solid rgba(242,241,236,.22);
  padding-block:calc(var(--u)*2.5);
  font-stretch:var(--w-cond); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
}
@media (max-width:900px){ .foot__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__in{ grid-template-columns:1fr; } }

/* ═══════════ PÁGINA JURÍDICA ═══════════ */
.pagehead{ padding-block:clamp(calc(var(--u)*6), 8vw, calc(var(--u)*11)); }
.pagehead h1{ color:var(--on-field); }
.pagehead__meta{
  margin-top:calc(var(--u)*4); padding-top:calc(var(--u)*2.5);
  border-top:var(--hair) solid var(--on-field-70);
  display:flex; flex-wrap:wrap; gap:var(--u) calc(var(--u)*4);
  color:var(--on-field-70);
}
.legal{ padding-block:clamp(calc(var(--u)*7), 9vw, calc(var(--u)*12)); }
.legal__in{ max-width:68ch; margin-inline:auto; }
.legal__lede{ font-size:1.125rem; line-height:1.5; }
.legal__toc{ margin-top:calc(var(--u)*5); padding:calc(var(--u)*3); border:2px solid var(--ink); }
.legal__toc h2{ font-stretch:var(--w-cond); font-size:.75rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 calc(var(--u)*2); }
.legal__toc ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*26),1fr)); gap:var(--u) calc(var(--u)*3); counter-reset:t; }
.legal__toc li{ counter-increment:t; }
.legal__toc a{ display:flex; gap:calc(var(--u)*1.5); text-decoration:none; font-size:.9375rem; }
.legal__toc a::before{ content:counter(t,decimal-leading-zero); font-stretch:var(--w-cond); font-weight:800; color:var(--field); }
.legal__toc a:hover{ color:var(--field); }
.legal__sec{ margin-top:calc(var(--u)*6); scroll-margin-top:calc(var(--u)*14); }
.legal__sec h2{
  display:flex; align-items:baseline; gap:calc(var(--u)*2);
  font-stretch:var(--w-cond); font-weight:800; text-transform:uppercase; line-height:1.02;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  padding-bottom:calc(var(--u)*1.5); border-bottom:2px solid var(--ink); margin:0 0 calc(var(--u)*2.5);
}
.legal__sec h2 .n{ font-size:.8125rem; letter-spacing:.16em; color:var(--field); flex:none; }
.legal__sec h3{ margin:calc(var(--u)*3) 0 var(--u); font-stretch:var(--w-cond); font-size:1.0625rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.legal__sec a{ color:var(--field); text-decoration:underline; text-underline-offset:calc(var(--u)*.375); }
.legal__list{ list-style:none; margin:calc(var(--u)*2) 0 0; padding:0; display:grid; gap:calc(var(--u)*1.5); }
.legal__list li{ position:relative; padding-left:calc(var(--u)*3.5); color:var(--ink-70); }
.legal__list li::before{ content:""; position:absolute; left:0; top:.55em; width:calc(var(--u)*2); height:2px; background:var(--field); }
.legal__tablewrap{ margin-top:calc(var(--u)*3); overflow-x:auto; border:2px solid var(--ink); }
.legal__table{ width:100%; min-width:calc(var(--u)*68); border-collapse:collapse; font-size:.9375rem; }
.legal__table th,.legal__table td{ padding:calc(var(--u)*2); text-align:left; vertical-align:top; }
.legal__table thead th{ font-stretch:var(--w-cond); font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--field-tint); border-bottom:2px solid var(--ink); white-space:nowrap; }
.legal__table tbody tr + tr th,.legal__table tbody tr + tr td{ border-top:var(--hair) solid var(--enamel-3); }
.legal__table td{ color:var(--ink-70); }
.legal__box{ margin-top:calc(var(--u)*3); padding:calc(var(--u)*3); border:2px solid var(--ink); background:var(--field-tint); }
.legal__box address{ font-style:normal; color:var(--ink); line-height:1.6; }
.legal__box .act{ margin-top:calc(var(--u)*3); }

/* ═══════════ MOVIMENTO ═══════════
   Um momento autoral: o painel de senha avança 01→04 quando a seção entra.
   Fora dele, nada se move sozinho. */
.tick{ opacity:0; transform:translateY(calc(var(--u)*1.5)); }
.tick.is-in{ opacity:1; transform:none; transition:opacity .3s linear var(--d,0s), transform .3s cubic-bezier(.2,.8,.3,1) var(--d,0s); }

@media (prefers-reduced-motion:reduce){
  .tick{ opacity:1; transform:none; transition:none; }
  .act:hover{ transform:none; }
}

@media print{
  .nav,.tape,.act{ display:none !important; }
  body{ background:#fff; color:#000; }
  .band,.foot,.panel{ background:#fff !important; color:#000 !important; }
  .tick{ opacity:1 !important; transform:none !important; }
  .legal__sec{ break-inside:avoid; }
}