/* 1Desk Pro — site público (página inicial, compra, termos). */
.cx { max-width: var(--largura); margin: 0 auto; padding: 0 32px; }
section { scroll-margin-top: 80px; }

/* ---------- cabeçalho: transparente no topo, fundo ao rolar ---------- */
.cab { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .2s, border-color .2s; }
.cab.rolou, .cab.aberto { background: rgba(6, 21, 48, .94); border-bottom-color: var(--linha); backdrop-filter: blur(10px); }
.cab-linha { display: flex; align-items: center; gap: 40px; height: 72px; }
.cab-logo { flex: none; }
.cab-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.cab-nav a { position: relative; padding: 6px 0; transition: color var(--rapido); }
.cab-nav a:hover, .cab-nav a.on { color: var(--texto); }
.cab-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--azul); }
.cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.so-movel { display: none !important; }
.menu-movel { border-top: 1px solid var(--linha); padding: 8px 0 20px; }
.menu-movel > a { display: block; padding: 14px 32px; font-weight: 600; border-bottom: 1px solid var(--linha); }
.menu-movel-pe { display: grid; gap: 10px; padding: 20px 32px 0; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 104px; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -12%; top: 0; width: 72%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 123, 255, .15), transparent); }
.hero-grade { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.assinatura { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--azul-claro); }
.assinatura::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.assinatura-centro { justify-content: center; width: 100%; }
.hero .t-display { margin: 20px 0 20px; }
.hero-sub { max-width: 520px; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-fatos { list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 12px 24px;
  font-size: 13px; color: var(--texto-2); }
.hero-fatos li { display: inline-flex; align-items: center; gap: 8px; }
.hero-fatos .ic { width: 18px; height: 18px; color: var(--azul-claro); }
.monitor { margin: 0; }
.monitor-tela { border: 10px solid #0B1426; border-bottom-width: 22px; border-radius: 12px; background: #000; box-shadow: var(--sombra-3); overflow: hidden; }
.monitor-tela img { width: 100%; height: auto; }
.monitor-haste { width: 18%; height: 44px; margin: 0 auto; background: linear-gradient(#0B1426, #081020); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.monitor-base { width: 34%; height: 8px; margin: 0 auto; border-radius: 4px 4px 2px 2px; background: #0E1A33; }

/* ---------- seções ---------- */
.sec { padding: 112px 0; border-top: 1px solid var(--linha); }
.sec-escura { background: #040F24; }
.sec-cab { max-width: 760px; margin-bottom: 56px; display: flex; flex-direction: column; gap: 14px; }
.sec-cab.centro { margin-left: auto; margin-right: auto; align-items: center; }

/* pilares: assimétrico */
.pilares { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.pilares-frase { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.pilares-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-forte); }
.pilares-lista li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--linha); }
.pilares-lista .n, .pontos .n, .passos .n { font-family: var(--mono); font-size: 14px; color: var(--azul-claro); padding-top: 6px; }
.pilares-lista h3 { margin-bottom: 8px; }

/* funcionalidades */
.funcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.func { padding: 28px 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 24px 1fr; gap: 6px 16px; }
.func > .ic { color: var(--azul); width: 22px; height: 22px; margin-top: 2px; grid-row: span 2; }
.func h3 { margin: 0; font-size: 17px; font-weight: 600; }
.func p { color: var(--texto-2); font-size: 15px; line-height: 23px; }
.selo { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--linha-forte); border-radius: 3px; font-size: 11px; font-weight: 600;
  color: var(--texto-3); vertical-align: 2px; }

/* demonstração */
.demo-grande { margin: 0; }
.demo-grande img { width: 100%; height: auto; border-radius: var(--r-3); border: 1px solid var(--linha-forte); box-shadow: var(--sombra-3); }
.demo-grande figcaption { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; font-size: 14px; color: var(--texto-2); }
.demo-grande figcaption b { color: var(--texto); }
.demo-dupla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; margin-top: 88px; }
.demo-dupla img { width: 100%; height: auto; border-radius: var(--r-3); border: 1px solid var(--linha-forte); }
.pontos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.pontos li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; color: var(--texto-2); }
.pontos b { display: block; color: var(--texto); font-weight: 600; margin-bottom: 2px; }

/* como funciona */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.passos .n { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 0; }
.passos .n::after { content: ""; flex: 1; height: 1px; background: var(--linha-forte); }
.passos h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.passos p { color: var(--texto-2); font-size: 15px; line-height: 23px; }
.requisitos { margin-top: 56px; padding: 22px 28px; border: 1px solid var(--linha); border-radius: var(--r-2); display: flex; flex-wrap: wrap; gap: 14px 36px;
  align-items: center; font-size: 14px; color: var(--texto-2); }
.requisitos > span { display: inline-flex; align-items: center; gap: 10px; }
.requisitos .ic { color: var(--azul-claro); }

/* planos */
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 24px; justify-content: center; }
.plano { padding: 32px; display: flex; flex-direction: column; gap: 22px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-2); }
.plano.destaque { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.plano header { display: flex; flex-direction: column; gap: 6px; }
.preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.preco b { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.02em; }
.preco b .placeholder { font-size: 13px; letter-spacing: .02em; vertical-align: middle; }
.plano-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: 14px; }
.plano-dados dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }
.plano-dados dd { margin: 0; }
.lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--texto-2); }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.lista-check .ic { color: var(--azul-claro); margin-top: 2px; }
.plano .btn { margin-top: auto; width: 100%; }
.nota-planos { text-align: center; margin-top: 24px; font-size: 13px; color: var(--texto-3); }
.corretoras { margin: 56px auto 0; max-width: 904px; padding: 26px 30px; border: 1px solid var(--linha); border-radius: var(--r-2); display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.corretoras p { margin-top: 6px; }

/* FAQ: título à esquerda, perguntas à direita */
.faq-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.faq-cab { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 120px; }
.faq { border-top: 1px solid var(--linha-forte); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul-claro); }
.faq summary .ic { color: var(--texto-3); transition: transform var(--rapido); flex: none; }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--azul-claro); }
.faq details p { margin: 0 0 22px; color: var(--texto-2); max-width: 680px; }

/* chamada final e rodapé */
.chamada { padding: 96px 0; border-top: 1px solid var(--linha); text-align: center; background: var(--marinho); }
.chamada .t-h1 { margin: 18px 0 12px; }
.chamada-botoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.rodape { padding: 64px 0 40px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--texto-2); }
.rodape-colunas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; }
.rodape h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.rodape a, .rodape-contato { display: block; padding: 5px 0; }
.rodape a:hover { color: var(--texto); }
.rodape-risco { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 12px; line-height: 19px; color: var(--texto-3); display: flex;
  justify-content: space-between; gap: 32px; }
.rodape-copy { white-space: nowrap; }

/* ---------- comprar ---------- */
.pagina-compra { max-width: 1080px; margin: 0 auto; padding: 40px 32px 96px; display: flex; flex-direction: column; gap: 28px; }
.etapas { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--texto-3); flex-wrap: wrap; }
.etapas > span { display: inline-flex; align-items: center; gap: 8px; }
.etapas .num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linha-forte); display: inline-grid; place-items: center; font-size: 11px; }
.etapas .on { color: var(--texto); } .etapas .on .num { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.etapas .traco { width: 32px; height: 1px; background: var(--linha-forte); }
.compra-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.opcao-plano { display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: start; padding: 22px 24px; border: 1px solid var(--linha);
  border-radius: var(--r-2); background: var(--superficie); cursor: pointer; transition: border-color var(--rapido); }
.opcao-plano:hover { border-color: var(--linha-forte); }
.opcao-plano:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.opcao-plano input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--azul); }
.opcao-plano .preco-op { font-weight: 700; white-space: nowrap; }
.resumo { position: sticky; top: 24px; }
.linha-resumo { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--texto-2); }
.linha-resumo.total { padding-top: 14px; border-top: 1px solid var(--linha); font-size: 16px; font-weight: 700; color: var(--texto); }
.resultado-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resultado-demo label { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-1); font-size: 13px; cursor: pointer; }
.resultado-demo label:has(input:checked) { border-color: var(--alerta); background: var(--alerta-10); }
.resultado-demo input { position: absolute; opacity: 0; pointer-events: none; }
.resultado-demo b { color: var(--texto); font-size: 14px; }
.cab-simples { border-bottom: 1px solid var(--linha); }
.cab-simples .cx { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.seguro { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }

/* ---------- textos legais ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 32px 96px; display: flex; flex-direction: column; gap: 18px; color: var(--texto-2); }
.legal h1 { color: var(--texto); }
.legal h2 { margin: 18px 0 0; font-size: 19px; color: var(--texto); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .cab-nav { display: none; }
  .so-largo { display: none !important; }
  .so-movel { display: inline-flex !important; }
  .hero-grade, .pilares, .demo-dupla, .faq-grade, .compra-grade { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pilares-frase, .faq-cab, .resumo { position: static; }
  .funcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .rodape-colunas { grid-template-columns: 1fr 1fr 1fr; }
  .rodape-colunas > div:first-child { grid-column: 1 / -1; }
}
/* ---------- celular ---------- */
@media (max-width: 640px) {
  .cx { padding: 0 16px; }
  .cab-linha { height: 60px; gap: 12px; }
  .cab .logo { height: 22px; }
  .cab-acoes { gap: 8px; }
  .cab-acoes .idioma { display: none; }
  .menu-movel > a { padding-left: 16px; padding-right: 16px; }
  .menu-movel-pe { padding: 20px 16px 0; }
  .menu-movel .idioma { margin: 16px 16px 0; }
  .hero { padding: 36px 0 64px; }
  .hero-botoes .btn { flex: 1 1 100%; }
  .monitor-tela { border-width: 6px; border-bottom-width: 14px; border-radius: 8px; }
  .sec { padding: 72px 0; }
  .sec-cab { margin-bottom: 36px; }
  .pilares-lista li { grid-template-columns: 40px 1fr; padding: 24px 0; }
  .funcs, .passos { grid-template-columns: minmax(0, 1fr); }
  .demo-grande figcaption { flex-direction: column; gap: 4px; }
  .demo-dupla { margin-top: 56px; }
  .requisitos { flex-direction: column; align-items: flex-start; padding: 20px; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  .plano { padding: 24px 20px; }
  .corretoras { padding: 22px 20px; }
  .corretoras .btn { width: 100%; }
  .faq summary { font-size: 16px; }
  .chamada { padding: 64px 0; }
  .chamada-botoes .btn { flex: 1 1 100%; }
  .rodape-colunas { grid-template-columns: 1fr 1fr; gap: 28px; }
  .rodape-risco { flex-direction: column; gap: 12px; }
  .pagina-compra { padding: 24px 16px 72px; }
  .opcao-plano { grid-template-columns: 22px 1fr; padding: 18px 16px; }
  .opcao-plano .preco-op { grid-column: 2; }
  .resultado-demo { grid-template-columns: minmax(0, 1fr); }
  .cab-simples .cx { height: 56px; }
  .cab-simples .seguro span { display: none; }
  .legal { padding: 32px 16px 72px; }
}