/* ==========================================================================
   Heavy Duty — design system
   Um único arquivo. Mobile-first. Componentes documentados em ARQUITETURA.md
   e demonstrados em /_estilo.
   Sumário: 1 Tokens · 2 Base · 3 Layout · 4 Tipografia · 5 Botões · 6 Header
   7 Mega-menu/drawer · 8 Seções/hero · 9 Cards · 10 Placeholders · 11 Badges
   12 Breadcrumb · 13 Tabela · 14 Formulários · 15 Feedback (toast, modal,
   drawer, vazio, skeleton) · 16 Tabs/accordion · 17 Footer · 18 Home · 19 Utilitários
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --hd-azul: #27417A;
  --hd-azul-900: #142545;
  --hd-azul-800: #1B305C;
  --hd-azul-600: #34539A;
  --hd-azul-100: #E6ECF6;
  --hd-azul-50: #F2F5FA;
  --hd-amarelo: #FFCC29;
  --hd-amarelo-600: #EBB400;
  --hd-amarelo-100: #FFF4D1;
  --preto: #1A1A1A;
  --cinza-800: #33373D;
  --cinza-600: #5B616B;
  --cinza-400: #9AA0A9;
  --cinza-300: #C9CDD3;
  --cinza-200: #E2E5E9;
  --cinza-100: #F1F3F5;
  --branco: #FFFFFF;
  --sucesso: #1E7A46;
  --sucesso-100: #E3F3EA;
  --erro: #C0262D;
  --erro-100: #FBE7E8;
  --alerta-100: #FFF4D1;

  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-4xl: clamp(1.9rem, 1rem + 5vw, 4.75rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --secao-py: clamp(3rem, 2rem + 4vw, 6rem);

  --raio: 6px;
  --raio-sm: 4px;
  --sombra-1: 0 1px 2px rgba(20, 37, 69, .08), 0 2px 8px rgba(20, 37, 69, .06);
  --sombra-2: 0 8px 28px rgba(20, 37, 69, .16);
  --borda: 1px solid var(--cinza-200);
  --container: 1280px;
  --gutter: clamp(1rem, .5rem + 2vw, 2rem);
  --header-h: 72px;
  --corte: clamp(24px, 4vw, 64px); /* altura do corte diagonal entre seções */
  --t: .18s ease;
}

/* 2 · Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* o atributo hidden sempre vence o display dos componentes */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; font-family: var(--fonte); font-weight: 500; font-size: var(--fs-md);
  line-height: 1.6; color: var(--preto); background: var(--branco);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.trava-rolagem { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--hd-azul); text-underline-offset: .18em; }
a:hover { color: var(--hd-azul-800); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Campos têm fundo claro: texto sempre escuro, mesmo dentro de seções azuis/pretas (que herdam branco). */
input, select, textarea, .campo__input, .campo__select, .campo__textarea, .busca__input { color: var(--preto); caret-color: var(--hd-azul); }
input[type="submit"], input[type="button"], input[type="reset"] { color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hd-amarelo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hd-azul-900); border-radius: 2px; }
::selection { background: var(--hd-amarelo); color: var(--preto); }
hr { border: 0; border-top: var(--borda); margin: var(--s-6) 0; }
.icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pular-conteudo {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--hd-amarelo); color: var(--preto); font-weight: 700; padding: var(--s-3) var(--s-4); border-radius: var(--raio-sm);
}
.pular-conteudo:focus { top: var(--s-4); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3 · Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--estreito { max-width: 860px; }
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
/* Cards/botões em grade: todas as linhas com a mesma altura (a da mais alta) */
.grid--2, .grid--3, .grid--4, .cat-tiles, .lista-docs { grid-auto-rows: 1fr; }
.pilha > * + * { margin-top: var(--s-4); }
.linha-flex { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* 4 · Tipografia --------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 var(--s-4); line-height: 1.1; letter-spacing: -.01em; overflow-wrap: break-word; }
h1, h2, .titulo { font-weight: 900; text-transform: uppercase; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); font-weight: 800; }
h4 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0 0 var(--s-4); }
.lead { font-size: var(--fs-lg); color: var(--cinza-600); max-width: 62ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hd-azul);
}
.eyebrow::before { content: ""; width: 24px; height: 4px; background: var(--hd-amarelo); }
.hero .eyebrow, .secao--azul .eyebrow, .secao--escura .eyebrow { color: var(--hd-amarelo); }
.destaque-amarelo { color: var(--hd-amarelo); }
.texto-mudo { color: var(--cinza-600); }
.prosa { max-width: 72ch; }
.prosa h2 { font-size: var(--fs-xl); margin-top: var(--s-6); }
.prosa ul { padding-left: 1.2em; }
.prosa li::marker { color: var(--hd-amarelo-600); }
.codigo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; letter-spacing: .02em; }

/* 5 · Botões ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--hd-azul); --btn-cor: var(--branco); --btn-borda: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: .75rem 1.5rem; border: 2px solid var(--btn-borda); border-radius: var(--raio);
  background: var(--btn-bg); color: var(--btn-cor); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.1;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover { color: var(--btn-cor); transform: translateY(-1px); box-shadow: var(--sombra-1); }
.btn:active { transform: translateY(0); }
.btn .icone { width: 1.15em; height: 1.15em; }
.btn--primario { --btn-bg: var(--hd-amarelo); --btn-cor: var(--preto); }
.btn--primario:hover { --btn-bg: var(--hd-amarelo-600); }
.btn--secundario { --btn-bg: var(--hd-azul); --btn-cor: var(--branco); }
.btn--secundario:hover { --btn-bg: var(--hd-azul-800); }
.btn--escuro { --btn-bg: var(--preto); --btn-cor: var(--branco); }
.btn--ghost { --btn-bg: transparent; --btn-cor: var(--hd-azul); --btn-borda: var(--hd-azul); }
.btn--ghost:hover { --btn-bg: var(--hd-azul); --btn-cor: var(--branco); }
.sobre-escuro .btn--ghost, .btn--ghost-claro { --btn-bg: transparent; --btn-cor: var(--branco); --btn-borda: rgba(255,255,255,.7); }
.sobre-escuro .btn--ghost:hover, .btn--ghost-claro:hover { --btn-bg: var(--branco); --btn-cor: var(--hd-azul); --btn-borda: var(--branco); }
.btn--link { --btn-bg: transparent; --btn-borda: transparent; --btn-cor: var(--hd-azul); padding-inline: 0; min-height: 0; }
.btn--link:hover { box-shadow: none; text-decoration: underline; }
.btn--sm { min-height: 36px; padding: .45rem .9rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-md); }
.btn--bloco { width: 100%; }
.btn--icone { padding: 0; width: 44px; min-height: 44px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .seta { transition: transform var(--t); }
.btn:hover .seta { transform: translateX(3px); }

/* 6 · Header ------------------------------------------------------------- */
.topo-faixa { background: var(--hd-azul-900); color: var(--cinza-300); font-size: var(--fs-xs); font-weight: 600; }
.topo-faixa .container { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 34px; align-items: center; }
.topo-faixa a { color: var(--branco); text-decoration: none; }
.topo-faixa a:hover { color: var(--hd-amarelo); }
.topo-faixa__links { display: none; gap: var(--s-5); }
@media (min-width: 900px) { .topo-faixa__links { display: flex; } }

.header {
  position: sticky; top: 0; z-index: 100; background: var(--branco);
  border-bottom: 1px solid var(--cinza-200); transition: box-shadow var(--t);
}
.header.is-rolado { box-shadow: var(--sombra-2); }
.header__barra { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.header__logo { flex: none; display: block; }
.header__logo .logo { width: 132px; height: auto; transition: width var(--t); }
@media (min-width: 900px) { .header__logo .logo { width: 156px; } .header.is-rolado .header__logo .logo { width: 128px; } }
.header__busca { flex: 1; display: none; max-width: 520px; }
@media (min-width: 900px) { .header__busca { display: block; } }
.header__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.header__orcamento { position: relative; }
.header__contador {
  position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--hd-amarelo); color: var(--preto); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.header__contador:empty, .header__contador[data-qtd="0"] { display: none; }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
.header__menu-btn { background: none; border: 0; color: var(--hd-azul); }
@media (min-width: 1100px) { .header__menu-btn { display: none; } }

/* Campo de busca (header, hero, 404) */
.busca { position: relative; display: flex; }
.busca__input {
  width: 100%; height: 48px; padding: 0 3.5rem 0 1.1rem; border: 2px solid var(--cinza-200); border-radius: var(--raio);
  background: var(--cinza-100); font-weight: 600; font-size: var(--fs-sm); transition: border-color var(--t), background var(--t);
}
.busca__input::placeholder { color: var(--cinza-600); font-weight: 500; }
.busca__input:focus { outline: none; border-color: var(--hd-azul); background: var(--branco); }
.busca__btn {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px; border: 0; border-radius: var(--raio-sm);
  background: var(--hd-amarelo); color: var(--preto); display: grid; place-items: center;
}
.busca__btn:hover { background: var(--hd-amarelo-600); }
.busca--lg .busca__input { height: 64px; font-size: var(--fs-md); padding-left: 1.4rem; border-color: transparent; background: var(--branco); box-shadow: var(--sombra-2); }
.busca--lg .busca__btn { width: auto; padding: 0 1.25rem; gap: var(--s-2); font-weight: 800; text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .05em; display: flex; align-items: center; }
.busca--lg .busca__input { padding-right: 9rem; }
@media (max-width: 479px) { .busca--lg .busca__btn span { display: none; } .busca--lg .busca__input { padding-right: 4rem; } }

/* 7 · Navegação principal + mega-menu ----------------------------------- */
.nav { display: none; background: var(--hd-azul); }
@media (min-width: 1100px) { .nav { display: block; } }
.nav__lista { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--s-1); }
.nav__item { position: static; }
.nav__link {
  display: flex; align-items: center; gap: var(--s-1); height: 48px; padding: 0 var(--s-4); border: 0; background: none;
  color: var(--branco); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 4px solid transparent;
}
.nav__link { white-space: nowrap; }
@media (max-width: 1279px) { .nav__link { padding: 0 var(--s-2); letter-spacing: 0; } } /* cabe o item Aplicações entre 1100 e 1280px */
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { color: var(--hd-amarelo); border-bottom-color: var(--hd-amarelo); }
.nav__link .icone { width: 1em; height: 1em; transition: transform var(--t); }
.nav__link[aria-expanded="true"] .icone { transform: rotate(180deg); }
.nav__item--destaque { margin-left: auto; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 90; background: var(--branco);
  border-top: 4px solid var(--hd-amarelo); box-shadow: var(--sombra-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.mega.is-aberto { opacity: 1; visibility: visible; transform: none; }
.mega__grid { display: grid; grid-template-columns: 280px 1fr; min-height: 380px; }
.mega__linhas { list-style: none; margin: 0; padding: var(--s-4) 0; background: var(--cinza-100); }
.mega__linha {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: .55rem var(--s-5); border: 0; background: none;
  text-align: left; color: var(--preto); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border-left: 4px solid transparent;
}
.mega__linha .icone { color: var(--hd-azul); }
.mega__linha:hover, .mega__linha.is-ativa { background: var(--branco); border-left-color: var(--hd-amarelo); color: var(--hd-azul); }
.mega__painel { display: none; padding: var(--s-6); }
.mega__painel.is-ativo { display: block; }
.mega__painel h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.mega__cats { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: var(--s-6); }
.mega__cats li { break-inside: avoid; }
.mega__cats a { display: block; padding: .45rem 0; color: var(--cinza-800); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--cinza-200); }
.mega__cats a:hover { color: var(--hd-azul); padding-left: 4px; }

/* Drawer (menu mobile e lista de orçamento) */
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 300; width: min(420px, 100%); background: var(--branco);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; visibility: hidden;
}
.drawer--esquerda { inset: 0 auto 0 0; transform: translateX(-100%); }
.drawer.is-aberto { transform: none; visibility: visible; }
.drawer__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: var(--borda); }
.drawer__topo h2 { font-size: var(--fs-lg); margin: 0; }
.drawer__corpo { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer__rodape { padding: var(--s-4) var(--s-5); border-top: var(--borda); background: var(--cinza-100); }
.veu { position: fixed; inset: 0; z-index: 250; background: rgba(20, 37, 69, .6); opacity: 0; visibility: hidden; transition: opacity var(--t); }
.veu.is-aberto { opacity: 1; visibility: visible; }
.fechar { background: none; border: 0; padding: var(--s-2); color: var(--preto); border-radius: var(--raio-sm); }
.fechar:hover { background: var(--cinza-100); }

.menu-mobile__lista { list-style: none; margin: 0 calc(var(--s-5) * -1); padding: 0; }
.menu-mobile__lista > li { border-bottom: var(--borda); }
.menu-mobile__lista summary, .menu-mobile__lista > li > a {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); font-weight: 700; color: var(--preto); text-decoration: none; cursor: pointer; list-style: none;
}
.menu-mobile__lista summary::-webkit-details-marker { display: none; }
.menu-mobile__lista summary .icone:first-child { color: var(--hd-azul); }
.menu-mobile__lista summary .icone:last-child { margin-left: auto; transition: transform var(--t); }
.menu-mobile__lista details[open] summary .icone:last-child { transform: rotate(180deg); }
.menu-mobile__sub { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 2rem); }
.menu-mobile__sub a { display: block; padding: .4rem 0; color: var(--cinza-800); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.menu-mobile__titulo { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-600); }

/* 8 · Seções, cabeçalhos de seção e hero -------------------------------- */
.secao { padding-block: var(--secao-py); position: relative; }
.secao--cinza { background: var(--cinza-100); }
.secao--azul { background: var(--hd-azul); color: var(--branco); }
.secao--escura { background: var(--preto); color: var(--branco); }
.secao--amarela { background: var(--hd-amarelo); color: var(--preto); }
.secao--azul .eyebrow, .secao--escura .eyebrow { color: var(--hd-amarelo); }
.secao--azul .lead, .secao--escura .lead { color: var(--cinza-300); }
.secao--amarela .eyebrow { color: var(--preto); }
.secao--amarela .eyebrow::before { background: var(--preto); }
/* Cortes diagonais: aplicar na seção que "invade" a anterior */
.corte-topo { clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); margin-top: calc(var(--corte) * -1); padding-top: calc(var(--secao-py) + var(--corte)); }
.corte-base { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); padding-bottom: calc(var(--secao-py) + var(--corte)); }

.secao-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.secao-header__texto { max-width: 720px; }
.secao-header h2 { margin-bottom: var(--s-2); }
.secao-header p { margin: 0; }
.secao-header--centro { flex-direction: column; align-items: center; text-align: center; }
.secao-header--centro .secao-header__texto { margin-inline: auto; }

/* Hero fixo (sem banner ativo): fundo azul chapado da marca. */
.hero { position: relative; overflow: hidden; color: var(--branco); background: var(--hd-azul); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--s-6); align-items: center; padding-block: clamp(2rem, 1.2rem + 3vw, 4rem); }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: clamp(2rem, 4vw, 4.5rem); } }
.hero h1 { font-size: clamp(2rem, 1.1rem + 3.6vw, 3.6rem); line-height: 1; margin-bottom: var(--s-4); text-wrap: balance; }
@media (min-width: 1000px) { .hero h1 { max-width: 15ch; } }
.hero h1 em { font-style: normal; color: var(--hd-amarelo); }
.hero__sub { font-size: var(--fs-md); color: var(--hd-azul-100); max-width: 54ch; margin-bottom: var(--s-5); }
.hero__busca { max-width: 640px; }
.hero__atalhos { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-atalho {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: .4rem .9rem;
  border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(255 255 255 / .08);
  color: var(--branco); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; transition: background var(--t), border-color var(--t), color var(--t);
}
.chip-atalho .icone { width: 16px; height: 16px; color: var(--hd-amarelo); }
.chip-atalho:hover, .chip-atalho:focus-visible { background: var(--hd-amarelo); border-color: var(--hd-amarelo); color: var(--preto); }
.chip-atalho:hover .icone, .chip-atalho:focus-visible .icone { color: var(--preto); }
/* "Como podemos ajudar?": um caminho por perfil */
.hero__perfis { display: grid; gap: var(--s-3); position: relative; }
.hero__perfis-titulo { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--branco); justify-self: start; background: var(--hd-azul); padding: 2px 8px 2px 0; }
.perfil-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--raio); background: var(--branco); color: var(--preto);
  text-decoration: none; box-shadow: var(--sombra-2); border-left: 6px solid transparent;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.perfil-card:hover, .perfil-card:focus-visible { transform: translateX(-4px); border-left-color: var(--hd-amarelo); box-shadow: var(--sombra-3, var(--sombra-2)); }
.perfil-card__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--raio); background: var(--hd-azul-100); color: var(--hd-azul); }
.perfil-card__icone .icone { width: 24px; height: 24px; }
.perfil-card__texto { display: grid; gap: 2px; }
.perfil-card__texto strong { font-size: var(--fs-md); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; color: var(--hd-azul); }
.perfil-card__texto span { font-size: var(--fs-sm); color: var(--cinza-600); line-height: 1.35; }
.perfil-card__seta { width: 20px; height: 20px; color: var(--hd-azul); }
.perfil-card--destaque { background: var(--preto); color: var(--branco); border-left-color: var(--hd-amarelo); }
.perfil-card--destaque .perfil-card__icone { background: var(--hd-amarelo); color: var(--preto); }
.perfil-card--destaque .perfil-card__texto strong { color: var(--hd-amarelo); }
.perfil-card--destaque .perfil-card__texto span { color: rgb(255 255 255 / .8); }
.perfil-card--destaque .perfil-card__seta { color: var(--hd-amarelo); }
/* faixa de números ocupa a largura toda (sem disputar com o bloco amarelo) */
.hero__numeros { position: relative; z-index: 1; background: #1d3363; border-top: 1px solid rgb(255 255 255 / .12); }
.hero__numeros .numeros { border-top: 0; background: transparent; }
.hero__numeros .numeros__item { background: transparent; padding-block: var(--s-4); }
.hero__numeros .numeros__valor { font-size: var(--fs-xl); }
.hero__numeros .numeros__valor .icone { width: 28px; height: 28px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__visual { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin-inline: auto; }

/* Hero compacto das páginas internas */
.cabecalho-pagina { position: relative; background: var(--hd-azul); color: var(--branco); padding-block: var(--s-7) calc(var(--s-7) + var(--corte)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); overflow: hidden; }
.cabecalho-pagina > .container { position: relative; }
.cabecalho-pagina h1 { margin-bottom: var(--s-3); }
.cabecalho-pagina .lead { color: var(--hd-azul-100); margin: 0; }
.cabecalho-pagina .eyebrow { color: var(--hd-amarelo); }
.cabecalho-pagina .breadcrumb { margin-bottom: var(--s-5); }

/* Faixa de números */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.15); }
@media (min-width: 800px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numeros__item { background: var(--hd-azul); padding: var(--s-5) var(--s-4); }
.numeros__valor { display: block; font-size: var(--fs-2xl); font-weight: 900; color: var(--hd-amarelo); line-height: 1; }
.numeros__rotulo { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hd-azul-100); }

/* 9 · Cards -------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--branco); border: var(--borda);
  border-radius: var(--raio); overflow: hidden; transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); border-color: transparent; }
.card__midia { position: relative; aspect-ratio: 4 / 3; background: var(--cinza-100); }
.card__midia img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-4); }
.card__midia .badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1; }
.card__corpo { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; padding: var(--s-4) var(--s-5) var(--s-5); }
.card__eyebrow { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-600); }
.card__titulo { font-size: var(--fs-lg); font-weight: 800; line-height: 1.25; margin: 0; }
.card__titulo a { color: var(--preto); text-decoration: none; }
.card__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* card inteiro clicável */
.card__texto { font-size: var(--fs-sm); color: var(--cinza-600); margin: 0; }
.card__rodape { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 700; }
.card__rodape .btn, .card__rodape a { position: relative; z-index: 1; }
.card__meta { color: var(--cinza-600); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.card__seta { color: var(--hd-azul); display: inline-flex; transition: transform var(--t); }
.card:hover .card__seta { transform: translateX(4px); }

/* Card de linha (tile) */
.card-linha {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: 190px; padding: var(--s-5); background: var(--branco); border: var(--borda); border-radius: var(--raio);
  color: var(--preto); text-decoration: none; overflow: hidden; transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.card-linha::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--hd-amarelo); transition: width .25s ease; }
.card-linha:hover { background: var(--hd-azul); color: var(--branco); transform: translateY(-3px); box-shadow: var(--sombra-2); }
.card-linha:hover::after { width: 100%; }
.card-linha__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--raio); background: var(--hd-azul-100); color: var(--hd-azul); transition: background var(--t), color var(--t); }
.card-linha__icone .icone { width: 30px; height: 30px; }
.card-linha:hover .card-linha__icone { background: var(--hd-amarelo); color: var(--preto); }
.card-linha__nome, .card-linha__chamada { display: block; }
.card-linha__nome { font-size: var(--fs-lg); font-weight: 900; text-transform: uppercase; line-height: 1.15; margin: 0 0 var(--s-1); }
.card-linha__chamada { font-size: var(--fs-sm); color: var(--cinza-600); margin: 0; transition: color var(--t); }
.card-linha:hover .card-linha__chamada { color: var(--hd-azul-100); }
.card-linha__seta { position: absolute; top: var(--s-5); right: var(--s-5); color: var(--cinza-400); transition: color var(--t), transform var(--t); }
.card-linha:hover .card-linha__seta { color: var(--hd-amarelo); transform: translateX(4px); }
.card-linha--destaque { background: var(--hd-amarelo); border-color: var(--hd-amarelo); }
.card-linha--destaque .card-linha__icone { background: var(--preto); color: var(--hd-amarelo); }
.card-linha--destaque .card-linha__chamada { color: var(--cinza-800); }

/* Card de post */
.card-post .card__midia { aspect-ratio: 16 / 9; }
.card-post .card__titulo { font-size: var(--fs-lg); }

/* Card de pilar / benefício */
.pilar { padding: var(--s-6) var(--s-5); border-top: 4px solid var(--hd-amarelo); background: rgba(255,255,255,.04); }
.pilar__icone { width: 48px; height: 48px; color: var(--hd-amarelo); margin-bottom: var(--s-4); }
.pilar h3 { text-transform: uppercase; font-weight: 900; font-size: var(--fs-lg); }
.pilar p { color: var(--cinza-300); margin: 0; font-size: var(--fs-sm); }
.secao:not(.secao--escura):not(.secao--azul) .pilar { background: var(--branco); box-shadow: var(--sombra-1); }
.secao:not(.secao--escura):not(.secao--azul) .pilar p { color: var(--cinza-600); }
.secao:not(.secao--escura):not(.secao--azul) .pilar__icone { color: var(--hd-azul); }

/* 10 · Placeholders de imagem (enquanto não há foto) --------------------- */
.ph {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; overflow: hidden;
  background: linear-gradient(135deg, var(--hd-azul-50) 0%, var(--hd-azul-100) 100%); color: var(--hd-azul);
}
.ph::before { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(39,65,122,.06) 14px 16px); }
.ph__icone { position: relative; width: 34%; max-width: 120px; height: auto; aspect-ratio: 1; opacity: .85; stroke-width: 1.2; }
.ph__rotulo { position: absolute; left: var(--s-3); bottom: var(--s-3); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-azul-600); background: rgba(255,255,255,.75); padding: 2px 8px; border-radius: 2px; }
.ph--escuro { background: linear-gradient(135deg, var(--hd-azul-800), var(--hd-azul-900)); color: var(--hd-amarelo); }
.ph--escuro::before { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.04) 14px 16px); }
.ph--escuro .ph__rotulo { background: rgba(0,0,0,.35); color: var(--cinza-300); }

/* Disco ilustrativo do hero (CSS puro) */
.disco-ilustra { position: absolute; inset: 6%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--hd-azul-900) 0 9%, var(--cinza-300) 9% 10.5%, transparent 10.5%),
    radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(255,255,255,.08) 30% 31%, transparent 31%),
    conic-gradient(from 20deg, #2c2f35, #4a4f57, #2c2f35, #3c4048, #2c2f35);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 10px rgba(255,255,255,.04);
  animation: gira 40s linear infinite;
}
.disco-ilustra::after { /* rótulo amarelo do disco */
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 32%, var(--hd-amarelo) 32% 100%);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 70%); mask: radial-gradient(circle, #000 0 70%, transparent 70%);
}
.disco-ilustra__selo { position: absolute; z-index: 2; right: 0; bottom: 10%; background: var(--preto); color: var(--branco); padding: var(--s-3) var(--s-4); border-left: 6px solid var(--hd-amarelo); box-shadow: var(--sombra-2); }
.disco-ilustra__selo strong { display: block; font-size: var(--fs-xl); font-weight: 900; line-height: 1; color: var(--hd-amarelo); }
.disco-ilustra__selo span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
@keyframes gira { to { transform: rotate(360deg); } }

/* 11 · Badges ------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--raio-sm); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; background: var(--cinza-200); color: var(--cinza-800); }
.badge--amarelo { background: var(--hd-amarelo); color: var(--preto); }
.badge--azul { background: var(--hd-azul); color: var(--branco); }
.badge--claro { background: var(--hd-azul-100); color: var(--hd-azul); }
.badge--escuro { background: var(--preto); color: var(--hd-amarelo); }
.badge--sucesso { background: var(--sucesso-100); color: var(--sucesso); }
.badge--erro { background: var(--erro-100); color: var(--erro); }
.badge--contorno { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--hd-azul); }

/* 12 · Breadcrumb -------------------------------------------------------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .5; }
.breadcrumb a { color: inherit; text-decoration: none; opacity: .8; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb [aria-current] { opacity: 1; }
.cabecalho-pagina .breadcrumb { color: var(--hd-azul-100); }
.cabecalho-pagina .breadcrumb [aria-current] { color: var(--hd-amarelo); }

/* 13 · Tabela de variações ----------------------------------------------- */
.tabela-ferramentas { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.tabela-ferramentas .busca { flex: 1 1 260px; max-width: 360px; }
.tabela-ferramentas .busca__input { height: 42px; }
.tabela-ferramentas .busca__btn { pointer-events: none; background: transparent; color: var(--cinza-600); }
.tabela-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 .8rem; border: 1.5px solid var(--cinza-300); border-radius: 999px; background: var(--branco); font-size: var(--fs-xs); font-weight: 700; color: var(--cinza-800); }
.chip:hover { border-color: var(--hd-azul); color: var(--hd-azul); }
.chip[aria-pressed="true"] { background: var(--hd-azul); border-color: var(--hd-azul); color: var(--branco); }
.tabela-wrap { position: relative; overflow: auto; max-height: 70vh; border: var(--borda); border-radius: var(--raio); background: var(--branco); }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tabela th, .tabela td { padding: .7rem 1rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--cinza-200); }
.tabela thead th { position: sticky; top: 0; z-index: 2; background: var(--hd-azul); color: var(--branco); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tabela th[data-ordenar] { cursor: pointer; user-select: none; }
.tabela th[data-ordenar]::after { content: "↕"; margin-left: 6px; opacity: .45; }
.tabela th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--hd-amarelo); }
.tabela th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--hd-amarelo); }
.tabela tbody tr:nth-child(even) td { background: var(--cinza-100); }
.tabela tbody tr:hover td { background: var(--hd-amarelo-100); }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
.tabela tbody tr td:first-child { background: var(--branco); }
.tabela tbody tr:nth-child(even) td:first-child { background: var(--cinza-100); }
.tabela tbody tr:hover td:first-child { background: var(--hd-amarelo-100); }
.tabela thead th:first-child { left: 0; z-index: 3; }
.tabela__codigo { display: inline-flex; align-items: center; gap: 6px; }
.copiar { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--cinza-600); }
.copiar:hover { background: var(--hd-azul-100); color: var(--hd-azul); }
.copiar .icone { width: 16px; height: 16px; }
.tabela__vazio { padding: var(--s-6); text-align: center; color: var(--cinza-600); }
.tabela-rodape { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--cinza-600); }
/* Mobile: linhas viram cartões (adicione .tabela--cartoes e data-rotulo nos <td>) */
@media (max-width: 699px) {
  .tabela--cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display: block; width: 100%; }
  .tabela--cartoes tr { padding: var(--s-3) var(--s-4); border-bottom: 6px solid var(--cinza-100); }
  .tabela--cartoes td { display: flex; justify-content: space-between; gap: var(--s-4); padding: .3rem 0; border: 0; white-space: normal; background: transparent !important; position: static; text-align: right; }
  .tabela--cartoes td::before { content: attr(data-rotulo); font-weight: 700; color: var(--cinza-600); text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
  .tabela--cartoes td:first-child { font-size: var(--fs-md); }
  .tabela-wrap:has(.tabela--cartoes) { max-height: none; }
}

/* 14 · Formulários ------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__linha { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form__linha--2 { grid-template-columns: 1fr 1fr; } .form__linha--3 { grid-template-columns: 2fr 1fr 1fr; } }
.campo { display: grid; gap: 6px; }
.campo__label { font-size: var(--fs-sm); font-weight: 700; color: var(--preto); }
.campo__label .obrig { color: var(--erro); margin-left: 2px; }
.campo__input, .campo__select, .campo__textarea {
  width: 100%; min-height: 48px; padding: .7rem .95rem; border: 2px solid var(--cinza-300); border-radius: var(--raio);
  background: var(--branco); font-weight: 600; font-size: var(--fs-md); transition: border-color var(--t), box-shadow var(--t);
}
.campo__textarea { min-height: 130px; resize: vertical; }
.campo__select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--hd-azul) 50%), linear-gradient(135deg, var(--hd-azul) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo__input:hover, .campo__select:hover, .campo__textarea:hover { border-color: var(--cinza-400); }
.campo__input:focus, .campo__select:focus, .campo__textarea:focus { outline: none; border-color: var(--hd-azul); box-shadow: 0 0 0 4px var(--hd-azul-100); }
.campo__input::placeholder, .campo__textarea::placeholder { color: var(--cinza-400); font-weight: 500; }
.campo__ajuda { font-size: var(--fs-xs); color: var(--cinza-600); }
.campo__erro { display: none; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--erro); }
.campo--erro .campo__input, .campo--erro .campo__select, .campo--erro .campo__textarea { border-color: var(--erro); background: var(--erro-100); }
.campo--erro .campo__erro { display: flex; }
.campo--ok .campo__input { border-color: var(--sucesso); }

/* Radio-cards (perfil do lead) */
.radio-cards { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border: 0; padding: 0; margin: 0; }
.radio-cards legend { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s-3); padding: 0; }
.radio-card { position: relative; display: block; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card__caixa { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-4); border: 2px solid var(--cinza-300); border-radius: var(--raio); background: var(--branco); transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.radio-card__caixa .icone { width: 28px; height: 28px; color: var(--hd-azul); }
.radio-card__titulo { font-weight: 800; text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .04em; }
.radio-card__desc { font-size: var(--fs-xs); color: var(--cinza-600); }
.radio-card:hover .radio-card__caixa { border-color: var(--hd-azul-600); }
.radio-card input:checked + .radio-card__caixa { border-color: var(--hd-azul); background: var(--hd-azul-50); box-shadow: inset 0 -4px 0 var(--hd-amarelo); }
.radio-card input:focus-visible + .radio-card__caixa { outline: 3px solid var(--hd-amarelo); outline-offset: 2px; }
.campo--erro .radio-card__caixa { border-color: var(--erro); }

.checkbox { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.checkbox input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 2px solid var(--cinza-400); border-radius: var(--raio-sm); background: var(--branco); display: grid; place-items: center; cursor: pointer; }
.checkbox input::after { content: ""; width: 6px; height: 11px; border: solid var(--preto); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.checkbox input:checked { background: var(--hd-amarelo); border-color: var(--hd-amarelo); }
.checkbox input:checked::after { opacity: 1; }
.campo--erro .checkbox input { border-color: var(--erro); }

/* 15 · Feedback ---------------------------------------------------------- */
.alerta { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--raio); border-left: 5px solid var(--hd-azul); background: var(--hd-azul-50); font-size: var(--fs-sm); }
.alerta .icone { color: var(--hd-azul); margin-top: 2px; }
.alerta--sucesso { border-color: var(--sucesso); background: var(--sucesso-100); }
.alerta--sucesso .icone { color: var(--sucesso); }
.alerta--erro { border-color: var(--erro); background: var(--erro-100); }
.alerta--erro .icone { color: var(--erro); }
.alerta--aviso { border-color: var(--hd-amarelo-600); background: var(--alerta-100); }
.alerta--aviso .icone { color: var(--preto); }

.toasts { position: fixed; z-index: 500; left: 50%; bottom: var(--s-5); transform: translateX(-50%); display: grid; gap: var(--s-2); width: min(440px, calc(100% - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--raio); background: var(--preto); color: var(--branco); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--sombra-2); border-left: 5px solid var(--hd-amarelo); pointer-events: auto; animation: toast-in .25s ease; }
.toast--sucesso { border-left-color: #3BC77A; }
.toast--erro { border-left-color: #FF5A60; }
.toast .icone { color: var(--hd-amarelo); }
.toast.is-saindo { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: var(--s-4); visibility: hidden; opacity: 0; transition: opacity var(--t), visibility var(--t); }
.modal.is-aberto { visibility: visible; opacity: 1; }
.modal__fundo { position: absolute; inset: 0; background: rgba(20, 37, 69, .65); }
.modal__caixa { position: relative; width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: var(--branco); border-radius: var(--raio); border-top: 6px solid var(--hd-amarelo); box-shadow: var(--sombra-2); transform: translateY(10px); transition: transform var(--t); }
.modal.is-aberto .modal__caixa { transform: none; }
.modal__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5) 0; }
.modal__topo h2 { font-size: var(--fs-xl); margin: 0; }
.modal__corpo { padding: var(--s-4) var(--s-5); }
.modal__rodape { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--cinza-100); }

/* Item da lista de orçamento (dentro do drawer) */
.item-orc { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: var(--borda); }
.item-orc__img { width: 56px; height: 56px; border-radius: var(--raio-sm); overflow: hidden; }
.item-orc__img .ph { min-height: 0; }
.item-orc__nome { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.item-orc__cod { font-size: var(--fs-xs); color: var(--cinza-600); }
.qtd { display: inline-flex; align-items: center; border: 2px solid var(--cinza-300); border-radius: var(--raio-sm); }
.qtd button { width: 30px; height: 32px; border: 0; background: none; font-weight: 800; }
.qtd input { width: 44px; height: 32px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }

.vazio { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); text-align: center; border: 2px dashed var(--cinza-300); border-radius: var(--raio); background: var(--cinza-100); }
.vazio__icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--hd-azul-100); color: var(--hd-azul); }
.vazio__icone .icone { width: 34px; height: 34px; }
.vazio h3 { margin: 0; text-transform: uppercase; font-weight: 900; font-size: var(--fs-lg); }
.vazio p { margin: 0; color: var(--cinza-600); max-width: 46ch; }

.skeleton { position: relative; overflow: hidden; background: var(--cinza-200); border-radius: var(--raio-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: brilho 1.3s infinite; }
.skeleton--texto { height: .9em; margin-bottom: .6em; }
.skeleton--titulo { height: 1.4em; width: 70%; margin-bottom: .8em; }
.skeleton--midia { aspect-ratio: 4 / 3; border-radius: 0; }
@keyframes brilho { to { transform: translateX(100%); } }

/* 16 · Tabs e accordion -------------------------------------------------- */
.tabs__lista { display: flex; gap: var(--s-1); overflow-x: auto; border-bottom: 2px solid var(--cinza-200); scrollbar-width: none; }
.tabs__lista::-webkit-scrollbar { display: none; }
.tabs__aba { flex: none; padding: var(--s-3) var(--s-5); border: 0; background: none; font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-600); border-bottom: 4px solid transparent; margin-bottom: -2px; }
.tabs__aba:hover { color: var(--hd-azul); }
.tabs__aba[aria-selected="true"] { color: var(--hd-azul); border-bottom-color: var(--hd-amarelo); }
.tabs__painel { padding: var(--s-5) 0; }
.tabs__painel[hidden] { display: none; }

.accordion { border-top: var(--borda); }
.accordion details { border-bottom: var(--borda); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 800; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background-color: var(--hd-azul-100); background-image: linear-gradient(var(--hd-azul), var(--hd-azul)), linear-gradient(var(--hd-azul), var(--hd-azul)); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat; transition: transform var(--t); }
.accordion details[open] summary::after { transform: rotate(45deg); background-color: var(--hd-amarelo); }
.accordion summary:hover { color: var(--hd-azul); }
.accordion__corpo { padding: 0 0 var(--s-5); color: var(--cinza-800); }

/* 17 · Footer ------------------------------------------------------------ */
.rodape { background: var(--hd-azul-900); color: var(--cinza-300); font-size: var(--fs-sm); }
.rodape a { color: var(--cinza-300); text-decoration: none; }
.rodape a:hover { color: var(--hd-amarelo); }
.rodape__cta { background: var(--hd-amarelo); color: var(--preto); }
.rodape__cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-6); }
.rodape__cta h2 { margin: 0; font-size: var(--fs-xl); }
.rodape__grid { display: grid; gap: var(--s-6); padding-block: var(--s-8) var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .rodape__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .rodape__grid { grid-template-columns: 1.3fr 1.6fr 1fr 1fr; } }
.rodape__marca .logo { width: 170px; margin-bottom: var(--s-4); }
.rodape__titulo { margin: 0 0 var(--s-4); color: var(--branco); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rodape__lista--2col { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
.rodape__contato li { display: flex; gap: var(--s-2); align-items: flex-start; }
.rodape__contato .icone { color: var(--hd-amarelo); margin-top: 3px; width: 1.1em; height: 1.1em; }
.redes { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio); background: rgba(255,255,255,.08); color: var(--branco); }
.redes a:hover { background: var(--hd-amarelo); color: var(--preto); }
.rodape__base { border-top: 1px solid rgba(255,255,255,.1); }
.rodape__base .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-4); font-size: var(--fs-xs); }

/* 18 · Home -------------------------------------------------------------- */
.faixa-codigo { background: var(--hd-amarelo); }
.faixa-codigo__grid { display: grid; gap: var(--s-5); align-items: center; padding-block: var(--s-7); }
@media (min-width: 900px) { .faixa-codigo__grid { grid-template-columns: auto 1fr; gap: var(--s-7); } }
.faixa-codigo h2 { margin: 0; font-size: var(--fs-2xl); }
.faixa-codigo p { margin: var(--s-1) 0 0; font-weight: 600; }
.faixa-codigo .busca__input { height: 60px; border: 3px solid var(--preto); background: var(--branco); font-size: var(--fs-lg); font-weight: 700; letter-spacing: .04em; }
.faixa-codigo .busca__btn { background: var(--preto); color: var(--hd-amarelo); width: auto; padding: 0 1.25rem; font-weight: 800; text-transform: uppercase; font-size: var(--fs-sm); gap: var(--s-2); display: flex; align-items: center; }
.faixa-codigo .busca__btn:hover { background: var(--hd-azul); }
.faixa-codigo .busca__input { padding-right: 8.5rem; }

.cep-teaser { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .cep-teaser { grid-template-columns: 1fr 1fr; } }
.cep-teaser__form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cep-teaser__form .campo__input { flex: 1 1 200px; max-width: 260px; font-size: var(--fs-lg); letter-spacing: .1em; }
.mapa-ilustra { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio); overflow: hidden; background: var(--hd-azul-800);
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; }
.mapa-ilustra__pin { position: absolute; color: var(--hd-amarelo); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.mapa-ilustra__pin .icone { width: 36px; height: 36px; fill: var(--hd-amarelo); stroke: var(--hd-azul-900); stroke-width: 1.5; }
.mapa-ilustra__voce { position: absolute; left: 46%; top: 48%; width: 18px; height: 18px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 8px rgba(255,255,255,.2), 0 0 0 18px rgba(255,255,255,.08); }

.banda-revenda { position: relative; overflow: hidden; background: var(--preto); color: var(--branco); }
.banda-revenda__grid { position: relative; display: grid; gap: var(--s-6); padding-block: var(--secao-py); }
@media (min-width: 900px) { .banda-revenda__grid { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.banda-revenda ul { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.banda-revenda li { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 600; }
.banda-revenda li .icone { color: var(--hd-amarelo); margin-top: 2px; }
.banda-revenda__cartao { background: var(--branco); color: var(--preto); padding: var(--s-6); border-radius: var(--raio); box-shadow: var(--sombra-2); border-top: 6px solid var(--hd-azul); }
.banda-revenda__cartao strong { display: block; font-size: var(--fs-3xl); font-weight: 900; line-height: 1; color: var(--hd-azul); }

/* 19 · Utilitários ------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mb-6 { margin-bottom: var(--s-6); }
.centro { text-align: center; }
.esconder-mobile { display: none; }
@media (min-width: 900px) { .esconder-mobile { display: initial; } .esconder-desktop { display: none; } }
.guia-amostra { padding: var(--s-5); border: var(--borda); border-radius: var(--raio); background: var(--branco); }
.guia-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.guia-cor { border-radius: var(--raio); overflow: hidden; border: var(--borda); font-size: var(--fs-xs); font-weight: 700; }
.guia-cor span { display: block; height: 72px; }
.guia-cor p { margin: 0; padding: var(--s-2) var(--s-3); }

/* Card de produto do catálogo (usado também na home) */
.cat-card[hidden] { display: none; }
.cat-card__faixa { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--hd-azul); }
.cat-card__faixa .icone { width: 16px; height: 16px; }
.cat-card .card__midia { background: var(--branco); border-bottom: var(--borda); }
.img-falhou { visibility: hidden; }

/* ==================== catalogo (antes assets/css/catalogo.css) ==================== */
/* Catálogo Heavy Duty — só nas páginas do catálogo (meta 'css'). Usa os tokens de site.css. */

/* ---------- Lista (linha / categoria) ---------- */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-7); }
.cat-tile {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--borda); border-radius: var(--raio);
  background: var(--branco); color: var(--preto); text-decoration: none; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.cat-tile:hover { border-color: var(--hd-amarelo); box-shadow: var(--sombra-1); transform: translateY(-2px); }
.cat-tile__icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-sm); background: var(--hd-azul); color: var(--hd-amarelo); }
.cat-tile strong { display: block; font-size: var(--fs-sm); font-weight: 800; line-height: 1.25; }
.cat-tile small { font-size: var(--fs-xs); color: var(--cinza-600); font-weight: 600; }
.cat-irmas { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); margin-bottom: var(--s-6); scrollbar-width: thin; }
.cat-irmas .chip { flex: none; text-decoration: none; }

.cat-barra { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.cat-barra .busca { flex: 1 1 240px; max-width: 420px; }
.cat-barra .busca__input { height: 44px; }
.cat-barra .busca__btn { pointer-events: none; background: transparent; color: var(--cinza-600); }
.cat-ordem { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--cinza-600); }
.cat-ordem .campo__select { height: 44px; min-width: 0; width: auto; }
.cat-chips { margin-bottom: var(--s-3); align-items: center; }
.cat-chips__rotulo { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-600); margin-right: var(--s-1); }
.cat-chip__n { opacity: .6; font-weight: 600; }
.cat-contagem { font-size: var(--fs-sm); color: var(--cinza-600); margin: var(--s-4) 0; }

/* ---------- CTAs ---------- */
.cat-cta__grid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .cat-cta__grid { grid-template-columns: 1fr 1fr; } }
.cat-cta__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: start; padding: var(--s-5); border-radius: var(--raio); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.cat-cta__item h2 { font-size: var(--fs-xl); margin: 0 0 var(--s-1); }
.cat-cta__item p { margin: 0; opacity: .85; }
.cat-cta__item .btn { grid-column: 2; justify-self: start; }
.cat-cta__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hd-amarelo); color: var(--preto); }

/* ---------- Produto ---------- */
.cat-topo { padding-top: var(--s-4); }
.cat-topo .breadcrumb { margin: 0; }
.cat-produto { padding: var(--s-5) 0 var(--s-8); }
.cat-produto__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .cat-produto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); align-items: start; } }
.cat-galeria { min-width: 0; }
@media (min-width: 900px) { .cat-galeria { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }
.cat-galeria__principal { aspect-ratio: 1; border: var(--borda); border-radius: var(--raio); background: var(--branco); overflow: hidden; display: grid; place-items: center; }
.cat-galeria__principal img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-5); }
.cat-galeria__principal .ph { width: 100%; height: 100%; }
.cat-galeria__miniaturas { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; padding-bottom: 2px; }
.cat-galeria__mini { flex: none; width: 72px; height: 72px; padding: 4px; border: 2px solid var(--cinza-200); border-radius: var(--raio-sm); background: var(--branco); cursor: pointer; }
.cat-galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.cat-galeria__mini[aria-current="true"], .cat-galeria__mini:hover { border-color: var(--hd-azul); }

.cat-info { min-width: 0; }
.cat-info__cat { text-decoration: none; }
.cat-info__titulo { font-size: var(--fs-3xl); line-height: 1.05; margin: var(--s-2) 0 var(--s-4); overflow-wrap: anywhere; }
.cat-info__resumo { color: var(--cinza-800); }
.cat-fatos { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-5) 0; }
.cat-fatos li { display: flex; flex-direction: column; padding: var(--s-2) var(--s-4); border-left: 4px solid var(--hd-amarelo); background: var(--hd-azul-50); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; }
.cat-fatos strong { font-size: var(--fs-lg); font-weight: 900; color: var(--hd-azul); line-height: 1.2; }
.cat-fatos span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-600); }
.cat-materiais { margin: var(--s-4) 0; }
.cat-materiais__rotulo { display: block; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-600); margin-bottom: var(--s-2); }
.cat-materiais ul { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.cat-materiais li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--hd-amarelo-100); font-size: var(--fs-sm); font-weight: 700; }
.cat-materiais .icone { width: 14px; height: 14px; color: var(--sucesso); }
.cat-destaques { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: var(--s-2); }
.cat-destaques li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-sm); }
.cat-destaques .icone { flex: none; width: 18px; height: 18px; color: var(--hd-azul); margin-top: 2px; }
.cat-info__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.cat-rascunho { display: flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--cinza-600); }
.cat-rascunho .icone { width: 14px; height: 14px; }

.cat-codigos { scroll-margin-top: var(--header-h); }
.cat-codigos__topo { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: end; justify-content: space-between; margin-bottom: var(--s-5); }
.cat-codigos__topo h2 { margin: var(--s-1) 0 0; }
.cat-codigos__topo p { max-width: 460px; margin: 0; font-size: var(--fs-sm); }
.cat-tabela-wrap { max-height: 75vh; }
.cat-tabela__desc { white-space: normal !important; min-width: 220px; max-width: 360px; font-weight: 600; }
.cat-ean { display: block; font-size: var(--fs-xs); color: var(--cinza-600); font-weight: 500; }
/* Atributos técnicos (app/atributos.php): marcador de valor de referência e colunas só no desktop */
.cat-ref { font-size: .7em; color: var(--cinza-600); margin-left: 1px; }
.cat-nota-ref { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--cinza-600); }
@media (max-width: 699px) { .tabela--cartoes td.cat-td--desk { display: none; } }
.cat-tabela tbody tr { scroll-margin-top: calc(var(--header-h) + 60px); }
.cat-tabela tbody tr.is-destaque td, .cat-tabela tbody tr.is-destaque td:first-child { background: var(--hd-amarelo-100); }
.cat-tabela tbody tr.is-destaque td:first-child { box-shadow: inset 4px 0 0 var(--hd-amarelo); }
.cat-tabela .tabela__codigo { font-weight: 800; font-size: var(--fs-md); }
.cat-orcar { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.cat-orcar .qtd input { width: 52px; }
.cat-orcar .btn.is-ok { background: var(--sucesso); border-color: var(--sucesso); color: var(--branco); }
/* Coluna Embalagem (logo após o código): qtd. por embalagem de venda + caixa master */
.cat-emb strong { font-weight: 800; }
.cat-emb small { display: block; font-size: var(--fs-xs); color: var(--cinza-600); font-weight: 500; }
.cat-orcar__qtd { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cat-orcar__emb { font-size: 11px; line-height: 1.1; color: var(--cinza-600); white-space: nowrap; }
.cat-gatilho { display: none; }
/* Desktop/tablet: a linha mostra só um "+" discreto à direita; ao passar o mouse (ou tocar, ou focar
   pelo teclado) abre o painel Orçar / Comprar online sobre o fim da linha, fixo na borda direita */
@media (min-width: 700px) {
  .cat-tabela th, .cat-tabela td { padding-left: .75rem; padding-right: .75rem; }
  .cat-tabela th.cat-tabela__acoes, .cat-tabela td.cat-tabela__acoes { position: sticky; right: 0; width: 52px; padding-left: 0; padding-right: .5rem; }
  .cat-tabela thead th.cat-tabela__acoes { z-index: 3; background: var(--hd-azul); }
  .cat-tabela tbody td.cat-tabela__acoes { z-index: 1; overflow: visible; background: var(--branco); box-shadow: -8px 0 10px -8px rgba(15, 30, 60, .18); }
  .cat-tabela tbody tr:nth-child(even) td.cat-tabela__acoes { background: var(--cinza-100); }
  .cat-tabela tbody tr.is-destaque td.cat-tabela__acoes { background: var(--hd-amarelo-100); }
  .cat-tabela tbody tr { cursor: pointer; }
  .cat-tabela tbody tr:hover td, .cat-tabela tbody tr.is-aberta td, .cat-tabela tbody tr:focus-within td { background: var(--hd-amarelo-100); }
  .cat-gatilho { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--cinza-300); border-radius: 50%; background: var(--branco); color: var(--hd-azul); }
  .cat-gatilho .icone { width: 18px; height: 18px; }
  .cat-orcar { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); padding: .4rem .5rem .4rem .75rem; border-radius: var(--raio); background: var(--branco); box-shadow: 0 6px 22px rgba(15, 30, 60, .22); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; white-space: nowrap; }
  .cat-tabela tbody tr:hover .cat-orcar, .cat-tabela tbody tr.is-aberta .cat-orcar, .cat-tabela tbody tr:focus-within .cat-orcar { opacity: 1; visibility: visible; }
  .cat-comprar span { display: inline; }
}
@media (min-width: 700px) and (hover: none) { .cat-tabela tbody tr:hover .cat-orcar { opacity: 0; visibility: hidden; } .cat-tabela tbody tr.is-aberta .cat-orcar { opacity: 1; visibility: visible; } }
@media (max-width: 699px) {
  .cat-tabela__desc { max-width: none; min-width: 0; }
  .cat-tabela td.cat-tabela__acoes { display: block; padding-top: var(--s-2); }
  .cat-tabela td.cat-tabela__acoes::before { display: none; }
  .cat-orcar { justify-content: stretch; flex-wrap: wrap; }
  .cat-orcar .btn--primario { flex: 1; }
  .cat-comprar span { display: inline; }
  .cat-tabela tbody tr.is-destaque { box-shadow: inset 4px 0 0 var(--hd-amarelo); }
}

.cat-abas .tabs__painel { min-height: 120px; }
.cat-video { position: relative; aspect-ratio: 16 / 9; margin-top: var(--s-5); border-radius: var(--raio); overflow: hidden; background: var(--preto); }
.cat-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cat-espec { overflow-x: auto; }
.cat-espec table { border-collapse: collapse; font-size: var(--fs-sm); min-width: 100%; }
.cat-espec th, .cat-espec td { border: 1px solid var(--cinza-200); padding: .45rem .7rem; text-align: left; }
.cat-espec tr:first-child td, .cat-espec th { background: var(--hd-azul-50); font-weight: 700; }
.prosa img { max-width: 100%; height: auto; }

/* Barra "itens na lista" (mobile, página de produto) */
.cat-barra-orc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--hd-azul-900); color: var(--branco); box-shadow: 0 -4px 16px rgba(0, 0, 0, .2); }
.cat-barra-orc[hidden] { display: none; }
.cat-barra-orc__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); padding-bottom: var(--s-2); font-size: var(--fs-sm); }
@media (min-width: 900px) { .cat-barra-orc { display: none; } }

/* ---------- Busca ---------- */
.cat-busca__campo { max-width: 720px; margin-bottom: var(--s-6); }
.cat-busca__titulo { font-size: var(--fs-xl); margin: var(--s-6) 0 var(--s-4); }
.cat-busca__codigos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.cat-busca__codigos a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--borda); border-radius: var(--raio); background: var(--branco); color: var(--preto); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.cat-busca__codigos a:hover { border-color: var(--hd-azul); }
.cat-busca__codigos .codigo { flex: none; padding: 2px 8px; border-radius: var(--raio-sm); background: var(--hd-azul); color: var(--branco); font-weight: 700; }
.cat-busca__codigos span:nth-child(2) { flex: 1; min-width: 0; }
.cat-busca__codigos .icone { flex: none; color: var(--hd-azul); }

/* ---------- Orçamento ---------- */
.cat-orc__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .cat-orc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .cat-orc__lista { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }
.cat-orc__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.cat-orc__topo h2, .cat-orc__form h2 { font-size: var(--fs-xl); margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.cat-orc__form h2 { margin-bottom: var(--s-4); }
.cat-orc__itens { list-style: none; padding: 0; margin: 0; border: var(--borda); border-radius: var(--raio); background: var(--branco); }
.cat-orc__itens:empty { display: none; }
.cat-orc__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-bottom: var(--borda); }
.cat-orc__item:last-child { border-bottom: 0; }
.cat-orc__item-info { min-width: 0; display: flex; flex-direction: column; }
.cat-orc__item-nome { font-weight: 700; font-size: var(--fs-sm); color: var(--preto); text-decoration: none; overflow-wrap: anywhere; }
.cat-orc__item-nome[href]:hover { color: var(--hd-azul); text-decoration: underline; }
.cat-orc__item-cod { font-size: var(--fs-xs); color: var(--cinza-600); }
.cat-orc__item .qtd input { width: 56px; }
@media (max-width: 479px) { .cat-orc__item { grid-template-columns: minmax(0, 1fr) auto; } .cat-orc__item .qtd { grid-row: 2; } }
.cat-orc__nota { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); margin-top: var(--s-3); }
.cat-orc__nota .icone { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.cat-orc__vazio-acoes { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.cat-orc__form { padding: var(--s-5); border: var(--borda); border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra-1); min-width: 0; }
.cat-orc__form[hidden], .cat-orc__lista[hidden] { display: none; }
.cat-orc__ok { grid-column: 1 / -1; text-align: center; padding: var(--s-7) var(--s-4); }
.cat-orc__ok .vazio__icone { margin: 0 auto var(--s-4); background: var(--sucesso-100); color: var(--sucesso); }
.btn.is-carregando { opacity: .7; pointer-events: none; }

/* ==================== paginas (antes assets/css/paginas.css) ==================== */
/* Heavy Duty · páginas institucionais e de captação (revenda, representante, onde comprar,
   contato, sobre, garantia, lgpd, catálogos, área do revendedor, obrigado).
   Carregado via $meta['css']; só tokens do site.css. */

/* Hero das landing pages ----------------------------------------------- */
.lp-hero { position: relative; overflow: hidden; background: var(--hd-azul); color: var(--branco); padding-block: var(--s-6) calc(var(--s-8) + var(--corte)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); }
.lp-hero > .container { position: relative; z-index: 1; }
.lp-hero .breadcrumb { margin-bottom: var(--s-5); }
.lp-hero .eyebrow { color: var(--hd-amarelo); }
.lp-hero h1 { font-size: var(--fs-4xl); line-height: .98; margin-bottom: var(--s-5); max-width: 16ch; }
.lp-hero h1 em { font-style: normal; color: var(--hd-amarelo); }
.lp-hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1000px) { .lp-hero__grid { grid-template-columns: 1.25fr .75fr; } }
.lp-hero--compacto { padding-bottom: calc(var(--s-7) + var(--corte)); }
.lp-hero--compacto h1 { font-size: var(--fs-3xl); max-width: none; }

.lp-checks { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-2); font-weight: 600; }
.lp-checks li { display: flex; gap: var(--s-2); align-items: flex-start; }
.lp-checks .icone { flex: none; color: var(--hd-amarelo); margin-top: 2px; }
.lp-checks--escuro .icone { color: var(--hd-azul); }
.lp-checks--escuro li { padding: var(--s-3) var(--s-4); background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra-1); }

.lp-cartao { position: relative; background: var(--branco); color: var(--preto); border-radius: var(--raio); padding: var(--s-6) var(--s-5) var(--s-5); box-shadow: var(--sombra-2); border-top: 6px solid var(--hd-amarelo); }
.lp-cartao__selo { position: absolute; top: -16px; left: var(--s-5); background: var(--preto); color: var(--hd-amarelo); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 6px 12px; border-radius: var(--raio-sm); }
.lp-cartao__titulo { display: block; font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: var(--s-4); color: var(--hd-azul); }
.lp-cartao ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-4); }
.lp-cartao li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--cinza-600); }
.lp-cartao li .icone { flex: none; width: 28px; height: 28px; color: var(--hd-azul); }
.lp-cartao li b { display: block; color: var(--preto); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .06em; }

/* Passos (como funciona) ------------------------------------------------ */
.passos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); counter-reset: passo; }
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--branco); border: var(--borda); border-radius: var(--raio); }
.passo__n { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-4); background: var(--hd-amarelo); color: var(--preto); font-size: var(--fs-xl); font-weight: 900; border-radius: var(--raio); }
.passo h3 { text-transform: uppercase; font-size: var(--fs-lg); font-weight: 900; }
.passo p { margin: 0; color: var(--cinza-600); }
.passos--vertical { grid-template-columns: 1fr !important; }
.passos--vertical .passo { display: flex; gap: var(--s-4); padding: var(--s-4); }
.passos--vertical .passo__n { flex: none; margin: 0; width: 44px; height: 44px; font-size: var(--fs-lg); }

.depoimento { margin: 0; padding: var(--s-5); background: var(--branco); border-left: 5px solid var(--hd-amarelo); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.depoimento blockquote { margin: 0 0 var(--s-3); font-weight: 600; font-size: var(--fs-lg); }

/* Seção do formulário --------------------------------------------------- */
.lp-form-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .lp-form-grid { grid-template-columns: .8fr 1.2fr; } .lp-form-grid > :first-child { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.lp-form-secao .lead { color: var(--cinza-300); }
.lp-checks--claro { color: var(--cinza-200); }
.form-cartao { background: var(--branco); color: var(--preto); padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); border-radius: var(--raio); box-shadow: var(--sombra-2); border-top: 6px solid var(--hd-amarelo); }
.form-cartao--claro { box-shadow: var(--sombra-1); border: var(--borda); border-top: 6px solid var(--hd-amarelo); }
.form-cartao__titulo { font-size: var(--fs-xl); margin: 0; }
.form-cartao a { color: var(--hd-azul); text-decoration: underline; }
.form__envio { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.form__nota { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xs); color: var(--cinza-600); }
.form__nota .icone { color: var(--sucesso); }
.campo-isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .opcoes { grid-template-columns: 1fr 1fr; } .opcoes legend { margin-bottom: var(--s-2); } }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }

.etapas-indicador { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); counter-reset: etapa; }
.etapas-indicador li { counter-increment: etapa; padding-top: var(--s-2); border-top: 4px solid var(--cinza-200); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-400); }
.etapas-indicador li::before { content: counter(etapa) ". "; }
.etapas-indicador li.is-ativa { border-color: var(--hd-amarelo); color: var(--hd-azul); }
.etapa { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-5); min-width: 0; }
.etapa[hidden] { display: none; }

.lp-cta-final { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-7); }
.lp-duas { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .lp-duas { grid-template-columns: 1fr 1fr; } .lp-duas--texto { grid-template-columns: 1fr 340px; } .lp-duas--texto > aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }

/* Banner de consentimento (Meta) ---------------------------------------- */
.consentimento { position: fixed; z-index: 450; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); max-width: 560px; margin-inline: auto; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--preto); color: var(--branco); border-radius: var(--raio); border-left: 5px solid var(--hd-amarelo); box-shadow: var(--sombra-2); font-size: var(--fs-sm); }
.consentimento[hidden] { display: none; }
.consentimento p { margin: 0; }
.consentimento a { color: var(--hd-amarelo); }

/* Onde comprar ------------------------------------------------------------ */
.oc-busca { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); max-width: 760px; }
.oc-busca__cep { flex: 1 1 200px; max-width: 260px; min-height: 56px; font-size: var(--fs-xl); font-weight: 800; letter-spacing: .1em; border-color: var(--branco); color: var(--preto); }
.oc-busca--claro { justify-content: center; margin-inline: auto; }
.oc-busca--claro .oc-busca__cep { border-color: var(--cinza-300); }
.oc-busca__dica { margin: var(--s-3) 0 0; font-size: var(--fs-xs); }
.oc-busca__dica a { color: var(--hd-azul-100); }
.oc-secao { padding-top: var(--s-6); }
.oc-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { .oc-grid { grid-template-columns: 1fr 340px; } }
.oc-resultados { min-height: 240px; scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.oc-resultados .skeleton { margin-bottom: var(--s-3); }
.oc-vazio { padding: var(--s-7) var(--s-5); border: 2px dashed var(--cinza-300); border-radius: var(--raio); text-align: center; }
.oc-vazio h2 { font-size: var(--fs-xl); }
.oc-resumo { font-weight: 800; text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .06em; color: var(--hd-azul); }
.oc-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: oc; }
.oc-item { position: relative; counter-increment: oc; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 44px); background: var(--branco); border: var(--borda); border-radius: var(--raio); transition: box-shadow var(--t); }
.oc-item:hover { box-shadow: var(--sombra-1); }
.oc-item::before { content: counter(oc); position: absolute; left: var(--s-4); top: var(--s-5); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hd-azul); color: var(--hd-amarelo); font-weight: 900; }
.oc-item__topo { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.oc-item h3 { font-size: var(--fs-lg); margin: 0 0 var(--s-1); text-transform: none; }
.oc-item__tipo { margin: 0 0 var(--s-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.oc-item__end { display: flex; gap: var(--s-2); color: var(--cinza-600); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.oc-item__end .icone { flex: none; color: var(--hd-azul); }
.oc-item__acoes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.oc-lateral { display: grid; gap: var(--s-4); }
.oc-cta { padding: var(--s-5); background: var(--cinza-100); border-radius: var(--raio); border-top: 5px solid var(--hd-azul); }
.oc-cta > .icone { width: 36px; height: 36px; color: var(--hd-azul); margin-bottom: var(--s-3); }
.oc-cta h2 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.oc-cta p { font-size: var(--fs-sm); color: var(--cinza-600); }
.oc-cta--loja { background: var(--hd-amarelo-100); border-top-color: var(--hd-amarelo); }
.oc-cta--escuro { background: var(--preto); color: var(--branco); border-top-color: var(--hd-amarelo); }
.oc-cta--escuro > .icone { color: var(--hd-amarelo); }
.oc-cta--escuro p { color: var(--cinza-300); }

/* Contato ----------------------------------------------------------------- */
.contato-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) { .contato-grid { grid-template-columns: 1.3fr .7fr; } }
.contato-canais h2 { font-size: var(--fs-xl); }
.canais { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-4); }
.canais li { display: flex; gap: var(--s-3); }
.canais__icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio); background: var(--hd-azul); color: var(--hd-amarelo); }
.canais b { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--cinza-600); }
.canais a, .canais div > span { font-weight: 700; color: var(--preto); }
.canais small { display: block; font-size: var(--fs-xs); color: var(--cinza-600); }
.canais small a { font-weight: 600; color: var(--hd-azul); }
.contato-atalhos, .obrigado__proximos { display: grid; gap: var(--s-2); }
.atalho { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--borda); border-radius: var(--raio); background: var(--branco); color: var(--preto); text-align: left; transition: border-color var(--t), box-shadow var(--t); }
.atalho:hover { border-color: var(--hd-azul); box-shadow: var(--sombra-1); }
.atalho > .icone:first-child { color: var(--hd-azul); width: 28px; height: 28px; flex: none; }
.atalho span { flex: 1; font-size: var(--fs-xs); color: var(--cinza-600); }
.atalho b { display: block; font-size: var(--fs-sm); color: var(--preto); text-transform: uppercase; }
.redes--contato { margin-top: var(--s-5); display: flex; gap: var(--s-2); }
.redes--contato a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio); background: var(--cinza-100); color: var(--hd-azul); }
.redes--contato a:hover { background: var(--hd-amarelo); color: var(--preto); }

/* Sobre ------------------------------------------------------------------- */
.sobre-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sobre-numeros div { padding: var(--s-5); background: var(--hd-azul); color: var(--branco); border-radius: var(--raio); }
.sobre-numeros div:nth-child(2) { background: var(--hd-amarelo); color: var(--preto); }
.sobre-numeros div:nth-child(3) { background: var(--preto); }
.sobre-numeros strong { display: block; font-size: var(--fs-3xl); font-weight: 900; line-height: 1; }
.sobre-numeros span { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); position: relative; }
@media (min-width: 900px) {
  .linha-tempo { grid-template-columns: repeat(5, 1fr); }
  .linha-tempo::before { content: ""; position: absolute; left: 5%; right: 5%; top: 28px; height: 4px; background: var(--hd-amarelo); }
}
.linha-tempo li { position: relative; text-align: center; }
.linha-tempo__marco { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto var(--s-3); border-radius: 50%; background: var(--hd-azul); color: var(--hd-amarelo); border: 4px solid var(--cinza-100); }
.linha-tempo h3 { font-size: var(--fs-md); text-transform: uppercase; font-weight: 900; margin-bottom: var(--s-2); }
.linha-tempo p { font-size: var(--fs-sm); color: var(--cinza-600); margin: 0; }
.mvv { padding: var(--s-5); border-left: 5px solid var(--hd-amarelo); background: var(--cinza-100); border-radius: var(--raio); }
.mvv p { margin: 0; font-weight: 600; font-size: var(--fs-lg); }

/* Catálogos ---------------------------------------------------------------- */
.cat-card__capa { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); min-height: 120px; background: var(--hd-azul); color: var(--branco);
}
.cat-card__capa .icone { width: 44px; height: 44px; color: var(--hd-amarelo); }
.cat-card__capa span { font-weight: 900; letter-spacing: .14em; font-size: var(--fs-xs); background: var(--hd-amarelo); color: var(--preto); padding: 4px 10px; border-radius: var(--raio-sm); }
.cat-card--destaque .cat-card__capa { background-color: var(--preto); }
.cat-card .card__titulo { font-size: var(--fs-lg); text-transform: uppercase; font-weight: 900; }
.cat-card .card__rodape { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.lista-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.lista-docs a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--branco); border: var(--borda); border-radius: var(--raio); color: var(--preto); font-weight: 700; font-size: var(--fs-sm); }
.lista-docs a:hover { border-color: var(--hd-azul); color: var(--hd-azul); }
.lista-docs .icone { flex: none; color: var(--hd-azul); }
.lista-docs span { flex: 1; }
.lista-docs small { color: var(--cinza-400); font-weight: 600; }

/* Área do revendedor ------------------------------------------------------ */
.recurso { position: relative; }
.recurso__badge { position: absolute; top: var(--s-4); right: var(--s-4); }

/* Obrigado ---------------------------------------------------------------- */
.obrigado { padding-block: var(--secao-py); background: linear-gradient(180deg, var(--hd-azul-50), var(--branco)); }
.obrigado__icone { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: var(--s-5); border-radius: 50%; background: var(--hd-amarelo); color: var(--preto); box-shadow: 0 0 0 12px var(--hd-amarelo-100); }
.obrigado__icone .icone { width: 42px; height: 42px; stroke-width: 3; }
.obrigado__lead { margin-inline: auto; }
.obrigado__protocolo { font-size: var(--fs-sm); color: var(--cinza-600); }
.obrigado__protocolo b { color: var(--preto); background: var(--cinza-100); padding: 2px 8px; border-radius: var(--raio-sm); }
.obrigado__proximos { margin-top: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ==================== blog (antes assets/css/blog.css) ==================== */
/* Blog Heavy Duty — carregado só nas páginas do blog e do admin (meta 'css'). Usa os tokens do site.css. */

/* ---------- Lista: topo, busca, chips ---------- */
.blog-topo { background: var(--hd-azul-50); border-bottom: var(--borda); padding-block: var(--s-6) var(--s-5); }
.blog-topo h1 { margin: var(--s-2) 0 var(--s-3); color: var(--hd-azul-900); }
.blog-topo .lead { color: var(--cinza-600); max-width: 60ch; margin: 0; }
.blog-topo__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: end; }
@media (min-width: 900px) { .blog-topo__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.blog-busca { display: flex; align-items: center; gap: var(--s-2); background: var(--branco); border: 2px solid var(--cinza-200); border-radius: var(--raio); padding: 4px 4px 4px var(--s-3); box-shadow: var(--sombra-1); transition: border-color var(--t); }
.blog-busca:focus-within { border-color: var(--hd-azul); }
.blog-busca .icone { color: var(--cinza-400); flex: none; }
.blog-busca input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: var(--fs-md); padding: .6rem 0; background: transparent; }
.blog-chips { display: flex; gap: var(--s-2); margin-top: var(--s-5); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.blog-chips .chip { flex: none; text-decoration: none; }
.blog-chips .chip[aria-current="page"] { background: var(--hd-azul); border-color: var(--hd-azul); color: var(--branco); }
.blog-chips__n { opacity: .6; font-weight: 600; }

/* ---------- Destaque ---------- */
.blog-destaque-wrap { margin-top: var(--s-6); }
.blog-destaque { display: grid; background: var(--branco); border: var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-1); }
@media (min-width: 900px) { .blog-destaque { grid-template-columns: 1.15fr 1fr; } }
.blog-destaque__midia { display: block; aspect-ratio: 16 / 9; background: var(--hd-azul-900); overflow: hidden; }
.blog-destaque__midia img, .blog-destaque__midia .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-destaque:hover .blog-destaque__midia img { transform: scale(1.03); }
.blog-destaque__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.blog-destaque__cat { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-azul-600); }
.blog-destaque__titulo { font-size: var(--fs-2xl); line-height: 1.15; margin: 0; text-transform: none; font-weight: 800; }
.blog-destaque__titulo a { color: var(--preto); text-decoration: none; }
.blog-destaque__titulo a:hover { color: var(--hd-azul); }
.blog-destaque p { margin: 0; color: var(--cinza-600); }
.blog-destaque__meta { font-size: var(--fs-sm); color: var(--cinza-600); font-weight: 600; }
.blog-lista { padding-top: var(--s-7); }
.blog-lista__resumo { margin-bottom: var(--s-5); color: var(--cinza-600); }
.blog-grid .card-post .card__titulo { text-transform: none; }

/* ---------- Paginação ---------- */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-7); }
.paginacao__item { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 1.5px solid var(--cinza-300); border-radius: var(--raio); font-weight: 700; text-decoration: none; color: var(--cinza-800); background: var(--branco); }
.paginacao__item:hover { border-color: var(--hd-azul); color: var(--hd-azul); }
.paginacao__item[aria-current="page"] { background: var(--hd-azul); border-color: var(--hd-azul); color: var(--branco); }
.paginacao__sep { align-self: center; color: var(--cinza-400); }

/* ---------- CTA ---------- */
.blog-cta { background: var(--hd-azul-900); color: var(--branco); position: relative; overflow: hidden; }
.blog-cta__grid { position: relative; display: grid; gap: var(--s-5); padding-block: var(--s-8); align-items: center; }
@media (min-width: 900px) { .blog-cta__grid { grid-template-columns: 1.3fr 1fr; } }
.blog-cta h2 { color: var(--branco); margin: var(--s-2) 0; }
.blog-cta .eyebrow { color: var(--hd-amarelo); }
.blog-cta p { color: var(--hd-azul-100); margin: 0; }
.blog-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 900px) { .blog-cta__acoes { justify-content: flex-end; } }

/* ---------- Artigo ---------- */
.leitura-progresso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none; }
.leitura-progresso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--hd-amarelo); }
.blog-previa { border-radius: 0; margin: 0; }
.artigo__topo { background: linear-gradient(180deg, var(--hd-azul-50), var(--branco)); padding-block: var(--s-6) var(--s-5); }
.artigo__cat { text-decoration: none; margin-top: var(--s-4); display: inline-block; }
.artigo__titulo { font-size: var(--fs-3xl); line-height: 1.08; text-transform: none; font-weight: 900; letter-spacing: -.01em; color: var(--hd-azul-900); margin: var(--s-4) 0 var(--s-4); text-wrap: balance; }
.artigo__lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--cinza-600); margin: 0 0 var(--s-5); max-width: 62ch; }
.artigo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); color: var(--cinza-600); font-weight: 600; }
.artigo__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--cinza-400); margin-right: var(--s-5); vertical-align: middle; }
.artigo__autor { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--preto); }
.artigo__autor::before { display: none !important; }
.artigo__avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hd-azul); color: var(--hd-amarelo); font-size: .7rem; font-weight: 900; }
.artigo__capa { margin: 0 auto var(--s-6); max-width: 1040px; }
.artigo__capa img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--raio); box-shadow: var(--sombra-2); }

.artigo__grid { display: grid; gap: var(--s-6); padding-bottom: var(--s-8); }
@media (min-width: 1100px) {
  .artigo__grid { grid-template-columns: 260px minmax(0, 70ch); justify-content: center; gap: var(--s-8); }
  .artigo__lateral { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; max-height: calc(100vh - var(--header-h) - var(--s-6)); overflow-y: auto; }
}
@media (max-width: 1099px) { .artigo__corpo { max-width: 70ch; margin-inline: auto; width: 100%; } .artigo__lateral { max-width: 70ch; margin-inline: auto; width: 100%; } }

.sumario { border: var(--borda); border-left: 4px solid var(--hd-amarelo); border-radius: var(--raio); background: var(--cinza-100); padding: var(--s-4); }
.sumario summary { cursor: pointer; font-weight: 900; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--hd-azul); }
.sumario ol { list-style: none; counter-reset: s; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 2px; }
.sumario li { counter-increment: s; }
.sumario a { display: grid; grid-template-columns: 1.6em 1fr; padding: .35rem .25rem; font-size: var(--fs-sm); line-height: 1.35; color: var(--cinza-800); text-decoration: none; border-radius: var(--raio-sm); font-weight: 600; }
.sumario a::before { content: counter(s, decimal-leading-zero); color: var(--cinza-400); font-weight: 800; font-size: .72rem; padding-top: .15em; }
.sumario a:hover { background: var(--branco); color: var(--hd-azul); }
.sumario a.is-ativo { color: var(--hd-azul); background: var(--branco); }
.sumario a.is-ativo::before { color: var(--hd-amarelo-600); }

.compartilhar { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.compartilhar__rotulo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-600); width: 100%; }
.compartilhar__btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--cinza-300); background: var(--branco); color: var(--hd-azul); cursor: pointer; transition: all var(--t); }
.compartilhar__btn:hover { background: var(--hd-azul); color: var(--branco); border-color: var(--hd-azul); }
.compartilhar--linha { margin-top: var(--s-3); }

/* Tipografia de leitura */
.prosa-blog { font-size: 1.0625rem; line-height: 1.8; color: var(--cinza-800); overflow-wrap: break-word; }
@media (min-width: 700px) { .prosa-blog { font-size: 1.125rem; } }
.prosa-blog > :first-child { margin-top: 0; }
.prosa-blog p { margin: 0 0 1.35em; }
.prosa-blog h2 { font-size: var(--fs-2xl); line-height: 1.2; text-transform: none; font-weight: 800; color: var(--hd-azul-900); margin: 2.2em 0 .7em; scroll-margin-top: calc(var(--header-h) + 1rem); position: relative; padding-top: .6em; }
.prosa-blog h2::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: var(--hd-amarelo); border-radius: 2px; }
.prosa-blog h3 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 800; color: var(--preto); margin: 1.8em 0 .5em; text-transform: none; }
.prosa-blog h4 { font-size: var(--fs-lg); font-weight: 800; margin: 1.5em 0 .4em; }
.prosa-blog strong { color: var(--preto); font-weight: 700; }
.prosa-blog a { color: var(--hd-azul); text-decoration: underline; text-decoration-color: var(--hd-amarelo); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.prosa-blog a:hover { text-decoration-color: var(--hd-azul); }
.prosa-blog ul, .prosa-blog ol { padding-left: 1.4em; margin: 0 0 1.35em; }
.prosa-blog li { margin-bottom: .45em; padding-left: .2em; }
.prosa-blog li::marker { color: var(--hd-amarelo-600); font-weight: 800; }
.prosa-blog img { max-width: 100%; height: auto; border-radius: var(--raio); margin: .5em 0; }
.prosa-blog p:has(> img:only-child) { text-align: center; }
.prosa-blog figure { margin: 2em 0; }
.prosa-blog figcaption { font-size: var(--fs-sm); color: var(--cinza-600); text-align: center; margin-top: .5em; }
.prosa-blog blockquote { margin: 2em 0; padding: var(--s-4) var(--s-5); border-left: 4px solid var(--hd-amarelo); background: var(--hd-amarelo-100); border-radius: 0 var(--raio) var(--raio) 0; font-weight: 600; color: var(--preto); }
.prosa-blog blockquote p:last-child { margin: 0; }
.prosa-blog hr { border: 0; border-top: 2px solid var(--cinza-200); margin: 2.5em 0; }
.prosa-blog table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: var(--fs-sm); line-height: 1.5; display: block; overflow-x: auto; }
.prosa-blog th, .prosa-blog td { padding: .65rem .8rem; border-bottom: 1px solid var(--cinza-200); text-align: left; vertical-align: top; }
.prosa-blog thead th, .prosa-blog tr:first-child th { background: var(--hd-azul); color: var(--branco); font-weight: 800; white-space: nowrap; }
.prosa-blog tbody tr:nth-child(even) { background: var(--cinza-100); }
.prosa-blog .faq-post { margin: 2em 0; border-top: 2px solid var(--cinza-200); }
.prosa-blog .faq-post h3 { font-size: var(--fs-lg); margin: 1.3em 0 .35em; }

/* YouTube leve */
.yt-lite { position: relative; display: block; aspect-ratio: 16 / 9; margin: 2em 0; border-radius: var(--raio); overflow: hidden; background: var(--preto); text-decoration: none !important; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; opacity: .85; transition: opacity var(--t); }
.yt-lite:hover img { opacity: 1; }
.yt-lite__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; border-radius: 14px; background: var(--erro); box-shadow: var(--sombra-2); }
.yt-lite__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--branco); transform: translateX(2px); }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.artigo__fim { margin-top: var(--s-7); padding: var(--s-5); border-radius: var(--raio); background: var(--hd-azul-50); border: var(--borda); }
.artigo__fim p { margin: 0; font-weight: 700; color: var(--preto); }
.blog-produtos .card__titulo { text-transform: none; }

/* ---------- Admin ---------- */
.admin { background: var(--cinza-100); min-height: 100vh; }
.admin-barra { background: var(--hd-azul-900); color: var(--branco); }
.admin-barra .container { display: flex; align-items: center; gap: var(--s-5); min-height: 60px; flex-wrap: wrap; }
.admin-barra a { color: var(--branco); text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
.admin-barra a:hover, .admin-barra a[aria-current="page"] { color: var(--hd-amarelo); }
.admin-barra .logo { height: 30px; width: auto; filter: brightness(0) invert(1); }
.admin-barra__nav { display: flex; gap: var(--s-5); flex: 1; flex-wrap: wrap; }
.admin-conteudo { padding-block: var(--s-6) var(--s-8); }
.admin-conteudo h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s-5); }
.admin-cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.admin-cabeca h1 { margin: 0; }
.admin-caixa { background: var(--branco); border: var(--borda); border-radius: var(--raio); padding: var(--s-5); box-shadow: var(--sombra-1); }
.admin-hub { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.admin-hub a { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--branco); border: var(--borda); border-radius: var(--raio); text-decoration: none; color: var(--preto); box-shadow: var(--sombra-1); }
.admin-hub a:hover { border-color: var(--hd-azul); }
.admin-hub strong { font-size: var(--fs-xl); font-weight: 900; color: var(--hd-azul); }
.admin-hub .is-breve { opacity: .55; pointer-events: none; }
.admin-tabela { width: 100%; border-collapse: collapse; background: var(--branco); font-size: var(--fs-sm); }
.admin-tabela th, .admin-tabela td { padding: .6rem .75rem; border-bottom: 1px solid var(--cinza-200); text-align: left; vertical-align: middle; }
.admin-tabela th { background: var(--cinza-100); font-weight: 800; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .06em; }
.admin-tabela td a { font-weight: 700; }
.admin-filtros { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); align-items: center; }
.admin-filtros .campo__input, .admin-filtros .campo__select { width: auto; min-width: 180px; }
.st { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 800; }
.st--publicado { background: var(--sucesso-100); color: var(--sucesso); }
.st--rascunho { background: var(--cinza-200); color: var(--cinza-800); }
.st--agendado { background: var(--hd-amarelo-100); color: var(--preto); }
.admin-form { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .admin-form { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.admin-form__lado { display: grid; gap: var(--s-4); }
.editor { border: 1.5px solid var(--cinza-300); border-radius: var(--raio); background: var(--branco); }
.editor:focus-within { border-color: var(--hd-azul); }
.editor__barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--cinza-200); background: var(--cinza-100); position: sticky; top: 0; z-index: 2; border-radius: var(--raio) var(--raio) 0 0; }
.editor__barra button { min-width: 36px; height: 34px; padding: 0 .55rem; border: 1px solid transparent; border-radius: var(--raio-sm); background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; color: var(--cinza-800); }
.editor__barra button:hover, .editor__barra button[aria-pressed="true"] { background: var(--branco); border-color: var(--cinza-300); }
.editor__barra .sep { width: 1px; background: var(--cinza-300); margin: 4px 4px; }
.editor__area { min-height: 480px; padding: var(--s-5); outline: 0; max-width: none; }
.editor__html { display: none; width: 100%; min-height: 480px; border: 0; padding: var(--s-4); font: 13px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
.editor.is-html .editor__area { display: none; }
.editor.is-html .editor__html { display: block; }
.admin-capa-previa { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--raio-sm); background: var(--cinza-200); }
.contador { font-size: var(--fs-xs); color: var(--cinza-600); }
.contador.is-alerta { color: var(--erro); font-weight: 700; }
.admin-login { max-width: 400px; margin: var(--s-9) auto; }

/* ==================== banners (carrossel da home + faixa; admin /admin/banners) ==================== */
/* Container queries: o mesmo markup vira "mobile" quando estreito (inclusive na prévia do admin). */
.hb { position: relative; container-type: inline-size; background: var(--hd-azul-900); color: var(--branco); overflow: hidden; isolation: isolate; }
.hb__trilho { display: grid; }
.hb__slide { grid-area: 1 / 1; position: relative; display: grid; aspect-ratio: 4 / 5; max-height: 86svh; min-height: 420px;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.hb__slide.is-ativo { opacity: 1; visibility: visible; transition: opacity .8s ease; z-index: 1; }
.hb__slide picture { position: absolute; inset: 0; }
.hb__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); transition: transform 7s ease-out; }
.hb__slide.is-ativo .hb__img { transform: scale(1); }
.hb__veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(14,26,52,.92) 0%, rgba(14,26,52,.55) 45%, rgba(14,26,52,0) 75%); }
.hb--claro .hb__veu { background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 75%); }
.hb__conteudo { position: relative; z-index: 2; display: flex; align-items: flex-end; padding-block: var(--s-6) 4.75rem; pointer-events: none; }
.hb__texto { max-width: 40rem; pointer-events: auto; }
.hb__titulo { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 4rem); line-height: 1; font-weight: 900; text-transform: uppercase; margin: 0 0 var(--s-3); color: inherit; text-wrap: balance; }
.hb__titulo em { font-style: normal; color: var(--hd-amarelo); }
.hb__sub { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--s-5); max-width: 46ch; opacity: .92; }
.hb__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hb--claro { color: var(--hd-azul); }
.hb--claro .hb__titulo em { color: var(--hd-azul); background: linear-gradient(transparent 62%, var(--hd-amarelo) 62%); }
.hb--centro .hb__conteudo { justify-content: center; text-align: center; }
.hb--centro .hb__texto { margin-inline: auto; }
.hb--centro .hb__ctas { justify-content: center; }
.hb--centro .hb__sub { margin-inline: auto; }
.hb--direita .hb__conteudo { justify-content: flex-end; }
.hb__link-total { position: absolute; inset: 0; z-index: 1; }
.hb__link-total:focus-visible { outline: 4px solid var(--hd-amarelo); outline-offset: -4px; }
.hb__slide .hb__texto > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .25s, transform .6s ease .25s; }
.hb__slide.is-ativo .hb__texto > * { opacity: 1; transform: none; }
.hb__slide.is-ativo .hb__texto > :nth-child(2) { transition-delay: .35s; }
.hb__slide.is-ativo .hb__texto > :nth-child(3) { transition-delay: .45s; }
.hb__seta { position: absolute; bottom: 2.95rem; z-index: 4; display: none; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--branco); cursor: pointer; backdrop-filter: blur(6px); transition: background .2s; }
.hb__seta .icone { width: 22px; height: 22px; }
.hb__seta:hover { background: var(--hd-amarelo); color: var(--preto); }
.hb__seta--ant { right: calc(var(--s-5) + 52px); }
.hb__seta--ant .icone { transform: scaleX(-1); }
.hb__seta--prox { right: var(--s-5); }
.hb__controles { position: absolute; left: 0; right: 0; bottom: 3.25rem; z-index: 3; display: flex; justify-content: center; align-items: center; gap: var(--s-3); }
.hb__pontos { display: flex; gap: 2px; }
.hb__ponto { width: 36px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hb__ponto::before { content: ""; width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.5); box-shadow: 0 0 3px rgba(0,0,0,.35); transition: background .2s, width .2s; }
.hb__ponto[aria-current="true"]::before { background: var(--hd-amarelo); width: 34px; }
.hb__pausa { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(14,26,52,.45); display: grid; place-items: center; }
.hb__pausa span { width: 10px; height: 12px; border-left: 3px solid var(--branco); border-right: 3px solid var(--branco); }
.hb__pausa.is-pausado span { border: 0; width: 0; height: 0; border-left: 11px solid var(--branco); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hb button:focus-visible { outline: 3px solid var(--hd-amarelo); outline-offset: 2px; }
@container (min-width: 768px) {
  .hb__slide { aspect-ratio: 1920 / 700; min-height: 440px; max-height: 720px; }
  .hb__veu { background: linear-gradient(90deg, rgba(14,26,52,.88) 0%, rgba(14,26,52,.6) 38%, rgba(14,26,52,0) 70%); }
  .hb--claro .hb__veu { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.7) 38%, rgba(255,255,255,0) 70%); }
  .hb--direita .hb__veu { transform: scaleX(-1); }
  .hb--centro .hb__veu { background: radial-gradient(ellipse at center, rgba(14,26,52,.75) 0%, rgba(14,26,52,.25) 65%, rgba(14,26,52,0) 100%); }
  .hb--centro.hb--claro .hb__veu { background: radial-gradient(ellipse at center, rgba(255,255,255,.88) 0%, rgba(255,255,255,.3) 65%, rgba(255,255,255,0) 100%); }
  .hb__conteudo { align-items: center; padding-block: var(--s-7) 5.5rem; }
  .hb__seta { display: grid; }
}
.hb-busca { background: var(--hd-azul); color: var(--branco); position: relative; z-index: 2; }
.hb-busca__cartao { position: relative; margin-top: -2.5rem; background: var(--branco); color: var(--preto); border-radius: var(--raio);
  border-top: 5px solid var(--hd-amarelo); box-shadow: 0 18px 40px rgba(14,26,52,.28); padding: var(--s-5); display: grid; gap: var(--s-3); }
.hb-busca__titulo { margin: 0; font-weight: 800; color: var(--hd-azul); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); }
.hb-busca__dica { margin: 0; font-size: var(--fs-xs); color: var(--cinza-600, #555); }
.hb-busca__dica a { font-weight: 700; }
.hb-busca__numeros { padding-top: var(--s-6); }
@media (min-width: 900px) {
  .hb-busca__cartao { grid-template-columns: minmax(220px, 1fr) 2fr; align-items: center; column-gap: var(--s-6); padding: var(--s-5) var(--s-6); }
  .hb-busca__dica { grid-column: 2; }
}
.hb-faixa-wrap { padding-block: 0 var(--secao-py); }
.hb--faixa { border-radius: var(--raio); }
.hb--faixa .hb__slide { aspect-ratio: 1 / 1; min-height: 340px; max-height: 80svh; }
.hb--faixa .hb__conteudo { padding-block: var(--s-6); }
.hb--faixa .hb__titulo { font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); }
@container (min-width: 768px) {
  .hb--faixa .hb__slide { aspect-ratio: 1920 / 480; min-height: 300px; max-height: 480px; }
  .hb--faixa .hb__conteudo { padding-inline: var(--s-7); }
}
@media (prefers-reduced-motion: reduce) { .hb__img, .hb__slide.is-ativo .hb__img { transform: none; } }

/* admin de banners (.ab-) */
.ab-grupo { margin-bottom: var(--s-7); }
.ab-grupo__cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.ab-grupo__cabeca h2 { font-size: var(--fs-lg); margin: 0; }
.ab-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ab-item { display: grid; grid-template-columns: auto 160px 1fr auto; gap: var(--s-4); align-items: center; background: var(--branco); border: var(--borda); border-radius: var(--raio); padding: var(--s-3) var(--s-4); box-shadow: var(--sombra-1); }
.ab-item.is-arrastando { opacity: .5; }
.ab-item.is-alvo { border-color: var(--hd-azul); box-shadow: 0 0 0 2px var(--hd-azul-100); }
.ab-item__alca { cursor: grab; color: var(--cinza-600, #777); font-size: 1.3rem; line-height: 1; user-select: none; padding: var(--s-2); }
.ab-item__thumb { width: 160px; aspect-ratio: 1920 / 700; object-fit: cover; border-radius: var(--raio-sm); background: var(--cinza-200); display: block; }
.ab-item__info { min-width: 0; }
.ab-item__info strong { display: block; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-item__info small { color: var(--cinza-600, #555); }
.ab-item__acoes { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ab-item__acoes form { margin: 0; }
.st--ativo { background: var(--sucesso-100); color: var(--sucesso); }
.st--inativo { background: var(--cinza-200); color: var(--cinza-800); }
.st--expirado { background: var(--erro-100); color: var(--erro); }
.ab-vazio { padding: var(--s-5); border: 2px dashed var(--cinza-300, #ccc); border-radius: var(--raio); text-align: center; color: var(--cinza-600, #555); }
@media (max-width: 760px) {
  .ab-item { grid-template-columns: auto 96px 1fr; }
  .ab-item__thumb { width: 96px; }
  .ab-item__acoes { grid-column: 1 / -1; justify-content: flex-start; }
}
.ab-form { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ab-form { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; } }
.ab-previa { position: sticky; top: var(--s-4); }
.ab-previa__abas { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.ab-previa__abas button[aria-pressed="true"] { --btn-bg: var(--hd-azul); --btn-cor: var(--branco); }
.ab-previa__palco { background: var(--cinza-100); border-radius: var(--raio); padding: var(--s-3); overflow: hidden; }
.ab-previa__escala { transform-origin: 0 0; }
.ab-previa__escala .hb { border-radius: 6px; }
.ab-previa__palco.is-mobile .ab-previa__escala { margin-inline: auto; }
.ab-previa__vazia { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hd-azul-100); font-weight: 700; font-size: var(--fs-sm); text-align: center; padding: var(--s-4); }
.ab-img { display: grid; gap: var(--s-2); }
.ab-img__caixa { position: relative; border: 2px dashed var(--cinza-300, #ccc); border-radius: var(--raio); background: var(--cinza-100); min-height: 130px; display: grid; place-items: center; text-align: center; padding: var(--s-3); cursor: pointer; transition: border-color .2s, background .2s; font-size: var(--fs-sm); }
.ab-img__caixa:hover, .ab-img__caixa.is-sobre { border-color: var(--hd-azul); background: var(--hd-azul-50); }
.ab-img__caixa img { max-width: 100%; max-height: 180px; border-radius: var(--raio-sm); }
.ab-img__caixa input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ab-img__caixa.is-enviando { opacity: .6; pointer-events: none; }
.ab-segmento { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ab-segmento label { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: var(--borda); border-radius: var(--raio-sm); cursor: pointer; font-size: var(--fs-sm); font-weight: 700; background: var(--branco); }
.ab-segmento input { accent-color: var(--hd-azul); }
.ab-segmento label:has(input:checked) { border-color: var(--hd-azul); background: var(--hd-azul-50); }
.ab-duas { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }