/* =============================================================================
 * bit.css — landing publica /bit (Bit, o pet virtual)
 *
 * Padrao: docs/design.md. Prefixo obrigatorio .bit-* (a pagina divide DOM com
 * menu/footer/widgets).
 *
 * PALETA COM SIGNIFICADO (§3.2) — e' a paleta ESTRITA do proprio pet
 * (docs/dori.md §17: tinta #10151a, ambar #ffc107, fogo #ff9800, zero cor nova)
 * + o verde-grama #4d9a45 do palco real (.dpet-stage) + o teal da marca:
 *   tinta  = o Bit (e o fundo do hero/CTA)
 *   ambar  = Parafusos / recompensa / energia
 *   fogo   = carinho / fome / coracao
 *   grama  = o mundinho dele (palco)
 *   teal   = estudo / acao da marca (via --primary)
 *
 * DEPENDENCIA CONSCIENTE: os sprites reusam app/views/partials/dori-pet-sprite.php
 * + as regras base de .dpet-* do dori-pet.css (carregado GLOBAL pelo head.php,
 * o widget da Dori existe em toda pagina). Os fills sao redeclarados aqui por
 * blindagem; o liga/desliga de expressao por sprite e' TODO local (.bit-sprite--*).
 * ========================================================================== */

.bit-pagina {
    --bit-ink: #10151a;
    --bit-ink-2: #1a222c;
    --bit-ambar: #ffc107;
    --bit-fogo: #ff9800;
    --bit-grama: #4d9a45;
}

/* --- base / ritmo ----------------------------------------------------------- */

.bit-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

.bit-sec {
    padding: 5rem 0;
}

@media (max-width: 640px) {
    .bit-sec { padding: 3.5rem 0; }
}

.bit-eyebrow {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .5rem;
}

.bit-h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .75rem;
    text-wrap: balance;
}

.bit-lead {
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    line-height: 1.65;
    color: var(--text-2);
    max-width: 42rem;
    margin: 0;
    text-wrap: pretty;
}

.bit-head-center { text-align: center; }
.bit-head-center .bit-lead { margin-inline: auto; }

/* --- revelacao no scroll (so' esconde se o JS estiver vivo) ------------------ */

.bit-js .bit-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-delay, 0s);
}

.bit-js .bit-rv.is-in {
    opacity: 1;
    transform: none;
}

/* --- botoes ------------------------------------------------------------------ */

.bit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1.75rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bit-btn--cheio {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--primary) 55%, transparent);
}

.bit-btn--cheio:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--primary) 65%, transparent); }

.bit-btn--fantasma {
    border: 1px solid rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .92);
}

.bit-btn--fantasma:hover { border-color: rgba(255, 255, 255, .7); transform: translateY(-2px); }

/* variante pra secao clara */
.bit-btn--borda {
    border: 1px solid var(--border-2);
    color: var(--primary);
}

.bit-btn--borda:hover { border-color: var(--primary); transform: translateY(-2px); }

@media (max-width: 640px) {
    .bit-hero .bit-btn,
    .bit-cta .bit-btn { width: 100%; }
}

/* =============================================================================
 * HERO — tinta do sprite, halos ambar/teal, pontilhado pixel (§3.3)
 * ========================================================================== */

.bit-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4.5rem;
    color: rgba(255, 255, 255, .92);
    background:
        radial-gradient(56rem 38rem at 84% 4%, rgba(255, 193, 7, .16), transparent 58%),
        radial-gradient(44rem 32rem at 6% 96%, rgba(13, 148, 136, .22), transparent 60%),
        linear-gradient(160deg, var(--bit-ink-2, #1a222c), var(--bit-ink, #10151a) 58%, #0a0e12);
}

/* pontilhado pixel por cima (retro, casa com o produto) */
.bit-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
}

.bit-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: center;
}

@media (max-width: 900px) {
    .bit-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

.bit-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid rgba(255, 193, 7, .38);
    border-radius: var(--radius-full, 9999px);
    background: rgba(255, 193, 7, .12);
    color: var(--bit-ambar, #ffc107);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 1.25rem;
}

.bit-hero h1 {
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.bit-grad {
    background: linear-gradient(92deg, var(--bit-ambar, #ffc107), var(--bit-fogo, #ff9800));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bit-hero__sub {
    font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
    max-width: 34rem;
    margin: 0 0 2rem;
    text-wrap: pretty;
}

.bit-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.bit-hero__nota {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
}

.bit-hero__nota svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--bit-ambar, #ffc107); }

/* --- o palco do hero (a moldura retro com a grama REAL do produto) ---------- */

.bit-palco {
    position: relative;
    max-width: 26rem;
    margin-inline: auto;
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .05);
    padding: .875rem;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
}

.bit-palco__hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.bit-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: var(--radius-full, 9999px);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
}

.bit-chip--ambar { background: rgba(255, 193, 7, .16); color: var(--bit-ambar, #ffc107); }
.bit-chip--fogo  { background: rgba(255, 152, 0, .16); color: var(--bit-fogo, #ff9800); }

/* a "grama" e' fiel ao .dpet-stage do produto (mesmo verde, mesmo grid) */
.bit-palco__tela {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    border-radius: .75rem;
    border: 2px solid rgba(0, 0, 0, .25);
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        var(--bit-grama, #4d9a45);
    overflow: hidden;
}

/* particulas pixel soltas na grama */
.bit-palco__tela i {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--bit-ambar, #ffc107);
    opacity: .8;
}

.bit-palco__tela i:nth-child(2) { background: var(--bit-fogo, #ff9800); }

.bit-palco__legenda {
    margin: .75rem 0 0;
    font-size: .8125rem;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

/* =============================================================================
 * SPRITES — reuso do partial real (dori-pet-sprite.php)
 * ========================================================================== */

.bit-sprite {
    display: inline-block;
    line-height: 0;
}

.bit-sprite .dpet-sprite {
    width: 100%;
    height: 100%;
    display: block;
}

/* blindagem: os fills canonicos do sprite (iguais ao dori-pet.css) */
.bit-sprite .dpet-sprite rect { fill: var(--bit-ink, #10151a); }
.bit-sprite .dpet-sprite .dpet-px-ambar { fill: var(--bit-ambar, #ffc107); }
.bit-sprite .dpet-sprite .dpet-px-fogo { fill: var(--bit-fogo, #ff9800); }

/* tamanhos */
.bit-sprite--hero { width: 9.5rem; height: 9.5rem; }
.bit-sprite--nivel { width: 6.5rem; height: 6.5rem; }
.bit-sprite--mini { width: 4.5rem; height: 4.5rem; }

/* expressoes ligadas POR AQUI (nao dependem do estado do painel).
 * Em repouso o Bit NAO tem boca (igual ao produto) — sorriso so' na reacao. */
.bit-sprite--feliz .dpet-olhos-caret { display: block; }
.bit-sprite--feliz .dpet-olhos-abertos { display: none; }
.bit-sprite--feliz .dpet-sorriso { display: block; }
.bit-sprite--chapeu .dpet-chapeu { display: block; }
.bit-sprite--chapeu .dpet-antena { display: none; }
.bit-sprite--oculos .dpet-oculos { display: block; }
.bit-sprite--laco .dpet-laco { display: block; }
.bit-sprite--foguete .dpet-foguete-capacete { display: block; }
.bit-sprite--foguete .dpet-antena { display: none; }
/* Lojinha v2: o Bit aspiracional da vitrine (coroa + capa de heroi) */
.bit-sprite--coroa .dpet-coroa { display: block; }
.bit-sprite--coroa .dpet-antena { display: none; }
.bit-sprite--capa .dpet-capa { display: block; }
.bit-sprite--super .dpet-antena { display: none; }
.bit-sprite--super .dpet-antena-dupla,
.bit-sprite--super .dpet-emblema,
.bit-sprite--super .dpet-sparks { display: block; }
.bit-sprite--filhote .dpet-set-n { display: none; }
.bit-sprite--filhote .dpet-set-f { display: block; }

/* vida: flutua (keyframe proprio, espelho do dpet-flutua), pisca e acena */
.bit-flutua { animation: bit-flutua 3s ease-in-out infinite; }

@keyframes bit-flutua {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1.5px) rotate(1.5deg); }
    50% { transform: translateY(-3px) rotate(0deg); }
    75% { transform: translateY(-1.5px) rotate(-1.5deg); }
}

.bit-vivo .dpet-olhos-fechados { display: block; opacity: 0; animation: bit-pisca-f 4.6s steps(1) infinite; }
.bit-vivo .dpet-olhos-abertos { animation: bit-pisca-a 4.6s steps(1) infinite; }

@keyframes bit-pisca-a {
    0%, 90.9% { opacity: 1; }
    91%, 96.9% { opacity: 0; }
    97%, 100% { opacity: 1; }
}

@keyframes bit-pisca-f {
    0%, 90.9% { opacity: 0; }
    91%, 96.9% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

.bit-vivo .dpet-arm-dir { animation: bit-aceno 7s ease-in-out infinite; }

@keyframes bit-aceno {
    0%, 82%, 94%, 100% { transform: none; }
    85% { transform: translateY(-2.5px) rotate(-18deg); }
    88% { transform: translateY(-2.5px) rotate(8deg); }
    91% { transform: translateY(-2.5px) rotate(-18deg); }
}

.bit-sprite--super .dpet-sparks rect { animation: bit-spark .9s steps(1) infinite; }

@keyframes bit-spark {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: .25; }
}

/* =============================================================================
 * SECOES CLARAS
 * ========================================================================== */

/* --- "o trabalho dele" — 3 cartas ------------------------------------------- */

.bit-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (max-width: 820px) {
    .bit-cards { grid-template-columns: minmax(0, 1fr); }
}

.bit-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--c, var(--primary)) 45%, var(--border));
}

.bit-card__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius, .5rem);
    margin-bottom: 1rem;
    color: var(--c, var(--primary));
    background: color-mix(in srgb, var(--c, var(--primary)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--primary)) 28%, transparent);
}

.bit-card__ic svg { width: 1.375rem; height: 1.375rem; }

.bit-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .5rem;
}

.bit-card p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* --- o ciclo — 4 passos ------------------------------------------------------ */

.bit-passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
    counter-reset: bit-passo;
}

@media (max-width: 980px) {
    .bit-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .bit-passos { grid-template-columns: minmax(0, 1fr); }
}

.bit-passo {
    position: relative;
    padding: 1.375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
}

.bit-passo::before {
    counter-increment: bit-passo;
    content: counter(bit-passo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--bit-ink, #10151a);
    background: linear-gradient(135deg, var(--bit-ambar, #ffc107), var(--bit-fogo, #ff9800));
    margin-bottom: .875rem;
}

.bit-passo h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .375rem;
}

.bit-passo p {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

.bit-moeda {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--warning-text, #78350f);
    background: var(--warning-bg, #fde68a);
}

/* --- niveis — 3 palquinhos --------------------------------------------------- */

.bit-niveis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

@media (max-width: 820px) {
    .bit-niveis { grid-template-columns: minmax(0, 1fr); }
}

.bit-nivel {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
}

.bit-nivel__palco {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 9rem;
    margin-bottom: 1rem;
    border-radius: .625rem;
    border: 2px solid color-mix(in srgb, var(--bit-grama, #4d9a45) 45%, var(--border));
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        var(--bit-grama, #4d9a45);
    padding-bottom: .875rem;
}

.bit-nivel__tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: .25rem;
}

/* A trilha das eras que vem depois das 3 ilustradas (fases 51+) */
.bit-trilha {
    text-align: center;
    color: var(--muted);
    max-width: 40rem;
    margin: 2rem auto 0;
}
.bit-trilha b { color: var(--text); }

.bit-nivel h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .375rem;
}

.bit-nivel p {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

/* --- quintal — a flor que so' o estudo rega ---------------------------------- */

.bit-quintal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-top: 2.5rem;
}

@media (max-width: 900px) {
    .bit-quintal { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.bit-quintal__cena {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1.5rem 1.75rem;
    border-radius: var(--radius-lg, .75rem);
    border: 2px solid color-mix(in srgb, var(--bit-grama, #4d9a45) 45%, var(--border));
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        var(--bit-grama, #4d9a45);
}

.bit-flor {
    text-align: center;
}

.bit-flor svg {
    width: 4.25rem;
    height: 4.25rem;
    display: block;
    margin-inline: auto;
}

.bit-flor figcaption {
    margin-top: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.bit-flor .bit-px-tinta { fill: var(--bit-ink, #10151a); }
.bit-flor .bit-px-ambar { fill: var(--bit-ambar, #ffc107); }
.bit-flor .bit-px-fogo { fill: var(--bit-fogo, #ff9800); }
.bit-flor .bit-px-terra { fill: #6b4b2a; } /* a terra do canteiro real */

.bit-flor--pronta svg { animation: bit-flor-pulsa 1.6s ease-in-out infinite; }

@keyframes bit-flor-pulsa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.bit-quintal__texto h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.25rem 0 .375rem;
}

.bit-quintal__texto h3:first-child { margin-top: 0; }

.bit-quintal__texto p {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

.bit-regra {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--bit-fogo, #ff9800);
    border-radius: 0 var(--radius, .5rem) var(--radius, .5rem) 0;
    background: color-mix(in srgb, var(--bit-fogo, #ff9800) 9%, var(--surface));
    font-size: .9375rem;
    color: var(--text-2);
}

/* --- lojinha ----------------------------------------------------------------- */

.bit-loja {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: center;
    margin-top: 2.5rem;
}

@media (max-width: 900px) {
    .bit-loja { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* fundo = a grama do produto: o sprite tinta contrasta nos 2 temas
   (sobre --surface-2 escura do dark ele sumia) */
.bit-loja__vitrine {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem 1rem;
    border: 2px solid color-mix(in srgb, var(--bit-grama, #4d9a45) 45%, var(--border));
    border-radius: var(--radius-lg, .75rem);
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        var(--bit-grama, #4d9a45);
}

.bit-loja__itens {
    display: grid;
    gap: .625rem;
    margin-top: 1.25rem;
}

.bit-loja__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, .5rem);
    background: var(--surface);
    font-size: .9375rem;
    color: var(--text-2);
}

.bit-loja__item strong { color: var(--text); font-weight: 700; }

/* =============================================================================
 * FAQ
 * ========================================================================== */

.bit-faq {
    max-width: 46rem;
    margin: 2.5rem auto 0;
    display: grid;
    gap: .625rem;
}

.bit-faq details {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, .75rem);
    background: var(--surface);
    overflow: hidden;
}

.bit-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    list-style: none;
}

.bit-faq summary::-webkit-details-marker { display: none; }

.bit-faq summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--primary);
    transition: transform .25s ease;
}

.bit-faq details[open] summary::after { transform: rotate(45deg); }

.bit-faq .bit-faq__corpo {
    padding: 0 1.375rem 1.25rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--muted);
}

.bit-faq .bit-faq__corpo p { margin: 0 0 .625rem; }
.bit-faq .bit-faq__corpo p:last-child { margin-bottom: 0; }

/* =============================================================================
 * CTA FINAL — tinta de novo
 * ========================================================================== */

.bit-cta {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0;
    text-align: center;
    color: rgba(255, 255, 255, .92);
    background:
        radial-gradient(48rem 30rem at 50% 120%, rgba(255, 152, 0, .18), transparent 60%),
        radial-gradient(40rem 26rem at 12% -10%, rgba(13, 148, 136, .2), transparent 58%),
        linear-gradient(200deg, var(--bit-ink-2, #1a222c), var(--bit-ink, #10151a) 60%);
}

.bit-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
}

.bit-cta__inner { position: relative; }

/* palquinho redondo de grama: sem ele o sprite tinta some no fundo escuro */
.bit-cta .bit-sprite {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    background:
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, .05) 7px, rgba(0, 0, 0, .05) 9px),
        var(--bit-grama, #4d9a45);
}

.bit-cta h2 {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: #fff;
    margin: 0 0 .75rem;
    text-wrap: balance;
}

.bit-cta p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .72);
    max-width: 34rem;
    margin: 0 auto 2rem;
    text-wrap: pretty;
}

.bit-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

/* =============================================================================
 * movimento morre pra quem pediu — estado final legivel
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bit-flutua,
    .bit-flor--pronta svg,
    .bit-vivo .dpet-olhos-fechados,
    .bit-vivo .dpet-olhos-abertos,
    .bit-vivo .dpet-arm-dir,
    .bit-sprite--super .dpet-sparks rect { animation: none; }

    .bit-vivo .dpet-olhos-fechados { display: none; }

    .bit-js .bit-rv { opacity: 1; transform: none; transition: none; }

    .bit-btn:hover,
    .bit-card:hover { transform: none; }
}