/* Monitor Imobiliário — Portal · componentes e layout
   Consome apenas tokens.css. Mobile-first; breakpoints 420 · 768 · 1024 · 1280. */

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: var(--fs-corpo); line-height: var(--lh-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--cor-acao); text-decoration: none; }
a:hover { color: var(--cor-acao-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--borda-marca) solid var(--cor-acao); outline-offset: var(--borda-marca); }
h1, h2, h3, h4 { margin: 0; font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--tr-titulo); line-height: var(--lh-titulo); color: var(--cor-texto); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: absolute; left: var(--esp-4); top: calc(-1 * var(--esp-10)); background: var(--cor-acao); color: var(--cor-branco); padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-pill); z-index: var(--z-overlay); }
.pular-conteudo:focus { top: var(--esp-2); color: var(--cor-branco); }

.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--esp-gutter); }
.secao { padding-block: var(--esp-secao) 0; }
.secao--fim { padding-bottom: var(--esp-secao); }
.pilha { display: flex; flex-direction: column; gap: var(--esp-4); }
.linha-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-4); flex-wrap: wrap; padding-bottom: var(--esp-4); border-bottom: var(--borda) solid var(--cor-borda); }
.linha-titulo h2 { font-size: var(--fs-h2); }
.link-mais { font-size: var(--fs-nav); font-weight: var(--peso-medio); white-space: nowrap; }

/* rótulos */
.kicker { font-size: var(--fs-kicker); font-weight: var(--peso-medio); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-kicker); font-variant-numeric: tabular-nums; }
.meta { font-size: var(--fs-meta); color: var(--cor-texto-meta); font-variant-numeric: tabular-nums; }
.rotulo-micro { font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--cor-texto-placeholder); }
.pill-editoria { display: inline-flex; align-items: center; gap: var(--esp-2); align-self: flex-start; font-size: var(--fs-kicker); font-weight: var(--peso-medio); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-kicker); background: var(--cor-acao-suave); border: var(--borda) solid var(--cor-acao-suave-borda); border-radius: var(--raio-pill); padding: var(--esp-2) var(--esp-3); }
.pill-editoria::before { content: ""; width: var(--esp-1); height: var(--esp-1); border-radius: var(--raio-circulo); background: var(--cor-ciano); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--altura-toque); padding: var(--esp-3) var(--esp-6); border-radius: var(--raio-pill); border: var(--borda) solid var(--cor-acao); background: var(--cor-acao); color: var(--cor-branco); font-size: var(--fs-ui); font-weight: var(--peso-medio); white-space: nowrap; transition: background var(--dur-rapida) ease; }
.btn:hover { background: var(--cor-acao-hover); color: var(--cor-branco); }
.btn:active { background: var(--cor-acao-active); }
.btn--sec { background: var(--cor-cartao); color: var(--cor-texto); border-color: var(--cor-borda); }
.btn--sec:hover { background: var(--cor-acao-suave); color: var(--cor-acao); }
.chip { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: calc(var(--altura-toque) - var(--esp-2)); padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-pill); border: var(--borda) solid var(--cor-borda); background: var(--cor-cartao); color: var(--cor-texto); font-size: var(--fs-meta); font-weight: var(--peso-medio); white-space: nowrap; }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip.is-ativo { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-branco); }
.grupo-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* inscrição */
.signup { width: 100%; max-width: var(--largura-signup); display: flex; flex-direction: column; gap: var(--esp-3); }
.signup__campo { display: flex; align-items: center; gap: var(--esp-2); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda-forte); border-radius: var(--raio-pill); padding: var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-5); }
.signup__campo input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: var(--fs-corpo); padding: var(--esp-3) 0; color: var(--cor-texto); }
.signup__campo input:focus { outline: none; }
.signup__campo:focus-within { border-color: var(--cor-acao); }
.signup__status { min-height: var(--esp-5); font-size: var(--fs-ui); color: var(--cor-texto-apoio); }
.signup__status[data-estado="ok"] { color: var(--cor-kicker); }
.signup__status[data-estado="erro"] { color: var(--cor-queda); }

/* ================= header ================= */
.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--cor-header-vidro); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: var(--borda) solid var(--cor-hairline); }
.site-header__inner { position: relative; height: var(--altura-header); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5); }
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: var(--logo-altura); width: auto; }
.nav { display: none; align-items: center; gap: var(--gap-nav); }
.nav a, .nav button { font-size: var(--fs-nav); color: var(--cor-texto-apoio); background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: var(--esp-1); }
.nav a:hover, .nav button:hover, .nav [aria-current="page"] { color: var(--cor-texto); }
.nav [aria-current="page"] { font-weight: var(--peso-medio); }
.nav__caret { width: var(--esp-2); height: var(--esp-2); transition: transform var(--dur-rapida) ease; }
.nav__grupo { position: relative; }
.nav__grupo[data-aberto="true"] .nav__caret { transform: rotate(180deg); }
.megamenu { position: absolute; top: calc(100% + var(--esp-4)); left: calc(-1 * var(--esp-4)); min-width: var(--largura-megamenu); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-menu); padding: var(--esp-2); display: none; flex-direction: column; }
.nav__grupo[data-aberto="true"] .megamenu { display: flex; }
.megamenu a { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm); font-size: var(--fs-ui); color: var(--cor-texto); }
.megamenu a:hover { background: var(--cor-acao-suave); color: var(--cor-acao); }
.header__acoes { display: flex; align-items: center; gap: var(--esp-2); }
.header__acoes .btn { display: none; min-height: calc(var(--altura-toque) - var(--esp-2)); padding: var(--esp-2) var(--esp-4); font-size: var(--fs-nav); }
.icone-btn { width: var(--altura-toque); height: var(--altura-toque); display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--cor-texto); border-radius: var(--raio-circulo); }
.icone-btn:hover { background: var(--cor-fundo-sutil); }
.icone-btn svg { width: var(--icone); height: var(--icone); }

/* menu mobile: painel do tamanho da viewport do aparelho, nunca maior */
.menu-mobile { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; }
.menu-mobile[data-aberto="true"] { display: block; }
.menu-mobile__fundo { position: absolute; inset: 0; background: var(--cor-overlay); }
.menu-mobile__painel { position: absolute; top: 0; right: 0; height: 100dvh; width: var(--largura-menu-mobile); background: var(--cor-fundo); display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-4) var(--esp-5) var(--esp-7); overflow-y: auto; box-shadow: var(--sombra-menu); }
.menu-mobile__topo { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile nav > a { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--fs-h3); color: var(--cor-texto); padding: var(--esp-3) 0; border-bottom: var(--borda) solid var(--cor-hairline); }
.menu-mobile__editorias { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ================= footer ================= */
.site-footer { margin-top: var(--esp-secao); border-top: var(--borda) solid var(--cor-borda); background: var(--cor-fundo-alt); }
.site-footer__inner { padding-block: var(--esp-secao) var(--esp-7); display: flex; flex-direction: column; gap: var(--esp-7); }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-7) var(--esp-5); }
.site-footer__marca { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--esp-3); }
.site-footer__marca img { height: calc(var(--logo-altura) + var(--borda-marca)); width: auto; align-self: flex-start; }
.site-footer__marca p { font-size: var(--fs-nav); font-weight: var(--peso-leve); color: var(--cor-texto-apoio); max-width: 34ch; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--esp-3); }
.site-footer__col h2 { font-family: var(--fonte-texto); font-size: var(--fs-micro); font-weight: var(--peso-medio); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-texto-fraco); }
.site-footer__col a { font-size: var(--fs-nav); color: var(--cor-texto); }
.site-footer__col a:hover { color: var(--cor-acao); }
.site-footer__base { border-top: var(--borda) solid var(--cor-borda); padding-top: var(--esp-5); display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--cor-texto-meta); }

/* ================= hero / display ================= */
.hero { position: relative; isolation: isolate; padding-block: var(--hero-topo) var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-4); }
.halo { position: absolute; z-index: -1; top: var(--halo-topo); left: 50%; transform: translateX(-50%); width: var(--halo-largura); height: var(--halo-altura); background: var(--grad-halo); pointer-events: none; }
.display { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); background: var(--grad-display); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: var(--fs-lead); font-weight: var(--peso-leve); line-height: var(--lh-texto); color: var(--cor-texto-apoio); max-width: 58ch; }

/* ================= cartões ================= */
.grade { display: grid; gap: var(--gap-grade); grid-template-columns: minmax(0, 1fr); }
.card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-lg); padding: var(--esp-3); color: inherit; transition: box-shadow var(--dur-media) ease, transform var(--dur-media) ease; }
.card:hover { box-shadow: var(--sombra-cartao); transform: translateY(calc(-1 * var(--borda-marca))); color: inherit; }
.card__thumb { aspect-ratio: 16 / 9; border-radius: var(--raio-md); overflow: hidden; background: var(--grad-capa); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: 0 var(--esp-1) var(--esp-1); flex: 1 1 auto; }
.card__titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tr-texto); color: var(--cor-texto); text-wrap: pretty; }
.card__resumo { font-size: var(--fs-ui); color: var(--cor-texto-apoio); }
.card .meta { margin-top: auto; }
.card--destaque .card__thumb { aspect-ratio: 16 / 8.6; }
.card--destaque .card__titulo { font-size: var(--fs-h2); }
.card--lista { flex-direction: row; align-items: stretch; }
.card--lista .card__thumb { flex: 0 0 var(--thumb-lista); aspect-ratio: auto; min-height: calc(var(--thumb-lista) * .8); }
.card--lista .card__titulo { font-size: var(--fs-corpo); }

/* anúncio */
.anuncio { display: flex; flex-direction: column; gap: var(--esp-2); width: 100%; }
.anuncio__rotulo { font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--cor-texto-placeholder); }
.anuncio__slot { width: 100%; min-height: var(--anuncio-altura, var(--anuncio-padrao)); background: var(--cor-fundo-sutil); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.anuncio--retangulo { --anuncio-altura: var(--anuncio-retangulo); }
.anuncio--super { --anuncio-altura: var(--anuncio-super); }

/* pontos de paginação (carrosséis) */
.dots { display: flex; justify-content: center; gap: var(--esp-2); padding-top: var(--esp-3); }
.dots button { width: var(--dot); height: var(--dot); padding: 0; border: 0; border-radius: var(--raio-pill); background: var(--cor-borda-forte); transition: width var(--dur-media) var(--curva), background var(--dur-media) ease; }
.dots button[aria-current="true"] { width: calc(var(--dot) * 3); background: var(--cor-acao); }

/* carrossel genérico: só cartões inteiros */
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--por-vez, 1) - 1) * var(--esp-3)) / var(--por-vez, 1)); gap: var(--esp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { scroll-snap-align: start; }

/* ================= home ================= */
.home-destaques { display: grid; gap: var(--gap-grade); grid-template-columns: minmax(0, 1fr); }
.home-destaques__lado { display: grid; gap: var(--gap-grade); grid-template-columns: minmax(0, 1fr); }
.lab-teaser { --por-vez: 1; }

/* ================= editoria ================= */
.editoria-topo { display: flex; flex-direction: column; gap: var(--esp-4); }
.editoria-topo h1 { font-size: var(--fs-h1); }
.patrocinio { display: inline-flex; align-items: center; gap: var(--esp-3); align-self: flex-start; }
.patrocinio__logo { width: var(--patrocinio-largura); height: var(--patrocinio-altura); border-radius: var(--raio-sm); background: var(--cor-fundo-sutil); border: var(--borda) solid var(--cor-borda); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.patrocinio__logo img { max-height: 100%; width: auto; }
.facetas { --por-vez: 2; }
.faceta { display: flex; flex-direction: column; gap: var(--esp-1); min-height: calc(var(--altura-toque) * 1.6); justify-content: center; padding: var(--esp-3) var(--esp-4); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-md); color: var(--cor-texto); font-size: var(--fs-ui); font-weight: var(--peso-medio); text-align: left; }
.faceta small { font-size: var(--fs-meta); font-weight: var(--peso-normal); color: var(--cor-texto-meta); font-variant-numeric: tabular-nums; }
.faceta[aria-pressed="true"] { border-color: var(--cor-acao); background: var(--cor-acao-suave); color: var(--cor-acao); }
.alerta-editoria { display: flex; flex-direction: column; gap: var(--esp-4); background: var(--cor-cartao); border: var(--borda) solid var(--cor-acao-suave-borda); border-radius: var(--raio-xl); padding: var(--esp-cartao); }
.lista-noticias { display: flex; flex-direction: column; gap: var(--esp-3); }

/* ================= artigo ================= */
.artigo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-8); padding-top: var(--esp-secao); position: relative; isolation: isolate; }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); font-size: var(--fs-kicker); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-texto-fraco); }
.migalhas a { color: var(--cor-kicker); }
.artigo__titulo { font-size: var(--fs-h1-artigo); line-height: 1.08; margin-bottom: var(--esp-5); }
.artigo__subtitulo { font-size: var(--fs-lead); font-weight: var(--peso-leve); color: var(--cor-texto-apoio); max-width: 58ch; margin-bottom: var(--esp-6); }
.artigo__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-4); padding-block: var(--esp-4); border-block: var(--borda) solid var(--cor-hairline); margin-bottom: var(--esp-7); }
.autor-chip { display: flex; align-items: center; gap: var(--esp-3); color: inherit; }
.autor-chip img, .autor-chip__foto { width: var(--avatar); height: var(--avatar); border-radius: var(--raio-circulo); background: var(--cor-azul-100); object-fit: cover; flex: 0 0 auto; }
.autor-chip strong { display: block; font-size: var(--fs-ui); font-weight: var(--peso-medio); color: var(--cor-texto); }
.compartilhar { display: flex; align-items: center; gap: var(--esp-2); }
.compartilhar a, .compartilhar button { width: calc(var(--altura-toque) - var(--esp-2)); height: calc(var(--altura-toque) - var(--esp-2)); border-radius: var(--raio-circulo); border: var(--borda) solid var(--cor-borda); background: var(--cor-cartao); color: var(--cor-acao); display: inline-flex; align-items: center; justify-content: center; }
.compartilhar a:hover, .compartilhar button:hover { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-branco); }
.compartilhar svg { width: var(--icone-sm); height: var(--icone-sm); }
.artigo__capa { margin: 0 0 var(--esp-7); display: flex; flex-direction: column; gap: var(--esp-3); }
.artigo__capa img, .artigo__capa .capa-vazia { width: 100%; aspect-ratio: 16 / 8.6; object-fit: cover; border-radius: var(--raio-xl); background: var(--grad-capa); }
.artigo__capa figcaption { font-size: var(--fs-meta); color: var(--cor-texto-meta); }
.prosa { max-width: var(--largura-texto); font-size: var(--fs-corpo-artigo); line-height: var(--lh-artigo); color: var(--cor-texto-corpo); }
.prosa > * + * { margin-top: var(--esp-6); }
.prosa h2 { font-size: var(--fs-h2); margin-top: var(--esp-8); }
.prosa h3 { font-size: var(--fs-h3); margin-top: var(--esp-7); }
.prosa strong { font-weight: var(--peso-medio); color: var(--cor-texto); }
.prosa a { text-decoration: underline; text-underline-offset: var(--esp-1); }
.prosa ul, .prosa ol { padding-left: var(--esp-5); }
.artigo__lateral { display: grid; gap: var(--esp-6); align-content: start; grid-template-columns: minmax(0, 1fr); }
.tags { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ================= componentes do artigo ================= */
.bloco-numero { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-cartao); border-radius: var(--raio-xl); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); }
.bloco-numero__valor { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--fs-numero); line-height: 1; letter-spacing: var(--tr-display); color: var(--cor-acao); font-variant-numeric: tabular-nums; }
.bloco-numero__texto { font-size: var(--fs-corpo); line-height: var(--lh-texto); color: var(--cor-texto-corpo); max-width: 52ch; }
.bloco-numero__fonte { font-size: var(--fs-meta); color: var(--cor-texto-meta); }

.citacao { margin: 0; padding: var(--esp-2) 0 var(--esp-2) var(--esp-6); position: relative; }
.citacao::before { content: "\201C"; position: absolute; left: 0; top: calc(-1 * var(--esp-2)); font-family: var(--fonte-titulo); font-size: var(--fs-numero); line-height: 1; color: var(--cor-azul-200); }
.citacao blockquote { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-h2); line-height: 1.3; letter-spacing: var(--tr-texto); color: var(--cor-texto); }
.citacao figcaption { margin-top: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--fs-ui); color: var(--cor-texto-apoio); }
.citacao figcaption strong { font-weight: var(--peso-medio); color: var(--cor-texto); }

.widget-lab { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-cartao); border-radius: var(--raio-xl); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); }
.widget-lab__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); flex-wrap: wrap; }
.widget-lab__titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: var(--fs-h3); color: var(--cor-texto); }
.widget-lab__rodape { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--cor-texto-meta); }

.bloco-contexto { display: flex; gap: var(--esp-4); padding: var(--esp-cartao); border-radius: var(--raio-xl); background: var(--cor-acao-suave); border: var(--borda) solid var(--cor-acao-suave-borda); }
.bloco-contexto__icone { flex: 0 0 auto; width: calc(var(--avatar) - 6px); height: calc(var(--avatar) - 6px); border-radius: var(--raio-sm); background: var(--cor-cartao); border: var(--borda) solid var(--cor-acao-suave-borda); display: flex; align-items: center; justify-content: center; color: var(--cor-acao); }
.bloco-contexto__icone svg { width: var(--icone); height: var(--icone); }
.bloco-contexto__texto { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-corpo); line-height: var(--lh-texto); color: var(--cor-texto-corpo); }

.cta-newsletter { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-cartao); border-radius: var(--raio-xl); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); box-shadow: var(--sombra-cartao); }
.cta-newsletter h2, .cta-newsletter h3 { font-size: var(--fs-h2); }
.cta-newsletter p { font-size: var(--fs-ui); color: var(--cor-texto-apoio); }

.tabela-wrap { width: 100%; overflow-x: auto; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-cartao); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.tabela caption { caption-side: bottom; text-align: left; padding: var(--esp-3) var(--esp-4); font-size: var(--fs-meta); color: var(--cor-texto-meta); }
.tabela th { text-align: left; font-size: var(--fs-micro); font-weight: var(--peso-medio); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-texto-fraco); background: var(--cor-fundo-alt); padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda) solid var(--cor-borda); white-space: nowrap; }
.tabela td { padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda) solid var(--cor-hairline); color: var(--cor-texto); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; }
.alta { color: var(--cor-kicker); }
.queda { color: var(--cor-queda); }

/* ================= gráficos (MonitorLab / Cotações) ================= */
.grafico-card { display: flex; flex-direction: column; gap: var(--esp-4); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-xl); padding: var(--esp-cartao); }
.grafico-card__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--esp-4); flex-wrap: wrap; }
.grafico-card__valor { font-size: var(--fs-h1); font-weight: var(--peso-medio); letter-spacing: var(--tr-titulo); font-variant-numeric: tabular-nums; }
.grafico { position: relative; width: 100%; height: var(--altura-grafico); touch-action: pan-y; user-select: none; cursor: crosshair; }
.grafico svg { width: 100%; height: 100%; overflow: visible; }
.grafico__marca { position: absolute; right: var(--esp-2); bottom: var(--esp-2); font-size: var(--fs-micro); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-borda-forte); pointer-events: none; }
.grafico__eixo { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; }
.grafico__leitura { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.leitura { display: inline-flex; align-items: baseline; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-cartao); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.leitura__cor { width: var(--esp-3); height: var(--borda-marca); border-radius: var(--borda-marca); background: currentColor; align-self: center; }
.leitura strong { font-weight: var(--peso-medio); color: var(--cor-texto); }
.seletor { display: flex; gap: var(--esp-1); padding: var(--esp-1); background: var(--cor-fundo-sutil); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pill); }
.seletor button { border: 0; background: none; border-radius: var(--raio-pill); padding: var(--esp-2) var(--esp-3); font-size: var(--fs-meta); font-weight: var(--peso-medio); color: var(--cor-texto-apoio); min-width: var(--altura-toque); }
.seletor button[aria-pressed="true"] { background: var(--cor-cartao); color: var(--cor-texto); box-shadow: var(--sombra-seletor); }
.seletor--icone button { display: inline-flex; align-items: center; justify-content: center; }
.seletor--icone svg { width: var(--icone-sm); height: var(--icone-sm); }
.abas { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; padding: var(--esp-1); background: var(--cor-fundo-sutil); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pill); }
.abas::-webkit-scrollbar { display: none; }
.abas [role="tab"] { flex: 0 0 auto; border: 0; background: none; border-radius: var(--raio-pill); padding: var(--esp-2) var(--esp-4); min-height: calc(var(--altura-toque) - var(--esp-2)); font-size: var(--fs-nav); font-weight: var(--peso-medio); color: var(--cor-texto-apoio); white-space: nowrap; }
.abas [role="tab"][aria-selected="true"] { background: var(--cor-cartao); color: var(--cor-texto); box-shadow: var(--sombra-seletor); }

.lab-hero { position: relative; overflow: hidden; background: var(--grad-escuro); color: var(--cor-branco); }
.lab-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--grad-grade-escura); background-size: var(--grade-escura-tam) var(--grade-escura-tam); }
.lab-hero__graf { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; opacity: .32; pointer-events: none; }
.lab-hero .container { position: relative; padding-block: var(--hero-topo) var(--esp-secao); display: flex; flex-direction: column; gap: var(--esp-7); }
.lab-hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--cor-branco); }
.lab-hero h1 span { color: var(--cor-ciano); }
.lab-hero p { font-size: var(--fs-lead); font-weight: var(--peso-leve); color: var(--cor-azul-200); max-width: 48ch; }
.lab-hero .kicker { color: var(--cor-azul-300); }
.lab-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); border-top: var(--borda) solid var(--cor-borda-escura); padding-top: var(--esp-5); }
.lab-hero__stats dt { font-size: var(--fs-micro); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-azul-300); }
.lab-hero__stats dd { margin: var(--esp-1) 0 0; font-size: var(--fs-h3); font-weight: var(--peso-medio); color: var(--cor-branco); font-variant-numeric: tabular-nums; }

/* cotações */
.cotacoes { background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-xl); overflow: hidden; }
.cotacao { border-bottom: var(--borda) solid var(--cor-hairline); }
.cotacao:last-child { border-bottom: 0; }
.cotacao__linha { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3); padding: var(--esp-4); background: none; border: 0; border-left: var(--borda-marca) solid transparent; text-align: left; }
.cotacao__linha:hover { background: var(--cor-fundo-alt); }
.cotacao__linha[aria-expanded="true"] { background: var(--cor-fundo-alt); border-left-color: var(--cor-acao); }
.cotacao__ticker { font-size: var(--fs-ui); font-weight: var(--peso-medio); color: var(--cor-acao); }
.cotacao__nome { display: block; font-size: var(--fs-meta); color: var(--cor-texto-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotacao__num { font-size: var(--fs-ui); font-variant-numeric: tabular-nums; text-align: right; }
.cotacao__col-extra { display: none; }
.cotacao__detalhe { padding: var(--esp-2) var(--esp-4) var(--esp-6); background: var(--cor-fundo); border-top: var(--borda) solid var(--cor-hairline); display: flex; flex-direction: column; gap: var(--esp-4); }
.cotacao__detalhe[hidden] { display: none; }
.proventos { display: flex; flex-direction: column; gap: var(--esp-3); border-top: var(--borda) solid var(--cor-hairline); padding-top: var(--esp-4); }
.barras { height: var(--altura-grafico-sm); display: flex; align-items: flex-end; gap: var(--esp-1); border-bottom: var(--borda) solid var(--cor-borda); }
.barras button { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; background: none; border: 0; padding: 0; }
.barras span { width: 100%; height: var(--h, 0%); background: var(--cor-azul-200); border-radius: var(--raio-xs) var(--raio-xs) 0 0; }
.barras button[aria-pressed="true"] span { background: var(--cor-acao); }
.barras [data-tipo="jcp"] span { background: var(--cor-texto-placeholder); }
.barras [data-tipo="jcp"][aria-pressed="true"] span { background: var(--cor-serie-2); }

/* ================= autor / tag / empresa ================= */
.perfil { display: flex; flex-direction: column; gap: var(--esp-5); padding-top: var(--esp-secao); }
.perfil__cabeca { display: flex; gap: var(--esp-5); align-items: center; flex-wrap: wrap; }
.perfil__foto { width: var(--avatar-lg); height: var(--avatar-lg); border-radius: var(--raio-circulo); object-fit: cover; background: var(--cor-azul-100); flex: 0 0 auto; }
.perfil h1 { font-size: var(--fs-h1); }
.perfil__bio { font-size: var(--fs-lead); font-weight: var(--peso-leve); color: var(--cor-texto-apoio); max-width: 62ch; }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin: 0; }
.ficha div { background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.ficha dt { font-size: var(--fs-micro); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--cor-texto-fraco); }
.ficha dd { margin: 0; font-size: var(--fs-corpo); font-weight: var(--peso-medio); color: var(--cor-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ================= anuncie ================= */
.formatos { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
.formato { display: flex; flex-direction: column; gap: var(--esp-3); background: var(--cor-cartao); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-xl); padding: var(--esp-cartao); }
.formato h3 { font-size: var(--fs-h3); }
.formato p { font-size: var(--fs-ui); color: var(--cor-texto-apoio); }
.mockups { display: flex; flex-direction: column; align-items: center; gap: var(--esp-6); }
.mockup-desktop { width: 100%; max-width: var(--mockup-desktop); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-cartao); box-shadow: var(--sombra-flutuante); overflow: hidden; }
.mockup-desktop__barra { height: var(--esp-6); background: var(--cor-fundo-sutil); border-bottom: var(--borda) solid var(--cor-borda); }
.mockup-celular { width: var(--mockup-celular); aspect-ratio: 9 / 19; border: var(--esp-2) solid var(--cor-texto); border-radius: var(--raio-2xl); background: var(--cor-cartao); box-shadow: var(--sombra-flutuante); overflow: hidden; flex: 0 0 auto; }
.mockup__tela { padding: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); }
.mockup__bloco { background: var(--cor-fundo-sutil); border-radius: var(--raio-xs); height: var(--esp-3); }
.mockup__bloco--alto { height: var(--esp-10); }
.mockup__anuncio { background: var(--cor-acao-suave); border: var(--borda) dashed var(--cor-acao); border-radius: var(--raio-xs); color: var(--cor-acao); font-size: var(--fs-micro); letter-spacing: var(--tr-kicker); text-transform: uppercase; display: flex; align-items: center; justify-content: center; min-height: var(--esp-7); }
.form { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); }
.campo { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-meta); font-weight: var(--peso-medio); color: var(--cor-texto-apoio); }
.campo input, .campo select, .campo textarea { min-height: var(--altura-toque); padding: var(--esp-3) var(--esp-4); border: var(--borda) solid var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-cartao); font-size: var(--fs-corpo); font-weight: var(--peso-normal); color: var(--cor-texto); }
.campo textarea { min-height: calc(var(--altura-toque) * 3); resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--cor-acao); }

/* ================= institucional ================= */
.inst-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-7); }
.sumario { display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--fs-ui); }
.sumario a { color: var(--cor-texto-apoio); padding: var(--esp-1) 0; }
.sumario a:hover, .sumario a[aria-current="true"] { color: var(--cor-acao); }

/* newsletter de rodapé */
.newsletter { padding-block: var(--esp-secao); display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); text-align: center; }
.newsletter h2 { font-size: var(--fs-h1); max-width: 26ch; }
.newsletter h2 span { color: var(--cor-acao); }
.newsletter .signup__campo { width: 100%; }

/* =============== ≥ 420 =============== */
@media (min-width: 420px) {
  .facetas { --por-vez: 2; }
  .ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mockup-celular { width: var(--mockup-celular-lg); }
}

/* =============== ≥ 768 =============== */
@media (min-width: 768px) {
  .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-destaques__lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-teaser { --por-vez: 2; }
  .facetas { --por-vez: 3; }
  .lab-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .campo--inteiro, .form .btn { grid-column: 1 / -1; }
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__marca { grid-column: auto; }
  .alerta-editoria { flex-direction: row; align-items: center; justify-content: space-between; }
  .alerta-editoria .signup { max-width: var(--largura-signup-sm); }
  .cotacao__linha { grid-template-columns: minmax(0, 1fr) repeat(3, var(--col-cotacao)) var(--esp-6); }
  .cotacao__col-extra { display: block; }
  .mockups { flex-direction: row; align-items: flex-end; justify-content: center; }
  .artigo__lateral { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============== ≥ 1024 =============== */
@media (min-width: 1024px) {
  .nav { display: flex; }
  .header__acoes .btn { display: inline-flex; }
  .nav-toggle { display: none; }
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-destaques { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .lab-teaser { --por-vez: 3; overflow: visible; }
  .lab-teaser + .dots { display: none; }
  .facetas { --por-vez: 4; }
  .editoria-topo h1 { white-space: nowrap; }
  .artigo-layout { grid-template-columns: minmax(0, 1fr) var(--largura-lateral); gap: var(--esp-9); }
  .artigo__lateral { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--altura-header) + var(--esp-5)); }
  .inst-layout { grid-template-columns: var(--largura-sumario) minmax(0, 1fr); }
  .sumario { position: sticky; top: calc(var(--altura-header) + var(--esp-5)); align-self: start; }
  .formatos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============== ≥ 1280 =============== */
@media (min-width: 1280px) {
  .facetas { --por-vez: 5; }
  .artigo-layout { grid-template-columns: minmax(0, 1fr) var(--largura-lateral-lg); }
}

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