/* FLIP7 em números (dados.flip7.com.br). Desenho: Tfigma, arquivo MRjafvhpazCupOhmkr0J5l, página 40:121
   (DN-01 desktop 41:2 · DN-02 celular 42:2 · DN-03 estados 43:2). Identidade do site FLIP7 / LP do Plano de Expansão:
   fundo #111115 · títulos Sora 700–800 · texto DM Sans 400–700 · gradiente #F0BD21 → #F38241 → #E84C6B (120°).
   caminho de fonte/imagem SEMPRE absoluto (/assets/…): este arquivo é servido em /site-assets/ e um caminho relativo resolveria lá. */
@font-face{font-family:Sora;src:url(/assets/fontes/Sora-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Sora;src:url(/assets/fontes/Sora-ExtraBold.ttf);font-weight:800;font-display:swap}
@font-face{font-family:DM;src:url(/assets/fontes/DMSans-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url(/assets/fontes/DMSans-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:DM;src:url(/assets/fontes/DMSans-Bold.ttf);font-weight:700;font-display:swap}

:root{
  --bg:#111115;--fg:#F4F4F6;--mut:#A9AAB3;--claro:#D4D5DC;--card:rgba(255,255,255,.045);--bd:rgba(255,255,255,.09);
  --amarelo:#F0BD21;--laranja:#F38241;--rosa:#E84C6B;--ok:#4ADE80;
  --grad:linear-gradient(120deg,#F0BD21,#F38241 50%,#E84C6B);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:DM,system-ui,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55;font-size:18px;overflow-x:hidden}
h1,h2,h3,.num{font-family:Sora,system-ui,sans-serif}
p{color:var(--mut)}
a{color:inherit}
img{max-width:100%}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 24px}}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(18px,2vw,21px);color:var(--claro);max-width:62ch}

/* faixa de exemplo (só quando o JSON vem com "exemplo": true) */
.aviso-exemplo{display:none;background:var(--amarelo);color:var(--bg);text-align:center;font-size:14px;font-weight:500;padding:8px 16px}
.aviso-exemplo strong{font-family:Sora,sans-serif;letter-spacing:.12em}
body.eh-exemplo .aviso-exemplo{display:block}

/* topo */
.topo{position:sticky;top:0;z-index:9;background:rgba(17,17,21,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.topo img{height:32px;width:auto;display:block}
.topo .tag{font-size:14px;color:var(--mut)}

/* hero */
.capa{padding:72px 0 80px;background:radial-gradient(ellipse at 15% 0%,rgba(240,189,33,.16),transparent 50%),radial-gradient(ellipse at 95% 30%,rgba(232,76,107,.16),transparent 50%)}
.selo{display:inline-block;font-family:Sora,sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);border:1.5px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:99px}
.capa h1{font-weight:800;font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:16ch;margin-top:22px;text-wrap:balance}
.capa .lead{margin-top:18px}

/* selo «Atualizado em»: cinza carregando · verde em dia · AMARELO com mais de 3 h */
.vivo{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 10px;font-size:15px;color:var(--claro);background:rgba(255,255,255,.05);border:1px solid var(--bd);padding:8px 14px;border-radius:99px;margin-top:28px}
.vivo i{width:9px;height:9px;border-radius:50%;background:#6E6F78;flex:none}
.vivo b{color:var(--fg);font-weight:700;white-space:nowrap}
.vivo .hb,.vivo .ha{margin-left:-6px}
.vivo .ha{display:none}
.vivo.ok i{background:var(--ok);box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.vivo.velho i{background:var(--amarelo);box-shadow:0 0 0 4px rgba(240,189,33,.18)}
.vivo.velho b,.vivo.velho .ha{color:var(--amarelo)}
.vivo.velho .ha{display:inline}
.vivo.sem-hora .hb,.vivo.sem-hora .ha{display:none!important}

/* falha: «—» em tudo + aviso rosa (o selo de data some) */
.erro{display:none;margin-top:28px;gap:12px;align-items:center;max-width:640px;border:1.5px solid rgba(232,76,107,.5);background:rgba(232,76,107,.1);color:#F6C2CD;border-radius:14px;padding:12px 16px;font-size:15px}
.erro.sem-js,body.falhou .erro{display:flex}
body.falhou .vivo{display:none}

/* números do topo: pedidos num card grande com gradiente, marcas e produtos menores */
.destaque{margin-top:48px;display:grid;gap:18px;grid-template-columns:1fr 1fr}
.destaque .big{grid-column:1/-1}
@media (min-width:901px){.destaque{grid-template-columns:1.6fr 1fr 1fr}.destaque .big{grid-column:auto}}
.big,.mid{border-radius:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
/* o número do topo NUNCA quebra (123.45|6): o card cresce e os menores encolhem, como no desenho */
.big{padding:26px;background:linear-gradient(135deg,rgba(240,189,33,.16),rgba(232,76,107,.12));border:1.5px solid rgba(243,130,65,.45)}
.mid{padding:22px;background:var(--card);border:1.5px solid var(--bd)}
@media (min-width:901px){.big{padding:34px;min-height:260px;gap:10px}.mid{padding:30px}}
.big .num{font-weight:800;font-size:clamp(56px,9vw,128px);line-height:.95;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.big .rot{font-size:20px;color:var(--fg);font-weight:500}
.mid .num{font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em;white-space:nowrap}
@media (min-width:901px){.mid .num{font-size:64px}}
.mid .rot{font-size:17px;color:var(--claro)}

/* seções */
.sec{padding:clamp(64px,9vw,120px) 0;border-top:1px solid rgba(255,255,255,.05);background:radial-gradient(ellipse at 90% 0%,rgba(243,130,65,.14),transparent 55%)}
.cab{display:flex;flex-direction:column;gap:18px;margin-bottom:44px}
.k{font-family:Sora,sans-serif;font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:13px;color:var(--laranja)}
.cab h2{font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.card,.area{background:var(--card);border:1.5px solid var(--bd);border-radius:22px;padding:28px;display:flex;flex-direction:column;min-width:0}

/* por área */
.areas{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:901px){.areas{grid-template-columns:repeat(3,1fr)}}
.area .t{display:flex;align-items:center;gap:10px}
.area .t i{width:10px;height:10px;border-radius:3px;background:var(--grad);flex:none}
.area h3{font-weight:700;font-size:22px;line-height:1.2}
.area .desc{font-size:15px;margin:6px 0 4px}
.metrica{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;margin-top:18px;min-width:0}
.metrica .num{font-weight:800;font-size:42px;line-height:1;letter-spacing:-.03em;color:var(--fg);overflow-wrap:anywhere}
@media (min-width:901px){.metrica .num{font-size:48px}}
.metrica .rot{display:block;font-size:15px;color:var(--mut);margin-top:6px}

/* «Em breve»: etiqueta amarela tracejada, para nunca parecer um 0 */
.em-breve .num{display:inline-flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-weight:700;font-size:15px;line-height:1.3;letter-spacing:0;
  color:var(--amarelo);-webkit-text-fill-color:var(--amarelo);background:rgba(240,189,33,.1);border:1px dashed rgba(240,189,33,.55);padding:8px 14px;border-radius:12px;align-self:flex-start}
.em-breve .num::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amarelo);flex:none}
/* falha: o «—» apagado */
body.falhou [data-metrica] .num{background:none;color:#4A4B55;-webkit-text-fill-color:#4A4B55}

/* metodologia */
.metodo{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:901px){.metodo{grid-template-columns:repeat(3,1fr)}}
.metodo .card{gap:12px}
.metodo h3{font-weight:700;font-size:19px;line-height:1.2}
.metodo p{font-size:16px}
.selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.selos span{font-size:13px;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--bd);color:var(--claro)}

/* rodapé */
.rodape{border-top:1px solid rgba(255,255,255,.06);padding:36px 0;font-size:15px;color:var(--mut)}
.rodape .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.rodape .marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rodape img{height:22px;width:auto;display:block}
.rodape a{color:var(--fg);font-family:Sora,sans-serif;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.3)}

.vivo .ha-c{display:none}
@media (max-width:900px){.capa{padding:40px 0 48px}.topo .tag,.vivo .hb,.vivo .ha-l{display:none}.vivo .ha-c{display:inline}.vivo{font-size:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ecossistema (gerado por tools/ecossistema.mjs) */
footer .wrap.eco{display:block;margin-top:24px;padding-top:24px;border-top:1px solid var(--bd)}
.eco .eco-tit{margin:0 0 14px;font-family:var(--ft);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.eco .eco-tit a{color:var(--fg);text-decoration:none}
.eco .eco-tit a:hover{color:var(--ac)}
.eco .eco-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.eco .eco-lista li{min-width:0}
.eco .eco-lista a{display:block;text-decoration:none}
.eco .eco-nome{display:block;font-size:13px;font-weight:600;color:var(--fg)}
.eco .eco-linha{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--mut)}
.eco .eco-lista a:hover .eco-nome{color:var(--ac)}
@media (min-width:1024px){.eco .eco-lista{grid-template-columns:repeat(4,minmax(0,1fr))}}