@charset "UTF-8";
/* =========================================================================
   349 Fitness Experience — página única de captação.
   Carregue sempre depois de base.css, que traz tokens, reset, botões, topo,
   rodapé, barra fixa, FAQ, números, fecho e o motor de animação de scroll.

   O que mora aqui são as peças que só esta página tem:
   as duas portas do hero, as abas de musculação e natação, os painéis,
   os cartões de modalidade, a faixa da melhor idade, a galeria com lupa
   e o montador de mensagem do WhatsApp.
   ========================================================================= */

/* =========================================================================
   HERO
   O problema do hero anterior era simples: um véu de 93% em cima da melhor
   informação da foto, que é a luz. Aqui o véu é direcional e para de escurecer
   onde o texto acaba, então o neon violeta, o azul da piscina e o verde das
   máquinas continuam vivos. O contraste do texto foi medido no pixel, não no
   olho: ver direcao-de-arte.md.
   ========================================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--tinta);color:var(--papel);
  display:grid;align-content:end;
  /* no celular o texto começa depois da faixa de foto, e não em cima dela:
     foto landscape esticada num bloco vertical vira recorte de 13% da imagem,
     que não mostra academia nenhuma. */
  padding-block:calc(31svh + var(--e-4)) var(--e-6);
  gap:var(--e-6);
}

/* ---------- palco de fotos ---------- */
.palco{position:absolute;inset:0 0 auto 0;block-size:44svh;z-index:-1;overflow:hidden}
.palco__foto{position:absolute;inset:0;opacity:0}
.palco__foto:first-child{opacity:1}
.palco__foto img,.palco__foto picture{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.palco__foto:nth-child(1) img{object-position:50% 72%}
.palco__foto:nth-child(2) img{object-position:50% 62%}
.palco__foto:nth-child(3) img{object-position:50% 62%}

/* véu direcional: forte onde mora o texto, quase nada do outro lado */
.palco__veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgb(23 18 38 / .42) 0%,
    rgb(23 18 38 / .10) 26%,
    rgb(23 18 38 / .55) 68%,
    var(--tinta) 97%);
}

/* hastes verticais: a geometria do logotipo, que desenha o 3-4-9 com traços
   retos, ecoando as luminárias lineares do teto das salas */
.palco__hastes{
  position:absolute;inset-block:0;inset-inline-start:0;
  display:flex;gap:clamp(1.25rem,4vw,2.75rem);
  padding-inline-start:clamp(1.25rem,5vw,4rem);
  opacity:.5;
}
.palco__hastes i{
  inline-size:1px;block-size:100%;transform-origin:50% 100%;
  background:linear-gradient(180deg,transparent,var(--acao) 45%,transparent);
}
.palco__hastes i:nth-child(2){background:linear-gradient(180deg,transparent,var(--marca-clara) 55%,transparent)}
.palco__hastes i:nth-child(3){background:linear-gradient(180deg,transparent,var(--acao) 35%,transparent)}
.palco__hastes i:nth-child(4){background:linear-gradient(180deg,transparent,var(--marca-clara) 60%,transparent)}
.palco__hastes i:nth-child(5){background:linear-gradient(180deg,transparent,var(--acao) 50%,transparent)}

/* ---------- texto ---------- */
.hero__texto{display:grid;gap:var(--e-4);position:relative}
.hero .kicker{margin-block-end:0;color:var(--texto-claro)}

/* a modalidade que gira. Decorativa: o leitor de tela recebe a lista inteira
   de uma vez, no .so-leitor, e nunca vê o texto trocando debaixo dele. */
.gira{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-1) var(--e-4);
  font-size:var(--t-guia);line-height:1.15}
.gira__rot{
  font-size:var(--t-mini);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acao);
}
.gira__janela{
  position:relative;display:block;overflow:hidden;
  block-size:1.35em;min-inline-size:12ch;
  font-family:var(--f-display);color:var(--acao);
}
.gira__palavra{
  position:absolute;inset-inline-start:0;inset-block-start:0;
  display:flex;align-items:center;block-size:100%;
  white-space:nowrap;opacity:0;
}
.gira__palavra:first-child{opacity:1}

.hero h1{font-size:var(--t-h1);max-inline-size:15ch;letter-spacing:-.025em;text-wrap:balance}
.hero .sustento{max-inline-size:44ch}

/* ---------- as duas portas ---------- */
.portas{position:relative;display:grid;gap:var(--e-3)}
.porta{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--e-4);
  padding:var(--e-5);
  border:1px solid var(--borda-viva);border-radius:var(--r-2);
  color:var(--papel);text-decoration:none;
  background:color-mix(in srgb,var(--tinta) 72%,transparent);
  backdrop-filter:blur(14px);
  transition:transform var(--dur),border-color var(--dur);
}
.porta__fundo{position:absolute;inset:0;z-index:-1;opacity:.32;transition:opacity var(--dur),transform .5s ease}
.porta__fundo picture{display:block;block-size:100%}
.porta__fundo img{inline-size:100%;block-size:100%;object-fit:cover}
.porta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--tinta) 12%,rgb(23 18 38 / .72) 62%,rgb(23 18 38 / .35));
}
.porta__conteudo{display:grid;gap:var(--e-2)}
.porta__rot{font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acao)}
.porta__nome{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.05;letter-spacing:-.02em}
.porta__nota{font-size:.95rem;line-height:1.45;color:var(--texto-claro);max-inline-size:34ch}
.porta__seta{
  display:grid;place-items:center;flex:none;
  inline-size:3rem;block-size:3rem;border-radius:50%;
  border:1px solid var(--borda-viva);color:var(--acao);
  transition:background-color var(--dur),transform var(--dur),border-color var(--dur);
}
.porta__seta svg{inline-size:1.25rem;block-size:1.25rem}
.porta:hover{border-color:var(--acao);transform:translateY(-2px)}
.porta:hover .porta__fundo{opacity:.5;transform:scale(1.05)}
.porta:hover .porta__seta{background:var(--acao);color:var(--btn-tinta);border-color:var(--acao);transform:translateX(3px)}
.porta:active{transform:translateY(0) scale(.995)}

@media (min-width:40rem){
  .portas{grid-template-columns:1fr 1fr;gap:var(--e-4)}
  .porta{grid-template-columns:1fr;align-items:start;gap:var(--e-4);padding:var(--e-5);min-block-size:11.5rem;align-content:space-between}
  .porta__seta{justify-self:end}
}
@media (min-width:56rem){
  /* tela larga aguenta a foto sangrada atrás do texto, porque o recorte deixa
     de ser uma fatia estreita e volta a mostrar a sala inteira */
  .hero{padding-block:clamp(4.5rem,7.5vw,7rem) var(--e-7);gap:var(--e-6)}
  .palco{inset:0;block-size:auto}
  .palco__veu{
    background:
      linear-gradient(180deg,rgb(23 18 38 / .5) 0%,rgb(23 18 38 / .08) 24%,rgb(23 18 38 / 0) 46%),
      linear-gradient(96deg,var(--tinta) 4%,rgb(23 18 38 / .88) 30%,rgb(23 18 38 / .5) 56%,rgb(23 18 38 / .16) 80%),
      linear-gradient(0deg,var(--tinta) 2%,rgb(23 18 38 / 0) 34%);
  }
  .hero__texto{max-inline-size:min(100%,46rem)}
  .hero h1{max-inline-size:16ch}
  .palco__hastes{gap:clamp(2rem,5vw,4.5rem)}
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion:no-preference){
  .palco__foto{
    animation:trocaFoto 18s cubic-bezier(.4,0,.2,1) infinite both;
    animation-delay:calc(var(--i) * 6s - 18s);
  }
  .palco__foto img{
    animation:aproxima 18s linear infinite both;
    animation-delay:calc(var(--i) * 6s - 18s);
  }
  .gira__palavra{
    animation:giraPalavra 18s ease infinite both;
    animation-delay:calc(var(--i) * 3s - 18s);
  }
  .palco__hastes i{animation:cresceHaste 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * .1s + .2s);transform:scaleY(0)}
  .palco__hastes i:nth-child(1){animation-delay:.15s}
  .palco__hastes i:nth-child(2){animation-delay:.25s}
  .palco__hastes i:nth-child(3){animation-delay:.35s}
  .palco__hastes i:nth-child(4){animation-delay:.45s}
  .palco__hastes i:nth-child(5){animation-delay:.55s}
}
@keyframes trocaFoto{
  0%,28%   {opacity:1}
  36%,94%  {opacity:0}
  100%     {opacity:1}
}
@keyframes aproxima{ from{transform:scale(1.005)} to{transform:scale(1.06)} }
@keyframes giraPalavra{
  0%      {opacity:0;transform:translateY(.5em)}
  2%      {opacity:1;transform:none}
  14%     {opacity:1;transform:none}
  16.6%   {opacity:0;transform:translateY(-.5em)}
  100%    {opacity:0;transform:translateY(.5em)}
}
@keyframes cresceHaste{ from{transform:scaleY(0)} to{transform:scaleY(1)} }

/* ----------------------------------------------------------------- ABAS */
.escolha{background:var(--papel);padding-block:var(--secao) 0}
.escolha > .envelope h2{max-inline-size:20ch}

.abas{position:sticky;inset-block-start:0;z-index:40;padding-block:var(--e-4);
  background:linear-gradient(180deg,var(--papel) 72%,transparent)}
.abas__trilho{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--e-1);
  padding:var(--e-1);
  border:1px solid var(--borda-clara);border-radius:var(--r-pill);
  background:#fff;
}
.aba{
  appearance:none;border:0;cursor:pointer;
  min-block-size:3rem;padding:var(--e-3) var(--e-4);
  border-radius:var(--r-pill);
  background:transparent;color:var(--suave);
  font:600 clamp(.95rem,.9rem + .3vw,1.0625rem)/1.2 var(--f-corpo);
  transition:background-color var(--dur),color var(--dur);
}
.aba:hover{color:var(--tinta)}
.aba[aria-selected="true"]{background:var(--tinta);color:var(--papel)}

/* --------------------------------------------------------------- PAINEL */
.painel{padding-block:var(--e-6) var(--secao)}
.painel[hidden]{display:none}
.painel__capa{margin:0 0 var(--e-6)}
.painel__capa img{inline-size:100%;border-radius:var(--r-2);aspect-ratio:16/8;object-fit:cover}
.painel__titulo{font-size:var(--t-h2);max-inline-size:18ch}
.painel__texto{margin-block-start:var(--e-4);font-size:var(--t-guia);color:var(--suave);max-inline-size:var(--leitura)}

/* ----------------------------------------------- CARTÕES DE MODALIDADE
   Cada um abre no toque. É a interação mais barata que existe e a que mais
   respeita quem só quer olhar: nada aparece antes de ser pedido. */
.modalidades{list-style:none;margin:var(--e-7) 0 0;padding:0;display:grid;gap:var(--e-3)}
.modal{
  border:1px solid var(--borda-clara);border-radius:var(--r-2);
  background:#fff;overflow:hidden;
  transition:border-color var(--dur);
}
.modal[open]{border-color:var(--marca)}
.modal summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-4) var(--e-5);min-block-size:3.5rem;
}
.modal summary::-webkit-details-marker{display:none}
.modal__nome{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.1}
.modal summary::after{
  content:"";flex:none;inline-size:.9rem;block-size:.9rem;
  border-inline-end:2px solid var(--marca);border-block-end:2px solid var(--marca);
  transform:rotate(45deg) translate(-.15rem,-.15rem);
  transition:transform var(--dur);
}
.modal[open] summary::after{transform:rotate(225deg) translate(-.2rem,-.2rem)}
.modal summary:hover{background:var(--papel-2)}
.modal__corpo{padding:0 var(--e-5) var(--e-5);display:grid;gap:var(--e-3)}
.modal__corpo p{color:var(--suave);max-inline-size:60ch}
.modal__hora{
  font-size:var(--t-mini);font-weight:600;letter-spacing:.04em;color:var(--apoio);
  padding-block-start:var(--e-3);border-block-start:1px solid var(--borda-clara);
}

/* ------------------------------------------------------------------ DUO */
.duo{margin-block-start:var(--e-8);display:grid;gap:var(--e-6)}
.duo__foto{margin:0;border-radius:var(--r-2);overflow:hidden}
.duo__foto img{inline-size:100%;aspect-ratio:4/3;object-fit:cover}
.duo__texto h4{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.14;max-inline-size:18ch}

/* lista com o traço vertical do logotipo */
.lista-marcada{list-style:none;margin:var(--e-4) 0 0;padding:0}
.lista-marcada li{
  position:relative;padding-block:var(--e-3);padding-inline-start:var(--e-5);
  border-block-end:var(--borda);color:var(--suave);
}
.lista-marcada li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:calc(var(--e-3) + .38em);
  inline-size:.2rem;block-size:1.05em;background:var(--marca);border-radius:var(--r-1);
}
.lista-marcada strong{color:var(--tinta)}

/* ------------------------------------------------------- FAIXA DOS 60+
   A melhor idade não é uma página separada: ela aparece dentro dos dois
   caminhos, porque o programa existe na sala e na água. */
.faixa60{
  margin-block-start:var(--e-8);
  padding:var(--e-6);border-radius:var(--r-2);
  background:var(--tinta);color:var(--papel);
  display:grid;gap:var(--e-4);justify-items:start;
}
.faixa60__rot{font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acao)}
.faixa60__texto{color:var(--texto-claro);max-inline-size:62ch}
.faixa60__texto strong{color:var(--papel)}
.botao--peq{min-block-size:2.75rem;padding:var(--e-2) var(--e-4);font-size:.95rem}

/* -------------------------------------------------------------- GALERIA
   Multi-coluna em vez de grade rígida: as fotos da 349 têm proporções bem
   diferentes e cortar todas no mesmo quadrado jogaria fora o que elas têm
   de melhor, que é o pé-direito e a iluminação. */
.galeria-sec{background:var(--tinta);color:var(--papel);padding-block:var(--secao)}
.galeria-sec h2{max-inline-size:20ch}
.grade-fotos{list-style:none;margin:var(--e-7) auto 0;padding:0;columns:1;column-gap:var(--e-3)}
.grade-fotos li{break-inside:avoid;margin-block-end:var(--e-3)}
.foto{
  display:block;inline-size:100%;padding:0;border:0;cursor:zoom-in;
  background:none;border-radius:var(--r-2);overflow:hidden;
  transition:transform var(--dur),box-shadow var(--dur);
}
.foto img{inline-size:100%;block-size:auto;display:block;transition:transform .4s ease}
.foto:hover img{transform:scale(1.04)}
.foto:hover{box-shadow:var(--sombra)}
.foto:active{transform:scale(.99)}

/* ----------------------------------------------------------------- LUPA */
.lupa{
  inline-size:min(100% - 1.5rem,72rem);max-inline-size:none;
  max-block-size:calc(100dvh - 1.5rem);
  padding:0;border:0;border-radius:var(--r-2);
  background:var(--tinta-2);color:var(--papel);overflow:hidden;
}
.lupa::backdrop{background:rgb(10 6 18 / .88)}
.lupa img{inline-size:100%;block-size:auto;max-block-size:calc(100dvh - 8rem);object-fit:contain;display:block;background:#000}
.lupa__barra{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-3) var(--e-4);
}
.lupa__legenda{font-size:var(--t-mini);color:var(--texto-claro);text-align:center;flex:1}
.lupa__nav,.lupa__fechar{
  appearance:none;border:1px solid var(--borda-viva);background:transparent;color:var(--papel);
  cursor:pointer;border-radius:50%;
  inline-size:2.75rem;block-size:2.75rem;flex:none;
  font-size:1.5rem;line-height:1;
  transition:background-color var(--dur),border-color var(--dur);
}
.lupa__nav:hover,.lupa__fechar:hover{background:var(--tinta);border-color:var(--acao)}
.lupa__fechar{position:absolute;inset-block-start:var(--e-3);inset-inline-end:var(--e-3);z-index:2;
  background:color-mix(in srgb,var(--tinta) 70%,transparent)}

/* ------------------------------------------------ MONTADOR DE MENSAGEM
   O lead chega qualificado sem formulário: a pessoa toca em três coisas e
   o WhatsApp abre já dizendo o que ela quer e para quem. */
.conversa{background:var(--papel-2);padding-block:var(--secao)}
.conversa h2{max-inline-size:20ch}
.montar{margin-block-start:var(--e-8);display:grid;gap:var(--e-7);max-inline-size:52rem}
.grupo{border:0;padding:0;margin:0;display:grid;gap:var(--e-4)}
.grupo__rot{
  display:flex;align-items:center;gap:var(--e-3);padding:0;
  font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--marca);
}
.grupo__n{
  display:grid;place-items:center;inline-size:1.75rem;block-size:1.75rem;flex:none;
  border-radius:50%;background:var(--marca);color:var(--papel);
  font-family:var(--f-display);font-size:.95rem;letter-spacing:0;
}
.fichas{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.ficha{cursor:pointer}
.ficha input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.ficha span{
  display:inline-flex;align-items:center;
  min-block-size:2.75rem;padding:var(--e-2) var(--e-5);
  border:1px solid var(--borda-clara);border-radius:var(--r-pill);
  background:#fff;color:var(--suave);
  font-weight:600;font-size:1rem;
  transition:background-color var(--dur),border-color var(--dur),color var(--dur);
}
.ficha span:hover{border-color:var(--marca);color:var(--tinta)}
.ficha input:checked + span{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.ficha input:focus-visible + span{outline:3px solid var(--acao-forte);outline-offset:3px}

.previa{
  padding:var(--e-5);border-radius:var(--r-2);
  background:var(--tinta);color:var(--papel);
  display:grid;gap:var(--e-3);
}
.previa__rot{font-size:var(--t-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-clara)}
.previa__balao{
  background:var(--acao);color:var(--btn-tinta);
  padding:var(--e-4) var(--e-5);
  border-radius:var(--r-2) var(--r-2) var(--r-2) .25rem;
  max-inline-size:44ch;line-height:1.5;
}
.previa__destino{font-size:var(--t-mini);color:var(--texto-claro)}
.montar__nota{font-size:var(--t-mini);color:var(--suave)}

/* --------------------------------------------------------- BREAKPOINTS */
@media (min-width:40rem){
  .portas{grid-template-columns:1fr 1fr;gap:var(--e-4)}
  .grade-fotos{columns:2}
  .modalidades{grid-template-columns:1fr 1fr}
}

@media (min-width:56rem){
  .abas{inset-block-start:4.25rem;padding-block:var(--e-5)}
  .abas__trilho{inline-size:max-content;margin-inline:auto;grid-template-columns:auto auto}
  .aba{padding-inline:var(--e-7)}
  .painel__capa img{aspect-ratio:16/7}
  .painel__titulo{max-inline-size:22ch}
  .duo{grid-template-columns:30rem 1fr;gap:var(--e-8);align-items:center}
  .faixa60{padding:var(--e-8);grid-template-columns:1fr;justify-items:start}
  .grade-fotos{columns:3;column-gap:var(--e-4)}
  .grade-fotos li{margin-block-end:var(--e-4)}
  .montar{max-inline-size:none;grid-template-columns:1fr 26rem;gap:var(--e-8) var(--e-8)}
  .grupo{grid-column:1}
  .previa{grid-column:2;grid-row:1 / span 3;align-self:start;position:sticky;inset-block-start:9rem}
  #enviar{grid-column:2}
  .montar__nota{grid-column:2}
}

@media (min-width:72rem){
  .grade-fotos{columns:3}
}

/* a página é longa: sem JS as abas viram duas seções empilhadas, o que
   continua fazendo sentido e continua legível. */
html:not(.js) .painel[hidden]{display:block}
html:not(.js) .abas{display:none}
html:not(.js) .lupa{display:none}

@media print{
  .portas,.abas,.grade-fotos,.montar,.lupa{display:none}
  .painel[hidden]{display:block}
}