/* refine.css — pente fino de layout da LP (2026-09-29)
   Hero mais largo e responsivo, ritmo de seções mais compacto, gráfico de tempo,
   mosaico de famílias, comparativo, mock de celular, pré-oferta e oferta. */

/* —— Ritmo de seções —— */
@media (min-width: 768px) { .section { padding-top: 5rem; padding-bottom: 5rem; } }
.section-compact { padding-top: 2.75rem; padding-bottom: 2.75rem; }
@media (min-width: 768px) { .section-compact { padding-top: 4rem; padding-bottom: 4rem; } }
.rf-h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin: 0; }
.rf-kicker { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent); border: 1px solid rgba(255,193,7,.35); background: rgba(255,193,7,.07); padding: 6px 10px; border-radius: 999px; }
.rf-lead { margin: var(--space-4) 0 0; max-width: 56ch; font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-secondary); }

/* —— Hero: mais largo, título proporcional, CTA sem quebra —— */
.hero .container-x { max-width: 1320px; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.18fr 1fr; gap: 3.5rem; }
}
.h-hero { font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem); line-height: 1.06; max-width: 22ch; }
.hero-cta-wrap { max-width: 540px; min-height: 0; }
.hero .qo-hero-flag { max-width: 540px; }
@media (min-width: 640px) {
  .hero .btn-xl { white-space: nowrap; width: auto !important; min-width: 340px; padding-left: 2rem; padding-right: 2rem; }
}
.hero-stats { max-width: 540px; }
@media (max-width: 1023px) {
  .hero-grid > div:last-child { max-width: 640px; }
}

/* —— Proposta: 2 colunas + gráfico de tempo (decorativo, sem clique) —— */
.rf-split { display: grid; gap: 2rem; max-width: 1140px; }
@media (min-width: 960px) { .rf-split { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; } }
.rf-copy { margin-top: var(--space-6); display: grid; gap: var(--space-4); font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-secondary); max-width: 58ch; }
.rf-copy p { margin: 0; }
.rf-punch { margin: var(--space-6) 0 0; font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text-primary); }
.rf-time { margin: 0; padding: 26px; border-radius: 18px; background: linear-gradient(180deg, #141414, #0d0d0d);
  border: 1px solid var(--color-hairline); box-shadow: 0 30px 60px -35px rgba(0,0,0,.9); }
.rf-time-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 18px; }
.rf-bar-row + .rf-bar-row { margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,.08); }
.rf-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--color-text-secondary); margin-bottom: 8px; }
.rf-bar-label b { font-size: 20px; color: #FF4D5E; letter-spacing: -.01em; white-space: nowrap; }
.rf-bar-label b.is-fast { color: #4ADE80; }
.rf-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
.rf-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; }
.rf-fill.is-slow { background: repeating-linear-gradient(45deg, #E11D2E 0 10px, #B3121F 10px 20px); }
.rf-fill.is-fast { background: linear-gradient(90deg, #16A34A, #4ADE80); }
.rf-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rf-steps li { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary);
  border: 1px solid rgba(255,255,255,.08); padding: 4px 8px; border-radius: 6px; }
.rf-time-foot { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25);
  font-size: 15px; color: var(--color-text-secondary); }
.rf-time-foot b { color: #4ADE80; font-size: 18px; margin-right: 4px; }

/* —— Mosaico de famílias: render em fundo claro, legenda abaixo, lupa (lightbox real) —— */
.rf-mosaic { gap: 10px; }
.rf-tile { aspect-ratio: auto; display: flex; flex-direction: column; background: #151515; cursor: zoom-in; }
.rf-tile picture { display: block; aspect-ratio: 1; background: #fff; }
.rf-tile img { padding: 6px; background: #fff; object-fit: contain; }
.rf-tile figcaption { position: static; background: none; padding: 8px 6px; font-size: 10px; line-height: 1.3; color: var(--color-text-secondary); }
.rf-zoom { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,10,10,.72); color: #fff; opacity: .85; transition: opacity .15s; pointer-events: none; }
.rf-tile:hover .rf-zoom { opacity: 1; }
@media (max-width: 479px) { .familias-mosaic.familias-3col.rf-mosaic { grid-template-columns: repeat(3, 1fr); gap: 8px; } .rf-tile figcaption { font-size: 9px; letter-spacing: .04em; } }
.catalog-panel { padding: var(--space-8) 0 var(--space-12); }

/* —— Não é curso: topo em 2 colunas + comparativo sem texto quebrado —— */
@media (min-width: 768px) { .not-a-course { padding: 4.5rem 0; } }
.rf-nac-grid { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .rf-nac-grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: end; } }
.rf-nac-side { padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 40px -28px rgba(0,0,0,.35); }
.rf-nac-side li { font-size: var(--text-base) !important; }
.rf-nac-punch { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed rgba(0,0,0,.14); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.015em; color: #0a0a0a; }
.compare { margin-top: 2.5rem; }
@media (min-width: 480px) {
  .compare-card li { grid-template-columns: 112px 1fr; gap: 14px; align-items: baseline; }
}
.compare-card li .lab { white-space: nowrap; }
.compare-card li > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* —— Mock de celular com o print do WhatsApp —— */
.rf-phone-wrap { display: flex; justify-content: center; }
.rf-phone { position: relative; width: 300px; max-width: 82vw; aspect-ratio: 9 / 18.5; padding: 12px; border-radius: 46px;
  background: linear-gradient(145deg, #2a2a2a, #0c0c0c); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px #050505, 0 40px 80px -35px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06); }
.rf-phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 999px; background: #000; z-index: 2; }
.rf-phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; background: #0b141a; }
.rf-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 10px; font-size: 12px; font-weight: 600; color: #e9edef; background: #1f2c33; }
.rf-phone-icons { display: inline-flex; gap: 4px; }
.rf-phone-icons i { display: block; width: 14px; height: 8px; border-radius: 2px; background: rgba(233,237,239,.8); }
.rf-phone-icons i:first-child { width: 10px; } .rf-phone-icons i:last-child { width: 18px; }
.rf-phone-screen picture, .rf-phone-screen img { display: block; width: 100%; height: auto; }
.rf-phone-fill { flex: 1; background: #0b141a radial-gradient(circle at 20% 30%, rgba(255,255,255,.03) 0 2px, transparent 3px) 0 0 / 26px 26px; }
.rf-phone-bar { padding: 10px 12px 18px; background: #0b141a; }
.rf-phone-bar span { display: block; height: 34px; border-radius: 999px; background: #1f2c33; }
.whatsapp-row { align-items: center; }
@media (min-width: 1024px) { .whatsapp-row { grid-template-columns: 340px 1fr; gap: 4rem; } }

/* —— Pré-oferta: pergunta + checklist interativo —— */
.rf-momento { background: var(--color-background-alt); }
.rf-momento-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .rf-momento-grid { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; } }
.rf-paths { display: flex; align-items: center; gap: 10px; margin-top: 1.5rem; flex-wrap: wrap; }
.rf-path { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid; min-width: 130px; }
.rf-path b { font-size: 14px; color: #fff; }
.rf-path span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.rf-path.is-pro { border-color: rgba(225,29,46,.55); background: rgba(225,29,46,.08); } .rf-path.is-pro span { color: #FF4D5E; }
.rf-path.is-new { border-color: rgba(255,107,0,.55); background: rgba(255,107,0,.08); } .rf-path.is-new span { color: #FF8A33; }
.rf-path-or { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .12em; }
.rf-quiz { margin: 0; max-width: none; }
.rf-quiz label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 12px; margin: 0 -12px; border-radius: 10px; transition: background .15s; }
.rf-quiz label:hover { background: rgba(255,255,255,.04); }
.rf-quiz input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rf-quiz .qo-box { position: relative; transition: background .15s, border-color .15s; }
.rf-quiz input:checked + .qo-box { background: #16A34A; border-color: #16A34A; }
.rf-quiz input:checked + .qo-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.rf-quiz input:focus-visible + .qo-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rf-quiz ul { gap: 2px; }
.qo-verdict.is-pro { color: #fff; } .qo-verdict.is-pro b { color: #FF4D5E; }
.qo-verdict.is-new { color: #fff; } .qo-verdict.is-new b { color: #FF8A33; }
.rf-quiz-go { display: inline-flex; margin-top: 14px; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.rf-quiz-go:hover { background: rgba(255,255,255,.14); }

/* —— Oferta: ícones, destaque do caminho escolhido —— */
.rf-oferta .qo-grid { max-width: 1000px; }
.rf-card-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; }
.is-pro .rf-card-ic { background: rgba(225,29,46,.14); color: #FF4D5E; border: 1px solid rgba(225,29,46,.35); }
.is-new .rf-card-ic { background: rgba(255,107,0,.14); color: #FF8A33; border: 1px solid rgba(255,107,0,.35); }
.qo-card { transition: transform .2s, opacity .2s, box-shadow .2s; }
.qo-grid.has-match .qo-card { opacity: .6; }
.qo-grid.has-match .qo-card.is-match { opacity: 1; transform: translateY(-4px); }
.qo-card.is-match::after { content: "Seu caminho"; position: absolute; top: 14px; right: 14px; font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: #16A34A; color: #fff; }
@media (max-width: 860px) { .qo-grid.has-match .qo-card.is-match { order: -1; } }

/* —— Bloco "pra quem NÃO é" mais compacto —— */
.qo-notfor-grid { margin-top: var(--space-8); }

/* —— v2: container único, hero proporcional, celular como conversa real —— */
.container-x { max-width: 1240px; }
.hero .container-x { max-width: 1240px; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.h-hero { font-size: clamp(2rem, 0.9rem + 2.7vw, 3.15rem); max-width: none; }
.rf-quiz-go[hidden] { display: none; }
.rf-wa { gap: 3rem; }
@media (min-width: 1024px) { .whatsapp-row.rf-wa { grid-template-columns: 320px 1fr; } }
.rf-phone { width: 290px; aspect-ratio: 9 / 17.5; }
.rf-wa-head img, .rf-wa-chat img { display: block; width: 100%; height: auto; }
.rf-phone-fill { position: relative; min-height: 40px; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
.rf-wa-day { font-size: 10.5px; color: #8696a0; background: #182229; padding: 4px 10px; border-radius: 8px; }
.rf-wa-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 10px; }
.rf-wa-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.5; }
.rf-wa-list li span { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(34,197,94,.14); color: #4ADE80; }
.catalog-panel img { max-width: 1100px; }
/* v3: fundo do chat = cor do print; status bar integrada; título do hero mais contido */
.rf-phone-screen, .rf-phone-bar, .rf-phone-status { background: #161817; }
.rf-phone-fill { background: #161817 radial-gradient(circle at 30% 40%, rgba(255,255,255,.035) 0 1.5px, transparent 2.5px) 0 0 / 22px 22px; }
.rf-wa-day { background: #232625; }
.rf-phone-bar span { background: #232625; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.3fr 1fr; } }
.h-hero { font-size: clamp(2rem, 0.9rem + 2.4vw, 2.95rem); }
@media (max-width: 639px) { .hero .btn-xl { font-size: 15px; white-space: nowrap; padding-left: 12px; padding-right: 12px; letter-spacing: 0; } }
@media (max-width: 479px) { .rf-phone { width: 260px; } }

/* —— v5: painel de diagnóstico em tempo real (qualify.js v2) —— */
.rf-diag { margin-top: 18px; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); transition: border-color .25s, background .25s; }
.rf-diag[data-state="new"] { border-color: rgba(255,107,0,.55); background: rgba(255,107,0,.06); }
.rf-diag[data-state="pro"] { border-color: rgba(225,29,46,.6); background: rgba(225,29,46,.07); }
.rf-diag-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.rf-diag-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-tertiary); }
.rf-diag-count { font-weight: 800; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.rf-meter { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.rf-meter span { display: block; height: 100%; width: 0; border-radius: 999px; background: #FF6B00; transition: width .35s cubic-bezier(.2,.8,.2,1), background .25s; }
.rf-diag[data-state="pro"] .rf-meter span { background: linear-gradient(90deg, #E11D2E, #FF4D5E); }
.rf-meter i { position: absolute; top: 0; bottom: 0; width: 2px; background: #0f0f0f; }
.rf-meter i:nth-of-type(1) { left: 33.33%; } .rf-meter i:nth-of-type(2) { left: 66.66%; }
.rf-diag-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rf-opt { position: relative; display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02); transition: transform .25s, opacity .25s, border-color .25s, box-shadow .25s, background .25s; }
.rf-opt-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.rf-opt.is-new .rf-opt-ic { color: #FF8A33; background: rgba(255,107,0,.12); }
.rf-opt.is-pro .rf-opt-ic { color: #FF4D5E; background: rgba(225,29,46,.12); }
.rf-opt-txt { display: grid; gap: 2px; min-width: 0; }
.rf-opt-txt b { font-size: 14.5px; color: #fff; line-height: 1.2; }
.rf-opt-txt small { font-size: 12px; color: var(--color-text-tertiary); line-height: 1.3; }
.rf-opt-flag { position: absolute; top: -10px; right: 10px; padding: 4px 8px; border-radius: 999px; font: 800 9.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.rf-opt.is-new .rf-opt-flag { background: #FF6B00; } .rf-opt.is-pro .rf-opt-flag { background: #E11D2E; }
.rf-diag[data-state="new"] .rf-opt.is-new,
.rf-diag[data-state="pro"] .rf-opt.is-pro { transform: scale(1.03); background: rgba(255,255,255,.05); }
.rf-diag[data-state="new"] .rf-opt.is-new { border-color: #FF6B00; box-shadow: 0 12px 30px -14px rgba(255,107,0,.8); }
.rf-diag[data-state="pro"] .rf-opt.is-pro { border-color: #E11D2E; box-shadow: 0 12px 30px -14px rgba(225,29,46,.8); }
.rf-diag[data-state="new"] .rf-opt.is-new .rf-opt-flag,
.rf-diag[data-state="pro"] .rf-opt.is-pro .rf-opt-flag { opacity: 1; transform: none; }
.rf-diag[data-state="new"] .rf-opt.is-pro,
.rf-diag[data-state="pro"] .rf-opt.is-new { opacity: .38; filter: grayscale(.6); }
.rf-diag-msg { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); min-height: 3.1em; }
.rf-diag-msg b { color: #fff; }
.rf-diag[data-state="new"] .rf-diag-msg b { color: #FF8A33; } .rf-diag[data-state="pro"] .rf-diag-msg b { color: #FF4D5E; }
.rf-diag-cta { display: flex; justify-content: center; align-items: center; margin-top: 14px; min-height: 50px; border-radius: 12px; font-weight: 800; font-size: 15px;
  color: #fff; text-decoration: none; transition: transform .15s, filter .15s; }
.rf-diag-cta[hidden] { display: none; }
.rf-diag-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.rf-diag[data-state="new"] .rf-diag-cta { background: #FF6B00; box-shadow: 0 12px 28px -12px rgba(255,107,0,.8); }
.rf-diag[data-state="pro"] .rf-diag-cta { background: #E11D2E; box-shadow: 0 12px 28px -12px rgba(225,29,46,.8); }
.rf-path { transition: opacity .25s, transform .25s, box-shadow .25s; }
.rf-path.is-on { transform: scale(1.05); }
.rf-path.is-pro.is-on { box-shadow: 0 10px 26px -12px rgba(225,29,46,.9); border-color: #E11D2E; }
.rf-path.is-new.is-on { box-shadow: 0 10px 26px -12px rgba(255,107,0,.9); border-color: #FF6B00; }
.rf-path.is-off { opacity: .35; }
@media (max-width: 420px) { .rf-diag-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rf-opt, .rf-meter span, .rf-path, .rf-diag-cta { transition: none; } }
.rf-diag-opts { margin-top: 22px; }

/* ===== v7: seção do teste (#momento) separada da prova social e mais convidativa ===== */
.rq-band { position: relative; overflow: hidden; padding: 3.5rem 0 3.25rem; background: #0e0a09; isolation: isolate; }
@media (min-width: 768px) { .rq-band { padding: 5rem 0 4.5rem; } }
.rq-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, #E11D2E, #FF6B00 50%, #FFC107); }
.rq-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(225,29,46,.22), transparent 60%),
    radial-gradient(700px 360px at 88% 10%, rgba(255,107,0,.18), transparent 60%),
    radial-gradient(900px 400px at 50% 110%, rgba(255,193,7,.08), transparent 60%),
    linear-gradient(rgba(120,170,255,.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(120,170,255,.06) 1px, transparent 1px) 0 0 / 32px 32px; }
.rq-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, #0e0a09); }
.rq-wrap { max-width: 1100px; }
.rq-head { text-align: center; max-width: 760px; margin: 0 auto 2.25rem; }
.rq-kicker { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #FFD666;
  background: rgba(255,193,7,.10); border: 1px solid rgba(255,193,7,.35); }
.rq-title { margin: 18px 0 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: #fff; }
.rq-title span { background: linear-gradient(90deg, #FF4D5E, #FF8A33 55%, #FFC107); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rq-sub { margin: 16px auto 0; max-width: 58ch; font-size: var(--text-lg); line-height: 1.6; color: var(--color-text-secondary); }
.rq-sub b { color: #fff; }
.rq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.rq-form { margin: 0; }
.rq-tiles { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .rq-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.rq-tile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rq-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rq-card { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9); transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; }
.rq-tile:hover .rq-card { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.rq-tile input:focus-visible + .rq-card { outline: 3px solid #FFC107; outline-offset: 3px; }
.rq-top { display: flex; justify-content: space-between; align-items: center; }
.rq-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.45); letter-spacing: .08em; }
.rq-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55);
  padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.rq-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #FFC107; background: rgba(255,193,7,.10); border: 1px solid rgba(255,193,7,.28); transition: all .18s; }
.rq-txt { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.82); flex: 1; }
.rq-txt b { color: #fff; }
.rq-state { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; font-weight: 800; font-size: 14px;
  border: 1.5px dashed rgba(255,255,255,.25); color: rgba(255,255,255,.75); transition: all .18s; }
.rq-on { display: none; }
/* marcado */
.rq-tile input:checked + .rq-card { border-color: #22C55E; background: linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.04));
  box-shadow: 0 0 0 1px rgba(34,197,94,.35), 0 22px 44px -24px rgba(34,197,94,.65); }
.rq-tile input:checked + .rq-card .rq-ic { color: #fff; background: #16A34A; border-color: #16A34A; }
.rq-tile input:checked + .rq-card .rq-num { color: #4ADE80; }
.rq-tile input:checked + .rq-card .rq-state { border-style: solid; border-color: #16A34A; background: #16A34A; color: #fff; }
.rq-tile input:checked + .rq-card .rq-off { display: none; }
.rq-tile input:checked + .rq-card .rq-on { display: inline; animation: rq-pop .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes rq-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* convite antes do 1º toque: brilho suave passando pelos cartões */
.rq-form:not(.is-touched) .rq-state { animation: rq-breathe 2.4s ease-in-out infinite; }
.rq-form:not(.is-touched) .rq-tile:nth-child(3) .rq-state { animation-delay: .3s; }
.rq-form:not(.is-touched) .rq-tile:nth-child(4) .rq-state { animation-delay: .6s; }
@keyframes rq-breathe { 0%,100% { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.75); } 50% { border-color: #FFC107; color: #FFD666; } }

/* painel de resultado, abaixo dos cartões */
.rq-form .rf-diag { max-width: 860px; margin: 22px auto 0; padding: 22px; border-radius: 20px; background: rgba(12,12,12,.85);
  border: 1.5px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -40px rgba(0,0,0,1); backdrop-filter: blur(6px); }
.rq-form .rf-diag[data-state="new"] { border-color: #FF6B00; box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 30px 70px -30px rgba(255,107,0,.55); }
.rq-form .rf-diag[data-state="pro"] { border-color: #E11D2E; box-shadow: 0 0 0 1px rgba(225,29,46,.35), 0 30px 70px -30px rgba(225,29,46,.55); }
.rq-form .rf-diag-title { font-size: 12px; color: #FFD666; }
.rq-form .rf-diag-count { font-size: 18px; }
.rq-form .rf-meter { height: 12px; }
.rq-form .rf-diag-opts { grid-template-columns: 1fr 1fr; gap: 14px; }
.rq-form .rf-opt { padding: 14px 16px; }
.rq-form .rf-opt-txt b { font-size: 16px; }
.rq-form .rf-diag-msg { font-size: 16px; text-align: center; }
.rq-form .rf-diag-cta { max-width: 420px; margin-left: auto; margin-right: auto; font-size: 16px; min-height: 54px; }
.rf-diag.is-bump { animation: rq-bump .35s ease-out; }
@keyframes rq-bump { 0% { transform: scale(1); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } }
.rq-wait { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); }
.rq-wait i { width: 10px; height: 10px; border-radius: 50%; background: #FFC107; box-shadow: 0 0 0 0 rgba(255,193,7,.6); animation: rq-ping 1.6s infinite; }
@keyframes rq-ping { 0% { box-shadow: 0 0 0 0 rgba(255,193,7,.55); } 80%,100% { box-shadow: 0 0 0 12px rgba(255,193,7,0); } }
.rq-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.45); }
@media (max-width: 560px) {
  .rq-form .rf-diag-opts { grid-template-columns: 1fr; }
  .rq-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px; }
  .rq-top { width: 100%; }
  .rq-ic { width: 44px; height: 44px; border-radius: 12px; }
  .rq-txt { flex: 1 1 0; min-width: 0; font-size: 15px; }
  .rq-state { width: 100%; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .rq-form:not(.is-touched) .rq-state, .rq-wait i, .rf-diag.is-bump, .rq-on { animation: none !important; }
}