/* * Folha de estilo da LP2 da Vidius (a estátua que vê, esculpe e produz). * * Este arquivo é PRÓPRIO da LP2, e não um import de assets/estilo.css: o * estilo.css carrega o layout inteiro da LP1 (hero de busto, cenas antigas), * que a LP2 não usa. O bloco TOKENS abaixo é transcrito, valor por valor, do * :root de assets/estilo.css (fonte: commit no HEAD do ramo lp2, 23/09/2026). * Os componentes reaproveitados (botão, topo, cápsula, diálogo de cadastro, * rodapé, "o que eu confiro", os cartões de plano) também são transcritos, * porque o HTML que os usa é cópia estrutural do index.html da main: a * fiação já está provada, e reescrever o CSS do zero reabriria bug fechado. * A partir de "MOTOR DO PLANO-SEQUÊNCIA" o CSS é novo, escrito para esta * página. */ /* ============================================================ TOKENS (transcritos de assets/estilo.css :root) ============================================================ */ :root{ --ink-0:#000000; --ink-2:#0a0a0a; --ink-3:#0f0f10; --ink-4:#171717; --ink-5:#262626; --rubi-9:#481010; --rubi-8:#751519; --rubi-7:#94151e; --rubi-6:#b3262f; --rubi-5:#cc3337; --rubi-4:#e14d47; --rubi-3:#ff8a83; --rubi-2:#ffcdc8; --rubi-1:#feebe9; --lente:#751519; --acento:225 77 71; --acento-luz:255 138 131; --marmore-1:#e3e2e2; --marmore-2:#dad8d9; --marmore-3:#c5c3c3; --marmore-4:#aaa7a6; --marmore-5:#9b9898; --marmore-6:#595252; --marmore-7:#261d1d; --marmore-8:#0c0b0b; --brasa-4:#f59e0b; --bg:var(--ink-0); --surface:rgb(255 255 255 / .03); --surface-2:rgb(255 255 255 / .05); --border:rgb(255 255 255 / .08); --border-strong:rgb(255 255 255 / .16); --fg:var(--marmore-1); --fg-muted:var(--marmore-4); --fg-subtle:var(--marmore-5); --primary:var(--rubi-4); --primary-hover:color-mix(in oklch, var(--rubi-4), var(--rubi-3) 35%); --on-primary:var(--ink-0); --signal:var(--rubi-3); --lente-glow:rgb(var(--acento) / .55); --respira:3.2s; --varre:1.4s; --shopify:#95bf47; --shopify-escuro:#5e8e3e; --ok:#10b981; --warn:#f59e0b; --reprovado:var(--brasa-4); --font-display:"Instrument Serif",Georgia,"Times New Roman",serif; --font-body:"Inter",ui-sans-serif,system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; --font-serif:var(--font-display); --tracking-titulo:-.005em; --tracking-display:-.025em; --tracking-label:.1em; --raio-sm:8px; --raio-md:16px; --raio-lg:26px; --raio-pilula:9999px; --raio:var(--raio-md); --t-rotulo:11px; --t-mini:12.5px; --t-corpo-p:14px; --t-corpo:16px; --t-lead:19px; --lh-titulo:1.12; --lh-corpo:1.55; --lh-rotulo:1.35; --sombra-peca:0 18px 35px rgb(0 0 0 / .45), 0 0 0 1px var(--border); --sombra-reacao:0 10px 22px rgb(0 0 0 / .5), 0 0 0 1px var(--border-strong); --ease:cubic-bezier(.22,.61,.36,1); --rapida:.18s; --media:.32s; --gutter:clamp(16px,4vw,28px); --max:1200px; --topo-altura:67px; --secao-y:clamp(72px,9vw,104px); /* Tokens NOVOS da LP2 (não existem no estilo.css da LP1): o breu, cor de fundo dos quadros depois do filtro, medido perto de rgb(16,22,27) (BRIEF-PAGINA.md). É a costura entre o vídeo do plano-sequência e o resto da página. */ --breu:rgb(16,22,27); --breu-suave:rgb(16 22 27 / .82); } /* ============================================================ BASE (transcrito) ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark} body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--font-body);font-size:var(--t-corpo);line-height:var(--lh-corpo); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input{font:inherit} :focus-visible{outline:2px solid var(--signal);outline-offset:3px} h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-titulo);line-height:var(--lh-titulo);margin:0} h3,h4{font-family:var(--font-body);font-weight:600;letter-spacing:var(--tracking-display);line-height:var(--lh-titulo);margin:0} h1{font-size:clamp(34px,6vw,68px)} h2{font-size:clamp(25px,4.3vw,48px)} h3{font-size:clamp(17px,2vw,21px)} p{margin:0} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .secao{padding-block:var(--secao-y);position:relative} .rotulo{border-radius:var(--raio-pilula); font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500; letter-spacing:var(--tracking-label);text-transform:uppercase; color:var(--fg-subtle); } .muted{color:var(--fg-muted)} .kicker{border-radius:var(--raio-pilula); display:inline-flex;align-items:center;gap:9px;max-width:100%; border:1px solid var(--border);background:var(--surface); padding:7px 13px;margin-bottom:20px; font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500; letter-spacing:var(--tracking-label);text-transform:uppercase; color:var(--fg-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .kicker::before{ content:"";width:6px;height:6px;flex:0 0 auto;background:var(--signal); box-shadow:0 0 10px rgb(var(--acento-luz) / .8); animation:pulso 2.6s var(--ease) infinite; } @keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}} /* Placa de museu: o rótulo mono do capítulo/seção que está na tela. */ .museu{display:inline-flex;align-items:center;gap:9px; font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle); margin-bottom:10px; } .museu::before{content:"";width:6px;height:6px;flex:0 0 auto;background:rgb(var(--acento));} /* Cantos em L, usados na caixa do diálogo de cadastro. */ .cantos{position:relative} .cantos::before,.cantos::after{content:"";position:absolute;width:20px;height:20px;pointer-events:none;z-index:3} .cantos::before{top:-1px;left:-1px;border-top:1px solid var(--signal);border-left:1px solid var(--signal);border-top-left-radius:inherit} .cantos::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--signal);border-right:1px solid var(--signal);border-bottom-right-radius:inherit} /* Moldura vazia rotulada: o "placeholder honesto" da casa, reaproveitado aqui pelos blocos neutros das lojas fictícias enquanto a foto real não chega (BRIEF-PAGINA.md, mockups). */ .molde{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;padding:12px;text-align:center; background:var(--ink-2); background-image:repeating-linear-gradient(45deg,rgb(var(--acento) / .05) 0 10px,transparent 10px 20px); border:1px solid var(--border); } .molde-rotulo{font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)} /* Botões. Sem brilho interno e sem pílula, de propósito. */ .btn{border-radius:var(--raio-sm); display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 22px;border:1px solid transparent; font-family:var(--font-body);font-size:var(--t-corpo-p);font-weight:600; letter-spacing:-.01em;position:relative;overflow:hidden; transition:transform var(--rapida) var(--ease),box-shadow var(--rapida) var(--ease),background var(--rapida) var(--ease),border-color var(--rapida) var(--ease),color var(--rapida) var(--ease); } .btn::before{ content:"";position:absolute;inset:0 auto 0 -100%;width:100%; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .14),transparent); transition:left .55s var(--ease); } .btn:hover::before{left:100%} .btn:hover{transform:translateY(-1px);box-shadow:var(--sombra-reacao)} .btn:active{transform:translateY(0)} .btn-1{background:var(--primary);color:var(--on-primary);border-color:var(--primary)} .btn-1:hover{background:var(--primary-hover);border-color:var(--primary-hover)} .btn-2{background:transparent;color:var(--fg);border-color:var(--border-strong)} .btn-2:hover{border-color:rgb(var(--acento) / .5);color:var(--rubi-3)} .btn-3{padding:9px 15px;font-size:var(--t-corpo-p);background:transparent;color:var(--fg);border-color:var(--border)} .btn-3:hover{border-color:rgb(var(--acento) / .5)} .btn-bloco{width:100%} .btn:disabled{opacity:.5;transform:none} .btn:disabled:hover{transform:none;box-shadow:none} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.visivel{opacity:1;transform:none} .reveal{transition-delay:calc(var(--degrau,0) * 70ms)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important } .reveal{opacity:1;transform:none;transition-delay:0ms!important} } /* ============================================================ O BRILHO QUE SEGUE O MOUSE (transcrito de assets/estilo.css, item 4) assets/luz.js escreve --mx/--my (px) via window.VidiusLaco; sem o script, a camada fica parada em opacity:0, sem custo. ============================================================ */ #luz-ponteiro{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0} #luz-ponteiro.ativa{opacity:1} @media (prefers-reduced-motion:no-preference){ #luz-ponteiro{transition:opacity var(--media) var(--ease)} } #luz-ponteiro::before,#luz-ponteiro::after{content:"";position:absolute;inset:0} /* HALO -- 640px de raio, 20% do acento (rubi). */ #luz-ponteiro::before{ background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgb(var(--acento) / .2),transparent 62%); mix-blend-mode:screen; } /* NÚCLEO -- 260px de raio, 12% do rubi claro. Nunca branco. */ #luz-ponteiro::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(var(--acento-luz) / .12),transparent 62%); mix-blend-mode:overlay; } @media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){ #luz-ponteiro{display:none} } /* ============================================================ MARCA (transcrito) ============================================================ */ .marca{display:inline-flex;align-items:center;gap:11px;user-select:none} .marca-simbolo{position:relative;width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center} .marca-simbolo img{width:22px;height:22px;display:block;animation:lente-respira var(--respira) ease-in-out infinite} .marca-simbolo::before{ content:"";position:absolute;inset:0;border-radius:999px;padding:1px; background:conic-gradient(from 0deg,transparent 0deg 190deg,rgb(var(--acento) / .55) 280deg,transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:lente-aro 9s linear infinite; pointer-events:none; } .marca:hover .marca-simbolo img{filter:brightness(1.35) drop-shadow(0 0 10px rgb(var(--acento) / .6))} @keyframes lente-respira{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.14)}} @keyframes lente-aro{to{transform:rotate(1turn)}} .marca-simbolo.varrendo::before{animation:lente-aro var(--varre) var(--ease) 1} .marca-simbolo.varrendo img{animation:lente-respira var(--varre) var(--ease) 1} .marca-nome{display:flex;flex-direction:column;line-height:1;min-width:0} .marca-nome strong{font-family:var(--font-display);font-size:calc(var(--t-corpo) + 6px);font-weight:400;letter-spacing:-.005em;color:var(--fg)} .marca-nome small{margin-top:5px;font-family:var(--font-serif);font-size:13px;font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--fg-subtle);white-space:nowrap} @media (prefers-reduced-motion:reduce){ .marca-simbolo::before{display:none} .marca-simbolo.varrendo::before,.marca-simbolo.varrendo img{animation:none} } /* ============================================================ TOPO FIXO + CÁPSULA (transcrito) ============================================================ */ .topo{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent; transition:background var(--media) var(--ease),border-color var(--media) var(--ease),backdrop-filter var(--media) var(--ease); } .topo.colado{background:rgb(0 0 0 / .72);border-bottom-color:var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .topo-linha{display:flex;align-items:center;gap:18px;height:calc(var(--topo-altura) - 1px)} .topo-nav{display:flex;align-items:center;gap:5px;margin-left:auto} .topo-acoes{display:flex;align-items:center;gap:12px} .link-discreto{font-size:var(--t-corpo-p);color:var(--fg-subtle);padding:8px 4px;transition:color var(--rapida) var(--ease)} .link-discreto:hover{color:var(--fg)} .menu-btn{border-radius:var(--raio-sm);display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border)} .menu-btn span{display:block;width:16px;height:1px;background:var(--fg);position:relative} .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--fg)} .menu-btn span::before{top:-5px}.menu-btn span::after{top:5px} .topo-insta{border-radius:var(--raio-sm);display:flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--fg);transition:border-color var(--rapida) var(--ease),color var(--rapida) var(--ease)} .topo-insta:hover{border-color:rgb(var(--acento) / .5);color:var(--rubi-3)} section[id]{scroll-margin-top:calc(var(--topo-altura) + 30px)} @media (min-width:821px){ .capsula{position:relative;margin-left:auto;gap:0;padding:5px; border:1px solid var(--border-strong);border-radius:var(--raio-pilula); background:rgb(255 255 255 / .02); box-shadow:0 0 0 1px rgb(var(--acento) / .07),0 10px 28px rgb(0 0 0 / .5); } .capsula a{position:relative;z-index:1;padding:9px 17px;border-radius:var(--raio-pilula); font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle); transition:color var(--media) var(--ease); } .capsula a:hover{color:var(--fg)} .capsula a[aria-current]{color:var(--fg)} .capsula-traco{position:absolute;top:5px;bottom:5px;left:0;width:0; border-radius:var(--raio-pilula);opacity:0;pointer-events:none; background:rgb(var(--acento) / .14); box-shadow:inset 0 0 0 1px rgb(var(--acento) / .38); transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s var(--ease); } .capsula[data-ativo] .capsula-traco{opacity:1} } @media (max-width:820px){.capsula-traco{display:none}} @media (prefers-reduced-motion:reduce){.capsula-traco{transition:none}} /* ============================================================ VOLTAR AO TOPO (transcrito) ============================================================ */ .ao-topo{border-radius:var(--raio-sm); position:fixed;right:22px;bottom:22px;z-index:50; display:inline-flex;align-items:center;gap:7px;padding:11px 14px; font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--fg-muted); background:rgb(0 0 0 / .72);border:1px solid var(--border); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s,color var(--rapida) var(--ease),border-color var(--rapida) var(--ease); } html.tem-script .ao-topo{opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s var(--media),color var(--rapida) var(--ease),border-color var(--rapida) var(--ease); } html.tem-script .ao-topo.aparece{opacity:1;visibility:visible;transform:none; transition:opacity var(--media) var(--ease),transform var(--media) var(--ease),visibility 0s,color var(--rapida) var(--ease),border-color var(--rapida) var(--ease); } .ao-topo:hover{color:var(--fg);border-color:var(--border-strong)} .ao-topo svg{display:block;flex:0 0 auto} @media (max-width:560px){.ao-topo{right:14px;bottom:16px;padding:10px 12px}.ao-topo span{display:none}} /* ============================================================ ASSISTIR / PAUSAR: rolagem automática (pedido do Arthur, 23/09) Dois botões, o mesmo mecanismo (data-assistir, lp2.js#ligarAssistir): um na primeira batida (.batida-botoes), outro flutuante e discreto, perto do "Topo" -- mas sempre visível (não espera scrollY>700 como o .ao-topo, porque também serve para COMEÇAR a rolagem do zero). ============================================================ */ [data-assistir] .ic-pause{display:none} [data-assistir].assistindo .ic-play{display:none} [data-assistir].assistindo .ic-pause{display:block} .assistir-flutuante{border-radius:var(--raio-sm); position:fixed;right:22px;bottom:70px;z-index:50; display:inline-flex;align-items:center;gap:7px;padding:11px 14px; font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--fg-muted); background:rgb(0 0 0 / .72);border:1px solid var(--border); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:color var(--rapida) var(--ease),border-color var(--rapida) var(--ease); } .assistir-flutuante:hover{color:var(--fg);border-color:var(--border-strong)} .assistir-flutuante.assistindo{color:var(--rubi-3);border-color:rgb(var(--acento) / .5)} .assistir-flutuante svg{display:block;flex:0 0 auto} @media (max-width:560px){.assistir-flutuante{right:14px;bottom:60px;padding:10px 12px}.assistir-flutuante .assistir-rotulo{display:none}} @media (prefers-reduced-motion:reduce){[data-assistir]{display:none!important}} /* ============================================================ MODO DE REVISAO: ?aida=1 (transcrito) ============================================================ */ .aida-etiqueta{border-radius:var(--raio-pilula);display:none} body.modo-aida .aida-etiqueta{ display:inline-flex;align-items:center;gap:7px; position:absolute;left:var(--gutter);top:8px;z-index:40; padding:5px 10px;background:var(--rubi-7);color:#fff; font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:600; letter-spacing:.14em;text-transform:uppercase; } body.modo-aida [data-aida]{outline:1px dashed rgb(var(--acento) / .3);outline-offset:-1px} .aida-aviso{position:fixed;left:0;right:0;bottom:0;z-index:70; background:var(--rubi-7);color:#fff;padding:9px var(--gutter); font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase; display:none;align-items:center;gap:10px; } body.modo-aida .aida-aviso{display:flex} /* ============================================================ PORTA: entrar e criar conta (transcrito) ============================================================ */ .porta{border:none;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%} .porta::backdrop{background:rgb(0 0 0 / .82);backdrop-filter:blur(6px)} .porta-caixa{border-radius:var(--raio-md); position:fixed;left:50%;top:50%;translate:-50% -50%; width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto; border:1px solid var(--border-strong);background:var(--ink-2); box-shadow:var(--sombra-peca); } .porta-topo{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)} .porta-topo .marca{flex:1;min-width:0} .porta-fechar{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--border);display:grid;place-items:center;color:var(--fg-muted);transition:border-color var(--rapida) var(--ease),color var(--rapida) var(--ease)} .porta-fechar:hover{border-color:var(--border-strong);color:var(--fg)} .porta-corpo{padding:20px} .campo{margin-bottom:14px} .campo label{display:block;margin-bottom:7px} .campo .rotulo{font-family:var(--font-body);font-size:var(--t-corpo-p);letter-spacing:normal;text-transform:none;color:var(--marmore-2)} .campo input{border-radius:var(--raio-sm);width:100%;padding:12px 13px;background:var(--ink-0);border:1px solid var(--border-strong);color:var(--fg);font-family:var(--font-body);font-size:var(--t-corpo-p);transition:border-color var(--rapida) var(--ease)} .campo input::placeholder{color:var(--fg-subtle)} .campo input:focus{border-color:rgb(var(--acento) / .55);outline:none;box-shadow:0 0 0 3px rgb(var(--acento) / .1)} .campo input:focus-visible{outline:none} .campo-dica{margin-top:6px;font-family:var(--font-mono);font-size:var(--t-rotulo);color:var(--fg-subtle);line-height:1.6} .porta-recado{padding:12px 13px;border:1px solid var(--border);background:var(--surface);font-size:var(--t-corpo-p);line-height:1.6;margin-bottom:14px} .porta-recado[hidden]{display:none} .porta-recado.erro{border-color:rgb(245 158 11 / .5);color:var(--reprovado);background:rgb(245 158 11 / .06)} .porta-recado.ok{border-color:var(--border-strong);color:var(--fg);background:var(--surface-2)} .porta-pe{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} .porta-pe button{font-size:var(--t-mini);color:var(--fg-subtle);border-bottom:1px solid var(--border);padding-bottom:1px} .porta-pe button:hover{color:var(--rubi-3)} .vagas{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--border);background:var(--ink-3);margin-bottom:16px;font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.06em;color:var(--fg-muted)} .vagas i{width:6px;height:6px;flex:0 0 auto;background:var(--rubi-4);display:block;box-shadow:0 0 8px rgb(var(--acento-luz) / .7)} .vagas.esgotado i{background:var(--reprovado);box-shadow:none} .girando{display:inline-block;width:12px;height:12px;flex:0 0 auto;border:1.5px solid rgb(255 255 255 / .25);border-top-color:#fff;border-radius:50%;animation:gira 1.4s linear infinite} @keyframes gira{to{transform:rotate(360deg)}} .porta-caixa::-webkit-scrollbar{width:12px} .porta-caixa::-webkit-scrollbar-track{background:var(--ink-3)} .porta-caixa::-webkit-scrollbar-thumb{background:var(--rubi-5);border:3px solid var(--ink-3)} /* ============================================================ RODAPE (transcrito) ============================================================ */ .rodape{border-top:1px solid var(--border);padding-top:clamp(40px,6vw,60px);position:relative;overflow:hidden} .rodape-grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.8fr);gap:clamp(22px,3vw,40px);padding-bottom:clamp(30px,4vw,44px)} .rodape-marca p{margin-top:16px;font-size:var(--t-corpo-p);color:var(--fg-muted);max-width:280px} .rodape-nav{display:flex;flex-direction:column;gap:9px} .rodape-nav a{font-size:var(--t-corpo-p);color:var(--fg-muted);transition:color var(--rapida) var(--ease)} .rodape-nav a:hover{color:var(--rubi-3)} .rodape-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .rodape-card{border-radius:var(--raio-md);border:1px solid var(--border);background:var(--surface);padding:14px} .rodape-card .rotulo{display:block;margin-bottom:7px} .rodape-card a,.rodape-card span{font-size:var(--t-corpo-p);color:var(--fg);word-break:break-word} .rodape-card a:hover{color:var(--rubi-3)} .rodape-card a{position:relative} .rodape-card a::before{content:"";position:absolute;inset:-14px -6px} .rodape-legal{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;border-top:1px solid var(--border);padding-block:18px;font-size:var(--t-mini);color:var(--fg-subtle)} .rodape-legal a{border-bottom:1px solid var(--border)} .rodape-legal a:hover{color:var(--fg-muted)} .aguada{margin-top:6px;height:clamp(52px,10vw,120px);overflow:hidden;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;user-select:none} .aguada span{font-family:var(--font-display);font-size:clamp(84px,19vw,250px);font-weight:400;letter-spacing:.02em;line-height:.82;color:transparent;-webkit-text-stroke:1px rgb(255 255 255 / .09);white-space:nowrap} /* ============================================================ O QUE EU CONFIRO (transcrito, igual à main) ============================================================ */ .telemetria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border-strong);border-radius:var(--raio-md);overflow:hidden;margin-top:14px} .telemetria div{padding:7px 14px;border-right:1px solid var(--border)} .telemetria div:last-child{border-right:none} .telemetria dt{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:6px} .telemetria dd{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);color:var(--fg);margin:0} .telemetria dd small{display:block;font-size:var(--t-rotulo);color:var(--fg-muted);font-weight:400;margin-top:4px;letter-spacing:0} .telemetria .v-ok{color:var(--fg)} .telemetria .v-no{color:var(--reprovado)} .secao-confere .confere-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,36px);align-items:start} .secao-confere .museu{margin-bottom:14px} .secao-confere ol{margin:0;padding-left:1.2em;display:grid;gap:9px;color:var(--fg-muted);font-size:var(--t-corpo-p);line-height:var(--lh-corpo)} .secao-confere .conferencia-cartao{padding:clamp(14px,2vw,22px);border:1px solid var(--border-strong);border-radius:var(--raio-md);background:var(--ink-2)} .secao-confere .conferencia-frase{margin:0 0 12px;font-size:var(--t-lead);color:var(--fg)} .secao-confere .conferencia-legenda{margin:0 0 8px;font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)} .secao-confere .conferencia-numeros{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0} .secao-confere .conferencia-numeros div{border-bottom:1px solid var(--border)} .secao-confere .conferencia-numeros div:nth-child(odd){border-right:1px solid var(--border)} .secao-confere .conferencia-numeros div:nth-child(even){border-right:none} .secao-confere .conferencia-numeros div:nth-child(n+3){border-bottom:none} /* ============================================================ OS PLANOS (transcrito, igual à main; sem o busto decorativo atrás e sem a inclinação por ponteiro do mouse: são cortes de escopo desta etapa, registrados no relatório) ============================================================ */ .secao-planos .planos-sub{color:var(--fg-muted);max-width:52ch;margin:10px 0 0;font-size:clamp(15px,1.6vw,17px)} .planos-altar{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:stretch;margin-top:clamp(28px,4vh,52px);perspective:1600px} .plano{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2vw,30px);border-radius:var(--raio-lg);transform-style:preserve-3d; background:linear-gradient(180deg, rgb(0 0 0 / .34) 0%, rgb(0 0 0 / .40) 100%),url("assets/pedra/vidro-pedra.webp") center / cover no-repeat,var(--ink-2); border:1px solid var(--border); /* A INCLINAÇÃO SEGUINDO O PONTEIRO, transcrita de assets/estilo.css (item do Arthur, "eu quero que os cards reajam com o mouse"). Reusa assets/inclinacao.js verbatim (mesmo seletor .plano); ele escreve só --px/--py, de -1 a 1, e o ângulo é decidido aqui. Sinal do eixo Y negativo porque a borda mais perto do ponteiro avança pro espectador. */ --px:0;--py:0; --tilt-x:calc(var(--py) * 6deg); --tilt-y:calc(var(--px) * -6deg); transition:transform .5s var(--ease); } .plano.inclinando{transition:transform .08s linear} .plano::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px; background:linear-gradient(150deg,rgb(255 255 255 / .55) 0%,rgb(255 255 255 / .06) 30%,rgb(255 255 255 / 0) 55%,rgb(255 255 255 / .22) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude; } .plano:nth-child(1){transform:perspective(1600px) rotateY(9deg) translateZ(-40px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))} .plano:nth-child(3){transform:perspective(1600px) rotateY(-9deg) translateZ(-40px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))} .plano-destaque{z-index:2;border-color:rgb(var(--acento) / .42);box-shadow:0 0 0 1px rgb(var(--acento) / .18),0 18px 60px -22px rgb(var(--acento) / .5)} .plano-destaque.reveal{transform:translateZ(30px) scale(1.04) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))} .plano-destaque::before{background:linear-gradient(150deg,rgb(var(--acento) / .95) 0%,rgb(var(--acento) / .28) 34%,rgb(255 255 255 / .05) 58%,rgb(var(--acento) / .6) 100%)} .plano-selo{position:absolute;top:-11px;left:clamp(20px,2vw,30px);padding:3px 10px;border-radius:var(--raio-pilula);background:var(--primary);color:var(--on-primary);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase} .plano-rotulo{font-family:var(--font-mono);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-subtle)} .plano-destaque .plano-rotulo{color:rgb(var(--acento))} .plano-nome{font-family:var(--font-display,inherit);font-size:clamp(26px,3vw,38px);line-height:1.1;margin:8px 0 0;font-weight:400} .plano-para{color:var(--fg-muted);font-size:clamp(14px,1.4vw,15px);line-height:var(--lh-corpo);margin:10px 0 0} .plano-preco{display:flex;align-items:baseline;gap:5px;margin:18px 0 0} .plano-cifra{color:var(--fg-muted);font-size:clamp(14px,1.4vw,16px)} .plano-valor{font-family:var(--font-display,inherit);font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--fg)} .plano-periodo{color:var(--fg-muted);font-size:clamp(13px,1.3vw,15px)} .plano-quota{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .pastilha{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--raio-pilula);border:1px solid var(--border-strong,var(--border));color:var(--fg-muted);font-size:13px} .pastilha::before{content:"";width:5px;height:5px;border-radius:50%;background:rgb(var(--acento) / .8);flex:none} .plano-itens{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px} .plano-itens li{position:relative;padding-left:18px;color:var(--fg-muted);font-size:clamp(13px,1.35vw,14.5px);line-height:var(--lh-corpo)} .plano-itens li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:rgb(255 255 255 / .28)} .plano-destaque .plano-itens li::before{background:rgb(var(--acento) / .75)} .plano-acao{margin-top:auto;justify-content:center;width:100%} .plano-itens + .plano-acao{margin-top:22px} @media (max-width:820px){ .planos-altar{grid-template-columns:1fr;perspective:none;gap:16px} .plano:nth-child(1),.plano:nth-child(3),.plano-destaque.reveal{transform:none} .plano-destaque{box-shadow:0 0 0 1px rgb(var(--acento) / .18)} } @media (prefers-reduced-motion:reduce){ .planos-altar{perspective:none} .plano:nth-child(1),.plano:nth-child(3),.plano-destaque.reveal{transform:none} } /* ============================================================ RESPONSIVO GERAL (transcrito) ============================================================ */ @media (max-width:1000px){ .rodape-grade{grid-template-columns:1fr 1fr} .rodape-cards{grid-column:1 / -1} } @media (max-width:820px){ .topo-nav{display:none} .menu-btn{display:flex} .menu-btn,.topo-insta{width:44px;height:44px} .topo-acoes .btn-3{padding-block:12px} #link-entrar{padding-block:13px} .telemetria{grid-template-columns:repeat(2,minmax(0,1fr))} .telemetria div{border-bottom:1px solid var(--border)} .telemetria div:nth-child(odd){border-right:1px solid var(--border)} .telemetria div:nth-child(even){border-right:none} .telemetria div:last-child{grid-column:1 / -1;border-bottom:none;border-right:none} .secao-confere .confere-grade{grid-template-columns:1fr} .secao-confere .conferencia-numeros div:last-child{grid-column:auto;border-right:none} } @media (max-width:560px){ .rodape-grade{grid-template-columns:1fr} .rodape-cards{grid-template-columns:1fr} .marca-nome small{display:none} .topo-insta{display:none} .kicker{gap:6px;padding:6px 10px;letter-spacing:.03em} } /* ============================================================================ MOTOR DO PLANO-SEQUÊNCIA UM palco só (.jornada > .palco), grudado (position:sticky) do começo ao fim da jornada inteira. Um canvas cruza em fusão os quadros da lista CONTÍNUA dos 14 trechos de vídeo, pelo progresso GLOBAL de rolagem da seção (lp2.js). .palco-texto guarda os 8 .capitulo-texto (um por capítulo); só o .ativo mostra (crossfade por opacity), e dentro dele só uma .batida por vez, exatamente como antes. ============================================================================ */ .jornada{position:relative;background:var(--breu)} /* A altura total = 100svh (o palco) + a SOMA dos cursos dos 8 capítulos. ESPELHA quadros/manifesto.json (capitulos[].cursoDesktop/Mobile), de propósito NÃO lida do JSON em tempo de execução: mudar depois que a página já pintou re-fluiria o layout debaixo do dedo de quem está rolando. Quem mudar um curso no manifesto muda a soma aqui também. Desktop (cursos dobrados em 23/09): 80(inicio)+440+280+360+400+560+400+300+320 = 3140 */ .jornada{min-height:calc(100svh + 3140 * 1svh)} @media (max-width:820px){ /* Mobile (dobrados): 80(inicio)+340+240+280+300+420+300+240+260 = 2460 */ .jornada{min-height:calc(100svh + 2460 * 1svh)} } .palco{position:sticky;top:var(--topo-altura);height:calc(100svh - var(--topo-altura));overflow:clip;background:var(--breu)} .palco-tela{position:absolute;inset:0} .palco-fallback,.palco-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--breu)} .palco-fallback[hidden]{display:none} /* Rótulo do fallback: só aparece se a imagem faltar E a página estiver rodando local (lp2.js decide isso; aqui só a aparência). Cantinho discreto, de propósito: um debug tag não pode brigar com o texto real. */ .palco-sem-quadro .palco-rotulo-fallback{ display:flex;position:absolute;right:10px;top:10px;z-index:2; padding:3px 7px;background:rgb(0 0 0 / .5);border:1px solid var(--border); font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--fg-subtle); } .palco-rotulo-fallback{display:none} /* O véu: terço esquerdo escurecido para o texto, faixa de baixo para a barra de contraste. Emenda com --breu, sem linha visível. */ .palco-veu{position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg, var(--breu) 0%, var(--breu-suave) 22%, rgb(16 22 27 / .28) 44%, transparent 62%), linear-gradient(to top, var(--breu) 0%, rgb(16 22 27 / .7) 20%, transparent 48%); } /* Banda de 62% da altura do palco, encostada no fundo: o .museu fica no topo dela (fluxo normal, já que é o único filho que não é .batida), e cada .batida é absoluta DENTRO desta banda, ancorada no fundo dela. Sem a banda ter altura explícita, .palco-texto encolhia para a altura do .museu sozinho (as .batida, absolutas, não contam pra altura do pai) e tudo ficava espremido nos últimos pixels do palco — medido no Playwright. */ .palco-texto{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;padding:0 var(--gutter) clamp(28px,6vh,56px)} /* Um .capitulo-texto por capítulo, todos empilhados na MESMA caixa (inset:0 dentro de .palco-texto, sem padding/borda própria: a geometria de .batida abaixo não muda nada). Só o .ativo mostra; a troca é opacity, nunca display, para o crossfade ficar suave. .capitulo-cena (o quadro-chave final de cada capítulo) só existe visualmente sob prefers-reduced-motion, mais abaixo. */ .capitulo-texto{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)} .capitulo-texto.ativo{opacity:1;pointer-events:auto} /* O rótulo herda margin-left, nunca padding no .capitulo-texto: .batida é position:absolute com left PRÓPRIO (var(--gutter) aqui, 150px abaixo), e um padding no pai não moveria a caixa de inset dela -- só a do .museu, que é o único filho de fluxo normal. Sem isto, o .museu ficava sempre em x≈0 (o defeito de 1909x872 achado pelo Arthur: colava no trilho VI·ESCULPI·PRODUZI, left:22px). */ .capitulo-texto .museu{position:relative;color:var(--fg-subtle);margin-left:var(--gutter)} .capitulo-cena{display:none} .batida{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,56px); max-width:min(560px,92%); opacity:0;transform:translateY(14px); transition:opacity .55s var(--ease),transform .55s var(--ease); pointer-events:none; } .batida.ativa{opacity:1;transform:none;pointer-events:auto} .batida h2{color:var(--fg)} .batida p{font-size:clamp(16px,1.8vw,19px);color:var(--fg);line-height:var(--lh-corpo)} .batida p b{color:var(--fg);font-weight:500} .batida-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px} .batida-lista li{position:relative;padding-left:20px;font-size:clamp(14px,1.6vw,16px);color:var(--fg-muted);line-height:var(--lh-corpo)} .batida-lista li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--reprovado)} .batida .btn{margin-top:16px} /* A fileira de botões da primeira batida (ex-.heroi-botoes): só ela tem dois CTAs lado a lado; as outras têm no máximo um .btn. */ .batida-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} /* O trilho VI · ESCULPI · PRODUZI mora fixo em left:22px no computador e pode invadir a mesma faixa esquerda que o texto do capítulo usa. Reservo a largura dele aqui, só no computador (no celular o trilho vira uma faixa fina no topo, e não disputa espaço com o texto). */ @media (min-width:821px){ .palco-texto{padding-left:150px} .batida{left:150px} .capitulo-texto .museu{margin-left:150px} } @media (max-width:820px){ /* CONTRASTE NO CELULAR (pedido do Arthur, 23/09; eu mesmo tinha apontado o conflito). O bug: .palco-texto{height:72%} bate o topo do texto (onde o .museu senta) EXATAMENTE no ponto "transparent 72%" do véu antigo -- zero escurecimento bem onde o rótulo precisa dele, e o quadro do vídeo (marmore claro, faísca) vaza direto atrás da letra. Corrigido em duas frentes, nenhuma escurece o vídeo INTEIRO: 1) o véu agora nunca chega a 0 dentro da faixa de texto (0-72%): o stop final foi de "transparent 72%" para "rgb(.../.55) 72%" e empurrado pra "transparent 90%" -- só o topo do palco (90-100%, onde não há texto) continua limpo. 2) sombra no PRÓPRIO texto (.museu e .batida), que garante letra legível em cima de QUALQUER quadro, sem depender só do gradiente. */ .palco-veu{background: linear-gradient(to top, var(--breu) 0%, rgb(16 22 27 / .85) 30%, rgb(16 22 27 / .38) 55%, rgb(16 22 27 / .22) 72%, transparent 86%); } .batida h2,.batida p,.batida-lista li{ text-shadow:0 1px 2px rgb(0 0 0 / .95), 0 1px 7px rgb(0 0 0 / .9), 0 2px 20px rgb(0 0 0 / .75); } /* O .museu é mono pequeno (11px): sombra sozinha não segura contraste contra um quadro claro/saturado (medido: "06 · PRODUZI", fundo azul do criativo). Uma pilula escura por trás -- não o palco inteiro -- garante legibilidade em QUALQUER quadro, do jeito mais barato. */ .palco-texto .museu{ background:rgb(0 0 0 / .55);border-radius:var(--raio-pilula); padding:5px 11px; backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); } .batida{max-width:100%;bottom:clamp(24px,6vh,48px);right:var(--gutter)} .palco-texto{height:72%;padding-bottom:clamp(24px,6vh,48px)} } @media (prefers-reduced-motion:reduce){ /* Sem rolagem guiada: a jornada solta o palco, e cada capítulo vira um bloco parado na lista (a imagem do quadro-chave final + o texto inteiro, todas as batidas ativas, sem transição) -- como já era antes de existir um palco por capítulo. lp2.js não liga o laço de progresso neste modo; esta regra é a rede de segurança visual caso ele rode mesmo assim. */ .jornada{min-height:0} .palco{position:static;height:auto;overflow:visible;padding-block:var(--secao-y)} .palco-fallback,.palco-canvas,.palco-veu,.palco-rotulo-fallback,.aida-etiqueta{display:none} .palco-texto{position:static;height:auto;padding:0} .capitulo-texto{position:static;opacity:1;pointer-events:auto;transition:none;margin-bottom:clamp(40px,8vh,72px)} .capitulo-texto:last-child{margin-bottom:0} .batida{position:relative;left:0;right:0;bottom:0;max-width:100%;opacity:1;transform:none;pointer-events:auto;margin-bottom:18px} .capitulo-texto .museu{margin-left:0} .capitulo-cena{display:block;position:relative;min-height:56svh;overflow:hidden;border-radius:var(--raio-md);margin-bottom:20px;background:var(--breu)} .capitulo-cena img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .capitulo-cena::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--breu) 0%,transparent 60%)} } /* A primeira batida (id="inicio", ex-herói): mesmo .batida de sempre, só com h1 (título da página, um só por documento) em vez de h2 -- por isso a margem própria, já que .batida h2 não alcança h1. */ .batida h1{color:var(--fg);margin-bottom:12px} @media (max-width:560px){ #inicio .batida-botoes .btn{width:100%} } /* ============================================================ TRILHO VI · ESCULPI · PRODUZI ============================================================ */ .trilho-vep{position:fixed;z-index:45;opacity:0;visibility:hidden;pointer-events:none; transition:opacity var(--media) var(--ease),visibility 0s var(--media); } .trilho-vep.visivel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--media) var(--ease),visibility 0s} @media (min-width:821px){ .trilho-vep{left:22px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:26px;align-items:flex-start;padding-left:14px} .trilho-linha{position:absolute;left:3px;top:2px;bottom:2px;width:1px;background:var(--border-strong)} .trilho-preenchido{position:absolute;left:0;top:0;width:100%;height:0;background:var(--signal);box-shadow:0 0 8px rgb(var(--acento-luz) / .6);transition:height .15s linear} .trilho-vep a{position:relative;font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);transition:color var(--rapida) var(--ease)} .trilho-vep a::before{content:"";position:absolute;left:-14px;top:50%;translate:0 -50%;width:7px;height:7px;border-radius:50%;background:var(--ink-3);border:1px solid var(--border-strong);transition:background var(--rapida) var(--ease),border-color var(--rapida) var(--ease)} .trilho-vep a:hover{color:var(--fg)} .trilho-vep a[aria-current]{color:var(--fg)} .trilho-vep a[aria-current]::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 8px rgb(var(--acento-luz) / .7)} } @media (max-width:820px){ .trilho-vep{left:0;right:0;top:var(--topo-altura);height:3px;display:flex;gap:2px;padding:0 2px} .trilho-vep .trilho-linha,.trilho-vep .trilho-preenchido{display:none} .trilho-vep a{flex:1;position:relative;height:3px;background:var(--border-strong);overflow:hidden} .trilho-vep a::before{content:"";position:absolute;left:-6px;right:-6px;top:-18px;bottom:-18px} .trilho-vep a .trilho-fatia{position:absolute;inset:0;width:0;background:var(--signal);transition:width .15s linear} .trilho-vep a[aria-current] .trilho-fatia,.trilho-vep a.feito .trilho-fatia{width:100%} .trilho-vep .trilho-palavra{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } @media (prefers-reduced-motion:reduce){ .trilho-vep{position:static;opacity:1;visibility:visible;pointer-events:auto;margin:0 auto var(--secao-y);width:fit-content} .trilho-preenchido,.trilho-fatia{display:none} } /* ============================================================ QUAIS DESTAS VOCÊ SENTE? (dores marcáveis) ============================================================ */ .secao-dores{background:var(--marmore-8)} .dores-lista{display:grid;gap:10px;margin-top:clamp(20px,3vw,32px);max-width:760px} .dor-item{border-radius:var(--raio-md);border:1px solid var(--border);background:var(--surface);overflow:hidden} .dor-rotulo{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;cursor:pointer} .dor-rotulo input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .dor-caixa{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:5px;border:1px solid var(--border-strong); display:grid;place-items:center;transition:border-color var(--rapida) var(--ease),background var(--rapida) var(--ease); } .dor-caixa svg{width:12px;height:12px;opacity:0;transition:opacity var(--rapida) var(--ease);color:var(--on-primary)} .dor-rotulo:has(input:checked) .dor-caixa{background:var(--primary);border-color:var(--primary)} .dor-rotulo:has(input:checked) .dor-caixa svg{opacity:1} .dor-rotulo:has(input:focus-visible) .dor-caixa{outline:2px solid var(--signal);outline-offset:2px} .dor-texto{font-size:var(--t-corpo);color:var(--fg);line-height:1.5} .dor-resposta{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .dor-rotulo:has(input:checked) + .dor-resposta{max-height:220px} .dor-resposta-miolo{padding:0 18px 18px 50px;border-top:1px solid var(--border);margin-top:-1px;padding-top:14px} .dor-resposta p{font-size:var(--t-corpo-p);color:var(--fg-muted);line-height:var(--lh-corpo)} .dores-acao{margin-top:clamp(22px,3vw,32px);display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dores-contagem{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)} @media (prefers-reduced-motion:reduce){ .dor-resposta{transition:none} } /* ============================================================ LOJAS FICTÍCIAS: cartões no estilo Sabino (REFERENCIA-SABINO.md, item 2). Não há iframe nem vídeo: "a loja rodando" é uma captura de PÁGINA INTEIRA, parada, dentro de uma janela com overflow:hidden, que rola no hover (computador) ou já fica no fim do brilho (toque). ============================================================ */ .secao-mockups .cabeca{max-width:640px;margin-bottom:clamp(24px,4vw,40px)} .secao-mockups .cabeca p{color:var(--fg-muted);font-size:clamp(15px,1.6vw,17px);margin-top:12px} .mockups-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)} .mockup{position:relative;border-radius:var(--raio-lg);border:1px solid var(--border);background:var(--ink-2); padding:10px;isolation:isolate} /* O brilho interno, no rubi da casa (a Sabino usa ciano; REFERENCIA-SABINO.md item 2 pede o acento daqui no lugar dele). No toque fica sempre aceso -- é como o site de referência compensa a falta de hover. */ .mockup::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / 0); transition:box-shadow .8s cubic-bezier(.24,0,.28,1); } @media (hover:hover){ .mockup:hover::after{box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / .55)} } @media (hover:none){ .mockup::after{box-shadow:inset 0 -15px 34px -10px rgb(var(--acento) / .55)} } /* A janela de navegador: reaproveita o componente da main (dots + barra de endereço), agora com a captura de página inteira dentro. */ .navegador{border-radius:calc(var(--raio-lg) - 6px);position:relative;overflow:hidden; border:1px solid var(--border-strong);background:var(--ink-2);box-shadow:var(--sombra-peca)} .navegador-barra{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--ink-3)} .navegador-bolas{display:flex;gap:5px} .navegador-bolas i{width:8px;height:8px;border-radius:50%;background:var(--ink-5);display:block} .navegador-url{flex:1;min-width:0;padding:5px 10px;background:var(--ink-0);border:1px solid var(--border);font-family:var(--font-mono);font-size:var(--t-rotulo);color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navegador-tela{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--ink-0)} .navegador-tela img{width:100%;height:auto;display:block} /* A "loja rodando": a captura (1280x1237, quase quadrada -- página inteira) é bem mais alta que a janela (16:10); no hover ela sobe até mostrar o fim, e volta ao soltar. -35% é a folga entre as duas alturas em FRAÇÃO da imagem, não em px: vale pra qualquer largura de cartão, porque janela e imagem escalam juntas (a Sabino, com uma captura só, usa um valor fixo em px; aqui são 3 capturas, então fração). */ @media (hover:hover){ .navegador-tela img{transition:transform 1.2s cubic-bezier(.44,0,.56,1) .1s} .mockup:hover .navegador-tela img{transform:translateY(-35%)} } @media (hover:none){ .navegador-tela img{transform:translateY(-35%)} } .mockup-rodape{display:flex;flex-direction:column;gap:12px;padding:14px 8px 6px} .mockup-rodape-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .mockup-nome{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:clamp(19px,2vw,23px);color:var(--fg)} .mockup-swatch{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgb(255 255 255 / .08)} .mockup-nicho{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);margin-top:4px} /* O selo "Novo": pílula com estrela, brilho interno no rubi (a Sabino usa ciano aqui também). */ .mockup-selo-novo{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto; padding:6px 14px;border-radius:var(--raio-pilula);background:var(--ink-3); font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle); box-shadow:inset 0 -9px 15px -10px rgb(var(--acento) / .5); } .mockup-selo-novo svg{width:12px;height:12px;color:rgb(var(--acento));flex:0 0 auto} .mockup-acao{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; padding-top:12px;border-top:1px solid var(--border)} /* padding:12px (não os 13px do .btn base) só pra abrir espaço pro selo ao lado sem quebrar linha; a soma com a borda ainda fecha 44px de alvo de toque (revisão de celular, item 5). */ .mockup-entrar{padding:12px 16px;font-size:13px} .mockup-placa{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-subtle);border:1px solid var(--border);padding:4px 9px;border-radius:var(--raio-sm);white-space:nowrap} /* Bloco neutro: fica embaixo da foto de produto por CSS (background-image sobre background-color). Se o arquivo não existir, a cor mostra sozinha, sem JavaScript de fallback e sem link quebrado visível. */ .bloco-neutro{aspect-ratio:1/1;border-radius:var(--raio-sm);background-size:cover;background-position:center} @media (max-width:1000px){ .mockups-grade{grid-template-columns:1fr} .mockup{max-width:440px;margin-inline:auto;width:100%} } /* Entrada pela rolagem, SÓ NO COMPUTADOR (REFERENCIA-SABINO.md item 2): cada cartão nasce em translateY(50px) scale(.9), opacidade .4, e vai ao natural conforme entra na tela. animation-timeline:view() faz isso sem JS; onde falta suporte, ligarEntradaMockups (lp2.js) troca por IntersectionObserver + a MESMA transição, disparada uma vez -- nunca os dois motores ligados ao mesmo tempo (o CSS testa o suporte do outro com @supports, o JS testa o do CSS com CSS.supports). */ @keyframes mockup-entra{ from{opacity:.4;transform:translateY(50px) scale(.9)} to{opacity:1;transform:none} } @media (min-width:1001px) and (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .mockup{animation:mockup-entra linear both;animation-timeline:view();animation-range:entry 0% entry 100%} } @supports not (animation-timeline:view()){ .mockup{opacity:.4;transform:translateY(50px) scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease)} .mockup.mockup-entrou{opacity:1;transform:none} } } @media (prefers-reduced-motion:reduce){ .navegador-tela img{transition:none;transform:none} } /* ============================================================ CRIATIVOS FICTÍCIOS: o anel 3D da Sabino (REFERENCIA-SABINO.md, item 1), com a estátua de corpo inteiro (fotos/estatua-toga.webp) no lugar da janela do herói dela. CSS 3D puro: a rotação é @keyframes, não JS; ligarCarrosselCriativos (lp2.js) só pausa fora da tela. ============================================================ */ .secao-criativos{background:var(--ink-0);overflow:clip} .criativos-cabeca{max-width:640px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,4vw,44px)} .criativos-cabeca p{color:var(--fg-muted);font-size:clamp(15px,1.6vw,17px)} .criativos-cabeca .btn{margin-top:4px} /* O palco: a estátua fica presa no FUNDO dele (o pedestal encosta no rodapé da seção); a altura escala com a viewport, então o anel e a estátua crescem/encolhem juntos sem breakpoint próprio -- só o --k do anel (abaixo) é ajustado à parte, porque o raio/perspectiva/cartão do anel são px fixos (mesma receita da Sabino), não porcentagem. */ .criativos-palco{position:relative;height:clamp(420px,88vw,760px);margin-top:clamp(-8px,-1vw,0px)} /* A estátua: camada plana por cima (z-index maior que o anel), presa no fundo do palco. Fundo já preto na própria imagem (breu): o palco também é --ink-0 puro, para a emenda não aparecer. */ .criativos-estatua{position:absolute;left:50%;bottom:0;translate:-50% 0; height:100%;width:auto;max-width:none;z-index:2;pointer-events:none; -webkit-user-select:none;user-select:none; } /* O anel: atrás da estátua, a .6 de opacidade, dissolvendo para transparente embaixo (mesma receita da Sabino). O centro (equador) fica na ALTURA DO PEITO da estátua -- medido na imagem (estatua-toga.webp, 1000x1491): o peito/ombro fica a uns 32% do topo. Como a estátua tem height:100% do palco, 32% do PALCO é o mesmo ponto. */ .criativos-anel-camada{position:absolute;left:50%;top:32%;z-index:1; width:1360px;height:486px; --k:1; transform:translate(-50%,-50%) scale(var(--k)); perspective:800px; opacity:.6; -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 95%); mask-image:linear-gradient(to bottom, black 55%, transparent 95%); pointer-events:none; } .criativos-anel{position:relative;width:100%;height:100%;transform-style:preserve-3d} @media (prefers-reduced-motion:no-preference){ .criativos-anel{animation:criativos-girar 50s linear infinite} .criativos-anel.criativos-pausado{animation-play-state:paused} } @keyframes criativos-girar{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}} /* Cada cartão: pivô no centro da caixa (top/left 50% + margem negativa de metade da largura/altura), depois gira i*30° em volta do eixo, empurra pro raio, e vira 180° pra olhar pro centro -- backface-visibility esconde a fatia da frente sozinha (a "parede côncava" da Sabino). */ .criativos-cartao{position:absolute;top:50%;left:50%;width:260px;height:370px;margin:-185px 0 0 -130px; border-radius:20px;overflow:hidden;background:var(--ink-2); backface-visibility:hidden;-webkit-backface-visibility:hidden; transform:rotateY(calc(var(--i) * 30deg)) translateZ(570px) rotateY(180deg); box-shadow:var(--sombra-peca); } .criativos-cartao img{width:100%;height:100%;object-fit:cover;display:block} .criativos-titulo{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px; background:linear-gradient(to top, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .35) 60%, transparent 100%); font-family:var(--font-display);font-size:18px;line-height:1.22;color:var(--fg); } @media (max-width:820px){ .criativos-anel-camada{--k:.6} } @media (max-width:480px){ .criativos-anel-camada{--k:.46} } @media (prefers-reduced-motion:reduce){ .criativos-palco{height:clamp(320px,72vw,520px)} } /* ============================================================ FAIXAS DE BANNERS: duas fileiras inclinadas, sentidos opostos (REFERENCIA-SABINO.md, item 3a). ligarFaixasBanners (lp2.js, ~45 linhas) é o único motor de transform daqui -- o CSS só inclina, corta e esmaece as pontas. ============================================================ */ .secao-banners{background:radial-gradient(ellipse 60% 100% at 50% 30%, rgb(var(--acento) / .07), transparent 60%), var(--ink-0); overflow:clip;padding-block:clamp(40px,6vw,64px)} .banners-cabeca{margin-bottom:clamp(20px,3vw,32px)} .banners-pista{display:flex;flex-direction:column;gap:12px} .banners-linha{transform:perspective(1200px) rotateX(16deg)} .banners-linha:last-child{opacity:.5} .banners-mascara{overflow:hidden;padding:10px 0; -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); } .banners-trilho{display:flex;gap:14px;width:max-content;list-style:none;margin:0;padding:0} .banner-item{position:relative;flex:0 0 auto;width:clamp(240px,30vw,480px);aspect-ratio:3.2/1; border-radius:var(--raio-sm);overflow:hidden;background:var(--ink-2)} .banner-item img{width:100%;height:100%;object-fit:cover;display:block} .banner-texto{position:absolute;left:0;right:0;bottom:0;padding:clamp(10px,1.6vw,16px); background:linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .15) 70%, transparent 100%); font-family:var(--font-display);font-size:clamp(14px,1.5vw,19px);color:var(--fg);line-height:1.2} /* ============================================================ QUEM SOU -> A IRON EDGE: um palco só (.qi-palco, sticky), dividido pela rolagem em duas fases (ligarQuemIron, lp2.js -- pedido do Arthur, 23/09: "primeiro aparece quem eu sou e depois o Iron Edge"). .quem-cartao e .iron-forja .cartao/.rotulo/.conta/.iron-cta-wrap são os MESMOS componentes de sempre; só a moldura em volta mudou (eram duas seções compridas, cada uma com seu próprio sticky; agora uma seção só, um palco, duas camadas dentro dele). O verde #294632 e o bege #EBDCC5 do kit da Iron continuam confinados ao .iron-forja -- não viram token global (a Iron Edge fica separada da Vidius, decisão do Arthur de 16/09). ============================================================ */ .secao-qi{position:relative;background:var(--ink-2);min-height:calc(100svh + 600 * 1svh)} @media (max-width:820px){.secao-qi{min-height:calc(100svh + 480 * 1svh)}} .qi-palco{position:sticky;top:var(--topo-altura);height:calc(100svh - var(--topo-altura));overflow:clip} /* FASE 1: Quem sou. .qi-bloco é a versão "tocada pelo progresso" do .reveal, com os MESMOS valores de opacidade/transform -- mas .reveal é ligado por IntersectionObserver e acende uma vez só, e aqui a entrada de cada bloco (e a saída da fase inteira, --sai) precisa ser reversível quadro a quadro com a rolagem, por isso a classe própria. */ .qi-fase-quem{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center; opacity:calc(1 - var(--sai,0)); transform:translateY(calc(var(--sai,0) * -7%)) scale(calc(1 - var(--sai,0) * .05)); } .qi-fase-quem[data-fora]{pointer-events:none} .qi-quem-envelope{display:flex;flex-direction:column;align-items:center;gap:2px} .qi-bloco{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .qi-bloco.visivel{opacity:1;transform:none} .quem-cartao{width:min(640px,100%);border-radius:var(--raio-md);border:1px solid var(--border);background:var(--surface);padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:16px} .quem-cartao-topo{display:flex;align-items:center;gap:16px} .quem-foto{width:84px;height:84px;border-radius:50%;overflow:hidden;border:1px solid var(--border-strong);flex:0 0 auto} /* arthur-quem.webp é retrato 9:16 (893x1600, filtro breu); num círculo de 84px o "cover" (que enquadra pela LARGURA) sobraria quase o dobro da altura da caixa -- centralizado (padrão) cortava o rosto pela metade e sobrava paletó. object-position sobe o enquadramento pros olhos. */ .quem-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%} .quem-nome{font-family:var(--font-display);font-size:clamp(21px,2.2vw,26px);color:var(--fg)} .quem-cargo{font-family:var(--font-mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle);margin-top:4px} .quem-texto p{color:var(--fg-muted);font-size:var(--t-corpo-p);line-height:var(--lh-corpo)} .quem-texto p + p{margin-top:10px} .quem-texto b{color:var(--fg);font-weight:500} .quem-cartao .btn{align-self:flex-start;margin-top:4px} /* FASE 2: a forja da Iron Edge (transcrito quase 1:1 de _construcao/lp2/insumos/iron/index.html; iron-forja.js é quase o mesmo script -- só a fiação do fim mudou, ver o comentário lá). O cartão nasce pequeno e sobe (--cresce 0 -> 1) até tomar o palco; o canvas mede o próprio layout (clientWidth/Height, iron-forja.js), não a caixa já escalada, então este transform não faz o desenho reamostrar. */ .qi-fase-iron{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:clamp(12px,3vw,40px); opacity:var(--cresce,0); transform:translateY(calc((1 - var(--cresce,0)) * 14%)) scale(calc(.22 + .78 * var(--cresce,0))); transform-origin:50% 62%; } .qi-fase-iron[data-fora]{pointer-events:none} .iron-forja .cartao{position:relative;width:min(1180px,100%);height:min(78svh,700px);border-radius:22px;overflow:hidden; border:1px solid rgb(235 220 197 / .14);background:#000} .iron-forja .cartao canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .iron-forja .conta{position:absolute;left:0;right:0;bottom:clamp(76px,13vh,116px);display:flex;flex-wrap:wrap;justify-content:center; gap:0 .32em;padding:0 20px;text-align:center;margin:0; font-family:var(--font-display);font-size:clamp(22px,3.4vw,40px);color:#EBDCC5;pointer-events:none} .iron-forja .conta span{opacity:.15} .iron-forja .conta i{font-style:italic} .iron-forja .rotulo{position:absolute;left:clamp(16px,2.4vw,28px);top:clamp(14px,2.4vw,24px);font-family:var(--font-mono); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgb(235 220 197 / .7)} .iron-forja .iron-cta-wrap{position:absolute;left:0;right:0;bottom:clamp(20px,3.6vh,36px);display:flex;justify-content:center; opacity:.15;pointer-events:none} .iron-forja .iron-cta-wrap.visivel{pointer-events:auto} .iron-forja .iron-cta-wrap .btn-2{border-color:rgb(235 220 197 / .5);color:#EBDCC5} .iron-forja .iron-cta-wrap .btn-2:hover{border-color:rgb(235 220 197 / .85);color:#fff} @media (max-width:560px){ .iron-forja .cartao{height:min(66svh,560px)} } @media (prefers-reduced-motion:reduce){ /* Sem rolagem guiada: as duas fases empilham, uma depois da outra, inteiras -- mesma rede de segurança que .jornada já usa. ligarQuemIron (lp2.js) não liga o laço neste modo; isto é o visual caso ele rode mesmo assim. */ .secao-qi{min-height:auto} .qi-palco{position:static;height:auto;overflow:visible;display:flex;flex-direction:column;gap:clamp(40px,8vh,72px);padding-block:var(--secao-y)} .qi-fase-quem,.qi-fase-iron{position:static;inset:auto;opacity:1!important;transform:none!important} .qi-bloco{opacity:1;transform:none;transition:none} .iron-forja .cartao{height:min(70svh,620px)} } /* ============================================================ BARRA DE ROLAGEM: escondida, sem marcador nenhum no lugar. O Arthur pediu em 23/09 "eu quero a seta vermelha e nao quero barra de rolagem aparecendo": a "seta vermelha" era o CURSOR vermelho da LP da main (bloco transcrito logo abaixo), nao um marcador; o marcador lateral vermelho que chegou a existir saiu no mesmo dia ("sem essa barra lateral vermelha de scroll"). scrollbar-width/-webkit-scrollbar so ESCONDEM o desenho; roda, toque, teclado e arrastar continuam iguais. */ html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar{width:0;height:0;display:none} /* O CURSOR VERMELHO, transcrito da secao 6 de assets/estilo.css (LP da main), sem mudanca de valor: seta, mao e texto em SVG embutido, rubi-4 com contorno preto, e a saida de emergencia para alto contraste. */ /* ============================================================ 6. O CURSOR D4 (18/09, "o mouse vermelho as vezes fica branco quando passa ele em cima de algum elemento da pagina"): a versão anterior devolvia o cursor ao sistema em dois lugares — `auto` (o I) sobre todo texto de leitura, `pointer` (a mão branca do Windows) sobre link e botão — e era exatamente esse retorno ao branco que o dono via como defeito. ITEM 3 da Parte 3 fecha os dois ralos: os TRÊS cursores agora são desenho da casa, nunca do sistema, e moram em três variáveis (`--cur-seta`, `--cur-mao`, `--cur-texto`) dentro deste bloco. A SETA é a base: `body{cursor:var(--cur-seta)}` cobre a página inteira por herança, inclusive o texto de leitura (o I de seleção sai; selecionar texto continua funcionando do mesmo jeito, só que com a seta em cima — palavras do próprio pedido). Só dois grupos pedem um desenho diferente da seta: onde se CLICA (a mão) e onde se DIGITA (a barra). Fora desses dois grupos, nenhuma regra deste bloco declara `cursor` — é a HERANÇA que entrega a seta ao resto da página. Dentro deste bloco, todo `cursor:` que existir tem que ser um `var(--cur-*)` (invariante de revisão manual: este comentário nasceu citando "a trava T40" antes de T40 existir de verdade — T40 acabou virando o teto de bytes do luz.js em e7f8137 e, nesta fusão com a main em 20/09, virou T48; nenhuma trava do verificar.mjs confere este bloco hoje). Continua valendo o caminho descartado no ITEM 4 (o elemento CSS seguindo o ponteiro): aqui a imagem é do PRÓPRIO cursor do sistema, substituída, nunca escondida — `cursor:none` não aparece em lugar nenhum. Se o navegador recusar o SVG, a palavra depois da vírgula (`default`/`pointer`/`text`) devolve o ponteiro nativo. O contorno é preto a 80% nos três desenhos: é ele que faz a tinta rubi ser vista em qualquer fundo por trás (o preto da página, o branco das prévias). Nenhum dos três pisca ou respira: quem respira é a página. ATENÇÃO na manutenção: `%23e14d47` é #e14d47 escrito para data URI, e é a única cor deste arquivo que NÃO sai de var() — nas três variáveis abaixo. Se o acento da casa mudar, as três mudam juntas. */ @media (hover:hover) and (pointer:fine){ /* Só onde existe ponteiro de verdade, e as TRÊS variáveis moram dentro do mesmo @media: fora dele elas não existem, e um `var(--cur-seta)` usado por engano em toque cai no valor inválido, que devolve o cursor do sistema — errado de um jeito visível, não calado. */ :root{ /* SETA. Ponto quente na ponta (4 3) — o mesmo desenho que já existia aqui, só que agora nomeado. */ --cur-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5v16.2l4.3-4 2.9 6.5 2.7-1.2-2.8-6.3h5.9z' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,default; /* MÃO. Um dedo indicador apontando (a ponta, à esquerda), os outros três dobrados em degrau de altura e o polegar tocando a base — a mesma leitura da mão branca do Windows, na tinta da casa. Ponto quente na ponta do dedo (8 3), como o pedido descreve. */ --cur-mao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='14' width='7' height='4.2' rx='2.1' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' transform='rotate(-22 5.5 16.1)'/%3E%3Crect x='5' y='12' width='15' height='9' rx='4' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5'/%3E%3Crect x='17.7' y='9' width='3' height='4.3' rx='1.5' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='14.3' y='7.5' width='3.4' height='5.8' rx='1.7' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='10.5' y='6' width='3.6' height='7.3' rx='1.8' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Crect x='6' y='3' width='4' height='10.5' rx='2' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5'/%3E%3C/svg%3E") 8 3,pointer; /* BARRA DE DIGITAR. Um I maiúsculo com serifa em cima e embaixo — a mesma leitura do I-beam do sistema. Ponto quente no centro (12 12): aqui não existe ponta, é uma barra que pousa sobre o texto onde o clique vai cair. */ --cur-texto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8v3h-3v12h3v3H8v-3h3V6H8z' fill='%23e14d47' stroke='%23000' stroke-opacity='.8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12,text; } body{cursor:var(--cur-seta)} /* `