/* Mesa Jurídica, Harvey-style version: the site's chrome. Written new for this version (nothing imported from landing.css).
   The structure of harvey.ai (editorial serif titles, small precise sans, generous sections, light first then dark, thin rules,
   text grids more than cards, no gradients, glows or glass) in our colours. Every value comes from tokens.css (site roles);
   the product mocks keep the app's look (mocks.css). */

/* ---------- Fonts: self-hosted, no third-party requests ---------- */
/* Geist (SIL OFL, fonts/LICENSE-Geist.txt): variable weight, Latin + Latin Extended split like the live site's Roboto. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-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; }
/* Instrument Serif (titles and the logo) and Instrument Sans (the logo's JURÍDICA). 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; }
[hidden] { display: none !important; }   /* the attribute always wins over a component's display */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + var(--sp-4)); }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); font-size: var(--tx-corpo); line-height: var(--lx-corpo); font-weight: var(--peso-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, canvas, iframe { max-width: 100%; }   /* media never wider than its column */
a { color: var(--destaque); text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
::selection { background: rgba(42, 91, 215, 0.25); background: color-mix(in srgb, var(--destaque) 25%, transparent); }
[data-tema] { background: var(--fundo); color: var(--texto); }
.n { font-variant-numeric: tabular-nums; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--calha); top: calc(var(--acao-h-toque) * -2); z-index: 60; display: inline-flex; align-items: center; min-height: var(--acao-h-toque); padding: 0 var(--sp-4); border-radius: var(--raio-acao); background: var(--texto); color: var(--fundo); font-size: var(--tx-ui); text-decoration: none; }
.pular:focus { top: var(--sp-2); }

/* One content box, everywhere. */
.wrap { max-width: var(--pagina-max); margin-inline: auto; padding-inline: max(var(--calha), env(safe-area-inset-left)) max(var(--calha), env(safe-area-inset-right)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); }

/* ---------- Type ---------- */
h1, h2 { font-family: var(--fonte-titulo); font-weight: 400; color: var(--texto); text-wrap: balance; }
h1 { font-size: var(--tx-display); line-height: var(--lx-display); letter-spacing: var(--trk-hero); }
h2 { font-size: var(--tx-titulo); line-height: var(--lx-titulo); letter-spacing: var(--trk-titulo); max-width: 28ch; }
h3 { text-wrap: balance; font-family: var(--fonte-texto); font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); letter-spacing: var(--trk-ui); color: var(--texto); }
p, li, dd { text-wrap: pretty; }
.rotulo { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); letter-spacing: var(--trk-ui); color: var(--suave); }
.rotulo--acento { color: var(--texto); }
.meta, .legenda { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
/* The caption (RULES.md §3b, Nayara 2026-10-02): every text that gives context under a visual (an image, a frame, an
   illustration, a demo) is a .legenda and sits exactly --visual-legenda (16) under the visual's visible bottom edge, at every
   width, no exceptions. This is the one rule that places it: no caption sets its own margin, and its parent adds no gap
   (check.mjs: Legendas). Variants change the type, never the distance. */
.legenda { margin-top: var(--visual-legenda); }
.legenda--quadro { font-size: var(--tx-ui); line-height: var(--lx-ui); }   /* under the big product frame (home hero, como-funciona's demo) */
.legenda--conceito { color: var(--texto-2); }   /* under the concept card, on the navy panel */
.nome-marca { font-family: var(--fonte-titulo); }   /* already the title face here: the name needs no change of face */
.prosa { max-width: var(--medida); color: var(--texto-2); }
/* A section's supporting text, wherever it sits (head or right half): the subtitle token, muted, 60ch at most. */
.prosa-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }   /* text to its link: 24 */
.prosa-bloco > p { max-width: 60ch; font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--suave); }

/* ---------- Actions: small, square-ish, dark on light and light on dark ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--acao-h); padding: 0 var(--acao-px); border: 1px solid var(--texto); border-radius: var(--raio-acao); background: transparent; color: var(--texto); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); letter-spacing: var(--trk-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover); }
.btn:hover { background: rgba(22, 20, 15, 0.06); background: color-mix(in srgb, var(--texto) 6%, transparent); }
.btn--primary { background: var(--texto); color: var(--fundo); }
.btn--primary:hover { background: var(--texto-2); border-color: var(--texto-2); }
.btn--ghost { border-color: var(--suave); }
.btn--sm { min-height: var(--sp-8); padding: 0 var(--sp-3); }
.btn--lg { min-height: var(--acao-h-grande); padding: 0 var(--sp-5); font-size: var(--tx-corpo); }
/* RULES.md §6b: actions side by side share one label size; a link beside a large button is .link-seta--lg (check: medirAcoes). */
.link-seta.link-seta--lg { font-size: var(--tx-corpo); line-height: var(--lx-corpo); }   /* the link beside a large button */
.btn .seta, .link-seta .seta { transition: transform var(--dur-hover) var(--curva-saida); }
.btn:hover .seta, a:hover .link-seta .seta, .link-seta:hover .seta { transform: translateX(3px); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.link-seta { position: relative; isolation: isolate; justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--acao-h-toque);   /* every text link: a 44px tap height; it hugs its text in a grid too */ font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--texto); text-decoration: none; }
/* Hover (Nayara 2026-10-02: "a hover with the background, a little darker, without the line below"): a soft fill in the
   second ground (--fundo-2, the nav's hover; one step down from the page on the light ground, one step up on the dark one),
   with the action radius and a small padding drawn OUTSIDE the link's box, so the text never moves and stays on the grid
   at rest. No underline at rest or on hover; the arrow keeps its 3px move. The fill fades (opacity only). Keyboard: the
   same focus ring, drawn around the fill. */
.link-seta::before { content: ""; position: absolute; z-index: -1; inset: var(--sp-1) calc(var(--sp-3) * -1); border-radius: var(--raio-acao); background: var(--fundo-2); opacity: 0; transition: opacity var(--dur-hover) var(--curva-saida); pointer-events: none; }
.link-seta:hover::before, a:hover > .link-seta::before, .link-seta:focus-visible::before { opacity: 1; }
.link-seta:focus-visible { outline: none; }
.link-seta:focus-visible::before { outline: 2px solid var(--destaque); outline-offset: 2px; }
/* One icon set: 16px, 1.5px strokes, the text colour. */
.icone { width: var(--icone); height: var(--icone); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icone-traco); stroke-linecap: round; stroke-linejoin: round; }
.icone--texto { width: var(--icone-texto); height: var(--icone-texto); }
.icone--denso { width: var(--icone-denso); height: var(--icone-denso); }
.icone--ui { width: var(--icone-ui); height: var(--icone-ui); }
.icone--grade { width: var(--icone-grade); height: var(--icone-grade); }
.icone--lista { width: var(--icone-lista); height: var(--icone-lista); }
.icone--chevron { color: var(--suave); transition: rotate var(--dur-micro) var(--curva-padrao); }
/* Checks drawn with the same icon (a mask of icons/check.svg), so lists share the set. */
.com-check::before, .lista-check li::before, .checks li::before, .hero__provas li::before { content: ""; display: inline-block; width: var(--icone-texto); height: var(--icone-texto); background: var(--destaque); -webkit-mask: url("icons/check.svg") center / contain no-repeat; mask: url("icons/check.svg") center / contain no-repeat; }
/* A module that is not built yet: always marked, in the accent, as a small square-cornered tag. */
.selo-desenho { display: inline-flex; align-items: center; height: var(--sp-5); padding: 0 var(--sp-2); margin-left: var(--sp-2); border: 1px solid currentColor; border-radius: var(--raio-acao); color: var(--destaque); font-family: var(--fonte-texto); font-size: var(--tx-selo); line-height: 1; font-weight: var(--peso-ui); letter-spacing: 0; vertical-align: .2em; white-space: nowrap; }

/* ---------- Logo: exactly as on the live site (its measured nudges kept) ---------- */
.marca { --marca-t: 20px; display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--acao-h-toque); color: var(--texto); text-decoration: none; }
.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: 6px; background-color: var(--escuro-destaque); background-image: var(--marca-fundo); color: var(--escuro-fundo); }
.marca__m { display: inline-flex; align-items: baseline; font: 400 calc(var(--marca-t) * 1.3)/1 var(--fonte-titulo); letter-spacing: -.03em; transform: translate(-.007em, .02em); }
.marca__ponto { display: inline-block; width: .13em; height: .13em; margin-left: .03em; background: currentColor; }
.marca__texto { display: inline-flex; align-items: baseline; gap: var(--sp-3); font-size: var(--marca-t); transform: translateY(.011em); }
.marca__nome { font: 400 calc(var(--marca-t) * 1.35)/1 var(--fonte-titulo); font: 400 round(calc(var(--marca-t) * 1.35), 1px)/1 var(--fonte-titulo); letter-spacing: -.02em; }
.marca__sub { margin-left: calc(var(--sp-3) * -.5); font: 600 calc(var(--marca-t) * .5)/1 "Instrument Sans", var(--fonte-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--texto-2); }
.marca--rodape { --marca-t: 24px; }

/* ---------- Header: a slim bar on the page ground, small links, Entrar outlined, the call filled ---------- */
/* The announcement line (Nayara 2026-10-02): one line, a slow ticker moving right to left on every width, the items far
   apart with no dot between them; each item is ONE link, the whole phrase and its arrow. The track holds the item set
   several times (build.py, AVISO_COPIAS; site.js adds copies on a wider screen) in two identical halves, so the loop never
   shows a gap; site.js sets its duration from the track's measured width and --aviso-vel, so the speed is the same on
   every width. WCAG 2.2.2: it pauses on hover, on focus inside, off screen and in a hidden tab (site.js); closing it is the
   "hide" the criterion accepts (no pause button: her verdict). Under reduced motion it does not move and shows the first
   item only. */
.aviso { overflow: hidden; font-size: var(--tx-nota); line-height: var(--lx-nota); transition: height var(--dur-troca) var(--curva-padrao); }
.aviso__linha { position: relative; display: flex; align-items: center; height: var(--aviso-h); }
.aviso__faixa { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--aviso-borda), #000 calc(100% - var(--aviso-borda)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--aviso-borda), #000 calc(100% - var(--aviso-borda)), transparent); }
.aviso__trilho { display: flex; width: max-content; animation: aviso-corre var(--dur-aviso) linear infinite; }
.aviso__itens { display: flex; flex: none; }
.aviso__itens li { display: flex; align-items: center; padding-inline: var(--aviso-vao); white-space: nowrap; }
.aviso__itens a { display: inline-flex; align-items: center; min-height: var(--aviso-h); gap: var(--sp-2); color: var(--texto); text-decoration: none; }
.aviso__texto { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-micro) var(--curva-saida); }   /* the hover underline runs under the whole phrase */
.aviso__itens a:hover .aviso__texto, .aviso__itens a:focus-visible .aviso__texto { background-size: 100% 1px; }
.aviso__itens .seta { transition: transform var(--dur-hover) var(--curva-saida); }
.aviso__itens a:hover .seta, .aviso__itens a:focus-visible .seta { transform: translateX(3px); }
.aviso__destaque { color: var(--destaque); font-weight: var(--peso-ui); }   /* the logo's light blue (--blue-400 on the dark bar) */
@keyframes aviso-corre { to { transform: translateX(-50%); } }
.aviso:hover .aviso__trilho, .aviso:focus-within .aviso__trilho, .aviso.is-fora .aviso__trilho { animation-play-state: paused; }
.aviso__fechar { flex: none; display: grid; place-items: center; width: var(--aviso-h); height: var(--aviso-h); padding: 0; border: 0; border-radius: var(--raio-acao); background: none; color: var(--suave); cursor: pointer; }
.aviso__fechar:hover { color: var(--texto); }
.aviso.is-fechando { height: 0; }
.sem-aviso .aviso { display: none; }
.topo { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: var(--fundo); border-bottom: 1px solid var(--linha); }
.topo__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-6); min-height: var(--topo-h); }
.topo__nav { display: flex; align-items: center; gap: var(--sp-1); }
.topo__nav > a, .sol > summary { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-8); padding: 0 var(--sp-3); border-radius: var(--raio-acao); color: var(--texto-2); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); text-decoration: none; cursor: pointer; list-style: none; transition: color var(--dur-hover); }
.topo__nav > a:hover, .sol > summary:hover, .sol[open] > summary { color: var(--texto); background: var(--fundo-2); }
.topo__nav > a[aria-current="page"], .sol > summary.is-atual { color: var(--texto); }
.sol > summary::-webkit-details-marker { display: none; }
.sol[open] .icone--chevron { rotate: 180deg; }
.topo__acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.topo__acoes--lite { grid-column: 3; }   /* Mesa Lite's header has no nav: the action keeps the right column */
/* The mega-menu (RULES §5, Nayara 2026-10-02, after harvey.ai's Platform menu): a full-width panel under the header, on the
   second ground, equal padding above and below; on the 12-column grid, the items in two columns over columns 1 to 8 and one
   featured card over 9 to 12. The open trigger loses its fill and draws a 1px underline; the chevron turns up. */
.sol > summary { position: relative; }
.sol > summary::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-micro) var(--curva-saida); }
.sol[open] > summary { background: none; }
.sol[open] > summary::after { transform: none; }
.sol .icone--chevron { transition: rotate var(--dur-micro) var(--curva-padrao); }
.sol__painel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; padding-block: var(--sp-12); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--fundo-2); box-shadow: var(--sombra-menu); }
.sol__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: start; }
.sol__itens { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); row-gap: var(--sp-8); }
/* An item: no icon, no border, no fill; the title underlines and the arrow slides in on hover and focus. */
.item-nav.sol__item { gap: var(--sp-1); align-content: start; min-height: 0; padding: 0 calc(var(--icone-texto) + var(--sp-3)) 0 0; border-radius: 0; background: none; }
.sol__item b { font-size: var(--tx-item); line-height: var(--lx-item); }
.sol__item > span { font-size: var(--tx-ui); line-height: var(--lx-ui); }
.sol__item .item-nav__seta { right: 0; top: calc(var(--lx-item) / 2); }
.sol__item[aria-current="page"] b { text-decoration-color: currentColor; }
/* The featured card: the featured panel's navy grain (the home's Agentes panel), its picture the agentes page's concept
   card, then the title in the accent, the blue pill and one line. The whole card is the link. */
.sol__destaque { grid-column: 9 / -1; display: grid; gap: var(--gap-interno); padding: var(--sp-6); border-radius: var(--raio-quadro); background: var(--vitrine-textura); color: var(--texto); text-decoration: none; }
.sol__quadro { display: grid; justify-items: start; gap: var(--gap-componente); margin-bottom: calc(var(--gap-componente) - var(--gap-interno)); }
.sol__quadro .selo-desenho { margin-left: 0; }
.sol__destaque-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sol__destaque-cab b { font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover); }
.sol__destaque:hover .sol__destaque-cab b, .sol__destaque:focus-visible .sol__destaque-cab b { text-decoration-color: currentColor; }
.sol__destaque-linha { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }   /* --texto-2 on the grain: AA (6.4:1), the muted one would not be */
/* ONE navigation item (build.py item_nav): the Módulos dropdown and the end-of-page block use the same markup and style.
   The whole item is the link: a title, a one-line description, and an arrow that slides in on hover and focus. */
.item-nav { position: relative; display: grid; gap: 2px; align-content: center; min-height: var(--acao-h-toque); padding: var(--sp-3) calc(var(--sp-3) + var(--icone) + var(--sp-3)) var(--sp-3) var(--sp-3); border-radius: var(--raio-acao); color: var(--texto); text-decoration: none; transition: background-color var(--dur-hover); }
.item-nav b { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover); }
.item-nav span { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.item-nav b .selo-desenho { font-size: var(--tx-selo); line-height: 1; color: var(--destaque); text-decoration: none; }   /* the one badge style, also inside a nav item */
.item-nav__seta { position: absolute; right: var(--sp-3); top: 50%; translate: -4px -50%; opacity: 0; color: var(--destaque); transition: opacity var(--dur-hover), translate var(--dur-hover) var(--curva-saida); }
.item-nav:hover, .item-nav:focus-visible, .item-nav[aria-current="page"] { background: var(--fundo-2); }
.item-nav:hover b, .item-nav:focus-visible b { text-decoration-color: currentColor; }
.item-nav:hover .item-nav__seta, .item-nav:focus-visible .item-nav__seta { opacity: 1; translate: 0 -50%; }
.menu-movel { display: none; }
.menu-movel > summary { list-style: none; }
.menu-movel > summary::-webkit-details-marker { display: none; }

/* ---------- Hero: left title, right lede and one action, then the product ---------- */
.hero { padding-block: var(--sp-24); }   /* equal above and below its content (RULES.md #1) */
.hero__texto { display: grid; gap: var(--gap-componente); }
.hero__selo { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--suave); }
.hero__sub { font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--suave); max-width: 60ch; }
/* The home: the title on 8 of 12 columns, big and tight; the lede and one action on the other 4, centred against it. */
.hero--centro .hero__texto { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); row-gap: var(--gap-componente); }
.hero--centro .hero__selo { grid-column: 1 / -1; }
.hero--centro h1 { grid-column: 1 / span 8; font-size: var(--tx-hero-home); line-height: var(--lx-hero); letter-spacing: var(--trk-hero); }
.hero__lado { grid-column: 9 / span 4; align-self: center; display: grid; gap: var(--sp-6); justify-items: start; }
/* Home hero (2026-10-01): the actions sit under the title, in its column; the subtitle and the checks hold the right
   column, the subtitle level with the title's last line. One primary, the Raio-X as a link. */
.hero--centro .hero__sub { grid-column: 9 / span 4; grid-row: 2; align-self: end; font-size: var(--tx-corpo); line-height: var(--lx-corpo); }   /* the subtitle at the actions' label size: one constrained block */
.hero--centro .hero__acoes { grid-column: 1 / span 8; grid-row: 3; align-self: end; align-items: center; column-gap: var(--sp-6); margin-top: calc(var(--sp-8) - var(--gap-componente)); }
.hero--centro .hero__provas { grid-column: 9 / span 4; grid-row: 3; align-self: end; margin-top: calc(var(--sp-8) - var(--gap-componente)); }
.hero--centro .hero__provas { display: grid; gap: var(--sp-1); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.hero__provas li { display: flex; align-items: center; gap: var(--sp-2); }
.h1-quebra { display: none; }
.hero--pagina .hero__texto { max-width: calc(var(--medida) + var(--sp-24)); }
.hero--lite .hero__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); row-gap: var(--sp-12); align-items: start; }   /* Mesa Lite: the promise and the form beside its picture */
@media (max-width: 960px) { .hero--lite .hero__grade { grid-template-columns: minmax(0, 1fr); } }
.hero + .secao > .wrap { padding-top: 0; }   /* RULES.md exception 1: a hero and the section after it share one edge; the hero's bottom padding is the space between */
.secao.continue-secao > .wrap::before { content: none !important; }   /* its own hairline opens it: never two lines */
/* RULES.md exception 3: the block's top hairline is the boundary's divider (the section above gives 128 above it), and its
   own content is centred between its two hairlines; the section gives its bottom padding below the lower hairline. */
.secao + .secao.continue-secao > .wrap { padding-top: 0; }

/* The product: a painterly, grainy panel in our palette (CSS and an SVG noise filter: nothing downloaded),
   holding a realistic app window: dark sidebar, light content, serif title and big numbers. Illustrative data only. */
.quadro-produto { margin: var(--sp-20) 0 0; }
.quadro-produto__painel { padding: var(--sp-16) var(--sp-16) 0; border-radius: var(--raio-quadro); overflow: hidden; background: var(--quadro-textura); }
.app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 480px; border-radius: var(--raio-janela) var(--raio-janela) 0 0; overflow: hidden; box-shadow: var(--sombra-janela); font-family: var(--fonte-texto); font-size: var(--tx-ui); line-height: var(--lx-ui); text-align: left; }
.app__lado { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-5) var(--sp-3); background: var(--escuro-fundo); color: var(--escuro-texto-2); }
.app__marca { margin: 0 var(--sp-2) var(--sp-5); font-family: var(--fonte-titulo); font-size: var(--tx-produto-titulo); line-height: var(--lx-produto-titulo); color: var(--escuro-texto); }
.app__nav { display: grid; gap: 2px; }
.app__nav li { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sp-8); padding: 0 var(--sp-2); border-radius: var(--raio-acao); font-size: var(--tx-nota); }
.app__nav li.is-atual { background: var(--escuro-fundo-2); color: var(--escuro-texto); }
.app__grupo { margin: var(--sp-5) var(--sp-2) var(--sp-1); font-size: var(--tx-selo); line-height: var(--lx-nota); color: var(--escuro-suave); }
.app__conteudo { display: grid; align-content: start; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8) var(--sp-8); background: var(--app-fundo); color: var(--app-texto); }
.app__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.app__titulo { font-family: var(--fonte-titulo); font-size: var(--tx-produto-titulo); line-height: var(--lx-produto-titulo); letter-spacing: var(--trk-titulo); }
.app__botao { display: inline-flex; align-items: center; height: var(--sp-8); padding: 0 var(--sp-3); border-radius: var(--raio-acao); background: var(--app-texto); color: var(--app-fundo); font-size: var(--tx-nota); font-weight: var(--peso-ui); }
.app__dica { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--app-linha); border-radius: var(--raio-acao); background: var(--app-fundo-2); color: var(--app-texto-2); font-size: var(--tx-nota); }
.app__dica b { font-weight: var(--peso-ui); color: var(--app-texto); }
.app__dica-acao { margin-left: auto; color: var(--app-destaque); font-weight: var(--peso-ui); }
.app__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.app__card { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--app-linha); border-radius: var(--raio-janela); background: var(--app-fundo); }
.app__card-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); color: var(--app-suave); font-size: var(--tx-nota); }
.app__pilulas { display: flex; gap: var(--sp-1); }
.app__pilula { display: inline-flex; align-items: center; height: var(--sp-6); padding: 0 var(--sp-2); border: 1px solid var(--app-linha); border-radius: var(--raio-acao); color: var(--app-texto-2); font-size: var(--tx-selo); white-space: nowrap; }
.app__numero { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-family: var(--fonte-titulo); font-size: var(--tx-produto-numero); line-height: var(--lx-produto-numero); color: var(--app-texto); font-variant-numeric: tabular-nums; }
.app__delta { font-family: var(--fonte-texto); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--app-suave); }
.app__colunas { display: flex; align-items: stretch; gap: var(--sp-3); height: 112px; }
.app__colunas li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-1); }
.app__colunas li::before { content: ""; flex: 0 1 var(--h); border-top: 1px solid var(--app-suave); background: rgba(42, 91, 215, 0.1); background: color-mix(in srgb, var(--app-destaque) 10%, transparent); }
.app__colunas li.is-atual::before { border-top-color: var(--app-destaque); background: rgba(42, 91, 215, 0.22); background: color-mix(in srgb, var(--app-destaque) 22%, transparent); }
.app__colunas span { font-size: var(--tx-selo); line-height: var(--lx-nota); color: var(--app-suave); text-align: center; }
.app__barras { display: grid; gap: var(--sp-2); }
.app__barras li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); font-size: var(--tx-nota); color: var(--app-texto-2); }
.app__barras i { height: 2px; width: var(--w); background: var(--app-texto); }
.app__barras b { font-weight: var(--peso-ui); color: var(--app-texto); font-variant-numeric: tabular-nums; }

/* ---------- Como funciona: the example (como-funciona.html#exemplo) ----------
   Desktop: the roles as an accordion on the left 4 columns (one open at a time: its points and its link), the product frame
   on the right 8, sticky, switching with the role, so the explanation always sits beside what it explains.
   Phones: a segmented switcher, then the open role's points, then the frame. */
.demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: start; }
.demo__papeis { display: none; }
.demo__lista { grid-column: 1 / span 4; }   /* the roles: an .acordeao (see Acordeão), one open at a time (site.js) */
.demo__palco { grid-column: 5 / -1; position: sticky; top: calc(var(--topo-h) + var(--sp-6)); display: grid; }   /* the frame, then its caption (16, its own rule) */
.demo__quadro { padding-bottom: var(--sp-16); border-radius: var(--raio-quadro); }
.app--demo { min-height: 640px; border-radius: var(--raio-janela); }
.app__nav--botoes { display: grid; gap: 2px; }
.app__nav--botoes button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--sp-8); padding: 0 var(--sp-2); border: 0; border-radius: var(--raio-acao); background: none; color: var(--escuro-texto-2); font-size: var(--tx-nota); text-align: left; cursor: pointer; }
.app__nav--botoes button:hover:not(:disabled) { color: var(--escuro-texto); background: rgba(26, 30, 36, 0.6); background: color-mix(in srgb, var(--escuro-fundo-2) 60%, transparent); }
.app__nav--botoes button[aria-pressed="true"] { background: var(--escuro-fundo-2); color: var(--escuro-texto); }
.app__nav--botoes button:disabled { cursor: not-allowed; color: var(--escuro-suave); }
.app__nav--botoes .selo-desenho { margin-left: auto; color: var(--escuro-destaque); }
.app--demo .app__conteudo { align-content: start; }
.demo__vista { display: grid; gap: var(--sp-4); align-content: start; }
.demo__vista[hidden], .demo__mesa[hidden], .demo__texto[hidden] { display: none; }
.demo__figura { margin: 0; }
.demo__figura .legenda { color: var(--muted); }   /* inside the demo's app: the product's muted ink; the distance is the one rule's */
.demo-tabela { padding: var(--sp-4); overflow-x: auto; }
.demo-tabela caption { padding-bottom: var(--sp-3); text-align: left; caption-side: top; }
.demo-tabela th button { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--sp-8); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.demo-tabela th button::after { content: ""; width: var(--icone-ui); height: var(--icone-ui); background: var(--muted); -webkit-mask: url("icons/arrow-up-down.svg") center / contain no-repeat; mask: url("icons/arrow-up-down.svg") center / contain no-repeat; }
.demo-tabela th[aria-sort="ascending"] button::after { background: var(--ink); -webkit-mask-image: url("icons/arrow-up.svg"); mask-image: url("icons/arrow-up.svg"); }
.demo-tabela th[aria-sort="descending"] button::after { background: var(--ink); -webkit-mask-image: url("icons/arrow-down.svg"); mask-image: url("icons/arrow-down.svg"); }
.demo-tabela__proc { font-family: var(--mono); font-size: var(--t-sm); }
.exemplo-chamada { align-items: end; }
.exemplo-chamada .secao__cab { margin-bottom: 0; }
.exemplo-chamada__lado { display: grid; gap: var(--gap-componente); justify-items: start; }
.demo__papeis { padding: var(--sp-1); gap: var(--sp-1); border: 1px solid var(--linha); border-radius: var(--raio-acao); background: var(--fundo-2); }
.demo__papeis button { min-height: var(--acao-h-toque); padding: 0 var(--sp-2); border: 0; border-radius: var(--raio-acao); background: none; color: var(--texto-2); font-size: var(--tx-ui); font-weight: var(--peso-ui); cursor: pointer; }
.demo__papeis button[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }

/* ---------- Sections: generous, one rule between two of the same ground ---------- */
.secao > .wrap { position: relative; padding-block: var(--secao-y); }   /* RULES.md #1: equal above and below */
/* The rule sits on the content box (gutter to gutter), never edge to edge, exactly at the boundary: the section padding
   above it (the section before) and below it (this one) are equal. */
.secao:not([data-tema]) + .secao:not([data-tema]) > .wrap::before, .secao[data-tema] + .secao[data-tema] > .wrap::before { content: ""; position: absolute; top: 0; left: var(--calha); right: var(--calha); height: 1px; background: var(--linha); }
.secao--colada > .wrap { padding-top: 0; }
.secao__cab { display: grid; gap: var(--titulo-intro); max-width: var(--medida); margin-bottom: var(--cab-conteudo); }
.secao__cab:last-child { margin-bottom: 0; }   /* a head alone in its section: the section padding is the space below */
.secao__cab > .rotulo + h2 { margin-top: calc(var(--sp-3) - var(--titulo-intro)); }   /* eyebrow 12 above the bigger H2 */
.secao__intro { max-width: 60ch; font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--suave); }
.secao__intro a { color: var(--destaque); }
.duas { align-items: start; }
.duas > .secao__cab { margin-bottom: 0; }
.card { display: grid; gap: var(--gap-interno); align-content: start; color: var(--texto); text-decoration: none; min-width: 0; }
.card p { color: var(--texto-2); }

/* End of page: where to go next. One primary step (left 8 of 12 columns) and two secondary links (right 4), top-aligned,
   separated by hairlines. The whole row is the link; arrows always visible; hover tints and moves the arrow (transform only). */
.seguir { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: stretch; border-block: 1px solid var(--linha); }
.seguir__principal { grid-column: 1 / span 8; position: relative; display: grid; align-content: start; gap: var(--gap-interno); padding: var(--sp-8) var(--sp-16) var(--sp-8) 0; color: var(--texto); text-decoration: none; transition: background-color var(--dur-micro); }
.seguir__principal .rotulo { color: var(--suave); }
.seguir__secundarios { grid-column: 9 / span 4; display: grid; align-content: start; border-left: 1px solid var(--linha); margin-left: calc(var(--gap-grade) / -2); }
.seguir__item { position: relative; display: grid; align-content: center; gap: 2px; min-height: 56px; padding: var(--sp-4) var(--sp-10) var(--sp-4) calc(var(--gap-grade) / 2); color: var(--texto); text-decoration: none; transition: background-color var(--dur-micro); }
.seguir__item + .seguir__item { border-top: 1px solid var(--linha); }
.seguir__titulo { font-size: var(--tx-corpo); line-height: var(--lx-corpo); font-weight: var(--peso-ui); }
.seguir__linha { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.seguir__principal .seguir__linha { font-size: var(--tx-corpo); line-height: var(--lx-corpo); color: var(--texto-2); }
.seguir__seta { position: absolute; right: var(--sp-4); top: 50%; translate: 0 -50%; color: var(--texto); transition: transform var(--dur-micro) var(--curva-saida); }
.seguir__item .seguir__seta { color: var(--suave); }
.seguir__principal:hover, .seguir__principal:focus-visible, .seguir__item:hover, .seguir__item:focus-visible { background: var(--fundo-2); }
.seguir__principal:hover .seguir__seta, .seguir__principal:focus-visible .seguir__seta, .seguir__item:hover .seguir__seta, .seguir__item:focus-visible .seguir__seta { transform: translateX(4px); }

/* ---------- Raio-X da carteira (raio-x.html): the questions, the gate, the laudo ----------
   One centred column (Nayara 2026-10-02: "centre it all, very centred"): the question, the answers, then one quiet row,
   Voltar on its left and the counter "01 / 06" in its centre; no top bar, no progress line, no key numbers on the answers
   (the keys 1, 2 and 3 still answer). The column is the middle 8 of the 12 columns, centred in the screen. Every slot keeps
   its size, so nothing moves when you answer: the question block holds 3 lines (its text sits at the bottom, on the
   answers), the answers never change size, Voltar keeps its place (visibility). */
.rx-palco { display: grid; align-items: center; min-height: calc(100vh - var(--topo-h)); min-height: calc(100svh - var(--topo-h)); padding-block: var(--sp-16); }
.rx-palco > .wrap { width: 100%; }   /* a grid item with auto margins would shrink to its content and move with it */
.rx-palco[hidden], .rx-resultado[hidden], .rx-tela[hidden] { display: none; }
.rx-palco > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); }
.rx-tela { grid-column: 3 / span 8; display: grid; gap: var(--sp-8); }
.pagina-foco .rx-tela { margin-block: auto; }   /* centred in the question area; on a screen too short it starts at the top and the area scrolls */
.rx-tela__baixo { display: grid; gap: var(--gap-componente); }
.rx-pilha { display: grid; }
.rx-pilha > * { grid-area: 1 / 1; }
.rx-pilha > [inert] { visibility: hidden; }
.rx-anima { transition: opacity var(--dur-troca) var(--curva-saida), transform var(--dur-troca) var(--curva-saida); }
.rx-contador { grid-column: 2; font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); text-align: center; font-variant-numeric: tabular-nums; }
.rx-contador__janela { display: inline-block; overflow: hidden; vertical-align: bottom; height: var(--lx-nota); }
.rx-contador__n { display: inline-block; transition: transform var(--dur-micro) var(--curva-saida), opacity var(--dur-micro); }
.rx-rola-sai { transform: translateY(-100%); opacity: 0; }
.rx-rola-entra { transform: translateY(100%); opacity: 0; transition: none; }
.rx-sai { opacity: 0; transform: translateY(-8px); }
.rx-entra { opacity: 0; transform: translateY(8px); transition: none; }
.rx-q { display: flex; flex-direction: column; justify-content: flex-end; max-width: 26ch;   /* every question on 2 or 3 lines at 1440 (the shortest, 42 characters, breaks; the longest, 86, fits 3) */ min-height: calc(var(--tx-titulo) * var(--lx-titulo) * 3); margin-inline: auto; text-align: center; outline: none; text-wrap: balance; }
.rx-respostas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.rx-resposta { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 64px; padding: 0 var(--sp-5); border: 1px solid var(--linha); border-radius: var(--raio-quadro); background: var(--fundo); color: var(--texto); font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); text-align: center; cursor: pointer;
  transition: transform var(--dur-micro) var(--curva-saida), border-color var(--dur-micro), background-color var(--dur-micro); }
.rx-resposta__ponto { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--suave); border-radius: 50%; }
.rx-resposta__ponto::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fundo); transform: scale(0); transition: transform var(--dur-micro) var(--curva-saida); }
.rx-resposta:hover { transform: translateY(-2px); border-color: #8c9ecf; border-color: color-mix(in srgb, var(--destaque) 45%, var(--linha)); }
.rx-resposta:active { transform: translateY(0) scale(.99); }
.rx-resposta[aria-checked="true"] { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.rx-resposta[aria-checked="true"] .rx-resposta__ponto { border-color: var(--fundo); background: var(--fundo); }
.rx-resposta[aria-checked="true"] .rx-resposta__ponto::after { background: var(--texto); transform: scale(1); }
.rx-resposta.is-anterior { box-shadow: 0 0 0 3px rgba(42, 91, 215, 0.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 25%, transparent); }
/* The last row: three equal-sided cells, so the counter is centred on the column whatever Voltar's width. */
.rx-tela__pe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-4); min-height: var(--acao-h-toque); }
.rx-voltar { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--acao-h-toque); padding: 0; border: 0; background: none; color: var(--texto-2); font-size: var(--tx-ui); font-weight: var(--peso-ui); cursor: pointer; }
.rx-voltar:hover { color: var(--texto); }
.rx-voltar__seta { transform: rotate(180deg); }
.rx-tela__pe .rx-contador { grid-row: 1; }
.rx-sem-js { color: var(--suave); }

/* The laudo: a sheet of warm paper on the ground, a hairline structure, the serif title, mono for the date and reference.
   Beside it (desktop), the actions, sticky. */
.laudo-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: start; }
.laudo { position: relative; grid-column: 1 / span 8; display: grid; gap: var(--sp-10); padding: var(--sp-16) var(--sp-12) var(--sp-12); border: 1px solid var(--linha); border-radius: 2px; background: var(--papel); color: var(--texto); }
.laudo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--sombra-papel); pointer-events: none; }   /* the shade on its own layer, so it can grow in */
.laudo__cab { position: relative; display: grid; gap: var(--sp-4); padding-bottom: calc(var(--sp-8) + 3px); }
.laudo__cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-block: 1px solid var(--texto); transform-origin: left; }   /* the double rule, drawable */
.laudo__emissor { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--texto-2); }
.laudo__marca { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background-color: var(--escuro-destaque); background-image: var(--marca-fundo); color: var(--escuro-fundo); font: 400 18px/1 var(--fonte-titulo); }
.laudo__ponto { display: inline-block; align-self: flex-end; width: .13em; height: .13em; margin: 0 0 7px .03em; background: currentColor; }
.laudo__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-2) var(--sp-10); }
.laudo__meta div { display: grid; gap: 2px; }
.laudo__meta dt { font-size: var(--tx-selo); line-height: var(--lx-selo); color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.laudo__meta [data-ref] { min-width: 16ch; }
.laudo__meta dd { min-height: var(--lx-nota); }   /* an empty value (the reference before it types in) keeps its line */   /* the reference types in without moving anything */
.laudo__meta dd { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--texto); }
.laudo__mono { font-family: var(--mono); }
.laudo__parte { display: grid; gap: var(--sp-3); }
.laudo__parte { --laudo-num: var(--sp-10); }
.laudo__parte h3 { display: grid; grid-template-columns: var(--laudo-num) minmax(0, 1fr); align-items: baseline; }   /* a fixed numeral column, on the heading's baseline */
.laudo__parte > :not(h3) { margin-left: var(--laudo-num); }
.laudo__num { font-size: var(--tx-selo); line-height: var(--lx-selo); font-weight: var(--peso-ui); letter-spacing: .08em; color: var(--suave); }   /* the label style */
.laudo__texto p { max-width: 64ch; color: var(--texto-2); }
.laudo__linhas li { display: grid; gap: 2px; padding-block: var(--sp-3); }
.laudo__linhas li + li { border-top: 1px solid var(--linha); }
.laudo__linhas b { font-weight: var(--peso-ui); color: var(--texto); }
.laudo__linhas span { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); }
.laudo__parte--parte b { font-weight: var(--peso-texto); color: var(--texto-2); }
.laudo__linha--modulo a { color: var(--destaque); }
.laudo__linha--vazia b { font-weight: var(--peso-texto); color: var(--suave); }
.laudo__passos { display: grid; gap: var(--sp-2); padding-left: var(--sp-5); list-style: decimal; color: var(--texto-2); }
.laudo__rodape { padding-top: var(--sp-6); border-top: 1px solid var(--linha); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.laudo-acoes { grid-column: 9 / -1; position: sticky; top: calc(var(--topo-h) + var(--sp-6)); display: grid; gap: var(--sp-3); }
.laudo-acoes .btn { width: 100%; }
.laudo-acoes__estado { min-height: var(--lx-nota); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.laudo-acoes__estado:empty { display: none; }
.laudo-acoes__aviso { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--alerta); border-radius: var(--raio-acao); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }
.laudo-acoes__aviso a { color: var(--destaque); font-weight: var(--peso-ui); }   /* only when it has something to say */
.laudo-acoes__refazer { justify-self: start; margin-top: calc(var(--gap-componente) - var(--sp-3)); border: 0; padding: 0; background-color: transparent; font: inherit; font-size: var(--tx-ui); cursor: pointer; }

/* The home's teaser: the head and its one button in the left half; the right half is left empty on purpose (the split
   grid stays, so the left column lines up with every other section). */
.teaser .secao__cab { margin-bottom: 0; }
@media (max-width: 960px) { .teaser__vazio { display: none; } }
.rodape__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.itens__depois { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); }

/* ONE component for every grid of parallel items (steps, modules, security, commitments, phases):
   hairline · 24 · marker (icon 28, number, or none) · 16 · title (the item token) · 8 · body (16/24, muted, 42ch) · 16 · link.
   Variants change only the marker. Items stretch to their row, so the link rows line up at the bottom. The hairlines ARE the dividers. */
.itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-irmaos) var(--gap-grade); align-items: stretch; }
.itens--1 { grid-template-columns: minmax(0, 1fr); }
.itens--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itens--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.itens--seguinte { margin-top: var(--gap-irmaos); }
.itens--depois { margin-top: var(--cab-conteudo); }
.item { display: flex; flex-direction: column; padding-top: var(--sp-6); border-top: 1px solid var(--linha); color: var(--texto); text-decoration: none; min-width: 0; }
.item__marca { width: 28px; height: 28px; margin-bottom: var(--sp-4); color: var(--destaque); }
.item__numero { margin-bottom: var(--sp-4); font-size: var(--tx-ui); line-height: 28px; font-weight: var(--peso-ui); color: var(--suave); font-variant-numeric: tabular-nums; }
.item__titulo { margin: 0; }
.item__texto { margin-top: var(--sp-2); max-width: 42ch; color: var(--texto-2); }
.item__link { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; }
.item__link::before { inset-block: calc(var(--sp-4) - var(--sp-1)) calc(var(--sp-1) * -1); }   /* 16 of padding on top: the hover fill sits on the text, like every .link-seta's */
a.item:hover .item__titulo { color: var(--destaque); }
.itens__depois { margin-top: var(--sp-8); }
.wrap > .rotulo + .itens { margin-top: var(--gap-componente); }   /* a label over a grid of items: the component gap, not on the rule */

/* The verticals: a small product picture, then text */
.verticais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-irmaos) var(--gap-grade); }
.vertical h3 { min-height: calc(var(--lx-item) * 2); }   /* every title holds two lines, so the cards stay level */
.vertical { grid-template-rows: auto auto auto 1fr auto; gap: var(--gap-interno); padding-top: 0; border-top: 0; }   /* picture, role, pain line, questions (take the free height), link: the links line up across the three columns */
.vertical__ilustra { margin-bottom: calc(var(--gap-componente) - var(--gap-interno)); padding: var(--sp-4); border-radius: var(--raio-quadro); background: var(--surface); color: var(--ink); min-height: calc(var(--sp-12) * 3); display: grid; align-content: center; }
.vertical__resp { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); }
.vertical__perguntas { display: grid; gap: var(--sp-3); align-content: start; margin-top: var(--gap-interno); }
.vertical__perguntas li { display: grid; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid var(--linha); }
.vertical__perguntas li:first-child { padding-top: 0; border-top: 0; }
.vertical__perguntas b { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); }
.vertical__perguntas span { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }

/* Steps in order (home and Sobre): numbered text columns */

/* Promises and settings: rows of a bold lead and its sentence */
.compromissos { display: grid; }
.compromissos li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-2) var(--sp-8); padding-block: var(--sp-6); border-top: 1px solid var(--linha); }
.compromissos li:last-child { border-bottom: 1px solid var(--linha); }
.compromissos li > b { font-weight: var(--peso-ui); }
.compromissos li > span { color: var(--texto-2); }

/* Checks: a quiet list */
.lista-check { display: grid; gap: var(--sp-3); }
.lista-check li { position: relative; padding-left: var(--sp-6); color: var(--texto-2); }
.lista-check li::before { position: absolute; left: 0; top: 4px; }
.lista-check li a { color: var(--destaque); }

/* "Como ler este dado": an aside under a thin rule */
.leitura { display: grid; gap: var(--sp-1); margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--linha); max-width: var(--medida); }
.leitura__rot { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--destaque); }
.leitura p:not(.leitura__rot) { color: var(--texto-2); }
.leitura p > b { display: block; color: var(--texto); font-weight: var(--peso-ui); }

/* A solution section: text in one half, its picture in the other; every other one swaps sides */
.solucao { align-items: start; }   /* one vertical alignment for two-column sections: top */
.solucao__texto { display: grid; gap: var(--titulo-intro); align-content: start; }
.solucao__texto > .rotulo + h2 { margin-top: calc(var(--sp-2) - var(--titulo-intro)); }
.solucao--invertida .solucao__texto { order: 2; }
.solucao__visual { min-width: 0; }
.solucao__visual figure { margin: 0; }

/* Product frames on a light ground keep the product's dark look: a screenshot. */
.bloco { border-radius: var(--raio-quadro); }
.bloco--visual { padding: var(--sp-6); }

/* ---------- Experimente: tabs and text on the left, the desk on the right ---------- */
.experimente-grade { align-items: start; }
.experimente__lado { display: grid; gap: var(--sp-6); align-content: start; }
.vistas__seg { justify-self: start; }
.vistas--texto { display: grid; }
.vista--texto h3 { margin: var(--sp-2) 0 var(--sp-4); }
.vista--texto .lista-check { margin-top: var(--sp-4); }
.vista__nota { margin-top: var(--sp-4); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.vista--texto { background: none; border: 0; padding: 0; box-shadow: none; color: var(--texto); }
.experimente { display: grid; gap: var(--sp-3); margin: 0; min-width: 0; }
.vistas { display: grid; }
/* The desk: the space keeps the tallest desk's height (site.js sets --mesa-h), so nothing below moves when the tab changes;
   each desk card is only as tall as its content and sits centred in that space, so no card shows an empty bottom. */
.vistas-js .experimente .vistas { position: relative; min-height: var(--mesa-h, auto); align-content: center; }
.vistas-js .experimente .vista:not(.is-ativa) { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.vistas-js .vista { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--dur-hover), visibility 0s linear var(--dur-hover); }
.vistas-js .vista.is-ativa { opacity: 1; visibility: visible; transition: opacity var(--dur-entrada) var(--curva-saida); }
.vistas-js .vista.sem-transicao { transition: none; }
.vista__rot { margin: var(--sp-4) 0 var(--sp-2); }
.bloco .rotulo { font-size: var(--t-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-weight: var(--w-semibold); }
.bloco .meta, .bloco .legenda { color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-sm); }

/* ---------- The proof: plain numbers beside the map ---------- */
.prova-mapa { margin-top: 0; align-items: stretch; }
.prova-numeros { background: none; border: 0; border-top: 1px solid var(--linha); border-radius: 0; padding: var(--sp-6) 0 0; color: var(--texto); }
.prova-numeros .rotulo { color: var(--suave); text-transform: none; letter-spacing: var(--trk-ui); font-size: var(--tx-ui); font-weight: var(--peso-ui); }
.prova-numeros__lista > div { display: grid; grid-template-columns: calc(var(--sp-16) * 2) minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; padding-block: var(--sp-5); border-top: 1px solid var(--linha); }
.prova-numeros__lista dt { font-family: var(--fonte-titulo); font-size: var(--tx-numero); line-height: var(--lx-numero); font-weight: 400; color: var(--texto); }
.prova-numeros__lista dd { color: var(--texto-2); }
.mapa-int { padding: var(--sp-8); }

/* ---------- Acordeão: the one collapsible list (RULES.md §5; Nayara 2026-10-02: "use these items in our system") ----------
   Items under hairlines (the list's top rule, then one under each item). Each item: a header row, the title (item size,
   500) and a chevron at the right edge, on the first line, 64px tall at least; a body that opens under it: an optional one-line subtitle
   (.acordeao__linha, body size, in ink), then the content. Closed titles in the secondary ink; hover and open in the ink.
   The chevron turns 180° (rotate, 240ms, the standard curve); reduced motion shows it turned at once. Focus: the site's ring.
   Two markups, one look: <details class="acordeao__item"> + <summary class="acordeao__cab"> (the FAQs: native, several
   open), or <div class="acordeao__item"> + <h3><button class="acordeao__cab" aria-expanded aria-controls> (como-funciona's
   roles: one open at a time, driving the demo; site.js marks the open item .is-aberto). */
.acordeao { display: grid; border-top: 1px solid var(--linha); }
.acordeao__item { border-bottom: 1px solid var(--linha); }
.acordeao__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); width: 100%; min-height: var(--sp-16); padding: var(--sp-5) 0; border: 0; background: none; color: var(--texto-2); font-family: var(--fonte-texto); font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); letter-spacing: var(--trk-ui); text-align: left; cursor: pointer; list-style: none; transition: color var(--dur-micro); }
.acordeao__cab::-webkit-details-marker { display: none; }
.acordeao__cab:hover, .acordeao__item[open] > .acordeao__cab, .acordeao__cab[aria-expanded="true"] { color: var(--texto); }
.acordeao__chevron { flex: none; margin-top: calc((var(--lx-item) - var(--icone-texto)) / 2); color: var(--suave); transition: rotate var(--dur-troca) var(--curva-padrao), color var(--dur-micro); }
.acordeao__cab:hover .acordeao__chevron { color: var(--texto); }
.acordeao__item[open] > .acordeao__cab .acordeao__chevron, .acordeao__cab[aria-expanded="true"] .acordeao__chevron { rotate: 180deg; }
.acordeao__corpo { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.acordeao__corpo[hidden] { display: none; }
.acordeao__linha { font-size: var(--tx-corpo); line-height: var(--lx-corpo); color: var(--texto); }
.acordeao__corpo > p:not(.acordeao__linha) { max-width: var(--medida); color: var(--texto-2); }
.secao__cab--centro { max-width: var(--medida); }
/* A centred head on the navy grain, full width (home Raio-X, 2026-10-01): the site's drama surface, AA on its darkest and
   lightest point; the action in its inverse (light) style. */
.secao--textura { background: var(--vitrine-textura); }
.secao--textura .secao__intro, .vitrine .secao__intro { color: var(--texto-2); }   /* the grain lightens to slate-blue: the softer ink keeps AA there (6.4:1), the muted one would not (3.7:1) */
.secao__cab--centrado { justify-items: center; margin-inline: auto; text-align: center; }
.secao__cab--centrado .secao__intro { margin-inline: auto; }
.secao__cab--centrado .teaser__cta { justify-self: center; }

/* RULES.md exception 4: a dark last section ends on its own hairline (FAQ, documents); the footer's call follows on the same
   ground, 64 below that hairline and 64 above its own: the hairline is the divider, centred. */
main:has(> .secao:last-of-type[data-tema="escuro"]) > .secao:last-of-type[data-tema="escuro"] > .wrap { padding-bottom: max(0px, calc(var(--secao-y) - var(--sp-16))); }   /* with the call's own top padding, --secao-y in all */

/* ---------- Footer: always dark, the call attached on top (harvey.ai), a hairline, the mark and four link columns ---------- */
.rodape__chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--gap-grade); padding-block: var(--sp-16); }   /* equal above and below; the hairline below sits halfway between it and the grid */
.rodape__grade { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); padding-block: var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom)); }
.rodape__grade::before { content: ""; position: absolute; top: 0; left: var(--calha); right: var(--calha); height: 1px; background: var(--linha); }
.rodape--sem-chamada .rodape__grade::before { content: none; }   /* at a change of ground, no line */
.rodape__marca { grid-column: 1 / span 3; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-6); }
.sem-quebra { white-space: nowrap; }
.marca--rodape { --marca-t: 24px; align-self: flex-start; justify-self: start; min-height: var(--acao-h-toque); min-width: var(--acao-h-toque); }
.rodape__base { display: grid; gap: var(--sp-1); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.rodape__colunas { grid-column: 4 / -1; display: grid; grid-template-columns: max-content repeat(3, minmax(0, 1fr));   /* Módulos takes its longest line (label and badge on one line) */ gap: var(--sp-10) var(--sp-8); }
.rodape__col { display: grid; align-content: start; }
.rodape__col .rotulo { margin-bottom: var(--sp-2); color: var(--suave); }
.rodape__col a { display: flex; align-items: center; min-height: 36px; font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-micro); overflow-wrap: anywhere; }
.rodape__col a:hover { text-decoration-color: currentColor; }
.rodape__col a:has(.selo-desenho) { flex-wrap: nowrap; column-gap: var(--sp-2); white-space: nowrap; }
@supports not selector(:has(a)) { .rodape__col a .selo-desenho { margin-left: var(--sp-2); } }   /* older browsers: the badge keeps its gap */   /* label and badge on one line, the badge centred on it; never wraps */
.rodape__col .selo-desenho { margin-left: 0; }

/* ---------- Security: an icon grid, and a split list of documents ---------- */
.docs { align-items: start; }
.docs__texto { display: grid; gap: var(--gap-componente); justify-items: start; }
.docs__texto .rotulo + .docs__titulo { margin-top: calc(var(--gap-interno) - var(--gap-componente)); }
.docs__intro { font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--suave); max-width: 60ch; }   /* the section-subtitle token, as .secao__intro */
.docs__lista { border-top: 1px solid var(--linha); }
.docs__lista li { border-bottom: 1px solid var(--linha); }
.doc-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-5); min-height: 92px; padding: var(--sp-4) var(--sp-3); color: var(--texto); text-decoration: none; transition: background-color var(--dur-micro); }
.doc-linha .icone { color: var(--suave); }
.doc-linha__nome { display: grid; font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); }
.doc-linha__sub { font-size: var(--tx-nota); line-height: var(--lx-nota); font-weight: var(--peso-texto); color: var(--suave); }
.doc-linha__mais { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--tx-ui); color: var(--suave); white-space: nowrap; }
.doc-linha:hover, .doc-linha:focus-visible { background: var(--fundo-2); }
.doc-linha:hover .doc-linha__mais { color: var(--texto); }
.doc-linha:hover .seta, .doc-linha:focus-visible .seta { transform: translateX(3px); }

/* ---------- Page parts ---------- */
/* Como trabalhamos: each stage a row on the four columns */
.etapas { display: grid; }
.etapa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--gap-grade); padding-block: var(--sp-12); border-top: 1px solid var(--linha); }
.etapa:last-child { padding-bottom: 0; }
.etapa__cab { display: grid; gap: var(--sp-2); align-content: start; }
.etapa__resumo { color: var(--texto-2); }
/* Dinheiro (2026-10-01): each phase carries the panel's own figure and colour key, so the story maps onto the panel. */
.etapa__valor { display: block; }
.etapa__valor .chave { margin-right: var(--sp-2); vertical-align: .05em; }
.etapa__valor b { font-weight: var(--peso-ui); color: var(--texto); font-variant-numeric: tabular-nums; }
.etapa__valor .badge { margin-left: var(--sp-2); vertical-align: .1em; }
.guia { display: grid; gap: var(--gap-componente); margin-top: var(--gap-irmaos); padding-top: var(--gap-componente); border-top: 1px solid var(--linha); }   /* a reading guide: the phases' labelled parts, under the intro */
.guia dt { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--suave); }
.guia dd { margin-top: var(--sp-1); color: var(--texto-2); }
.tomador__seg { margin-left: var(--sp-1); font-size: var(--t-sm); color: var(--muted); }
.etapa__detalhe { display: block; padding-left: calc(var(--dot) + var(--sp-2)); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); }   /* under the figure, in line with it */
.etapa__itens { display: contents; }
.etapa__itens > div { min-width: 0; padding-top: calc(var(--lx-ui) + var(--sp-2)); }   /* the label starts level with the step's title */
@media (max-width: 960px) { .etapa__itens > div { padding-top: 0; } }   /* stacked: no title to line up with */
.etapa__itens dt { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--suave); }
.etapa__itens dd { margin-top: var(--sp-1); color: var(--texto-2); }

/* Diagnóstico */
.checks { display: grid; gap: var(--sp-3); }
.checks li { position: relative; padding-left: var(--sp-6); color: var(--texto-2); }
.checks li::before { position: absolute; left: 0; top: 4px; }
.oferta-lista { display: grid; gap: var(--sp-4); align-content: start; }
.bloco.oferta-lista { padding: 0; border: 0; border-radius: 0; background: none; color: var(--texto); }   /* an offer is text, not a product frame */
.limites { display: grid; border-top: 1px solid var(--linha); }
.limites li { padding-block: var(--sp-5); border-bottom: 1px solid var(--linha); color: var(--texto-2); }
.limites li b { color: var(--texto); font-weight: var(--peso-ui); }

/* Segurança: facts as a two-column definition grid */
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-irmaos) var(--gap-grade); }
.fatos > div { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-6); border-top: 1px solid var(--linha); }
.fatos dt { font-weight: var(--peso-ui); }
.fatos dd { color: var(--texto-2); }

/* Sobre: pains paired with answers */
.pares { display: grid; }
/* Sobre: pains paired with answers, on the same two tracks as their column labels (equal halves, tops aligned). */
.par-cab { padding-bottom: var(--gap-interno); }
.par { align-items: start; padding-block: var(--sp-6); border-top: 1px solid var(--linha); }
.par:last-child { padding-bottom: 0; }   /* the last row gives its bottom padding to the section (RULES #1: equal above and below) */
.par-cab, .par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); }
.par__dor { font-size: var(--tx-item); line-height: var(--lx-item); font-weight: var(--peso-ui); }
.par__resp { display: grid; gap: var(--gap-interno); justify-items: start; }
/* A link after text sits one component gap below it (16), never glued to it. */
:is(.vertical, .par__resp) > .link-seta { margin-top: calc(var(--gap-componente) - var(--gap-interno)); }
.par__resp > p { color: var(--texto-2); }
.nota-docs { margin-top: var(--sp-6); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }

/* Financeiro (dinheiro.html): the wide money card is a product frame; its groups read on the frame */
.financeiro { padding: var(--sp-8); }

/* Administrativo: the demand's flow sits in a product frame */
.fluxo { color: var(--ink); }

/* ---------- Contato: the channels beside the form ---------- */
/* Contact (2026-10-01): what to include and the direct channels side by side on top, then the form on the grid. */
.contato { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); row-gap: var(--gap-irmaos); }
.contato > * { grid-column: 1 / -1; }
.contato__topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); row-gap: var(--gap-irmaos); align-items: start; }
.contato__bloco { display: grid; gap: var(--gap-componente); align-content: start; }
.contato > .form-cartao, .contato > .contato__canais { grid-column: 1 / span 8; }
@media (max-width: 960px) { .contato { grid-template-columns: minmax(0, 1fr); } .contato > .form-cartao, .contato > .contato__canais { grid-column: 1; } }   /* one column: twelve gaps never fit a phone */
@media (max-width: 640px) { .contato__topo { grid-template-columns: minmax(0, 1fr); } }
.contato__nota { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.canais { display: grid; border-top: 1px solid var(--linha); }
.canais li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-3); align-items: center; min-height: var(--sp-12); border-bottom: 1px solid var(--linha); }
.canais__rot { font-size: var(--tx-ui); color: var(--suave); }
.canais a { display: inline-flex; align-items: center; min-height: var(--acao-h-toque); overflow-wrap: anywhere; }
.form-cartao { padding: var(--sp-8); border: 1px solid var(--linha); border-radius: var(--raio-quadro); background: var(--fundo); color: var(--texto); }
.form__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
.form__campo { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.form__campo--largo { grid-column: 1 / -1; }
.form__campo > label, .form__legenda { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); }
.form__obrig { color: var(--destaque); }
.form__opc, .form__ajuda { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); font-weight: var(--peso-texto); }
.form .input, .form .select { width: 100%; min-height: var(--acao-h-toque); padding: 0 var(--sp-3); border: 1px solid var(--linha); border-radius: var(--raio-acao); background: var(--fundo); color: var(--texto); font-size: var(--tx-corpo); }
.form .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--sp-10); }
.form .form__texto { min-height: calc(var(--sp-16) * 2); padding-block: var(--sp-3); resize: vertical; }   /* 06/10: ".form .input" (padding: 0 12px) outranked the plain class, so the text touched the top edge */
.form .input:hover, .form .select:hover { border-color: var(--suave); }
.form .input:focus-visible, .form .select:focus-visible { outline: 2px solid var(--destaque); outline-offset: 0; border-color: var(--destaque); }
.form [aria-invalid="true"] { border-color: var(--erro); }
.form__erro { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--erro); }
.form__erro:empty { display: none; }
.form__aceite { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); cursor: pointer; }
.form__aceite input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--texto); }
.form__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.form__resumo { margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--erro); border-radius: var(--raio-acao); font-size: var(--tx-ui); line-height: var(--lx-ui); }
.form__resumo:empty { display: none; }
.form__resumo a { color: inherit; }
.form__estado:not(:empty) { margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--linha); border-radius: var(--raio-acao); font-size: var(--tx-ui); line-height: var(--lx-ui); }
.form__estado--ok { border-color: var(--certo); }
.form__estado--aviso { border-color: var(--alerta); }
.form__estado--erro { border-color: var(--erro); }
.form__mel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__mel input, .form__mel label { width: 1px; }
/* Mesa Lite (lite.html): the waitlist form is one e-mail field and its button on one line (stacked on phones), and after
   it, the thank-you step with two one-click questions (buttons, aria-pressed). Same field, button and states as .form. */
.form--lista { display: grid; gap: var(--sp-3); max-width: calc(var(--medida) + var(--sp-24)); }
.form__linha { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.form__linha .input { flex: 1 1 16rem; min-width: 0; }
.form__linha .btn { flex: none; }
.form--lista .form__estado:not(:empty) { margin-top: 0; }
.form--lista .form__estado:empty { display: none; }   /* no gap under the form while there is nothing to say */
.lista-obrigado { display: grid; gap: var(--sp-5); }
.lista-obrigado__pergunta { display: grid; gap: var(--sp-2); }
.lista-obrigado__opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lista-obrigado__opcoes .btn[aria-pressed="true"] { background: var(--texto); color: var(--fundo); }
.lite .lista-obrigado__opcoes .btn[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* ---------- Legal pages: one readable column ---------- */
.doc { max-width: calc(var(--medida) + var(--calha) * 2); padding-block: var(--sp-24) var(--secao-y); }
.doc h1 { margin-bottom: var(--sp-4); }
.doc__meta { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.doc__resumo { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--linha); font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--texto-2); }
.doc__indice { display: grid; margin-top: var(--sp-8); counter-reset: indice; }
.doc__indice li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; counter-increment: indice; }
.doc__indice li::before { content: counter(indice) "."; color: var(--suave); font-variant-numeric: tabular-nums; }
.doc__indice a { display: inline-flex; align-items: center; min-height: var(--acao-h-toque); color: var(--texto-2); text-decoration: none; }
.doc__indice a:hover { color: var(--destaque); }
.doc h2 { margin-top: var(--sp-16); margin-bottom: var(--sp-4); scroll-margin-top: calc(var(--topo-h) + var(--sp-4)); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--sp-4); }
.doc ul { display: grid; gap: var(--sp-3); padding-left: var(--sp-5); list-style: disc; }
.doc p:not([class]), .doc li { color: var(--texto-2); }   /* classed paragraphs (the eyebrow, the meta) keep their own colour */
.doc b { color: var(--texto); font-weight: var(--peso-ui); }

/* ---------- Blog (2026-10-01; build.py from content/blog, RULES.md §10) ----------
   The article: the page hero (eyebrow = Blog · the cluster, H1, the description as subtitle, one meta line), then one
   column of prose at --medida, on the gutter like every section's content. The contents ("Neste artigo") hold the right
   4 of 12 columns and stay in view under the header, marking the section being read (site.js: colour only). ≤960: one
   column, the contents above the text. Post lists are the one grid component (.itens, .item--simples). */
.hero__meta { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.hero__selo a { color: inherit; }   /* the breadcrumb back to /blog, in the eyebrow's own ink */
.artigo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: start; }
.artigo__corpo { grid-column: 1 / span 7; grid-row: 1; min-width: 0; max-width: var(--medida); }
.artigo__indice { grid-column: 9 / -1; grid-row: 1; position: sticky; top: calc(var(--topo-h) + var(--sp-6)); }
/* The contents: a quiet rail; the section being read takes the ink (aria-current, set by site.js). Block links, never
   flex: a flex link would split "Raio-X" (a .sem-quebra span) from the words around it. */
.indice { display: grid; gap: var(--sp-6); }   /* the label to the rail (24): clearly more than the space between two items' texts (12 + 12 inside their 44px boxes), so the label leads the list; the rail starts and ends on the items' boxes, like the current item's mark */
.indice a { display: block; min-height: var(--acao-h-toque); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); border-left: 1px solid var(--linha); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); text-decoration: none; transition: color var(--dur-hover), border-color var(--dur-hover); }
.indice a:hover, .indice a:focus-visible { color: var(--texto); }
.indice a[aria-current] { color: var(--texto); border-left-color: var(--texto); }
/* Prose: the type scale (H2 the page's serif H2, H3 the item title, text the body), the proximity scale for the steps:
   16 between blocks, 64 above a section, 32 above a sub-section and 8 under it. */
.artigo__corpo > * + * { margin-top: var(--sp-4); }
.artigo__corpo > h2 { margin-top: var(--sp-16); scroll-margin-top: calc(var(--topo-h) + var(--sp-6)); }
.artigo__corpo > h3 { margin-top: var(--sp-8); scroll-margin-top: calc(var(--topo-h) + var(--sp-6)); }
.artigo__corpo > h3 + * { margin-top: var(--gap-interno); }
.artigo__corpo > :first-child { margin-top: 0; }
.artigo__corpo > p, .artigo__corpo > ul li, .artigo__corpo > ol li { color: var(--texto-2); }
.artigo__corpo > ul, .artigo__corpo > ol, .artigo__corpo li > ul, .artigo__corpo li > ol { display: grid; gap: var(--gap-interno); padding-left: var(--sp-5); }
.artigo__corpo li > ul, .artigo__corpo li > ol { margin-top: var(--gap-interno); }
.artigo__corpo > ul, .artigo__corpo li > ul { list-style: disc; }   /* prose lists only: the sources and the FAQ keep none */
.artigo__corpo > ol, .artigo__corpo li > ol { list-style: decimal; }
.artigo__corpo li::marker { color: var(--suave); }
.artigo__corpo strong { color: var(--texto); font-weight: var(--peso-ui); }
.artigo__corpo blockquote { display: grid; gap: var(--sp-4); padding-left: var(--sp-6); border-left: 1px solid var(--linha); color: var(--texto); }
.artigo__corpo blockquote > p:last-child:not(:first-child) { color: var(--suave); }   /* the quote's source, when it has one */
.artigo__corpo .link-solo { display: inline-block; min-width: var(--acao-h-toque); padding-block: var(--sp-3); }   /* a link that is the whole line: a 44px target */
.artigo__corpo table { width: 100%; border-collapse: collapse; font-size: var(--tx-ui); line-height: var(--lx-ui); }
.artigo__corpo th, .artigo__corpo td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.artigo__corpo th:last-child, .artigo__corpo td:last-child { padding-right: 0; }
.artigo__corpo th { font-weight: var(--peso-ui); color: var(--texto); }
.artigo__corpo td { color: var(--texto-2); }
.artigo__corpo th.dir, .artigo__corpo td.dir { text-align: right; font-variant-numeric: tabular-nums; }
/* The end of the article: the disclaimer and the sources, each an aside under a thin rule (.leitura), 64 below the text
   like a section. */
.artigo__corpo > .artigo__fim { margin-top: var(--sp-16); }
.artigo__fim > .leitura:first-child { margin-top: 0; }
.artigo__fontes { scroll-margin-top: calc(var(--topo-h) + var(--sp-6)); }
.fontes { display: grid; }
.fontes li + li { border-top: 1px solid var(--linha); }
.fontes a, .fontes__item { display: grid; min-height: var(--acao-h-toque); padding-block: var(--sp-3); color: var(--texto); text-decoration: none; }
.fontes__titulo { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover); }
.fontes a:hover .fontes__titulo, .fontes a:focus-visible .fontes__titulo { text-decoration-color: currentColor; }
.fontes__editor { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
/* Tables scroll inside their own frame (RULES.md §7) and never squeeze under the measure: on a phone the frame scrolls and
   its far edge fades (site.js), instead of four columns of one word per line. Figures in a row line up. */
.tabela-frame { overflow-x: auto; }
.artigo__corpo table { min-width: var(--medida); font-variant-numeric: tabular-nums; }
.artigo__corpo td:first-child { color: var(--texto); }   /* the row's name, in ink: the table reads by row */
/* The module banner (RULES.md §10, proposal 2026-10-02): a quiet outlined card that closes the section describing the
   problem the module solves. The module's name as the label, one sentence, one arrow link. Equal padding: the link's
   44px box is 12 taller than its text, so the bottom padding gives those 12 back. */
.artigo__corpo > .artigo-modulo { margin-top: var(--sp-8); }
.artigo-modulo { display: grid; justify-items: start; gap: var(--gap-interno); padding: var(--sp-6) var(--sp-6) calc(var(--sp-6) - (var(--acao-h-toque) - var(--lx-ui)) / 2); border: 1px solid var(--linha); border-radius: var(--raio-quadro); }
.artigo-modulo__texto { color: var(--texto); }
.artigo-modulo .link-seta { margin-top: calc(var(--gap-componente) - var(--gap-interno)); }   /* the link's box 16 under the sentence (RULES.md §6b check: a link never sits on its text) */
/* The Raio-X banner: the article's one primary action, on the featured panel (.vitrine--faixa), 64 under the text like a
   section; the button and the Raio-X's length side by side, the note muted. */
.artigo__corpo > .vitrine.artigo-raio-x { margin-top: var(--sp-16); }
.artigo-raio-x__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: calc(var(--gap-componente) - var(--gap-interno)); }
.artigo-raio-x__nota { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }
/* Photos (RULES.md §10b, proposal 2026-10-02): ONE treatment for every photo. Grey, multiplied over the light tone (its
   lights), lightened by the shadow tone (its shadows), the panel's grain on top: a navy-to-haze duotone, one set. */
.foto { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--raio-quadro); background: var(--foto-luz); }
.foto picture, .foto img { display: block; width: 100%; height: 100%; }
.foto img { object-fit: cover; filter: var(--foto-filtro); mix-blend-mode: multiply; }
.foto::before, .foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.foto::before { z-index: 1; background: var(--foto-sombra); mix-blend-mode: lighten; }
.foto::after { z-index: 2; background: var(--quadro-grao); opacity: var(--foto-grao); mix-blend-mode: soft-light; }
@media (prefers-reduced-transparency: reduce) { .foto::after { display: none; } }
.foto--capa { aspect-ratio: var(--foto-capa); }
.foto--cartao { aspect-ratio: var(--foto-cartao); }
.artigo__capa { margin-top: var(--cab-conteudo); }
.item__foto { margin-bottom: var(--gap-componente); }   /* a card's picture to its text: the component gap (RULES.md §3) */
@media (max-width: 640px) { .foto--capa { aspect-ratio: var(--foto-capa-movel); } }
@media (max-width: 960px) {
  .artigo { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-irmaos); }
  .artigo__corpo, .artigo__indice { grid-column: 1; grid-row: auto; }
  .artigo__indice { position: static; }
}

/* ---------- Motion (round 3): calm, product-like, once ----------
   Tokens: 160 / 240 / 420 / 700ms, one ease-out and one standard curve, a 60ms stagger. Transform and opacity only
   (scaleX/scaleY for bars). Everything runs once, on entering the view (site.js). Without JS, and under reduced motion,
   every final state shows at once. */

/* Fail-safe (2026-10-01, a blank page on an iPhone): nothing is hidden until site.js has set up its observer and put
   .revela-pronta on <html>. Without JS, with JS that fails or loads late, the page shows its final state; the hero never
   waits for JS (build.py drops .revela inside heroes). And if JS dies after the setup, a CSS safety net shows every block
   after 2.5s. */
@keyframes revela-garantia { to { opacity: 1; transform: none; } }
.revela-pronta .revela:not(.is-visivel), .revela-pronta .secao__cab.revela:not(.is-visivel) > *,
.quadro-anim:not(.is-in) .app, .quadro-anim:not(.is-in) .app__dica, .quadro-anim:not(.is-in) .app__colunas li::before, .quadro-anim:not(.is-in) .app__barras i,
.revela-pronta .vertical:not(.is-visivel) .pilha--vinheta span, .revela-pronta .vertical:not(.is-visivel) .vinheta--fila .vinheta__barra,
.revela-pronta .vertical:not(.is-visivel) .vinheta__chaves, .revela-pronta .vertical:not(.is-visivel) .vinheta--fila .badge,
.revela-pronta .vertical:not(.is-visivel) .vinheta__dia, .revela-pronta .vertical:not(.is-visivel) .vinheta__evento { animation: revela-garantia 1ms linear 2500ms forwards; }
/* Blocks and section heads fade up 12px; blocks that enter together are staggered (site.js sets --atraso). */
.revela-pronta .revela { opacity: 0; transform: translateY(var(--entrada-y)); transition: opacity var(--dur-entrada) var(--curva-saida) var(--atraso, 0ms), transform var(--dur-entrada) var(--curva-saida) var(--atraso, 0ms); }
.revela-pronta .revela.is-visivel { opacity: 1; transform: none; }
.revela-pronta .secao__cab.revela > * { opacity: 0; transform: translateY(var(--entrada-y)); transition: opacity var(--dur-entrada) var(--curva-saida), transform var(--dur-entrada) var(--curva-saida); }
.revela-pronta .secao__cab.revela { opacity: 1; transform: none; }
.revela-pronta .secao__cab.revela.is-visivel > * { opacity: 1; transform: none; }
.revela-pronta .secao__cab.revela > :nth-child(2) { transition-delay: var(--escalonar); }
.revela-pronta .secao__cab.revela > :nth-child(3) { transition-delay: calc(var(--escalonar) * 2); }

/* The hero frame (site.js adds .quadro-anim, then .is-in): window 0ms, hint 300ms, columns from 500ms, value lines from 700ms,
   the "Distribuir" underline at 1800ms. About 2.2s in all. */
.quadro-anim .app { opacity: 0; transform: translateY(var(--sp-3)); transition: opacity var(--dur-entrada) var(--curva-saida), transform var(--dur-entrada) var(--curva-saida); }
.quadro-anim .app__dica { opacity: 0; transform: translateY(var(--sp-2)); transition: opacity var(--dur-entrada) var(--curva-saida) 300ms, transform var(--dur-entrada) var(--curva-saida) 300ms; }
.quadro-anim .app__colunas li::before { transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-entrada) var(--curva-saida); }
.quadro-anim .app__colunas li:nth-child(1)::before { transition-delay: 500ms; }
.quadro-anim .app__colunas li:nth-child(2)::before { transition-delay: 560ms; }
.quadro-anim .app__colunas li:nth-child(3)::before { transition-delay: 620ms; }
.quadro-anim .app__colunas li:nth-child(4)::before { transition-delay: 680ms; }
.quadro-anim .app__colunas li:nth-child(5)::before { transition-delay: 740ms; }
.quadro-anim .app__colunas li:nth-child(6)::before { transition-delay: 800ms; }
.quadro-anim .app__barras i { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-desenho) var(--curva-saida); }
.quadro-anim .app__barras li:nth-child(1) i { transition-delay: 700ms; }
.quadro-anim .app__barras li:nth-child(2) i { transition-delay: 760ms; }
.quadro-anim .app__barras li:nth-child(3) i { transition-delay: 820ms; }
.quadro-anim .app__barras li:nth-child(4) i { transition-delay: 880ms; }
.quadro-anim .app__barras li:nth-child(5) i { transition-delay: 940ms; }
.app__dica-acao { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; }
.quadro-anim .app__dica-acao { background-size: 0 1px; transition: background-size var(--dur-entrada) var(--curva-saida) 1800ms; }
.quadro-anim.is-in .app, .quadro-anim.is-in .app__dica { opacity: 1; transform: none; }
.quadro-anim.is-in .app__colunas li::before, .quadro-anim.is-in .app__barras i { transform: none; }
.quadro-anim.is-in .app__dica-acao { background-size: 100% 1px; }

/* The three vignettes, after their card has entered (420ms). */
.revela-pronta .vertical .pilha--vinheta span { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-entrada) var(--curva-saida); }
.revela-pronta .vertical .pilha--vinheta span:nth-child(1) { transition-delay: 420ms; }
.revela-pronta .vertical .pilha--vinheta span:nth-child(2) { transition-delay: 540ms; }
.revela-pronta .vertical .pilha--vinheta span:nth-child(3) { transition-delay: 660ms; }
.revela-pronta .vertical .pilha--vinheta span:nth-child(4) { transition-delay: 780ms; }
.revela-pronta .vertical .pilha--vinheta span:nth-child(5) { transition-delay: 900ms; }
.revela-pronta .vertical .vinheta--dinheiro .vinheta__chaves { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida) 1100ms; }
.revela-pronta .vertical .vinheta--fila .vinheta__barra:not(.vinheta__barra--curta) { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-desenho) var(--curva-saida) 420ms; }
.revela-pronta .vertical .vinheta--fila .vinheta__linha:nth-child(3) .vinheta__barra { transition-delay: 540ms; }
.revela-pronta .vertical .vinheta--fila .badge { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida) 1500ms; }
.revela-pronta .vertical .vinheta__dia { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida); }
.revela-pronta .vertical .vinheta__dia:nth-child(1) { transition-delay: 420ms; }
.revela-pronta .vertical .vinheta__dia:nth-child(2) { transition-delay: 480ms; }
.revela-pronta .vertical .vinheta__dia:nth-child(3) { transition-delay: 540ms; }
.revela-pronta .vertical .vinheta__dia:nth-child(4) { transition-delay: 600ms; }
.revela-pronta .vertical .vinheta__dia:nth-child(5) { transition-delay: 660ms; }
.revela-pronta .vertical .vinheta__evento { opacity: 0; transform: translateY(calc(var(--sp-1) * -1)); transition: opacity var(--dur-troca) var(--curva-saida), transform var(--dur-troca) var(--curva-saida); }
.revela-pronta .vertical .vinheta__evento--aud { transition-delay: 1000ms; }
.revela-pronta .vertical .vinheta__evento--prazo { transition-delay: 1240ms; }
.revela-pronta .vertical.is-visivel .pilha--vinheta span, .revela-pronta .vertical.is-visivel .vinheta--fila .vinheta__barra { transform: none; }
.revela-pronta .vertical.is-visivel .vinheta__chaves, .revela-pronta .vertical.is-visivel .vinheta--fila .badge, .revela-pronta .vertical.is-visivel .vinheta__dia { opacity: 1; }
.revela-pronta .vertical.is-visivel .vinheta__evento { opacity: 1; transform: none; }
.revela-pronta .vertical.is-visivel .vinheta--fila .avatar--vazio { animation: pulso-uma-vez var(--dur-desenho) var(--curva-padrao) 900ms 1 both; }
@keyframes pulso-uma-vez { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.15); opacity: .6; } }

/* Exemplo: the pill and the section highlight slide; a new view cross-fades with a 6px shift from the side of travel. */
.demo__papeis, .app__nav--botoes { position: relative; isolation: isolate; }
.demo__papeis-marca, .app__nav-marca { position: absolute; z-index: -1; top: 0; left: 0; border-radius: var(--raio-acao); transition: transform var(--dur-troca) var(--curva-padrao), width var(--dur-troca) var(--curva-padrao); }
.demo__papeis-marca { background: var(--texto); }
.app__nav-marca { background: rgba(238, 241, 245, 0.12); background: color-mix(in srgb, var(--escuro-texto) 12%, transparent); }
.app__nav--botoes.tem-marca > button[aria-pressed="true"] { background: none; }   /* only once the sliding marker exists (site.js) */
.demo__mesa, .demo__vista, .demo__texto { transition: opacity var(--dur-troca) var(--curva-saida), transform var(--dur-troca) var(--curva-saida); }
.demo-entra { opacity: 0; transform: translateX(calc(var(--dir, 1) * 6px)); transition: none; }

/* Micro-interactions: the footer's links draw an underline, arrows move 3px, the dropdown opens with a fade and a 4px drop,
   tints at 160ms. (The arrow links, .link-seta, take a fill instead: see Actions.) */
.rodape__col a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-micro) var(--curva-saida), color var(--dur-micro); }
.rodape__col a:hover { background-size: 100% 1px; }
.sol[open] .sol__painel { animation: abre-menu var(--dur-micro) var(--curva-saida); }
@keyframes abre-menu { from { opacity: 0; transform: translateY(calc(var(--sp-2) * -1)); } }   /* 8px down and in, 160ms; reduced motion: shown at once */

@media (max-width: 640px) {
  /* Phones: the frame keeps its fade, bars and counts; the hint and the underline are simply there. */
  .quadro-anim .app__dica { opacity: 1; transform: none; transition: none; }
  .quadro-anim .app__dica-acao { background-size: 100% 1px; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aviso__trilho { animation: none; width: auto; }
  .aviso__itens { flex: 1; min-width: 0; }
  .aviso__itens[aria-hidden="true"], .aviso__itens li + li { display: none; }
  .aviso__itens li { padding-inline: var(--calha) 0; }
  .aviso__faixa { -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revela-pronta .revela, .revela-pronta .secao__cab.revela > *, .quadro-anim .app, .quadro-anim .app__dica, .demo-entra,
  .revela-pronta .vertical .vinheta__chaves, .revela-pronta .vertical .vinheta--fila .badge, .revela-pronta .vertical .vinheta__dia, .revela-pronta .vertical .vinheta__evento { opacity: 1; transform: none; }
  .quadro-anim .app__colunas li::before, .quadro-anim .app__barras i, .revela-pronta .vertical .pilha--vinheta span, .revela-pronta .vertical .vinheta--fila .vinheta__barra { transform: none; }
  .quadro-anim .app__dica-acao { background-size: 100% 1px; }
}

/* ---------- Tablet (1100 and 960) ---------- */
/* ---------- The featured block (home #agentes): the flagship direction, honest that it is in design ----------
   A contained navy panel with the product frame's grain, on the grid, full content width; two halves: the text and a
   concept card in the app's UI. The card types its suggestion in once and the approve button settles once; reduced
   motion shows both resolved. "Conceito" and the caption say it is not a live feature. */
/* agentes.html hero (2026-10-01): the text on the left, the concept card on the navy grain on the right; one column on
   phones, the stage under the text. The stage is the Agentes panel's surface (radius, grain), holding the same card. */
.hero--palco .hero__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: center; }
.hero--palco .hero__texto { grid-column: 1 / span 6; max-width: none; }
.palco-conceito { grid-column: 8 / -1; display: grid; padding: var(--sp-10); border-radius: var(--raio-quadro); background: var(--vitrine-textura); color: var(--texto); }
.destaque-ia { color: var(--destaque); }
@media (max-width: 960px) {
  .hero--palco .hero__grade { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-irmaos); }
  .hero--palco .hero__texto, .palco-conceito { grid-column: 1; }
}
@media (max-width: 640px) { .palco-conceito { padding: var(--sp-6) var(--sp-5); } }
/* The illustrations' stage (2026-10-01): the dark mocks of a section sit on the product frame's painted, grainy surface,
   with an inner padding, so they read as one picture instead of floating cards on the beige. */
.palco { display: grid; gap: var(--sp-4); padding: var(--sp-8); border-radius: var(--raio-quadro); background: var(--quadro-textura); }
.palco > .bloco, .palco > .mock { margin: 0; }
@media (max-width: 640px) { .palco { padding: var(--sp-4); } }
.secao.secao--vitrine > .wrap::before { content: none !important; }   /* the panel is the boundary: no hairline above it */
.vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); align-items: center; padding: var(--sp-16); border-radius: var(--raio-quadro); background: var(--vitrine-textura); color: var(--texto); }
.vitrine__texto { display: grid; gap: var(--titulo-intro); justify-items: start; }
.vitrine__selo { margin-bottom: calc(var(--sp-3) - var(--titulo-intro)); }
.vitrine__selo .selo-desenho { margin-left: 0; }
.vitrine__pontos { display: grid; gap: var(--gap-interno); margin-top: calc(var(--gap-componente) - var(--titulo-intro)); }
.vitrine__pontos li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--tx-corpo); line-height: var(--lx-corpo); color: var(--texto-2); }
.vitrine__pontos .icone { flex: none; color: var(--destaque); }
.vitrine__acoes { display: grid; gap: var(--sp-3); margin-top: calc(var(--gap-irmaos) - var(--titulo-intro)); }
.vitrine__convite { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--texto-2); }   /* the call's prompt, in the label style, 12px above the actions */
.vitrine__acoes .acoes { align-items: center; column-gap: var(--sp-6); }
.conceito { display: grid; justify-items: start; margin: 0; }   /* tag, card, caption: the tag's margin, then the caption's one rule */
.conceito__tag { margin-bottom: var(--gap-componente); display: inline-flex; align-items: center; height: var(--sp-6); padding: 0 var(--sp-2); border: 1px dashed var(--texto-2); border-radius: var(--raio-acao); color: var(--texto-2); font-size: var(--tx-selo); line-height: var(--lx-selo); font-weight: var(--peso-ui); }
.conceito__cartao { display: grid; gap: var(--sp-3); width: 100%; padding: var(--sp-5); border-radius: var(--raio-janela); background: var(--app-fundo); color: var(--app-texto); box-shadow: var(--sombra-janela); font-size: var(--tx-nota); line-height: var(--lx-nota); }
.conceito__meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--app-suave); }
.conceito__texto { color: var(--app-texto); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); }
.conceito__sugestao { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid rgba(42, 91, 215, 0.35); border: 1px solid color-mix(in srgb, var(--app-destaque) 35%, transparent); border-radius: var(--raio-acao); background: #e9eef7; background: color-mix(in srgb, var(--app-destaque) 6%, var(--app-fundo)); color: var(--app-texto-2); }
.conceito__sugestao .icone { flex: none; color: var(--app-destaque); }
/* The full line is laid out once, invisible, so the typed copy above it never moves the card. */
.conceito__linha { display: grid; }
.conceito__molde, .conceito__digitado { grid-area: 1 / 1; }
.conceito__molde { visibility: hidden; }
.conceito__botoes { display: flex; gap: var(--sp-2); }
.conceito__botao { position: relative; display: inline-flex; align-items: center; height: var(--sp-8); padding: 0 var(--sp-3); border: 1px solid var(--app-linha); border-radius: var(--raio-acao); color: var(--app-texto); font-weight: var(--peso-ui); }
.conceito__botao--aprovar { border-color: var(--app-texto); background: var(--app-texto); color: var(--app-fundo); }
.conceito__botao--aprovar::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 4px rgba(42, 91, 215, 0.4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-destaque) 40%, transparent); opacity: 0; pointer-events: none; }
.conceito.is-sugerido .conceito__botao--aprovar::after { animation: conceito-pulso var(--dur-desenho) var(--curva-saida) 1; }
@keyframes conceito-pulso { 0% { opacity: 0; transform: scale(.96); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
@media (max-width: 960px) {
  .vitrine { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-irmaos); padding: var(--sp-10) var(--sp-8); }
  /* Phones and tablets: text, then the concept, then the actions, full width. */
  .vitrine__texto { display: contents; }
  .vitrine__texto > * { grid-column: 1; }
  .vitrine { row-gap: 0; }
  .vitrine__selo { margin-bottom: var(--sp-3); }
  .vitrine__texto > h2 { margin-bottom: var(--titulo-intro); }
  .vitrine__pontos { margin-top: var(--gap-componente); }
  .conceito { order: 1; margin-top: var(--gap-irmaos); }
  .vitrine__acoes { order: 2; margin-top: var(--gap-irmaos); width: 100%; }
}
@media (max-width: 640px) {
  .vitrine { padding: var(--sp-8) var(--sp-5); }
  .vitrine__acoes .btn { flex: 1 1 100%; }
}
/* PROPOSAL (2026-10-02, waits on Nayara's verdict): .vitrine--faixa, the banner. One message that must break a run of text
   (como-funciona, "Sob medida"): the featured panel's surface (navy grain, panel radius, the dark roles), one column, a
   label in the accent and one line at the subtitle size, the same padding on every side. Considered first: .leitura (an
   aside under a hairline: it reads as a footnote, not a call); .vitrine as it is (two halves, a concept, actions: too much
   for one sentence); .palco-conceito (a stage for a picture). A modifier, so the panel's checks (symmetry, grid) measure it. */
.vitrine.vitrine--faixa { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-interno); align-items: start; margin-top: var(--cab-conteudo); padding: var(--sp-10); }
.vitrine__rotulo { display: flex; }   /* holds the product's blue pill (.badge.badge--accent, mocks.css), Nayara 2026-10-02 */
.vitrine__linha { max-width: 60ch; font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--texto); }
@media (max-width: 960px) { .vitrine.vitrine--faixa { padding: var(--sp-8); } }
@media (max-width: 640px) { .vitrine.vitrine--faixa { padding: var(--sp-6); } }
/* The teaser's one action: a real button under the lede, the component gap below it; full width on phones. */
.teaser__cta { justify-self: start; width: auto; margin-top: calc(var(--gap-componente) - var(--titulo-intro)); }
@media (max-width: 640px) { .teaser__cta, .secao__cab--centrado .teaser__cta { justify-self: stretch; } }

/* ---------- Raio-X: a focused flow ----------
   During the questions and the gate the page is exactly one screen: the header (no ticker on this page), then the
   question area filling the rest, content centred (auto margins, so a tall screen never clips its top). No footer and no
   "Para onde ir agora" until the laudo; the laudo is a document and scrolls with the page. On a very short screen only the
   question area scrolls, never the page. */
.pagina-foco { --foco-h: calc(100vh - var(--topo-h) - 1px - env(safe-area-inset-top)); }
@supports (height: 100dvh) { .pagina-foco { --foco-h: calc(100dvh - var(--topo-h) - 1px - env(safe-area-inset-top)); } }
.pagina-foco:not(.rx-com-laudo) .continue-secao, .pagina-foco:not(.rx-com-laudo) .rodape { display: none; }
.pagina-foco .rx-palco { display: block; height: var(--foco-h); min-height: 0; padding-block: var(--sp-8); overflow-y: auto; overscroll-behavior: contain; }
.pagina-foco .rx-palco > .wrap { height: 100%; grid-template-rows: minmax(0, 1fr); }   /* a definite row, so the question's rows split the real height */
@media (max-width: 960px) { .rx-palco > .wrap { grid-template-columns: minmax(0, 1fr); } .rx-tela { grid-column: 1; } }   /* one column: twelve gaps never fit a phone */
.pagina-foco .rx-palco.is-volta { animation: rv-some var(--dur-troca) var(--curva-saida); }
@media (max-width: 640px) {
  .pagina-foco .rx-palco { padding-block: var(--sp-6); }
  .pagina-foco .rx-tela { gap: var(--sp-6); }
  .pagina-foco .rx-q { min-height: calc(var(--tx-titulo) * var(--lx-titulo) * 3); }
}
/* Short screens (a phone with its browser bars, a small laptop): tighter, never scrolling. */
@media (max-height: 700px) {
  .pagina-foco .rx-palco { padding-block: var(--sp-5); }
  .pagina-foco .rx-tela { gap: var(--sp-5); }
  .pagina-foco .rx-tela__baixo { gap: var(--sp-3); }
  .pagina-foco .rx-resposta { min-height: var(--acao-h-grande); }
  .pagina-foco .rx-respostas { gap: var(--sp-2); }
}
@media (max-height: 700px) and (max-width: 640px) {
  .pagina-foco .rx-q { font-size: var(--tx-produto-titulo); line-height: var(--lx-produto-titulo); min-height: calc(var(--lx-produto-titulo) * 3); }
}

/* The gate as a conversation (raio-x.html): one field per screen, set like an answer. An underline field, no box; the line
   draws in on focus; a check shows when the e-mail is valid. Both steps share one grid cell, so nothing moves. */
.rx-passo { display: grid; align-content: start; gap: var(--sp-6); }
.rx-campo { position: relative; max-width: 36rem; }
.rx-entrada { display: block; width: 100%; padding: var(--sp-2) var(--sp-8) var(--sp-3) 0; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: transparent; color: var(--texto); font-size: var(--tx-entrada); line-height: var(--lx-entrada); outline: none; }
.rx-entrada::placeholder { color: var(--suave); opacity: 1; }
.rx-entrada[aria-invalid="true"] { border-bottom-color: var(--erro); }
.rx-campo__linha { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--texto); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-troca) var(--curva-saida); pointer-events: none; }
.rx-entrada:focus-visible ~ .rx-campo__linha, .rx-entrada:focus ~ .rx-campo__linha { transform: none; }
.rx-campo__ok { position: absolute; right: 0; bottom: calc(var(--sp-3) + (var(--lx-entrada) - var(--icone)) / 2); color: var(--certo); opacity: 0; transform: scale(.8); transition: opacity var(--dur-micro), transform var(--dur-micro) var(--curva-saida); }
.rx-campo.is-valido .rx-campo__ok { opacity: 1; transform: none; }
.rx-aceite { font-size: var(--tx-ui); line-height: var(--lx-ui); }
.rx-portao__nota { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.rx-portao .rx-passo { width: 100%; max-width: 36rem; justify-self: center; }   /* the field, the consent and the note: one block, centred in the column */
.rx-portao__acao { display: flex; justify-content: center; }   /* the one action, centred; in the tab order after the field and the consent, before Voltar */
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled .seta { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .rx-campo__linha, .rx-campo__ok { transition: none; } }

/* ---------- The laudo is issued: a calm reveal, once, like a document coming out ----------
   The head rises 8px (60ms apart); the paper rises 16px while its shade grows in; in the paper the issuer, the title wiped
   in from the left, the date, the name and the reference (typed in its mono face), then the double rule drawn left to
   right. Each section comes in as it reaches the screen: numeral, heading, rows 50ms apart (a check draws its stroke;
   "em parte" fades slower; what is missing slides 6px from the left; a module's arrow comes in last). The actions after the
   paper's head, one light sweep on the primary, the footnote last. Transform, opacity and clip-path only: nothing moves the
   layout, nothing blocks a click. Reduced motion: none of this, everything is there. */
.laudo__check { width: var(--icone-texto); height: var(--icone-texto); margin-right: var(--sp-2); vertical-align: -2px; color: var(--destaque); stroke-dasharray: 24; stroke-dashoffset: 0; }
.laudo__seta { width: var(--icone-texto); height: var(--icone-texto); margin-left: var(--sp-1); vertical-align: -2px; color: var(--destaque); }
@keyframes rv-sobe { from { opacity: 0; transform: translateY(var(--rv-y, 8px)); } }
@keyframes rv-esq { from { opacity: 0; transform: translateX(-6px); } }
@keyframes rv-some { from { opacity: 0; } }
@keyframes rv-limpa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rv-risca { from { transform: scaleX(0); } }
@keyframes rv-traco { from { stroke-dashoffset: 24; } }
@keyframes rv-seta { from { opacity: 0; transform: translateX(-4px); } }
@keyframes rv-brilho { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: no-preference) {
  .rx-resultado.is-emitindo .secao__cab > * { animation: rv-sobe var(--dur-entrada) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * var(--escalonar)); }
  .rx-resultado.is-emitindo .laudo { --rv-y: 16px; animation: rv-sobe 600ms var(--curva-saida) 120ms both; }
  .rx-resultado.is-emitindo .laudo::before { animation: rv-some 600ms var(--curva-saida) 240ms both; }
  .rx-resultado.is-emitindo .laudo__emissor { animation: rv-some var(--dur-entrada) var(--curva-saida) 300ms both; }
  .rx-resultado.is-emitindo #laudo-titulo { animation: rv-limpa 500ms var(--curva-saida) 420ms both; }
  .rx-resultado.is-emitindo .laudo__meta > div { animation: rv-sobe var(--dur-entrada) var(--curva-saida) both; animation-delay: calc(700ms + var(--i, 0) * var(--escalonar)); }
  .rx-resultado.is-emitindo .laudo__cab::after { animation: rv-risca 600ms var(--curva-padrao) 900ms both; }
  .rx-resultado.is-emitindo .laudo-acoes { animation: rv-some var(--dur-entrada) var(--curva-saida) 900ms both; }
  .rx-resultado.is-emitindo .laudo-acoes .btn--primary { position: relative; overflow: hidden; }
  .rx-resultado.is-emitindo .laudo-acoes .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(244, 241, 235, 0.28) 50%, transparent 70%); background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--fundo) 28%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: rv-brilho 900ms var(--curva-padrao) 1300ms 1 both; pointer-events: none; }
  .rx-resultado.is-emitindo .rv-espera { opacity: 0; }
  .rx-resultado.is-emitindo .rv-in { opacity: 1; }
  .rv-in .laudo__num { animation: rv-some var(--dur-troca) var(--curva-saida) var(--rv-d, 0ms) both; }
  .rv-in h3 { animation: rv-sobe var(--dur-entrada) var(--curva-saida) calc(var(--rv-d, 0ms) + 80ms) both; }
  .rv-in h3 .laudo__num { animation-delay: var(--rv-d, 0ms); }
  .rv-in .laudo__texto p, .rv-in .laudo__linhas > li, .rv-in .laudo__passos > li { animation: rv-sobe var(--dur-entrada) var(--curva-saida) both; animation-delay: calc(var(--rv-d, 0ms) + 160ms + var(--i, 0) * 50ms); }
  .rv-in .laudo__linha--parte { animation-name: rv-some !important; animation-duration: 700ms !important; animation-timing-function: var(--curva-padrao) !important; }
  .rv-in .laudo__linha--falta { animation-name: rv-esq !important; }
  .rv-in .laudo__check { animation: rv-traco 300ms var(--curva-saida) both; animation-delay: calc(var(--rv-d, 0ms) + 260ms + var(--i, 0) * 50ms); }
  .rv-in .laudo__seta { animation: rv-seta var(--dur-troca) var(--curva-saida) both; animation-delay: calc(var(--rv-d, 0ms) + 420ms + var(--i, 0) * 50ms); }
  .laudo__rodape.rv-in { animation: rv-some var(--dur-entrada) var(--curva-saida) var(--rv-d, 0ms) both; }
}

@media (max-width: 1100px) {
  .itens--3, .itens--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mark on top, the columns, the legal line last; one track, so nothing is held to the 12 columns' minimum width. */
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .rodape__marca { display: contents; }
  .marca--rodape { grid-column: 1 / -1; order: 0; }
  .rodape__colunas { grid-column: 1 / -1; order: 1; margin-top: var(--sp-10); }
  .rodape__base { grid-column: 1 / -1; margin-top: var(--sp-6); }   /* the legal lines under the logo */
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-10); }
  .verticais { grid-template-columns: minmax(0, 1fr); }
  .solucao--invertida .solucao__texto { order: 0; }
  .etapa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .etapa__cab { grid-column: 1 / -1; }
  .fatos { grid-template-columns: minmax(0, 1fr); }
  .par-cab { display: none; }
  .par { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-interno); }
  .topo__linha { grid-template-columns: minmax(0, 1fr) auto auto; }
  .topo__nav, .topo__acoes .btn--ghost { display: none; }
  .menu-movel { display: block; }
  .menu-movel > summary.btn { min-height: var(--acao-h-toque); }
  .menu-movel:not([open]) .menu-movel__painel { display: none; }
  .menu-movel__painel { position: fixed; top: var(--menu-topo, calc(var(--topo-h) + env(safe-area-inset-top))); bottom: 0; left: 0; right: 0; z-index: 30; display: grid; align-content: start; gap: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--calha) calc(var(--sp-8) + env(safe-area-inset-bottom)); background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .menu-movel__painel > a { display: flex; align-items: center; min-height: calc(var(--acao-h-toque) + var(--sp-1)); border-bottom: 1px solid var(--linha); color: var(--texto); font-size: var(--tx-corpo); text-decoration: none; }
  .menu-movel__painel .rotulo { margin: var(--sp-6) 0 var(--sp-1); }
  /* the modules, as in the mega-menu: the title, and its description under it (no featured card on phones) */
  .menu-movel__painel { grid-auto-rows: max-content; }   /* rows take their content: a module's two lines never overlap the next row */
  .menu-movel__painel > a.menu-movel__modulo { display: grid; align-content: center; gap: var(--sp-1); padding-block: var(--sp-3); }
  .menu-movel__modulo b { font-weight: var(--peso-ui); }
  .menu-movel__modulo > span { color: var(--suave); }
  .menu-movel__acoes { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
  html.menu-aberto { overflow: hidden; }
  .btn, .link-seta { min-height: var(--acao-h-toque); }
  .topo__acoes .btn { min-height: var(--acao-h-toque); }
  .hero--centro .hero__texto { grid-template-columns: minmax(0, 1fr); }
  .hero--centro h1, .hero__lado, .hero--centro .hero__sub, .hero--centro .hero__acoes, .hero--centro .hero__provas { grid-column: 1; grid-row: auto; }
  .hero--centro .hero__provas { margin-top: 0; }
  .quadro-produto__painel { padding: var(--sp-8) var(--sp-8) 0; }
  .app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app__lado { display: none; }
  .demo { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-componente); }
  .demo__papeis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; isolation: isolate; }
  .demo__lista, .demo__palco { grid-column: 1; }
  .demo__lista { border-top: 0; }   /* the roles' accordion gives way to the switcher: only the open role's body shows */
  .demo__lista .acordeao__item { border-bottom: 0; }
  .demo__lista .acordeao__item > h3 { display: none; }
  .demo__lista .acordeao__corpo { padding-bottom: 0; }
  .demo__palco { position: static; }
  .app--demo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app--demo .app__lado { display: block; padding: var(--sp-3); }
  .app--demo .app__marca, .app--demo .app__grupo { display: none; }
  .app__nav--botoes { display: flex; gap: var(--sp-2); overflow-x: auto; contain: inline-size; scrollbar-width: none; }
  .app__nav--botoes button { flex: none; width: auto; min-height: var(--acao-h-toque); padding: 0 var(--sp-3); border: 1px solid var(--escuro-linha); white-space: nowrap; }
  .demo__quadro { padding-bottom: var(--sp-4); }
  .app__cards { grid-template-columns: minmax(0, 1fr); }
  .rodape__col a { min-height: var(--acao-h-toque); }
  .seg button { min-height: var(--acao-h-toque); }
}

/* ---------- Phone (640) ---------- */
@media (max-width: 640px) {
  .topo__acoes .btn--primary { display: none; }
  .aviso__fechar { width: var(--acao-h-toque); height: var(--acao-h-toque); }
  .quadro-produto__painel { padding: var(--sp-4) var(--sp-4) 0; }
  .app__conteudo { padding: var(--sp-4); }
  .app__titulo { font-size: var(--tx-lead); line-height: var(--lx-lead); }
  .acoes .btn, .cta-diag .acoes .btn, .form__acoes .btn { flex: 1 1 100%; }
  .itens, .itens--2, .itens--3, .itens--4 { grid-template-columns: minmax(0, 1fr); }
  .rx-respostas { grid-template-columns: minmax(0, 1fr); }
  .rx-palco { min-height: 0; padding-block: var(--sp-10); }
  .rx-q { min-height: calc(var(--tx-titulo) * var(--lx-titulo) * 4); }
  .laudo-grade { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
  .laudo, .laudo-acoes { grid-column: 1; }
  .laudo { padding: var(--sp-8) var(--sp-5); }
  .laudo__meta { grid-template-columns: minmax(0, 1fr); }
  .laudo-acoes { position: static; }
  .seguir { grid-template-columns: minmax(0, 1fr); }
  .seguir__principal, .seguir__secundarios { grid-column: 1; }
  .seguir__principal { padding: var(--sp-6) var(--sp-12) var(--sp-6) 0; }
  .seguir__secundarios { margin-left: 0; border-left: 0; border-top: 1px solid var(--linha); }
  .seguir__item { padding-left: 0; }
  .rodape__chamada .btn, .rodape__acoes { flex: 1 1 100%; }
  .rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-linha { min-height: 72px; gap: var(--sp-4); padding-inline: 0; }
  .doc-linha .icone { width: var(--icone-grade); height: var(--icone-grade); }
  .etapa { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-8); }
  .compromissos li { grid-template-columns: minmax(0, 1fr); }
  .form__grade { grid-template-columns: minmax(0, 1fr); }
  .form-cartao { padding: var(--sp-5); }
  .canais li { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--sp-2); }
  .vistas__seg { justify-self: stretch; }
  .vistas__seg button { flex: 1; padding-inline: var(--sp-2); }
  .prova-numeros__lista > div { grid-template-columns: calc(var(--sp-16) + var(--sp-8)) minmax(0, 1fr); }
  .mapa-int { padding: var(--sp-4); }
  .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); }
  .bloco--visual, .financeiro { padding: var(--sp-4); }
  .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, .dist__txt span { white-space: normal; }
  :is(.linha__txt b, .linha__txt span, .dist__txt b) { white-space: normal; overflow-wrap: anywhere; }
  .dist__linha--nova .dist__btn { grid-column: 2; justify-self: start; }
  .mini-mesas, .mini-mesa, .relatorios { grid-template-columns: minmax(0, 1fr); }
  .fin-grupos { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .vertical__ilustra :is(.avatar--sm, .vinheta__dia span) { font-size: var(--t-xs); }
}
@media (max-width: 480px) {
  .rodape__colunas { grid-template-columns: minmax(0, 1fr); }   /* one column: no link or badge breaks */
}

/* Tags outside the product mocks use the tag token. */
.badge { font-size: var(--tx-selo); line-height: var(--lx-selo); }

/* ---------- Sideways scrolling: only inside explicit scroll containers ----------
   The page never pans sideways (html and body clip). A table frame, the demo's table and the demo's tab bar scroll inside
   themselves, keep the swipe to themselves, and show a cue (the far edge fades) while there is more to see. */
.tabela-frame, .demo-tabela, .app__nav--botoes { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.tem-mais { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--sp-8)), transparent); }

@media (max-width: 960px) and (min-width: 481px) { .rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* tablets: two columns, so no line or badge breaks */
/* Shown only on phones, or only above them (a shorter label, a column that does not fit). */
.so-celular { display: none; }
.aviso__curto { display: none; }
@media (max-width: 640px) {
  .so-largo, .col-larga, .aviso__longo { display: none; }
  .so-celular { display: block; }
  .aviso__curto { display: inline; }
  .app__pilulas { display: none; }
  .demo__papeis button { white-space: nowrap; }
}
.link-email .email { overflow-wrap: normal; }
.rodape__base .sem-quebra, .selo-desenho { white-space: nowrap; }

/* The demo's Processos modes (Lista, Distribuir), as in the app: a small segmented switch beside the title. */
.demo__modo { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--app-linha); border-radius: var(--raio-acao); }
.demo__modo button { min-height: var(--sp-8); padding: 0 var(--sp-3); border: 0; border-radius: var(--raio-acao); background: none; color: var(--app-texto-2); font-size: var(--tx-nota); font-weight: var(--peso-ui); cursor: pointer; }
.demo__modo button[aria-pressed="true"] { background: var(--app-texto); color: var(--app-fundo); }
.app__nav-off { opacity: .55; }
/* Contact, arriving from "Entrar": one calm line above the intro. */
.contato__entrar { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--linha); border-radius: var(--raio-acao); background: var(--fundo-2); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }
/* The laudo's own disclaimer, at the top of the document. */
.laudo__aviso { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }

/* ---------- Phones (640px and down): one structure per item, pictures only when they read ----------
   An item reads heading, text, then its picture or nothing, then a separator; the step between items is bigger than any
   step inside one. A picture whose text cannot be read at phone size is cropped to the part that reads, or turned off. */
@media (max-width: 640px) {
  /* Items with an icon: the icon beside the heading, not above it (compact, one column). */
  .item--icone { display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr); column-gap: var(--sp-3); align-content: start; }
  .item--icone > * { grid-column: 2; }
  .item--icone > .item__marca { grid-column: 1; grid-row: 1; width: var(--sp-6); height: var(--sp-6); margin: 0; align-self: center; }
  .item--icone > .item__titulo { grid-row: 1; }
  /* Home, "O que a Mesa responde": the small product pictures are off on phones (c); each role is one block, with the
     divider and the sibling step between roles. */
  .vertical__ilustra { display: none; }
  .vertical h3 { min-height: 0; }
  .verticais { row-gap: 0; }
  .vertical + .vertical { margin-top: var(--gap-irmaos); padding-top: var(--gap-irmaos); border-top: 1px solid var(--linha); }
  /* Inventário: the state map's tile labels do not read at phone size; the ranking under it does (b). */
  .mock--mapa .mapa { display: none; }
  /* Como funciona, the demo: the two mini charts (state tiles, months) are off on phones (c); the money stays. */
  .app--demo .tile:has(.mapa--mini, .tendencia) { display: none; }
  /* Relatórios: the desks and the slide keep their labels at the label size, so they read (b). */
  .modulo, .slide__sub, .slide__barras span, .arquivo__tipo { font-size: var(--tx-selo); line-height: var(--lx-selo); }
}

/* copy: responde serif */
/* Home, "O que a Mesa responde": each role's pain line in the brand serif, one step up the scale (item → lead), so the
   section reads H2 > pain line > questions. Two lines held on wide screens so the three columns stay level. */
.vertical h3 { font-family: var(--fonte-titulo); font-size: var(--tx-dor); line-height: var(--lx-dor); font-weight: 400; letter-spacing: var(--trk-titulo); min-height: calc(var(--lx-dor) * 2); }
@media (max-width: 640px) { .vertical h3 { min-height: 0; } }

/* ---------- Older browsers (iOS 15, Chrome 90): fallbacks where a missing feature would break layout ----------
   The individual transform properties (translate, rotate) arrived in Chrome 104; without them the menu panel would sit
   half its width to the right and the arrows would not turn. Same result, through transform. */
@supports not (translate: 0) {
  .item-nav__seta { transform: translate(-4px, -50%); }
  .item-nav:hover .item-nav__seta, .item-nav:focus-visible .item-nav__seta { transform: translate(0, -50%); }
  .seguir__seta { transform: translateY(-50%); }
  .seguir__principal:hover .seguir__seta, .seguir__principal:focus-visible .seguir__seta, .seguir__item:hover .seguir__seta, .seguir__item:focus-visible .seguir__seta { transform: translate(4px, -50%); }
  .vistas-js .experimente .vista:not(.is-ativa) { transform: translateY(-50%); }
}
@supports not (rotate: 0deg) {
  .sol[open] .icone--chevron, .acordeao__item[open] > .acordeao__cab .acordeao__chevron, .acordeao__cab[aria-expanded="true"] .acordeao__chevron { transform: rotate(180deg); }
}

/* ---------- Home v5 (2026-10-07): the 15 sections of Nayara's roteiro ----------
   Nothing new in kind: the hero, the cropped product pictures, a three-layer diagram, the access seal, a numbers row, a
   two-column check list. Every value is a token; the dark sections turn the roles, so each piece reads on both grounds. */

/* 01 · Hero: one column (the title over its lede, the body, the call), then the four lines and the product frame. */
.hero--home .hero__texto { justify-items: start; max-width: none; }
.hero--home .hero__corpo { max-width: 60ch; color: var(--texto-2); }
.hero--home .hero__acoes { align-items: center; column-gap: var(--sp-6); margin-top: calc(var(--sp-8) - var(--gap-componente)); }
.legenda--rotulo { letter-spacing: var(--trk-rotulo); }   /* the caption typed in capitals: a variant changes the type only (RULES §3b) */
/* the frame's third card: a short list of lawsuits, the product's own scale */
.app__card--lista { gap: var(--sp-2); }
.app__lista li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--sp-3); align-items: center; padding-block: var(--sp-2); border-top: 1px solid var(--app-linha); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--app-texto-2); }
.app__lista b { font-family: var(--mono); font-weight: var(--peso-ui); color: var(--app-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app__lista-resp { justify-self: end; text-align: right; }
@media (max-width: 640px) {   /* a phone: the number on its line (never broken), who has it under it */
  .app__lista li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .app__lista b { overflow-wrap: normal; white-space: nowrap; }
  .app__lista-resp { justify-self: start; text-align: left; }
}

/* 02 and 08 · A cropped product picture (a lens on the interface) sits where an item's marker would: 16 above its label. */
.item__recorte { margin: 0 0 var(--gap-componente); }
.recorte { height: var(--recorte-alt); overflow: hidden; border-radius: var(--raio-quadro); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--sp-16)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--sp-16)), transparent); }
.recorte .bloco { margin: 0; }
.item__recorte ~ .rotulo + .item__titulo { margin-top: var(--sp-1); }   /* only where a picture leads the item: the label sits close over its title */
.item__lista { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); max-width: 42ch; color: var(--texto-2); }

/* 03 · The three layers: sources, the Mesa, the decision. Roles only, so it turns with the ground. */
.camadas { display: grid; }
.camada { display: grid; gap: var(--gap-interno); padding: var(--sp-6); border: 1px solid var(--linha); border-radius: var(--raio-quadro); background: var(--fundo); }
.camada--mesa { border-color: var(--destaque); background: var(--fundo-2); }
.camada__rot { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); letter-spacing: var(--trk-rotulo); text-transform: uppercase; color: var(--suave); }
.camada--mesa .camada__rot { color: var(--destaque); }
.camada__itens { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.camada__itens li { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--linha); border-radius: var(--raio-acao); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--texto); }
.camada--mesa .camada__itens li { border-color: var(--destaque); }
.camadas__seta { display: grid; place-items: center; height: var(--sp-10); color: var(--suave); }

/* 06 · The access layers: five bars narrowing toward the data, under the seal "acesso negado por padrão". */
.acesso { display: grid; justify-items: center; gap: var(--sp-6); padding: var(--sp-8); border: 1px solid var(--linha); border-radius: var(--raio-quadro); background: var(--fundo-2); }
.selo-acesso { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--destaque); border-radius: var(--raio-acao); color: var(--destaque); font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); letter-spacing: var(--trk-rotulo); }
.acesso__camadas { display: grid; justify-items: center; gap: var(--sp-2); width: 100%; }
.acesso__camadas li { width: var(--w); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--linha); border-radius: var(--raio-acao); background: var(--fundo); color: var(--texto); font-size: var(--tx-corpo); line-height: var(--lx-corpo); font-weight: var(--peso-ui); text-align: center; }
.acesso__camadas .acesso__dados { border-color: var(--destaque); background: var(--destaque); color: var(--fundo); }
@media (max-width: 640px) { .acesso { padding: var(--sp-6) var(--sp-4); } }

/* 06 · The numbers row: the home proof's big figures (serif, --tx-numero) in a grid of four. */
.prova-numeros__lista.prova-numeros__lista--grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-irmaos) var(--gap-grade); }
.prova-numeros__lista.prova-numeros__lista--grade > div { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: var(--gap-interno); padding-block: var(--sp-6) 0; }
.prova-numeros__lista--grade dd { max-width: 42ch; font-size: var(--tx-corpo); line-height: var(--lx-corpo); }   /* the body size (mocks.css gives dd the product's 14) */
@media (max-width: 1100px) { .prova-numeros__lista.prova-numeros__lista--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prova-numeros__lista.prova-numeros__lista--grade { grid-template-columns: minmax(0, 1fr); } }

/* 10 · The concept card's three parts, each under its small label. */
.conceito__parte { display: grid; gap: var(--sp-1); }
.conceito__rot { font-size: var(--tx-selo); line-height: var(--lx-selo); font-weight: var(--peso-ui); letter-spacing: var(--trk-rotulo); text-transform: uppercase; color: var(--app-suave); }
.conceito__registro { color: var(--app-texto-2); }

/* 11, 12 · A section's closing action (the button, and what sits with it), the component's distance under the content. */
.secao__fim { margin-top: var(--cab-conteudo); }
.secao__fim:not(.prosa-bloco) { display: grid; justify-items: start; gap: var(--gap-componente); }
/* 12 · The scale list: two columns of checks, one on a phone. */
.lista-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-grade); }
@media (max-width: 640px) { .lista-check--2 { grid-template-columns: minmax(0, 1fr); } }
/* A two-sentence H2 breaks between its sentences, never after the first word of the second. */
.h2-frase { display: block; }
/* The panel's title takes its column (its box is never narrower than the longest of its sentences). */
.vitrine__texto > h2 { justify-self: stretch; }
/* Phones: a cropped picture shows whole (no crop, no fade), so nothing hangs out of its frame; its chart ticks keep 12px. */
@media (max-width: 640px) {
  .recorte { height: auto; -webkit-mask-image: none; mask-image: none; }
  /* RULES §7, one structure per item: label, title, text, then its picture, then a separator. */
  .item__recorte { order: 1; margin: var(--gap-componente) 0 0; }
  .recorte .tendencia span { font-size: var(--tx-selo); line-height: var(--lx-selo); }
}
@media (max-width: 960px) { .vitrine__texto > p + p { margin-top: var(--titulo-intro); } }   /* the panel's text is `display: contents` here (row-gap 0): a paragraph after a paragraph keeps its 16 */
/* The IA panel's subtitle: the section subtitle's size and measure on the navy grain, so in the softer ink (AA there). Its own class, so the plain dark sections keep the muted subtitle (.secao__intro). */
.vitrine__lede { max-width: 60ch; font-size: var(--tx-lead); line-height: var(--lx-lead); color: var(--texto-2); }

/* ===== Mesa Lite (lite.html, Nayara 15/10: "Celular claro") =====
   The page's own pieces, on the site's tokens: blue actions, the light phone with three notifications, and the light
   product window (the mocks' components with the app's light values, from the note in tokens.css §2). */
.btn--azul { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }   /* the blue action: a variant of the primary (RULES.md §6b) */
.btn--azul:hover { background: #1f47ad; background: color-mix(in srgb, var(--blue-600) 80%, var(--navy-900)); border-color: #1f47ad; border-color: color-mix(in srgb, var(--blue-600) 80%, var(--navy-900)); }
.lite .form .input { background: #fff; }
.lite [data-tema="escuro"] .form .input { background: var(--navy-850); }
.lite-preco { margin-top: calc(var(--sp-6) - var(--gap-componente)); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--texto-2); }
.lite-preco b { font-weight: 600; color: var(--texto); }
.lite-palco { display: grid; justify-items: center; margin: 0; }
.lite-celular { width: min(340px, 100%); padding: var(--sp-3); border-radius: 44px; background: var(--navy-900); box-shadow: var(--sombra-janela); }
.lite-tela { display: grid; gap: var(--sp-3); align-content: start; aspect-ratio: 9 / 17; padding: var(--sp-6) var(--sp-3); border-radius: 34px; overflow: hidden; background: linear-gradient(170deg, #2a3550, var(--navy-900) 75%); color: #fff; }
.lite-tela__hora { margin-top: var(--sp-4); text-align: center; font-size: var(--tx-numero); line-height: var(--lx-numero); font-weight: 300; }
.lite-tela__dia { margin-bottom: var(--sp-4); text-align: center; font-size: var(--tx-nota); line-height: var(--lx-nota); color: #cfd5de; }
.lite-notif { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--sp-4); background: #f5f7f9; color: var(--navy-900); }
.lite-notif__app { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--tx-selo); line-height: var(--lx-selo); color: #535c6b; }
.lite-notif__marca { display: grid; place-items: center; width: var(--sp-4); height: var(--sp-4); border-radius: var(--raio-acao); background: var(--blue-400); color: var(--navy-900); font-family: var(--fonte-titulo); }
.lite-notif__quando { margin-left: auto; }
.lite-notif__titulo { font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: 600; }
.lite-notif__texto { font-size: var(--tx-nota); line-height: var(--lx-nota); }
.lite-notif--nova { outline: 2px solid var(--blue-400); animation: lite-entra var(--dur-entrada) var(--curva-saida) both; }
@keyframes lite-entra { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lite-notif--nova { animation: none; } }
.lite-janela { --surface: #ffffff; --surface-soft: #f1f3f6; --ink: #1d2433; --ink-2: #3c4556; --muted: #5b6474; --line: #e3e6ec;
  --accent: #2a5bd7; --accent-soft: #e8eefc; --ok: #1f7a4d; --ok-soft: #e4f3ea; --warn-soft: #fff4e0; --warn-ink: #7a4d00;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--raio-quadro); background: #f5f7f9; color: var(--ink); box-shadow: var(--sombra-papel); }
.lite-janela__barra { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-soft); font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--muted); }
.lite-janela__barra span { width: var(--sp-3); height: var(--sp-3); border-radius: 50%; background: var(--line); }
.lite-janela__barra em { margin-left: var(--sp-2); font-style: normal; }
.lite-janela__corpo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.lite-janela__lista { padding: var(--sp-6); min-width: 0; }
.lite-janela__lado { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6); border-left: 1px solid var(--line); background: var(--surface); }
.lite-janela .linha__txt :is(b, span) { white-space: normal; overflow: visible; text-overflow: clip; }
.lite-janela .tile .n { font-size: var(--tx-item); line-height: var(--lx-item); }
@media (max-width: 960px) {
  .lite-janela__corpo { grid-template-columns: minmax(0, 1fr); }
  .lite-janela__lado { border-left: 0; border-top: 1px solid var(--line); }
}
/* the Lite footer has no call above it, so the closing band keeps its full bottom padding (RULES.md #1) */
main.lite:has(> .secao:last-of-type[data-tema="escuro"]) > .secao.lite-final > .wrap { padding-bottom: var(--secao-y); }