/* =====================================================================
   Nascimento Home Center — TEMA V2 (prévia para aprovação)
   Referência: "Design system · Nova direção visual 2.1" (out/2026).
   Só estilo: carrega depois de main.css e não altera HTML nem funções.
   Forma principal "Janela Nascimento": dois cantos opostos maiores.
   ===================================================================== */
:root {
  --azul: #0043c8;
  --azul-700: #0036a3;
  --azul-050: #eaf0ff;
  --marinho: #0b2351;
  --marinho-900: #071a3e;
  --amarelo: #f3c846;          /* destaque de preço */
  --amarelo-600: #d9ab1f;
  --tinta: #16233b;
  --tinta-2: #596579;
  --tinta-3: #677387;
  --linha: #d8e0ed;
  --linha-2: #c8d2e2;
  --fundo-2: #f4f6fa;
  --fundo-3: #e9eef6;
  --f-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px;
  --janela: 40px 8px 40px 8px;          /* painel (interface) */
  --janela-sm: 24px 6px 24px 6px;       /* card de resultado / demo */
  --sombra: 0 1px 2px rgba(11, 35, 81, .05), 0 10px 30px rgba(11, 35, 81, .07);
  --sombra-forte: 0 20px 50px rgba(11, 35, 81, .16);
}

/* ---------- base ---------- */
body { font-size: 15.5px; line-height: 1.6; }
h1, h2, h3, h4 { color: var(--tinta); letter-spacing: -.02em; }
h1, h2 { font-weight: 700; }
h3, h4 { font-weight: 600; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.lead { color: var(--tinta-2); font-weight: 400; }
.eyebrow { font: 600 11px/1 var(--f-display); letter-spacing: .1em; color: var(--azul); }
.eyebrow::before { display: none; }
.bg-marinho .eyebrow, .bg-azul .eyebrow, .dept-hero .eyebrow { color: #fff; opacity: .85; }
.section { padding-block: clamp(48px, 6vw, 88px); }
.bg-2 { background: var(--fundo-2); }

/* ---------- botões ---------- */
.btn { border-radius: var(--r-sm); font-weight: 600; border-width: 1.5px; min-height: 48px; }
.btn:hover { box-shadow: 0 8px 20px rgba(0, 67, 200, .22); }
.btn-amarelo { --b: var(--azul); --c: #fff; }                 /* CTA principal passa a ser azul */
.btn-amarelo:hover { --b: var(--azul-700); box-shadow: 0 8px 20px rgba(0, 67, 200, .22); }
.btn-ghost { --b: #fff; --c: var(--azul); border-color: var(--azul); }
.btn-ghost:hover { background: var(--azul-050); border-color: var(--azul); }
.btn-lg { min-height: 52px; font-size: var(--t-md); padding: 12px 26px; }
/* sobre fundos azuis/escuros: botão branco com texto azul */
.hero .btn-amarelo, .bg-marinho .btn-amarelo, .res-card .btn-amarelo, .demo-res .btn-amarelo, .cta-band .btn-amarelo, .mega-cta .btn-amarelo, .dept-hero .btn-amarelo { --b: #fff; --c: var(--azul); }
.hero .btn-amarelo:hover, .bg-marinho .btn-amarelo:hover, .res-card .btn-amarelo:hover, .demo-res .btn-amarelo:hover, .cta-band .btn-amarelo:hover, .mega-cta .btn-amarelo:hover { --b: var(--azul-050); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.btn-contorno-claro { border-color: rgba(255, 255, 255, .7); }
.link-seta { font-weight: 600; }
.pill { font-weight: 600; letter-spacing: .05em; }
.pill-amarelo { background: var(--amarelo); color: var(--marinho); }

/* ---------- cabeçalho ---------- */
.topbar { background: var(--marinho); }
.topbar a[href*="ofertas"] { color: #fff !important; }
.unidade-btn { border-radius: var(--r-sm); }
.mainbar .wrap { min-height: 80px; }
.busca input { border-radius: var(--r-sm); border: 1px solid var(--linha); background: var(--fundo-2); height: 48px; }
.busca input:focus { box-shadow: 0 0 0 3px rgba(0, 67, 200, .14); }
.busca kbd { border-radius: 6px; }
.acao { color: var(--tinta); font-weight: 500; }
.acao:hover { background: var(--azul-050); }
.badge { background: var(--azul); color: #fff; }
/* barra de departamentos: branca, como na referência */
.deptbar { background: #fff; border-top: 1px solid var(--linha); }
.deptbar .wrap { min-height: 50px; gap: 2px; }
.deptbar a, .deptbar button { color: var(--tinta); font-weight: 500; }
.deptbar a:hover, .deptbar button:hover { color: var(--azul); }
.deptbar a::after, .deptbar button::after { background: var(--azul); height: 2px; bottom: 0; }
.deptbar .todos { background: none; color: var(--azul); font-weight: 700; padding-left: 0; }
.deptbar .todos svg { color: var(--azul); }
.deptbar a.oferta-link { background: var(--amarelo); color: var(--marinho) !important; font-weight: 700; border-radius: 999px; padding: 7px 16px; margin-inline: 6px; align-self: center; min-height: 0; line-height: 1.2; }
.deptbar a.oferta-link svg { color: var(--marinho); }
.deptbar a.oferta-link:hover { background: #ffd54f; color: var(--marinho) !important; }
.deptbar a.oferta-link::after { display: none; }
.deptbar svg { color: var(--azul); }
.mega .mega-cta { background: var(--azul); border-radius: var(--janela-sm); }
.site-header.compact { box-shadow: 0 6px 24px rgba(11, 35, 81, .1); }

/* ---------- hero da home: painel "janela" azul + foto ---------- */
.hero { background: #fff; color: #fff; overflow: visible; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: var(--max); margin: 24px auto 0; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.hero > .wrap { grid-area: 1 / 1; z-index: 2; background: var(--azul); border-radius: var(--janela); margin: 0 -56px 0 0; max-width: none; padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4vw, 60px); display: flex; align-items: center; }
.hero-media { position: relative; inset: auto; grid-area: 1 / 2; z-index: 1; border-radius: 8px 24px 24px 8px; overflow: hidden; min-height: 100%; }
.hero-media picture, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::before { display: none; }
.hero-media .credito { z-index: 2; }
.hero-copy { max-width: 600px; }
.hero h1 { font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.03em; }
.hero h1 em { color: #fff; font-style: normal; }
.hero .lead { color: #e1e9ff; font-size: var(--t-md); }
.hero-ctas { margin-bottom: 28px; }
.atalho { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); border-radius: var(--r-sm); font-weight: 600; padding: 6px 14px 6px 6px; }
.atalho span { background: #fff; color: var(--azul); border-radius: 6px; }
.hero-regua { display: none; }

/* números: cards claros */
.faixa-num { background: #fff; color: var(--tinta); }
.faixa-num .wrap { gap: 16px; padding-block: 24px 8px; }
.faixa-num .n { background: var(--fundo-2); border: 0; border-radius: var(--r-md); padding: 20px 20px 18px; }
.faixa-num strong { color: var(--azul); font-weight: 700; }
.faixa-num span { color: var(--tinta-2); }

/* diferenciais: cards separados */
.difs { border: 0; background: none; gap: 16px; overflow: visible; }
.dif { border: 1px solid var(--linha) !important; border-radius: var(--r-md); background: #fff; }
.dif .ic { border-radius: 12px; }
.dif h3 { font-weight: 600; }
.dif .evid { border-radius: var(--r-sm); background: var(--fundo-2); color: var(--tinta); }

/* central de calculadoras: fundo claro, cartões brancos */
.calc-hub.bg-marinho { background: var(--fundo-2); color: var(--tinta); }
.calc-hub::before { display: none; }
.calc-hub h2 { color: var(--tinta); }
.calc-hub .lead { color: var(--tinta-2); }
.calc-hub .eyebrow { color: var(--azul); opacity: 1; }
.calc-card { background: #fff; border: 1px solid var(--linha); color: var(--tinta); border-radius: var(--r-md); }
.calc-card:hover { background: #fff; border-color: var(--azul); color: var(--tinta); box-shadow: var(--sombra); }
.calc-card .ci { background: var(--azul-050); color: var(--azul); border-radius: 12px; }
.calc-card small { color: var(--tinta-2); }
.calc-card-todas { background: var(--azul-050); border: 0; color: var(--azul); }
.calc-card-todas:hover { background: var(--azul-050); color: var(--azul-700); }
.demo { border-radius: var(--r-lg); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.demo-head { background: #fff; }
.demo-head h3 { font-weight: 600; }
.demo-res { background: var(--azul); border-radius: var(--janela-sm); margin: 10px; }
.demo-res .big { font-weight: 700; }
.demo-res .big small { color: #fff; }
.demo-res dt { color: #d4defa; }
.demo-res dd { font-family: var(--f-body); font-weight: 600; }
.demo-res .eyebrow { color: #fff; opacity: .85; }
.demo-aviso { color: #d4defa !important; }

/* formulários */
.field label, .lbl { font-weight: 500; color: var(--tinta); }
.inp input, .inp select, .field select, .field textarea, .field > input { border: 1.5px solid var(--linha); border-radius: var(--r-sm); min-height: 50px; }
.inp input { font-family: var(--f-body); font-weight: 500; }
.inp input:focus, .field select:focus, .field textarea:focus, .field > input:focus, .inp select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 67, 200, .14); }
.inp .un { background: transparent; border-left: 0; font-family: var(--f-body); font-weight: 500; color: var(--tinta-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.inp select.un-sel { background: transparent; font-family: var(--f-body); border-left: 1px solid var(--linha); }
.inp input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #c4363b; background: #fff; }
.seg { border-radius: var(--r-sm); background: var(--fundo-2); }
.seg label { border-radius: 6px; font-weight: 600; }
.msg { border-radius: var(--r-sm); }
.msg-info { background: var(--azul-050); color: var(--tinta); }

/* ---------- página de calculadora ---------- */
.calc-hero { background: var(--fundo-2); }
.calc-hero h1 { font-weight: 700; }
.calc-hero .nota-tec { border-radius: var(--r-sm); }
.panel { border-radius: var(--r-md); padding: 24px; }
.panel > h2, .panel > h3 { font-weight: 600; }
.panel > h2 .step, .panel > h3 .step { font-family: var(--f-body); font-weight: 700; }
.linha { border-radius: 12px; }
.linha .rm { border-radius: var(--r-sm); border-width: 1px; border-color: var(--linha); }
.ilustra { border-radius: var(--r-md); }
.res-card { background: var(--azul); border-radius: var(--janela-sm); box-shadow: 0 18px 40px rgba(0, 67, 200, .22); }
.res-top { border-bottom-color: rgba(255, 255, 255, .18); }
.res-top .tag { color: #fff; opacity: .85; font-weight: 600; }
.res-main .big { font-weight: 700; }
.res-main .un { color: #fff; font-weight: 600; }
.res-sub { color: #dde6ff; }
.res-dl dt { color: #d4defa; }
.res-dl dd { font-family: var(--f-body); font-weight: 600; }
.res-dl .sep { background: rgba(255, 255, 255, .18); }
.res-empty { color: #dde6ff; }
.res-empty svg { color: #fff; }
.res-actions .btn-mini { border-color: rgba(255, 255, 255, .35); border-radius: var(--r-sm); font-weight: 600; }
.res-card .aviso-calc { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-left: 4px solid var(--amarelo); }
.res-card .aviso-calc strong, .res-card .aviso-calc svg { color: #fff; }
.memoria { border-radius: var(--r-md); }
.memoria summary { font-weight: 600; color: var(--tinta); }
.aviso-calc { border-radius: var(--r-md); background: #fdf7e2; border-color: #f1dc95; border-left-color: var(--amarelo); color: #4f3c05; }
.aviso-calc svg { color: #b58a07; }
.exemplo-box { border-left-color: var(--azul); border-radius: 0 var(--r-md) var(--r-md) 0; }
.passos li::before { font-family: var(--f-body); }
.faq details { border-radius: var(--r-md); }
.faq summary { font-weight: 600; color: var(--tinta); }
.tabela-wrap { border-radius: var(--r-md); }
th { background: var(--fundo-2); color: var(--tinta); font-weight: 600; }

/* ---------- departamentos e produtos ---------- */
.dept-card { border-radius: var(--r-md); }
.dept-card h3 { font-weight: 600; }
.foto-tag { border-radius: 6px; font-weight: 600; }
.foto-tag.real { background: #fff; color: var(--azul); }
.dept-hero { max-width: var(--max); margin: 20px auto 0; border-radius: var(--janela); background: var(--azul); }
.dept-hero::before { background: linear-gradient(90deg, var(--azul) 0%, var(--azul) 42%, rgba(0, 67, 200, .55) 62%, rgba(0, 67, 200, 0) 82%); }
.dept-hero .wrap { padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.dept-hero h1 { font-weight: 700; }
.dept-hero .lead { color: #e1e9ff; max-width: 52ch; }
.dept-hero .crumbs, .dept-hero .crumbs a { color: #d4defa; }
.dept-hero .pill-amarelo { background: #fff; color: var(--azul); }
.chips li, .chip { border-radius: var(--r-sm); font-weight: 500; color: var(--tinta); }
.prod { border-radius: var(--r-md); }
.prod:hover { border-color: var(--azul); }
.prod .ph { border-bottom: 0; padding: 8px; }
.prod .ph img { border-radius: 10px; }
.prod .marca { font-weight: 600; }
.prod h3 { font-family: var(--f-body); font-weight: 600; }
.prod .specs span { font-family: var(--f-body); font-weight: 500; border-radius: 6px; }
.prod .preco { justify-self: start; background: var(--amarelo); color: var(--marinho); font-weight: 700; padding: 7px 10px; border-radius: var(--r-sm); }
.prod-page .ph { border-radius: var(--janela-sm); }
.prod-page span[style*="--t-xl"] { display: inline-block; background: var(--amarelo); color: var(--marinho) !important; padding: 14px 20px; border-radius: 12px; font-weight: 700 !important; }
.g-thumbs button { border-radius: 10px; border-width: 1.5px; }
.filtros .field label { font-weight: 500; }

/* ---------- páginas internas ---------- */
.page-hero { background: var(--fundo-2); }
.page-hero h1 { font-weight: 700; }
.etapa-tab { border-radius: var(--r-sm); border-width: 1.5px; font-weight: 600; }
.etapa-panel { border-radius: var(--r-lg); }
.trilha li::before { background: var(--azul-050); color: var(--azul); font-family: var(--f-body); }
.mosaico figure { border-radius: var(--r-md); }
.mosaico figure.m-a { border-radius: var(--janela-sm); }
.estrutura-lista svg { color: #8fb0ff; }
.loja-card { border-radius: var(--r-lg); }
.loja-card .ph .selo { transform: none; border-radius: 0 16px 0 0; left: 0; bottom: 0; }
.loja-card .ph .selo span { transform: none; }
.pro-ev, .pro-cta, .pro-topicos > div { border-radius: var(--r-md); }
.pro-form { border-top-color: var(--azul); }
.pb-ic, .pro-lista li > svg { background: var(--azul-050); color: var(--azul); }

/* CTA final: janela azul, sem faixas inclinadas */
.cta-band { border-radius: var(--janela); padding-left: clamp(28px, 4vw, 56px); }
.cta-band::before, .cta-band::after { display: none; }
.cta-band h2 { font-weight: 700; }
.cta-band p { color: #e1e9ff; }

/* rodapé */
.site-footer { background: var(--marinho); }
.footer-top h3 { font-weight: 600; letter-spacing: .08em; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .hero-media { grid-area: 1 / 1; height: 260px; min-height: 0; border-radius: 24px 24px 8px 8px; }
  .hero > .wrap { grid-area: 2 / 1; margin: -32px 0 0; }
}
@media (max-width: 720px) {
  .hero-media { height: 200px; }
  .hero > .wrap { padding: 28px 22px; border-radius: 28px 6px 28px 6px; }
  .faixa-num .wrap { gap: 10px; }
  .dept-hero { margin: 12px var(--gutter) 0; border-radius: 28px 6px 28px 6px; }
  .dept-hero::before { background: linear-gradient(180deg, rgba(0, 67, 200, .82) 0%, var(--azul) 60%); }
  .demo-res { margin: 8px; }
  .cta-band { border-radius: 28px 6px 28px 6px; }
}

/* ---------- ajustes finos ---------- */
.hero .eyebrow, .demo .demo-res .eyebrow, .dept-hero .eyebrow { color: #fff; opacity: .85; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--azul); }
.skip { background: var(--azul); color: #fff; }
.video-facade .play span { background: #fff; color: var(--azul); }
.panel[style*="--marinho"] { background: var(--azul) !important; border-radius: var(--janela-sm); color: #e1e9ff !important; }
.panel[style*="--marinho"] .btn-amarelo { --b: #fff; --c: var(--azul); }
.dept-hero { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); }
.calc-hero .aviso-topo { max-width: 860px; }

/* Mega menu: o CTA fica dentro da .deptbar e herdava o estilo dos links da barra (sem fundo). Botão branco explícito. */
.deptbar .mega-cta .btn { background: #fff; color: var(--azul); border: 1.5px solid #fff; border-radius: var(--r-sm); padding: 12px 20px; min-height: 44px; align-self: flex-start; font-weight: 700; gap: 8px; margin-top: auto; }
.deptbar .mega-cta .btn:hover { background: var(--azul-050); border-color: var(--azul-050); color: var(--azul-700); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.deptbar .mega-cta .btn::after { display: none; }
.deptbar .mega-cta .btn svg { color: var(--azul); }
.deptbar .mega-cta .eyebrow { color: #cfe0ff; }

/* Faixa de números da home: ícone + texto alinhados */
.faixa-num .wrap { padding-block: 20px 0; align-items: stretch; }
.faixa-num .n { display: flex; align-items: center; gap: 14px; padding: 18px; min-height: 96px; }
.faixa-num .n-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--azul); display: grid; place-items: center; box-shadow: 0 1px 0 var(--linha); }
.faixa-num .n-ic svg { width: 24px; height: 24px; }
.faixa-num .n-tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.faixa-num .n-tx strong { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); line-height: 1.05; }
.faixa-num .n-tx span { font-size: var(--t-sm); line-height: 1.35; }
.faixa-num + .section { padding-top: clamp(32px, 4vw, 48px); }
@media (max-width: 1100px) and (min-width: 721px) { .faixa-num .n { padding: 16px 14px; gap: 12px; } .faixa-num .n-ic { width: 40px; height: 40px; } }
@media (max-width: 720px) { .faixa-num .n { padding: 14px; min-height: 0; } .faixa-num .n-ic { width: 38px; height: 38px; border-radius: 10px; } .faixa-num .n-ic svg { width: 20px; height: 20px; } }

/* Controles do carrossel sobre o slider */
.hero-carrossel .carrossel-ctrl { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; z-index: 5; background: rgba(255, 255, 255, .94); padding: 5px 8px; border-radius: 999px; box-shadow: 0 6px 20px rgba(9, 30, 80, .25); gap: 6px; }
.hero-carrossel .carr-btn { width: 32px; height: 32px; border: 0; background: transparent; }
.hero-carrossel .carr-btn:hover { background: var(--azul-050); }
.hero-carrossel .carr-btn svg { width: 16px; height: 16px; }
.hero-carrossel .carr-dots { padding-inline: 4px; }
@media (max-width: 1024px) { .hero-carrossel .hero-slide .wrap { padding-bottom: 84px; } }
@media (max-width: 720px) {
  .faixa-num .n { flex-direction: column; align-items: flex-start; gap: 10px; }
  .faixa-num .n-tx strong { font-size: 1.3rem; }
}
@media (max-width: 1280px) and (min-width: 721px) {
  .faixa-num .n { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .faixa-num .n-tx strong { font-size: 1.35rem; }
}