/* DB Sites — exclusivo das páginas de serviço (Tráfego, DB Atendimento, Sob medida).
   Componentes comuns (planos, FAQ, passos, formulários) ficam em site.css. */

/* ---------- Hero sem ilustração ---------- */
.hero-grid--solo{grid-template-columns:1fr;max-width:820px}

/* ---------- Celular com conversa de exemplo: aparelho sempre preto fosco, nos dois temas ---------- */
.chat{width:100%;max-width:360px;margin-inline:auto}
.chat-aparelho{padding:10px;background:var(--db-charcoal);border:1px solid var(--db-border-strong);border-radius:36px}
.chat-tela{overflow:hidden;background:var(--db-black);color:var(--db-offwhite);border-radius:28px}
.chat-topo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--db-border-dark)}
.chat-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-pill);background:var(--db-graphite);border:1px solid var(--db-border-strong);font-family:var(--font-display);font-weight:700;font-size:13px}
.chat-topo strong{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.3}
.chat-topo small{display:block;font-size:12px;color:var(--db-gray-400)}
.chat-corpo{display:grid;gap:10px;padding:16px 14px 20px}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45;opacity:0;transform:translateY(16px);animation:msg-entra var(--dur) var(--ease) forwards;animation-delay:var(--atraso,0s)}
.msg--cliente{justify-self:start;background:var(--db-graphite);border:1px solid var(--db-border-dark);border-bottom-left-radius:4px}
.msg--negocio{justify-self:end;background:var(--db-offwhite);color:var(--db-black);border-bottom-right-radius:4px}
.msg-tag{display:block;margin-bottom:2px;font-family:var(--font-display);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--db-gray-600)}
.msg--aviso{justify-self:center;max-width:100%;padding:6px 12px;background:none;border:1px solid var(--db-border-dark);border-radius:var(--r-pill);font-size:12px;color:var(--db-gray-400)}
@keyframes msg-entra{to{opacity:1;transform:none}}
.chat-legenda{margin-top:var(--sp-2);text-align:center;font-size:13px;color:var(--text-3)}

/* Anúncio dentro do celular (página de tráfego) */
.anuncio{display:grid;gap:8px;padding:12px;background:var(--db-graphite);border:1px solid var(--db-border-dark);border-radius:var(--r-md);opacity:0;transform:translateY(16px);animation:msg-entra var(--dur) var(--ease) forwards}
.anuncio-topo{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--db-gray-400)}
.anuncio-topo strong{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--db-offwhite)}
.anuncio-img{display:grid;place-items:center;aspect-ratio:16/9;background:var(--db-charcoal);border-radius:var(--r-sm);color:var(--db-gray-500)}
.anuncio-img .i{width:32px;height:32px}
.anuncio p{font-size:13px;line-height:1.4;color:var(--db-gray-400)}
.anuncio-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border-radius:var(--r-sm);background:var(--db-offwhite);color:var(--db-black);font-family:var(--font-display);font-weight:700;font-size:13px}
.anuncio-btn .i{width:16px;height:16px}

/* ---------- Comparação de custo (DB Atendimento) ---------- */
.comparativo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);max-width:960px;margin-inline:auto}
@media (max-width:760px){.comparativo{grid-template-columns:1fr}}
.comp-valor{margin:var(--sp-1) 0 4px;font-family:var(--font-display);font-weight:800;font-size:var(--fs-price);line-height:1.05;letter-spacing:-.02em}
.comp-sub{margin-bottom:var(--sp-3);font-size:14px;color:var(--text-2)}
.comparativo .checklist{padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:15px}