/* ============================================================ DESAFIO DE PERCEPÇÃO — VISÃO MASCULINA Folha única do mini-app · dannielmaher.com.br/desafio Tokens herdados do site principal (index.html raiz). Mobile-first a partir de 320px. ESCALA TIPOGRÁFICA FECHADA (ordem do Maestro · 12/08/2026) Existem SOMENTE 3 tamanhos em todo o mini-app, com degrau curto entre eles. Nenhuma regra abaixo pode usar font-size literal — só --fs-g, --fs-m ou --fs-p. ============================================================ */ :root{ /* --- herdado do site principal, sem alteração --- */ --preto:#08080a; --carvao:#0f0f12; --ouro:#c2a14e; --ouro-claro:#d8bd74; /* As duas temperaturas, definidas UMA vez (05/09/2026). Sao usadas nos escopos body.jornada-ele/ela E no hub, que e a unica tela onde "eles" e "elas" aparecem lado a lado e por isso nao pode ter classe de jornada no body. Antes o hub pintava os dois filetes com --ouro e --ouro-claro: duas variacoes da MESMA cor, ou seja, a disputa que esta rodada instalou nao chegava justamente na tela que a anuncia. */ --tom-ele:#8fa8b8; /* aço · frio */ --tom-ele-claro:#c2d4de; --tom-ela:#c98f3f; /* âmbar · quente */ --tom-ela-claro:#e6b874; --ivory:#efe9da; --muted:#bdb5a6; /* --- derivados, exclusivos do mini-app --- */ --linha:rgba(194,161,78,.18); --linha-forte:rgba(194,161,78,.45); --card:rgba(255,255,255,.022); --card-hover:rgba(194,161,78,.06); --card-sel:rgba(194,161,78,.10); /* #c96a5a dava 5,42:1 contra o --preto: passava em AA (4,5:1) e falhava no piso de 7:1 do projeto. Era o unico texto da folha abaixo do piso. #e08a78 da ~7,9:1. O estado .perigo .btn:hover inverte para background:var(--erro);color:var(--preto), e nesse sentido o contraste tambem sobe — a troca e segura nos dois. */ --erro:#e08a78; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; /* ---- OS 3 TAMANHOS · degrau curto · −15% em 12/08/2026 ---- */ --fs-g:1.46rem; /* GRANDE — perguntas e títulos (era 1.72) */ --fs-m:1.11rem; /* MÉDIO — texto, opções, campos (era 1.30) */ --fs-p:0.97rem; /* PEQUENO — etiquetas, botões, rodapé (era 1.14) */ --dur:180ms; /* dentro da faixa 150–220ms do Blueprint */ --ease:cubic-bezier(.4,0,.2,1); --raio:4px; --wrap:660px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* e-mails e URLs longos nunca empurram o layout em telas de 320px */ p,li,td,th,a,span,h1,h2,h3{overflow-wrap:anywhere} body{ background:var(--preto); color:var(--ivory); font-family:var(--sans); font-size:var(--fs-m); font-weight:300; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100svh; } h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.16;letter-spacing:.3px;font-size:var(--fs-g)} img{max-width:100%;height:auto;display:block} a{color:var(--ouro);text-decoration:none;transition:color var(--dur) var(--ease)} a:hover{color:var(--ouro-claro)} code{font-family:var(--sans);font-size:var(--fs-p)} /* ---------- acessibilidade ---------- */ :focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:2px} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ============================================================ BARRA DE PROGRESSO — herdada de .barra do site Sempre verdadeira. Nunca porcentagem falsa. ============================================================ */ .barra{ position:fixed;top:0;left:0;height:3px;width:0;z-index:99; background:linear-gradient(90deg,var(--ouro),var(--ouro-claro)); transition:width var(--dur) var(--ease); } /* ============================================================ HEADER — logo grande (3× · ordem do Maestro) No modo focado do questionário o header NÃO é fixo: rola junto e devolve a tela inteira para as opções. ============================================================ */ .dm-header{ position:sticky;top:0;z-index:50; background:rgba(8,8,10,.96); border-bottom:1px solid var(--linha); backdrop-filter:blur(6px); } .dm-header .in{ max-width:var(--wrap);margin:0 auto; padding:14px 22px; display:flex;align-items:center;justify-content:space-between;gap:16px; } /* 132px em toda parte, MENOS nas telas do questionário — 06/09/2026. Medido pela auditoria de tráfego pago: a 132px o logo come ~30% da altura útil do WebView do Instagram, e cada pixel dele é um cartão de opção a menos na primeira tela. O alívio que existia só valia abaixo de 359px, deixando de fora o Android de 360px, que é comum no Brasil. Escopado em .dm-header.focus: o hub e as páginas públicas seguem com o logo grande. A auditoria recomendou 56px; 72px é o número que já estava na mesa com o Maestro. Reverter é trocar este valor. */ .dm-logo{height:132px;width:auto;opacity:1} .dm-header.focus .dm-logo{height:72px} .dm-edicao{ font-size:var(--fs-p);letter-spacing:2.4px;text-transform:uppercase; color:var(--muted);font-weight:500; } .dm-header.focus{position:static;background:none;backdrop-filter:none} .dm-header.focus .in{justify-content:center;padding:20px 22px 6px} .dm-header.focus .dm-edicao{display:none} /* ============================================================ LAYOUT ============================================================ */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px} /* BUG-02 · a reserva inferior acompanha a barra de ações daquela tela. 1 ação (questionário) → barra ~106px 2 ações (hub) → barra ~202px, porque os botões empilham */ .tela{ display:flex;flex-direction:column;justify-content:flex-start; padding-top:16px; padding-bottom:var(--reserva,150px); } .tela.acoes-duplas{--reserva:230px} .tela[hidden]{display:none} .kicker{ font-family:var(--sans);font-size:var(--fs-p);letter-spacing:2.4px; text-transform:uppercase;color:var(--ouro);font-weight:500; margin-bottom:10px;line-height:1.32; } .pergunta{ font-size:var(--fs-g); margin-bottom:10px;letter-spacing:.2px; } .apoio{ color:var(--muted);font-size:var(--fs-m);line-height:1.48; margin-bottom:17px;max-width:46ch; } /* divisória herdada do site (✦ ◆ ✦) */ /* var(), nao literal — 05/09/2026. rgba(216,189,116,.6) era o valor escrito a mao de --ouro-claro: a regra ficava dourada mesmo nas rotas re-escopadas, no meio de um gradiente cujas pontas ja eram variavel. */ .divisor{position:relative;height:1px;margin:44px 0;background: linear-gradient(90deg,transparent,var(--linha-forte) 38%,var(--ouro-claro) 50%,var(--linha-forte) 62%,transparent)} .divisor::after{ content:"✦ ◆ ✦";position:absolute;top:-12px;left:50%;transform:translateX(-50%); color:var(--ouro);font-size:var(--fs-p);letter-spacing:7px;line-height:1; text-shadow:0 0 10px var(--linha-forte),0 0 4px rgba(8,8,10,.95); } /* ============================================================ OPTION CARD — linha inteira clicável, sem imagem, sem emoji ============================================================ */ .opcoes{list-style:none;display:flex;flex-direction:column;gap:7px} .opcao{ display:flex;align-items:flex-start;gap:14px; width:100%;text-align:left; padding:12px 16px; min-height:50px; background:var(--card); border:1px solid var(--linha); border-radius:var(--raio); color:var(--ivory); font-family:var(--sans);font-size:var(--fs-m);font-weight:300;line-height:1.32; cursor:pointer; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .opcao:hover{background:var(--card-hover);border-color:var(--linha-forte)} .opcao:active{transform:scale(.994)} .opcao small{font-size:var(--fs-p)} /* marca de seleção: NUNCA só cor (§25 acessibilidade) */ .opcao .marca{ flex-shrink:0;width:22px;height:22px;margin-top:2px; border:1px solid var(--linha-forte);border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:var(--fs-p);line-height:1;color:transparent; transition:all var(--dur) var(--ease); } .opcao[aria-pressed="true"]{background:var(--card-sel);border-color:var(--ouro)} .opcao[aria-pressed="true"] .marca{background:var(--ouro);border-color:var(--ouro);color:var(--preto)} .opcao[aria-pressed="true"] .marca::after{content:"✓";font-weight:700} .opcao[aria-pressed="true"] .txt{color:#fff} /* feedback de bloqueio ao tentar a 3ª opção */ .opcao.recusa{animation:recusa 320ms var(--ease)} @keyframes recusa{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} } /* ============================================================ CONTADOR DE ESCOLHAS ============================================================ */ .contador{ display:flex;align-items:center;gap:10px; margin:14px 0 5px; font-size:var(--fs-p);letter-spacing:1.4px;text-transform:uppercase; color:var(--muted);font-weight:500; } .contador.completo{color:var(--ouro)} .contador .pip{width:8px;height:8px;border-radius:50%;background:var(--linha-forte);transition:background var(--dur) var(--ease)} .contador .pip.on{background:var(--ouro)} .aviso{ min-height:1.3em;margin-top:9px; font-size:var(--fs-p);color:var(--erro); opacity:0;transition:opacity var(--dur) var(--ease); } .aviso.on{opacity:1} /* ============================================================ BOTÕES — base herdada de .nav-cta do site ============================================================ */ .acoes{ position:fixed;left:0;right:0;bottom:0;z-index:40; background:linear-gradient(180deg,rgba(8,8,10,0),rgba(8,8,10,.94) 26%,var(--preto)); padding:28px 22px 22px; } .acoes .in{max-width:var(--wrap);margin:0 auto;display:flex;gap:11px;align-items:center} .btn{ flex:1; display:inline-flex;align-items:center;justify-content:center; min-height:56px;padding:15px 26px; border:1px solid var(--ouro);border-radius:32px; background:transparent;color:var(--ouro); font-family:var(--sans);font-size:var(--fs-p);font-weight:500; letter-spacing:1.6px;text-transform:uppercase;text-align:center;line-height:1.25; cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease), opacity var(--dur) var(--ease),border-color var(--dur) var(--ease); } .btn:hover:not(:disabled){background:var(--ouro);color:var(--preto)} .btn:disabled{opacity:.3;cursor:not-allowed;border-color:var(--muted);color:var(--muted)} .btn.cheio{background:var(--ouro);color:var(--preto)} .btn.cheio:hover:not(:disabled){background:var(--ouro-claro);border-color:var(--ouro-claro)} /* O anel usava var(--linha-forte) — a cor da jornada a 48% de opacidade, o que sobre o preto do rodape da ~2,4:1: abaixo do minimo de 3:1 para contorno de componente, e muito abaixo do piso de 7:1 que esta folha declara para si mesma. No sol, num celular, o botao sumia. Agora usa a cor cheia da jornada — que e exatamente o que o :hover logo abaixo ja fazia. A largura fixa virou minima, para caber o rotulo "← VOLTAR". (08/09/2026) */ .btn-voltar{ flex:0 0 auto;min-width:56px;height:56px;padding:0 18px; border-radius:32px;border-color:var(--ouro);color:var(--ivory); font-size:var(--fs-p);letter-spacing:1.4px; } .btn-voltar:hover{background:transparent;border-color:var(--ouro);color:var(--ouro)} .btn-texto{ background:none;border:none;color:var(--muted); font-family:var(--sans);font-size:var(--fs-p);letter-spacing:.4px; text-decoration:underline;text-underline-offset:3px;cursor:pointer; padding:10px 4px; } .btn-texto:hover{color:var(--ivory)} /* ============================================================ FORMULÁRIO (perfil, campo aberto, opt-in) ============================================================ */ .campo{margin-bottom:28px} .campo > label,.campo .rot{ display:block;margin-bottom:10px; font-size:var(--fs-p);letter-spacing:1.8px;text-transform:uppercase; color:var(--ouro);font-weight:500; } .campo .opcional{color:var(--muted);text-transform:none;letter-spacing:.3px;font-size:var(--fs-p)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ padding:12px 17px;min-height:48px; background:var(--card);border:1px solid var(--linha);border-radius:24px; color:var(--ivory);font-family:var(--sans);font-size:var(--fs-p);font-weight:300; cursor:pointer;transition:all var(--dur) var(--ease); } .chip:hover{border-color:var(--linha-forte);background:var(--card-hover)} .chip[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--preto);font-weight:500} textarea,input[type="text"],input[type="email"],input[type="tel"],input[type="password"]{ width:100%;padding:15px 16px; background:var(--card);border:1px solid var(--linha);border-radius:var(--raio); color:var(--ivory);font-family:var(--sans);font-size:var(--fs-m);font-weight:300;line-height:1.55; transition:border-color var(--dur) var(--ease); } textarea{min-height:120px;resize:vertical} textarea:focus,input:focus{border-color:var(--ouro);outline:none} ::placeholder{color:rgba(189,181,166,.55)} .contagem-char{ margin-top:7px;text-align:right; font-size:var(--fs-p);color:var(--muted);font-variant-numeric:tabular-nums; } /* checkbox de consentimento — nunca pré-marcado */ .consent{ display:flex;align-items:flex-start;gap:12px; margin-top:18px;padding:15px 16px; background:var(--card);border:1px solid var(--linha);border-radius:var(--raio); cursor:pointer;transition:border-color var(--dur) var(--ease); } .consent:hover{border-color:var(--linha-forte)} .consent input{flex-shrink:0;width:20px;height:20px;margin-top:2px;accent-color:var(--ouro);cursor:pointer} .consent span{font-size:var(--fs-p);line-height:1.5;color:var(--ivory)} /* ============================================================ TEMPERATURA POR JORNADA — 05/09/2026 · caneta do Maestro Ele em FRIO/AÇO, ela em QUENTE/ÂMBAR. Não é fundo: é a INTERFACE INTEIRA que muda de temperatura. Barra de progresso, kicker, contador, marca de seleção, borda do cartão escolhido, botão — tudo. É impossível não ver, e custa ZERO de legibilidade, porque não coloca nada atrás do texto. O painel de direção de arte reprovou as 6 propostas de fundo fotográfico: numa tela 80% ocupada por texto e cartões, sobra uma tira de 40px atrás do logo. "A disputa existe só no documento, nunca na retina." A temperatura resolve o que o fundo não resolvia. ============================================================ */ body.jornada-ele{ --ouro:var(--tom-ele); --ouro-claro:var(--tom-ele-claro); --linha:rgba(143,168,184,.20); --linha-forte:rgba(143,168,184,.48); --card-hover:rgba(143,168,184,.07); --card-sel:rgba(143,168,184,.12); } body.jornada-ela{ --ouro:var(--tom-ela); --ouro-claro:var(--tom-ela-claro); --linha:rgba(201,143,63,.20); --linha-forte:rgba(201,143,63,.48); --card-hover:rgba(201,143,63,.07); --card-sel:rgba(201,143,63,.12); } /* ============================================================ FUNDO DO NÚCLEO — "Luz Lacrada" · instalado em 05/09/2026 UM ÚNICO arquivo para TODAS as telas do questionário, masculino e feminino. É a trava do §15: imagem diferente por alternativa enviesaria a escolha e invalidaria a pesquisa. Fundo igual em todas não cria diferença entre elas — logo, não enviesa. A luz desce pela DIREITA de propósito. A primeira versão vinha com a luz no canto superior esquerdo e media 3,9:1 de contraste na coluna onde o texto cai — abaixo dos 7:1 exigidos. Espelhada, a mesma coluna mede 16,0:1. Medição da coluna do texto (miolo 18–78%, terço esquerdo): 0,30% · 0,34% · 0,38% · 0,42% de luminância → contraste 16,0:1 Teto para 7:1 é 7,38%. Passa com folga de mais do dobro. Fica num pseudo-elemento fixo em vez de background-attachment:fixed, que engasga no Safari do iPhone. ============================================================ */ body.fundo-nucleo::before{ content:""; position:fixed;inset:0;z-index:-1; background-color:var(--preto); /* O VEU vem PRIMEIRO na lista porque a primeira camada e a de cima. Ver o bloco "VEU" logo abaixo para os numeros que definem o 0.48. */ background-image: linear-gradient(to bottom, rgba(8,8,10,0) 0%, rgba(8,8,10,0) 13%, rgba(8,8,10,.48) 26%, rgba(8,8,10,.48) 100%), url('/desafio/assets/fundo-nucleo-mobile.webp'); background-size:auto, cover; background-position:center, center; background-repeat:no-repeat, no-repeat; } /* ------------------------------------------------------------ VEU SOBRE A FAIXA DO TEXTO — 05/09/2026 ERRO DO CODE, TERCEIRA MEDICAO ERRADA DO MESMO FUNDO. As duas primeiras mediram so o terco esquerdo (os cartoes ocupam a largura toda). A terceira mediu a largura certa mas reduziu a imagem 10x com reamostragem BOX antes de medir — e a media de blocos 10x10 APAGOU o estouro. O "PASSA" que eu dei nao existia. Medicao correta, render de navegador 390x844, pixel a pixel, faixa 18-92% da altura (do kicker ao rodape do CTA): sem veu, rota ele .... pico 23,22% -> contraste 3,1:1 REPROVA sem veu, rota ela .... pico 31,99% -> contraste 2,3:1 REPROVA O pico fica em x=89% / y=34% — em cima da .pergunta e do primeiro cartao. O .opcao tem fundo rgba(255,255,255,.022): nao salva nada. Varredura do alfa ate caber no teto de 7,38% (contraste 7:1 contra o #efe9da), ja com o brilho da rota ela corrigido: alfa 0,30 -> ele 11,37% (5,3:1) ela 10,82% (5,5:1) estoura alfa 0,36 -> ele 9,54% (6,0:1) ela 9,06% (6,2:1) estoura alfa 0,42 -> ele 8,02% (6,7:1) ela 7,60% (6,9:1) estoura alfa 0,48 -> ele 6,54% (7,5:1) ela 6,18% (7,8:1) PASSA O veu comeca so em 13% da altura e chega ao valor cheio em 26%: a ZONA LIVRE DO TOPO fica com a imagem em brilho pleno. E a unica faixa da tela onde nao ha texto — logo, e a unica onde impacto e contraste nao brigam. Todo o resto da tela ja e quase preto, entao o veu nao custa nada ali: ele so morde o lobo de luz. ------------------------------------------------------------ */ @media(min-width:900px){ /* O VEU PRECISA SER REPETIDO AQUI. background-image aceita uma LISTA de camadas; declarar um unico url() nao troca a imagem de fundo — troca a lista inteira, e o veu simplesmente deixa de existir no desktop. O pico do arquivo desktop e 43,18% de luminancia (contraste 1,8:1): sem o veu, o desktop reprovaria sozinho. */ body.fundo-nucleo::before{ background-image: linear-gradient(to bottom, rgba(8,8,10,0) 0%, rgba(8,8,10,0) 13%, rgba(8,8,10,.48) 26%, rgba(8,8,10,.48) 100%), url('/desafio/assets/fundo-nucleo-desktop.webp'); } } /* (A regra body.fundo-nucleo .dm-header.focus{background:none} foi removida em 05/09/2026: .dm-header.focus ja zera o fundo em TODA pagina, algumas centenas de linhas acima. Ela nao mudava nada — so subia a especificidade daquela declaracao.) */ /* ------------------------------------------------------------ TEMPERATURA DO FUNDO POR JORNADA — 05/09/2026 Caneta do Maestro: "fundos diferentes p homens respondendo e pra mulheres respondendo. ele em frio/aco, ela em quente/ambar". NAO e um segundo arquivo de imagem: e a MESMA luz, girada no espectro por filtro. Isso mantem a trava do paragrafo 15 (o fundo e identico em todas as alternativas de uma mesma rota, logo nao enviesa a escolha) e nao adiciona um byte de download. O filtro roda no pseudo-elemento, que nao tem descendentes — nenhum texto passa pelo filtro, so a imagem. O contraste foi remedido depois do filtro, com o teto de 7,38% de luminancia para 7:1 contra o #efe9da. Os numeros estao no comentario de cada regra. ------------------------------------------------------------ */ body.jornada-ele.fundo-nucleo::before{ filter:hue-rotate(168deg) saturate(.82) brightness(.90); } /* brightness ABAIXO de 1: calor vem de saturacao, nao de brilho. O 1.02 anterior AUMENTAVA o pico de luz (31,99% contra 23,22% da rota ele) e sozinho obrigava um veu de 0,58 em vez de 0,48. Com 0,86 as duas rotas partem do mesmo patamar e o veu pode ser mais leve — sobra mais imagem na tela. A separacao de temperatura nao se perde: R-B medio da faixa visivel = -2,8 (ele, frio) contra +4,5 (ela, quente). */ body.jornada-ela.fundo-nucleo::before{ filter:saturate(1.42) hue-rotate(-9deg) brightness(.86); } /* ============================================================ DATA DO REVEAL — 04/09/2026 O prazo existia no banco e não aparecia em tela nenhuma. Prazo que ninguém vê não cria urgência: é o que faz a barra parar de andar. ============================================================ */ .reveal-data{ margin-top:22px;padding:20px 18px;text-align:center; border:1px solid var(--linha-forte);border-radius:var(--raio); background:var(--card); } .reveal-rot{ font-family:var(--sans);font-size:var(--fs-p); letter-spacing:2.6px;text-transform:uppercase; color:var(--muted);font-weight:500;margin-bottom:8px; } .reveal-dia{ font-family:var(--serif);font-size:var(--fs-g);line-height:1.2; color:var(--ouro-claro);margin-bottom:6px; } .reveal-conta{ font-family:var(--sans);font-size:var(--fs-p); color:var(--ouro);font-weight:500;letter-spacing:.6px;margin:0; } /* linha curta, para o hub e a tela lacrada */ .reveal-linha{ margin-top:14px;text-align:center; font-size:var(--fs-p);letter-spacing:.6px;color:var(--ouro); } /* ============================================================ CHAMADA EM DESTAQUE — a tese do produto (02/09/2026 · PM-04) Era um parágrafo de apoio discreto. Vira o segundo ponto de peso da página, depois do título. Fica na escala travada: --fs-g. ============================================================ */ .chamada{ margin:30px 0 6px;padding:26px 0; border-top:1px solid var(--linha-forte); border-bottom:1px solid var(--linha-forte); text-align:center; } .chamada-rotulo{ font-family:var(--sans);font-size:var(--fs-p); letter-spacing:6px;text-transform:uppercase; color:var(--ouro);font-weight:600;margin-bottom:14px; } .chamada-txt{ font-family:var(--serif);font-size:var(--fs-g); line-height:1.28;letter-spacing:.3px; color:var(--ouro-claro); max-width:24ch;margin:0 auto; } /* ============================================================ BLOCOS DO HUB — vozes separadas (02/09/2026 · PM-05) "Eles" e "elas" nunca acontecem ao mesmo tempo. A cor e o filete marcam de quem é a vez; o rótulo diz quando. ============================================================ */ .hub-bloco + .hub-bloco{margin-top:4px} .hub-rot{ font-family:var(--sans);font-size:var(--fs-p); letter-spacing:2.6px;text-transform:uppercase; font-weight:600;margin-bottom:7px; } .hub-bloco.tom-eles, .hub-bloco.tom-elas{ padding:16px 0 16px 18px; border-left:2px solid; margin-bottom:14px; } /* ESPECIFICIDADE: precisa ser .hub-bloco.tom-* (0,2,0) para vencer o atalho border-left:2px solid da regra acima, que tem a MESMA especificidade e vem antes. Escrito como .tom-eles (0,1,0), o filete perdia e caia em currentColor — os dois lados do hub apareciam em marfim, nao em cor nenhuma de jornada. Defeito anterior a esta rodada; medido no DOM em 05/09/2026: border-left-color computava rgb(239,233,218) nos dois blocos. */ /* ELES — aço. A MESMA cor que a rota masculina usa em /desafio/homens/, para que o hub já anuncie a temperatura que a pessoa vai encontrar. */ .hub-bloco.tom-eles{border-left-color:var(--tom-ele)} .tom-eles .hub-rot{color:var(--tom-ele-claro)} .tom-eles .apoio{color:var(--ivory);margin-bottom:0} /* ELAS — âmbar. Idem, espelhando /desafio/mulheres/. */ .hub-bloco.tom-elas{border-left-color:var(--tom-ela)} .tom-elas .hub-rot{color:var(--tom-ela-claro)} .tom-elas .apoio{color:var(--ivory);margin-bottom:0} /* ============================================================ INTRODUÇÃO — como o desafio funciona (02/09/2026) Vive dentro da tela de entrada. Numeração 1-4 porque é sequência real: uma etapa só acontece depois da anterior fechar. ============================================================ */ .intro{ margin-top:22px;padding-top:16px; border-top:1px solid var(--linha); } .intro-titulo{ font-family:var(--serif);font-weight:400; font-size:var(--fs-m);line-height:1.25;letter-spacing:.3px; color:var(--ouro);margin:0 0 22px;text-wrap:balance; } .intro-etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .intro-etapas li{display:flex;gap:14px;align-items:flex-start} .intro-etapas .passo{ flex:0 0 26px;height:26px;margin-top:1px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--linha-forte);border-radius:50%; font-size:var(--fs-p);font-weight:600;color:var(--ouro); font-variant-numeric:tabular-nums; } .intro-etapas b{display:block;color:var(--ivory);font-weight:500;font-size:var(--fs-m);margin-bottom:3px} .intro-etapas span:not(.passo){display:block;color:var(--muted);font-size:var(--fs-m);line-height:1.42} .intro-meta{ margin-top:24px;padding:16px 18px; border:1px solid var(--linha);border-radius:var(--raio);background:var(--card); } .intro-meta-rot{ margin:0 0 6px;font-family:var(--sans);font-size:var(--fs-p); letter-spacing:2.2px;text-transform:uppercase;color:var(--ouro);font-weight:500; } .intro-meta-txt{margin:0;color:var(--ivory);font-size:var(--fs-m);line-height:1.55} .intro-rodape{margin:18px 0 0;color:var(--muted);font-size:var(--fs-p);line-height:1.5;font-style:italic} /* ============================================================ TELA LACRADA ============================================================ */ .selo{ display:inline-flex;align-items:center;gap:10px; padding:9px 20px;margin-bottom:24px; border:1px solid var(--ouro);border-radius:30px; font-size:var(--fs-p);letter-spacing:3.2px;text-transform:uppercase; color:var(--ouro);font-weight:600; } .selo::before{content:"◆";letter-spacing:0} /* color: e o que o SVG do lacre herda via currentColor (05/09/2026). Sem esta linha o lacre ficava dourado nas duas rotas, porque as cores estavam escritas a mao dentro do JS. */ .lacre{width:88px;height:88px;margin:0 auto 26px;display:block;opacity:.9;color:var(--ouro)} /* Saídas da tela terminal de quem JÁ respondeu (02/09/2026). Não são CTA: são portas para fora do questionário, discretas, como manda o §22 do prompt-mestre — a navegação do ecossistema só aparece depois que a resposta está lacrada, nunca durante o core. */ .saidas{ display:flex;flex-direction:column;gap:2px; margin-top:34px;border-top:1px solid var(--linha);padding-top:8px; } .saida{ padding:15px 2px;border-bottom:1px solid var(--linha); font-size:var(--fs-p);letter-spacing:.2px; } .saida:last-child{border-bottom:0} .saida::after{content:"→";float:right;opacity:.55} /* ------------------------------------------------------------ RESPONDER DE NOVO — 05/09/2026, caneta do Maestro. É um