/* ============================================================ Academia Lendária — Design System das LPs Dois temas: escuro (padrão) e claro, via [data-tema] no . Mecânica emprestada das referências de funil (Ladeira, Hormozi, Érico, Finch) — sans black na headline, marca-texto sólido, ícones, faixas alternadas — vestida na paleta da AL. Gold continua sendo o único accent. Mobile-first: o que está solto é a regra do celular; os @media (min-width) só acrescentam. ============================================================ */ :root { --gold: #c9b298; --gold-bright: #e4d8ca; --gold-deep: #8d7556; --gold-ink: #6b563a; --gold-10: rgba(201, 178, 152, 0.1); --gold-20: rgba(201, 178, 152, 0.2); --gold-30: rgba(201, 178, 152, 0.3); --gold-60: rgba(201, 178, 152, 0.6); --error: #fb2c36; --maxw: 1200px; --gutter: 20px; --r-pill: 9999px; --r-card: 20px; --r-input: 0; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --font-serif: "Instrument Serif", Georgia, serif; --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --touch: 52px; } @media (min-width: 720px) { :root { --gutter: 32px; } } /* ---------- TEMA ESCURO (padrão) ---------- */ :root, [data-tema="escuro"] { --surface: #070709; --surface-2: #0d0d11; --bg-deep: #000000; --bg-elev: #111115; --band: #0b0b0e; --text: #edebe6; --text-mid: rgba(237, 235, 230, 0.68); --text-dim: rgba(237, 235, 230, 0.42); --text-faint: rgba(237, 235, 230, 0.22); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --glass: rgba(255, 255, 255, 0.07); --accent: var(--gold); --input-bg: rgba(0, 0, 0, 0.3); --sombra-cta: 0 12px 40px rgba(201, 178, 152, 0.28); --sombra-cta-hover: 0 18px 54px rgba(201, 178, 152, 0.42); --sombra-card: 0 24px 70px -30px rgba(0, 0, 0, 0.9); } /* ---------- TEMA CLARO ---------- */ [data-tema="claro"] { --surface: #f6f2ea; --surface-2: #ffffff; --bg-deep: #ece5d8; --bg-elev: #ffffff; --band: #efe8dc; --text: #171310; --text-mid: rgba(23, 19, 16, 0.72); --text-dim: rgba(23, 19, 16, 0.5); --text-faint: rgba(23, 19, 16, 0.28); --border: rgba(23, 19, 16, 0.1); --border-strong: rgba(23, 19, 16, 0.18); --glass: rgba(255, 255, 255, 0.72); --accent: var(--gold-ink); --input-bg: #ffffff; --sombra-cta: 0 12px 34px rgba(107, 86, 58, 0.24); --sombra-cta-hover: 0 18px 46px rgba(107, 86, 58, 0.34); --sombra-card: 0 20px 50px -26px rgba(23, 19, 16, 0.22); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Tipografia ---------- Headline é SANS BLACK, como em todas as referências. Serif ficou para eyebrow e detalhe, nunca para o peso. */ h1, h2, h3, h4 { margin: 0; } h1, .h-xl { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.6rem, 6.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; } /* Quando a headline carrega marca-texto, a entrelinha precisa abrir: senão os blocos de fundo de linhas vizinhas colidem. */ h1:has(.marca), h2:has(.marca), .h-xl:has(.marca) { line-height: 1.34; } h2, .h-lg { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.6rem, 5.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } h3 { font-family: var(--font-sans); font-size: clamp(1.05rem, 3.4vw, 1.25rem); font-weight: 700; line-height: 1.32; letter-spacing: -0.012em; } p { margin: 0 0 1rem; color: var(--text-mid); } .lead { font-size: clamp(1rem, 4.2vw, 1.1875rem); line-height: 1.55; color: var(--text-mid); text-wrap: pretty; } .label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); } .mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .serif { font-family: var(--font-serif); font-weight: 400; } .serif em { font-style: italic; color: var(--accent); } .small { font-size: 0.875rem; line-height: 1.45; } .dim { color: var(--text-dim); } /* ---------- Marca-texto ---------- A assinatura do Ladeira, na paleta da AL. */ .marca { /* inline-block + nowrap: a frase destacada desce inteira para a linha seguinte em vez de partir no meio do bloco gold. */ display: inline-block; white-space: nowrap; max-width: 100%; background: var(--gold); color: #17140f; padding: 0.02em 0.22em 0.1em; border-radius: 3px; font-weight: 800; } /* Último recurso: se a frase for mais larga que a própria coluna, volta a quebrar (com clone, para o fundo acompanhar as linhas). */ .marca-quebra, .marca.forcar-quebra { display: inline; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Em telas muito estreitas nenhuma das frases destacadas cabe numa linha só. Medido: passa em 360px, estoura em 320px. */ @media (max-width: 400px) { .marca { display: inline; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; } } .marca-linha { color: var(--accent); box-shadow: inset 0 -0.34em 0 var(--gold-30); padding: 0 0.1em; font-weight: 800; } .sublinha { position: relative; font-weight: 800; color: var(--accent); } .sublinha::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.04em; height: 0.15em; background: var(--gold); border-radius: 2px; transform: skewY(-0.8deg); opacity: 0.9; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 760px; } .wrap-mid { max-width: 1000px; } section { padding-block: clamp(52px, 11vw, 104px); } .band { background: var(--band); } .band-elev { background: var(--bg-elev); } .band-deep { background: var(--bg-deep); } .band-inversa { background: var(--gold); color: #17140f; } .band-inversa p, .band-inversa .lead { color: rgba(23, 20, 15, 0.74); } .band-inversa .label { color: rgba(23, 20, 15, 0.62); } .band-inversa .stat-num { color: #17140f; } .band-inversa .stat-label { color: rgba(23, 20, 15, 0.62); } .band-inversa h2 { color: #17140f; } .rule { height: 1px; border: 0; background: var(--border); margin: 0; } .stack > * + * { margin-top: 20px; } .stack-sm > * + * { margin-top: 10px; } .center { text-align: center; } .rel { position: relative; z-index: 1; } .grid { display: grid; gap: 14px; } @media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 880px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } } .visually-hidden { position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sem isto o input do honeypot mantém a largura natural (176px) e empurra o documento para fora da viewport em telas estreitas. */ .visually-hidden * { max-width: 100%; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--touch); padding: 0 28px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); } .btn-solid { position: relative; overflow: hidden; background: var(--gold); color: #17140f; font-weight: 700; box-shadow: var(--sombra-cta); } .btn-lg { min-height: 58px; padding: 0 32px; font-size: 16px; } .btn-block { display: flex; width: 100%; } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn-solid:hover { background: var(--gold-bright); box-shadow: var(--sombra-cta-hover); } } .btn:active { transform: translateY(0) scale(0.985); } .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 3px var(--gold-30); } .btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; } .btn-solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); transform: translateX(-120%); animation: brilho 4.5s var(--ease) infinite; pointer-events: none; } @keyframes brilho { 0%, 62% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } } /* ---------- Cards ---------- */ .card { background: var(--bg-elev); border-radius: var(--r-card); padding: clamp(20px, 5vw, 30px); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease); } @media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gold-20), 0 22px 60px -26px rgba(201, 178, 152, 0.3); } } .card h3 { margin-bottom: 10px; } .card p { margin: 0; color: var(--text-mid); font-size: 0.9375rem; } /* ---------- Ícones ---------- */ .ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ico-lg { width: 30px; height: 30px; stroke-width: 1.6; } .ico-sm { width: 16px; height: 16px; } .ico-chip { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; color: var(--accent); background: var(--gold-10); box-shadow: inset 0 0 0 1px var(--gold-20); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill); padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); background: var(--gold-10); box-shadow: inset 0 0 0 1px var(--gold-20); } .badge-solid { background: var(--gold); color: #17140f; box-shadow: none; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: pulso 2.2s ease-in-out infinite; } @keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---------- Formulário ---------- Campos altos e fonte 16px, senão o iOS dá zoom ao focar. */ .field { margin-bottom: 12px; } .field label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .input { width: 100%; min-height: var(--touch); padding: 0 16px; border-radius: var(--r-input); background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-size: 16px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .input::placeholder { color: var(--text-faint); } .input:focus { outline: none; border-color: var(--gold-60); box-shadow: 0 0 0 3px var(--gold-20); } .input[aria-invalid="true"] { border-color: var(--error); } .field-error { display: none; margin: 5px 0 0; font-size: 0.8125rem; color: var(--error); } .field-error[data-show="true"] { display: block; } .form-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-dim); } .form-note .ico { width: 15px; height: 15px; margin-top: 2px; opacity: 0.8; } .form-status { margin: 10px 0 0; font-size: 0.875rem; color: var(--error); } /* ---------- Contador ---------- */ .countdown { display: flex; gap: 8px; } .countdown-cell { flex: 1; min-width: 0; text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--border); } .countdown-num { display: block; font-family: var(--font-mono); font-size: clamp(1.3rem, 6vw, 1.7rem); font-weight: 500; color: var(--accent); line-height: 1.05; font-variant-numeric: tabular-nums; } .countdown-label { display: block; margin-top: 3px; font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } /* ---------- Números de prova ---------- */ .stat-num { font-family: var(--font-mono); font-size: clamp(1.9rem, 8vw, 2.9rem); font-weight: 500; color: var(--accent); line-height: 1; letter-spacing: -0.03em; } .stat-label { margin-top: 8px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-dim); } /* ---------- Qualificação ---------- */ .qual-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .qual-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; } .qual-list strong { display: block; color: var(--text); font-weight: 700; font-size: 0.9375rem; margin-bottom: 3px; letter-spacing: -0.01em; } .qual-list span { color: var(--text-mid); font-size: 0.9375rem; line-height: 1.5; } .qual-yes .ico { color: var(--accent); } .qual-no .ico { color: var(--text-faint); } .qual-no strong { color: var(--text-mid); } .qual-no span { color: var(--text-dim); } /* ---------- Barra fixa de CTA (celular) ---------- */ [data-barra-fixa] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: inset 0 1px 0 var(--border), 0 -12px 40px rgba(0, 0, 0, 0.3); transform: translateY(115%); transition: transform 0.35s var(--ease); } @supports (backdrop-filter: blur(1px)) { [data-barra-fixa] { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } } [data-barra-fixa][data-visivel="true"] { transform: translateY(0); } @media (min-width: 880px) { [data-barra-fixa] { display: none; } } @media (max-width: 879px) { body.tem-barra { padding-bottom: 90px; } } /* ---------- Imagens ---------- */ .img-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .moldura { position: relative; overflow: hidden; border-radius: var(--r-card); background: linear-gradient(150deg, var(--gold-20), transparent 60%), var(--bg-elev); box-shadow: inset 0 0 0 1px var(--border); } /* ---------- Revelação ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } [data-reveal][data-visto="true"] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* ---------- Rodapé ---------- */ footer { padding-block: clamp(36px, 7vw, 56px) clamp(40px, 7vw, 58px); border-top: 1px solid var(--border); } .foot-topo { display: grid; gap: 34px; padding-bottom: 26px; margin-bottom: 22px; border-bottom: 1px solid var(--border); } @media (min-width: 780px) { .foot-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; } } .foot-brand { margin: 0 0 14px; font-size: 0.9375rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .foot-fale { margin: 0 0 12px; font-size: 0.875rem; color: var(--text-mid); } .foot-btn { min-height: 46px; padding: 0 22px; font-size: 14px; } .foot-mail { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 0.8125rem; color: var(--text-dim); } .foot-mail .ico { color: var(--accent); } .foot-mail a { color: var(--text-mid); text-decoration: none; } @media (hover: hover) { .foot-mail a:hover { color: var(--accent); } } .foot-redes .label { margin: 0 0 14px; display: block; } .foot-redes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (min-width: 520px) { .foot-redes ul { grid-template-columns: 1fr 1fr; } } .foot-redes a { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 8px 14px; border-radius: 12px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow 0.3s var(--ease), transform 0.25s var(--ease); } @media (hover: hover) { .foot-redes a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-30); } .foot-redes a:hover b { color: var(--accent); } } .foot-redes .ico { color: var(--accent); width: 19px; height: 19px; } .foot-redes span { display: none; } .foot-redes b { font-size: 0.8125rem; font-weight: 600; color: var(--text-mid); transition: color 0.3s var(--ease); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .foot-legal p { margin: 0 0 5px; font-size: 0.75rem; line-height: 1.5; color: var(--text-dim); } .foot-legal p:last-child { margin-bottom: 0; color: var(--text-faint); } .foot-legal strong { color: var(--text-mid); font-weight: 600; } .foot-legal .mono { font-size: 0.6875rem; } /* ---------- Fatos do hero ---------- Quebra de objeção antes do formulário, como no K21: quanto dura, qual é o formato e para quem é. Cada linha é fato verificável. */ .fatos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; max-width: 50ch; } .fatos li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; } .fatos .ico { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; } .fatos span { font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); } .fatos b { color: var(--text); font-weight: 700; } .ferramentas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-dim); } .ferramentas b { font-weight: 700; font-size: 0.9375rem; color: var(--text-mid); letter-spacing: -0.01em; } .ferramentas i { font-style: normal; color: var(--text-faint); } /* ---------- Página de obrigado ---------- Um objetivo só: entrar no grupo. Tudo o mais é subordinado. */ .progresso { max-width: 420px; margin: 0 0 30px; } .progresso-trilho { position: relative; height: 14px; border-radius: 99px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; } .progresso-barra { height: 100%; width: 95%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright)); transform-origin: left center; animation: encher 1.1s var(--ease) both; } @keyframes encher { from { transform: scaleX(0.04); } to { transform: scaleX(1); } } .progresso-rotulo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; } .progresso-rotulo span { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .progresso-rotulo b { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; color: var(--accent); } @media (prefers-reduced-motion: reduce) { .progresso-barra { animation: none; } } /* Passo único */ .passo { margin-top: 34px; padding: clamp(22px, 5vw, 32px); border-radius: var(--r-card); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--gold-30), 0 24px 70px -34px rgba(0, 0, 0, .6); } .passo-rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .passo h2 { font-size: clamp(1.15rem, 4vw, 1.5rem); margin-bottom: 16px; max-width: 26ch; } .passo-itens { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .passo-itens li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; } .passo-itens .ico { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; } .passo-itens span { font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); } /* Botão do WhatsApp: verde da plataforma, não accent de marca. É reconhecimento de canal, como o azul de um botão de Facebook. */ .btn-whats { background: #25d366; color: #06251a; font-weight: 700; font-size: 16px; min-height: 60px; box-shadow: 0 14px 42px rgba(37, 211, 102, .3); } .btn-whats .ico { width: 22px; height: 22px; stroke-width: 2; } @media (hover: hover) { .btn-whats:hover { background: #2ee574; box-shadow: 0 20px 56px rgba(37, 211, 102, .42); } } .btn-whats[data-inativo="true"] { background: var(--glass); color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; } .btn-whats::after { display: none; } .passo-calma { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--text-dim); } /* Aviso duro */ .atencao { margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: rgba(251, 44, 54, .07); box-shadow: inset 0 0 0 1px rgba(251, 44, 54, .3); display: grid; grid-template-columns: 20px 1fr; gap: 12px; } .atencao .ico { width: 19px; height: 19px; color: var(--error); margin-top: 2px; } .atencao b { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--error); margin-bottom: 5px; } .atencao p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); } .atencao p + p { margin-top: 6px; } /* Secundários */ .depois { margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--border); } .depois-titulo { font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 18px; } /* Cartão de rede social */ .redes-grid { display: grid; gap: 10px; } @media (min-width: 560px) { .redes-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 940px) { .redes-grid { grid-template-columns: repeat(3, 1fr); } } .rede { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: 14px; background: var(--bg-elev); text-decoration: none; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .3s var(--ease), transform .25s var(--ease); } @media (hover: hover) { .rede:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-30); } .rede:hover strong { color: var(--accent); } } .rede .ico { color: var(--accent); } .rede strong { display: block; font-size: .9375rem; font-weight: 700; color: var(--text); transition: color .3s var(--ease); } .rede span { font-size: .8125rem; color: var(--text-dim); } /* ---------- Etapa de qualificação ---------- Uma pergunta por tela. O participante nunca vê pontuação. */ .q-progresso { margin-bottom: 26px; } .q-trilho { height: 6px; border-radius: 99px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; } .q-barra { height: 100%; width: 4%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .45s var(--ease); } .q-contador { margin: 9px 0 0; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); } .q-contador b { font-family: var(--font-mono); color: var(--accent); font-weight: 500; } .q-palco { margin-top: 30px; min-height: 320px; } .q-bloco[data-entrando] { animation: qEntra .32s var(--ease) both; } @keyframes qEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .q-bloco[data-entrando] { animation: none; } } .q-titulo { font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.15rem, 4.4vw, 1.5rem); line-height: 1.25; letter-spacing: -.022em; margin: 0 0 6px; max-width: 30ch; text-wrap: balance; } .q-ajuda { margin: 0 0 18px; font-size: .9375rem; color: var(--text-dim); max-width: 46ch; } .q-opcoes { display: grid; gap: 9px; margin-top: 16px; } .q-opcao { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: center; width: 100%; min-height: 60px; padding: 13px 18px; border: 0; border-radius: 14px; background: var(--bg-elev); color: var(--text); font-family: var(--font-sans); font-size: .9375rem; line-height: 1.4; font-weight: 500; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .22s var(--ease), transform .18s var(--ease), background .22s var(--ease); } .q-opcao span:last-child { text-wrap: pretty; } .q-marca { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); position: relative; transition: box-shadow .2s var(--ease); } .q-marca::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .2s var(--ease); } @media (hover: hover) { .q-opcao:hover { box-shadow: inset 0 0 0 1px var(--gold-30); transform: translateY(-1px); } } .q-opcao:active { transform: scale(.995); } .q-opcao:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-30), 0 0 0 3px var(--gold-20); } .q-opcao[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--gold); background: var(--gold-10); } .q-opcao[aria-checked="true"] .q-marca { box-shadow: inset 0 0 0 1.5px var(--gold); } .q-opcao[aria-checked="true"] .q-marca::after { transform: scale(1); } .q-final { font-size: 1rem; color: var(--text-mid); margin: 0; } .q-rodape { display: flex; gap: 10px; margin-top: 26px; } .q-voltar, .q-pular { min-height: 46px; padding: 0 20px; font-size: 14px; } .q-pular { margin-left: auto; color: var(--text-dim); box-shadow: none; }