/* Widgets interativos e figuras dos artigos do blog */
.bw, .bw-fig{ margin:34px 0; }
.bw{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:22px 22px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.bw-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:16px; }
.bw-tag{
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:var(--grad); padding:4px 10px; border-radius:999px;
}
.bw-title{ font-family:var(--font-head); font-size:1.08rem; color:var(--text); }
.bw-note{ margin:14px 0 0 !important; font-size:.82rem; color:var(--muted); line-height:1.5 !important; }
.bw noscript, .bw .bw-nojs{ color:var(--muted); font-size:.9rem; }
html.js .bw .bw-nojs{ display:none; }

.bw-fields{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){ .bw-fields{ grid-template-columns:1fr 1fr; } }
.bw-field{ display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--muted); }
.bw-field > span{ display:flex; justify-content:space-between; gap:10px; }
.bw-field output{ color:var(--text); font-weight:600; }
.bw-field input[type=number], .bw-field input[type=text], .bw-field textarea{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--field); color:var(--text);
}
.bw-field textarea{ resize:vertical; min-height:76px; line-height:1.5; }
.bw-field input[type=number]:focus, .bw-field input[type=text]:focus, .bw-field textarea:focus{ outline:none; border-color:var(--pink); }
.bw-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* bloco de código (gerador de dados estruturados) */
.bw-code-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.bw-copy{
  padding:8px 14px; cursor:pointer; font-size:.82rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text);
  background:var(--fill-2); border:1px solid var(--line-strong); border-radius:999px; transition:background .2s, border-color .2s;
}
.bw-copy:hover{ border-color:var(--pink); }
.bw-code{
  margin:0; padding:14px 16px; max-height:280px; overflow:auto; white-space:pre; tab-size:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; line-height:1.55;
  color:var(--text); background:var(--mock); border:1px solid var(--line); border-radius:12px;
}

/* verificador de Core Web Vitals */
.bw-cwv{ list-style:none !important; padding:0 !important; margin:18px 0 0 !important; display:grid; gap:10px; }
.bw-cwv li{ display:flex; align-items:flex-start; gap:14px; margin:0 !important; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--fill); }
.bw-cwv b{ color:var(--text); }
.bw-cwv small{ margin-left:6px; color:var(--muted); }
.bw-cwv p{ margin:4px 0 0 !important; font-size:.88rem; line-height:1.5 !important; }
.bw-pill{ flex:none; min-width:96px; padding:6px 12px; text-align:center; font-size:.8rem; font-weight:700; border-radius:999px; color:var(--text); background:var(--fill-2); border:1px solid var(--line-strong); }
.bw-pill.is-good{ color:#065f46; background:#a7f3d0; border-color:#34d399; }
.bw-pill.is-warn{ color:#78350f; background:#fde68a; border-color:#f59e0b; }
.bw-pill.is-bad{ color:#7f1d1d; background:#fecaca; border-color:#ef4444; }
.bw input[type=range]{ width:100%; accent-color:var(--red); }
.bw-field-wide{ grid-column:1 / -1; }

.bw-results{ display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-top:18px; }
@media (min-width:560px){ .bw-results{ grid-template-columns:repeat(3,1fr); } }
.bw-result{ padding:14px; border-radius:var(--radius-sm); background:var(--fill); border:1px solid var(--line); }
.bw-result small{ display:block; font-size:.74rem; color:var(--muted); margin-bottom:4px; }
.bw-result b{ font-family:var(--font-head); font-size:1.35rem; color:var(--text); line-height:1.1; }
.bw-result.is-key{ border-color:rgba(254,66,46,.45); background:rgba(254,66,46,.08); }
.bw-result.is-key b{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* tabs */
.bw-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.bw-tab{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--fill);
  color:var(--muted); cursor:pointer; font-weight:600; font-size:.9rem; transition:all .2s;
}
.bw-tab:hover{ color:var(--text); }
.bw-tab[aria-selected="true"]{ background:var(--grad); border-color:transparent; color:#fff; }
.bw-panel[hidden]{ display:none; }
.bw-split{ display:grid; gap:18px; }
@media (min-width:640px){ .bw-split{ grid-template-columns:1fr 1fr; align-items:start; } }

/* mock de anúncio */
.bw-mock{ border-radius:14px; background:var(--mock); border:1px solid var(--line); padding:14px; font-size:.84rem; }
.bw-mock .bw-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; background:var(--fill-2); color:var(--text); font-size:.82rem; margin-bottom:12px; }
.bw-ad-label{ display:inline-block; font-size:.68rem; font-weight:700; color:var(--text); border:1px solid var(--line-strong); border-radius:4px; padding:0 5px; margin-right:6px; }
.bw-ad-title{ color:#9db7ff; font-weight:600; margin:4px 0; display:block; font-size:.95rem; }
.bw-ad-url{ color:var(--muted); font-size:.76rem; }
.bw-feed-img{ height:96px; border-radius:10px; background:var(--grad); opacity:.85; margin:10px 0; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:600; }
.bw-feed-cta{ display:inline-block; margin-top:6px; padding:6px 12px; border-radius:8px; background:var(--fill-2); color:var(--text); font-size:.8rem; font-weight:600; }
.bw-facts{ list-style:none !important; padding:0 !important; margin:0 !important; display:grid; gap:8px; }
.bw-facts li{ padding:10px 12px; border-radius:10px; background:var(--fill); border:1px solid var(--line); font-size:.88rem; color:var(--muted); margin:0 !important; }
.bw-facts b{ display:block; color:var(--text); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.bw-steps{ list-style:none !important; padding:0 !important; margin:0 !important; display:grid; gap:10px; counter-reset:bws; }
.bw-steps li{ counter-increment:bws; position:relative; padding:12px 14px 12px 48px; border-radius:12px; background:var(--fill); border:1px solid var(--line); color:var(--muted); font-size:.9rem; margin:0 !important; }
.bw-steps li::before{ content:counter(bws); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--grad); color:#fff; font-size:.78rem; font-weight:700; display:grid; place-items:center; }
.bw-steps b{ color:var(--text); }

/* funil */
.bw-funnel{ display:grid; gap:8px; margin:18px 0 6px; }
.bw-stage{ display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:center; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:inherit; }
.bw-stage-name{ font-size:.82rem; color:var(--muted); font-weight:600; }
.bw-stage.is-active .bw-stage-name{ color:var(--text); }
.bw-stage-track{ display:flex; align-items:center; gap:10px; background:var(--fill); border-radius:10px; overflow:hidden; }
.bw-stage-bar{
  flex:none; height:38px; min-width:56px; display:flex; align-items:center; padding:0 12px;
  border-radius:10px; background:var(--grad); color:#fff; font-weight:700; font-size:.88rem; transition:width .35s ease; white-space:nowrap;
}
.bw-stage-track > i{ font-style:normal; font-size:.76rem; color:var(--muted); white-space:nowrap; padding-right:10px; }
.bw-stage.is-weak .bw-stage-bar{ box-shadow:0 0 0 2px #fff inset; }
.bw-tip{ margin:12px 0 0 !important; padding:12px 14px; border-radius:12px; background:var(--fill); border:1px solid var(--line); font-size:.9rem; }
.bw-tip b{ color:var(--text); }

/* checklist & quiz */
.bw-check{ list-style:none !important; padding:0 !important; margin:0 0 16px !important; display:grid; gap:8px; }
.bw-check li{ margin:0 !important; }
.bw-check label{ display:flex; gap:12px; align-items:flex-start; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--fill); cursor:pointer; color:var(--muted); font-size:.92rem; transition:border-color .2s, background .2s; }
.bw-check label:hover{ border-color:var(--line-strong); }
.bw-check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--red); flex:none; }
.bw-check input:checked + span{ color:var(--text); }
.bw-check label:has(input:checked){ border-color:rgba(254,66,46,.5); background:rgba(254,66,46,.08); }
.bw-score{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px; border-radius:14px; background:var(--fill); border:1px solid var(--line); }
.bw-ring{ width:76px; height:76px; flex:none; }
.bw-ring circle{ fill:none; stroke-width:9; }
.bw-ring .bg{ stroke:var(--fill-2); }
.bw-ring .fg{ stroke:url(#bw-grad); stroke-linecap:round; transition:stroke-dashoffset .4s ease; }
.bw-ring text{ fill:var(--text); font-family:var(--font-head); font-weight:700; font-size:22px; text-anchor:middle; dominant-baseline:central; }
.bw-score-msg{ flex:1 1 220px; margin:0 !important; color:var(--text) !important; font-size:.95rem; }
.bw-score-msg a{ display:inline-block; margin-top:6px; }
.bw-meter{ position:relative; height:12px; border-radius:999px; background:linear-gradient(90deg,#3b2a63 0 33.3%,#6b3a7a 33.3% 66.6%,#fe422e 66.6%); margin:6px 0 12px; }
.bw-meter i{ position:absolute; top:50%; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--red); transform:translate(-50%,-50%); left:0; transition:left .35s ease; }
.bw-meter-labels{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted); margin-bottom:6px; }

/* intervalos de preço */
.bw-rows{ display:grid; gap:10px; }
.bw-row{ display:grid; gap:6px; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:inherit; }
.bw-row-top{ display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--muted); font-weight:600; }
.bw-row.is-active .bw-row-top{ color:var(--text); }
.bw-range{ position:relative; height:16px; border-radius:999px; background:var(--fill-2); }
.bw-range i{ position:absolute; top:0; bottom:0; border-radius:999px; background:var(--grad); opacity:.55; transition:opacity .2s; }
.bw-row.is-active .bw-range i{ opacity:1; box-shadow:0 0 18px rgba(254,66,46,.5); }
.bw-axis{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-top:4px; }

.bw-range{ display:block; }
.bw-stage-name{ display:block; }
.bw-bars{ display:grid; gap:8px; margin-top:16px; }
.bw-bar-row{ display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; font-size:.8rem; color:var(--muted); }
.bw-bar-track{ display:block; height:14px; background:var(--fill-2); border-radius:999px; overflow:hidden; }
.bw-bar-track i{ display:block; height:100%; width:0; border-radius:999px; background:var(--grad); transition:width .35s ease; }
.bw-sub{ color:var(--muted); font-size:.85em; }

/* figuras estáticas */
.bw-fig{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.bw-fig img{ display:block; width:100%; height:auto; }
.bw-fig figcaption{ padding:12px 18px; font-size:.84rem; color:var(--muted); border-top:1px solid var(--line); }

@media (prefers-reduced-motion: reduce){
  .bw *{ transition:none !important; }
}