/* 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: #e3a29d; }

/* 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; }
.marca-logo { display: block; height: 44px; width: auto; max-width: 100%; }
.topo .recorte:has(.marca-logo) { min-height: 76px; }
@media (max-width: 720px) { .marca-logo { height: 36px; } }