/* ============================================================
V3 (workshop-3ed) — SÓ ADIÇÕES sobre o styles.css da página
"Workshop Figma com IA" (cópia byte a byte, não editar).
Este arquivo carrega DEPOIS, então empates de especificidade
com !important caem para cá.
============================================================ */
/* --- miudezas ------------------------------------------------ */
.v3-live-dot { color: #f24e1e !important; font-size: 9px !important; }
.v3-sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* ============================================================
HERO — as 4 entregas + barrinha de progresso
============================================================ */
/* As quatro frases do PDF eram uma linha DIGITADA dentro do h1 (trocava
sozinha). Em 27/08 viraram cards fixos e, no mesmo dia, os ícones de
traço deram lugar aos 3D da seção "O que vai aprender" — recortados do
fundo bege. Layout em LINHA: os quatro lado a lado, ocupando a largura
da dobra, com o ícone acima do texto. */
.v3-entregas {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* sem gap e com a coluna mais estreita: o vão entre um ícone e o
vizinho era de ~143px (célula de 221px com ícone de 96px, mais os
18px de gap) e virava um buraco no meio da dobra */
gap: 0;
width: 100%;
max-width: 780px;
/* respiro no DESKTOP (pedido de 27/08, igual ao que já valia no
celular): colado na headline e afastado do botão. Eram 58px em
cima (26 do h1 + 32 daqui) e 34 embaixo; viraram 26 e 58, e o
cliente pediu mais folga embaixo — agora 26 e 78. */
margin: 0 auto 44px;
}
.v3-entregas > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
text-align: center;
}
.v3-entregas img {
display: block;
/* maior, para fechar o vão — a arte foi renormalizada para ocupar 98%
do próprio quadro, então o ganho é de arte, não de moldura vazia */
width: 148px;
height: 148px;
object-fit: contain;
/* a arte já vem recortada; a sombra devolve o assentamento que o fundo
bege dava, sem trazer o retângulo de volta */
filter: drop-shadow(0 10px 14px rgba(56, 24, 105, .16));
}
.v3-entregas strong {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -.015em !important;
color: #171719;
line-height: 1.3;
text-wrap: balance;
}
/* Respiro no fim do hero (27/08): quem separava o hero do ticker roxo era a
tira de .hero-proof-tabs, que saiu — sem ela a barrinha de escassez
encostava na faixa. O fôlego vai no fim do hero, não no ticker, para a
faixa continuar colada em quem vier depois dela. */
.hero-section { padding-bottom: 72px; }
.hero-copy > .v3-progress { margin-bottom: 4px; }
@media (max-width: 819.98px) {
.hero-section { padding-bottom: 52px; }
}
.v3-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
/* respiro entre o CTA e a barra de escassez (pedido de 26/08): colada,
a barrinha parecia parte do botão */
margin-top: 22px;
}
.v3-progress-track {
display: block;
width: min(320px, 100%);
height: 8px;
background: #ececea;
border: 1px solid #e4e4e0;
border-radius: 999px;
overflow: hidden;
}
.v3-progress-track > i {
display: block;
height: 100%;
background: #7c3aed;
border-radius: 999px;
}
/* ============================================================
FAIXA ROTATIVA ROXA — porte do marquee "Alunos atuando em"
do projeto Formação IA UX Designer (rótulo do PDF)
============================================================ */
.v3-mq {
background: #7c3aed;
color: #fff;
padding: 22px 0;
overflow: hidden;
position: relative;
border-top: 1px solid #6d28d9;
border-bottom: 1px solid #6d28d9;
}
.v3-mq-track {
display: flex;
gap: 0;
width: max-content;
white-space: nowrap;
align-items: center;
pointer-events: none;
}
/* técnica da esteira da v1: cada metade anda -100% da própria largura;
a metade 2 termina exatamente onde a 1 começou — emenda invisível */
/* 17s mantém a velocidade de antes: a metade encolheu para ~1316px quando
o rótulo saiu da faixa (1316/77px·s ≈ 17) */
.v3-mq-half { display: flex; align-items: center; flex: none; animation: v3-rola 17s linear infinite; }
@keyframes v3-rola { to { transform: translateX(-100%); } }
/* carrosséis dos alunos: mesma técnica, com o gap somado ao percurso */
.v3-faixa { display: flex; flex: none; gap: 16px; animation: v3-rola-gap 44s linear infinite; }
.v3-track--rev .v3-faixa { animation-duration: 54s; animation-direction: reverse; }
@keyframes v3-rola-gap { to { transform: translateX(calc(-100% - 16px)); } }
@media (prefers-reduced-motion: reduce) {
.v3-mq-half, .v3-faixa { animation: none; }
}
/* título centralizado ACIMA da esteira (pedido de 26/08 — a frase saiu
de dentro da faixa; a tipografia é a mesma do rótulo antigo) */
.v3-mq-title {
margin: 0 0 14px;
text-align: center;
color: #fff;
text-transform: uppercase;
letter-spacing: .14em !important;
opacity: .9;
}
.v3-mq-label {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .14em !important;
opacity: .9;
white-space: nowrap;
}
.v3-mq-label::before,
.v3-mq-logo::before {
content: '✦';
font-style: normal;
opacity: .55;
margin: 0 34px;
}
/* logos brancos SOLTOS sobre o roxo (extraídos dos cards pelo
.firecrawl/extrai-logos-brancos.mjs), como no marquee da Formação */
.v3-mq-logo { display: inline-flex; align-items: center; }
.v3-mq-logo img {
display: block;
width: auto;
height: 24px;
opacity: .95;
}
@media (max-width: 700px) {
.v3-mq { padding: 14px 0; }
.v3-mq-title { margin-bottom: 10px; font-size: 10.5px !important; }
.v3-mq-label { font-size: 11px; }
.v3-mq-label::before, .v3-mq-logo::before { margin: 0 18px; }
.v3-mq-logo img { height: 19px; }
}
/* ============================================================
PESQUISA — 2ª dobra (OpenAI × NBER 2025)
============================================================ */
.v3-research { padding: 110px 48px; }
.v3-research-inner { max-width: 1240px; margin: 0 auto; box-sizing: border-box; }
.v3-research-title {
margin: 0;
font-family: Inter, sans-serif !important;
font-size: var(--section-title-size) !important;
font-weight: var(--section-title-weight) !important;
line-height: var(--section-title-leading) !important;
letter-spacing: var(--section-title-tracking) !important;
}
.v3-research-title > span { color: #a3a39d; }
.v3-research-lead { margin: 20px auto 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: #666; }
.v3-research-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
grid-auto-rows: minmax(150px, auto);
gap: 12px;
margin-top: 52px;
}
.v3-research-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 28px;
background: #fff;
border: 1px solid #e4e4e0;
border-radius: 22px;
overflow: hidden;
box-sizing: border-box;
}
.v3-research-card--world { grid-row: span 2; flex-direction: column; justify-content: center; gap: 10px; }
.v3-research-card--code { background: linear-gradient(180deg, #f4fdf9, #fff); border-color: #d3f0e1; }
.v3-research-kicker { color: #999 !important; letter-spacing: .08em !important; }
.v3-research-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.v3-research-number {
font-family: Inter, sans-serif !important;
font-size: clamp(56px, 6vw, 92px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -.045em !important;
color: #111;
}
.v3-research-card--code .v3-research-number { color: #0a9c64; }
.v3-research-label { max-width: 300px; font-size: 16px; font-weight: 600; letter-spacing: -.01em !important; line-height: 1.35; color: #111; }
.v3-research-note { font-size: 13px; line-height: 1.5; color: #85857f; }
.v3-research-foot { color: #999 !important; letter-spacing: .04em !important; }
/* waffle de 1.000 quadrados (estilo "bolha", em light) */
.v3-waffle-intro { margin: 4px 0 10px; font-size: 14px; line-height: 1.5; color: #666; }
.v3-waffle-intro strong { color: #111; }
.v3-waffle {
display: grid;
grid-template-columns: repeat(40, 1fr);
gap: 2px;
width: 100%;
}
.v3-waffle span { aspect-ratio: 1; border-radius: 1.5px; background: #e7e7e2; }
.v3-waffle span.is-user { background: #1abcfe; }
.v3-waffle span.is-builder { background: #0acf83; box-shadow: 0 0 0 1.5px rgba(10, 207, 131, .35); }
.v3-waffle-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.v3-waffle-legend li { display: inline-flex; align-items: center; gap: 7px; color: #85857f !important; letter-spacing: .02em !important; }
.v3-waffle-legend .v3-waffle-legend-builder { color: #0a9c64 !important; }
.v3-swatch { flex: none; width: 11px; height: 11px; border-radius: 2.5px; background: #e7e7e2; border: 1px solid #dcdcd6; box-sizing: border-box; }
.v3-swatch--user { background: #1abcfe; border-color: #1abcfe; }
.v3-swatch--builder { background: #0acf83; border-color: #0acf83; }
.v3-bar { display: block; width: 100%; height: 8px; margin-top: auto; background: #ececea; border-radius: 999px; overflow: hidden; }
.v3-bar > i { display: block; height: 100%; border-radius: 999px; }
.v3-research-source { margin: 28px auto 0; text-align: center; color: #999 !important; letter-spacing: .06em !important; }
.v3-research-close { margin: 18px auto 0; max-width: 560px; text-align: center; font-size: 19px; line-height: 1.55; color: #111; font-weight: 600; letter-spacing: -.015em !important; }
/* ============================================================
CONTEÚDO — visuais 3D (Magnific) nos cards e no palco
============================================================ */
.v3-card-3d { padding: 0 !important; overflow: hidden; }
.v3-card-3d img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* card do IMAGEM: foto de retrato num painel deitado. O corte vertical foi
medido pelo perfil de tons de pele da própria foto (rosto entre 5% e 20%
da altura), não escolhido no olho. */
/* card do IMAGEM (mobile): mesmo tratamento do preview — a foto inteira
sobre ela mesma desfocada, para não decepar nem o rosto nem o cartão. */
/* idem no card do mobile: sem borrão atrás, a foto encosta nas bordas */
.v3-card-foto { position: relative; overflow: hidden; background: #f1f1ef; }
/* a img precisa ser ANCORADA (absolute + inset), senão o height:100%
não resolve num pai de altura automática e a foto vertical empurrava o
card para 516px de altura contra ~195px dos outros. A altura sobe um
pouco só aqui, para o retrato não ficar minúsculo. */
.v3-card-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: center !important;
}
/* mesmas duas artes no PREVIEW STICKY (o que aparece no desktop):
a foto em cover com o mesmo recorte; o personagem em contain, porque
é recorte com alfa e cover comeria a arte no palco 4:3. */
/* Foto publicitária (27/08): a arte que o Breno enviou já vem em 4:3, a
MESMA proporção do palco — então ela PREENCHE o quadro (cover) sem
cortar nada e sem sobrar fundo. Foi o que substituiu o retrato antigo,
que era vertical e obrigava a escolher entre mostrar o rosto ou o
produto. Sem fundo desfocado atrás, a pedido do cliente. */
.v3-preview-foto { position: relative; overflow: hidden; }
.v3-preview-foto img {
object-fit: cover !important;
object-position: center !important;
border-radius: 16px !important;
}
.v3-preview-perso {
display: grid;
place-items: center;
}
/* a caixa da img É o palco (inset:0) e o `contain` encaixa a arte inteira
dentro dela. Com width:auto o Chrome resolvia a largura pelo palco e a
altura pela proporção 3:4, estourando 221px para baixo e decepando o
personagem — medido, não suposto. */
.v3-preview-perso img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
object-fit: contain !important;
border-radius: 0 !important;
filter: drop-shadow(0 22px 34px rgba(56, 24, 105, .24));
}
.v3-preview-perso::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 82%;
aspect-ratio: 1;
transform: translate(-50%, -46%);
background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .17) 0%, rgba(124, 58, 237, .06) 44%, transparent 70%);
pointer-events: none;
}
/* card do ACABAMENTO: personagem autoral recortado (PNG com alfa). Fica
SOBRE a grade do card — cover cortaria a arte e mataria o recorte. O halo
roxo é o mesmo lilás do projeto e dá presença nos 220px de altura. */
.v3-card-perso {
padding: 0 !important;
overflow: hidden;
position: relative;
isolation: isolate;
}
.v3-card-perso::before {
content: "";
position: absolute;
left: 50%;
bottom: -18%;
width: 118%;
aspect-ratio: 1;
transform: translateX(-50%);
background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, .16) 0%, rgba(124, 58, 237, .06) 42%, transparent 68%);
pointer-events: none;
}
.v3-card-perso img {
position: absolute;
left: 50%;
bottom: -8%;
transform: translateX(-50%);
width: auto;
max-width: none;
height: 112%;
object-fit: contain;
filter: drop-shadow(0 18px 26px rgba(56, 24, 105, .22));
}
.v3-preview-3d { display: grid; place-items: center; }
/* A img tem de ser ANCORADA na camada (position:absolute + inset:0). Com
ela estática, o height:100% não resolvia e a altura vinha da proporção
natural do arquivo: os quadrados 512×512 estouravam 95px para baixo e a
foto 625×997 estourava 322px, jogando o enquadramento para fora do
palco 4:3. Medido em 27/08, camada a camada. */
.v3-preview-3d img {
position: absolute;
inset: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 16px;
}
/* ============================================================
FERRAMENTAS — grid claro (estrutura do print, efeito light)
============================================================ */
.v3-tools-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 1040px;
margin: 0 auto;
}
.v3-tool {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
width: 236px;
min-height: 150px;
padding: 24px 18px;
background: #fff;
border: 1px solid #e4e4e0;
border-radius: 18px;
box-sizing: border-box;
transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) {
.v3-tool:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(17, 17, 17, .35); }
}
.v3-tool-icon {
display: grid;
place-items: center;
width: 58px; height: 58px;
background: #f7f7f5;
border: 1px solid #e9e9e5;
border-radius: 14px;
}
.v3-tool-icon img { display: block; }
/* wordmarks largos (Stitch): o tile deixa de ser quadrado */
.v3-tool-icon--wide { width: auto; padding: 0 18px; }
.v3-tool-name { color: #555 !important; letter-spacing: .04em !important; text-align: center; }
/* ============================================================
CRONOGRAMA — estrutura da 3ED (duas colunas) em modo light
============================================================ */
.v3-crono {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
max-width: 1100px;
margin: 0 auto;
}
.v3-crono-chamada {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
max-width: 481px;
}
.v3-crono-pill {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 6px 16px 6px 6px;
background: #fff;
border: 0;
border-radius: 999px;
font-size: 14px;
color: #555;
/* Relevo portado do .cabecalho__selo da /workshop-3ed (o modelo que o
Breno apontou), mantido em LIGHT: seis camadas — as quatro primeiras
são a sombra em profundidades diferentes, a quinta é o anel claro em
volta (o que substitui a borda de 1px, que achatava a peça) e a
última é o brilho interno na aresta de cima. */
box-shadow:
rgba(44, 44, 57, .1) 0 4px 20px -5px,
rgba(32, 32, 41, .1) 0 2px 3px,
rgba(44, 44, 57, .06) 0 20px 20px -10px,
rgba(44, 44, 57, .06) 0 4px 4px,
rgba(25, 25, 28, .03) 0 0 0 5px,
rgba(215, 215, 219, .2) -0.5px -1.5px inset;
}
.v3-crono-pill-chip {
padding: 4px 10px;
border-radius: 999px;
/* o chip roxo ganha o mesmo vocabulário de volume dos ícones da página:
degradê no próprio roxo, anel de 1px e brilho na aresta superior */
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
font-weight: 600;
color: #fff;
box-shadow:
inset -1px -1px .5px rgba(0, 0, 0, .1),
inset .7px .7px .5px rgba(255, 255, 255, .38),
0 0 0 1px #4a16a5,
0 4px 8px -2px rgba(74, 22, 165, .28);
}
.v3-crono-pill-dot { color: #b7b7b1; }
.v3-crono-chamada h2 {
margin: 0;
font-family: Inter, sans-serif !important;
font-size: 40px !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
line-height: 1.15 !important;
color: #111;
}
.v3-crono-formato { margin: 0; font-size: 17px; line-height: 1.55; color: #666; }
.v3-crono-botao {
padding: 16px 28px;
border: 1px solid rgba(17, 17, 17, .35);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: .02em !important;
color: #111 !important;
transition: background .2s, color .2s, transform .2s;
}
.v3-crono-botao:hover { background: #111; color: #fff !important; transform: translateY(-2px); }
.v3-crono-autores {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 14px;
color: #666;
}
/* como no original: lado a lado, sem sobrepor */
.v3-crono-avatares { display: flex; align-items: center; gap: 8px; }
.v3-crono-avatares img {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
background: #ececea;
box-shadow: inset 0 0 0 1.5px #e0e0dc;
}
.v3-horarios { margin: 0; }
.v3-horarios-linha {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 28px;
border-bottom: 1px solid rgba(17, 17, 17, .1);
}
.v3-horarios-linha dt,
.v3-horarios-linha dd {
margin: 0;
font-size: 32px;
font-weight: 500;
line-height: 1.2;
}
.v3-horarios-linha dt { color: #111; }
.v3-horarios-linha dd { color: #85857f; }
.v3-crono-nota {
margin: 24px 0 0;
padding: 24px;
border: 1px solid #e4e4e0;
border-radius: 16px;
background: #fff;
font-size: 14px;
line-height: 1.6;
text-align: center;
color: #666;
}
/* --- palco escuro com contorno difuso + grid do cursor -------
O fundo é uma camada própria com mask radial: a seção não tem
borda nem divisória — ela se dissolve no claro da página. O
canvas (v3.js) desenha a grade e acende células perto do mouse,
como o ShapeGrid do react-bits. */
.v3-crono-stage { position: relative; padding: 96px 56px; }
/* SEM região visível (pedido de 26/08): fundo transparente — só a grade
fraquinha e as células acesas emergem, dissolvendo bem antes de
qualquer borda. Nenhuma linha de divisória. */
.v3-crono-bg {
position: absolute;
inset: 0;
background: transparent;
overflow: hidden;
-webkit-mask-image: radial-gradient(78% 82% at 50% 50%, #000 35%, transparent 82%);
mask-image: radial-gradient(78% 82% at 50% 50%, #000 35%, transparent 82%);
}
.v3-crono-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-crono { position: relative; z-index: 1; }
/* ============================================================
CONTRASTE ENTRE SEÇÕES — lavagens de degradê SEM divisória:
todo gradiente nasce e morre transparente.
============================================================ */
.hero-section {
position: relative;
background: radial-gradient(90% 72% at 50% 0%, rgba(124, 58, 237, .07), rgba(124, 58, 237, 0) 72%);
}
.hero-section > .hero-layout { position: relative; z-index: 1; }
[data-screen-label="Alunos"] {
background: linear-gradient(180deg, rgba(124, 58, 237, 0) 0%, rgba(124, 58, 237, .05) 46%, rgba(124, 58, 237, 0) 100%);
}
#ferramentas {
background: radial-gradient(70% 80% at 50% 50%, rgba(142, 72, 236, .045), rgba(142, 72, 236, 0) 78%);
}
.v3-cert {
background: radial-gradient(72% 64% at 50% 46%, rgba(142, 72, 236, .09), rgba(142, 72, 236, 0) 78%);
}
/* o FAQ vinha com um bloco chapado que criava linha de corte no topo */
.faq-section {
background: linear-gradient(180deg, rgba(124, 58, 237, 0) 0%, rgba(124, 58, 237, .05) 55%, rgba(124, 58, 237, .02) 100%) !important;
}
/* ============================================================
OFERTA — preço do PDF + ticket no painel roxo + bandeirinhas
============================================================ */
.v3-price-from { margin: 16px 0 0 !important; font-size: 15px !important; color: #c2c2c2 !important; }
.v3-price-from s { text-decoration-thickness: 2px; }
.v3-price-now {
margin: 4px 0 0 !important;
font-family: Inter, sans-serif !important;
font-size: clamp(44px, 4.6vw, 60px) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -.04em !important;
color: #fff !important;
}
/* seção empilhada e centralizada (pedido de 26/08): cabeçalho, ticket,
garantia e bônus um abaixo do outro — sem o grid de duas colunas */
.v3-offer {
display: flex;
flex-direction: column;
align-items: center;
gap: 36px;
padding: 80px 40px 64px !important;
}
.v3-offer-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.v3-offer-head h2 {
margin: 18px 0 0;
color: #fff;
font-family: Inter, sans-serif !important;
font-size: clamp(34px, 3.6vw, 54px) !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
line-height: 1.05 !important;
}
/* fotinhas centralizadas e legenda maior (pedido de 26/08) */
.v3-social-center {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 26px;
text-align: center;
}
.v3-social-center span { font-size: 15.5px !important; line-height: 1.5 !important; color: #c9c9c4 !important; }
.v3-social-center span strong { color: #fff; }
.v3-ticket-panel { width: min(680px, 100%); }
/* garantia SEM card (26/08): nada de fundo branco — só o selo girando e
o texto claro direto sobre o escuro da oferta. Seletor composto porque
a regra base .v3-guarantee vem DEPOIS no arquivo e empataria. */
.v3-guarantee.v3-guarantee--center {
flex-direction: row;
align-items: center;
gap: 30px;
width: min(680px, 100%);
max-width: none;
margin-top: 0;
padding: 0;
background: transparent;
border: none;
}
.v3-guarantee.v3-guarantee--center strong { color: #fff; font-size: 17px; }
.v3-guarantee.v3-guarantee--center strong i { color: #0acf83; }
.v3-guarantee.v3-guarantee--center p { color: #b9b9b4; font-size: 14px; }
/* o selo sobre o escuro sobe um tom de roxo para não afundar */
.v3-offer .v3-seal-rings stop { stop-color: #b39afc; }
.v3-offer .v3-seal-text text { fill: #b39afc; opacity: .9; }
.v3-offer .v3-seal-ticks line { stroke: #b39afc; opacity: .42; }
.v3-offer .v3-seal-7 { background: linear-gradient(170deg, #a678f5 14%, rgba(166, 120, 245, 0) 98%); -webkit-background-clip: text; background-clip: text; }
/* --- selo "7 dias de garantia" (Figma iaBoost 7213:2445) ------ */
/* Sem tile de fundo (pedido de 26/08): o selo flutua direto no card
branco, com anel de texto e traços em ROXO — a cor de contraste. */
.v3-seal {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 172px;
height: 172px;
}
.v3-seal svg {
position: absolute;
inset: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
}
.v3-seal-text { transform-origin: 50% 50%; animation: v3-gira 30s linear infinite; }
.v3-seal-text text { font: 600 10.5px Inter, sans-serif; letter-spacing: .1em !important; fill: #7c3aed; opacity: .8; }
.v3-seal-ticks { transform-origin: 50% 50%; animation: v3-gira 90s linear infinite reverse; }
.v3-seal-ticks line { opacity: .3; }
.v3-seal-7 {
position: relative;
font-family: Inter, sans-serif !important;
font-size: 72px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -.02em !important;
background: linear-gradient(170deg, #8E48EC 14%, rgba(96, 74, 130, 0) 96%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: v3-seal-respira 6s ease-in-out infinite;
}
@keyframes v3-seal-respira {
0%, 100% { scale: 1; }
50% { scale: 1.05; }
}
@media (prefers-reduced-motion: reduce) {
.v3-seal-text, .v3-seal-ticks, .v3-seal-7 { animation: none; }
}
.v3-guarantee-copy { display: flex; flex-direction: column; gap: 8px; }
/* --- barra de compra na linguagem da nav (27/08) ------------------------
As duas pílulas flutuantes da página estavam em desenhos diferentes:
a nav com raio 18px, borda de 1px e sombra suave (20px) sobre um
backdrop-blur; a barra com raio 999px, sombra pesada (60px a 60%) e sem
blur. A barra passa a seguir a nav em BORDA, ARREDONDAMENTO e efeito —
a tipografia e as cores dela ficam como estavam. */
/* ============================================================
BARRA FIXA DE COMPRA (referência do print de 26/08)
Reveste o .purchase-dock: o app.js continua cuidando do
aparece/some; aqui é só a pele.
============================================================ */
.purchase-dock.v3-bar {
display: flex !important;
align-items: center !important;
gap: 24px !important;
height: auto !important;
min-height: 78px !important;
/* mesma linguagem da nav (27/08): as duas pílulas flutuantes da página
estavam em desenhos diferentes — a nav com raio 18px, borda de 1px e
sombra suave sobre backdrop-blur; esta com raio 999px, sombra pesada e
sem blur. Tipografia e cores da barra ficam como estavam. */
background: rgba(22, 22, 22, .94) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid #2f2f2f !important;
border-radius: 16px !important;
padding: 12px 12px 12px 20px !important;
box-shadow: 0 20px 20px -10px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .24) !important;
}
.purchase-dock.v3-bar > * { flex: none; }
.v3-bar-lote { flex: 1 1 auto !important; }
.v3-bar-lote { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.v3-bar-row { display: flex; align-items: center; gap: 12px; }
.v3-bar-chip {
padding: 5px 11px;
border-radius: 8px;
background: linear-gradient(135deg, #a259ff 0%, #7c3aed 100%);
color: #fff !important;
box-shadow: inset 0 1px rgba(255, 255, 255, .22);
letter-spacing: .07em !important;
}
.v3-bar-timer { color: #a8a8a2 !important; letter-spacing: .02em !important; white-space: nowrap; }
.v3-bar-timer b { color: #fff; font-weight: 700; }
.v3-bar-progress {
position: relative;
display: block;
height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
}
.v3-bar-progress i {
position: relative;
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #6d28d9 0%, #a259ff 100%);
}
.v3-bar-progress i::after {
content: "";
position: absolute;
right: -3px;
top: 50%;
translate: 0 -50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: #c9a6ff;
box-shadow: 0 0 12px 2px rgba(162, 89, 255, .7);
}
.v3-bar-price { display: grid; text-align: right; line-height: 1; }
.v3-bar-price small { font-size: 11.5px; color: #8f8f8a; }
.v3-bar-price small s { text-decoration-thickness: 1.5px; }
.v3-bar-price strong { margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em !important; color: #fff; }
.v3-bar-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 15px 24px;
color: #fff !important;
font-size: 13px;
font-weight: 700;
letter-spacing: .02em !important;
white-space: nowrap;
}
.v3-bar-cta {
/* botão 3D (27/08): a cor roxa é a mesma de antes — o que muda é o
volume. Degradê vertical no próprio roxo (claro em cima, escuro na
base), brilho de 1px no topo, sombra interna na base e uma ARESTA
sólida embaixo, que é o que dá a espessura. No clique ele afunda: a
aresta encolhe e o botão desce o mesmo tanto, então o topo não se
mexe e a impressão é de tecla pressionada. */
border-radius: 16px !important;
border: 1px solid #6d28d9 !important;
background: linear-gradient(180deg, #9061f9 0%, #7c3aed 52%, #6d28d9 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .38),
inset 0 -1px 0 rgba(0, 0, 0, .2),
0 4px 0 #4c1d95,
0 9px 18px -5px rgba(76, 29, 149, .6) !important;
transition: transform .12s ease, box-shadow .12s ease, background .2s !important;
}
.v3-bar-cta:hover {
background: linear-gradient(180deg, #9d75fa 0%, #8b52f0 52%, #7431e0 100%) !important;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 -1px 0 rgba(0, 0, 0, .2),
0 5px 0 #4c1d95,
0 12px 22px -6px rgba(76, 29, 149, .62) !important;
}
.v3-bar-cta:active {
transform: translateY(3px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .28),
inset 0 2px 5px rgba(0, 0, 0, .28),
0 1px 0 #4c1d95,
0 3px 8px -3px rgba(76, 29, 149, .5) !important;
}
@media (prefers-reduced-motion: reduce) {
.v3-bar-cta { transition: none !important; }
}
@media (max-width: 919.98px) {
.v3-bar-lote { min-width: 0; }
.v3-bar-timer { display: none; }
.v3-bar-progress { display: none; }
.purchase-dock.v3-bar { gap: 14px !important; padding: 10px 10px 10px 14px !important; }
}
@media (max-width: 559.98px) {
.v3-bar-price small { display: none; }
.v3-bar-price strong { font-size: 17px; }
.v3-bar-cta { padding: 12px 14px; font-size: 12px; }
}
.v3-guarantee {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 26px;
padding: 20px 22px;
background: #fff;
border: 1px solid #e4e4e0;
border-radius: 14px;
max-width: 460px;
}
.v3-guarantee strong { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em !important; color: #111; }
.v3-guarantee strong i { color: #0acf83; font-size: 18px; }
.v3-guarantee p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #666; }
/* --- painel roxo do ticket ("Admit One", 26/08) ---------------
Fundo do painel = canvas de dithering roxo-sobre-roxo (v3.js);
o picote entre o corpo e o stub tem FUROS DE VERDADE: mask no
.v3-ticket em duas metades (top/bottom, cada uma com seu furo em
x = 100% - largura do stub), união cobre tudo sem mask-composite. */
.v3-ticket-panel {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 18px;
padding: 28px;
background: #7c3aed;
border-radius: 24px;
box-sizing: border-box;
}
.v3-ticket-dither {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.v3-ticket-panel > :not(.v3-ticket-dither) { position: relative; z-index: 1; }
.v3-ticket {
--v3-stubw: 104px;
position: relative;
display: flex;
align-items: stretch;
-webkit-mask:
radial-gradient(circle at calc(100% - var(--v3-stubw)) 0, transparent 8.5px, #000 9px) top / 100% 50% no-repeat,
radial-gradient(circle at calc(100% - var(--v3-stubw)) 100%, transparent 8.5px, #000 9px) bottom / 100% 50% no-repeat;
mask:
radial-gradient(circle at calc(100% - var(--v3-stubw)) 0, transparent 8.5px, #000 9px) top / 100% 50% no-repeat,
radial-gradient(circle at calc(100% - var(--v3-stubw)) 100%, transparent 8.5px, #000 9px) bottom / 100% 50% no-repeat;
}
.v3-ticket-main {
position: relative;
z-index: 1;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 24px;
background: #fff;
border-radius: 16px 0 0 16px;
}
.v3-ticket-name {
font-size: 21px;
font-weight: 800;
letter-spacing: -.02em !important;
text-transform: uppercase;
color: #111;
}
.v3-ticket-sub { margin-top: 6px; color: #999 !important; letter-spacing: .1em !important; }
/* picote interno do corpo: só o tracejado (os furos redondos daqui
saíram — sobre o dithering animado um círculo chapado denuncia) */
.v3-ticket-perf {
position: relative;
display: block;
margin: 18px -24px;
border-top: 2px dashed #e4e4e0;
}
.v3-ticket-meta { display: flex; gap: 18px; justify-content: space-between; }
.v3-ticket-meta > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.v3-ticket-meta small { color: #999 !important; letter-spacing: .1em !important; }
.v3-ticket-meta b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em !important; color: #111; }
.v3-ticket-stub {
flex: none;
width: var(--v3-stubw);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 10px;
background: #111;
color: #fff;
border-radius: 0 16px 16px 0;
border-left: 2px dashed rgba(255, 255, 255, .3);
}
.v3-stub-admit { color: rgba(255, 255, 255, .55) !important; letter-spacing: .3em !important; white-space: nowrap; }
.v3-stub-lote { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.v3-stub-lote small { color: #8a8a8a !important; letter-spacing: .12em !important; }
.v3-stub-lote strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em !important; color: #c9a6ff; }
.v3-stub-barcode {
width: 74%;
height: 26px;
background: repeating-linear-gradient(90deg,
rgba(255, 255, 255, .92) 0 1px, transparent 1px 3px,
rgba(255, 255, 255, .92) 3px 4px, transparent 4px 7px,
rgba(255, 255, 255, .92) 7px 9px, transparent 9px 11px);
}
/* CTA no MESMO desenho do botão do hero (classe hero-price-cta traz a
tipografia dos filhos; o pill em si é replicado aqui porque no hero
ele vem escopado em .hero-actions) */
.v3-ticket-cta {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: fit-content;
max-width: 100%;
margin: 0 auto;
min-height: 56px;
padding: 0 16px 0 20px;
color: #fff !important;
background: #2c2c2c !important;
border: 1px solid #3a3a3a !important;
border-radius: 16px !important;
box-shadow: 0 13px 24px -12px #0f0f0f7a, inset 0 1px #ffffff1a !important;
transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.v3-ticket-cta > i { color: #929292; }
.v3-ticket-cta:hover {
background: #333 !important;
border-color: #414141 !important;
box-shadow: 0 17px 30px -14px #0f0f0f8a, inset 0 1px #ffffff1f !important;
transform: translateY(-2px);
}
/* bandeirinhas (lp-badges) portadas do Formação IA UX; aqui sobre roxo */
.v3-badges { display: flex; align-items: center; gap: 24px; justify-content: center; }
.v3-badges .lp-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #fff;
opacity: .7;
transition: opacity .2s;
cursor: default;
}
@media (hover: hover) { .v3-badges .lp-badge:hover { opacity: 1; } }
.v3-badges .lp-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.v3-badges .lp-badge-label {
font-size: 10px;
font-weight: 500;
letter-spacing: .07em !important;
text-transform: uppercase;
line-height: 1;
}
.v3-ticket-note { margin: 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .85); }
/* ============================================================
CERTIFICADO
============================================================ */
.v3-cert-list { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.v3-cert-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.5; color: #444; }
.v3-cert-list li i { flex: none; margin-top: 2px; color: #0acf83; font-size: 18px; }
/* bullets em linha, como os "pontos" da 3ED. No desktop ficam
CENTRALIZADOS (pedido de 27/08): à esquerda os quatro itens formavam
duas colunas encostadas na borda, com um vão grande sobrando à direita.
No estreito eles empilham e aí a esquerda é que fica certa — ver o
bloco de 819px logo abaixo. */
.v3-cert-list--row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 16px 36px;
max-width: 1100px;
margin: 56px auto 0;
text-align: center;
}
@media (max-width: 819.98px) {
.v3-cert-list--row { justify-content: flex-start; text-align: left; }
}
/* --- moldura "specimen" (referência Human Academy) ----------- */
.v3-spec {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 28px 32px 36px;
border: 1px solid rgba(124, 58, 237, .22);
background:
linear-gradient(rgba(124, 58, 237, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(124, 58, 237, .05) 1px, transparent 1px),
linear-gradient(180deg, rgba(142, 72, 236, .05), rgba(142, 72, 236, .02));
background-size: 44px 44px, 44px 44px, 100% 100%;
box-sizing: border-box;
}
.v3-spec-corner {
position: absolute;
width: 14px; height: 14px;
border-color: rgba(124, 58, 237, .65);
border-style: solid;
}
.v3-spec-corner--tl { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.v3-spec-corner--br { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.v3-spec-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(124, 58, 237, .2);
}
.v3-spec-title { display: flex; flex-direction: column; gap: 6px; }
.v3-spec-title small { color: #9a8fb8 !important; letter-spacing: .16em !important; }
.v3-spec-title strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em !important; color: #4b21a8; }
.v3-spec-meta { display: flex; gap: 28px; margin: 0; }
.v3-spec-meta > div { display: flex; flex-direction: column; gap: 5px; }
.v3-spec-meta dt { color: #9a8fb8 !important; letter-spacing: .14em !important; }
.v3-spec-meta dd { margin: 0; font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; }
.v3-spec-body {
display: grid;
grid-template-columns: 150px 1fr 150px;
align-items: center;
gap: 28px;
padding-top: 30px;
}
.v3-spec-side { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.v3-spec-side > div { display: flex; flex-direction: column; gap: 5px; }
.v3-spec-side dt { color: #9a8fb8 !important; letter-spacing: .14em !important; }
.v3-spec-side dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #111; }
.v3-spec-side--dir { text-align: right; }
.v3-spec-cert img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
box-shadow:
rgba(44, 44, 57, 0.22) 0px 34px 70px -22px,
rgba(32, 32, 41, 0.08) 0px 4px 12px;
}
/* selo giratório — frações do nó 4551:13802 (lado / 147) */
.v3-selo {
position: absolute;
top: auto;
bottom: -44px;
right: -34px;
z-index: 2;
display: grid;
place-items: center;
--selo: 147px;
width: var(--selo);
height: var(--selo);
/* wiggle do selo INTEIRO, igual às cabeças (pedido de 26/08): deriva
orgânica com leve giro — perceptível sem embolar as camadas. */
animation: v3-selo-wiggle 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes v3-selo-wiggle {
0% { translate: 0 0; rotate: 0deg; }
17% { translate: 10px -14px; rotate: 4deg; }
35% { translate: -12px -5px; rotate: -3deg; }
52% { translate: -6px 13px; rotate: -6deg; }
70% { translate: 12px 8px; rotate: 3deg; }
86% { translate: 4px -9px; rotate: 6deg; }
100% { translate: 0 0; rotate: 0deg; }
}
.v3-selo > * { grid-area: 1 / 1; }
.v3-selo__anel {
width: calc(var(--selo) * 0.826191);
height: calc(var(--selo) * 0.826191);
animation: v3-gira 30s linear infinite;
}
.v3-selo__disco {
width: calc(var(--selo) * 0.734694);
height: calc(var(--selo) * 0.734694);
border-radius: 999px;
background-color: #eeeeee;
box-shadow:
rgba(0, 0, 0, 0.09) 2.97681px 17.8608px 17.8608px 0,
rgba(0, 0, 0, 0.05) 7.44202px 38.6985px 23.8145px 0,
rgba(0, 0, 0, 0.01) 13.3956px 69.955px 28.2797px 0,
rgba(0, 0, 0, 0.05) -1.4884px -1.4884px 0 0 inset;
}
.v3-selo__textura {
width: calc(var(--selo) * 0.734694);
height: calc(var(--selo) * 0.734694);
border-radius: 999px;
opacity: 0.54;
animation: v3-gira 18s linear infinite;
}
.v3-selo__tracejado {
width: calc(var(--selo) * 0.857143);
height: calc(var(--selo) * 0.857143);
}
.v3-selo__miolo {
width: calc(var(--selo) * 0.401361);
height: calc(var(--selo) * 0.401361);
mix-blend-mode: color-burn;
}
.v3-selo__icone {
width: calc(var(--selo) * 0.190476);
height: calc(var(--selo) * 0.190476);
mix-blend-mode: color-burn;
}
/* Arcos parados entre si (o giro independente embolava texto sobre
tracejado); quem dá vida é o wiggle do selo inteiro, acima. */
.v3-selo__texto {
position: relative;
width: var(--selo);
height: var(--selo);
margin: 0;
mix-blend-mode: color-burn;
/* cada letra é um span GIRADO: a caixa dele estoura o círculo e criava
rolagem lateral (9px em 1024) sem aparecer em nenhum rect — clip corta
só a caixa vazia, o texto circular cabe inteiro nos 147px */
overflow: clip;
}
.v3-selo__texto span {
position: absolute;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding-block-start: calc(var(--selo) * 0.172109);
font-size: calc(var(--selo) * 0.058803);
font-weight: 600;
line-height: 1;
color: #313135;
opacity: 0.5;
transform: rotate(var(--a));
}
@keyframes v3-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.v3-selo, .v3-selo__anel, .v3-selo__textura { animation: none; }
.v3-selo { translate: none; rotate: none; }
}
/* ============================================================
QUEM VAI ESTAR COM VOCÊ — cabeças com wiggle (porte 1:1 do
HeroFotos.astro da 3ED) + bio no hover
============================================================ */
/* seção CLARA (a caixa preta saiu a pedido de 26/08): as cabeças flutuam
direto sobre o fundo da página */
.v3-team { overflow: clip; }
.v3-team-heading { text-align: center; max-width: 760px; margin: 0 auto; }
.v3-team-heading h2 {
margin: 0;
color: #111;
font-family: Inter, sans-serif !important;
font-size: clamp(30px, 3vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: -.03em !important;
line-height: 1.08 !important;
}
.v3-team-heading h2 span { color: #a3a39d; }
.v3-team-heading p { margin: 20px auto 0; max-width: 640px; font-size: 16px; line-height: 1.55; color: #666; }
.v3-team-note { margin: 44px auto 0; max-width: 640px; text-align: center; font-size: 14.5px; line-height: 1.6; color: #85857f; }
.v3-team-note span { color: #111; font-weight: 600; }
/* --- composição das fotos (geometria do frame 981,8 × 677,5) --- */
.v3-heads {
position: relative;
width: min(940px, 100%);
margin: 16px auto 0;
aspect-ratio: 981.8143 / 677.4808;
container-type: inline-size;
--px: 0px;
--py: 0px;
}
.v3-heads .slot,
.v3-heads .sombra,
.v3-heads .cubo,
.v3-heads .tag {
position: absolute;
transform: translate(var(--dx), var(--dy));
}
.v3-heads > * {
--dx: calc(var(--px) * var(--d, 0));
--dy: calc(var(--py) * var(--d, 0));
animation: var(--anim, none) var(--dur, 26s) cubic-bezier(0.45, 0, 0.55, 1) var(--atraso, 0s) infinite;
will-change: transform, translate;
}
.v3-heads .slot img,
.v3-heads .cubo img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
pointer-events: none;
}
.v3-heads .slot--esq,
.v3-heads .slot--dir {
display: flex;
align-items: center;
justify-content: center;
}
.v3-heads .rot { flex: none; width: 100%; height: 100%; }
.v3-heads .slot--esq {
left: 0; top: 9.2534%;
width: 50.8661%; height: 90.747%;
--d: 0.32; --anim: v3-deriva-esq; --dur: 26s; --atraso: -4s;
}
.v3-heads .rot--esq { width: 82.8482%; height: 90.1429%; transform: rotate(-9.48deg); }
.v3-heads .slot--dir {
left: 53.7752%; top: 9.3153%;
width: 46.2249%; height: 85.6335%;
--d: 0.32; --anim: v3-deriva-dir; --dur: 29s; --atraso: -13s;
}
.v3-heads .rot--dir { width: 90.0378%; height: 94.3334%; transform: rotate(4.9deg); }
.v3-heads .slot--centro {
left: 50.3656%; top: 0;
width: 48.1091%; height: 93.4125%;
--d: 0.5; --anim: v3-deriva-centro; --dur: 31s; --atraso: -7s;
transform: translateX(-50%) translate(var(--dx), var(--dy));
}
.v3-heads .slot--centro > img { position: absolute; inset: 0; }
.v3-heads .sombra {
background-color: rgb(10, 10, 10);
mix-blend-mode: multiply;
filter: blur(24px);
border-radius: 72%;
}
.v3-heads .sombra--esq {
left: 32.977%; top: 27.0851%;
width: 9.9624%; height: 50.5934%;
transform: translate(var(--dx), var(--dy)) rotate(-7.99deg);
--d: 0.32; --anim: v3-deriva-esq; --dur: 26s; --atraso: -4s;
}
.v3-heads .sombra--dir {
left: 59.1364%; top: 30.3235%;
width: 9.3646%; height: 47.5578%;
transform: translate(var(--dx), var(--dy)) rotate(7.99deg);
--d: 0.32; --anim: v3-deriva-dir; --dur: 29s; --atraso: -13s;
}
.v3-heads .cubo--esq {
left: 0.4715%; top: 18.8631%;
width: 13.0369%; height: 18.8935%;
--d: 1; --anim: v3-deriva-cubo-a; --dur: 19s; --atraso: -2s;
}
.v3-heads .cubo--dir {
left: 85.4154%; top: 62.1109%;
width: 13.3425%; height: 19.3364%;
--d: 1; --anim: v3-deriva-cubo-b; --dur: 22s; --atraso: -11s;
}
.v3-heads .tag {
width: 11.3054%;
height: auto;
aspect-ratio: 111 / 30;
--d: 0.55; --anim: v3-deriva-tag;
}
.v3-heads .tag--leandro { left: 0.4715%; top: 41.1509%; --dur: 17s; --atraso: -3s; }
.v3-heads .tag--gil { left: 28.6849%; top: 69.9341%; --dur: 21s; --atraso: -9s; }
.v3-heads .tag--rafa { left: 86.3327%; top: 24.0287%; --dur: 24s; --atraso: -15s; }
@keyframes v3-deriva-esq {
0% { translate: 0 0; }
17% { translate: 1.1cqw -1.8cqw; }
35% { translate: -1.6cqw -0.6cqw; }
52% { translate: -0.7cqw 1.9cqw; }
70% { translate: 1.8cqw 1.2cqw; }
86% { translate: 0.4cqw -1.1cqw; }
100% { translate: 0 0; }
}
@keyframes v3-deriva-dir {
0% { translate: 0 0; }
15% { translate: -1.9cqw 1cqw; }
33% { translate: 0.7cqw 2cqw; }
50% { translate: 1.7cqw -1.3cqw; }
68% { translate: -0.5cqw -2cqw; }
85% { translate: -1.2cqw 0.8cqw; }
100% { translate: 0 0; }
}
@keyframes v3-deriva-centro {
0% { translate: 0 0; }
20% { translate: -1.4cqw 1.6cqw; }
38% { translate: 0.9cqw 2.2cqw; }
57% { translate: 1.9cqw -0.8cqw; }
75% { translate: -0.6cqw -1.9cqw; }
90% { translate: -1.8cqw 0.5cqw; }
100% { translate: 0 0; }
}
@keyframes v3-deriva-cubo-a {
0% { translate: 0 0; rotate: 0deg; }
16% { translate: 2.1cqw -2.4cqw; rotate: 3deg; }
34% { translate: -2.3cqw -1cqw; rotate: -2deg; }
51% { translate: -1.2cqw 2.5cqw; rotate: -4deg; }
69% { translate: 2.4cqw 1.5cqw; rotate: 2deg; }
87% { translate: 0.6cqw -1.8cqw; rotate: 4deg; }
100% { translate: 0 0; rotate: 0deg; }
}
@keyframes v3-deriva-cubo-b {
0% { translate: 0 0; rotate: 0deg; }
18% { translate: -2.4cqw -1.6cqw; rotate: -3deg; }
36% { translate: 1.3cqw -2.5cqw; rotate: 2deg; }
54% { translate: 2.2cqw 1.1cqw; rotate: 4deg; }
72% { translate: -0.8cqw 2.4cqw; rotate: -2deg; }
89% { translate: -2cqw 0.7cqw; rotate: -4deg; }
100% { translate: 0 0; rotate: 0deg; }
}
@keyframes v3-deriva-tag {
0% { translate: 0 0; }
19% { translate: 0.9cqw -1.2cqw; }
37% { translate: -1.1cqw -0.5cqw; }
55% { translate: -0.6cqw 1.2cqw; }
73% { translate: 1.2cqw 0.7cqw; }
88% { translate: 0.3cqw -0.9cqw; }
100% { translate: 0 0; }
}
.v3-heads.parado > * { animation-play-state: paused; }
/* No fundo CLARO a sombra multiply virava mancha preta — vira véu suave */
.v3-heads .sombra { mix-blend-mode: normal; opacity: .16; }
/* pílulas brancas precisam de separação do fundo claro */
.v3-heads .tag { filter: drop-shadow(0 3px 8px rgba(17, 17, 17, .18)); }
/* --- bio no hover (pedido novo, não existe na 3ED) -----------
Transição suave: a cabeça focada cresce de leve, as outras saem de
foco (blur + esmaecidas), e o card da bio assenta devagar. ----- */
.v3-heads .slot { cursor: pointer; }
.v3-heads .slot:hover,
.v3-heads .slot:focus-visible { z-index: 6; }
.v3-heads .slot,
.v3-heads .cubo,
.v3-heads .tag,
.v3-heads .sombra {
transition: filter .5s ease, opacity .5s ease;
}
.v3-heads .slot .rot,
.v3-heads .slot--centro > img {
transition: scale .6s cubic-bezier(.22, 1, .36, 1);
}
.v3-heads .slot:hover .rot,
.v3-heads .slot:focus-visible .rot,
.v3-heads .slot--centro:hover > img,
.v3-heads .slot--centro:focus-visible > img { scale: 1.035; }
.v3-heads:has(.slot:hover) .slot:not(:hover),
.v3-heads:has(.slot:focus-visible) .slot:not(:focus-visible) {
filter: blur(7px);
opacity: .55;
}
.v3-heads:has(.slot:hover) .cubo,
.v3-heads:has(.slot:hover) .tag,
.v3-heads:has(.slot:focus-visible) .cubo,
.v3-heads:has(.slot:focus-visible) .tag {
filter: blur(3px);
opacity: .45;
}
.v3-heads:has(.slot:hover) .sombra,
.v3-heads:has(.slot:focus-visible) .sombra { opacity: .08; }
.v3-bio {
position: absolute;
left: 50%;
bottom: 2%;
z-index: 7;
width: min(340px, 92cqw);
padding: 16px 18px;
background: #fff;
border: 1px solid #e4e4e0;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(17, 17, 17, .22);
text-align: left;
opacity: 0;
translate: -50% 14px;
transition: opacity .45s ease .06s, translate .55s cubic-bezier(.22, 1, .36, 1) .06s;
pointer-events: none;
}
.v3-bio strong { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em !important; color: #111; }
.v3-bio p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #555; }
.v3-heads .slot:hover .v3-bio,
.v3-heads .slot:focus-visible .v3-bio,
.v3-heads .slot:focus .v3-bio {
opacity: 1;
translate: -50% 0;
}
@media (prefers-reduced-motion: reduce) {
.v3-heads > * { animation: none; will-change: auto; }
.v3-heads .slot, .v3-heads .sombra, .v3-heads .cubo, .v3-heads .tag { transform: none; translate: none; }
.v3-heads .slot--centro { transform: translateX(-50%); }
.v3-heads .sombra--esq { transform: rotate(-7.99deg); }
.v3-heads .sombra--dir { transform: rotate(7.99deg); }
}
/* ============================================================
FAQ — ícone do WhatsApp (SVGs locais; o subset não tem o glifo)
============================================================ */
.v3-zap-icon { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; }
.v3-zap-icon img { display: block; }
.v3-zap-phone { position: absolute; }
/* ============================================================
FOOTER — logos "Desenvolvido por"
============================================================ */
.v3-dev-logos { display: inline-flex; align-items: center; gap: 8px; }
.v3-dev-logos img { display: block; opacity: .8; }
/* ============================================================
RESPONSIVO
============================================================ */
@media (max-width: 1023.98px) {
.v3-selo { --selo: 110px; right: -18px; }
}
@media (max-width: 819.98px) {
/* Os wrappers de seção carregam padding INLINE de 48px por lado (idioma
da figma-ia) — no celular isso come a tela, então o override precisa
de !important para vencer o style="". */
#conteudo { padding: 48px 20px 56px !important; }
#ferramentas { padding: 72px 20px !important; }
#cronograma { padding: 0 20px 72px !important; }
#mentor { padding: 0 20px 72px !important; }
.v3-cert { padding: 72px 20px !important; }
[data-screen-label="Alunos"] > div:first-child { padding: 0 20px !important; }
/* "Trabalhos dos alunos / do último workshop": abaixo de 760px a
styles.css joga `.alumni-heading { text-align: left !important }`, e as
regras que devolvem o centro lá miram `[data-screen-label=Alunos] >
.alumni-heading` — filho DIRETO da seção. Aqui a headline vive dentro
de um wrapper, então nenhuma delas casa e sobrava só o `left`. O
`text-align: center` do wrapper é herdado e perde para o !important;
por isso precisa de uma regra própria, com especificidade maior. */
[data-screen-label="Alunos"] h2.alumni-heading { text-align: center !important; }
/* "Trabalhos dos alunos / do último workshop" quebrava em QUATRO linhas
no celular e o cliente pediu no máximo três. Medindo em 320, 360, 390
e 430 px, a fonte que faz o texto caber é sempre ~0,1025 da largura da
caixa (que é a viewport menos os 88px de padding) — daí o cálculo em
vw. Nesses tamanhos ele fecha em DUAS linhas, uma por parte do
. */
/* o `:not(#_)` não casa com nada: está aí só para somar a especificidade
de um ID. Quem manda no tamanho é um `:is(...)` da styles.css que tem
`#depoimentos .testimonials-heading>h2` dentro — e a especificidade de
um :is() é a do seu seletor MAIS específico, ou seja (1,1,1). Sem o
truque, esta regra (0,2,1) perde mesmo com !important. */
[data-screen-label="Alunos"] h2.alumni-heading:not(#_) {
font-size: clamp(22px, calc(10.1vw - 9px), 44px) !important;
}
/* hero: as 4 entregas empilham em UMA coluna no estreito — em duas o
"Personagens e ícones 3D" quebrava em três linhas */
/* Respiro em volta da tira, no celular (pedido de 27/08): o cliente quis
os ícones COLADOS na headline e AFASTADOS do botão. O vão de cima é a
margem de 22px do h1, puxada por -12px aqui; o de baixo é a margem de
24px do .hero-actions, somada aos 32px daqui. Fica 10px em cima e 56
embaixo, contra 22 e 24 de antes. */
/* com o rodízio a grade 2x2 não existe mais: é UMA célula com os quatro
itens empilhados nela (ver o bloco do rodízio no fim do arquivo) */
.v3-entregas { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: -12px; margin-bottom: 32px; max-width: none; }
/* o ajuste fino do rodízio no celular está no FIM do arquivo, junto
com a regra base — aqui ele perderia o desempate por ordem */
.v3-entregas img { width: 74px; height: 74px; }
.v3-entregas strong { font-size: 13.5px; }
.hero-trust { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
.v3-progress { margin-top: 18px; }
/* pesquisa (dormente) */
.v3-research { padding: 72px 20px; }
.v3-research-grid { grid-template-columns: 1fr; }
.v3-research-card--world { grid-row: auto; }
.v3-waffle { gap: 1.5px; }
/* cronograma: pílula compacta que quebra por item, nunca por palavra */
.v3-crono-stage { padding: 56px 20px; }
.v3-crono { grid-template-columns: 1fr; gap: 28px; }
.v3-crono-chamada { gap: 18px; }
.v3-crono-chamada h2 { font-size: 32px !important; }
.v3-crono-pill { flex-wrap: wrap; row-gap: 6px; font-size: 13px; }
.v3-crono-pill span { white-space: nowrap; }
.v3-horarios-linha { padding-block: 16px; }
.v3-horarios-linha dt, .v3-horarios-linha dd { font-size: 24px; }
/* oferta */
.v3-offer { padding: 48px 16px 40px !important; gap: 28px; }
.v3-ticket-panel { width: 100%; padding: 20px; gap: 16px; }
.v3-ticket-main { padding: 20px 18px; }
.v3-ticket-name { font-size: 18px; }
.v3-ticket-perf { margin: 14px -18px; }
.v3-ticket-meta { flex-wrap: wrap; gap: 12px 18px; }
/* mobile: o stub desce para baixo do corpo — de lado ele espremia a
ficha e a meta empilhava. Sem coluna lateral, os furos do picote
também mudam de eixo (esquerda/direita na altura da divisa). */
.v3-ticket {
flex-direction: column;
-webkit-mask: none;
mask: none;
}
.v3-ticket-main { border-radius: 16px 16px 0 0; padding-bottom: 18px; }
.v3-ticket-stub {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 16px;
border-radius: 0 0 16px 16px;
border-left: 0;
border-top: 2px dashed rgba(255, 255, 255, .3);
}
.v3-stub-lote { flex-direction: row; align-items: baseline; gap: 7px; }
.v3-stub-admit { letter-spacing: .18em !important; font-size: 7.5px !important; }
.v3-stub-lote strong { font-size: 22px; }
.v3-stub-barcode { width: 88px; height: 22px; }
.v3-ticket-cta { min-height: 52px; padding: 0 14px 0 16px; gap: 6px; }
.v3-ticket-cta strong, .v3-ticket-cta em { white-space: nowrap !important; font-size: 12.5px !important; }
.v3-ticket-note { font-size: 12px; }
/* garantia: mesma largura do painel roxo, selo com respiro e sem buraco */
.v3-guarantee { max-width: none; }
.v3-guarantee.v3-guarantee--center {
flex-direction: column;
text-align: center;
width: 100%;
gap: 12px;
padding: 24px 18px 22px;
}
.v3-guarantee.v3-guarantee--center .v3-guarantee-copy { align-items: center; gap: 6px; }
.v3-guarantee.v3-guarantee--center strong { justify-content: center; }
.v3-seal { width: 148px; height: 148px; }
.v3-seal-7 { font-size: 60px !important; }
.v3-tool { width: calc(50% - 6px); min-height: 128px; }
.v3-bio { width: min(300px, 94cqw); padding: 13px 14px; }
.v3-bio p { font-size: 12px; }
/* moldura specimen empilha e o selo encosta no canto de baixo */
.v3-spec { padding: 20px 18px 30px; }
.v3-spec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
.v3-spec-meta { flex-wrap: wrap; gap: 14px 22px; }
.v3-spec-body { grid-template-columns: 1fr; gap: 22px; padding-top: 22px; }
.v3-spec-side { flex-direction: row; flex-wrap: wrap; gap: 14px 26px; }
.v3-spec-side--dir { text-align: left; }
.v3-selo { --selo: 104px; top: auto; right: -6px; bottom: -30px; }
}
@media (max-width: 559.98px) {
.v3-research-number { font-size: 56px !important; }
.v3-mq-logo img { height: 30px; }
/* CTA do hero: nada quebra linha — o preço "R$ NN,00" fica inteiro ao lado */
.hero-actions > a.hero-price-cta {
white-space: nowrap !important;
gap: 7px !important;
padding: 0 14px !important;
}
.hero-price-cta strong,
.hero-price-cta em { white-space: nowrap !important; font-size: 12.5px !important; }
.v3-entregas img { width: 66px; height: 66px; }
.v3-entregas strong { font-size: 12.5px; }
.v3-crono-pill { font-size: 12px; padding: 5px 12px 5px 5px; }
.v3-crono-pill-chip { padding: 3px 8px; }
.v3-horarios-linha dt, .v3-horarios-linha dd { font-size: 21px; }
.v3-ticket-name { font-size: 16.5px; }
/* DUAS colunas também no celular (pedido de 27/08): estava em uma só,
e com 7 ferramentas a lista virava uma coluna longa. O último item só
estica para a linha inteira quando o total é ÍMPAR — com `:last-child`
puro ele esticaria sempre, inclusive num total par. */
.v3-tool { width: calc(50% - 6px); min-height: 108px; }
.v3-tool:last-child:nth-child(odd) { width: 100%; }
}
/* --- rodapé sem o CTA final (26/08) ------------------------------------
Sem o .footer-main, o endcap ficaria com o canto arredondado só embaixo
(o de cima era do bloco removido) e sem respiro para as duas linhas do
conteúdo. Aqui ele volta a ser um bloco inteiro. */
.footer-endcap--solo {
border-radius: 24px !important;
padding: 26px 0;
min-height: 0 !important;
border-top: 0 !important;
}
@media (max-width: 819.98px) {
.footer-endcap--solo { padding: 22px 0; }
}
/* --- rodapé no mobile (27/08) -------------------------------------------
Estava quebrado, e a medida mostrou por quê: a `.footer-meta` herdava
`width: min(--grid-content, calc(100% - 2*gutter))` do styles.css e
resolvia em 359px dentro de um rodapé de 342 — estourava 61px à direita
em telas de 390 e 91px em 360. Junto, a linha do CNPJ vinha com
`white-space: nowrap`: 399px de texto que não quebravam de jeito nenhum.
Aqui as duas coisas são desfeitas e o conteúdo empilha centralizado. */
@media (max-width: 819.98px) {
.site-footer .footer-meta {
width: 100% !important;
max-width: 100% !important;
flex-direction: column;
gap: 16px;
padding-inline: 18px;
}
.site-footer .footer-legal {
flex-direction: column;
gap: 10px;
width: 100%;
text-align: center;
}
.site-footer .footer-legal > span {
white-space: normal !important;
text-align: center;
line-height: 1.5;
}
/* o fio vertical separava itens que agora estão empilhados */
.site-footer .footer-legal > i { display: none !important; }
.site-footer .footer-legal nav { justify-content: center; gap: 18px; }
.site-footer .footer-credit {
justify-content: center;
width: 100%;
border-top: 1px solid #3a3a3a;
padding-top: 16px;
}
}
/* --- sem palavra viúva (27/08) -----------------------------------------
`text-wrap: pretty` faz o navegador reequilibrar as últimas linhas para
que nenhuma termine com uma palavra sozinha — era o caso de
"burocracia." na garantia. Listar classe por classe deixava buracos
(a nota do cronograma escapou), então vale para todo o corpo de texto
da página; títulos ficam de fora porque muitos já têm quebra manual.
Não mexe em copy nem em largura, e onde o navegador não suportar o
texto quebra como antes. */
body p,
body li,
body small,
body figcaption,
body .faq-answer,
body dd {
text-wrap: pretty;
}
/* --- box de suporte no WhatsApp -----------------------------------------
Ele é irmão de .faq-intro e .faq-list dentro do grid de 12 colunas, e
quem decide a posição é o CSS:
· DESKTOP — na COLUNA DO TÍTULO (mesmas colunas 1-4 da .faq-intro),
logo abaixo dela, alinhado à esquerda. É como estava e o cliente
pediu para preservar.
· MOBILE — o grid vira uma coluna só e ele cai na ordem natural do
HTML, ou seja, DEPOIS das perguntas, centralizado.
Mesma linguagem dos cards claros da página: fundo branco, borda
#e3e3df, raio 18px. O verde fica SÓ no ícone. */
/* O box vive DENTRO da .faq-intro: no desktop isso o coloca logo abaixo
da headline, no fluxo da coluna, que é o certo por construção. Tentar
posicioná-lo por linha do grid não funcionou — a lista de perguntas
contribui para a altura das linhas que atravessa e empurrava o box 86px
para baixo, descolado do título. No mobile a .faq-intro vira
display:contents e o box, já solto no grid, recebe order para cair
depois das perguntas (ver o bloco de 819px). */
.v3-suporte {
width: auto !important;
max-width: 340px !important;
margin: 30px 0 0 !important;
padding: 0;
box-sizing: border-box;
}
.v3-suporte-box {
display: flex;
align-items: center;
/* texto à ESQUERDA no desktop (27/08), igual ao mobile: ícone colado na
borda, texto começando logo depois dele e a seta empurrada para a
outra ponta pelo `margin-left: auto` */
justify-content: flex-start;
gap: 14px;
padding: 18px 22px;
background: #fff;
border: 1px solid #e3e3df;
border-radius: 18px;
text-align: left;
box-shadow: 0 12px 28px rgba(30, 30, 30, .05);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.v3-suporte-box:hover {
transform: translateY(-2px);
border-color: #d8d8d2;
box-shadow: 0 18px 36px rgba(30, 30, 30, .08);
}
.v3-suporte-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.v3-suporte-box > i {
margin-left: 0;
flex: none;
font-size: 18px;
color: #9a9a95;
transition: transform .2s, color .2s;
}
.v3-suporte-icone {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: #25D366;
color: #fff;
box-shadow: inset -1px -1px .5px rgba(0, 0, 0, .1), 0 8px 16px rgba(37, 211, 102, .22), inset .7px .7px .5px rgba(255, 255, 255, .28);
}
.v3-suporte-icone svg { width: 26px; height: 26px; display: block; }
.v3-suporte-texto strong { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em !important; color: #171719; }
.v3-suporte-texto small { font-size: 13.5px; line-height: 1.45; color: #6f6f6a; }
.v3-suporte-box > i { margin-left: auto; flex: none; font-size: 18px; color: #9a9a95; transition: transform .2s, color .2s; }
.v3-suporte-box:hover > i { color: #7c3aed; transform: translate(2px, -2px); }
/* Entre 820 e 1100px a coluna do FAQ encolhe para ~304px e sobram só
162px para o texto do box — estreito demais até para o `text-wrap:
pretty` evitar a viúva. Aqui o ícone e a seta cedem espaço: recuo e
vãos menores devolvem ~40px à linha de texto. */
@media (max-width: 819.98px) {
/* o wrapper do FAQ tem padding inline de 48px; no estreito o box virava
uma coluna alta de 215px com o texto quebrando em quatro linhas */
/* no estreito ele sai da coluna do título e cai depois das perguntas,
centralizado e na largura da seção */
[data-screen-label="FAQ"] .v3-suporte {
grid-column: 1 !important;
grid-row: auto !important;
max-width: 100% !important;
margin: 28px auto 0 !important;
}
/* No estreito o box sai da coluna e vai para DEPOIS das perguntas: a
.faq-intro vira display:contents, então seus filhos (chapéu, headline,
parágrafo e o box) viram itens diretos do grid de uma coluna e podem
ser reordenados. O texto fica à ESQUERDA, como no desktop — o que
muda é só a posição. */
[data-screen-label="FAQ"] .faq-intro { display: contents; }
[data-screen-label="FAQ"] .faq-list { order: 5; grid-column: 1; }
[data-screen-label="FAQ"] .v3-suporte {
order: 9;
grid-column: 1;
max-width: 100% !important;
margin: 28px 0 0 !important;
}
.v3-suporte-box { justify-content: flex-start; text-align: left; }
.v3-suporte-texto { text-align: left; }
.v3-suporte-box > i { margin-left: auto; }
.v3-suporte-box { gap: 13px; padding: 15px 16px; }
.v3-suporte-icone { width: 40px; height: 40px; border-radius: 12px; }
.v3-suporte-icone svg { width: 22px; height: 22px; }
.v3-suporte-texto strong { font-size: 14px; }
.v3-suporte-texto small { font-size: 12.5px; }
.v3-suporte-box > i { font-size: 16px; }
}
/* Sem o CTA, os avatares encostaram na borda direita e o balão do tooltip
(que nasce centrado em left:50%) passou a vazar 3px para fora da página —
rolagem lateral provada por eliminação, não por rect. O último avatar
ancora o balão pela DIREITA; a setinha continua centrada nele. */
header.site-nav .mentor-avatars .mentor-avatar:last-child[data-tooltip]::before {
left: auto;
right: 0;
transform: translate(0, -6px) scale(.97);
}
header.site-nav .mentor-avatars .mentor-avatar:last-child[data-tooltip]:hover::before,
header.site-nav .mentor-avatars .mentor-avatar:last-child[data-tooltip]:focus-visible::before {
transform: translate(0) scale(1);
}
/* O styles.css tem regras POSICIONAIS da nav original — `.site-nav > div >
div:nth-child(2)` era a BARRINHA DIVISÓRIA entre logo e título. Com a
data de volta (27/08), o container dos avatares virou o 2º filho e
herdou as duas coisas que valiam para a barrinha: o fundo #e9e9e9 (o
"frame" cinza que o cliente viu) e o `display:none` no mobile. Aquele
seletor tem especificidade (0,2,2), então o override precisa passar
disso — daí as três classes. */
header.site-nav > div > .creator-signature.mentor-avatars {
display: flex !important;
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* +10px entre a data e os avatares (pedido de 27/08): o gap inline do
wrapper é 12px; aqui vai para 22px. */
header.site-nav > div:last-child { gap: 22px !important; }
/* Abaixo de 400px logo + data + avatares NÃO cabem: medido, o bloco da
direita estourava a borda da nav em 16px (390) e 32px (360). Os
avatares são o elemento decorativo, então saem primeiro — a data, que
o cliente pediu de volta, fica. */
@media (max-width: 429.98px) {
header.site-nav > div > .creator-signature.mentor-avatars { display: none !important; }
header.site-nav > div:last-child { gap: 0 !important; }
}
/* --- nav sem botão (26/08) com a data de volta (27/08) ------------------
Logo de um lado; data + avatares do outro. O styles.css herdado esconde
a .nav-title no mobile e ainda a trunca em 92px — regras pensadas para
quando a nav carregava o CTA. Sem o botão sobra largura, então os dois
voltam em qualquer tela; os seletores abaixo precisam ser mais
específicos que os dele E levar !important. */
header.site-nav .nav-title {
display: inline-flex !important;
align-items: center;
gap: 7px;
}
@media (max-width: 1023.98px) {
header.site-nav .mentor-avatars { display: flex !important; }
header.site-nav .nav-title {
display: inline-flex !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
}
@media (max-width: 559.98px) {
header.site-nav .nav-title { font-size: 11.5px !important; gap: 5px; }
header.site-nav .nav-title .v3-live-dot { font-size: 8px !important; }
}
@media (max-width: 389.98px) {
header.site-nav .nav-title { font-size: 10.5px !important; }
}
@media (max-width: 559.98px) {
header.site-nav { padding: 10px 14px !important; min-height: 56px !important; }
header.site-nav > img { height: 17px !important; }
header.site-nav .mentor-avatar img { width: 26px !important; height: 26px !important; }
}
/* ============================================================
PALCO DOS MÓDULOS — só no DESKTOP (pedido de 27/08)
O chip com o título do módulo sai, e a arte passa a ocupar o
palco quase inteiro: 92% da largura e 82% da altura, medidos na
demarcação que o Breno mandou. Antes eram 72% de largura num
quadro 4:3, o que deixava a arte pequena e com muito ar em volta
— e o chip repetia um texto que já está no bloco ao lado.
O mobile NÃO entra aqui: abaixo de 820px quem aparece são os
.learning-card, e eles ficam como estão.
============================================================ */
@media (min-width: 820px) {
.content-preview-stage .content-preview-title { display: none !important; }
.v3-palco-bloco {
width: 92% !important;
height: 82% !important;
gap: 0 !important;
justify-content: center;
}
/* A caixa tem a proporção EXATA das peças que o Breno exporta
(491×558): assim elas preenchem o frame inteiro sem sobrar
moldura e, principalmente, sem serem cortadas — a queixa de
27/08. As artes dos outros módulos, que têm outras proporções,
ficam inteiras pelo `contain` logo abaixo. */
.v3-palco-caixa {
aspect-ratio: 491 / 558 !important;
width: auto !important;
height: 100% !important;
}
/* `contain`, não `cover`: com a caixa mais alta que 4:3, `cover`
comeria as laterais de toda arte deitada — a foto publicitária
perdia 35% da largura. Assim cada peça cresce até bater na
largura ou na altura e aparece inteira, sobre o fundo do palco. */
.v3-palco-caixa .v3-preview-3d img,
.v3-palco-caixa .v3-preview-foto img,
.v3-palco-caixa .v3-galeria img {
object-fit: contain !important;
object-position: center !important;
}
}
/* ============================================================
GALERIA EM LOOPING dentro do frame de um módulo (27/08)
O Breno exporta as peças já na medida do frame (491×558), então
elas entram inteiras — nada de recorte. A troca é por opacidade,
com as peças empilhadas no mesmo lugar.
============================================================ */
/* Por padrão a galeria CARREGA a própria altura, pela proporção das peças
— é assim que ela funciona dentro do card do mobile, cujo pai tem altura
automática. No palco do desktop a camada já define o tamanho, e aí ela
volta a ser absoluta (regra logo abaixo). */
.v3-galeria {
position: relative;
width: 100%;
aspect-ratio: 491 / 558;
}
.module-preview-layer .v3-galeria {
position: absolute;
inset: 0;
aspect-ratio: auto;
}
.v3-galeria img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* `contain` por segurança: se um dia entrar uma peça fora da medida,
ela encolhe em vez de ser decepada */
object-fit: contain;
object-position: center;
border-radius: 16px;
opacity: 0;
/* o looping está em 2,5s (pedido de 27/08): a transição tem de caber bem
dentro disso, senão duas peças ficam meio visíveis ao mesmo tempo e
vira borrão. .5s deixa 80% do tempo com a peça nítida e sozinha. */
transition: opacity .5s ease;
}
.v3-galeria img.is-ativa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.v3-galeria img { transition: none; }
}
/* ============================================================
FILETE DO MÓDULO ATIVO — do laranja para o roxo (27/08)
A styles.css pinta esse traço com `var(--align-orange)` (#f05a3c,
herdado da referência Align) e com !important. Aqui ele volta para
o roxo da identidade, no mesmo degradê da barra fixa e do botão.
============================================================ */
#conteudo .module-block::before,
.content-module-list .module-block::before {
background: linear-gradient(180deg, #9061f9 0%, #7c3aed 55%, #6d28d9 100%) !important;
}
/* O RODÍZIO É SÓ DO CELULAR (pedido de 27/08): no desktop o cliente
quis de volta os quatro ícones um ao lado do outro, todos visíveis.
O JS também só liga abaixo desta largura — ver o v3.js. */
@media (max-width: 819.98px) {
/* ============================================================
HERO — RODÍZIO das entregas (27/08)
O cliente quis de volta a ideia do texto que aparece e some
embaixo da headline, mas agora o ÍCONE entra junto com a frase.
Como não quebra nem vaza:
- os quatro itens ocupam a MESMA célula do grid (`grid-area: 1/1`),
então a linha ganha a altura do MAIOR deles e nada pula quando a
frase troca — inclusive quando um texto quebra em duas linhas;
- só a opacidade anima; ninguém sai do fluxo, ninguém é reposicionado;
- `overflow: hidden` no container segura qualquer sobra, e o padding
de baixo existe para a sombra dos ícones não ser decepada por ele;
- `min-width: 0` no item deixa o texto quebrar em vez de empurrar a
linha para fora da tela.
============================================================ */
.v3-entregas[data-v3-rodizio] {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-items: center;
max-width: 560px;
overflow: hidden;
padding-bottom: 10px;
}
.v3-entregas[data-v3-rodizio] > div {
grid-area: 1 / 1;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
min-width: 0;
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity .45s ease;
}
.v3-entregas[data-v3-rodizio] > div.is-ativa {
opacity: 1;
pointer-events: auto;
}
.v3-entregas[data-v3-rodizio] img {
width: 96px;
height: 96px;
flex: none;
}
.v3-entregas[data-v3-rodizio] strong {
font-size: 20px;
line-height: 1.25;
min-width: 0;
/* largura FIXA para as quatro frases: sem isso cada texto tem um
comprimento diferente e o ícone anda de lugar a cada troca — foi o
que o cliente viu, com o "Personagens e ícones 3D" empurrando o
ícone para o canto.
8em é o ponto medido: com ele o ícone não anda NADA e o conjunto
(ícone + tinta do texto) fica no máximo 7 a 12px fora do centro,
conforme a largura da tela. Comparação que fechou a escolha, em
390px: com largura automática a tinta fica perfeitamente centrada
mas o ícone anda 45px; com 12,2em o ícone trava e o desvio sobe
para 24px; com 8em o desvio cai para 7px. Os dois rótulos longos
passam a quebrar em duas linhas, o que não move nada — a altura da
célula já é a do maior item.
O texto vai centralizado dentro da própria caixa, senão a frase
curta encosta à esquerda e desequilibra o conjunto. */
width: 8em;
max-width: 100%;
text-align: center;
/* o balance herdado quebrava a frase em duas linhas mesmo sobrando
espaço, só para equilibrar o comprimento das linhas */
text-wrap: normal;
}
@media (prefers-reduced-motion: reduce) {
.v3-entregas[data-v3-rodizio] > div { transition: none; }
}
.v3-entregas[data-v3-rodizio] { padding-inline: 4px; }
.v3-entregas[data-v3-rodizio] > div { gap: 12px; }
.v3-entregas[data-v3-rodizio] img { width: 76px; height: 76px; }
.v3-entregas[data-v3-rodizio] strong { font-size: 16.5px; }
/* cursor da máquina de escrever — some sozinho quando a frase termina.
Vai no ::after para não entrar na conta do texto que o JS escreve. */
.v3-entregas[data-v3-rodizio] strong.esta-digitando::after {
content: "";
display: inline-block;
width: 2px;
height: 1em;
margin-left: 2px;
vertical-align: -0.14em;
background: #7c3aed;
animation: v3-cursor .7s steps(1) infinite;
}
@keyframes v3-cursor { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
.v3-entregas[data-v3-rodizio] strong.esta-digitando::after { animation: none; }
}
}
/* ============================================================
HERO — 03/09/2026
============================================================
Pedidos do cliente, em três rodadas no mesmo dia:
1. headline nova (as quatro entregas passaram para dentro dela) e a
linha de ilustrações que as repetia FORA;
2. texto, botão e barrinha à ESQUERDA, com a colagem à direita;
3. no celular, a colagem ENTRE a headline e o botão, e o hero
ocupando 100% da altura da tela.
Por que o grid está no `.hero-copy` e não no `.hero-layout`: o pedido (3)
exige que a colagem caia ENTRE dois filhos da `.hero-copy`. Irmã dela —
como nasceu — não há como intercalar sem mexer no DOM por JS. Então ela
mora dentro, logo depois do