/* ==========================================================================
   PERGUNTE AO MECÂNICO — "A ORDEM DE SERVIÇO"
   Site-locked to site 61 (the Brazilian auto-parts guide). Not a fleet
   template.

   THE DIRECTION
   The trustworthy neighbourhood mechanic, in writing, in the idiom of the
   Brazilian oficina: the name patch of the blue overalls, the garage wall with
   its painted lower band, the yellow carbon copy of the service order on a
   clipboard with a blue rubber stamp, the warning lights on a dark cluster, the
   reference sheets taped by the bench, the black-and-yellow hazard stripe.

     Azul macacão  every link and button, the top line, the footer, the patch
     Amarelo       the thread of the patch, the stripe, the warning sign —
                   never text on white
     Via amarela   the carbon copy of the service order
     Vermelho      the order number and the red warning lights only
     Parede        the garage wall

   Three voices of type, each with one job:
     Barlow Semi Condensed   headlines and every printed form — the road-sign
                             and auto-parts-shop grotesk
     Source Sans 3           reading copy and the interface
     IBM Plex Mono           codes, plates, numbers and labels

   THE RULES
   One paper (the carbon copy), one glow (the warning lights), one soft shadow
   family (things hung on the wall). Hierarchy comes from type size and rule
   weight: a 2px ink rule opens a list, 1px rules divide it. Numbers are
   tabular. Light theme only, painted explicitly on every surface.
   ========================================================================== */
:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --azul:      #1F3C88;
  --azul-deep: #14285E;
  --amarelo:   #FFC20E;
  --via:       #FFF3C4;
  --vermelho:  #D7262E;
  --parede:    #F1F0EC;
  --ink:       #17191C;
  --rule:      #E2E0D8;

  --white:        #FFFFFF;
  --azul-tint:    color-mix(in srgb, var(--azul) 7%, #FFFFFF);
  --azul-soft:    color-mix(in srgb, var(--azul) 16%, #FFFFFF);
  --amarelo-lite: color-mix(in srgb, var(--amarelo) 78%, #FFFFFF);
  --amarelo-tint: color-mix(in srgb, var(--amarelo) 20%, #FFFFFF);
  --via-line:     color-mix(in srgb, var(--via) 60%, #B9C3D6);
  --via-ink:      color-mix(in srgb, var(--via) 25%, #5A4A16);
  --carimbo:      #2E4FD8;
  --grafite:      #141619;
  --madeira:      #9A6B3F;
  --ink-2:        color-mix(in srgb, var(--ink) 86%, #FFFFFF);
  --ink-3:        color-mix(in srgb, var(--ink) 68%, #FFFFFF);
  --ink-4:        color-mix(in srgb, var(--ink) 48%, #FFFFFF);
  --rule-2:       color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong:  color-mix(in srgb, var(--rule) 50%, #8A867A);
  --parede-deep:  color-mix(in srgb, var(--parede) 72%, #8A867A);
  --foot-ink:     #DCE3F2;
  --foot-mute:    #A3B0CF;
  --foot-rule:    rgba(255,255,255,.15);
  --luz-amber:    #FFB000;
  --luz-red:      #FF3B30;

  --font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-print:   "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     6px;
  --radius-lg:  10px;
  --base-size:  18px;
  --base-lh:    1.68;

  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:var(--base-lh);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ color:var(--azul-deep); }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }
::selection{ background:var(--amarelo-tint); color:var(--ink); }

.container{
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px); position:relative;
}
.container .container{ max-width:none; padding-inline:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul-deep); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- The label voice: one rule for every label, caption and small number. --- */

.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link, .ap-total, .ap-more summary,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow,
.eyebrow, .post-cat, .card-tag, .pc-tag, .post-links h2, .chip, .section-cap,
.stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .src-org, .prancheta-cap-legend,
.os-via, .os-f, .os-sec, .known-label, .sheet-n, .atencao-word, .painel-makes span{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700;
  letter-spacing:-.005em; margin:0; color:var(--ink);
}
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--azul); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.005em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--azul); margin-bottom:.6rem; }

/* --- The brand mark: the embroidered name patch ---------------------------- */

.patch{ width:150px; height:47px; flex:none; }
.patch-lg{ width:188px; height:59px; }
.pt-cloth{ fill:var(--azul); stroke:var(--azul-deep); stroke-width:2; }
.pt-stitch{ fill:none; stroke:#FFFFFF; stroke-width:1.5; stroke-dasharray:3.2 2.4; opacity:.85; }
.pt-small{ font-family:var(--font-print); font-weight:600; font-size:11px; letter-spacing:2px; fill:#FFFFFF; }
.pt-name{ font-family:var(--font-print); font-weight:700; font-size:22px; letter-spacing:.5px; fill:var(--amarelo); }

/* --- The top line: white lettering on overall blue, the date in yellow ---- */

.topline{ background:var(--azul-deep); color:#E3E9F7; }
.topline-in{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  min-height:34px;
}
.topline-what, .topline-asof{
  font-family:var(--font-label); font-weight:500; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
}
.topline-asof{ white-space:nowrap; color:var(--amarelo-lite); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

.lk-text{
  display:flex; flex-direction:column; gap:.22rem; min-width:0;
  margin-left:.4rem; padding-left:.9rem; border-left:1px solid var(--rule);
}
.lk-name{
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  line-height:1; color:var(--ink); white-space:nowrap;
}
.lk-desc{ font-size:.62rem; letter-spacing:.08em; color:var(--ink-3); max-width:22ch; }
.lk-img{ height:42px; width:auto; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--rule);
  transition:box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 1px 0 var(--rule), 0 6px 18px rgba(23,25,28,.07); }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); min-height:78px; }
.nav-brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }

.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.55rem .72rem; white-space:nowrap;
  font-family:var(--font-display); font-size:1.08rem; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.15rem; height:3px;
  background:var(--amarelo); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-tail{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-search{
  display:flex; align-items:center;
  border:1px solid var(--rule); background:var(--parede); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-search:focus-within{ border-color:var(--azul); background:var(--white); }
.nav-search input{
  width:170px; border:0; background:transparent; outline:none;
  font:inherit; font-size:.95rem; color:var(--ink); padding:.55rem .1rem .55rem .85rem;
}
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search button:hover{ color:var(--azul); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-burger{ position:relative; }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HOME — the title page: the garage wall and the clipboard
   ========================================================================== */

.title-page{
  position:relative; overflow:hidden;
  background:var(--parede);
  padding:clamp(40px,5.5vw,80px) 0 clamp(60px,6vw,92px);
}
/* The painted lower band of a garage wall, with its stripe of yellow. */
.barrado{
  position:absolute; left:0; right:0; bottom:0; height:clamp(70px,9vw,120px);
  background:var(--azul-deep);
  border-top:6px solid var(--amarelo);
  box-shadow:inset 0 10px 0 -4px rgba(0,0,0,.08);
}
.tp-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.tp-copy{ padding-top:clamp(0px,3vw,40px); }
.tp-kicker{ margin-bottom:1.1rem !important; }

.tp-title{ margin:0 0 1.3rem; color:var(--ink); text-transform:uppercase; }
.tp-main{
  display:block;
  font-size:clamp(3rem,7.4vw,6.2rem); line-height:.92; letter-spacing:-.01em;
  text-wrap:balance; overflow-wrap:anywhere;
}
.tp-wordmark{ font-size:clamp(2.9rem,7vw,5.9rem); line-height:.94; letter-spacing:-.01em; }
.wm{ display:inline; }
.wm:not(:last-child){ margin-right:.2em; }
.wm-first, .wm-mid{ font-weight:600; color:var(--ink-2); }
.wm-last{ font-weight:700; color:var(--azul); }
.tp-lead{
  font-size:clamp(1.06rem,1.45vw,1.22rem); line-height:1.62;
  color:var(--ink-2); max-width:52ch; margin:0 0 2rem;
}

.finder{ max-width:620px; margin:0; }
.finder-label{ display:block; color:var(--ink); margin-bottom:.6rem; }
.finder-row{
  display:flex; background:var(--white);
  border:2px solid var(--ink); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.finder-row:focus-within{ border-color:var(--azul); box-shadow:0 0 0 4px color-mix(in srgb, var(--azul) 16%, transparent); }
.finder-input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1.04rem; color:var(--ink); padding:.95rem 1.1rem;
}
.finder-input::placeholder{ color:var(--ink-3); }
.finder-go{
  display:inline-flex; align-items:center; gap:.65rem; flex:none;
  border:0; border-left:2px solid var(--ink); background:var(--azul); color:#fff;
  padding:0 1.4rem; cursor:pointer; border-radius:0 3px 3px 0;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:.04em; text-transform:uppercase;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:20px; height:10px; }
.finder-go:hover{ background:var(--azul-deep); }
.finder-terms{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1rem 0 0; font-size:.98rem;
}
.finder-terms span{ color:var(--ink-3); }
.finder-terms a{ color:var(--ink); border-bottom:2px solid var(--amarelo); padding-bottom:1px; }
.finder-terms a:hover{ color:var(--azul-deep); border-bottom-color:var(--azul); }

.tp-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 0; margin:2.1rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--parede-deep); max-width:620px;
}
.tp-facts span{ color:var(--ink-3); padding-right:1.3rem; margin-right:1.3rem; border-right:1px solid var(--parede-deep); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  font-family:var(--font-display); font-weight:700; font-size:1.85rem;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin-right:.35rem; font-variant-numeric:tabular-nums lining-nums;
}

/* --- The clipboard and the service order ------------------------------------
   Hardboard, a steel clip, and the yellow carbon copy everybody signs at the
   oficina: number in red, the vehicle fields, "defeito reclamado" with its
   boxes, "serviço executado" and a blue rubber stamp. */

.prancheta{
  position:relative; margin:0; justify-self:end; width:100%; max-width:520px;
  padding:34px clamp(14px,1.8vw,22px) 22px;
  background:
    repeating-linear-gradient(97deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #A87547 0%, var(--madeira) 55%, #855A33 100%);
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 30px 50px -30px rgba(23,25,28,.55);
}
.clip{
  position:absolute; top:-14px; left:50%; width:132px; height:38px; margin-left:-66px; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg, #F2F3F5 0%, #B9BEC6 45%, #8E949D 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8);
  z-index:2;
}
.clip::after{
  content:""; position:absolute; left:50%; top:9px; width:46px; height:10px; margin-left:-23px; border-radius:6px;
  background:#5E646C; box-shadow:inset 0 2px 2px rgba(0,0,0,.4);
}
.os{
  position:relative; background:var(--via); color:var(--ink);
  padding:1.5rem clamp(1rem,2vw,1.4rem) 1.1rem;
  border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.12), 0 8px 16px -10px rgba(0,0,0,.35);
}
.os p{ margin:0; }
.os-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:1rem;
  padding-bottom:.6rem; border-bottom:2px solid var(--ink);
}
.os-title{ font-family:var(--font-print); font-weight:700; font-size:clamp(1.5rem,2.3vw,1.85rem); line-height:1; letter-spacing:.02em; }
.os-no{ font-family:var(--font-mono); font-weight:600; font-size:1.06rem; color:var(--vermelho); font-variant-numeric:tabular-nums; }
.os-no span{ font-size:.72rem; color:var(--via-ink); }
.os-via{ grid-column:1 / -1; margin-top:.3rem !important; color:var(--via-ink); font-size:.62rem; letter-spacing:.16em; }
.os-fields{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:.8rem; margin:.75rem 0 .2rem; }
.os-f{ display:block; padding-bottom:.95rem; border-bottom:1px solid var(--via-line); color:var(--via-ink); font-size:.6rem; letter-spacing:.12em; }
.os-sec{ margin:.9rem 0 .25rem !important; color:var(--ink); font-weight:600; font-size:.66rem; letter-spacing:.16em; }
.os-list{ list-style:none; margin:0; padding:0; }
.os-list li{ border-bottom:1px solid var(--via-line); }
.os-list a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:.65rem;
  padding:.38rem 0; color:var(--ink);
}
.os-box{
  position:relative; width:15px; height:15px; border:1.5px solid var(--ink); border-radius:2px; background:rgba(255,255,255,.5);
}
.os-box::after{
  content:""; position:absolute; left:3px; top:-3px; width:6px; height:11px;
  border-right:2.5px solid var(--carimbo); border-bottom:2.5px solid var(--carimbo);
  transform:rotate(40deg); opacity:0; transition:opacity var(--t) var(--ease);
}
.os-list a:hover .os-box::after{ opacity:1; }
.os-txt{ font-weight:600; font-size:.98rem; line-height:1.3; }
.os-list a:hover .os-txt{ color:var(--azul); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.os-n{ font-family:var(--font-mono); font-size:.76rem; color:var(--via-ink); font-variant-numeric:tabular-nums; }
.os-foot{ position:relative; margin-top:.4rem; }
.os-done{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-2); padding:.15rem 0 .35rem; border-bottom:1px solid var(--via-line); }
.carimbo{
  position:absolute; right:-.2rem; bottom:-.6rem; transform:rotate(-9deg);
  padding:5px; border:2.5px solid var(--carimbo); border-radius:8px;
  color:var(--carimbo); opacity:.86; mix-blend-mode:multiply; pointer-events:none;
}
.carimbo span{
  display:block; padding:.3rem .7rem; border:1.5px solid var(--carimbo); border-radius:4px;
  font-family:var(--font-print); font-weight:700; font-size:1.25rem; line-height:1; letter-spacing:.14em;
}
.prancheta-cap{ display:block; margin:1rem .2rem 0; }
.prancheta-cap-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.25; color:#FFFFFF; }
.prancheta-cap-legend{ display:block; margin-top:.3rem; text-transform:none; letter-spacing:.01em; font-size:.74rem; color:#F3E6D6; line-height:1.5; }

/* ==========================================================================
   HOME — bands
   ========================================================================== */

section{ position:relative; }
.band{ padding:clamp(52px,6.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.band.apps, .band.questions, .band.latest, .band.sources{ background:var(--white); }
.band.tabelas, .band.guides, .band.principles{ background:var(--parede); border-bottom-color:var(--parede-deep); }
.band.sources{ border-bottom:0; }

.band-head{ margin-bottom:clamp(26px,3vw,42px); max-width:780px; }
.band-head-row{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:2rem; align-items:end;
}
.band-head-row .label, .band-head-row .band-note{ grid-column:1 / -1; }
.band-head-row .band-note{ order:3; }
.label{ display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; color:var(--azul); letter-spacing:.12em; }
.label::before{ content:""; width:26px; height:6px; flex:none; background:repeating-linear-gradient(-45deg, var(--ink) 0 3px, var(--amarelo) 3px 6px); }
.band-title{
  font-size:clamp(2.1rem,3.8vw,3.1rem); line-height:1; letter-spacing:-.005em; text-transform:uppercase;
  margin:0; text-wrap:balance;
}
.band-note{ margin:.85rem 0 0; color:var(--ink-3); font-size:1.04rem; max-width:62ch; }
.band-more{ color:var(--azul); white-space:nowrap; padding-bottom:.35rem; }
.band-more:hover{ color:var(--azul-deep); }

/* --- Acendeu uma luz no painel? The instrument cluster --------------------- */

.band.painel{
  background:radial-gradient(120% 90% at 70% 40%, #23272D 0%, var(--grafite) 60%);
  color:#D7DCE4; border-bottom:0;
}
.painel .label{ color:var(--amarelo-lite); }
.painel .label::before{ background:repeating-linear-gradient(-45deg, #000 0 3px, var(--amarelo) 3px 6px); }
.painel .band-title{ color:#FFFFFF; }
.painel .band-note{ color:#AEB6C2; }
.painel-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4.4vw,80px); align-items:center;
}
.painel .band-head{ margin-bottom:0; }
.painel-more{ list-style:none; margin:1.4rem 0 0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
.painel-more li{ border-bottom:1px solid rgba(255,255,255,.14); }
.painel-more a{ display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; color:#FFFFFF; font-weight:600; }
.painel-more a span{ font-family:var(--font-mono); font-size:.8rem; color:var(--amarelo-lite); font-weight:500; }
.painel-more a:hover{ color:var(--amarelo-lite); }
.painel-makes{ display:flex; flex-wrap:wrap; gap:.25rem .85rem; margin:1rem 0 0 !important; }
.painel-makes span{ color:#8F99A8; }
.painel-makes a{ color:#C9D0DA; font-size:.95rem; }
.painel-makes a:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }

.cluster{
  list-style:none; margin:0; padding:clamp(18px,2.4vw,28px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px);
  border-radius:28px; background:#0B0C0E;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 18px 40px rgba(0,0,0,.6), 0 20px 40px -24px rgba(0,0,0,.8);
}
.luz{
  display:flex; flex-direction:column; align-items:center; gap:.45rem; height:100%;
  padding:1rem .6rem .85rem; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, #17191D, #101114);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.luz:hover{ background:linear-gradient(180deg, #1E2126, #15171A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.luz-ico svg{ width:56px; height:56px; }
.luz-amber{ --lc:var(--luz-amber); }
.luz-red{ --lc:var(--luz-red); }
.luz-ico .lf{ fill:var(--lc); stroke:none; }
.luz-ico .ls{ fill:none; stroke:var(--lc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.luz-ico .lt{ fill:var(--lc); font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.5px; }
.luz-ico .lt-big{ font-size:15px; letter-spacing:1px; }
.luz-ico svg{ filter:drop-shadow(0 0 5px color-mix(in srgb, var(--lc) 70%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--lc) 35%, transparent)); }
.luz-txt{ color:#E6EAF0; font-family:var(--font-display); font-weight:600; font-size:1.06rem; line-height:1.1; letter-spacing:.02em; }
.luz:hover .luz-txt{ color:#FFFFFF; }

/* --- Peça por peça: one card per system --------------------------------------- */

.known{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 clamp(22px,2.6vw,34px) !important;
  padding:.85rem 1rem; border:1px solid var(--rule); border-left:6px solid var(--vermelho); border-radius:var(--radius); background:var(--white);
}
.known-label{ margin-right:.4rem; color:var(--vermelho); }
.known a{
  display:inline-flex; align-items:baseline; gap:.35rem; padding:.3rem .65rem; border-radius:999px;
  background:var(--ink); color:#FFFFFF; font-family:var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:.02em;
}
.known a span{ font-family:var(--font-mono); font-size:.72rem; color:var(--amarelo-lite); font-weight:500; }
.known a:hover{ background:var(--azul); color:#FFFFFF; }

.ap-grid{ columns:3 330px; column-gap:clamp(16px,1.8vw,26px); }
.ap{
  display:block; width:100%; min-width:0; break-inside:avoid;
  margin:0 0 clamp(16px,1.8vw,26px);
  background:var(--white);
  border:1px solid var(--rule); border-top:5px solid var(--azul); border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:1.15rem 1.25rem .85rem;
  scroll-margin-top:110px;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.ap:hover{ box-shadow:0 14px 30px -24px rgba(23,25,28,.45); }
.ap-head{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:.9rem;
  align-items:center; padding-bottom:.8rem; margin-bottom:.35rem; border-bottom:2px solid var(--ink);
}
.ap-icon{
  grid-row:1 / span 2; display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:10px; background:var(--amarelo); color:var(--ink);
}
.ap-icon svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ap-name{ font-size:1.5rem; line-height:1; text-transform:uppercase; align-self:end; }
.ap-total{ color:var(--ink-3); align-self:start; margin-top:.25rem; }
.ap-total strong{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ap-list{ list-style:none; margin:0; padding:0; }
.ap-row{
  display:grid; grid-template-columns:auto minmax(10px,1fr) auto; align-items:baseline; column-gap:.45rem;
  padding:.5rem 0; border-bottom:1px solid var(--rule-2);
}
.ap-list > .ap-row:last-child{ border-bottom:0; }
.ap-row::after{ content:""; grid-column:2; grid-row:1; border-bottom:1px dotted var(--ink-4); transform:translateY(-.3em); }
.ap-main{ grid-column:1; grid-row:1; color:var(--ink); font-weight:600; font-size:.99rem; line-height:1.35; }
.ap-main:hover{ color:var(--azul); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.ap-n{ grid-column:3; grid-row:1; color:var(--ink-3); font-family:var(--font-label); font-size:.78rem; font-variant-numeric:tabular-nums; }
.ap-brands{
  grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:.05rem .8rem;
  margin-top:.22rem; padding-left:.7rem; border-left:2px solid var(--amarelo);
}
.ap-brands a{ color:var(--ink-3); font-size:.88rem; line-height:1.45; }
.ap-brands a:hover{ color:var(--azul); text-decoration:underline; text-underline-offset:3px; }
.ap-brands .ap-part{ color:var(--azul); font-weight:600; }
.ap-more{ margin-top:.25rem; border-top:1px solid var(--rule); }
.ap-more summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  padding:.8rem 0 .45rem; color:var(--azul); letter-spacing:.08em; font-size:.68rem;
}
.ap-more summary::-webkit-details-marker{ display:none; }
.ap-more summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:3px; border:1.5px solid currentColor;
  font-size:.86rem; line-height:1; font-weight:600;
}
.ap-more[open] summary::before{ content:"–"; }
.ap-more summary span{ color:var(--ink-4); }
.ap-more summary:hover{ color:var(--azul-deep); }

/* --- Tabelas de oficina: the sheets taped by the bench ----------------------- */

.sheets{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:clamp(18px,2vw,26px);
}
.sheet{
  position:relative; padding:1.4rem 1.2rem 1rem; background:#FFFFFF;
  box-shadow:0 1px 1px rgba(0,0,0,.1), 0 14px 24px -18px rgba(23,25,28,.5);
  transform:rotate(-.6deg);
}
.sheet:nth-child(2n){ transform:rotate(.7deg); }
.sheet:nth-child(3n){ transform:rotate(-.2deg); }
.tape{
  position:absolute; top:-11px; left:50%; width:84px; height:22px; margin-left:-42px;
  background:rgba(236,222,180,.88); transform:rotate(-3deg);
  clip-path:polygon(2% 0, 98% 6%, 100% 40%, 97% 100%, 3% 94%, 0 60%);
}
.sheet-h{ font-size:1.42rem; line-height:1.02; text-transform:uppercase; margin:0 0 .35rem; }
.sheet-h a{ color:var(--ink); }
.sheet-h a:hover{ color:var(--azul); }
.sheet-n{ margin:0 0 .6rem !important; color:var(--vermelho); }
.sheet-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.sheet-list li{ border-bottom:1px solid var(--rule-2); }
.sheet-list a{ display:block; padding:.42rem 0; color:var(--ink-2); font-size:.95rem; line-height:1.35; }
.sheet-list a:hover{ color:var(--azul); }
.sheet-all{ display:flex; gap:.9rem; margin:.6rem 0 0 !important; }
.sheet-all a{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--azul); }

/* --- Common questions ---------------------------------------------------- */

.diag-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.diag-grid .band-head{ margin-bottom:0; }
.symptoms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem;
  border-top:2px solid var(--ink);
}
.symptoms li{ display:flex; border-bottom:1px solid var(--rule); }
.symptoms a{
  flex:1; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  position:relative; padding:.95rem 0 .95rem 2.25rem;
  color:var(--ink); font-weight:600; font-size:1.02rem; line-height:1.36;
}
.symptoms a::before{
  content:"?"; position:absolute; left:0; top:50%; width:24px; height:24px; margin-top:-12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--amarelo); border:2px solid var(--ink); border-radius:3px; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:.92rem; line-height:1;
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--azul-deep); }
.symptoms a:hover .sy-go{ color:var(--azul); transform:translateX(4px); }

/* --- Como a gente responde -------------------------------------------------- */

.pr-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.pr-list li{ padding:1.6rem 1.6rem 1.7rem; border-right:1px solid var(--parede-deep); }
.pr-list li:first-child{ padding-left:0; }
.pr-list li:last-child{ border-right:0; padding-right:0; }
.pr-no{
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.85rem;
  min-width:2.4rem; height:2rem; padding:0 .4rem; border-radius:3px;
  background:var(--ink); color:var(--amarelo);
  font-family:var(--font-mono); font-weight:600; font-size:.86rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.pr-h{ font-size:1.45rem; line-height:1.05; text-transform:uppercase; margin:0 0 .5rem; }
.pr-p{ margin:0; color:var(--ink-3); font-size:.99rem; line-height:1.56; }

/* --- The main guides ----------------------------------------------------- */

.gd-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); padding-top:1.9rem; border-top:2px solid var(--ink);
}
.gd-tag{ color:var(--vermelho); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(2.1rem,3.6vw,3rem); line-height:1; letter-spacing:-.005em; margin:0; text-wrap:balance; }
.gd-lead-title a{ color:var(--ink); }
.gd-lead-title a:hover{ color:var(--azul-deep); }
.gd-lead-ex{ margin:1.05rem 0 0; color:var(--ink-2); font-size:1.1rem; line-height:1.62; max-width:54ch; }
.gd-go{
  display:inline-block; margin-top:1.4rem; padding:.85rem 1.3rem;
  background:var(--azul); color:#fff; font-size:.78rem; font-weight:600; border-radius:var(--radius);
  transition:background var(--t) var(--ease);
}
.gd-go:hover{ background:var(--azul-deep); color:#fff; }
.gd-side{ border-left:1px solid var(--parede-deep); padding-left:clamp(22px,3vw,48px); min-width:0; }
.gd-med{ padding:0 0 1.25rem; margin:0 0 1.25rem; border-bottom:1px solid var(--parede-deep); }
.gd-med h3{ font-size:1.4rem; line-height:1.08; margin:0; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--azul-deep); }
.gd-med p{ margin:.45rem 0 0; color:var(--ink-3); font-size:.98rem; line-height:1.52; }
.gd-med:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
.gd-list{
  list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; counter-reset:gd;
  columns:3 300px; column-gap:clamp(28px,3.4vw,60px); border-top:1px solid var(--parede-deep);
}
.gd-list li{ counter-increment:gd; break-inside:avoid; border-bottom:1px solid var(--parede-deep); }
.gd-list a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.5rem;
  padding:.72rem 0; color:var(--ink-2); font-size:1.02rem; line-height:1.4;
}
.gd-list a::before{
  content:counter(gd, decimal-leading-zero);
  font-family:var(--font-label); font-weight:500; font-size:.86rem; line-height:1.65;
  color:var(--vermelho); font-variant-numeric:tabular-nums;
}
.gd-list a:hover{ color:var(--azul-deep); }

/* --- The road sign and the official sources --------------------------------- */

.src-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.atencao{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2vw,26px); align-items:start;
  padding:clamp(20px,2.6vw,30px); border-radius:var(--radius-lg);
  background:var(--parede); border:1px solid var(--rule); border-top:6px solid var(--amarelo);
}
.losango{ width:70px; height:70px; }
.lo-plate{ fill:var(--amarelo); stroke:var(--ink); stroke-width:2.5; }
.lo-line{ fill:none; stroke:var(--ink); stroke-width:2; }
.lo-mark{ fill:var(--ink); }
.atencao-word{ margin:0 0 .35rem !important; color:var(--ink); font-weight:600; letter-spacing:.16em; }
.atencao-h{ font-size:1.75rem; line-height:1; text-transform:uppercase; margin:0 0 .6rem; text-wrap:balance; }
.atencao-p{ margin:0; color:var(--ink-2); font-size:1.02rem; line-height:1.64; }

.src-h{ margin:0; padding-bottom:.8rem; border-bottom:2px solid var(--ink); font-size:1.6rem; line-height:1.05; text-transform:uppercase; }
.src-list{ list-style:none; margin:0; padding:0; }
.src-list li{ border-bottom:1px solid var(--rule); }
.src-list a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; align-items:center;
  padding:.8rem 0; color:var(--ink);
}
.src-name{ font-weight:600; font-size:1.05rem; line-height:1.3; }
.src-org{ grid-column:1; color:var(--ink-3); text-transform:none; letter-spacing:0; font-size:.78rem; }
.src-go{
  grid-column:2; grid-row:1 / span 2; color:var(--ink-4); font-size:1.15rem;
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.src-list a:hover .src-name{ color:var(--azul-deep); text-decoration:underline; text-underline-offset:3px; }
.src-list a:hover .src-go{ color:var(--azul); transform:translate(2px,-2px); }
.src-note{ margin:.9rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-3); }

/* --- Latest: the engine's own band, restyled ---------------------------- */

.latest .section{ padding:0; }
.latest .section-head{ margin-bottom:clamp(26px,3vw,40px); }
.latest .section-head::before{
  content:"Novo"; display:inline-block; margin:0 0 .75rem; padding:.2rem .55rem; border-radius:3px;
  background:var(--amarelo); color:var(--ink); font-family:var(--font-label); font-weight:600; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.35;
}
.latest .section-head h2{ font-size:clamp(2.1rem,3.8vw,3.1rem); line-height:1; text-transform:uppercase; }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */

.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.post-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--ink); border-radius:0 0 var(--radius-lg) var(--radius-lg);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover{ border-top-color:var(--amarelo); box-shadow:0 14px 30px -24px rgba(23,25,28,.45); }
/* The archive has no photography: these images are generated cards that
   re-print the headline. Hidden, never fetched (display:none on the link). */
.post-card-media{ display:none; }
.post-card-body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--vermelho); }
.post-card-title{ font-size:1.32rem; line-height:1.08; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--azul-deep); }
.post-card-excerpt{ margin:0; font-size:.96rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.72rem; }

.card-grid, .pillar-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.card, .pillar-card{
  display:block; padding:1.3rem 1.35rem 1.4rem;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--ink); border-radius:0 0 var(--radius-lg) var(--radius-lg);
  color:var(--ink); transition:border-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-top-color:var(--amarelo); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--vermelho); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.3rem; line-height:1.1; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--azul); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem;
  font-family:var(--font-label); font-size:.84rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  border:2px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--azul); color:#fff; }
.btn--accent:hover{ background:var(--azul-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--azul); color:var(--azul); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  display:inline-block; padding:.45rem .8rem; border-radius:var(--radius);
  border:1px solid var(--rule); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--azul); border-color:var(--azul); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3);
}
.pagination a{ padding:.65rem 1.15rem; border:2px solid var(--ink); border-radius:var(--radius); color:var(--ink); }
.pagination a:hover{ border-color:var(--azul); color:var(--azul); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   GENERIC PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */

.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.72rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--azul); }
.breadcrumb [aria-hidden="true"]{ color:var(--amarelo); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{
  color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Page titles. A topic arrives in lower case from the archive; its first letter
   is capitalised here (make spellings are put right in the layout, outside the
   heading). */
.page-shell h1.display{ font-size:clamp(2.4rem,4.8vw,3.7rem); line-height:.98; letter-spacing:-.005em; margin:0; text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); text-transform:uppercase; }

.results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink);
}
.results-head h1{ font-size:clamp(2rem,3.8vw,2.8rem); margin:0; }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.42rem; line-height:1.1; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--azul-deep); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.72rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{
  display:block; break-inside:avoid; padding:.7rem 0;
  border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4;
}
.topic-index-list a:hover{ color:var(--azul-deep); }

/* ==========================================================================
   ARTICLE — one answer
   ========================================================================== */

.article{ padding-bottom:1rem; }
.article-hero{
  margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:2px solid var(--ink);
}
.article-hero-grid{ display:block; }
.article-hero-copy h1{
  font-size:clamp(2.4rem,4.8vw,3.8rem); line-height:.98; letter-spacing:-.005em;
  margin:.2rem 0 0; max-width:22ch; text-wrap:balance;
}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:1.1rem; font-size:.98rem; color:var(--ink-3);
}
.post-meta [aria-hidden="true"]{ color:var(--amarelo); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.22rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }

/* The generated hero card re-prints the title; hidden, never fetched. The
   <img> stays in the DOM, so og:image and the schema ImageObject are intact. */
.article-hero-media{ display:none; }

.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:236px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }

/* --- Neste artigo (TOC) ------------------------------------------------- */

.toc{ position:sticky; top:108px; }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.62rem 0; font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-label); font-weight:500; font-size:.84rem; line-height:1.6;
  color:var(--azul); font-variant-numeric:tabular-nums;
}
.toc a:hover{ color:var(--azul-deep); }
.article-rail{ min-width:0; }

/* --- Body ---------------------------------------------------------------- */

.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{
  margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:clamp(1.75rem,2.8vw,2.25rem); line-height:1.04;
}
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.42rem; line-height:1.1; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:0; }
.article-body a{
  color:var(--azul); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--azul) 40%, transparent);
}
.article-body a:hover{ color:var(--azul-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }

/* Lists: a small yellow square for a point, a numbered plate for a step. */
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.45rem; margin-bottom:.5rem; }
.article-body ul > li::before{
  content:""; position:absolute; left:.1rem; top:.55em; width:.55em; height:.55em;
  background:var(--amarelo); border:1.5px solid var(--ink);
}
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.3rem; margin-bottom:.65rem; }
.article-body ol > li::before{
  content:counter(step); position:absolute; left:0; top:.2em;
  display:flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; border-radius:3px;
  background:var(--ink); color:var(--amarelo);
  font-family:var(--font-mono); font-weight:600; font-size:.76rem; line-height:1;
  font-variant-numeric:tabular-nums;
}

/* Dica de mecânico */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--via); border-left:5px solid var(--amarelo); color:var(--ink);
}
.article-body .pro-tip::before{ content:"Dica de mecânico"; display:block; margin-bottom:.35rem; color:var(--via-ink); }

/* "Veja também". The engine prints "→ " as a text node before the link;
   font-size:0 retires it without touching the DOM. */
.article-body .related-inline-link{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  margin:1.5rem 0; padding:.8rem 1rem; font-size:0;
  background:var(--azul-tint); border:1px solid var(--azul-soft); border-radius:var(--radius);
}
.article-body .related-inline-link::before{ content:"Veja também"; font-size:.72rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }

.article-body blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:5px solid var(--amarelo); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:1.4rem; line-height:1.3;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); border-radius:var(--radius); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{
  font-family:var(--font-mono); font-size:.86em; padding:.12em .38em; border-radius:3px;
  background:var(--parede); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--parede); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables: an ink head, hairline rows — the reference sheet. */
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--ink); color:#FFFFFF; font-size:.72rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--parede) 55%, #FFFFFF); }
.article-body tbody tr:last-child td{ border-bottom:0; }

/* --- Inline CTA, FAQ, further reading ----------------------------------- */

.inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin:2.2rem 0; padding:1.3rem 1.4rem;
  background:var(--parede); border:1px solid var(--rule); border-left:5px solid var(--azul);
}
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }

.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:2rem; margin:0 0 .8rem; text-transform:uppercase; }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.06rem; line-height:1.42; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.25rem; top:.62rem;
  font-family:var(--font-label); font-weight:500; font-size:1.55rem; line-height:1; color:var(--azul);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--azul-deep); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }

.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--ink); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1px solid var(--rule); border-left:5px solid var(--amarelo); color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--parede); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--vermelho); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.1; }
.pl-arrow{ margin-left:auto; color:var(--azul); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */

.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }

.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.6rem,5.4vw,4.4rem); line-height:.96; text-transform:uppercase; text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); border-radius:var(--radius); }

.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:2rem; margin:2rem 0 .9rem; }

.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-feat-title{ margin-bottom:.9rem; }

.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--ink); min-width:0; }
.col h3{ font-size:1.32rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.2rem,3.8vw,3rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--ink);
}
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }

.blk-quote blockquote, .sec-quote blockquote{
  margin:0; padding:0 0 0 1.4rem; border-left:5px solid var(--amarelo);
  font-family:var(--font-display); font-size:clamp(1.5rem,2.7vw,2.1rem);
  font-weight:600; line-height:1.2; color:var(--ink); max-width:36ch;
}
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }

.cta, .cta-band, .sec-cta-band{
  padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px);
  background:var(--parede); border:1px solid var(--rule); border-top:6px solid var(--amarelo); text-align:center;
}
.cta h2, .cta-band h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:.8rem; text-transform:uppercase; }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — overall blue, the hazard stripe on top
   ========================================================================== */

.site-footer{
  position:relative;
  background:var(--azul-deep); color:var(--foot-ink);
  padding:calc(clamp(52px,6vw,84px) + 12px) 0 clamp(28px,3vw,40px);
}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:12px;
  background:repeating-linear-gradient(-45deg, #111214 0 14px, var(--amarelo) 14px 28px);
}
.site-footer :focus-visible{ outline-color:var(--amarelo-lite); }
.foot-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px);
}
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.6rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-brand .pt-cloth{ stroke:#0B1736; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-weight:600; font-size:1.5rem; line-height:1.15; color:#FFFFFF; }
.foot-about{ margin:.8rem 0 0; font-size:.96rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }

.foot-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:var(--amarelo-lite); border-bottom:1px solid var(--foot-rule); font-size:.72rem; letter-spacing:.12em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.97rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-label); font-size:.78rem; color:var(--amarelo-lite); font-variant-numeric:tabular-nums; margin-left:.25rem; white-space:nowrap; }
.foot-col li a:hover{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--amarelo); text-underline-offset:3px; }

.foot-disclosure{
  margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem; border-radius:var(--radius);
  border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch;
}
.foot-disclosure a{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule);
}
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#FFFFFF; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The descriptor beside the patch only where the menu still has room. */
@media (max-width:1500px){
  .lk-text{ display:none; }
}

@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .prancheta{ justify-self:start; max-width:560px; margin-top:1rem; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .painel-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list li{ padding-left:1.6rem; border-bottom:1px solid var(--parede-deep); }
  .pr-list li:nth-child(2n+1){ padding-left:0; }
  .pr-list li:nth-child(2n){ border-right:0; }
}

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--parede-deep); padding-top:1.5rem; }
  .src-grid{ grid-template-columns:minmax(0,1fr); }
}

/* The article collapses to one column; both shell selectors are restated
   because `.article-shell:has(.toc)` outranks a bare class. */
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  .nav{ min-height:68px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ background:var(--white); }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:.4rem clamp(16px,4vw,48px) 1.1rem;
    background:var(--white); border-bottom:1px solid var(--rule);
  }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.15rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.8rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .atencao{ grid-template-columns:minmax(0,1fr); }
  .cluster{ grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:20px; }

  /* Stacked table rows; the engine stamps data-label on each cell. */
  .article-body table, .article-body thead, .article-body tbody,
  .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.15rem;
    font-family:var(--font-label); font-weight:600; font-size:.7rem;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  }
}

@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.62rem; letter-spacing:.05em; }
}

@media (max-width:600px){
  .patch{ width:128px; height:40px; }
  .patch-lg{ width:168px; height:53px; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li:nth-child(2n+1){ padding:1.3rem 0; border-right:0; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.85rem 1rem; border-left:0; border-top:2px solid var(--ink); border-radius:0 0 3px 3px; }
  /* Three figures in a row, each over its label. */
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.64rem; }
  .tp-facts strong{ margin:0; }
  .prancheta{ padding:30px 10px 16px; }
  .os{ padding-inline:.85rem; }
  .os-fields{ gap:.5rem; }
  .carimbo span{ font-size:1rem; }
  .cluster{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px; }
  .luz-ico svg{ width:46px; height:46px; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }

  /* On a phone the newest-articles band stacks into one long column; six cards
     are enough there. The rest stay in the document and in /blog. */
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}