/* =========================================================================
   Jalon — sistema de design
   Fonte única de verdade para index, estudio, páginas de produto e legais.
   Regras em .ux-profile.md. Não escreva valor cru de cor, espaço, tipo ou
   tempo em página nenhuma: use os tokens abaixo.
   ========================================================================= */

/* --- 1. TOKENS ---------------------------------------------------------- */

:root{
  /* superfícies — L0 tela, L1 estrutura (cartão, lista), L2 sobreposição */
  --l0:#E6E8E3;
  --l1:#EDEFEA;
  --l2:#F4F5F2;

  /* texto — todos verificados >= 4.5:1 sobre L0 e L1 */
  --ink:#16191B;
  --ink-medio:#565E63;
  --ink-meta:#5F666A;

  /* traço: borda antes de sombra, sempre */
  --borda:#CBCFC9;
  --borda-forte:#ADB3AD;
  --sombra:0 1px 3px rgba(0,0,0,.06);

  /* acento da família (laranja Jalon) — sobrescrito por [data-produto] */
  --acento:#EE4411;        /* grafismo: >= 3:1 sobre a tela */
  --acento-tinta:#B83A14;  /* texto: >= 4.5:1 sobre a tela */
  --acento-fill:#D14317;   /* fundo que carrega texto branco >= 4.5:1 */

  /* cena 3D da página inicial */
  --rocha:#39434A;
  --neve:#F7F8F6;

  /* tipografia */
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --p-regular:400;
  --p-medio:500;
  --p-semi:600;
  --p-display:800;          /* exceção documentada: só .display e .marca-nome */

  --t-meta:.75rem;          /* 12px — piso absoluto */
  --t-secundario:.875rem;   /* 14px */
  --t-corpo:1rem;           /* 16px */
  --t-h3:1.25rem;           /* 20px */
  --t-h2:clamp(1.5rem,3vw,2rem);
  --t-display:clamp(2.25rem,6.2vw,4.25rem);

  --lh-apertado:1.2;
  --lh-corpo:1.55;
  --lh-meta:1.4;

  /* espaço — 8pt para estrutura, 4pt para micro */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px;
  --e6:24px; --e8:32px; --e12:48px; --e16:64px; --e24:96px;

  --medida:70ch;            /* comprimento de linha de leitura */
  --quadro:1080px;
  --goteira:clamp(24px,4.5vw,48px);

  /* movimento */
  --m1:100ms; --m2:150ms; --m3:200ms; --m4:300ms;
  --saida:cubic-bezier(.16,1,.3,1);
  --entrada:cubic-bezier(.7,0,.84,0);

  --raio:2px;

  color-scheme:light;
}

/* tema escuro — por preferência do sistema ou por escolha explícita */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --l0:#0F1316; --l1:#161B1F; --l2:#1D2429;
    --ink:#E8EBE6; --ink-medio:#98A1A5; --ink-meta:#7E868A;
    --borda:#2C3338;
    --borda-forte:#434C52;
    --sombra:inset 0 1px 0 rgba(255,255,255,.06);
    --acento:#F04E23; --acento-tinta:#CE5C3A; --acento-fill:#D14317;
    --rocha:#222C32; --neve:#D7DEE0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --l0:#0F1316; --l1:#161B1F; --l2:#1D2429;
  --ink:#E8EBE6; --ink-medio:#98A1A5; --ink-meta:#7E868A;
  --borda:#2C3338;
  --borda-forte:#434C52;
  --sombra:inset 0 1px 0 rgba(255,255,255,.06);
  --acento:#F04E23; --acento-tinta:#CE5C3A; --acento-fill:#D14317;
  --rocha:#222C32; --neve:#D7DEE0;
  color-scheme:dark;
}

/* --- 2. ACENTO POR PRODUTO ---------------------------------------------
   Mesma fórmula para os seis: matiz girado, saturação fixa, luminosidade
   resolvida pelo contraste. Aplicar em <html data-produto="...">.
   ----------------------------------------------------------------------- */

/* os seis acentos também ficam disponíveis no :root, para quem precisa
   de todos ao mesmo tempo (a montanha e os pontos da lista de marcos) */
:root{
  --acento-time:#D65129;  --acento-money:#238EB6; --acento-gym:#D62946;
  --acento-chef:#8B871A;  --acento-split:#7A29D6; --acento-sip:#1D975A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --acento-split:#8033D8 }
}
:root[data-theme="dark"]{ --acento-split:#8033D8 }

[data-produto="time"] { --acento:#D65129; --acento-tinta:#B14322; --acento-fill:#C84C26 }
[data-produto="money"]{ --acento:#238EB6; --acento-tinta:#1B6E8D; --acento-fill:#1E7D9F }
[data-produto="gym"]  { --acento:#D62946; --acento-tinta:#C32540; --acento-fill:#D62946 }
[data-produto="chef"] { --acento:#8B871A; --acento-tinta:#6C6915; --acento-fill:#7B7818 }
[data-produto="split"]{ --acento:#7A29D6; --acento-tinta:#7A29D6; --acento-fill:#7A29D6 }
[data-produto="sip"]  { --acento:#1D975A; --acento-tinta:#167545; --acento-fill:#198650 }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-produto="time"] { --acento-tinta:#C96040 }
  :root:not([data-theme="light"])[data-produto="money"]{ --acento-tinta:#38A1C7 }
  :root:not([data-theme="light"])[data-produto="gym"]  { --acento-tinta:#CF566B }
  :root:not([data-theme="light"])[data-produto="chef"] { --acento-tinta:#C7C238 }
  :root:not([data-theme="light"])[data-produto="split"]{ --acento:#8033D8; --acento-tinta:#9966D4 }
  :root:not([data-theme="light"])[data-produto="sip"]  { --acento-tinta:#38C780 }
}
:root[data-theme="dark"][data-produto="time"] { --acento-tinta:#C96040 }
:root[data-theme="dark"][data-produto="money"]{ --acento-tinta:#38A1C7 }
:root[data-theme="dark"][data-produto="gym"]  { --acento-tinta:#CF566B }
:root[data-theme="dark"][data-produto="chef"] { --acento-tinta:#C7C238 }
:root[data-theme="dark"][data-produto="split"]{ --acento:#8033D8; --acento-tinta:#9966D4 }
:root[data-theme="dark"][data-produto="sip"]  { --acento-tinta:#38C780 }

/* --- 3. BASE ------------------------------------------------------------ */

*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:var(--e6)}

body{
  margin:0;
  background:var(--l0);
  color:var(--ink);
  font-family:var(--disp);
  font-size:var(--t-corpo);
  font-weight:var(--p-regular);
  line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--m4) var(--saida),color var(--m4) var(--saida);
}

::selection{background:var(--acento-fill);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--acento-tinta);outline-offset:3px}
img,svg{max-width:100%}

.quadro{max-width:var(--quadro);margin:0 auto;padding:0 var(--goteira)}
.quadro-estreito{max-width:780px;margin:0 auto;padding:0 var(--goteira)}

/* --- 4. TIPOGRAFIA ------------------------------------------------------ */

h1,h2,h3{line-height:var(--lh-apertado);margin:0 0 var(--e3)}
h1{font-size:var(--t-display);font-weight:var(--p-semi);letter-spacing:-.03em}
h2{font-size:var(--t-h2);font-weight:var(--p-semi);letter-spacing:-.025em;max-width:22ch}
h3{font-size:var(--t-h3);font-weight:var(--p-semi);letter-spacing:-.015em}

/* exceção de identidade: só o título de abertura e a assinatura da marca */
.display{font-weight:var(--p-display);letter-spacing:-.045em;line-height:1.02;max-width:16ch}

p{margin:0 0 var(--e4);max-width:var(--medida)}
strong,b{font-weight:var(--p-semi);color:var(--ink)}

.chamada{font-size:clamp(1rem,1.6vw,1.1875rem);line-height:1.5;color:var(--ink-medio);max-width:52ch}
.intro{font-size:var(--t-corpo);line-height:var(--lh-corpo);color:var(--ink-medio);max-width:58ch;margin:0}
.secundario{font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio)}

.meta{
  font-family:var(--mono);
  font-size:var(--t-meta);
  line-height:var(--lh-meta);
  color:var(--ink-meta);
  letter-spacing:.06em;
}
.meta-acento{color:var(--acento-tinta)}

/* --- 5. CABEÇALHO E MARCA ----------------------------------------------- */

.topo{padding:var(--e6) 0;border-bottom:1px solid var(--borda)}
.topo .quadro{display:flex;align-items:center;justify-content:space-between;gap:var(--e4)}

.trava{display:flex;align-items:center;gap:var(--e2);text-decoration:none;min-height:44px}
.marca{width:15px;height:22px;display:block;overflow:visible;flex:none}
.marca .mastro{fill:var(--ink)}
.marca .galhardete{fill:var(--acento)}
.marca-nome{font-size:var(--t-corpo);font-weight:var(--p-semi);letter-spacing:-.02em}

.nav{display:flex;align-items:center;gap:var(--e4)}
.elo{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  color:var(--ink-meta);text-decoration:none;transition:color var(--m2) var(--saida);
}
.elo:hover{color:var(--acento-tinta)}

.tema{
  position:relative;width:32px;height:32px;flex:none;
  border:1px solid var(--borda);background:transparent;border-radius:100px;
  cursor:pointer;color:var(--ink-medio);display:grid;place-items:center;padding:0;
  transition:color var(--m2) var(--saida),border-color var(--m2) var(--saida);
}
/* anel visual de 32px, área de toque de 44px */
.tema::after{content:"";position:absolute;inset:-6px;border-radius:100px}
.tema:hover{color:var(--acento-tinta);border-color:var(--borda-forte)}
.tema svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.tema .lua{display:none}
:root[data-theme="dark"] .tema .sol{display:none}
:root[data-theme="dark"] .tema .lua{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tema .sol{display:none}
  :root:not([data-theme="light"]) .tema .lua{display:block}
}

/* --- 6. ABERTURA -------------------------------------------------------- */

.heroi{padding:var(--e12) 0 var(--e16)}

.fita{
  display:inline-block;
  background:var(--acento-fill);color:#fff;
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  letter-spacing:.12em;
  padding:var(--e1) var(--e6) var(--e1) var(--e3);
  margin-bottom:var(--e6);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);
}

.verbete{
  font-family:var(--mono);font-size:var(--t-meta);line-height:1.7;
  color:var(--ink-meta);max-width:46ch;margin:var(--e4) 0 0;
}

/* --- 7. SEÇÕES ---------------------------------------------------------- */

section{padding:var(--e16) 0;border-top:1px solid var(--borda)}
section.chapa{background:var(--l1)}

/* --- 8. GRADE DE CARTÕES (superfície L1 com fiapo de 1px) --------------- */

.grade{
  display:grid;gap:1px;margin-top:var(--e8);
  background:var(--borda);border:1px solid var(--borda);
}
@media (min-width:640px){ .grade{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .grade-3{grid-template-columns:repeat(3,1fr)} }

.bloco{background:var(--l1);padding:var(--e6);transition:background var(--m3) var(--saida)}
.bloco:hover{background:var(--l2)}
/* hierarquia por ênfase, não por tamanho de célula: seis cartões com um
   ocupando duas colunas sempre deixa buraco na grade */
.bloco.lider{background:var(--l2);box-shadow:inset 2px 0 0 var(--acento)}
.bloco.lider h3{font-size:var(--t-h3);color:var(--ink)}
.bloco.lider p{font-size:var(--t-corpo);color:var(--ink-medio)}

/* seção em acento cheio — usar no máximo uma por página */
section.faixa{background:var(--acento-fill);border-top:0}
section.faixa h2,section.faixa .intro,section.faixa .meta,
section.faixa .pilha-tec,section.faixa strong{color:#fff}
section.faixa .intro,section.faixa .pilha-tec{opacity:.88}
section.faixa .chamar{background:#fff;color:var(--acento-fill)}
section.faixa .chamar::after{background:var(--ink)}
section.faixa .chamar:hover em{color:#fff}
.bloco svg.glifo{
  width:28px;height:28px;display:block;margin-bottom:var(--e4);
  fill:none;stroke:var(--acento);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.bloco h3{margin:0 0 var(--e2)}
.bloco p{margin:0;font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio)}

/* tecnologia e metadado estático: texto corrido, nunca pílula */
.pilha-tec{
  margin:var(--e3) 0 0;font-family:var(--mono);font-size:var(--t-meta);
  line-height:var(--lh-meta);color:var(--ink-meta);letter-spacing:.04em;
}

/* --- 8b. SELOS DE CONFIANÇA --------------------------------------------- */

.selos{
  display:grid;gap:1px;margin-top:var(--e8);
  background:var(--borda);border:1px solid var(--borda);
}
@media (min-width:700px){ .selos{grid-template-columns:repeat(3,1fr)} }
.selos > div{background:var(--l1);padding:var(--e4)}
.selos b{display:block;font-weight:var(--p-semi);font-size:var(--t-corpo);letter-spacing:-.015em;margin-bottom:var(--e1)}
.selos span{display:block;font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio)}

/* --- 8c. PERGUNTAS ------------------------------------------------------ */

.perguntas{
  display:grid;gap:1px;margin-top:var(--e8);
  background:var(--borda);border:1px solid var(--borda);
}
.perguntas details{background:var(--l1)}
.perguntas summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  min-height:44px;padding:var(--e3) var(--e4);cursor:pointer;list-style:none;
  font-size:var(--t-corpo);font-weight:var(--p-medio);letter-spacing:-.015em;
  transition:background var(--m2) var(--saida);
}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{
  content:"+";flex:none;font-family:var(--mono);font-size:var(--t-corpo);
  color:var(--acento-tinta);line-height:1;
}
.perguntas details[open] summary::after{content:"\2212"}
.perguntas summary:hover{background:var(--l2)}
.perguntas details[open] summary{background:var(--l2)}
.perguntas .resposta{padding:0 var(--e4) var(--e4);margin:0;max-width:var(--medida)}
.perguntas .resposta p{
  margin:var(--e2) 0 0;font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio);
}

/* --- 9. LISTA DE MARCOS ------------------------------------------------- */

.marcos{
  list-style:none;margin:var(--e6) 0 0;padding:0;display:grid;gap:1px;
  background:var(--borda);border:1px solid var(--borda);
}
@media (min-width:520px){ .marcos{grid-template-columns:1fr 1fr} }
.marcos li{
  background:var(--l1);padding:var(--e3) var(--e4);
  display:flex;align-items:baseline;gap:var(--e3);
  transition:background var(--m2) var(--saida);
}
.marcos li .ponto{
  width:8px;height:8px;flex:none;border-radius:100px;
  background:var(--cor,var(--acento));align-self:center;
}
.marcos li .dominio{flex:1}
.marcos li[data-slug]{cursor:default}
.marcos li.aceso{background:var(--l2)}
.marcos .dominio{font-size:var(--t-corpo);letter-spacing:-.01em;color:var(--ink)}
.marcos .quando{
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  letter-spacing:.06em;color:var(--ink-meta);
}
.marcos li.proximo .quando{color:var(--acento-tinta)}

/* --- 10. COLUNAS COM FIO ------------------------------------------------ */

.fios{display:grid;gap:var(--e6);margin-top:var(--e8)}
@media (min-width:700px){ .fios{grid-template-columns:1fr 1fr;gap:var(--e8)} }
@media (min-width:980px){ .fios-3{grid-template-columns:repeat(3,1fr)} }
.fios > div{border-left:2px solid var(--borda);padding-left:var(--e4)}
.fios > div.forte{border-left-color:var(--acento)}
.fios b{display:block;font-weight:var(--p-semi);font-size:var(--t-corpo);margin-bottom:var(--e1);letter-spacing:-.015em}
.fios span{font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio)}

/* --- 11. PASSOS NUMERADOS ----------------------------------------------- */

.passos{counter-reset:p;display:grid;gap:var(--e6);margin-top:var(--e8)}
@media (min-width:800px){ .passos{grid-template-columns:repeat(4,1fr)} }
.passos > div{counter-increment:p;border-top:2px solid var(--borda);padding-top:var(--e3)}
.passos > div:first-child{border-top-color:var(--acento)}
.passos > div::before{
  content:"0" counter(p);display:block;margin-bottom:var(--e2);
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-meta);
}
.passos b{display:block;font-weight:var(--p-semi);font-size:var(--t-corpo);margin-bottom:var(--e1)}
.passos span{font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio)}

/* --- 12. AÇÕES ---------------------------------------------------------- */

.acoes{display:flex;flex-wrap:wrap;gap:var(--e4);align-items:center;margin-top:var(--e6)}

.chamar{
  display:inline-flex;align-items:center;position:relative;overflow:hidden;
  background:var(--ink);color:var(--l0);
  font-weight:var(--p-medio);font-size:var(--t-corpo);line-height:1.2;
  padding:var(--e3) var(--e6);border-radius:var(--raio);text-decoration:none;
  min-height:44px;border:0;cursor:pointer;font-family:var(--disp);
}
.chamar em{position:relative;z-index:2;font-style:normal;transition:color var(--m3) var(--saida)}
.chamar::after{
  content:"";position:absolute;inset:0;background:var(--acento-fill);
  transform:translateY(101%);transition:transform var(--m3) var(--saida);
}
.chamar:hover::after{transform:translateY(0)}
.chamar:hover em{color:#fff}

.chamar-vazado{
  background:transparent;color:var(--ink);border:1px solid var(--borda-forte);
}

.selo{font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-meta)}

/* --- 13. FORMULÁRIOS ---------------------------------------------------- */

.campo{display:grid;gap:var(--e1);margin-bottom:var(--e4)}
.campo label{
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  letter-spacing:.06em;color:var(--ink-medio);
}
.campo input,.campo textarea,.campo select{
  font-family:var(--disp);font-size:var(--t-corpo);line-height:var(--lh-corpo);
  color:var(--ink);background:var(--l1);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e3);width:100%;min-height:44px;
  transition:border-color var(--m2) var(--saida);
}
.campo textarea{min-height:112px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--acento-tinta)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-meta)}
.campo.erro input,.campo.erro textarea{border-color:var(--acento-tinta)}
.aviso{
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  color:var(--acento-tinta);min-height:1.4em;margin:0 0 var(--e2);
}
.estado{
  font-family:var(--mono);font-size:var(--t-meta);line-height:1.7;
  color:var(--ink-medio);min-height:1.7em;margin:var(--e2) 0 0;
}
.estado a{color:var(--acento-tinta)}

/* --- 14. RODAPÉ --------------------------------------------------------- */

.rodape{
  padding:var(--e6) 0 var(--e12);border-top:1px solid var(--borda);
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-meta);
}
.rodape .quadro{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);justify-content:space-between;align-items:center}
.rodape a{text-decoration:none;transition:color var(--m2) var(--saida)}
.rodape a:hover{color:var(--acento-tinta)}

/* --- 15. AVISO DE PÁGINA NÃO DIVULGADA ---------------------------------- */

.rascunho{
  background:var(--ink);color:var(--l0);
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);
  letter-spacing:.08em;text-align:center;padding:var(--e2) var(--e4);
}

/* --- 16. MOVIMENTO ------------------------------------------------------ */

.surge{
  opacity:0;transform:translateY(8px);
  transition:opacity var(--m4) var(--saida),transform var(--m4) var(--saida);
}
.surge.visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .surge{opacity:1;transform:none}
}

/* --- 17. PROSA LEGAL ---------------------------------------------------- */

.prosa section{padding-top:var(--e12);border-top:0}
.prosa h2{
  font-size:clamp(1.3125rem,2.6vw,1.6875rem);
  padding-top:var(--e6);border-top:1px solid var(--borda);margin-bottom:var(--e3);
}
.prosa h3{font-size:var(--t-corpo);margin:var(--e6) 0 var(--e2)}
.prosa p,.prosa li{font-size:var(--t-corpo);line-height:1.62;color:var(--ink-medio)}
.prosa ul,.prosa ol{margin:0 0 var(--e4);padding-left:var(--e4);display:grid;gap:var(--e2)}
.prosa .nota{
  font-family:var(--mono);font-size:var(--t-meta);line-height:1.75;color:var(--ink-meta);
  border-left:2px solid var(--borda);padding-left:var(--e3);margin:var(--e4) 0;max-width:var(--medida);
}
.prosa .nota.forte{border-left-color:var(--acento)}

.caixa{background:var(--l1);border:1px solid var(--borda);padding:var(--e6);box-shadow:var(--sombra)}
.caixa p{margin:0 0 var(--e2)}
.caixa p:last-child{margin:0}
.caixa a{color:var(--acento-tinta);text-decoration:none}
.caixa a:hover{text-decoration:underline}

.indice{
  margin:var(--e8) 0 0;padding:var(--e4) 0 0;list-style:none;display:grid;gap:var(--e1);
  border-top:1px solid var(--borda);
}
.indice a{
  font-family:var(--mono);font-size:var(--t-meta);line-height:1.9;
  color:var(--ink-medio);text-decoration:none;
}
.indice a:hover{color:var(--acento-tinta)}
.indice a span{color:var(--ink-meta);display:inline-block;width:2.4em}

.tabela-caixa{overflow-x:auto;margin:var(--e4) 0;border:1px solid var(--borda)}
table{border-collapse:collapse;width:100%;min-width:560px;background:var(--l1)}
th,td{
  text-align:left;padding:var(--e3) var(--e4);border-bottom:1px solid var(--borda);
  vertical-align:top;font-size:var(--t-secundario);line-height:var(--lh-corpo);color:var(--ink-medio);
}
th{
  font-family:var(--mono);font-size:var(--t-meta);line-height:var(--lh-meta);letter-spacing:.06em;
  color:var(--ink-meta);font-weight:var(--p-regular);background:var(--l2);
}
td:first-child{color:var(--ink);font-weight:var(--p-medio)}
tr:last-child td{border-bottom:0}

/* --- 18. UTILITÁRIOS ---------------------------------------------------- */

.centro{text-align:center}
.centro h2,.centro .intro{margin-left:auto;margin-right:auto}
.centro .acoes{justify-content:center}
.empilha{display:grid;gap:var(--e4)}