/* 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: 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: 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); }
.legenda { margin-top: var(--gap-componente); }   /* a caption sits one component gap under its frame, everywhere */
.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: 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 { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--acao-h-toque);   /* every text link: a 44px tap height */ font-size: var(--tx-ui); line-height: var(--lx-ui); font-weight: var(--peso-ui); color: var(--texto); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover), color var(--dur-hover); }
.link-seta:hover, a:hover > .link-seta { text-decoration-color: currentColor; }
/* 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 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: one line, a slow ticker of true items (each a link), dismissible (remembered per browser).
   WCAG 2.2.2: it pauses on hover, on focus inside, with the pause button, off screen and in a hidden tab (site.js);
   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(--sp-10), #000 calc(100% - var(--sp-10)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--sp-10), #000 calc(100% - var(--sp-10)), 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: inline-flex; align-items: center; gap: var(--sp-1); padding-inline: var(--aviso-vao); white-space: nowrap; color: var(--texto-2); }
.aviso__itens a { display: inline-flex; align-items: center; min-height: var(--aviso-h); gap: var(--sp-1); color: var(--texto); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur-micro) var(--curva-saida); }
.aviso__destaque { color: var(--destaque); font-weight: var(--peso-ui); }   /* the logo's light blue (--blue-400 on the dark bar) */
.aviso__itens a:hover, .aviso__itens a:focus-visible { background-size: 100% 1px; }
@keyframes aviso-corre { to { transform: translateX(-50%); } }
@media (min-width: 961px) {
  /* Desktop: both messages fit, so the line stands still, centred, the two separated by a dot. Calmer than a ticker. */
  .aviso__trilho { animation: none; width: auto; justify-content: center; }
  .aviso__faixa { -webkit-mask-image: none; mask-image: none; }
  .aviso__itens { justify-content: center; flex: 1; }
  .aviso__itens[aria-hidden="true"], .aviso__pausa { display: none; }
  .aviso__itens li { padding-inline: var(--sp-4); }
  .aviso__itens li + li::before { content: "·"; margin-right: var(--sp-8); margin-left: calc(var(--sp-4) * -1); color: var(--suave); }
  .aviso__linha { padding-left: var(--acao-h-toque); }
}
.aviso:hover .aviso__trilho, .aviso:focus-within .aviso__trilho, .aviso.is-pausado .aviso__trilho, .aviso.is-fora .aviso__trilho { animation-play-state: paused; }
.aviso__pausa, .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__pausa:hover, .aviso__fechar:hover { color: var(--texto); }
.aviso__icone-play, .aviso.is-pausado .aviso__icone-pausa { display: none; }
.aviso.is-pausado .aviso__icone-play { display: block; }
.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); }
.sol { position: relative; }
.sol__painel { position: absolute; top: calc(100% + var(--sp-3)); left: 50%; translate: -50% 0; z-index: 30; display: grid; width: 400px; box-shadow: var(--sombra-menu); padding: var(--sp-2); border: 1px solid var(--linha); border-radius: var(--raio-quadro); background: var(--fundo); }
/* 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%; }
.sol__item--exp { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--linha); border-radius: 0; }
.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 + .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); }
.quadro-produto__legenda { margin-top: var(--gap-componente); font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); }
.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: color-mix(in srgb, var(--app-destaque) 10%, transparent); }
.app__colunas li.is-atual::before { border-top-color: var(--app-destaque); 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; border-top: 1px solid var(--linha); }
.papel { border-bottom: 1px solid var(--linha); }
.papel__cab { margin: 0; }
.papel__botao { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: var(--sp-16); padding: var(--sp-4) 0; border: 0; background: none; color: var(--texto-2); font: inherit; text-align: left; cursor: pointer; transition: color var(--dur-micro); }
.papel__botao:hover, .papel__botao[aria-expanded="true"] { color: var(--texto); }
.papel__chevron { color: var(--suave); transition: rotate var(--dur-troca) var(--curva-padrao); }
.papel__botao[aria-expanded="true"] .papel__chevron { rotate: 180deg; }
.papel__corpo { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.papel__corpo[hidden] { display: none; }
.papel__titulo { font-size: var(--tx-corpo); line-height: var(--lx-corpo); color: var(--texto); }
.papel__corpo .link-seta { justify-self: start; }
.demo__palco { grid-column: 5 / -1; position: sticky; top: calc(var(--topo-h) + var(--sp-6)); display: grid; gap: var(--gap-componente); }
.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: 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 { margin-top: var(--sp-2); color: var(--muted); }
.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 ----------
   The question screen keeps every slot's size, so nothing moves when you answer: the question block holds 3 lines,
   the answers never change size, Voltar keeps its place (visibility). The composition is centred in the viewport. */
.rx-palco { display: grid; align-items: center; 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: 1 / span 9; display: grid; gap: var(--sp-8); }
/* Anchored on the question: three rows, the question in the middle; the rows around it split the rest 47 / 53, so the
   question's centre sits just above the area's centre (the optical centre). Each outer row is at least its content, so on
   a short screen the question rises before anything overflows. */
.pagina-foco .rx-tela { grid-template-rows: minmax(min-content, 47fr) auto minmax(min-content, 53fr); }
.rx-tela__cima { align-self: end; display: grid; gap: var(--sp-3); }
.rx-tela__baixo { align-self: start; display: grid; gap: var(--sp-8); }
.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-tela__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.rx-tela__marca, .rx-contador { font-size: var(--tx-ui); line-height: var(--lx-ui); color: var(--suave); font-variant-numeric: tabular-nums; }
.rx-contador__janela { display: inline-block; overflow: hidden; vertical-align: bottom; height: var(--lx-ui); }
.rx-contador__n { display: inline-block; color: var(--texto); 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-progresso { height: 2px; background: var(--linha); overflow: hidden; }
.rx-progresso span { display: block; height: 100%; background: var(--texto); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-desenho) var(--curva-saida); }
.rx-progresso--cheio span { transform: none; }
.rx-sai { opacity: 0; transform: translateY(-8px); }
.rx-entra { opacity: 0; transform: translateY(8px); transition: none; }
.rx-q { 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); 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; 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: left; 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__texto { flex: 1; }
.rx-resposta__tecla { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--linha); border-radius: var(--raio-acao); color: var(--suave); font: inherit; font-size: var(--tx-selo); line-height: 1; transition: border-color var(--dur-micro), color var(--dur-micro); }
.rx-resposta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--destaque) 45%, var(--linha)); }
.rx-resposta:hover .rx-resposta__tecla { border-color: var(--destaque); color: var(--destaque); }
.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[aria-checked="true"] .rx-resposta__tecla { border-color: currentColor; color: inherit; }
.rx-resposta.is-anterior { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 25%, transparent); }
.rx-tela__pe { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--acao-h-grande); }
.rx-voltar { 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); }
@media (hover: none) { .rx-dica { visibility: hidden; } }   /* a keyboard hint: not on touch screens (the row keeps its height) */
.rx-dica { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--suave); }
.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; }
a.item:hover .item__titulo { color: var(--destaque); }
a.item:hover .item__link { background-size: 100% 1px; }
.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); }

/* ---------- FAQ: rows under thin rules ---------- */
.faq { display: grid; max-width: none; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: var(--sp-16); padding-block: var(--sp-4); font-weight: var(--peso-ui); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: var(--tx-lead); color: var(--suave); transition: transform var(--dur-hover) var(--curva-saida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--destaque); }
.faq details p { padding-bottom: var(--sp-6); 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; }   /* 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 { grid-column: 1 / span 8; }
@media (max-width: 960px) { .contato { grid-template-columns: minmax(0, 1fr); } .contato > .form-cartao { 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__texto { min-height: calc(var(--sp-16) * 2); padding-block: var(--sp-3); resize: vertical; }
.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; }

/* ---------- 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); }

/* ---------- 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. */

/* Blocks and section heads fade up 12px; blocks that enter together are staggered (site.js sets --atraso). */
.js .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); }
.js .revela.is-visivel { opacity: 1; transform: none; }
.js .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); }
.js .secao__cab.revela { opacity: 1; transform: none; }
.js .secao__cab.revela.is-visivel > * { opacity: 1; transform: none; }
.js .secao__cab.revela > :nth-child(2) { transition-delay: var(--escalonar); }
.js .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). */
.js .vertical .pilha--vinheta span { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-entrada) var(--curva-saida); }
.js .vertical .pilha--vinheta span:nth-child(1) { transition-delay: 420ms; }
.js .vertical .pilha--vinheta span:nth-child(2) { transition-delay: 540ms; }
.js .vertical .pilha--vinheta span:nth-child(3) { transition-delay: 660ms; }
.js .vertical .pilha--vinheta span:nth-child(4) { transition-delay: 780ms; }
.js .vertical .pilha--vinheta span:nth-child(5) { transition-delay: 900ms; }
.js .vertical .vinheta--dinheiro .vinheta__chaves { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida) 1100ms; }
.js .vertical .vinheta--fila .vinheta__barra:not(.vinheta__barra--curta) { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-desenho) var(--curva-saida) 420ms; }
.js .vertical .vinheta--fila .vinheta__linha:nth-child(3) .vinheta__barra { transition-delay: 540ms; }
.js .vertical .vinheta--fila .badge { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida) 1500ms; }
.js .vertical .vinheta__dia { opacity: 0; transition: opacity var(--dur-entrada) var(--curva-saida); }
.js .vertical .vinheta__dia:nth-child(1) { transition-delay: 420ms; }
.js .vertical .vinheta__dia:nth-child(2) { transition-delay: 480ms; }
.js .vertical .vinheta__dia:nth-child(3) { transition-delay: 540ms; }
.js .vertical .vinheta__dia:nth-child(4) { transition-delay: 600ms; }
.js .vertical .vinheta__dia:nth-child(5) { transition-delay: 660ms; }
.js .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); }
.js .vertical .vinheta__evento--aud { transition-delay: 1000ms; }
.js .vertical .vinheta__evento--prazo { transition-delay: 1240ms; }
.js .vertical.is-visivel .pilha--vinheta span, .js .vertical.is-visivel .vinheta--fila .vinheta__barra { transform: none; }
.js .vertical.is-visivel .vinheta__chaves, .js .vertical.is-visivel .vinheta--fila .badge, .js .vertical.is-visivel .vinheta__dia { opacity: 1; }
.js .vertical.is-visivel .vinheta__evento { opacity: 1; transform: none; }
.js .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: 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: underlines draw, arrows move 3px, the dropdown opens with a fade and a 4px drop, tints at 160ms. */
.link-seta, .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); }
.link-seta:hover, a:hover > .link-seta, .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-1) * -1)); } }

@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, .aviso__pausa { display: none; }
  .aviso__itens li { display: flex; padding-inline: var(--calha) 0; }
  .aviso__itens li::after { content: none; }
  .aviso__faixa { -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela, .js .secao__cab.revela > *, .quadro-anim .app, .quadro-anim .app__dica, .demo-entra,
  .js .vertical .vinheta__chaves, .js .vertical .vinheta--fila .badge, .js .vertical .vinheta__dia, .js .vertical .vinheta__evento { opacity: 1; transform: none; }
  .quadro-anim .app__colunas li::before, .quadro-anim .app__barras i, .js .vertical .pilha--vinheta span, .js .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; gap: var(--gap-componente); justify-items: start; margin: 0; }
.conceito__tag { 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 color-mix(in srgb, var(--app-destaque) 35%, transparent); border-radius: var(--raio-acao); 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 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); } }
.conceito__legenda { font-size: var(--tx-nota); line-height: var(--lx-nota); color: var(--texto-2); }
@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%; }
}
/* 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, .pagina-foco .rx-tela__baixo { 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, .pagina-foco .rx-tela__baixo { gap: var(--sp-5); }
  .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__pe { flex-direction: row-reverse; }   /* the action first in the tab order (after the field and the consent), shown on the right */
.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%, 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); }
  .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; }
  .papel { border-bottom: 0; }
  .papel__cab { display: none; }
  .papel__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__pausa, .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; } }