/* Border Ltd — site do brandbook. Tokens: border-tokens.json (CORES/tipografia verificadas). */
/* Fontes REAIS da marca: Helvetica Neue (com Heavy) + Times New Roman.
   woff2 primeiro (≈60% menor); otf/ttf original como fallback. */
@font-face{font-family:'HelvNeue';src:url('ASSETS/FONTES/HelveticaNeueRoman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'HelvNeue';src:url('ASSETS/FONTES/HelveticaNeueItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'HelvNeue';src:url('ASSETS/FONTES/HelveticaNeueBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'HelvNeue';src:url('ASSETS/FONTES/HelveticaNeueBoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'HelvNeue';src:url('ASSETS/FONTES/HelveticaNeueHeavy.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'TNR';src:url('ASSETS/FONTES/Times New Roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'TNR';src:url('ASSETS/FONTES/Times New Roman Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'TNR';src:url('ASSETS/FONTES/Times New Roman Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'TNR';src:url('ASSETS/FONTES/Times New Roman Bold Italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}
/* escala completa Helvetica Neue — família isolada p/ espécime de pesos */
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeueUltraLight.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeue-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeueRoman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeue-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeueBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeue-Heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'BSpec';src:url('ASSETS/FONTES/HelveticaNeueBlack.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}

:root{
  /* Aliases locais → tokens canônicos do DS (border-ds.css, linkado antes).
     Fallback literal = mesmo valor, p/ abrir página solta sem o canônico. */
  --preto:var(--color-brand-primary,#212121);
  --branco:var(--color-bg,#FFFFFF);
  --inv:var(--color-text-inverse,#fff);          /* branco inverso p/ texto/borda sobre escuro */
  --verde:var(--color-surface-accent,#223A1D);
  --vermelho:var(--color-feedback-danger-principal,#B71C1C);
  --n100:var(--color-neutral-lightest,#F7F7F7); --n200:#EFEFEF; /* degrau sem token */
  --n300:var(--color-neutral-light,#E0E0E0); --n400:#CFCFCF; /* degrau sem token */
  --n500:var(--color-neutral-principal,#8A8A8A);
  --n600:var(--color-neutral-text-secondary,#676767);
  --n700:var(--color-neutral-dark,#3D3D3D);
  --sans:'HelvNeue','Helvetica Neue',Arial,sans-serif;
  --serif:'TNR','Times New Roman','Times',serif;
  --s-quarck:var(--spacing-stack-quarck,4px); --s-mini:var(--spacing-stack-mini,12px);
  --s1:var(--spacing-stack-nano,8px); --s2:var(--spacing-stack-xxxs,16px);
  --s3:var(--spacing-stack-xxs,24px); --s4:var(--spacing-stack-xs,32px);
  --s5:var(--spacing-stack-sm,40px);  --s6:var(--spacing-stack-md,48px);
  --sidebar:248px;
  --pad-x:200px; /* respiro lateral do miolo (pedido Helena 09/jun) */
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);color:var(--color-text,#212121);background:var(--branco);
  font-size:var(--font-size-md);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:0;}
:focus-visible{outline:2px solid var(--color-focus-ring,#0011ff);outline-offset:2px;}

/* ============ SIDE NAVIGATION (componente do DS — rail escuro) ============ */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar);height:100vh;
  background:var(--color-surface-dark,#0A0A0A);color:var(--inv);display:flex;flex-direction:column;
  padding:28px var(--s2) 20px;z-index:40;overflow-y:auto;}
.sidebar .brand{display:block;padding:0 var(--s-mini);text-decoration:none;}
.sidebar .brand img{width:120px;}
.sidebar .brand-sub{font-family:var(--serif);font-style:italic;font-size:var(--font-size-sm);
  color:var(--color-text-inverse-muted,#A1A1A1);display:block;margin-top:6px;}
.sidebar nav{margin-top:20px;}
.sidebar .nav-section{font-size:var(--font-size-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-inverse-muted,#A1A1A1);padding:var(--s2) var(--s-mini) 6px;}
.sidebar nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-quarck);}
.sidebar nav a{display:flex;gap:10px;align-items:baseline;padding:9px var(--s-mini);border-radius:var(--radius-medium);
  text-decoration:none;color:var(--color-text-inverse-muted,#A1A1A1);font-size:var(--font-size-sm);
  transition:color .15s,background .15s;}
.sidebar nav a:hover{color:var(--inv);background:var(--color-text,#212121);}
.sidebar nav a[aria-current=page]{color:var(--inv);background:var(--color-text-sub,#3D3D3D);font-weight:500;}
.sidebar nav a:focus-visible{outline:2px solid var(--color-focus-ring-inverse,#5A9BFF);outline-offset:0;}
.sidebar nav .n{font-size:var(--font-size-xs);font-family:var(--font-family-mono,monospace);letter-spacing:.04em;
  color:rgba(255,255,255,.42);min-width:20px;}
.sidebar nav a[aria-current=page] .n,.sidebar nav a:hover .n{color:rgba(255,255,255,.75);}
.sidebar nav ul ul{margin:var(--s-quarck) 0 0;display:none;}
.sidebar nav li.open > ul{display:flex;}
.sidebar nav ul ul a{padding:var(--s1) var(--s-mini) var(--s1) 38px;}
.sidebar nav .arrow{margin-left:auto;font-size:8px;opacity:.45;transition:transform .15s;}
.sidebar nav li.open > a .arrow{transform:rotate(90deg);opacity:.7;}
.side-foot{margin-top:auto;padding:20px var(--s-mini) 0;font-size:var(--font-size-xs);font-family:var(--font-family-mono,monospace);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-inverse-muted,#A1A1A1);}

/* ============ TOPBAR (mobile) ============ */
.topbar{display:none;position:sticky;top:0;z-index:30;background:var(--branco);
  border-bottom:1px solid var(--n300);padding:var(--s-mini) var(--s2);
  align-items:center;justify-content:space-between;}
.topbar img{height:22px;width:auto;}
.burger{appearance:none;border:none;background:none;width:40px;height:40px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:var(--s1);border-radius:var(--radius-medium);}
.burger span{display:block;width:100%;height:2px;background:var(--preto);border-radius:var(--radius-small);}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;}

/* ============ CONTEÚDO — pattern Article ============ */
.content{margin-left:var(--sidebar);padding:clamp(40px,6vw,64px) var(--pad-x);}
.wrap{max-width:720px;margin:0;}
.content.dark{background:var(--preto);color:var(--inv);min-height:100vh;}
/* breadcrumb = componente Breadcrumb do DS (Figma 265:129): links são .ds-link (body 16 + verde
   --color-text-link + sublinhado); separador e atual em 14 (sm); atual = surface-dark. */
.breadcrumb{display:flex;gap:var(--s1);align-items:center;font-size:var(--font-size-md);margin-bottom:var(--s5);flex-wrap:wrap;}
.breadcrumb a{padding:2px;}
.breadcrumb .sep{color:var(--n600);font-size:var(--font-size-sm);}
.breadcrumb .cur{font-weight:var(--font-weight-medium);color:var(--color-surface-dark,#0A0A0A);font-size:var(--font-size-sm);}
.page-head{margin-bottom:var(--s5);display:flex;flex-direction:column;gap:var(--s2);}
h1{font-size:var(--font-size-5xl);line-height:1.08;letter-spacing:-.02em;margin:0;}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,22px);
  line-height:1.4;color:var(--n700);margin:0;}
/* 2ª fase da virada: a prosa usa a rampa do DS (.ds-body/.ds-h2/.ds-overline) carregada
   direto no HTML — a tipografia vem das classes globais; aqui ficam só o RITMO vertical do
   artigo e a cor de eyebrow. Como os componentes usam .ds-card__* (não .ds-body/.ds-h2),
   não há mais a briga de especificidade que exigia a ponte .content .ds-card__*. */
.content .ds-body{margin:0 0 var(--s2);}
.wrap > .ds-h2{margin:var(--s5) 0 var(--s2);}  /* só os títulos de seção no fluxo; o > evita a h2 dentro de .heading-tag */
.content .ds-overline{color:var(--n600);}       /* eyebrow/sobrescrita + kicker em cinza (kicker = .ds-overline.mut) */
.mut{color:var(--n600);}
.content .small{font-size:var(--font-size-xs);line-height:var(--font-line-height-relaxed);margin:0 0 var(--s2);}

/* ============ TAG: componente .ds-tag da folha canônica (border-ds-base.css) ============ */
/* layout dos selos de confiança no brandbook (o pill é .ds-tag; o SVG cheio/meio/vazio
   codifica o nível e entra como filho do pill, espaçado pelo gap do .ds-tag) */
.tag-row{display:block;margin-bottom:6px;}
.heading-tag{display:flex;align-items:baseline;gap:var(--s-mini);margin:var(--s4) 0 var(--s1);}
.heading-tag h2,.heading-tag h3{margin:0;}
.logo-h2{width:min(280px,60vw);display:inline-block;vertical-align:middle;}

/* ============ CARD (componente do DS) ============ */
.card{border:1px solid var(--n300);border-radius:var(--radius-medium,4px);padding:var(--s3);background:var(--branco);}
.card h3{margin:0 0 var(--s1);}
.card>*:last-child,.callout>*:last-child{margin-bottom:0;}
.card .k{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--n600);display:flex;justify-content:space-between;align-items:center;gap:var(--s1);margin-bottom:var(--s1);}
.card p{margin:0 0 var(--s1);}
.card .swatch{margin-bottom:var(--s2);}
.grid{display:grid;gap:var(--s2);margin:var(--s2) 0;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
@media(max-width:680px){.g2,.g3{grid-template-columns:1fr;}}

/* ============ VOICE BLOCK / BANNER (componentes do DS) ============ */
.callout{border:1px solid var(--n300);border-left:3px solid var(--preto);
  border-radius:var(--radius-medium,4px);padding:var(--s3);margin:var(--s3) 0;background:var(--branco);}
.callout .k{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--n600);margin-bottom:var(--s1);}
/* Voice block Green — citação sobre verde, aspas grandes do componente */
.surface-green{background:var(--verde);color:var(--inv);border:none;border-radius:var(--radius-large,8px);
  padding:var(--s4);position:relative;}
.surface-green::before{content:"“";display:block;font-family:var(--serif);font-weight:700;
  font-size:64px;line-height:.6;margin-bottom:14px;color:var(--inv);}
.surface-green .k{color:var(--color-text-inverse-muted,#A1A1A1);}
.surface-green p{font-family:var(--serif);font-style:italic;}

ul.clean{margin:var(--s1) 0 var(--s2);padding-left:18px;}
ul.clean li{margin:var(--s-quarck) 0;font-size:var(--font-size-md);line-height:1.55;}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s2) 0;}
@media(max-width:680px){.do-dont{grid-template-columns:1fr;}}
.do-dont .card{background:var(--n100);border:none;}
.swatch{height:120px;border-radius:var(--radius-medium,4px);border:1px solid var(--n300);background:var(--c,transparent);}

/* ============ DIVISÃO DE USO DE CORES ============ */
.usebar{display:flex;height:120px;border-radius:var(--radius-medium,4px);overflow:hidden;border:1px solid var(--n300);margin:var(--s3) 0 var(--s2);}
.usebar .seg{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;min-width:0;}
.usebar .seg .pct{font-family:var(--sans);font-weight:900;line-height:1;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;}
.usebar .seg .nm{font-size:var(--font-size-xs);letter-spacing:.04em;text-transform:uppercase;margin-top:6px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.usebar .seg--branco{flex:72;background:var(--branco);color:var(--preto);border-right:1px solid var(--n300);}
.usebar .seg--preto{flex:24;background:var(--preto);color:var(--inv);}
.usebar .seg--verde{flex:4;background:var(--verde);color:var(--inv);}
.usebar .seg--vermelho{flex:1;background:var(--vermelho);color:var(--inv);}
.usebar .seg--thin{padding:14px var(--s1);}
.usebar .seg--thin .pct{font-size:var(--font-size-lg);}
.usebar .seg--thin .nm{writing-mode:vertical-rl;transform:rotate(180deg);margin:6px 0 0;}

.use-legend{display:grid;grid-template-columns:1fr;border:1px solid var(--n300);border-radius:var(--radius-medium,4px);overflow:hidden;margin:var(--s2) 0 var(--s4);}
.use-legend .lrow{display:grid;grid-template-columns:18px 150px 56px 1fr;gap:14px;align-items:center;padding:14px var(--s3);border-top:1px solid var(--n200);font-size:var(--font-size-sm);}
.use-legend .lrow:first-child{border-top:none;}
.use-legend .dot{width:18px;height:18px;border-radius:var(--radius-medium);border:1px solid var(--n300);}
.use-legend .dot--branco{background:var(--branco);}
.use-legend .dot--preto{background:var(--preto);}
.use-legend .dot--verde{background:var(--verde);}
.use-legend .dot--vermelho{background:var(--vermelho);}
.use-legend .lname{font-weight:700;}
.use-legend .lname small{display:block;font-weight:400;font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);color:var(--n600);letter-spacing:.02em;}
.use-legend .lpct{font-family:var(--sans);font-weight:900;font-size:var(--font-size-lg);text-align:right;letter-spacing:-.02em;}
.use-legend .lrole{color:var(--n600);}
@media(max-width:640px){.use-legend .lrow{grid-template-columns:18px 1fr auto;}.use-legend .lrole{display:none;}}

.ctable .chip{display:inline-flex;align-items:center;justify-content:center;width:64px;height:30px;border-radius:var(--radius-medium);border:1px solid var(--n300);font-size:var(--font-size-xs);font-weight:700;}
.ctable .chip--pb{background:var(--branco);color:var(--preto);}
.ctable .chip--bp{background:var(--preto);color:var(--inv);}
.ctable .chip--bv{background:var(--verde);color:var(--inv);}
.ctable .chip--bvm{background:var(--vermelho);color:var(--inv);}
.ctable .chip--vp{background:var(--preto);color:#3E6B33;}
.ctable .ratio{font-family:var(--sans);font-weight:900;font-size:var(--font-size-md);letter-spacing:-.01em;white-space:nowrap;}
.ctable .lvl{display:inline-block;font-size:var(--font-size-xs);font-weight:700;letter-spacing:.04em;padding:3px var(--s1);border-radius:99px;}
.ctable .lvl--aaa{background:var(--color-feedback-success-lightest,#D6EBD8);color:var(--color-feedback-success-dark,#134016);}
.ctable .lvl--aa{background:#E7F0FB;color:#0B3A75;}
.ctable .lvl--fail{background:#FBE3E3;color:#8A1414;}

/* ============ TABLE: componente .ds-table da folha canônica (border-ds-components.css) ============ */
/* tabelas do brandbook (_table + ctable) usam o wrapper .ds-table .ds-table--scroll;
   a ctable mantém só os add-ons de célula (.chip/.ratio/.lvl) acima */

.example{border:1px solid var(--n300);border-radius:var(--radius-medium,4px);overflow:hidden;}
.example .air{background:var(--n100);padding:var(--s2);font-size:var(--font-size-sm);}
.example .bdr{padding:var(--s2);}
.example .lbl{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--n600);margin-bottom:6px;}
.grid2{display:flex;gap:var(--s2);margin:var(--s2) 0;}.grid2>*{flex:1;}
@media(max-width:680px){.grid2{flex-direction:column;}}
.gcard{border:1px solid var(--n300);border-radius:var(--radius-medium,4px);padding:var(--s3);font-size:var(--font-size-sm);line-height:1.5;background:var(--branco);}
.gcard .k{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--n600);margin-bottom:var(--s1);}
.gcard p{margin:0 0 var(--s1);}.gcard ul.clean{margin:var(--s-quarck) 0 0;}
.mono{font-family:var(--font-family-mono,"SF Mono",ui-monospace,Menlo,Consolas,monospace);background:var(--n100);
  border:1px solid var(--n200);border-radius:var(--radius-medium);padding:10px var(--s-mini);line-height:1.55;
  font-size:var(--font-size-xs);color:var(--preto);overflow-wrap:anywhere;}

/* ============ BUTTONS ============ */
/* Botão = componente .ds-btn da folha canônica (border-ds-base.css, linkada antes).
   O brandbook só adiciona a inversão branco-no-escuro do hero (ver .hero .ds-btn--* abaixo). */

/* ============ PREV/NEXT — cards "Leia também" do Article ============ */
/* .chnav (pager de capítulos): canônico em border-ds-components.css */

/* ============ FOOTER (componente do DS — escuro) ============ */
.ds-footer{margin-left:var(--sidebar);background:var(--color-surface-dark,#0A0A0A);color:var(--inv);
  padding:56px var(--pad-x) var(--s4);display:flex;flex-direction:column;gap:var(--s5);}
.ds-footer .cols{display:flex;gap:clamp(32px,6vw,96px);flex-wrap:wrap;justify-content:space-between;}
.ds-footer .marca img{width:134px;}
.ds-footer .marca .sub{font-family:var(--serif);font-style:italic;font-size:var(--font-size-sm);
  color:var(--color-text-inverse-muted,#A1A1A1);display:block;margin-top:10px;}
.ds-footer nav{display:flex;flex-direction:column;gap:var(--s-mini);min-width:120px;}
.ds-footer nav .h{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-inverse-muted,#A1A1A1);}
.ds-footer nav a{font-size:var(--font-size-sm);color:var(--inv);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.35);}
.ds-footer nav a:hover{text-decoration-color:var(--inv);}
.ds-footer nav a:focus-visible{outline:2px solid var(--color-focus-ring-inverse,#5A9BFF);outline-offset:2px;}
.ds-footer hr{border:none;border-top:1px solid rgba(224,224,224,.22);margin:0;}
.ds-footer .base{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  font-size:var(--font-size-xs);color:var(--color-text-inverse-muted,#A1A1A1);}

/* ============ HOME — pattern Landing (capa cheia, fundo primário) ============ */
.hero{margin-left:var(--sidebar);background:var(--color-brand-primary,#212121);color:var(--inv);
  min-height:100vh;padding:clamp(64px,9vw,112px) var(--pad-x) clamp(48px,6vw,64px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s3);}
.hero .top{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-inverse-muted,#A1A1A1);}
.hero .center img{width:min(420px,70vw);}
.hero .center .desc{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,28px);
  color:var(--color-text-inverse-muted,#A1A1A1);margin-top:var(--s2);}
.hero .cta{display:flex;gap:var(--s-mini);flex-wrap:wrap;}
/* CTAs sobre o escuro: primário invertido (branco), secundário fantasma */
.hero .ds-btn--primary{background:var(--branco);color:var(--preto);border:1px solid var(--inv);}
.hero .ds-btn--primary:hover{background:var(--n100);border-color:var(--n100);}
.hero .ds-btn--secondary{background:transparent;color:var(--inv);border:1px solid rgba(255,255,255,.4);}
.hero .ds-btn--secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);}
.hero .bottom{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;width:100%;
  margin-top:var(--s4);font-family:var(--font-family-mono,monospace);
  font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-inverse-muted,#A1A1A1);}
.toc-page{margin-left:var(--sidebar);padding:var(--s6) var(--pad-x);}
.toc-page .wrap-l{max-width:920px;margin:0;}
.toc{list-style:none;margin:0;padding:0;}
.toc li{border-bottom:1px solid var(--n300);}
.toc a{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s2) var(--s-quarck);text-decoration:none;
  transition:padding .15s,background .15s;}
.toc a:hover{padding-left:var(--s-mini);background:var(--n100);}
.toc .n{font-family:var(--font-family-mono,monospace);font-size:var(--font-size-xs);color:var(--n500);min-width:30px;}
.toc .t{font-size:var(--font-size-lg);font-weight:700;}
.toc .d{margin-left:auto;font-size:var(--font-size-xs);color:var(--n600);text-align:right;}
@media(max-width:680px){.toc .d{display:none;}}
.legend{margin-top:var(--s5);}
.legend .row{display:flex;gap:var(--s-mini);align-items:flex-start;margin:10px 0;font-size:var(--font-size-sm);}

/* ============ UTILITÁRIOS (a CSS mãe manda — nada de style inline) ============ */
/* espaçamento */
.m0{margin:0;}.mt0{margin-top:0;}.mb0{margin-bottom:0;}.mxa{margin-left:auto;margin-right:auto;}
.mt-xs{margin-top:6px;}.mt-sm{margin-top:var(--s1);}.mt-md{margin-top:var(--s-mini);}.mt-s2{margin-top:var(--s2);}
.mb-2mm{margin-bottom:2mm;}.mb-3mm{margin-bottom:3mm;}.mb-4mm{margin-bottom:4mm;}.mb-5mm{margin-bottom:5mm;}
.mt-2mm{margin-top:2mm;}.mt-3mm{margin-top:3mm;}.mt-4mm{margin-top:4mm;}.mt-6mm{margin-top:6mm;}
.my-3mm{margin:3mm 0;}.m-2-0-4mm{margin:2mm 0 4mm;}
.cap-gap{margin:2mm 0 0;}.my-xs{margin:var(--s-quarck) 0;}.mt-row{margin:6px 0 0;}
/* texto */
.tc{text-align:center;}.toc-title{margin:var(--s2) 0 var(--s4);}
.txt-xxs{font-size:8.3pt;}.txt-xs{font-size:9pt;}.txt-s{font-size:9.5pt;}.txt-sm{font-size:10.5pt;}
.fg-mut{color:var(--n600);}.fg-ink{color:var(--preto);}.c-guide{color:#0090C0;}
.serif-i{font-family:var(--serif);font-style:italic;}
/* figura + legenda (semânticos: estilizados direto, sem classe) */
figure{margin:0;}
.fig{flex:1;min-width:0;margin:0;}
.fig>img,.img-rad{border-radius:var(--radius-medium,4px);}
.img-fluid{width:100%;height:auto;display:block;}
figcaption{font-size:8.3pt;color:var(--n600);margin-top:1.5mm;line-height:1.4;}
/* foto-retrato com proporção */
.ph{width:100%;display:block;object-fit:cover;border-radius:var(--radius-medium,4px);}
.ph--3-4{aspect-ratio:3/4;}.ph--4-5{aspect-ratio:4/5;}
.ph-shadow{box-shadow:0 6px 24px rgba(33,33,33,.16);}
/* largura por dado (valor vem em --w, regra mora aqui) */
.w-var{width:var(--w);}
.fig-cast{display:flex;flex-direction:column;gap:14px;}

/* ============ COMPONENTES (helpers do build) ============ */
/* cartão de imagem centralizado */
.imgcard{text-align:center;padding:var(--s5);background:var(--n100);}
.imgcard>img{margin:0 auto;display:block;width:var(--w,min(360px,80%));}
/* espécime tipográfico */
.specimen{padding:var(--s4);}
.specimen__hero{font-weight:var(--spw,400);font-size:clamp(64px,12vw,150px);line-height:.9;letter-spacing:-.02em;}
.specimen__glyphs{font-size:clamp(20px,3.5vw,30px);color:var(--n700);padding:14px 0;border-top:1px solid var(--n300);border-bottom:1px solid var(--n300);margin:14px 0;}
.specimen__row{display:flex;align-items:baseline;gap:20px;padding:10px 0;border-bottom:1px solid var(--n200);}
.specimen__lbl{flex:0 0 130px;font-size:var(--font-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--n600);}
.specimen__sample{font-weight:var(--spw,400);font-size:var(--font-size-2xl);line-height:1;}
.spec-sans{font-family:'BSpec';}.spec-serif{font-family:var(--serif);}
.fst-i{font-style:italic;}
/* duo de fontes */
.duo__aa{font-size:84px;line-height:1;letter-spacing:-.02em;margin:14px 0 var(--s1);font-weight:var(--spw,400);}
.duo__nm{font-size:var(--font-size-2xl);}
.mt-14{margin-top:14px;}
/* corpo mínimo / redução */
.minsize-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;margin-bottom:var(--s2);}
.minsize-img{display:block;width:var(--w);}
.minsize-min{border-left:2px solid var(--verde);padding-left:14px;}
.minsize-min p{margin:6px 0 0;color:var(--verde);font-weight:700;font-size:var(--font-size-xs);}
.minsize-cap{margin:6px 0 0;}
.mono-card{display:flex;align-items:center;gap:20px;}
.mono-card img{height:64px;}
/* favicon ladder */
.favicell{text-align:center;}
.favi-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin-bottom:var(--s3);}
.favibox{display:inline-flex;align-items:center;justify-content:center;background:var(--n100);border-radius:var(--radius-large);width:var(--sz);height:var(--sz);}
.favibox img{width:var(--isz);height:var(--isz);}
.favi-cap{margin:var(--s1) 0 0;font-size:var(--font-size-xs);}
.favi-big{width:120px;border-radius:12px;}
.favi-mask{position:relative;display:inline-block;}
.favi-safe{position:absolute;inset:0;margin:auto;width:96px;height:96px;border:1.5px dashed var(--guide,#C0392B);border-radius:50%;}
.favi-apple{width:120px;border-radius:26px;}
/* svg de construção (área de segurança) */
.cs-svg{width:100%;height:auto;display:block;margin:0 auto;max-width:var(--mw,600px);}
/* citação (callout verde) */
.quote-lead{font-family:var(--serif);font-style:italic;font-size:var(--font-size-2xl);margin:var(--s1) 0 6px;}
.quote-attr{margin:0;color:rgba(255,255,255,.8);}
.synth{font-size:var(--font-size-lg);margin:var(--s1) 0 0;font-weight:700;}
/* assinatura / versões / apoio do logotipo */
.assina-sub{text-transform:uppercase;letter-spacing:.34em;font-size:var(--font-size-xs);margin-top:var(--s2);}
.bg-white{background:var(--branco);}.bg-ink{background:var(--preto);}
.pad-24{padding:var(--s3);}.pad-32{padding:var(--s4);}
.w-80{width:80%;}
.cimg{display:block;margin:var(--s-mini) auto;width:var(--w);}
.cimg-h{display:block;margin:var(--s-mini) auto;height:90px;}
.cimg-selo{display:block;margin:var(--s1) auto;width:200px;}
/* catálogo de criativos */
.cri-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 36px;margin-top:var(--s1);}
.cri-card{display:flex;flex-direction:column;gap:14px;}
.cri-card>.k{font-size:var(--font-size-sm);}
.cri-imgs{display:flex;gap:var(--s-mini);}
.cri-img{flex:1;min-width:0;aspect-ratio:4/5;object-fit:cover;display:block;box-shadow:0 6px 22px rgba(33,33,33,.16);}
.cri-ph{width:100%;aspect-ratio:4/5;background:var(--n100,#F7F7F7);border:1.5px dashed var(--n400,#CFCFCF);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;color:var(--n600,#676767);}
.cri-dark{padding:var(--s-mini);background:var(--n1000,#0A0A0A);}
.cri-cap{margin-top:10px;color:var(--inv);}
.mt-24{margin-top:var(--s3);}
/* ---------- monogramas (sistema de marca) ---------- */
.mono-hero{display:block;margin:0 auto;width:min(140px,55%);height:auto;}
.mono-cells{align-items:stretch;}
.mono-cell{display:flex;flex-direction:column;text-align:left;}
.mono-cell__art{height:150px;display:flex;align-items:center;justify-content:center;margin:var(--s1) 0 var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--n200);}
.mono-cell__art img{height:118px;width:auto;max-width:78%;display:block;}
.mono-cell__lbl{margin-bottom:10px;}
.content p.mono-cell__desc{font-size:var(--font-size-sm);line-height:var(--font-line-height-loose);margin:0 0 var(--s2);}
.content p.mono-cell__uso{font-size:var(--font-size-xs);line-height:var(--font-line-height-relaxed);margin:0;color:var(--n700);}
.mono-cell__uso b{display:block;margin-bottom:3px;}
.mono-board{margin:0 0 var(--s3);}
.mono-board img{width:100%;height:auto;display:block;border:1px solid var(--n200);border-radius:var(--radius-medium,4px);}
.mono-board figcaption{margin-top:10px;text-align:center;font-size:var(--font-size-xs);letter-spacing:.04em;color:var(--n600);}
.mono-patch img{width:min(300px,70%);margin:0 auto;border:0;}

/* ---------- responsivo ---------- */
@media(max-width:1450px){
  :root{--pad-x:120px;}
}
@media(max-width:1180px){
  :root{--pad-x:48px;}
}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%);transition:transform .28s var(--ease);}
  .sidebar.open{transform:translateX(0);}
  .topbar{display:flex;}
  .content,.hero,.toc-page,.ds-footer{margin-left:0;}
}
@media(max-width:680px){
  .content{padding:var(--s4) var(--s2);}
  .hero,.toc-page{padding:var(--s4) var(--s2);}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;}
}