/* ds.css — CÓPIA LITERAL de R2/manual/manual_ds.css (extração verbatim do manual v4).
   P0 FUNDAÇÃO, 16/09/2026. NÃO EDITAR VALOR NENHUM AQUI: esta folha é a fonte do manual.
   Ajuste do site que vive fora dela: assets/site.css.
   Única troca de caminho (não de valor), registrada em content/EXCECOES_MANUAL.md (D6):
     --u-wm-art: brand/umind-logo-mono-white.svg  ->  /assets/marca-mascara.svg
*/
/* ============================================================================
   UMIND SALES — DESIGN SYSTEM DO SITE, extraído VERBATIM do
   docs/branding/MANUAL_DE_MARCA_UMIND_SALES_V4.html (v4.0, jul/2026, 7.929 linhas)
   Gerado por INV-M em 2026-09-16. Cada bloco cita as linhas de origem.
   Regras de renomeação (documentadas bloco a bloco):
     · `.s112 ` (escopo da §11.2, l.1835-1840, existia só para o documento) foi REMOVIDO:
       .s112 .bg-f1 -> .bg-f1 · .s112 .bc__blk -> .bc__blk · .s112 .rd__f -> .rd__f · etc.
     · sombras de cartão em dobra clara (l.2378-2381, publicadas soltas em <pre>) viraram
       .card-on-light e .card-on-light--destaque.
     · font-family: Inter passa a ser a 1ª da pilha (autorizado em l.14, l.1014-1020, l.5605).
       NADA MAIS mudou de valor.
   Fontes: o manual carrega SF Pro em public/fonts (l.15-24). Para o site: Inter via Google Fonts
   ou self-host; as @font-face da SF Pro NÃO viajam (licença Apple, CLAUDE.md §07.2).
   ============================================================================ */
/* ==== TOKENS :root (tema escuro canônico) · manual linhas 26-93 ==== */
:root{
  /* SITE PÚBLICO: Inter como família de reserva homologada (manual l.14, l.1014-1015, l.1020 e l.5605 "peça produzida por terceiro usa Inter, nunca SF Pro").
     Ordem original do manual (l.27-28): "SF Pro Display", Inter, ... — aqui Inter vem primeiro. */
  --font-display: "Inter Display", Inter, "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text:    Inter, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* ---------- MARCA ---------- */
  --u-red:            #DD0B17;  /* CAMPO · imutável */
  --u-red-900:        #43060B;  /* fim do gradiente do logotipo */
  --u-red-ink-dark:   #FF544A;  /* TINTA · tema escuro */
  --u-red-ink-light:  #B50F14;  /* TINTA · tema claro */
  --u-red-para-dark:  #FF8C81;  /* TINTA de parágrafo longo · tema escuro */
  --u-on-field-brand: #FFFFFF;  /* tinta obrigatória sobre campo vermelho */
  --u-gradient: linear-gradient(135deg, #DD0B17 0%, #43060B 100%);
  /* campo vermelho de BLOCO — a base adensa até o vinho. O topo permanece
     #DD0B17 exato: clarear o topo derruba o branco de 5,08:1 para 4,35:1. */
  --u-gradient-block: radial-gradient(135% 108% at 50% -12%,
    #DD0B17 0%, #C50A14 40%, #7E0810 73%, #43060B 100%);
  --u-silver-grad: linear-gradient(180deg, #FFFFFF 0%, #E4E4E7 46%, #8E8E93 100%);
  /* marca d'água — o logotipo vazado vira MÁSCARA, por isso a tinta é livre */
  --u-wm-art: url("/assets/marca-mascara.svg");
  --u-wm-ink: #FFFFFF; --u-wm-alpha:.08;
  --u-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* ---------- CARBONO ---------- */
  --u-bg-deep:  #0A0A0C;
  --u-bg:       #18181B;
  --u-well:     #141417;
  --u-surface:  #1F1F23;
  --u-surface-hi:#27272A;
  --u-surface-hover:  #26262B;
  --u-surface-active: #2E2E34;
  --u-surface-selected:#2C171B;

  /* ---------- BORDAS (três papéis distintos) ---------- */
  --u-border-subtle:  #33333A;  /* decorativo — 1,41:1, proposital */
  --u-border-default: #3F3F46;  /* decorativo — 1,70:1, proposital */
  --u-border-emphasis:#71717A;  /* CONTROLE — 3,67:1, atende SC 1.4.11 */
  --u-hairline: rgba(255,255,255,.09);
  --u-scrim: rgba(0,0,0,.60);

  /* ---------- TEXTO ---------- */
  --u-text:     #F0F0F0;
  --u-text-2:   #B4BCC8;  /* conteúdo real */
  --u-text-3:   #9CA3AF;  /* apoio */
  --u-text-dis: #8E8E93;  /* desabilitado / placeholder */

  /* ---------- SEMÂNTICOS ---------- */
  --u-success:  #2ED3A7;
  --u-warning:  #FF9F0A;
  --u-info:     #0A84FF;
  --u-info-ink: #5AA9FF;
  --u-on-solid: #0A0A0C;  /* tinta sobre campo verde, laranja ou azul */

  /* ---------- PRESENÇA ---------- */
  --u-live:     #FF2800;
  --u-idle:     #FF9F0A;
  --u-busy:     #FF544A;
  --u-offline:  #8E8E93;

  /* ---------- GRÁFICOS ---------- */
  --u-viz-1:#3A83ED; --u-viz-2:#F1C627; --u-viz-3:#4EDBE2; --u-viz-4:#BF8C5F;
  --u-viz-5:#BB95F3; --u-viz-6:#5BCC7A; --u-viz-7:#FB63C2; --u-viz-other:#7E7E92;

  --u-focus: #FFFFFF;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --ease: cubic-bezier(0.32,0.72,0,1);
}

/* ==== TOKENS tema claro html[data-theme=light] · manual linhas 95-106 ==== */
html[data-theme="light"]{
  --u-bg-deep:#F2F2F2; --u-bg:#FFFFFF; --u-well:#F4F4F5; --u-surface:#F9FAFB; --u-surface-hi:#F4F4F5;
  --u-surface-hover:#F4F4F5; --u-surface-active:#EBEBED; --u-surface-selected:#FDECEC;
  --u-border-subtle:#E7E7EA; --u-border-default:#D8D8DC; --u-border-emphasis:#8E8E93;
  --u-hairline: rgba(24,24,27,.06); --u-scrim: rgba(24,24,27,.45);
  --u-text:#18181B; --u-text-2:#4B5563; --u-text-3:#6C6C70; --u-text-dis:#9CA3AF;
  --u-red-ink-dark:#B50F14; --u-red-para-dark:#8A0A10;
  --u-success:#007A5F; --u-warning:#8C5400; --u-info:#0057D9; --u-info-ink:#0057D9;
  --u-focus:#18181B;
  --u-silver-grad: linear-gradient(180deg, #18181B 0%, #3F3F46 46%, #52525B 100%);
  --u-wm-ink:#18181B; --u-wm-alpha:.06;
}

/* ==== §09.6 LIQUID GLASS (4 camadas) · manual linhas 113-188 ==== */
:root{
  --ug-radius:22px; --ug-rim:14px;
  --ug-fill:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 40%, rgba(255,255,255,.022) 100%),
    linear-gradient(180deg, rgba(31,31,35,.46) 0%, rgba(10,10,12,.58) 100%);
  --ug-backdrop: blur(28px) saturate(170%) brightness(1.06);
  --ug-edge-top:rgba(255,255,255,.46); --ug-edge-side:rgba(255,255,255,.16); --ug-edge-bottom:rgba(255,255,255,.05);
  --ug-spec-a:rgba(255,255,255,.50); --ug-spec-b:rgba(255,255,255,.22);
  --ug-spec-blend:plus-lighter; --ug-spec-opacity:.9;
  --ug-inner-top:rgba(255,255,255,.30); --ug-inner-bottom:rgba(0,0,0,.28);
  --ug-shadow: 0 1px 1px rgba(0,0,0,.24), 0 10px 24px -10px rgba(0,0,0,.55), 0 30px 64px -24px rgba(0,0,0,.70);
  --ug-rim-backdrop: blur(2px) brightness(1.22) saturate(150%);  /* escuro: CONCENTRA luz */
  --ug-solid:#1F1F23;
}
html[data-theme="light"]{
  /* Branco de ALTA opacidade. É o que elimina o cinza-rosado leitoso. */
  --ug-fill: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.64) 100%);
  --ug-backdrop: blur(20px) saturate(200%) brightness(1.03) contrast(1.04);
  --ug-edge-top:rgba(255,255,255,.98); --ug-edge-side:rgba(24,24,27,.09); --ug-edge-bottom:rgba(24,24,27,.13);
  --ug-spec-a:rgba(255,255,255,.85); --ug-spec-b:rgba(255,255,255,.30);
  --ug-spec-blend:soft-light; --ug-spec-opacity:.75;
  --ug-inner-top:rgba(255,255,255,.95); --ug-inner-bottom:rgba(24,24,27,.06);
  /* A 4ª camada era rgba(181,15,20,.10) — vermelho da marca a 10% sobre superfície
     clara, que é exatamente o que a REGRA QUE MATA O ROSA proíbe. Medido em
     31/07/2026: sobre branco compõe #F8E7E8, HSL 356° com 55% de saturação —
     rosa. Trocada pelo mesmo carbono frio das outras três camadas, que é o
     recurso correto de profundidade em fundo claro. */
  --ug-shadow: 0 1px 1px rgba(24,24,27,.05), 0 8px 20px -8px rgba(24,24,27,.14),
               0 28px 56px -22px rgba(24,24,27,.18), 0 24px 60px -30px rgba(24,24,27,.10);
  --ug-rim-backdrop: blur(3px) brightness(.965) saturate(185%);  /* claro: ADENSA */
  --ug-solid:#FFFFFF;
}
.umind-glass{
  position:relative; z-index:0; box-sizing:border-box;
  border-radius:var(--ug-radius); padding:24px; color:var(--u-text);
  background:transparent; box-shadow:var(--ug-shadow);
}
.umind-glass__pane{
  position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background-image:var(--ug-fill);
  -webkit-backdrop-filter:var(--ug-backdrop); backdrop-filter:var(--ug-backdrop);
  box-shadow: inset 0 1px 0 0 var(--ug-inner-top), inset 0 -1px 0 0 var(--ug-inner-bottom);
}
.umind-glass__lens{  /* refração do bisel — a luz dobra aqui */
  position:absolute; inset:0; z-index:1; box-sizing:border-box; pointer-events:none;
  padding:var(--ug-rim); border-radius:inherit;
  -webkit-backdrop-filter:var(--ug-rim-backdrop); backdrop-filter:var(--ug-rim-backdrop);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.umind-glass::before{  /* borda de luz */
  content:""; position:absolute; inset:0; z-index:2; box-sizing:border-box; pointer-events:none;
  padding:1px; border-radius:inherit;
  background:linear-gradient(168deg, var(--ug-edge-top) 0%, var(--ug-edge-side) 32%, var(--ug-edge-bottom) 68%, var(--ug-edge-side) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.umind-glass::after{  /* reflexo especular */
  content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  opacity:var(--ug-spec-opacity); mix-blend-mode:var(--ug-spec-blend);
  background:
    radial-gradient(130% 68% at 8% -14%, var(--ug-spec-a) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(86% 56% at 94% -6%, var(--ug-spec-b) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 20%);
}
.umind-glass__content{ position:relative; z-index:4; }
@supports not (backdrop-filter: blur(1px)){
  .umind-glass__pane{ background:var(--ug-solid); }
  .umind-glass__lens{ display:none; }
}
@media (prefers-reduced-transparency: reduce){
  .umind-glass__pane{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--ug-solid); }
  .umind-glass__lens{ display:none; }
}

/* ==== §09 ELEMENTOS GRÁFICOS: régua, régua viva, brilho, grade, granulado, marca d'água, borda em gradiente · manual linhas 193-242 ==== */
.u-rule{ height:1px; border:0; margin:0; width:100%;
  background:linear-gradient(to right, transparent 0%, var(--u-border-emphasis) 10%, var(--u-border-emphasis) 90%, transparent 100%); }
.u-rule--live{ position:relative; height:1px; border:0;
  background:linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--u-red) 30%, transparent) 25%, var(--u-red) 50%, color-mix(in srgb, var(--u-red) 30%, transparent) 75%, transparent 100%); }
.u-rule--live::after{ content:""; position:absolute; left:0; right:0; top:-4px; height:9px;
  background:inherit; filter:blur(5px); opacity:.5; pointer-events:none; }
.u-glow{ position:relative; isolation:isolate; }
.u-glow::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--u-red) 16%, transparent) 0%, transparent 70%),
    radial-gradient(45% 40% at 88% 18%, color-mix(in srgb, var(--u-red) 7%, transparent) 0%, transparent 72%); }
.u-grid{ --grid-size:64px; --grid-line: color-mix(in srgb, var(--u-text) 4%, transparent);
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 0%, transparent 78%); }
.u-grain{ position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  opacity:.05; mix-blend-mode:overlay; background-size:256px 256px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* MARCA D'ÁGUA DE MARCA — §09.9
   O logotipo vazado entra como MÁSCARA, nunca como imagem: assim a tinta é
   escolhida pelo tema e o gradiente vermelho do arquivo não contamina o fundo. */
.u-watermark{ position:absolute; inset:0; overflow:hidden; pointer-events:none;
  border-radius:inherit; z-index:0 }
.u-watermark::before{ content:""; position:absolute;
  top:var(--wm-top,-16%); right:var(--wm-right,-14%); width:var(--wm-size,86%);
  aspect-ratio:360/108; background:var(--u-wm-ink); opacity:var(--u-wm-alpha);
  -webkit-mask:var(--u-wm-art) center/contain no-repeat;
          mask:var(--u-wm-art) center/contain no-repeat }
/* O desvanecimento é uma SEGUNDA máscara e só entra onde o navegador sabe
   intersectar. Sem `mask-composite`, o padrão é somar: o gradiente viraria
   união com a arte e pintaria um retângulo no lugar do logotipo. */
@supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  .u-watermark::before{
    -webkit-mask-image:var(--u-wm-art), linear-gradient(200deg,#000 26%,transparent 88%);
            mask-image:var(--u-wm-art), linear-gradient(200deg,#000 26%,transparent 88%);
    -webkit-mask-size:contain,100% 100%;  mask-size:contain,100% 100%;
    -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat;
    -webkit-mask-position:center,center; mask-position:center,center;
    -webkit-mask-composite:source-in; mask-composite:intersect }
}
/* o conteúdo sobe acima da água */
.u-watermark ~ *{ position:relative; z-index:1 }

.u-border-grad{ position:relative; border-radius:var(--r-lg); }
.u-border-grad::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, color-mix(in srgb, var(--u-red) 55%, transparent), transparent 45%, var(--u-border-default));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }

/* ==== §09.9.1 MARCA D'ÁGUA — desvanecimento RADIAL canônico (substitui o linear de l.226-234) + variante sangrada · manual linhas 1468-1479 ==== */
@supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  .u-watermark::before{
    --u-wm-fade: radial-gradient(39% 37% at 39.5% 52%, #000 0%, #000 14%, transparent 100%);
    -webkit-mask-image:var(--u-wm-art), var(--u-wm-fade);
            mask-image:var(--u-wm-art), var(--u-wm-fade);
    -webkit-mask-size:contain,100% 100%;  mask-size:contain,100% 100%;
    -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat;
    -webkit-mask-position:center,center; mask-position:center,center;
    -webkit-mask-composite:source-in; mask-composite:intersect }
  /* Variante SANGRADA — só para página que vai a sangria de verdade (§09.9.1). */
  .u-watermark--sangria::before{
    --u-wm-fade: radial-gradient(42% 37% at 56% 52%, #000 0%, #000 14%, transparent 100%) }

/* ==== BASE do documento (reset, body, headings, foco, link) · manual linhas 247-254 ==== */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ font-family:var(--font-text); background:var(--u-bg); color:var(--u-text);
  line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-.022em; font-weight:650 }
code,.mono{ font-family:var(--font-mono); font-size:.85em; letter-spacing:0 }
:focus-visible{ outline:2px solid var(--u-focus); outline-offset:3px; border-radius:4px }
a{ color:var(--u-red-ink-dark) }

/* ==== §11.1 BOTÕES: .btn, primário sólido, secundário, destrutivo, on-field (inverso), seta de conversão · manual linhas 353-370 ==== */
.btn{ font-family:var(--font-text); font-size:14px; font-weight:600; padding:11px 20px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px }
/* Campo SÓLIDO e sombra NEUTRA. O gradiente de 135° é do logotipo e dos blocos
   grandes: dentro de um botão de ~170 px ele escurece a metade direita até o
   vinho e a peça parece suja. A sombra vermelha, sobre fundo claro, vira halo rosa. */
.btn-primary{ background:var(--u-red); color:var(--u-on-field-brand);
  box-shadow:0 1px 2px rgba(10,10,12,.18), 0 8px 18px -10px rgba(10,10,12,.35) }
.btn-secondary{ background:var(--u-surface); color:var(--u-text); border-color:var(--u-border-emphasis) }
.btn-destructive{ background:transparent; color:var(--u-red-ink-dark); border-color:var(--u-red-ink-dark) }
/* AÇÃO SOBRE CAMPO VERMELHO — inversão obrigatória: campo branco, tinta carbono.
   Vermelho sobre vermelho não existe. Ver §11.1. */
.btn-on-field{ background:#FFFFFF; color:#0A0A0C; box-shadow:0 8px 24px rgba(10,10,12,.22) }
/* seta do CTA — recorte vetorial pintado com a própria tinta do botão */
.btn--arrow::after{ content:""; width:1.05em; height:1.05em; flex:0 0 auto; background:currentColor;
  -webkit-mask:var(--u-arrow) center/contain no-repeat; mask:var(--u-arrow) center/contain no-repeat;
  transition:transform .25s cubic-bezier(.32,.72,0,1) }
.btn--arrow:hover::after{ transform:translateX(3px) }
@media (prefers-reduced-motion:reduce){ .btn--arrow::after{ transition:none } }

/* ==== §11.1/§11.2 BLOCO DE CHAMADA em campo vermelho (.cta-field) · manual linhas 372-378 ==== */
/* bloco de chamada em campo vermelho — a base adensada é o que dá peso à peça */
.cta-field{ position:relative; overflow:hidden; border-radius:var(--r-xl); text-align:center;
  background:var(--u-gradient-block); color:#FFFFFF; padding:44px 30px 40px;
  box-shadow:0 24px 60px -28px rgba(10,10,12,.75) }
.cta-field h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.036em;
  line-height:1.08; font-size:clamp(20px,3vw,30px); max-width:15ch; margin:0 auto; text-wrap:balance }
.cta-field .btn{ margin-top:24px }

/* ==== §02/§09.8 .u-brand (nome nunca quebra) + T1 prateado .u-text-silver · manual linhas 388-399 ==== */
/* O nome da empresa é uma unidade de leitura: as duas palavras nunca se separam */
.u-brand{ white-space:nowrap }

.u-text-silver{ color:var(--u-text) }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .u-text-silver{
    background-image:var(--u-silver-grad);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent }
}
.u-text-silver::selection{ background:var(--u-red); color:#FFFFFF; -webkit-text-fill-color:#FFFFFF }
@media print{ .u-text-silver{ background:none; color:#18181B; -webkit-text-fill-color:#18181B } }

/* ==== §09.7 badge/dot de presença · manual linhas 400-401 ==== */
.badge{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill) }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block }

/* ==== §09.8 T2 degradê VERMELHO de texto (.u-text-red-grad) — variável por tema · manual linhas 1155-1177 ==== */
:root{
  --u-red-grad-text: linear-gradient(180deg,#FF8C81 0%,#FF6E62 46%,#FF544A 100%);
}
html[data-theme="light"]{
  --u-red-grad-text: linear-gradient(180deg,#B50F14 0%,#8A0A10 46%,#43060B 100%);
}
/* peças de tema fixo carregam a própria escala, como já fazem com o prateado */
.tpl-dark { --u-red-grad-text: linear-gradient(180deg,#FF8C81 0%,#FF6E62 46%,#FF544A 100%) }
.tpl-light{ --u-red-grad-text: linear-gradient(180deg,#B50F14 0%,#8A0A10 46%,#43060B 100%) }

.u-text-red-grad{
  display:inline-block;          /* caixa própria e ATÔMICA: nunca fragmenta */
  white-space:nowrap;            /* fragmentar reinicia a rampa e parte a marca */
  color:var(--u-red-ink-dark);   /* a cor sólida vem PRIMEIRO, igual ao prateado */
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .u-text-red-grad{
    background-image:var(--u-red-grad-text);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent }
}
.u-text-red-grad::selection{ background:var(--u-red); color:#FFFFFF; -webkit-text-fill-color:#FFFFFF }
@media print{ .u-text-red-grad{ background:none; color:#B50F14; -webkit-text-fill-color:#B50F14 } }

/* ==== §09.8 palco das headlines T1/T2 (.u-tt-box/.u-tt-h) — corpo acompanha a largura da caixa · manual linhas 1181-1187 ==== */
.u-tt-box{ padding:18px }
.u-tt-h{ font-family:var(--font-display); font-weight:700; margin:0;
  letter-spacing:-.035em; line-height:1.14; font-size:clamp(16px,2.2vw,28px) }
@supports (container-type:inline-size){
  .u-tt-box{ container-type:inline-size }
  .u-tt-h{ font-size:clamp(16px,5.4cqw,28px) }
}

/* ==== CONTAINERS DE TEMA .tpl-dark/.tpl-light (peças de tema fixo dentro de página de outro tema) · manual linhas 418-437 ==== */
/* Templates de produto são dark-first: fixam os valores escuros mesmo quando
   o manual é lido no tema claro, senão a peça mostraria o logo errado. */
.tpl-dark{
  --u-bg-deep:#0A0A0C; --u-bg:#18181B; --u-well:#141417; --u-surface:#1F1F23; --u-surface-hi:#27272A;
  --u-border-subtle:#33333A; --u-border-default:#3F3F46; --u-border-emphasis:#71717A;
  --u-hairline:rgba(255,255,255,.09);
  --u-text:#F0F0F0; --u-text-2:#B4BCC8; --u-text-3:#9CA3AF; --u-text-dis:#8E8E93;
  --u-red-ink-dark:#FF544A; --u-silver-grad: linear-gradient(180deg, #FFFFFF 0%, #E4E4E7 46%, #8E8E93 100%);
  --u-wm-ink:#FFFFFF; --u-wm-alpha:.08;
  color:var(--u-text);
}
.tpl-light{
  --u-bg-deep:#FFFFFF; --u-bg:#FFFFFF; --u-well:#F4F4F5; --u-surface:#F9FAFB; --u-surface-hi:#F4F4F5;
  --u-border-subtle:#E7E7EA; --u-border-default:#D8D8DC; --u-border-emphasis:#8E8E93;
  --u-hairline:rgba(24,24,27,.06);
  --u-text:#18181B; --u-text-2:#4B5563; --u-text-3:#6C6C70; --u-text-dis:#9CA3AF;
  --u-red-ink-dark:#B50F14; --u-silver-grad: linear-gradient(180deg, #18181B 0%, #3F3F46 46%, #52525B 100%);
  --u-wm-ink:#18181B; --u-wm-alpha:.06;
  color:var(--u-text);
}

/* ==== §11.3.1 correção de herança --u-focus nos containers de tema · manual linhas 3216-3217 ==== */
.tpl-light{ --u-focus:#18181B }
.tpl-dark{  --u-focus:#FFFFFF }

/* ==== §11.2 SISTEMA DE DOBRAS — miniaturas .fold (128px desktop/64px mobile) · manual linhas 450-463 ==== */
/* ==========================================================================
   DOBRAS — §11.2. Quatro fundos no máximo, troca no meio do respiro.
   Nenhuma borda: a mudança de cor é a única fronteira.
   ========================================================================== */
.fold{ padding:34px 26px; border:0 }          /* miniatura de 128px desktop / 64px mobile */
.fold--a{ background:#18181B; color:#F0F0F0 }             /* carbono base */
.fold--b{ background:#141417; color:#F0F0F0 }             /* poço */
.fold--c{ background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F5 100%); color:#18181B }
.fold--d{ background:var(--u-gradient-block); color:#FFFFFF }   /* campo vermelho */
/* cartão da dobra clara — profundidade por sombra FRIA, jamais por vermelho */
.fold__card{ background:#FFFFFF; border-radius:14px; padding:15px 16px; border:0;
  box-shadow:0 1px 2px rgba(24,24,27,.04), 0 8px 24px -8px rgba(24,24,27,.08) }
.fold__tag{ font-family:var(--font-mono); font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  opacity:.5; display:block; margin-bottom:9px }

/* ==== §11.2 CORRIDA — respiro de troca de fundo (de <pre> l.2369-2370) · manual linhas 2369-2370 ==== */
.corrida{ padding-block:128px; border:0; }            /* 16 × 8pt */
@media (max-width:767px){ .corrida{ padding-block:64px; } }

/* ==== §11.2 SOMBRA FRIA em dobra clara (de <pre> l.2378-2381) · manual linhas 2378-2381 ==== */
/* RENOMEADO: o manual publica só as declarações box-shadow; aqui viraram .card-on-light e .card-on-light--destaque */
.card-on-light{ box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 8px 24px -8px rgba(24,24,27,.08); }
.card-on-light--destaque{ box-shadow: 0 18px 36px -18px rgba(24,24,27,.10), 0 30px 45px -30px rgba(24,24,30,.22); }

/* ==== §11.2 FUNDOS F1-F6 (hex literal) — RENOMEADO: removido o escopo `.s112` (existia só por causa do documento, l.1835-1840) · manual linhas 1898-1903 ==== */
.bg-f1{ background:#FFFFFF; color:#18181B }
.bg-f2{ background:#18181B; color:#F0F0F0 }
.bg-f3{ background:#141417; color:#F0F0F0 }
.bg-f4{ background:var(--u-gradient-block); color:#FFFFFF }
.bg-f5{ background:#0A0A0C; color:#F0F0F0 }
.bg-f6{ background:#F4F4F5; color:#18181B }

/* ==== §11.2 JUNÇÃO header × dobra 1 (.jx) — sem escopo .s112 · manual linhas 1906-1920 ==== */
.jx{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:13px; margin-top:6px }
.jx__f{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--u-border-subtle); padding-top:11px }
.jx__hd{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#8E8E93 }
.jx__hd b{ font-family:var(--font-display); font-size:11px; letter-spacing:-.01em;
  text-transform:none; color:#F0F0F0; font-weight:650 }
.jx__b{ padding:28px 14px 30px }
.jx__b p{ font-family:var(--font-display); font-size:14px; font-weight:650; letter-spacing:-.03em;
  line-height:1.15; color:#F0F0F0; margin:0; max-width:none }
.jx__v{ font-family:var(--font-mono); font-size:10.5px; margin-top:10px; line-height:1.6; color:#B4BCC8 }
.jx--line .jx__hd{ border-bottom:1px solid #33333A }
/* O degradê vermelho só é renderizado sobre CARBONO — sobre superfície clara
   ele produziria rosa e a proibição binária desta seção o veta. */
.jx--red .jx__b{ background:linear-gradient(180deg, rgba(221,11,23,.34) 0%, rgba(221,11,23,0) 62%) }

/* ==== §11.2 BLOCO DE CHAMADA FLUTUANTE BC1/BC2/BC3 (.bc) — sem escopo .s112 · manual linhas 1922-1960 ==== */
/* --- BLOCO DE CHAMADA FLUTUANTE (BC) ------------------------------------- */
.bc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:6px }
.bc__host{ border-radius:var(--r-lg); padding:22px 18px; border:1px solid var(--u-border-subtle) }
.bc__blk{ background:var(--u-gradient-block); color:#FFFFFF; border-radius:var(--r-xl);
  padding:24px 20px 22px }
/* LIMITE E PROFUNDIDADE DO BLOCO — duas receitas, uma por tipo de dobra.
   Nao e enfeite, e a correcao de dois defeitos medidos em 31/07/2026:

   1) LIMITE. O ponto mais fraco do bloco nao e o topo do degrade (#DD0B17), e a
      BASE (#43060B). Contra dobra escura a base entrega 1,20:1 (F5), 1,11:1 (F3),
      1,07:1 (F2) e 1,01:1 (cartao #1F1F23) — todas REPROVAM o SC 1.4.11. Sobre
      dobra clara ela entrega 16,54:1 (F1) e 15,05:1 (F6) e o bloco se delimita
      sozinho. Por isso o fio de 1px em #FFFFFF entra SO nas escuras: e a unica
      tinta que cumpre 3:1 contra as duas pontas do degrade ao mesmo tempo
      (5,08:1 no topo, 16,54:1 na base) e contra a propria dobra (17,72:1 em F2,
      18,39:1 em F3, 19,78:1 em F5). Cinza nao serve: #71717A da 3,42:1 contra a
      base e some no topo (1,05:1).

   2) PROFUNDIDADE. A sombra difusa escura que estava aqui — rgba(10,10,12,.55) —
      e invisivel sobre hospedeiro escuro: #0A0A0C sobre #18181B da 1,12:1 e sobre
      #141417 da 1,08:1. Era codigo morto que ensinava a construcao errada. No
      escuro a profundidade e LUZ (inset no labio de cima); no claro continua
      sendo sombra neutra, que la funciona — e no tema claro o neutro homologado
      e rgba(24,24,27,...), como manda a regra fixa desta secao. */
.bg-f2 > .bc__blk,
.bg-f3 > .bc__blk,
.bg-f5 > .bc__blk{ box-shadow: 0 0 0 1px #FFFFFF,
                                     inset 0 1px 0 rgba(255,255,255,.16) }
.bg-f1 > .bc__blk,
.bg-f6 > .bc__blk{ box-shadow: 0 18px 44px -22px rgba(24,24,27,.55) }
.bc__blk h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.034em;
  line-height:1.1; font-size:16px; color:#FFFFFF; margin:0 }
.bc__blk p{ font-size:11.5px; color:#FFFFFF; margin:9px 0 0; max-width:34ch; line-height:1.5 }
.bc--center{ text-align:center }
.bc--center h4{ max-width:16ch; margin:0 auto }
.bc--split{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.bc--split h4{ flex:1 1 180px; margin:0 }
.bc__btn{ margin-top:16px }
.bc--split .bc__btn{ margin-top:0; flex:0 0 auto }

/* ==== §11.2 RODAPÉS RD1/RD2/RD3 (.rd) — sem escopo .s112 · manual linhas 1962-1975 ==== */
/* --- RODAPÉS (RD) --------------------------------------------------------- */
.rd{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:13px; margin-top:6px }
.rd__f{ background:#0A0A0C; border-radius:var(--r-md); padding:20px 18px; border:0 }
.rd__brand{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:-.02em; color:#F0F0F0 }
.rd__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:14px; margin-top:16px }
.rd__cols h5{ font-family:var(--font-display); font-size:9.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:#8E8E93; margin:0 0 6px }
.rd__cols a, .rd__inline a{ display:flex; align-items:center; min-height:24px; font-size:11px;
  color:#B4BCC8; text-decoration:none }
.rd__inline{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px }
.rd__legal{ font-size:10px; color:#8E8E93; margin-top:16px; line-height:1.6 }
.rd__one{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.rd__one .rd__legal{ margin-top:0 }
.rd__one .rd__legal a{ color:#B4BCC8; text-decoration:none }

/* ==== §11.2 RECEITAS R1-R5 tira de miniaturas (.rec) + selo .cnt + media — sem escopo .s112 · manual linhas 1977-2015 ==== */
/* --- RECEITAS DE PÁGINA (R#) — tira vertical de miniaturas ---------------
   R# e a familia da RECEITA (sequencia de fundos). Nao confundir com PG-#,
   que e a familia da PAGINA. Ver a nota no corpo da secao. */
.rec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:14px; margin-top:6px }
.rec__c{ background:var(--u-surface); border:1px solid var(--u-border-subtle);
  border-radius:var(--r-lg); padding:14px 14px 15px; display:flex; flex-direction:column }
.rec__seq{ font-family:var(--font-mono); font-size:11.5px; color:var(--u-text);
  letter-spacing:.03em; line-height:1.6; margin-bottom:9px }
.rec__strip{ display:flex; flex-direction:column; height:380px; border-radius:var(--r-md);
  overflow:hidden; margin-bottom:11px }
/* min-height é o piso de legibilidade: garante que a etiqueta, a profundidade e
   pelo menos uma linha de rótulo caibam mesmo na corrida mais curta. A altura
   exata de cada faixa é aproximada; o número impresso dentro dela é o exato. */
.rec__band{ display:flex; flex-direction:column; gap:5px; padding:8px 9px; overflow:hidden; min-height:56px }
.rec__hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:0 0 auto }
.rec__d{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.03em; white-space:nowrap }
.rec__t{ font-size:9.5px; line-height:1.35 }
/* Tintas explícitas, sem nenhum opacity: sobre campo vermelho o branco precisa
   permanecer a 100% — a 92% ele já cai para 4,43:1 e reprova AA. */
.rec__band.bg-f2 .rec__t, .rec__band.bg-f3 .rec__t, .rec__band.bg-f5 .rec__t{ color:#B4BCC8 }
.rec__band.bg-f2 .rec__d, .rec__band.bg-f3 .rec__d, .rec__band.bg-f5 .rec__d{ color:#8E8E93 }
.rec__band.bg-f1 .rec__t, .rec__band.bg-f6 .rec__t{ color:#4B5563 }
.rec__band.bg-f1 .rec__d, .rec__band.bg-f6 .rec__d{ color:#6C6C70 }
.rec__band.bg-f4 .rec__t, .rec__band.bg-f4 .rec__d{ color:#FFFFFF }
.rec__meta{ font-size:11px; color:var(--u-text-3); line-height:1.5 }
.rec__meta b{ color:var(--u-text-2); font-weight:600 }
.rec__use{ font-size:11.5px; color:var(--u-text-2); margin-top:9px; padding-top:9px;
  line-height:1.5; border-top:1px solid var(--u-hairline) }

/* --- SELO DE CONTAGEM ----------------------------------------------------- */
.cnt{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:10.5px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--u-well); color:var(--u-text-2); border:1px solid var(--u-border-subtle) }

@media (max-width:560px){
  .rec__strip{ height:320px }
  .bc--split{ flex-direction:column; align-items:stretch }
  .bc--split .bc__btn{ width:100% }
}

/* ==== §11.2 tldr/fam/fnd/pid-row/verdict (cartões do catálogo) — sem escopo .s112 · manual linhas 1850-1895 ==== */
.pid{ align-self:flex-start }
/* CERTO / ERRADO nao sao identificadores: identificador e licenca de uso e o
   que esta reprovado nao tem licenca (13.4.4.1). Por isso usam classe propria,
   fora da familia .pid, e nunca entram no indice de pecas. */
.verdict{ display:inline-flex; align-items:center; align-self:flex-start;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.055em;
  line-height:1; padding:4px 7px; border-radius:6px;
  background:transparent; border:1px solid currentColor }
.verdict--ok{ color:var(--u-success) }
.verdict--no{ color:var(--u-red-ink-dark) }
.pid-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 9px }
.pid-row .nm{ font-family:var(--font-display); font-size:12.5px; font-weight:600;
  color:var(--u-text); letter-spacing:-.01em }
.pid-row .aka{ font-size:11.5px; color:var(--u-text-3) }

/* --- LEITURA DE 10 SEGUNDOS ---------------------------------------------- */
.tldr{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:12px; margin:14px 0 4px }
.tldr__i{ background:var(--u-surface); border-radius:var(--r-md); padding:14px 16px;
  border-left:3px solid var(--u-red) }
.tldr__i b{ display:block; font-family:var(--font-display); font-size:13px; font-weight:650;
  color:var(--u-text); margin-bottom:5px; letter-spacing:-.015em }
.tldr__i span{ display:block; font-size:12.5px; color:var(--u-text-2); line-height:1.5 }
.tldr__i i{ display:block; font-family:var(--font-mono); font-style:normal; font-size:10.5px;
  color:var(--u-text-dis); margin-top:6px }

/* --- AS TRÊS FAMÍLIAS DE FUNDO ------------------------------------------- */
.fam{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:13px; margin-top:6px }
.fam__c{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--u-border-subtle);
  background:var(--u-surface) }
.fam__bar{ display:flex; height:56px }
.fam__bar i{ flex:1 1 0; display:block }
.fam__m{ padding:11px 13px 13px }
.fam__m b{ display:block; font-family:var(--font-display); font-size:12.5px; font-weight:650; color:var(--u-text) }
.fam__m span{ display:block; font-size:11.5px; color:var(--u-text-3); margin-top:5px; line-height:1.45 }
.fam__m em{ display:block; font-style:normal; font-family:var(--font-mono); font-size:10.5px;
  color:var(--u-text-2); margin-top:7px }

/* --- CARTÕES DO CATÁLOGO DE FUNDOS --------------------------------------- */
.fnd{ display:grid; grid-template-columns:repeat(auto-fit,minmax(166px,1fr)); gap:13px; margin-top:6px }
.fnd__c{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--u-border-subtle);
  background:var(--u-surface); display:flex; flex-direction:column }
.fnd__sw{ height:84px; padding:9px; display:flex; align-items:flex-start; justify-content:flex-end }
.fnd__m{ padding:11px 13px 13px; flex:1 1 auto }
.fnd__m b{ display:block; font-family:var(--font-display); font-size:12.5px; font-weight:650; color:var(--u-text) }
.fnd__m code{ display:block; font-size:10.5px; color:var(--u-text-dis); margin-top:3px }
.fnd__m span{ display:block; font-size:11.5px; color:var(--u-text-3); margin-top:7px; line-height:1.45 }

/* ==== §11.2 LANDING PAGE miniatura (.lp) — ZERO divisores, ZERO caixas · manual linhas 465-489 ==== */
/* landing page em miniatura — ZERO divisores, ZERO caixas. Só respiro e tipografia. */
.lp{ background:var(--u-bg-deep); color:var(--u-text) }
.lp__nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:18px 26px }
.lp__nav img{ height:17px; width:auto; display:block }
.lp__hero{ padding:56px 30px 46px; text-align:center; position:relative }
.lp__eyebrow{ font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--u-text-3) }
.lp__h1{ font-family:var(--font-display); font-size:clamp(23px,3.6vw,35px); font-weight:700;
  letter-spacing:-.036em; line-height:1.05; margin:15px auto 0; max-width:16ch; text-wrap:balance }
.lp__sub{ font-size:13.5px; color:var(--u-text-2); margin:17px auto 0; max-width:42ch; line-height:1.6 }
.lp__cta{ margin-top:26px }
.lp__stats{ display:flex; justify-content:center; gap:clamp(30px,8vw,78px); padding:4px 26px 62px; flex-wrap:wrap }
.lp__stats div{ text-align:center }
.lp__stats b{ display:block; font-family:var(--font-display); font-size:27px; font-weight:650;
  letter-spacing:-.038em; color:var(--u-text) }
.lp__stats span{ font-size:10.5px; color:var(--u-text-3) }
.lp__sec{ padding:0 30px 62px; text-align:center }
.lp__sec h3{ font-family:var(--font-display); font-size:clamp(18px,2.6vw,23px); font-weight:650;
  letter-spacing:-.032em; max-width:21ch; margin:0 auto; line-height:1.15; text-wrap:balance }
.lp__seq{ display:flex; justify-content:center; align-items:baseline; gap:clamp(14px,4vw,44px);
  margin-top:30px; flex-wrap:wrap }
.lp__seq b{ display:block; font-family:var(--font-display); font-size:21px; font-weight:650;
  letter-spacing:-.035em; color:var(--u-text) }
.lp__seq b.q{ color:var(--u-red-ink-dark) }
.lp__seq span{ font-size:10.5px; color:var(--u-text-3); display:block; margin-top:3px }
.lp__foot{ padding:0 30px 34px; font-size:10px; color:var(--u-text-dis); text-align:center }

/* ==== §11.3 FORMULÁRIO DE CAPTURA (.cap-form) — versão da miniatura de captura · manual linhas 491-521 ==== */
/* formulário de captura — campo PREENCHIDO, sem contorno cinza.
   O controle é identificado por rótulo permanente + texto de apoio dentro do campo
   (SC 1.4.11: com conteúdo visível no controle, a borda deixa de ser obrigatória).
   O cartão usa borda de luz em gradiente no lugar da linha cinza chapada.
   Vidro NÃO entra aqui: campo de entrada pertence à camada de conteúdo, e
   backdrop-filter aninhado não enxerga o vidro do pai (Backdrop Root). */
.cap-form{ position:relative; background:var(--u-surface); border-radius:var(--r-lg);
  padding:20px 18px 18px; max-width:330px; margin:16px auto 0; text-align:left;
  --cap-edge-a:rgba(255,255,255,.26); --cap-edge-b:rgba(255,255,255,.06); --cap-edge-c:rgba(255,255,255,.03);
  --cap-fld:#141417; --cap-bevel:rgba(255,255,255,.05);
  box-shadow:0 1px 1px rgba(0,0,0,.20), 0 18px 44px -22px rgba(0,0,0,.55) }
.tpl-light .cap-form{
  --cap-edge-a:rgba(255,255,255,1); --cap-edge-b:rgba(24,24,27,.07); --cap-edge-c:rgba(24,24,27,.12);
  --cap-fld:#F0F0F2; --cap-bevel:rgba(24,24,27,.03);
  box-shadow:0 1px 1px rgba(24,24,27,.05), 0 14px 34px -18px rgba(24,24,27,.16) }
.cap-form::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(165deg, var(--cap-edge-a), var(--cap-edge-b) 42%, var(--cap-edge-c));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude }
.cap-form label{ display:block; font-size:10.5px; font-weight:600; color:var(--u-text-2); margin:0 0 6px }
.cap-form .fld{ background:var(--cap-fld); border:0; border-radius:var(--r-sm);
  min-height:40px; display:flex; align-items:center; padding:0 14px; font-size:12.5px; color:var(--u-text-dis);
  margin-bottom:13px; box-shadow:inset 0 1px 0 var(--cap-bevel) }
/* Foco: UM anel fino na cor de foco do sistema. Nada de vermelho — vermelho é
   ação, não estado. Dois anéis vermelhos empilhados engrossavam o campo. */
.cap-form .fld--focus{ color:var(--u-text);
  box-shadow:inset 0 1px 0 var(--cap-bevel), 0 0 0 2px var(--u-focus) }
.cap-form .fld--focus::after{ content:""; width:1.5px; height:1em; background:var(--u-text);
  margin-left:1px; animation:cap-caret 1.1s steps(1) infinite }
@keyframes cap-caret{ 50%{ opacity:0 } }

/* ==== §11.3.1 CAMPO DE FORMULÁRIO .fx — PRODUÇÃO (pseudoclasses reais) de <pre> l.2670-2721 · manual linhas 2670-2721 ==== */
/* tokens de campo — o canto é o --r-sm da marca */
.tpl-light{ --u-focus:#18181B }   /* correção de herança: sem isto o anel vem branco */
.tpl-dark { --u-focus:#FFFFFF }

.fx{
  --fx-fill:#141417;                 /* poço, um degrau abaixo do cartão */
  --fx-ink:var(--u-text-dis);        /* #8E8E93 — apoio, 5,64:1 */
  display:flex; align-items:center; gap:9px; width:100%;
  min-height:44px;                   /* alvo de toque */
  padding:0 14px; border:0;          /* a propriedade border NÃO é usada */
  border-radius:var(--r-sm);         /* 10px */
  font-family:var(--font-text); font-size:16px;   /* 16px evita o zoom do iOS */
  background:var(--fx-fill); color:var(--fx-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 -1px 0 rgba(255,255,255,.02);   /* limite de LUZ */
  transition: box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.tpl-light .fx{
  --fx-fill:#FFFFFF;                 /* elevado, não rebaixado — ver a medição */
  --fx-ink:var(--u-text-3);          /* #6C6C70 — 5,23:1. NUNCA #9CA3AF (2,54:1) */
  box-shadow: 0 0 0 1px rgba(24,24,27,.08),
              0 1px 1px rgba(24,24,27,.04),
              0 3px 8px -3px rgba(24,24,27,.07);      /* limite de SOMBRA */
}

/* ponteiro */
.fx:hover{ --fx-fill:#17171A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.02) }
.tpl-light .fx:hover{
  box-shadow: 0 0 0 1px rgba(24,24,27,.12),
              0 2px 3px rgba(24,24,27,.05), 0 6px 14px -5px rgba(24,24,27,.10) }

/* foco — UM anel de 2px, nunca vermelho */
.fx:focus-visible{ outline:0; color:var(--u-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px var(--u-focus) }
.tpl-light .fx:focus-visible{ outline:0; color:var(--u-text);
  box-shadow: 0 0 0 2px var(--u-focus),
              0 1px 1px rgba(24,24,27,.04), 0 3px 8px -3px rgba(24,24,27,.07) }

/* erro — fio de 1px na tinta do tema, preenchimento intacto */
.fx[aria-invalid="true"]{ color:var(--u-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--u-red-ink-dark) }
.tpl-light .fx[aria-invalid="true"]{ color:var(--u-text);
  box-shadow: 0 0 0 1px var(--u-red-ink-dark),
              0 1px 1px rgba(24,24,27,.04), 0 3px 8px -3px rgba(24,24,27,.07) }

/* desabilitado — funde-se ao cartão */
.fx:disabled{ --fx-fill:#18181B; --fx-ink:var(--u-text-dis); box-shadow:none; cursor:not-allowed }
.tpl-light .fx:disabled{ --fx-fill:#F4F4F5; --fx-ink:var(--u-text-3) }

/* camada 2 — contorno obrigatório em controle SEM conteúdo interno */
.fx--outlined{ box-shadow: inset 0 0 0 1px var(--u-border-emphasis) }

/* ==== §11.3.1 CAMPO .fx — classes de estado fixas (CF1-CF12, bancada .anat) para exemplo · manual linhas 3221-3302 ==== */
.anat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:22px 16px;
  background:var(--u-surface); border-radius:var(--r-lg); padding:22px 20px }
.anat__cell{ min-width:0 }
.anat__hd{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:11px }
.anat__nm{ font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:-.012em;
  color:var(--u-text) }
.anat__cap{ font-size:10.5px; line-height:1.55; color:var(--u-text-3); margin-top:9px }
.anat__cap b{ color:var(--u-text-2); font-weight:600 }

/* ==========================================================================
   O CAMPO — .fx
   Repouso sem contorno. O limite é feito de SOMBRA no tema claro e de LUZ no
   tema escuro, porque no carbono a sombra preta não consegue desenhar limite
   (medido: preto a 100% sobre #1F1F23 dá 1,28:1).
   Nunca recebe backdrop-filter: campo pertence à camada de conteúdo.
   ========================================================================== */
.fx{ --fx-fill:#141417; --fx-ink:var(--u-text-dis);
  display:flex; align-items:center; gap:9px; width:100%; min-height:44px;
  padding:0 14px; border:0; border-radius:var(--r-sm);
  font-family:var(--font-text); font-size:16px; font-weight:400; letter-spacing:-.005em;
  background:var(--fx-fill); color:var(--fx-ink); text-align:left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.02);
  transition: box-shadow .15s var(--ease), background-color .15s var(--ease) }
.tpl-light .fx{ --fx-fill:#FFFFFF; --fx-ink:var(--u-text-3);
  box-shadow: 0 0 0 1px rgba(24,24,27,.08),
              0 1px 1px rgba(24,24,27,.04),
              0 3px 8px -3px rgba(24,24,27,.07) }

/* rótulo permanente — fora do campo, nunca flutuante, nunca substituído pelo apoio */
.fx__lbl{ display:block; font-family:var(--font-text); font-size:13px; font-weight:600;
  letter-spacing:-.006em; color:var(--u-text-2); margin:0 0 7px }
.fx__val{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* PONTEIRO — o limite ganha densidade, a geometria não muda */
.fx--hover{ --fx-fill:#17171A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.02) }
.tpl-light .fx--hover{
  box-shadow: 0 0 0 1px rgba(24,24,27,.12),
              0 2px 3px rgba(24,24,27,.05),
              0 6px 14px -5px rgba(24,24,27,.10) }

/* FOCO — UM anel de 2px em --u-focus. Nunca vermelho, nunca dois anéis. */
.fx--focus{ color:var(--u-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px var(--u-focus) }
.tpl-light .fx--focus{ color:var(--u-text);
  box-shadow: 0 0 0 2px var(--u-focus),
              0 1px 1px rgba(24,24,27,.04), 0 3px 8px -3px rgba(24,24,27,.07) }
.fx__caret{ width:2px; height:1.15em; flex:0 0 auto; border-radius:1px; background:var(--u-text);
  animation:fx-caret 1.1s steps(1) infinite }
@keyframes fx-caret{ 50%{ opacity:0 } }

/* PREENCHIDO — só a tinta muda de peso. O limite é idêntico ao repouso. */
.fx--filled{ color:var(--u-text); font-weight:500 }

/* ERRO — fio de 1px na TINTA vermelha do tema. Nunca 2px, nunca preenchimento
   tingido: vermelho a menos de 100% sobre superfície clara é proibido (§11.2). */
.fx--error{ color:var(--u-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--u-red-ink-dark) }
.tpl-light .fx--error{ color:var(--u-text);
  box-shadow: 0 0 0 1px var(--u-red-ink-dark),
              0 1px 1px rgba(24,24,27,.04), 0 3px 8px -3px rgba(24,24,27,.07) }
.fx__msg{ display:flex; align-items:flex-start; gap:7px; margin-top:8px;
  font-size:12px; line-height:1.45; font-weight:500; color:var(--u-red-ink-dark) }
.fx__msg::before{ content:"!"; flex:0 0 auto; width:14px; height:14px; margin-top:1px;
  border:1px solid currentColor; border-radius:50%; font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; line-height:12px; text-align:center }

/* DESABILITADO — perde o rebaixamento e o fio: funde-se ao cartão. */
.fx--off{ --fx-fill:#18181B; --fx-ink:var(--u-text-dis); box-shadow:none; cursor:not-allowed }
.tpl-light .fx--off{ --fx-fill:#F4F4F5; --fx-ink:var(--u-text-3); box-shadow:none }

/* CONTORNO DE CONTROLE — camada 2, só quando o campo não tem conteúdo interno */
.fx--outlined{ box-shadow: inset 0 0 0 1px var(--u-border-emphasis) }
.tpl-light .fx--outlined{ box-shadow: inset 0 0 0 1px var(--u-border-emphasis),
              0 1px 1px rgba(24,24,27,.04), 0 3px 8px -3px rgba(24,24,27,.07) }

/* corte transversal ilustrado do limite */
.fx-sect{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:6px }
.fx-sect__i{ border-radius:var(--r-md); padding:15px 16px; background:var(--u-well) }
.fx-sect__t{ font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--u-text-dis); margin-bottom:10px }
.fx-sect__b{ font-size:11.5px; line-height:1.55; color:var(--u-text-2); margin-top:10px }

/* ==== §11.3.2 PÁGINA DE OBRIGADO PG-3/PG-4/PG-5 (.obg, --obg-mix) · manual linhas 1486-1537 ==== */
/* --- PÁGINA DE OBRIGADO — §11.3.2 ----------------------------------------- */
/* O contêiner de consulta é o INVÓLUCRO, nunca a própria página: um elemento
   com container-type é contêiner para os descendentes dele, não para si. */
.obg-holder{ container-type:inline-size }
.obg{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  min-height:276px; padding:30px 26px 40px; background:var(--u-bg-deep); color:var(--u-text) }
/* O conteúdo sobe acima da água. O :not() é obrigatório: sem ele esta regra
   venceria o position:absolute da própria marca d'água por ordem de cascata,
   e a caixa da máscara passaria a medir a coluna de texto em vez da página. */
.obg > :not(.u-watermark){ position:relative; z-index:1 }
/* align-self é obrigatório: em coluna flexível o padrão estica o item no eixo
   transversal, e um <img> com width:auto sairia deformado na largura inteira. */
.obg__logo{ height:17px; width:auto; display:block; align-self:flex-start }
.obg__txt{ margin-top:auto }
.obg__h{ font-family:var(--font-display); font-size:clamp(28px,4.6vw,44px); font-weight:700;
  letter-spacing:-.042em; line-height:1; margin:0 }
.obg__p1{ font-size:13.5px; font-weight:650; color:var(--u-text); margin:16px 0 0 }
.obg__p2{ font-size:12.5px; color:var(--u-text-2); margin:8px 0 0; line-height:1.6; max-width:40ch }
.obg__p3{ font-size:11px; color:var(--u-text-2); margin:18px 0 0; line-height:1.6 }
.obg__p2 b, .obg__p3 b{ color:var(--u-text); font-weight:600 }

/* PG-5 — dois campos. A rampa segue a curva suave 3t²−2t³, por isso não
   há canto no início nem no fim da travessia. Vai de 54% a 96% da largura.
   A rampa é VARIÁVEL declarada no contêiner de tema, nunca seletor de tema
   descendente — mesma lei de §09.8, senão uma peça escura dentro de tela
   clara receberia a rampa errada por especificidade.                        */
:root, .tpl-dark{ --obg-mix: linear-gradient(to right,
  #0A0A0C 0%, #0A0A0C 54%, #0B0B0D 59.25%, #0D0D10 64.5%, #111113 69.75%, #141418 75%,
  #18181C 80.25%, #1C1C1F 85.5%, #1E1E22 90.75%, #1F1F23 96%, #1F1F23 100%) }
html[data-theme="light"], .tpl-light{ --obg-mix: linear-gradient(to right,
  #FFFFFF 0%, #FFFFFF 54%, #FEFEFE 59.25%, #FBFBFB 64.5%, #F7F7F7 69.75%, #F2F2F2 75%,
  #EDEDED 80.25%, #E9E9E9 85.5%, #E6E6E6 90.75%, #E5E5E5 96%, #E5E5E5 100%) }
.obg--mescla{ background:var(--obg-mix) }
.obg--mescla .obg__txt{ max-width:46% }
.obg--mescla .obg__p2{ max-width:100% }
/* Abaixo de 768 px de página o segundo campo é desligado — não por risco de a
   travessia cair no texto (a folga é positiva em qualquer largura), e sim
   porque a coluna de 46% cai a 329 px, o piso de medida do sistema.
   No manual a chave é de CONTAINER porque o exemplo é miniatura; na página
   publicada a mesma regra é @media (max-width:767px).                        */
@container (max-width:767px){
  .obg--mescla:not(.obg--escala){ background:var(--u-bg-deep) }
  .obg--mescla:not(.obg--escala) .obg__txt{ max-width:100% }
}
/* Nem o exemplo em escala escapa: abaixo de 400 px a miniatura já é menor que
   um celular real, e mostrar dois campos ali seria mentir sobre a regra. */
@container (max-width:399px){
  .obg--mescla{ background:var(--u-bg-deep) }
  .obg--mescla .obg__txt{ max-width:100% }
}
.obg--curto{ min-height:214px; padding:24px 20px 28px }
.obg--curto .obg__h{ font-size:26px }

/* ==== §11.4 ISCAS base (.isca) · manual linhas 523-559 ==== */
/* ==========================================================================
   ISCAS DIGITAIS — §11.4
   Superfícies vêm do container de tema (.tpl-dark / .tpl-light), nunca fixas.
   ========================================================================== */
.isca-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:13px; align-items:start }
.isca{ border-radius:var(--r-lg); overflow:hidden; background:var(--u-bg-deep); color:var(--u-text);
  display:flex; flex-direction:column; min-height:250px; position:relative }
.isca--field{ background:var(--u-gradient-block); color:#FFFFFF }
.isca__pad{ padding:17px 15px; display:flex; flex-direction:column; flex:1 }
/* barra de progresso — trilho na superfície alta, preenchimento no campo */
.isca__bar{ height:4px; background:var(--u-surface-hi); position:relative; flex:0 0 auto }
.isca__bar i{ position:absolute; inset:0 auto 0 0; background:var(--u-red); display:block }
.isca__q{ font-family:var(--font-display); font-size:14px; font-weight:650; letter-spacing:-.028em;
  line-height:1.22; margin-bottom:12px }
/* opções: separadas por ELEVAÇÃO, nunca por moldura */
.isca__opt{ background:var(--u-surface); border-radius:9px; padding:9px 11px; font-size:11px;
  margin-bottom:7px; min-height:34px; display:flex; align-items:center }
.isca__opt--on{ background:var(--u-red); color:#FFFFFF; font-weight:600 }
.isca__score{ font-family:var(--font-display); font-size:clamp(40px,7vw,62px); font-weight:700;
  letter-spacing:-.05em; line-height:.9; color:var(--u-red-ink-dark) }
.isca__pillar{ display:flex; align-items:center; gap:8px; margin-top:9px; font-size:9.5px }
.isca__pillar b{ margin-left:auto; font-family:var(--font-mono); opacity:.75 }
.isca__track{ height:5px; border-radius:3px; background:var(--u-surface-hi); flex:1 1 auto;
  max-width:74px; overflow:hidden }
.isca__track i{ display:block; height:100%; background:var(--u-red-ink-dark) }
.isca__label{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.09em;
  text-transform:uppercase; opacity:.55; margin-bottom:8px }
/* relatório: capa de um número só */
.isca__huge{ font-family:var(--font-display); font-size:clamp(38px,6.6vw,58px); font-weight:700;
  letter-spacing:-.05em; line-height:.92 }
.isca__src{ font-size:9px; opacity:.6; margin-top:10px; line-height:1.5 }
/* gráfico de barras sem enfeite — uma série destacada, resto neutro */
.isca__chart{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:auto }
.isca__chart span{ flex:1; background:var(--u-text-3); border-radius:2px 2px 0 0; opacity:.42 }
.isca__chart span.on{ background:var(--u-red-ink-dark); opacity:1 }
.isca__money{ font-family:var(--font-display); font-size:clamp(26px,4.4vw,38px); font-weight:700;
  letter-spacing:-.04em; color:var(--u-red-ink-dark); line-height:1 }

/* ==== §11.4 correções medidas: opacidade zerada nas iscas · manual linhas 2950-2954 ==== */
.isca__label{ opacity:1; color:var(--u-text-3) }        /* era .55 → 3,94:1 no claro */
.isca__src{ opacity:1; color:var(--u-text-3) }          /* era .60 */
.isca__pillar b{ opacity:1; color:var(--u-text) }       /* era .75 */
.isca__chart span{ opacity:1; background:var(--u-viz-other) }  /* era .42 → 2,28:1 */
.isca__chart span.on{ background:var(--u-red) }         /* barra de destaque é CAMPO */

/* ==== §11.4.1 ESCALA DE SEVERIDADE (.sev-*) + §11.4.2 GRÁFICO DE ISCA (.ig) + I2 páginas (.pdfpg) + I4 (.chk) + I5 (.msgk) + I6 (.mail) + I7 (.bmk) + I8 (.aud) · manual linhas 2758-2962 ==== */
/* ==========================================================================
   ESCALA DE SEVERIDADE — §11.4.1
   ========================================================================== */
.sev-block{ position:relative; border-radius:var(--r-lg); overflow:hidden; text-align:center;
  padding:18px 16px 16px; background:var(--u-gradient-block); color:#FFFFFF }
.sev-block--warn{ background:#FF9F0A; color:#0A0A0C }
.sev-block--ok{ background:#2ED3A7; color:#0A0A0C }
.sev-block__n{ display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,8.5vw,62px); letter-spacing:-.05em; line-height:.88 }
/* o "/100" é 100% opaco: branco a 60% sobre campo vermelho dá 2,44:1 e reprova */
.sev-block__n em{ font-style:normal; font-size:.32em; font-weight:600; letter-spacing:-.015em }
.sev-block__cap{ display:block; font-size:11px; font-weight:600; margin-top:8px; line-height:1.3 }

.sev-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-text);
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill) }
.sev-chip--crit{ background:#DD0B17; color:#FFFFFF }
.sev-chip--warn{ background:#FF9F0A; color:#0A0A0C }
.sev-chip--ok{ background:#2ED3A7; color:#0A0A0C }

/* medidor de arco — o vermelho é ÁREA, nunca letra */
.sev-gauge{ --sev-pct:.38; --sev-arc:#DD0B17; --sev-track:#1F1F23; --sev-thick:13px;
  position:relative; width:100%; max-width:144px; aspect-ratio:1; margin:0 auto }
.tpl-light .sev-gauge{ --sev-track:#E7E7EA }
.sev-gauge__ring{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 216deg,
    var(--sev-arc) 0 calc(var(--sev-pct) * .8turn),
    var(--sev-track) calc(var(--sev-pct) * .8turn) .8turn,
    transparent .8turn 1turn);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--sev-thick)),#000 calc(100% - var(--sev-thick) + 1px));
          mask:radial-gradient(farthest-side,#0000 calc(100% - var(--sev-thick)),#000 calc(100% - var(--sev-thick) + 1px)) }
@supports not ((-webkit-mask-image:radial-gradient(#000,#000)) or (mask-image:radial-gradient(#000,#000))){
  .sev-gauge__ring{ background:none; border:13px solid var(--sev-track);
    border-top-color:var(--sev-arc); border-radius:50% } }
.sev-gauge__in{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; text-align:center }
.sev-gauge__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,6vw,40px);
  letter-spacing:-.05em; line-height:.9; color:var(--u-text) }
.sev-gauge__n em{ font-style:normal; font-size:.34em; font-weight:600; color:var(--u-text-3) }

/* legenda da escala — as três faixas NUNCA se encostam (2,47:1 e 1,08:1 entre si) */
.sev-legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px; margin-top:12px }
.sev-legend__it{ border-radius:var(--r-md); padding:10px 12px; text-align:left }
.sev-legend__it b{ display:block; font-family:var(--font-display); font-size:12px; font-weight:700; margin-bottom:2px }
.sev-legend__it span{ display:block; font-family:var(--font-mono); font-size:10px }
.sev-legend__it--crit{ background:var(--u-gradient-block); color:#FFFFFF }
.sev-legend__it--warn{ background:#FF9F0A; color:#0A0A0C }
.sev-legend__it--ok{ background:#2ED3A7; color:#0A0A0C }

/* ==========================================================================
   GRÁFICO DE ISCA — vive sempre no poço carbono
   ========================================================================== */
.ig{ background:#141417; border-radius:var(--r-md); padding:14px 14px 12px; color:#F0F0F0; position:relative }
.ig__ttl{ font-family:var(--font-display); font-size:12px; font-weight:650; letter-spacing:-.022em; line-height:1.25 }
.ig__cap{ font-size:9.5px; color:#9CA3AF; margin-top:4px; line-height:1.5 }
.ig__plot{ display:flex; align-items:flex-end; gap:6px; height:82px; margin-top:14px }
.ig__plot > div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100% }
.ig__bar{ background:#7E7E92; border-radius:2px 2px 0 0; width:100% }   /* cor CHEIA, nunca opacidade */
.ig__bar--on{ background:#DD0B17 }
.ig__xl{ font-family:var(--font-mono); font-size:8.5px; color:#8E8E93; text-align:center; margin-top:6px }
.ig__vl{ font-family:var(--font-mono); font-size:9px; color:#F0F0F0; text-align:center; margin-bottom:4px }
.ig__vl--on{ color:#FFFFFF; font-weight:700 }
/* versão impressa: 2 cores sobre papel, sem bloco carbono */
.ig--print{ background:#FFFFFF; color:#18181B; border:1px solid #E7E7EA }
.ig--print .ig__cap{ color:#6C6C70 } .ig--print .ig__xl{ color:#6C6C70 }
.ig--print .ig__vl{ color:#18181B } .ig--print .ig__vl--on{ color:#B50F14 }
.ig--print .ig__bar{ background:#52525B } .ig--print .ig__bar--on{ background:#DD0B17 }

/* ==========================================================================
   PÁGINAS DO DOCUMENTO PAGINADO (I2)
   ========================================================================== */
.pdfpg-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:14px; align-items:start }
.pdfpg{ position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:var(--u-bg-deep); color:var(--u-text); padding:7% 7.5%; display:flex; flex-direction:column }
.pdfpg--a4{ aspect-ratio:210/297 }
.pdfpg--field{ background:var(--u-gradient-block); color:#FFFFFF }
.pdfpg__logo{ width:26%; height:auto; display:block; flex:0 0 auto }
.pdfpg__body{ margin-top:auto }
.pdfpg__kick{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--u-text-3); margin-bottom:6px }
.pdfpg--field .pdfpg__kick{ color:#FFFFFF }
.pdfpg__huge{ font-family:var(--font-display); font-size:clamp(34px,7vw,52px); font-weight:700;
  letter-spacing:-.05em; line-height:.92 }
.pdfpg__ttl{ font-family:var(--font-display); font-size:clamp(13px,2.1vw,17px); font-weight:650;
  letter-spacing:-.03em; line-height:1.18 }
.pdfpg__src{ font-size:9px; color:var(--u-text-3); margin-top:9px; line-height:1.55; max-width:34ch }
.pdfpg--field .pdfpg__src{ color:#FFFFFF }
.pdfpg__rule{ height:2px; width:52px; background:var(--u-silver-grad); margin:0 0 12px; border-radius:2px }
/* numeração usa --u-text-3, nunca --u-text-dis: no tema claro o #9CA3AF
   sobre papel branco dá 2,54:1 e reprova. #6C6C70 dá 5,23:1. */
.pdfpg__num{ position:absolute; left:7.5%; bottom:5.5%; font-family:var(--font-mono);
  font-size:8.5px; color:var(--u-text-3) }
.pdfpg--field .pdfpg__num{ color:#FFFFFF }

/* ==========================================================================
   I4 · CHECKLIST IMPRIMÍVEL — tema claro obrigatório (papel)
   ========================================================================== */
.chk{ position:relative; aspect-ratio:210/297; background:#FFFFFF; color:#18181B;
  border:1px solid #E7E7EA; border-radius:var(--r-md); overflow:hidden; padding:7% 7% 9%;
  display:flex; flex-direction:column }
.chk__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.chk__hd img{ width:30%; height:auto; display:block }
.chk__ttl{ font-family:var(--font-display); font-size:clamp(13px,2.2vw,18px); font-weight:700;
  letter-spacing:-.032em; line-height:1.1; margin-top:14px; max-width:20ch }
.chk__sub{ font-size:9.5px; color:#4B5563; margin-top:6px; line-height:1.5; max-width:38ch }
.chk__list{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px }
.chk__list li{ display:flex; align-items:flex-start; gap:8px; font-size:9.5px; color:#18181B; line-height:1.4 }
.chk__box{ width:13px; height:13px; flex:0 0 auto; border:1.5px solid #6C6C70; border-radius:3px; margin-top:1px }
.chk__ft{ margin-top:auto; padding-top:12px; border-top:1px solid #E7E7EA;
  display:flex; align-items:center; gap:10px }
.chk__qr{ width:42px; height:42px; flex:0 0 auto; border-radius:6px; background:
  repeating-conic-gradient(#18181B 0 25%, #FFFFFF 0 50%) 0 0/9px 9px }
.chk__ft p{ font-size:9px; color:#4B5563; margin:0; line-height:1.45; max-width:34ch }
.chk__ft b{ color:#B50F14 }

/* ==========================================================================
   I5 · CARTELA DE MENSAGENS PRONTAS
   ========================================================================== */
.msgk{ border-radius:var(--r-lg); background:var(--u-bg-deep); padding:16px 14px; position:relative }
.msgk__h{ font-family:var(--font-display); font-size:13px; font-weight:650; letter-spacing:-.028em;
  line-height:1.2; color:var(--u-text); margin-bottom:11px; max-width:24ch }
.msgk__b{ background:var(--u-surface); border-radius:12px 12px 12px 4px; padding:9px 11px;
  font-size:10.5px; color:var(--u-text); line-height:1.5; margin-bottom:8px; max-width:94% }
.msgk__b--out{ background:var(--u-surface-hi); border-radius:12px 12px 4px 12px; margin-left:auto }
.msgk__meta{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--font-mono); font-size:8.5px; color:var(--u-text-3); margin-top:3px }
.msgk__copy{ font-family:var(--font-text); font-size:9.5px; font-weight:600; color:var(--u-text);
  background:var(--u-surface-hi); border:1px solid var(--u-border-emphasis);
  border-radius:var(--r-sm); padding:4px 9px; display:inline-block }

/* ==========================================================================
   I6 · MINI-CURSO POR E-MAIL — tema claro travado (cliente de e-mail)
   ========================================================================== */
.mail{ background:#FFFFFF; color:#18181B; border:1px solid #E7E7EA; border-radius:var(--r-md);
  overflow:hidden; position:relative }
.mail__bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#F4F4F5;
  border-bottom:1px solid #E7E7EA; font-family:var(--font-mono); font-size:9px; color:#6C6C70 }
.mail__bd{ padding:16px 16px 18px }
.mail__from{ font-size:10px; color:#6C6C70; margin-bottom:10px }
.mail__from b{ color:#18181B }
.mail__h{ font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-.032em;
  line-height:1.15; margin-bottom:9px; max-width:24ch }
.mail__p{ font-size:10.5px; color:#4B5563; line-height:1.65; margin-bottom:9px; max-width:46ch }
.mail__cta{ display:inline-flex; align-items:center; gap:7px; background:#DD0B17; color:#FFFFFF;
  font-size:11px; font-weight:600; padding:10px 16px; border-radius:var(--r-md); min-height:44px;
  box-sizing:border-box; margin-top:4px }
.mail__sig{ font-size:9px; color:#6C6C70; margin-top:14px; line-height:1.6 }
.mail__track{ display:flex; align-items:center; gap:6px; margin-bottom:12px; flex-wrap:wrap }
.mail__day{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:8.5px; color:#6C6C70 }
.mail__dot{ width:9px; height:9px; border-radius:50%; background:#8E8E93; display:inline-block }
.mail__dot--done{ background:#007A5F }
.mail__dot--now{ background:#DD0B17 }

/* ==========================================================================
   I7 · BENCHMARK COMPARATIVO
   ========================================================================== */
.bmk{ border-radius:var(--r-lg); overflow:hidden; background:var(--u-bg-deep); position:relative;
  padding:16px 15px 14px; color:var(--u-text) }
.bmk__h{ font-family:var(--font-display); font-size:13px; font-weight:650; letter-spacing:-.03em;
  line-height:1.2; max-width:24ch }
.bmk__row{ display:flex; align-items:center; gap:9px; margin-top:10px }
.bmk__lb{ font-size:9.5px; color:var(--u-text-2); flex:0 0 78px; line-height:1.3 }
.bmk__tr{ flex:1 1 auto; height:14px; border-radius:3px; background:var(--u-surface-hi); overflow:hidden }
.bmk__tr i{ display:block; height:100%; background:#7E7E92 }
.bmk__tr i.on{ background:#DD0B17 }
.bmk__vl{ font-family:var(--font-mono); font-size:9.5px; color:var(--u-text); flex:0 0 44px; text-align:right }
.bmk__n{ font-family:var(--font-mono); font-size:8.5px; color:var(--u-text-3); margin-top:11px; line-height:1.5 }

/* ==========================================================================
   I8 · AUDITORIA GUIADA
   ========================================================================== */
.aud{ border-radius:var(--r-lg); background:var(--u-bg-deep); padding:16px 15px; position:relative; color:var(--u-text) }
.aud__h{ font-family:var(--font-display); font-size:13px; font-weight:650; letter-spacing:-.03em;
  line-height:1.2; max-width:22ch; margin-bottom:12px }
.aud__st{ display:flex; gap:10px; margin-bottom:10px }
.aud__no{ flex:0 0 22px; height:22px; border-radius:50%; background:#DD0B17; color:#FFFFFF;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center }
.aud__tx{ font-size:10px; color:var(--u-text-2); line-height:1.5 }
.aud__tx b{ color:var(--u-text) }
.aud__timer{ margin-top:auto; background:var(--u-surface); border-radius:var(--r-md); padding:10px 12px;
  display:flex; align-items:baseline; gap:8px }
.aud__timer b{ font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.04em; color:var(--u-text) }
.aud__timer span{ font-size:9.5px; color:var(--u-text-3) }

/* ==========================================================================
   CORREÇÕES MEDIDAS NO CSS BASE DA §11.4
   Quatro rebaixamentos por opacidade reprovavam contraste quando recompostos
   contra o fundo real. A hierarquia passa a ser feita por COR CHEIA, corpo e
   peso. Cada número está escrito na regra correspondente do texto.
   ========================================================================== */
.isca__label{ opacity:1; color:var(--u-text-3) }        /* era .55 → 3,94:1 no claro */
.isca__src{ opacity:1; color:var(--u-text-3) }          /* era .60 */
.isca__pillar b{ opacity:1; color:var(--u-text) }       /* era .75 */
.isca__chart span{ opacity:1; background:var(--u-viz-other) }  /* era .42 → 2,28:1 */
.isca__chart span.on{ background:var(--u-red) }         /* barra de destaque é CAMPO */
/* o preenchimento do pilar continua sendo TINTA, e isso é medido: o trilho é
   --u-surface-hi (#27272A) e o campo #DD0B17 daria 2,93:1 contra ele. */

/* --- grades de apoio --- */
.fmt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:14px; align-items:start }
.fmt-grid--2{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.fmt-hold{ position:relative }
@media (max-width:520px){ .pdfpg{ padding:8% 8% } }

/* ==== §11.8.8 CARTÃO DE AVALIAÇÃO formato Google (.s7-gcard, estrelas) — unidades cqw = 1% da largura do container .s7-slide (l.6263-6270) · manual linhas 6272-6331 ==== */
.s7-slide{ container-type:inline-size; font-size:11px }
.slide16.s7-slide{ padding:3.333cqw 5cqw; gap:0 }     /* margem 64 / 96 px */

/* ---------- ETIQUETA DE IDENTIFICADOR ----------
   Definição idêntica à da §11.8.1, de propósito: a etiqueta é uma só no manual
   inteiro. Ao fundir os fragmentos, mantenha UMA das duas cópias — não altere
   os valores, porque a tinta foi escolhida por medição: #FF544A sobre #141417
   dá 5,80:1 no escuro e #B50F14 sobre #F4F4F5 dá 6,28:1 no claro. */
/* A etiqueta .pid tem DECLARACAO UNICA em §13.4 do manual. Esta secao NAO
   redeclara a classe-base: redeclarar faz a ultima folha do documento vencer e
   a etiqueta muda de aparencia de secao para secao, o que a lei do componente
   proibe. Aqui so entram modificadores que §13.4 nao cobre. */
.pid{ min-width:36px }
.s7-cap{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 9px }
.s7-cap b{ font-family:var(--font-display); font-size:12.5px; font-weight:650; color:var(--u-text) }
.s7-cap em{ font-style:normal; font-family:var(--font-mono); font-size:10px; color:var(--u-text-dis);
  letter-spacing:.04em; text-transform:uppercase }
.s7-ex{ margin:0 0 22px }

/* ---------- ASSINATURA E RODAPÉ DO SLIDE ---------- */
.s7-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:2.5cqw;
  margin-top:auto; padding-top:1.667cqw }
.s7-foot .s7-num{ font-family:var(--font-mono); font-size:1.25cqw; letter-spacing:.06em }
.s7-foot .s7-src{ font-size:1.25cqw; line-height:1.4; max-width:52cqw }
.s7-sig{ height:1.875cqw; width:auto; display:block; flex:0 0 auto }   /* 36 px de altura real */

/* ---------- CARTÃO DE AVALIAÇÃO · FORMATO GOOGLE ---------- */
/* Fundo do slide claro: é a família de fundo que a §11.7 reserva para prova
   social — a peça precisa parecer documento, não anúncio. */
.s7-slide--light{ background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F5 100%); color:#18181B }

.s7-gcard{ background:#FFFFFF; border:1px solid #E7E7EA; border-radius:1.25cqw;
  padding:2.083cqw; display:flex; flex-direction:column; flex:0 0 auto;
  /* sombra NEUTRA, zero canal vermelho. Sombra vermelha sobre cartão branco
     é a proibição que mata o rosa. */
  box-shadow:0 1px 2px rgba(10,10,12,.05), 0 10px 26px -12px rgba(10,10,12,.16) }
.s7-gcard__head{ display:flex; align-items:center; gap:1.25cqw }
/* o disco é CAMPO vermelho a 100% de opacidade — permitido. Halo, brilho ou
   sombra vermelha em volta dele, sobre cartão branco, é proibido. */
.s7-avatar{ width:4.583cqw; height:4.583cqw; border-radius:50%; background:#DD0B17;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  font-family:var(--font-display); font-weight:600; font-size:2.083cqw; color:#FFFFFF;
  line-height:1; opacity:1 }
.s7-who{ min-width:0 }
.s7-who b{ display:block; font-family:var(--font-display); font-size:1.667cqw; font-weight:600;
  letter-spacing:-.02em; line-height:1.2; color:#18181B }
.s7-who span{ display:block; font-size:1.354cqw; line-height:1.35; color:#6C6C70; margin-top:.313cqw }
.s7-stars{ display:flex; gap:.417cqw; margin:1.458cqw 0 0 }
.s7-quote{ font-size:1.875cqw; line-height:1.5; color:#52525B; margin-top:1.458cqw }

/* estrela: recorte vetorial, a cor vem do token de ouro do tema da peça */
.s7-star{ width:2.083cqw; height:2.083cqw; flex:0 0 auto; background:var(--s7-gold,#B07D00);
  -webkit-mask:var(--s7-star) center/contain no-repeat; mask:var(--s7-star) center/contain no-repeat }
.s7-star--empty{ -webkit-mask-image:var(--s7-star-o); mask-image:var(--s7-star-o) }
.s7-slide{
  --s7-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  --s7-star-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") }
.s7-slide--light{ --s7-gold:#B07D00 }      /* claro: o ouro do Google reprova, ver tabela */
.s7-slide--carbon{ --s7-gold:#FBBC04 }


/* ==== §11.8.8 cabeçalho/rodapé/tiles do slide de prova social (.s7-claim, .s7-nums) · manual linhas 6383-6396 ==== */
/* ---------- CABEÇALHO DE SLIDE (afirmação em frase completa) ---------- */
.s7-kick{ font-size:1.25cqw; font-weight:600; letter-spacing:.14em; text-transform:uppercase }
/* 48 px, e não os 72 px do título de modo leitura: nesta família a prova é o
   conteúdo principal, e um título de 72 px em duas linhas come 158 px de altura
   contra 106 px aqui. A conta de altura de S61, S63, S68 e S69 só fecha assim. */
.s7-claim{ font-family:var(--font-display); font-size:2.5cqw; font-weight:700; letter-spacing:-.032em;
  line-height:1.1; margin-top:.833cqw; max-width:44ch; text-wrap:balance }
.s7-slide--light .s7-claim{ color:#18181B }
.s7-slide--light .s7-kick{ color:#B50F14 }
.s7-slide--light .s7-foot{ color:#6C6C70 }
.s7-slide--carbon .s7-claim{ color:#F0F0F0 }
.s7-slide--carbon .s7-kick{ color:#FF544A }
.s7-slide--carbon .s7-foot{ color:#8E8E93 }
.s7-body{ flex:1 1 auto; display:flex; min-height:0; margin-top:2.5cqw }

/* ==== §11.8.8 parede de números (.s7-nums) · manual linhas 6439-6447 ==== */
/* ---------- S69 · PAREDE DE NÚMEROS ---------- */
.s7-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5cqw 1.667cqw;
  align-content:center; flex:1 1 auto }
.s7-num-tile{ padding-top:1.667cqw; border-top:2px solid #3F3F46 }
.s7-num-tile b{ display:block; font-family:var(--font-display); font-size:5cqw; font-weight:700;
  letter-spacing:-.05em; line-height:.92; color:#F0F0F0 }
.s7-num-tile span{ display:block; font-size:1.667cqw; line-height:1.35; color:#B4BCC8; margin-top:.833cqw }
.s7-num-tile em{ display:block; font-style:normal; font-family:var(--font-mono); font-size:1.25cqw;
  color:#8E8E93; margin-top:.833cqw; line-height:1.4 }

/* ==== §11.5 peças sociais .piece (documentadas para referência de carrossel/post) · manual linhas 561-615 ==== */
/* peças sociais */
.social-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:14px }
/* Peça social — margens derivadas da tela de 1080 × 1350:
   laterais e topo 80 px (7,4% da largura) · BASE 160 px (14,8%), o dobro do topo.
   A base maior é o que dá o respiro; a numeração vive dentro dessa faixa. */
.piece{ aspect-ratio:4/5; border-radius:var(--r-md); border:1px solid var(--u-border-subtle); overflow:hidden;
  padding:7.4% 7.4% 14.8%; display:flex; flex-direction:column; position:relative }
.piece--sq{ aspect-ratio:1/1; padding:8.5% 8.5% 16% }
.piece--story{ aspect-ratio:9/16; padding:7.4% 7.4% 22% }
.piece__logo{ width:17%; height:auto; display:block; position:relative; z-index:2; flex:0 0 auto }

/* âncoras verticais do conteúdo */
.piece__body{ margin-top:auto; position:relative; z-index:2 }
.piece--cover .piece__body{ margin-bottom:7% }          /* capa sobe: cabe headline de 3 linhas */
.piece--center .piece__body{ margin-bottom:auto }        /* bloco centralizado na tela */

.piece__kick{ font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  opacity:.72; margin-bottom:7px }
.piece__big{ font-family:var(--font-display); font-size:clamp(15px,2.1vw,20px); font-weight:700;
  letter-spacing:-.034em; line-height:1.1; text-wrap:balance }
.piece__big--cover{ font-size:clamp(17px,2.5vw,24px) }
.piece__sub{ font-family:var(--font-display); font-size:clamp(11px,1.5vw,14px); font-weight:600;
  letter-spacing:-.02em; line-height:1.25; opacity:.9; margin-top:6px }
.piece__num{ font-family:var(--font-display); font-size:clamp(36px,5.4vw,56px); font-weight:700;
  letter-spacing:-.05em; line-height:.92 }
.piece__num--cover{ font-size:clamp(48px,7.4vw,78px) }
.piece__idx{ font-family:var(--font-display); font-size:clamp(20px,2.7vw,30px); font-weight:700;
  letter-spacing:-.04em; line-height:1; color:var(--u-red-ink-dark); margin-bottom:9px }
.piece__cap{ font-size:9.5px; opacity:.62; margin-top:8px; line-height:1.45 }
.piece__cap--cover{ font-size:clamp(11px,1.4vw,13px); opacity:.82; margin-top:11px }
/* sub-headline de CAPA — é subtítulo, não legenda: some com o dado se ficar pequena */
.piece__sub--cover{ font-family:var(--font-display); font-size:clamp(12px,1.75vw,16px);
  font-weight:600; letter-spacing:-.022em; line-height:1.25; opacity:.96; margin-top:9px }
/* número de capa reduzido, para conviver com imagem acima */
.piece__num--withmedia{ font-size:clamp(34px,5.2vw,54px) }
/* corpo: onde o conteúdo é de fato entregue — 3 a 4 linhas */
.piece__copy{ font-size:clamp(9.5px,1.25vw,11.5px); line-height:1.55; opacity:.78; margin-top:11px }
/* espaço reservado para imagem, entre o logo e a base */
.piece__media{ flex:1 1 auto; margin:9% 0 0; border-radius:8px; position:relative;
  border:1px dashed color-mix(in srgb, currentColor 24%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9px; opacity:.45 }
.piece__step{ position:absolute; bottom:5.5%; right:7.4%; font-family:var(--font-mono);
  font-size:9px; opacity:.45; z-index:2 }
.p-field{ background:var(--u-gradient); color:#fff }
.p-field::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 55%); pointer-events:none }
/* Teto medido (31/07/2026): branco a 20% compõe #E43C45 sobre o campo #DD0B17 e derruba
   o texto branco de 5,08:1 para 4,17:1 — REPROVA AA. O ponto exato de 4,50:1 é 14%;
   a casa trabalha a 12% (4,61:1). Casa com a lei "clarear o topo do campo é proibido". */
.p-carbon{ background:var(--u-bg-deep); color:var(--u-text) }
.p-surface{ background:var(--u-surface); color:var(--u-text) }
.p-photo{ background:linear-gradient(180deg,rgba(10,10,12,.30),rgba(10,10,12,.88)),
  radial-gradient(circle at 30% 25%, #4a3a35, #17141a); color:#fff }
.hl{ color:var(--u-red-ink-dark) }

/* ==== ACESSIBILIDADE: movimento reduzido (l.693) + impressão · manual linhas 693-693 ==== */
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition:none!important } }

/* ==== DOCUMENTAÇÃO — moldura de navegador .frame (usada nos exemplos PG-#) · manual linhas 441-448 ==== */
/* moldura de navegador / aplicativo */
.frame{ border:1px solid var(--u-border-default); border-radius:var(--r-lg); overflow:hidden;
  background:var(--u-bg-deep); box-shadow:0 20px 50px -24px rgba(0,0,0,.6) }
.frame__bar{ display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-bottom:1px solid var(--u-border-subtle); background:var(--u-surface) }
.frame__bar i{ width:9px; height:9px; border-radius:50%; background:var(--u-border-emphasis); display:block }
.frame__url{ margin-left:9px; font-family:var(--font-mono); font-size:10.5px; color:var(--u-text-dis);
  background:var(--u-well); padding:3px 10px; border-radius:6px }

/* ==== DOCUMENTAÇÃO — grades tpl-pair/tpl-label/tpl-note e .card · manual linhas 293-295 ==== */
.card{ background:var(--u-surface); border:1px solid var(--u-border-subtle); border-radius:var(--r-lg); padding:20px }
.g2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px }
.g3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px }

/* ==== DOCUMENTAÇÃO — tpl-pair/tpl-note · manual linhas 438-439 ==== */
.tpl-pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start }
.tpl-note{ font-size:12.5px; color:var(--u-text-3); margin-top:9px; line-height:1.5; max-width:62ch }

/* ==== DOCUMENTAÇÃO — .tpl-label · manual linhas 415-416 ==== */
.tpl-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--u-text-dis); letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 8px }

/* ==== DOCUMENTAÇÃO — etiqueta .pid (§13.4.1, DECLARAÇÃO ÚNICA; nunca vai para produção, l.7364 e l.7452) · manual linhas 7329-7346 ==== */
.pid{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.03em; line-height:1; white-space:nowrap;
  color:#F0F0F0; background:#0A0A0C;
  border:1px solid rgba(255,255,255,.40);
  border-radius:5px; padding:4px 7px;
  pointer-events:none; user-select:none;
  vertical-align:1px;
}
/* canto do exemplo — só o modificador tira a etiqueta do fluxo */
.pid--tl,.pid--tr,.pid--bl,.pid--br{ position:absolute; z-index:30 }
.pid--tl{ top:8px; left:8px; right:auto; bottom:auto }
.pid--tr{ top:8px; right:8px; left:auto; bottom:auto }
.pid--bl{ bottom:8px; left:8px; top:auto; right:auto }
.pid--br{ bottom:8px; right:8px; top:auto; left:auto }
/* o container do exemplo precisa de position:relative para ancorar o .pid */
.pid-anchor{ position:relative }

/* ==== DOCUMENTAÇÃO — .pid-row/.fmt-hold/.isca-row auxiliares · manual linhas 2958-2961 ==== */
/* --- grades de apoio --- */
.fmt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:14px; align-items:start }
.fmt-grid--2{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.fmt-hold{ position:relative }