/* ARMAZEMX v12.50 — página de vendas (public/vendas.html). Independente do CSS do painel: só fonte e imagens do próprio sistema. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/css/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/css/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/plex-sans-700.woff2') format('woff2'); }

:root {
  --navy-deep: #050b14; --navy: #0b1f3a; --navy-2: #123258; --blue: #1f6fe0; --sky: #2aa0ff; --gold: #ffb020;
  --ink: #0f1b2d; --muted: #4b5d75; --line: #e1e8f2; --bg: #ffffff; --bg-suave: #f3f7fc; --card: #ffffff; --ok: #12804a;
  --raio: 16px; --sombra: 0 14px 40px rgba(11, 31, 58, .12); --sombra-forte: 0 28px 70px rgba(5, 11, 20, .45);
  --fonte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--fonte); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 16.5px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.estreito { width: min(820px, 100% - 32px); }
.pular { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.pular:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: 12px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-grande { padding: 14px 24px; font-size: 16.5px; }
.btn-destaque { background: linear-gradient(135deg, var(--sky), var(--blue)); color: #fff; box-shadow: 0 8px 22px rgba(31, 111, 224, .45); }
.btn-destaque:hover { box-shadow: 0 12px 28px rgba(31, 111, 224, .6); }
.btn-fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-fantasma:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-zap { background: #1faa59; color: #fff; margin-top: 4px; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(5, 11, 20, .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu > a:not(.btn) { color: #cfdcf0; text-decoration: none; font-weight: 500; font-size: 15px; }
.menu > a:not(.btn):hover { color: #fff; }
.menu .btn { padding: 8px 14px; font-size: 14px; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; height: 3px; background: #fff; border-radius: 2px; margin: 5px 0; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { --hero-pad: 64px 0 92px; background: radial-gradient(1100px 520px at 85% -10%, rgba(42, 160, 255, .38), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(31, 111, 224, .35), transparent 60%), linear-gradient(180deg, var(--navy-deep), var(--navy) 100%); color: #fff; padding: 0; overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.hero-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; position: relative; }
.selo-topo { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #bfe0ff; background: rgba(42, 160, 255, .15); border: 1px solid rgba(42, 160, 255, .35); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(32px, 4vw, 49px); font-weight: 700; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--sky), #8fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 20px; font-size: 18.5px; color: #cfdcf0; max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-pontos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: #b3c6e0; font-size: 14.5px; }
.hero-pontos li::before { content: '✓'; color: var(--sky); font-weight: 700; margin-right: 7px; }
.hero-visual { position: relative; padding-bottom: 36px; }
.hero-visual .janela { transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); box-shadow: var(--sombra-forte); }
.celular-hero { position: absolute; left: -34px; bottom: -14px; width: 138px; }

/* mockups */
.janela { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--sombra); }
.janela-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9eef6; border-bottom: 1px solid #d5deea; }
.janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: #c3cddb; }
.janela-barra i:nth-child(1) { background: #ff6b5f; } .janela-barra i:nth-child(2) { background: #ffbd3f; } .janela-barra i:nth-child(3) { background: #3ccf62; }
.janela-barra span { margin-left: 8px; font-size: 12px; color: #5b6b82; background: #fff; border-radius: 6px; padding: 2px 12px; flex: 0 1 auto; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celular { background: #0b1220; border-radius: 26px; padding: 7px; box-shadow: var(--sombra-forte); border: 2px solid #26354d; }
.celular img { border-radius: 20px; }

/* ---------- faixa ---------- */
.faixa { margin-top: -44px; position: relative; z-index: 2; }
.faixa-in { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 18px; box-shadow: var(--sombra); border: 1px solid var(--line); }
.faixa-in > div { padding: 20px 22px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); }
.faixa-in > div:last-child { border-right: 0; }
.faixa-in b { font-size: 15.5px; }
.faixa-in span { font-size: 13.5px; color: var(--muted); }

/* ---------- seções ---------- */
.secao { padding: 92px 0; }
.fundo-suave { background: var(--bg-suave); }
.fundo-escuro { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); color: #fff; }
.secao-cab { max-width: 760px; margin-bottom: 44px; }
.secao-cab.centro { margin-inline: auto; text-align: center; }
.secao-cab h2 { font-size: clamp(27px, 3.3vw, 40px); font-weight: 700; }
.secao-cab p:not(.sobretitulo) { margin-top: 14px; color: var(--muted); font-size: 17.5px; }
.fundo-escuro .secao-cab p:not(.sobretitulo) { color: #b9cae2; }
.sobretitulo { color: var(--blue); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.fundo-escuro .sobretitulo { color: var(--sky); }

/* antes / depois */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comp-col { border-radius: var(--raio); padding: 28px 30px; }
.comp-col h3 { font-size: 20px; margin-bottom: 16px; }
.comp-col ul { list-style: none; display: grid; gap: 13px; }
.comp-col li { position: relative; padding-left: 30px; }
.comp-col li::before { position: absolute; left: 0; top: 1px; font-weight: 700; }
.antes { background: var(--bg-suave); border: 1px solid var(--line); }
.antes li { color: #56667c; } .antes li::before { content: '✕'; color: #c0392b; }
.depois { background: linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: var(--sombra); }
.depois li::before { content: '✓'; color: #5fd48b; }

/* fluxo */
.fluxo { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; counter-reset: f; position: relative; }
.fluxo li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 14px 16px; position: relative; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 18px rgba(11, 31, 58, .05); }
.fluxo li p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.fluxo li b { font-size: 15px; }
.fluxo-n { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.fluxo li:not(:last-child)::after { content: '›'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 22px; font-weight: 700; z-index: 1; background: var(--bg-suave); width: 12px; text-align: center; }
.fluxo-nota { margin-top: 24px; text-align: center; background: #fff; border: 1px dashed #b9cde8; border-radius: 12px; padding: 14px 18px; color: var(--muted); }
.fluxo-nota b { color: var(--ink); }

/* cartões de funcionalidades */
.grade-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card-f { background: #fff; border: 1px solid var(--line); border-radius: var(--raio); padding: 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.card-f:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: #bcd4f6; }
.card-f .ico { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; border-radius: 13px; background: linear-gradient(135deg, #e6f1ff, #cfe3ff); margin-bottom: 14px; }
.card-f h3 { font-size: 18.5px; margin-bottom: 8px; }
.card-f p { color: var(--muted); font-size: 15.5px; }
.tambem { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.tambem li { background: var(--bg-suave); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; color: var(--muted); }

/* produto (abas) */
.abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 34px; }
.abas button { font: inherit; font-weight: 600; font-size: 15px; color: #cfdcf0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: background .15s, color .15s; }
.abas button:hover { background: rgba(255, 255, 255, .13); }
.abas button[aria-selected="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.painel { display: grid; grid-template-columns: .8fr 1.3fr; gap: 44px; align-items: center; }
.painel[hidden] { display: none; }
.painel-texto h3 { font-size: 26px; margin-bottom: 18px; }
.painel-texto ul { list-style: none; display: grid; gap: 14px; }
.painel-texto li { position: relative; padding-left: 28px; color: #cbd9ee; }
.painel-texto li::before { content: '✓'; position: absolute; left: 0; color: var(--sky); font-weight: 700; }
.painel-img.celulares { display: flex; justify-content: center; gap: 22px; }
.painel-img.celulares .celular { width: min(250px, 42%); }
.painel-img .celular:nth-child(2) { margin-top: 36px; }

/* formulários em passos (imagem + texto, um por linha) */
.zig { display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: center; }
.zig + .zig { margin-top: 64px; }
.zig.inverso { grid-template-columns: .8fr 1.3fr; }
.zig.inverso .zig-img { order: 2; }
.zig .janela { border-color: var(--line); box-shadow: var(--sombra); }
.zig-texto h3 { font-size: 25px; margin-bottom: 16px; }
.zig-texto > p { color: var(--muted); margin-top: 18px; }
.zig-texto > p b { color: var(--ink); }
.passos-mini { list-style: none; display: grid; gap: 10px; counter-reset: pm; }
.passos-mini li { counter-increment: pm; position: relative; padding-left: 40px; color: var(--muted); font-size: 15.5px; }
.passos-mini li::before { content: counter(pm); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.passos-mini b { display: block; color: var(--ink); }

/* chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin-inline: auto; }
.chips li { background: #fff; border: 1px solid #c9daf0; color: var(--navy-2); border-radius: 999px; padding: 9px 18px; font-weight: 500; font-size: 15px; }

/* planos */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plano { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow .2s, transform .2s; }
.plano:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.plano h3 { font-size: 22px; }
.plano-desc { color: var(--muted); font-size: 15px; min-height: 66px; }
.plano-preco { font-size: 15px; color: var(--muted); }
.plano-preco b { display: block; font-size: 34px; color: var(--ink); line-height: 1.1; }
.plano-preco small { display: block; font-size: 13px; margin-top: 4px; }
.plano-sob { font-weight: 600; color: var(--navy-2); padding: 9px 0; }
.plano-lim { list-style: none; display: grid; gap: 8px; font-size: 15px; padding: 14px 0; border-block: 1px solid var(--line); }
.plano-lim li::before { content: '•'; color: var(--blue); font-weight: 700; margin-right: 8px; }
.plano-mod { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.plano-mod li { background: var(--bg-suave); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--muted); }
.plano .btn { margin-top: auto; background: #0b1f3a; color: #fff; width: 100%; }
.plano .btn:hover { background: var(--blue); }
.planos-nota { margin-top: 22px; text-align: center; color: var(--muted); font-size: 14.5px; }
.carregando { grid-column: 1 / -1; text-align: center; color: var(--muted); }

/* passos */
.passos3 { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.passos3 li { background: #fff; border: 1px solid var(--line); border-radius: var(--raio); padding: 28px 26px; }
.passos3 li > span { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--sky), var(--blue)); color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center; margin-bottom: 14px; }
.passos3 h3 { font-size: 19px; margin-bottom: 8px; }
.passos3 p { color: var(--muted); font-size: 15.5px; }

/* faq */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 17px 28px 17px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--blue); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] { border-color: #bcd4f6; box-shadow: 0 6px 18px rgba(31, 111, 224, .08); }
.faq details p { padding: 0 0 18px; color: var(--muted); }

/* demonstração */
.demo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.demo-texto h2 { font-size: clamp(28px, 3.3vw, 40px); margin-bottom: 16px; }
.demo-texto > p:not(.sobretitulo):not(.ja-cliente) { color: #b9cae2; font-size: 17.5px; }
.demo-lista { list-style: none; display: grid; gap: 11px; margin: 24px 0 26px; }
.demo-lista li::before { content: '✓'; color: #5fd48b; font-weight: 700; margin-right: 10px; }
.ja-cliente { margin-top: 26px; color: #9fb4d1; font-size: 14.5px; }
.ja-cliente a { color: #fff; }
.demo-form, .demo-ok { background: #fff; color: var(--ink); border-radius: 20px; padding: 32px 30px; box-shadow: var(--sombra-forte); }
.demo-form h3 { font-size: 22px; margin-bottom: 18px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; position: relative; }
.campos label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #26364d; }
.campos label b { color: #c0392b; }
.campos label > span { display: block; }
.campos .cheio { grid-column: 1 / -1; }
.campos input:not([type=checkbox]), .campos select, .campos textarea { font: inherit; font-weight: 400; font-size: 15.5px; color: var(--ink); background: #f7f9fc; border: 1.5px solid #d3dded; border-radius: 10px; padding: 11px 12px; width: 100%; }
.campos input:focus, .campos select:focus, .campos textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(31, 111, 224, .18); }
.campos textarea { resize: vertical; }
.isca { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 6px; font-size: 13.5px; color: var(--muted); }
.aceite input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.demo-aviso { margin: 8px 0; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #8a1f14; font-size: 14.5px; }
.demo-form .btn { width: 100%; margin-top: 10px; }
.demo-nota { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }
.demo-ok { text-align: center; padding: 56px 30px; }
.demo-ok[hidden], .demo-form[hidden] { display: none; }
.ok-ico { font-size: 44px; display: block; margin-bottom: 12px; }
.demo-ok h3 { font-size: 24px; margin-bottom: 10px; }
.demo-ok p { color: var(--muted); }

/* rodapé */
.rodape { background: var(--navy-deep); color: #a9bad3; padding: 48px 0 24px; }
.rodape-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-items: flex-start; }
.rodape-marca img { height: 50px; width: auto; margin-bottom: 10px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rodape-links a { color: #cfdcf0; text-decoration: none; font-size: 15px; }
.rodape-links a:hover { color: #fff; text-decoration: underline; }
.rodape-dev { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.rodape-dev img { height: 34px; width: auto; }

/* aparecer ao rolar */
.ver { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ver.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ver { opacity: 1; transform: none; transition: none; } .btn:hover, .card-f:hover, .plano:hover { transform: none; } }

/* ---------- telas menores ---------- */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .fluxo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .hero-visual { max-width: 720px; margin-inline: auto; width: 100%; }
  .hero-visual .janela { transform: none; }
  .fluxo li::after { display: none; }
  .grade-cards, .planos { grid-template-columns: repeat(2, 1fr); }
  .painel { grid-template-columns: 1fr; gap: 28px; }
  .demo { grid-template-columns: 1fr; gap: 36px; }
  .faixa-in { grid-template-columns: repeat(2, 1fr); }
  .faixa-in > div:nth-child(2) { border-right: 0; }
  .faixa-in > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .menu-btn { display: block; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy-deep); padding: 8px 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); display: none; }
  .menu.aberto { display: flex; }
  .menu > a:not(.btn) { padding: 13px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu .btn { margin-top: 12px; padding: 12px 16px; }
  .comparar, .passos3, .zig, .zig.inverso { grid-template-columns: 1fr; }
  .zig.inverso .zig-img { order: 0; }
  .zig { gap: 26px; }
  .secao { padding: 68px 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero-sub { font-size: 17px; }
  .hero-cta .btn { width: 100%; }
  .celular-hero { width: 96px; left: -6px; bottom: -22px; }
  .faixa { margin-top: -34px; }
  .faixa-in { grid-template-columns: 1fr; }
  .faixa-in > div { border-right: 0 !important; border-bottom: 1px solid var(--line); padding: 14px 18px; }
  .faixa-in > div:last-child { border-bottom: 0; }
  .fluxo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .grade-cards, .planos { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .demo-form, .demo-ok { padding: 24px 18px; }
  .painel-img.celulares .celular { width: 46%; }
  .abas button { padding: 9px 14px; font-size: 14px; }
  .comp-col { padding: 22px 20px; }
}

/* =====================================================================================================
   v12.52 — banners (carrossel), três modelos visuais, paletas e estilos de rodapé (tudo editável na Central)
   ===================================================================================================== */
/* ---------- banners ---------- */
.hero-slides { display: grid; position: relative; }
.hero-slide { grid-area: 1 / 1; position: relative; padding: 56px 0 128px; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; min-width: 0; }
.hero-slide.ativo { opacity: 1; visibility: visible; z-index: 1; }
.hero-in.sem-visual { grid-template-columns: 1fr; }
.hero-in.sem-visual .hero-texto { max-width: 760px; }
.h1-banner { font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; }
.h1-banner em { font-style: normal; background: linear-gradient(90deg, var(--sky), #8fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-texto { min-width: 0; }
.hero-texto h1, .hero-texto h2 { overflow-wrap: anywhere; }
.e-fundo { color: #fff; min-height: 460px; display: flex; align-items: center; }
.e-fundo .hero-in { width: min(1160px, 100% - 32px); }
.slide-fundo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 11, 20, .88) 0%, rgba(5, 11, 20, .55) 55%, rgba(5, 11, 20, .25) 100%); }
.hero-in.fundo { grid-template-columns: 1fr; position: relative; }
.hero-in.fundo .hero-texto { max-width: 720px; }
.hero-in.fundo.centro .hero-texto { margin-inline: auto; text-align: center; }
.hero-in.fundo.centro .hero-cta, .hero-in.fundo.centro .hero-pontos { justify-content: center; }
.e-fundo .hero-sub { color: #e3ecf8; }
.foto-quadro img { border-radius: 18px; box-shadow: var(--sombra-forte); width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.celular-solo { width: min(250px, 62%); margin-inline: auto; }
.painel-img img.solta, .zig-img img.solta { border-radius: 14px; box-shadow: var(--sombra); }
.bn-ctl { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; background: rgba(5, 11, 20, .55); backdrop-filter: blur(6px); border-radius: 999px; padding: 6px 10px; }
.bn-seta, .bn-pausa { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.bn-pausa { font-size: 11px; }
.bn-seta:hover, .bn-pausa:hover { background: rgba(255, 255, 255, .18); }
.bn-bolas { display: flex; gap: 8px; }
.bn-bola { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); padding: 0; cursor: pointer; transition: width .25s, background .25s; }
.bn-bola.ativo { width: 26px; border-radius: 6px; background: var(--sky); }

/* ---------- logo, cabeçalho e rodapé novos ---------- */
.logo-claro { display: none; }
.rod-col h4 { margin: 0 0 10px; color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.rod-col a { display: block; color: #cfdcf0; text-decoration: none; font-size: 15px; padding: 4px 0; }
.rod-col a:hover { color: #fff; text-decoration: underline; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.rodape-marca { max-width: 360px; }
.rod-contato { display: grid; gap: 4px; margin-top: 14px; }
.rod-contato a { color: #cfdcf0; text-decoration: none; font-size: 15px; overflow-wrap: anywhere; }
.rod-redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rod-rede { border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; }
.rod-rede:hover { background: rgba(255, 255, 255, .12); }
.rodape-fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rodape-copy { margin: 0; font-size: 13px; }
.rod-linkbtn { background: none; border: 0; color: #cfdcf0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.rod-linkbtn:hover { color: #fff; }
.e-centro .rodape-in { flex-direction: column; align-items: center; text-align: center; }
.e-centro .rodape-marca { max-width: 560px; }
.e-centro .rod-redes, .e-centro .rodape-links { justify-content: center; }
.e-centro .rodape-fim { justify-content: center; text-align: center; }
.rod-chamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rod-chamada h2 { color: #fff; font-size: clamp(24px, 3.2vw, 38px); max-width: 640px; }
.politica { border: 0; border-radius: 18px; padding: 0; width: min(720px, 94vw); max-height: 86vh; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.politica::backdrop { background: rgba(0, 0, 0, .6); }
.politica form { padding: 28px; display: grid; gap: 16px; }
.politica-texto { color: var(--muted); max-height: 52vh; overflow: auto; font-size: 15px; }

/* ---------- cores de destaque ---------- */
body[data-paleta="azul"] { --sky: #2aa0ff; --blue: #1f6fe0; }
body[data-paleta="verde"] { --sky: #3fd08a; --blue: #12804a; }
body[data-paleta="laranja"] { --sky: #ffb347; --blue: #d9710f; }
body[data-paleta="roxo"] { --sky: #b39bff; --blue: #6b46d9; }
body[data-paleta="vinho"] { --sky: #f07a98; --blue: #a3153f; }
.btn-destaque { box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 45%, transparent); }
.btn-destaque:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 60%, transparent); }
.card-f .ico { background: color-mix(in srgb, var(--blue) 12%, #fff); }
.card-f:hover { border-color: color-mix(in srgb, var(--blue) 40%, #fff); }
.faq details[open] { border-color: color-mix(in srgb, var(--blue) 35%, #fff); }
.chips li { color: var(--navy-2); border-color: color-mix(in srgb, var(--blue) 28%, #fff); }

/* ---------- MODELO CLARO: fundo branco, topo claro, muito respiro ---------- */
body[data-modelo="claro"] { --navy-deep: #f4f8fd; --navy: #eaf2fc; --navy-2: #1b3a63; }
body[data-modelo="claro"] .logo-escuro { display: none; } body[data-modelo="claro"] .logo-claro { display: block; }
body[data-modelo="claro"] .topo { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
body[data-modelo="claro"] .menu > a:not(.btn) { color: #33465f; } body[data-modelo="claro"] .menu > a:not(.btn):hover { color: var(--blue); }
body[data-modelo="claro"] .menu-btn span { background: var(--ink); }
body[data-modelo="claro"] .btn-fantasma { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, #fff); }
body[data-modelo="claro"] .btn-fantasma:hover { background: color-mix(in srgb, var(--blue) 8%, #fff); border-color: var(--blue); }
body[data-modelo="claro"] .hero { background: radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--sky) 28%, transparent), transparent 60%), linear-gradient(180deg, #f7fbff, #e8f1fc); color: var(--ink); }
body[data-modelo="claro"] .hero::before { background-image: none; }
body[data-modelo="claro"] .hero-sub { color: #3d5069; } body[data-modelo="claro"] .hero-pontos { color: #4b5d75; }
body[data-modelo="claro"] .selo-topo { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, #fff); border-color: color-mix(in srgb, var(--blue) 30%, #fff); }
body[data-modelo="claro"] .hero h1 em, body[data-modelo="claro"] .h1-banner em { background: none; -webkit-text-fill-color: var(--blue); color: var(--blue); }
body[data-modelo="claro"] .hero-visual .janela { transform: none; border-color: var(--line); }
body[data-modelo="claro"] .e-fundo .btn-fantasma { color: #fff; border-color: rgba(255, 255, 255, .5); }
body[data-modelo="claro"] .e-fundo .selo-topo { color: #dff0ff; background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .3); }
body[data-modelo="claro"] .e-fundo h1 em, body[data-modelo="claro"] .e-fundo .h1-banner em { -webkit-text-fill-color: #fff; color: #fff; }
body[data-modelo="claro"] .e-fundo .hero-pontos { color: #e3ecf8; }
body[data-modelo="claro"] .fundo-escuro { background: linear-gradient(180deg, #eaf2fc, #dde9f8); color: var(--ink); }
body[data-modelo="claro"] .fundo-escuro .secao-cab p:not(.sobretitulo) { color: var(--muted); } body[data-modelo="claro"] .fundo-escuro .sobretitulo { color: var(--blue); }
body[data-modelo="claro"] .abas button { color: #33465f; background: #fff; border-color: var(--line); }
body[data-modelo="claro"] .abas button[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
body[data-modelo="claro"] .painel-texto li { color: #3d5069; } body[data-modelo="claro"] .painel-texto li::before { color: var(--blue); }
body[data-modelo="claro"] .depois { background: linear-gradient(160deg, var(--blue), color-mix(in srgb, var(--blue) 70%, #000)); }
body[data-modelo="claro"] #demonstracao .demo-texto > p:not(.sobretitulo):not(.ja-cliente) { color: var(--muted); }
body[data-modelo="claro"] #demonstracao .demo-lista { color: var(--ink); } body[data-modelo="claro"] #demonstracao .ja-cliente { color: var(--muted); } body[data-modelo="claro"] #demonstracao .ja-cliente a { color: var(--blue); }
body[data-modelo="claro"] .demo-form { border: 1px solid var(--line); box-shadow: var(--sombra); }
body[data-modelo="claro"] .bn-ctl { background: rgba(255, 255, 255, .85); } body[data-modelo="claro"] .bn-seta, body[data-modelo="claro"] .bn-pausa { color: var(--ink); border-color: #9fb2cc; } body[data-modelo="claro"] .bn-bola { background: #b7c6dc; }
body[data-modelo="claro"] .e-fundo ~ .bn-ctl { background: rgba(5, 11, 20, .55); }
body[data-modelo="claro"] .rodape { background: #0b1f3a; }

/* ---------- MODELO INDUSTRIAL: grafite, âmbar, blocos retos, títulos fortes ---------- */
body[data-modelo="industrial"] { --navy-deep: #101216; --navy: #1b1e24; --navy-2: #2b3038; --raio: 4px; --sombra: 0 10px 28px rgba(16, 18, 22, .16); --bg-suave: #f1f2f4; --line: #dcdfe4; }
body[data-modelo="industrial"][data-paleta="padrao"] { --sky: #ffb21f; --blue: #d98500; }
body[data-modelo="industrial"] h1, body[data-modelo="industrial"] h2, body[data-modelo="industrial"] .hero h1 { text-transform: uppercase; letter-spacing: .01em; font-weight: 700; }
body[data-modelo="industrial"] .hero h1 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.12; }
body[data-modelo="industrial"] .secao-cab h2 { font-size: clamp(26px, 3.2vw, 38px); }
body[data-modelo="industrial"] .hero { background: linear-gradient(120deg, #101216 40%, #1b1e24); }
body[data-modelo="industrial"] .hero::before { background-image: repeating-linear-gradient(135deg, rgba(255, 178, 31, .06) 0 14px, transparent 14px 28px); mask-image: linear-gradient(90deg, transparent, #000 90%); }
body[data-modelo="industrial"] .hero h1 em, body[data-modelo="industrial"] .h1-banner em { background: none; -webkit-text-fill-color: var(--sky); color: var(--sky); }
body[data-modelo="industrial"] .hero-texto { border-left: 5px solid var(--sky); padding-left: 24px; }
body[data-modelo="industrial"] .hero-in.fundo.centro .hero-texto { border-left: 0; padding-left: 0; }
body[data-modelo="industrial"] .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; }
body[data-modelo="industrial"] .btn-destaque { background: var(--sky); color: #101216; box-shadow: none; }
body[data-modelo="industrial"] .btn-destaque:hover { background: #fff; box-shadow: none; }
body[data-modelo="industrial"] .selo-topo { border-radius: 2px; color: #101216; background: var(--sky); border-color: var(--sky); }
body[data-modelo="industrial"] .janela, body[data-modelo="industrial"] .celular, body[data-modelo="industrial"] .foto-quadro img { border-radius: 4px; }
body[data-modelo="industrial"] .hero-visual .janela { transform: none; }
body[data-modelo="industrial"] .faixa-in { border-radius: 4px; border-top: 5px solid var(--sky); }
body[data-modelo="industrial"] .faixa-in b { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
body[data-modelo="industrial"] .card-f, body[data-modelo="industrial"] .plano, body[data-modelo="industrial"] .passos3 li, body[data-modelo="industrial"] .fluxo li, body[data-modelo="industrial"] .faq details { border-radius: 4px; }
body[data-modelo="industrial"] .card-f { border-left: 5px solid var(--sky); }
body[data-modelo="industrial"] .card-f .ico { border-radius: 4px; background: #101216; color: #fff; }
body[data-modelo="industrial"] .fluxo-n, body[data-modelo="industrial"] .passos-mini li::before { border-radius: 2px; background: #101216; color: var(--sky); }
body[data-modelo="industrial"] .passos3 li > span { border-radius: 2px; background: #101216; color: var(--sky); }
body[data-modelo="industrial"] .tambem li, body[data-modelo="industrial"] .chips li, body[data-modelo="industrial"] .plano-mod li { border-radius: 2px; }
body[data-modelo="industrial"] .abas button { border-radius: 2px; text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }
body[data-modelo="industrial"] .abas button[aria-selected="true"] { background: var(--sky); color: #101216; border-color: var(--sky); }
body[data-modelo="industrial"] .painel-texto li::before, body[data-modelo="industrial"] .hero-pontos li::before { color: var(--sky); }
body[data-modelo="industrial"] .demo-form, body[data-modelo="industrial"] .demo-ok, body[data-modelo="industrial"] .comp-col { border-radius: 4px; }
body[data-modelo="industrial"] .plano .btn { background: #101216; color: #fff; }
body[data-modelo="industrial"] .plano .btn:hover { background: var(--sky); color: #101216; }
body[data-modelo="industrial"] .depois { background: linear-gradient(160deg, #101216, #2b3038); border-top: 5px solid var(--sky); }
body[data-modelo="industrial"] .rodape { border-top: 6px solid var(--sky); }
body[data-modelo="industrial"] .bn-bola.ativo { background: var(--sky); }

/* ---------- telas pequenas: nada pode ficar cortado ---------- */
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
@media (max-width: 820px) {
  body[data-modelo="claro"] .menu { background: #fff; border-bottom-color: var(--line); }
  body[data-modelo="claro"] .menu > a:not(.btn) { border-bottom-color: var(--line); }
  .hero-texto h1 { font-size: clamp(28px, 7.4vw, 38px); }
  .hero-slide { padding: 40px 0 112px; }
  .e-fundo { min-height: 0; }
  .hero-visual { padding-bottom: 30px; }
  .rodape-in { gap: 26px; }
  .rodape-links { gap: 22px 36px; }
  .rod-chamada { padding-bottom: 28px; margin-bottom: 28px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 28px); }
  .topo-in { min-height: 60px; }
  .marca img { height: 40px; }
  .bn-ctl { bottom: 52px; padding: 5px 8px; gap: 8px; }
  .bn-seta, .bn-pausa { width: 30px; height: 30px; }
  .hero-in.fundo.centro .hero-cta .btn { width: 100%; }
  .celular-hero { left: auto; right: 4px; bottom: -18px; width: 88px; }
  .hero-visual { padding-bottom: 20px; }
  .painel-texto h3, .zig-texto h3 { font-size: 22px; }
  .rod-chamada .btn { width: 100%; }
  .rodape-fim { flex-direction: column; align-items: flex-start; }
  .e-centro .rodape-fim { align-items: center; }
  .demo-texto h2 { overflow-wrap: anywhere; }
  .plano-desc { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }