/* ========================================================================
EVOLUÇÃO DESIGN — LANDING PAGE
======================================================================== */
/* ---------------------------------------------------------------------
1. FONTES (@font-face)
--------------------------------------------------------------------- */
@font-face {
font-family: 'TBJ Neuetra ExtraBold';
src: url('../assets/fonts/TBJNeuetraDemo-ExtraBold-BF6a28d7ace34fb.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'TBJ Neuetra Medium';
src: url('../assets/fonts/TBJNeuetraDemo-Medium-BF6a28d7ac6ea90.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Muller Next Trial';
src: url('../assets/fonts/MullerNextTrial-ExtraBoldItalic.otf') format('opentype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Muller Next Trial';
src: url('../assets/fonts/MullerNextTrial-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Fallback de acentuação — confirmado via leitura direta da tabela cmap dos
arquivos: TBJ Neuetra Demo (ExtraBold e Medium) tem só 67 glyphs, ASCII
básico, ZERO caracteres acentuados — não é config errada, o arquivo demo
realmente não contém á/à/â/ã/é/ê/í/ó/ô/õ/ú/ç (maiúsculas incluso). Não há
versão completa/licenciada da TBJ Neuetra em lugar nenhum do projeto ou da
máquina. Sem fallback, o navegador troca SÓ o caractere acentuado por uma
fonte do sistema (ex: Arial) — visivelmente mais fino/diferente do resto
da palavra. Em vez de uma fonte genérica, registramos um segundo
@font-face com o MESMO font-family (TBJ Neuetra ExtraBold/Medium) e
unicode-range limitado às letras acentuadas: o navegador usa o TBJ Neuetra
normalmente e só busca aqui quando precisa de um desses caracteres —
usando a Muller Next Trial (já carregada no projeto, com os 530 glyphs
incluindo acentuação completa) em vez de depender de uma fonte do sistema.
Variante Regular (não ExtraBoldItalic) mesmo pro fallback do título —
ExtraBoldItalic é ITÁLICO no desenho da fonte; "font-style:normal" aqui é
só o rótulo do CSS pro navegador escolher esta face, não desincli
na o traçado, então os acentos saíam tortos no meio de um título reto
(o defeito mais visível reportado). Regular é reto de verdade — troca
uma leve diferença de peso (menos grave, quase imperceptível em poucas
letras) por eliminar a inclinação, que era o problema saltando aos olhos. */
@font-face {
font-family: 'TBJ Neuetra ExtraBold';
src: url('../assets/fonts/MullerNextTrial-Regular.otf') format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: U+00C0-00C3, U+00C7, U+00C9-00CA, U+00CD, U+00D3-00D5, U+00DA,
U+00E0-00E3, U+00E7, U+00E9-00EA, U+00ED, U+00F3-00F5, U+00FA;
}
@font-face {
font-family: 'TBJ Neuetra Medium';
src: url('../assets/fonts/MullerNextTrial-Regular.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+00C0-00C3, U+00C7, U+00C9-00CA, U+00CD, U+00D3-00D5, U+00DA,
U+00E0-00E3, U+00E7, U+00E9-00EA, U+00ED, U+00F3-00F5, U+00FA;
}
/* ---------------------------------------------------------------------
2. VARIÁVEIS GLOBAIS
--------------------------------------------------------------------- */
:root {
/* Paleta oficial do cliente (fundo escuro em toda a página) */
--color-primary: #0D0D0D;
--color-heading: #F2F2F2;
--color-secondary: #A6A6A6;
--color-support: #8C8C8C;
--color-bg: #0D0D0D;
--color-border: rgba(255, 255, 255, 0.1);
/* Acento (cor única de marca — d61f3a) */
--accent-1: #D61F3A;
--accent-2: #D61F3A;
--accent-gradient: linear-gradient(90deg, var(--accent-1), var(--accent-2));
/* Fundos — micro-variações de preto entre seções (extremamente discretas) */
--bg-deep: #0B0B0B;
--bg-base: #0D0D0D;
--bg-soft: #101010;
--bg-elevated: #141414;
/* Luzes ambiente — cor única de marca, opacidade baixa, só para profundidade */
--glow-pink-strong: rgba(214, 31, 58, 0.12);
--glow-pink-soft: rgba(214, 31, 58, 0.06);
--glow-yellow-strong: rgba(214, 31, 58, 0.08);
--glow-yellow-soft: rgba(214, 31, 58, 0.045);
/* Glows de identidade dos cursos (repouso, bem mais discretos que o hover) */
--glow-green: rgba(61, 220, 132, 0.16);
--glow-red: rgba(255, 77, 77, 0.16);
--glow-purple: rgba(155, 92, 255, 0.16);
--glow-gold: rgba(249, 195, 74, 0.16);
/* Tipografia */
--font-display: 'TBJ Neuetra ExtraBold', 'Arial Black', sans-serif;
--font-body: 'TBJ Neuetra Medium', Arial, sans-serif;
--font-button: 'Muller Next Trial', Arial, sans-serif;
/* Espaçamento */
--section-padding: clamp(4.5rem, 8vw, 8rem);
--container-width: 1280px;
--container-pad: clamp(1.25rem, 4vw, 2.5rem);
/* Sombras e superfícies */
--shadow-soft: 0 20px 60px -20px rgba(13, 13, 13, 0.25);
--shadow-card: 0 12px 32px -16px rgba(13, 13, 13, 0.18);
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 10px;
/* Transições */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--transition-fast: 0.25s var(--ease);
--transition-med: 0.5s var(--ease);
--transition-slow: 0.9s var(--ease);
}
/* ---------------------------------------------------------------------
3. RESET
--------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------
3.1. SMOOTH SCROLL (Lenis) — ver js/smooth-scroll.js
Quando o Lenis inicializa ele adiciona a classe .lenis ao ; nesse
caso a suavização passa a ser controlada por ele (JS), então o
scroll-behavior nativo é desligado para não haver dois sistemas de
easing disputando o mesmo scroll. Sem JS (ou com reduced-motion), o
scroll-behavior: smooth acima continua valendo como fallback.
--------------------------------------------------------------------- */
html.lenis {
scroll-behavior: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent] {
overscroll-behavior: contain;
}
/* ---------------------------------------------------------------------
3.2. BARRA DE ROLAGEM
Estilizada com a cor de acento da marca (--accent-1), fixa em todos os
navegadores (não depende mais da cor de acento do sistema operacional
do usuário). Não afeta os carrosséis horizontais que já escondem a
própria scrollbar (regra mais específica continua vencendo).
--------------------------------------------------------------------- */
html {
scrollbar-width: auto;
scrollbar-color: var(--accent-1) var(--color-bg);
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-track {
background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--accent-1);
border: 2px solid var(--color-bg);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #ff2f4f;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.platform__mockup {
transform: scale(1) !important;
}
}
body {
font-family: var(--font-body);
color: var(--color-secondary);
background: var(--color-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* height:auto é o que realmente evita distorção em imagens com width/height
como atributo HTML (ex: ![]()
, usado pra
reservar espaço e evitar layout shift): sem isso, sempre que alguma regra
CSS define só um width (%, clamp, etc.) sem mexer no height, o navegador
usa o atributo height="..." literalmente (é um hint de apresentação, tem
prioridade sobre o height:auto padrão) em vez de escalar proporcionalmente
— a imagem fica larga do jeito pedido, mas com a altura do arquivo
original, esticada/achatada. Foi exatamente esse o motivo do notebook
mobile (.platform__mockup) parecendo esticado. */
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
button {
font: inherit;
background: none;
border: none;
cursor: pointer;
color: inherit;
}
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-pad);
}
:focus-visible {
outline: 2px solid var(--color-heading);
outline-offset: 3px;
}
/* ---------------------------------------------------------------------
4. BOTÕES
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-button);
font-size: 0.95rem;
letter-spacing: 0.03em;
padding: 1.05rem 2.2rem;
border-radius: 100px;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
white-space: nowrap;
}
.btn--primary {
font-style: italic;
font-weight: 800;
background: var(--accent-gradient);
background-size: 200% 100%;
background-position: 0% 0%;
color: #fff;
box-shadow: 0 10px 30px -8px rgba(214, 31, 58, 0.55);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position 0.5s var(--ease);
}
.btn--primary:hover {
background-position: 100% 0%;
transform: translateY(-3px);
box-shadow:
0 16px 40px -10px rgba(214, 31, 58, 0.65),
0 0 0 6px rgba(214, 31, 58, 0.12),
0 0 46px 2px rgba(214, 31, 58, 0.28);
}
.btn--outline {
font-weight: 400;
border: 1.5px solid rgba(255, 255, 255, 0.35);
color: var(--color-heading);
background: transparent;
}
.btn--outline:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.08);
transform: translateY(-3px);
box-shadow: 0 0 34px -8px rgba(214, 31, 58, 0.4);
}
/* ---------------------------------------------------------------------
5. TIPOGRAFIA COMPARTILHADA
--------------------------------------------------------------------- */
.section-title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.6vw, 3rem);
color: var(--color-heading);
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 22ch;
}
.section-head {
max-width: 720px;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Destaque de palavra-chave em títulos — usar com moderação (1-2 por página) */
.text-accent {
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------------------------------------------------------------------
6. HERO
--------------------------------------------------------------------- */
.hero {
position: relative;
height: 94vh;
min-height: 680px;
background-color: var(--bg-deep);
overflow: hidden;
}
.hero__backdrop {
position: absolute;
inset: 0;
z-index: 0;
background: url('../assets/images/hero-bg.webp') center/cover no-repeat, var(--color-primary);
}
.hero__backdrop::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(100deg, rgba(13, 13, 13, 0.97) 0%, rgba(13, 13, 13, 0.9) 26%, rgba(13, 13, 13, 0.62) 46%, rgba(13, 13, 13, 0.2) 64%, rgba(13, 13, 13, 0.05) 100%),
radial-gradient(70% 90% at 6% 50%, rgba(0, 0, 0, 0.7), transparent 60%);
}
/* Glow amarelo extremamente discreto, vindo do lado oposto (atrás do texto) */
.hero__glow-secondary {
position: absolute;
z-index: 1;
top: 14%;
left: -12%;
width: min(34vw, 560px);
height: 60%;
background: radial-gradient(closest-side, var(--glow-yellow-soft), transparent 75%);
filter: blur(100px);
pointer-events: none;
}
/* Foto: posicionada por porcentagem (base de referência 1920px),
ocupando a coluna direita e sangrando até a borda. */
.hero__figure {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
left: 45.3%;
}
.hero__photo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom right;
filter:
drop-shadow(0 40px 65px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 90px rgba(255, 255, 255, 0.1));
/* Reduz o peso visual da foto (~15%) frente à copy, mantendo a proporção;
ancorada no canto inferior direito, levemente reenquadrada pra cima e
puxada um pouco pra esquerda pra preencher o vazio central. */
transform: scale(0.85) translateY(-24px) translateX(-15%);
transform-origin: bottom right;
}
.hero__fade {
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 34vh;
/* Termina em #000 — a mesma cor sólida do carrossel logo abaixo — pra
não sobrar nenhuma costura entre as duas seções. */
background: linear-gradient(180deg, transparent 0%, #000 85%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
max-width: min(58vw, 1020px);
padding-left: clamp(1.25rem, 4vw, 5rem);
padding-right: clamp(1rem, 1.5vw, 1.25rem);
color: #fff;
}
.hero__logo {
display: block;
width: clamp(9.5rem, 22vw, 24rem);
height: auto;
margin-bottom: clamp(1.5rem, 3.4vw, 2.75rem);
}
.hero__title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.85vw, 3.4rem);
line-height: 1.04;
letter-spacing: -0.015em;
text-transform: uppercase;
margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
color: #C4C4C4;
}
.hero__subtitle {
font-family: var(--font-body);
font-size: clamp(0.92rem, 1.3vw, 1.5625rem);
line-height: 1.65;
letter-spacing: 0.01em;
color: var(--color-secondary);
opacity: 0.85;
margin-bottom: clamp(2rem, 3.4vw, 2.75rem);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 1.1rem;
margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}
.hero .btn {
padding: 1.2rem 2.5rem;
font-size: clamp(0.9rem, 1.15vw, 1.35rem);
}
/* Pulso discreto só no CTA principal do Hero — sobe e desce suavemente em loop */
.hero__actions .btn--primary {
animation: hero-cta-bounce 1.8s ease-in-out infinite;
}
.hero__actions .btn--primary:hover {
animation-play-state: paused;
}
@keyframes hero-cta-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.hero__programs {
display: flex;
align-items: center;
/* wrap + row-gap — em telas bem estreitas (320-360px) o ícone + divisor +
"Cursos Vitalício" não cabem numa linha só e o texto vazava pra fora da
seção; com wrap ele simplesmente desce pra uma segunda linha em vez de
estourar a borda. Não muda nada no desktop, onde sempre cabe numa linha. */
flex-wrap: wrap;
row-gap: 0.5rem;
column-gap: 1.1rem;
}
.hero__programs-img {
height: 42px;
width: auto;
opacity: 0.95;
}
.hero__programs-divider {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.25);
}
.hero__programs-text {
font-family: var(--font-button);
font-size: clamp(0.85rem, 1vw, 1.1rem);
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.02em;
}
/* ---------------------------------------------------------------------
PLATAFORMA
--------------------------------------------------------------------- */
/* ========================================= */
/* SECTION */
/* ========================================= */
.platform{
position:relative;
overflow:hidden;
padding:120px 0;
background:
linear-gradient(rgba(10,10,10,.90),rgba(10,10,10,.90)),
url("../assets/images/bg-evolucao.webp.webp") center/cover no-repeat;
}
.platform::before{
content:"";
position:absolute;
inset:0;
background:
/* Começa em #000 (mesma cor sólida do carrossel logo acima) e
esmaece até 180px pra dentro da seção — transição suave saindo
do carrossel, sem costura. */
linear-gradient(180deg, #000 0px, transparent 180px),
radial-gradient(circle at 12% 45%, rgba(214,31,58,.15), transparent 45%);
pointer-events:none;
}
.platform .container{
width:min(1600px,94%);
max-width:94vw;
margin:auto;
}
/* ========================================= */
/* LAYOUT */
/* ========================================= */
.platform__stage{
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
min-height:760px;
}
/* ========================================= */
/* NOTEBOOK */
/* ========================================= */
.platform__figure{
position: absolute;
left: -8%;
top: 50%;
transform: translateY(-50%);
width: 80%;
max-width: 1450px;
z-index: 1;
}
.platform__mockup{
width: 100%;
display: block;
filter: brightness(0.88) drop-shadow(0 45px 70px rgba(0,0,0,.65));
transform: scale(0.8);
transform-origin: center center;
will-change: transform;
}
.platform__glow{
position:absolute;
width:650px;
height:650px;
left:-120px;
top:50%;
transform:translateY(-50%);
border-radius:50%;
background:radial-gradient(circle, rgba(214,31,58,.22), transparent 70%);
filter:blur(80px);
z-index:-1;
}
/* ========================================= */
/* CARD */
/* ========================================= */
.platform__card{
position: absolute;
top: 50%;
right: 6%;
transform: translateY(-50%);
width: 600px;
padding: 48px;
background: #0d0d0d;
border: 1px solid rgba(255,255,255,.08);
border-radius: 24px;
box-shadow: 0 35px 80px rgba(0,0,0,.6);
z-index: 10;
}
/* ========================================= */
/* LEAD (tagline itálico acima do título — mesmo padrão usado em
.about-bio__subtitle / .guarantee__subtitle) */
/* ========================================= */
.platform__lead{
font-family: var(--font-body);
font-style: italic;
font-size: 18px;
line-height: 1.4;
color: var(--color-secondary);
margin-bottom: 12px;
}
/* ========================================= */
/* TITLE */
/* ========================================= */
.platform__card .section-title{
font-size:52px;
font-weight:800;
line-height:1.05;
letter-spacing:-2px;
width:100%;
max-width:none;
margin-bottom:32px;
}
/* ========================================= */
/* TEXT */
/* ========================================= */
.platform__text{
font-size:18px;
line-height:1.65;
color:#d5d5d5;
margin-bottom:24px;
max-width:95%;
}
/* ========================================= */
/* BUTTON */
/* ========================================= */
.platform__cta{
display:flex;
align-items:center;
justify-content:center;
/* Largura acompanha o texto (+ padding herdado do .btn) em vez de fixa,
pra não vazar quando a copy do botão mudar de tamanho. */
width:fit-content;
height:58px;
margin:35px auto 0;
border-radius:999px;
}
/* ========================================= */
/* RESPONSIVO */
/* ========================================= */
@media (max-width:1200px){
.platform__figure{
width:75%;
}
.platform__card{
width:480px;
padding:40px;
}
.platform__card .section-title{
font-size:42px;
}
}
@media (max-width:991px){
.platform{
padding:60px 0;
}
/* Card primeiro, notebook logo abaixo, ~24px entre os dois — composição
de bloco único, igual à referência (não mais dois elementos soltos
com muito respiro entre eles). */
.platform__stage{
display:flex;
flex-direction:column;
align-items:center;
min-height:auto;
gap:24px;
}
.platform__card{
position:relative;
top:auto;
right:auto;
transform:none;
/* Largura equilibrada — nem colado nas bordas nem tão estreito a
ponto de comprimir o texto (era 88%/440px). */
width:90%;
max-width:480px;
margin:0 auto;
/* Padding bem mais enxuto — é o que reduz a altura do card. */
padding:32px 28px;
order: 1;
}
.platform__lead{
font-size:15px;
margin-bottom:8px;
}
.platform__card .section-title{
font-size:34px;
line-height:1.1;
margin-bottom:14px;
}
.platform__text{
font-size:15px;
line-height:1.5;
/* Espaço entre parágrafos bem mais curto que os 24px do desktop. */
margin-bottom:10px;
}
.platform__cta{
/* Largura pelo conteúdo, não mais fixa (vazava com textos maiores). */
width:fit-content;
max-width:100%;
margin:18px auto 0;
}
/* .platform__stage já centraliza com align-items:center (flex column).
Antes havia aqui um left:50% + transform:translateX(-50%) — como o
item já chega centralizado pelo flex, esse offset extra empurrava o
notebook ~40px pra direita do centro real (left:50% soma metade da
largura do CONTAINER à posição estática, que já era centralizada; o
translateX(-50%) só desconta metade da largura do PRÓPRIO elemento,
então sobra uma diferença = a causa do notebook aparecer descentrado).
Removido — basta deixar o flex centralizar. */
.platform__figure{
position: relative;
/* Zera left:-8% / top:50% / transform:translateY(-50%) herdados da
regra base (feitos pro layout absoluto do desktop) — sem isso o
figure ainda levava um deslocamento de -8% pra esquerda mesmo já
centralizado pelo flex. */
left: 0;
top: auto;
transform: none;
/* Maior e mais próximo da referência (era 90%/460px, e ainda saía
reduzido porque herdava o transform:scale(0.8) do desktop — ver
.platform__mockup abaixo). */
width: 86%;
max-width: 480px;
order: 2;
}
/* O scale(0.8) da regra base (.platform__mockup) é ajuste específico
do desktop (compensava o .platform__figure a 80%/1450px absoluto).
No mobile ele sobrava e encolhia o notebook mais um tanto além do
width já reduzido — cancelado aqui pra usar 100% da proporção real. */
.platform__mockup{
transform: scale(1);
}
}
@media (max-width:576px){
/* Card equilibrado e centralizado — margens laterais visíveis, mas sem
apertar o texto (era 84%/340px, estreito demais e forçava quebras de
linha excessivas no título). */
.platform__card{
width:90%;
max-width:400px;
padding:30px 26px;
}
.platform__lead{
font-size:14px;
}
.platform__card .section-title{
/* Fonte mantida perto do desktop (não reduzida pra "caber") — foi a
largura do card que cresceu pra acomodar o texto. */
font-size:32px;
letter-spacing:-1px;
margin-bottom:12px;
}
.platform__text{
font-size:15px;
line-height:1.55;
}
.platform__cta{
/* fit-content (não mais 100%) — acompanha o texto do botão em
vez de esticar largo demais. */
width:fit-content;
max-width:100%;
margin:22px auto 0;
/* Quebra em vez de vazar pra fora do card quando o texto do botão
for mais longo que o card estreito consegue acomodar numa linha
(herda white-space:nowrap de .btn). */
white-space:normal;
text-align:center;
padding-inline:1.8rem;
}
/* Notebook centralizado, menor e com a proporção real preservada — só
nesse breakpoint de telefone (tablet/991px mantém os valores de
antes). Antes a caixa ficava desalinhada (left:91%) e muito mais
larga que o container (width:182%), o que jogava boa parte do PNG
pra fora da área visível (cortada pelo overflow:hidden de
.platform) e dava a falsa impressão de notebook "esticado"/
distorcido. Aqui a caixa fica dentro do container, sempre
centralizada, e o ![]()
(width:100%, sem height fixo) escala
mantendo a proporção original — sem esticar nem cortar. */
.platform__stage{
gap: 20px;
}
.platform__figure{
/* Maior ainda a pedido (era 96%/425px) — só o notebook do telefone,
card/textos/botão e o breakpoint de tablet (991px) intocados.
Centralização vem só do flex do .platform__stage. */
width: 102%;
max-width: 460px;
margin-top: 0;
}
}
/* ---------------------------------------------------------------------
CARROSSEL DE MARCAS
--------------------------------------------------------------------- */
.logo-marquee {
position: relative;
/* Fundo sólido só, sem nenhum efeito — igual à referência. A transição
entre seções vive inteira no .hero__fade e no topo da próxima seção. */
width: 100%;
overflow: hidden;
background: #000;
min-height: 44px;
padding-block: clamp(2rem, 4vw, 3.25rem);
}
.logo-marquee__track {
display: flex;
width: max-content;
cursor: grab;
touch-action: pan-y;
}
.logo-marquee__track:active {
cursor: grabbing;
}
.logo-marquee__group {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* Caixa delimitadora igual para todas as logos — object-fit: contain escala
cada uma dentro dela preservando a proporção original (sem esticar) e
centralizando nos dois eixos. Isso equaliza a ÁREA ocupada por cada marca,
já que a largura sozinha varia muito entre uma wordmark larga (Evolução
Design) e logos mais compactas (ícone + texto empilhado). */
.logo-marquee__logo {
width: clamp(110px, 11vw, 150px);
height: clamp(32px, 4vw, 48px);
object-fit: contain;
object-position: center;
margin-inline: clamp(0.75rem, 1.5vw, 1.5rem);
opacity: 0.88;
filter: grayscale(100%);
transition: opacity var(--transition-fast);
}
.logo-marquee__logo:hover {
opacity: 1;
}
/* Movimento contínuo agora é 100% via JS (initDraggableMarquee, ver
js/script.js) — mesmo motor rAF usado em .artworks__track e
.social-proof__track. Motivo da troca: a versão anterior usava só
@keyframes CSS, e mesmo com um !important específico pro
prefers-reduced-motion, o cliente ainda via a marquesina parada em outra
máquina — sinal de que a causa não era (só) essa media query, e sim algo
dependente de engine/SO que uma animação CSS pura fica exposta a (bugs de
composição de GPU, extensões que forçam reduced-motion no nível do
navegador, throttling de aba em segundo plano, etc.). Um loop
requestAnimationFrame não depende de nada disso: ele avança o offset e
escreve `transform` a cada frame, do mesmo jeito nos quatro navegadores. */
/* ---------------------------------------------------------------------
8.5. ARTES (CARROSSEL EM DUAS LINHAS, DRAG + LOOP INFINITO)
--------------------------------------------------------------------- */
.artworks {
position: relative;
padding-block: var(--section-padding);
background: var(--bg-deep);
overflow: hidden;
}
/* Mesmo divisor discreto usado em .faq::before —
era um divisor com glow vermelho antes, ficou chamativo demais depois
da troca de cor da marca. */
.artworks::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 640px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
pointer-events: none;
}
.artworks__head {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.artworks__title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.6vw, 2.75rem);
line-height: 1.18;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--color-heading);
}
.artworks__subtitle {
margin-top: 1rem;
font-family: var(--font-body);
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.65;
color: var(--color-secondary);
}
.artworks__subtitle strong {
color: var(--color-heading);
font-weight: 700;
}
.artworks__wall {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 1.5rem);
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.artworks__row {
position: relative;
overflow: hidden;
isolation: isolate;
}
.artworks__row::before,
.artworks__row::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: clamp(50px, 8vw, 140px);
z-index: 2;
pointer-events: none;
}
.artworks__row::before {
left: 0;
background: linear-gradient(90deg, var(--bg-deep) 0%, transparent 100%);
}
.artworks__row::after {
right: 0;
background: linear-gradient(270deg, var(--bg-deep) 0%, transparent 100%);
}
.artworks__track {
display: flex;
width: max-content;
cursor: grab;
touch-action: pan-y;
}
.artworks__track:active {
cursor: grabbing;
}
.artworks__group {
display: flex;
flex-shrink: 0;
gap: clamp(1rem, 2vw, 1.5rem);
padding-inline: calc(clamp(1rem, 2vw, 1.5rem) / 2);
}
.artworks__card {
flex: 0 0 auto;
width: clamp(150px, 15vw, 210px);
aspect-ratio: 9 / 16;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
}
.artworks__img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
/* ---------------------------------------------------------------------
8.6. BANNER DE ASSINATURA
--------------------------------------------------------------------- */
.subscribe-banner {
position: relative;
padding-block: clamp(2.5rem, 5vw, 4rem);
overflow: hidden;
}
.subscribe-banner__bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(60% 130% at 12% 25%, rgba(214, 31, 58, 0.07), transparent 60%),
radial-gradient(55% 110% at 88% 75%, rgba(214, 31, 58, 0.1), transparent 60%),
#FFFFFF;
}
.subscribe-banner__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.subscribe-banner__title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--accent-1);
max-width: 720px;
margin-inline: auto;
}
/* ---------------------------------------------------------------------
8.5. CURSOS - INTRO (copy + animação)
--------------------------------------------------------------------- */
/* Fica dentro de .courses, acima de .courses__grid, para compartilhar o
mesmo .courses__bg (imagem + gradiente) sem costura entre copy e cards. */
.courses__intro {
max-width: 760px;
margin-inline: auto;
/* Respiro controlado (60-80px) até o grid de cards logo abaixo */
margin-bottom: clamp(60px, 6vw, 80px);
text-align: center;
}
.courses-intro__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 3.2rem);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-heading);
text-transform: uppercase;
}
.courses-intro__subtitle {
max-width: 620px;
margin: 1.25rem auto 0;
font-family: var(--font-body);
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.65;
color: var(--color-secondary);
/* Fade In + Slide Up, com delay de ~250ms após o início do título */
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 250ms;
}
.courses__intro.is-visible .courses-intro__subtitle {
opacity: 1;
transform: translateY(0);
}
/* Word Reveal — cada palavra do título anima individualmente (blur + slide up + fade),
com stagger via --word-index. Duração total (palavra + maior delay) fica entre 900-1200ms. */
.ci-word {
display: inline-block;
opacity: 0;
filter: blur(10px);
transform: translateY(40px);
transition:
opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--word-index, 0) * 40ms);
will-change: transform, opacity, filter;
}
.courses__intro.is-visible .ci-word {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Brilho único sobre a palavra "EVOLUÇÃO", disparado via JS ao final do word reveal. */
.ci-word--highlight {
color: var(--accent-1);
background-image: linear-gradient(120deg, currentColor 0%, currentColor 45%, #fff 50%, currentColor 55%, currentColor 100%);
background-size: 250% 100%;
background-position: 200% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ci-word--highlight.ci-word--shine {
animation: ci-word-shine 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ci-word-shine {
from {
background-position: 200% 0;
}
to {
background-position: -50% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ci-word {
filter: none;
}
.ci-word--highlight.ci-word--shine {
animation: none;
}
}
/* ---------------------------------------------------------------------
9. CURSOS
--------------------------------------------------------------------- */
.courses {
position: relative;
padding-block: var(--section-padding);
overflow: hidden;
}
.courses__bg {
position: absolute;
inset: 0;
z-index: 0;
/* Ambient lights discretas (rosa/amarelo) nos cantos, só para profundidade */
background:
radial-gradient(45% 55% at 10% 12%, var(--glow-pink-soft), transparent 70%),
radial-gradient(40% 50% at 90% 88%, var(--glow-yellow-soft), transparent 70%),
url('../assets/images/background_banner-card.webp') center/cover no-repeat,
var(--color-primary);
}
.courses__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
var(--color-primary) 0%,
rgba(13, 13, 13, 0.75) 10%,
rgba(13, 13, 13, 0.4) 28%,
rgba(13, 13, 13, 0.4) 72%,
rgba(13, 13, 13, 0.78) 90%,
var(--color-primary) 100%);
}
.courses .container {
position: relative;
z-index: 1;
}
/* Viewport do carrossel — SÓ recorta (overflow:hidden) o que a track arrasta
pra fora; altura 100% definida pelo conteúdo interno, então a seção
continua com sua altura natural, sem 100vh e sem position:absolute. A
mask-image troca o corte seco do overflow por um fade bem suave nas duas
laterais — cards e glow desaparecem gradualmente bem antes de chegar na
borda real (que fica reservada pra .courses__viewport, ver abaixo). */
.courses__grid {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
/* Wrapper interno — só existe pra dar respiro (padding) entre o recorte do
.courses__grid e a track. É esse respiro que garante que o glow dos cards
(box-shadow de até ~63px) e as bordas do primeiro/último card nunca sejam
cortados de forma seca: eles transbordam pra dentro do padding (que não
tem overflow:hidden) e só somem de fato no recorte bem mais externo, já
suavizado pela mask acima. */
.courses__viewport {
padding: clamp(40px, 6vw, 70px) clamp(60px, 8vw, 100px);
}
/* Fileira arrastável — os cards de verdade (5) + clones injetados via JS
(courses-carousel.js) pra fechar o loop infinito. Só translateX muda
(via GSAP); a track em si nunca sai do fluxo normal da seção. overflow
visible de propósito — quem recorta é só o .courses__grid, lá fora. */
.courses__track {
display: flex;
align-items: stretch;
gap: clamp(1.5rem, 3vw, 2.5rem);
width: max-content;
overflow: visible;
cursor: grab;
will-change: transform;
}
.courses__track:active {
cursor: grabbing;
}
.courses__track .course-card-v2 {
flex: 0 0 auto;
width: 340px;
}
/* Setas — só no mobile (ver breakpoint 760px); controlam a mesma track,
não criam outro slider. Reaproveita o botão circular já usado no site
(.modules-carousel__arrow, do carrossel do modal de produto). */
.courses__nav {
display: none;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.course-card-v2 {
--card-ease: cubic-bezier(0.22, 1, 0.36, 1);
--card-glow: rgba(255, 255, 255, 0.35);
--card-ambient: rgba(255, 255, 255, 0.08);
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 28px;
/* Segunda camada = glow de identidade em repouso, bem mais discreto que o hover */
box-shadow: 0 25px 60px -18px rgba(0, 0, 0, 0.6), 0 25px 70px -20px var(--card-ambient);
transition: transform 0.4s var(--card-ease), box-shadow 0.4s var(--card-ease);
will-change: transform;
}
/* Especificidade "article.course-card-v2:hover" (em vez de só ".course-card-v2:hover")
de propósito: precisa vencer [data-reveal].is-visible, que tem a mesma especificidade
e vem depois no arquivo — sem isso o hover era anulado assim que o card era revelado. */
article.course-card-v2:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 35px 80px -18px rgba(0, 0, 0, 0.8);
}
.course-card-v2--green {
--card-glow: rgba(61, 220, 132, 0.55);
--card-color: #3ddc84;
--card-ambient: var(--glow-green);
}
.course-card-v2--red {
--card-glow: rgba(255, 77, 77, 0.55);
--card-color: #ff4d4d;
--card-ambient: var(--glow-red);
}
.course-card-v2--purple {
--card-glow: rgba(155, 92, 255, 0.55);
--card-color: #9b5cff;
--card-ambient: var(--glow-purple);
}
.course-card-v2--gold {
--card-glow: rgba(249, 195, 74, 0.55);
--card-color: #F9C34A;
--card-ambient: var(--glow-gold);
}
/* Glow colorido — camada própria animada só por opacity (evita repaint do box-shadow do card) */
.course-card-v2::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 55px 8px var(--card-glow);
opacity: 0;
transition: opacity 0.4s var(--card-ease);
pointer-events: none;
}
.course-card-v2:hover::after {
opacity: 1;
}
/* Máscara de recorte — contém a imagem e o brilho, sempre presa aos cantos do card
(o glow colorido fica de fora dela de propósito, para poder "vazar" além da borda). */
.course-card-v2__clip {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
}
.course-card-v2__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* Brilho (shine) diagonal — discreto, passa uma única vez por hover e some sem deixar rastro.
Usa @keyframes (não transition) para não "voltar" visível quando o mouse sai do card. */
.course-card-v2__clip::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(100deg, transparent 47%, rgba(255, 255, 255, 0.12) 50%, transparent 53%);
transform: translateX(-150%);
pointer-events: none;
}
.course-card-v2:hover .course-card-v2__clip::before {
animation: course-card-shine 0.8s var(--card-ease) forwards;
}
@keyframes course-card-shine {
from {
transform: translateX(-150%);
}
to {
transform: translateX(150%);
}
}
.course-card-v2__btn {
position: absolute;
z-index: 3;
right: 2%;
bottom: 8.5%;
display: inline-flex;
align-items: center;
justify-content: center;
/* padding reduzido em 2px em cada eixo para compensar o border novo —
o tamanho total do botão fica idêntico ao anterior (sem border). */
padding: calc(0.85rem - 2px) calc(1.5rem - 2px);
border: 2px solid var(--card-color, #fff);
border-radius: 100px;
font-family: var(--font-button);
font-size: clamp(0.72rem, 1vw, 0.85rem);
font-weight: 800;
font-style: italic;
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--card-color, #fff);
background: transparent;
box-shadow: 0 0 0 0 transparent;
transition:
background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.course-card-v2__btn:hover {
background-color: var(--card-color, #fff);
color: #fff;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 10px 30px -6px var(--card-glow), 0 0 38px -4px var(--card-glow);
}
/* ---------------------------------------------------------------------
11. PROVA SOCIAL
--------------------------------------------------------------------- */
.social-proof {
padding-block: var(--section-padding);
background: var(--bg-deep);
}
.social-proof__panel {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem);
/* overflow:hidden cortava o brilho (box-shadow) de .social-proof__accent
de forma assimétrica bem na borda superior — o carrossel já tem seu
próprio clip em .social-proof__carousel, então não precisa daqui. */
overflow: visible;
}
/* Linha luminosa no topo do painel — mesmo tom âmbar do --accent-2 */
.social-proof__accent {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(70%, 640px);
height: 4px;
border-radius: 100px;
background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
box-shadow: 0 0 24px 2px rgba(214, 31, 58, 0.55);
}
.social-proof__head {
text-align: center;
max-width: 640px;
margin-inline: auto;
margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.social-proof__title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.22;
text-transform: uppercase;
color: var(--color-heading);
}
.social-proof__highlight {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.4vw, 2.5rem);
line-height: 1.22;
text-transform: uppercase;
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-top: 0.2rem;
}
.social-proof__subtitle {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.65;
color: var(--color-secondary);
max-width: 54ch;
margin: 1.25rem auto 0;
}
/* Carrossel de prints — mesmo padrão de loop arrastável usado em Artes,
fade nas bordas via gradiente sólido (mais confiável que mask-image). */
.social-proof__carousel {
position: relative;
margin-inline: calc(clamp(1.25rem, 4vw, 3rem) * -1);
overflow: hidden;
}
.social-proof__carousel::before,
.social-proof__carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: clamp(40px, 6vw, 100px);
z-index: 2;
pointer-events: none;
}
.social-proof__carousel::before {
left: 0;
background: linear-gradient(90deg, var(--bg-elevated) 0%, transparent 100%);
}
.social-proof__carousel::after {
right: 0;
background: linear-gradient(270deg, var(--bg-elevated) 0%, transparent 100%);
}
.social-proof__track {
display: flex;
width: max-content;
cursor: grab;
touch-action: pan-y;
padding-block: 0.5rem;
}
.social-proof__track:active {
cursor: grabbing;
}
.social-proof__group {
display: flex;
flex-shrink: 0;
gap: clamp(1rem, 1.8vw, 1.5rem);
padding-inline: calc(clamp(1rem, 1.8vw, 1.5rem) / 2);
}
.social-proof__card {
flex: 0 0 auto;
width: clamp(140px, 14vw, 190px);
aspect-ratio: 9 / 18.5;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.6);
}
.social-proof__media {
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
pointer-events: none;
}
/* ---------------------------------------------------------------------
11.5. GARANTIA
--------------------------------------------------------------------- */
.guarantee {
position: relative;
padding-block: clamp(3rem, 6vw, 4.75rem);
background:
radial-gradient(60% 130% at 10% 10%, rgba(214, 31, 58, 0.07), transparent 60%),
radial-gradient(55% 110% at 92% 90%, rgba(214, 31, 58, 0.1), transparent 60%),
#FFFFFF;
box-shadow: inset 0 1px 0 rgba(214, 31, 58, 0.08);
}
.guarantee__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(4rem, 9vw, 8rem);
}
.guarantee__badge {
flex-shrink: 0;
width: clamp(190px, 22vw, 300px);
}
.guarantee__seal {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 10px 22px rgba(214, 31, 58, 0.18));
}
.guarantee__text {
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 44ch;
}
.guarantee__title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.3rem);
line-height: 1.15;
/* Degradê entre o vermelho oficial e um tom mais escuro da mesma
identidade — texto em destaque sobre o novo fundo branco. */
background: linear-gradient(90deg, #D61F3A, #7A0E1F);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.guarantee__subtitle {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.4;
color: #2A2A2A;
}
.guarantee__body {
font-family: var(--font-body);
font-size: clamp(0.9rem, 1.05vw, 1rem);
line-height: 1.7;
color: #4A4A4A;
}
/* ---------------------------------------------------------------------
12. SOBRE MIM
--------------------------------------------------------------------- */
/* Composição 100% em camadas de imagem (pasta assets/BANNER BIO/), todas
exportadas no mesmo canvas 1920x1080 — empilhadas com object-fit:cover
idêntico, o recorte cada uma fica sempre igual às outras e a
composição não desalinha em nenhuma largura de tela. Só o texto
(título/subtítulo/parágrafo) é HTML real, por cima. */
.about-bio {
position: relative;
aspect-ratio: 1920 / 1080;
min-height: 480px;
background: var(--bg-deep);
overflow: hidden;
}
.about-bio__visual {
position: absolute;
inset: 0;
z-index: 0;
}
.about-bio__layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Reduz a presença geral do fundo decorativo (texto "EVOLUÇÃO" fantasma,
feixe de luz, ícones) — não dá pra isolar só o ícone do Instagram dentro
dessa imagem única, mas dá pra baixar a opacidade da camada toda pra ela
competir menos com o conteúdo principal. */
.about-bio__bg {
opacity: 0.6;
}
/* Escala ajustada pra bater com a referência — origin embaixo mantém os
pés/base ancorados. Sobe um pouco (translateY negativo) e centraliza
melhor dentro da composição (translateX positivo) a pedido do cliente. */
.about-bio__photo {
transform: scale(0.87) translateY(-1.5%) translateX(1.5%);
transform-origin: center bottom;
}
/* Ícones dos programas (Ps/Ae/Ai) — só posição, tamanho original mantido. */
.about-bio__icons {
z-index: 2;
transform: translateY(6%) translateX(-1%);
}
/* Selos/card recortados no próprio conteúdo (não são mais canvas 1920x1080
inteiro) — cada um precisa da própria posição e largura, em vez do
inset:0 genérico do .about-bio__layer. Valores em % do canvas 1920x1080.
Só posição (top/left/right) muda entre revisões — width sempre fica
igual ao tamanho original de cada selo. */
/* Sem caixa própria — "desaparece" no layout pra não interferir na posição/
animação/hover já existentes em .about-bio__instagram (o link some
visualmente, só a imagem dentro dele continua sendo o elemento real). */
.about-bio__instagram-link {
display: contents;
}
.about-bio__instagram {
position: absolute;
inset: auto;
width: 30%;
height: auto;
object-fit: contain;
right: 8%;
top: 61%;
z-index: 3;
cursor: pointer;
}
.about-bio__badge {
position: absolute;
inset: auto;
height: auto;
object-fit: contain;
z-index: 4;
}
.about-bio__badge--motion {
width: 19%;
right: 11%;
top: 56.5%;
}
.about-bio__badge--flyer {
width: 21%;
left: 47%;
top: 88%;
}
.about-bio__badge--alunos {
width: 9%;
left: 50%;
top: 74%;
}
/* ---------------------------------------------------------------------
8.6 SOBRE MIM — ANIMAÇÕES DE ENTRADA (premium, discretas)
Disparadas por [data-reveal="bio"] no .about-bio__visual — reaproveita
o mesmo IntersectionObserver genérico de js/script.js (só um valor novo
de data-reveal), sem exigir JS extra. Só opacity/transform; nenhuma
posição, tamanho ou espaçamento muda — os keyframes partem de
var(--photo-rest)/var(--badge-rest-y) pra herdar exatamente o transform
de repouso já calibrado em cada breakpoint (desktop e mobile).
Padrão usado em todo o bloco: a animação de entrada usa
animation-fill-mode "backwards" (nunca "forwards") e o estado final é
sempre replicado também como transform/opacity "normais" (fora da
animation) em [data-reveal].is-visible — assim, assim que a animação
termina, ela deixa de "segurar" o transform e o :hover volta a
funcionar via transition normalmente (animation sempre vence transition
na mesma propriedade enquanto está ativa). */
.about-bio__visual[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.about-bio__photo {
--photo-rest: scale(0.87) translateY(-1.5%) translateX(1.5%);
transform: var(--photo-rest);
transform-origin: center bottom;
opacity: 0;
will-change: transform, opacity;
}
.about-bio__visual[data-reveal].is-visible .about-bio__photo {
opacity: 1;
animation:
bio-photo-enter 900ms cubic-bezier(.22, 1, .36, 1) backwards,
bio-photo-breathe 6s ease-in-out 900ms infinite;
}
@keyframes bio-photo-enter {
from {
opacity: 0;
transform: translateY(20px) scale(0.96) var(--photo-rest);
}
to {
opacity: 1;
transform: var(--photo-rest);
}
}
/* Respiração contínua pós-entrada — deslocamento e escala mínimos de
propósito, pra não competir com a entrada nem parecer "vivo" demais. */
@keyframes bio-photo-breathe {
0%,
100% {
transform: var(--photo-rest);
}
50% {
transform: translateY(-4.5px) scale(1.005) var(--photo-rest);
}
}
.about-bio__instagram {
opacity: 0;
transform: translateX(40px);
transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
will-change: transform, opacity;
}
.about-bio__visual[data-reveal].is-visible .about-bio__instagram {
opacity: 1;
transform: translateX(0);
animation: bio-instagram-enter 700ms cubic-bezier(.22, 1, .36, 1) 150ms backwards;
}
/* Sombra suave com a cor de destaque da marca (--accent-1: #D61F3A).
Especificidade igual à regra "assentada" acima + :hover de propósito —
senão o estado final da entrada (mesma cadeia de seletores) sempre
venceria o hover, mesmo com a animation já terminada. */
.about-bio__visual[data-reveal].is-visible .about-bio__instagram:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 18px 40px -12px rgba(214, 31, 58, 0.4);
}
@keyframes bio-instagram-enter {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.about-bio__badge {
opacity: 0;
transform: translateY(12px);
transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
will-change: transform, opacity;
}
/* Mesmo motivo do hover do card acima: precisa da mesma especificidade da
cadeia "assentada" (.is-visible .about-bio__badge--*) + :hover. */
.about-bio__visual[data-reveal].is-visible .about-bio__badge:hover {
transform: translateY(-3px) scale(1.02);
}
/* Sequência: Motion (300ms) -> +8 Mil Alunos (420ms) -> Flyer (540ms) —
120ms entre cada uma, logo depois do card do Instagram (150ms). */
.about-bio__visual[data-reveal].is-visible .about-bio__badge--motion {
opacity: 1;
transform: translateY(0);
animation: bio-badge-enter 600ms cubic-bezier(.22, 1, .36, 1) 300ms backwards;
}
.about-bio__visual[data-reveal].is-visible .about-bio__badge--alunos {
opacity: 1;
transform: translateY(0);
animation: bio-badge-enter 600ms cubic-bezier(.22, 1, .36, 1) 420ms backwards;
}
.about-bio__visual[data-reveal].is-visible .about-bio__badge--flyer {
opacity: 1;
transform: translateY(0);
animation: bio-badge-enter 600ms cubic-bezier(.22, 1, .36, 1) 540ms backwards;
}
@keyframes bio-badge-enter {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Funde as bordas da composição com o fundo da própria seção (mesma cor
--bg-deep), em vez de terminar num corte reto — mesma técnica do
.hero__fade, só que nos dois lados (topo e base). */
.about-bio__visual::before,
.about-bio__visual::after {
content: '';
position: absolute;
left: 0;
right: 0;
z-index: 1;
pointer-events: none;
}
.about-bio__visual::before {
top: 0;
height: 18%;
background: linear-gradient(180deg, var(--bg-deep) 0%, transparent 100%);
}
.about-bio__visual::after {
bottom: 0;
height: 22%;
background: linear-gradient(0deg, var(--bg-deep) 0%, transparent 100%);
}
/* Linha de acabamento na base do banner — mesmo gradiente rosa→laranja do
título (.text-accent / --accent-gradient), não uma cor sólida nova. */
.about-bio__accent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 5px;
background: var(--accent-gradient);
}
.about-bio__inner {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
/* É um container transparente que se estende pela largura toda da seção
(só o texto à esquerda é visível); sem isso, ele intercepta o mouse
antes de chegar no card do Instagram e nas tags (abaixo, z-index 0),
impedindo qualquer :hover neles. Não tem link/botão aqui dentro. */
pointer-events: none;
}
.about-bio__content {
max-width: min(50vw, 680px);
color: #fff;
}
.about-bio__title {
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.6vw, 3.4rem);
line-height: 1.14;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--color-heading);
margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}
.about-bio__title .text-accent {
color: var(--accent-1);
}
.about-bio__subtitle {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
line-height: 1.5;
color: var(--color-secondary);
/* Sem max-width em ch — as quebras de linha são fixas via
(.about-bio__br)
pra bater exatamente com o layout de referência; a largura da coluna é
quem sobra é a de .about-bio__content. */
max-width: 100%;
margin-bottom: clamp(1.5rem, 2.8vw, 2.1rem);
}
.about-bio__body {
font-family: var(--font-body);
text-transform: uppercase;
font-size: clamp(0.8rem, 0.95vw, 0.95rem);
line-height: 1.9;
letter-spacing: 0.01em;
color: var(--color-heading);
max-width: 100%;
}
/* ---------------------------------------------------------------------
13. FAQ
--------------------------------------------------------------------- */
.faq {
position: relative;
padding-block: var(--section-padding);
background:
radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
var(--bg-deep);
background-size: 22px 22px, auto;
}
.faq__head {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.faq__title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.5rem);
letter-spacing: 0.01em;
text-transform: uppercase;
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.accordion {
max-width: 980px;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem 1.25rem;
}
.accordion__item {
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.accordion__item[data-open="true"] {
border-color: rgba(214, 31, 58, 0.35);
}
.accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: left;
padding: 1.1rem 1.35rem;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-heading);
font-weight: 700;
}
.accordion__icon {
flex-shrink: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-support);
transition: transform var(--transition-fast), color var(--transition-fast);
}
.accordion__icon svg {
width: 100%;
height: 100%;
}
.accordion__item[data-open="true"] .accordion__icon {
transform: rotate(180deg);
color: var(--accent-2);
}
.accordion__panel {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-med);
}
.accordion__panel p {
padding: 0 1.35rem 1.25rem;
font-size: 0.82rem;
line-height: 1.6;
color: var(--color-secondary);
}
/* ---------------------------------------------------------------------
14. CTA FINAL
--------------------------------------------------------------------- */
.cta-final {
position: relative;
padding-block: var(--section-padding);
background: var(--bg-deep);
text-align: center;
overflow: hidden;
}
.cta-final__panel {
position: relative;
z-index: 1;
max-width: 560px;
margin-inline: auto;
padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 2.75rem);
background: var(--bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.cta-final__title {
font-family: var(--font-display);
color: var(--color-heading);
font-size: clamp(1.6rem, 3.4vw, 2.25rem);
line-height: 1.22;
text-transform: uppercase;
margin-bottom: 1rem;
}
.cta-final__highlight {
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cta-final__lead {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-support);
margin-bottom: 1.5rem;
}
.cta-final__checklist {
display: flex;
flex-direction: column;
gap: 0.85rem;
text-align: left;
max-width: 360px;
margin: 0 auto clamp(2rem, 4vw, 2.5rem);
}
.cta-final__checklist li {
display: flex;
/* flex-start (não center) — com texto de 2-3 linhas no mobile (telas mais
estreitas), align-items:center jogava o ícone pro meio do bloco inteiro
em vez de alinhado com a primeira linha; flex-start com a altura do
ícone (22px) já bem próxima da line-height do texto resolve sem
precisar de nenhum ajuste fino extra. */
align-items: flex-start;
gap: 0.75rem;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 700;
color: var(--color-heading);
}
.cta-final__check {
flex-shrink: 0;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: linear-gradient(135deg, #FFB347, var(--accent-2));
color: #1a1a1a;
font-size: 0.7rem;
font-weight: 800;
}
.cta-final__cta {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
padding: 1.15rem 1.5rem;
border-radius: 100px;
font-family: var(--font-button);
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #fff;
background: var(--bg-elevated);
border: 1px solid var(--color-border);
isolation: isolate;
overflow: hidden;
box-shadow: none;
transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Camada de cor animada, escondida em repouso — só aparece (fade + slide) no hover */
.cta-final__cta::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, #D61F3A, #D61F3A, #D61F3A);
background-size: 200% 100%;
background-position: 0% 0%;
opacity: 0;
transition: opacity 0.4s var(--ease), background-position 0.6s var(--ease);
}
.cta-final__cta:hover::before {
opacity: 1;
background-position: 100% 0%;
}
.cta-final__cta:hover {
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 18px 42px -8px rgba(214, 31, 58, 0.65);
}
.cta-final__cta-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.cta-final__cta-icon svg {
width: 100%;
height: 100%;
}
.cta-final__whatsapp {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
padding: 1.1rem 2.25rem;
border-radius: 100px;
background: #25D366;
color: #fff;
font-family: var(--font-button);
font-size: 1.05rem;
font-weight: 700;
box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.5);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cta-final__whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px -6px rgba(37, 211, 102, 0.6);
}
.cta-final__whatsapp-icon {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.cta-final__whatsapp-icon svg {
width: 100%;
height: 100%;
}
/* ---------------------------------------------------------------------
15. RODAPÉ
--------------------------------------------------------------------- */
.footer {
position: relative;
padding-block: 1.15rem;
border-top: 1px solid var(--color-border);
background:
radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
var(--bg-deep);
background-size: 22px 22px, auto;
}
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem;
}
.footer__brand {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.footer__brand img {
display: block;
opacity: 0.9;
}
.footer__brand p {
font-size: 0.82rem;
color: var(--color-support);
}
/* Assinatura discreta — pedido do cliente: pequena, minimalista, sem
competir visualmente com o resto do rodapé. Opacity no link inteiro (em
vez de escurecer as cores base) deixa o conjunto uniformemente apagado
em repouso e "acende" de volta no hover, reforçando o efeito de
assinatura sutil sem depender de uma cor nova. */
.footer__credit {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.footer__credit:hover {
opacity: 1;
}
.footer__credit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
flex-shrink: 0;
border: 1px solid var(--color-support);
border-radius: 4px;
color: var(--color-support);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer__credit-icon svg {
width: 9px;
height: 9px;
}
.footer__credit-text {
color: var(--color-support);
transition: color var(--transition-fast);
}
.footer__credit-text strong {
color: var(--color-heading);
font-weight: 600;
transition: color var(--transition-fast);
}
.footer__credit:hover .footer__credit-icon {
color: var(--accent-1);
border-color: var(--accent-1);
}
.footer__credit:hover .footer__credit-text,
.footer__credit:hover .footer__credit-text strong {
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------------------------------------------------------------------
15.5. DIVISORES DISCRETOS ENTRE SEÇÕES
--------------------------------------------------------------------- */
.faq::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(60%, 640px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
pointer-events: none;
}
/* ---------------------------------------------------------------------
16. ANIMAÇÕES DE SCROLL (Fade Up / Left / Right)
--------------------------------------------------------------------- */
[data-reveal] {
opacity: 0;
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: transform, opacity;
}
[data-reveal="fade-up"] {
transform: translateY(36px);
}
[data-reveal="fade-left"] {
transform: translateX(48px);
}
[data-reveal="fade-right"] {
transform: translateX(-48px);
}
[data-reveal].is-visible {
opacity: 1;
transform: translate(0, 0);
}
/* ---------------------------------------------------------------------
16.5. MODAL DE PRODUTO (reutilizável — conteúdo populado via JS)
--------------------------------------------------------------------- */
.no-scroll {
overflow: hidden;
}
.product-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.product-modal.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--ease);
}
.product-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 5, 5, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.product-modal__dialog {
position: relative;
z-index: 1;
width: min(960px, 100%);
max-height: min(88vh, 900px);
background: rgba(20, 20, 20, 0.86);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
overflow: hidden;
transform: scale(0.95) translateY(12px);
opacity: 0;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.product-modal.is-open .product-modal__dialog {
transform: scale(1) translateY(0);
opacity: 1;
}
.product-modal__close {
position: absolute;
top: clamp(1rem, 2vw, 1.5rem);
right: clamp(1rem, 2vw, 1.5rem);
z-index: 2;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--color-heading);
transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.product-modal__close svg {
width: 18px;
height: 18px;
}
.product-modal__close:hover {
background: var(--accent-2);
border-color: var(--accent-2);
color: #1a1a1a;
transform: rotate(90deg);
}
.product-modal__scroll {
max-height: min(88vh, 900px);
overflow-y: auto;
}
/* Capa — banner grande e full-width no topo do modal */
.product-modal__cover {
/* Mais próximo da proporção real da arte (2000x590 ≈ 3.39:1) — reduz a
altura do banner e evita cortar rosto/logo/texto por excesso de crop. */
aspect-ratio: 3.2 / 1;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
}
.product-modal__cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.product-modal__body {
padding: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
}
.product-modal__category {
display: inline-block;
font-family: var(--font-button);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-2);
margin-bottom: 0.75rem;
}
.product-modal__title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
line-height: 1.15;
color: var(--color-heading);
text-transform: uppercase;
margin-bottom: 1rem;
}
.product-modal__description {
font-family: var(--font-body);
font-size: 0.98rem;
line-height: 1.65;
color: var(--color-secondary);
max-width: 62ch;
margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
/* Seções genéricas (módulos / o que você vai receber) */
.product-modal__section {
margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}
.product-modal__section-title {
font-family: var(--font-display);
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--color-heading);
margin-bottom: 1.5rem;
}
/* O que você vai aprender — carrossel horizontal de vídeos (Motion Design),
em loop infinito com arraste e setas — mesmo padrão de card 9:16 e mesmas
setas discretas usadas no restante do modal/site. */
.modal-videos__carousel {
display: flex;
align-items: center;
gap: 0.6rem;
}
.modal-videos__arrow {
flex-shrink: 0;
}
.modal-videos__viewport {
flex: 1;
min-width: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.modal-videos__track {
display: flex;
width: max-content;
cursor: grab;
touch-action: pan-y;
padding-block: 0.4rem;
}
.modal-videos__track:active {
cursor: grabbing;
}
.modal-videos__group {
display: flex;
flex-shrink: 0;
gap: clamp(0.9rem, 1.6vw, 1.4rem);
padding-inline: calc(clamp(0.9rem, 1.6vw, 1.4rem) / 2);
}
.modal-videos__card {
flex: 0 0 auto;
width: clamp(170px, 20vw, 230px);
aspect-ratio: 9 / 16;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
}
.modal-videos__card:hover {
transform: scale(1.03);
box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.65), 0 0 30px -10px rgba(214, 31, 58, 0.3);
filter: brightness(1.08);
}
.modal-videos__media {
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
pointer-events: none;
}
@media (max-width: 900px) {
.modal-videos__card {
width: clamp(210px, 32vw, 280px);
}
}
@media (max-width: 600px) {
.modal-videos__card {
width: clamp(230px, 78vw, 320px);
}
}
/* Grade de artes — usada no lugar do carrossel de módulos quando o produto
é um pack de artes prontas (sem título/descrição por item, ver
sectionLayout em PRODUCTS). Mesmo raio/sombra dos outros cards do modal. */
.modal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.modal-grid[hidden] {
display: none;
}
.modal-grid__item {
aspect-ratio: 9 / 16;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.modal-grid__item:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65);
border-color: rgba(214, 31, 58, 0.35);
}
.modal-grid__img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Módulos — carrossel horizontal de cards (thumb + título), expande a
descrição dentro do próprio card ao clicar, sem accordion/lista longa. */
.modules-carousel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.modules-carousel__nav {
display: flex;
gap: 0.6rem;
flex-shrink: 0;
}
.modules-carousel__nav[hidden],
.modules-carousel[hidden] {
display: none;
}
.modules-carousel__arrow {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
color: var(--color-heading);
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.modules-carousel__arrow svg {
width: 16px;
height: 16px;
}
.modules-carousel__arrow:hover {
background: var(--accent-2);
border-color: var(--accent-2);
color: #1a1a1a;
transform: translateY(-2px);
}
.modules-carousel__arrow:disabled {
opacity: 0.3;
pointer-events: none;
transform: none;
}
.modules-carousel {
overflow: hidden;
margin-inline: calc(clamp(2rem, 4vw, 3.5rem) * -1);
padding-inline: clamp(2rem, 4vw, 3.5rem);
}
.modules-carousel__track {
--modules-gap: clamp(1rem, 2vw, 1.5rem);
display: flex;
gap: var(--modules-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
cursor: grab;
padding-block: 0.4rem;
scrollbar-width: none;
}
.modules-carousel__track::-webkit-scrollbar {
display: none;
}
.modules-carousel__track:active {
cursor: grabbing;
}
.modules-card {
position: relative;
flex: 0 0 auto;
scroll-snap-align: start;
width: calc((100% - 2 * var(--modules-gap)) / 3);
/* desktop: 3 por vez */
aspect-ratio: 3 / 4;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
background: rgba(255, 255, 255, 0.03);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.modules-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65);
border-color: rgba(214, 31, 58, 0.35);
}
.modules-card__toggle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
text-align: left;
cursor: pointer;
}
.modules-card__thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease);
}
.modules-card__thumb--empty {
background: var(--accent-gradient);
opacity: 0.25;
}
.modules-card:hover .modules-card__thumb {
transform: scale(1.05);
}
.modules-card__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.1rem 1.1rem;
background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.85) 70%, rgba(5, 5, 5, 0.95) 100%);
transition: opacity 0.3s var(--ease);
}
.modules-card__badge {
display: inline-block;
font-family: var(--font-button);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-2);
margin-bottom: 0.35rem;
}
.modules-card__title {
display: block;
font-family: var(--font-display);
font-size: 0.9rem;
line-height: 1.25;
color: #fff;
text-transform: uppercase;
}
/* Estado expandido — some com a thumbnail e mostra a descrição, dentro do
próprio card (sem accordion, sem popover flutuante). */
.modules-card__expand {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem;
background: rgba(8, 8, 10, 0.95);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
cursor: pointer;
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.modules-card__expand-title {
font-family: var(--font-display);
font-size: 1rem;
line-height: 1.25;
color: var(--color-heading);
text-transform: uppercase;
margin: 0.4rem 0 0.75rem;
}
.modules-card__description {
font-family: var(--font-body);
font-size: 0.85rem;
line-height: 1.55;
color: var(--color-secondary);
}
.modules-card.is-expanded .modules-card__overlay {
opacity: 0;
}
.modules-card.is-expanded .modules-card__expand {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* CTA final — único botão do modal, vem depois de todo o conteúdo */
.product-modal__footer {
display: flex;
justify-content: center;
padding-top: 0.5rem;
margin-bottom: 0;
}
@media (max-width: 900px) {
.modules-card {
width: calc((100% - 1 * var(--modules-gap)) / 2);
}
/* tablet: 2 por vez */
}
@media (max-width: 760px) {
.product-modal__cover {
aspect-ratio: 16 / 9;
}
/* Produtos sem uma capa recortada especificamente pro mobile (ver
coverMobile em PRODUCTS, js/script.js) caem pro banner do desktop, bem
mais largo (~3.2–3.39:1) que a caixa 16:9 acima — object-fit:cover
cortava as laterais (título/texto) pra preencher a caixa. A troca pra
contain evita esse corte, mas na caixa 16:9 sobrava muita barra vazia
em cima/embaixo (a arte só preenchia ~52% da altura da caixa — quase
metade em barra). Caixa própria, mais próxima da proporção real do
banner (~3:1, meio-termo entre os 3.2:1 e 3.39:1 dos banners atuais),
reduz a barra a uma faixa fina e discreta nos dois casos, sem cortar
nada — mesmo fundo já usado em .product-modal__cover. Assim que o
cliente enviar a capa mobile de um produto, basta somar `coverMobile`
no objeto do produto — a classe some sozinha e ele volta a usar cover
(recorte cheio, sem barras) na caixa 16:9 acima, sem precisar mexer
neste CSS. */
.product-modal__cover--fit {
aspect-ratio: 3 / 1;
}
.product-modal__cover--fit .product-modal__cover-img {
object-fit: contain;
}
.product-modal__scroll {
max-height: 92vh;
}
.product-modal {
padding: 0.5rem;
}
.product-modal__dialog {
max-height: 92vh;
}
/* Menos "sobra" nas laterais do corpo do modal — no mobile o espaço é
pouco e cada centímetro conta para as artes ficarem grandes. */
.product-modal__body {
padding: 1.5rem 1.1rem 1.75rem;
}
/* "Módulos" / "O que você vai aprender" — mesma lógica compacta aplicada
aos cards de curso (menor proporcionalmente nas duas dimensões, sem
cortar texto, só reduzindo o espaço vertical desperdiçado). Título da
seção, cabeçalho do carrossel e o espaço entre seções, todos mais
enxutos; card de módulo (badge, título, descrição) reduzido junto pra
acompanhar. Classe única reaproveitada por todos os produtos — um só
ajuste cobre "Módulos" em todos os cards, sem exceção. */
.product-modal__section {
margin-bottom: 1.75rem;
}
.product-modal__section-title {
font-size: 0.85rem;
margin-bottom: 0.85rem;
}
.modules-carousel__head {
margin-bottom: 0.75rem;
}
.modules-card__overlay {
padding: 0.7rem 0.8rem 0.8rem;
}
.modules-card__badge {
font-size: 0.6rem;
margin-bottom: 0.25rem;
}
.modules-card__title {
font-size: 0.78rem;
}
.modules-card__expand {
padding: 1rem;
}
.modules-card__expand-title {
font-size: 0.85rem;
margin: 0.3rem 0 0.5rem;
}
.modules-card__description {
font-size: 0.76rem;
line-height: 1.45;
}
/* Pack de artes: carrossel horizontal (mesmo padrão do carrossel de
Módulos) em vez do grid multi-coluna do desktop — evita uma lista
vertical longa e mostra uma fatia do próximo item pra indicar que dá
pra continuar arrastando/rolando. */
.modal-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0.85rem;
padding-block: 0.4rem;
scrollbar-width: none;
}
.modal-grid::-webkit-scrollbar {
display: none;
}
.modal-grid__item {
flex: 0 0 auto;
width: 78%;
scroll-snap-align: start;
}
/* Setas do carrossel "O que você vai aprender" saem do fluxo (deixam de
dividir a largura com o viewport) e passam a flutuar sobre as bordas
da própria arte/vídeo — assim o card usa quase toda a largura
disponível em vez de perder espaço para os dois botões ao lado. */
.modal-videos__carousel {
position: relative;
}
.modal-videos__arrow {
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
background: rgba(15, 15, 15, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-videos__arrow:first-child {
left: 0.35rem;
}
.modal-videos__arrow:last-child {
right: 0.35rem;
}
}
@media (max-width: 600px) {
/* mobile: ~1,25 card por vez — mostra uma fatia do próximo card pra
indicar que dá pra continuar arrastando/rolando, em vez de esconder
tudo atrás de um card cheio de 100%. */
.modules-card {
width: 78%;
}
.modal-videos__card {
width: clamp(215px, calc(100vw - 8.5rem), 300px);
}
}
/* ---------------------------------------------------------------------
17. RESPONSIVIDADE
--------------------------------------------------------------------- */
@media (max-width: 980px) {
.hero {
height: auto;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: clamp(3rem, 9vw, 4.5rem);
padding-bottom: 0;
}
.hero__content {
position: static;
order: 1;
max-width: 100%;
height: auto;
padding-inline: clamp(1.25rem, 6vw, 2.5rem);
padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
}
.hero__figure {
position: static;
order: 2;
width: 100%;
height: 46vh;
max-height: 420px;
margin-top: auto;
}
.hero__photo {
object-fit: contain;
object-position: bottom center;
filter: none;
transform: none;
}
.hero__fade {
/* Cobre mais da foto (era 20vh) — mesma intensidade proporcional do
desktop (34vh sobre uma foto bem maior). */
height: 30vh;
}
/* Empilha texto sobre a composição de imagens — abaixo de ~980px não há
largura pra manter as 6 camadas (foto/instagram/selos) legíveis lado a
lado com o texto na mesma proporção 16:9 do desktop. */
.about-bio {
aspect-ratio: auto;
min-height: 0;
max-height: none;
height: auto;
display: flex;
flex-direction: column;
}
/* Recorte 1:1 (igual já era) — mostra a altura inteira da arte original,
e uma janela de ~42%-99% da largura via object-position. Posições dos
selos/card recalculadas a partir dos valores finais do desktop,
convertendo a % horizontal pra essa janela de recorte (vertical não
precisa conversão, já que a altura não é cortada). */
.about-bio__visual {
position: relative;
order: 2;
aspect-ratio: 1 / 1;
}
.about-bio__layer {
object-position: 97% center;
}
.about-bio__photo {
--photo-rest: scale(0.87) translateY(-3%) translateX(2%);
}
.about-bio__icons {
transform: translateX(10%) translateY(10%) scale(1.45);
transform-origin: center;
}
.about-bio__instagram {
width: 54%;
right: 4%;
top: 56.6%;
}
.about-bio__badge--motion {
width: 30%;
right: 11%;
top: 52%;
}
.about-bio__badge--alunos {
width: 17%;
left: 11%;
top: 68%;
}
.about-bio__badge--flyer {
width: 34%;
left: 8%;
top: 82%;
}
.about-bio__visual::before {
height: 32%;
}
.about-bio__visual::after {
height: 16%;
}
.about-bio__inner {
order: 1;
height: auto;
padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(1.75rem, 5vw, 2.25rem);
}
.about-bio__content {
max-width: 100%;
}
}
@media (max-width: 760px) {
/* Pedido do cliente: no mobile o carrossel horizontal (cards lado a lado,
arraste, setas) some por completo — vira uma lista vertical, um card
embaixo do outro, ocupando quase toda a largura da tela. O desktop
(>760px) continua exatamente com o carrossel original, sem nenhuma
mudança. O JS (courses-carousel.js) já detecta este mesmo breakpoint e
não inicializa o autoplay/drag do GSAP aqui — ver initCoursesCarousel(). */
.courses__grid {
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.courses__viewport {
padding: 0;
}
.courses__track {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 1.25rem;
overflow: visible;
cursor: auto;
}
/* Card ocupa uma largura confortável (não mais a tela quase inteira, que
empurrava cada card pra ~525px de altura em telas maiores — espaço
demais pra rolar até ver os 5). max-width menor reduz largura E altura
juntas, na mesma proporção (aspect-ratio:4/5 herdado, sem distorcer/
cortar a arte), então o card só fica menor, não espremido. Ainda dá
boa área de toque pro botão "Saiba mais" e não precisa deslizar
horizontalmente. */
.courses__track .course-card-v2 {
width: 100%;
max-width: 300px;
margin-inline: auto;
}
/* Setas de navegação não fazem mais sentido numa lista vertical. */
.courses__nav {
display: none;
}
.course-card-v2 {
border-radius: 20px;
}
.course-card-v2__btn {
padding: 0.7rem 1.15rem;
font-size: 0.8rem;
}
.footer__inner {
justify-content: center;
text-align: center;
}
.accordion {
grid-template-columns: 1fr;
}
.hero__title {
font-size: clamp(2rem, 8vw, 2.6rem);
}
.hero__figure {
height: 40vh;
max-height: 340px;
}
.hero__fade {
height: 24vh;
}
.about-bio__title {
font-size: clamp(1.9rem, 8.5vw, 2.4rem);
}
.about-bio__subtitle {
max-width: 100%;
}
.about-bio__body {
max-width: 100%;
}
/* As quebras de linha do subtítulo/corpo são fixas pra bater exatamente com
o layout de referência no desktop — em telas estreitas isso causaria
linhas curtas e desalinhadas, então soltamos o texto pra reflow natural. */
.about-bio__br {
display: none;
}
/* Mesmo problema do .hero__subtitle: os
foram calibrados pra largura
do desktop. Em telas de celular o texto já quebra sozinho ANTES de
chegar no
, deixando uma palavra órfã sozinha numa linha ("tenha",
"habilidades") — visual de texto quebrado. Solto pra reflow natural,
igual ao about-bio__br acima. */
.hero__subtitle-br {
display: none;
}
.guarantee__inner {
flex-direction: column;
justify-content: flex-start;
text-align: center;
}
.guarantee__badge {
width: clamp(120px, 34vw, 170px);
}
.guarantee__text {
align-items: center;
max-width: 100%;
}
.guarantee__body {
margin-inline: auto;
max-width: 46ch;
}
}
@media (max-width: 480px) {
/* :not(.platform__cta) — sem isso essa regra (mesma especificidade, porém
mais abaixo no arquivo) vencia o width:fit-content já definido para
.platform__cta lá em cima (ver @media 576px), esticando o botão pra
100% da largura; com white-space:nowrap herdado de .btn, um texto mais
longo estourava pra fora da pílula — era exatamente o bug relatado. */
.btn:not(.platform__cta) {
width: 100%;
}
.hero__actions {
flex-direction: column;
}
.hero__actions .btn {
width: 100%;
}
}