/* ConsentMode · guia dos Padrões Better Ads (Como funciona) */
.ba { --ba-ink: #1f1f1f; --ba-muted: #5f6368; --ba-line: #e1e3e1; --ba-blue: #0b57d0; max-width: 1180px; margin: 0 auto; padding: 72px 24px 24px; color: var(--ba-ink); font-family: Roboto, Arial, sans-serif; }
.ba [hidden] { display: none !important; }
.ba h2 { margin: 8px 0 12px; font: 400 40px/48px Roboto, Arial, sans-serif; letter-spacing: -.5px; }
.ba h3 { margin: 4px 0 8px; font: 400 28px/36px Roboto, Arial, sans-serif; }
.ba h4 { margin: 6px 0 2px; font: 500 18px/24px Roboto, Arial, sans-serif; }
.ba .lead { max-width: 640px; font-size: 18px; line-height: 28px; color: #444746; }
.ba-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ba-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; max-width: 560px; }
.ba-stats div { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ba-line); }
.ba-stats b { display: block; font: 400 32px/36px Roboto, sans-serif; color: var(--ba-blue); }
.ba-stats span { font-size: 13px; color: var(--ba-muted); }
.ba-why { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--ba-line); }
.ba-why h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.ba-why ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 21px; color: #444746; }
.ba-why b { color: var(--ba-ink); font-weight: 500; }
.ba-nav { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 16px; padding: 12px 0; background: rgba(248, 250, 253, .96); backdrop-filter: blur(6px); }
.ba-nav a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 1px solid #c4c7c5; border-radius: 18px; background: #fff; color: #444746; font: 500 14px Roboto, sans-serif; text-decoration: none; }
.ba-nav a:hover { background: #e8f0fe; color: var(--ba-blue); border-color: #d3e3fd; }
.ba-nav a span { min-width: 22px; padding: 0 6px; border-radius: 10px; background: #e8f0fe; color: #041e49; font-size: 12px; line-height: 20px; text-align: center; }
.ba-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; font-size: 13px; color: var(--ba-muted); line-height: 24px; }
.ba-cob { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; font: 500 12px Roboto, sans-serif; white-space: nowrap; }
.ba-cob.is-auto { background: #e6f4ea; color: #146c2e; }
.ba-cob.is-parcial { background: #e8f0fe; color: #0b57d0; }
.ba-cob.is-manual { background: #fef7e0; color: #7a5900; }
.ba-cob.is-fora { background: #f1f3f4; color: #5f6368; }
.ba-group { margin-top: 48px; scroll-margin-top: 130px; }
.ba-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--ba-line); margin-bottom: 20px; }
.ba-group-h h3 { margin: 0; }
.ba-group-h p { margin: 0; color: var(--ba-muted); }
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.ba-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--ba-line); transition: box-shadow .15s; }
.ba-card:hover { box-shadow: 0 4px 16px rgba(60, 64, 67, .12); }
.ba-fig { margin: 0; display: grid; place-items: center; padding: 20px; background: linear-gradient(180deg, #f8fafd, #eef3fb); border-bottom: 1px solid var(--ba-line); }
.ba-fig svg { width: 100%; height: 180px; }
.ba-fig.is-celular svg, .ba-fig.is-apps svg { height: 200px; }
.ba-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ba-body { padding: 18px 20px 20px; display: grid; align-content: start; gap: 6px; font-size: 14px; line-height: 21px; color: #444746; }
.ba-body p { margin: 0; }
.ba-top { display: flex; align-items: center; justify-content: space-between; }
.ba-n { font: 500 12px Roboto, sans-serif; color: var(--ba-muted); letter-spacing: .5px; }
.ba-en { font-size: 12px; color: var(--ba-muted); font-style: italic; }
.ba dl { margin: 8px 0 4px; display: grid; gap: 8px; }
.ba dl div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid #f1f3f4; }
.ba dt { font: 500 12px/20px Roboto, sans-serif; color: var(--ba-muted); }
.ba dd { margin: 0; font-size: 13px; line-height: 20px; color: var(--ba-ink); }
.ba-src { justify-self: start; margin-top: 4px; color: var(--ba-blue); font: 500 13px Roboto, sans-serif; text-decoration: none; }
.ba-src:hover { text-decoration: underline; }
.ba-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 72px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--ba-line); scroll-margin-top: 130px; }
.ba-big { border-radius: 16px; border: 0; }
.ba-big svg { height: 260px; }
.ba-formula { margin: 8px 0 16px; padding: 14px 16px; border-radius: 12px; background: #e8f0fe; color: #041e49; font-size: 15px; line-height: 22px; }
.ba-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 21px; color: #444746; }
.ba-check li { padding-left: 28px; position: relative; }
.ba-check li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #e6f4ea; color: #146c2e; font: 700 12px/20px Roboto, sans-serif; text-align: center; }
.ba-check b { color: var(--ba-ink); font-weight: 500; }
.ba-flow, .ba-alt { margin-top: 72px; scroll-margin-top: 130px; }
.ba-steps { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; }
.ba-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ba-line); font-size: 13px; line-height: 20px; color: #444746; }
.ba-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 22px; color: #9aa0a6; font-size: 16px; }
.ba-steps i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #e8f0fe; color: var(--ba-blue); font: 500 14px Roboto, sans-serif; font-style: normal; }
.ba-steps li:last-child i { background: #fce8e6; color: #b3261e; }
.ba-steps b { color: var(--ba-ink); font: 500 15px Roboto, sans-serif; }
.ba-fonte { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--ba-line); font-size: 12px; line-height: 18px; color: var(--ba-muted); }
.ba-fonte a { color: var(--ba-blue); }
@media (max-width: 960px) {
  .ba-hero, .ba-split { grid-template-columns: 1fr; }
  .ba-steps { grid-template-columns: 1fr 1fr; }
  .ba-steps li::after { display: none; }
  .ba-swaps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ba { padding: 48px 16px 16px; }
  .ba h2 { font-size: 30px; line-height: 38px; }
  .ba h3 { font-size: 24px; line-height: 32px; }
  .ba-stats { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-steps { grid-template-columns: 1fr; }
  .ba-swap-art { gap: 6px; }
  .ba-swap-art svg:not(.ba-swap-arrow) { height: 150px; }
  .ba dl div { grid-template-columns: 1fr; gap: 2px; }
  .ba-split { padding: 20px; }
  .ba-nav { top: 56px; flex-wrap: nowrap; overflow-x: auto; }
  .ba-nav a { flex: none; }
}

/* O que fazer no lugar: cada troca com o seu par de ilustrações (evite → faça) */
.ba-alt-sub { margin: 0; max-width: 640px; color: #444746; font-size: 15px; line-height: 22px; }
.ba-swaps { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ba-swap { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--ba-line); }
.ba-swap h4 { margin: 18px 0 6px; font: 500 18px/24px Roboto, sans-serif; }
.ba-swap p { margin: 0; font-size: 14px; line-height: 21px; color: #444746; }
.ba-swap-art { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 12px 12px; border-radius: 18px; }
.ba-swap-art figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.ba-swap-art svg:not(.ba-swap-arrow) { width: 100%; height: 190px; }
.ba-swap-art figcaption { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 12px; font: 500 12px Roboto, sans-serif; }
.ba-swap-art .is-evite figcaption { background: #fce8e6; color: #b3261e; }
.ba-swap-art .is-evite figcaption::before { content: "✕"; font-weight: 700; }
.ba-swap-art .is-faca figcaption { background: #e6f4ea; color: #146c2e; }
.ba-swap-art .is-faca figcaption::before { content: "✓"; font-weight: 700; }
.ba-swap-arrow { width: 36px; height: 22px; color: #5f6368; }
.ba-swap-0 .ba-swap-art { background: linear-gradient(135deg, #fff4f2, #eef8f1); }
.ba-swap-1 .ba-swap-art { background: linear-gradient(135deg, #fff8e6, #eaf4ff); }
.ba-swap-2 .ba-swap-art { background: linear-gradient(135deg, #f3eefe, #eef8f1); }
.ba-swap-3 .ba-swap-art { background: linear-gradient(135deg, #fff1e6, #f0f7ee); }
.ba-swap-4 .ba-swap-art { background: linear-gradient(135deg, #fdecef, #eaf1fe); }
.ba-swap-5 .ba-swap-art { background: linear-gradient(135deg, #fff0fa, #eefaf5); }

/* cartão inteiro abre a página própria da experiência */
.ba-card { position: relative; }
.ba-card-link { position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.ba-card-link:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ba-card:hover .ba-more { text-decoration: underline; }
.ba-more { justify-self: start; margin-top: 4px; color: var(--ba-blue); font: 500 14px Roboto, sans-serif; }

/* página de cada experiência */
body.ba-page { margin: 0; background: #f8fafd; }
.ba-det { padding-top: 32px; }
.ba-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ba-muted); margin-bottom: 24px; }
.ba-crumbs a { color: var(--ba-blue); text-decoration: none; }
.ba-crumbs a:hover { text-decoration: underline; }
.ba-crumbs b { color: var(--ba-ink); font-weight: 500; }
.ba-det-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ba-det-fig { border: 1px solid var(--ba-line); border-radius: 28px; padding: 40px; }
.ba-det-fig svg { height: 400px; }
.ba-det-txt h1 { margin: 14px 0 4px; font: 400 44px/52px Roboto, Arial, sans-serif; letter-spacing: -.5px; color: var(--ba-ink); }
.ba-det-lead { margin: 16px 0 0; font-size: 20px; line-height: 30px; color: #444746; }
.ba-facts { margin-top: 24px; display: grid; gap: 12px; }
.ba-facts div { padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ba-line); }
.ba-facts span { display: block; font: 500 12px Roboto, sans-serif; color: var(--ba-muted); text-transform: uppercase; letter-spacing: .6px; }
.ba-facts b { display: block; margin-top: 4px; font: 400 17px/25px Roboto, sans-serif; color: var(--ba-ink); }
.ba-det-cols { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ba-det-cols section { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--ba-line); }
.ba-det-cols h2 { margin: 0 0 10px; font: 500 20px/28px Roboto, sans-serif; }
.ba-det-cols p { margin: 0 0 16px; font-size: 15px; line-height: 23px; color: #444746; }
.ba-det-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.ba-det-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 15px; line-height: 22px; color: #444746; }
.ba-det-steps li::before { content: counter(st); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e6f4ea; color: #146c2e; font: 500 13px Roboto, sans-serif; }
.ba-pager { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ba-pn { display: grid; gap: 4px; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--ba-line); color: var(--ba-ink); text-decoration: none; }
.ba-pn:hover { border-color: #d3e3fd; background: #f4f8fe; }
.ba-pn.is-next { text-align: right; }
.ba-pn small { color: var(--ba-blue); font: 500 13px Roboto, sans-serif; }
.ba-pn b { font: 500 16px/22px Roboto, sans-serif; }
@media (max-width: 960px) { .ba-det-grid, .ba-det-cols { grid-template-columns: 1fr; } .ba-det-fig svg { height: 300px; } }
@media (max-width: 600px) { .ba-det-txt h1 { font-size: 32px; line-height: 40px; } .ba-pager { grid-template-columns: 1fr; } .ba-pn.is-next { text-align: left; } .ba-det-fig { padding: 20px; } }

/* ---------- Exemplos animados (cada ilustração mostra a experiência acontecendo) ---------- */
.ba-fig svg g, .ba-fig svg rect, .ba-fig svg circle, .ba-fig svg text, .ba-fig svg path,
.ba-swap-art svg g, .ba-swap-art svg rect, .ba-swap-art svg circle, .ba-swap-art svg text, .ba-swap-art svg path { transform-box: fill-box; transform-origin: center; }
.ba-cd-rest { opacity: 0; }
.ba-an-popout, .ba-an-mid { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ba-an-fade { animation: ba-fade 6s ease-in-out infinite; }
  .ba-an-pop { animation: ba-pop 6s cubic-bezier(.2,.8,.2,1) infinite; }
  .ba-an-pre { animation: ba-pre 7s ease-in-out infinite; }
  .ba-cd { animation: ba-cd 7s steps(1, end) infinite; }
  .ba-an-scroll { animation: ba-scroll 7s ease-in-out infinite; }
  .ba-an-scroll-d { animation: ba-scroll-d 7s ease-in-out infinite; }
  .ba-an-flash { animation: ba-flash .9s steps(1, end) infinite; }
  .ba-an-blink { animation: ba-blink .45s steps(1, end) infinite; }
  .ba-an-blink2 { animation: ba-blink .45s steps(1, end) -.22s infinite; }
  .ba-an-onda { animation: ba-onda 1s ease-in-out infinite; }
  .ba-an-onda2 { animation: ba-onda 1s ease-in-out .25s infinite; }
  .ba-an-prog { transform-origin: left center; animation: ba-prog 6s linear infinite; }
  .ba-an-prog-lento { transform-origin: left center; animation: ba-prog 9s linear infinite; }
  .ba-an-hl { animation: ba-hl 3s ease-in-out infinite; }
  .ba-an-d2 { animation-delay: .5s; }
  .ba-an-d3 { animation-delay: 1s; }
  .ba-an-rotulo { animation: ba-rotulo 3s ease-in-out infinite; }
  .ba-an-tap { animation: ba-tap 7s ease-out infinite; }
  .ba-an-tap-dot { animation: ba-tapdot 7s ease-out infinite; }
  .ba-an-late { animation: ba-late 7s ease-in-out infinite; }
  .ba-an-sobe2 { animation: ba-late-sobe 7s cubic-bezier(.2,.8,.2,1) infinite; }
  .ba-an-sobe { animation: ba-sobe 6s cubic-bezier(.2,.8,.2,1) infinite; }
  .ba-an-popout { animation: ba-popout 7s ease-in-out infinite; }
  .ba-an-meio { transform-origin: left center; animation: ba-meio 8s linear infinite; }
  .ba-an-mid { animation: ba-mid 8s ease-in-out infinite; }
  .ba-an-seta { animation: ba-seta 1.2s ease-in-out infinite; }
}
@keyframes ba-fade { 0%, 4% { opacity: 0; } 12%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ba-pop { 0%, 5% { opacity: 0; transform: scale(.85) translateY(12px); } 14%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.95); } }
@keyframes ba-pre { 0%, 70% { opacity: 1; } 78%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ba-cd { 0% { opacity: 1; } 14.28%, 100% { opacity: 0; } }
@keyframes ba-scroll { 0%, 8% { transform: translateY(0); } 48%, 58% { transform: translateY(-100px); } 96%, 100% { transform: translateY(0); } }
@keyframes ba-scroll-d { 0%, 8% { transform: translateY(0); } 48%, 58% { transform: translateY(-70px); } 96%, 100% { transform: translateY(0); } }
@keyframes ba-flash { 0% { fill: #ff4081; } 25% { fill: #00e5ff; } 50% { fill: #7c4dff; } 75% { fill: #00a152; } }
@keyframes ba-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ba-onda { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes ba-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ba-hl { 0%, 100% { opacity: 1; filter: none; } 40% { opacity: .55; } }
@keyframes ba-rotulo { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ba-tap { 0%, 8% { opacity: 0; transform: scale(.3); } 12% { opacity: .5; transform: scale(.6); } 22%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ba-tapdot { 0%, 8% { opacity: 0; } 11%, 18% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes ba-late { 0%, 22% { opacity: 0; } 28%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes ba-late-sobe { 0%, 22% { opacity: 0; transform: translateY(60px); } 30%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes ba-sobe { 0%, 22% { opacity: 0; transform: translateY(40px); } 32%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes ba-popout { 0%, 24% { opacity: 0; transform: translateY(14px) scale(.9); } 32%, 66% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes ba-meio { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes ba-mid { 0%, 40% { opacity: 0; } 46%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ba-seta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Entenda em 1 minuto: explicação, pode / não pode e caso prático ---------- */
.ba-did { margin: 48px 0 8px; display: grid; gap: 20px; }
.ba-did h2 { margin: 0; font: 500 28px/1.25 Roboto, Arial, sans-serif; color: #1f1f1f; letter-spacing: -.01em; }
.ba-did-txt { max-width: 860px; }
.ba-did-txt p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: #1f1f1f; }
.ba-did-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba-did-ok, .ba-did-no { border-radius: 24px; padding: 24px 26px; }
.ba-did-ok { background: #e6f4ea; } .ba-did-no { background: #fce8e6; }
.ba-did-pn h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 20px/1.3 Roboto, Arial, sans-serif; }
.ba-did-ok h3 { color: #0d652d; } .ba-did-no h3 { color: #a50e0e; }
.ba-did-ic { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 16px Roboto, sans-serif; flex: none; }
.ba-did-ok .ba-did-ic { background: #c4eed0; color: #0d652d; } .ba-did-no .ba-did-ic { background: #ffdad6; color: #a50e0e; }
.ba-did-pn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ba-did-pn li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: #1f1f1f; }
.ba-did-ok li::before, .ba-did-no li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ba-did-ok li::before { content: "✓"; color: #137333; } .ba-did-no li::before { content: "✕"; color: #c5221f; }
.ba-did-caso { display: flex; gap: 16px; align-items: flex-start; background: #f0f4f9; border-radius: 24px; padding: 24px 26px; }
.ba-did-caso .ba-did-ic { background: #d3e3fd; color: #0b57d0; font-family: Georgia, serif; font-style: italic; }
.ba-did-caso h3 { margin: 2px 0 6px; font: 500 18px/1.3 Roboto, Arial, sans-serif; color: #1f1f1f; }
.ba-did-caso p { margin: 0; font-size: 16px; line-height: 1.65; color: #1f1f1f; }
@media (max-width: 760px) { .ba-did-pn { grid-template-columns: 1fr; } .ba-did h2 { font-size: 24px; } .ba-did-txt p { font-size: 16px; } }

/* ---------- Continue lendo: 4 experiências sugeridas ---------- */
.ba-mais { margin: 56px 0 24px; }
.ba-mais h2 { margin: 0 0 20px; font: 500 28px/1.25 Roboto, Arial, sans-serif; color: #1f1f1f; }
.ba-mais-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ba-mais-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #f0f4f9; color: #1f1f1f; text-decoration: none; transition: background .15s; }
.ba-mais-card:hover { background: #e9eef6; }
.ba-mais-card .ba-fig { padding: 18px; border-bottom: 0; }
.ba-mais-card .ba-fig svg { height: 170px; }
.ba-mais-txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.ba-mais-txt b { font: 500 17px/1.3 Roboto, sans-serif; }
.ba-mais-txt span { font-size: 14px; line-height: 1.5; color: #444746; }
@media (max-width: 980px) { .ba-mais-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ba-mais-grid { grid-template-columns: 1fr; } }

/* Pode / Não pode com ilustração do jeito certo e do errado */
.ba-did-fig { margin: 0 0 16px; background: #fff; border-radius: 18px; padding: 16px 12px 10px; display: grid; justify-items: center; gap: 6px; }
.ba-did-fig svg { width: 100%; max-width: 300px; height: 190px; display: block; }
.ba-did-fig figcaption { font-size: 13px; font-weight: 500; line-height: 1.2; padding: 4px 10px; border-radius: 999px; }
.ba-did-ok .ba-did-fig figcaption { background: #c4eed0; color: #0d652d; }
.ba-did-no .ba-did-fig figcaption { background: #ffdad6; color: #8c1d18; }

/* Acabamento: ilustrações retas e centradas, mais respiro nas páginas de padrão */
.ba-fig svg > rect:first-child[opacity], .ba-did-fig svg > rect:first-child[opacity], .ba-swap-art svg > rect:first-child[opacity] { display: none; }
.ba-det-grid { gap: 64px !important; align-items: center; padding-top: 16px; }
.ba-det-fig { padding: 48px !important; border-radius: 32px !important; }
.ba-det-txt h1 { margin: 12px 0 12px !important; }
.ba-det-lead { margin: 20px 0 28px !important; }
.ba-facts { gap: 16px !important; } .ba-facts > div { padding: 22px 26px !important; }
.ba-did { margin: 96px 0 24px !important; gap: 32px !important; }
.ba-did-txt { max-width: 900px; } .ba-did-txt p { margin-bottom: 20px !important; }
.ba-did-pn { gap: 24px !important; }
.ba-did-ok, .ba-did-no { padding: 32px 36px !important; border-radius: 28px !important; }
.ba-did-pn h3 { margin-bottom: 20px !important; }
.ba-did-pn ul { gap: 14px !important; }
.ba-did-fig { margin-bottom: 24px !important; padding: 28px 20px 16px !important; border-radius: 20px !important; gap: 12px !important; }
.ba-did-fig svg { height: 220px !important; max-width: 340px !important; margin: 0 auto; }
.ba-did-caso { padding: 32px 36px !important; border-radius: 28px !important; gap: 20px !important; }
.ba-det-cols { margin-top: 64px !important; gap: 24px !important; }
.ba-det-cols section { padding: 32px !important; }
.ba-pager { margin-top: 64px !important; }
@media (max-width: 760px) { .ba-det-fig { padding: 24px !important; } .ba-did { margin-top: 56px !important; } .ba-did-ok, .ba-did-no, .ba-did-caso { padding: 24px !important; } }
.ba-det-fig.ba-fig svg { height: 420px !important; width: 100%; }
@media (max-width: 760px) { .ba-det-fig.ba-fig svg { height: 300px !important; } }

/* Animações das ilustrações: a origem da transformação é a própria peça (não o canto do desenho).
   Sem isso a barra de progresso do vídeo e os toques crescem a partir da borda e "estouram" para fora. */
svg [class*="ba-an-"] { transform-box: fill-box; }
svg .ba-an-pop, svg .ba-an-tap, svg .ba-an-tap-dot, svg .ba-an-popout { transform-origin: center; }

/* ---- Explorador dos 23 padrões (Como funciona): grupos em abas, lista à esquerda, ficha ilustrada à direita ---- */
.bx { --e-in: cubic-bezier(.05, .7, .1, 1); --e-std: cubic-bezier(.2, 0, 0, 1); }
.bx-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.bx-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.bx-why li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.bx-why b { font: 400 44px/1 "Google Sans Flex", Roboto, Arial, sans-serif; letter-spacing: -1px; text-align: right; }
.bx-why b.is-blue { color: #1a73e8; } .bx-why b.is-yellow { color: #e37400; } .bx-why b.is-red { color: #d93025; }
.bx-why span { font-size: 15px; line-height: 1.45; color: #444746; }
.bx-exp { margin-top: 40px; }
.bx-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #f0f4f9; }
.bx-tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #444746; font: 500 15px "Google Sans Flex", Roboto, Arial, sans-serif; cursor: pointer; transition: background .3s var(--e-std), color .3s var(--e-std), box-shadow .3s var(--e-std); scroll-margin-top: 120px; }
.bx-tab span { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: #fff; color: #1f1f1f; font-size: 12.5px; line-height: 22px; text-align: center; }
.bx-tab:hover { color: #1f1f1f; }
.bx-tab.is-on { background: #fff; color: var(--c); box-shadow: 0 1px 2px rgba(60, 64, 67, .14), 0 2px 8px rgba(60, 64, 67, .08); }
.bx-tab.is-on span { background: var(--c); color: #fff; }
.bx-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }
.bx-gdesc { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #5e5e5e; }
.bx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bx-it { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; color: #444746; font: 400 15px/1.3 Roboto, Arial, sans-serif; transition: background .25s var(--e-std), color .25s var(--e-std), transform .25s var(--e-std); }
.bx-it:hover { background: #f0f4f9; color: #1f1f1f; }
.bx-it:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }
.bx-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #c4c7c5; font: 500 12.5px "Google Sans Flex", Roboto, Arial, sans-serif; color: #444746; transition: background .25s, border-color .25s, color .25s, transform .35s var(--e-in); }
.bx-it.is-on { background: #fff; color: #1f1f1f; box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 4px 14px rgba(60, 64, 67, .08); }
.bx-it.is-on .bx-n { background: var(--c); border-color: #1f1f1f; color: #fff; transform: scale(1.08); }
.bx-it.is-on .bx-nm { font-weight: 500; }
.bx-stage { position: relative; min-height: 440px; }
.bx-det { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; align-items: start; padding: 24px; border-radius: 32px; background: #fff; box-shadow: 0 1px 3px rgba(60, 64, 67, .1), 0 18px 48px rgba(60, 64, 67, .08); }
.bx-det.is-on { animation: bx-entra .55s var(--e-in) both; }
.bx-fig { border: 0; border-radius: 24px; padding: 24px; background: #f0f4f9; }
.bx-fig.is-desktop { background: #e8f0fe; } .bx-fig.is-celular { background: #e6f4ea; } .bx-fig.is-video { background: #fef7e0; } .bx-fig.is-apps { background: #fce8e6; }
.bx-fig svg { height: 300px; }
.bx-det.is-on .bx-fig svg { animation: bx-art .7s .05s var(--e-in) both; }
.bx-num { margin: 4px 0 0; font: 500 12.5px Roboto, Arial, sans-serif; color: #5e5e5e; letter-spacing: .02em; }
.bx .bx-det h4 { margin: 6px 0 10px; font: 400 26px/1.2 "Google Sans Flex", Roboto, Arial, sans-serif; }
.bx-oque { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #1f1f1f; }
.bx-dl { margin: 0; display: grid; gap: 10px; }
.bx-row { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: #f8fafd; }
.bx-row dt { font: 500 12.5px Roboto, Arial, sans-serif; letter-spacing: .02em; color: #5e5e5e; }
.bx-row dd { margin: 0; font-size: 15px; line-height: 1.5; color: #1f1f1f; }
.bx-row.is-lim { background: #fce8e6; } .bx-row.is-lim dt { color: #b3261e; }
.bx-row.is-dica { background: #e6f4ea; } .bx-row.is-dica dt { color: #146c2e; }
.bx-det.is-on .bx-row, .bx-det.is-on .bx-exc { animation: bx-sobe .5s var(--e-in) both; }
.bx-det.is-on .bx-row.is-lim { animation-delay: .12s; } .bx-det.is-on .bx-row.is-dica { animation-delay: .2s; } .bx-det.is-on .bx-exc { animation-delay: .28s; }
.bx-exc { margin-top: 10px; border-radius: 16px; background: #f0f4f9; }
.bx-exc summary { list-style: none; cursor: pointer; padding: 12px 14px; font: 500 14px Roboto, Arial, sans-serif; color: #444746; display: flex; align-items: center; justify-content: space-between; }
.bx-exc summary::-webkit-details-marker { display: none; }
.bx-exc summary::after { content: "+"; font-size: 20px; line-height: 1; color: #0b57d0; transition: transform .3s var(--e-std); }
.bx-exc[open] summary::after { transform: rotate(45deg); }
.bx-exc p { margin: 0; padding: 0 14px 14px; font-size: 14.5px; line-height: 1.55; color: #444746; }
.bx-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; height: 40px; padding: 0 18px; border-radius: 20px; background: #0b57d0; color: #fff; font: 500 14px Roboto, Arial, sans-serif; text-decoration: none; transition: box-shadow .2s, background .2s; }
.bx-more:hover { background: #0842a0; box-shadow: 0 2px 8px rgba(11, 87, 208, .3); }
.bx-more span { transition: transform .3s var(--e-in); } .bx-more:hover span { transform: translateX(4px); }

.bx-dens { border: 0; background: #f8fafd; }
.bx-lims { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.bx-lims span { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; color: #444746; box-shadow: 0 1px 2px rgba(60, 64, 67, .1); }
.bx-lims b { font: 400 24px/1 "Google Sans Flex", Roboto, Arial, sans-serif; color: #1a73e8; }

.bx-flow { margin-top: 72px; scroll-margin-top: 120px; }
.bx-trilha { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.bx-trilha::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; border-top: 2px dashed #1f1f1f; opacity: .55; }
.bx-trilha li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 12px; }
.bx-ic { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2.5px solid #1f1f1f; transition: transform .35s var(--e-in); }
.bx-trilha li:hover .bx-ic { transform: translateY(-4px) rotate(-4deg); }
.bx-ic svg { width: 36px; height: 36px; }
.bx-trilha b { font: 500 17px "Google Sans Flex", Roboto, Arial, sans-serif; margin-top: 6px; }
.bx-tx { font-size: 14px; line-height: 1.5; color: #444746; }
.bx-trilha li:nth-child(5) .bx-ic { background: #ea4335; } .bx-trilha li:nth-child(5) .bx-ic path { fill: #fff; }

.bx-alt { margin-top: 72px; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: center; scroll-margin-top: 120px; }
.bx-alt-nav { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.bx-alt-nav button { width: 100%; text-align: left; padding: 11px 16px; border: 0; border-radius: 999px; background: transparent; color: #444746; font: 400 15px Roboto, Arial, sans-serif; cursor: pointer; transition: background .25s var(--e-std), color .25s var(--e-std); }
.bx-alt-nav button:hover { background: #f0f4f9; color: #1f1f1f; }
.bx-alt-nav button.is-on { background: #e6f4ea; color: #0d652d; font-weight: 500; }
.bx-alt-stage { padding: 28px; border-radius: 32px; background: #fff; box-shadow: 0 1px 3px rgba(60, 64, 67, .1), 0 18px 48px rgba(60, 64, 67, .08); }
.bx-sw { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 12px; }
.bx-sw figure { margin: 0; display: grid; gap: 10px; justify-items: center; padding: 20px 12px 14px; border-radius: 24px; }
.bx-sw .is-evite { background: #fce8e6; } .bx-sw .is-faca { background: #e6f4ea; }
.bx-sw figure svg { width: 100%; height: 230px; }
.bx-sw figcaption { display: inline-flex; align-items: center; gap: 8px; font: 500 14px Roboto, Arial, sans-serif; color: #1f1f1f; text-align: center; }
.bx-sw figcaption i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; border: 2px solid #1f1f1f; flex: none; }
.bx-sw .is-evite i { background: #ea4335; } .bx-sw .is-faca i { background: #34a853; }
.bx-sw-arrow { width: 64px; height: 40px; }
.bx-sw-arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bx-sw > p { grid-column: 1 / -1; margin: 6px 4px 0; font-size: 16px; line-height: 1.55; color: #1f1f1f; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .bx-sw.is-on .is-evite { animation: bx-entra .55s var(--e-in) both; }
  .bx-sw.is-on .bx-sw-arrow path { stroke-dashoffset: 1; animation: bx-traco .5s .35s var(--e-std) forwards; }
  .bx-sw.is-on .is-faca { animation: bx-faca .6s .55s var(--e-in) both; }
  .bx-sw.is-on > p { animation: bx-sobe .5s .7s var(--e-in) both; }
}
@keyframes bx-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bx-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bx-art { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bx-traco { to { stroke-dashoffset: 0; } }
@keyframes bx-faca { from { opacity: 0; transform: translateX(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bx *, .bx *::before { animation: none !important; } }
@media (max-width: 1000px) {
  .bx-hero { grid-template-columns: 1fr; gap: 28px; }
  .bx-body { grid-template-columns: 1fr; }
  .bx-list { grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .bx-list li { scroll-snap-align: start; }
  .bx-det { grid-template-columns: 1fr; padding: 16px; border-radius: 24px; }
  .bx-fig svg { height: 220px; }
  .bx-trilha { grid-template-columns: 1fr; gap: 18px; }
  .bx-trilha::before { left: 31px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 2px dashed #1f1f1f; }
  .bx-trilha li { display: grid; grid-template-columns: 64px 1fr; text-align: left; align-items: start; column-gap: 16px; padding: 0; }
  .bx-trilha li .bx-ic { grid-row: span 2; } .bx-trilha b { margin-top: 8px; }
  .bx-alt { grid-template-columns: 1fr; }
  .bx-alt-nav { display: flex; overflow-x: auto; gap: 6px; } .bx-alt-nav button { white-space: nowrap; background: #f0f4f9; }
  .bx-alt-stage { padding: 14px; border-radius: 24px; }
  .bx-sw { grid-template-columns: 1fr; } .bx-sw-arrow { transform: rotate(90deg); justify-self: center; } .bx-sw figure svg { height: 190px; }
  .bx-why li { grid-template-columns: 72px 1fr; } .bx-why b { font-size: 36px; }
  .bx-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; } .bx-tab { flex: none; }
}
.bx .bx-dl .bx-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; border: 0; }
.bx .bx-dl dt, .bx .bx-dl dd { width: auto; }
.bx-body > *, .bx-alt > *, .bx-hero > * { min-width: 0; }
@media (max-width: 1000px) { .bx-body, .bx-alt { grid-template-columns: minmax(0, 1fr); } }

/* ---- Movimento calmo (03/11/2026): onde há várias ilustrações juntas, cada uma fica parada num quadro
   que mostra o problema e só toca com o mouse em cima. ---- */
.ba-card .ba-fig svg *, .ba-did-fig svg *, .ba-swap-art svg * { animation-play-state: paused !important; animation-delay: -3s !important; }
.ba-card:hover svg *, .ba-did-fig:hover svg *, .ba-swap-art figure:hover svg * { animation-play-state: running !important; }
/* explorador e página de cada padrão: uma ilustração por vez, a demonstração toca sozinha */
/* topo dos padrões só com o texto (os números ficam no "Como o Google aplica os padrões") */
.bx-hero.is-so-texto { display: block; max-width: 760px; }