/* =============================================================
   BLUE POP — componentes
   Tudo aqui consome tokens.css e as variáveis --sup-* da
   superfície ativa (.sup-azul / .sup-paper / .sup-tinta).
   ============================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--pop-sans);
  font-size: var(--pop-t-base);
  line-height: var(--pop-leading-body);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--pop-mono); }
img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--pop-tinta); color: var(--pop-branco); }
.sup-paper ::selection, .sup-tinta ::selection { background: var(--pop-azul); color: var(--pop-branco); }

/* ---------------- TIPO ---------------- */
.disp {
  font-size: var(--pop-t-disp);
  font-weight: 900;
  line-height: var(--pop-leading-disp);
  letter-spacing: var(--pop-track-disp);
}
.h2-pop {
  font-size: var(--pop-t-3xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--pop-track-tight);
}
.h3-pop {
  font-size: var(--pop-t-xl);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: var(--pop-track-tight);
}
.lede { font-size: var(--pop-t-md); color: var(--sup-texto-2); max-width: 58ch; }
.label {
  font-family: var(--pop-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--pop-track-label);
  text-transform: uppercase;
  color: var(--sup-mudo);
}

/* ---------------- CARIMBO (assinatura nº 2) ----------------
   UMA palavra por peça. Sobre azul: branco/tinta-azul.
   Sobre paper ou tinta: azul/tinta-branco. Tilt fixo -1.4°. */
.carimbo {
  display: inline-block;
  font-style: normal;
  padding: 0.02em 0.16em;
  border-radius: 0.14em;
  transform: rotate(var(--pop-tilt-2));
}
.sup-azul .carimbo { background: var(--pop-branco); color: var(--pop-azul); box-shadow: var(--pop-hard-2) var(--pop-noite); }
.sup-paper .carimbo, .sup-tinta .carimbo { background: var(--pop-azul); color: var(--pop-branco); box-shadow: var(--pop-hard-2) var(--sup-sombra); }

/* ---------------- STICKER (assinatura nº 3) ---------------- */
.sticker {
  display: inline-block;
  width: fit-content; /* em flex/grid column não pode esticar */
  font-family: var(--pop-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--pop-track-sticker);
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--pop-r-chip);
  transform: rotate(var(--pop-tilt-1));
  animation: carimbada var(--pop-d-carimbo) var(--pop-e-carimbo) backwards;
}
.sup-azul .sticker { background: var(--pop-tinta); color: var(--pop-branco); box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.28); }
.sup-paper .sticker { background: var(--pop-azul); color: var(--pop-branco); box-shadow: 4px 4px 0 var(--pop-gelo); }
.sup-tinta .sticker { background: var(--pop-azul); color: var(--pop-branco); box-shadow: 4px 4px 0 rgba(31, 127, 255, 0.25); }
@keyframes carimbada {
  from { transform: rotate(-8deg) scale(1.3); opacity: 0; }
  to   { transform: rotate(var(--pop-tilt-1)) scale(1); opacity: 1; }
}

/* ---------------- CHIP / PILL ---------------- */
.chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  font-family: var(--pop-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--pop-r-pill);
  border: var(--sup-borda);
}
.chip-cheio { background: var(--pop-branco); color: var(--pop-azul); box-shadow: var(--pop-hard-1) var(--sup-sombra); }
.chip-tilt { transform: rotate(var(--pop-tilt-3)); }
.chip-passo {
  border: none;
  background: var(--pop-azul-10);
  color: var(--pop-azul);
  transform: rotate(var(--pop-tilt-3));
}
.sup-tinta .chip-passo { background: rgba(31, 127, 255, 0.18); color: var(--pop-azul-hover); }

/* ---------------- BOTÕES ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--pop-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--pop-branco);
  background: var(--pop-azul);
  border: var(--pop-borda-no-azul);
  border-radius: var(--pop-r-ui);
  padding: 16px 28px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--pop-hard-2) rgba(10, 10, 10, 0.85);
  transition: transform var(--pop-d-ui) var(--pop-e-ui), box-shadow var(--pop-d-ui) var(--pop-e-ui), background var(--pop-d-ui) var(--pop-e-ui);
}
.btn:hover { background: var(--pop-azul-hover); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(10, 10, 10, 0.85); }
.btn:active { background: var(--pop-azul-press); transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(10, 10, 10, 0.85); }
.btn:focus-visible { outline: 3px solid var(--pop-tinta); outline-offset: 3px; }
.btn .seta { display: inline-block; transition: transform var(--pop-d-ui) var(--pop-e-ui); }
.btn:hover .seta { transform: translateX(4px); }

/* sobre azul: botão branco */
.btn-no-azul {
  color: var(--pop-azul);
  background: var(--pop-branco);
  box-shadow: 6px 6px 0 var(--pop-noite);
}
.btn-no-azul:hover { background: var(--pop-branco); color: var(--pop-azul-press); box-shadow: 8px 8px 0 var(--pop-noite); }
.btn-no-azul:active { box-shadow: 1px 1px 0 var(--pop-noite); }
.btn-no-azul:focus-visible { outline-color: var(--pop-branco); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--pop-azul-press);
  background: transparent;
  border: 2px dashed rgba(31, 127, 255, 0.55);
  border-radius: var(--pop-r-ui);
  padding: 15px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--pop-d-ui), background var(--pop-d-ui);
}
.sup-azul .btn-ghost, .sup-tinta .btn-ghost { color: var(--sup-texto); border-color: var(--sup-linha); }
.btn-ghost:hover { border-color: var(--pop-azul); background: var(--pop-azul-10); }
.btn-ghost:focus-visible { outline: 3px solid var(--pop-azul); outline-offset: 3px; }

/* ---------------- CARTÃO ---------------- */
.cartao {
  background: var(--pop-branco);
  color: var(--pop-tinta);
  border: var(--pop-borda);
  border-radius: var(--pop-r-card);
  box-shadow: var(--pop-hard-4) var(--sup-sombra, var(--pop-gelo));
  padding: clamp(22px, 4vw, 40px);
}
.sup-tinta .cartao { background: var(--pop-tinta-2); color: #F5F5F2; border: var(--pop-borda-no-dark); box-shadow: var(--pop-hard-4) var(--pop-noite); }
.cartao-flat { box-shadow: var(--pop-hard-2) var(--sup-sombra, var(--pop-gelo)); border-radius: var(--pop-r-ui); }

/* métrica (o número é o herói) */
.metrica { display: grid; gap: 6px; }
.metrica .num {
  font-family: var(--pop-mono);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pop-azul);
}
.metrica .num.neg { color: var(--pop-negativo); }
.metrica .desc { font-size: var(--pop-t-sm); color: var(--sup-mudo, rgba(10,10,10,0.5)); }

/* ---------------- INPUT ---------------- */
.campo {
  width: 100%;
  font-family: var(--pop-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--pop-tinta);
  background: var(--pop-paper);
  border: 2px solid rgba(10, 10, 10, 0.16);
  border-radius: var(--pop-r-ui);
  padding: 16px 18px;
  transition: border-color var(--pop-d-ui), box-shadow var(--pop-d-ui);
}
.campo::placeholder { color: rgba(10, 10, 10, 0.3); }
.campo:focus { outline: none; border-color: var(--pop-azul); box-shadow: 4px 4px 0 var(--pop-gelo); }

/* opção tipo radio-card (o seletor de faturamento do form) */
.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: var(--pop-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--pop-tinta);
  background: var(--pop-paper);
  border: 2px solid rgba(10, 10, 10, 0.16);
  border-radius: var(--pop-r-ui);
  padding: 13px 14px;
  cursor: pointer;
  transition: transform var(--pop-d-ui), box-shadow var(--pop-d-ui), border-color var(--pop-d-ui), background var(--pop-d-ui), color var(--pop-d-ui);
}
.opcao:hover { border-color: var(--pop-azul); transform: translate(-2px, -2px); box-shadow: var(--pop-hard-2) var(--pop-gelo); }
.opcao[aria-checked="true"], .opcao.on { background: var(--pop-azul); border-color: rgba(10, 10, 10, 0.85); color: var(--pop-branco); box-shadow: var(--pop-hard-2) var(--pop-gelo); }
.opcao .tecla {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pop-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--pop-azul);
  background: var(--pop-azul-10);
  border-radius: 7px;
}
.opcao.on .tecla, .opcao[aria-checked="true"] .tecla { color: var(--pop-branco); background: rgba(255, 255, 255, 0.18); }

/* ---------------- BLOCOS DE PROGRESSO (assinatura nº 4) ---------------- */
.blocos { display: inline-flex; align-items: center; gap: 5px; }
.blocos i {
  width: clamp(16px, 4vw, 34px);
  height: 10px;
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.12);
  transition: background 0.3s, box-shadow 0.3s;
}
.sup-azul .blocos i, .sup-tinta .blocos i { background: rgba(255, 255, 255, 0.2); }
.blocos i.on { background: var(--pop-azul); }
.sup-azul .blocos i.on { background: var(--pop-branco); }
.blocos i.atual { background: var(--pop-azul); box-shadow: 2px 2px 0 rgba(10, 10, 10, 0.8); }

/* ---------------- MARQUEE (assinatura nº 5) ---------------- */
.marquee {
  overflow: hidden;
  border-top: 2px solid var(--sup-linha);
  border-bottom: 2px solid var(--sup-linha);
  padding: 12px 0;
}
.marquee-trilho { display: flex; width: max-content; animation: pop-roda 30s linear infinite; }
.marquee-trilho span {
  font-family: var(--pop-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sup-mudo);
  white-space: nowrap;
}
@keyframes pop-roda { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- FORMAS FLUTUANTES (assinatura nº 6) ---------------- */
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx { position: absolute; color: rgba(255, 255, 255, 0.2); font-weight: 700; line-height: 1; user-select: none; animation: pop-flutua var(--pop-d-flutua) ease-in-out infinite alternate; }
.sup-paper .fx, .sup-tinta .fx { color: rgba(31, 127, 255, 0.22); }
.fx-circulo { width: 130px; height: 130px; border: 2px solid currentColor; border-radius: 50%; color: rgba(255,255,255,0.18); }
.sup-paper .fx-circulo, .sup-tinta .fx-circulo { color: rgba(31, 127, 255, 0.2); }
.fx-anel { width: 46px; height: 46px; border: 8px solid rgba(6, 43, 102, 0.28); border-radius: 50%; }
.fx-cruz { font-size: 84px; }
.fx-ast { font-size: 120px; color: rgba(6, 43, 102, 0.3); }
.fx-seta { font-size: 56px; }
@keyframes pop-flutua {
  from { transform: translateY(-14px) rotate(-4deg); }
  to   { transform: translateY(16px) rotate(5deg); }
}

/* ---------------- NÚMERO FANTASMA (assinatura nº 7) ---------------- */
.fantasma {
  position: absolute;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(31, 127, 255, 0.22);
  pointer-events: none;
  user-select: none;
}
.sup-azul .fantasma { -webkit-text-stroke-color: rgba(255, 255, 255, 0.18); }

/* dentro de cartão branco em seção azul, os grafismos voltam ao esquema claro */
.sup-azul .cartao .blocos i { background: rgba(10, 10, 10, 0.12); }
.sup-azul .cartao .blocos i.on { background: var(--pop-azul); }
.sup-azul .cartao .blocos i.atual { background: var(--pop-azul); }
.sup-azul .cartao .fantasma { -webkit-text-stroke-color: rgba(31, 127, 255, 0.22); }
.sup-azul .cartao .hint, .sup-azul .cartao .label { color: rgba(10, 10, 10, 0.48); }

/* ---------------- GRAIN ---------------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------------- TABELA DE MÉTRICAS ---------------- */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--pop-t-sm); }
.tabela th {
  font-family: var(--pop-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--sup-mudo, rgba(10,10,10,0.48));
  padding: 10px 12px;
  border-bottom: 2px solid var(--sup-linha, rgba(10,10,10,0.14));
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--sup-linha, rgba(10,10,10,0.1)); }
.tabela td.num { font-family: var(--pop-mono); font-weight: 600; }
.tabela tr:hover td { background: var(--pop-azul-10); }

/* ---------------- SEÇÕES / LAYOUT ---------------- */
.secao { position: relative; padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 64px); }
.miolo { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 24px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); }
/* conteúdo largo (tabela, mono) não pode alargar a coluna: min-width 0 nos itens */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------------- ACESSIBILIDADE / MOTION ---------------- */
:focus-visible { outline: 3px solid var(--pop-azul); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .marquee-trilho, .fx, .sticker { animation: none; }
  * { transition-duration: 0.01s !important; }
}
@media (pointer: coarse) {
  .btn, .btn-ghost, .opcao { min-height: 52px; }
}