/* ==========================================================================
   Aqua Trainer — identidade visual
   Água profunda (fundo) + turquesa de raia (estrutura) + laranja de água
   aquecida (ação). Tipografia: Bricolage Grotesque / Figtree / DM Mono.
   ========================================================================== */

:root{
  --abismo:#04202F;
  --fundo:#062B3B;
  --fundo-3:#083445;
  --piscina:#0E7C93;
  --raia:#6FD8D2;
  --aquecida:#FF7A45;
  --espuma:#EAF4F5;
  --espuma-70:rgba(234,244,245,.72);
  --espuma-45:rgba(234,244,245,.46);
  --linha:rgba(111,216,210,.16);
  --linha-forte:rgba(111,216,210,.32);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --corpo:'Figtree',system-ui,-apple-system,sans-serif;
  --dado:'DM Mono',ui-monospace,'SF Mono',monospace;

  --faixa:1180px;
  --resp:clamp(1.25rem,5vw,2.5rem);
  --raio:14px;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--abismo);
  color:var(--espuma);
  font-family:var(--corpo);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,7vw,5.1rem)}
h2{font-size:clamp(1.95rem,4.4vw,3.15rem);line-height:1.02}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}

a{color:inherit}

:focus-visible{
  outline:3px solid var(--aquecida);
  outline-offset:3px;
  border-radius:4px;
}

.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--aquecida);color:var(--abismo);
  padding:.75rem 1.25rem;font-weight:600;
}
.pular:focus{left:.5rem;top:.5rem}

.faixa{
  width:100%;max-width:var(--faixa);
  margin-inline:auto;
  padding-inline:var(--resp);
}

/* ---------- eyebrow / rótulo mono ---------- */
.sobrenome{
  font-family:var(--dado);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--raia);
  margin:0 0 1.1rem;
}

/* ---------- botões ---------- */
.botao{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--corpo);font-weight:600;font-size:.95rem;
  padding:.8rem 1.3rem;
  border-radius:100px;
  text-decoration:none;
  transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.botao--zap{
  background:var(--aquecida);
  color:#22160F;
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px -10px rgba(255,122,69,.85);
}
.botao--zap:hover{background:#FF8E5F;transform:translateY(-2px)}
.botao--vazado{
  border:1px solid var(--linha-forte);
  color:var(--espuma);
  background:rgba(255,255,255,.03);
}
.botao--vazado:hover{border-color:var(--raia);background:rgba(111,216,210,.09)}
.botao--grande{font-size:1.02rem;padding:1rem 1.65rem}
.zap{width:1.15em;height:1.15em;flex:none}

@media (prefers-reduced-motion:reduce){
  .botao:hover{transform:none}
}

/* ==========================================================================
   TOPO
   ========================================================================== */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(4,32,47,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background-color .3s ease;
}
.topo.rolou{border-bottom-color:var(--linha);background:rgba(4,32,47,.94)}

.topo__interno{
  max-width:var(--faixa);margin-inline:auto;
  padding:.85rem var(--resp);
  display:flex;align-items:center;gap:1.5rem;
}

.marca{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--raia);
  margin-right:auto;
}
.marca__sinal{width:34px;height:24px;flex:none}
.marca__nome{
  font-family:var(--display);font-weight:800;
  font-size:1.22rem;letter-spacing:-.035em;
  color:var(--espuma);
}
.marca__nome span{color:var(--raia)}

.menu{display:flex;gap:1.6rem}
.menu a{
  font-size:.92rem;font-weight:500;
  color:var(--espuma-70);text-decoration:none;
  padding:.25rem 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.menu a:hover{color:var(--espuma);border-bottom-color:var(--aquecida)}

@media (max-width:860px){
  .menu{display:none}
  .topo__zap{display:none}
  .hero__foto img{object-position:center 45%}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(88svh,760px);
  display:flex;align-items:flex-end;
  padding:clamp(5rem,14vh,9rem) 0 clamp(2.5rem,7vh,4.5rem);
  overflow:hidden;
}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__foto img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  animation:respira 24s ease-in-out infinite alternate;
}
@keyframes respira{from{transform:scale(1.04)}to{transform:scale(1.11)}}
@media (prefers-reduced-motion:reduce){ .hero__foto img{animation:none;transform:scale(1.04)} }

/* Animação conduzida pelo scroll — mesma técnica que a Apple usa nas páginas de
   produto: o navegador liga a linha do tempo da animação à posição da seção na
   tela, sem JavaScript e sem custo de scroll listener. Onde não houver suporte,
   a página fica igual, só sem o efeito. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .hero__foto img{
      animation:mergulha linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    .hero__conteudo{
      animation:afunda linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 72%;
    }
  }
}
@keyframes mergulha{
  from{transform:scale(1.04)}
  to{transform:scale(1.18)}
}
@keyframes afunda{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-70px)}
}

.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(4,32,47,.52) 0%,rgba(4,32,47,0) 26%,rgba(4,32,47,.38) 74%,var(--abismo) 100%),
    linear-gradient(96deg,rgba(4,32,47,.93) 0%,rgba(4,32,47,.74) 26%,rgba(4,32,47,.22) 58%,rgba(4,32,47,0) 82%);
}
/* No celular o texto ocupa a largura toda, então o escurecimento precisa vir
   de baixo, não da lateral. Precisa ficar DEPOIS da regra base para vencer. */
@media (max-width:860px){
  .hero::after{
    background:linear-gradient(180deg,
      rgba(4,32,47,.55) 0%,
      rgba(4,32,47,.20) 16%,
      rgba(4,32,47,.66) 36%,
      rgba(4,32,47,.88) 66%,
      var(--abismo) 100%);
  }
}

.hero__conteudo{
  position:relative;z-index:2;
  width:100%;max-width:var(--faixa);
  margin-inline:auto;padding-inline:var(--resp);
}
.hero__conteudo h1{
  max-width:19ch;
  margin-bottom:1.4rem;
  text-shadow:0 2px 30px rgba(4,32,47,.6);
}
.hero__texto{
  max-width:46ch;
  font-size:clamp(1.02rem,1.7vw,1.18rem);
  color:var(--espuma-70);
  margin-bottom:2rem;
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.2rem}

.convenio-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.convenio-chips li{
  font-family:var(--dado);font-size:.74rem;letter-spacing:.07em;
  color:var(--raia);
  border:1px solid var(--linha-forte);
  border-radius:100px;padding:.34rem .8rem;
  background:rgba(4,32,47,.5);
}

/* entrada escalonada */
html.js [data-anima]{opacity:0;transform:translateY(18px)}
.pronto [data-anima]{
  animation:sobe .8s cubic-bezier(.16,.84,.44,1) forwards;
}
.pronto [data-anima="1"]{animation-delay:.05s}
.pronto [data-anima="2"]{animation-delay:.16s}
.pronto [data-anima="3"]{animation-delay:.3s}
.pronto [data-anima="4"]{animation-delay:.42s}
.pronto [data-anima="5"]{animation-delay:.54s}
@keyframes sobe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js [data-anima]{opacity:1;transform:none}
  .pronto [data-anima]{animation:none}
}

/* ==========================================================================
   FAIXA DE NÚMEROS (prova)
   ========================================================================== */
.numeros{
  background:var(--fundo);
  border-block:1px solid var(--linha);
  padding:clamp(2rem,4vw,3rem) 0;
}
.numeros__grade{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(42%,150px),1fr));
  gap:clamp(1.5rem,3vw,2rem);
}
.numero{
  display:flex;flex-direction:column;gap:.35rem;
  border-left:2px solid var(--aquecida);
  padding-left:1rem;
}
.numero strong{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:.9;letter-spacing:-.04em;
  color:var(--espuma);
  font-variant-numeric:tabular-nums;
}
.numero span{
  font-size:.9rem;color:var(--espuma-70);
  text-wrap:balance;
}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.secao{padding:clamp(4rem,10vw,7.5rem) 0;position:relative}
.secao--turmas{background:var(--abismo)}
.secao--grade{background:var(--fundo);border-top:1px solid var(--linha)}
.secao--regras{background:var(--fundo)}
.secao--convenios{background:var(--espuma);color:#0A2432}
.secao--visita{background:var(--abismo)}

.cabecalho{max-width:52ch;margin-bottom:clamp(2.5rem,6vw,4rem)}
.cabecalho h2{margin-bottom:1rem}
.cabecalho__texto{color:var(--espuma-70);font-size:1.05rem}

/* revelação no scroll */
html.js .revela{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.44,1)}
html.js .revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .revela,html.js .revela.visivel{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   RÉGUA DE IDADES  (assinatura)
   ========================================================================== */
.regua{
  display:grid;
  grid-template-columns:clamp(0px,14vw,168px) 1fr;
  margin-bottom:.2rem;
}
.regua__eixo{
  position:relative;height:1.5rem;
  border-bottom:1px solid var(--linha);
}
.regua__eixo span{
  position:absolute;bottom:.35rem;
  font-family:var(--dado);font-size:.68rem;
  color:var(--espuma-45);
  padding-left:.4rem;
  border-left:1px solid var(--linha);
  height:1rem;line-height:1rem;
  white-space:nowrap;
}
.regua__eixo span:first-child{border-left:0;padding-left:0}

.regua-lista{margin-bottom:clamp(3rem,7vw,4.5rem)}
.linha-turma{
  display:grid;
  grid-template-columns:clamp(0px,14vw,168px) 1fr;
  align-items:center;
  gap:0 1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--linha);
}
.linha-turma__nome{
  font-family:var(--display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.02em;
}
.linha-turma__faixa{
  display:block;
  font-family:var(--dado);font-size:.72rem;
  color:var(--espuma-45);
  letter-spacing:.02em;
  margin-top:.1rem;
}
.trilho{position:relative;height:38px}
.barra{
  position:absolute;top:50%;transform:translateY(-50%);
  height:14px;border-radius:100px;
  min-width:14px;
  background:var(--piscina);
  transition:filter .2s ease,height .2s ease;
}
.barra--raia{background:var(--raia)}
.barra--aquecida{background:var(--aquecida)}
.linha-turma__faixa i{font-style:normal;color:var(--linha-forte);padding:0 .15rem}
.linha-turma:hover .barra{filter:brightness(1.15);height:18px}

@media (max-width:720px){
  .regua{grid-template-columns:1fr}
  .regua > div:first-child{display:none}
  .linha-turma{grid-template-columns:1fr;gap:.45rem 0;padding:.85rem 0}
  .trilho{height:22px}
}

/* ==========================================================================
   CARDS COM FOTO
   ========================================================================== */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
  margin-bottom:clamp(1rem,2.5vw,1.6rem);
}
.card{
  position:relative;overflow:hidden;
  border-radius:var(--raio);
  border:1px solid var(--linha);
  background:var(--fundo);
}
.card--foto img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.44,1);
}
.card--foto:hover img{transform:scale(1.045)}
.card__texto{
  position:absolute;inset:auto 0 0 0;
  padding:1.5rem;
  background:linear-gradient(180deg,rgba(4,32,47,0) 0%,rgba(4,32,47,.78) 42%,rgba(4,32,47,.96) 100%);
}
.card__texto h3{margin-bottom:.4rem}
.card__texto p{font-size:.94rem;color:var(--espuma-70);max-width:44ch}

@media (prefers-reduced-motion:reduce){
  .card--foto:hover img{transform:none}
}

/* ---------- outras modalidades ---------- */
.outras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
}
.modalidade{
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:1.5rem;
  background:linear-gradient(180deg,rgba(14,124,147,.1),transparent);
  display:flex;flex-direction:column;gap:.5rem;
}
.modalidade__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.modalidade__marca{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;
  padding:.2rem .55rem;border-radius:100px;flex:none;
}
.modalidade__marca--livre{background:rgba(111,216,210,.16);color:var(--raia)}
.modalidade__marca--marca{background:rgba(255,122,69,.16);color:var(--aquecida)}
.modalidade__quem{
  font-family:var(--dado);font-size:.74rem;color:var(--espuma-45);
}
.modalidade p{font-size:.94rem;color:var(--espuma-70)}
.modalidade--foto{padding:0;overflow:hidden;position:relative;min-height:210px;background:var(--fundo)}
.modalidade--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modalidade--foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,32,47,.62) 0%,rgba(4,32,47,.86) 55%,rgba(4,32,47,.96) 100%);
}
.modalidade--foto .modalidade__conteudo{
  position:relative;z-index:1;
  padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;
  height:100%;justify-content:flex-end;
}

/* ==========================================================================
   GRADE DA SEMANA
   ========================================================================== */
.dias{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.dia{
  font-family:var(--dado);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;
  padding:.6rem 1.1rem;border-radius:100px;
  border:1px solid var(--linha);
  background:transparent;color:var(--espuma-70);
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.dia:hover{border-color:var(--linha-forte);color:var(--espuma)}
.dia[aria-selected="true"]{
  background:var(--raia);border-color:var(--raia);color:#04202F;font-weight:500;
}
@media (max-width:430px){
  .dias{gap:.3rem}
  .dia{padding:.55rem .72rem;font-size:.76rem;letter-spacing:.04em}
}

.grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
}
.coluna{
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--fundo-3);
  padding:1.4rem;
}
.coluna__titulo{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em;
  padding-bottom:.9rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--linha);
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
}
.coluna__conta{font-family:var(--dado);font-size:.72rem;color:var(--espuma-45);font-weight:400}

.aula{
  display:flex;align-items:baseline;gap:.85rem;
  padding:.5rem 0;
  border-bottom:1px solid rgba(111,216,210,.07);
}
.aula:last-child{border-bottom:0}
.aula__hora{
  font-family:var(--dado);font-size:.86rem;
  color:var(--raia);flex:none;
  font-variant-numeric:tabular-nums;
}
.aula__turma{font-size:.92rem;color:var(--espuma-70)}
.aula--fechada{opacity:.4}
.aula--fechada .aula__turma::after{
  content:'sem vaga';
  font-family:var(--dado);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;
  margin-left:.5rem;color:var(--aquecida);
}
.coluna--vazia p{font-size:.92rem;color:var(--espuma-45);padding-top:.9rem}

.nota{
  margin-top:1.8rem;
  padding:1.1rem 1.3rem;
  border-left:3px solid var(--aquecida);
  background:rgba(255,122,69,.07);
  border-radius:0 var(--raio) var(--raio) 0;
  font-size:.94rem;color:var(--espuma-70);
  max-width:70ch;
}
.nota strong{color:var(--espuma)}

/* ==========================================================================
   REGRAS  (marca × livre)
   ========================================================================== */
.regras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
}
.regra{
  padding:clamp(1.6rem,3vw,2.2rem);
  border-radius:var(--raio);
  border:1px solid var(--linha);
}
.regra--marca{background:linear-gradient(155deg,rgba(255,122,69,.13),rgba(255,122,69,.03))}
.regra--livre{background:linear-gradient(155deg,rgba(111,216,210,.12),rgba(111,216,210,.02))}
.regra__selo{
  font-family:var(--dado);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.9rem;
}
.regra--marca .regra__selo{color:var(--aquecida)}
.regra--livre .regra__selo{color:var(--raia)}
.regra h3{font-size:1.5rem;margin-bottom:.7rem}
.regra p{color:var(--espuma-70);font-size:.98rem;max-width:44ch}

/* ==========================================================================
   CONVÊNIOS  (seção clara)
   ========================================================================== */
.secao--convenios .sobrenome{color:var(--piscina)}
.convenios{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.convenios__texto h2{margin-bottom:1rem;color:#062B3B}
.convenios__texto p{color:#3A5A68;margin-bottom:1.8rem;max-width:48ch}
.convenios__texto strong{color:#062B3B}
.convenios__marcas{display:flex;flex-direction:column;gap:.7rem}
.convenios__marcas li{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.4rem,3.4vw,2.1rem);
  letter-spacing:-.03em;
  color:#0A2432;
  padding:.85rem 1.3rem;
  border:1px solid rgba(10,36,50,.14);
  border-radius:var(--raio);
  background:#fff;
}
@media (max-width:760px){
  .convenios{grid-template-columns:1fr}
}

/* ==========================================================================
   VISITA + RODAPÉ
   ========================================================================== */
.visita{
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.visita__texto h2{margin-bottom:1rem}
.visita__texto p{color:var(--espuma-70);margin-bottom:2rem;max-width:46ch}

.funcionamento{
  border-top:1px solid var(--linha);
}
.funcionamento div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--linha);
}
.funcionamento div[hidden]{display:none}
.funcionamento dt{font-size:.95rem;color:var(--espuma-70)}
.funcionamento dd{font-family:var(--dado);font-size:.88rem;color:var(--raia);text-align:right}

@media (max-width:760px){
  .visita{grid-template-columns:1fr}
}

.rodape{
  border-top:1px solid var(--linha);
  padding:2rem 0 6.5rem;
  background:var(--abismo);
}
.rodape__interno{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:baseline;justify-content:space-between;
}
.rodape__marca{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:1rem;
}
.rodape__marca span{color:var(--espuma-45);font-weight:500}
.rodape__zap{font-family:var(--dado);font-size:.82rem;color:var(--espuma-45)}
.rodape__zap a{color:var(--raia);text-decoration:none}
.rodape__zap a:hover{text-decoration:underline}

/* ==========================================================================
   BOTÃO FLUTUANTE (mobile)
   ========================================================================== */
.flutuante{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
  display:none;align-items:center;justify-content:center;gap:.55rem;
  background:var(--aquecida);color:#22160F;
  font-weight:600;font-size:1rem;
  padding:.95rem 1.25rem;border-radius:100px;
  text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  opacity:0;transform:translateY(130%);pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.16,.84,.44,1);
}
.flutuante.aparece{opacity:1;transform:none;pointer-events:auto}
@media (max-width:860px){
  .flutuante{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .flutuante{transition:none}
}