/* ============================================================
   Marcenaria no Preço Certo (rascunho): o que esta cópia acrescenta ao css/style.css do original, que fica idêntico.
   Carregado depois dele. Estiliza o que a cópia cria: a faixa de rascunho, a nota do checkout e os blocos novos da "mistura"
   (13-quiz-mistura-v2-carlos.md), sempre com as cores, fontes e raios do style.css.
   ============================================================ */

/* faixa "RASCUNHO · FORA DO AR" (CONFIG.RASCUNHO no js/quiz.js; com false ela não é criada) */
.rascunho {
  position: relative; z-index: 5;
  padding: 4px 10px;
  background: #0b1b3a; color: #ffffff;
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 700; font-size: 11px; line-height: 1.2;
  letter-spacing: .16em; text-align: center;
}

/* o botão de compra fica na página; sem checkout, o toque mostra esta nota logo abaixo dele */
.nota-checkout {
  margin-top: 10px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--muted); text-align: center;
}

/* ---------- a mistura ---------- */
/* linhas pequenas de exemplo: "Cenas ilustrativas", "Demonstração com…", "Cena ilustrativa · valores de exemplo"… */
.ex-nota { margin: 8px 0 0; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--muted); text-align: center; }
figcaption.ex-nota { margin-top: 10px; }
.ba + .ex-nota { margin: 0 0 6px; }

/* faixa EXEMPLO no canto da moldura do celular da demonstração (sobre a barra de status, fora da tela do app) */
.shot .faixa-ex {
  position: absolute; z-index: 6; top: 11px; right: -34px; width: 120px; transform: rotate(38deg);
  background: #FBBF24; color: #1F2937; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 19px;
  box-shadow: 0 3px 8px -3px rgba(11, 27, 58, .45); pointer-events: none;
}

/* agitação: o parágrafo da Lista Fantasma (a lista tocável fica no bloco das melhorias, lá embaixo) */
.fantasma { margin-top: 16px; text-align: left; }
.fantasma p { font-size: 15px; color: #33456a; }
.fantasma .warn, .pv__narra .warn { color: var(--red); font-weight: 700; }

/* diagnóstico: linha de reforço e 2º parágrafo da boa notícia */
.reforco { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px; line-height: 1.4; color: #33456a; }
.reforco__ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--blue-50); color: var(--blue); font-size: 16px; }
.note p + p { margin-top: 8px; }
.note .nota-7 em { font-style: italic; font-weight: 600; }

/* oferta: linha narrada embaixo da história */
.pv__narra { margin-top: 12px; font-size: 15px; line-height: 1.45; color: #33456a; text-align: center; }
.pv__hero .ex-nota { margin-top: 4px; }

/* garantia: a linha do CDC e o P.S. */
.guarantee p.cdc { font-size: 13px; color: var(--muted); }
.ps { margin-top: 18px; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-align: left; }
.ps b { color: var(--ink); }

/* etapa 11: o PDF de exemplo com o selo no canto */
.proofs__item--exemplo .pdf-pag { position: relative; display: block; }
.selo-ex {
  position: absolute; right: 8px; bottom: 10px; z-index: 1; max-width: calc(100% - 16px);
  padding: 4px 8px 3px; border-radius: 4px; background: #B91C1C; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .03em;
  box-shadow: 0 6px 14px -6px rgba(11, 27, 58, .45);
}

/* ---------- imagens animadas (js/animacoes.js; gerado por gera_camadas.py) ---------- */
.ba__item, .photo { position: relative; }
.ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.a-serra, .a-coca, .a-caneta, .a-balao, .d-mic, .d-onda, .d-cartao, .d-balao, .u-brilho, .u-ponto { transform-box: fill-box; transform-origin: center; } /* só nos que mexem: os outros guardam o rotate() do desenho */
/* antes = a dor: os números aparecem um por um e piscam, a serra gira, a mão coça a cabeça, a caneta mexe e a cliente responde */
.a-serra { animation: a-gira 7s linear infinite; } @keyframes a-gira { to { transform: rotate(360deg); } }
.a-neon { animation: a-pisca 2.6s steps(1, end) infinite; } @keyframes a-pisca { 0%, 100% { opacity: 1; } 46% { opacity: .5; } 49% { opacity: 1; } 72% { opacity: .72; } 75% { opacity: 1; } }
.a-n1 { animation: a-n1 11.0s infinite both; } @keyframes a-n1{0%,2.73%{opacity:0}4.36%,94.55%{opacity:1}97.73%,100%{opacity:0}}
.a-n2 { animation: a-n2 11.0s infinite both; } @keyframes a-n2{0%,7.27%{opacity:0}8.91%,94.55%{opacity:1}97.73%,100%{opacity:0}}
.a-n3 { animation: a-n3 11.0s infinite both; } @keyframes a-n3{0%,11.82%{opacity:0}13.45%,94.55%{opacity:1}97.73%,100%{opacity:0}}
.a-n4 { animation: a-n4 11.0s infinite both; } @keyframes a-n4{0%,16.36%{opacity:0}18.00%,94.55%{opacity:1}97.73%,100%{opacity:0}}
.a-n5 { animation: a-n5 11.0s infinite both; } @keyframes a-n5{0%,20.91%{opacity:0}22.55%,94.55%{opacity:1}97.73%,100%{opacity:0}}
.a-balao { animation: a-balao 11.0s infinite both; transform-origin: left bottom; } @keyframes a-balao{0%,26.36%{opacity:0;transform:translateY(14px) scale(.92)}30.45%,94.55%{opacity:1;transform:none}97.73%,100%{opacity:0;transform:translateY(14px) scale(.92)}}
.a-coca { animation: a-coca 11.0s infinite; } @keyframes a-coca{0%,3.64%{transform:none}6.00%{transform:translate(-3px,-2px) rotate(-4deg)}8.36%{transform:translate(3px,1px) rotate(3deg)}10.73%{transform:translate(-3px,-2px) rotate(-4deg)}13.09%{transform:translate(3px,1px) rotate(3deg)}15.45%{transform:translate(-3px,-2px) rotate(-4deg)}17.82%{transform:translate(3px,1px) rotate(3deg)}20.18%{transform:translate(-3px,-2px) rotate(-4deg)}22.55%{transform:translate(3px,1px) rotate(3deg)}24.91%{transform:translate(-3px,-2px) rotate(-4deg)}27.27%{transform:translate(3px,1px) rotate(3deg)}29.64%{transform:translate(-3px,-2px) rotate(-4deg)}32.00%{transform:translate(3px,1px) rotate(3deg)}34.36%{transform:translate(-3px,-2px) rotate(-4deg)}36.73%{transform:translate(3px,1px) rotate(3deg)}39.09%{transform:translate(-3px,-2px) rotate(-4deg)}41.45%{transform:translate(3px,1px) rotate(3deg)}44.18%,100%{transform:none}}
.a-caneta { animation: a-caneta 11.0s infinite; } @keyframes a-caneta{0%,1.82%{transform:none}3.36%{transform:translate(-4px,1px)}4.91%{transform:translate(4px,-1px)}6.45%{transform:translate(-4px,1px)}8.00%{transform:translate(4px,-1px)}9.55%{transform:translate(-4px,1px)}11.09%{transform:translate(4px,-1px)}12.64%{transform:translate(-4px,1px)}14.18%{transform:translate(4px,-1px)}15.73%{transform:translate(-4px,1px)}17.27%{transform:translate(4px,-1px)}18.82%{transform:translate(-4px,1px)}20.36%{transform:translate(4px,-1px)}21.91%{transform:translate(-4px,1px)}23.45%{transform:translate(4px,-1px)}25.00%{transform:translate(-4px,1px)}26.55%{transform:translate(4px,-1px)}28.09%{transform:translate(-4px,1px)}29.64%{transform:translate(4px,-1px)}31.18%{transform:translate(-4px,1px)}32.73%{transform:translate(4px,-1px)}34.27%{transform:translate(-4px,1px)}35.82%{transform:translate(4px,-1px)}37.36%{transform:translate(-4px,1px)}38.91%{transform:translate(4px,-1px)}40.45%{transform:translate(-4px,1px)}42.00%{transform:translate(4px,-1px)}43.55%{transform:translate(-4px,1px)}45.18%,100%{transform:none}}
.a-veu { opacity: 0; animation: a-veu 11.0s infinite; } @keyframes a-veu { 0%,49.09%{opacity:0}53.64%,93.64%{opacity:.36}98.18%,100%{opacity:0} }
/* depois = a solução: o microfone pulsa, o cartão sobe, a lista marca um por um e a cliente aprova */
.d-veu { opacity: 0; animation: d-veu 11.0s infinite; } @keyframes d-veu { 0%,44.55%{opacity:.42}49.09%,95.45%{opacity:0}99.55%,100%{opacity:.42} }
.d-mic { animation: d-mic 11.0s infinite both; } @keyframes d-mic{0%,49.09%{opacity:0;transform:scale(.6)}53.18%,95.45%{opacity:1;transform:none}98.64%,100%{opacity:0;transform:scale(.6)}}
.d-onda { animation: d-onda .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); } @keyframes d-onda { from { transform: scaleY(.4); } to { transform: scaleY(1.15); } }
.d-cartao { animation: d-cartao 11.0s infinite both; } @keyframes d-cartao{0%,54.55%{opacity:0;transform:translateY(26px)}59.55%,95.45%{opacity:1;transform:none}98.64%,100%{opacity:0;transform:translateY(26px)}}
.d-ck1 { animation: d-ck1 11.0s infinite both; } @keyframes d-ck1{0%,62.73%{fill-opacity:0}64.55%,95.45%{fill-opacity:1}98.64%,100%{fill-opacity:0}}
.d-ck2 { animation: d-ck2 11.0s infinite both; } @keyframes d-ck2{0%,66.36%{fill-opacity:0}68.18%,95.45%{fill-opacity:1}98.64%,100%{fill-opacity:0}}
.d-ck3 { animation: d-ck3 11.0s infinite both; } @keyframes d-ck3{0%,70.00%{fill-opacity:0}71.82%,95.45%{fill-opacity:1}98.64%,100%{fill-opacity:0}}
.d-ck4 { animation: d-ck4 11.0s infinite both; } @keyframes d-ck4{0%,73.64%{fill-opacity:0}75.45%,95.45%{fill-opacity:1}98.64%,100%{fill-opacity:0}}
.d-balao { animation: d-balao 11.0s infinite both; transform-origin: left bottom; } @keyframes d-balao{0%,78.18%{opacity:0;transform:translateY(14px) scale(.92)}82.27%,95.45%{opacity:1;transform:none}98.64%,100%{opacity:0;transform:translateY(14px) scale(.92)}}
/* mostrando: a tela do app rola devagar e o total pisca de leve */
.m-rola { animation: m-rola 12.0s ease-in-out infinite; } @keyframes m-rola { 0%,10.00%{transform:none}55.00%,71.67%{transform:translateY(-276.2px)}93.33%,100%{transform:none} }
.m-total { opacity: 0; animation: m-total 1.8s ease-in-out infinite; } @keyframes m-total { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* dupla: zoom lento da cena e o celular com brilho de notificação */
.photo img[src^='img/dupla.webp'] { animation: u-zoom 9s ease-in-out infinite alternate; transform-origin: 55% 55%; } @keyframes u-zoom { from { transform: none; } to { transform: scale(1.045); } }
.u-brilho { opacity: .7; animation: u-brilho 2.4s ease-out infinite; } @keyframes u-brilho { 0% { opacity: 0; transform: scale(.96); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.14); } }
.u-tela { opacity: .55; animation: u-tela 2.4s ease-out infinite; } @keyframes u-tela { 0%, 100% { opacity: .15; } 22% { opacity: .75; } }
.u-ponto { animation: u-ponto 2.4s ease-out infinite; } @keyframes u-ponto { 0% { transform: scale(0); } 18% { transform: scale(1.25); } 30%, 100% { transform: scale(1); } }
/* reduzir movimento: tudo parado no quadro final (os elementos aparecem; véus e brilhos somem) */
@media (prefers-reduced-motion: reduce) { .ov *, .photo img { animation: none !important; } .a-veu, .d-veu, .m-total { opacity: 0 !important; } }

/* ---------- checklist 15 (27/10): técnico e visual, sem frase nova ---------- */
/* item 41: os rótulos de exemplo ficaram maiores e com contraste ≥ 4,5:1 (faixa EXEMPLO 10,5:1; selo 6,5:1) */
/* item 42: títulos das notas, legendas ANTES/DEPOIS, etiquetas do card roxo e "PASSO N DE 3" mais escuros (≥ 4,5:1) */
.note--alert b { color: #B91C1C; }
.note--good b { color: #15803D; }
.ba__item--before figcaption { background: #B91C1C; }
.ba__item--after figcaption { background: #15803D; }
.perk__chips span:nth-child(5n+2) { color: #04679A; }
.perk__chips span:nth-child(5n+3) { color: #15803D; }
.perk__chips span:nth-child(5n+4) { color: #8A5507; }
.perk__chips span:nth-child(5n+5) { color: #B91C1C; }
.c-green .how__eyebrow { color: #15803D; }
/* item 44: a seta de voltar ganha área de toque de 48 × 48 px, sem mudar o desenho */
.q__back { position: relative; }
.q__back::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
/* item 43: o título recebe o foco a cada etapa (leitor de tela), sem contorno na tela */
.q__title[tabindex="-1"]:focus, h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* item 12: o botão de compra repetido depois dos 3 cards (leva até a caixa do preço) */
.cta-cedo { margin-top: 18px; }
/* item 3: o esqueleto da tela inicial do app enquanto a demo carrega */
.demo__ph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; transition: opacity .35s; pointer-events: none; }
.demo__ph.off { opacity: 0; }
.demo__ph .sk { animation: sk-pisca 1.1s ease-in-out infinite alternate; }
@keyframes sk-pisca { from { opacity: .55; } to { opacity: 1; } }
/* item 19: o PDF de exemplo numa página só, legível, com toque para ampliar (tamanhos em em: o ampliado só muda a base) */
.pdfx { margin-top: 14px; }
.pdfx figcaption { padding: 8px 2px 0; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--ink); line-height: 1.45; }
.pdfx__folha { position: relative; display: block; width: 100%; text-align: left; background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 1.2em 1.1em 1.1em; font-size: 12px; line-height: 1.35; color: #1d2b3c; cursor: zoom-in; }
.pdfx__folha .selo-ex { position: static; display: inline-block; margin-bottom: .8em; font-size: .92em; }
.pdfx__topo { display: flex; gap: .8em; align-items: flex-start; }
.pdfx__topo img { width: 3.6em; height: auto; flex: none; margin-top: .2em; }
.pdfx__emp { flex: 1; min-width: 0; }
.pdfx__emp b { display: block; font-size: 1.17em; font-weight: 800; color: #02358F; }
.pdfx__emp small, .pdfx__num small { display: block; font-size: .9em; color: #5d6e82; font-weight: 500; }
.pdfx__num { text-align: right; }
.pdfx__num small:first-child { font-size: .8em; letter-spacing: .14em; font-weight: 800; color: #0784BD; }
.pdfx__num b { display: block; font-size: 1.3em; font-weight: 800; color: #02358F; }
.pdfx__faixa { height: .33em; border-radius: 2px; margin: 1em 0; background: linear-gradient(90deg, #02358F, #01C6CE); }
.pdfx__2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.pdfx__2col small { display: block; font-size: .78em; letter-spacing: .12em; font-weight: 800; color: #6B7A8C; margin-bottom: .15em; }
.pdfx__2col b { display: block; font-size: 1.04em; font-weight: 800; }
.pdfx__2col span { display: block; font-size: .92em; color: #5d6e82; }
.pdfx__tab { width: 100%; border-collapse: collapse; margin-top: 1em; }
.pdfx__tab th { text-align: left; font-size: .84em; letter-spacing: .1em; padding: .6em .65em; }
.pdfx__tab .cab-mat th { background: #FDEDE2; color: #A3470F; }
.pdfx__tab .cab-mo th { background: #E6EEFF; color: #1146B8; }
.pdfx__tab td { padding: .6em .65em; border-bottom: 1px solid #edf1f6; vertical-align: top; font-weight: 600; }
.pdfx__tab .num { text-align: right; white-space: nowrap; font-weight: 700; }
.pdfx__quebra { margin: 1.1em -1.1em; border-top: 2px dashed #CBD6E6; }
.pdfx__total { display: flex; justify-content: space-between; align-items: center; margin-top: 1em; padding: .8em 1em; border-radius: .7em; background: #02358F; color: #fff; }
.pdfx__total span { font-size: .9em; letter-spacing: .14em; font-weight: 800; }
.pdfx__total b { font-size: 1.45em; font-weight: 800; }
.pdfx__notas { display: flex; flex-wrap: wrap; gap: .3em 1em; margin-top: .8em; font-size: .92em; color: #4A5B70; font-weight: 600; }
.pdfx__aprova { margin-top: 1em; padding: .7em .8em; border-radius: .7em; background: #E9FBEF; color: #11713D; font-size: .96em; font-weight: 600; text-align: center; }
.pdfx-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(11, 27, 58, .92); overflow: auto; -webkit-overflow-scrolling: touch; padding: 60px 12px 28px; }
.pdfx-zoom__area { width: max-content; margin: 0 auto; }
.pdfx__folha--grande { width: 600px; font-size: 18px; cursor: default; }
.pdfx-zoom__fecha { position: fixed; top: 10px; left: 10px; z-index: 61; margin: 0; background: #fff; color: var(--ink); opacity: 1; box-shadow: var(--shadow); }
body.sem-rolar { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .demo__ph .sk { animation: none; } }

/* ---------- melhorias de texto (17-melhorias-texto-v2-carlos.md, M01-M37; 27/10) ---------- */
/* M17: a vírgula logo depois do destaque do H1 da oferta (sem o respiro da direita, que parecia um espaço) */
.pv__h1 .hl { padding-right: 0; }
/* pré-lançamento (desligado no CONFIG): a faixa "App em construção" */
.faixa-pre { position: relative; z-index: 5; padding: 5px 12px; background: #FEF3C7; color: #78350F; font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; }

/* M05: a legenda embaixo do celular da tela do app (uma frase por vez, sincronizada com a demo) */
.shot-wrap--leg .shot { width: min(300px, 84%, max(150px, calc((100vh - 330px) * .439))); width: min(300px, 84%, max(150px, calc((100svh - 330px) * .439))); }
.legenda { margin: 10px auto 0; max-width: 340px; text-align: center; }
.legenda__txt { display: flex; align-items: center; justify-content: center; height: calc(2.6em + 10px); padding: 5px 12px; border-radius: 12px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink); transition: background-color .25s, box-shadow .25s; }
.legenda__txt b { font-weight: 800; }
.legenda.fita .legenda__txt { background: #FEF3C7; color: #0b1b3a; box-shadow: inset 0 0 0 2px #F59E0B; } /* frase 3: 17,6:1 */
.legenda__txt.entra { animation: leg-entra .35s ease-out; }
@keyframes leg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.legenda__dots { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.legenda__dots i { width: 8px; height: 8px; border-radius: 50%; background: #c3d0e6; transition: background-color .25s; }
.legenda__dots i.on { background: var(--blue); }
.legenda__lista { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* só para o leitor de tela */
.legenda.parada .legenda__anim { display: none; } /* movimento reduzido: as 5 frases paradas e numeradas */
.legenda.parada .legenda__lista { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding-left: 1.5em; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.legenda.parada .legenda__lista li + li { margin-top: 4px; }

/* M08: a Lista Fantasma tocável (regra 3.1) */
.flista { text-align: left; }
.flista__q { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.flista__sub { margin: 2px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.flista ul { gap: 4px; }
.flista li { display: block; }
.flista li.flista__tudo { margin-top: 12px; }
.fopt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; border: 2px solid transparent; border-radius: 14px; text-align: left; transition: background-color .2s, border-color .2s; }
.fopt b { font-size: 15px; line-height: 1.3; }
.fopt__box { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid #7d8ea8; background: #fff; transition: background-color .2s, border-color .2s; }
.fopt__box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s; }
.fopt[aria-checked="true"] { background: #FEF0F0; }
.fopt[aria-checked="true"] .fopt__box { background: var(--red); border-color: var(--red); box-shadow: 0 4px 10px -4px rgba(239, 68, 68, .7); }
.fopt[aria-checked="true"] .fopt__box svg { opacity: 1; transform: none; }
.fopt--tudo { border-color: #86d9a3; }
.fopt--tudo[aria-checked="true"] { background: var(--green-50); }
.fopt--tudo[aria-checked="true"] .fopt__box { background: var(--green); border-color: var(--green); box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .7); }
.fopt:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* o parágrafo de baixo troca no mesmo bloco: as 4 versões ocupam a mesma célula e a altura fica a da maior (sem pulo) */
.fantasma__txt { display: grid; }
.fantasma__txt > p { grid-area: 1 / 1; }
.fantasma__mede { visibility: hidden; }

/* M10: a linha embaixo do botão da etapa 11 */
.a-seguir { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--muted); text-align: center; }

/* M12/M12b/M13: o nível Baixo (só no teste) e a linha do tempo em verde para "No mesmo dia" */
.txt-ok { color: #15803D; background: linear-gradient(transparent 62%, #c9f2d6 62%); padding: 0 .08em; }
.risk__lvl--baixo { background: #15803D; }
.risk__time--ok { color: #15803D; }

/* M14: o bloco "Se fosse com o app:" (regra 3.2), com o cartão no visual da gaveta "Faltou alguma coisa?" da demo */
.sefosse { margin-top: 16px; padding: 16px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; }
.sefosse__l { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: #33456a; }
.sefosse .checks__title + .sefosse__l { margin-top: 0; }
.sefosse__rot { margin-top: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #4A5B70; } /* 6,9:1 */
.appc { position: relative; margin-top: 10px; padding: 18px 14px 14px; border-radius: 20px; background: #F4F7FF; border: 1.5px solid var(--line); }
.appc::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 99px; background: #c9d4e6; }
.appc__t { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.appc__s { margin: 2px 0 10px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.appc__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -10px rgba(2, 53, 143, .45); }
.appc__item + .appc__item { margin-top: 8px; }
.appc__ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--c50); color: var(--c); font-size: 20px; }
.appc__txt { flex: 1; min-width: 0; }
.appc__txt b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.appc__txt span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.appc__tag { display: none; align-items: center; gap: 3px; margin-top: 5px; padding: 1px 8px; border-radius: 99px; background: #DFF5E9; color: #0B6B3A; font-size: 11.5px; font-weight: 800; font-style: normal; } /* 6:1 */
.appc__tag svg, .perk__mini-txt i svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.appc.na-conta .appc__tag { display: inline-flex; animation: tag-entra .3s ease-out; }
@keyframes tag-entra { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.appc__btn { width: 100%; min-height: 46px; margin-top: 12px; border-radius: 14px; background: #15803D; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 0 #0f5f2d; } /* 5:1 */
.appc__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f5f2d; }
.appc__btn:disabled { background: #DFF5E9; color: #0B6B3A; box-shadow: none; cursor: default; transform: none; }
.appc__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sefosse__depois:not([hidden]) { animation: tag-entra .3s ease-out; }

/* M16 (só no teste do item 25): a linha embaixo da demo do passo 1 */
.how__linha { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--muted); text-align: center; }

/* M18: o cartão "Faltou a fita?" da história (entre o "Gravando" e o "Orçamento") */
.ht__faltou { position: absolute; z-index: 2; right: 3%; top: 5%; width: 60%; padding: .75em .8em .8em; border-radius: 1em; background: #fff; box-shadow: 0 1em 1.6em -.6em rgba(11, 27, 58, .45); opacity: 0; transform: translateY(-.6em) scale(.85); transition: opacity .35s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.ht.faltou .ht__faltou { opacity: 1; transform: none; }
.ht__faltou-t { font-size: 1.1em; font-weight: 800; line-height: 1.2; color: var(--ink); }
.ht__faltou-s { margin-top: .1em; font-size: .9em; font-weight: 600; color: var(--muted); }
.ht__faltou-ok { display: flex; align-items: center; gap: .45em; margin-top: .55em; padding: .45em .55em; border-radius: .7em; background: #DFF5E9; color: #0B6B3A; font-size: .8em; font-weight: 800; line-height: 1.2; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.ht__faltou-ok span { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--green); }
.ht__faltou-ok svg { width: 68%; height: 68%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ht__faltou-ok b { font-weight: 800; }
.ht__faltou-ok i { font-style: normal; white-space: nowrap; } /* o valor não quebra no meio */
.ht.faltou-ok .ht__faltou-ok { opacity: 1; transform: none; }

/* M23: o card roxo "1 pergunta" com a mini-tela da fita */
.perk__mini { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px; border-radius: 12px; background: var(--purple-50); }
.perk__mini-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #FDEDE2; color: #A3470F; font-size: 19px; }
.perk__mini-txt { flex: 1; min-width: 0; }
.perk__mini-txt b { display: block; font-size: 13.5px; line-height: 1.25; }
.perk__mini-txt small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.perk__mini-txt i { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 1px 7px; border-radius: 99px; background: #DFF5E9; color: #0B6B3A; font-size: 11px; font-weight: 800; font-style: normal; }
.perk__mini em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.perk__mini-ex { position: absolute; top: -9px; right: 10px; padding: 2px 7px; border-radius: 6px; background: #FBBF24; color: #1F2937; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; } /* 10,5:1 */

/* M26: "Serve pro móvel que você faz:" (com o teste do item 25, o móvel dele vem primeiro e destacado) */
.moveis { margin-top: 16px; padding: 16px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; }
.moveis .perk__chips { margin-top: 0; }
.perk__chips span.eu { box-shadow: inset 0 0 0 2px currentColor; font-weight: 800; }

/* M31: a barra de 10 partes da chapa (componente .fracao do Eletricista), sem o preço da chapa */
.fracao { margin: 12px 0 2px; text-align: left; }
.fracao__top { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #33456a; }
.fracao__barra { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; }
.fracao__barra i { height: 26px; border-radius: 4px; background: #dfe4ec; }
.fracao__barra i:first-child { background: #15803D; }
.fracao__leg { margin-top: 6px; font-size: 13px; }
.fracao__leg b { font-weight: 800; color: #15803D; }

/* M33: "Depois que você paga:" embaixo do botão da caixa */
.depois-paga { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg); text-align: left; }
.depois-paga__t { margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--ink); }
.depois-paga ol { list-style: none; display: grid; gap: 8px; }
.depois-paga li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #33456a; }
.depois-paga li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; font-style: normal; }
.depois-paga__aviso { margin-top: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #33456a; }

/* ---------- rodada 6 (21-rodada6-v2-carlos.md, R6-01 a R6-29) ---------- */
/* R6-02: a linha da capa acima do "Continuar" */
.capa-linha { margin: 12px 4px 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #33456a; text-align: center; }
/* R6-06: a linha entre o título e o celular da tela do app */
.info .q__title + .repara { margin-top: -14px; }
.repara { margin-bottom: 4px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); text-align: center; }
/* R6-13: os vilões (visual da lista de dores, com a 1ª frase em negrito) e a linha da UFU (estilo das linhas de exemplo, alinhada à esquerda por ser longa) */
.pv__h2.viloes__t { font-size: 21px; }
.viloes li { align-items: flex-start; font-weight: 500; line-height: 1.4; }
.viloes li b { font-weight: 800; }
.viloes li:nth-child(1) { border-left-color: var(--orange); }
.viloes li:nth-child(2) { border-left-color: var(--purple); }
.viloes li:nth-child(3) { border-left-color: var(--red); }
.viloes li:nth-child(4) { border-left-color: var(--blue); }
.ex-nota.viloes__fonte { margin-top: 12px; text-align: left; line-height: 1.45; } /* 12 px, 4,9:1 sobre o fundo */
/* R6-17: as fascinations (lista com ícone pequeno, um item por linha) */
.fasc { margin-top: 16px; padding: 16px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: left; }
.fasc__t { margin-bottom: 10px; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.fasc ul { list-style: none; display: grid; gap: 10px; }
.fasc li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #33456a; }
.fasc__ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; margin-top: 1px; background: var(--blue-50); color: var(--blue); font-size: 13px; }
/* R6-19: a garantia "Pacto do Dobro" (no rascunho, com {canal} e {prazo} marcados "a definir") */
.dobro__rasc { display: inline-block; margin: 0 0 12px !important; padding: 4px 10px; border-radius: 6px; background: #0b1b3a; color: #fff !important; font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; text-align: center !important; }
.seal--dobro b { font-size: 44px; }
.seal--dobro span { font-size: 13px; }
.dobro__t { margin-top: 12px !important; font-size: 22px !important; font-weight: 800; color: var(--ink) !important; text-align: center !important; }
.a-definir { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 6px; border-radius: 6px; background: #FEF08A; color: #713F12; font-weight: 700; box-shadow: inset 0 0 0 1.5px #EAB308; }
.a-definir small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .legenda__txt.entra, .appc.na-conta .appc__tag, .sefosse__depois:not([hidden]) { animation: none; }
  .fopt, .fopt__box, .fopt__box svg, .legenda__txt, .ht__faltou, .ht__faltou-ok { transition: none; }
}