/* Anuncia Aí — etiquetas (badges).
   A base .badge continua no style.css (flutuante sobre a foto do anúncio).
   Aqui ficam os tons, os tamanhos, os acabamentos e os efeitos.
   A ordem importa: tamanho primeiro, acabamento depois, para o acabamento
   poder mudar o arredondamento sem ser desfeito pelo tamanho. */

/* ---------------- Tons ---------------- */
.badge[data-tone]         {--bd:#0750d4;--bd-deep:#063da8;--bd-ink:#0b3fa0;--bd-soft:#e7efff}
.badge[data-tone="red"]   {--bd:#ff0029;--bd-deep:#d3001f;--bd-ink:#c10020;--bd-soft:#ffe5ea}
.badge[data-tone="blue"]  {--bd:#0750d4;--bd-deep:#063da8;--bd-ink:#0b3fa0;--bd-soft:#e7efff}
.badge[data-tone="navy"]  {--bd:#12296b;--bd-deep:#061b51;--bd-ink:#12296b;--bd-soft:#e6eaf6}
.badge[data-tone="sky"]   {--bd:#009ee3;--bd-deep:#0080bb;--bd-ink:#0074ad;--bd-soft:#e1f5ff}
.badge[data-tone="green"] {--bd:#11b666;--bd-deep:#0b9151;--bd-ink:#0a7a44;--bd-soft:#e2f8ed}
.badge[data-tone="teal"]  {--bd:#00a08a;--bd-deep:#008070;--bd-ink:#007466;--bd-soft:#def7f3}
.badge[data-tone="purple"]{--bd:#732cff;--bd-deep:#5a18d8;--bd-ink:#5715cf;--bd-soft:#efe6ff}
.badge[data-tone="pink"]  {--bd:#e5197f;--bd-deep:#bd0e66;--bd-ink:#b50c61;--bd-soft:#ffe4f1}
.badge[data-tone="amber"] {--bd:#f5960a;--bd-deep:#d07800;--bd-ink:#8f5400;--bd-soft:#fff1da}
.badge[data-tone="slate"] {--bd:#6b7385;--bd-deep:#535a6b;--bd-ink:#4d5462;--bd-soft:#eef0f5}
.badge[data-tone="dark"]  {--bd:#1b2138;--bd-deep:#0b1020;--bd-ink:#1b2138;--bd-soft:#e8e9ee}

/* ---------------- Base pintada ---------------- */
.badge[data-tone]{
  background:linear-gradient(180deg,var(--bd),var(--bd-deep));
  color:#fff;
  font-weight:650;
  letter-spacing:.1px;
  white-space:nowrap;
  box-shadow:0 2px 6px #0a132c26;
}
/* Os ícones são de traço: preencher transformaria todos em manchas. */
.badge[data-tone] .icon{fill:none;stroke:currentColor;stroke-width:2.2;flex-shrink:0}
.badge[data-tone] .icon.filled{fill:currentColor;stroke:none}

/* ---------------- Posição ---------------- */
.badge.inline{position:static;left:auto;right:auto;top:auto;bottom:auto;display:inline-flex;vertical-align:middle}
.badge.top-left{left:8px;right:auto;top:9px;bottom:auto}
.badge.top-right{right:8px;left:auto;top:9px;bottom:auto}
.badge.bottom-left{left:8px;right:auto;bottom:9px;top:auto}
.badge.bottom-right{right:8px;left:auto;bottom:9px;top:auto}
.badge-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---------------- Tamanhos ---------------- */
.badge.xs[data-tone]{font-size:9px;padding:3px 7px;gap:3px;border-radius:12px}
.badge.xs[data-tone] .icon{width:10px;height:10px}
.badge.sm[data-tone]{font-size:10px;padding:4px 8px;gap:4px;border-radius:14px}
.badge.sm[data-tone] .icon{width:11px;height:11px}
.badge.md[data-tone]{font-size:12px;padding:6px 11px;gap:5px;border-radius:16px}
.badge.md[data-tone] .icon{width:14px;height:14px}
.badge.lg[data-tone]{font-size:14px;padding:8px 14px;gap:7px;border-radius:20px}
.badge.lg[data-tone] .icon{width:17px;height:17px}

/* ---------------- Acabamentos ---------------- */
.badge.soft[data-tone]{background:var(--bd-soft);color:var(--bd-ink);box-shadow:none}
.badge.outline[data-tone]{background:#fff;color:var(--bd-ink);box-shadow:inset 0 0 0 1.5px var(--bd)}
.badge.glass[data-tone]{background:#08153ab3;color:#fff;box-shadow:inset 0 0 0 1px #ffffff40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.badge.square[data-tone]{border-radius:7px}
.badge.ribbon[data-tone]{border-radius:2px 15px 15px 2px;padding-left:11px;box-shadow:-3px 3px 10px #0a132c33}
.badge.ribbon[data-tone]:not(.inline){left:0}
.badge.dot[data-tone]{padding-left:9px;gap:6px}
.badge.dot[data-tone]::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.85}

/* ---------------- Efeitos ---------------- */
.badge.pulse[data-tone]{animation:badge-pulse 2s ease-in-out infinite}
@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.badge.shine[data-tone]{position:relative;overflow:hidden;isolation:isolate}
.badge.shine[data-tone]::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,#ffffff00 38%,#ffffff8c 50%,#ffffff00 62%);
  transform:translate3d(-130%,0,0);
  animation:badge-shine 2.6s ease-in-out infinite;
}
@keyframes badge-shine{0%{transform:translate3d(-130%,0,0)}45%,100%{transform:translate3d(130%,0,0)}}
.badge.glow[data-tone]{animation:badge-glow 2.2s ease-out infinite}
@keyframes badge-glow{
  0%{box-shadow:0 2px 6px #0a132c26,0 0 0 0 var(--bd)}
  70%,100%{box-shadow:0 2px 6px #0a132c26,0 0 0 9px #00000000}
}
.badge.inline[data-tone]{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
a:hover>.badge.inline[data-tone],
button:hover>.badge.inline[data-tone],
.badge-row a:hover .badge.inline[data-tone]{transform:translateY(-1px) scale(1.04)}

/* ---------------- Vitrine de etiquetas ---------------- */
.badge-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:6px}
/* min-width:0 impede que uma fila longa de etiquetas estique a coluna e
   vaze para fora da tela no celular. */
.badge-gallery section{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px}
.badge-gallery h2{display:flex;align-items:center;gap:9px;font-size:17px;margin:0 0 4px}
.badge-gallery h2 .icon{width:19px;height:19px;color:var(--red)}
.badge-gallery section>p{color:var(--muted);font-size:13px;margin:0 0 14px}
.badge-gallery code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.badge-sample{display:flex;flex-wrap:wrap;gap:10px;min-width:0}
.badge-sample>button{
  display:flex;align-items:center;gap:8px;border-radius:14px;padding:7px 10px;
  border:1px solid var(--line);background:#fbfcfe;cursor:pointer;
  transition:border-color .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1),background-color .2s ease;
}
.badge-sample>button:hover{border-color:#c8d4ea;background:#fff;transform:translateY(-2px)}
.badge-sample>button code{font-size:10.5px;color:var(--muted)}
.badge-variant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px;min-width:0}
.badge-variant-grid>div{min-width:0;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fbfcfe}
.badge-variant-grid h3{font-size:13px;margin:0 0 3px}
.badge-variant-grid p{color:var(--muted);font-size:11.5px;margin:0 0 10px;line-height:1.35}
.badge-tone-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.badge-photo-demo{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(130deg,#12296b,#0750d4 55%,#ff0029)}
.badge-code{
  display:block;margin-top:14px;padding:12px 14px;border-radius:12px;background:#0b1020;color:#d8e2f7;
  font-size:11.5px;line-height:1.75;overflow-x:auto;white-space:pre;
}
@media(max-width:600px){
  .badge-gallery section{padding:15px 13px 17px}
  .badge-variant-grid{grid-template-columns:1fr}
  .badge-code{font-size:10.5px}
  /* No celular o código vai embaixo da etiqueta: assim cabem duas por linha. */
  .badge-sample{gap:8px}
  .badge-sample>button{flex-direction:column;align-items:flex-start;gap:5px;padding:8px 9px 7px}
  .badge-sample>button code{font-size:9.5px}
  .badge-sample .badge.md[data-tone]{font-size:11px;padding:5px 9px;gap:4px}
  .badge-sample .badge.md[data-tone] .icon{width:12px;height:12px}
}