/* ==========================================================================
Carteirinha de estudante | LP Pensar Cursos + UCESUB
Protótipo em CSS puro. Nada aqui vai para o build do Next.
==========================================================================
TOKENS
--primary espelha o daisyUI do site (src/app/globals.css: --color-primary).
O resto da paleta é da campanha e não existe no tema: em produção vira
token novo no @plugin 'daisyui/theme' ou valor arbitrário do Tailwind.
-------------------------------------------------------------------------- */
:root{
/* do site */
--primary:#6017ff;
/* da campanha */
--brand-deep:#2E0980;
--brand-action:#FFD400;
--green:#00C96B;
}
/* ------------------------------------------------------------ ícones
Sprite SVG embutido no index.html. Esta regra vem antes do resto de
propósito: as medidas de cada contexto (.uses svg, .float svg, ...)
sobrescrevem o padrão por ordem de cascata.
-------------------------------------------------------------------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.icone{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ==================== estilos da página ==================== */
:root{
--purple:var(--primary); --purple-deep:#2E0980; --purple-mist:#EFEAFF; --purple-soft:#A98BFF;
--blue:#1F49D3; --ink:#0D0D0F; --ink-soft:#54525F; --action:#FFD400;
--paper:#FFFFFF; --shell:#F3F1F8; --line:#E3DDF5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);
background:var(--shell);-webkit-font-smoothing:antialiased;line-height:1.5;padding-bottom:80px}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
h2{font-size:29px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
h2 em{font-style:normal;color:var(--purple)}
p{color:var(--ink-soft);font-size:15.5px}
.sec{padding:46px 0}
/* ---- KICKER (substitui os badges) ---- */
/* Antepara das secoes. Saiu o traco que abria a linha: em caixa alta com 3px de
afastamento a propria palavra ja se separa do titulo, sem precisar de enfeite. */
.kick{margin-bottom:12px}
.kick span{font-size:13px;font-weight:700;color:var(--purple);
text-transform:uppercase;letter-spacing:3px}
.band .kick span,.close .kick span{color:var(--action)}
/* ---- TOPO ---- */
/* Os dois selos dentro de uma pastilha branca. Soltos sobre o lilas eles nao tinham
nada que os segurasse: um lettering horizontal e um selo redondo, de formatos e
pesos diferentes, boiando lado a lado. Fechados numa pastilha viram uma peca so,
um lockup de parceria, e a pastilha branca sobre lilas e a mesma linguagem dos
cards do resto da pagina. */
.topbar{padding:18px 0 4px}
.brands{display:inline-flex;align-items:center;gap:12px;
background:#fff;border:1px solid var(--line);border-radius:99px;
padding:7px 15px 7px 14px;box-shadow:0 2px 10px rgba(46,9,128,.05)}
.brands span{color:#8B839E;font-size:11px;white-space:nowrap}
.logo-p{height:26px;width:auto;flex:0 0 auto}
/* selo redondo: precisa de mais altura que o lettering para pesar igual */
.logo-u{height:36px;width:auto;flex:0 0 auto}
/* ---- HERO ---- */
.hero{padding:14px 0 34px}
.hero h1{font-size:37px;line-height:1.02;font-weight:800;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--purple)}
.hero .sub{margin-top:14px;max-width:38ch;font-size:16px}
.stage{position:relative;height:290px;margin:26px -8px 6px}
.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%}
.ring.a{width:290px;height:290px}
.ring.b{width:212px;height:212px}
/* ---------------------------------------------------------- cartoes do hero
A arte ja vem em PNG com canto arredondado, alfa e uma sombra curta propria.
Por isso o drop-shadow (que acompanha o alfa) fica no ![]()
e cobre so a
sombra longa; box-shadow desenharia um retangulo por baixo das quinas.
A posicao de cada cartao vive em variaveis (--x, --r) para o @keyframes
poder somar o deslocamento sem apagar a rotacao de base. O desktop so troca
essas variaveis, nunca o transform. */
.card{position:absolute;width:246px;
--x:-50%; --r:0deg; --amp:1; --dur:8s; --atraso:0s;
transform:translate(var(--x),0) rotate(var(--r));
animation:flutua var(--dur) ease-in-out var(--atraso) infinite;
will-change:transform}
.card img{display:block;width:100%;height:auto;
filter:drop-shadow(0 14px 22px rgba(46,9,128,.22))}
/* Duracoes que nao sao multiplas uma da outra e atraso negativo: os dois
cartoes ja comecam fora de fase e demoram muito para se repetir juntos.
--amp menor no cartao de tras faz ele andar menos, o que le como distancia. */
.card.back{left:50%;top:34px;--x:-58%;--r:-9deg;--amp:.65;--dur:9.1s;--atraso:-2.4s}
.card.front{left:50%;top:92px;--x:-42%;--r:4deg;--amp:1;--dur:7.3s;--atraso:-.8s}
/* Paradas irregulares em vez de 0/50/100: o caminho vira uma deriva preguicosa,
nao um sobe e desce de senoide. */
@keyframes flutua{
0%,100%{transform:translate(var(--x),0) rotate(var(--r))}
27%{transform:translate(calc(var(--x) + 5px * var(--amp)),calc(-9px * var(--amp)))
rotate(calc(var(--r) + 1.1deg * var(--amp)))}
53%{transform:translate(calc(var(--x) - 3px * var(--amp)),calc(-14px * var(--amp)))
rotate(calc(var(--r) - .7deg * var(--amp)))}
78%{transform:translate(calc(var(--x) - 6px * var(--amp)),calc(-4px * var(--amp)))
rotate(calc(var(--r) + .4deg * var(--amp)))}
}
/* Placeholder de arte faltando. Sai junto com o .ph do HTML quando os PNGs chegarem. */
.card .ph{display:none}
.card.sem-arte img{display:none}
.card.sem-arte .ph{display:flex;aspect-ratio:1.56;font-size:10.5px;border-radius:15px}
.float{position:absolute;background:#fff;border-radius:99px;padding:7px 13px;font-size:12px;font-weight:700;
box-shadow:0 8px 20px rgba(13,13,15,.14);display:flex;align-items:center;gap:7px}
.float svg{width:14px;height:14px}
.float.f1{top:14px;left:2px}.float.f1 svg{stroke:var(--purple)}
/* f2 subiu: em 120px (mobile) e 225px (desktop) ele caia exatamente sobre o selo da
UCESUB do cartao da frente, que e a marca da parceira. Nas posicoes de agora ele
passa acima da borda do cartao da frente e so encosta na tarja do cartao de tras,
que ja e o elemento secundario da composicao. */
.float.f2{top:60px;right:0}.float.f2 svg{stroke:var(--green)}
.float.f3{bottom:6px;left:16px;background:var(--action)}.float.f3 svg{stroke:var(--ink)}
/* ---- ONDE VALE ---- */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin:22px 0 4px}
.uses div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.uses svg{width:22px;height:22px;stroke:var(--purple)}
.uses b{font-size:13px;font-weight:700}
/* Saltinho em fila. So o icone se move: o transform nao reflui, entao as legendas
ficam paradas e servem de linha de base para o olho medir o salto.
O ciclo tem 4,5s mas o salto ocupa so os primeiros 24%, pouco mais de um segundo.
O resto e silencio. Sem essa pausa a fileira viraria um letreiro piscando ao lado
do CTA, que e o ultimo lugar da pagina onde se quer disputa de atencao.
Cada icone entra 130ms depois do anterior, entao a onda atravessa a fila em vez de
os seis pularem juntos. O timing-function vem dentro do keyframe porque subida e
descida de um pulo nao tem a mesma curva: sobe desacelerando, cai acelerando. */
.uses svg{animation:salta 4.5s infinite}
.uses div:nth-child(2) svg{animation-delay:.13s}
.uses div:nth-child(3) svg{animation-delay:.26s}
.uses div:nth-child(4) svg{animation-delay:.39s}
.uses div:nth-child(5) svg{animation-delay:.52s}
.uses div:nth-child(6) svg{animation-delay:.65s}
@keyframes salta{
0%{transform:translateY(0);animation-timing-function:cubic-bezier(.28,.78,.5,1)}
8%{transform:translateY(-7px);animation-timing-function:cubic-bezier(.5,0,.72,.3)}
16%{transform:translateY(0);animation-timing-function:ease-out}
20%{transform:translateY(-2px);animation-timing-function:ease-in}
24%,100%{transform:translateY(0)}
}
/* ---- BILHETE ---- */
.ticket{background:#fff;border-radius:16px;margin-top:22px;overflow:hidden;box-shadow:0 14px 34px rgba(46,9,128,.12)}
.opt{display:flex;align-items:center;gap:12px;padding:15px 17px;cursor:pointer}
.opt + .opt{border-top:1px dashed var(--line)}
.dot{width:20px;height:20px;border-radius:50%;flex:0 0 20px;border:2px solid var(--line);position:relative}
.opt.on .dot{border-color:var(--purple)}
.opt.on .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--purple)}
.opt-txt{flex:1}
.opt-name{font-weight:700;font-size:15px}
.opt-note{font-size:12.5px;color:var(--ink-soft)}
.price{font-family:"Bebas Neue",Impact,sans-serif;font-size:33px;line-height:1}
.tag-hot{background:var(--action);color:var(--ink);font-size:9.5px;font-weight:800;padding:3px 7px;
border-radius:99px;margin-left:7px;vertical-align:3px}
.stub{position:relative;border-top:1px dashed var(--line);padding:17px;background:#fff}
.stub::before,.stub::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--shell)}
.stub::before{left:-11px}.stub::after{right:-11px}
/* ---- BOTAO ---- */
.cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-decoration:none;
background:var(--purple);color:#fff;font-weight:800;font-size:16.5px;padding:17px 16px;border-radius:10px;
border:none;cursor:pointer;font-family:inherit;letter-spacing:-.01em}
.cta svg{width:18px;height:18px;stroke:currentColor}
.cta.gold{background:var(--action);color:var(--ink)}
.cta.verde{background:var(--green);color:var(--ink)}
.cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.micro{font-size:12.5px;color:var(--ink-soft);margin-top:12px;line-height:1.45;display:flex;gap:7px}
.micro svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--purple);margin-top:2px}
/* ---- FAIXA DE PROVA ---- */
/* Selo de credencial: o nome do documento com icone de escudo, e embaixo a
frase que diz onde ele vale. Nao usa a Bebas porque aqui nao ha numero;
caixa alta com espacamento pesa mais e nao briga com os precos da pagina. */
.paybar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:22px 0}
.prova{text-align:center;margin:0}
.prova b{display:flex;align-items:center;justify-content:center;gap:8px;
font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--purple);line-height:1.2}
.prova b svg{width:18px;height:18px;stroke:var(--purple)}
/* text-wrap:balance reparte as linhas por igual em vez de encher a primeira e jogar
o resto para baixo, entao a frase nunca termina com uma palavra sozinha. */
.prova span{display:block;margin:7px auto 0;max-width:38ch;text-wrap:balance;
font-size:13.5px;color:var(--ink-soft)}
/* ---- BENEFICIOS ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
/* Os quatro cards sao pretos. O que separa um do outro e a foto de fundo, nao a cor.
isolation:isolate prende o empilhamento dentro do card: assim o fundo (z-index -2)
e o degrade (-1) ficam por cima da cor de fundo do card e por baixo do texto,
sem precisar dar position/z-index em cada paragrafo. */
.bcard{position:relative;overflow:hidden;isolation:isolate;
border-radius:15px;padding:18px 16px;min-height:200px;
display:flex;flex-direction:column;background:var(--ink);color:#fff}
.bcard .fundo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
object-fit:cover;filter:grayscale(1);opacity:var(--esmaecer,.3)}
/* Equalizacao de brilho. As quatro fotos nao tem a mesma luminancia media
(YAVG medido: cinema 36, galeria 57, bilheteria 56, rua de dia 150). Com 30%
fixo para todas, a da rua apareceria quase tres vezes mais que a do cinema e a
fileira perderia a unidade. Os valores abaixo mantem o produto brilho x opacidade
parecido nos quatro. O seletor e pelo nome do arquivo de proposito: sobrevive a
reordenar os cards e diz sozinho por que o numero e aquele. */
.bcard .fundo[src$="fundo-meia.jpg"]{--esmaecer:.42}
.bcard .fundo[src$="fundo-no-bolso.jpg"]{--esmaecer:.13}
/* Degrade por cima da foto. Sem ele o texto cai em cima de qualquer area clara da
imagem e some. Se a foto escolhida ja for escura embaixo, da para tirar. */
.bcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(13,13,15,0) 28%,rgba(13,13,15,.82) 92%)}
/* Icone solto, sem caixa. stroke mais fino porque em 34px o peso 2 do Lucide
engorda demais. */
.bcard .icone{width:34px;height:34px;stroke:var(--action);stroke-width:1.6;
margin-bottom:auto}
.bcard b{display:block;font-size:16px;margin:16px 0 5px;letter-spacing:-.01em}
.bcard p{font-size:13.5px;line-height:1.42;color:rgba(255,255,255,.75)}
/* Salto no hover. A curva de subida passa de 1 (cubic-bezier com y2 > 1), entao o card
ultrapassa um pouco os -7px e volta: e isso que da a sensacao de salto, e nao de caixa
deslizando. A volta usa a transicao da regra de cima, sem repique, porque quicar tambem
na saida deixa a fileira inquieta quando o mouse so atravessa a secao.
(hover:hover) mantem o efeito fora do toque, onde ele grudaria depois do tap. */
.bcard{transition:transform .3s ease,box-shadow .3s ease}
.bcard .fundo{transition:opacity .3s ease}
@media (hover:hover){
.bcard:hover{transform:translateY(-7px);
box-shadow:0 20px 34px rgba(13,13,15,.30);
transition:transform .36s cubic-bezier(.34,1.56,.64,1),box-shadow .36s ease}
.bcard:hover .fundo{opacity:calc(var(--esmaecer,.3) * 1.4)}
}
/* ---- BANDA ROXA ---- */
.band{background:var(--purple);color:#fff;padding:46px 0;position:relative;overflow:hidden}
.band .mark{position:absolute;bottom:-34px;left:-14px;font-family:"Bebas Neue",Impact,sans-serif;
font-size:170px;line-height:.8;color:rgba(255,255,255,.09);pointer-events:none;white-space:nowrap}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff}.band h2 em{color:var(--action)}
/* Moldura de celular em volta da arte digital. A arte ja e a tela inteira do app,
entao aqui so entra a borda escura que conta que aquilo esta num aparelho, que e
exatamente o que o titulo da secao promete. */
.phone{background:var(--ink);border-radius:24px;padding:9px;margin:22px auto 8px;
max-width:246px;box-shadow:0 24px 48px rgba(20,4,60,.34)}
.phone img{display:block;width:100%;height:auto;border-radius:16px}
.stp{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.stp:last-child{border-bottom:none}
.stp .sic{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
display:flex;align-items:center;justify-content:center}
.stp .sic svg{width:18px;height:18px;stroke:#fff}
.stp b{display:block;font-size:15.5px;margin-bottom:3px}
.stp p{font-size:13.5px;color:rgba(255,255,255,.78)}
.band .cta{margin-top:24px}
/* ---- CONTA ILUSTRADA ---- */
.calc{background:#fff;border-radius:18px;padding:22px 18px;margin-top:20px;box-shadow:0 10px 26px rgba(46,9,128,.08)}
.row{padding:16px 0;border-bottom:1px solid var(--line)}
.row:first-child{padding-top:0}
.row:last-of-type{border-bottom:none}
.rtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.rtop .lft{font-size:13px;color:var(--ink-soft);font-weight:600}
.rtop .old{text-decoration:line-through;color:#A79FBC;font-family:"Bebas Neue",Impact,sans-serif;font-size:21px;margin-right:6px}
.rtop .new{font-family:"Bebas Neue",Impact,sans-serif;font-size:29px;color:var(--purple)}
/* A barra dividida em DOIS blocos preenchidos, e nao um preenchido e outro vazio.
Area vazia numa barra le como "faltou", nao como "voce economizou": era por isso
que a metade da direita nao contava a historia. Agora as duas metades sao valor,
uma roxa e uma verde, e juntas formam o preco inteiro do ingresso. */
.track{height:28px;border-radius:8px;background:var(--purple-mist);position:relative;overflow:hidden}
.fill{position:absolute;top:0;bottom:0;width:calc(50% - 3px);border-radius:8px;
display:flex;align-items:center;gap:7px;padding:0 10px;white-space:nowrap;overflow:hidden}
.fill.paga{left:0;background:var(--purple);color:#fff}
.fill.poupa{left:calc(50% + 3px);background:var(--green);color:var(--ink)}
.fill i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.82}
.fill b{font-size:13px;font-weight:800}
.fill em,.rtop .new em{font-style:normal;font-variant-numeric:tabular-nums}
/* Carregamento. O padrao e a barra cheia: sem JS, ou com movimento reduzido, a pagina
ja mostra o resultado. Quem liga a animacao e o script, que primeiro zera com
transition:none (para nao animar o encolhimento) e depois devolve a largura. */
.calc.animando .fill{width:0;transition:none}
.calc.animando.carregou .fill{width:calc(50% - 3px);
transition:width .7s cubic-bezier(.2,.7,.3,1)}
/* Luz passando por cima, em looping. Cada linha entra com um atraso diferente para
as tres nao piscarem no mesmo quadro. */
.fill::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transform:translateX(-130%);animation:luz 3.2s ease-in-out infinite;pointer-events:none}
.fill.poupa::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.row:nth-child(2) .fill::after{animation-delay:.55s}
.row:nth-child(3) .fill::after{animation-delay:1.1s}
@keyframes luz{
0%{transform:translateX(-130%)}
55%,100%{transform:translateX(340%)}
}
/* ---- CARD "QUANDO ELA SE PAGA" ---- */
.payoff{background:var(--ink);border-radius:14px;padding:20px;margin-top:18px;color:#fff;
position:relative;overflow:hidden;
display:flex;flex-direction:column;justify-content:center;gap:18px}
/* Marca d'agua: o mesmo recurso das letras gigantes da banda roxa e do fechamento,
para o preto nao ficar sendo so um retangulo com texto em cima. */
.payoff .marca{position:absolute;right:-30px;bottom:-34px;width:172px;height:172px;
stroke:rgba(255,255,255,.055);stroke-width:1.1;pointer-events:none}
.payoff > *{position:relative}
.payoff .ttl{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
color:var(--action)}
/* O numero carrega o argumento: duas idas e acabou. */
.conta-hero{display:flex;align-items:center;gap:14px;margin:0}
.conta-hero b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:76px;
line-height:.78;color:var(--action);flex:0 0 auto}
.conta-hero span{font-size:14.5px;line-height:1.32;color:rgba(255,255,255,.9)}
.tix{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grupo{display:flex;flex-wrap:wrap;gap:6px}
.grupo.livres{border-left:1px solid rgba(255,255,255,.16);padding-left:14px}
.grupo i{flex:1 0 100%;font-style:normal;font-size:11.5px;line-height:1.3;
color:rgba(255,255,255,.62);margin-top:2px}
.tic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.tic svg{width:17px;height:17px}
.pagos .tic{background:var(--action)}
.pagos .tic svg{stroke:var(--ink)}
.livres .tic{background:rgba(255,255,255,.1)}
.livres .tic svg{stroke:rgba(255,255,255,.45)}
.payoff .fin{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.45}
.payoff .fin b{color:#fff;font-weight:700}
.srcnote{font-size:12px;color:#8B839E;margin-top:14px;line-height:1.5}
/* ---- POR QUE ---- */
.why{list-style:none;margin-top:18px}
.why li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:flex-start}
.why li:last-child{border-bottom:none}
.why svg{flex:0 0 21px;width:21px;height:21px;stroke:var(--purple);margin-top:2px}
/* ---- FAQ ---- */
details{background:#fff;border-radius:12px;margin-bottom:9px;padding:15px 16px}
summary{font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:21px;color:var(--purple);line-height:1}
details[open] summary::after{content:"−"}
details p{margin-top:9px;font-size:14px}
/* ---- FECHAMENTO ---- */
.close{background:var(--purple-deep);color:#fff;padding:48px 0;position:relative;overflow:hidden}
.close .mark{position:absolute;top:-24px;right:-20px;font-family:"Bebas Neue",Impact,sans-serif;
font-size:150px;line-height:.8;color:rgba(255,255,255,.07);pointer-events:none}
.close .wrap{position:relative;z-index:2}
.close h2{color:#fff}
.close p{color:rgba(255,255,255,.78);margin:12px 0 22px}
.close .foot{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.75}
.close .foot a{color:var(--action)}
/* ---- STICKY ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
padding:11px 20px;display:flex;align-items:center;gap:13px;transform:translateY(115%);
transition:transform .24s ease;box-shadow:0 -6px 20px rgba(13,13,15,.08)}
.sticky.show{transform:translateY(0)}
.sticky .inner{display:flex;align-items:center;gap:13px;width:100%;max-width:1120px;margin:0 auto}
/* O rotulo perdeu a palavra "carteirinha": numa barra fixa de uma pagina sobre
carteirinha ela nao informa nada e roubava a largura do botao no celular. */
.sticky .lbl{flex:1;min-width:0;font-size:10px;font-weight:800;letter-spacing:1.6px;
text-transform:uppercase;line-height:1.2;color:var(--ink-soft)}
.sticky .lbl b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:36px;
display:block;color:var(--ink);line-height:.95;margin-top:3px;letter-spacing:.01em}
.sticky .cta{width:auto;flex:0 0 auto;padding:14px 22px;font-size:15.5px}
@media (prefers-reduced-motion:reduce){
.sticky{transition:none}
.card{animation:none}
/* o card ainda responde ao mouse, mas pela sombra, sem deslocamento */
.bcard,.bcard .fundo{transition:none}
.bcard:hover{transform:none}
.fill::after{animation:none;opacity:0}
.uses svg{animation:none}
}
@media (max-width:420px){.sticky .cta .ext{display:none}}
@media (max-width:370px){.grid{grid-template-columns:1fr}.hero h1{font-size:32px}}
/* ================= DESKTOP ================= */
@media (min-width:900px){
.wrap{max-width:1120px;padding:0 40px}
.sec{padding:76px 0}
h2{font-size:40px}
p{font-size:16.5px}
.topbar{padding:26px 0 6px}
.brands{gap:15px;padding:8px 19px 8px 17px}
.logo-p{height:31px}
.logo-u{height:44px}
/* hero em duas colunas */
.hero{padding:26px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:56px;letter-spacing:-.045em}
.hero .sub{font-size:18px;max-width:32ch}
.hcol-a{order:1}
.hcol-b{order:2}
/* O palco cresce para equilibrar a coluna da esquerda, que carrega titulo,
icones, bilhete de preco e CTA. Com 430px de altura e cartao de 314px o lado
direito ficava com metade do peso visual do esquerdo. */
.stage{height:520px;margin:0}
.ring.a{width:520px;height:520px}
.ring.b{width:370px;height:370px}
.card{width:404px}
.card.back{top:78px;--x:-60%;--r:-10deg}
.card.front{top:200px;--x:-40%;--r:5deg}
.float{font-size:14px;padding:10px 17px}
.float svg{width:16px;height:16px}
.float.f1{top:34px;left:-4px}
.float.f2{top:158px;right:-10px}
.float.f3{bottom:34px;left:14px}
.uses{grid-template-columns:repeat(6,1fr);margin:26px 0 0}
.ticket{margin-top:26px}
.stub::before,.stub::after{background:var(--shell)}
/* faixa de prova */
.paybar{padding:30px 0}
.prova b{font-size:16.5px;gap:10px}
.prova b svg{width:21px;height:21px}
/* no desktop a frase inteira cabe em uma linha: o limite so atrapalhava */
.prova span{font-size:16px;margin-top:9px;max-width:none}
/* beneficios 4 colunas */
.grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.bcard{min-height:270px;padding:24px 20px;border-radius:18px}
.bcard .icone{width:42px;height:42px}
.bcard b{font-size:18px}
.bcard p{font-size:14.5px}
/* banda: mockup + passos lado a lado */
.band{padding:76px 0}
.band .mark{font-size:280px;bottom:-58px}
/* Era 0.9fr/1.1fr quando o mockup era um retangulo largo. Com a arte em retrato
a coluna da esquerda sobra, entao ela encolhe e o texto dos passos ganha. */
.band .cols{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:center;margin-top:34px}
.phone{margin:0 auto;padding:11px;border-radius:30px;max-width:282px}
.phone img{border-radius:20px}
.band .cta{width:auto;display:inline-flex;padding:17px 30px}
/* conta */
.calc{padding:34px 30px;border-radius:22px}
/* stretch, e nao start: com start o card preto parava na altura do proprio texto
e sobrava um vao branco de uns 150px embaixo dele, ao lado de tres linhas cheias. */
.calc-cols{display:grid;grid-template-columns:1.12fr .88fr;gap:34px;align-items:stretch}
.track{height:34px}
.fill i{font-size:10.5px}
.fill b{font-size:15px}
.rtop .new{font-size:33px}
.payoff{margin-top:0;padding:30px 26px;gap:22px}
.payoff .marca{width:210px;height:210px;right:-38px;bottom:-42px}
.conta-hero b{font-size:92px}
.conta-hero span{font-size:16px}
.tic{width:38px;height:38px}
.tic svg{width:19px;height:19px}
.payoff .fin{font-size:13.5px}
/* preco + faq lado a lado */
.duo{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.why li{font-size:16px}
.duo .cta{width:auto;display:inline-flex;padding:17px 30px;margin-top:10px}
/* fechamento */
.close{padding:82px 0}
.close .mark{font-size:260px;top:-52px}
.close .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.close .cta{width:auto;display:inline-flex;padding:19px 34px}
.close .foot{margin-top:0}
/* barra fixa */
.sticky{padding:13px 40px}
.sticky .lbl{font-size:11px;letter-spacing:2px}
.sticky .lbl b{font-size:44px}
.sticky .cta{padding:16px 30px;font-size:16.5px}
}
/* ---- WHATSAPP ----
Mesma técnica das outras LPs do Pensar: o botão oficial vem do GTM (a.open-whats,
tag "[pix] btn whatsapp", fixo no canto inferior esquerdo). O .wpp-flutuante é só
fallback, na mesma posição, e some quando o botão do GTM existe na página.
A barra fixa de compra também ocupa o rodapé, então enquanto ela está visível os
dois botões sobem a altura dela (--altura-barra, medida no script.js). */
.wpp-flutuante{position:fixed;left:16px;bottom:16px;z-index:40;width:54px;height:54px;border-radius:50%;
background:#25D366;color:#fff;display:grid;place-items:center;
box-shadow:0 14px 30px -10px rgba(37,211,102,.7);
transition:transform .25s ease,bottom .24s ease;animation:wpp-pulse 2.4s infinite}
.wpp-flutuante:hover{transform:scale(1.08);animation:none}
.wpp-flutuante:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wpp-flutuante svg{width:29px;height:29px}
@keyframes wpp-pulse{
0%{box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 0 0 0 rgba(37,211,102,.5)}
70%{box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 0 0 14px rgba(37,211,102,0)}
100%{box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 0 0 0 rgba(37,211,102,0)}}
/* Botão do GTM na página: esconde o fallback (evita duplicar) */
body:has(a.open-whats) .wpp-flutuante{display:none}
/* Barra de compra visível: os dois botões sobem para não cobrir o preço da barra */
a.open-whats{transition:bottom .24s ease}
body:has(#sticky.show) a.open-whats{bottom:calc(var(--altura-barra,80px) + 8px)}
body:has(#sticky.show) .wpp-flutuante{bottom:calc(var(--altura-barra,80px) + 12px)}
@media (prefers-reduced-motion:reduce){
.wpp-flutuante{animation:none;transition:none}
a.open-whats{transition:none}
}
/* só entrega o WebP: não gera caixa, então o layout segue o do ![]()
*/
picture{display:contents}
/* ---- BOTÃO SECUNDÁRIO (fundo escuro) ----
Leva à página do comprovante de matrícula. Contorno em vez de preenchimento para
não disputar com o botão amarelo de compra. */
.ctas{display:flex;flex-direction:column;gap:10px}
.cta.fantasma{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.38);
font-size:15px;padding:15px 16px;transition:background .2s ease,border-color .2s ease}
.cta.fantasma:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
@media (min-width:900px){
/* empilhados de propósito: amarelo em cima, contorno embaixo, alinhados à esquerda */
.ctas{align-items:flex-start;gap:12px}
.close .cta.fantasma{padding:17px 26px}
}
/* ==================== PÁGINA: COMPROVANTE DE MATRÍCULA ====================
comprovante-de-matricula/index.html. Reaproveita topo, banda roxa, passos (.stp),
FAQ e fechamento da LP; aqui ficam só as peças novas. */
body.sem-barra{padding-bottom:0}
.migalha{font-size:12.5px;color:#8B839E;margin:6px 0 16px}
.migalha a{color:var(--purple);font-weight:700;text-decoration:none}
.migalha a:hover{text-decoration:underline}
.migalha span{margin:0 6px}
.hero.doc h1{font-size:34px}
/* Vídeo com capa leve: o player do YouTube (~1 MB) só carrega no clique.
Sem JS, a capa é um link comum para o vídeo no YouTube. */
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin-top:24px;
background:var(--purple-deep);box-shadow:0 24px 48px rgba(20,4,60,.28)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
gap:6px;padding:18px 20px;color:#fff;text-decoration:none;overflow:hidden}
.video-capa .mark{position:absolute;top:-10px;left:-6px;white-space:nowrap;font-family:"Bebas Neue",Impact,sans-serif;
font-size:120px;line-height:.8;color:rgba(255,255,255,.07);pointer-events:none}
/* no celular o play entra na coluna do texto, acima do rótulo: centralizado ele
cobria o título num vídeo de 200px de altura */
.video-capa .play{position:relative;width:56px;height:56px;border-radius:50%;background:var(--action);
display:grid;place-items:center;margin-bottom:6px;flex:0 0 auto;
box-shadow:0 0 0 8px rgba(255,212,0,.16);transition:transform .2s ease}
.video-capa .play svg{width:22px;height:22px;fill:var(--ink);stroke:none;margin-left:3px}
.video-capa:hover .play{transform:scale(1.07)}
.video-capa:focus-visible{outline:3px solid var(--action);outline-offset:-3px}
.video-capa small{position:relative;font-size:11px;font-weight:800;letter-spacing:2.5px;
text-transform:uppercase;color:var(--action)}
.video-capa b{position:relative;font-size:16px;line-height:1.25;max-width:30ch}
/* passos numerados na banda roxa */
.lista-passos{margin-top:22px;max-width:680px}
.stp .sic.num{font-family:"Bebas Neue",Impact,sans-serif;font-size:21px;color:var(--action);
background:rgba(255,255,255,.12);padding-top:2px}
/* destaque dentro do texto do passo: o .stp b padrão é o título do passo (bloco) */
.stp p b{display:inline;font-size:inherit;margin:0;color:#fff}
.nota{display:flex;gap:12px;background:rgba(255,255,255,.1);border-radius:12px;
padding:15px 16px;margin-top:18px;max-width:680px}
.nota svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--action);margin-top:1px}
.nota p{font-size:13.5px;color:rgba(255,255,255,.86)}
.nota b{color:#fff}
.faq-curta .lista-faq{max-width:760px}
details p a{color:var(--purple);font-weight:700}
@media (min-width:900px){
.hero.doc h1{font-size:50px}
.video{margin-top:0}
.video-capa{padding:26px 28px}
.video-capa .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);
width:88px;height:88px;margin:0;box-shadow:0 0 0 10px rgba(255,212,0,.16)}
.video-capa .play svg{width:34px;height:34px;margin-left:4px}
.video-capa:hover .play{transform:translate(-50%,-62%) scale(1.07)}
.video-capa b{font-size:19px}
.video-capa .mark{font-size:190px}
.band.passos .cta{margin-top:28px}
}