/* BTEK Construtora — estilos do site. Usa as variáveis de tokens.css. */

/* Fontes hospedadas no próprio site (SIL Open Font License; ver /assets/fonts/OFL.txt). */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/saira-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/saira-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--branco); color: var(--grafite-700); font: 400 var(--t-corpo)/1.6 var(--fonte-texto); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
a { color: var(--laranja-700); }
a:hover { color: var(--laranja-800); }
:focus-visible { outline: 3px solid var(--laranja-600); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--grafite-900); margin: 0; }
h1 { font-size: var(--t-display); line-height: 1.05; font-weight: 700; margin-bottom: 18px; }
h2 { font-size: var(--t-h1); line-height: 1.1; font-weight: 700; margin-bottom: 14px; }
h3 { font-size: var(--t-h4); line-height: 1.3; font-weight: 600; margin-bottom: 6px; }
p { margin: 0 0 14px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 760px; }
.wrap.narrow { margin: 0 auto; }
.lbl { font: 500 var(--t-rotulo)/1.3 var(--fonte-rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--laranja-700); margin: 0 0 12px; }
.lead { font-size: var(--t-corpo-g); line-height: 1.55; color: var(--grafite-600); max-width: 62ch; }
.ic { width: 28px; height: 28px; color: var(--laranja-600); flex: none; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 48px; height: 48px; color: var(--laranja-600); }
.ic-lg.ok { color: var(--sucesso); margin-bottom: 16px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--grafite-900); color: var(--branco); padding: 10px 14px; }
.skip:focus { left: 8px; }
.proto-bar { background: var(--laranja-100); color: var(--grafite-900); font: 500 12px/1.4 var(--fonte-rotulo); text-align: center; padding: 6px 16px; }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1.2 var(--fonte-titulo); padding: 14px 22px; border-radius: 4px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-sm { padding: 10px 16px; font-size: 15px; }
.btn-p { background: var(--laranja-600); color: var(--grafite-900); }
.btn-p:hover { background: var(--laranja-700); color: var(--branco); }
.btn-s { border-color: var(--grafite-700); color: var(--grafite-700); background: transparent; }
.btn-s:hover { background: var(--grafite-700); color: var(--branco); }
.btn-s-dark { border-color: var(--grafite-300); color: var(--branco); background: transparent; }
.btn-s-dark:hover { background: var(--branco); color: var(--grafite-900); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Cabeçalho */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--branco); border-bottom: 1px solid var(--grafite-200); }
.hdr-in { display: flex; align-items: center; gap: 24px; height: 76px; }
.logo { display: flex; align-items: center; }
.logo-full { height: 48px; width: auto; }
.logo-mini { display: none; height: 28px; width: auto; }
.toggle { display: flex; background: var(--grafite-100); border-radius: 6px; padding: 4px; margin: 0 auto; }
.tg-opt { font: 600 14px/1.2 var(--fonte-titulo); color: var(--grafite-700); text-decoration: none; padding: 9px 16px; border-radius: 4px; white-space: nowrap; }
.tg-opt:hover { color: var(--grafite-900); background: var(--grafite-200); }
.tg-opt[aria-current="page"] { background: var(--grafite-700); color: var(--branco); }
.links { display: flex; gap: 22px; }
.links a { color: var(--grafite-700); text-decoration: none; font-weight: 500; font-size: 15px; }
.links a:hover { color: var(--laranja-700); }
.chooser { position: relative; }
.chooser-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--branco); border: 1px solid var(--grafite-200); border-radius: 6px; box-shadow: 0 10px 30px rgba(26,28,30,.12); min-width: 230px; padding: 6px; }
.chooser-menu a { display: block; padding: 10px 12px; color: var(--grafite-700); text-decoration: none; border-radius: 4px; font-weight: 500; }
.chooser-menu a:hover { background: var(--grafite-50); color: var(--grafite-900); }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-btn .ic { color: var(--grafite-700); }
.toggle-m { display: none; }
.menu-mobile { border-top: 1px solid var(--grafite-200); background: var(--branco); }
.menu-mobile a { display: block; padding: 14px 0; border-bottom: 1px solid var(--grafite-100); color: var(--grafite-700); text-decoration: none; font-weight: 500; }

/* Seções */
.sec { padding: 88px 0; }
.sec.alt { background: var(--grafite-50); }
.sec > .wrap > .lead { margin-bottom: 40px; }
.feats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px; }
.feats.c4 { grid-template-columns: repeat(4, 1fr); }
.feats.c3 { grid-template-columns: repeat(3, 1fr); }
.feats li { border-top: 2px solid var(--grafite-200); padding-top: 20px; }
.feats li .ic { margin-bottom: 14px; }
.feats p { color: var(--grafite-600); font-size: 15px; }

/* Ilustrações */
.ilu { margin: 0; background: var(--branco); border: 1px solid var(--grafite-200); border-radius: 8px; overflow: hidden; }
.ilu-svg { display: block; width: 100%; height: auto; }
.ilu figcaption { font: 500 11px/1 var(--fonte-rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite-500); padding: 10px 14px; border-top: 1px solid var(--grafite-200); }
.ilu.dark { background: var(--grafite-900); border-color: var(--grafite-800); --ilu-linha: #EEF0F1; --ilu-fina: #6E7782; --ilu-grid: #282B2F; --ilu-destaque: #FF6200; --ilu-rotulo: #C2C6CB; }
.ilu.dark figcaption { color: var(--grafite-400); border-color: var(--grafite-800); }

/* Portal */
.portal-hero { padding: 80px 0 48px; }
.portal-hero h1 { max-width: 14ch; }
.fork { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.fork > a { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 56px max(32px, calc((100vw - 1200px) / 2 + 32px)) 56px; text-decoration: none; color: inherit; }
.fork-pf { background: var(--grafite-50); padding-right: 64px !important; }
.fork-pj { background: var(--grafite-900); padding-left: 64px !important; position: relative; }
/* Faixa diagonal entre os dois caminhos, ecoando a diagonal do "K". */
.fork-pj::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 24px; background: var(--laranja-600); transform: skewX(-6deg); pointer-events: none; }
.fork p { color: var(--grafite-600); max-width: 46ch; }
.fork-pj h2 { color: var(--branco); }
.fork-pj p { color: var(--grafite-200); }
.fork-pj .lbl { color: var(--laranja-600); }
.fork h2 { font-size: var(--t-h2); max-width: 18ch; }
.fork .btn { margin-top: 8px; }
.fork > a:hover .btn { background: var(--laranja-700); color: var(--branco); }
.fork-ilu { max-width: 520px; }
.creds { padding: 64px 0; }
.creds .feats { margin-top: 0; }

/* Heróis */
.hero { padding: 72px 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-pf { background: var(--grafite-50); }
.hero-pj { background: var(--grafite-900); }
.hero-pj h1 { color: var(--branco); }
.hero-pj .lead { color: var(--grafite-200); }
.hero-pj .lbl { color: var(--laranja-600); }
.hero-plain { background: var(--grafite-50); border-bottom: 1px solid var(--grafite-200); }

/* Etapas e serviços */
.steps, .services { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 20px; }
.steps { grid-template-columns: repeat(5, 1fr); }
.services { grid-template-columns: repeat(4, 1fr); }
.steps li, .services li { background: var(--branco); border: 1px solid var(--grafite-200); border-top: 3px solid var(--laranja-600); border-radius: 0 0 6px 6px; padding: 22px 20px; position: relative; }
.steps .n, .services .n { position: absolute; top: 18px; right: 18px; font: 500 12px/1 var(--fonte-rotulo); color: var(--grafite-500); letter-spacing: .08em; }
.steps .ic, .services .ic { margin-bottom: 14px; }
.steps p, .services p { color: var(--grafite-600); font-size: 15px; margin: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fronts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.fronts > div { border: 1px solid var(--grafite-200); border-radius: 8px; padding: 28px; }
.fronts .ic { width: 36px; height: 36px; margin-bottom: 14px; }
.fronts p { color: var(--grafite-600); margin: 0; }
.compl { background: var(--grafite-900); }
.compl-in { display: flex; gap: 32px; align-items: flex-start; }
.compl h2 { color: var(--branco); font-size: var(--t-h2); }
.compl .lead { color: var(--grafite-200); }
.compl .lbl { color: var(--laranja-600); }

/* Perguntas frequentes */
.faq { margin-top: 32px; max-width: 860px; }
.faq details { border-bottom: 1px solid var(--grafite-200); }
.faq summary { font: 600 var(--t-h4)/1.35 var(--fonte-titulo); color: var(--grafite-900); padding: 20px 40px 20px 0; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--laranja-600); border-bottom: 2px solid var(--laranja-600); transform: translateY(-75%) rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { color: var(--grafite-600); padding: 0 40px 20px 0; margin: 0; max-width: 70ch; }

/* Chamada final */
.cta-band { background: var(--grafite-900); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: 6%; top: -10%; bottom: -10%; width: 44px; background: var(--laranja-600); transform: skewX(-25deg); }
.cta-band h2 { color: var(--branco); max-width: 20ch; }
.cta-band p { color: var(--grafite-200); font-size: var(--t-corpo-g); max-width: 54ch; }

/* Sobre e contato */
.data { display: grid; grid-template-columns: 200px 1fr; gap: 0; margin: 24px 0 0; border-top: 1px solid var(--grafite-200); }
.data dt, .data dd { padding: 14px 0; border-bottom: 1px solid var(--grafite-200); margin: 0; }
.data dt { font: 500 12px/1.6 var(--fonte-rotulo); letter-spacing: .08em; text-transform: uppercase; color: var(--grafite-600); }
.channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.channels li { display: flex; gap: 14px; background: var(--branco); border: 1px solid var(--grafite-200); border-radius: 8px; padding: 22px; }
.channels p, .channels a { margin: 0; overflow-wrap: anywhere; }
.legal h2 { font-size: var(--t-h3); margin: 32px 0 10px; }
.legal p, .legal li { color: var(--grafite-700); }

/* Conteúdos (artigos) */
.artigo { font-size: var(--t-corpo-g); line-height: 1.7; }
.artigo h2 { font-size: var(--t-h2); margin: 40px 0 12px; }
.artigo h3 { font-size: var(--t-h3); margin: 28px 0 8px; }
.artigo p, .artigo li { color: var(--grafite-700); max-width: 68ch; }
.artigo ul, .artigo ol { padding-left: 22px; margin: 0 0 16px; }
.artigo li { margin-bottom: 6px; }
.artigo .voltar { margin-top: 40px; font-size: var(--t-corpo); }
.art-list { list-style: none; margin: 0; padding: 0; }
.art-list li { padding: 28px 0; border-bottom: 1px solid var(--grafite-200); }
.art-list h2 { font-size: var(--t-h3); margin-bottom: 8px; }
.art-list h2 a { color: var(--grafite-900); text-decoration: none; }
.art-list h2 a:hover { color: var(--laranja-700); }
.art-list p:last-child { color: var(--grafite-600); margin: 0; }

/* Funis */
.funnel { background: var(--grafite-50); padding: 64px 0 96px; }
.card { background: var(--branco); border: 1px solid var(--grafite-200); border-radius: 8px; padding: 32px; margin-top: 28px; }
.progress .lbl { color: var(--grafite-600); margin-bottom: 8px; }
.bar { height: 4px; background: var(--grafite-100); border-radius: 2px; overflow: hidden; margin-bottom: 28px; }
.bar span { display: block; height: 100%; background: var(--laranja-600); transition: width .25s; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { font: 600 var(--t-h3)/1.25 var(--fonte-titulo); color: var(--grafite-900); margin-bottom: 20px; padding: 0; }
.opt { display: flex; gap: 12px; align-items: center; border: 1px solid var(--grafite-500); border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.opt:hover { border-color: var(--grafite-700); background: var(--grafite-50); }
.opt:has(input:checked) { border-color: var(--laranja-600); background: var(--laranja-50); box-shadow: inset 0 0 0 1px var(--laranja-600); }
.opt input { accent-color: var(--laranja-700); width: 18px; height: 18px; margin: 0; flex: none; }
.reveal { margin: 8px 0 6px; padding-left: 16px; border-left: 3px solid var(--laranja-600); }
.fld { margin-bottom: 18px; }
.fld > label { display: block; font-weight: 500; color: var(--grafite-900); margin-bottom: 6px; }
.opt-tag { font-weight: 400; color: var(--grafite-600); }
.fld input:not([type="checkbox"]), .fld textarea { width: 100%; font: 400 16px/1.4 var(--fonte-texto); color: var(--grafite-900); padding: 12px 14px; border: 1px solid var(--grafite-500); border-radius: 4px; background: var(--branco); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--laranja-600); outline-offset: 0; border-color: var(--grafite-700); }
.fld [aria-invalid="true"] { border-color: var(--erro) !important; }
.hint { font-size: var(--t-pequeno); color: var(--grafite-600); margin: 6px 0 0; }
.err { color: var(--erro); font-size: var(--t-pequeno); font-weight: 500; margin: 6px 0 0; min-height: 0; }
.err:empty { display: none; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.chk input { accent-color: var(--laranja-700); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.nav [data-next], .nav [data-submit] { margin-left: auto; }
.ts { margin: 8px 0 4px; min-height: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 16px 0 0; color: var(--grafite-600); }
.status:empty { display: none; }

/* WhatsApp flutuante */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px; background: var(--grafite-900); color: var(--branco); text-decoration: none; font: 600 15px/1 var(--fonte-titulo); padding: 12px 16px; border: 2px solid var(--laranja-600); border-radius: 40px; box-shadow: 0 8px 24px rgba(26,28,30,.25); }
.wa-float .ic { width: 22px; height: 22px; color: var(--laranja-600); }
.wa-float:hover { background: var(--grafite-700); color: var(--branco); }

/* Rodapé */
.ftr { background: var(--grafite-900); color: var(--grafite-300); padding: 64px 0 32px; font-size: var(--t-pequeno); }
.ftr a { color: var(--grafite-200); text-decoration: none; }
.ftr a:hover { color: var(--laranja-600); }
.ftr-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid var(--grafite-800); }
.ftr-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.ftr-cols div { display: flex; flex-direction: column; gap: 8px; }
.ftr-cols .lbl { color: var(--laranja-600); margin-bottom: 4px; }
.ftr-contact { margin: 28px 0 14px; color: var(--grafite-200); }
.ftr-legal { color: var(--grafite-400); margin: 0; }
.ftr-legal a { color: var(--grafite-300); text-decoration: underline; }

/* Responsivo */
@media (max-width: 1080px) {
  .links { display: none; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .services, .feats.c4, .channels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .wrap { padding: 0 16px; }
  .hdr-in { height: 64px; gap: 12px; }
  .hdr-in .toggle, .hdr-cta { display: none; }
  .menu-btn { display: block; margin-left: auto; }
  .toggle-m { display: flex; margin: 0 16px 10px; padding: 4px; }
  .toggle-m .tg-opt { flex: 1; text-align: center; padding: 9px 6px; font-size: 13px; white-space: normal; }
  .logo-full { display: none; }
  .logo-mini { display: block; }
  .sec { padding: 64px 0; }
  .hero { padding: 48px 0; }
  .hero-grid, .split, .fronts { grid-template-columns: 1fr; gap: 32px; }
  .fork { grid-template-columns: 1fr; }
  .fork > a { padding: 40px 16px !important; }
  .fork-pj { padding-top: 56px !important; }
  .fork-pj::before { left: 0; right: 0; top: -6px; bottom: auto; width: auto; height: 12px; transform: skewY(-2deg); }
  .feats.c3 { grid-template-columns: 1fr; }
  .compl-in { flex-direction: column; gap: 16px; }
  .card { padding: 22px 18px; }
  .data { grid-template-columns: 1fr; }
  .data dt { border-bottom: 0; padding-bottom: 0; }
  .wa-float span { display: none; }
  .wa-float { padding: 14px; }
  .cta-band::after { right: -20px; width: 28px; }
}
@media (max-width: 560px) {
  .steps, .services, .feats.c4, .channels { grid-template-columns: 1fr; }
  .nav .btn { padding: 14px 18px; }
}

/* Cores das ilustrações (geradas por build.mjs) */
.ilu-stroke-grid{stroke:var(--ilu-grid,#DEE0E3)}
.ilu-stroke-linha{stroke:var(--ilu-linha,#3E4349)}
.ilu-stroke-fina{stroke:var(--ilu-fina,#969DA6)}
.ilu-stroke-destaque{stroke:var(--ilu-destaque,#FF6200)}
.ilu-fill-rotulo{fill:var(--ilu-rotulo,#545B63)}