/* os tokens vivem no bloco do design system, no fim deste arquivo */ *{box-sizing:border-box} body{background:var(--ground);color:var(--bone);font-family:var(--sans);font-weight:300;font-size:var(--t3);line-height:1.6;margin:0;-webkit-font-smoothing:antialiased} .wrap{max-width:640px;margin:0 auto;padding:40px 22px 60px} h1,h2{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance} p{margin:0 0 16px;max-width:62ch} button{font-family:inherit;font-size:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--ochre);outline-offset:3px} [hidden]{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .marca{font-family:var(--serif);font-size:var(--t5);letter-spacing:.02em} .marca span{color:var(--ochre)} .topo{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair);padding-bottom:14px;margin-bottom:40px;gap:16px} .link{background:none;border:1px solid transparent;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:11px 12px} .link:hover{color:var(--ochre)} .tela{display:none} .tela.on{display:block;animation:sobe .45s ease both} /* a chegada pela pergunta, desde 30/09/2026 (auditoria do celular, item 2), js/chegada.js */ html.chega-pergunta #t-inicio{display:none} html.chega-pergunta #t-pergunta{display:block} html.chega-pergunta #avisoNavegantes{display:none} html.chega-pergunta #t-pergunta .volta-rot .rot{visibility:hidden} html.chega-anuncio #t-pergunta{visibility:hidden} /* O CARREGANDO DA CHEGADA DO ANÚNCIO, desde 05/10/2026 (o lampejo da pergunta que o André viu no Safari, com a rede lenta). Enquanto a marca chega-anuncio está na página, no lugar da tela preta, o símbolo da Sybila em ocre, no meio da tela, respirando devagar. Só CSS, sem texto, e na primeira folha (setup/css_primeira.js, SEMPRE html.chega-) */ html.chega-anuncio::after{content:"";position:fixed;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C58A3D' stroke-linecap='round'%3E%3Cpath stroke-width='2.6' d='M50.00 3.00L50.00 14.00M61.39 7.50L59.58 14.26M73.50 9.30L68.00 18.82M81.11 18.89L76.16 23.84M90.70 26.50L81.18 32.00M92.50 38.61L85.74 40.42M97.00 50.00L86.00 50.00M92.50 61.39L85.74 59.58M90.70 73.50L81.18 68.00M81.11 81.11L76.16 76.16M73.50 90.70L68.00 81.18M61.39 92.50L59.58 85.74M50.00 97.00L50.00 86.00M38.61 92.50L40.42 85.74M26.50 90.70L32.00 81.18M18.89 81.11L23.84 76.16M9.30 73.50L18.82 68.00M7.50 61.39L14.26 59.58M3.00 50.00L14.00 50.00M7.50 38.61L14.26 40.42M9.30 26.50L18.82 32.00M18.89 18.89L23.84 23.84M26.50 9.30L32.00 18.82M38.61 7.50L40.42 14.26'/%3E%3Ccircle stroke-width='2.8' cx='50' cy='50' r='22'/%3E%3Ccircle stroke-width='2.8' cx='50' cy='50' r='15.5'/%3E%3Ccircle stroke-width='2.8' cx='50' cy='50' r='9'/%3E%3C/g%3E%3Ccircle fill='%23C58A3D' cx='50' cy='50' r='5.5'/%3E%3C/svg%3E") center/contain no-repeat;animation:sy-respira 2.8s ease-in-out infinite} @keyframes sy-respira{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){html.chega-anuncio::after{animation:none}} .tela:focus{outline:none} @keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} h1.abre{font-size:clamp(var(--t6),7vw,var(--t7));line-height:1.05;margin-bottom:18px} h1.media{font-size:clamp(var(--t5),5.5vw,var(--t6));line-height:1.08;margin-bottom:16px} h1.abre em{font-style:italic;color:var(--ochre)} /* a linha que abre. O parágrafo explicativo que ficava entre ela e as portas saiu: a margem daqui absorveu o respiro que era dele. */ .sub{color:var(--muted);font-size:var(--t4);line-height:1.45;margin-bottom:36px} .portas{display:grid;gap:1px;background:var(--borda);border:1px solid var(--borda)} .porta{background:var(--surface);border:none;color:var(--bone);text-align:left;padding:24px 22px;display:block;width:100%;transition:background .2s} .porta:hover{background:#1a1722} .porta .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:10px} .porta strong{font-family:var(--serif);font-weight:400;font-size:var(--t4);display:block;margin-bottom:8px} .porta small{color:var(--muted);font-size:var(--t2);line-height:1.5;display:block;font-weight:300} fieldset{border:none;padding:0;margin:0 0 30px} .quantos{display:flex;gap:22px;align-items:center;color:var(--muted);font-size:var(--t2)} .quantos label{display:flex;gap:8px;align-items:center;cursor:pointer;padding:8px 0} .quantos input{accent-color:var(--slate);width:17px;height:17px} /* --------------------------------------------------------------------- AS TELAS DA TIRAGEM, NO DESENHO DA PRANCHA «FLUXO FINAL» --------------------------------------------------------------------- Telas 02, 03 e 04a, de 17 e 18/09/2026. Saíram as três abas da pergunta, a grade de temas em caixas e os rádios nativos de quantas cartas. Entram o campo aberto com o fio ocre, os assuntos em chips, os quatro formatos em cartão e o corte do baralho. --------------------------------------------------------------------- */ .volta-rot{background:none;border:none;display:flex;align-items:center;gap:8px; padding:10px 0;margin:0 0 var(--e3);min-height:44px;cursor:pointer} .volta-seta{color:var(--muted);font-family:var(--serif);font-size:var(--t3)} /* o campo não é caixa: é a folha com o fio ocre à esquerda */ .campo-pergunta{border-left:2px solid var(--ochre);background:var(--surface); padding:var(--e3) var(--e3) var(--e2);margin:var(--e4) 0 0} .campo-pergunta textarea{background:none;border:none;padding:0;font-family:var(--serif); font-size:var(--t4);line-height:1.35;min-height:88px;resize:none} .campo-pergunta textarea:focus{border:none;outline:none} .campo-conta{border-top:1px solid var(--borda);margin:var(--e2) 0 0;padding-top:var(--e2); font-family:var(--mono);font-size:var(--t0);color:var(--muted);text-align:right} .chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--e2) 0 var(--e5)} .chip-assunto{background:none;border:1px solid var(--borda);color:var(--bone); font-family:var(--sans);font-weight:300;font-size:var(--t1); padding:11px 13px;min-height:44px;cursor:pointer} .chip-assunto:hover{border-color:var(--muted)} .chip-assunto[aria-pressed="true"]{border-color:var(--ochre);color:var(--ochre)} /* os quatro formatos, em cartão com miniatura */ .formatos{display:flex;flex-direction:column;gap:7px;margin:0 0 var(--e5)} .formato{display:flex;align-items:center;gap:13px;background:none;border:1px solid var(--borda); padding:12px 14px;text-align:left;cursor:pointer;min-height:44px;width:100%} .formato:hover{border-color:var(--muted)} .formato[aria-pressed="true"]{border-color:var(--ochre);background:#1c1a26} .formato-texto{flex:1 1 auto;min-width:0} .formato-nome{display:block;font-family:var(--serif);font-size:var(--t3);color:var(--bone)} .formato[aria-pressed="true"] .formato-nome{color:var(--ochre)} .formato-desc{display:block;font-size:var(--t1);color:var(--muted);margin-top:2px} /* a segunda linha de cada cartão, em versalete, igual nos quatro. Desde 18/09/2026 à tarde os quatro formatos são grátis e nenhum cartão tem preço: o que se paga é a leitura da pergunta, pedida depois das cartas */ .formato-gratis{display:block;margin-top:5px;font-family:var(--serif);font-weight:500;font-size:11.5px; letter-spacing:.1em;font-variant-caps:small-caps;color:var(--ochre)} /* a miniatura mostra a forma da tiragem, e não o número. Lote 4 do Design, 18/09/2026. Os quatro SVGs de img/tiragem/ são de uma cor só, e aqui eles entram como máscara, pintados com a cor do texto, para o mesmo arquivo servir no escuro e no claro. Os sete traços em leque da ferradura saíram, porque em 36 px pediam que a pessoa contasse. */ .mini-tiragem{flex:none;display:block;width:56px;height:36px;background-color:currentColor;color:var(--bone); -webkit-mask:var(--forma) center/contain no-repeat;mask:var(--forma) center/contain no-repeat} .mini-tiragem[data-forma="uma"]{--forma:url(/img/tiragem/tiragem-uma-36.svg)} .mini-tiragem[data-forma="tres"]{--forma:url(/img/tiragem/tiragem-tres-36.svg)} .mini-tiragem[data-forma="ferradura"]{--forma:url(/img/tiragem/tiragem-ferradura-36.svg)} .mini-tiragem[data-forma="cruz-celta"]{--forma:url(/img/tiragem/tiragem-cruz-celta-36.svg)} @media(min-width:900px){ .mini-tiragem{width:88px;height:56px} .mini-tiragem[data-forma="uma"]{--forma:url(/img/tiragem/tiragem-uma-56.svg)} .mini-tiragem[data-forma="tres"]{--forma:url(/img/tiragem/tiragem-tres-56.svg)} .mini-tiragem[data-forma="ferradura"]{--forma:url(/img/tiragem/tiragem-ferradura-56.svg)} .mini-tiragem[data-forma="cruz-celta"]{--forma:url(/img/tiragem/tiragem-cruz-celta-56.svg)} } /* as invertidas numa linha só, lote 4 do Design, 18/09/2026. O rótulo, um fio que ocupa o que sobra, e os dois botões lado a lado; a frase vem embaixo, curta. Foi este bloco que pagou o espaço do quarto cartão. */ .inv-linha{margin:0 0 var(--e4)} .inv-cabeca{display:flex;align-items:center;gap:10px;margin:0 0 var(--e2)} .inv-cabeca .rot{flex:none;margin:0} .inv-fio{flex:1 1 auto;height:1px;background:var(--borda);min-width:12px} .inv-botoes{flex:none;display:flex;gap:6px} .btn-inv{background:none;border:1px solid var(--borda);color:var(--bone);font-family:var(--sans);font-weight:300; font-size:var(--t1);min-height:44px;padding:0 15px;cursor:pointer} .btn-inv[aria-pressed="true"]{background:var(--papel);border-color:#8D8573;color:var(--ground);font-weight:400} .inv-linha .dica{font-size:var(--t05);line-height:1.5;margin:0} #t-tiragem .tiragem-linha{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 var(--e4)} /* o corte: a pilha de dorsos, com a gravura do verso de 1909 */ .pilha{position:relative;height:210px;margin:var(--e5) 0 var(--e4)} .pilha i{position:absolute;left:50%;top:0;width:130px;height:184px;display:block; background:#2E7FB0 url("/img/cartas/verso-360.webp") center/cover no-repeat; border:1px solid var(--ochre-fio);transform:translateX(-50%)} .pilha i:nth-child(1){top:10px;transform:translateX(-50%) rotate(-5deg)} .pilha i:nth-child(2){top:5px;transform:translateX(-50%) rotate(3deg)} .corte-linha{text-align:center;color:var(--muted);font-size:var(--t2);margin:0 0 var(--e5)} .btn.largo{width:100%;min-height:54px} .btn-texto{background:none;border:none;color:var(--muted);font-family:var(--sans); font-weight:300;font-size:var(--t1);padding:11px 0;min-height:44px;cursor:pointer; text-decoration:underline;text-decoration-color:var(--ochre-fio);text-underline-offset:4px} .btn-texto:hover{color:var(--bone)} .acoes-fluxo{display:flex;flex-direction:column;align-items:stretch;gap:var(--e2)} /* as vagas do baralho dela, em forma de carta */ .vagas{display:flex;flex-wrap:wrap;gap:8px;margin:var(--e4) 0 var(--e4)} .vaga{flex:0 0 calc((100% - 16px) / 3);min-height:176px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:7px;text-align:center;padding:5px; border:1px solid var(--borda);background:var(--surface)} .vaga.alvo{border-color:var(--ochre-fio);background:#14120F} .vaga-mais{font-family:var(--serif);font-size:var(--t4);color:var(--muted)} .vaga.alvo .vaga-mais{color:var(--ochre)} .vaga-pos{font-family:var(--serif);font-size:var(--t05);letter-spacing:.08em; font-variant-caps:small-caps;color:var(--muted);padding:0 6px} .vaga.cheia{background:var(--papel);border-color:#8D8573;color:var(--ground); justify-content:flex-start;padding:5px 5px 8px} .vaga-chapa{width:100%;aspect-ratio:1/1.3;background:#14120F;display:flex; align-items:center;justify-content:center} .vaga-selo{font-family:var(--mono);font-size:var(--t05);color:var(--muted)} .vaga-nome{font-family:var(--serif);font-size:var(--t2);line-height:1.04;color:var(--ground);padding:0 2px} .vaga-inv{display:flex;align-items:center;gap:5px;min-height:44px;padding:0 4px; font-size:var(--t00);color:#4A443C;text-align:left;cursor:pointer} .vaga-inv input{width:16px;height:16px;accent-color:#4A443C;flex:none} .vaga .mini-acao{background:none;border:none;color:#4A443C;font-size:var(--t2); min-height:34px;cursor:pointer} @media(max-width:420px){ .vaga-pos{font-size:var(--t00)} } /* o resultado da busca, em lista, com o selo à esquerda */ .achadas{border:1px solid var(--borda);border-top:none;margin:0 0 var(--e4)} .achadas:empty{border:none} .achadas .op{display:flex;align-items:center;gap:10px;width:100%;min-height:52px; padding:10px 13px;background:none;border:none;border-bottom:1px solid var(--hair); color:var(--bone);font-family:var(--serif);font-size:var(--t3);text-align:left;cursor:pointer} .achadas .op:last-child{border-bottom:none} .achadas .op b{flex:none;width:25px;height:34px;background:var(--papel);color:#6B6558; font-family:var(--mono);font-size:var(--t00);font-weight:500; display:flex;align-items:center;justify-content:center} .achadas .op:hover{background:var(--surface)} .achadas .op[aria-pressed="true"]{color:var(--ochre)} .achadas .op[disabled]{opacity:.45;cursor:default} .achadas .vazio-grade{padding:14px 13px;margin:0} textarea,input[type=text]{width:100%;background:var(--surface);border:1px solid var(--borda);color:var(--bone);font-family:inherit;font-size:16.5px;font-weight:300;padding:14px;line-height:1.5;resize:vertical} textarea:focus,input:focus{border-color:var(--ochre);outline:none} /* as bolinhas e as caixas não têm borda que mude de cor, e o foco do teclado sumia nelas, desde 30/09/2026 (auditoria do celular, item 7) */ input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--elo);outline-offset:3px} .dica{font-size:var(--t1);color:var(--muted);margin:10px 0 0} /* as três palavras que a prancha destaca na linha de ajuda */ .dica b{color:var(--bone);font-weight:400} /* o contador ficava colado na dica e a tela lia "600 Comece com o quê" */ .contador{font-size:var(--t1);color:var(--muted);margin:4px 0 0;text-align:right} .exemplos{border-top:1px solid var(--hair);margin-top:26px;padding-top:18px} .ex{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:14px} .ex .ruim{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--borda)} @media(max-width:520px){.ex{grid-template-columns:1fr;gap:4px}} .btn:hover{background:#fff} .btn.fantasma:hover{color:var(--bone);border-color:var(--bone)} .btn:disabled{opacity:.35;cursor:not-allowed} .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .confere{background:var(--surface);border-left:3px solid var(--slate);padding:20px 22px;margin:26px 0} .confere .q{font-family:var(--serif);font-size:var(--t4);line-height:1.3;margin:0 0 14px} .baralho{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:330px;overflow-y:auto;padding:4px;border:1px solid var(--borda);margin-top:16px} .mini{background:var(--surface);border:1px solid var(--hair);color:var(--muted);padding:10px 8px;font-size:var(--t1);line-height:1.25;text-align:left;min-height:58px} .mini:hover{border-color:var(--bone);color:var(--bone)} .mini[aria-pressed="true"]{border-color:var(--slate);color:var(--slate);background:#161a20} .mini:disabled{opacity:.3;cursor:not-allowed} .mini b{font-family:var(--mono);font-size:11px;display:block;color:var(--slate);margin-bottom:3px} .escolhidas{display:flex;flex-direction:column;gap:8px;margin:18px 0} .chip{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--borda);padding:6px 6px 6px 14px;font-size:var(--t2);flex-wrap:wrap} .chip .lugarzinho{font-family:var(--mono);font-size:11px;color:var(--slate);margin-right:auto;letter-spacing:.08em} .chip button{background:none;border:1px solid transparent;color:var(--muted);font-family:var(--mono);font-size:12px;min-width:44px;min-height:44px} .chip button:hover{color:var(--bone);border-color:var(--borda)} .chip button[aria-pressed="true"]{color:var(--ochre);border-color:var(--ochre)} /* ---------- a carta: único lugar de excesso do sistema ---------- */ .carta[data-naipe="ouros"]{--tinta:var(--t-ouros)} .carta[data-naipe="copas"]{--tinta:var(--t-copas)} .carta[data-naipe="espadas"]{--tinta:var(--t-espadas)} .carta[data-naipe="paus"]{--tinta:var(--t-paus)} .carta:nth-child(2){animation-delay:.2s} .carta:nth-child(3){animation-delay:.4s} @keyframes vira{to{opacity:1;transform:none}} .selo-topo{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--tinta);opacity:.85} /* Invertida: gira a GRAVURA, não o rótulo. No baralho físico o que vem de cabeça para baixo é a imagem; o nome da carta continua legível. */ .carta.rev .face{transform:rotate(180deg)} @media(prefers-reduced-motion:reduce){.carta{animation:none;opacity:1;transform:none}.tela.on{animation:none}} .pos{border-top:1px solid var(--hair);padding-top:22px;margin-top:30px} .pos .lugar{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:8px} .pos h2{font-size:var(--t5);margin-bottom:6px} .pos .palavras{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ochre);margin-bottom:14px} .pos .conselho{border-left:1px solid var(--borda);padding-left:16px;color:var(--muted);font-size:var(--t2);margin:0} .sintese h2{font-size:var(--t4);margin-bottom:12px} .sintese p:last-child{margin-bottom:0} .apoio p{font-size:var(--t2)} .apoio p:last-child{margin-bottom:0} .apoio a{color:var(--slate)} .oferta{border:1px solid var(--ochre);padding:26px 24px;margin:38px 0 0} .oferta h2{font-size:var(--t4);margin-bottom:10px} .oferta .preco{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ochre);margin:16px 0 0;display:block} .oferta .aviso{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px;display:block} .nota-ia{font-size:var(--t1);color:var(--muted);border-top:1px solid var(--hair);margin-top:44px;padding-top:18px} .rodape-apoio{border-top:1px solid var(--hair);margin-top:26px;padding-top:16px;font-size:var(--t1);color:var(--muted)} .rodape-apoio a{color:var(--muted)} .legenda-naipes{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:-18px 0 26px} .legenda-naipes span{display:flex;align-items:center;gap:6px} .legenda-naipes i{width:9px;height:9px;display:inline-block;font-style:normal} .antes-textos{font-size:var(--t1);color:var(--muted);border-left:1px solid var(--hair);padding-left:14px;margin:-14px 0 30px;max-width:52ch} .hist{border:none;border-bottom:1px solid var(--hair);background:none;color:var(--bone);font-family:inherit;font-size:var(--t2); padding:16px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline;width:100%;text-align:left} .hist:not(:disabled):hover .q-hist{color:var(--ochre)} .hist:disabled{opacity:.55;cursor:default} .hist .quando{font-family:var(--mono);font-size:12px;color:var(--slate);white-space:nowrap} .vazio{color:var(--muted);font-size:var(--t2)} /* ---------- celular: 360px é o aparelho mais comum no Brasil ---------- */ @media(max-width:600px){ /* as três cartas ficam do mesmo tamanho, lado a lado, em vez de 2+1 desigual */ .cartas{gap:8px;flex-wrap:nowrap;align-items:stretch} .carta{flex:1 1 0;min-width:0;max-width:none;padding:6px} .moldura{inset:6px;padding:11px 9px} .carta .nome{font-size:clamp(14px,4.2vw,var(--t4))} .carta .naipe{font-size:10px} .face svg{max-height:96px} /* a lista de cartas rolava por dentro e travava a rolagem da página */ .baralho{max-height:none;overflow:visible;overscroll-behavior:contain} /* os três modos cabem numa linha só */ .modos{flex-wrap:nowrap} .modo{flex:1 1 0;font-size:11px;padding:15px 3px;letter-spacing:.04em} /* botões do chip mais justos, sem descer de 40px de alvo */ .chip{padding:6px 6px 6px 11px;gap:2px} .chip button{min-width:40px;min-height:40px;font-size:11px} .chip .lugarzinho{flex:1 1 100%;margin-bottom:2px} } @media(max-width:520px){ /* sem os rótulos lado a lado, a relação entre a pergunta ruim e a boa precisa ser dita */ .ex .ruim::after{content:" ↓";text-decoration:none;display:inline-block;margin-left:4px;color:var(--slate)} } /* ================= acréscimos da v1 publicável ================= */ .topo-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap} /* o alvo de toque de 44 px nos links do topo («Minha conta» incluído), 01/10/2026, sem mudar a largura */ .topo-nav a.link{min-height:44px;display:inline-flex;align-items:center} a.marca{text-decoration:none;color:var(--bone)} /* O símbolo ao lado do nome, pela prancha de identidade do Design, desde 18/09/2026, pelo CODE_mvp_complementos.md. Na assinatura horizontal da prancha o símbolo tem 46 px para o nome de 34, e 14 px entre eles, e é essa a proporção aqui, em em. Os anéis na cor do nome, os raios no ocre. A MARCA APARECE SEMPRE INTEIRA, regra do André de 28/09/2026: o sol de círculos concêntricos com raios em qualquer tamanho, também no celular. A forma reduzida, anel e ponto, que a prancha usava abaixo de 32 px, acabou. No celular o símbolo tem 28 px, com o traço de sempre, como a prancha do lote 9 já o desenhava na leitura, com os raios, em 27 px. */ a.marca:has(.marca-simbolo){display:inline-flex;align-items:center;gap:.41em} .marca .marca-nome{color:inherit} .marca .marca-nome span{color:var(--ochre)} .marca-simbolo{width:1.35em;height:1.35em;flex:none;display:block;overflow:visible} .marca-simbolo .anel{fill:none;stroke:currentColor;stroke-width:2.8} .marca-simbolo .ponto{fill:currentColor} .marca-simbolo .raios{fill:none;stroke:var(--ochre);stroke-width:2.6;stroke-linecap:round} a.link{text-decoration:none;display:inline-block} .rodape-site{border-top:1px solid var(--hair);margin-top:64px;padding-top:22px; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);line-height:2} .rodape-site nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px} .rodape-site a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent} .rodape-site a:hover{color:var(--ochre);border-bottom-color:var(--ochre)} .rodape-site p{margin:0;max-width:none} /* ---------- páginas estáticas (carta, combinação, método) ---------- */ .pagina{max-width:680px} .pagina h1{font-family:var(--serif);font-weight:400;font-size:clamp(var(--t6),7vw,var(--t7)); line-height:1.04;margin:0 0 14px;text-wrap:balance} .pagina h2{font-family:var(--serif);font-weight:400;font-size:var(--t5);line-height:1.14;margin:44px 0 14px} .pagina h3{font-family:var(--sans);font-weight:500;font-size:var(--t2);margin:30px 0 8px} .pagina .abertura{font-family:var(--serif);font-size:var(--t4);line-height:1.35;color:var(--bone); border-left:2px solid var(--ochre);padding-left:18px;margin:0 0 30px;max-width:54ch} /* O fecho de uma página fixa usa a mesma marca de citação da abertura, só que no fim. A única diferença é o ar: a abertura já vem colada embaixo do h1, e o fecho vem depois do último parágrafo do texto. */ .pagina .abertura-fecho{margin:40px 0 0} .pagina p{margin:0 0 16px} .pagina a{color:var(--ochre)} .migalhas{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0 0 18px} .migalhas a{color:var(--muted);text-decoration:none} .migalhas a:hover{color:var(--ochre)} .arte{display:flex;gap:26px;align-items:flex-start;margin:0 0 34px;flex-wrap:wrap} .arte figure{margin:0;flex:0 0 208px;max-width:208px} .arte img{width:100%;height:auto;display:block;border:1px solid var(--borda)} /* a gravura embutida da prévia ocupa a mesma caixa do do site */ .gravura-previa{width:100%;height:auto;display:block;border:1px solid var(--borda)} .arte .semimagem{aspect-ratio:1/1.72;border:1px solid var(--tinta,var(--ochre));background:linear-gradient(168deg,#1a1522,#0E0C14); display:flex;align-items:center;justify-content:center;padding:20px} .arte .semimagem svg{width:100%;max-height:150px;overflow:visible} .arte .semimagem svg [stroke]{stroke:var(--tinta,var(--ochre));fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .arte .semimagem svg .cheio{fill:var(--tinta,var(--ochre));stroke:none} .arte .semimagem svg .fraco{opacity:.45} .arte figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:8px;line-height:1.5} .arte .texto{flex:1 1 260px;min-width:0} .chaves{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none} .chaves li{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--borda);color:var(--muted);padding:6px 11px} .duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--borda); border:1px solid var(--borda);margin:0 0 30px} .duas > div{background:var(--surface);padding:22px 20px} .duas h3{margin:0 0 10px} .duas p:last-child{margin-bottom:0} .duas .rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--slate);display:block;margin-bottom:10px} .lista-links{list-style:none;padding:0;margin:0 0 30px;border-top:1px solid var(--hair)} .lista-links li{border-bottom:1px solid var(--hair)} .lista-links a{display:flex;justify-content:space-between;gap:14px;align-items:baseline; padding:13px 0;text-decoration:none;color:var(--bone);font-size:var(--t2)} .lista-links a:hover{color:var(--ochre)} .lista-links .sec{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-align:right} .grade-cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px; background:var(--borda);border:1px solid var(--borda);margin:0 0 34px} .grade-cartas a{background:var(--surface);padding:14px 14px 16px;text-decoration:none;color:var(--bone);display:block} .grade-cartas a:hover{background:#1a1722} .grade-cartas b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--slate);display:block;margin-bottom:5px} .grade-cartas span{font-family:var(--serif);font-size:var(--t3);line-height:1.15;display:block} .cta{border:1px solid var(--ochre);padding:24px 22px;margin:38px 0 0} .cta h2{font-family:var(--serif);font-weight:400;font-size:var(--t4);margin:0 0 10px} .cta p{font-size:var(--t2);color:var(--muted)} .cta .btn{margin-top:6px;display:inline-block;text-decoration:none} .aviso-pagina{font-size:var(--t1);color:var(--muted);border-top:1px solid var(--hair);margin-top:40px;padding-top:16px} .aviso-pagina p{margin:0 0 6px} /* O trecho do aviso aos navegantes, no fim da leitura paga: mesmo corpo miúdo do resto do bloco, com um fio para não colar no parágrafo de cima. Ele fecha a leitura, não compete com ela. */ .aviso-pagina .aviso-navegantes-nota{margin:14px 0 0;padding-top:12px; border-top:1px solid var(--hair);max-width:62ch} .aviso-pagina .aviso-navegantes-nota a{color:var(--ochre)} /* ---------- página da leitura paga ---------- */ .espera{border:1px solid var(--borda);padding:26px 22px;margin:26px 0;color:var(--muted);font-size:var(--t2)} .espera .pulso{display:inline-block;width:8px;height:8px;background:var(--ochre);margin-right:10px; animation:respira 1.8s ease-in-out infinite} @keyframes respira{0%,100%{opacity:.25}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.espera .pulso{animation:none;opacity:.7}} /* a volta sem pagamento, desde 19/09/2026, item 2 da jornada real */ .nada-cobrado{border:1px solid var(--borda);padding:22px;margin:26px 0;font-size:var(--t2)} .nada-cobrado p{margin:0 0 14px} .nada-cobrado .acoes{display:flex;flex-wrap:wrap;gap:10px;margin:0} .leitura-paga h2{font-family:var(--serif);font-weight:400;font-size:var(--t5);margin:40px 0 12px} .leitura-paga h3{font-family:var(--serif);font-weight:400;font-size:var(--t4);margin:34px 0 10px} .leitura-paga p{margin:0 0 18px;max-width:64ch} .leitura-paga strong{font-weight:500;color:#fff} /* o nome da carta na leitura leva para a página dela — sem parecer link de sistema */ .pos h2 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)} .pos h2 a:hover{color:var(--ochre);border-bottom-color:var(--ochre)} /* o topo em 390px: os dois links numa linha só ao lado da marca, como o quadro «390 px A home no celular» do lote 7 (flex em linha, gap 14px, 11,5px em versalete). A-056 da auditoria de 23/09/2026 */ @media(max-width:600px){ .topo{padding-bottom:12px;margin-bottom:32px} .topo-nav{flex-direction:row;align-items:center;gap:14px;flex-wrap:nowrap} .topo-nav .link{padding:4px 0;font-size:11.5px;letter-spacing:.1em;white-space:nowrap} .marca{font-size:var(--t4)} } /* abaixo de 360 px os links do topo quebram linha, alinhados à direita, e o último não passa mais da tela, desde 30/09/2026 (auditoria do celular, item 5). Nas páginas geradas ele passava 14 px e a página rolava para o lado. */ @media(max-width:359px){ .topo-nav{flex-wrap:wrap;justify-content:flex-end;row-gap:2px;min-width:0} } /* a linha que explica ao recém-chegado o que é um arcano, um naipe, uma carta invertida. Discreta: quem já sabe passa por cima. */ .didatico{font-size:var(--t1);color:var(--muted);line-height:1.65; border-left:1px solid var(--hair);padding-left:14px;margin:0 0 28px;max-width:58ch} /* ===================================================================== A GRADE DE PRODUTOS --------------------------------------------------------------------- Três colunas e UM selo só. Dois selos iguais se anulam: o selo funciona porque resolve a indecisão apontando para um lugar. A opção de entrada não é uma quarta coluna — é a linha discreta abaixo das três; virando coluna de peso igual, puxaria a escolha inteira para baixo. ===================================================================== */ .oferta.grade{padding:28px 24px 24px} .degraus{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 4px;align-items:stretch} .degrau.gratis{border-style:dashed;opacity:.72} .degrau .jatem{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--hair);padding-top:14px} .degrau{border:1px solid var(--hair);padding:0 16px 18px;display:flex;flex-direction:column} .degrau h3{font-family:var(--serif);font-weight:400;font-size:var(--t4);margin:0 0 6px} .degrau .preco{font-family:var(--mono);font-size:var(--t3);letter-spacing:.04em;color:var(--bone);margin:0 0 4px;display:block} .degrau .entrega{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:12px} .degrau p{font-size:var(--t2);color:var(--muted);line-height:1.55;margin:0 0 16px} .degrau .btn{margin-top:auto;width:100%;text-align:center} /* a do meio, com destaque visual e o selo */ .degrau.destaque{border-color:var(--ochre);box-shadow:inset 0 0 0 1px rgba(197,138,61,.25)} .degrau.destaque .preco{color:var(--ochre)} /* O selo é um elemento de fluxo, e TODA coluna tem um — as outras com o dele invisível. Assim os títulos ficam na mesma linha mesmo quando o texto do selo quebra em duas. */ .degrau .selo{display:block;margin:0 -16px 18px;background:var(--ochre);color:var(--ground); font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase; padding:6px 8px;text-align:center;font-weight:500} .degrau .selo.vazio{background:none;visibility:hidden} .degrau .ancora{font-size:var(--t1);color:var(--muted);border-left:1px solid var(--hair);padding-left:12px} /* a linha discreta da opção de entrada */ .oferta .entrada{margin:16px 0 0;font-size:var(--t2)} .linkzinho{background:none;border:none;color:var(--muted);font:inherit;font-size:var(--t2); text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px;padding:8px 0;cursor:pointer} .linkzinho:hover{color:var(--ochre);text-decoration-color:var(--ochre)} @media(max-width:640px){ .degraus{grid-template-columns:1fr;gap:12px} .degrau.destaque{order:-1} /* no celular, o que ela já tem vai por último: ninguém rola para ver o que já leu */ .degrau.gratis{order:2} } /* ===================================================================== CHECKOUT ===================================================================== */ .resumo{border:1px solid var(--hair);padding:18px 18px 14px;margin:0 0 26px} .pergunta-fixa{font-family:var(--serif);font-size:var(--t4);line-height:1.35; border-left:2px solid var(--ochre);padding-left:14px;margin:0 0 18px} /* a pergunta inteira no checkout, em quantas linhas precisar, até os 600 caracteres do campo, e o «Mudar a pergunta» logo abaixo, com 44 px de toque, desde 03/10/2026 */ #checkoutPergunta{white-space:normal;overflow-wrap:anywhere;cursor:auto} #checkoutPergunta:has(+ .ck-mudar:not([hidden])){margin-bottom:2px} .ck-mudar{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0 0 14px} .ck-mudar[hidden]{display:none} .cartas-lista{list-style:none;padding:0;margin:0 0 4px;font-size:var(--t2)} .cartas-lista li{padding:6px 0;border-bottom:1px solid var(--hair)} .cartas-lista li:last-child{border-bottom:none} .cartas-lista li span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block} .aviso-troca{font-size:var(--t1);color:var(--ochre);border-left:1px solid var(--ochre);padding-left:12px;margin:-10px 0 22px} .campo{margin:0 0 18px} .campo label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .campo input{width:100%;background:var(--surface);border:1px solid var(--borda);color:var(--bone); font:inherit;padding:14px 14px;border-radius:0} .campo small{display:block;font-size:var(--t1);color:var(--muted);margin-top:8px} .erro{color:#e0a09a;font-size:var(--t2);margin:-8px 0 16px} /* o aviso do campo vazio da pergunta, logo abaixo do contador */ .erro.erro-pergunta{margin:8px 0 0} .destaque-aviso{color:var(--ochre) !important;border-left:1px solid var(--ochre);padding-left:12px;font-size:var(--t2)} .linha-check{display:flex;gap:12px;align-items:flex-start;font-size:var(--t2);padding:10px 0;cursor:pointer} /* a caixa única de consentimento, separada do resto por um fio, com o rótulo inteiro legível ao lado da caixa */ .caixa-aceite{border-top:1px solid var(--hair);margin:6px 0 14px;padding-top:14px;max-width:62ch} /* versão 2026-09-13.1. O rótulo vai em negrito e a linha abaixo, a linha de preço da assinatura e a frase sob o botão vão em texto comum. Nenhum deles fica menor que o resto do formulário, que usa var(--t2) nos rótulos de caixa, nos erros e no botão. */ .caixa-aceite .linha-check{font-size:var(--t2)} .rotulo-aceite{font-weight:600;color:var(--bone)} .linha-aceite{font-size:var(--t2);font-weight:400;margin:0 0 0 calc(1em + 12px);color:var(--bone)} .linha-preco-assinatura{font-size:var(--t2);font-weight:400;margin:0 0 12px;max-width:62ch;color:var(--bone)} .linha-arrependimento{font-size:var(--t2);font-weight:400;margin:0 0 12px;max-width:62ch;color:var(--bone)} .frase-aceite{font-size:var(--t2);font-weight:400;margin:12px 0 0;max-width:62ch;color:var(--bone)} /* o link dentro da frase é texto corrido, sem o padding de 12 px e o inline-block do .link, que abriam um espaço duplo antes e depois dos links e antes do ponto, desde 19/09/2026, item 6 da jornada real. Vale para a compra avulsa e para a assinatura, que usam a mesma frase */ /* e dentro da caixa de aceite da assinatura (.rotulo-aceite), onde o link «termos de uso» saía na letra de botão, em caixa alta e espaçado, desde 01/10/2026 (teste de olho humano no ar, 15h13) */ .frase-aceite a.link,.rotulo-aceite a.link{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:0;font-variant-caps:normal;text-decoration:underline; display:inline;padding:0;border:0;text-transform:none} /* versão 2026-09-13.2. O texto acima de tudo e a data de nascimento, no mesmo tamanho do formulário. O desenho definitivo é do lote 2 do Design. */ .acima-aceite{font-size:var(--t2);font-weight:400;margin:0 0 14px;color:var(--bone)} .campo-nascimento{margin:0 0 10px} .nascimento-partes{display:flex;gap:8px;flex-wrap:wrap} .nascimento-partes input{width:6ch} .nascimento-partes input#nascAno{width:8ch} /* a frase do que falta, junto da data e da forma de tratamento, desde 30/09/2026 (auditoria do celular, item 1) */ #erroNascimento,#erroTratamento{margin:8px 0 12px} .linha-nascimento{margin:8px 0 0} /* a forma de tratamento, no passo da data e na conta, desde 28/09/2026: a pergunta em texto comum e as três respostas em bolinhas, lado a lado quando cabem */ .campo-tratamento{margin:0 0 10px} .rot-tratamento{font-size:var(--t2);font-weight:400;margin:0 0 4px;color:var(--bone)} .tratamento-opcoes{display:flex;flex-wrap:wrap;gap:0 22px} .tratamento-opcoes .linha-check{padding:8px 0} .tratamento-opcoes input[type=radio]{margin:3px 0 0;flex:none} /* o bloco também é um .campo, e as regras «.campo label» (bloco, versalete, cinza) e «.campo input» (largura cheia, caixa de texto) ganhavam do .linha-check: as bolinhas apareciam enormes, sobre o texto em versalete. Aqui elas voltam a ser bolinha ao lado de texto comum, como o comentário acima diz, no passo da data, no resgate do presente e na conta. */ .campo-tratamento .tratamento-opcoes .linha-check{display:flex;margin:0;font-family:inherit;font-size:var(--t2);font-weight:400; font-variant-caps:normal;letter-spacing:0;text-transform:none;color:var(--bone)} .campo-tratamento .tratamento-opcoes input[type=radio]{width:auto;padding:0;border:0;background:none} /* as páginas de termos e de privacidade, geradas de docs/juridico desde 14/09/2026. O colchete é dado que ainda falta, marcado para o André ver antes de publicar. */ mark.colchete{background:transparent;color:var(--ochre);font-weight:500} .juridico-versao{font-size:var(--t2);color:var(--muted)} .juridico-versoes{padding-left:1.2em} /* o e-mail repetido antes do botão e o endereço da leitura na tela, item 11 */ .confere-email{font-size:var(--t2);color:var(--bone);margin:0 0 12px} .endereco-leitura{font-size:var(--t2);color:var(--bone);word-break:break-all;margin:14px 0} /* escrever sem nomes, item 23, e a tela de cuidado da conversa, item 12 */ .sem-nomes{font-size:var(--t1);color:var(--muted);margin:0 0 8px} .ctx-cuidado{margin:24px 0} .ctx-cuidado .acoes{display:flex;flex-wrap:wrap;gap:12px} .meios{border:none;padding:0;margin:0 0 24px;display:grid;gap:10px} .meios legend{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 10px} .meio{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center; border:1px solid var(--hair);padding:14px 16px;cursor:pointer} .meio:has(input:checked){border-color:var(--ochre)} .meio b{font-weight:500;font-size:var(--t3)} .meio small{grid-column:2;color:var(--muted);font-size:var(--t1);line-height:1.5} /* o preço de cada meio, na terceira coluna: dois preços lado a lado, sem riscado e sem selo — a diferença se lê comparando, não sendo avisado */ .meio{grid-template-columns:auto 1fr auto} .meio b{grid-column:2} .meio small{grid-column:2/-1} .preco-meio{grid-column:3;grid-row:1;font-family:var(--mono);font-size:var(--t2); letter-spacing:.06em;color:var(--muted);white-space:nowrap} .meio:has(input:checked) .preco-meio{color:var(--ochre)} .aviso-meio{margin:2px 0 0;color:var(--muted);font-size:var(--t05);line-height:1.55} /* o aviso de leitura sem interpretação: filete ocre, como as outras fronteiras do site — é informação, não alarme */ /* a identificação que o Decreto 7.962 exige: presente, conferível, e no menor degrau da escala — 10px é o piso do sistema, não é escondido */ .rodape-empresarial{display:block;margin-top:7px;font-size:var(--t00); letter-spacing:.02em;color:var(--muted);line-height:1.5} .confere-nota{color:var(--muted);font-size:var(--t2);line-height:1.6;margin:8px 0 14px;max-width:56ch} .aviso-cego{border-left:1px solid var(--ochre);padding:4px 0 4px 15px;margin:0 0 22px; color:var(--bone);font-size:var(--t2);line-height:1.6;max-width:56ch} /* ===================================================================== AS TRÊS PERGUNTAS, NA TELA DA LEITURA --------------------------------------------------------------------- Ela já pagou e está esperando. Isto não pode parecer um formulário a mais: é o momento em que a leitura vira dela. Fundo de degrau 2, que no sistema é a superfície do que decide. ===================================================================== */ .ctx-pago{background:var(--degrau2);padding:26px 24px;margin:0 0 28px} /* a nota que explica a leitura cega, acima do texto */ .nota-cega{border-left:1px solid var(--ochre);padding:4px 0 4px 15px;margin:0 0 26px; color:var(--muted);font-size:var(--t2);line-height:1.6;max-width:56ch} .ctx-pago h2{font-family:var(--serif);font-weight:400;font-size:var(--t5); line-height:1.25;margin:6px 0 10px} .ctx-pago .sub{color:var(--muted);font-size:var(--t2);line-height:1.6; margin:0 0 22px;max-width:54ch} .ctx-pago .campo{margin:0 0 16px} .ctx-pago .acoes{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px} /* O DEGRAU DA CONVERSA, lote 9 de 20/09/2026: um traço por pergunta, o que já passou em ocre, e a contagem escrita ao lado, em miúdo. */ .ctx-passo{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:300; font-size:11.5px;color:var(--miudo);margin:0 0 12px} .ctx-tracos{display:flex;gap:5px} .ctx-tracos span{display:block;width:22px;height:2px;background:var(--hair)} .ctx-tracos span.feito{background:var(--ochre)} /* a linha de baixo do campo: que dá para não responder, e o contador, que só aparece passada a metade do espaço */ .ctx-abaixo{display:flex;justify-content:space-between;align-items:center;gap:12px; margin:7px 0 0;font-family:var(--sans);font-weight:300;font-size:11.5px;color:var(--miudo)} .ctx-contador{font-family:var(--mono);font-size:11px;color:var(--miudo)} /* O pedido de esclarecimento não acusa quem escreveu: a marca à esquerda distingue o turno sem que o texto precise subir o tom. */ .ctx-esclarece{border-left:1px solid var(--ochre);padding-left:13px;margin:0 0 16px; color:var(--muted);font-size:var(--t2);line-height:1.6;max-width:52ch} /* A pergunta é o rótulo do campo — em serifada, porque é fala da Sybila e não etiqueta de formulário. O textarea herda a regra geral lá de cima; aqui não se repete nada dela. */ .ctx-pago label{display:block;font-family:var(--serif);font-size:var(--t3); line-height:1.4;margin:0 0 9px;max-width:52ch} /* A frase de transição. Ela pode durar trezentos milissegundos, e um piscar seco chamaria mais atenção que a pergunta que vem depois — daí a entrada suave. Quem pediu menos movimento não vê nenhum. O ocre é FILETE, nunca a tinta do texto: em 6,5:1 ele reprova o piso de contraste que o resto do site cumpre. */ .ctx-pensando{color:var(--muted);font-size:var(--t2);line-height:1.6; border-left:1px solid var(--ochre);padding-left:13px;margin:0 0 16px; animation:ctxEntra .45s ease-out both} @keyframes ctxEntra{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .ctx-pensando{animation:none} } @media (max-width:520px){ .ctx-pago{padding:22px 18px} } .aviso-meio:empty{display:none} .total{font-family:var(--mono);font-size:var(--t3);letter-spacing:.06em;margin:0 0 6px} .total b{color:var(--ochre);font-weight:500} /* A OFERTA DE BOAS-VINDAS DA PRIMEIRA SEMANA e o unico lugar do site com preco riscado, e a linha abaixo dele diz por que ele esta riscado. Bloco 4 de 15/09/2026. Fora dela, a regra 6 do Design continua valendo, um numero so na tela. */ .total s{color:var(--muted);font-weight:400;margin-right:.35em} /* ---- o erro de cartao, bloco 4 do lote 2 ---- */ .erro-cartao{border-left:2px solid var(--ochre);padding-left:var(--e4);margin:0 0 var(--e4)} .erro-cartao-guardado{font-family:var(--serif);font-size:var(--t3);line-height:1.5;margin:0 0 12px;max-width:44ch} .erro-cartao .btn{margin:0} .bv-rotulo{font-family:var(--serif);font-variant:small-caps;font-size:var(--t1);letter-spacing:.06em;color:var(--ochre);margin:0 0 4px} .bv-qualifica{font-size:var(--t1);color:var(--muted);margin:0 0 14px;max-width:46ch} /* ===================================================================== PIX ===================================================================== */ /* O QR GRANDE, bloco 4 do lote 2, 16/09/2026. Ele era de 300 px de largura maxima, e a camera do banco agradece mais. Continua centrado e com folego branco em volta, que e o que faz a leitura funcionar. */ .pix-qr{display:flex;justify-content:center;background:#fff;padding:18px;margin:0 0 20px; max-width:min(420px,100%);margin-left:auto;margin-right:auto} .pix-qr img{display:block;width:100%;height:auto;image-rendering:pixelated} #pixTexto{width:100%;background:var(--surface);border:1px solid var(--borda);color:var(--muted); font-family:var(--mono);font-size:var(--t1);padding:12px;word-break:break-all} .espera-pix{font-size:var(--t2);color:var(--ochre);border-left:1px solid var(--ochre);padding-left:14px;margin:20px 0} /* NO CELULAR O COPIA E COLA VEM PRIMEIRO, desde 01/10/2026 (cliente misterioso, G6): quem chega pelo anúncio está no celular e não aponta a câmera para a própria tela, e o QR do tamanho da tela empurrava o «Copiar o código» para fora da primeira tela. O código e o botão sobem para logo abaixo do título, e o QR fica embaixo; no computador, o QR segue em destaque. A linha «ou use o copia e cola» sai só no celular, porque ali o copia e cola já é o primeiro. */ @media (max-width: 759px){ #t-pix.on{display:flex; flex-direction:column} #t-pix > *{order:9} #t-pix > .rot{order:1} #t-pix > h1{order:2} #t-pix > #pixTexto{order:3; margin-bottom:12px} #t-pix > .acoes{order:4; margin-top:0} #t-pix > #pixValidade{order:5} #t-pix > #pixEspera{order:6} /* a linha do Mercado Pago logo abaixo da espera, pela prancha do Pix (só com o cartão na tela ligado) */ #t-pix > .mp-linha{order:6} #t-pix > [data-i18n="pix.apontar"]{order:7; margin-top:20px} #t-pix > #pixQr{order:8} #t-pix > [data-i18n="pix.ou"]{display:none} } /* O DIAGRAMA DA CRUZ CELTA SAIU DAQUI, lote 9 de 20/09/2026. Ele desenhava a FORMA da cruz em quadradinhos numerados, porque a cruz literal não cabia em 390 px. A prancha do lote 9 desenha a cruz de verdade nas duas larguras, com cada carta no lugar dela, e as regras dela moram no fim deste arquivo, em .cartas.cruz. */ .apagar{margin:26px 0 0;font-size:var(--t1)} .apagar .resposta{display:block;color:var(--muted);margin-top:10px} /* o rodapé que o Decreto 7.962/2013 exige */ .rodape-legal{font-size:var(--t1);color:var(--muted);line-height:1.7; border-top:1px solid var(--hair);margin-top:18px;padding-top:16px} /* Dez cartas não cabem lado a lado em 390 pixels. Em vez de espremer até ninguém enxergar nada, a fileira rola dentro do próprio quadro — e quem quiser a forma da cruz tem o diagrama logo abaixo. */ .cartas.muitas .carta .invmark{bottom:8px;right:8px;font-size:9px} @media(min-width:900px){ .cartas.muitas .carta{flex:0 0 150px} } /* ===================================================================== AS TRÊS VELOCIDADES DE LEITURA --------------------------------------------------------------------- Nível 1, a síntese com a ação: o elemento mais destacado da página. Nível 2, uma linha por carta, dentro da lista da tiragem. Nível 3, o texto, cada bloco abrindo pela linha-chave — que sai na tinta do naipe daquela carta, de modo que a cor carrega informação em vez de enfeite. ===================================================================== */ .como-ler{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted); margin:0 0 30px;padding-left:20px;border-left:1px solid var(--hair)} /* a lista da tiragem, com a tinta do naipe no nome da carta */ .paus{--tinta:var(--t-paus)} .copas{--tinta:var(--t-copas)} .espadas{--tinta:var(--t-espadas)} .ouros{--tinta:var(--t-ouros)} .maior{--tinta:var(--ochre)} @media(max-width:560px){ .tiragem .lugar{min-width:100%} } /* o bloco de cada carta, e o grupo na Cruz Celta */ .bloco{margin:0 0 30px} .bloco h3{font-size:var(--t4);line-height:1.2;margin:0 0 4px} .bloco .lugar-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);display:block;margin-bottom:9px} .grupo{border-left:1px solid var(--hair);padding-left:20px;margin:0 0 34px;--tinta:var(--ochre)} .grupo h3{font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.2;margin:0 0 12px} /* ===================================================================== A PERGUNTA QUE FECHA CADA BLOCO (painel 10a/10b, 12/09/2026) --------------------------------------------------------------------- Garamond itálico é a única coisa em itálico no corpo da leitura, e por isso reconhecível sem legenda: diz «isto não é mais descrição, é uma pergunta para você». O fio acima é o que separa a pergunta do corpo — hex literal do painel, mais escuro que --hair de propósito, porque aqui ele marca uma pausa dentro do bloco, não entre seções. O botão só existe quando a leitura trouxer `peca_pergunta` para este bloco — campo que a geração ainda não escreve (ver REGRA_DA_PECA.md): o marcado sozinho já deixa a tela pronta para o dia em que escrever. ===================================================================== */ .bloco-pergunta-wrap{display:flex;gap:14px;align-items:flex-start; border-top:1px solid #211F1C;margin-top:20px;padding-top:18px} .bloco-pergunta{flex:1;min-width:0;font-family:var(--serif);font-size:var(--t4); line-height:1.4;font-style:italic;color:var(--bone);margin:0;max-width:none} .btn-pergunta-imagem{flex:none;width:44px;height:44px;background:none; border:1px solid var(--ochre-fio);color:var(--ochre);padding:0; display:flex;align-items:center;justify-content:center;cursor:pointer} .btn-pergunta-imagem svg{width:17px;height:17px} .btn-pergunta-imagem:hover{border-color:var(--ochre)} .duro{border:1px solid var(--slate);padding:18px 20px;margin:22px 0 26px} .duro p{font-size:var(--t2);margin:0;color:var(--bone)} .duro strong{color:var(--slate);font-weight:500} .fecho{background:var(--surface);padding:24px 22px;margin:34px 0 0} .fecho h3{font-size:var(--t3);margin:0 0 8px;font-family:var(--sans);font-weight:500} .fecho .item{padding:16px 0;border-top:1px solid var(--hair)} .fecho .item:first-of-type{border-top:none;padding-top:0} .fecho p{margin:0;font-size:var(--t2)} .fecho .pergunta{font-family:var(--serif);font-size:var(--t4);line-height:1.26;color:var(--ochre)} /* ===================================================================== OUTRA LEITURA POSSÍVEL (painel 10c, 12/09/2026) --------------------------------------------------------------------- Promovida de rodapé a seção: superfície própria, sangra até a borda do `.wrap` (não da viewport — o site nunca passa de 640px de coluna), e um degrau mais clara que --ground para não desaparecer no fundo da página. O primeiro parágrafo é a hipótese e vem em Garamond, do tamanho de uma linha-chave; os demais são corpo comum. A pergunta para levar mora dentro da mesma caixa: as duas são a mesma seção. `experimentar` (.fecho, acima) não muda — o painel não fala dele. ===================================================================== */ .outra-leitura{background:#100E0C;border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);margin:34px calc(50% - 50vw) 0; padding:30px 22px 28px} .outra-leitura .rot-icone{display:flex;align-items:center;gap:10px;margin:0 0 14px} .outra-leitura .rot-icone svg{width:20px;height:20px;flex:none} .outra-leitura .rot-icone span{font-family:var(--serif);font-weight:500;font-size:var(--t1); letter-spacing:.16em;font-variant-caps:small-caps;color:var(--ochre)} .outra-leitura h2{font-family:var(--serif);font-weight:400;font-size:27px; line-height:1.14;color:var(--bone);margin:0 0 16px} .outra-leitura p{margin:0 0 13px;max-width:none;color:var(--bone)} .outra-leitura p:last-of-type{margin-bottom:0} .outra-leitura .abertura{font-family:var(--serif);font-size:19px;line-height:1.5} .outra-leitura .corpo{font-family:var(--sans);font-size:14.5px;line-height:1.72;font-weight:300} .outra-leitura .levar{border-top:1px solid var(--hair);margin-top:26px;padding-top:22px} .outra-leitura .levar .rot-simples{font-family:var(--serif);font-weight:500;font-size:var(--t1); letter-spacing:.1em;font-variant-caps:small-caps;color:var(--slate);margin:0 0 9px} .outra-leitura .levar p{font-family:var(--serif);font-size:var(--t4);line-height:1.4; font-style:italic;color:var(--bone)} /* ===================================================================== NAVEGAÇÃO E BARRA DE PROGRESSO (painel 10d, 12/09/2026) --------------------------------------------------------------------- Só existe quando a tiragem tem mais de uma carta — numa leitura de uma carta só não há para onde navegar. A lista de nível 2 não muda de lugar nem ganha sumário novo: as mesmas linhas viram âncora, e a atual fica marcada. A barra é a única coisa fixa da página, some na impressão, e o progresso é medido em palavras da tiragem, não em scroll — o painel pede exatamente essa leitura («mede o que ela comprou, não o que ela rolou»). */ .tiragem a.linha{text-decoration:none;color:inherit;cursor:pointer} .tiragem .linha.atual{background:#14120F} .tiragem .linha.atual .lugar{color:var(--ochre)} .tiragem .linha-outra{display:flex;gap:var(--e3);align-items:center;min-height:44px} .tiragem .linha-outra .icone-outra{width:28px;height:36px;flex:none;display:flex; align-items:center;justify-content:center} .tiragem .linha-outra .icone-outra svg{width:18px;height:18px} .tiragem .linha-outra span{font-family:var(--serif);font-weight:500;font-size:var(--t1); letter-spacing:.1em;font-variant-caps:small-caps;color:var(--muted)} .nav-leitura{position:sticky;top:0;z-index:5;background:#100E0C; border-bottom:1px solid var(--hair);margin:0 calc(50% - 50vw) var(--e5); padding:11px 0 0} .nav-leitura .nav-linha{padding:0 22px 11px;display:flex;align-items:center;gap:11px} .nav-leitura svg{width:17px;height:17px;flex:none;color:var(--muted)} .nav-leitura .nav-rotulo{flex:1;min-width:0;font-family:var(--serif);font-weight:500; font-size:var(--t1);letter-spacing:.1em;font-variant-caps:small-caps;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-leitura .nav-tempo{font-family:var(--mono);font-size:var(--t0);color:var(--muted)} .nav-progresso{display:block;width:100%;height:2px;border:none;background:#211F1C; -webkit-appearance:none;appearance:none;margin:0;vertical-align:top} .nav-progresso::-webkit-progress-bar{background:#211F1C} .nav-progresso::-webkit-progress-value{background:var(--ochre)} .nav-progresso::-moz-progress-bar{background:var(--ochre)} /* ===================================================================== FOLHA DE IMPRESSÃO --------------------------------------------------------------------- Em vez de gerar PDF em PHP — que exigiria biblioteca com Composer, e a arquitetura descartou Composer de propósito —, uma @media print bem resolvida. A pessoa clica em imprimir e salva em PDF pelo navegador. Preto sobre branco, cabeçalho com a pergunta, quebras nos lugares certos, e nada de navegação nem de botão no papel. ===================================================================== */ /* ===================================================================== AS CLASSES QUE SUBSTITUEM O `style=` INLINE --------------------------------------------------------------------- A Content-Security-Policy do site é `style-src 'self'`, sem 'unsafe-inline': todo atributo `style=` é descartado pelo navegador em produção. O site dependia disso em dezesseis lugares, e três deles eram visíveis: a tinta de naipe das 150 páginas de carta, as pastilhas da legenda de naipes, e a posição das dez caixas da Cruz Celta — que desmontava fora do servidor de teste, onde não há .htaccess. Nenhuma regra abaixo é decorativa: todas repõem algo que estava quebrado. ===================================================================== */ /* posição no diagrama da Cruz Celta — coluna e linha, por classe */ .cd-2-3{grid-column:2;grid-row:3} /* 1 e 2, empilhadas: a 2 cruza a 1 */ .cd-2-1{grid-column:2;grid-row:1} .cd-2-5{grid-column:2;grid-row:5} .cd-1-3{grid-column:1;grid-row:3} .cd-3-3{grid-column:3;grid-row:3} .cd-4-5{grid-column:4;grid-row:5} .cd-4-4{grid-column:4;grid-row:4} .cd-4-3{grid-column:4;grid-row:3} .cd-4-2{grid-column:4;grid-row:2} /* pastilha da legenda de naipes — a cor vem da classe do naipe */ .legenda-naipes span i{background:var(--tinta,var(--ochre))} .vazio-grade{grid-column:1/-1;margin:14px} .q-nota{color:var(--muted);font-size:var(--t1)} .sub-menor{font-size:var(--t3)} .apagado{color:var(--muted)} .afasta{margin-top:18px} .afasta-mais{margin-top:34px} .sem-topo{margin-top:0} .nota-fonte{font-size:var(--t1);color:var(--muted)} .migalhas-selo{color:var(--ochre)} .migalhas-selo a{color:inherit} .sem-alvo{cursor:default} /* ===================================================================== ===== DESIGN SYSTEM — entrega 1 do Claude Design ==================== Tudo daqui para baixo vem da entrega de design e substitui, por ordem de cascata, o que está acima. Os tokens do :root deste bloco valem para o arquivo inteiro: propriedade custom resolve no uso, não na ordem. A folha de impressão daqui é a única do arquivo. ===================================================================== */ /* ===================================================================== SYBILA — ENTREGA 1 de 2: tokens, a carta como objeto, o cume da leitura grátis, a tela de cuidado e a folha de impressão reescrita. --------------------------------------------------------------------- Colável. Sem style= inline, sem OKLCH, sem rem: hex de seis dígitos e px, classes em português. Substitui o :root atual e acrescenta os blocos marcados; a entrega 2 traz a régua de espaçamento aplicada seletor por seletor no resto do arquivo. ===================================================================== */ :root{ /* ---- a escada de superfície (era uma superfície só) ---- */ --ground:#0C0B0A; /* nível 0: a página. 15,2:1 com --bone */ --degrau1:#15130F; /* agrupa sem hierarquizar */ --degrau2:#1E1B16; /* o que decide: síntese, dobra, cuidado */ --surface:var(--degrau1); /* alias de compatibilidade, sem uso novo */ --papel:#E8E3D9; /* o estoque da carta e o papel impresso */ --tinta-papel:#17140F; /* 14,7:1 sobre --papel */ --papel-fio:#8D8573; /* borda funcional SOBRE o papel, 3,0:1 — usada na pastilha da lista da tiragem e no fio do fac-símile da amostra */ --papel-fraco:#6B6558; /* rótulo secundário no papel, 4,6:1 */ /* ---- eixo neutro: sai do violeta dessaturado ---- */ --hair:#35312B; /* separador decorativo (era #4A4456) */ --borda:#635D55; /* borda funcional, 3,0:1 (era #6B6479) */ --bone:#EDE9E1; /* texto corrido, 15,2:1 */ --muted:#A9A29A; /* texto secundário, 7,7:1 — passa o piso 7:1 (era #9C958A, que media 6,5:1 e reprovava) */ /* ---- o acento, repartido em papéis ---- */ --ochre:#C58A3D; /* marca, procedência, ouros. 6,5:1 — abaixo do piso de 7:1, portanto PROIBIDO em texto corrido: só rótulo, filete, número e naipe */ --ochre-fio:#4A3B22; /* fio e borda de botão sobre ocre, sem a saturação do --ochre (entrega/tokens.css) */ --ochre-fio-claro:#7E5620; /* o filete ocre do desenho oficial do fluxo pago, 01/10/2026 */ /* ---- os três valores que o lote 9 trouxe da prancha da entrega ---- */ --tinta-leitura:#D6D1C8; /* o parágrafo da leitura paga, 11,9:1 sobre o fundo. Um pouco abaixo do --bone, que na prancha do lote 9 fica só nos títulos */ --miudo:#6B6558; /* a nota em miúdo sobre o fundo escuro */ --ocre-papel:#8A5F22; /* o rótulo em versalete SOBRE o papel creme */ --elo:#86A3B4; /* link e foco. 7,3:1 */ --slate:#7FA0B5; /* alias de compatibilidade — o CSS e os testes atuais citam o nome; sem uso novo */ /* ---- tinta por naipe: quatro valores distinguíveis ---- */ --t-ouros:var(--ochre); --t-copas:#7FA0B5; --t-espadas:#AEB6B9; --t-paus:#C4703F; --t-maior:var(--bone); /* era ocre: era igual a ouros */ /* as mesmas tintas SOBRE --papel, todas medidas: ouros 5,07:1 · copas 5,47:1 · espadas 6,23:1 · paus 5,45:1. O ouros era #8A5F24, que media 4,39:1 e reprovava o piso de 4,5:1. */ --t-ouros-papel:#7E5620; --t-copas-papel:#3F5D6E; --t-espadas-papel:#4A5257; --t-paus-papel:#8C4620; /* Tipos: EB Garamond é a serifa do livro impresso — tradicional, e no escuro ela segura corpo grande sem brilhar. Ela faz a frase de quem perguntou, os títulos, os nomes de carta E os rótulos, em versalete. Libre Franklin faz o texto corrido e os botões. O mono fica só onde é dado tabular. Pesos medidos, woff2 latino: Garamond 400 + itálico 400 = 48 KB · Franklin 400+500 = 57 KB · total 105 KB, contra 205 KB de antes (Instrument Serif 42 · Plex Sans 134 · Plex Mono 29). Mesmo método nos dois números: subconjunto latino do Google, nos pesos acima. O mono era a IBM Plex Mono 500, só para rótulos e números, e saiu em 30/09/2026 (item C2f). O --mono agora é o «Sybila Rotulo», o Libre Franklin 500 que o site já baixa, no mesmo peso que a Plex tinha. */ --serif:"EB Garamond",Georgia,serif; --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Sybila Rotulo","Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ---- a escala, redeclarada com o que existe de verdade ---- Os quatro degraus abaixo de --t1 existiam sem nome, em 44 font-size crus (9/10/10,5/11/11,5/12px). Passam a ter nome, e o piso sobe: 9px sai do sistema, 10px é o menor rótulo permitido. */ --t00:10px; /* piso absoluto: rótulo dentro de objeto pequeno */ --t0:11px; /* dado tabular em mono: selo da carta, faixa de palavras, número de cartas. Rótulo NÃO usa este degrau: rótulo é versalete do Garamond em --t1 */ --t05:12px; /* rótulo de campo, migalhas, legenda */ --t1:13px; --t2:15px; --t3:17px; --t4:21px; --t5:27px; --t6:34px; --t7:44px; --t8:56px; /* só a frase de quem perguntou, e só ela */ /* ---- régua de espaçamento (eram 40+ valores ad hoc) ---- */ --e1:4px; --e2:8px; --e3:12px; --e4:18px; --e5:26px; --e6:38px; --e7:56px; /* reservado: respiro entre seções da página estática de carta, onde a entrega 2 aplica a régua */ } /* ---- AS FONTES NO PRÓPRIO SITE, desde 30/09/2026 (item C2f, o peso das páginas no celular) ---- Eram pedidas ao Google Fonts, em dois domínios, com a folha do Google na frente da pintura e duas conexões novas. Agora moram em /tipos/, em WOFF2, só o subconjunto latino e só os pesos usados: a Garamond 400, 500 e itálico 400, e o Franklin 300, 400 e 500. Cada página pré-carrega as duas mais usadas no . Os arquivos não levam ?v=, e o .htaccess os guarda por um ano: uma fonte nova entra com outro nome. O Franklin 300 só existia nas páginas que o pediam ao Google (a home, a conta, o presente e a leitura, que levam a classe franklin-leve). Nas outras, o corpo em 300 era pintado no 400, e continua assim: a família «Libre Franklin» não tem o 300, e a «Libre Franklin Leve» tem. */ @font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/eb-garamond-400.woff2) format("woff2")} @font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/tipos/eb-garamond-500.woff2) format("woff2")} @font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/tipos/eb-garamond-400-italico.woff2) format("woff2")} @font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/libre-franklin-400.woff2) format("woff2")} @font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url(/tipos/libre-franklin-500.woff2) format("woff2")} @font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:300;font-display:swap;src:url(/tipos/libre-franklin-300.woff2) format("woff2")} @font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/libre-franklin-400.woff2) format("woff2")} @font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:500;font-display:swap;src:url(/tipos/libre-franklin-500.woff2) format("woff2")} /* o rótulo, no lugar da IBM Plex Mono (item 2 do C2f): o Libre Franklin 500 em todo peso pedido, como a Plex 500 era */ @font-face{font-family:"Sybila Rotulo";font-style:normal;font-weight:100 900;font-display:swap;src:url(/tipos/libre-franklin-500.woff2) format("woff2")} :root.franklin-leve{--sans:"Libre Franklin Leve","Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} /* ===================================================================== O MONO EM CAIXA ALTA — a regra escrita --------------------------------------------------------------------- Eram 23 blocos, entre 9 e 12px: virou a voz padrão do site e é por isso que as telas leem como painel de sistema. O rótulo passa a VERSALETE do Garamond — versalete de verdade (font-variant-caps), sobre texto em caixa mista no HTML, e não text-transform sobre caixa alta. O texto no JSON é escrito em caixa mista: "A pergunta que você escreveu", não "A PERGUNTA…". O mono fica com dois papéis, e só eles: (1) dado tabular — selo da carta, preço, número de cartas, faixa de palavras; (2) código e endereço, como o copia-e-cola do Pix. Deixam de ser mono: rótulo de seção, nome de tema, texto de porta, rótulo de campo, botão, item de rodapé, migalhas e nome de degrau. Botão é Franklin em caixa mista: "Quero esta" é a voz de quem compra, e caixa alta a transforma em CTA de loja. ===================================================================== */ .rot,.rotulinho{font-family:var(--serif);font-weight:500;font-size:var(--t1); letter-spacing:.1em;font-variant-caps:small-caps;text-transform:none; color:var(--muted)} /* --------------------------------------------------------------------- O CUPOM --------------------------------------------------------------------- A regra 6 proíbe urgência e desconto empurrado. O desenho obedece: o campo nasce fechado atrás de um link discreto, não existe preço riscado, não existe selo, não existe contagem. Quem não tem cupom não vê nada além de uma linha de texto miúdo. --------------------------------------------------------------------- */ .linha-cupom{margin:var(--e4) 0 0} .campo-cupom{margin-top:var(--e3)} .cupom-linha{display:flex;gap:var(--e2);align-items:stretch} .cupom-linha input{flex:1 1 auto;text-transform:uppercase;letter-spacing:.08em; font-family:var(--mono);font-size:var(--t2)} .cupom-linha .btn{flex:0 0 auto;white-space:nowrap} .ok-cupom{display:block;margin-top:var(--e2);color:var(--elo)} .campo-cupom .erro{display:block;margin-top:var(--e2)} @media(max-width:420px){ .cupom-linha{flex-direction:column} } /* --------------------------------------------------------------------- O BOTÃO --------------------------------------------------------------------- Esta regra tinha sumido. Sobreviveram só as que MODIFICAM o botão — `:hover{background:#fff}`, `.fantasma{background:none}`, `:disabled` — todas escritas pressupondo uma caixa que não existia mais. O que chegava à tela era um