/* ===========================================================================
DIAMANTE — Sistema de design compartilhado · Arqpedia Estrutura
---------------------------------------------------------------------------
FUNDAÇÃO visual que TODOS os módulos da experiência SOTA consomem.
Extraído e refinado do protótipo (entregavel/diamante-experiencia.html).
Estética: instrumento de precisão em creme/terracota — calmo, confiante,
denso de respiro. Resposta-primeiro · divulgação progressiva · 0 AI-slop.
COMO USAR
---------
1. no (carrega as fontes).
2. Marque o tom semântico do RESULTADO no container raiz com data-verdict:
-> ATENDE (verde)
-> REVISAR (âmbar)
-> NÃO PASSA(vermelho)
Isso pinta .verdict .band, .seal e .vlabel sem trocar de classe.
NUNCA escreva "aprovado" — use ATENDE / REVISAR / NÃO PASSA.
3. JS injeta números/linhas; o CSS já cuida de tipografia/cor/sombra.
ÍNDICE DE CLASSES (contrato para os módulos-irmãos)
---------------------------------------------------------------------------
LAYOUT .wrap (max 1080, gutters) · .mono (tabular nums) · .hide
TOPO header.top > .wrap · .brand > .mark · .top nav a · .top .free
HERO .hero .eyebrow(.dot) h1.title(em) .sub .hero-foot
ENTRADA .ask > input + .go · .chips > .chip (project-first)
RESULTADO .result[data-verdict] (animação rise de entrada)
VEREDITO .verdict > .band(.seal,.vtext>.vlabel/.vsub,.actions)
NÚMEROS .headline > .n(.v>small,.k,.spark>i) (4 cabeçalhos)
DISCLOSURE .disclose > details.sec > summary(.ix,.stit,.smeta) + .body
PILLS/TAGS .pill(.ok/.rev/.no) · .tag(.ok/.rev/.no) · .chev
BOTÕES .btn(.primary / .ghost)
TABELA table th td .num · .bar(.hi/.no) > i
CROQUI .croqui > svg + .legend > span > .sw (ad-free)
TRILHO .trail > .clause (chip § NBR rastreável) · .adfree (fixo)
ERRO .notice(.warn/.err) > .ntitle + texto (erro amigável)
FOOTER footer.disc > .wrap
A11Y :focus-visible em tudo que é interativo; prefers-reduced-motion
=========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,500;9..144,0,600;9..144,0,700;9..144,1,600&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap');
/* ---------- tokens ---------- */
:root{
/* tinta / texto */
--ink:#211d17; --ink-2:#5d564a; --muted:#8a8173;
/* linhas / superfícies */
--line:#e3dccb; --line-2:#cfc6b2;
--paper:#f6f1e6; --paper-2:#fbf8f0; --card:#fffdf8;
/* terracota (marca) */
--terra:#bb4d2a; --terra-d:#943a1c; --terra-l:#e7a384;
/* semânticos — veredito (NUNCA "aprovado") */
--ok:#2f7d54; --ok-bg:#e8f3ec; --ok-line:#bfe0cc; /* ATENDE */
--rev:#b07d12; --rev-bg:#f8efd8; --rev-line:#e6d3a0; /* REVISAR */
--no:#b53527; --no-bg:#f8e6e3; --no-line:#eecac3; /* NÃO PASSA*/
/* profundidade */
--shadow:0 1px 2px rgba(33,29,23,.04),0 8px 30px rgba(33,29,23,.07);
--shadow-lg:0 2px 6px rgba(33,29,23,.06),0 30px 70px rgba(33,29,23,.13);
--ring:0 0 0 3px rgba(187,77,42,.32); /* foco-visível terracota */
/* forma / ritmo */
--r:16px; --r-sm:9px; --r-lg:22px;
--fast:.18s; --slow:.7s cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Spline Sans',system-ui,sans-serif;color:var(--ink);
background:radial-gradient(120% 80% at 50% -10%, #fdfaf2 0%, var(--paper) 55%, #efe7d6 100%) fixed;
line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
}
.mono{font-family:'Spline Sans Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.hide{display:none !important}
/* grão de papel sutil (fixo, sob o conteúdo) */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;opacity:.4;z-index:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
/* foco-visível universal (a11y) — anel terracota, sem matar o mouse */
:where(a,button,input,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
/* ---------- top bar ---------- */
header.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
background:rgba(246,241,230,.82);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,var(--terra),var(--terra-d));
display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:0 3px 10px rgba(187,77,42,.4);transform:rotate(-4deg)}
.brand small{color:var(--muted);font-weight:400;font-family:'Spline Sans';font-size:12px;letter-spacing:.02em}
.top nav{display:flex;gap:8px;align-items:center}
.top nav a{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:9px;transition:background var(--fast),color var(--fast)}
.top nav a:hover{background:var(--card);color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--terra-d);font-weight:600}
.top .free{font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-bg);padding:5px 11px;border-radius:20px;border:1px solid var(--ok-line);white-space:nowrap}
/* ---------- hero / entrada ---------- */
.hero{position:relative;z-index:1;padding:72px 0 36px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
color:var(--terra-d);background:#fff;border:1px solid var(--line-2);padding:7px 15px;border-radius:30px;margin-bottom:26px;box-shadow:var(--shadow)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg)}
h1.title{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(38px,6.4vw,68px);line-height:1.02;letter-spacing:-.025em;margin-bottom:20px}
h1.title em{font-style:italic;color:var(--terra-d);position:relative}
h1.title em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em;background:var(--terra-l);opacity:.5;border-radius:2px;z-index:-1}
.sub{font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:620px;margin:0 auto 40px;font-weight:400}
.sub b{color:var(--ink);font-weight:600}
/* entrada project-first: 1 pergunta */
.ask{max-width:680px;margin:0 auto;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
padding:10px 10px 10px 24px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg);position:relative}
.ask::before{content:"";position:absolute;inset:-1px;border-radius:23px;padding:1px;pointer-events:none;
background:linear-gradient(135deg,rgba(231,163,132,.5),transparent 40%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ask input{flex:1;border:none;background:none;font-family:'Spline Sans';font-size:16.5px;color:var(--ink);outline:none;min-width:0}
.ask input::placeholder{color:var(--muted)}
.ask .go{border:none;cursor:pointer;background:linear-gradient(145deg,var(--terra),var(--terra-d));color:#fff;
font-family:'Spline Sans';font-weight:600;font-size:15px;padding:15px 26px;border-radius:15px;display:flex;gap:9px;align-items:center;
box-shadow:0 5px 18px rgba(187,77,42,.38);transition:transform var(--fast),box-shadow var(--fast)}
.ask .go:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(187,77,42,.46)}
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chip{font-size:13px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:8px 14px;border-radius:20px;cursor:pointer;
transition:border-color var(--fast),color var(--fast),background var(--fast)}
.chip:hover{border-color:var(--terra-l);color:var(--terra-d);background:#fff}
.hero-foot{margin-top:30px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.hero-foot span{display:flex;align-items:center;gap:7px}
.hero-foot b{color:var(--ink-2);font-weight:600}
/* ---------- RESULTADO: resposta-primeiro ---------- */
.result{position:relative;z-index:1;padding:14px 0 90px;animation:rise var(--slow) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.verdict{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.verdict .band{display:flex;align-items:center;gap:18px;padding:26px 30px;border-bottom:1px solid var(--line)}
.verdict .seal{width:60px;height:60px;border-radius:15px;background:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--shadow)}
.verdict .seal svg{width:32px;height:32px;stroke-width:2.4;fill:none}
.verdict .vtext .vlabel{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.verdict .vtext .vsub{font-size:14px;color:var(--ink-2);margin-top:2px}
.verdict .vtext .vsub b{color:var(--ink)}
.verdict .actions{margin-left:auto;display:flex;gap:10px;flex-shrink:0}
/* tom semântico do veredito dirigido por data-verdict no .result (default = ok) */
.result[data-verdict="ok"] .verdict .band{background:linear-gradient(100deg,var(--ok-bg),transparent 70%)}
.result[data-verdict="ok"] .verdict .seal{border:1px solid var(--ok-line)} .result[data-verdict="ok"] .verdict .seal svg{stroke:var(--ok)}
.result[data-verdict="ok"] .verdict .vlabel{color:var(--ok)}
.result[data-verdict="rev"] .verdict .band{background:linear-gradient(100deg,var(--rev-bg),transparent 70%)}
.result[data-verdict="rev"] .verdict .seal{border:1px solid var(--rev-line)} .result[data-verdict="rev"] .verdict .seal svg{stroke:var(--rev)}
.result[data-verdict="rev"] .verdict .vlabel{color:var(--rev)}
.result[data-verdict="no"] .verdict .band{background:linear-gradient(100deg,var(--no-bg),transparent 70%)}
.result[data-verdict="no"] .verdict .seal{border:1px solid var(--no-line)} .result[data-verdict="no"] .verdict .seal svg{stroke:var(--no)}
.result[data-verdict="no"] .verdict .vlabel{color:var(--no)}
/* sem data-verdict: trata como ok p/ não quebrar quem ainda não setou */
.result:not([data-verdict]) .verdict .band{background:linear-gradient(100deg,var(--ok-bg),transparent 70%)}
.result:not([data-verdict]) .verdict .seal{border:1px solid var(--ok-line)} .result:not([data-verdict]) .verdict .seal svg{stroke:var(--ok)}
.result:not([data-verdict]) .verdict .vlabel{color:var(--ok)}
/* números de cabeçalho (4) */
.headline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)}
.headline .n{padding:22px 26px;border-right:1px solid var(--line)}
.headline .n:last-child{border-right:none}
.headline .n .v{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1}
.headline .n .v small{font-size:15px;color:var(--muted);font-weight:500}
.headline .n .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:8px}
.headline .n .spark{height:3px;border-radius:2px;background:var(--line);margin-top:11px;overflow:hidden}
.headline .n .spark i{display:block;height:100%;background:var(--terra);border-radius:2px}
/* divulgação progressiva — acordeão de seções */
.disclose{margin-top:16px;display:flex;flex-direction:column;gap:12px}
details.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;transition:border-color var(--fast),box-shadow var(--fast)}
details.sec[open]{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
details.sec summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:19px 24px;user-select:none}
details.sec summary::-webkit-details-marker{display:none}
.sec .ix{width:30px;height:30px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--terra-d);font-family:'Fraunces',serif;font-weight:600;font-size:14px;flex-shrink:0}
.sec .stit{font-family:'Fraunces',serif;font-weight:600;font-size:17px;letter-spacing:-.01em}
.sec .smeta{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.chev{transition:transform .25s;color:var(--muted);flex-shrink:0}
details[open] .chev{transform:rotate(180deg)}
.sec .body{padding:4px 24px 24px;border-top:1px solid var(--line);animation:fade .35s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* pills (status compacto no resumo da seção) */
.pill{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid;white-space:nowrap}
.pill.ok {color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.pill.rev{color:var(--rev);background:var(--rev-bg);border-color:var(--rev-line)}
.pill.no {color:var(--no); background:var(--no-bg); border-color:var(--no-line)}
/* botões */
.btn{cursor:pointer;font-family:'Spline Sans';font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);
transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast);display:flex;gap:8px;align-items:center;white-space:nowrap}
.btn:hover{border-color:var(--terra-l)}
.btn.primary{background:linear-gradient(145deg,var(--terra),var(--terra-d));color:#fff;border:none;box-shadow:0 5px 16px rgba(187,77,42,.34)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(187,77,42,.42)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2);padding:12px 12px}
.btn.ghost:hover{color:var(--terra-d);border-color:transparent}
/* tabela de elementos */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px;border-bottom:1px solid var(--line-2);font-weight:600}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(187,77,42,.03)}
.num{text-align:right}
.bar{height:7px;width:90px;background:var(--line);border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.bar.hi i{background:var(--rev)}
.bar.no i{background:var(--no)}
/* tag = status inline na linha da tabela */
.tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid;color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line);white-space:nowrap}
.tag.rev{color:var(--rev);background:var(--rev-bg);border-color:var(--rev-line)}
.tag.no {color:var(--no); background:var(--no-bg); border-color:var(--no-line)}
/* croqui (SVG to-scale) — sempre ad-free */
.croqui{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.croqui svg{background:#fff;border:1px solid var(--line);border-radius:8px;max-width:100%;height:auto}
.legend{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.legend span{display:flex;align-items:center;gap:8px}
.legend .sw{width:14px;height:3px;border-radius:2px;flex-shrink:0}
/* trilho § rastreável */
.trail{font-size:11.5px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trail .clause{font-family:'Spline Sans Mono';font-size:10.5px;color:#fff;background:var(--terra-d);padding:2px 7px;border-radius:5px;white-space:nowrap}
/* selo ad-free fixo (zona livre de anúncio no canvas/prancha) */
.adfree{position:fixed;bottom:18px;right:18px;z-index:5;font-size:11px;color:var(--muted);background:rgba(255,253,248,.9);
border:1px solid var(--line);border-radius:20px;padding:7px 13px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
/* mensagem amigável (erro / aviso — NUNCA stack trace) */
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;border:1px solid;font-size:13.5px;color:var(--ink-2)}
.notice .ntitle{font-family:'Fraunces',serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.notice.warn{background:var(--rev-bg);border-color:var(--rev-line)} .notice.warn .ntitle{color:var(--rev)}
.notice.err {background:var(--no-bg); border-color:var(--no-line)} .notice.err .ntitle{color:var(--no)}
/* footer disclaimer */
footer.disc{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(251,248,240,.6)}
footer.disc .wrap{padding:24px 28px;font-size:12px;color:var(--muted)}
footer.disc b{color:var(--ink-2)}
/* ---------- responsivo: grid colapsa em mobile ---------- */
@media(max-width:720px){
.wrap{padding:0 18px}
.top nav a:not([data-keep]){display:none} /* nav enxuta no mobile */
.headline{grid-template-columns:1fr 1fr}
.headline .n:nth-child(2n){border-right:none}
.headline .n:nth-child(-n+2){border-bottom:1px solid var(--line)}
.verdict .band{flex-wrap:wrap}
.verdict .actions{margin-left:0;width:100%}
.verdict .actions .btn{flex:1;justify-content:center}
.ask{flex-direction:column;align-items:stretch;padding:16px}
.ask .go{justify-content:center}
.sec .smeta{display:none} /* meta some, só título+chevron */
.sec summary{padding:16px 18px}
.sec .body{padding:4px 18px 18px}
}
@media(max-width:420px){
.headline{grid-template-columns:1fr}
.headline .n{border-right:none;border-bottom:1px solid var(--line)}
.headline .n:last-child{border-bottom:none}
}
/* respeita quem pede menos movimento */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}