/* Seções da home abaixo do herói (genesisinnovation.io).
Fora do index.html: a home tem teto de 60 KB, e este arquivo chega pelo logo
depois do herói, então o topo pinta antes e o resto não pisca sem estilo.
Escrito do celular para cima: o padrão é a tela de 375 px; @media (min-width) amplia.
Movimento só em transform/opacity (o compositor anda sozinho, sem repintar). */
section{padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:56px}
section>.w>h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:10px 0 28px;max-width:22ch}
@media (min-width:761px){section{padding-block:80px}section>.w>h2{margin-bottom:36px}}
.volta{margin-top:26px;color:var(--dim);font-size:14px}
.volta a{text-underline-offset:3px}
/* Entrada ao rolar: só esconde quando o JS já está de pé (classe "rev" no ),
então sem JS tudo aparece. */
.rev [data-rev]>*{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rev [data-rev].vis>*{opacity:1;transform:none}
.rev [data-rev].vis>:nth-child(2){transition-delay:.08s}.rev [data-rev].vis>:nth-child(3){transition-delay:.16s}
.rev [data-rev].vis>:nth-child(4){transition-delay:.24s}.rev [data-rev].vis>:nth-child(5){transition-delay:.32s}
.rev [data-rev].vis>:nth-child(6){transition-delay:.4s}
/* ---------- Low cortisol ----------
Celular: uma fileira que se arrasta de lado (cartões 4:5 e a ponta do próximo à
mostra), em vez de cinco fotos empilhadas. Desktop: mosaico.
A vida (legenda) num selo sólido embaixo; o trabalho (status) num selo em cima. */
.lc-t{margin:-12px 0 28px;max-width:52ch;color:var(--mut);font-size:clamp(16px,1.7vw,19px)}
.mos{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
margin-inline:-20px;padding:0 20px 6px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
.mos::-webkit-scrollbar{display:none}
.mos .t{position:relative;margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--bg2);scroll-snap-align:start;isolation:isolate}
.mos picture,.mos img{position:absolute;inset:0;width:100%;height:100%}
.mos img{object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.mos .t-familia img{object-position:50% 35%}.mos .t-viagem img{object-position:78% 45%}
.mos .t:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));z-index:0}
.mos figcaption{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;font:600 17px/1.25 Sora,sans-serif;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mos .st{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;
background:rgba(5,7,12,.78);border:1px solid rgba(255,255,255,.14);color:#F4F7F8;font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em}
.mos .st:before{content:"";width:7px;height:7px;border-radius:50%;background:#3BE38B;box-shadow:0 0 0 0 rgba(59,227,139,.6);animation:pulsa 2.4s ease-out infinite}
@keyframes pulsa{70%,100%{box-shadow:0 0 0 7px rgba(59,227,139,0)}}
.mos:not(.on) .st:before{animation-play-state:paused}
@media (min-width:761px){
.mos{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,14vw,190px);gap:14px;overflow:visible;margin:0;padding:0}
.mos .t{aspect-ratio:auto;grid-row:span 2;border-radius:22px}
.mos .t-amigos,.mos .t-familia,.mos .t-viagem{grid-column:span 2}
.mos figcaption{left:20px;bottom:18px;font-size:19px}
.mos .st{left:16px;top:16px}
.mos .t:hover img{transform:scale(1.05)}
}
/* ---------- A ideia ----------
A palavra da esquerda treme (a desordem está viva); a luz corre pela seta e, quando
chega, as letras da direita, espalhadas, caem no lugar. Depois a luz volta de tempos
em tempos e a palavra arrumada acende. Tudo parado fora da tela (classe "on"). */
.inv{display:grid;gap:18px;max-width:760px}
.par{display:grid;grid-template-columns:1fr 52px 1fr;align-items:center;gap:10px;font:600 clamp(19px,2.6vw,28px)/1.2 Sora,sans-serif}
.par .a{color:var(--dim);text-align:right;letter-spacing:.02em}
.par i{display:inline-block;font-style:normal}
.par .a i:nth-child(odd){transform:translateY(-.12em) rotate(-6deg)}.par .a i:nth-child(3n){transform:translateY(.1em) rotate(7deg)}
.on .par .a i{animation:treme 1.9s ease-in-out infinite alternate}
.on .par .a i:nth-child(odd){animation-duration:1.5s;animation-delay:-.7s}.on .par .a i:nth-child(3n){animation-duration:2.3s;animation-delay:-1.1s}
@keyframes treme{from{transform:translate(-.03em,.08em) rotate(-8deg)}to{transform:translate(.04em,-.1em) rotate(6deg)}}
.seta{position:relative;height:14px}
.par svg{display:block;width:100%;height:14px;overflow:visible}
.par line{stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.5}.par path{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round}
.par .fio{stroke:var(--brand);stroke-dasharray:110;stroke-dashoffset:0}
/* Seta cinza em repouso; o azul só existe no rastro da luz e na ponta quando ela chega
(Filipe, 28/10: "tem que ficar azul quando passa o negocinho"). Sem JS, fica azul. */
.arma .par path{stroke:color-mix(in srgb,var(--ink) 30%,transparent)}
.luz{position:absolute;inset:0 6px 0 0;opacity:0;pointer-events:none}
.luz:before{content:"";position:absolute;left:-4px;top:3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--brand)}
.par .b{color:var(--ink)}
/* Armado pelo JS antes de entrar na tela: letras da direita fora do lugar. */
.arma .par .b i{opacity:.15;transform:translate(var(--x),var(--y)) rotate(var(--r))}
.arma .par .fio{stroke-dashoffset:110}
/* Montagem: a luz corre em 0,8 s e o fio azul a acompanha (mesma curva, mesmo trecho de
tempo), depois some; as letras caem quando a luz chega. */
.play .par .fio{animation:rastro 1.6s calc(var(--n)*.28s) cubic-bezier(.45,0,.2,1) both}
.play .par path{animation:ponta 1.6s calc(var(--n)*.28s) both}
.play .par .b i{animation:cai .75s calc(var(--n)*.28s + .55s + var(--d)) cubic-bezier(.2,1.4,.4,1) forwards}
.play .luz{animation:corre 1.6s calc(var(--n)*.28s) cubic-bezier(.45,0,.2,1)}
/* Depois de montado: a cada 4,4 s a luz passa (1º quarto do ciclo), o fio acende atrás
dela e apaga, a ponta acende quando ela chega e a palavra brilha. */
.on.feito .luz{animation:corre4 4.4s calc(var(--n)*.9s) cubic-bezier(.45,0,.2,1) infinite}
.on.feito .par .fio{animation:rastro4 4.4s calc(var(--n)*.9s) cubic-bezier(.45,0,.2,1) infinite}
.on.feito .par path{animation:ponta4 4.4s calc(var(--n)*.9s) infinite}
.on.feito .par .b{animation:acende 4.4s calc(var(--n)*.9s) infinite}
@keyframes cai{to{opacity:1;transform:none}}
@keyframes corre{0%{opacity:0;transform:none}3%,45%{opacity:1}50%,100%{opacity:0;transform:translateX(100%)}}
@keyframes rastro{0%{stroke-dashoffset:110;opacity:1}50%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ponta{0%,45%,100%{stroke:color-mix(in srgb,var(--ink) 30%,transparent)}52%,75%{stroke:var(--brand)}}
@keyframes rastro4{0%{stroke-dashoffset:110;opacity:1}25%{stroke-dashoffset:0;opacity:1}45%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ponta4{0%,22%,55%,100%{stroke:color-mix(in srgb,var(--ink) 30%,transparent)}26%,40%{stroke:var(--brand)}}
@keyframes corre4{0%{opacity:0;transform:none}2%,22%{opacity:1}25%,100%{opacity:0;transform:translateX(100%)}}
@keyframes acende{0%,22%,100%{text-shadow:none}26%{text-shadow:0 0 18px color-mix(in srgb,var(--brand) 75%,transparent)}}
@media (min-width:521px){.par{grid-template-columns:1fr 120px 1fr;gap:14px}}
/* ---------- O que entregamos ----------
Cada cartão leva a algum lugar. Celular: lista (ícone à esquerda); desktop: 4 colunas
com a luz que segue o ponteiro (--mx/--my, do secoes.js). */
.of{display:grid;gap:12px}
/* Os cartões do James vêm logo abaixo da apresentação dele, sem título nem divisa próprios
(a home tem teto de 700 palavras). */
#james-faz{border-top:0;padding-top:0}
/* No celular ele só vem por cima do 1º cartão: o espaço é a altura da cabeça dele, para não
tapar o botão "Conhecer o James". */
@media (max-width:760px){#james-faz{padding-top:48px}}
.of a{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:20px;
text-decoration:none;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,transparent),transparent 55%);overflow:hidden;isolation:isolate;transition:border-color .3s,transform .3s}
.of a:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 22%,transparent),transparent 70%)}
.of a:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line))}.of a:hover:before{opacity:1}
.of .ic{grid-row:span 3;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.of svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.of h3{font-size:18px;margin:2px 0 4px}.of p{margin:0;color:var(--mut);font-size:15px;line-height:1.5}
.of .vai{margin-top:12px;color:var(--brand);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.of .vai:after{content:"→";transition:transform .3s}.of a:hover .vai:after{transform:translateX(4px)}
@media (min-width:761px){.of{grid-template-columns:1fr 1fr;gap:14px}}
@media (min-width:1000px){
.of{grid-template-columns:repeat(4,1fr)}
.of a{grid-template-columns:1fr;padding:26px 22px 22px;min-height:250px;align-content:start}
.of .ic{grid-row:auto;margin-bottom:22px}
.of .vai{margin-top:auto;padding-top:18px}
.of a{display:flex;flex-direction:column;align-items:flex-start}
.of a:hover{transform:translateY(-3px)}
}
/* ---------- Como trabalhamos: um infinito ----------
"O ciclo não acaba" (Filipe, 28/10): as quatro etapas presas num ∞ e uma luz que dá
a volta sem parar (secoes.js, só enquanto a seção está na tela). O laço da esquerda é
pedido e engenharia, o da direita entrega e medição, e o texto de cada etapa fica do
lado do laço dela: no desktop, 01/02 à esquerda e 03/04 à direita do símbolo; no
celular, o símbolo em cima e as etapas em 2x2, na mesma posição. */
.inf{position:relative}
.laco{display:block;width:100%;height:auto;margin:0 auto 22px;max-width:520px;overflow:visible}
.laco .trilho{fill:none;stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:2}
.laco .rastro{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;opacity:0}
.laco .no circle{fill:var(--bg);stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.5;transition:fill .4s,stroke .4s}
.laco .no text{font:500 13px "JetBrains Mono",ui-monospace,monospace;text-anchor:middle;fill:var(--dim);transition:fill .4s}
.laco .no.ativo circle{fill:var(--brand);stroke:var(--brand)}.laco .no.ativo text{fill:#000}
.laco .cometa{opacity:0}
.laco .cometa circle{fill:var(--brand)}.laco .cometa circle:first-child{opacity:.22}
.inf.anda .rastro,.inf.anda .cometa{opacity:1}
.passos{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;list-style:none;margin:0;padding:0}
.passos li{transition:opacity .4s}
.inf.anda .passos li:not(.ativo){opacity:.62}
.passos .nn{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 7px;margin-bottom:10px;border-radius:999px;border:1px solid var(--line);
font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--dim);transition:background .4s,color .4s,border-color .4s}
.passos .ativo .nn{background:var(--brand);border-color:var(--brand);color:#000}
.passos h3{font-size:18px;margin:0 0 4px}.passos p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.5}
/* As etapas seguem a posição dos nós: 01 em cima e 02 embaixo, à esquerda; 03 e 04 à direita. */
.passos li:nth-child(2){grid-area:2/1}.passos li:nth-child(3){grid-area:1/2}.passos li:nth-child(4){grid-area:2/2}
@media (min-width:900px){
.inf{padding:10px 0}
/* Três colunas 1 : 2 : 1 sem gap; o ∞ ocupa a do meio (25% a 75%). */
.laco{position:absolute;left:25%;width:50%;max-width:none;top:50%;transform:translateY(-50%);margin:0}
.passos{grid-template-columns:1fr 2fr 1fr;column-gap:0;row-gap:72px}
.passos li:nth-child(-n+2){text-align:right;padding-right:28px}
.passos li:nth-child(n+3){grid-column:3;padding-left:28px}
.passos h3{font-size:20px}.passos p{font-size:15px}
}
/* ---------- No ar hoje ----------
Sistema, NF-e e loja lado a lado, cada um com o estado em que está agora; ferramentas e
jogos numa linha no fim. Os sites ficaram só no carrossel logo acima (Filipe, 28/10: o
cartão de sites aqui repetia a mesma coisa). */
.cs{display:grid;gap:12px}
.cs .c{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:22px;text-decoration:none;
background:linear-gradient(170deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 60%);overflow:hidden;isolation:isolate;transition:border-color .3s,transform .3s}
.cs a.c:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));transform:translateY(-3px)}
.cs a.c:after{content:"↗";position:absolute;right:18px;top:16px;color:var(--dim);font-size:16px;transition:color .3s,transform .3s}
.cs a.c:hover:after{color:var(--brand);transform:translate(2px,-2px)}
.cs .k{font-size:11px;color:var(--brand)}
.cs h3{font-size:20px}.cs p{margin:0;color:var(--mut);font-size:15px;line-height:1.5;max-width:38ch}
/* Estado de agora, com o ponto verde batendo enquanto a seção está na tela. */
.vivo{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--dim)}
.vivo i{width:7px;height:7px;border-radius:50%;background:#3BE38B;box-shadow:0 0 0 0 rgba(59,227,139,.6)}
.cs.on .vivo i{animation:pulsa 2.4s ease-out infinite}
.vivo b{font-weight:500;color:#3BE38B}
.c-loja{background:radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,#8C7BFF 14%,transparent),transparent 60%)}
.extra{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.extra a{display:inline-flex;gap:6px;align-items:baseline;padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--mut);text-decoration:none;font-size:14px}
.extra a:hover{color:var(--ink);border-color:var(--ink)}.extra b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:760px){
.cs{grid-template-columns:repeat(3,1fr);gap:14px}
}
/* ---------- Dúvidas ---------- */
.fq{max-width:760px;border-top:1px solid var(--line)}
.fq details{border-bottom:1px solid var(--line)}
.fq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;position:relative;font:600 17px/1.4 Sora,sans-serif}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"";position:absolute;right:6px;top:24px;width:8px;height:8px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .2s}
.fq details[open] summary:after{transform:rotate(225deg)}
.fq p{margin:0 0 18px;color:var(--mut);max-width:62ch}
/* ---------- Contato: como era, só que o botão no meio da altura (antes ficava embaixo). */
.ct{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.ct h2{font-size:clamp(28px,3.8vw,44px);line-height:1.1;margin:10px 0 14px}
.ct p{margin:0;color:var(--mut);max-width:44ch}
.pes{display:grid;gap:12px}
.pes a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color .2s}
.pes a:hover{border-color:var(--ink)}
.pes b{font:600 17px/1.2 Sora,sans-serif}.pes span{color:var(--mut);font-size:14px}
.pes a .wa{width:26px;height:26px;color:#25d366;flex:0 0 auto}.pes a b{flex:1}
@media (min-width:761px){.ct{grid-template-columns:1.2fr 1fr;gap:32px}}
/* ---------- Rodapé: frase, links em colunas com título, créditos numa linha e o
GENESIS gigante, bem apagado, saindo pela borda de baixo. */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:48px}
.ft{display:grid;gap:34px}
.ft-lema{margin:0;font:600 clamp(21px,2.4vw,26px)/1.25 Sora,sans-serif;letter-spacing:-.02em;max-width:17ch}
.ft-lema span{display:block;margin-top:12px;font:400 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ft nav{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.ft nav div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ft h4{margin:0 0 2px;font:400 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ft nav a{color:var(--mut);text-decoration:none;font-size:15px}.ft nav a:hover{color:var(--ink)}
.ft small{display:block;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.7}.ft small a{color:inherit}
@media (min-width:761px){.ft{grid-template-columns:1fr 2fr}.ft nav{grid-template-columns:repeat(4,1fr)}.ft small{grid-column:span 2}}
/* GENESIS em Unbounded 700 mede 5,42 em de largura (medido no Chromium): o tamanho é a
largura da tela, menos a margem, dividida por isso, e nunca estoura de lado. */
.gigante{font-size:min(calc((100vw - 32px) / 5.5),300px);line-height:.8;text-align:center;letter-spacing:-.02em;white-space:nowrap;margin-top:32px;
transform:translateY(.12em);user-select:none;color:transparent;
background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 22%,transparent),color-mix(in srgb,var(--ink) 2%,transparent) 85%);-webkit-background-clip:text;background-clip:text}
/* Easter egg: o símbolo espia do canto quando o rodapé aparece; tocar repete a abertura. */
.ovo{position:absolute;right:max(14px,env(safe-area-inset-right));top:14px;width:30px;height:30px;padding:0;border:0;background:none;color:var(--ink);opacity:.3;cursor:pointer;
transform:translateX(160%) rotate(90deg);transition:transform 1s cubic-bezier(.2,1.3,.4,1) .4s,opacity .3s}
.ovo .sym{width:100%;height:100%}
.vis-ovo .ovo{transform:none}.ovo:hover{opacity:1;transform:rotate(25deg)}
/* A linha entre o herói e a 1ª seção (o James): o deste arquivo fica entre os dois,
e o ".topo-h+section{border-top:0}" da home deixou de casar (a linha voltou em 28/10). */
#james{border-top:0}
/* ---------- James, logo depois do herói (foi para baixo e voltou, 28/10) ----------
"Ele é a nossa IA" (Filipe, 28/10). O pombo de óculos é o logo do James e leva para o
james.bot. Sem caixa e sem animação de entrada ("não precisa"); recortado do fundo,
com um roxo suave atrás (pedido dele) e flutuando devagar enquanto a seção está na tela. */
.jm{display:grid;gap:18px;align-items:center}
.jm-logo{position:relative;display:block;width:min(280px,72vw);aspect-ratio:1;justify-self:center;isolation:isolate}
.jm-logo:before{content:"";position:absolute;inset:-4%;z-index:-1;border-radius:50%;
background:radial-gradient(closest-side,rgba(110,70,220,.5),rgba(110,70,220,.16) 60%,transparent)}
.jm-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(20,10,60,.45))}
#james.on .jm-logo img{animation:voa 6s ease-in-out infinite}
/* No tema claro o pombo branco quase some no fundo claro (Filipe, 28/10: "fica meio
transparente... coloca um quadrado ali"): ele ganha um quadrado roxo escuro, como o fundo
da arte original, e o brilho roxo de trás sai. */
html[data-gs-theme="light"] .jm-logo{padding:7%;box-sizing:border-box;border-radius:36px;
background:radial-gradient(circle at 50% 42%,#4A2A9A,#24124F 62%,#160B33);box-shadow:0 26px 50px -24px rgba(36,18,79,.65),0 0 0 1px rgba(36,18,79,.25)}
html[data-gs-theme="light"] .jm-logo:before{display:none}
@keyframes voa{50%{transform:translate(6px,-10px) rotate(-2deg)}}
.jm h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:10px 0 14px;max-width:20ch}
.jm p{margin:0 0 22px;color:var(--mut);font-size:16px;line-height:1.55;max-width:46ch}
.jm-ir{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;font-size:15px;transition:background .3s}
.jm-ir:hover{background:#8C7BFF;color:#fff}
@media (min-width:760px){.jm{grid-template-columns:auto 1fr;gap:64px}.jm-logo{width:320px}}
/* ---------- Easter egg: o James espiando de trás de um cartão ----------
Do jeito do print do Filipe (28/10): a arte é ele saindo de trás de uma parede, com a
borda reta do terno em 90,3% da largura (medido na imagem). O secoes.js põe essa borda
em cima da borda de um cartão, centrado na altura dele com a cabeça passando do topo:
- pela esquerda do 1º cartão da fileira, ou pela direita do último (a imagem espelhada,
classe "inv"), onde a margem da página couber ele;
- ou por cima de um cartão, com a outra arte (classe "cima", mais abaixo), que é o único
jeito no celular, onde os cartões vão de ponta a ponta.
Duas imagens: o corpo sem a mão (os dedos apagados e o terno pintado por baixo) e a mão
sozinha, no mesmo quadro. O corpo desliza de trás da borda (cortado nela, .corpo). A mão
anda junto com ele, também cortada na borda (.maoc), recuada 57% da largura dela, que é
o que os dedos passam da borda (de 325 a 351 numa mão de 304 a 351, recortada dedo a
dedo). Quando o corpo para, ela avança esse tanto, só na horizontal, até agarrar o
cartão (classe "pega"). Na saída tudo começa junto, sem pausa (Filipe: "é só levantar
e abaixar rápido... não precisa ficar parado"): o corpo já desliza de volta, a mão dá
uma levantadinha e abaixa enquanto recua os 57% para trás da borda, e só aí o corte da
borda liga, com os dedos já fora do cartão. A mão é rápida (Filipe, 28/10: "a mão só eu
quero mais rápido"): agarra e solta em 0,08 s; o corpo segue no ritmo dele (sai em 1,1 s,
volta em 0,9 s). Curvas suaves dos dois lados e will-change nas camadas que andam
(Filipe, 28/10: "meio travados"): a curva antiga parava no meio da chegada e arrancava na
volta, e sem camada fixa a sombra era repintada a cada começo e fim de movimento. Fora do "pega" a mão fica escondida (visibility): a arte é só os dedos,
e recuada ela ficava sobre o peito como dedos soltos, sem a palma (Filipe, 28/10). */
main{overflow-x:clip}
.of,.cs{position:relative}
.of a,.cs .c,.cs .c-loja{background-color:var(--bg)}
.espia{position:absolute;z-index:4;pointer-events:none;width:var(--l);height:var(--h)}
/* A grade do "No ar hoje" tem data-rev: a regra de entrada (.rev [data-rev].vis>*) zerava o
espelho e animava a virada em 0,7 s; daí o seletor mais forte e o transition:none. */
.rev [data-rev]>.espia{transition:none}
.rev [data-rev].vis>.espia.inv,.espia.inv{transform:scaleX(-1)}
/* Sem posição (antes da 1ª aparição) ele não existe: sem isso a imagem aparecia inteira,
no tamanho natural, por cima dos cartões. */
.espia:not([style]){display:none}
/* A caixa do corpo sobra 40 px à esquerda e embaixo para a sombra não ser cortada, e
termina exatamente na borda do cartão. */
.espia .corpo{position:absolute;left:-40px;top:-20px;width:calc(var(--v) + 40px);height:calc(var(--h) + 60px);overflow:hidden}
.espia .corpo>div{position:absolute;left:40px;top:20px;width:var(--l);transform:translateX(calc(var(--v) + 2px));
will-change:transform;transition:transform .9s cubic-bezier(.45,0,.55,1)}
.espia.vem .corpo>div{transform:none;transition:transform 1.1s cubic-bezier(.33,1,.68,1)}
.espia img{display:block;width:100%;height:auto}
.espia .corpo img{width:var(--l);filter:drop-shadow(-12px 16px 14px rgba(0,0,0,.6)) drop-shadow(-3px 4px 4px rgba(0,0,0,.45))}
/* A mão: no mesmo quadro da imagem (recorte de 304,103 a 351,201 numa arte de 360 de largura).
Quatro camadas, cada uma com um movimento só:
.maoc corta na borda do cartão (direita em --v); desligado só enquanto ela agarra;
.maos anda junto com o corpo (mesma distância, duração e curva da .corpo>div);
.mao recua 57% para trás da borda ou avança para agarrar;
img a levantadinha da saída.
As duas formas de inset se interpolam, então o "0s com espera" troca o corte na hora certa. */
.espia .maoc{position:absolute;z-index:2;left:0;top:0;width:var(--l);height:var(--h);
clip-path:inset(-50% calc(var(--l) - var(--v)) -50% -50%);transition:clip-path 0s .08s}
.espia.pega .maoc{clip-path:inset(-50% -50% -50% -50%);transition:clip-path 0s}
.espia .maos{position:absolute;inset:0;transform:translateX(calc(var(--v) + 2px));will-change:transform;transition:transform .9s cubic-bezier(.45,0,.55,1)}
.espia.vem .maos{transform:none;transition:transform 1.1s cubic-bezier(.33,1,.68,1)}
.espia .mao{position:absolute;left:calc(var(--l) * 304 / 360);top:calc(var(--l) * 103 / 360);width:calc(var(--l) * 47 / 360);
transform:translateX(-57%);visibility:hidden;transition:transform .08s ease-in,visibility 0s .08s}
.espia.vem.pega .mao{transform:none;visibility:visible;transition:transform .08s cubic-bezier(.3,.7,.4,1),visibility 0s}
.espia.solta .mao img{animation:solta .08s ease-in-out}
/* A mão sai antes: o corpo e o trilho dela só começam a voltar quando ela já recuou. */
.espia.solta .corpo>div,.espia.solta .maos{transition-delay:.08s}
@keyframes solta{45%{transform:translateY(-6%)}}
.espia .mao img{filter:drop-shadow(-3px 4px 4px rgba(0,0,0,.55))}
/* Só a imagem dele recebe o toque, e só enquanto está na tela: tocar faz ele ir embora. */
.espia.vem img{pointer-events:auto;cursor:pointer}
/* O James por cima (a arte dele olhando para baixo, 28/10): a mesma coisa, de pé. A borda
reta do terno fica em --b (93,1% da altura); o secoes.js põe ela na borda de cima de um
cartão da fileira de cima. É o jeito do celular, onde não sobra margem do lado.
O corpo sobe de trás do cartão (cortado em --b) sem as mãos (Filipe, 28/10: "ele não
sobe com as mãos"); quando ele para, elas aparecem 30% da altura acima da borda e descem
esse tanto até agarrar. Na saída as mãos fazem a entrada ao contrário (sobem os 30%, sem
corte, e só então somem) e só depois o corpo desce (Filipe, 28/10: "tem que fazer o mesmo
movimento que fez quando entrou"). */
.espia.cima .corpo{left:-30px;top:-30px;width:calc(var(--l) + 60px);height:calc(var(--b) + 30px)}
.espia.cima .corpo>div{left:30px;top:30px;transform:translateY(calc(var(--b) + 2px))}
.espia.cima.vem .corpo>div{transform:none}
.espia.cima .corpo img{filter:drop-shadow(0 -2px 10px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.espia.cima .maoc{clip-path:inset(-50% -50% calc(var(--h) - var(--b)) -50%)}
.espia.cima.pega .maoc{clip-path:inset(-50% -50% -50% -50%);transition:clip-path 0s}
.espia.cima .maos{transform:translateY(calc(var(--b) + 2px))}
.espia.cima.vem .maos{transform:none}
.espia.cima .mao{top:75.7%;transform:translateY(-30%)}
.espia.cima .mao.e{left:.5%;width:24.8%}
.espia.cima .mao.d{left:72.9%;width:25.7%}
/* A mão de cima é mais calma que a de lado (Filipe, 28/10: "tá muito rápida"). */
.espia.cima .maoc{transition:clip-path 0s .3s}
.espia.cima .mao{transition:transform .3s cubic-bezier(.6,0,.7,.3),visibility 0s .3s}
/* Saída: o corpo e o trilho das mãos esperam as mãos subirem. */
.espia.cima.solta .mao img{animation:none}
.espia.cima.solta .corpo>div,.espia.cima.solta .maos{transition-delay:.3s}
.espia.cima.vem.pega .mao{transform:none;transition:transform .3s cubic-bezier(.3,.7,.4,1),visibility 0s}
.espia.cima .mao img{filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.espia.cima i{left:57%;top:36%;width:9%}
/* O brilho do óculos: um "tim" (Filipe, 28/10: "um brilhinho mínimo... tira aqueles feixes
de luz", a faixa varrendo as lentes, que aparecia como um quadrado). Uma estrelinha de
4 pontas no alto da lente da frente acende e apaga uma vez, logo depois que ele sai. */
.espia i{position:absolute;left:55%;top:18.5%;width:14%;aspect-ratio:1;translate:-50% -50%;opacity:0;scale:0;
background:radial-gradient(circle,#fff 0 9%,transparent 11%),conic-gradient(from 45deg,transparent 0 22%,#fff 25%,transparent 28% 47%,#fff 50%,transparent 53% 72%,#fff 75%,transparent 78% 97%,#fff 100%);
-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%);filter:drop-shadow(0 0 3px #fff)}
.espia.vem i{animation:tim .7s ease-out 1.1s}
@keyframes tim{40%{opacity:1;scale:1;rotate:20deg}100%{opacity:0;scale:.2;rotate:45deg}}
/* ---------- Tema claro: o escuro invertido, com força ----------
28/10 (Filipe, 2ª vez: "continua muito branco... inverte as cores, é só inverter"):
o que no escuro é claro sobre preto aqui é preto sobre claro, com o mesmo peso. Fundo
cinza (não branco), seções alternando dois cinzas, cartões brancos com borda escura,
todo botão sólido em preto com texto branco, texto quase preto e o GENESIS do rodapé
em preto. Nada de cinza-claro sobre branco: se é para aparecer, aparece. */
html[data-gs-theme="light"] {--bg:#EEF0F3;--ink:#05070C;--mut:rgba(5,7,12,.8);--dim:rgba(5,7,12,.66);--line:rgba(5,7,12,.2);
--cinza:#E2E6EC;--cartao:#FFFFFF;--borda:rgba(5,7,12,.16)}
html[data-gs-theme="light"] body,html[data-gs-theme="light"] main section{background:var(--bg)}
html[data-gs-theme="light"] #ideia,html[data-gs-theme="light"] #oferta,html[data-gs-theme="light"] #cases,html[data-gs-theme="light"] #conversa{background:var(--cinza)}
html[data-gs-theme="light"] section,html[data-gs-theme="light"] footer{border-top-color:var(--borda)}
html[data-gs-theme="light"] main section>.w>.k,html[data-gs-theme="light"] .jm .k,html[data-gs-theme="light"] .ct .k,html[data-gs-theme="light"] .cs .k{color:var(--brand);font-weight:600}
html[data-gs-theme="light"] .cs .c .k{color:#35C6F4}
/* Botões: preto sólido, texto branco (o inverso do branco sobre preto do escuro). */
html[data-gs-theme="light"] .cta,html[data-gs-theme="light"] .cx__todos,html[data-gs-theme="light"] .extra a{background:#05070C;color:#fff;border-color:#05070C}
html[data-gs-theme="light"] .cta:hover,html[data-gs-theme="light"] .cx__todos:hover,html[data-gs-theme="light"] .extra a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
html[data-gs-theme="light"] .extra a{color:rgba(255,255,255,.8)}html[data-gs-theme="light"] .extra b{color:#fff}
html[data-gs-theme="light"] .ib,html[data-gs-theme="light"] .cx__ctl,html[data-gs-theme="light"] header .mais summary{border-color:rgba(5,7,12,.35);color:#05070C;background:#fff}
/* Cartões: brancos sobre o cinza, borda escura e sombra. */
html[data-gs-theme="light"] .fq details{background:var(--cartao);border:1px solid var(--borda);box-shadow:0 1px 2px rgba(5,7,12,.06),0 10px 28px -14px rgba(5,7,12,.22)}
/* 28/10 (Filipe, 3ª vez, com print: "deixa o fundo preto... a bordinha em volta branca,
eu só preciso enxergar as coisas"): os cartões do "O que entregamos" e do "No ar hoje"
são pretos, com borda clara, mesmo no tema claro. Por dentro eles usam as cores do
escuro (as variáveis são trocadas só no cartão), então texto, ícone e botão aparecem. */
html[data-gs-theme="light"] .of a,html[data-gs-theme="light"] .cs .c{--ink:#F4F7F8;--mut:rgba(244,247,248,.74);--dim:rgba(244,247,248,.62);--line:rgba(244,247,248,.16);--brand:#35C6F4;
background:#0B0D12;color:var(--ink);border:1px solid rgba(244,247,248,.28);box-shadow:0 18px 40px -20px rgba(5,7,12,.55)}
html[data-gs-theme="light"] .of a:hover,html[data-gs-theme="light"] .cs a.c:hover{border-color:#35C6F4}
html[data-gs-theme="light"] .of h3,html[data-gs-theme="light"] .cs h3{color:#F4F7F8}
html[data-gs-theme="light"] .of .ic{background:#F4F7F8;border-color:#F4F7F8}html[data-gs-theme="light"] .of svg{stroke:#05070C}
html[data-gs-theme="light"] .of .vai{justify-self:start;padding:9px 14px;border-radius:999px;background:#F4F7F8;color:#05070C}
html[data-gs-theme="light"] .of a:hover .vai{background:#35C6F4}
html[data-gs-theme="light"] .cs .c-sis{border-top:4px solid #35C6F4}html[data-gs-theme="light"] .cs .c-nfe{border-top:4px solid #3BE38B}html[data-gs-theme="light"] .cs .c-loja{border-top:4px solid #8C7BFF}
/* Dúvidas: cada pergunta é um cartão; a aberta ganha a borda preta. */
html[data-gs-theme="light"] .fq{border-top:0;display:grid;gap:10px}
html[data-gs-theme="light"] .fq details{border-radius:14px;padding:0 18px}
html[data-gs-theme="light"] .fq details[open]{border-color:#05070C}html[data-gs-theme="light"] .fq summary:after{border-color:#05070C}
/* Contato: o cartão do WhatsApp vira o botão principal, preto com o ícone verde. */
html[data-gs-theme="light"] .pes a{background:#05070C;border-color:#05070C;box-shadow:0 14px 34px -16px rgba(5,7,12,.5)}
html[data-gs-theme="light"] .pes a b{color:#fff}html[data-gs-theme="light"] .pes a span{color:rgba(255,255,255,.7)}html[data-gs-theme="light"] .pes a:hover{background:#0E7A3E;border-color:#0E7A3E}
/* O ∞: trilho escuro, nós brancos com borda preta, a etapa ativa em azul. */
html[data-gs-theme="light"] .laco .trilho{stroke:rgba(5,7,12,.32);stroke-width:2.5}
html[data-gs-theme="light"] .laco .no circle{fill:#fff;stroke:#05070C;stroke-width:1.5}html[data-gs-theme="light"] .laco .no text{fill:#05070C}
html[data-gs-theme="light"] .laco .no.ativo circle{fill:var(--brand);stroke:var(--brand)}html[data-gs-theme="light"] .laco .no.ativo text{fill:#fff}
html[data-gs-theme="light"] .passos .nn{background:#fff;border-color:#05070C;color:#05070C}
html[data-gs-theme="light"] .passos .ativo .nn{background:var(--brand);border-color:var(--brand);color:#fff}html[data-gs-theme="light"] .passos .ativo h3{color:var(--brand)}
html[data-gs-theme="light"] .inf.anda .passos li:not(.ativo){opacity:.8}
/* Rodapé: cinza escuro de fundo e o GENESIS em preto, como o branco dele no escuro. */
html[data-gs-theme="light"] footer{background:var(--cinza)}html[data-gs-theme="light"] .ft small{border-top-color:var(--borda)}
html[data-gs-theme="light"] .gigante{background-image:linear-gradient(180deg,rgba(5,7,12,.9),rgba(5,7,12,.25) 85%)}
html[data-gs-theme="light"] .ovo{color:#05070C;opacity:.6}
html[data-gs-theme="light"] .mos .t{box-shadow:0 14px 32px -18px rgba(5,7,12,.5)}