herdaria negrito do navegador. */
font-weight: 400;
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--laranja);
margin: 0 0 1.25rem;
display: flex;
align-items: center;
gap: .75rem;
}
.sobrancelha::after {
content: "";
flex: 1;
height: 1px;
background: var(--grafite);
}
.titulo-secao { font-size: clamp(2.35rem, 5.5vw, 3.6rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.chamada {
font-size: clamp(1rem, 1.7vw, 1.1rem); /* degrau claro sob .hero__texto */
color: var(--cinza);
max-width: 56ch;
}
/* --- Botões ------------------------------------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
font-family: var(--texto);
font-weight: 700;
font-size: 1rem;
letter-spacing: .01em;
text-decoration: none;
padding: 1.05rem 1.9rem;
border-radius: 3px;
border: 2px solid transparent;
min-height: 48px; /* alvo de toque confortável no celular */
transition:
background-color var(--mov-curto) var(--curva),
color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva),
transform var(--mov-medio) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
/* O hover levanta; o clique afunda. Só transform e box-shadow — nada de layout.
O foco de teclado recebe a mesma elevação do hover, então nenhuma informação
depende de ter mouse. */
.botao:hover,
.botao:focus-visible { transform: translate3d(0, -3px, 0) scale(1.02); }
.botao:active { transform: translate3d(0, 0, 0) scale(.98); }
@media (prefers-reduced-motion: reduce) {
.botao:hover,
.botao:focus-visible,
.botao:active { transform: none; }
}
.botao--solido {
background: var(--laranja);
color: #140b04;
box-shadow: 0 0 0 0 rgba(242, 106, 33, .5);
}
.botao--solido:hover,
.botao--solido:focus-visible {
background: var(--brasa);
box-shadow: 0 10px 22px -12px rgba(242, 106, 33, .8);
}
.botao--vazado {
border-color: var(--grafite);
color: var(--osso);
}
.botao--vazado:hover,
.botao--vazado:focus-visible {
border-color: var(--laranja);
color: var(--brasa);
box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9);
}
/* --- Ação contextual de seção -------------------------------------------
CTA secundário que fecha blocos de alta intenção no desktop. Peso visual
deliberadamente menor que .botao--solido: sem preenchimento laranja, só
texto âmbar com fio inferior. No celular a barra fixa já cumpre o papel,
então estas ações ficam ocultas para não duplicar a chamada.
------------------------------------------------------------------------ */
.acao-contexto { display: none; }
@media (min-width: 929px) {
.acao-contexto {
display: flex;
justify-content: flex-end;
margin: 2rem 0 0;
}
.acao-contexto__link {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: .55rem .25rem;
font-family: var(--texto);
font-weight: 700;
font-size: .95rem;
letter-spacing: .01em;
color: var(--crepusculo);
text-decoration: none;
border-bottom: 2px solid rgba(232, 161, 58, .35);
transition: color .18s ease, border-color .18s ease;
}
.acao-contexto__link:hover {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
.acao-contexto__seta {
font-size: 1.15rem;
line-height: 1;
transition: transform .18s ease;
}
.acao-contexto__link:hover .acao-contexto__seta { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.acao-contexto__link:hover .acao-contexto__seta { transform: none; }
}
}
/* ==========================================================================
A PLACA — assinatura da página.
Reproduz a placa iluminada da fachada real: banda escura, fio laranja
no topo, fileira de spots acesos acima.
========================================================================== */
/* A placa é uma banda desde o primeiro quadro — é o objeto, não um efeito de
rolagem. Friso laranja em cima e embaixo, como o da fachada real. */
.placa {
position: sticky;
top: 0;
z-index: 60;
height: var(--barra);
display: flex;
align-items: center;
background: rgba(11, 13, 12, .86);
border-block: 2px solid var(--laranja);
transition: background-color .35s ease, backdrop-filter .35s ease;
}
/* Ao descolar do prédio, os refletores apagam e o fundo solidifica —
a banda continua a mesma banda. */
.placa.fixada {
background: rgba(11, 13, 12, .96);
backdrop-filter: blur(14px);
}
/* fileira de refletores — acendem em sequência, como os da fachada */
.spots {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding-inline: 8%;
pointer-events: none;
transition: opacity .3s ease;
}
.placa .spots { margin-top: 5px; }
.placa.fixada .spots { opacity: 0; }
.spot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--crepusculo);
opacity: 0;
box-shadow: 0 0 16px 5px rgba(232, 161, 58, .55);
animation: acender .5s ease forwards;
}
/* O escalonamento dos refletores mora no CSS — o JS não toca em estilo. */
.spot:nth-child(1) { animation-delay: .18s; }
.spot:nth-child(2) { animation-delay: .25s; }
.spot:nth-child(3) { animation-delay: .32s; }
.spot:nth-child(4) { animation-delay: .39s; }
.spot:nth-child(5) { animation-delay: .46s; }
.spot:nth-child(6) { animation-delay: .53s; }
.spot:nth-child(7) { animation-delay: .60s; }
.spot:nth-child(8) { animation-delay: .67s; }
@keyframes acender { to { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
.spot { animation: none; opacity: .95; }
}
/* Três zonas separadas por régua laranja — a divisão da placa real:
marca ao centro do olhar, seções e ação nas laterais. */
.envolve--placa {
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
height: 100%;
}
.envolve--placa > * { align-self: center; }
.marca {
display: flex;
align-items: center;
gap: .7rem;
text-decoration: none;
padding-right: clamp(1rem, 2.5vw, 1.75rem);
min-height: 44px; /* alvo de toque */
flex-shrink: 0;
}
/* O símbolo é PNG transparente e não é quadrado (602×511): a altura manda e a
largura acompanha, senão o traço achata. Sem raio nem fundo — não há caixa
para arredondar. */
.marca img { width: auto; height: 34px; border-radius: 0; }
.marca b {
font-family: var(--placa);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: .06em;
line-height: 1;
}
/* A zona central é delimitada por traço cinza; o laranja da placa está nos
dois frisos horizontais da banda, não aqui. */
.menu {
display: flex;
align-items: center;
flex: 1;
gap: clamp(.7rem, 1.3vw, .95rem);
padding-inline: clamp(.7rem, 1.3vw, .95rem);
border-inline: 1px solid var(--grafite);
font-size: .88rem;
font-weight: 500;
min-width: 0;
/* piso de segurança: se a zona central ficar apertada em qualquer largura,
ela rola dentro da própria borda em vez de vazar sobre o filete. */
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
display: flex;
align-items: center;
min-height: 44px; /* alvo de toque */
white-space: nowrap;
text-decoration: none;
color: var(--osso);
transition: color .18s ease;
}
.menu a:hover { color: var(--brasa); }
.placa.fixada .menu a { color: var(--cinza); }
.placa.fixada .menu a:hover { color: var(--osso); }
/* Fio laranja que se desenha da esquerda para a direita. É reforço, não o
único sinal: a cor do texto também muda, e o outline de foco continua
inteiro por cima. */
.menu a { position: relative; }
.menu a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: .5rem;
height: 2px;
background: var(--laranja);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--mov-medio) var(--curva);
}
.menu a:hover::after,
.menu a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.menu a::after { transition: none; }
}
/* Rotas do site dentro da mesma banda. GFIT Club e GFIT Eventos são itens de
navegação como os outros, então herdam a tipografia das âncoras — mesma
família, corpo, peso, caixa, entrelinha e espaçamento. O que as separa é
estrutural, não tipográfico: um filete à esquerda antes da primeira. O fio
laranja do hover continua igual ao das âncoras. */
.menu__rota { color: var(--osso); }
.menu .menu__rota:first-of-type {
margin-left: auto;
padding-left: .7rem;
border-left: 1px solid var(--grafite);
}
.menu .menu__rota + .menu__rota { padding-left: 0; }
.menu__rota:hover { color: var(--brasa); }
.placa.fixada .menu__rota:hover { color: var(--osso); }
/* Com as duas rotas (/club e /eventos) a banda passou a carregar sete itens.
Medido no navegador: sete rótulos + marca + CTA só cabem no limite de 1180px
a partir de 1200px de viewport. Abaixo disso a banda cortaria rótulos, então
o padrão de painel (o mesmo do celular) assume até 1199px — todos os links
continuam presentes, com alvo de toque maior. */
.placa .botao {
padding: .7rem 1.25rem;
font-size: .9rem;
margin-left: clamp(1rem, 2.5vw, 1.75rem);
flex-shrink: 0;
}
/* Botão de menu e véu do painel: só existem abaixo de 1200px. Na banda cheia
ficam fora da árvore de layout e a placa segue exatamente como aprovada. */
.menu-botao,
.menu-fundo { display: none; }
/* Abaixo de 1200px os links saem da banda e viram painel escuro sob a placa:
a faixa rolável comprimia os rótulos e cortava o último item. Era 928px
antes das rotas /club e /eventos; com sete itens o limite subiu. */
@media (max-width: 1199px) {
/* Até 928px o CTA da placa some porque a barra fixa inferior já carrega a
mesma ação; entre 929 e 1199px ele continua na banda, ao lado do botão. */
@media (max-width: 928px) {
.placa .botao { display: none; }
/* A marca fica à esquerda; o botão de menu ocupa a ponta direita. */
.envolve--placa { justify-content: space-between; }
.marca { padding-right: 1rem; }
}
.menu-botao {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
margin-left: auto;
min-width: 44px; /* alvo de toque */
min-height: 44px;
padding: 0 .35rem;
background: none;
border: 0;
color: var(--osso);
cursor: pointer;
font: inherit;
}
/* três traços desenhados em um span só: borda em cima e embaixo, fundo no
meio — o mesmo filete da placa, sem markup extra. */
.menu-botao__risco {
width: 22px;
height: 9px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
background:
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
background-clip: content-box;
padding-block: 1px;
box-sizing: content-box;
transition: border-color .18s ease;
}
.menu-botao__rotulo {
font-family: var(--dado);
font-size: .69rem;
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1;
}
.menu-botao[aria-expanded="true"] { color: var(--laranja); }
.menu-botao:focus-visible {
outline: 2px solid var(--laranja);
outline-offset: 3px;
}
/* Painel escuro ancorado na banda: nasce logo abaixo da placa e acompanha
a barra fixa, sem depender de position:fixed (o backdrop-filter da placa
rolada cria bloco de contenção e quebraria o fixed). */
.menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 2;
flex-direction: column;
align-items: stretch;
flex: none;
gap: 0;
max-height: calc(100svh - var(--barra));
overflow-y: auto;
padding: .5rem var(--gutter) 1.25rem;
background: rgba(11, 13, 12, .98);
backdrop-filter: blur(14px);
border: 0;
border-bottom: 2px solid var(--laranja);
-webkit-mask-image: none;
mask-image: none;
opacity: 0;
visibility: hidden;
transform: translateY(-.5rem);
/* A visibilidade some só ao fim do fade, mas volta no mesmo quadro ao
abrir — senão o foco inicial cairia num elemento ainda invisível. */
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.menu[data-aberto="true"] {
transition: opacity .22s ease, transform .22s ease, visibility 0s;
opacity: 1;
visibility: visible;
transform: none;
}
.menu a {
min-height: 56px; /* bem acima do piso de 44px */
padding-block: .35rem;
font-family: var(--dado);
font-size: .95rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--osso);
border-bottom: 1px solid var(--grafite);
}
.menu a:last-child { border-bottom: 0; }
/* No painel do celular o item já tem fio próprio; o sublinhado animado é
um recurso de ponteiro e sai de cena. */
.menu a::after { display: none; }
.menu a:focus-visible {
outline: 2px solid var(--laranja);
outline-offset: -2px;
}
/* Véu de clique-fora: cobre o resto da tela sem escurecer a placa. */
.menu-fundo {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 100svh;
z-index: 1;
background: rgba(11, 13, 12, .6);
}
.menu-fundo[hidden] { display: none; }
/* Enquanto o painel está aberto o fundo não rola. */
body.menu-aberto { overflow: hidden; }
/* No painel as rotas viram itens de lista como os demais — o filete lateral
do desktop não faz sentido em coluna. A separação passa a ser um traço
mais forte acima do primeiro item de rota. */
.menu__rota { color: var(--osso); }
.menu .menu__rota:first-of-type {
margin-left: 0;
padding-left: 0;
border-left: 0;
border-top: 2px solid var(--grafite);
margin-top: .35rem;
}
}
@media (prefers-reduced-motion: reduce) {
.menu { transition: none; }
}
/* ==========================================================================
HERO — a fachada real ao crepúsculo
========================================================================== */
.hero {
position: relative;
margin-top: calc(var(--barra) * -1);
min-height: 100svh;
display: flex;
align-items: flex-end;
padding-block: calc(var(--barra) + 3rem) clamp(4rem, 10vh, 7rem);
overflow: hidden;
}
/* A fachada agora tem fonte de 7204x4604 px, servida em AVIF/WebP por
com um corte 3:4 próprio para telas em retrato. O hero volta a ser full-bleed
puro: em qualquer viewport comum a variante escolhida é igual ou maior que a
caixa, então não há ampliação. */
.hero__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 45% mantém a placa iluminada acima da dobra do texto. */
object-position: center 45%;
filter: saturate(1.08) contrast(1.04);
/* Aproximação mínima na abertura: 3% de escala em pouco mais de um segundo.
Só transform — a imagem pinta no primeiro quadro já no lugar certo, então
o LCP não espera pela animação. Sem blur, sem filtro extra. */
}
.mov .hero__foto { animation: heroAproxima 1100ms var(--curva) both; }
@keyframes heroAproxima {
from { transform: scale(1.03); }
to { transform: scale(1); }
}
.hero__veu {
position: absolute;
inset: 0;
background:
/* A faixa central cedeu (.55 -> .40 e .62 -> .50) agora que a foto tem
resolução para ser vista. O topo e a base, onde ficam a placa fixa e o
texto do hero, mantêm exatamente a mesma opacidade de antes. */
linear-gradient(to bottom, rgba(11,13,12,.92) 0%, rgba(11,13,12,.40) 26%, rgba(11,13,12,.50) 55%, rgba(11,13,12,.93) 82%, var(--noite) 100%),
linear-gradient(to right, rgba(11,13,12,.82) 0%, rgba(11,13,12,.22) 62%, rgba(11,13,12,.45) 100%);
}
.hero .envolve { position: relative; z-index: 2; }
.hero h1 {
font-size: clamp(3.4rem, 11vw, 7.5rem);
line-height: .82;
max-width: 14ch;
}
.hero h1 span { display: block; }
.hero h1 .acento { color: var(--laranja); }
/* Uma palavra por linha em qualquer largura: o bloco já quebra por marcação,
e o nowrap impede que a própria palavra parta ao meio em telas estreitas. */
.hero h1 .linha__i { white-space: nowrap; }
/* Máscara por linha. O padding/margem compensados dão folga para acentos e
descidas sem abrir espaço no layout. */
.hero h1 .linha {
overflow: hidden;
padding-block: .14em;
margin-block: -.14em;
}
.mov .hero h1 .linha__i {
animation: linhaSobe 620ms var(--curva) both;
}
.hero h1 .linha:nth-child(1) .linha__i { animation-delay: .52s; }
.hero h1 .linha:nth-child(2) .linha__i { animation-delay: .64s; }
.hero h1 .linha:nth-child(3) .linha__i { animation-delay: .76s; }
@keyframes linhaSobe {
from { transform: translateY(105%); opacity: 0; }
to { transform: none; opacity: 1; }
}
.hero__local {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0 0 1.5rem;
}
.hero__texto {
margin: 1.75rem 0 2.25rem;
font-size: clamp(1.1rem, 2.2vw, 1.3rem);
color: var(--osso);
max-width: 44ch;
opacity: .92;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; }
/* Entrada orquestrada — a coreografia mora no CSS, não no markup.
O estado inicial invisível fica atrás de `.mov`, a classe que o script no
só coloca no quando o movimento é seguro. Sem JS, com
movimento reduzido ou em navegador antigo, nada nasce em `opacity: 0`:
o hero aparece inteiro no primeiro quadro. Fecha a pendência nº 1 da
sessão anterior. */
.mov .sobe {
opacity: 0;
transform: translateY(22px);
animation: sobe .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
/* Ordem: selo, três linhas do título (bloco acima), texto de apoio e por fim
os CTAs, com 130 ms entre eles. Tudo termina antes de 1,5 s. */
.sobe--1 { animation-delay: .34s; animation-duration: .58s; }
.sobe--3 { animation-delay: .92s; }
.sobe--4 { animation-delay: 1.04s; }
.sobe--5 { animation-delay: 1.17s; }
.sobe--6 { animation-delay: 1.30s; }
@keyframes sobe { to { opacity: 1; transform: none; } }
/* Fim da entrada: o keyframe sai e o elemento volta ao estado natural, o que
devolve o `transform` aos hovers dos CTAs. Ver o script no fim do HTML. */
.sobe.entrou { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sobe { animation: none; opacity: 1; transform: none; }
.hero__foto,
.hero h1 .linha__i { animation: none; }
.hero h1 .linha__i { opacity: 1; transform: none; }
}
/* ==========================================================================
FAIXA DE PROVA SOCIAL
========================================================================== */
.prova {
border-block: 1px solid var(--grafite);
background: var(--noite); /* mantém a alternância viva na 1ª fronteira */
}
.prova .envolve {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(1.5rem, 6vw, 4.5rem);
padding-block: 2.25rem;
}
.prova__item { display: flex; align-items: baseline; gap: .8rem; }
/* Ícone + número numa linha: a marca da fonte (estrela do Google, balão de
avaliação, glifo do Instagram) fica colada no valor, não no rótulo, para
ler como "5,0 estrelas" e não como decoração solta. Escala com o número
(width: 1em) e herda o laranja. Decorativo: aria-hidden no próprio SVG. */
.prova__valor { display: inline-flex; align-items: center; gap: .55rem; }
.prova__icone {
width: 1.35rem;
height: 1.35rem;
flex: none;
color: var(--laranja);
}
.prova__num {
font-family: var(--placa);
font-weight: 800;
font-size: clamp(1.9rem, 4vw, 2.6rem); /* abaixo do h2: não disputa nível */
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--laranja);
}
.prova__rot {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cinza);
max-width: 15ch;
}
.prova__fonte {
margin-left: auto;
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cinza);
}
/* --------------------------------------------------------------------------
Refino desktop (>= 929px): a placa fixa já assumiu o topo e a foto tem
largura para respirar. Nada aqui desce para tablet/mobile.
-------------------------------------------------------------------------- */
@media (min-width: 929px) {
/* Em monitores muito altos o 100svh puro abria um vazio grande acima do
texto. O teto de 940px mantém a fachada inteira sem esse buraco. */
.hero { min-height: min(100svh, 940px); }
/* O véu de desktop escurece só a coluna esquerda, onde mora o texto; a
direita — placa e logotipo da fachada — fica limpa. */
.hero__veu {
background:
linear-gradient(to bottom, rgba(11,13,12,.90) 0%, rgba(11,13,12,.34) 24%, rgba(11,13,12,.44) 52%, rgba(11,13,12,.90) 84%, var(--noite) 100%),
linear-gradient(to right, rgba(11,13,12,.88) 0%, rgba(11,13,12,.62) 34%, rgba(11,13,12,.10) 62%, rgba(11,13,12,.28) 100%);
}
/* 120px era o teto antigo e chegava já em 1091px de viewport: três linhas
de caixa alta ocupavam 295px e empurravam o CTA para o rodapé da foto.
100px mantém a hierarquia e devolve ar entre headline, texto e ação. */
.hero h1 {
font-size: clamp(4.5rem, 7vw, 6.25rem);
line-height: .86;
letter-spacing: -.015em;
max-width: 12ch;
}
.hero__local {
display: flex;
align-items: center;
gap: .7rem;
margin-bottom: 1.15rem;
}
/* filete âmbar: marca a localização como metadado, não como frase */
.hero__local::before {
content: '';
width: 2rem;
height: 1px;
background: var(--laranja);
flex: none;
}
.hero__texto {
margin: 1.35rem 0 2rem;
max-width: 40ch;
}
/* Faixa de prova social: três indicadores de largura igual, separados por
filete discreto. Os números seguem em laranja, mas abaixo do h2 — a
faixa é secundária ao CTA do hero. */
.prova .envolve {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-block: 1.4rem;
}
.prova__item {
flex-direction: column;
align-items: flex-start;
gap: .3rem;
padding-inline: clamp(1rem, 3.5vw, 3rem);
border-left: 1px solid var(--grafite);
}
.prova__item:first-child {
border-left: 0;
padding-left: 0;
}
.prova__num { font-size: clamp(2rem, 2.8vw, 2.4rem); }
.prova__rot { max-width: 18ch; }
.prova__fonte {
grid-column: 1 / -1;
margin: 1.05rem 0 0;
padding-top: .85rem;
border-top: 1px solid var(--grafite);
font-size: .7rem;
color: #8b9294; /* mesmo cinza AA já usado no rodapé */
}
}
/* ==========================================================================
SEÇÕES
========================================================================== */
.secao { padding-block: clamp(4.5rem, 11vh, 8rem); }
.secao--carvao { background: var(--carvao); }
.secao__cabeca { max-width: 60ch; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.secao__cabeca .chamada { margin-top: 1.25rem; }
/* --- Pilares: a taxonomia da própria placa da fachada ------------------- */
.pilares {
display: grid;
gap: 1px;
background: var(--grafite);
border: 1px solid var(--grafite);
}
@media (min-width: 900px) {
.pilares { grid-template-columns: repeat(3, 1fr); }
}
/* As três colunas são divididas por filete laranja — a mesma divisão que a
placa faz no galpão. Só entra a partir de 929px, quando a placa desktop
assume: entre 900 e 928px a barra móvel ainda está na tela e o laranja
somaria um quinto traço. */
@media (min-width: 929px) {
.pilares {
gap: 2px;
background: var(--laranja);
}
}
.pilar {
background: var(--noite);
padding: clamp(1.75rem, 3.5vw, 2.5rem);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1.25rem;
}
.secao--carvao .pilar { background: var(--carvao); }
.pilar__topo {
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--grafite);
}
/* Um único recurso de diferenciação por modalidade: o ícone. Sem imagem,
sem fundo extra — só a silhueta e o acento laranja. */
.pilar__icone {
display: block;
margin-bottom: .9rem;
color: var(--laranja);
}
.pilar h3 {
font-size: clamp(1.6rem, 3.2vw, 2.1rem);
letter-spacing: .01em;
}
.pilar p { color: var(--cinza); font-size: .98rem; }
.lista-modal {
list-style: none;
margin: auto 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.lista-modal li {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .06em;
color: var(--osso);
border: 1px solid var(--grafite);
padding: .4rem .75rem;
border-radius: 2px;
}
/* --- Turmas e horários --------------------------------------------------- */
.turmas { margin-top: 3.5rem; }
.turmas h3 {
font-family: var(--dado);
font-size: .85rem;
font-weight: 500;
letter-spacing: .15em;
color: var(--laranja);
}
.turmas .equipamentos { margin-top: 1.5rem; }
/* --- Complementares ----------------------------------------------------- */
.complementos {
margin-top: 2.5rem;
padding: 1.75rem;
border: 1px dashed var(--grafite);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
}
.complementos strong {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--laranja);
font-weight: 500;
}
.complementos ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .5rem 1.25rem;
margin: 0;
padding: 0;
font-size: .95rem;
color: var(--cinza);
}
.complementos li { position: relative; }
.complementos li + li::before {
content: "";
position: absolute;
left: -.7rem;
top: .55em;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--grafite);
}
/* --- Marca-d'água -------------------------------------------------------
Recurso de profundidade, nunca de informação. O arquivo é o símbolo real da
GFIT (@academia.gfit) em PNG com fundo transparente: o traço laranja pousa
direto sobre a superfície escura da seção, sem moldura e sem truque de
composição. Fica sempre atrás do conteúdo (.envolve tem z-index maior),
nunca recebe ponteiro e é ignorada por leitores de tela. Posição, escala e
recorte mudam a cada seção para não virar padrão repetido.
------------------------------------------------------------------------ */
.secao--marcada { position: relative; }
.marca-agua-camada {
position: absolute;
inset: 0;
overflow: hidden; /* nenhum recorte vaza como rolagem horizontal */
pointer-events: none;
z-index: 0;
}
.secao--marcada > .envolve,
.fecho > .envolve { position: relative; z-index: 1; }
.marca-agua {
position: absolute;
max-width: none;
height: auto;
/* O arquivo é PNG com fundo transparente: o traço já chega recortado. Sem
blend, sem filtro e sem fundo — qualquer um dos três recriaria a moldura
retangular que a marca-d'água não deve ter. A presença vem só da
opacidade definida por seção. */
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-user-select: none;
user-select: none;
}
/* Modalidades: escala ampla, ancorada na metade inferior da lateral
direita e recortada pela borda. Os cards ocupam a faixa central e a
sobrancelha/título ficam no topo à esquerda, então a marca cresce sem passar
por baixo de texto ou de card. */
.marca-agua--modalidades {
width: clamp(260px, 34vw, 520px);
bottom: -18%;
right: -18%;
opacity: .07;
transform: rotate(4deg);
}
/* Até 900px os cards passam a uma coluna e ocupam a largura toda: a marca
recua para o canto inferior, menor e mais apagada. */
/* Abaixo de 900px a textura fotográfica passa a ocupar a quina inferior
direita — a mesma que a marca usava. Entre foto e símbolo, a foto é a camada
que carrega a seção; o símbolo sai para não empilhar duas manchas no mesmo
canto de uma tela estreita. */
@media (max-width: 899.98px) {
.marca-agua--modalidades { display: none; }
}
/* --- Modalidades: composição de fundo -----------------------------------
Três camadas, da mais funda para a mais próxima: (1) o carvão da seção,
intocado; (2) a textura fotográfica real da sala de cross training; (3) um
traçado técnico diagonal em laranja, no mesmo ângulo do corte da placa da
fachada. A marca-d'água do símbolo fecha a composição pela quina. Nenhuma
das camadas recebe ponteiro, todas são ignoradas por leitor de tela e o
recorte é contido pela própria seção — sem rolagem horizontal.
------------------------------------------------------------------------ */
#modalidades {
overflow: hidden;
overflow: clip; /* clip não cria contêiner de rolagem */
}
/* A textura é filha da camada decorativa da seção (inset: 0, overflow: clip).
Antes ela morava dentro de .secao__cabeca — uma caixa de largura 60ch e de
altura definida pela quebra do texto. Como a própria textura era dimensionada
em vw e deslocada em % dessa caixa, ao arrastar a janela de mobile para
desktop os dois eixos mudavam por critérios diferentes (métrica de fonte vs.
viewport) e a mancha saía de posição — divergência que só sumia recarregando.
Ancorada na seção, largura e recorte passam a depender só do viewport e da
caixa da seção, ambos reavaliados nativamente a cada redimensionamento. */
.cena-treino {
position: absolute;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
/* Uma base estável em vez de srcset: o navegador nunca reescolhe candidato
ao encolher a janela, então mantinha a decisão da primeira
largura. image-set entrega avif/webp por suporte de formato, não por
largura — comportamento idêntico em qualquer viewport. */
background-image: url("imagens/textura-treino-960.webp");
background-image: image-set(
url("imagens/textura-treino-960.avif") type("image/avif"),
url("imagens/textura-treino-960.webp") type("image/webp"));
background-repeat: no-repeat;
/* cover + position recorta a faixa de equipamento (pneus, barra, caixote) e
descarta piso e teto vazios: silhueta reconhecível sem aumentar opacidade. */
background-size: cover;
background-position: 32% 66%;
/* Contraste local para destacar as silhuetas do carvão. A máscara elíptica
impede que o filtro revele qualquer borda retangular. */
filter: contrast(1.22) brightness(.92);
/* Recorte suave: a foto chega como mancha, sem borda, canto ou retângulo. */
-webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 52%, #000 18%, transparent 76%);
mask-image: radial-gradient(ellipse 62% 68% at 50% 52%, #000 18%, transparent 76%);
/* Mobile: os cartões têm fundo carvão opaco e ocupam a largura toda, então a
mancha desce para a quina inferior direita da seção — abaixo do último
cartão, sem passar por trás de texto. Offsets em % da seção, nunca do
texto. */
width: clamp(230px, 62vw, 380px);
aspect-ratio: 3 / 2;
right: -16%;
/* Offset em px, não em %: a seção é muito alta no celular e qualquer
percentual de altura jogaria a mancha inteira para fora do recorte. */
bottom: -80px;
opacity: .28;
}
@media (min-width: 900px) {
/* Desktop: a textura ocupa a lateral direita, onde a coluna de leitura de
60ch não chega, e desce até a linha dos cartões. */
.cena-treino {
width: clamp(360px, 46vw, 660px);
right: -18%;
bottom: auto; /* anula a âncora inferior do mobile */
top: 12%;
opacity: .30;
}
}
/* Traçado técnico: filetes diagonais no laranja da marca, em opacidade de
acento. Vive no ::before da camada decorativa — sem elemento extra no DOM. */
#modalidades .marca-agua-camada::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
115deg,
transparent 0 54px,
rgba(242, 106, 33, .55) 54px 55px,
transparent 55px 116px);
/* A textura fotográfica agora ocupa a lateral direita com mais presença. Para
foto e filetes não disputarem a mesma área, os filetes recuam para a faixa
superior esquerda e perdem intensidade — a foto é a camada principal. */
-webkit-mask-image: radial-gradient(ellipse 60% 46% at 14% 12%, #000, transparent 72%);
mask-image: radial-gradient(ellipse 60% 46% at 14% 12%, #000, transparent 72%);
opacity: .035;
}
@media (max-width: 899.98px) {
#modalidades .marca-agua-camada::before {
background-size: auto;
-webkit-mask-image: radial-gradient(ellipse 78% 22% at 20% 6%, #000, transparent 74%);
mask-image: radial-gradient(ellipse 78% 22% at 20% 6%, #000, transparent 74%);
opacity: .03;
}
}
/* Além da academia: mesma marca pela lateral esquerda e giro oposto ao do
bloco de cuidado, para o trecho não repetir a mesma composição duas vezes.
Os cartões formam duas colunas a partir de 768px; a marca fica abaixo deles,
colada na borda. */
.marca-agua--alem {
width: clamp(240px, 32vw, 460px);
bottom: -18%;
left: -14%;
opacity: .055;
transform: rotate(8deg);
}
@media (max-width: 640px) {
.marca-agua--alem {
width: clamp(180px, 44vw, 280px);
bottom: -5%;
left: -24%;
opacity: .045;
}
}
/* Por que treinar aqui: bloco puramente textual, então a marca entra na menor
opacidade da página e presa à margem direita — a coluna de leitura tem no
máximo --limite, de modo que a partir de 1180px + gutter a marca cai fora
dela. Abaixo disso o texto ocuparia a largura toda, então a marca sai. */
/* --- Por que treinar aqui: composição de fundo ---------------------------
Seção só de texto — nada de fotografia, que roubaria contraste da leitura.
A profundidade vem de três camadas de identidade, todas em CSS: (1) um leve
degradê de carvão para noite, que separa a seção das vizinhas; (2) traços
de movimento no mesmo ângulo de corte da placa da fachada, presos ao canto
inferior direito; (3) o símbolo da GFIT em escala ampla, recortado pela
lateral esquerda. A partir de 1024px os cartões têm fundo carvão opaco, de
modo que a decoração só aparece nas calhas; abaixo disso ela fica na base da
seção, fora da coluna de leitura. Nada disso recebe ponteiro e tudo é
ignorado por leitor de tela. -------------------------------------------- */
#motivos {
overflow: hidden;
overflow: clip;
}
/* (1) Degradê de superfície: variação mínima de luminância, sem cor nova. */
#motivos .marca-agua-camada {
background:
radial-gradient(120% 80% at 8% 0%, rgba(255, 255, 255, .028), transparent 62%),
linear-gradient(180deg, transparent 55%, rgba(11, 13, 12, .55) 100%);
}
/* (2) Traços de movimento: filetes finos no laranja da marca, mais raros que
os de Modalidades para as duas seções não repetirem a mesma textura. */
#motivos .marca-agua-camada::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
115deg,
transparent 0 76px,
rgba(242, 106, 33, .5) 76px 77px,
transparent 77px 160px);
-webkit-mask-image: radial-gradient(ellipse 66% 40% at 92% 92%, #000, transparent 70%);
mask-image: radial-gradient(ellipse 66% 40% at 92% 92%, #000, transparent 70%);
opacity: .045;
}
@media (max-width: 1023.98px) {
/* Mobile/tablet: os blocos de motivo são transparentes, então os traços
ficam só na faixa mais baixa da seção, menores e mais apagados. */
#motivos .marca-agua-camada::before {
-webkit-mask-image: radial-gradient(ellipse 70% 16% at 84% 97%, #000, transparent 76%);
mask-image: radial-gradient(ellipse 70% 16% at 84% 97%, #000, transparent 76%);
opacity: .03;
}
}
/* (3) Símbolo: no celular sai de cena — a coluna de texto ocupa a largura
inteira e qualquer marca cairia atrás de frase. Volta a partir de 768px pela
lateral esquerda, abaixo da linha do título, e cresce no desktop ocupando o
espaço negativo à esquerda dos cartões. */
.marca-agua--motivos { display: none; }
@media (min-width: 768px) {
.marca-agua--motivos {
display: block;
width: clamp(280px, 34vw, 520px);
bottom: -16%;
left: -22%;
opacity: .04;
transform: rotate(-6deg);
}
}
@media (min-width: 1180px) {
.marca-agua--motivos {
width: clamp(380px, 32vw, 560px);
bottom: -20%;
left: -15%;
opacity: .05;
}
}
/* --- Onde estamos: assinatura de fundo -----------------------------------
A seção de localização não repete o símbolo (que já aparece em quatro
blocos) nem uma foto (a fachada real já é a estrela, à direita). A
identidade vem de duas camadas em CSS: (1) degradê de superfície que separa
a seção do rodapé; (2) traços técnicos no mesmo ângulo do corte da placa da
fachada, ancorados no espaço negativo abaixo da foto no desktop — nunca sob
a coluna de contatos. Decorativa: sem ponteiro, ignorada por leitor de tela,
contida pela própria seção sem gerar rolagem horizontal.
------------------------------------------------------------------------ */
#local {
overflow: hidden;
overflow: clip;
}
/* (1) Degradê de superfície: leve realce no topo, queda para o rodapé. */
#local .marca-agua-camada {
background:
radial-gradient(100% 60% at 92% 4%, rgba(255, 255, 255, .022), transparent 60%),
linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .35) 100%);
}
/* (2) Traços técnicos: mobile — faixa fina e apagada na base da seção, longe
da coluna de texto que aqui ocupa a largura toda. */
#local .marca-agua-camada::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
115deg,
transparent 0 80px,
rgba(242, 106, 33, .5) 80px 81px,
transparent 81px 168px);
-webkit-mask-image: radial-gradient(ellipse 82% 16% at 76% 98%, #000, transparent 78%);
mask-image: radial-gradient(ellipse 82% 16% at 76% 98%, #000, transparent 78%);
opacity: .055;
}
@media (min-width: 929px) {
/* Desktop: a foto (sticky, ~34rem) deixa livre a quina inferior direita da
seção quando os contatos são mais altos que ela. Os traços moram ali —
fora da coluna de leitura à esquerda e abaixo da figura à direita. */
#local .marca-agua-camada::before {
-webkit-mask-image: radial-gradient(ellipse 52% 46% at 90% 90%, #000, transparent 74%);
mask-image: radial-gradient(ellipse 52% 46% at 90% 90%, #000, transparent 74%);
opacity: .09;
}
}
/* Fecho: versão mais expressiva, recortada pela quina inferior direita. O
texto do fecho é centralizado, então a quina fica livre. */
.marca-agua--fecho {
width: clamp(260px, 44vw, 520px);
bottom: -26%;
right: -19%;
opacity: .12;
transform: rotate(6deg);
}
@media (max-width: 640px) {
.marca-agua--fecho { bottom: -12%; right: -30%; opacity: .10; }
}
/* Assinatura de fundo do CTA: traços técnicos ancorados na quina inferior
ESQUERDA (a marca d'água ocupa a direita) e num ângulo próprio — 25°, contra
os 115° do #local — para o fecho não repetir nenhuma outra seção. Some com o
halo âmbar do topo e separa o CTA da superfície lisa do rodapé. Decorativo:
dentro de .marca-agua-camada (inset:0, overflow:hidden, pointer-events:none),
então nunca gera rolagem. */
.fecho .marca-agua-camada::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
25deg,
transparent 0 78px,
rgba(242, 106, 33, .5) 78px 79px,
transparent 79px 164px);
-webkit-mask-image: radial-gradient(ellipse 60% 52% at 8% 100%, #000, transparent 76%);
mask-image: radial-gradient(ellipse 60% 52% at 8% 100%, #000, transparent 76%);
opacity: .06;
}
@media (max-width: 640px) {
/* No celular o bloco é estreito e alto: a quina inferior encolhe a faixa,
então ela sobe um pouco e clareia de leve para continuar perceptível. */
.fecho .marca-agua-camada::before {
-webkit-mask-image: radial-gradient(ellipse 96% 34% at 14% 96%, #000, transparent 80%);
mask-image: radial-gradient(ellipse 96% 34% at 14% 96%, #000, transparent 80%);
opacity: .07;
}
}
/* --- Cuidado complementar: Fisioterapia e Nutrição -----------------------
Entre duas seções de fundo escuro igual, a separação vem dos filetes e da
composição de fundo própria — não de mais uma troca de cor.
------------------------------------------------------------------------ */
.secao--cuidado {
border-top: 1px solid var(--grafite);
border-bottom: 1px solid var(--grafite);
}
.cuidado__halo {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 62% 58% at 76% 14%,
rgba(242, 106, 33, .11), transparent 70%);
}
.marca-agua--cuidado {
width: clamp(280px, 40vw, 520px);
bottom: -22%;
left: -12%;
opacity: .09;
transform: rotate(-9deg);
}
@media (max-width: 640px) {
.marca-agua--cuidado { bottom: -8%; left: -26%; opacity: .08; }
}
.cuidados {
display: grid;
gap: 1px;
background: var(--grafite);
border: 1px solid var(--grafite);
}
/* Duas colunas assim que couberem: os dois serviços têm o mesmo peso. */
@media (min-width: 760px) {
.cuidados { grid-template-columns: repeat(2, 1fr); }
}
.cuidado {
background: var(--noite);
padding: clamp(1.75rem, 3.5vw, 2.5rem);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1.25rem;
}
.cuidado__topo {
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--grafite);
}
.cuidado__icone {
display: block;
margin-bottom: .9rem;
color: var(--laranja);
}
.cuidado h3 {
font-size: clamp(1.6rem, 3.2vw, 2.1rem);
letter-spacing: .01em;
}
.cuidado p { color: var(--cinza); font-size: .98rem; }
/* Largura cheia no celular (alvo de toque generoso), ajustada ao texto a
partir de 420px. */
.cuidado__acao {
justify-self: stretch;
align-self: end;
text-align: center;
}
@media (min-width: 420px) {
.cuidado__acao { justify-self: start; }
}
/* Em 320px o rótulo quebrava em duas linhas dentro do botão. */
@media (max-width: 400px) {
.cuidado__acao { padding-inline: 1.1rem; font-size: .95rem; }
}
/* --- Acordeão e Galerias (Estrutura) -------------------------------------- */
.acordeao {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--grafite);
border: 1px solid var(--grafite);
}
.acordeao__item {
background: var(--noite);
display: flex;
flex-direction: column;
min-width: 0; /* previne overflow intrínseco em flex */
position: relative;
transition: background-color .22s ease;
}
/* Estado aberto: fundo sutilmente distinto + filete laranja na borda esquerda.
Itens fechados permanecem neutros — nenhuma marcação até o hover. */
.acordeao__item--aberto {
background: var(--carvao);
}
.acordeao__item--aberto::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--laranja);
pointer-events: none;
}
.acordeao__gatilho {
all: unset;
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.5rem);
cursor: pointer;
background: transparent;
transition: background-color .2s ease;
}
.acordeao__gatilho:hover,
.acordeao__gatilho:focus-visible {
background: var(--carvao);
}
/* No item aberto o gatilho não recebe realce extra de hover — o próprio
item já está destacado e um segundo tom leria como estado diferente. */
.acordeao__item--aberto .acordeao__gatilho:hover {
background: transparent;
}
.acordeao__gatilho:focus-visible {
outline: 2px solid var(--brasa);
outline-offset: -2px;
}
.acordeao__cabeca { margin: 0; }
/* Ícone da categoria + rótulo formam o grupo à esquerda; o +/− continua sendo
o segundo filho do gatilho, empurrado pelo space-between. O ícone repete o
mesmo desenho do pilar correspondente em Modalidades — costura visual entre
as duas seções que falam dos mesmos espaços. Decorativo: aria-hidden. */
.acordeao__esq {
display: flex;
align-items: center;
gap: clamp(.8rem, 2vw, 1.15rem);
min-width: 0;
}
.acordeao__marca {
display: block;
flex: none;
color: var(--laranja);
transition: color .2s ease;
}
.acordeao__marca svg {
display: block;
width: clamp(1.6rem, 3.4vw, 2rem);
height: auto;
}
.acordeao__rotulo {
font-size: clamp(1.4rem, 2.8vw, 1.9rem);
margin: 0;
color: var(--osso);
transition: color .2s ease;
}
.acordeao__item--aberto .acordeao__rotulo,
.acordeao__gatilho:hover .acordeao__rotulo {
color: var(--laranja);
}
.acordeao__icone {
position: relative;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.acordeao__icone::before,
.acordeao__icone::after {
content: "";
position: absolute;
background: var(--cinza);
transition: transform .22s ease, opacity .22s ease, background-color .2s ease;
}
.acordeao__icone::before {
top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px;
}
.acordeao__icone::after {
left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
}
.acordeao__item--aberto .acordeao__icone::before,
.acordeao__gatilho:hover .acordeao__icone::before,
.acordeao__gatilho:focus-visible .acordeao__icone::before,
.acordeao__item--aberto .acordeao__icone::after,
.acordeao__gatilho:hover .acordeao__icone::after,
.acordeao__gatilho:focus-visible .acordeao__icone::after {
background: var(--laranja);
}
/* Aberto = sinal de menos: a barra vertical some, a horizontal permanece. */
.acordeao__item--aberto .acordeao__icone::after {
transform: scaleY(0);
opacity: 0;
}
.acordeao__painel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .26s cubic-bezier(0.4, 0, 0.2, 1);
}
.acordeao__painel:not([hidden]) {
grid-template-rows: 1fr;
}
.acordeao__conteudo {
overflow: hidden;
min-width: 0; /* filho de grid — não vazar */
padding: 0 clamp(1.5rem, 4vw, 2.5rem);
}
.acordeao__painel:not([hidden]) .acordeao__conteudo {
padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.acordeao__conteudo > p {
color: var(--cinza);
font-size: .98rem;
margin: 0 0 1.5rem 0;
max-width: 65ch;
}
/* ── Galeria de fotos ──────────────────────────────────────────────────── */
.carrossel {
position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid var(--grafite);
background: var(--carvao);
overflow: hidden;
}
.carrossel:focus-visible {
outline: 2px solid var(--brasa);
outline-offset: 2px;
}
/* ── Mobile: scroll horizontal ────────────────────────────────────────── */
.carrossel__trilha {
display: flex;
gap: 2px;
background: var(--grafite);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.carrossel__trilha::-webkit-scrollbar {
display: none;
}
.carrossel__trilha li {
scroll-snap-align: center;
flex: 0 0 92%;
min-width: 0;
background: var(--noite);
}
/* envolve a ![]()
: precisa ser bloco de mesma medida, senão no grid
do desktop (li height:100%) o wrapper inline colapsa e a foto some. */
.carrossel__trilha picture {
display: block;
width: 100%;
height: 100%;
}
.carrossel__trilha img {
width: 100%;
height: auto; /* dimensão de exibição vem do aspect-ratio, não do atributo */
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
display: block;
}
/* Fotos de origem retrato (960×1280): em 4:3 o corte central corta cabeça ou
pés. Sobe o ponto de foco para preservar o assunto. */
.carrossel[data-formato="retrato"] .carrossel__trilha img {
object-position: center 30%;
}
/* Contador + instrução de arraste — só existe onde há navegação (rolagem
mobile). Some no grid do desktop, onde todas as fotos já estão visíveis. */
.carrossel__contador {
margin: .6rem 0 0;
padding: 0 .1rem;
color: var(--cinza);
font-family: var(--dado);
font-size: .72rem;
letter-spacing: .04em;
text-align: center;
}
/* ── Tablet: cards um pouco menores ───────────────────────────────────── */
@media (min-width: 768px) {
.carrossel__trilha li {
flex: 0 0 75%;
}
}
/* ── Desktop: grid editorial, todas visíveis ──────────────────────────── */
@media (min-width: 900px) {
/* Sem navegação no desktop — todas as fotos já cabem no grid. */
.carrossel__contador {
display: none;
}
.carrossel__trilha {
/* Troca flex-scroll por grid estático — todas as fotos cabem no painel */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-rows: 100%;
/* A ALTURA DA FAIXA VEM DA LARGURA ÚTIL DO PAINEL, não da quantidade de
fotos: a composição inteira encolhe/cresce em proporção com o painel. */
aspect-ratio: 16 / 7;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
gap: 2px;
}
/* Itens preenchem a altura da faixa; recorte fica por conta do object-fit */
.carrossel__trilha li {
min-width: 0;
min-height: 0;
height: 100%;
aspect-ratio: auto;
}
.carrossel__trilha li img {
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
display: block;
}
/* 2 itens: duas colunas iguais */
.carrossel__trilha:has(li:nth-child(2):last-child) {
grid-template-columns: 1fr 1fr;
aspect-ratio: 16 / 6.5;
}
/* 3 itens: composição editorial — centro em destaque, laterais de contexto */
.carrossel__trilha:has(li:nth-child(3):last-child) {
grid-template-columns: minmax(0, .78fr) minmax(0, 1.44fr) minmax(0, .78fr);
aspect-ratio: 16 / 6.8;
}
/* As laterais são contexto: recuam um passo de luminosidade para que a
imagem central conduza a leitura. */
.carrossel__trilha:has(li:nth-child(3):last-child) > li:first-child img,
.carrossel__trilha:has(li:nth-child(3):last-child) > li:last-child img {
filter: brightness(.82) saturate(.92);
transition: filter .25s ease;
}
.carrossel:hover .carrossel__trilha > li img,
.carrossel:focus-within .carrossel__trilha > li img {
filter: none;
}
/* Fotos de origem retrato (960×1280): faixa mais alta, para que o recorte
preserve o assunto em vez de cortar cabeça e pés. */
.carrossel[data-formato="retrato"] .carrossel__trilha,
.carrossel[data-formato="retrato"] .carrossel__trilha:has(li:nth-child(3):last-child) {
aspect-ratio: 16 / 8.6;
}
.carrossel[data-formato="retrato"] .carrossel__trilha img {
object-position: center 38%;
}
/* 4 itens: laterais menores, dupla central em destaque */
.carrossel__trilha:has(li:nth-child(4):last-child) {
grid-template-columns:
minmax(0, .95fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, .95fr);
aspect-ratio: 16 / 6;
}
}
/* ── Telas intermediárias grandes: faixa um pouco mais alta ───────────── */
@media (min-width: 900px) and (max-width: 1199px) {
.carrossel__trilha { aspect-ratio: 16 / 8; }
.carrossel__trilha:has(li:nth-child(2):last-child) { aspect-ratio: 16 / 7.5; }
}
/* Em telas muito largas a faixa não deve virar um painel gigante. */
@media (min-width: 1600px) {
.carrossel__trilha { max-height: 460px; }
.carrossel[data-formato="retrato"] .carrossel__trilha { max-height: 540px; }
}
@media (prefers-reduced-motion: reduce) {
.carrossel__trilha { scroll-behavior: auto; }
.acordeao__item,
.acordeao__gatilho,
.acordeao__painel,
.acordeao__icone::before,
.acordeao__icone::after,
.carrossel__trilha li img {
transition: none;
}
}
/* Estado pendente — sem fotos. Compacto e honesto: nenhuma galeria falsa. */
.carrossel--vazio {
aspect-ratio: auto;
min-height: 0;
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--grafite);
background: var(--noite);
}
.aviso-pendencia {
display: flex;
align-items: center;
gap: .6rem;
color: var(--cinza);
font-family: var(--dado);
font-size: .85rem;
letter-spacing: .05em;
text-align: center;
}
.aviso-pendencia__icone {
font-size: 1.05rem;
opacity: .6;
line-height: 1;
}
.equipamentos {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
border-top: 1px solid var(--grafite);
}
.equipamentos li {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--grafite);
font-size: .98rem;
}
.equipamentos b {
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--laranja);
font-weight: 500;
min-width: 7.5rem; /* mesmo valor de .contatos b — um só padrão de rótulo */
flex-shrink: 0;
}
.equipamentos span { color: var(--cinza); }
/* --- Motivos ------------------------------------------------------------ */
.motivos {
display: flex;
flex-direction: column;
}
.motivo {
background: transparent;
padding: 2rem 0;
border-bottom: 1px solid var(--grafite);
}
.motivo:last-child { border-bottom: none; padding-bottom: 0; }
.motivo:first-child { padding-top: 0; }
/* Mesma doutrina do .pilar: dentro de seção carvão, o bloco não vira cartão (mobile/tablet). */
.secao--carvao .motivo { background: transparent; }
.motivo__numero {
display: block;
font-family: var(--dado);
font-size: 1.2rem;
color: var(--laranja);
margin-bottom: 1.2rem;
}
.motivo__icone {
display: block;
color: var(--laranja);
margin-bottom: 1.2rem;
}
.motivo strong { color: var(--osso); font-weight: 600; }
/* A partir daqui o motivo vira card: grid 2x2, borda própria, numeração como
âncora estrutural. Abaixo de 1024px a lista fica em coluna única (herda o
bloco acima) para não repetir a densidade que os prompts de mobile já ajustaram. */
@media (min-width: 1024px) {
.motivos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.motivo {
min-width: 0;
padding: 2rem;
border: 1px solid var(--grafite);
border-radius: 2px;
transition: border-color .2s ease, background-color .2s ease;
}
.motivo:first-child { padding-top: 2rem; }
.motivo:last-child { padding-bottom: 2rem; }
.secao--carvao .motivo { background: var(--carvao); }
.motivo:hover { border-color: #33393c; background: #191d1f; }
@media (prefers-reduced-motion: reduce) { .motivo { transition: none; } }
.motivo--destaque {
border-top: 2px solid var(--laranja);
}
.motivo__numero {
font-size: 1.6rem;
color: var(--laranja);
/* .55 media 2,58:1 sobre o cartão — abaixo do mínimo 3:1 para texto
grande. .72 mantém o número em segundo plano e passa o critério. */
opacity: .72;
margin-bottom: 1.2rem;
font-weight: 300;
}
.motivo--destaque .motivo__numero { opacity: 1; }
.motivo__icone {
width: 26px;
height: 26px;
margin-bottom: 1.2rem;
color: var(--laranja);
opacity: .8;
}
}
@media (min-width: 1440px) {
.motivos { gap: 2rem; }
.motivo { padding: 2.5rem; }
.motivo:first-child { padding-top: 2.5rem; }
.motivo:last-child { padding-bottom: 2.5rem; }
}
/* Estes h3 carregam frases inteiras — precisam de entrelinha de leitura,
não da entrelinha de letreiro. */
.motivo h3 {
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
line-height: 1.02;
margin-bottom: .85rem;
letter-spacing: .015em;
}
.motivo p { color: var(--cinza); font-size: .98rem; }
/* --- Além da academia (rotas /club e /eventos) -------------------------- *
Dois cartões irmãos, mesmo peso. Vocabulário emprestado do cartão de
motivo — mesma superfície carvão, mesmo filete, mesmo raio de 2px — para
lerem como extensão da página, não como banner colado. O que muda é o fio
superior: ele nasce grafite e acende laranja no hover/foco.
-------------------------------------------------------------------------- */
/* Estrutura e Além dividem o mesmo fundo, então as duas respirações se somavam
num vão morto de até 16rem entre o fim do acordeão e a sobrancelha "Além da
academia". Cada lado cede metade: a Estrutura fecha mais cedo e o Além abre
mais cedo. O par continua separado — só deixa de parecer corte. */
#estrutura { padding-bottom: clamp(2.75rem, 6vh, 4.25rem); }
.secao--alem { padding-top: clamp(2.75rem, 6vh, 4.25rem); }
/* Banda horizontal única em vez de dois cartões soltos: quebra o ritmo de
grade repetido em Modalidades e Motivos. Uma só superfície, dividida por
um filete interno — vertical no desktop, horizontal no celular. */
.alem {
display: grid;
gap: 0;
background: var(--carvao);
border: 1px solid var(--grafite);
border-top: 2px solid var(--laranja);
border-radius: 2px;
overflow: hidden;
}
@media (min-width: 768px) {
.alem {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.alem__cartao {
position: relative; /* âncora do link esticado */
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .9rem;
padding: clamp(1.5rem, 4vw, 2.25rem);
transition: background var(--mov-curto) ease;
}
/* Divisória entre as duas zonas da banda. */
.alem__cartao + .alem__cartao { border-top: 1px solid var(--grafite); }
@media (min-width: 768px) {
.alem__cartao + .alem__cartao {
border-top: 0;
border-left: 1px solid var(--grafite);
}
}
.alem__titulo {
font-size: clamp(1.5rem, 3.2vw, 2rem);
line-height: 1;
letter-spacing: .015em;
}
.alem__cartao p {
margin: 0;
color: var(--cinza);
font-size: .98rem;
max-width: 42ch;
}
.alem__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px; /* alvo de toque */
padding: .55rem .25rem;
font-weight: 700;
font-size: .95rem;
color: var(--crepusculo);
text-decoration: none;
border-bottom: 2px solid rgba(232, 161, 58, .35);
}
/* O cartão inteiro vira alvo de ponteiro, mas o alvo acessível continua sendo
um único link com rótulo explícito — nada depende de hover. */
.alem__link::after {
content: "";
position: absolute;
inset: 0;
}
.alem__seta { font-size: 1.15rem; line-height: 1; }
.alem__cartao:hover,
.alem__cartao:focus-within {
background: #191d1f;
}
.alem__cartao:hover .alem__link,
.alem__cartao:focus-within .alem__link {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
/* --- Quinto bloco dos motivos ------------------------------------------- */
/* No celular segue a doutrina da lista: bloco separado por filete. A partir de
1024px ocupa as duas colunas (1x2) e distribui texto à esquerda, ação à
direita — largura cheia com texto curto sobraria espaço em coluna única. */
.motivo__link {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
margin-top: 1.25rem;
padding: .55rem .25rem;
font-weight: 700;
font-size: .95rem;
color: var(--crepusculo);
text-decoration: none;
border-bottom: 2px solid rgba(232, 161, 58, .35);
}
.motivo__link:hover {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
.motivo__seta { font-size: 1.15rem; line-height: 1; }
@media (min-width: 1024px) {
.motivo--comunidade {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: clamp(1.5rem, 4vw, 3rem);
}
.motivo--comunidade h3 { grid-column: 1; margin-bottom: .6rem; }
.motivo--comunidade p { grid-column: 1; margin: 0; max-width: 62ch; }
.motivo--comunidade .motivo__link {
grid-column: 2;
grid-row: 1 / 3;
margin-top: 0;
white-space: nowrap;
}
}
/* --- Localização -------------------------------------------------------- */
.local {
display: grid;
gap: clamp(1.75rem, 4vw, 3.5rem);
}
/* As duas colunas passaram a valer só a partir de 929px, junto com o apoio
visual: entre 900 e 928px a segunda coluna ficaria vazia. */
.endereco {
font-family: var(--placa);
font-weight: 800; /* único peso da família carregado — evita síntese */
font-size: clamp(1.45rem, 3.5vw, 2.4rem); /* não colide com h3 em 375px */
line-height: 1.1;
text-transform: none;
letter-spacing: 0;
margin: 0 0 1.5rem;
/* Quebra natural no lugar do
rígido, que estourava a linha em 360px. */
max-width: 24ch;
text-wrap: balance;
}
/* Chip técnico: mesmo vocabulário dos chips DM Mono de Modalidades (.hora /
.lista-modal li) — mono, caixa alta, borda grafite, cantos 2px — agora com
fundo escuro para o CEP se ler como um dado destacado, não como legenda. */
.cep {
font-family: var(--dado);
font-weight: 500; /* não herda o peso do .endereco: DM Mono só tem 400/500 */
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--osso);
display: inline-block;
margin-top: 1rem;
padding: .35rem .6rem;
background: var(--carvao);
border: 1px solid var(--grafite);
border-radius: 2px;
}
.contatos { list-style: none; margin: 1rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0; }
.contatos li {
padding: 0;
}
.contato-alvo {
display: flex;
gap: 1.25rem;
padding: 1.25rem 0;
align-items: flex-start;
text-decoration: none;
border-bottom: 1px solid var(--grafite);
color: var(--osso);
}
.contatos li:last-child .contato-alvo { border-bottom: none; }
.contato-alvo svg {
color: var(--laranja);
flex-shrink: 0;
margin-top: .15rem;
}
a.contato-alvo:hover { color: var(--brasa); }
a.contato-alvo:hover svg { color: var(--brasa); }
.contato-alvo > div {
display: flex;
flex-direction: column;
gap: .25rem;
}
.contatos b {
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--laranja);
font-weight: 500;
}
.contatos span { color: var(--osso); }
/* --- Localização no desktop ---------------------------------------------
Duas áreas: informação/ação à esquerda, apoio visual à direita. O celular
não recebe nada disto — a ordem já validada lá continua intacta.
------------------------------------------------------------------------ */
.local__apoio { display: none; }
/* Comportamento do celular preservado: o botão de rota continua ocupando a
linha inteira e centralizado, como antes do `style` inline sair do HTML. */
.local__acao { width: 100%; justify-content: center; margin-bottom: 2rem; }
@media (min-width: 929px) {
.local {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: start;
}
/* O botão de rota deixa de ocupar a linha inteira: com largura natural ele
lê como ação, não como faixa, e o endereço logo abaixo ganha peso. */
.local__acao { width: auto; align-self: start; margin-bottom: 2rem; }
.local__apoio {
display: block;
margin: 0;
position: sticky;
top: calc(var(--barra) + 2rem);
}
.local__apoio img {
width: 100%;
height: clamp(24rem, 42vw, 34rem);
object-fit: cover;
border-radius: 3px;
border: 1px solid var(--grafite);
}
.local__apoio figcaption {
margin-top: .85rem;
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cinza);
}
}
/* Hierarquia dos canais em qualquer largura: o WhatsApp é o único com fundo
e fio laranja. Instagram e e-mail continuam legíveis, em peso normal. */
.contato-alvo--principal {
margin-bottom: .5rem;
padding: 1.25rem;
background: rgba(242, 106, 33, .09);
border: 1px solid rgba(242, 106, 33, .45);
border-radius: 3px;
}
.contato-alvo--principal:hover {
background: rgba(242, 106, 33, .16);
border-color: var(--laranja);
}
.contato-alvo--principal span { font-weight: 700; }
/* Referência de chegada — o dado que orienta quem já está na avenida. */
.local__referencia {
display: flex;
align-items: center;
gap: .55rem;
margin: -.75rem 0 1.5rem;
font-size: .95rem;
line-height: 1.4;
color: var(--cinza);
}
.local__referencia svg { flex: 0 0 auto; color: var(--laranja); }
/* Bloco operacional: horários e planos, separados dos canais por um fio. */
.operacao {
margin: .5rem 0 0;
padding-top: .5rem;
border-top: 1px solid var(--grafite);
}
.operacao .contato-alvo { padding-block: 1rem; }
.operacao b { color: var(--cinza); }
.operacao .contato-alvo svg { color: var(--cinza); }
.operacao span { color: var(--osso); }
/* --- CTA final ---------------------------------------------------------- */
/* O loop fecha aqui: a placa volta como friso, os refletores reacendem, e o
halo deixa de ser decoração para virar a luz que eles lançam. */
.fecho {
position: relative;
text-align: center;
padding-block: clamp(5.5rem, 15vh, 9.5rem) clamp(5rem, 14vh, 9rem);
border-top: 2px solid var(--laranja);
background:
radial-gradient(ellipse 70% 100% at 50% 0%, rgba(232, 161, 58, .15), transparent 70%),
var(--noite);
}
/* No celular o bloco fica estreito e alto: a elipse de 70% de largura por 100%
de altura virava uma coluna fina, quase invisível. Aqui ela passa a ser
larga e baixa, ancorada logo abaixo dos refletores, com opacidade um pouco
maior — o halo aparece sem lavar o texto. `overflow: hidden` garante que o
espalhamento não crie rolagem horizontal. */
@media (max-width: 928px) {
.fecho {
overflow: hidden;
background:
radial-gradient(ellipse 135% 42% at 50% 4%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%),
var(--noite);
}
}
.spots--fecho { top: 0; margin-top: 9px; }
.spots--fecho .spot { animation: none; opacity: 0; }
.spots--fecho.aceso .spot { animation: acender .5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
.spots--fecho .spot { animation: none; opacity: .95; }
}
.fecho h2 {
font-size: clamp(2.6rem, 8vw, 5.5rem);
margin-bottom: 1.5rem;
}
/* A última frase persuasiva não pode ser o texto mais apagado da página. */
.fecho .chamada {
color: var(--osso);
opacity: .88;
margin-inline: auto;
margin-bottom: 2.5rem;
}
/* --- Rodapé ------------------------------------------------------------- */
.rodape {
border-top: 1px solid var(--grafite);
background: var(--carvao);
padding-block: 3.5rem 2rem;
font-size: .92rem;
}
.rodape__grade {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
justify-content: space-between;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--grafite);
}
.rodape__marca { display: flex; align-items: center; gap: .8rem; }
.rodape__marca img { width: auto; height: 44px; border-radius: 0; }
.rodape__marca b {
font-family: var(--placa);
font-weight: 800; /* traria 700, peso que não é mais carregado */
font-size: 1.5rem;
letter-spacing: .06em;
display: block;
line-height: 1;
}
.rodape__marca span {
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .14em;
color: var(--cinza);
text-transform: uppercase;
}
.rodape__col { color: var(--cinza); max-width: 34ch; }
.rodape__col--escondida-celular { display: none; }
/* Os três contatos perderam os
no HTML: a pilha passou a ser do CSS,
o que permite virar linha única no desktop sem markup extra. */
.rodape__col--contato { flex-direction: column; gap: .15rem; align-items: flex-start; }
/* A navegação das novas rotas é a única porta para /club e /eventos no
rodapé, então fica visível em todas as larguras — em linha no celular,
coluna no desktop, ao lado das outras colunas. */
.rodape__col--navegacao {
display: flex;
flex-wrap: wrap;
gap: 0 1.5rem;
align-items: center;
max-width: none;
}
@media (min-width: 900px) {
.rodape__col--navegacao { flex-direction: column; gap: .15rem; align-items: flex-start; }
}
@media (min-width: 900px) {
.rodape__col--escondida-celular { display: block; }
.rodape__col--contato { display: flex; }
}
.rodape__col a {
display: inline-flex;
align-items: center;
min-height: 44px; /* alvo de toque */
color: var(--osso);
text-decoration: none;
border-bottom: 1px solid var(--grafite);
}
.rodape__col a:hover { color: var(--brasa); }
/* --- Rodapé no desktop ---------------------------------------------------
Endereço e contatos já aparecem por extenso em "Onde estamos": aqui ficam
como referência discreta, não como segundo bloco de contato. O conteúdo
permanece no HTML — só o peso visual desce.
------------------------------------------------------------------------ */
@media (min-width: 929px) {
.rodape__grade { align-items: center; gap: 2rem 3rem; }
.rodape__col--endereco {
font-size: .8125rem;
line-height: 1.6;
color: #8b9294;
max-width: 30ch;
}
.rodape__col--contato {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: .35rem 1.5rem;
max-width: none;
}
.rodape__col--contato a {
min-height: 0;
padding: .35rem 0;
font-size: .85rem;
color: var(--cinza);
border-bottom-color: transparent;
}
.rodape__col--contato a:first-child { color: var(--osso); }
.rodape__col--contato a:hover { color: var(--brasa); border-bottom-color: var(--grafite); }
}
.credito {
padding-top: 1.75rem;
font-family: var(--dado);
font-size: .75rem;
letter-spacing: .1em;
color: #8b9294; /* AA sobre --carvao; #6d7375 reprovava com 3,7:1 */
text-align: center;
}
/* Crédito de desenvolvimento: "MAO Studio" vira link discreto, parte do texto */
.credito__link {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(139, 146, 148, .5);
text-underline-offset: .18em;
transition: color .18s ease, text-decoration-color .18s ease;
}
.credito__link:hover,
.credito__link:focus-visible {
color: var(--brasa);
text-decoration-color: var(--brasa);
}
@media (prefers-reduced-motion: reduce) {
.credito__link { transition: none; }
}
/* ==========================================================================
BARRA DE AÇÃO NO CELULAR — CTA sempre visível, sem depender do menu
========================================================================== */
.barra-celular {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 70;
display: none;
gap: .6rem;
padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
/* Fundo opaco: nada do conteúdo atravessa a barra durante a rolagem.
A separação fica por conta de um fio discreto e da sombra ascendente —
o laranja continua reservado ao botão primário. */
background: var(--noite);
border-top: 1px solid var(--grafite);
box-shadow: 0 -8px 20px rgba(0, 0, 0, .45);
}
/* Altura total ~65px (44px de alvo + 9,6px de respiro + 1px de fio),
dentro da faixa de 64–76px, com a safe area somada por fora. */
.barra-celular .botao {
flex: 1;
min-height: 44px;
padding: .55rem 1rem;
font-size: .95rem;
line-height: 1.2;
white-space: nowrap;
}
.barra-celular .botao--vazado { flex: 0 0 auto; gap: .4rem; }
.barra-celular__pin { flex: 0 0 auto; }
@media (max-width: 928px) {
.barra-celular { display: flex; }
/* Compensação do conteúdo: altura da barra (~65px) + safe area do iPhone
+ folga, para que CTA final, endereço e rodapé nunca fiquem cobertos. */
body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
/* 88svh empurrava a prova social para fora da primeira rolagem sem ganho
de composição: 80svh mantém placa, texto e CTA e encurta a dobra. */
.hero {
min-height: 80svh;
padding-block: calc(var(--barra) + 1.25rem) 2.25rem;
/* O texto senta na base: centralizado, ele caía justamente sobre o
letreiro iluminado e perdia contraste. */
align-items: flex-end;
}
/* No corte 9:16 a placa iluminada fica no terço superior; 38% traz a
fachada e a entrada para dentro do quadro sem cortar o letreiro. */
.hero__foto { object-position: center 32%; }
/* Véu do celular: forte no topo (sob a placa) e na base (atrás do texto e
do CTA), moderado na faixa central, onde estão letreiro e entrada. */
.hero__veu {
background:
linear-gradient(to bottom, rgba(11,13,12,.88) 0%, rgba(11,13,12,.28) 14%, rgba(11,13,12,.34) 30%, rgba(11,13,12,.66) 44%, rgba(11,13,12,.86) 62%, rgba(11,13,12,.95) 82%, var(--noite) 100%);
}
/* Mesmo selo do desktop, só reduzido: filete âmbar + caixa alta espaçada em
âmbar. O halo escuro entra apenas como reforço de contraste sobre o
letreiro iluminado — não troca o modelo visual por outro. */
.hero__local {
display: flex;
align-items: baseline;
gap: .55rem;
font-size: .74rem;
letter-spacing: .18em;
line-height: 1.5;
/* Largura suficiente para o endereço real quebrar em duas linhas em vez de
três — sem encolher a fonte e sem abreviar o nome do município. */
max-width: 40ch;
margin-bottom: 1rem;
/* No celular o selo cai sobre a faixa mais clara da fachada iluminada e o
âmbar do desktop perdia contraste. Só a cor do texto muda: o filete
continua laranja e o resto do hero fica como está. */
color: #fff;
text-shadow: 0 1px 14px rgba(11, 13, 12, .9), 0 0 4px rgba(11, 13, 12, .7);
}
.hero__local::before {
content: '';
width: clamp(1rem, 5vw, 1.75rem);
height: 1px;
background: var(--laranja);
flex: none;
transform: translateY(-.3em);
}
.hero h1 {
font-size: clamp(2.9rem, 13.5vw, 3.6rem);
line-height: .9;
letter-spacing: -.01em;
max-width: 11ch;
}
.hero__texto {
margin: 1.15rem 0 1.6rem;
font-size: 1.0625rem;
max-width: 36ch;
}
.hero__acoes .botao { width: 100%; }
/* Conversão primeiro: o agendamento aparece logo depois da mensagem, antes
da prova social. A barra fixa permanece como ação persistente. */
.hero__acoes { flex-direction: column; gap: .6rem; }
.hero__acoes .botao--solido { display: inline-flex; order: 1; }
/* A ação de apoio perde peso para não competir com o laranja. */
.hero__acoes .botao--vazado {
order: 2;
border-color: transparent;
background: transparent;
color: var(--cinza);
text-decoration: underline;
text-underline-offset: .25em;
}
/* Mesma regra do hero aplicada ao fecho: com a barra fixa a poucos pixels,
dois botões laranja disputam o mesmo toque. O texto e o link continuam
intactos — só o botão desce para o traço vazado. */
.fecho .botao--solido {
background: transparent;
color: var(--osso);
border-color: var(--laranja);
box-shadow: none;
}
.fecho .botao--solido:hover { background: transparent; color: var(--brasa); }
/* Faixa de prova social compacta: em vez de empilhar três blocos altos
(270px medidos, mais que um terço da tela), três colunas de largura igual
com filete divisor — o mesmo desenho do desktop, em corpo menor. */
.prova .envolve {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-block: 1.15rem;
}
.prova__item {
flex-direction: column;
align-items: flex-start;
gap: .15rem;
padding-inline: .7rem;
border-left: 1px solid var(--grafite);
}
.prova__item:first-child { border-left: 0; padding-left: 0; }
.prova__valor { gap: .4rem; }
.prova__icone { width: 1rem; height: 1rem; }
.prova__num { font-size: clamp(1.45rem, 6vw, 1.9rem); }
.prova__rot {
font-size: .69rem; /* 11px: piso de leitura para caixa alta com tracking */
letter-spacing: .08em;
line-height: 1.35;
max-width: none;
}
.prova__fonte {
grid-column: 1 / -1;
margin: .9rem 0 0;
padding-top: .75rem;
border-top: 1px solid var(--grafite);
width: 100%;
font-size: .69rem;
letter-spacing: .1em;
color: #8b9294; /* mesmo cinza AA do rodapé */
}
.equipamentos li { flex-direction: column; gap: .3rem; }
.contatos li { flex-direction: column; gap: .25rem; }
}
/* Abaixo de ~355px o rótulo do botão primário quebrava em duas linhas: a barra
ia de 83,8px para 108,9px, escondia o fim do rodapé e comia o CTA do hero.
Apertar gutter interno e corpo do botão mantém a barra em uma linha só. */
@media (max-width: 360px) {
/* Em 360px a descrição ia a quatro linhas; 16px com entrelinha 1,55 a
devolve para três sem esconder nada do texto validado. */
.hero__texto { font-size: 1rem; line-height: 1.55; }
.barra-celular { gap: .5rem; }
.barra-celular .botao { font-size: .875rem; padding: .55rem .7rem; }
}
/* ==========================================================================
Modalidades — diferenciação dos pilares, grade de turmas e apoio
========================================================================== */
/* Ícone linear: o único recurso gráfico novo do cartão. O filete inferior do
topo já existia; nada de fundo extra ou borda grossa por cima. */
.pilar__topo {
display: flex;
align-items: center;
gap: .85rem;
}
/* A trava de altura só existe onde os três cards dividem a mesma linha; no
celular ela abriria vazio embaixo do título. */
@media (min-width: 929px) {
.pilar__topo { min-height: 4.1rem; }
}
.pilar__icone {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
color: var(--laranja);
}
.pilar h3 { margin: 0; }
/* --- Grade de turmas ----------------------------------------------------- */
.turmas__lista {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
gap: .75rem;
}
/* Cartão por turma: fundo próprio, sem coluna alinhada com a de cima — é o
oposto da tabela que estava aqui antes. */
.turma {
background: var(--noite);
border: 1px solid var(--grafite);
border-radius: 2px;
padding: 1.15rem 1.25rem;
}
.turma__nome {
margin: 0 0 .85rem;
padding-bottom: .7rem;
border-bottom: 1px solid var(--grafite);
font-family: var(--dado);
font-size: 1rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--laranja);
}
.turma__dias,
.turma__horarios {
margin: 0;
color: var(--cinza);
font-size: .95rem;
}
.turma__horarios { margin-top: .7rem; }
.turma__rotulo {
display: block;
margin-bottom: .3rem;
font-family: var(--dado);
/* .6rem = 9,6px, pequeno demais para rótulo em caixa alta com tracking. */
font-size: .69rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #7f878a;
}
.turma__chips {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.turma__selo {
display: inline-block;
font-family: var(--dado);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--osso);
border: 1px solid var(--laranja);
border-radius: 2px;
padding: .25rem .55rem;
}
/* CTA de seção: peso contextual, nunca concorrendo com o botão laranja. */
.turma__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: .6rem .9rem;
border: 1px solid var(--grafite);
border-radius: 2px;
color: var(--osso);
text-decoration: none;
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .04em;
line-height: 1.4;
}
.turma__link:hover { border-color: var(--laranja); color: var(--brasa); }
/* O espaçamento dos chips vem do gap do flex. */
.turma__chips .hora { margin: 0; }
.hora {
display: inline-block;
font-family: var(--dado);
font-size: .82rem;
letter-spacing: .04em;
color: var(--osso);
border: 1px solid var(--grafite);
border-radius: 2px;
padding: .3rem .5rem;
margin: .15rem .3rem .15rem 0;
}
/* Desktop: três colunas fixas — modalidade, dias, horários — para varrer a
grade em uma passada vertical. */
@media (min-width: 929px) {
/* São quatro turmas: duas colunas fecham 2x2 sem cartão órfão na segunda
linha, como aconteceria com três colunas. */
.turmas__lista {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.turma { padding: 1.4rem 1.5rem; }
}
/* --- Também na GFIT: apoio, não protagonista ----------------------------- */
.complementos--apoio {
margin-top: 2.5rem;
padding: 1.5rem 0 0;
border: 0;
border-top: 1px solid var(--grafite);
align-items: flex-start;
gap: .9rem 1.5rem;
}
.complementos--apoio strong { padding-top: .35rem; }
.complementos--apoio ul { gap: .45rem; font-size: .82rem; }
.complementos--apoio li {
font-family: var(--dado);
letter-spacing: .04em;
color: var(--cinza);
border: 1px solid var(--grafite);
border-radius: 2px;
padding: .3rem .6rem;
}
.complementos--apoio li + li::before { content: none; }
/* --- Modalidades no celular ---------------------------------------------- */
@media (max-width: 928px) {
/* Cartão de modalidade: altura natural, sem trava. O ícone acompanha o
corpo menor do título. */
.pilar { gap: 1rem; }
.pilar__icone { width: 1.75rem; height: 1.75rem; }
.pilar__topo { padding-bottom: .9rem; }
/* Mesmo texto, linha mais curta: a descrição encolhe visualmente sem que
nenhuma informação saia do ar. */
.pilar p {
font-size: .9rem;
line-height: 1.5;
max-width: 40ch;
}
/* Etiquetas das modalidades: corpo menor, alvo ainda confortável. */
.lista-modal { gap: .4rem; }
.lista-modal li {
font-size: .7rem;
letter-spacing: .05em;
padding: .35rem .6rem;
}
/* --- Turmas: cartões em coluna única ----------------------------------- */
.turma { padding: 1rem 1.1rem; }
.turma__nome { font-size: .95rem; }
.turma__dias,
.turma__horarios { font-size: .9rem; }
.hora { font-size: .78rem; padding: .28rem .45rem; }
/* Funcional Fight: alvo de toque cheio, peso contextual. */
.turma__link {
display: flex;
justify-content: center;
padding: .75rem .8rem;
text-align: center;
}
/* --- Também na GFIT: duas colunas compactas ---------------------------- */
.complementos--apoio {
display: block;
margin-top: 2rem;
padding-top: 1.25rem;
}
.complementos--apoio strong { display: block; padding: 0 0 .8rem; }
.complementos--apoio ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .4rem;
font-size: .72rem;
}
.complementos--apoio li {
padding: .4rem .55rem;
line-height: 1.35;
}
}
/* Em 360px o item mais longo da lista de apoio ("Loja de suplementos e itens
de academia") ficava com três linhas dentro de meia largura: ele ocupa a
linha inteira e o resto segue em duas colunas. */
@media (max-width: 380px) {
.complementos--apoio li:last-child { grid-column: 1 / -1; }
}
/* ==========================================================================
MOVIMENTO — base reutilizável
Regra da casa: animar apenas `opacity` e `transform`. Nada de layout.
Sem JS, sem IntersectionObserver ou com movimento reduzido, todo conteúdo
nasce visível: a classe `mov` só entra no quando as condições são
seguras. Esta sessão define os utilitários; a aplicação vem depois.
========================================================================== */
/* --- Revelação de entrada ------------------------------------------------ */
.mov [data-revela]:not(.revelado) {
opacity: 0;
transform: translate3d(0, var(--desloca), 0);
}
[data-revela] {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva);
}
.revelado { opacity: 1; transform: none; }
/* Variantes de distância e ritmo */
[data-revela="curto"] { --desloca: var(--desloca-curto); }
/* `fade` é para o filho de um bloco que já se desloca: ele só escalona a
opacidade, sem mover nada. Usado nos três pilares de modalidades, onde um
deslocamento por card abriria fresta na costura laranja da grade. */
[data-revela="fade"] { --desloca: 0px; }
[data-revela="amplo"] {
--desloca: var(--desloca-amplo);
transition-duration: var(--mov-entrada-ampla);
}
/* --- Escalonamento ------------------------------------------------------- */
/* O pai recebe [data-escalona]; os filhos herdam o atraso pela ordem.
Teto no 8º item para o último nunca esperar demais. */
.mov [data-escalona] > *:nth-child(1) { transition-delay: 0ms; }
.mov [data-escalona] > *:nth-child(2) { transition-delay: calc(var(--mov-passo) * 1); }
.mov [data-escalona] > *:nth-child(3) { transition-delay: calc(var(--mov-passo) * 2); }
.mov [data-escalona] > *:nth-child(4) { transition-delay: calc(var(--mov-passo) * 3); }
.mov [data-escalona] > *:nth-child(5) { transition-delay: calc(var(--mov-passo) * 4); }
.mov [data-escalona] > *:nth-child(6) { transition-delay: calc(var(--mov-passo) * 5); }
.mov [data-escalona] > *:nth-child(7) { transition-delay: calc(var(--mov-passo) * 6); }
.mov [data-escalona] > *:nth-child(n+8) { transition-delay: calc(var(--mov-passo) * 7); }
/* --- Microinterações ----------------------------------------------------- */
.mov-realce {
transition:
color var(--mov-curto) var(--curva),
background-color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva);
}
.mov-eleva {
transition:
transform var(--mov-medio) var(--curva),
border-color var(--mov-curto) var(--curva),
background-color var(--mov-curto) var(--curva);
}
.mov-eleva:hover,
.mov-eleva:focus-visible { transform: translate3d(0, -2px, 0); }
.mov-eleva:active { transform: translate3d(0, 0, 0); }
/* --- Movimento reduzido -------------------------------------------------- */
/* Sem `animation: none`: vários blocos desta página usam keyframes com
`forwards` para chegar ao estado visível. Zerar a duração preserva o estado
final e elimina o movimento. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
[data-revela] { opacity: 1 !important; transform: none !important; }
.mov-eleva:hover,
.mov-eleva:focus-visible { transform: none; }
}
/* ==========================================================================
MOVIMENTO — aplicação nas seções de modalidades, turmas e motivos
Este bloco fica no fim do arquivo de propósito: [data-revela] declara a
transição de `opacity` e `transform`, então todo cartão que também tem
hover precisa reescrever a lista inteira de transições — se declarasse só
`background-color`, a regra genérica venceria e a revelação perderia a
transição. Por isso cada seletor abaixo repete `opacity`/`transform` com a
duração de entrada e acrescenta as suas próprias propriedades de hover.
Doutrina do hover nos cartões: elevação por sombra curta + fio laranja,
nunca por `transform`. Motivo: `transform` já é a propriedade da revelação;
dividir a mesma propriedade entre dois tempos (520 ms de entrada e 220 ms
de hover) obrigaria a encurtar a entrada para fora da faixa pedida. Os
`transform` de hover/`:active` ficam nos links, que não são alvos de
revelação — lá não há disputa.
========================================================================== */
/* --- Grade de modalidades ------------------------------------------------ */
/* A grade inteira faz o deslocamento (26 px, 680 ms) e os três cartões só
escalonam a opacidade dentro dela. Passo de 150 ms em vez dos 70 ms
padrão: como aqui não há deslocamento por cartão, o olho tem só a opacidade
para separar um do outro, e a 100 ms a entrada era descrita como
simultânea — foi o que a conferência em navegador real acusou. Três
cartões, 300 ms de espera no último — que soma 820 ms com os seus próprios
520 ms de transição, contra os 680 ms da grade. O terceiro cartão fecha
140 ms depois dela, e é justamente essa sobra que faz a sequência ser
percebida. Nada disso atrasa a leitura: o texto já está posicionado desde o
primeiro quadro, só a opacidade viaja.
O que **não** resolve isto é devolver deslocamento por cartão: é
exatamente o que abre fresta na costura laranja da grade. */
.pilares { --mov-passo: 150ms; }
/* --- Cartões de modalidade ----------------------------------------------- */
/* Nenhum conteúdo do cartão depende de hover: título, texto e submodalidades
estão sempre visíveis. O realce é só reforço. */
.pilar {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva),
background-color var(--mov-curto) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
.pilar:hover,
.pilar:focus-within {
background-color: #191d1f;
box-shadow: inset 0 2px 0 0 var(--laranja);
}
/* --- Cartões de turma ---------------------------------------------------- */
.turma {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva),
border-color var(--mov-curto) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
.turma:hover,
.turma:focus-within {
border-color: var(--laranja);
box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .9);
}
/* O link de disponibilidade recebe os mesmos estados dos demais botões:
elevação no hover e no foco de teclado, afundamento no toque. */
.turma__link {
transition:
color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva),
transform var(--mov-medio) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
.turma__link:hover,
.turma__link:focus-visible {
border-color: var(--laranja);
color: var(--brasa);
transform: translate3d(0, -2px, 0);
box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .9);
}
.turma__link:active { transform: scale(.98); }
/* --- Cartões de "Além da academia" --------------------------------------- */
/* Entrada discreta pela regra geral de [data-revela] (o pai carrega
[data-escalona], então o segundo cartão entra um passo depois). No estado
de hover/foco só transitam cor, fundo e sombra — sem transform, para o
cartão não "pular" sob o dedo no celular. */
.alem__cartao {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva),
border-color var(--mov-curto) var(--curva),
background-color var(--mov-curto) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
.alem__link,
.motivo__link {
transition:
color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva);
}
.alem__seta,
.motivo__seta { transition: transform var(--mov-medio) var(--curva); }
.alem__cartao:hover .alem__seta,
.alem__cartao:focus-within .alem__seta,
.motivo__link:hover .motivo__seta,
.motivo__link:focus-visible .motivo__seta { transform: translateX(3px); }
.motivo__link:focus-visible {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
@media (prefers-reduced-motion: reduce) {
.alem__cartao,
.alem__link,
.motivo__link,
.alem__seta,
.motivo__seta { transition: none; }
/* O fio laranja e a sombra permanecem: são o sinal não-cromático do estado.
Só o deslocamento da seta sai. */
.alem__cartao:hover .alem__seta,
.alem__cartao:focus-within .alem__seta,
.motivo__link:hover .motivo__seta,
.motivo__link:focus-visible .motivo__seta { transform: none; }
}
/* --- Cartões de motivo --------------------------------------------------- */
/* Abaixo de 1024px os motivos são blocos separados por filete, não cartões:
ali o realce de borda não existe e só a revelação atua. */
.motivo {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva),
border-color var(--mov-curto) var(--curva),
background-color var(--mov-curto) var(--curva),
box-shadow var(--mov-medio) var(--curva);
}
@media (min-width: 1024px) {
.motivo:hover,
.motivo:focus-within {
border-color: var(--laranja);
background-color: #191d1f;
box-shadow: 0 12px 22px -18px rgba(0, 0, 0, .9);
}
}
/* --- CTA contextual das seções ------------------------------------------- */
/* O CTA só existe a partir de 929px; no celular a barra fixa cumpre o papel. */
@media (min-width: 929px) {
.acao-contexto__link {
transition:
color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva),
transform var(--mov-medio) var(--curva);
}
.acao-contexto__seta { transition: transform var(--mov-medio) var(--curva); }
.acao-contexto__link:focus-visible {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
.acao-contexto__link:focus-visible .acao-contexto__seta { transform: translateX(3px); }
.acao-contexto__link:active { transform: scale(.98); }
}
/* --- Movimento reduzido -------------------------------------------------- */
/* A regra global do bloco anterior já zera durações e força [data-revela]
visível. Aqui saem apenas os deslocamentos: as sombras e o fio laranja
permanecem, porque não são movimento — são o sinal não-cromático que
distingue o estado de hover/foco de uma simples troca de cor. */
@media (prefers-reduced-motion: reduce) {
.turma__link:hover,
.turma__link:focus-visible,
.turma__link:active,
.acao-contexto__link:active { transform: none; }
.acao-contexto__link:focus-visible .acao-contexto__seta { transform: none; }
}
/* ==========================================================================
MOVIMENTO — aplicação na seção de estrutura
Formato encontrado: acordeão de cinco ambientes, um aberto por vez, cada
painel com texto e galeria de rolagem manual. Não é `tablist` — os painéis
são regiões que convivem numa pilha vertical, e a marcação já usa
`aria-expanded`/`aria-controls`/`role="region"`, que é a semântica correta
para este padrão. Trocar por tabs mudaria conteúdo e navegação sem ganho.
========================================================================== */
/* --- Revelação de entrada ------------------------------------------------ */
/* A pilha inteira desloca (26 px, 680 ms) e os cinco itens só escalonam a
opacidade dentro dela: os itens são separados por costura de 2 px sobre o
fundo grafite, e deslocar item a item abriria e fecharia essa costura —
o mesmo motivo que fixou `fade` nos cartões de modalidade.
Passo de 110 ms, não os 70 ms padrão: sem deslocamento por item o olho só
tem a opacidade para separar um do outro. Cinco itens × 110 ms = 440 ms de
espera no último, que fecha aos 960 ms — 280 ms depois da pilha. É essa
sobra que faz a cascata ser percebida sem esticar demais a seção. */
.acordeao { --mov-passo: 110ms; }
/* O item tem transição própria de fundo; a regra genérica [data-revela] só
declara opacity/transform, então a lista precisa ser reescrita inteira. */
.acordeao__item {
transition:
opacity var(--mov-entrada) var(--curva),
transform var(--mov-entrada) var(--curva),
background-color .22s var(--curva);
}
/* Ícone: entrada curta junto com o item — 0.94 para 1 e 2° de rotação.
Sem laço, sem ícone novo. O `+`/`−` de estado continua sendo o mesmo. */
.mov [data-revela]:not(.revelado) .acordeao__icone {
transform: scale(.94) rotate(-2deg);
}
.acordeao__icone {
transition: transform var(--mov-entrada) var(--curva);
}
/* --- Troca de ambiente --------------------------------------------------- */
/* A altura do painel já animava (`grid-template-rows`, 260 ms). O que faltava
era o conteúdo: agora ele entra com fade + 14 px de deslocamento horizontal,
320 ms, atrasado em 60 ms para chegar depois de a altura ter começado a
abrir. Só o painel anima — cabeçalho, gatilhos e CTA ficam parados.
O estado inicial vale para o painel fechado ([hidden]), então o item já
aberto no carregamento nasce visível mesmo sem JS. Nada bloqueia clique:
são transições, não animações com trava. */
.acordeao__painel[hidden] .acordeao__conteudo > * {
opacity: 0;
transform: translate3d(14px, 0, 0);
}
.acordeao__conteudo > * {
opacity: 1;
transform: none;
transition:
opacity 320ms var(--curva) 60ms,
transform 320ms var(--curva) 60ms;
}
/* --- Movimento reduzido -------------------------------------------------- */
/* A regra global zera durações e força [data-revela] visível. Aqui o conteúdo
do painel e o ícone voltam ao estado neutro: a troca de ambiente passa a ser
instantânea e legível, sem nenhum deslocamento. */
@media (prefers-reduced-motion: reduce) {
.acordeao__painel[hidden] .acordeao__conteudo > *,
.acordeao__conteudo > * { opacity: 1; transform: none; }
.mov [data-revela]:not(.revelado) .acordeao__icone { transform: none; }
}
/* --- Parallax ------------------------------------------------------------ */
/* Decisão: não implementado. A seção não tem imagem de fundo nem camada
decorativa — o acordeão assenta direto no fundo da página, e as fotos vivem
dentro de galerias de rolagem manual, onde deslocar a imagem brigaria com o
gesto de arraste. Aplicar parallax exigiria criar um elemento decorativo
novo só para movê-lo, o que é decoração sem conteúdo. O hero já tem entrada
orquestrada própria e não será reimplementado. Registro em README. */
/* ==========================================================================
LEGIBILIDADE MOBILE — textos informativos
Ajuste sutil e uniforme: só o corpo de leitura sobe (parágrafos, descrições,
textos de apoio), com line-height mais folgado. Títulos, selos, rótulos,
navegação e botões ficam intactos para não achatar a hierarquia. Base de
referência: 320px, 375px e 390px.
========================================================================== */
@media (max-width: 928px) {
/* Parágrafos de abertura de seção e o texto do CTA final. */
.chamada {
font-size: 1.0625rem;
line-height: 1.6;
}
/* Descrições das modalidades: volta ao corpo do texto corrido, com linha
ainda curta o bastante para não criar blocos altos. */
.pilar p {
font-size: 1rem;
line-height: 1.6;
max-width: 42ch;
}
/* Seção Estrutura: texto dentro dos painéis do acordeão. */
.acordeao__conteudo > p {
font-size: 1.0625rem;
line-height: 1.62;
}
/* Diferenciais ("por que a GFIT"). */
.motivo p {
font-size: 1.0625rem;
line-height: 1.6;
}
/* Localização e orientação de chegada. */
.local__info p,
.local__referencia {
font-size: 1.0625rem;
line-height: 1.6;
}
/* Informações complementares: horários, planos e canais de contato. */
.operacao span,
.contato-alvo span,
.rodape { line-height: 1.6; }
.rodape { font-size: .98rem; }
/* Lista de apoio "Também na GFIT": sobe o mínimo necessário para leitura
confortável em duas colunas, sem estourar a largura em 320px. */
.complementos--apoio ul { font-size: .8rem; }
}
/* ==========================================================================
PÁGINAS DE ROTA (/club e /eventos)
Nada de novo em cor ou tipografia: as páginas reusam os tokens, os botões, a
placa, as seções, os contatos e o rodapé da home. Este bloco só resolve a
abertura própria das rotas — que não têm fotografia, porque não existe foto
real do Clube nem dos Eventos — e o ritmo de leitura das seções de texto.
========================================================================== */
/* --- Abertura ------------------------------------------------------------
Mesmo desenho do fecho da home (halo âmbar sob a placa + fileira de
refletores), aqui como primeira dobra. `100svh` não: a página é curta e o
hero cheio empurraria o conteúdo para fora da rolagem inicial.
------------------------------------------------------------------------ */
.rota-hero {
position: relative;
margin-top: calc(var(--barra) * -1);
padding-block: calc(var(--barra) + clamp(4.5rem, 13vh, 8rem)) clamp(4rem, 11vh, 7rem);
overflow: hidden;
border-bottom: 1px solid var(--grafite);
background:
radial-gradient(ellipse 78% 90% at 50% 0%, rgba(232, 161, 58, .17), transparent 68%),
var(--noite);
}
@media (max-width: 928px) {
.rota-hero {
background:
radial-gradient(ellipse 140% 40% at 50% 3%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%),
var(--noite);
}
}
.rota-hero > .envolve { position: relative; z-index: 1; }
/* Os refletores da rota acendem na entrada, como os da fachada na home. */
.spots--rota { top: var(--barra); margin-top: 5px; }
/* Marca-d'água: quina inferior direita, longe da coluna de texto e dos CTAs. */
.marca-agua--rota {
width: clamp(230px, 40vw, 460px);
bottom: -30%;
right: -16%;
opacity: .10;
transform: rotate(-5deg);
}
@media (max-width: 640px) {
.marca-agua--rota { bottom: -14%; right: -32%; opacity: .085; }
}
.rota-hero__selo {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0 0 1.5rem;
}
/* O título é o elemento de assinatura da rota: mesma máscara por linha do H1
da home, em caixa alta, com "Clube" em laranja. */
.rota-hero__titulo {
font-size: clamp(3rem, 10vw, 6.5rem);
line-height: .84;
text-transform: uppercase;
max-width: 12ch;
margin: 0;
}
.rota-hero__titulo span { display: block; }
.rota-hero__titulo .acento { color: var(--laranja); }
.rota-hero__titulo .linha__i { white-space: nowrap; }
.rota-hero__titulo .linha {
overflow: hidden;
padding-block: .14em;
margin-block: -.14em;
}
.mov .rota-hero__titulo .linha__i {
animation: linhaSobe 620ms var(--curva) both;
}
.rota-hero__titulo .linha:nth-child(1) .linha__i { animation-delay: .48s; }
.rota-hero__titulo .linha:nth-child(2) .linha__i { animation-delay: .60s; }
.rota-hero__texto {
margin: 1.75rem 0 2.25rem;
font-size: clamp(1.1rem, 2.2vw, 1.3rem);
color: var(--osso);
max-width: 44ch;
opacity: .92;
}
.rota-hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (prefers-reduced-motion: reduce) {
.rota-hero__titulo .linha__i { animation: none; opacity: 1; transform: none; }
.spots--rota .spot { animation: none; opacity: .95; }
}
/* --- Corpo de texto ------------------------------------------------------ */
.rota-texto { max-width: 62ch; }
.rota-texto p {
color: var(--cinza);
font-size: clamp(1rem, 1.7vw, 1.1rem);
margin-bottom: 1.15rem;
}
/* O primeiro parágrafo é a definição: fica no branco quente da página. */
.rota-texto p:first-child { color: var(--osso); }
.rota-texto__acao { margin-top: 1.75rem; }
/* Link discreto de saída: sem preenchimento laranja, para não competir com os
CTAs de Instagram e WhatsApp. Mesma gramática do .alem__link da home. */
.rota-link {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px; /* alvo de toque */
padding: .55rem .25rem;
font-weight: 700;
font-size: .95rem;
color: var(--crepusculo);
text-decoration: none;
border-bottom: 2px solid rgba(232, 161, 58, .35);
transition:
color var(--mov-curto) var(--curva),
border-color var(--mov-curto) var(--curva);
}
.rota-link:hover,
.rota-link:focus-visible {
color: var(--brasa);
border-bottom-color: var(--brasa);
}
.rota-link__seta { font-size: 1.15rem; line-height: 1; }
/* --- Como acompanhar ----------------------------------------------------- */
.secao--acompanhar { padding-bottom: clamp(5rem, 13vh, 8.5rem); }
.rota-contatos {
list-style: none;
margin: 0;
padding: 0;
max-width: 34rem;
}
.rota-acoes {
display: flex;
flex-wrap: wrap;
gap: .85rem;
margin-top: 2.25rem;
}
/* Em 320px os dois CTAs empilham em largura total: nenhum rótulo quebra e o
alvo de toque continua inteiro. */
@media (max-width: 380px) {
.rota-acoes .botao,
.rota-hero__acoes .botao { width: 100%; }
}
/* --- Variação da rota /eventos -------------------------------------------
Mesma abertura do Clube, espelhada: o halo âmbar nasce à esquerda e a
marca-d'água vai para a quina oposta. As duas rotas ficam irmãs, não
cópias, sem introduzir cor, tipografia ou movimento novos.
------------------------------------------------------------------------ */
.rota-hero--eventos {
background:
radial-gradient(ellipse 72% 88% at 22% 0%, rgba(232, 161, 58, .17), transparent 68%),
var(--noite);
}
@media (max-width: 928px) {
.rota-hero--eventos {
background:
radial-gradient(ellipse 140% 40% at 32% 3%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%),
var(--noite);
}
}
.marca-agua--eventos {
right: auto;
left: -18%;
transform: rotate(5deg);
}
@media (max-width: 640px) {
.marca-agua--eventos { left: -34%; }
}
/* ========================================================================
GFIT EVENTOS — arquitetura editorial (rota /eventos)
Classes usadas exclusivamente pela página /eventos. Nada aqui é referenciado
pela home nem por /club. Toda cor, tipografia, filete e movimento saem dos
tokens e dos padrões já existentes (motivo, alem, fecho) — nenhuma primitiva
nova de estilo é introduzida.
======================================================================== */
/* --- Destaque editorial: Mobilidade é Vida ------------------------------ */
.editorial__grade {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
.editorial__grade {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
align-items: center;
}
}
.editorial__titulo {
font-size: clamp(2.6rem, 7vw, 4.6rem);
line-height: .9;
margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
/* Painel de assinatura tipográfico — substitui a fotografia enquanto não há
registro real. Mesma superfície carvão + filete laranja do topo dos cartões
da página, para ler como assinatura da marca, não como imagem faltando. */
.editorial__selo {
display: flex;
flex-direction: column;
gap: 1rem;
padding: clamp(1.75rem, 5vw, 2.75rem);
background:
radial-gradient(ellipse 90% 70% at 80% 0%, rgba(232, 161, 58, .12), transparent 70%),
var(--noite);
border: 1px solid var(--grafite);
border-top: 2px solid var(--laranja);
border-radius: 2px;
}
.editorial__selo-marca {
font-family: var(--placa);
font-weight: 800;
text-transform: uppercase;
line-height: .82;
font-size: clamp(3.25rem, 9vw, 5rem);
color: var(--osso);
}
.editorial__selo-linha {
font-family: var(--dado);
font-size: .82rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--crepusculo);
}
/* --- Galeria editorial --------------------------------------------------- */
/* Grade responsiva com proporção reservada (sem layout shift) e lazy-loading
nas imagens (atributo no HTML). Fica pronta; só entra em cena com foto real. */
.galeria__grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: clamp(.75rem, 2vw, 1.25rem);
}
.galeria__item {
margin: 0;
border: 1px solid var(--grafite);
border-radius: 2px;
overflow: hidden;
background: var(--carvao);
}
.galeria__item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3; /* dimensão reservada — sem salto de layout */
object-fit: cover;
}
.galeria__item figcaption {
padding: .75rem 1rem;
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .04em;
color: var(--cinza);
}
/* Estado honesto quando não há acervo: nunca um placeholder que finja foto. */
.galeria__vazia {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .5rem;
max-width: 46ch;
margin-inline: auto;
padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 5vw, 2.5rem);
border: 1px dashed var(--grafite);
border-radius: 2px;
background: var(--carvao);
}
.galeria__vazia-icone { color: var(--laranja); opacity: .8; margin-bottom: .5rem; }
.galeria__vazia p { margin: 0; color: var(--cinza); font-size: .98rem; max-width: 42ch; }
.galeria__vazia strong { color: var(--osso); font-weight: 600; }
/* --- Projetos e ações ---------------------------------------------------- */
.projetos__grade {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.projeto {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .85rem;
padding: clamp(1.5rem, 4vw, 2.25rem);
background: var(--carvao);
border: 1px solid var(--grafite);
border-radius: 2px;
}
.projeto--destaque { border-top: 2px solid var(--laranja); }
.projeto--reservado { background: transparent; border-style: dashed; }
.projeto--reservado .projeto__titulo,
.projeto--reservado .projeto__texto { color: var(--cinza); }
.projeto__estado {
font-family: var(--dado);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0;
}
.projeto--reservado .projeto__estado { color: var(--cinza); }
.projeto__titulo {
font-size: clamp(1.5rem, 3.2vw, 2rem);
line-height: 1;
letter-spacing: .015em;
}
.projeto__texto { margin: 0; color: var(--cinza); font-size: .98rem; max-width: 42ch; }
.projeto .rota-link { margin-top: auto; }
/* --- Próximos movimentos: agenda (só com dados reais) -------------------- */
.agenda { list-style: none; margin: 0 0 2.25rem; padding: 0; display: flex; flex-direction: column; }
.agenda__item {
display: flex;
gap: clamp(1rem, 3vw, 2rem);
align-items: baseline;
padding: 1.5rem 0;
border-bottom: 1px solid var(--grafite);
}
.agenda__item:first-child { padding-top: 0; }
.agenda__item:last-child { border-bottom: none; }
.agenda__data {
font-family: var(--dado);
font-size: 1rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--laranja);
min-width: 6rem;
flex-shrink: 0;
}
.agenda__titulo { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.02; margin-bottom: .3rem; }
.agenda__local { margin: 0; color: var(--cinza); font-size: .95rem; }
/* CTAs centrados no fecho, herdando o layout flexível de .rota-acoes. */
.rota-acoes--centro { justify-content: center; margin-top: 0; }
/* ========================================================================
GFIT CLUB — arquitetura de clube de benefícios (rota /club)
Classes usadas exclusivamente pela página /club. Nada aqui é referenciado
pela home nem por /eventos. Cor, tipografia, filete e espaçamento saem dos
tokens já existentes — nenhuma primitiva nova de estilo é introduzida.
Registro mais institucional e aspiracional que /eventos: mais respiro,
ícones discretos, cartões consistentes.
======================================================================== */
/* --- Categorias conceituais (possibilidades em desenvolvimento) ---------- */
.club-categorias {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 560px) {
.club-categorias { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
.club-categorias { grid-template-columns: repeat(4, 1fr); }
}
.club-cat {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .7rem;
padding: clamp(1.5rem, 3.5vw, 2.25rem);
background: var(--carvao);
border: 1px solid var(--grafite);
border-top: 2px solid var(--laranja);
border-radius: 2px;
}
.club-cat__icone {
display: inline-flex;
color: var(--laranja);
margin-bottom: .25rem;
}
.club-cat__estado {
font-family: var(--dado);
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0;
}
.club-cat__titulo {
font-size: clamp(1.35rem, 2.6vw, 1.7rem);
line-height: 1.05;
letter-spacing: .01em;
color: var(--osso);
}
.club-cat__texto {
margin: 0;
color: var(--cinza);
font-size: .98rem;
max-width: 40ch;
}
/* --- Vantagens ativas: lista modular + estado vazio honesto -------------- */
/* .club-lista só entra em cena com parceiro/benefício confirmado. Enquanto
isso, exibe-se .club-vazio — nunca um logo ou nome inventado. */
.club-lista {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.club-item {
min-width: 0;
display: flex;
gap: 1.25rem;
padding: clamp(1.5rem, 3.5vw, 2rem);
background: var(--noite);
border: 1px solid var(--grafite);
border-radius: 2px;
}
.club-item__logo {
flex-shrink: 0;
width: 4rem;
height: 4rem;
object-fit: contain;
border-radius: 2px;
background: var(--carvao);
}
.club-item__corpo { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.club-item__categoria {
font-family: var(--dado);
font-size: .7rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0;
}
.club-item__nome { font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.05; color: var(--osso); }
.club-item__texto,
.club-item__condicao { margin: 0; color: var(--cinza); font-size: .95rem; max-width: 42ch; }
.club-item__condicao { color: var(--osso); }
.club-item__estado {
font-family: var(--dado);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cinza);
margin: 0;
}
.club-item__estado[data-status="ativo"] { color: var(--laranja); }
.club-item__validade { font-family: var(--dado); font-size: .8rem; color: var(--cinza); }
.club-item__link { margin-top: .3rem; }
/* Estado vazio: dashed, texto centrado, ícone discreto. Nunca finge dado. */
.club-vazio {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .6rem;
max-width: 52ch;
margin-inline: auto;
padding: clamp(2.75rem, 8vw, 4.25rem) clamp(1.5rem, 5vw, 2.5rem);
border: 1px dashed var(--grafite);
border-radius: 2px;
background: var(--noite);
}
.club-vazio__icone { color: var(--laranja); opacity: .85; margin-bottom: .4rem; }
.club-vazio p { margin: 0; color: var(--cinza); font-size: 1rem; max-width: 46ch; }
.club-vazio strong { color: var(--osso); font-weight: 600; }
/* --- Ponte para o GFIT Eventos ------------------------------------------ */
.club-ponte {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(1.5rem, 4vw, 2.25rem);
padding: clamp(1.75rem, 5vw, 3rem);
background:
radial-gradient(ellipse 90% 80% at 88% 0%, rgba(232, 161, 58, .12), transparent 70%),
var(--carvao);
border: 1px solid var(--grafite);
border-left: 2px solid var(--laranja);
border-radius: 2px;
}
.club-ponte__selo {
font-family: var(--dado);
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--crepusculo);
margin: 0 0 .75rem;
}
.club-ponte__titulo {
font-size: clamp(1.7rem, 4vw, 2.6rem);
line-height: 1.02;
letter-spacing: .01em;
color: var(--osso);
margin-bottom: 1rem;
max-width: 24ch;
}
.club-ponte__corpo { margin: 0; color: var(--cinza); font-size: 1rem; max-width: 56ch; }
@media (min-width: 860px) {
.club-ponte {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.club-ponte__texto { max-width: 42rem; }
.club-ponte__acao { flex-shrink: 0; }
}
@media (max-width: 520px) {
.club-ponte__acao { width: 100%; text-align: center; }
}
rígido, que estourava a linha em 360px. */ max-width: 24ch; text-wrap: balance; } /* Chip técnico: mesmo vocabulário dos chips DM Mono de Modalidades (.hora / .lista-modal li) — mono, caixa alta, borda grafite, cantos 2px — agora com fundo escuro para o CEP se ler como um dado destacado, não como legenda. */ .cep { font-family: var(--dado); font-weight: 500; /* não herda o peso do .endereco: DM Mono só tem 400/500 */ font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--osso); display: inline-block; margin-top: 1rem; padding: .35rem .6rem; background: var(--carvao); border: 1px solid var(--grafite); border-radius: 2px; } .contatos { list-style: none; margin: 1rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0; } .contatos li { padding: 0; } .contato-alvo { display: flex; gap: 1.25rem; padding: 1.25rem 0; align-items: flex-start; text-decoration: none; border-bottom: 1px solid var(--grafite); color: var(--osso); } .contatos li:last-child .contato-alvo { border-bottom: none; } .contato-alvo svg { color: var(--laranja); flex-shrink: 0; margin-top: .15rem; } a.contato-alvo:hover { color: var(--brasa); } a.contato-alvo:hover svg { color: var(--brasa); } .contato-alvo > div { display: flex; flex-direction: column; gap: .25rem; } .contatos b { font-family: var(--dado); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja); font-weight: 500; } .contatos span { color: var(--osso); } /* --- Localização no desktop --------------------------------------------- Duas áreas: informação/ação à esquerda, apoio visual à direita. O celular não recebe nada disto — a ordem já validada lá continua intacta. ------------------------------------------------------------------------ */ .local__apoio { display: none; } /* Comportamento do celular preservado: o botão de rota continua ocupando a linha inteira e centralizado, como antes do `style` inline sair do HTML. */ .local__acao { width: 100%; justify-content: center; margin-bottom: 2rem; } @media (min-width: 929px) { .local { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } /* O botão de rota deixa de ocupar a linha inteira: com largura natural ele lê como ação, não como faixa, e o endereço logo abaixo ganha peso. */ .local__acao { width: auto; align-self: start; margin-bottom: 2rem; } .local__apoio { display: block; margin: 0; position: sticky; top: calc(var(--barra) + 2rem); } .local__apoio img { width: 100%; height: clamp(24rem, 42vw, 34rem); object-fit: cover; border-radius: 3px; border: 1px solid var(--grafite); } .local__apoio figcaption { margin-top: .85rem; font-family: var(--dado); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); } } /* Hierarquia dos canais em qualquer largura: o WhatsApp é o único com fundo e fio laranja. Instagram e e-mail continuam legíveis, em peso normal. */ .contato-alvo--principal { margin-bottom: .5rem; padding: 1.25rem; background: rgba(242, 106, 33, .09); border: 1px solid rgba(242, 106, 33, .45); border-radius: 3px; } .contato-alvo--principal:hover { background: rgba(242, 106, 33, .16); border-color: var(--laranja); } .contato-alvo--principal span { font-weight: 700; } /* Referência de chegada — o dado que orienta quem já está na avenida. */ .local__referencia { display: flex; align-items: center; gap: .55rem; margin: -.75rem 0 1.5rem; font-size: .95rem; line-height: 1.4; color: var(--cinza); } .local__referencia svg { flex: 0 0 auto; color: var(--laranja); } /* Bloco operacional: horários e planos, separados dos canais por um fio. */ .operacao { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px solid var(--grafite); } .operacao .contato-alvo { padding-block: 1rem; } .operacao b { color: var(--cinza); } .operacao .contato-alvo svg { color: var(--cinza); } .operacao span { color: var(--osso); } /* --- CTA final ---------------------------------------------------------- */ /* O loop fecha aqui: a placa volta como friso, os refletores reacendem, e o halo deixa de ser decoração para virar a luz que eles lançam. */ .fecho { position: relative; text-align: center; padding-block: clamp(5.5rem, 15vh, 9.5rem) clamp(5rem, 14vh, 9rem); border-top: 2px solid var(--laranja); background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(232, 161, 58, .15), transparent 70%), var(--noite); } /* No celular o bloco fica estreito e alto: a elipse de 70% de largura por 100% de altura virava uma coluna fina, quase invisível. Aqui ela passa a ser larga e baixa, ancorada logo abaixo dos refletores, com opacidade um pouco maior — o halo aparece sem lavar o texto. `overflow: hidden` garante que o espalhamento não crie rolagem horizontal. */ @media (max-width: 928px) { .fecho { overflow: hidden; background: radial-gradient(ellipse 135% 42% at 50% 4%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%), var(--noite); } } .spots--fecho { top: 0; margin-top: 9px; } .spots--fecho .spot { animation: none; opacity: 0; } .spots--fecho.aceso .spot { animation: acender .5s ease forwards; } @media (prefers-reduced-motion: reduce) { .spots--fecho .spot { animation: none; opacity: .95; } } .fecho h2 { font-size: clamp(2.6rem, 8vw, 5.5rem); margin-bottom: 1.5rem; } /* A última frase persuasiva não pode ser o texto mais apagado da página. */ .fecho .chamada { color: var(--osso); opacity: .88; margin-inline: auto; margin-bottom: 2.5rem; } /* --- Rodapé ------------------------------------------------------------- */ .rodape { border-top: 1px solid var(--grafite); background: var(--carvao); padding-block: 3.5rem 2rem; font-size: .92rem; } .rodape__grade { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; padding-bottom: 2.5rem; border-bottom: 1px solid var(--grafite); } .rodape__marca { display: flex; align-items: center; gap: .8rem; } .rodape__marca img { width: auto; height: 44px; border-radius: 0; } .rodape__marca b { font-family: var(--placa); font-weight: 800; /* traria 700, peso que não é mais carregado */ font-size: 1.5rem; letter-spacing: .06em; display: block; line-height: 1; } .rodape__marca span { font-family: var(--dado); font-size: .75rem; letter-spacing: .14em; color: var(--cinza); text-transform: uppercase; } .rodape__col { color: var(--cinza); max-width: 34ch; } .rodape__col--escondida-celular { display: none; } /* Os três contatos perderam os
no HTML: a pilha passou a ser do CSS, o que permite virar linha única no desktop sem markup extra. */ .rodape__col--contato { flex-direction: column; gap: .15rem; align-items: flex-start; } /* A navegação das novas rotas é a única porta para /club e /eventos no rodapé, então fica visível em todas as larguras — em linha no celular, coluna no desktop, ao lado das outras colunas. */ .rodape__col--navegacao { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; max-width: none; } @media (min-width: 900px) { .rodape__col--navegacao { flex-direction: column; gap: .15rem; align-items: flex-start; } } @media (min-width: 900px) { .rodape__col--escondida-celular { display: block; } .rodape__col--contato { display: flex; } } .rodape__col a { display: inline-flex; align-items: center; min-height: 44px; /* alvo de toque */ color: var(--osso); text-decoration: none; border-bottom: 1px solid var(--grafite); } .rodape__col a:hover { color: var(--brasa); } /* --- Rodapé no desktop --------------------------------------------------- Endereço e contatos já aparecem por extenso em "Onde estamos": aqui ficam como referência discreta, não como segundo bloco de contato. O conteúdo permanece no HTML — só o peso visual desce. ------------------------------------------------------------------------ */ @media (min-width: 929px) { .rodape__grade { align-items: center; gap: 2rem 3rem; } .rodape__col--endereco { font-size: .8125rem; line-height: 1.6; color: #8b9294; max-width: 30ch; } .rodape__col--contato { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; max-width: none; } .rodape__col--contato a { min-height: 0; padding: .35rem 0; font-size: .85rem; color: var(--cinza); border-bottom-color: transparent; } .rodape__col--contato a:first-child { color: var(--osso); } .rodape__col--contato a:hover { color: var(--brasa); border-bottom-color: var(--grafite); } } .credito { padding-top: 1.75rem; font-family: var(--dado); font-size: .75rem; letter-spacing: .1em; color: #8b9294; /* AA sobre --carvao; #6d7375 reprovava com 3,7:1 */ text-align: center; } /* Crédito de desenvolvimento: "MAO Studio" vira link discreto, parte do texto */ .credito__link { color: inherit; text-decoration: underline; text-decoration-color: rgba(139, 146, 148, .5); text-underline-offset: .18em; transition: color .18s ease, text-decoration-color .18s ease; } .credito__link:hover, .credito__link:focus-visible { color: var(--brasa); text-decoration-color: var(--brasa); } @media (prefers-reduced-motion: reduce) { .credito__link { transition: none; } } /* ========================================================================== BARRA DE AÇÃO NO CELULAR — CTA sempre visível, sem depender do menu ========================================================================== */ .barra-celular { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: .6rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); /* Fundo opaco: nada do conteúdo atravessa a barra durante a rolagem. A separação fica por conta de um fio discreto e da sombra ascendente — o laranja continua reservado ao botão primário. */ background: var(--noite); border-top: 1px solid var(--grafite); box-shadow: 0 -8px 20px rgba(0, 0, 0, .45); } /* Altura total ~65px (44px de alvo + 9,6px de respiro + 1px de fio), dentro da faixa de 64–76px, com a safe area somada por fora. */ .barra-celular .botao { flex: 1; min-height: 44px; padding: .55rem 1rem; font-size: .95rem; line-height: 1.2; white-space: nowrap; } .barra-celular .botao--vazado { flex: 0 0 auto; gap: .4rem; } .barra-celular__pin { flex: 0 0 auto; } @media (max-width: 928px) { .barra-celular { display: flex; } /* Compensação do conteúdo: altura da barra (~65px) + safe area do iPhone + folga, para que CTA final, endereço e rodapé nunca fiquem cobertos. */ body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } /* 88svh empurrava a prova social para fora da primeira rolagem sem ganho de composição: 80svh mantém placa, texto e CTA e encurta a dobra. */ .hero { min-height: 80svh; padding-block: calc(var(--barra) + 1.25rem) 2.25rem; /* O texto senta na base: centralizado, ele caía justamente sobre o letreiro iluminado e perdia contraste. */ align-items: flex-end; } /* No corte 9:16 a placa iluminada fica no terço superior; 38% traz a fachada e a entrada para dentro do quadro sem cortar o letreiro. */ .hero__foto { object-position: center 32%; } /* Véu do celular: forte no topo (sob a placa) e na base (atrás do texto e do CTA), moderado na faixa central, onde estão letreiro e entrada. */ .hero__veu { background: linear-gradient(to bottom, rgba(11,13,12,.88) 0%, rgba(11,13,12,.28) 14%, rgba(11,13,12,.34) 30%, rgba(11,13,12,.66) 44%, rgba(11,13,12,.86) 62%, rgba(11,13,12,.95) 82%, var(--noite) 100%); } /* Mesmo selo do desktop, só reduzido: filete âmbar + caixa alta espaçada em âmbar. O halo escuro entra apenas como reforço de contraste sobre o letreiro iluminado — não troca o modelo visual por outro. */ .hero__local { display: flex; align-items: baseline; gap: .55rem; font-size: .74rem; letter-spacing: .18em; line-height: 1.5; /* Largura suficiente para o endereço real quebrar em duas linhas em vez de três — sem encolher a fonte e sem abreviar o nome do município. */ max-width: 40ch; margin-bottom: 1rem; /* No celular o selo cai sobre a faixa mais clara da fachada iluminada e o âmbar do desktop perdia contraste. Só a cor do texto muda: o filete continua laranja e o resto do hero fica como está. */ color: #fff; text-shadow: 0 1px 14px rgba(11, 13, 12, .9), 0 0 4px rgba(11, 13, 12, .7); } .hero__local::before { content: ''; width: clamp(1rem, 5vw, 1.75rem); height: 1px; background: var(--laranja); flex: none; transform: translateY(-.3em); } .hero h1 { font-size: clamp(2.9rem, 13.5vw, 3.6rem); line-height: .9; letter-spacing: -.01em; max-width: 11ch; } .hero__texto { margin: 1.15rem 0 1.6rem; font-size: 1.0625rem; max-width: 36ch; } .hero__acoes .botao { width: 100%; } /* Conversão primeiro: o agendamento aparece logo depois da mensagem, antes da prova social. A barra fixa permanece como ação persistente. */ .hero__acoes { flex-direction: column; gap: .6rem; } .hero__acoes .botao--solido { display: inline-flex; order: 1; } /* A ação de apoio perde peso para não competir com o laranja. */ .hero__acoes .botao--vazado { order: 2; border-color: transparent; background: transparent; color: var(--cinza); text-decoration: underline; text-underline-offset: .25em; } /* Mesma regra do hero aplicada ao fecho: com a barra fixa a poucos pixels, dois botões laranja disputam o mesmo toque. O texto e o link continuam intactos — só o botão desce para o traço vazado. */ .fecho .botao--solido { background: transparent; color: var(--osso); border-color: var(--laranja); box-shadow: none; } .fecho .botao--solido:hover { background: transparent; color: var(--brasa); } /* Faixa de prova social compacta: em vez de empilhar três blocos altos (270px medidos, mais que um terço da tela), três colunas de largura igual com filete divisor — o mesmo desenho do desktop, em corpo menor. */ .prova .envolve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-block: 1.15rem; } .prova__item { flex-direction: column; align-items: flex-start; gap: .15rem; padding-inline: .7rem; border-left: 1px solid var(--grafite); } .prova__item:first-child { border-left: 0; padding-left: 0; } .prova__valor { gap: .4rem; } .prova__icone { width: 1rem; height: 1rem; } .prova__num { font-size: clamp(1.45rem, 6vw, 1.9rem); } .prova__rot { font-size: .69rem; /* 11px: piso de leitura para caixa alta com tracking */ letter-spacing: .08em; line-height: 1.35; max-width: none; } .prova__fonte { grid-column: 1 / -1; margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--grafite); width: 100%; font-size: .69rem; letter-spacing: .1em; color: #8b9294; /* mesmo cinza AA do rodapé */ } .equipamentos li { flex-direction: column; gap: .3rem; } .contatos li { flex-direction: column; gap: .25rem; } } /* Abaixo de ~355px o rótulo do botão primário quebrava em duas linhas: a barra ia de 83,8px para 108,9px, escondia o fim do rodapé e comia o CTA do hero. Apertar gutter interno e corpo do botão mantém a barra em uma linha só. */ @media (max-width: 360px) { /* Em 360px a descrição ia a quatro linhas; 16px com entrelinha 1,55 a devolve para três sem esconder nada do texto validado. */ .hero__texto { font-size: 1rem; line-height: 1.55; } .barra-celular { gap: .5rem; } .barra-celular .botao { font-size: .875rem; padding: .55rem .7rem; } } /* ========================================================================== Modalidades — diferenciação dos pilares, grade de turmas e apoio ========================================================================== */ /* Ícone linear: o único recurso gráfico novo do cartão. O filete inferior do topo já existia; nada de fundo extra ou borda grossa por cima. */ .pilar__topo { display: flex; align-items: center; gap: .85rem; } /* A trava de altura só existe onde os três cards dividem a mesma linha; no celular ela abriria vazio embaixo do título. */ @media (min-width: 929px) { .pilar__topo { min-height: 4.1rem; } } .pilar__icone { flex: 0 0 auto; width: 2rem; height: 2rem; color: var(--laranja); } .pilar h3 { margin: 0; } /* --- Grade de turmas ----------------------------------------------------- */ .turmas__lista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; } /* Cartão por turma: fundo próprio, sem coluna alinhada com a de cima — é o oposto da tabela que estava aqui antes. */ .turma { background: var(--noite); border: 1px solid var(--grafite); border-radius: 2px; padding: 1.15rem 1.25rem; } .turma__nome { margin: 0 0 .85rem; padding-bottom: .7rem; border-bottom: 1px solid var(--grafite); font-family: var(--dado); font-size: 1rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--laranja); } .turma__dias, .turma__horarios { margin: 0; color: var(--cinza); font-size: .95rem; } .turma__horarios { margin-top: .7rem; } .turma__rotulo { display: block; margin-bottom: .3rem; font-family: var(--dado); /* .6rem = 9,6px, pequeno demais para rótulo em caixa alta com tracking. */ font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; color: #7f878a; } .turma__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .turma__selo { display: inline-block; font-family: var(--dado); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--osso); border: 1px solid var(--laranja); border-radius: 2px; padding: .25rem .55rem; } /* CTA de seção: peso contextual, nunca concorrendo com o botão laranja. */ .turma__link { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--grafite); border-radius: 2px; color: var(--osso); text-decoration: none; font-family: var(--dado); font-size: .78rem; letter-spacing: .04em; line-height: 1.4; } .turma__link:hover { border-color: var(--laranja); color: var(--brasa); } /* O espaçamento dos chips vem do gap do flex. */ .turma__chips .hora { margin: 0; } .hora { display: inline-block; font-family: var(--dado); font-size: .82rem; letter-spacing: .04em; color: var(--osso); border: 1px solid var(--grafite); border-radius: 2px; padding: .3rem .5rem; margin: .15rem .3rem .15rem 0; } /* Desktop: três colunas fixas — modalidade, dias, horários — para varrer a grade em uma passada vertical. */ @media (min-width: 929px) { /* São quatro turmas: duas colunas fecham 2x2 sem cartão órfão na segunda linha, como aconteceria com três colunas. */ .turmas__lista { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .turma { padding: 1.4rem 1.5rem; } } /* --- Também na GFIT: apoio, não protagonista ----------------------------- */ .complementos--apoio { margin-top: 2.5rem; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--grafite); align-items: flex-start; gap: .9rem 1.5rem; } .complementos--apoio strong { padding-top: .35rem; } .complementos--apoio ul { gap: .45rem; font-size: .82rem; } .complementos--apoio li { font-family: var(--dado); letter-spacing: .04em; color: var(--cinza); border: 1px solid var(--grafite); border-radius: 2px; padding: .3rem .6rem; } .complementos--apoio li + li::before { content: none; } /* --- Modalidades no celular ---------------------------------------------- */ @media (max-width: 928px) { /* Cartão de modalidade: altura natural, sem trava. O ícone acompanha o corpo menor do título. */ .pilar { gap: 1rem; } .pilar__icone { width: 1.75rem; height: 1.75rem; } .pilar__topo { padding-bottom: .9rem; } /* Mesmo texto, linha mais curta: a descrição encolhe visualmente sem que nenhuma informação saia do ar. */ .pilar p { font-size: .9rem; line-height: 1.5; max-width: 40ch; } /* Etiquetas das modalidades: corpo menor, alvo ainda confortável. */ .lista-modal { gap: .4rem; } .lista-modal li { font-size: .7rem; letter-spacing: .05em; padding: .35rem .6rem; } /* --- Turmas: cartões em coluna única ----------------------------------- */ .turma { padding: 1rem 1.1rem; } .turma__nome { font-size: .95rem; } .turma__dias, .turma__horarios { font-size: .9rem; } .hora { font-size: .78rem; padding: .28rem .45rem; } /* Funcional Fight: alvo de toque cheio, peso contextual. */ .turma__link { display: flex; justify-content: center; padding: .75rem .8rem; text-align: center; } /* --- Também na GFIT: duas colunas compactas ---------------------------- */ .complementos--apoio { display: block; margin-top: 2rem; padding-top: 1.25rem; } .complementos--apoio strong { display: block; padding: 0 0 .8rem; } .complementos--apoio ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; font-size: .72rem; } .complementos--apoio li { padding: .4rem .55rem; line-height: 1.35; } } /* Em 360px o item mais longo da lista de apoio ("Loja de suplementos e itens de academia") ficava com três linhas dentro de meia largura: ele ocupa a linha inteira e o resto segue em duas colunas. */ @media (max-width: 380px) { .complementos--apoio li:last-child { grid-column: 1 / -1; } } /* ========================================================================== MOVIMENTO — base reutilizável Regra da casa: animar apenas `opacity` e `transform`. Nada de layout. Sem JS, sem IntersectionObserver ou com movimento reduzido, todo conteúdo nasce visível: a classe `mov` só entra no quando as condições são seguras. Esta sessão define os utilitários; a aplicação vem depois. ========================================================================== */ /* --- Revelação de entrada ------------------------------------------------ */ .mov [data-revela]:not(.revelado) { opacity: 0; transform: translate3d(0, var(--desloca), 0); } [data-revela] { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva); } .revelado { opacity: 1; transform: none; } /* Variantes de distância e ritmo */ [data-revela="curto"] { --desloca: var(--desloca-curto); } /* `fade` é para o filho de um bloco que já se desloca: ele só escalona a opacidade, sem mover nada. Usado nos três pilares de modalidades, onde um deslocamento por card abriria fresta na costura laranja da grade. */ [data-revela="fade"] { --desloca: 0px; } [data-revela="amplo"] { --desloca: var(--desloca-amplo); transition-duration: var(--mov-entrada-ampla); } /* --- Escalonamento ------------------------------------------------------- */ /* O pai recebe [data-escalona]; os filhos herdam o atraso pela ordem. Teto no 8º item para o último nunca esperar demais. */ .mov [data-escalona] > *:nth-child(1) { transition-delay: 0ms; } .mov [data-escalona] > *:nth-child(2) { transition-delay: calc(var(--mov-passo) * 1); } .mov [data-escalona] > *:nth-child(3) { transition-delay: calc(var(--mov-passo) * 2); } .mov [data-escalona] > *:nth-child(4) { transition-delay: calc(var(--mov-passo) * 3); } .mov [data-escalona] > *:nth-child(5) { transition-delay: calc(var(--mov-passo) * 4); } .mov [data-escalona] > *:nth-child(6) { transition-delay: calc(var(--mov-passo) * 5); } .mov [data-escalona] > *:nth-child(7) { transition-delay: calc(var(--mov-passo) * 6); } .mov [data-escalona] > *:nth-child(n+8) { transition-delay: calc(var(--mov-passo) * 7); } /* --- Microinterações ----------------------------------------------------- */ .mov-realce { transition: color var(--mov-curto) var(--curva), background-color var(--mov-curto) var(--curva), border-color var(--mov-curto) var(--curva); } .mov-eleva { transition: transform var(--mov-medio) var(--curva), border-color var(--mov-curto) var(--curva), background-color var(--mov-curto) var(--curva); } .mov-eleva:hover, .mov-eleva:focus-visible { transform: translate3d(0, -2px, 0); } .mov-eleva:active { transform: translate3d(0, 0, 0); } /* --- Movimento reduzido -------------------------------------------------- */ /* Sem `animation: none`: vários blocos desta página usam keyframes com `forwards` para chegar ao estado visível. Zerar a duração preserva o estado final e elimina o movimento. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } [data-revela] { opacity: 1 !important; transform: none !important; } .mov-eleva:hover, .mov-eleva:focus-visible { transform: none; } } /* ========================================================================== MOVIMENTO — aplicação nas seções de modalidades, turmas e motivos Este bloco fica no fim do arquivo de propósito: [data-revela] declara a transição de `opacity` e `transform`, então todo cartão que também tem hover precisa reescrever a lista inteira de transições — se declarasse só `background-color`, a regra genérica venceria e a revelação perderia a transição. Por isso cada seletor abaixo repete `opacity`/`transform` com a duração de entrada e acrescenta as suas próprias propriedades de hover. Doutrina do hover nos cartões: elevação por sombra curta + fio laranja, nunca por `transform`. Motivo: `transform` já é a propriedade da revelação; dividir a mesma propriedade entre dois tempos (520 ms de entrada e 220 ms de hover) obrigaria a encurtar a entrada para fora da faixa pedida. Os `transform` de hover/`:active` ficam nos links, que não são alvos de revelação — lá não há disputa. ========================================================================== */ /* --- Grade de modalidades ------------------------------------------------ */ /* A grade inteira faz o deslocamento (26 px, 680 ms) e os três cartões só escalonam a opacidade dentro dela. Passo de 150 ms em vez dos 70 ms padrão: como aqui não há deslocamento por cartão, o olho tem só a opacidade para separar um do outro, e a 100 ms a entrada era descrita como simultânea — foi o que a conferência em navegador real acusou. Três cartões, 300 ms de espera no último — que soma 820 ms com os seus próprios 520 ms de transição, contra os 680 ms da grade. O terceiro cartão fecha 140 ms depois dela, e é justamente essa sobra que faz a sequência ser percebida. Nada disso atrasa a leitura: o texto já está posicionado desde o primeiro quadro, só a opacidade viaja. O que **não** resolve isto é devolver deslocamento por cartão: é exatamente o que abre fresta na costura laranja da grade. */ .pilares { --mov-passo: 150ms; } /* --- Cartões de modalidade ----------------------------------------------- */ /* Nenhum conteúdo do cartão depende de hover: título, texto e submodalidades estão sempre visíveis. O realce é só reforço. */ .pilar { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva), background-color var(--mov-curto) var(--curva), box-shadow var(--mov-medio) var(--curva); } .pilar:hover, .pilar:focus-within { background-color: #191d1f; box-shadow: inset 0 2px 0 0 var(--laranja); } /* --- Cartões de turma ---------------------------------------------------- */ .turma { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva), border-color var(--mov-curto) var(--curva), box-shadow var(--mov-medio) var(--curva); } .turma:hover, .turma:focus-within { border-color: var(--laranja); box-shadow: 0 10px 20px -16px rgba(0, 0, 0, .9); } /* O link de disponibilidade recebe os mesmos estados dos demais botões: elevação no hover e no foco de teclado, afundamento no toque. */ .turma__link { transition: color var(--mov-curto) var(--curva), border-color var(--mov-curto) var(--curva), transform var(--mov-medio) var(--curva), box-shadow var(--mov-medio) var(--curva); } .turma__link:hover, .turma__link:focus-visible { border-color: var(--laranja); color: var(--brasa); transform: translate3d(0, -2px, 0); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .9); } .turma__link:active { transform: scale(.98); } /* --- Cartões de "Além da academia" --------------------------------------- */ /* Entrada discreta pela regra geral de [data-revela] (o pai carrega [data-escalona], então o segundo cartão entra um passo depois). No estado de hover/foco só transitam cor, fundo e sombra — sem transform, para o cartão não "pular" sob o dedo no celular. */ .alem__cartao { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva), border-color var(--mov-curto) var(--curva), background-color var(--mov-curto) var(--curva), box-shadow var(--mov-medio) var(--curva); } .alem__link, .motivo__link { transition: color var(--mov-curto) var(--curva), border-color var(--mov-curto) var(--curva); } .alem__seta, .motivo__seta { transition: transform var(--mov-medio) var(--curva); } .alem__cartao:hover .alem__seta, .alem__cartao:focus-within .alem__seta, .motivo__link:hover .motivo__seta, .motivo__link:focus-visible .motivo__seta { transform: translateX(3px); } .motivo__link:focus-visible { color: var(--brasa); border-bottom-color: var(--brasa); } @media (prefers-reduced-motion: reduce) { .alem__cartao, .alem__link, .motivo__link, .alem__seta, .motivo__seta { transition: none; } /* O fio laranja e a sombra permanecem: são o sinal não-cromático do estado. Só o deslocamento da seta sai. */ .alem__cartao:hover .alem__seta, .alem__cartao:focus-within .alem__seta, .motivo__link:hover .motivo__seta, .motivo__link:focus-visible .motivo__seta { transform: none; } } /* --- Cartões de motivo --------------------------------------------------- */ /* Abaixo de 1024px os motivos são blocos separados por filete, não cartões: ali o realce de borda não existe e só a revelação atua. */ .motivo { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva), border-color var(--mov-curto) var(--curva), background-color var(--mov-curto) var(--curva), box-shadow var(--mov-medio) var(--curva); } @media (min-width: 1024px) { .motivo:hover, .motivo:focus-within { border-color: var(--laranja); background-color: #191d1f; box-shadow: 0 12px 22px -18px rgba(0, 0, 0, .9); } } /* --- CTA contextual das seções ------------------------------------------- */ /* O CTA só existe a partir de 929px; no celular a barra fixa cumpre o papel. */ @media (min-width: 929px) { .acao-contexto__link { transition: color var(--mov-curto) var(--curva), border-color var(--mov-curto) var(--curva), transform var(--mov-medio) var(--curva); } .acao-contexto__seta { transition: transform var(--mov-medio) var(--curva); } .acao-contexto__link:focus-visible { color: var(--brasa); border-bottom-color: var(--brasa); } .acao-contexto__link:focus-visible .acao-contexto__seta { transform: translateX(3px); } .acao-contexto__link:active { transform: scale(.98); } } /* --- Movimento reduzido -------------------------------------------------- */ /* A regra global do bloco anterior já zera durações e força [data-revela] visível. Aqui saem apenas os deslocamentos: as sombras e o fio laranja permanecem, porque não são movimento — são o sinal não-cromático que distingue o estado de hover/foco de uma simples troca de cor. */ @media (prefers-reduced-motion: reduce) { .turma__link:hover, .turma__link:focus-visible, .turma__link:active, .acao-contexto__link:active { transform: none; } .acao-contexto__link:focus-visible .acao-contexto__seta { transform: none; } } /* ========================================================================== MOVIMENTO — aplicação na seção de estrutura Formato encontrado: acordeão de cinco ambientes, um aberto por vez, cada painel com texto e galeria de rolagem manual. Não é `tablist` — os painéis são regiões que convivem numa pilha vertical, e a marcação já usa `aria-expanded`/`aria-controls`/`role="region"`, que é a semântica correta para este padrão. Trocar por tabs mudaria conteúdo e navegação sem ganho. ========================================================================== */ /* --- Revelação de entrada ------------------------------------------------ */ /* A pilha inteira desloca (26 px, 680 ms) e os cinco itens só escalonam a opacidade dentro dela: os itens são separados por costura de 2 px sobre o fundo grafite, e deslocar item a item abriria e fecharia essa costura — o mesmo motivo que fixou `fade` nos cartões de modalidade. Passo de 110 ms, não os 70 ms padrão: sem deslocamento por item o olho só tem a opacidade para separar um do outro. Cinco itens × 110 ms = 440 ms de espera no último, que fecha aos 960 ms — 280 ms depois da pilha. É essa sobra que faz a cascata ser percebida sem esticar demais a seção. */ .acordeao { --mov-passo: 110ms; } /* O item tem transição própria de fundo; a regra genérica [data-revela] só declara opacity/transform, então a lista precisa ser reescrita inteira. */ .acordeao__item { transition: opacity var(--mov-entrada) var(--curva), transform var(--mov-entrada) var(--curva), background-color .22s var(--curva); } /* Ícone: entrada curta junto com o item — 0.94 para 1 e 2° de rotação. Sem laço, sem ícone novo. O `+`/`−` de estado continua sendo o mesmo. */ .mov [data-revela]:not(.revelado) .acordeao__icone { transform: scale(.94) rotate(-2deg); } .acordeao__icone { transition: transform var(--mov-entrada) var(--curva); } /* --- Troca de ambiente --------------------------------------------------- */ /* A altura do painel já animava (`grid-template-rows`, 260 ms). O que faltava era o conteúdo: agora ele entra com fade + 14 px de deslocamento horizontal, 320 ms, atrasado em 60 ms para chegar depois de a altura ter começado a abrir. Só o painel anima — cabeçalho, gatilhos e CTA ficam parados. O estado inicial vale para o painel fechado ([hidden]), então o item já aberto no carregamento nasce visível mesmo sem JS. Nada bloqueia clique: são transições, não animações com trava. */ .acordeao__painel[hidden] .acordeao__conteudo > * { opacity: 0; transform: translate3d(14px, 0, 0); } .acordeao__conteudo > * { opacity: 1; transform: none; transition: opacity 320ms var(--curva) 60ms, transform 320ms var(--curva) 60ms; } /* --- Movimento reduzido -------------------------------------------------- */ /* A regra global zera durações e força [data-revela] visível. Aqui o conteúdo do painel e o ícone voltam ao estado neutro: a troca de ambiente passa a ser instantânea e legível, sem nenhum deslocamento. */ @media (prefers-reduced-motion: reduce) { .acordeao__painel[hidden] .acordeao__conteudo > *, .acordeao__conteudo > * { opacity: 1; transform: none; } .mov [data-revela]:not(.revelado) .acordeao__icone { transform: none; } } /* --- Parallax ------------------------------------------------------------ */ /* Decisão: não implementado. A seção não tem imagem de fundo nem camada decorativa — o acordeão assenta direto no fundo da página, e as fotos vivem dentro de galerias de rolagem manual, onde deslocar a imagem brigaria com o gesto de arraste. Aplicar parallax exigiria criar um elemento decorativo novo só para movê-lo, o que é decoração sem conteúdo. O hero já tem entrada orquestrada própria e não será reimplementado. Registro em README. */ /* ========================================================================== LEGIBILIDADE MOBILE — textos informativos Ajuste sutil e uniforme: só o corpo de leitura sobe (parágrafos, descrições, textos de apoio), com line-height mais folgado. Títulos, selos, rótulos, navegação e botões ficam intactos para não achatar a hierarquia. Base de referência: 320px, 375px e 390px. ========================================================================== */ @media (max-width: 928px) { /* Parágrafos de abertura de seção e o texto do CTA final. */ .chamada { font-size: 1.0625rem; line-height: 1.6; } /* Descrições das modalidades: volta ao corpo do texto corrido, com linha ainda curta o bastante para não criar blocos altos. */ .pilar p { font-size: 1rem; line-height: 1.6; max-width: 42ch; } /* Seção Estrutura: texto dentro dos painéis do acordeão. */ .acordeao__conteudo > p { font-size: 1.0625rem; line-height: 1.62; } /* Diferenciais ("por que a GFIT"). */ .motivo p { font-size: 1.0625rem; line-height: 1.6; } /* Localização e orientação de chegada. */ .local__info p, .local__referencia { font-size: 1.0625rem; line-height: 1.6; } /* Informações complementares: horários, planos e canais de contato. */ .operacao span, .contato-alvo span, .rodape { line-height: 1.6; } .rodape { font-size: .98rem; } /* Lista de apoio "Também na GFIT": sobe o mínimo necessário para leitura confortável em duas colunas, sem estourar a largura em 320px. */ .complementos--apoio ul { font-size: .8rem; } } /* ========================================================================== PÁGINAS DE ROTA (/club e /eventos) Nada de novo em cor ou tipografia: as páginas reusam os tokens, os botões, a placa, as seções, os contatos e o rodapé da home. Este bloco só resolve a abertura própria das rotas — que não têm fotografia, porque não existe foto real do Clube nem dos Eventos — e o ritmo de leitura das seções de texto. ========================================================================== */ /* --- Abertura ------------------------------------------------------------ Mesmo desenho do fecho da home (halo âmbar sob a placa + fileira de refletores), aqui como primeira dobra. `100svh` não: a página é curta e o hero cheio empurraria o conteúdo para fora da rolagem inicial. ------------------------------------------------------------------------ */ .rota-hero { position: relative; margin-top: calc(var(--barra) * -1); padding-block: calc(var(--barra) + clamp(4.5rem, 13vh, 8rem)) clamp(4rem, 11vh, 7rem); overflow: hidden; border-bottom: 1px solid var(--grafite); background: radial-gradient(ellipse 78% 90% at 50% 0%, rgba(232, 161, 58, .17), transparent 68%), var(--noite); } @media (max-width: 928px) { .rota-hero { background: radial-gradient(ellipse 140% 40% at 50% 3%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%), var(--noite); } } .rota-hero > .envolve { position: relative; z-index: 1; } /* Os refletores da rota acendem na entrada, como os da fachada na home. */ .spots--rota { top: var(--barra); margin-top: 5px; } /* Marca-d'água: quina inferior direita, longe da coluna de texto e dos CTAs. */ .marca-agua--rota { width: clamp(230px, 40vw, 460px); bottom: -30%; right: -16%; opacity: .10; transform: rotate(-5deg); } @media (max-width: 640px) { .marca-agua--rota { bottom: -14%; right: -32%; opacity: .085; } } .rota-hero__selo { font-family: var(--dado); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crepusculo); margin: 0 0 1.5rem; } /* O título é o elemento de assinatura da rota: mesma máscara por linha do H1 da home, em caixa alta, com "Clube" em laranja. */ .rota-hero__titulo { font-size: clamp(3rem, 10vw, 6.5rem); line-height: .84; text-transform: uppercase; max-width: 12ch; margin: 0; } .rota-hero__titulo span { display: block; } .rota-hero__titulo .acento { color: var(--laranja); } .rota-hero__titulo .linha__i { white-space: nowrap; } .rota-hero__titulo .linha { overflow: hidden; padding-block: .14em; margin-block: -.14em; } .mov .rota-hero__titulo .linha__i { animation: linhaSobe 620ms var(--curva) both; } .rota-hero__titulo .linha:nth-child(1) .linha__i { animation-delay: .48s; } .rota-hero__titulo .linha:nth-child(2) .linha__i { animation-delay: .60s; } .rota-hero__texto { margin: 1.75rem 0 2.25rem; font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--osso); max-width: 44ch; opacity: .92; } .rota-hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; } @media (prefers-reduced-motion: reduce) { .rota-hero__titulo .linha__i { animation: none; opacity: 1; transform: none; } .spots--rota .spot { animation: none; opacity: .95; } } /* --- Corpo de texto ------------------------------------------------------ */ .rota-texto { max-width: 62ch; } .rota-texto p { color: var(--cinza); font-size: clamp(1rem, 1.7vw, 1.1rem); margin-bottom: 1.15rem; } /* O primeiro parágrafo é a definição: fica no branco quente da página. */ .rota-texto p:first-child { color: var(--osso); } .rota-texto__acao { margin-top: 1.75rem; } /* Link discreto de saída: sem preenchimento laranja, para não competir com os CTAs de Instagram e WhatsApp. Mesma gramática do .alem__link da home. */ .rota-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; /* alvo de toque */ padding: .55rem .25rem; font-weight: 700; font-size: .95rem; color: var(--crepusculo); text-decoration: none; border-bottom: 2px solid rgba(232, 161, 58, .35); transition: color var(--mov-curto) var(--curva), border-color var(--mov-curto) var(--curva); } .rota-link:hover, .rota-link:focus-visible { color: var(--brasa); border-bottom-color: var(--brasa); } .rota-link__seta { font-size: 1.15rem; line-height: 1; } /* --- Como acompanhar ----------------------------------------------------- */ .secao--acompanhar { padding-bottom: clamp(5rem, 13vh, 8.5rem); } .rota-contatos { list-style: none; margin: 0; padding: 0; max-width: 34rem; } .rota-acoes { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; } /* Em 320px os dois CTAs empilham em largura total: nenhum rótulo quebra e o alvo de toque continua inteiro. */ @media (max-width: 380px) { .rota-acoes .botao, .rota-hero__acoes .botao { width: 100%; } } /* --- Variação da rota /eventos ------------------------------------------- Mesma abertura do Clube, espelhada: o halo âmbar nasce à esquerda e a marca-d'água vai para a quina oposta. As duas rotas ficam irmãs, não cópias, sem introduzir cor, tipografia ou movimento novos. ------------------------------------------------------------------------ */ .rota-hero--eventos { background: radial-gradient(ellipse 72% 88% at 22% 0%, rgba(232, 161, 58, .17), transparent 68%), var(--noite); } @media (max-width: 928px) { .rota-hero--eventos { background: radial-gradient(ellipse 140% 40% at 32% 3%, rgba(232, 161, 58, .26), rgba(232, 161, 58, .09) 45%, transparent 78%), var(--noite); } } .marca-agua--eventos { right: auto; left: -18%; transform: rotate(5deg); } @media (max-width: 640px) { .marca-agua--eventos { left: -34%; } } /* ======================================================================== GFIT EVENTOS — arquitetura editorial (rota /eventos) Classes usadas exclusivamente pela página /eventos. Nada aqui é referenciado pela home nem por /club. Toda cor, tipografia, filete e movimento saem dos tokens e dos padrões já existentes (motivo, alem, fecho) — nenhuma primitiva nova de estilo é introduzida. ======================================================================== */ /* --- Destaque editorial: Mobilidade é Vida ------------------------------ */ .editorial__grade { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } @media (min-width: 900px) { .editorial__grade { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; } } .editorial__titulo { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: .9; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); } /* Painel de assinatura tipográfico — substitui a fotografia enquanto não há registro real. Mesma superfície carvão + filete laranja do topo dos cartões da página, para ler como assinatura da marca, não como imagem faltando. */ .editorial__selo { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 5vw, 2.75rem); background: radial-gradient(ellipse 90% 70% at 80% 0%, rgba(232, 161, 58, .12), transparent 70%), var(--noite); border: 1px solid var(--grafite); border-top: 2px solid var(--laranja); border-radius: 2px; } .editorial__selo-marca { font-family: var(--placa); font-weight: 800; text-transform: uppercase; line-height: .82; font-size: clamp(3.25rem, 9vw, 5rem); color: var(--osso); } .editorial__selo-linha { font-family: var(--dado); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--crepusculo); } /* --- Galeria editorial --------------------------------------------------- */ /* Grade responsiva com proporção reservada (sem layout shift) e lazy-loading nas imagens (atributo no HTML). Fica pronta; só entra em cena com foto real. */ .galeria__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); } .galeria__item { margin: 0; border: 1px solid var(--grafite); border-radius: 2px; overflow: hidden; background: var(--carvao); } .galeria__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; /* dimensão reservada — sem salto de layout */ object-fit: cover; } .galeria__item figcaption { padding: .75rem 1rem; font-family: var(--dado); font-size: .78rem; letter-spacing: .04em; color: var(--cinza); } /* Estado honesto quando não há acervo: nunca um placeholder que finja foto. */ .galeria__vazia { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; max-width: 46ch; margin-inline: auto; padding: clamp(2.5rem, 8vw, 4rem) clamp(1.5rem, 5vw, 2.5rem); border: 1px dashed var(--grafite); border-radius: 2px; background: var(--carvao); } .galeria__vazia-icone { color: var(--laranja); opacity: .8; margin-bottom: .5rem; } .galeria__vazia p { margin: 0; color: var(--cinza); font-size: .98rem; max-width: 42ch; } .galeria__vazia strong { color: var(--osso); font-weight: 600; } /* --- Projetos e ações ---------------------------------------------------- */ .projetos__grade { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .projeto { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--carvao); border: 1px solid var(--grafite); border-radius: 2px; } .projeto--destaque { border-top: 2px solid var(--laranja); } .projeto--reservado { background: transparent; border-style: dashed; } .projeto--reservado .projeto__titulo, .projeto--reservado .projeto__texto { color: var(--cinza); } .projeto__estado { font-family: var(--dado); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crepusculo); margin: 0; } .projeto--reservado .projeto__estado { color: var(--cinza); } .projeto__titulo { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1; letter-spacing: .015em; } .projeto__texto { margin: 0; color: var(--cinza); font-size: .98rem; max-width: 42ch; } .projeto .rota-link { margin-top: auto; } /* --- Próximos movimentos: agenda (só com dados reais) -------------------- */ .agenda { list-style: none; margin: 0 0 2.25rem; padding: 0; display: flex; flex-direction: column; } .agenda__item { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--grafite); } .agenda__item:first-child { padding-top: 0; } .agenda__item:last-child { border-bottom: none; } .agenda__data { font-family: var(--dado); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja); min-width: 6rem; flex-shrink: 0; } .agenda__titulo { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.02; margin-bottom: .3rem; } .agenda__local { margin: 0; color: var(--cinza); font-size: .95rem; } /* CTAs centrados no fecho, herdando o layout flexível de .rota-acoes. */ .rota-acoes--centro { justify-content: center; margin-top: 0; } /* ======================================================================== GFIT CLUB — arquitetura de clube de benefícios (rota /club) Classes usadas exclusivamente pela página /club. Nada aqui é referenciado pela home nem por /eventos. Cor, tipografia, filete e espaçamento saem dos tokens já existentes — nenhuma primitiva nova de estilo é introduzida. Registro mais institucional e aspiracional que /eventos: mais respiro, ícones discretos, cartões consistentes. ======================================================================== */ /* --- Categorias conceituais (possibilidades em desenvolvimento) ---------- */ .club-categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; } @media (min-width: 560px) { .club-categorias { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .club-categorias { grid-template-columns: repeat(4, 1fr); } } .club-cat { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: clamp(1.5rem, 3.5vw, 2.25rem); background: var(--carvao); border: 1px solid var(--grafite); border-top: 2px solid var(--laranja); border-radius: 2px; } .club-cat__icone { display: inline-flex; color: var(--laranja); margin-bottom: .25rem; } .club-cat__estado { font-family: var(--dado); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crepusculo); margin: 0; } .club-cat__titulo { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.05; letter-spacing: .01em; color: var(--osso); } .club-cat__texto { margin: 0; color: var(--cinza); font-size: .98rem; max-width: 40ch; } /* --- Vantagens ativas: lista modular + estado vazio honesto -------------- */ /* .club-lista só entra em cena com parceiro/benefício confirmado. Enquanto isso, exibe-se .club-vazio — nunca um logo ou nome inventado. */ .club-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .club-item { min-width: 0; display: flex; gap: 1.25rem; padding: clamp(1.5rem, 3.5vw, 2rem); background: var(--noite); border: 1px solid var(--grafite); border-radius: 2px; } .club-item__logo { flex-shrink: 0; width: 4rem; height: 4rem; object-fit: contain; border-radius: 2px; background: var(--carvao); } .club-item__corpo { min-width: 0; display: flex; flex-direction: column; gap: .4rem; } .club-item__categoria { font-family: var(--dado); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--crepusculo); margin: 0; } .club-item__nome { font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.05; color: var(--osso); } .club-item__texto, .club-item__condicao { margin: 0; color: var(--cinza); font-size: .95rem; max-width: 42ch; } .club-item__condicao { color: var(--osso); } .club-item__estado { font-family: var(--dado); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); margin: 0; } .club-item__estado[data-status="ativo"] { color: var(--laranja); } .club-item__validade { font-family: var(--dado); font-size: .8rem; color: var(--cinza); } .club-item__link { margin-top: .3rem; } /* Estado vazio: dashed, texto centrado, ícone discreto. Nunca finge dado. */ .club-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; max-width: 52ch; margin-inline: auto; padding: clamp(2.75rem, 8vw, 4.25rem) clamp(1.5rem, 5vw, 2.5rem); border: 1px dashed var(--grafite); border-radius: 2px; background: var(--noite); } .club-vazio__icone { color: var(--laranja); opacity: .85; margin-bottom: .4rem; } .club-vazio p { margin: 0; color: var(--cinza); font-size: 1rem; max-width: 46ch; } .club-vazio strong { color: var(--osso); font-weight: 600; } /* --- Ponte para o GFIT Eventos ------------------------------------------ */ .club-ponte { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 4vw, 2.25rem); padding: clamp(1.75rem, 5vw, 3rem); background: radial-gradient(ellipse 90% 80% at 88% 0%, rgba(232, 161, 58, .12), transparent 70%), var(--carvao); border: 1px solid var(--grafite); border-left: 2px solid var(--laranja); border-radius: 2px; } .club-ponte__selo { font-family: var(--dado); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crepusculo); margin: 0 0 .75rem; } .club-ponte__titulo { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.02; letter-spacing: .01em; color: var(--osso); margin-bottom: 1rem; max-width: 24ch; } .club-ponte__corpo { margin: 0; color: var(--cinza); font-size: 1rem; max-width: 56ch; } @media (min-width: 860px) { .club-ponte { flex-direction: row; align-items: center; justify-content: space-between; } .club-ponte__texto { max-width: 42rem; } .club-ponte__acao { flex-shrink: 0; } } @media (max-width: 520px) { .club-ponte__acao { width: 100%; text-align: center; } }