/* ===== Fonte (Poppins, auto-hospedada) ===== */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/poppins-latin-300.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-latin-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-latin-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-latin-700.woff2) format('woff2'); }

/* ===== Botão do quiz (estilo original do construtor) ===== */
.block-button-wrapper { position: relative; z-index: 1; padding-bottom: 8px; width: 100%; display: block; }
.block-button { position: relative; border-bottom: 8px solid transparent; z-index: 2; width: 100%; display: block; cursor: pointer; }
.block-button:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s; }
.block-button:active { transform: scale(1.05); opacity: .8; transition: transform .1s, box-shadow .1s; }
.block-button:focus-visible, [data-action="answer"]:focus-visible { outline: 2px solid #ff3b47; outline-offset: 3px; }

/* ===== Fundo e largura ===== */
/* O body do construtor é claro (bg-slate-50): no "bounce" do iPhone aparecia uma faixa branca atrás da página preta. */
html, body { background-color: #000 !important; color-scheme: dark; }
/* min-w-80 do construtor (20rem) não encolhe em 320 px nem com fonte do sistema maior: gerava rolagem lateral. */
main[data-step] { min-width: 0; }
main[data-step]:focus { outline: none; }

/* ===== Navegação entre etapas ===== */
main[data-step][hidden] { display: none !important; }
/* Só opacidade: transform no <main> prende o cronômetro fixo da etapa 12 dentro da etapa em vez da tela. */
main[data-step].funil-enter { animation: funil-step-in .28s ease-out backwards; }
@keyframes funil-step-in { from { opacity: 0; } to { opacity: 1; } }
[data-action="answer"] { cursor: pointer; width: 100%; }
[data-action="answer"].is-picked { background: rgba(225, 29, 42, .08); }

/* ===== Carrossel ===== */
[data-carousel] { scrollbar-width: none; -ms-overflow-style: none; }
[data-carousel]::-webkit-scrollbar { display: none; }
[data-carousel] img { user-select: none; -webkit-user-drag: none; }
[data-carousel-next] { min-width: 44px; min-height: 44px; }

/* ===== Vídeo (slot próprio; vturb da conta da TAML entra no lugar quando configurado) ===== */
.funil-video { position: relative; width: 100%; margin: 0 auto; background: #0b0b0c; overflow: hidden; border-radius: 12px; }
.funil-video video, .funil-video img.funil-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.funil-video__sound { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 6px; background: rgba(225, 29, 42, .92); color: #fff; font: 700 13px/1.2 Poppins, sans-serif; border: 0; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.funil-video__sound svg { width: 22px; height: 22px; }
.funil-video__sound[hidden] { display: none; }
.funil-video vturb-smartplayer { position: absolute; inset: 0; }

/* ===== Aviso de checkout ausente (só aparece se o env não estiver configurado) ===== */
.funil-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100; max-width: 92vw; background: #111827; color: #fff; border: 1px solid #e11d2a; border-radius: 10px; padding: 12px 16px; font: 500 13px/1.4 Poppins, sans-serif; box-shadow: 0 12px 40px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  .pulse, main[data-step].funil-enter, [data-carousel], [data-carousel-next] { animation: none !important; }
}