@font-face { font-family: Poppins; src: url(/fonts/Poppins-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-Bold.ttf); font-weight: 700; font-display: swap; }

:root { --amarelo: #FFC93C; --preto: #111111; --fundo: #F5F5F7; --cinza: #6B6B6B; --borda: #E6E6E6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; color: var(--preto); background: var(--fundo); line-height: 1.55; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pre { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .6em; opacity: .75; }

.faixa { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topo { background: var(--amarelo); border-radius: 0 0 36px 36px; padding: 18px 0 64px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.selo { width: 38px; height: 38px; border-radius: 10px; background: var(--preto); display: grid; place-items: center; }
.selo svg { width: 24px; height: 24px; }
.topo nav { display: flex; gap: 22px; align-items: center; font-size: .95rem; }
.topo nav a { text-decoration: none; font-weight: 500; }
.topo nav a:hover { text-decoration: underline; }
.topo nav .entrar { background: var(--preto); color: #fff; padding: 8px 18px; border-radius: 12px; font-weight: 600; }
.topo nav .entrar:hover { text-decoration: none; opacity: .9; }

.heroi { max-width: 1120px; margin: 48px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.sub { font-size: 1.1rem; max-width: 34em; margin: 0 0 1.6em; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.botao { display: inline-block; border: 0; border-radius: 14px; padding: 14px 22px; font: 600 1rem Poppins, sans-serif; text-decoration: none; cursor: pointer; text-align: center; }
.botao.preto { background: var(--preto); color: #fff; }
.botao.amarelo { background: var(--amarelo); color: var(--preto); }
.botao.claro { background: rgba(255,255,255,.65); color: var(--preto); }
.botao:hover { filter: brightness(.95); }
.botao.grande { font-size: 1.15rem; padding: 18px 28px; }

.celular { justify-self: center; width: 280px; border: 9px solid var(--preto); border-radius: 36px; background: var(--fundo); overflow: hidden; transform: rotate(3deg); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.tela-topo { background: var(--amarelo); padding: 22px 16px 16px; border-radius: 0 0 20px 20px; border-bottom: 1px solid rgba(0,0,0,.06); }
.tela-topo small { font-size: .7rem; opacity: .7; display: block; }
.tela-topo b { font-size: 1.25rem; }
.codigo { background: #fff; border-radius: 12px; text-align: center; margin-top: 12px; padding: 10px; }
.codigo span { font-size: .7rem; color: var(--cinza); display: block; }
.codigo strong { font-size: 1.7rem; letter-spacing: .1em; }
.tela-corpo { padding: 14px; display: grid; gap: 10px; }
.moto { background: #fff; border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; font-size: .8rem; }
.moto i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--preto); color: var(--amarelo); display: grid; place-items: center; font-weight: 700; }
.moto span { color: var(--cinza); display: block; font-size: .7rem; }
.linha { list-style: none; margin: 0; padding: 12px; background: #fff; border-radius: 12px; font-size: .8rem; }
.linha li { padding-left: 20px; position: relative; color: #aaa; margin: 4px 0; }
.linha li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ddd; position: absolute; left: 0; top: .45em; }
.linha li.ok { color: var(--preto); font-weight: 600; }
.linha li.ok::before { background: var(--preto); }

.rastrear { max-width: 1120px; margin: -36px auto 0; padding: 0 20px; position: relative; }
.caixa { background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 10px 40px -20px rgba(0,0,0,.2); display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 28px; align-items: center; }
.caixa h2 { font-size: 1.5rem; margin: 0; }
.caixa > p { margin: 0; color: var(--cinza); grid-column: 1; }
.busca { display: flex; gap: 10px; grid-column: 2; grid-row: 1 / span 2; }
.busca input { flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; font: 1rem Poppins, sans-serif; text-transform: uppercase; background: var(--fundo); }
.busca input:focus { outline: 2px solid var(--preto); background: #fff; }
.erro { color: #A1281C; font-weight: 600; grid-column: 2; margin: 0; }

.secao { max-width: 1120px; margin: 0 auto; padding: 88px 20px 0; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.passos article { background: #fff; border-radius: 20px; padding: 26px; }
.passos p { color: var(--cinza); margin: 0; }
.num { width: 40px; height: 40px; border-radius: 12px; background: var(--amarelo); display: grid; place-items: center; font-weight: 700; margin-bottom: 16px; }

.dupla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.lista { list-style: none; padding: 0; margin: 0 0 28px; }
.lista li { padding: 8px 0 8px 34px; position: relative; }
.lista li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--preto); color: var(--amarelo); font-size: .75rem; display: grid; place-items: center; font-weight: 700; }
.cartoes { display: grid; gap: 14px; }
.cartao { background: #fff; border-radius: 18px; padding: 20px 22px; border-left: 6px solid var(--amarelo); }
.cartao b { display: block; font-size: 1.05rem; }
.cartao span { color: var(--cinza); }

.motoboys > div { background: var(--preto); color: #fff; border-radius: 28px; padding: 48px; }
.motoboys p { max-width: 42em; color: #d6d6d6; }
.motoboys .pre { color: var(--amarelo); opacity: 1; }
.motoboys .botao.preto { background: var(--amarelo); color: var(--preto); margin-top: 8px; }

.contato { text-align: center; padding-bottom: 96px; }
.contato p { color: var(--cinza); max-width: 36em; margin: 0 auto 24px; }

.rodape { background: var(--preto); color: #cfcfcf; padding: 26px 0; font-size: .9rem; }
.rodape nav { display: flex; gap: 20px; flex-wrap: wrap; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--amarelo); }

.legal { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
.legal h2 { font-size: 1.2rem; margin-top: 1.6em; }
.legal p { color: #333; }

@media (max-width: 860px) {
  .topo nav a:not(.entrar) { display: none; }
  .heroi { grid-template-columns: 1fr; margin-top: 28px; }
  .celular { display: none; }
  .caixa { grid-template-columns: 1fr; }
  .busca, .erro, .caixa > p { grid-column: 1; grid-row: auto; }
  .passos { grid-template-columns: 1fr; }
  .dupla { grid-template-columns: 1fr; }
  .motoboys > div { padding: 32px 24px; }
  .secao { padding-top: 64px; }
  .rodape .faixa { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .busca { flex-direction: column; }
  .acoes .botao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }