/* Mesa Jurídica landing. Every size, gap, radius, line-height and duration comes from tokens.css
   (the app's tokens, copied). Components reuse the app's names and look: .btn, .badge, .rotulo, .card, .bloco, .avatar, .seg.
   Breakpoints (not tokens, CSS can't): 960 narrow, 640 phone, as in the app. */

/* ---------- Logo fonts (brand direction 04, "Moderna"), served from /fonts ---------- */
/* Site text: Roboto, self-hosted variable font (SIL OFL, fonts/LICENSE-Roboto.txt), Latin + Latin Extended. No third-party requests. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The brand keeps its own faces: used only by the logo (.marca), never by the text. SIL OFL, fonts/LICENSE-Instrument.txt */
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("fonts/instrument-sans-600.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--s-16) + var(--s-4)); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-lg); line-height: var(--lh-lg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-mark); }
.n { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); }
.pular { position: absolute; left: var(--page-gutter); top: calc(var(--control) * -2); z-index: var(--z-toast); padding: var(--s-2) var(--s-3); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--e-3); }
.pular:focus { top: var(--s-2); }
/* A blank the owner must fill before publishing: loud on purpose */
.preencher { padding: 0 var(--s-1); border-radius: var(--radius-mark); background: var(--warn-soft); color: var(--warn-ink); font-weight: var(--w-semibold); }

/* ---------- Components shared with the app (ui/ui.css) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--control); padding: 0 var(--s-4); border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: var(--w-medium); font-size: var(--t-md); line-height: var(--lh-md); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-micro), border-color var(--dur-micro), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-exit); }
.btn:hover { background: var(--surface-soft); }
.btn:active { transform: scale(var(--press)); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent); filter: brightness(1.08); box-shadow: var(--e-2); }
.btn--ghost { border-color: transparent; background: none; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--sm { height: var(--control-sm); padding: 0 var(--s-3); font-size: var(--t-base); border-radius: var(--radius-tile); }
/* Landing only: the page's actions take the touch-target height */
.btn--lg { height: var(--control-lg); padding: 0 var(--s-5); font-size: var(--t-md); }
.btn .seta { transition: transform var(--dur-exit) var(--ease-out); }
.btn:hover .seta { transform: translateX(3px); }

.badge { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--size-label); padding: 0 var(--s-2); border-radius: var(--radius-pill); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); white-space: nowrap; background: var(--surface-soft); color: var(--ink-2); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--aviso { background: var(--warn-soft); color: var(--warn-ink); }
.rotulo { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.meta { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }

.card, .bloco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--e-1); padding: var(--pad-card); min-width: 0; }
.bloco__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--card-head); }
.bloco__titulo { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.bloco__cab .meta { margin-top: var(--s-half); }
.tile { display: grid; gap: var(--s-half); align-content: start; padding: var(--pad-tile); border-radius: var(--radius-tile); background: var(--surface-soft); min-width: 0; }
.tile .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.tile span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.tile--aviso { background: var(--warn-soft); }
.tile--aviso .n, .tile--aviso span { color: var(--warn-ink); }
.tile__rot { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.tile .tile__rot { margin-bottom: var(--s-2); }
.tile .tile__nota { margin-top: var(--s-2); }

.avatar { display: inline-grid; place-items: center; width: var(--control-sm); height: var(--control-sm); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semibold); flex: none; }
.avatar--sm { width: var(--control-xs); height: var(--control-xs); font-size: var(--t-2xs); }
.avatar--vazio { background: none; border: 1px dashed var(--muted); color: var(--muted); }

/* Segmented control with a sliding marker ("You are here"), as in the app */
.seg { display: inline-flex; position: relative; padding: 3px; border-radius: var(--radius-control); background: var(--surface-soft); border: 1px solid var(--line); isolation: isolate; max-width: 100%; }
.seg button { position: relative; z-index: 1; height: calc(var(--control) - 8px); padding: 0 var(--s-3); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--t-base); font-weight: var(--w-medium); border-radius: calc(var(--radius-control) - 3px); cursor: pointer; white-space: nowrap; transition: color var(--dur-exit); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }
.seg__marca { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: calc(var(--radius-control) - 3px); background: var(--surface); box-shadow: var(--e-1); transition: transform var(--dur-move) var(--ease-move), width var(--dur-move) var(--ease-move); }
html:not(.js) .vistas__seg { display: none; }

/* "Como ler este dado": a calm note that teaches a way to see the number. One per section at most. */
.leitura { display: grid; gap: var(--s-2); padding: var(--pad-tile) var(--s-4); border-radius: var(--radius-tile); background: var(--accent-soft); color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.leitura__rot { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.leitura p > b { display: block; color: var(--ink); font-weight: var(--w-semibold); }
.leitura--faixa { margin-top: var(--s-6); grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.leitura--compacta { font-size: var(--t-base); line-height: var(--lh-base); gap: var(--s-1); }

/* ---------- Header ---------- */
.topo { position: sticky; top: 0; z-index: var(--z-sticky); border-bottom: 1px solid var(--vidro-borda); }
/* r13: frosted glass again (the glow is hero-only and paused once the hero passes under the header; the backdrop is static).
   The glass is on ::before, not on .topo, so .topo is not a backdrop root and the phone menu inside it can blur the page too. */
.topo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--vidro-fundo); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topo::before, .menu-movel__painel { background: color-mix(in srgb, var(--surface) 97%, transparent); } }
.topo__linha { display: flex; align-items: center; gap: var(--s-6); min-height: var(--s-16); }
/* r10 logo: the brand faces (Instrument Serif for the M and "Mesa", Instrument Sans for JURÍDICA); the site text is Roboto.
   The three sit on one line by their cap-height centres; --nome-ny / --sub-ny are the measured nudges, in em.
   Size scales from --marca-t (nav --t-xl, footer --t-2xl). */
.marca { --marca-t: var(--t-xl); display: inline-flex; align-items: center; gap: var(--marca-gap); color: var(--ink); text-decoration: none; }
/* The mark: the M and its square dot, centred in the accent square (grid, line-height 1, measured nudge in em). */
.marca__simbolo { display: inline-grid; place-items: center; flex-shrink: 0; width: calc(var(--marca-t) * 1.6); height: calc(var(--marca-t) * 1.6); border-radius: var(--radius-inner); background-color: var(--accent); background-image: var(--marca-fundo); color: var(--on-accent); }
.marca__m { display: inline-flex; align-items: baseline; font: 400 calc(var(--marca-t) * 1.3)/1 var(--font-marca); letter-spacing: -.03em; transform: translate(var(--m-nx, -.007em), var(--m-ny, .02em)); } /* measured r10 */
.marca__ponto { display: inline-block; width: .13em; height: .13em; margin-left: .03em; background: currentColor; }
.marca__nome { font: 400 round(calc(var(--marca-t) * 1.35), 1px)/1 var(--font-marca); letter-spacing: -.02em; }
.marca__sub { margin-left: calc(var(--marca-gap) * -.5); font: 600 calc(var(--marca-t) * .5)/1 "Instrument Sans", var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
/* r10: Mesa and JURÍDICA share one baseline (flex baseline); the group's ink box
   (Mesa's cap top to the baseline) is centred on the square with a measured nudge, in em of --marca-t. */
.marca__texto { display: inline-flex; align-items: baseline; gap: var(--marca-gap); font-size: var(--marca-t); transform: translateY(var(--grupo-ny, .011em)); } /* measured r10: the group centred on the square */
.marca--rodape { --marca-t: var(--t-2xl); }
.topo__nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.topo__nav a { display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 var(--s-3); border-radius: var(--radius-tile); color: var(--muted); font-size: var(--t-md); font-weight: var(--w-medium); text-decoration: none; transition: color var(--dur-micro), background var(--dur-micro); }
.topo__nav a:hover { color: var(--ink); background: var(--surface-soft); }
.topo__nav a[aria-current="page"], .sol > summary.is-atual { color: var(--ink); }
.topo__acoes { display: flex; align-items: center; gap: var(--s-2); }

/* Solutions dropdown: a native <details>, so it works without JS; landing.js closes it on Escape and outside clicks */
.sol { position: relative; }
.sol > summary { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--control-sm); padding: 0 var(--s-3); border-radius: var(--radius-tile); color: var(--muted); font-size: var(--t-md); font-weight: var(--w-medium); cursor: pointer; list-style: none; transition: color var(--dur-micro), background var(--dur-micro); }
.sol > summary::-webkit-details-marker { display: none; }
.sol > summary::after { content: "▾"; font-size: var(--t-2xs); transition: transform var(--dur-exit) var(--ease-out); }
.sol[open] > summary::after { transform: rotate(180deg); }
.sol > summary:hover, .sol[open] > summary { color: var(--ink); background: var(--surface-soft); }
.sol > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.sol__painel { position: absolute; top: calc(100% + var(--s-2)); left: 0; z-index: var(--z-pop); display: grid; width: calc(var(--col-side) + var(--s-8)); padding: var(--s-1); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-3); transform-origin: top left; animation: abre var(--dur-enter) var(--ease-out); }
.topo__nav .sol__item { display: grid; gap: var(--s-half); height: auto; padding: var(--s-2) var(--s-3); border-radius: var(--radius-tile); color: var(--ink); }
.sol__item b { font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); }
.sol__item span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); font-weight: var(--w-regular); }
.topo__nav .sol__item[aria-current="page"] { background: var(--accent-soft); }
.topo__nav .sol__item--exp { margin-top: var(--s-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-tile) var(--radius-tile); padding-top: var(--s-3); }
@keyframes abre { from { opacity: 0; transform: scale(.98) translateY(calc(var(--s-1) * -1)); } }

/* Mobile menu: shown at 960 and below, a panel under the header */
.menu-movel { display: none; }
.menu-movel > summary { list-style: none; }
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel__painel { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-pop); display: grid; gap: var(--s-1); max-height: calc(100vh - var(--s-16)); overflow-y: auto; padding: var(--s-4) var(--page-gutter) var(--s-6); background: var(--vidro-fundo); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro); border-bottom: 1px solid var(--vidro-borda); box-shadow: var(--e-3); animation: ui-desce-menu var(--dur-enter) var(--ease-out); }
.menu-movel__painel > a { display: flex; align-items: center; min-height: var(--control-lg); padding: 0 var(--s-3); border-radius: var(--radius-tile); color: var(--ink); text-decoration: none; font-weight: var(--w-medium); }
.menu-movel__painel > a:hover, .menu-movel__painel > a[aria-current="page"] { background: var(--surface-soft); }
.menu-movel__painel .rotulo { margin: var(--s-3) var(--s-3) var(--s-1); }
.menu-movel__acoes { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.menu-movel__acoes .btn { height: var(--control-lg); }
@keyframes ui-desce-menu { from { opacity: 0; transform: translateY(calc(var(--s-2) * -1)); } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-16) var(--section-y); }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-visual)); gap: var(--s-12); align-items: center; }
.hero__texto { display: grid; gap: var(--s-4); }
.hero h1 { font-size: var(--t-4xl); line-height: var(--lh-4xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); max-width: 20ch; }
.hero__sub { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--measure); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.legenda { margin-top: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.hero__visual, .experimente { display: grid; gap: var(--s-3); min-width: 0; }
.vistas__seg { justify-self: start; }

/* The views: one grid cell, so the card keeps the height of the tallest view and nothing below jumps.
   Switching crossfades and slides --reveal-y from the side you travelled toward (--rumo: 1 or -1). */
.vistas { display: grid; }
.vista { box-shadow: var(--e-2); min-width: 0; }
.vistas-js .vista { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(calc(var(--rumo, 1) * var(--reveal-y)));
  transition: opacity var(--dur-exit) var(--ease-move), transform var(--dur-exit) var(--ease-move), visibility 0s linear var(--dur-exit); }
.vistas-js .vista.is-ativa { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), visibility 0s; }
.vistas-js .vista.sem-transicao { transition: none; }
.vista__rot { margin: var(--s-4) 0 var(--s-2); }

/* Diretoria: total, the proportion bar, four sums, then where and the trend */
.total { display: grid; justify-items: end; gap: var(--s-half); }
.total .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.pilha { display: flex; gap: var(--s-half); height: var(--track); margin-bottom: var(--s-4); }
.pilha span { width: var(--w); min-width: var(--s-1); border-radius: var(--radius-pill); transform-origin: left; }
.pilha--larga { height: var(--s-3); margin-bottom: var(--s-6); }
.pilha__exec, .chave--exec { background: var(--graf-4); }
.pilha__cond, .chave--cond { background: var(--graf-5); }
.pilha__dep, .chave--dep { background: var(--graf-1); }
.pilha__lev, .chave--lev { background: var(--graf-3); }
.pilha__disc, .chave--disc { background: var(--graf-6); }
.chave { display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; flex: none; }
.fin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.fin dt { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.fin dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); margin-top: var(--s-half); }
.fin dd .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.fin dd > span:not(.badge) { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.vista__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.mapa.mapa--mini { gap: 1px; max-width: calc(var(--s-16) * 2); }
.mapa.mapa--mini span { font-size: 0; border-radius: var(--s-half); }
.tendencia { display: flex; align-items: stretch; gap: var(--s-1); height: calc(var(--s-16) + var(--s-12)); }
.tendencia li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.tendencia li::before { content: ""; flex: 0 1 var(--h); border-radius: var(--radius-mark) var(--radius-mark) 0 0; background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); transform-origin: bottom; }
.tendencia li.is-atual::before { background: var(--graf-1); }
.tendencia span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }

/* Gestão and Advogado */
.stats-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.stats-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linhas { display: grid; }
.linha { display: grid; grid-template-columns: var(--s-12) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding-block: var(--row-pad); border-top: 1px solid var(--line); }
.linha:last-child { padding-bottom: 0; }
.data { display: grid; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.data b { color: var(--ink); font-size: var(--t-md); line-height: var(--lh-md); }
.linha__txt { display: grid; min-width: 0; }
.linha__txt b { font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha__txt span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sections: one rhythm, one line at content width between them ----------
   Above and below the content: --section-y. Head: eyebrow, 12, title, --head-sub, sub, then --section-head to the content. */
.secao > .wrap { position: relative; padding-block: var(--section-y); }
.secao > .wrap::before { content: ""; position: absolute; top: 0; left: var(--page-gutter); right: var(--page-gutter); height: 1px; background: var(--line); }
.secao__cab { max-width: var(--measure); margin-bottom: var(--section-head); }
.secao__cab > .rotulo { margin-bottom: var(--s-3); }
.secao__intro { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); }
h2 + .secao__intro { margin-top: var(--head-sub); }
.secao__cab > .leitura { margin-top: var(--s-6); }
h3 { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
/* Two columns: the heading on the left, the body on the right */
.duas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: start; }
.duas > .secao__cab { margin-bottom: 0; }

/* Three short points, under an accent rule */
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.tres li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--accent); }
.tres p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.tres--depois { margin-top: var(--section-head); }

/* ---------- The money, wide ---------- */
.financeiro { padding: var(--s-8); box-shadow: var(--e-2); }
.financeiro .bloco__cab { margin-bottom: var(--s-5); }
.financeiro .total .n { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.fin-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); }
.fin-grupo { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.fin-grupo__n { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.fin-itens { display: grid; margin-top: var(--s-2); }
.fin-itens li { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: center; padding-block: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-base); line-height: var(--lh-base); color: var(--ink-2); }
.fin-itens .n { font-weight: var(--w-semibold); color: var(--ink); }
.fin-itens small { grid-column: 2 / -1; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }

/* ---------- Features ---------- */
.recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feature); align-items: start; } /* each card as tall as its content */
.recurso { display: grid; gap: var(--s-2); padding: var(--s-6); }
.recurso > p, .recurso__texto > p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
/* The wide card: the text on the left, the picture on the right */
.recurso--largo { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
.recurso__texto { display: grid; gap: var(--s-2); align-content: start; }
.recurso__texto .leitura { margin-top: var(--s-4); }
.recurso > .leitura { margin-top: var(--s-2); }
/* The picture sits --feature-visual under the text (the grid's 8 plus the rest) and is as tall as its content */
.mock { margin-top: calc(var(--feature-visual) - var(--s-2)); padding: var(--pad-tile); border-radius: var(--radius-tile); background: var(--surface-soft); font-size: var(--t-base); line-height: var(--lh-base); min-width: 0; display: grid; }
.recurso--largo .mock { margin-top: 0; }

.cnpjs, .dist { display: grid; border-radius: var(--radius-inner); background: var(--surface); padding-inline: var(--s-3); }
.cnpjs li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--line); }
.cnpjs li:first-child { border-top: 0; }
.cnpjs li > span { display: grid; min-width: 0; }
.cnpjs b { font-weight: var(--w-semibold); }
.cnpjs small { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.cnpjs .n { font-size: var(--t-md); }
.cnpjs__total .n { font-size: var(--t-xl); line-height: var(--lh-xl); color: var(--accent); }

.trecho { padding: var(--s-3); border-radius: var(--radius-inner); background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: var(--t-sm); line-height: var(--lh-base); }
.trecho mark { padding: 0 var(--s-half); border-radius: var(--radius-mark); background: var(--accent-soft); color: var(--ink); }
.extraido { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* Distribution: the new case gets its owner */
.vista .dist { background: var(--surface-soft); }
.dist__linha { display: grid; grid-template-columns: var(--control-xs) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding-block: var(--s-2); border-top: 1px solid var(--line); }
.dist__linha:first-child { border-top: 0; }
.dist__txt { display: grid; min-width: 0; }
.dist__txt b { font-family: var(--mono); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist__txt span { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist__sug { color: var(--accent) !important; }
.dono, .dist__btn { display: grid; }
.dono > *, .dist__btn > * { grid-area: 1 / 1; text-align: center; transition: opacity var(--dur-settle) var(--ease-out), transform var(--dur-settle) var(--ease-out); }
.dono__rosto { opacity: 0; transform: scale(.96); }
.dist__btn-b { opacity: 0; color: var(--ok); }
/* Resolved (the app's "It's hers now"): the dashed place becomes the face, the button says so */
.is-atribuido .dono .avatar--vazio, .is-atribuido .dist__btn-a { opacity: 0; }
.is-atribuido .dono__rosto { opacity: 1; transform: none; }
.is-atribuido .dist__btn-b { opacity: 1; }
.is-atribuido .dist__btn { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.is-atribuido .dist__sug { color: var(--muted) !important; }

/* Bars: one grid for every row, so the bars and the values line up */
.barras { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 8fr) auto; gap: var(--s-3); align-items: center; }
.barras li { display: contents; }
.barras__rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--t-base); line-height: var(--lh-base); }
.barras__trilho { height: var(--track); border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.vista .barras__trilho { background: var(--surface-soft); }
.barras__cheio { display: block; height: 100%; width: var(--w); border-radius: var(--radius-pill); background: var(--graf-1); transform-origin: left; }
.barras__cheio--alerta { background: var(--graf-4); }
.barras .n { text-align: right; font-weight: var(--w-semibold); white-space: nowrap; font-size: var(--t-base); }

/* Map by state: a tile map, intensity by count */
.mock--mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.mapa { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-half); max-width: var(--tile-min); }
.mapa span { grid-column: var(--c); grid-row: var(--r); display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-mark); background: var(--surface); color: var(--muted); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); }
.tile .mapa span { background: var(--surface); }
.mapa .n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); color: var(--ink-2); }
.mapa .n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); color: var(--ink); }
.mapa .n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); color: var(--ink); }
.mapa .n4 { background: var(--accent); color: var(--on-accent); } /* the one strongest tile: accent, so its label keeps AA */
.tile .mapa .n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); }
.tile .mapa .n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); }
.tile .mapa .n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); }
.tile .mapa .n4 { background: var(--accent); }
.ranking { display: grid; gap: var(--s-2); }
.ranking li { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; }
.ranking span { color: var(--muted); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .n { text-align: right; }

/* ---------- Desks and reports: two parts side by side ---------- */
.partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.parte { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-3); align-content: start; }
.parte > p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); max-width: var(--measure); }
.parte > [role="img"] { margin-top: var(--s-3); }
/* Three mini desks: rows of modules, the first module of each desk is what that person sees first */
.mini-mesas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-content: start; }
.mini-mesa { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-3); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); }
.mini-mesa__rot { margin-bottom: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semibold); }
.mini-mesa__linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-1); }
.modulo { display: grid; align-items: end; min-height: var(--s-10); padding: var(--s-1) var(--s-2); border-radius: var(--radius-inner); background: var(--surface-soft); color: var(--muted); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modulo--forte { min-height: var(--s-12); background: var(--accent-soft); color: var(--accent); }
/* Reports: a white slide and three files */
.relatorios { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); align-items: start; }
.slide { display: grid; grid-template-rows: auto auto 1fr; aspect-ratio: 16 / 10; padding: var(--s-3) var(--s-4); border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-2); min-width: 0; }
.slide__titulo { font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-semibold); }
.slide__sub { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); }
.slide__barras { display: flex; align-items: stretch; gap: var(--s-2); margin-top: var(--s-2); min-height: 0; }
.slide__barras li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.slide__barras li::before { content: ""; flex: 0 1 var(--h); min-height: var(--s-half); border-radius: var(--radius-mark) var(--radius-mark) 0 0; background: var(--graf-1); transform-origin: bottom; }
.slide__barras span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }
.arquivos { display: grid; gap: var(--s-2); }
.arquivos li { display: grid; grid-template-columns: var(--s-10) minmax(0, 1fr); gap: var(--s-2); align-items: center; padding: var(--s-2); border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.arquivos li > span:last-child { display: grid; min-width: 0; }
.arquivos b { font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivos small { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.arquivo__tipo { display: grid; place-items: center; height: var(--s-10); border-radius: var(--radius-inner); background: var(--surface-soft); color: var(--ink-2); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); }

/* ---------- Differentiator: the table ---------- */
.tabela-frame { overflow-x: auto; contain: inline-size; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-base); line-height: var(--lh-base); }
.tabela th { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); color: var(--muted); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela td { padding: var(--row-pad) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.tabela tr > :first-child { padding-left: 0; }
.tabela tr > :last-child { padding-right: 0; }
.tabela tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.tabela td b { display: block; font-weight: var(--w-semibold); }
.tabela td small { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Proof ---------- */
.provas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.prova { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--accent); }
.prova__n { font-size: var(--t-4xl); line-height: var(--lh-4xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--ink); }
.prova p { color: var(--ink-2); max-width: 40ch; }

/* ---------- How it works: order matters, so the steps enter in order ---------- */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
.passo { display: grid; gap: var(--s-2); align-content: start; }
.passo__n { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semibold); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label); }
.passo p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }

/* ---------- Offer ---------- */
.oferta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); padding: var(--s-12); box-shadow: var(--e-2); }
.oferta__texto { display: grid; gap: var(--s-3); align-content: start; }
.oferta__texto h2 + .secao__intro { margin-top: var(--s-1); }
.oferta__texto .acoes { margin-top: var(--s-3); }
.sigilo { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-base); line-height: var(--lh-base); color: var(--ink-2); }
.oferta__lista { display: grid; gap: var(--s-4); align-content: start; }
.checks { display: grid; gap: var(--s-3); }
.checks li { display: grid; grid-template-columns: var(--size-label) minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.checks li::before { content: "✓"; display: grid; place-items: center; width: var(--size-label); height: var(--size-label); border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: var(--t-xs); font-weight: var(--w-semibold); }

/* ---------- Limitations: known, stated plainly ---------- */
.limites { display: grid; }
.limites li { position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-6); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.limites li:first-child { border-top: 0; padding-top: 0; }
.limites li:last-child { padding-bottom: 0; }
.limites li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + var(--s-1) + var(--s-half)); width: var(--dot); height: var(--dot); border-radius: 50%; border: 1px solid var(--muted); }
.limites li:first-child::before { top: calc(var(--s-1) + var(--s-half)); }
.limites b { color: var(--ink); font-weight: var(--w-semibold); }

/* ---------- Security: four cards ---------- */
.fatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-card); }
.fatos > div { display: grid; gap: var(--s-2); align-content: start; padding: var(--pad-card); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); }
.fatos dt { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.fatos dd { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }

/* ---------- FAQ ---------- */
.faq { display: grid; }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: var(--control-lg); padding-block: var(--s-3); font-weight: var(--w-semibold); cursor: pointer; list-style: none; }
.faq details:first-child summary { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: var(--control-xs); height: var(--control-xs); border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-weight: var(--w-regular); transition: transform var(--dur-move) var(--ease-move); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details p { padding-bottom: var(--s-4); color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); max-width: var(--measure); }
.faq details[open] p { animation: entra var(--dur-enter) var(--ease-out); }

/* ---------- Final ---------- */
.final { max-width: var(--measure); }
.final .acoes { margin-top: var(--s-6); }

/* ---------- Footer ---------- */
.rodape { font-size: var(--t-base); line-height: var(--lh-base); color: var(--muted); }
.rodape__grade { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-8); padding-block: var(--s-12) var(--s-8); }
.rodape__grade::before, .rodape__base::before { content: ""; position: absolute; top: 0; left: var(--page-gutter); right: var(--page-gutter); height: 1px; background: var(--line); }
.rodape__marca { display: grid; gap: var(--s-2); align-content: start; max-width: var(--measure); }
.rodape__marca .marca { margin-bottom: var(--s-2); }
.rodape__col { display: grid; gap: var(--s-2); align-content: start; }
.rodape__col .rotulo { margin-bottom: var(--s-1); }
.rodape a { color: var(--ink-2); text-decoration: none; }
.rodape a:hover { color: var(--accent); text-decoration: underline; }
.rodape__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-6); padding-block: var(--s-6) var(--s-8); font-size: var(--t-sm); line-height: var(--lh-sm); }

/* ---------- Legal pages: one readable column ---------- */
.doc { max-width: calc(var(--measure) + var(--s-16)); padding-block: var(--s-16) var(--section-y); }
.doc h1 { font-size: var(--t-3xl); line-height: var(--lh-3xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.doc__meta { margin-top: var(--s-3); font-size: var(--t-base); line-height: var(--lh-base); color: var(--muted); }
.doc__resumo { margin-top: var(--s-8); }
.doc h2 { margin-top: var(--s-12); font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); scroll-margin-top: calc(var(--s-16) + var(--s-4)); }
.doc h3 { margin-top: var(--s-6); }
.doc p, .doc li { color: var(--ink-2); }
.doc h2 + p, .doc h2 + ul, .doc h3 + p, .doc h3 + ul { margin-top: var(--s-3); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: var(--s-3); }
.doc ul { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: disc; }
.doc b { color: var(--ink); }
.doc__indice { display: grid; gap: var(--s-1); margin-top: var(--s-6); padding-left: var(--s-5); list-style: decimal; color: var(--ink-2); }

/* ---------- Round 3: a site of pages ---------- */
/* The hero photo slot: the right ratio and radius until a photo is chosen (data-photo-slot) */
.foto { position: relative; display: grid; place-items: center; align-content: center; gap: var(--s-2); aspect-ratio: 5 / 4; border-radius: var(--radius-overlay); overflow: hidden; background: linear-gradient(160deg, var(--accent-soft), var(--surface-soft) 70%); border: 1px solid var(--line); box-shadow: var(--e-2); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto__marca { display: grid; place-items: center; width: var(--s-16); height: var(--s-16); border-radius: var(--radius-card); background: var(--surface); color: var(--accent); font-size: var(--t-3xl); box-shadow: var(--e-1); }
.foto__rot { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }

/* A page hero: the same anatomy as the home, one column */
.hero--pagina { padding-bottom: var(--section-y); }
.hero--pagina .hero__texto { max-width: calc(var(--measure) + var(--s-16)); }
.hero--pagina h1 { max-width: 24ch; }
/* A section right under a page hero needs no divider of its own */
.secao--colada > .wrap { padding-top: 0; }
.secao--colada > .wrap::before { display: none; }

/* Home: one card per reader, each leading to its page */
.leitores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-feature); }
.leitor { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s-2); padding: var(--s-6); }
.leitor h3 { font-size: var(--t-xl); line-height: var(--lh-xl); }
.leitor__sub { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.leitor__itens, .lista-check { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.leitor__itens li, .lista-check li { display: grid; grid-template-columns: var(--size-label) minmax(0, 1fr); gap: var(--s-2); font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.leitor__itens li::before, .lista-check li::before { content: "✓"; display: grid; place-items: center; width: var(--size-label); height: var(--size-label); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-semibold); }
.leitor .link-seta { margin-top: var(--s-4); align-self: end; }
.link-seta { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-medium); text-decoration: none; }
.link-seta:hover { text-decoration: underline; }
.link-seta .seta { transition: transform var(--dur-exit) var(--ease-out); }
.link-seta:hover .seta { transform: translateX(3px); }
.secao__cab > .link-seta { margin-top: var(--s-4); }
.provas--home { margin-top: var(--section-head); }
.provas--um { grid-template-columns: minmax(0, 1fr); }

/* A solution section: the explanation beside its picture; every other one swaps sides */
.solucao { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: center; }
.solucao--invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.solucao--invertida .solucao__texto { order: 2; }
.solucao__texto { display: grid; gap: var(--s-3); align-content: start; max-width: var(--measure); }
.solucao__texto > .rotulo { margin-bottom: 0; }
.solucao__texto h2 + .secao__intro { margin-top: var(--s-1); }
.solucao__texto .leitura, .solucao__texto .link-seta, .solucao__texto .prosa { margin-top: var(--s-2); }
.solucao__visual { min-width: 0; }
.bloco--visual { box-shadow: var(--e-2); }
.bloco--visual > .mock { margin-top: 0; }
.solucao__visual .mini-mesas, .solucao__visual .relatorios { margin-top: 0; }

/* Financeiro: where each value comes from, in the order a value becomes exact */
.origens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-feature); }
.origens li { display: grid; gap: var(--s-2); align-content: start; justify-items: start; padding-top: var(--s-4); border-top: 2px solid var(--line); }
.origens p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }

/* Experimente: the guide beside the switcher */
.duas--experimente { align-items: start; }
.mesas-guia { display: grid; gap: var(--s-6); padding-top: var(--s-12); }
.mesas-guia dt { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.mesas-guia dd { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }

/* Segurança: four cards, two to a row, so each reads as a paragraph */
.fatos--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feature); }
.fatos--dois > div { padding: var(--s-6); }
.nota-docs { margin-top: var(--section-head); color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }

/* Diagnóstico */
.oferta-lista { padding: var(--s-8); box-shadow: var(--e-2); }
.secao__cab .sigilo { margin-top: var(--s-6); }

/* Sobre */
.prosa-bloco { display: grid; gap: var(--s-4); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-lead); line-height: var(--lh-lead); }

/* Contato */
.contatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feature); }
.contato { display: grid; gap: var(--s-3); align-content: start; justify-items: start; padding: var(--s-8); }
.contato h3 { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); }
.contato p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.contato .btn { margin-top: var(--s-2); }
.contato__mais { margin-top: var(--section-head); }

/* ---------- Motion: calm entrances, once. Content is visible without JS. ---------- */
.js .revela { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js .revela.is-visivel { opacity: 1; transform: none; }
/* Bars settle to their value once they are seen */
.js .revela :is(.barras__cheio, .pilha span) { transform: scaleX(0); transition: transform var(--dur-settle) var(--ease-out) var(--dur-exit); }
.js .revela :is(.tendencia li, .slide__barras li)::before { transform: scaleY(0); transition: transform var(--dur-settle) var(--ease-out) var(--dur-exit); }
.js .revela.is-visivel :is(.barras__cheio, .pilha span) { transform: none; }
.js .revela.is-visivel :is(.tendencia li, .slide__barras li)::before { transform: none; }
/* Steps: stagger only to show order */
.js .passos.revela { opacity: 1; transform: none; }
.js .passos.revela > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.js .passos.revela > :nth-child(2) { transition-delay: calc(var(--stagger) * 4); }
.js .passos.revela > :nth-child(3) { transition-delay: calc(var(--stagger) * 8); }
.js .passos.revela.is-visivel > * { opacity: 1; transform: none; }
@keyframes entra { from { opacity: 0; transform: translateY(calc(var(--s-1) * -1)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .revela, .js .passos.revela > * { opacity: 1; transform: none; }
  .js .revela :is(.barras__cheio, .pilha span) { transform: none; }
  .js .revela :is(.tendencia li, .slide__barras li)::before { transform: none; }
  .vistas-js .vista { transform: none; }
}

/* ---------- Narrow (960) ---------- */
@media (max-width: 960px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .duas, .partes, .solucao, .solucao--invertida { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .solucao--invertida .solucao__texto { order: 0; }
  .leitores { grid-template-columns: minmax(0, 1fr); }
  .origens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesas-guia { padding-top: 0; }
  .foto { max-width: var(--hero-visual); }
  .recursos { grid-template-columns: minmax(0, 1fr); }
  .recurso--largo { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .recurso--largo .mock { margin-top: calc(var(--feature-visual) - var(--s-2)); }
  .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .oferta { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding: var(--s-8); }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
  .topo__nav, .topo__acoes .btn--ghost { display: none; }
  .topo__acoes { margin-left: auto; }
  .menu-movel { display: block; }
  .topo { position: sticky; }
}

/* ---------- Phone (640) ---------- */
@media (max-width: 640px) {
  body { font-size: var(--t-md); line-height: var(--lh-md); }
  .hero { padding-top: var(--s-10); }
  .hero h1 { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
  .hero__sub, .secao__intro { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .acoes .btn { flex: 1 1 100%; }
  .tres, .passos, .provas, .fatos { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .passos, .fatos { gap: var(--gap-card); }
  .prova__n { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
  .oferta, .financeiro, .recurso { padding: var(--pad-card); }
  .fin-grupos { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .fin-grupo__n { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
  .leitura--faixa { grid-template-columns: minmax(0, 1fr); padding: var(--pad-tile) var(--s-4); }
  .vistas__seg { justify-self: stretch; }
  .vistas__seg button { flex: 1; padding: 0 var(--s-2); }
  .stats-grade--3 .tile { padding: var(--s-2); }
  .stats-grade--3 .tile .n { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .fin dd .n { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .mock--mapa { grid-template-columns: minmax(0, 1fr); }
  .linha { grid-template-columns: var(--s-10) minmax(0, 1fr); }
  .linha .badge { grid-column: 2; justify-self: start; }
  .barras__rot { white-space: normal; }
  .dist__linha--nova .dist__btn { grid-column: 2; justify-self: start; }
  .dist__txt span { white-space: normal; }
  .mini-mesas { grid-template-columns: minmax(0, 1fr); }
  .mini-mesa { grid-template-columns: minmax(0, 1fr); }
  .relatorios { grid-template-columns: minmax(0, 1fr); }
  .tabela { font-size: var(--t-sm); line-height: var(--lh-sm); }
  .tabela th, .tabela td { padding-inline: var(--s-2); }
  .tabela th { white-space: normal; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .fatos--dois, .contatos, .origens { grid-template-columns: minmax(0, 1fr); gap: var(--gap-feature); }
  .leitor, .fatos--dois > div, .contato, .oferta-lista { padding: var(--pad-card); }
  .prosa-bloco { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .topo__acoes .btn--primary { display: none; }
  .doc { padding-top: var(--s-10); }
  .doc h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
}

/* =====================================================================
   Round 4: judit.io's structure and proportions, on our tokens.
   Placed last so it settles the earlier rules; sizes come from the landing tokens,
   which already scale down at 960 and 640.
   ===================================================================== */

/* Header: a slim bar, links in the centre, the actions on the right */
.topo__nav { margin-inline: auto; }
.topo__acoes { margin-left: 0; }

/* Surfaces: cards and images take the 20px radius; a picture inside a card keeps the card radius */
.card, .bloco, .fatos > div, .mini-mesa, .slide, .foto { border-radius: var(--radius-feature); }
.mock, .tile { border-radius: var(--radius-card); }

/* Sections: off-white alternating with a tinted band; space separates them, so no divider lines */
.secao > .wrap { padding-block: var(--section-y) var(--section-bottom); }
.secao > .wrap::before { display: none; }
/* r13: with the bands gone, a divider between two consecutive sections (decided 2026-09-30): in flow, at the box (the
   ::before above, gutter to gutter), equal space above and below (the section's bottom padding on both sides). Not before
   the call (it has its own card), not after the hero (the hero is not a .secao), and not where a section opens with a rule
   of its own or, on the home, holds its own cards (.secao--sem-linha). */
main > .secao + .secao:not(.cta-secao, .secao--colada, .secao--sem-linha) > .wrap { padding-top: var(--section-bottom); }
main > .secao + .secao:not(.cta-secao, .secao--colada, .secao--sem-linha) > .wrap::before { display: block; }
/* r13: retired, alternating bands (.secao--banda, odd sections). Sections are transparent over the one fixed backdrop. */
.secao h2, .solucao__texto h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); }
.secao__cab--centro { margin-inline: auto; text-align: center; }
.secao__cab--estreito { max-width: var(--head-narrow); }
.rotulo--acento { color: var(--accent); }
.centro { margin-top: var(--section-head); text-align: center; }

/* Hero: centred, H1 54/500, the picture under it sinking into the next band */
.hero { padding-top: var(--hero-top); }
.hero h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: var(--w-display); max-width: none; }
.hero--centro { padding-bottom: 0; }
.hero--centro .hero__texto, .hero--pagina .hero__texto { max-width: calc(var(--measure) + var(--s-12) * 2); margin-inline: auto; justify-items: center; text-align: center; }
.hero--centro h1 { max-width: 17ch; }
.hero--centro .hero__sub, .hero--pagina .hero__sub { max-width: var(--head-narrow); }
.hero--centro .acoes, .hero--pagina .acoes { justify-content: center; }
.hero-midia { position: relative; z-index: 1; max-width: var(--hero-media); margin: var(--s-16) auto calc(var(--hero-overlap) * -1); }
.hero-midia__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-feature); background: var(--surface-soft); box-shadow: var(--e-2); }
.hero-midia__mock { position: absolute; right: var(--s-8); top: 50%; width: min(calc(var(--hero-visual) - var(--s-10)), 46%); transform: translateY(-50%); box-shadow: var(--e-3); }
.flutua { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); white-space: nowrap; }
.flutua .n { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); color: var(--warn-ink); }
.flutua--a { left: calc(var(--s-6) * -1); top: 16%; }
.flutua--b { left: 8%; bottom: calc(var(--s-6) * -1); }
.flutua--c { right: 12%; top: calc(var(--s-5) * -1); color: var(--ok); font-weight: var(--w-medium); }

/* The quiet proof line, on the band the hero picture sinks into */
.faixa-prova { padding: calc(var(--hero-overlap) + var(--s-16)) 0 var(--s-10); text-align: center; font-size: var(--t-md); line-height: var(--lh-md); color: var(--muted); }
.faixa-prova b { color: var(--ink); font-weight: var(--w-semibold); }

/* Products: a short statement, the label, the cards, then the real numbers beside an illustration */
.abertura { display: grid; gap: var(--s-4); max-width: calc(var(--measure) + var(--s-16)); margin-bottom: var(--section-head); }
.rotulo-faixa { margin-bottom: var(--s-6); font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-medium); color: var(--accent); }
.produtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-feature); }
.produto { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-2); padding: var(--s-6); color: var(--ink); text-decoration: none; transition: transform var(--dur-exit) var(--ease-out), box-shadow var(--dur-exit), border-color var(--dur-exit); }
.produto:hover { transform: translateY(-2px); box-shadow: var(--e-2); border-color: var(--accent-line); }
.produto:focus-visible { outline: none; box-shadow: var(--focus); }
.produto__n { display: inline-grid; place-items: center; width: var(--control); height: var(--control); margin-bottom: var(--s-2); border-radius: var(--radius-card); background: var(--accent-soft); color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.produto p { color: var(--ink-2); font-size: var(--t-md); line-height: var(--lh-md); }
.produto .link-seta { margin-top: var(--s-3); color: var(--accent); }
.produto:hover .seta { transform: translateX(3px); }
.numeros { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); align-items: center; margin-top: var(--section-y); }
.numeros__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.numeros__lista > div { display: grid; gap: var(--s-1); align-content: start; }
.numeros__n { font-size: var(--t-stat); line-height: var(--lh-stat); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); color: var(--ink); }
.numeros__lista dd { font-size: var(--t-md); line-height: var(--lh-md); color: var(--muted); }
.ilustra { display: grid; gap: var(--s-4); justify-items: center; padding: var(--s-6); border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e-1); }
.mapa--ilustra { width: 100%; max-width: calc(var(--tile-min) - var(--s-5)); }
.ilustra figcaption { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.ilustra figcaption span { display: block; text-align: center; color: var(--muted); }

/* What the Mesa answers: eight questions, grouped by reader */
.perguntas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.pergunta { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--line); }
.pergunta__quem { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.pergunta p:last-child { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }

/* The one big statement */
.declaracao { display: grid; gap: var(--s-6); justify-items: start; max-width: calc(var(--hero-media) - var(--s-16) * 2); }
/* r6: the statement takes the one section-title size; its paragraph is the lead */
.declaracao p { max-width: var(--head-narrow); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); }

/* Experimente: tabs across, the text and bullets beside the desk */
.vistas__seg--centro { display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--s-8); }
.experimente-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); align-items: center; }
.vista--texto { display: grid; gap: var(--s-3); align-content: center; box-shadow: none; }
.vista--texto h3 { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-display); }
.vista--texto .link-seta { margin-top: var(--s-2); }
.experimente .legenda { text-align: left; }

/* Photo cards, one per reader */
.foto-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-feature); }
.foto-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-2); }
.foto-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-feature); background: var(--surface-soft); }
.foto-card h3 { margin-top: var(--s-3); font-size: var(--t-xl); line-height: var(--lh-xl); }
.foto-card p { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }

/* Security in brief */
.beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.beneficios > div { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--line); }
.beneficios dt { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.beneficios dd { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }

/* The final call to action, with a photo */
.comece { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); align-items: center; }
.comece__foto img { display: block; width: 100%; height: auto; aspect-ratio: 440 / 520; object-fit: cover; border-radius: var(--radius-feature); background: var(--surface-soft); }
.comece__texto { display: grid; gap: var(--s-4); align-content: center; justify-items: start; }
.comece__texto .lista-check { margin-top: 0; }
.comece__texto .sigilo { margin-top: 0; padding-top: 0; border-top: 0; color: var(--muted); }

/* The FAQ, centred */
.faq--centro { max-width: var(--faq-max); margin-inline: auto; }

/* Footer: judit's spacing (48 above and below) */
.rodape__grade { padding-block: var(--s-12); }
.rodape__base { padding-block: var(--s-6) var(--s-12); }

@media (max-width: 960px) {
  .produtos, .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros, .experimente-grade, .comece { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .foto-cards { grid-template-columns: minmax(0, 1fr); }
  .foto-card__img img { aspect-ratio: 16 / 7; }
  .comece__foto img { aspect-ratio: 16 / 10; }
  .hero-midia__mock { position: relative; top: auto; right: auto; transform: none; width: auto; margin: calc(var(--s-16) * -1) var(--s-6) 0; }
  .flutua--b, .flutua--c { display: none; }
  .topo__acoes { margin-left: auto; }
}
@media (max-width: 640px) {
  .produtos, .beneficios, .perguntas, .numeros__lista { grid-template-columns: minmax(0, 1fr); }
  .numeros__lista { gap: var(--s-6); }
  .produto, .pergunta, .beneficios > div { padding: var(--pad-card); }
  .hero-midia { margin-top: var(--s-10); }
  .hero-midia__mock { margin: calc(var(--s-10) * -1) 0 0; }
  .flutua--a { left: var(--s-3); top: var(--s-3); padding: var(--s-2) var(--s-3); }
  .flutua--a .n { font-size: var(--t-lg); line-height: var(--lh-lg); }
  .vista--texto h3 { font-size: var(--t-xl); line-height: var(--lh-xl); }
  .hero--centro .acoes .btn, .hero--pagina .acoes .btn { flex: 1 1 100%; }
}
.comece__texto h2 + .secao__intro, .abertura h2 + .secao__intro { margin-top: 0; }

/* =====================================================================
   Round 6: more depth in Experimente, and solution pages that lead to each other
   ===================================================================== */
.lista-check--densa { gap: var(--s-2); }
.lista-check li a { color: var(--accent); }
.vista__nota { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.experimente-grade { align-items: start; }
/* "Continue por aqui": two related pages, then the call to action */
.continue { display: grid; gap: var(--s-4); margin-bottom: var(--section-y); }
.continue__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-feature); }
.produto--compacto { grid-template-rows: auto 1fr auto; padding: var(--s-5) var(--s-6); }
.produto--compacto h3 { font-size: var(--t-lg); line-height: var(--lh-lg); }
@media (max-width: 640px) { .continue__cards { grid-template-columns: minmax(0, 1fr); } .produto--compacto { padding: var(--pad-card); } }
/* r6: a check item may hold a link, so the text flows as one line box and the check sits beside it */
.leitor__itens li, .lista-check li { display: block; position: relative; padding-left: calc(var(--size-label) + var(--s-2)); }
.leitor__itens li::before, .lista-check li::before { position: absolute; left: 0; top: 0; }

/* =====================================================================
   Round 7: one grid on every page.
   1. One content box: .wrap (--page-max, --page-gutter). Bands may tint full bleed; content stays in the box.
   2. One split: .split, two equal halves with --gap-grid. Swapping sides never changes the widths.
   3. Card grids use the same box and the same gap, so 2-up and 4-up grids land on the halves.
   4. Nothing leaves the box: no negative offsets, no per-section widths or ratios.
   ===================================================================== */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.split > * { min-width: 0; }
.solucao--invertida .solucao__texto { order: 2; }              /* swap the sides, keep the halves */
.solucao__texto { max-width: none; }                            /* the text starts on its column edge... */
.solucao__texto > p, .solucao__texto > ul, .solucao__texto > aside { max-width: var(--measure); } /* ...and keeps its own measure */
.duas > .secao__cab { max-width: var(--measure); }
.numeros { margin-top: var(--section-y); }

/* Card grids: the same gap as the split */
.produtos, .leitores, .foto-cards, .perguntas, .origens, .fatos--dois, .contatos, .continue__cards, .tres, .provas, .passos { gap: var(--gap-grid); }
.rodape__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }

/* Inside the box, full width: the hero picture, the FAQ */
.hero-midia { max-width: none; }
.flutua--a { left: var(--s-6); }
.faq--centro { max-width: none; }
.faq details p { max-width: var(--measure); }

@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .solucao--invertida .solucao__texto { order: 0; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
}

/* The diagnóstico call to action: built once in build.py, the same on every page that closes with it.
   One strong ground (the ink surface), on the grid: the card is the split, the photo fills its half. */
.cta-secao { background: none; }
.cta-diag { align-items: stretch; border: 1px solid var(--accent-line); border-radius: var(--radius-feature); background: var(--surface-inverse); color: var(--on-inverse); overflow: hidden; box-shadow: var(--e-2); }
.cta-diag__texto { display: grid; gap: var(--s-4); align-content: center; justify-items: start; padding: var(--s-12) 0 var(--s-12) var(--s-12); }
.cta-diag__texto .rotulo { color: var(--link-inverse); }
.secao .cta-diag h2 { color: var(--on-inverse); }
.cta-diag__lead { max-width: var(--measure); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--on-inverse-muted); }
.cta-diag .lista-check { margin-top: 0; }
.cta-diag .lista-check li { color: var(--on-inverse); }
.cta-diag .acoes { align-items: center; gap: var(--s-6); margin-top: var(--s-2); }
.cta-diag .link-seta { color: var(--link-inverse); }
.cta-diag__sigilo { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--on-inverse-muted); }
.cta-diag__foto { margin: 0; min-height: 100%; }
.cta-diag__foto img { display: block; width: 100%; height: 100%; min-height: calc(var(--s-16) * 5); object-fit: cover; }
.cta-diag :focus-visible { outline-color: var(--link-inverse); }
@media (max-width: 960px) {
  .cta-diag__texto { padding: var(--s-10) var(--s-8) 0; }
  .cta-diag__foto img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .cta-diag__texto { padding: var(--s-8) var(--pad-card) 0; }
  .cta-diag .acoes .btn { flex: 1 1 100%; }
}

/* The home proof: real numbers beside an interactive, illustrative map. Both cards share one top and bottom. */
.prova-mapa { align-items: stretch; margin-top: var(--section-y); }
.prova-numeros { display: grid; align-content: space-between; gap: var(--s-6); padding: var(--s-8); }
.prova-numeros h3 { margin-top: var(--s-2); font-size: var(--t-xl); line-height: var(--lh-xl); }
.prova-numeros__lista { display: grid; }
.prova-numeros__lista > div { display: grid; grid-template-columns: calc(var(--s-16) * 2) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.prova-numeros__lista > div:last-child { padding-bottom: 0; }
.prova-numeros__lista dt { font-size: var(--t-stat); line-height: var(--lh-stat); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); }
.prova-numeros__lista dd { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }

.mapa-int { display: grid; align-content: space-between; gap: var(--s-6); margin: 0; padding: var(--s-8); }
.mapa-int__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.mapa-int__grade { display: grid; grid-template-columns: repeat(7, var(--control-sm)); grid-auto-rows: var(--control-sm); gap: var(--s-1); }
.uf { grid-column: var(--c); grid-row: var(--r); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-mark); font: inherit; font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: var(--w-semibold); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro); }
.uf:hover { transform: scale(1.08); }
.uf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uf[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.uf.n0, .uf-chave.n0 { background: var(--surface-soft); color: var(--muted); cursor: default; }
.uf.n1, .uf-chave.n1 { background: color-mix(in srgb, var(--graf-1) 15%, var(--surface)); color: var(--ink); }
.uf.n2, .uf-chave.n2 { background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); color: var(--ink); }
.uf.n3, .uf-chave.n3 { background: color-mix(in srgb, var(--graf-1) 60%, var(--surface)); color: var(--ink); }
.uf.n4, .uf-chave.n4 { background: var(--accent); color: var(--on-accent); }
.uf:disabled:hover { transform: none; }
.mapa-int__lado { display: grid; gap: var(--s-6); align-content: start; }
.mapa-int__leitura { display: grid; gap: var(--s-1); }
.mapa-int__nome { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-semibold); }
.mapa-int__dado { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.mapa-int__n { font-weight: var(--w-semibold); color: var(--ink); }
.mapa-int__barra { display: block; height: var(--track); margin-top: var(--s-2); border-radius: var(--radius-pill); background: var(--surface-soft); overflow: hidden; }
.mapa-int__barra span { display: block; width: var(--w); height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width var(--dur-settle) var(--ease-out); }
.mapa-int__legenda { display: grid; gap: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.mapa-int__legenda li { display: flex; align-items: center; gap: var(--s-2); }
.uf-chave { display: inline-block; width: var(--s-4); height: var(--s-4); border-radius: var(--radius-mark); }
.mapa-int__nota { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .uf, .mapa-int__barra span { transition: none; } .uf:hover { transform: none; } }
@media (max-width: 960px) { .prova-mapa { align-items: start; } }
@media (max-width: 640px) {
  .prova-numeros, .mapa-int { padding: var(--pad-card); }
  .mapa-int__corpo { grid-template-columns: minmax(0, 1fr); }
  .mapa-int__grade { grid-template-columns: repeat(7, minmax(var(--control-sm), 1fr)); grid-auto-rows: var(--control-sm); justify-content: center; }
  .prova-numeros__lista > div { grid-template-columns: calc(var(--s-16) + var(--s-8)) minmax(0, 1fr); }
}
.continue-secao .continue { margin-bottom: 0; }
.prova-mapa__nota { margin-top: var(--s-3); }

/* Round 8: "O que a Mesa responde" in three verticals, one per reader: a drawn vignette, the pain, the questions */
.verticais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); align-items: stretch; }
.vertical { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: var(--s-3); padding: var(--s-6); }
.vertical h3 { font-size: var(--t-xl); line-height: var(--lh-xl); }
.vertical__ilustra { margin-bottom: var(--s-2); padding: var(--s-4); border-radius: var(--radius-card); background: var(--surface-soft); min-height: calc(var(--s-16) + var(--s-12)); display: grid; align-content: center; }
.vertical__resp { margin-top: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semibold); color: var(--muted); }
.vertical__perguntas { display: grid; gap: var(--s-3); align-content: start; }
.vertical__perguntas li { display: grid; gap: var(--s-half); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.vertical__perguntas li:first-child { padding-top: 0; border-top: 0; }
.vertical__perguntas b { font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); }
.vertical__perguntas span { font-size: var(--t-base); line-height: var(--lh-base); color: var(--ink-2); }
.vertical .link-seta { margin-top: var(--s-2); }
/* the vignettes: drawn with the product's own parts, no numbers */
.pilha--vinheta { height: var(--s-3); margin-bottom: var(--s-3); }
.vinheta__chaves { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.vinheta__chaves li { display: inline-flex; align-items: center; gap: var(--s-1); }
.vinheta--fila { display: grid; gap: var(--s-2); }
.vinheta__linha { display: flex; align-items: center; gap: var(--s-2); }
.vinheta__barra { flex: 1; height: var(--track); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--graf-1) 35%, var(--surface)); }
.vinheta__barra--curta { flex: 0 1 25%; background: var(--line); }
.vinheta__barra--media { flex: 0 1 55%; }
.vinheta--semana { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); }
.vinheta__dia { display: grid; grid-template-rows: auto 1fr; gap: var(--s-1); min-height: calc(var(--s-16) + var(--s-2)); padding: var(--s-1); border-radius: var(--radius-inner); background: var(--surface); }
.vinheta__dia span { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--muted); text-align: center; }
.vinheta__evento { align-self: start; height: var(--s-4); border-radius: var(--radius-mark); }
.vinheta__evento--aud, .chave--aud { background: var(--accent); }
.vinheta__evento--prazo, .chave--prazo { background: var(--warn-ink); }
.vinheta__chaves--semana { margin-top: var(--s-3); }
@media (max-width: 960px) { .verticais { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .vertical { padding: var(--pad-card); } }

/* Round 8, Sobre: fewer boxes. Pains paired with answers as rows; the build as a short sequence; the promises as a list. */
.par-cab { padding-bottom: var(--s-3); }
.pares { display: grid; }
.par { align-items: start; padding-block: var(--s-6); border-top: 1px solid var(--line); }
.par:last-child { padding-bottom: 0; }
.par__dor { font-size: var(--t-xl); line-height: var(--lh-xl); color: var(--ink-2); max-width: var(--measure); }
.par__resp { display: grid; gap: var(--s-2); justify-items: start; }
.par__resp p { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-medium); color: var(--ink); max-width: var(--measure); }
.par__seta { margin-right: var(--s-2); color: var(--accent); }
.linha-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.linha-passos li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.linha-passos__n { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: var(--w-semibold); color: var(--accent); letter-spacing: var(--tracking-label); font-variant-numeric: tabular-nums; }
.linha-passos b { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.linha-passos p { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.compromissos { display: grid; gap: var(--s-5); }
.compromissos li { position: relative; display: grid; gap: var(--s-1); padding-left: calc(var(--size-label) + var(--s-3)); }
.compromissos li::before { content: "✓"; position: absolute; left: 0; top: var(--s-half); display: grid; place-items: center; width: var(--size-label); height: var(--size-label); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); font-weight: var(--w-semibold); }
.compromissos b { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.compromissos span { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
@media (max-width: 960px) { .linha-passos { grid-template-columns: minmax(0, 1fr); } .par-cab { display: none; } .par { gap: var(--s-2); } }

/* Round 8: a soft glow that follows the cursor behind page heroes, section heads and Sobre's rows.
   Under the text (z-index -1 in an isolated block), fades with opacity, no layout shift.
   landing.js adds .brilho only with a fine pointer and without reduced motion; phones get nothing. */
.brilho { position: relative; isolation: isolate; }
.brilho::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(calc(var(--s-16) * 6) circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  /* Soft edges: the glow fades out before the block's top and bottom, so it never ends on a hard line. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  contain: strict; transition: opacity 180ms var(--ease-out); }
.brilho.is-brilho::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .brilho::before { display: none; } }
/* Sobre: each pain-answer row keeps the accent top rule of the old problem trio */
.par { border-top: 2px solid var(--accent); }
.vertical__ilustra { height: calc(var(--s-16) * 2); min-height: 0; } /* one height for the three vignettes, so the titles line up */

/* The home H1 on two lines at 1440 and 1280: a wider measure, balanced */
.hero--centro .hero__texto { max-width: var(--hero-titulo); }
.hero--centro h1 { max-width: none; text-wrap: balance; }
/* The break the copy wants ("…está / custando ao seu grupo."), only where the H1 runs on two lines */
@media (max-width: 960px) { .h1-quebra { display: none; } }

/* Round 10: Inter runs wider than SF Pro; display sizes take Inter's tighter tracking */
.hero h1, .secao h2, .solucao__texto h2 { letter-spacing: var(--tracking-display); }

/* Round 10: Experimente's tabs sit at the top of the left half, level with the desk on the right */
.experimente__lado { display: grid; align-content: start; min-width: 0; }
.experimente__lado .vistas__seg { justify-self: start; margin: 0 0 var(--s-8); }
.experimente__lado .vista--texto { align-content: start; }
@media (max-width: 640px) { .experimente__lado .vistas__seg { justify-self: stretch; overflow-x: auto; } }

/* Round 11: custom-built systems */
.linha-passos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Como trabalhamos: each stage a row on the halves, the stage on the left, what happens / you provide / you get on the right */
.etapas { display: grid; }
.etapa { align-items: start; padding-block: var(--s-8); border-top: 2px solid var(--accent); }
.etapa:last-child { padding-bottom: 0; }
.etapa__cab { display: grid; gap: var(--s-2); align-content: start; }
.etapa__cab h3 { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-display); letter-spacing: var(--tracking-display); }
.etapa__itens { display: grid; gap: var(--s-4); }
.etapa__itens dt { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.etapa__itens dd { margin-top: var(--s-1); font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); max-width: var(--measure); }
/* Demandas administrativas: the flow of one demand */
.fluxo { display: grid; gap: var(--s-1); }
.fluxo__passo { position: relative; display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-3); }
.fluxo__passo b { display: block; font-size: var(--t-md); line-height: var(--lh-md); font-weight: var(--w-semibold); }
.fluxo__passo small { display: block; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.fluxo__marca { width: var(--s-3); height: var(--s-3); margin-top: var(--s-1); border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); }
.fluxo__passo--feito .fluxo__marca { background: var(--accent); }
.fluxo__passo--atual .fluxo__marca { background: var(--ok); border-color: var(--ok); }
.fluxo__passo:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--s-3) / 2 - 1px); top: calc(var(--s-1) + var(--s-3)); bottom: 0; width: 2px; background: var(--line); }
@media (max-width: 960px) { .linha-passos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .etapa { gap: var(--s-4); } }
@media (max-width: 640px) { .linha-passos--4 { grid-template-columns: minmax(0, 1fr); } }

/* Round 12: the hero eyebrow is a pill badge, one component for every page hero */
.hero__selo { display: inline-flex; align-items: center; justify-self: center; gap: var(--s-2); height: var(--selo-h); padding: 0 var(--s-3); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-selo); text-transform: uppercase; white-space: nowrap; }

/* Round 13: the contact page, a form on the grid */
.contato-grade { align-items: start; }
.contato__lado { display: grid; gap: var(--s-4); align-content: start; }
.secao .contato__titulo { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.contato__lado .rotulo { margin-top: var(--s-4); }
.contato__nota { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.canais { display: grid; gap: var(--s-2); }
.canais li { display: grid; grid-template-columns: var(--col-meta) minmax(0, 1fr); gap: var(--s-3); align-items: baseline; font-size: var(--t-md); line-height: var(--lh-md); }
.canais__rot { color: var(--muted); font-size: var(--t-sm); }
.form-cartao { padding: var(--s-8); }
.form__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.form__campo { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.form__campo--largo { grid-column: 1 / -1; }
.form__campo label { font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--w-medium); color: var(--ink); }
.form__obrig { color: var(--accent); }
.form__opc, .form__ajuda, .form__legenda { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); font-weight: var(--w-regular); }
.form .input, .form .select { width: 100%; height: var(--control-lg); padding: 0 var(--s-3); border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--t-md); }
.form .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-8); }
.form .form__texto { height: auto; min-height: calc(var(--control-lg) * 3); padding: var(--s-3); resize: vertical; line-height: var(--lh-md); }
.form .input:focus, .form .select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.form [aria-invalid="true"] { border-color: var(--danger); }
.form__erro { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--danger); }
.form__aceite { display: grid; grid-template-columns: var(--size-label) minmax(0, 1fr); gap: var(--s-3); align-items: start; font-weight: var(--w-regular) !important; color: var(--ink-2) !important; cursor: pointer; }
.form__aceite input { width: var(--s-4); height: var(--s-4); margin: var(--s-half) 0 0; accent-color: var(--accent); }
.form__aceite input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form { position: relative; }
.form__mel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* honeypot: in place but invisible, so nothing sits outside the grid */
.form__mel * { max-width: 1px; }
.form__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.form__resumo { margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); border: 1px solid var(--danger); background: var(--danger-soft); color: var(--ink); font-size: var(--t-base); line-height: var(--lh-base); }
.form__resumo ul { margin-top: var(--s-1); padding-left: var(--s-4); list-style: disc; }
.form__resumo a { color: var(--ink); }
.form__estado:not(:empty) { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); font-size: var(--t-md); line-height: var(--lh-md); }
.form__estado--ok { background: var(--ok-soft); color: var(--ink); border: 1px solid var(--ok); }
.form__estado--aviso { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--warn-ink); }
.form__estado--erro { background: var(--danger-soft); color: var(--ink); border: 1px solid var(--danger); }
.form__estado a { color: var(--accent); }
.form__estado--ok a, .form__estado--aviso a, .form__estado--erro a { color: inherit; text-decoration: underline; }
.form .btn.is-carregando { opacity: .7; pointer-events: none; }
@media (max-width: 640px) { .form__grade { grid-template-columns: minmax(0, 1fr); } .form-cartao { padding: var(--pad-card); } .form__acoes .btn { flex: 1 1 100%; } }

/* Round 13, Como trabalhamos: each stage on the four columns of the grid.
   Column 1: number, title, one-line summary. Columns 2 to 4: what happens / what you provide / what you get. */
.etapa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--gap-grid); align-items: start; padding-block: var(--s-12); } /* r13: more room, equal above and below */
.etapa__itens { display: contents; }
.etapa__itens > div { min-width: 0; }
.etapa__resumo { font-size: var(--t-md); line-height: var(--lh-md); color: var(--ink-2); }
.etapa__itens dd { max-width: none; }
@media (max-width: 960px) { .etapa { grid-template-columns: repeat(3, minmax(0, 1fr)); } .etapa__cab { grid-column: 1 / -1; } }
@media (max-width: 640px) { .etapa { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-8); } }

/* Round 13: the home hero's three quiet proof points under the buttons */
.hero__provas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); margin-top: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--muted); }
.hero__provas li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__provas li::before { content: "✓"; color: var(--accent); font-weight: var(--w-semibold); }
@media (max-width: 640px) { .hero__provas { flex-direction: column; align-items: center; } }

/* ---------- Round 13: depth (decided 2026-09-30) ----------
   Cards: the current card colour is the lit centre, falling off to a darker edge (--surface-card-fundo),
   with a 1px highlight on the top edge. Only outer surfaces: a surface inside a surface stays flat, so nesting reads.
   The page: one fixed backdrop (below), no bands. */
.card, .bloco, .flutua, .ilustra, .pergunta, .beneficios > div, .fatos > div, .mini-mesa, .slide {
  background: var(--surface-card-fundo); }
.card, .bloco, .ilustra, .pergunta, .beneficios > div, .fatos > div, .mini-mesa { box-shadow: var(--surface-card-brilho); } /* --e-1 is none in dark */
.flutua { box-shadow: var(--surface-card-brilho), var(--e-3); }
.slide { box-shadow: var(--surface-card-brilho), var(--e-2); }
:is(.card, .bloco) :is(.card, .bloco) { background: var(--surface); box-shadow: none; }

/* One backdrop for the whole page (decided 2026-09-30): fixed behind the content, which scrolls over it.
   Gradients only; a fixed layer is composited once, so scrolling does not repaint it. No parallax, no motion. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--fundo-pagina); }

/* ---------- Round 13: the hero picture ----------
   Placement: the Financeiro card sits at the bottom right and hangs over the photo's bottom edge, so it covers no face;
   the three chips take the other corners (17 top left, Atribuído top right, Audiência · Prazo bottom left).
   Reveal, once, about 2.8s: photo fades in, the card rises, the stage bar fills segment by segment, the values count up
   (landing.js; tabular numbers, width locked to the final value), then the chips one by one, the last with its check.
   Only transform and opacity. Without JS, or with reduced motion, the final state shows at once (the class is never added). */
@media (min-width: 961px) { .hero-midia__mock { top: auto; bottom: calc(var(--s-6) * -1); transform: none; } }
.flutua__ok { display: inline-block; }
.hero-midia--anim .hero-midia__foto { opacity: 0; transition: opacity var(--dur-settle) var(--ease-out); }
.hero-midia--anim .hero-midia__mock { opacity: 0; transform: translateY(var(--s-4)); transition: opacity var(--dur-settle) var(--ease-out) calc(var(--stagger) * 8), transform var(--dur-settle) var(--ease-out) calc(var(--stagger) * 8); }
.hero-midia--anim .pilha span { transform: scaleX(0); transition: transform var(--dur-enter) var(--ease-out) calc(var(--stagger) * 20); }
.hero-midia--anim .pilha span:nth-child(2) { transition-delay: calc(var(--stagger) * 24); }
.hero-midia--anim .pilha span:nth-child(3) { transition-delay: calc(var(--stagger) * 28); }
.hero-midia--anim .pilha span:nth-child(4) { transition-delay: calc(var(--stagger) * 32); }
.hero-midia--anim .pilha span:nth-child(5) { transition-delay: calc(var(--stagger) * 36); }
.hero-midia--anim .flutua { opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--dur-enter) var(--ease-out) calc(var(--stagger) * 60), transform var(--dur-enter) var(--ease-out) calc(var(--stagger) * 60); }
.hero-midia--anim .flutua--b { transition-delay: calc(var(--stagger) * 70); }
.hero-midia--anim .flutua--c { transition-delay: calc(var(--stagger) * 80); }
.hero-midia--anim .flutua__ok { opacity: 0; transform: scale(.6); transition: opacity var(--dur-enter) var(--ease-out) calc(var(--stagger) * 88), transform var(--dur-enter) var(--ease-out) calc(var(--stagger) * 88); }
.hero-midia--anim.is-in :is(.hero-midia__foto, .hero-midia__mock, .pilha span, .flutua, .flutua__ok) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-midia--anim :is(.hero-midia__foto, .hero-midia__mock, .pilha span, .flutua, .flutua__ok) { opacity: 1; transform: none; transition: none; } }

/* Round 13: the brand name inside a title (h1 to h3, card titles, the call's H2) is set in the logo's face (decided 2026-09-30).
   Measured at 1em: cap height 0.720em (Inter 0.728), x-height 0.510 (Inter 0.516), but "Mesa" is 29% narrower (172 vs 243 at 100px),
   so at 1em it reads small. 1.14em was chosen by eye. line-height 0: the serif's metrics never change the line box. Titles only. */
.nome-marca { font-family: var(--font-marca); font-size: 1.14em; /* bigger so the serif's small x-height pairs with Inter (decided 2026-09-30) */ font-weight: var(--w-regular); font-synthesis: none; letter-spacing: -.01em; line-height: 0; }

/* Round 13: over content, the glass header lets the page through (--vidro-fundo is --bg at 70%), so its quiet text steps up.
   Measured worst case: the hero photo's brightest area (237,237,237), blurred and seen through the glass, gives (83,85,88).
   On it --muted is 2.94:1 and --accent 3.03:1 (fail); --ink-2 is 5.07:1 and --ink 6.60:1 (pass). At the top of the page the
   header sits on the dark backdrop and keeps its muted links; .is-sobre (landing.js) is set once the page has scrolled. */
.topo.is-sobre :is(.topo__nav a, .sol > summary, .topo__acoes .btn--ghost):not(:hover, [aria-current="page"], .is-atual, .sol[open] > summary) { color: var(--ink-2); }

/* Round 13: a page hero has the same space above and below (decided 2026-09-30): header to badge, and lede to the first
   content below. --hero-y on both sides; the first section after it gives up its top padding (and draws no divider). */
.hero--pagina { padding-block: var(--hero-y); }
.hero--pagina + .secao > .wrap { padding-top: 0; }

/* =====================================================================
   Round 14: phones and tablets. Desktop is untouched: every rule here sits in a max-width, pointer or hover query.
   ===================================================================== */
@media (max-width: 960px) {
  /* Safe areas (viewport-fit=cover): the gutters, the header and the footer step clear of notches and the home bar. */
  .wrap { padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); }
  .topo { padding-top: env(safe-area-inset-top); }
  .rodape__base { padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom)); }
  /* The fixed backdrop: sized to the large viewport so iOS's collapsing toolbar never uncovers its edge. */
  body::before { bottom: auto; height: 100lvh; }

  /* Touch targets: 44px or more. */
  .marca { min-height: var(--control-lg); }
  .topo__acoes .btn, .menu-movel > summary.btn { height: var(--control-lg); padding-inline: var(--s-4); }
  .pular { min-height: var(--control-lg); display: inline-flex; align-items: center; }
  .seg button { height: calc(var(--control-lg) - 8px); }
  .vistas__seg { padding-block: 3px; }
  .link-seta { min-height: var(--control-lg); }
  .rodape__col { gap: 0; }
  .rodape__col a { display: flex; align-items: center; min-height: var(--control-lg); }
  .canais a, .doc__indice a, .rodape__base a { display: inline-flex; align-items: center; min-height: var(--control-lg); }
  .doc__indice { gap: 0; }

  /* The phone menu: fills the screen below the header, scrolls on its own, large rows; the page behind is locked (landing.js). */
  .menu-movel__painel { height: calc(100dvh - var(--s-16) - env(safe-area-inset-top)); max-height: none; overscroll-behavior: contain; padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }
  .menu-movel__painel > a { min-height: calc(var(--control-lg) + var(--s-1)); font-size: var(--t-lg); }
  html.menu-aberto { overflow: hidden; }

  /* Product mock UI keeps its desktop size (14px) inside the frames; running text is 16 (tokens.css). */
  :is(.mock, .vista, .bloco--visual, .hero-midia__mock, .mini-mesa, .slide, .vertical__ilustra, [role="img"]) { --t-md: 14px; --lh-md: 20px; }
  .vertical__perguntas span { font-size: var(--t-md); line-height: var(--lh-md); }
  /* A closed <details> keeps its content laid out (content-visibility), so the closed menu panel took the summary's width
     and its text ran past the screen edge: at 320 the page measured 338px. Closed, it is not laid out at all. */
  .menu-movel:not([open]) .menu-movel__painel { display: none; }
  .vistas__seg button { min-height: var(--control-lg); }
  /* Titles never leave one word alone; paragraphs wrap evenly. */
  h1, h2, h3 { text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
}
@media (max-width: 640px) {
  /* Home hero: the photo stands alone (no chip over a face); the card sits below it; the proof points read as a list. */
  .flutua--a { display: none; }
  /* The verticals' vignettes: their labels (initials, weekdays) never go under 11px on a phone. */
  .vertical__ilustra :is(.avatar--sm, .vinheta__dia span) { font-size: var(--t-xs); }
  /* Mock rows at 320: a process number or a court line wraps instead of being cut with an ellipsis. */
  :is(.linha__txt b, .linha__txt span, .dist__txt b) { white-space: normal; overflow-wrap: anywhere; }
  /* The page badge may wrap on the narrowest phones ("Módulo · Financeiro do contencioso" is 291px, the box 288 at 320). */
  .hero__selo { max-width: 100%; height: auto; min-height: var(--selo-h); padding-block: var(--s-1); white-space: normal; text-align: center; }
  /* Contact channels: the label above its value, so the e-mail address never runs out of its column (it did at 320). */
  .canais li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__provas { align-items: flex-start; width: fit-content; margin-inline: auto; }
}