/* Site de vendas. Só é carregado pelas páginas públicas. */
body.site { background: var(--concreto); }
.recorte { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Topo */
.topo { background: var(--aco); color: #fff; }
.topo .recorte { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.marca { color: #fff; text-decoration: none; font-weight: 800; font-stretch: 125%; font-size: 1.1rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
.marca-icone { width: 22px; height: 22px; background: repeating-linear-gradient(-45deg, var(--seguranca) 0 5px, var(--aco) 5px 10px); border-radius: 4px; }
.topo nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.topo nav a { color: #cfd6db; text-decoration: none; font-weight: 500; }
.topo nav a:hover { color: #fff; }
.topo .btn-destaque { color: var(--aco); }
@media (max-width: 720px) { .topo nav .so-desktop { display: none; } }

/* Hero */
.hero { background: var(--aco); color: #fff; padding: 56px 0 72px; }
.hero .recorte { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; }
.hero p.sub { font-size: 1.15rem; color: #c3ccd2; max-width: 34em; }
.hero .acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero .btn-fantasma { color: #fff; border-color: #4a5660; }
.hero .nota { margin-top: .75rem; font-size: .85rem; color: #93a0a9; }
@media (max-width: 880px) { .hero .recorte { grid-template-columns: 1fr; } }

/* Quadro da fila (o elemento que mostra o produto) */
.quadro { background: var(--aco-2); border: 1px solid #3a4650; border-radius: var(--raio-lg); padding: 18px; font-size: .95rem; }
.quadro-cab { display: flex; justify-content: space-between; color: #93a0a9; font-size: .85rem; margin-bottom: 12px; }
.tarefa { background: #232c33; border-radius: var(--raio); padding: 12px 14px; margin-top: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; color: #dbe1e5; }
.tarefa .box { font-weight: 700; font-stretch: 125%; color: #93a0a9; min-width: 3.2em; }
.tarefa .placa { font-weight: 700; letter-spacing: .04em; background: #fff; color: var(--aco); border-radius: 3px; padding: 0 6px; border-top: 4px solid #1f4e9c; font-size: .85rem; }
.tarefa .quem { color: #93a0a9; font-size: .85rem; }
.tarefa .porque { grid-column: 2 / -1; font-size: .85rem; color: #93a0a9; }
.tarefa.agora { background: #fff; color: var(--aco); box-shadow: inset 6px 0 0 var(--seguranca); }
.tarefa.agora .box, .tarefa.agora .quem, .tarefa.agora .porque { color: var(--graxa); }
.tarefa.agora .porque strong { color: var(--aco); }
.tarefa.bloqueada { opacity: .7; }
.tarefa.bloqueada .porque { color: #f4bdb8; }

/* Seções */
.secao { padding: 72px 0; }
.secao h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; max-width: 22em; }
.secao .lead { font-size: 1.1rem; color: var(--graxa); max-width: 40em; }
.secao.clara { background: var(--papel); }

.segmentos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.segmentos li { border: 1px solid var(--linha); border-radius: 999px; padding: .35em .9em; background: var(--papel); font-weight: 500; }

.diferenciais { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-top: 2.5rem; }
.diferenciais h3 { font-size: 1.2rem; }
.diferenciais .principal { border-top: 6px solid var(--seguranca); padding-top: 1rem; }
.diferenciais .principal h3 { font-size: 1.5rem; }
.diferenciais > div:not(.principal) { border-top: 1px solid var(--linha); padding-top: 1rem; }
.diferenciais p { color: var(--graxa); }
@media (max-width: 880px) { .diferenciais { grid-template-columns: 1fr; gap: 28px; } }

.passos { counter-reset: passo; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.passos li { counter-increment: passo; }
.passos li::before { content: counter(passo); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--aco); color: #fff; font-weight: 700; margin-bottom: .75rem; }
.passos strong { display: block; font-size: 1.1rem; margin-bottom: .25rem; }
.passos span { color: var(--graxa); }
@media (max-width: 720px) { .passos { grid-template-columns: 1fr; } }

.chamada { background: var(--seguranca); padding: 56px 0; }
.chamada .recorte { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.chamada h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.chamada .btn { background: var(--aco); color: #fff; border-color: var(--aco); }

/* Preços */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2rem; align-items: start; }
.plano { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 28px; }
.plano.destaque { border: 2px solid var(--aco); box-shadow: inset 0 6px 0 var(--seguranca); }
.plano h3 { font-size: 1.4rem; margin-bottom: .25rem; }
.plano .para { color: var(--graxa); min-height: 3em; }
.plano .preco { font-size: 1.6rem; font-weight: 800; margin: 1rem 0; }
.plano .preco small { font-size: .9rem; font-weight: 500; color: var(--graxa); }
.plano ul { padding-left: 1.1rem; margin: 0 0 1.5rem; }
.plano li { margin-bottom: .35rem; }
.plano .btn { width: 100%; }
@media (max-width: 880px) { .planos { grid-template-columns: 1fr; } }

/* Contato */
.cartao-form { background: var(--papel); border-radius: var(--raio-lg); padding: 32px; border: 1px solid var(--linha); max-width: 720px; }

/* Rodapé */
.rodape { background: var(--aco); color: #93a0a9; padding: 32px 0; font-size: .9rem; }
.rodape .recorte { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape a { color: #cfd6db; text-decoration: none; margin-left: 1rem; }
/* O "gerenciamento automotivo" do logo ocupa ~15% da altura: abaixo de ~64px vira um risco ilegível. */
.marca-logo { display: block; height: 64px; width: auto; max-width: 100%; }
.topo .recorte:has(.marca-logo) { min-height: 88px; }
@media (max-width: 720px) { .marca-logo { height: 46px; } .topo .recorte:has(.marca-logo) { min-height: 68px; } }

/* ---------- Planos: selo, comparação e "todos incluem" ---------- */
.plano { position: relative; }
.plano-selo { position: absolute; top: -12px; left: 24px; background: var(--seguranca); color: var(--aco); font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.comparar-titulo { margin-top: 3rem; }
.comparar-planos { overflow-x: auto; margin-top: 2rem; }
.comparar-planos table { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); overflow: hidden; }
.comparar-planos th, .comparar-planos td { padding: 12px 14px; border-bottom: 1px solid var(--linha); text-align: center; }
.comparar-planos thead th { font-size: 1.05rem; background: var(--aco); color: #fff; }
.comparar-planos thead th.destaque { background: var(--seguranca); color: var(--aco); }
.comparar-planos tbody th { text-align: left; font-weight: 600; }
.comparar-planos tbody tr:last-child th, .comparar-planos tbody tr:last-child td { border-bottom: 0; }
.comparar-planos .sim { color: var(--ok); font-weight: 800; font-size: 1.1rem; }
.comparar-planos .nao { color: var(--graxa); }
.todos-incluem { margin-top: 2rem; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 24px 28px; }
.todos-incluem h3 { margin: 0 0 .75rem; }
.todos-incluem ul { columns: 2; column-gap: 32px; padding-left: 1.1rem; margin: 0; }
.todos-incluem li { margin-bottom: .4rem; break-inside: avoid; }
.todos-incluem .nota { margin: 1rem 0 0; color: var(--graxa); }
@media (max-width: 680px) { .todos-incluem ul { columns: 1; } }

/* ---------- Programa Escolas Parceiras ---------- */
.hero-simples .recorte { grid-template-columns: 1fr; max-width: 820px; }
.sobretitulo { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .85rem; color: var(--seguranca); margin: 0 0 .5rem; }
.parcerias { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.parceria { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 28px; box-shadow: inset 0 6px 0 var(--seguranca); }
.parceria h2 { margin: 0 0 .25rem; font-size: 1.5rem; }
.parceria .para { color: var(--graxa); margin: 0 0 1rem; }
.destaque-preco { font-weight: 800; font-size: 1.15rem; margin: 0 0 1rem; }
.parceria ul { padding-left: 1.1rem; margin: 0 0 1.5rem; }
.parceria li { margin-bottom: .45rem; }
.convite-escolas { margin-top: 1.5rem; text-align: center; color: var(--graxa); }
@media (max-width: 880px) { .parcerias { grid-template-columns: 1fr; } }

/* Termos de uso e política de privacidade */
.legal { padding: 48px 0 72px; }
.legal .recorte { max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; }
.legal .atualizado { color: var(--graxa); margin-top: .25rem; }
.legal .resumo { background: var(--papel); border-left: 4px solid var(--seguranca); border-radius: var(--raio); padding: 16px 20px; margin: 24px 0; }
.legal .resumo ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.legal h2 { font-size: 1.25rem; font-weight: 800; margin: 2rem 0 .5rem; scroll-margin-top: 16px; }
.legal h3 { font-size: 1.02rem; font-weight: 700; margin: 1.25rem 0 .35rem; }
.legal p, .legal li { line-height: 1.65; }
.legal li + li { margin-top: .35rem; }
.legal table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #d9dee2; }
.legal th { font-weight: 700; background: var(--papel); }
.legal .tabela-rolavel { overflow-x: auto; }
.legal .indice { columns: 2; padding-left: 1.2rem; }
@media (max-width: 640px) { .legal .indice { columns: 1; } }

/* Formulário de contato: campo-armadilha para robôs (fora da tela, sem aparecer para leitor de tela) */
.campo-armadilha { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.aviso-dados { margin: 12px 0 0; font-size: .85rem; color: #5b6670; line-height: 1.45; }
.aviso-dados a { color: inherit; text-decoration: underline; }
.comparar-planos:focus-visible { outline: 3px solid var(--oleo); outline-offset: 4px; border-radius: var(--raio-lg); }