@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/_assets/inter-v20.woff2) format("woff2")}
:root{--fundo:#f5f5f5;--cartao:#fff;--txt:#181a20;--suave:#5f6573;--apagado:#eceef1;--linha:#e2e4e8;--picote:#c9ced6;--borda-campo:#8a919d;--azul:#2a6bf2;--azul-esc:#1f58d3;--link:#1d58d6;--azul-t:#eef3fe;--azul-b:#d3e0fc;--anel:#73a1ff;--verde:#15803d;--verde-t:#eaf6ee;--verde-b:#b9e1c6;--ambar:#8a5100;--ambar-t:#fff5e1;--ambar-b:#f2d39a;--verm:#b42318;--verm-t:#fdeceb;--verm-b:#f5c5c0;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--sombra:0 1px 2px rgba(24,26,32,.05),0 4px 12px -4px rgba(24,26,32,.08)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--txt);font:400 16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(29,88,214,.35)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
img,svg{max-width:100%}
p{margin:0 0 1em}
code{font:500 .92em var(--mono)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 24px}}
.topo{background:var(--cartao);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;min-height:60px}
.marca{display:inline-flex;align-items:center;gap:8px;height:60px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--txt);text-decoration:none;white-space:nowrap}
.marca b{color:var(--azul)}
.menu{display:flex;gap:2px}
.menu a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;color:var(--suave);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.menu a:hover{background:var(--apagado);color:var(--txt)}
.cambio-fontes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media(max-width:700px){.cambio-fontes{display:block}}
@media(max-width:480px){.menu{flex-wrap:wrap}.menu a{justify-content:center;flex:1 0 30%}}
.menu a[aria-current]{background:var(--azul-t);color:var(--link)}
.hbusca{display:flex;gap:8px;margin-left:auto;flex:1;max-width:340px}
.hbusca .in,.hbusca .bt{height:40px}
.lupa{display:none}
@media(max-width:820px){
.topo .wrap{gap:0 12px}
.menu{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 10px 10px;gap:0}
.menu a{padding:0 10px}
.lupa{order:1}
.menu::-webkit-scrollbar{display:none}
.lupa{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;border-radius:12px;color:var(--txt)}
.lupa:hover{background:var(--apagado)}
.hbusca{display:none;order:2;flex-basis:100%;max-width:none;margin:0 0 10px}
.hbusca:target,.hbusca:focus-within{display:flex}
}
main{padding:20px 0 72px}
h1{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;text-wrap:balance}
h2{font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.01em;margin:40px 0 12px;text-wrap:balance}
h3{font-size:16px;line-height:1.35;font-weight:650;margin:0 0 4px}
@media(min-width:768px){h1{font-size:32px}main{padding-top:28px}}
.sub{color:var(--suave);margin:0 0 20px}
.prosa{max-width:70ch}.prosa p{margin:0 0 1em}
.lista{margin:0 0 1em;padding-left:20px;max-width:70ch}.lista li{margin:0 0 6px}
nav.crumbs{font-size:14px;color:var(--suave);margin:0 0 16px}
nav.crumbs a{color:var(--suave);text-decoration:none}
nav.crumbs a:hover{color:var(--txt);text-decoration:underline}
.in{font:inherit;width:100%;height:44px;padding:0 14px;border:1px solid var(--borda-campo);border-radius:12px;background:var(--cartao);color:var(--txt)}
.in::placeholder{color:var(--suave);opacity:1}
.in:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(42,107,242,.22)}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;height:44px;padding:0 20px;border:0;border-radius:12px;background:var(--azul);color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none}
.bt:hover{background:var(--azul-esc)}
.bt:active{transform:translateY(1px)}
.bt2{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:15px;font-weight:600;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--linha);background:var(--cartao);color:var(--txt);cursor:pointer;text-decoration:none;line-height:1.2}
.bt2:hover{background:var(--apagado)}
.bt2:disabled{cursor:default;color:var(--verde);border-color:var(--verde-b);background:var(--verde-t)}
.bt2 svg{flex:none}
.painel,.vazio{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:20px;box-shadow:var(--sombra)}
.vazio{margin:0 0 20px}
.grade,.nums{list-style:none;margin:0;padding:0;background:var(--cartao);border:1px solid var(--linha);border-radius:18px;columns:2 280px;column-gap:0;column-rule:1px solid var(--linha);overflow:hidden}
.grade li,.nums li{break-inside:avoid;padding:12px 16px;border-top:1px solid var(--linha);margin-top:-1px}
.grade li>a:first-child{font-weight:600;text-decoration:none}
.grade li>a:first-child:hover{text-decoration:underline}
.grade .meta{display:block;color:var(--suave);font-size:14px;font-variant-numeric:tabular-nums}
.grade .meta a{color:inherit}
/* Lista de transportadoras: o logo num ladrilho do mesmo tamanho pra todas. */
.grade.transp li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 12px;align-items:center}
.grade.transp li>a,.grade.transp li>b{font-weight:600;text-decoration:none}
.grade.transp li>a:hover{text-decoration:underline}
.grade.transp .meta{grid-column:2}
.ladrilho{grid-row:1/span 2;display:grid;place-items:center;width:72px;height:36px;padding:0 6px;border:1px solid var(--linha);border-radius:8px;background:#fff;color:var(--suave);font-size:11.5px;font-weight:700;line-height:1.1;text-align:center}
.nums{columns:3 200px}
.nums .t{display:block;font-size:13.5px;color:var(--suave);line-height:1.35}
.nums .v{display:block;font-size:19px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums}
.nums .a{font-size:13px;color:var(--suave);font-weight:400}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;overflow:hidden}
th,td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--linha);font-size:15px}
thead th{background:#fafafb;font-size:12.5px;color:var(--suave);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
tbody th{font-weight:600;width:34%}
tr:last-child>td,tr:last-child>th{border-bottom:0}
td.cep{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td .meta{display:block;color:var(--suave);font-size:14px}
/* Tabela larga não cabe em 375px: no celular ela rola dentro de si, em vez de arrastar a
   página inteira de lado — rolagem horizontal é reprovação no teste de mobile do Google. */
@media(max-width:560px){main table{display:block;overflow-x:auto}}
.aviso{background:var(--azul-t);border:1px solid var(--azul-b);border-radius:12px;padding:12px 16px;font-size:15px;color:#22335a;margin:0 0 20px}
.aviso a{color:#1a4cb8}
.faq{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.faq details+details{border-top:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;font-weight:600;padding:15px 52px 15px 18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{background:#fafafb}
.faq p{margin:0;padding:0 18px 16px;color:var(--suave);max-width:75ch}
.pag{display:flex;gap:12px;align-items:center;margin:20px 0;font-size:15px;color:var(--suave)}
.pag a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;font-weight:600;text-decoration:none}
.pag a:hover{background:var(--apagado)}
.abas{display:flex;gap:4px;margin:0 0 24px;padding:0;list-style:none;border-bottom:1px solid var(--linha);overflow-x:auto;scrollbar-width:none}
.abas a{display:block;padding:10px 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--suave);font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap}
.abas a:hover{color:var(--txt)}
.abas a[aria-current]{color:var(--txt);border-bottom-color:var(--azul);font-weight:600}
.filtro{display:flex;gap:8px;max-width:440px;margin:0 0 20px}
.mapa{aspect-ratio:16/9;border:1px solid var(--linha);border-radius:18px;overflow:hidden;background:var(--apagado)}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.malha{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:20px;display:flex;justify-content:center}
.malha img{max-width:min(360px,100%);height:auto}
.tag{display:inline-block;background:var(--apagado);color:var(--txt);border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:600;vertical-align:1px;margin-left:6px}
.rot{display:block;font-size:12.5px;color:var(--suave);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.links{display:flex;gap:8px 16px;flex-wrap:wrap;font-weight:500}
/* Ficha: o cabeçalho de CEP, unidade e agência — um registro, não um cartaz. */
.cephero{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:20px 22px;margin:0 0 20px;box-shadow:var(--sombra)}
.cephero h1{margin:0}
.cephero h1.cep,.cephero .cep{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cephero .end{display:block;color:var(--suave);font-size:16px;margin-top:6px}
.cephero .agora{margin-top:12px}
.ficha-hoje{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--suave);font-size:15px}
.ficha-hoje .agora{margin:0}
.cephero .links{margin:14px 0 0}
.links .bt2{font-weight:600}
@media(max-width:560px){.cephero .links .bt2{flex:1 1 auto}}
.nw{white-space:nowrap}
table+.sub,table+p{margin-top:10px}
.leitura{max-width:760px}
.vazio .cepgrande{font:700 26px/1.2 var(--mono);font-variant-numeric:tabular-nums}
/* Endereço pronto pra copiar: cada cartão é uma etiqueta preenchida. */
.endgrade{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.endcard{position:relative;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:14px 16px}
.endcard .rot{margin:0 72px 8px 0}
.endcard pre{margin:0;font:500 14.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word}
.copiar{position:absolute;top:10px;right:10px;font:inherit;font-size:13px;font-weight:600;min-height:32px;padding:0 10px;border:1px solid var(--linha);border-radius:8px;background:var(--cartao);color:var(--txt);cursor:pointer}
.copiar:hover{background:var(--apagado)}
footer{border-top:1px solid var(--linha);background:var(--cartao);padding:28px 0 32px;color:var(--suave);font-size:14px}
footer .wrap{display:grid;gap:16px}
footer p{margin:0;max-width:70ch}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer a{color:var(--suave)}
footer .marca{height:auto;font-size:16px}
/* --- rastreio ---------------------------------------------------------------------- */
.rform{display:flex;gap:8px;max-width:560px;margin:0 0 20px}
.rform .in{font:500 17px var(--mono);letter-spacing:.03em;height:48px}
.rform .in::placeholder{font-family:Inter,system-ui,sans-serif;letter-spacing:0;font-weight:400;font-size:16px}
.rform .bt{height:48px}
@media(max-width:480px){.rform,.filtro{flex-direction:column}.rform .bt,.filtro .bt{width:100%}}
.selo{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px;font-weight:600;font-size:14px;background:var(--azul-t);color:var(--link);border:1px solid var(--azul-b)}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.selo:has(svg)::before{display:none}
.selo svg{width:15px;height:15px;flex:none}
.f-entregue.selo{background:var(--verde-t);color:var(--verde);border-color:var(--verde-b)}
.f-acao.selo,.f-retirada.selo,.f-tentativa.selo{background:var(--ambar-t);color:var(--ambar);border-color:var(--ambar-b)}
.f-devolucao.selo,.f-extravio.selo{background:var(--verm-t);color:var(--verm);border-color:var(--verm-b)}
/* A etiqueta: marca de quem entrega e código em cima, picote, o status embaixo. */
.etq{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;box-shadow:var(--sombra);margin:0 0 16px}
.etq-cod{padding:20px 22px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:start}
.cod{font:700 26px/1.15 var(--mono);letter-spacing:.01em;margin:0;word-break:break-all}
.cod.c14{font-size:21px}.cod.c17{font-size:18px}
.de{grid-column:1;align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:28px;margin:0;color:var(--suave);font-size:15px}
.de img{display:block;height:24px;width:auto}
.de b{color:var(--txt);font-size:16px}.de img+b{margin-left:-4px}
/* O traço entre a marca e o serviço só onde os dois cabem numa linha; no celular o serviço desce. */
@media(min-width:560px){.de img+.serv,.de b+.serv{padding-left:12px;border-left:1px solid var(--linha)}}
/* O Copiar fica no canto da linha da marca: o código ganha a largura inteira e não quebra no meio a 360 px. */
.etq-cod .cod{grid-column:1/-1;grid-row:2}
.etq-cod .bt2{grid-column:2;grid-row:1;align-self:center;min-height:36px;font-size:14px}
.picote{position:relative;height:0;border-top:1px dashed var(--picote);margin:0 18px}
.picote::before,.picote::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--fundo);border:1px solid var(--linha)}
.picote::before{left:-28px;clip-path:inset(0 0 0 50%)}
.picote::after{right:-28px;clip-path:inset(0 50% 0 0)}
.etq-st{padding:18px 22px 20px}
.ultimo{font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.01em;margin:12px 0 4px;text-wrap:balance}
.quando{color:var(--suave);margin:0}
.prev{margin:10px 0 0}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;padding:0;margin:18px 0 2px}
.passos li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:16px;font-size:13px;line-height:1.3;color:var(--suave);text-align:center}
.passos li svg{width:18px;height:18px;flex:none;color:var(--picote)}
.passos li.feito svg{color:var(--azul)}
.passos li.ok svg{color:var(--verde)}
.passos li.atual svg{animation:chega .6s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes chega{from{transform:translateX(-14px);opacity:.3}}
.passos li::before,.passos li::after{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:99px;background:var(--apagado)}
.passos li::after{background:var(--azul);transform:scaleX(0);transform-origin:left}
.passos li.feito::after{transform:none;animation:enche .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*90ms)}
.passos li.ok::after{background:var(--verde)}
.passos li.atual{color:var(--txt);font-weight:600}
@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.passos li.feito::after,.passos li.atual svg{animation:none}}
.botoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 22px 18px;border-top:1px solid var(--linha)}
.botoes .apelido{flex:1 1 200px;max-width:280px;height:40px;font-size:15px}
@media(max-width:560px){.botoes .apelido{flex-basis:100%;max-width:none}.botoes .bt2{flex:1 1 auto}}
.acao{border:1px solid;border-radius:18px;padding:18px 20px;margin:0 0 16px}
.acao h2{margin:0 0 6px;font-size:18px}
.acao p{margin:0 0 10px}.acao p:last-child{margin:0}
.acao.amb{background:var(--ambar-t);border-color:var(--ambar-b)}
.acao.verm{background:var(--verm-t);border-color:var(--verm-b)}
.acao a{color:#173f99}
/* O comprovante: as movimentações, dia a dia, como numa via de recibo. */
.rec{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:2px 20px 6px}
.rec .dia{margin:0;padding:16px 0 8px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--suave);border-top:1px dashed var(--picote)}
.rec .dia:first-child{border-top:0}
.linha{list-style:none;margin:0;padding:0}
.linha li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 10px;padding:0 0 16px}
.linha .hora{font:500 13.5px/1.6 var(--mono);color:var(--suave);font-variant-numeric:tabular-nums}
.linha li{animation:entra .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(min(var(--k,0),8)*55ms + 80ms)}
@keyframes entra{from{opacity:.2;transform:translateY(6px)}}
.linha .ev{position:relative;padding-left:38px;min-width:0}
.linha .ev::after{content:"";position:absolute;left:12px;top:28px;bottom:-16px;width:2px;background:var(--apagado)}
.linha li:last-child .ev::after{display:none}
.linha .ico-fase{--anel:42,107,242;position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--azul-t);color:var(--link);box-shadow:inset 0 0 0 1px var(--azul-b)}
.linha .ico-fase svg{width:15px;height:15px}
.linha .f-entregue .ico-fase{background:var(--verde-t);color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde-b)}
.linha .f-acao .ico-fase,.linha .f-retirada .ico-fase,.linha .f-tentativa .ico-fase{--anel:217,138,0;background:var(--ambar-t);color:var(--ambar);box-shadow:inset 0 0 0 1px var(--ambar-b)}
.linha .f-devolucao .ico-fase,.linha .f-extravio .ico-fase{--anel:180,35,24;background:var(--verm-t);color:var(--verm);box-shadow:inset 0 0 0 1px var(--verm-b)}
.linha .ultimo-ev .ico-fase{background:var(--azul);color:#fff;box-shadow:none}
.linha .ultimo-ev.f-entregue .ico-fase{background:var(--verde)}
.linha .ultimo-ev.f-acao .ico-fase,.linha .ultimo-ev.f-retirada .ico-fase,.linha .ultimo-ev.f-tentativa .ico-fase{background:#d98a00}
.linha .ultimo-ev.f-devolucao .ico-fase,.linha .ultimo-ev.f-extravio .ico-fase{background:var(--verm)}
.linha .ultimo-ev:not(.f-entregue) .ico-fase::after{content:"";position:absolute;inset:0;border-radius:50%;animation:anel 1.8s cubic-bezier(.16,1,.3,1) .6s 3}
@keyframes anel{from{box-shadow:0 0 0 0 rgba(var(--anel),.45)}to{box-shadow:0 0 0 10px rgba(var(--anel),0)}}
/* Mapa "Por onde passou" (src/mapa.ts): malha de UF do IBGE em SVG, rótulos em HTML por cima.
   O traço se desenha até o último registro; o próximo trecho informado anda tracejado. */
.mapa-rota{--cor-rota:var(--azul);background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:14px 14px 12px;margin:0}
.mapa-rota.mapa-entregue{--cor-rota:var(--verde)}
.mapa-rota svg{max-width:none}
.mapa-quadro{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fafbfd}
.mapa-svg{position:absolute;inset:0;width:100%;height:100%}
.mapa-uf{fill:#eceff3;stroke:#fff;stroke-width:1.2px;vector-effect:non-scaling-stroke}
.mapa-uf-rota{fill:#dfe8fb}
.mapa-entregue .mapa-uf-rota{fill:#e1f1e6}
.mapa-casca,.mapa-feito,.mapa-proximo{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mapa-casca{stroke:#fff}
.mapa-feito,.mapa-proximo{stroke:var(--cor-rota)}
.mapa-casca,.mapa-feito{stroke-dasharray:1;animation:desenha 1.2s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes desenha{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mapa-proximo{stroke-dasharray:.035 .03;opacity:.85;animation:anda 1.4s linear 1.3s 8}
@keyframes anda{to{stroke-dashoffset:-.13}}
.mapa-marca{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--cor-rota),0 1px 3px rgba(24,26,32,.25);animation:pinga .4s cubic-bezier(.16,1,.3,1) var(--d) both}
.mapa-marca.mapa-prox{box-shadow:0 0 0 2px var(--cor-rota);opacity:.9}
.mapa-marca.mapa-atual{width:30px;height:30px;margin:-29px 0 0 -15px;background:none;box-shadow:none;color:var(--cor-rota)}
.mapa-pino{position:relative;display:block;width:30px;height:30px;fill:#fff;filter:drop-shadow(0 2px 3px rgba(24,26,32,.3))}
.mapa-pulso{position:absolute;left:50%;bottom:-6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--cor-rota);opacity:0;animation:pulsa 1.8s cubic-bezier(.16,1,.3,1) 1.3s 4}
.mapa-entregue .mapa-pulso{display:none}
@keyframes pulsa{0%{transform:scale(.4);opacity:.45}100%{transform:scale(2.6);opacity:0}}
@keyframes pinga{from{transform:scale(.4);opacity:0}}
.mapa-rotulo{position:absolute;transform:translate(12px,-50%);font-size:12.5px;font-weight:500;line-height:1.2;color:var(--txt);white-space:nowrap;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.88);box-shadow:0 1px 2px rgba(24,26,32,.12);animation:aparece .35s ease-out var(--d) both}
.mapa-rotulo.mapa-esq{transform:translate(calc(-100% - 12px),-50%)}
.mapa-rotulo.mapa-forte{font-weight:650;color:var(--link);transform:translate(18px,calc(-50% - 16px))}
.mapa-entregue .mapa-rotulo.mapa-forte{color:var(--verde)}
.mapa-rotulo.mapa-forte.mapa-esq{transform:translate(calc(-100% - 18px),calc(-50% - 16px))}
.mapa-rotulo.mapa-prox{color:var(--suave)}
@keyframes aparece{from{opacity:0}}
@media(max-width:560px){.mapa-rotulo{font-size:11.5px;padding:1px 5px}.mapa-pref{display:none}}
.mapa-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 4px 0;font-size:13px;color:var(--suave);list-style:none;padding:0}
.mapa-legenda li{display:inline-flex;align-items:center;gap:6px}
.mapa-legenda i{display:inline-block;width:18px;height:0;border-top:3px solid var(--cor-rota);border-radius:2px}
.mapa-legenda i.mapa-tracejado{border-top-style:dashed;border-top-width:2px}
.mapa-legenda i.mapa-ponto{width:10px;height:10px;border:0;border-radius:50%;background:var(--cor-rota)}
.mapa-nota{margin:6px 4px 0;font-size:13px;color:var(--suave)}
@media(prefers-reduced-motion:reduce){.mapa-casca,.mapa-feito,.mapa-proximo,.mapa-marca,.mapa-rotulo,.mapa-pulso,.linha li,.linha .ultimo-ev .ico-fase::after{animation:none}}
.linha .desc{display:block;font-weight:600}
.linha .onde,.linha .det{display:block;font-size:15px;color:var(--suave);overflow-wrap:anywhere}
.linha .det{color:var(--txt)}
.linha a.det{color:var(--link);font-size:14.5px}
.fonte{margin:12px 0 0;font-size:14px}
/* Resultado: etiqueta e comprovante à esquerda; no desktop, a coluna do lado. */
.res{display:grid;gap:0 28px}
@media(min-width:900px){.res{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.res aside h2:first-child{margin-top:0}
@media(max-width:899px){.res aside{margin-top:32px}}
/* Os cartões da coluna do lado: resumo, a quem reclamar, golpe, outro código. */
.lado{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:16px 18px;margin:0 0 14px;font-size:15px}
.lado h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:16px}
.lado p{margin:0 0 10px}.lado>:last-child{margin-bottom:0}
.lado-alerta{background:var(--ambar-t);border-color:var(--ambar-b)}
.lado-alerta h2{color:var(--ambar)}.lado-alerta a{color:#173f99}
.fatos{margin:0}
.fatos div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px dashed var(--picote)}
.fatos div:first-child{border-top:0;padding-top:0}
.fatos dt{color:var(--suave)}
.fatos dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.fatos-guia{padding-top:10px;border-top:1px solid var(--linha)}
.fones{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.fones a{font-weight:650;font-size:16px;font-variant-numeric:tabular-nums;text-decoration:none}
.fones span{display:block;font-size:13.5px;color:var(--suave)}
/* "Suas encomendas": canhotos das etiquetas, um por código salvo. */
.minhas{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.minhas li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:10px 10px 10px 14px}
.minhas a{font:600 15px var(--mono);text-decoration:none;overflow-wrap:anywhere}
.minhas a:hover{text-decoration:underline}
.minhas .st{grid-column:1;color:var(--suave);font-size:14px}
.minhas .bt2{grid-column:2;grid-row:1/span 2;min-height:36px;padding:0 10px;font-size:13.5px}
.ag{background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:14px 16px;margin-top:12px}
.ag .rot{margin-bottom:4px}
.ag-nome{font-weight:700;font-size:17px;margin-right:8px}
.ag-end,.ag-tel{display:block;color:var(--suave);font-size:15px;margin-top:4px}
.ag-hor{margin:8px 0 0;padding-left:18px;font-size:15px}
.agora{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px;vertical-align:middle;white-space:nowrap}
.agora::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.grade .agora{display:flex;width:max-content;margin:6px 0 4px}
.agora.aberta{background:var(--verde-t);color:var(--verde)}
.agora.fechada{background:var(--apagado);color:var(--suave)}
.horario td:first-child{white-space:nowrap}
.guias{list-style:none;padding:0;margin:0;background:var(--cartao);border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.guias li{padding:14px 18px;border-top:1px solid var(--linha)}
.guias li:first-child{border-top:0}
.guias a{font-weight:600;text-decoration:none}
.guias a:hover{text-decoration:underline}
.guias span{display:block;color:var(--suave);font-size:15px;margin-top:2px}
.guias .selo{float:right;margin:0 0 4px 12px;font-size:12.5px;padding:1px 10px}
/* Página inicial: a ferramenta é a página. */
.ini{display:grid;gap:28px;align-items:start;padding:8px 0 4px}
@media(min-width:900px){.ini{grid-template-columns:minmax(0,1fr) 400px;gap:48px;padding:28px 0 12px}}
.ini h1{font-size:30px;margin:0 0 8px}
@media(min-width:768px){.ini h1{font-size:40px;letter-spacing:-.025em}}
.ini .sub{font-size:17px;max-width:46ch;margin:0 0 20px}
.campo{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:18px;box-shadow:var(--sombra)}
.campo label{display:block;font-weight:600;font-size:15px;margin:0 0 8px}
.campo .linha-campo{display:flex;gap:8px}
.campo .in{height:52px;font:500 18px var(--mono);letter-spacing:.03em}
.campo .in::placeholder{font-family:Inter,system-ui,sans-serif;letter-spacing:0;font-weight:400;font-size:16px}
.campo .bt{height:52px;padding:0 24px;font-size:16px}
.campo .dica{margin:10px 0 0;font-size:14px;color:var(--suave)}
@media(max-width:480px){.campo .linha-campo{flex-direction:column}.campo .bt{width:100%}}
.exemplo{position:relative}
.exemplo .tag{position:absolute;top:-10px;right:18px;margin:0;background:var(--txt);color:#fff;z-index:1}
.exemplo .etq{margin:0}
.exemplo .cod{font-size:22px}
.exemplo .ultimo{font-size:18px}
.atalhos{list-style:none;margin:0;padding:0;background:var(--cartao);border:1px solid var(--linha);border-radius:18px;overflow:hidden;display:grid}
@media(min-width:768px){.atalhos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.atalhos li{border-top:1px solid var(--linha)}
.atalhos li:first-child{border-top:0}
@media(min-width:768px){.atalhos li:nth-child(2){border-top:0}.atalhos li:nth-child(even){border-left:1px solid var(--linha)}}
.atalhos a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:16px 18px;color:var(--txt);text-decoration:none}
.atalhos a:hover{background:#fafafb}
.atalhos b{font-weight:600}
.atalhos span{grid-column:1;color:var(--suave);font-size:15px}
.atalhos a::after{content:"";grid-column:2;grid-row:1/span 2;width:8px;height:8px;border-right:2px solid var(--suave);border-top:2px solid var(--suave);transform:rotate(45deg)}
.res aside .rform{flex-direction:column}.res aside .rform .bt{width:100%}
/* A seta do select em gradiente: imagem em data: a CSP bloqueia (img-src só 'self'), e o campo ficava sem seta. */
select.in{appearance:none;padding-right:40px;background-color:var(--cartao);background-image:linear-gradient(45deg,transparent calc(50% - 1px),var(--suave) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),var(--suave) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));background-size:6px 6px;background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-repeat:no-repeat}
.registrar{margin:14px 0 12px}
.registrar label{display:block;font-weight:600;font-size:15px;margin:0 0 6px}
.registrar .linha-campo{display:flex;gap:8px;flex-wrap:wrap}
.registrar .in{flex:1 1 220px;width:auto}
/* Guia de status: leitura. */
.guia{max-width:72ch}
.lide{font-size:19px;line-height:1.5;margin:4px 0 12px;color:var(--txt);text-wrap:pretty}
.fase-guia{margin:0;color:var(--suave);font-size:15px}
.fase-guia .selo{margin-left:6px;vertical-align:1px}
.campo-guia{margin:32px 0 0;max-width:72ch}
.campo-guia h2{margin:0 0 12px}
.campo-guia .rform{margin:0}