/* =========================================================
Puro Talento Academia — style.css
Linguagem visual: pill geometry, tipografia leve,
alternância claro/escuro, superfícies planas.
Tipografia: Barlow Condensed (títulos) + Satoshi (texto).
========================================================= */
/* ---------- Fontes locais ---------- */
/* Satoshi — texto corrido */
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-light.otf') format('opentype');
font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-lightitalic.otf') format('opentype');
font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-regular.otf') format('opentype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-italic.otf') format('opentype');
font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-medium.otf') format('opentype');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Satoshi';
src:url('assets/fonts/satoshi/satoshi-bold.otf') format('opentype');
font-weight:700; font-style:normal; font-display:swap;
}
/* Barlow Condensed — títulos */
@font-face{
font-family:'Barlow Condensed';
src:url('assets/fonts/barlow-condensed/barlowcondensed-regular.ttf') format('truetype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Barlow Condensed';
src:url('assets/fonts/barlow-condensed/barlowcondensed-medium.ttf') format('truetype');
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Barlow Condensed';
src:url('assets/fonts/barlow-condensed/barlowcondensed-semibold.ttf') format('truetype');
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Barlow Condensed';
src:url('assets/fonts/barlow-condensed/barlowcondensed-bold.ttf') format('truetype');
font-weight:700; font-style:normal; font-display:swap;
}
:root{
/* --- Cores da marca --- */
--wp-blue: #d4a64a; /* AMARELO-OURO — cor de ação */
--wp-blue-ink: #f4f7ff; /* branco-gelo — títulos sobre o marinho */
--wp-blue-deep: #06112e; /* azul-noite — seções mais escuras */
--wp-blue-soft: rgba(212,166,74,.15); /* dourado translúcido — chips */
--wp-blue-mist: #0f2256; /* marinho suave — painéis */
--wp-yellow: #d4a64a; /* AMARELO-OURO OFICIAL */
--wp-lavender: #f0cf7a; /* amarelo claro — hover */
--wp-periwinkle: rgba(212,166,74,.55); /* dourado discreto — bordas */
/* --- Neutros --- */
--paper: #0b1b47; /* azul-marinho da marca — fundo base */
--bone: #13296a;
--ash: rgba(255,255,255,.14);
--fog: #a9b6d6;
--ink: #eef3ff; /* texto principal sobre o marinho */
/* --- Tipografia --- */
--font: 'Satoshi', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-titulo: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
--tracking: -0.02em; /* texto corrido */
--tracking-tit: 0.01em; /* títulos em caixa alta pedem tracking positivo */
/* --- Espaçamento --- */
--s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px;
--s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;
/* --- Formas --- */
--r-pill: 100px;
--r-card: 24px;
--r-lg: 32px;
--max: 1200px;
--glow: 0 0 4px 0 rgba(45,91,209,.30);
--ease: cubic-bezier(.2,.7,.3,1);
}
/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{
margin:0;
font-family:var(--font);
font-weight:400;
font-size:16px;
line-height:1.4;
letter-spacing:var(--tracking);
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
font-family:var(--font-titulo);
font-weight:500;
letter-spacing:var(--tracking-tit);
text-transform:uppercase;
margin:0;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--s-24); }
.wrap--narrow{ max-width:820px; }
.center{ text-align:center; }
/* ---------- Tipografia utilitária ---------- */
/* A condensada ocupa menos largura por caractere: os tamanhos
sobem e o tracking negativo cede lugar ao desenho da fonte. */
.display{
font-family:var(--font-titulo);
font-size:clamp(40px, 6.8vw, 86px);
line-height:1.05;
font-weight:500;
letter-spacing:var(--tracking-tit);
text-transform:uppercase;
color:var(--wp-blue-ink);
margin:0 auto var(--s-24);
max-width:15ch;
text-wrap:balance;
}
.h-lg{
font-family:var(--font-titulo);
font-size:clamp(32px, 4.4vw, 58px);
line-height:1.08;
font-weight:500;
letter-spacing:var(--tracking-tit);
text-transform:uppercase;
color:var(--wp-blue-ink);
text-wrap:balance;
}
.eyebrow{
font-family:var(--font-titulo);
font-weight:500;
font-size:15px;
line-height:1.35;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--fog);
margin-bottom:var(--s-24);
display:inline-flex; align-items:center; gap:10px;
}
/* ponto amarelo da logo como único acento do eyebrow */
.eyebrow::before{
content:""; flex:none;
width:6px; height:6px; border-radius:50%;
background:var(--wp-yellow);
}
.lede{
font-size:17px;
line-height:1.55;
color:var(--fog);
max-width:60ch;
margin:0 auto var(--s-32);
}
.prose{ color:var(--fog); font-size:16px; line-height:1.6; max-width:62ch; }
.prose p + p{ margin-top:var(--s-16); }
/* ---------- Botões ---------- */
.btn{
display:inline-flex; align-items:center; gap:var(--s-8);
padding:16px 32px;
border:1px solid transparent;
border-radius:var(--r-pill);
font-size:15px; font-weight:400; line-height:1;
letter-spacing:var(--tracking);
cursor:pointer;
transition:transform .35s var(--ease), background-color .35s var(--ease),
color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn--sm{ padding:12px 24px; font-size:14px; }
.btn--primary{ background:var(--wp-blue); color:var(--paper); }
.btn--primary:hover{ background:var(--wp-blue-ink); box-shadow:var(--glow); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--wp-blue-ink); border-color:var(--ash); }
.btn--ghost:hover{ border-color:var(--wp-blue-ink); transform:translateY(-1px); }
.btn--soft{ background:var(--wp-blue-soft); color:var(--wp-blue-ink); }
.btn--soft:hover{ background:var(--wp-lavender); transform:translateY(-1px); }
.section--dark .btn--primary{ background:var(--paper); color:var(--wp-blue-ink); }
.section--dark .btn--primary:hover{ background:var(--wp-blue-soft); box-shadow:none; }
.arrow{ font-size:.9em; transition:transform .35s var(--ease); }
.btn:hover .arrow, .path:hover .arrow{ transform:translate(2px,-2px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-12); justify-content:center; }
/* ---------- Header ---------- */
/* Barra cheia, ancorada no topo da tela. */
.header{
position:fixed; inset:0 0 auto; z-index:50;
transition:transform .4s var(--ease);
}
.header__inner{
max-width:none; margin:0;
display:flex; align-items:center; gap:var(--s-24);
padding:10px clamp(var(--s-24), 4vw, 64px);
background:var(--paper);
border:0;
border-bottom:1px solid var(--ash);
border-radius:0;
box-shadow:none;
}
.logo img{ height:64px; width:auto; display:block; }
.nav{ display:flex; gap:var(--s-24); margin-inline:auto; }
.nav a{
font-size:15px; color:var(--wp-blue-ink); opacity:.85;
padding-bottom:2px; border-bottom:1px solid transparent;
transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.nav a:hover{ opacity:1; border-color:var(--wp-yellow); }
.header__actions{ display:flex; align-items:center; gap:var(--s-8); }
.burger{
display:none; width:44px; height:44px;
border:1px solid var(--ash); border-radius:var(--r-pill);
background:transparent; cursor:pointer;
flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ width:16px; height:1px; background:var(--wp-blue-ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
.mobile-menu{
position:fixed; z-index:49; top:86px; left:0; right:0;
display:flex; flex-direction:column; gap:var(--s-4);
padding:var(--s-16);
background:var(--paper); border-bottom:1px solid var(--ash);
border-radius:0;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ padding:12px 16px; border-radius:var(--r-pill); color:var(--wp-blue-ink); font-size:16px; }
.mobile-menu a:hover{ background:var(--bone); }
.mobile-menu .btn{ justify-content:center; margin-top:var(--s-8); color:var(--paper); }
/* ---------- Hero ---------- */
/* O hero é a própria arte: a headline e o texto já vêm na imagem.
O container abraça o arquivo (sem corte) e só sobrepõe os CTAs. */
.hero{
position:relative;
background:var(--wp-blue); /* mesmo azul do topo da arte */
overflow:hidden;
}
.hero__media{ display:block; }
.hero__media img{
display:block;
width:100%; height:auto;
object-fit:cover; object-position:center;
}
/* Os CTAs caem logo abaixo do bloco de texto impresso na arte. */
.hero__inner{
position:absolute; inset:0;
pointer-events:none;
}
.hero__cta{
position:absolute;
left:15.5%; top:76%;
pointer-events:auto;
}
.hero__cta .btn--primary{ background:var(--wp-yellow); color:var(--ink); }
.hero__cta .btn--primary:hover{ background:var(--paper); color:var(--wp-blue-ink); }
.hero__cta .btn--ghost{ color:var(--paper); border-color:rgba(255,255,255,.55); }
.hero__cta .btn--ghost:hover{ border-color:var(--paper); background:rgba(255,255,255,.12); }
/* Conteúdo textual mantido para leitores de tela e busca. */
.visually-hidden{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
/* ---------- Faixa animada (marquee) entre o hero e a 1ª seção ----------
Uma tarja marinha reta, com os termos da metodologia rolando. */
.marquee{
position:relative;
z-index:4;
overflow:hidden;
isolation:isolate;
margin-top:0;
padding-bottom:0;
background:transparent;
}
/* Tarja marinha reta, na divisa entre o hero e a seção seguinte. */
.marquee__band--front{
position:relative; z-index:1;
margin-top:0;
padding-block:13px;
background:var(--paper);
border-bottom:1px solid var(--ash);
}
.marquee__track{
display:flex; width:max-content;
animation:marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
display:inline-flex; align-items:center; gap:var(--s-16);
padding:0 var(--s-24);
font-family:var(--font-titulo);
font-weight:500;
text-transform:uppercase;
letter-spacing:.12em;
font-size:17px;
line-height:1;
color:var(--wp-blue-ink);
white-space:nowrap;
}
.marquee__mark{ height:15px; width:auto; opacity:.9; }
/* Variante para transição entre duas seções de conteúdo (ex.: nas LPs,
entre a timeline clara e a seção azul). Herda tudo do .marquee — sobe
pra dentro da seção de cima com fundo transparente, então a faixa
branca fica exatamente na divisa de cores. A única diferença: puxa a
seção azul de baixo pra cima, para o azul aparecer sob a metade
inferior da tira (em vez do branco da página). */
.marquee--mid{ margin-bottom:-64px; }
@keyframes marquee-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
.marquee__track{ animation:none; transform:none; }
}
@media (max-width:720px){
.marquee__item{ font-size:14px; gap:var(--s-12); padding:0 14px; }
}
/* ---------- Seções ---------- */
.section{ padding:var(--s-128) 0; }
.section--soft{ background:var(--wp-blue-mist); }
/* Scroll reverso: a seção institucional (#a-academia) fica presa no topo
e TODAS as seções seguintes sobem por cima dela ao rolar.
Só #pilares ganha o tratamento visual de "cartão subindo"
(cantos arredondados + sombra); as demais cobrem no scroll normal. */
#a-academia{
position:sticky;
top:0;
z-index:0;
background:var(--paper);
}
/* toda seção depois de #a-academia passa por cima dela ao rolar */
#a-academia ~ *{
position:relative;
z-index:1;
}
/* #niveis não tinha fundo próprio — precisa ser opaco */
#niveis{ background:var(--paper); }
/* só a seção de oportunidades tem o visual de "cartão subindo" */
#pilares{
border-top-left-radius:var(--r-lg);
border-top-right-radius:var(--r-lg);
box-shadow:0 -32px 60px -24px rgba(16,18,22,.28);
}
@media (prefers-reduced-motion:reduce){
#a-academia{ position:static; }
#pilares{
box-shadow:none;
border-top-left-radius:0;
border-top-right-radius:0;
}
}
/* Seção em amarelo pleno — o cinza do texto some sobre o
amarelo, então o corpo vai para grafite e as bordas escurecem. */
.section--amarelo{ background:var(--wp-yellow); }
.section--amarelo .prose{ color:var(--ink); }
/* Cards em azul pleno sobre o amarelo: tudo dentro deles inverte. */
.section--amarelo .card{
background:#1c3d8f; /* azul da marca um passo mais escuro */
border-color:transparent;
}
.section--amarelo .card:hover{ border-color:var(--ink); }
.section--amarelo .card h3{ color:var(--paper); }
.section--amarelo .card p{ color:rgba(255,255,255,.82); }
.section--amarelo .card__media{ background:rgba(255,255,255,.14); }
.section--amarelo .btn--soft{ background:var(--paper); color:var(--wp-blue); }
.section--amarelo .btn--soft:hover{ background:var(--wp-yellow); color:var(--ink); }
.section--dark{ background:var(--wp-blue-deep); color:var(--paper); }
.section--dark .h-lg{ color:var(--paper); }
.section--dark .prose{ color:rgba(253,253,254,.72); }
.section--blue{ background:var(--wp-blue); color:var(--paper); }
.section--blue .h-lg{ color:var(--paper); }
.section--blue .prose{ color:rgba(253,253,254,.82); }
.section--cta{ text-align:center; }
.section--cta .prose{ margin:var(--s-24) auto var(--s-32); }
/* Bloco de texto centralizado com CTA (ex.: seção institucional) */
.section .center .prose{ margin:var(--s-20) auto 0; }
.section .center .btn-row{ margin-top:var(--s-24); }
.section__head{ max-width:760px; margin-bottom:var(--s-64); }
.section__head .prose{ margin-top:var(--s-20); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .prose{ margin-inline:auto; }
/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-24); }
.card{
background:var(--paper);
border:1px solid var(--ash);
border-radius:var(--r-card);
padding:var(--s-48);
display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-16);
transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{ transform:translateY(-3px); border-color:var(--wp-periwinkle); }
.card h3{ font-size:29px; line-height:1.2; color:var(--wp-blue-ink); }
.card p{ color:var(--fog); line-height:1.6; }
.card .btn{ margin-top:auto; }
/* ---------- Seção escura ---------- */
.dark-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-64); align-items:start; }
.pill-list{ display:flex; flex-wrap:wrap; gap:var(--s-12); }
.pill-list li{
padding:14px 24px;
border:1px solid rgba(253,253,254,.18);
border-radius:var(--r-pill);
font-size:15px; color:rgba(253,253,254,.9);
transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.pill-list li:hover{ border-color:var(--wp-yellow); background:rgba(253,253,254,.05); }
/* ---------- Para quem é ---------- */
/* ---------- Para quem é ---------- */
/* Lista de perfis à esquerda, painel de imagem à direita.
A linha ativa (e a que recebe o mouse) inverte para o grafite. */
/* Malha discreta ao fundo — some nas bordas para não virar moldura. */
#niveis{ position:relative; overflow:hidden; }
#niveis::before{
content:"";
position:absolute; inset:0; z-index:0;
background-image:
repeating-linear-gradient(to right, var(--ash) 0 1px, transparent 1px 88px),
repeating-linear-gradient(to bottom, var(--ash) 0 1px, transparent 1px 88px);
background-position:center;
opacity:.6;
pointer-events:none;
}
#niveis .wrap{ position:relative; z-index:1; }
#niveis .section__head{
max-width:none;
display:grid; grid-template-columns:1.1fr 1fr;
gap:var(--s-48); align-items:end;
}
#niveis .section__head .prose{ margin-top:0; }
/* ---------- Como funciona ---------- */
/* Timeline vertical: a linha azul acompanha a posição real do scroll
(altura escrita pelo JS) e cada etapa acende ao cruzar o meio da tela. */
.tl{ position:relative; max-width:960px; margin:0 auto; padding:var(--s-32) 0; }
.tl__track{
position:absolute; top:0; bottom:0; left:50%;
width:2px; transform:translateX(-1px);
background:var(--ash);
}
.tl__fill{
display:block; width:100%; height:0;
background:var(--wp-blue);
}
.tl__row{
position:relative;
min-height:clamp(240px, 32vh, 360px);
display:grid; grid-template-columns:1fr 1fr;
align-items:center;
}
.tl__dot{
position:absolute; left:50%; top:50%;
width:18px; height:18px; margin:-9px 0 0 -9px;
border-radius:50%;
background:var(--wp-blue-mist);
border:2px solid var(--ash);
transition:transform .5s var(--ease), background-color .5s var(--ease),
border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tl__row.is-active .tl__dot{
background:var(--wp-blue);
border-color:var(--wp-blue);
transform:scale(1.15);
box-shadow:0 0 0 6px rgba(45,91,209,.10);
}
.tl__content{
max-width:380px;
opacity:.25;
transform:translateY(40px) scale(.98);
filter:blur(1px);
transition:opacity .75s cubic-bezier(.2,.8,.2,1),
transform .75s cubic-bezier(.2,.8,.2,1),
filter .75s ease;
}
.tl__row.is-active .tl__content{
opacity:1; transform:translateY(0) scale(1); filter:blur(0);
}
.tl__row--left .tl__content{
grid-column:1; justify-self:end; text-align:right; padding-right:var(--s-64);
}
.tl__row--right .tl__content{
grid-column:2; justify-self:start; text-align:left; padding-left:var(--s-64);
}
.tl__num{
display:block;
font-family:var(--font-titulo); font-weight:500;
font-size:14px; letter-spacing:.22em; text-transform:uppercase;
color:var(--wp-blue);
margin-bottom:var(--s-12);
}
.tl__content h3{ font-size:clamp(28px, 3.2vw, 40px); color:var(--wp-blue-ink); margin-bottom:var(--s-12); }
/* título forçado em 2 linhas (quebra manual com
) */
.tl__content h3.tl__title--2l{ font-size:clamp(24px, 2.6vw, 34px); text-wrap:normal; white-space:normal; }
.tl__content p{ color:var(--fog); line-height:1.65; font-size:16px; }
@media (prefers-reduced-motion:reduce){
.tl__content{ opacity:1; transform:none; filter:none; transition:none; }
}
/* ---------- Direcionamento ---------- */
.paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-12); }
.path{
display:flex; align-items:center; gap:var(--s-16);
text-align:left;
padding:20px 28px;
font-family:inherit; font-size:16px; letter-spacing:var(--tracking);
color:var(--wp-blue-ink);
background:var(--paper);
border:1px solid var(--ash);
border-radius:var(--r-lg);
cursor:pointer;
transition:transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.path .arrow{ margin-left:auto; }
.path__icon{
flex:none;
width:44px; height:44px;
display:grid; place-items:center;
border-radius:12px;
background:var(--wp-blue-soft);
transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.path__icon svg{
width:22px; height:22px;
fill:none; stroke:var(--wp-blue); stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round;
}
.path:hover{ transform:translateY(-2px); border-color:var(--wp-blue-ink); background:var(--wp-blue-soft); }
.path:hover .path__icon{ background:var(--paper); transform:translateY(-1px); }
.section--dark .path,
.section--blue .path{
color:var(--paper);
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.22);
}
.section--dark .path .arrow,
.section--blue .path .arrow{ color:var(--wp-yellow); }
.section--dark .path__icon,
.section--blue .path__icon{ background:rgba(255,255,255,.12); }
.section--dark .path__icon svg,
.section--blue .path__icon svg{ stroke:var(--wp-yellow); }
.section--dark .path:hover,
.section--blue .path:hover{
border-color:var(--paper);
background:rgba(255,255,255,.16);
}
.section--dark .path:hover .path__icon,
.section--blue .path:hover .path__icon{ background:var(--wp-yellow); }
.section--dark .path:hover .path__icon svg,
.section--blue .path:hover .path__icon svg{ stroke:var(--wp-blue-ink); }
/* ---------- Rodapé ---------- */
.footer{ background:var(--paper); border-top:1px solid var(--ash); padding:var(--s-64) 0 var(--s-32); }
.footer__inner{ display:flex; justify-content:space-between; gap:var(--s-32); flex-wrap:wrap; }
/* o PNG tem margem transparente à esquerda (~12.8% da largura): compensa para alinhar com o texto */
.footer__logo{ height:52px; width:auto; margin-bottom:var(--s-16); transform:translateX(-12.8%); }
.footer__tagline{ color:var(--fog); font-size:15px; max-width:38ch; }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-8); align-items:flex-start; }
.footer__links a{
padding:10px 20px; border:1px solid var(--ash); border-radius:var(--r-pill);
font-size:14px; color:var(--wp-blue-ink);
transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.footer__links a:hover{ border-color:var(--wp-blue-ink); background:var(--bone); }
.footer__base{ margin-top:var(--s-48); padding-top:var(--s-24); border-top:1px solid var(--ash); font-size:13px; color:var(--fog); }
/* ---------- Animações de entrada ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation:none !important; transition:none !important; }
.reveal{ opacity:1; transform:none; }
}
/* ---------- Responsivo ---------- */
@media (max-width:1000px){
.nav{ display:none; }
.burger{ display:flex; }
.header__actions{ margin-left:auto; }
.header__actions .btn{ display:none; }
.dark-grid{ grid-template-columns:1fr; gap:var(--s-32); }
#niveis .section__head{ grid-template-columns:1fr; gap:var(--s-32); align-items:start; }
}
@media (max-width:720px){
.section{ padding:var(--s-96) 0; }
/* No mobile o hero vira uma coluna simples: brasão, título e CTAs. */
.hero{ padding:112px 0 var(--s-64); min-height:0; }
.hero__cta{
left:auto; right:auto; top:auto; bottom:auto;
justify-content:flex-start; gap:var(--s-8);
flex-wrap:wrap;
}
.hero__cta .btn{
flex:1 1 auto; justify-content:center; padding:14px 18px;
font-size:13px; line-height:1.15; white-space:nowrap;
}
.hero__cta .btn--ghost{
background:transparent; color:var(--ink);
border-color:rgba(255,255,255,.5);
}
.hero__cta .btn--ghost:hover{ background:rgba(255,255,255,.1); }
.hero__stripes{ opacity:.35; }
.cards, .paths{ grid-template-columns:1fr; }
/* Timeline no mobile: eixo à esquerda, conteúdo sempre à direita. */
.tl__track{ left:9px; transform:none; }
.tl__row{ grid-template-columns:1fr; min-height:clamp(240px, 34vh, 360px); }
.tl__dot{ left:10px; }
.tl__row--left .tl__content,
.tl__row--right .tl__content{
grid-column:1; justify-self:start; text-align:left;
padding:0 0 0 var(--s-48);
}
.tl__content h3{ font-size:30px; }
.tl__content h3.tl__title--2l{ font-size:22px; }
.card{ padding:var(--s-32); }
.section__head{ margin-bottom:var(--s-48); }
.footer__inner{ flex-direction:column; }
}
/* O menu mobile nunca aparece no desktop, mesmo com estado antigo */
@media (min-width:1001px){
.mobile-menu{ display:none !important; }
}
/* ---------- Slot de imagem nos cards ---------- */
.card__media{
margin:0 0 var(--s-8);
width:100%;
aspect-ratio:8 / 5;
overflow:hidden;
border-radius:var(--r-card);
background:var(--wp-blue-soft);
}
.card__media img{
width:100%; height:100%;
object-fit:cover;
transition:transform .6s var(--ease);
}
/* foto em retrato: o grupo está na base — ancora o corte embaixo */
.card__media img[src*="experiencias-internacionais"]{ object-position:center bottom; }
.card:hover .card__media img{ transform:scale(1.03); }
/* =========================================================
PURO TALENTO — camada de marca
Reescreve o que a base clara assumia: hero próprio,
ícones dos pilares, faixas de nível e ajustes de contraste
sobre o azul-marinho.
========================================================= */
/* ---------- Hero ---------- */
.hero{
background:#0b1b47;
min-height:min(92vh, 860px);
display:flex; align-items:center;
padding:140px 0 var(--s-96);
}
.hero__media{
position:absolute; inset:0;
pointer-events:none;
overflow:hidden;
}
.hero__pitch{
position:absolute; left:-10%; right:-10%; bottom:-6%; height:38%;
background:#102a66;
filter:none;
}
.hero__stripes{
position:absolute; right:-4%; bottom:-4%;
width:min(46vw,520px); height:min(30vw,340px);
background:repeating-linear-gradient(
115deg,
var(--wp-yellow) 0 10px,
transparent 10px 34px
);
opacity:.55;
}
.hero__inner{
position:relative; inset:auto;
pointer-events:auto;
width:100%; max-width:var(--max);
margin-inline:auto; padding-inline:var(--s-24);
}
.hero__crest{ height:clamp(96px,13vw,152px); width:auto; margin-bottom:var(--s-24); }
.hero__title{ color:var(--wp-blue-ink); margin-bottom:var(--s-20); }
.hero__title em{
font-style:normal;
color:var(--wp-yellow);
}
.hero__lede{
font-size:clamp(17px,2vw,22px);
color:rgba(238,243,255,.82);
max-width:34ch;
text-transform:uppercase;
font-family:var(--font-titulo);
letter-spacing:var(--tracking-tit);
}
.hero__lede b{ color:var(--wp-yellow); font-weight:600; }
.hero__cta{
position:static;
justify-content:flex-start;
margin-top:var(--s-32);
}
.hero__cta .btn--primary{ background:var(--wp-yellow); color:#0b1b47; }
.hero__cta .btn--primary:hover{ background:var(--wp-lavender); color:#0b1b47; }
.hero__tag{
margin-top:var(--s-32);
font-family:var(--font-titulo);
text-transform:uppercase;
letter-spacing:var(--tracking-tit);
font-size:clamp(15px,1.6vw,19px);
color:rgba(238,243,255,.7);
}
.hero__tag b{ color:var(--wp-yellow); font-weight:600; }
/* ---------- Marquee: dourado atrás pede texto escuro ---------- */
.marquee__band--front{ background:var(--wp-blue-mist); border-bottom-color:var(--ash); }
.marquee__mark{ opacity:1; }
/* ---------- Seções ---------- */
.section--amarelo{
background:#0c1d4c;
}
.section--amarelo .prose{ color:var(--fog); }
.section--amarelo .card{
background:rgba(255,255,255,.035);
border:1px solid var(--ash);
}
.section--amarelo .card:hover{ border-color:var(--wp-periwinkle); }
.section--amarelo .card h3{ color:var(--wp-blue-ink); }
.section--amarelo .card p{ color:var(--fog); }
.section--amarelo .btn--soft{ background:var(--wp-yellow); color:#0b1b47; }
.section--amarelo .btn--soft:hover{ background:var(--wp-lavender); color:#0b1b47; }
.section--blue{
background:#1c3d8f;
}
.section--dark .btn--primary{ background:var(--wp-yellow); color:#0b1b47; }
.section--dark .btn--primary:hover{ background:var(--wp-lavender); color:#0b1b47; }
/* ---------- Cards dos pilares ---------- */
.card__icon{
width:56px; height:56px;
display:grid; place-items:center;
border-radius:16px;
border:1px solid var(--wp-periwinkle);
background:var(--wp-blue-soft);
}
.card__icon svg{
width:26px; height:26px;
fill:none; stroke:var(--wp-yellow); stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round;
}
.card--claim{
background:#11265f !important;
border-color:var(--wp-periwinkle) !important;
justify-content:center;
}
.card--claim h3{ color:var(--wp-yellow) !important; }
/* ---------- Níveis ---------- */
/* ---------- Blocos claros que precisavam virar escuros ---------- */
.section--soft{ background:#0e2154; }
.tl__content h3{ color:var(--wp-blue-ink); }
.pill-list--center{ justify-content:center; margin:var(--s-32) 0 var(--s-24); }
.footer__logo{ height:88px; transform:none; }
.footer{ background:var(--wp-blue-deep); }
/* ---------- Faixa dourada de acento no rodapé ---------- */
.footer__base{ display:flex; align-items:center; justify-content:space-between; }
@media (max-width:720px){
.hero__crest{ height:96px; }
}
/* ---------- Correções finais do hero ---------- */
.hero__title{ text-align:left; margin-inline:0; max-width:none; }
.hero__cta .btn--ghost{ color:var(--ink); border-color:rgba(255,255,255,.5); }
.hero__cta .btn--ghost:hover{ color:var(--ink); border-color:var(--wp-yellow); background:rgba(255,255,255,.08); }
/* ---------- Contraste nas seções escuras ----------
A base clara usava --paper (branco) como cor de texto sobre fundo
escuro. Com o marinho no lugar do branco, esses pontos precisam
apontar para o texto claro da marca. */
.section--dark .h-lg,
.section--blue .h-lg{ color:var(--wp-blue-ink); }
.section--dark .prose,
.section--blue .prose{ color:rgba(238,243,255,.78); }
.section--dark .path,
.section--blue .path{ color:var(--ink); background:rgba(255,255,255,.04); border-color:var(--ash); }
.section--dark .path:hover,
.section--blue .path:hover{ border-color:var(--wp-yellow); background:rgba(255,255,255,.08); }
.section--dark .path:hover .path__icon svg,
.section--blue .path:hover .path__icon svg{ stroke:#0b1b47; }
.pill-list li{ color:rgba(238,243,255,.9); border-color:rgba(255,255,255,.18); }
.pill-list li:hover{ background:rgba(255,255,255,.06); }
/* =========================================================
RITMO DE FUNDOS — marinho · branco · dourado · azul
A página alterna quatro superfícies. Cada uma carrega o
próprio contraste, porque a base clara e a camada escura
assumem cores de texto opostas.
========================================================= */
:root{
--navy: #0b1b47; /* texto sobre superfícies claras */
--navy-soft: #4b5a85; /* texto de apoio sobre claro */
--line-dark: rgba(11,27,71,.14);
}
/* ---------- Superfície BRANCA ---------- */
.section--white,
#a-academia,
#acompanhamento{
background:#ffffff;
color:var(--navy);
}
.section--white .h-lg,
.section--white h3{ color:var(--navy); }
.section--white .prose,
.section--white p{ color:var(--navy-soft); }
.section--white .prose b,
.section--white b{ color:var(--navy); }
.section--white .btn--primary{ background:var(--wp-yellow); color:var(--navy); }
.section--white .btn--primary:hover{ background:var(--navy); color:#fff; box-shadow:none; }
/* Lista de níveis sobre o branco */
/* ---------- Superfície DOURADA ---------- */
.section--gold,
#pilares{
background:var(--wp-yellow);
color:var(--navy);
}
.section--gold .h-lg{ color:var(--navy); }
.section--gold .prose{ color:rgba(11,27,71,.78); }
.section--gold .prose b{ color:var(--navy); }
/* Cards marinhos sobre o dourado: o contraste da marca */
.section--gold .card{
background:#0b1b47;
border:1px solid rgba(11,27,71,.25);
box-shadow:0 22px 40px -28px rgba(11,27,71,.7);
}
.section--gold .card:hover{ border-color:var(--navy); }
.section--gold .card h3{ color:#fff; }
.section--gold .card p{ color:rgba(238,243,255,.75); }
.section--gold .card__icon{ border-color:var(--wp-periwinkle); background:rgba(212,166,74,.18); }
.section--gold .card--claim{
background:var(--navy) !important;
border-color:var(--navy) !important;
}
.section--gold .card--claim h3{ color:var(--wp-yellow) !important; }
.section--gold .btn--soft{ background:var(--wp-yellow); color:var(--navy); }
.section--gold .btn--soft:hover{ background:#fff; color:var(--navy); }
/* Caminhos sobre o dourado */
.section--gold .path{
color:var(--navy);
background:rgba(255,255,255,.4);
border-color:rgba(11,27,71,.2);
}
.section--gold .path:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.section--gold .path__icon{ background:var(--navy); }
.section--gold .path__icon svg{ stroke:var(--wp-yellow); }
.section--gold .path:hover .path__icon{ background:var(--wp-yellow); }
.section--gold .path:hover .path__icon svg{ stroke:var(--navy); }
.section--gold .path .arrow{ color:var(--navy); }
.section--gold .path:hover .arrow{ color:var(--wp-yellow); }
/* ---------- Superfície AZUL ---------- */
.section--azure{
background:#1c3d8f;
}
.section--azure .pill-list li{ border-color:rgba(255,255,255,.28); }
.section--azure .pill-list li:hover{ border-color:var(--wp-yellow); background:rgba(255,255,255,.1); }
/* ---------- Transições entre superfícies ---------- */
#pilares{ box-shadow:0 -32px 60px -28px rgba(11,27,71,.5); }
.section--soft{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
/* =========================================================
SUPERFÍCIES CHAPADAS
Sem degradê: cada seção é uma cor sólida e as peças
decorativas são blocos de cor. As únicas repetições de
cor são padrões de barras/linhas com corte seco — não há
transição entre tons.
========================================================= */
.section--blue{ background:#1c3d8f; }
/* O campo ao pé do hero: uma faixa sólida, não um esmaecido. */
.hero__pitch{
left:0; right:0; bottom:0; height:22%;
background:#102a66;
filter:none;
}
/* Malha da seção de níveis: linhas escuras sobre o branco. */
#niveis::before{
background-image:
repeating-linear-gradient(to right, var(--line-dark) 0 1px, transparent 1px 88px),
repeating-linear-gradient(to bottom, var(--line-dark) 0 1px, transparent 1px 88px);
opacity:.5;
}
/* Sem sombras de transição entre as superfícies. */
#pilares{ box-shadow:none; }
.section--soft{ box-shadow:none; }
.section--gold .card{ box-shadow:none; }
/* =========================================================
NÍVEIS — conquista por scroll
A timeline saiu do acompanhamento e veio para cá: a linha
se preenche conforme a página rola e cada faixa acende ao
cruzar o meio da tela. Como a seção é branca, a timeline
precisa da versão clara dos seus próprios estilos.
========================================================= */
.tl--niveis .tl__track{ background:var(--line-dark); }
.tl--niveis .tl__dot{
background:#fff;
border-color:rgba(11,27,71,.25);
}
/* Ao acender, o ponto assume a cor da faixa daquele nível. */
.tl--niveis .tl__row.is-active .tl__dot{
background:var(--faixa);
border-color:var(--navy);
}
.tl__row--branco { --faixa:#ffffff; }
.tl__row--amarelo{ --faixa:var(--wp-yellow); }
.tl__row--azul { --faixa:#2d5bd1; }
.tl__row--cinza { --faixa:#8c96a8; }
.tl__row--preto { --faixa:#0a1433; }
.tl--niveis .tl__num{ color:var(--wp-yellow); }
.tl--niveis .tl__content h3{ color:var(--navy); }
/* O nome da faixa em caixa alta; a etapa, menor, logo abaixo. */
.tl--niveis .tl__content h3 em{
display:block;
font-style:normal;
font-size:.55em;
letter-spacing:.08em;
color:var(--navy-soft);
margin-top:6px;
}
.tl--niveis .tl__content p{ color:var(--navy-soft); }
.tl__cta{
display:inline-flex; align-items:center; gap:8px;
margin-top:var(--s-16);
font-family:var(--font-titulo);
text-transform:uppercase;
letter-spacing:.06em;
font-size:14px;
color:var(--navy);
border-bottom:1px solid var(--wp-yellow);
padding-bottom:3px;
transition:color .35s var(--ease);
}
.tl__cta:hover{ color:var(--wp-yellow); }
/* Nas linhas à esquerda o conteúdo é alinhado à direita. */
.tl__row--left .tl__cta{ align-self:flex-end; }
/* Fecho da seção */
.levels__claim{
margin-top:var(--s-32);
padding:18px var(--s-24);
border-radius:var(--r-pill);
background:var(--wp-yellow);
color:var(--navy);
text-align:center;
font-size:16px;
}
.levels__claim b{ color:var(--navy); font-weight:700; }
/* =========================================================
ACOMPANHAMENTO — cards
O que era timeline virou grade: cinco práticas mais o fecho.
Os cards já nascem escuros, então caem direto no painel
marinho da seção.
========================================================= */
#acompanhamento .card{ background:rgba(255,255,255,.04); }
#acompanhamento .card--claim{
background:var(--wp-blue-deep) !important;
border-color:var(--wp-periwinkle) !important;
}
#acompanhamento .card--claim h3{ color:var(--wp-yellow) !important; }
#acompanhamento .btn--soft{ background:var(--wp-yellow); color:var(--navy); }
#acompanhamento .btn--soft:hover{ background:var(--wp-lavender); color:var(--navy); }
@media (max-width:720px){
.tl--niveis .tl__content h3 em{ font-size:.6em; }
.tl__row--left .tl__cta{ align-self:flex-start; }
.levels__claim{ border-radius:var(--r-card); }
}
/* =========================================================
INVERSÃO — níveis no marinho, acompanhamento no branco
As duas seções trocaram de superfície, então trocam também
de contraste: a timeline volta à versão escura e os cards
passam a viver sobre o branco.
========================================================= */
/* ---------- Níveis: superfície marinho ---------- */
#niveis{ background:#0e2154; }
/* A malha de fundo inverte: linhas claras sobre o marinho. */
#niveis::before{
background-image:
repeating-linear-gradient(to right, rgba(255,255,255,.1) 0 1px, transparent 1px 88px),
repeating-linear-gradient(to bottom, rgba(255,255,255,.1) 0 1px, transparent 1px 88px);
opacity:.6;
}
#niveis .h-lg{ color:var(--wp-blue-ink); }
#niveis .section__head .prose{ color:rgba(238,243,255,.72); }
/* Timeline de volta ao escuro. */
.tl--niveis .tl__track{ background:rgba(255,255,255,.16); }
.tl--niveis .tl__dot{
background:var(--wp-blue-mist);
border-color:rgba(255,255,255,.28);
}
.tl--niveis .tl__row.is-active .tl__dot{
background:var(--faixa);
border-color:var(--wp-yellow);
}
.tl--niveis .tl__content h3{ color:var(--wp-blue-ink); }
.tl--niveis .tl__content h3 em{ color:rgba(238,243,255,.6); }
.tl--niveis .tl__content p{ color:var(--fog); }
.tl__cta{ color:var(--wp-blue-ink); }
.tl__cta:hover{ color:var(--wp-yellow); }
/* ---------- Acompanhamento: superfície branca ---------- */
#acompanhamento .card{
background:#fff;
border-color:var(--line-dark);
}
#acompanhamento .card:hover{ border-color:var(--wp-yellow); }
#acompanhamento .card h3{ color:var(--navy); }
#acompanhamento .card p{ color:var(--navy-soft); }
#acompanhamento .card__icon{
background:rgba(212,166,74,.16);
border-color:var(--wp-periwinkle);
}
#acompanhamento .card__icon svg{ stroke:#a87e2e; }
/* O card de fecho segue marinho: é o contraponto na grade clara. */
#acompanhamento .card--claim{
background:var(--navy) !important;
border-color:var(--navy) !important;
}
#acompanhamento .card--claim h3{ color:var(--wp-yellow) !important; }
#acompanhamento .card--claim p{ color:rgba(238,243,255,.75); }
/* =========================================================
HERO — arte da academia
A arte traz o amarelo cheio com os atletas de um lado e o
vazio do outro: no desktop eles ficam à esquerda e o texto
ocupa a direita; no mobile eles ficam embaixo e o texto
vai para o topo. O fundo da seção repete o amarelo da
imagem para que o corte nunca apareça.
========================================================= */
.hero{
position:relative;
overflow:hidden;
background:#ffd117; /* mesmo amarelo da arte */
min-height:min(94vh, 900px);
display:flex; align-items:center;
padding:150px 0 var(--s-96);
}
.hero__media{
position:absolute; inset:0;
display:block;
pointer-events:none;
}
.hero__media img{
width:100%; height:auto;
object-fit:cover;
object-position:left center; /* os atletas ancoram à esquerda */
}
.hero__inner{
position:relative; inset:auto;
width:100%; max-width:var(--max);
margin-inline:auto; padding-inline:var(--s-24);
display:flex; justify-content:flex-end;
pointer-events:auto;
}
.hero__copy{ width:min(50%, 560px); }
/* Sobre o amarelo, tudo vira marinho. */
.hero__title{ color:var(--navy); text-align:left; margin:0 0 var(--s-20); max-width:none; }
/* A primeira linha sai vazada; a segunda, cheia. */
.hero__title{
color:transparent;
-webkit-text-stroke:2px var(--navy);
}
.hero__title em{
font-style:normal;
color:var(--navy);
-webkit-text-stroke:0;
}
.hero__lede{
font-family:var(--font-titulo);
text-transform:uppercase;
letter-spacing:var(--tracking-tit);
font-size:clamp(17px,1.9vw,22px);
color:rgba(11,27,71,.75);
max-width:26ch;
}
.hero__lede b{ color:var(--navy); font-weight:600; }
.hero__cta{ position:static; justify-content:flex-start; margin-top:var(--s-32); }
.hero__cta .btn--primary{ background:var(--navy); color:#fff; }
.hero__cta .btn--primary:hover{ background:#fff; color:var(--navy); }
.hero__cta .btn--ghost{ color:var(--navy); border-color:rgba(11,27,71,.45); }
.hero__cta .btn--ghost:hover{ color:var(--navy); border-color:var(--navy); background:rgba(255,255,255,.35); }
.hero__tag{
margin-top:var(--s-32);
font-family:var(--font-titulo);
text-transform:uppercase;
letter-spacing:var(--tracking-tit);
font-size:clamp(14px,1.5vw,18px);
color:rgba(11,27,71,.6);
}
.hero__tag b{ color:var(--navy); font-weight:600; }
@media (max-width:900px){
.hero__copy{ width:min(58%, 460px); }
}
/* No mobile a arte é vertical: atletas embaixo, texto no topo. */
@media (max-width:720px){
.hero{
min-height:100svh;
align-items:flex-start;
padding:120px 0 var(--s-64);
}
.hero__media img{ object-position:center bottom; }
.hero__inner{ justify-content:flex-start; }
.hero__copy{ width:100%; }
.hero__title{ -webkit-text-stroke-width:1.5px; }
.hero__lede{ max-width:none; }
.hero__cta{ margin-top:var(--s-24); }
.hero__cta .btn{ flex:0 1 auto; }
.hero__tag{ margin-top:var(--s-20); }
}
/* ---------- Ajustes do hero à arte ---------- */
/* O texto acompanha o vazio da arte, que é uma fração da tela —
não a largura do container. Por isso o inner é full-bleed. */
.hero__inner{
max-width:none;
padding-inline:clamp(var(--s-24), 5vw, 80px);
}
.hero__copy{ width:min(42%, 580px); }
/* A faixa animada parava de ler sobre o amarelo do hero: em vez de
invadir a seção, ela agora começa na divisa. */
.marquee{ margin-top:0; }
@media (max-width:900px){
.hero__copy{ width:min(52%, 460px); }
}
@media (max-width:720px){
.hero__inner{ padding-inline:var(--s-24); }
.hero__copy{ width:100%; }
}
/* =========================================================
HIERARQUIA — títulos maiores
O nome de cada nível e o título de cada card sobem de
tamanho para abrir distância do texto de apoio.
========================================================= */
.card h3{ font-size:clamp(30px, 2.6vw, 40px); line-height:1.1; }
.tl--niveis .tl__content h3,
.tl--niveis .tl__content h3.tl__title--2l{
font-size:clamp(38px, 4.4vw, 60px);
line-height:1;
margin-bottom:var(--s-16);
}
/* A etapa desce de proporção para o nome dominar. */
.tl--niveis .tl__content h3 em{
font-size:.34em;
margin-top:12px;
}
@media (max-width:720px){
.card h3{ font-size:30px; }
.tl--niveis .tl__content h3,
.tl--niveis .tl__content h3.tl__title--2l{ font-size:34px; }
.tl--niveis .tl__content h3 em{ font-size:.42em; }
}
/* ---------- Respiro entre os níveis ---------- */
/* Com o nome maior e a descrição mais longa, cada etapa precisa
de mais campo em volta para não colar na seguinte. */
.tl--niveis .tl__row{ min-height:clamp(360px, 46vh, 520px); }
.tl--niveis .tl__content{ max-width:440px; }
.tl--niveis .tl__content p{ font-size:16px; line-height:1.7; }
.tl--niveis .tl__row--left .tl__content{ padding-right:var(--s-96); }
.tl--niveis .tl__row--right .tl__content{ padding-left:var(--s-96); }
@media (max-width:720px){
.tl--niveis .tl__row{ min-height:clamp(300px, 40vh, 420px); }
.tl--niveis .tl__row--left .tl__content,
.tl--niveis .tl__row--right .tl__content{ padding:0 0 0 var(--s-48); }
.tl--niveis .tl__content{ max-width:none; }
}
/* =========================================================
NÍVEIS — o fundo acompanha a faixa em foco
O JS escreve --nivel-bg conforme o nível que cruza o meio
da tela. São cores chapadas (a versão escura de cada faixa),
sempre escuras o bastante para o texto claro continuar
legível; a troca é uma transição de cor, não um degradê.
========================================================= */
#niveis{
background:var(--nivel-bg, #0e2154);
transition:background-color 1s var(--ease);
}
@media (prefers-reduced-motion:reduce){
#niveis{ transition:none; }
}
/* =========================================================
PONTOS DE FOTO
Cada quadro aponta para um arquivo em assets/images/. Se o
arquivo existir, a foto ocupa o quadro; se não existir, o JS
marca a figure como vazia e aparece o marcador com o caminho
esperado — nunca o ícone de imagem quebrada.
========================================================= */
.foto{
position:relative;
margin:0;
overflow:hidden;
border-radius:var(--r-card);
background:rgba(255,255,255,.05);
border:1px solid var(--ash);
aspect-ratio:4 / 3;
}
.foto img{
width:100%; height:100%;
object-fit:cover;
transition:transform .6s var(--ease);
}
.foto:hover img{ transform:scale(1.04); }
.foto--larga{ aspect-ratio:16 / 9; }
.foto--alta{ aspect-ratio:3 / 4; }
.foto--retrato{ aspect-ratio:21 / 9; margin-top:var(--s-48); }
/* Legenda do arquivo: some quando a foto carrega. */
.foto__marca{
position:absolute; inset:0;
display:none;
flex-direction:column; align-items:center; justify-content:center;
gap:6px; padding:var(--s-24);
text-align:center;
}
.foto__marca b{
font-family:var(--font-titulo);
text-transform:uppercase;
letter-spacing:var(--tracking-tit);
font-size:clamp(16px,1.8vw,20px);
color:var(--wp-yellow);
}
.foto__marca span{
font-size:12px;
color:rgba(238,243,255,.55);
word-break:break-all;
}
/* Estado vazio: moldura tracejada com o nome do arquivo. */
.foto.is-vazia{
background:rgba(255,255,255,.04);
border:1px dashed var(--wp-periwinkle);
}
.foto.is-vazia img{ display:none; }
.foto.is-vazia .foto__marca{ display:flex; }
/* Sobre as seções claras o marcador inverte. */
.section--white .foto.is-vazia,
.section--gold .foto.is-vazia{ background:rgba(11,27,71,.05); border-color:rgba(11,27,71,.3); }
.section--white .foto__marca span,
.section--gold .foto__marca span{ color:rgba(11,27,71,.6); }
.section--gold .foto__marca b{ color:var(--navy); }
/* Faixas de foto dentro das seções */
.fotos{ display:grid; gap:var(--s-24); margin-top:var(--s-64); }
.fotos--duo{ grid-template-columns:1.6fr 1fr; align-items:stretch; }
.fotos--duo .foto{ aspect-ratio:auto; min-height:340px; }
/* =========================================================
GALERIA — fita contínua
Uma tira de fotos que atravessa a tela de ponta a ponta e
roda em loop. Sem cantos arredondados e sem sombra: as fotos
se encostam e a fita sangra nas duas bordas.
========================================================= */
/* A fita é filha direta da section (fora do .wrap), então já
ocupa a largura toda sem precisar de 100vw — que somaria a
barra de rolagem e criaria scroll horizontal na página. */
.fita{
margin-top:var(--s-64);
overflow:hidden;
}
.fita__trilho{
display:flex;
width:max-content;
gap:0;
animation:fita-rolar 60s linear infinite;
}
/* A fita não para no hover: o giro é contínuo. */
.fita .foto{
flex:none;
width:clamp(260px, 24vw, 420px);
aspect-ratio:4 / 5;
border-radius:0;
border:0;
box-shadow:none;
}
/* Entre os marcadores vazios ainda é preciso separar um quadro
do outro; com foto de verdade eles se encostam. */
.fita .foto.is-vazia{
border:1px dashed var(--wp-periwinkle);
border-width:0 1px;
}
@keyframes fita-rolar{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
.fita__trilho{ animation:none; }
.fita{ overflow-x:auto; }
}
@media (max-width:1000px){
.fotos--duo{ grid-template-columns:1fr; }
.fotos--duo .foto{ min-height:0; aspect-ratio:16 / 9; }
.foto--retrato{ aspect-ratio:16 / 9; }
}
@media (max-width:720px){
.fotos{ margin-top:var(--s-48); }
.fita{ margin-top:var(--s-48); }
.fita .foto{ width:clamp(200px, 62vw, 300px); }
}
/* =========================================================
INSTITUCIONAL — texto à esquerda, foto à direita
========================================================= */
.dupla{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:var(--s-64);
align-items:stretch; /* a foto acompanha a altura do bloco de texto */
}
.dupla__texto{ text-align:left; }
.dupla__texto .prose{ margin-top:var(--s-24); max-width:52ch; }
.dupla__texto .btn-row{ justify-content:flex-start; margin-top:var(--s-32); }
.foto--coluna{ aspect-ratio:auto; height:100%; }
@media (max-width:1000px){
.dupla{ grid-template-columns:1fr; gap:var(--s-48); }
.foto--coluna{ aspect-ratio:16 / 9; }
}
/* ---------- Grade de cards em três colunas ---------- */
/* Com a coluna mais estreita, o respiro interno e o título
precisam acompanhar para o card não ficar apertado. */
.card{ padding:var(--s-32); }
.card h3{ font-size:clamp(24px, 1.9vw, 32px); }
/* Duas colunas só na faixa intermediária: abaixo de 720px vale
a regra de coluna única, que vem antes no arquivo. */
@media (max-width:1100px) and (min-width:721px){
.cards{ grid-template-columns:repeat(2,1fr); }
}
/* =========================================================
CARDS — estado de hover
O card sobe, a borda acende em amarelo, um fio cresce da
esquerda para a direita na base e o ícone inverte: chip
amarelo com o traço em marinho.
========================================================= */
.card{ position:relative; overflow:hidden; }
.card::after{
content:"";
position:absolute; left:0; right:0; bottom:0;
height:3px;
background:var(--wp-yellow);
transform:scaleX(0);
transform-origin:left center;
transition:transform .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); }
.card:hover::after{ transform:scaleX(1); }
.card__icon{
transition:background-color .35s var(--ease), border-color .35s var(--ease),
transform .35s var(--ease);
}
.card__icon svg{ transition:stroke .35s var(--ease); }
.card:hover .card__icon{ transform:translateY(-2px); }
/* Seção dourada: cards marinhos */
.section--gold .card:hover{ border-color:var(--wp-yellow); }
.section--gold .card:hover .card__icon{ background:var(--wp-yellow); border-color:var(--wp-yellow); }
.section--gold .card:hover .card__icon svg{ stroke:var(--navy); }
/* Seção branca: cards claros */
#acompanhamento .card:hover{ border-color:var(--wp-yellow); }
#acompanhamento .card:hover .card__icon{ background:var(--wp-yellow); border-color:var(--wp-yellow); }
#acompanhamento .card:hover .card__icon svg{ stroke:var(--navy); }
/* O card de fecho não tem ícone: só o fio e a elevação. */
.card--claim:hover .btn--soft{ background:#fff; color:var(--navy); }
@media (prefers-reduced-motion:reduce){
.card:hover{ transform:none; }
.card::after{ transition:none; }
.card:hover .card__icon{ transform:none; }
}
/* ---------- Variante invertida: foto à esquerda ---------- */
/* As duas colunas valem só no desktop: abaixo de 1000px a foto
desce para baixo do texto, como na outra seção. */
@media (min-width:1001px){
.dupla--invertida{ grid-template-columns:.95fr 1.05fr; }
}
.dupla--invertida .dupla__texto .prose{ margin-top:var(--s-20); max-width:56ch; }
.dupla--invertida .pill-list{ margin-top:var(--s-32); }
@media (max-width:1000px){
/* Empilhado, o texto vem primeiro e a foto fecha o bloco. */
.dupla--invertida .foto{ order:2; }
.dupla--invertida .dupla__texto{ order:1; }
}
/* Empilhada, a foto volta a ter altura própria: com height:100%
somado ao aspect-ratio ela calculava a largura pela altura da
linha e estourava a coluna. */
@media (max-width:1000px){
.foto--coluna{ height:auto; width:100%; aspect-ratio:16 / 9; }
}
/* =========================================================
FAIXA ANIMADA — tarja única, mais alta
Sobrou só a tarja marinha reta. Ela ganhou altura e corpo de
texto para virar uma divisa de fato entre o hero e a seção
seguinte, em vez de um fio.
========================================================= */
.marquee__band--front{ padding-block:26px; }
.marquee__item{ font-size:21px; gap:var(--s-20); padding:0 var(--s-32); }
.marquee__mark{ height:26px; }
@media (max-width:720px){
.marquee__band--front{ padding-block:18px; }
.marquee__item{ font-size:16px; gap:var(--s-12); padding:0 var(--s-20); }
.marquee__mark{ height:20px; }
}
/* =========================================================
FOTO EM COLUNA — o quadro manda, a foto se encaixa
Com a imagem no fluxo, a proporção dela (900×1600) esticava
a moldura e a coluna crescia junto. Fora do fluxo, a figure
recebe a altura da linha do grid (a do bloco de texto) e a
foto é recortada por object-fit para caber.
========================================================= */
.foto--coluna{
position:relative;
height:100%;
min-height:460px;
}
.foto--coluna img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
}
@media (max-width:1000px){
.foto--coluna{ height:auto; min-height:0; aspect-ratio:4 / 3; }
}
/* As pílulas nasceram para fundo escuro; sobre o branco elas
precisam de contorno e texto em marinho. */
.section--white .pill-list li{
border-color:var(--line-dark);
color:var(--navy);
}
.section--white .pill-list li:hover{
border-color:var(--wp-yellow);
background:rgba(11,27,71,.04);
}
/* =========================================================
BOTÃO FLUTUANTE DE WHATSAPP
Só o ícone, em verde do WhatsApp, no canto inferior direito.
O rótulo continua no HTML para leitores de tela.
========================================================= */
.zap{
position:fixed;
right:clamp(var(--s-16), 3vw, var(--s-32));
bottom:clamp(var(--s-16), 3vw, var(--s-32));
z-index:45;
display:grid; place-items:center;
width:60px; height:60px;
border-radius:50%;
background:#25d366;
color:#ffffff;
box-shadow:0 10px 30px -8px rgba(11,27,71,.55);
transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.zap:hover{ transform:translateY(-3px); background:#1eb455; }
.zap__icone{
width:34px; height:34px;
display:grid; place-items:center;
}
.zap__icone svg{ width:100%; height:100%; fill:currentColor; }
/* O texto fica só para leitores de tela. */
.zap__texto{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
@media (max-width:720px){
.zap{ width:54px; height:54px; }
.zap__icone{ width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce){
.zap:hover{ transform:none; }
}
/* =========================================================
HERO — arte inteira, sem zoom
Nada de object-fit:cover aqui: cover escala a imagem até
cobrir o container e corta o resto, o que ampliava a arte e
comia os atletas. Agora a imagem entra na largura total com
a altura proporcional (2560×900 no desktop, 1080×1800 no
mobile) e o hero tem a altura da própria arte. O texto é
sobreposto na faixa amarela, que ocupa sempre os ~37% finais
da arte — proporção fixa, independente da tela.
========================================================= */
.hero{
display:block;
position:relative;
min-height:0;
padding:0;
background:#ffd117;
}
.hero__media{
position:relative; inset:auto;
display:block;
margin-top:86px; /* altura da barra fixa do topo */
}
.hero__media img{
width:100%; height:auto;
object-fit:fill; /* sem recorte: a arte inteira */
object-position:center;
}
.hero__inner{
position:absolute;
left:0; right:0; top:86px; bottom:0;
display:flex; align-items:center;
max-width:none; padding:0;
}
.hero__copy{
width:38%;
margin-left:62%; /* os atletas ocupam os 62% iniciais */
margin-right:0;
max-width:none;
padding-right:clamp(var(--s-16), 3vw, 56px);
text-align:right;
container-type:normal;
}
.hero__title{ text-align:right; font-size:clamp(28px, 4.2vw, 86px); }
.hero__lede{ margin-left:auto; font-size:clamp(13px, 1.5vw, 22px); }
.hero__cta{ justify-content:flex-end; margin-top:clamp(var(--s-16), 2vw, var(--s-32)); }
.hero__tag{ margin-top:clamp(var(--s-12), 1.6vw, var(--s-32)); font-size:clamp(11px, 1.1vw, 18px); }
/* No mobile a arte vertical já traz a headline impressa: só os
botões ficam por cima, no pé da imagem. */
@media (max-width:899px){
.hero__inner{ align-items:flex-end; padding-bottom:96px; }
.hero__copy{
width:100%; margin-left:0;
padding-inline:var(--s-24);
text-align:center;
}
.hero__title,
.hero__lede,
.hero__tag{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
.hero__cta{ justify-content:center; margin-top:0; }
}
/* Botões do hero no mobile: mais próximos do pé da arte e com o
secundário em amarelo, para os dois lerem sobre a foto. */
@media (max-width:899px){
.hero__inner{ padding-bottom:var(--s-32); }
.hero__cta .btn--ghost{
background:var(--wp-yellow);
color:var(--navy);
border-color:transparent;
}
.hero__cta .btn--ghost:hover{ background:var(--wp-lavender); border-color:transparent; }
}
/* O texto do hero fecha na mesma margem do header: o eixo direito
do bloco coincide com o do botão "Agendar avaliação" do topo. */
@media (min-width:900px){
.hero__copy{ padding-right:clamp(var(--s-24), 4vw, 64px); }
}
/* Os botões param antes do botão flutuante do WhatsApp, que ocupa
o canto inferior direito da janela. */
@media (max-width:899px){
.hero__cta{ margin-right:74px; }
}
/* Os dois botões dividem a largura disponível e nunca empilham:
sem quebra de linha no container, e cada botão pode encolher
(flex:1 1 0) com o rótulo quebrando dentro dele se precisar. */
@media (max-width:899px){
.hero__cta{ flex-wrap:nowrap; gap:var(--s-8); }
.hero__cta .btn{
flex:1 1 0;
min-width:0;
padding:11px 12px;
font-size:12px;
line-height:1.2;
white-space:normal;
text-align:center;
justify-content:center;
}
}
/* Par de botões centralizado no pé do hero, em qualquer largura
de celular. Sobe o suficiente para não cruzar com o botão
flutuante do WhatsApp, que fica fixo no rodapé da janela. */
@media (max-width:899px){
.hero__inner{ padding-bottom:var(--s-24); }
.hero__cta{
margin-inline:auto;
margin-right:auto;
width:100%;
max-width:420px;
justify-content:center;
}
}
/* O botão flutuante só entra depois do hero: dentro dele já há os
dois CTAs, e assim os botões podem descer até a faixa animada
sem que o WhatsApp fique por cima. */
.zap{ transition:transform .3s var(--ease), background-color .3s var(--ease), opacity .3s var(--ease), visibility .3s; }
.zap.is-oculto{
opacity:0; visibility:hidden;
transform:translateY(14px);
pointer-events:none;
}
/* Mais respiro entre o fim do texto e a borda direita da arte. */
@media (min-width:900px){
.hero__copy{ padding-right:clamp(48px, 7vw, 130px); }
}
/* =========================================================
HERO NO DESKTOP — só os botões
Como no mobile, os textos saem da tela e ficam apenas
ocultos visualmente (o H1 continua no HTML para busca e
leitores de tela). Sobram os dois CTAs na faixa amarela.
========================================================= */
@media (min-width:900px){
.hero__title,
.hero__lede,
.hero__tag{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
.hero__cta{ margin-top:0; }
}
/* Os botões acompanham o texto impresso na arte: mesma margem
direita (13% da largura, onde termina "NÃO BASTA.") e logo
abaixo dele (70% da altura). Como a arte aparece inteira, as
porcentagens valem para qualquer largura de tela. */
@media (min-width:900px){
.hero__copy{
position:absolute;
right:13%; top:70%;
width:auto; max-width:none;
margin:0; padding:0;
}
.hero__cta{ justify-content:flex-end; margin:0; }
}
/* Os botões escalam junto com a arte: em telas menores a imagem
encolhe, e eles precisam encolher na mesma proporção para não
invadirem a área dos atletas. */
@media (min-width:900px){
.hero__cta{ gap:clamp(8px, 0.9vw, 16px); }
.hero__cta .btn{
font-size:clamp(11px, 0.95vw, 16px);
padding:clamp(9px, 0.9vw, 16px) clamp(14px, 1.7vw, 30px);
}
}
/* =========================================================
POP-UP DE AGENDAMENTO