:root{
  --preto:#000;
  --laranja:#EF8626;
  --laranja-escuro:#A85E1B;
  --claro:#F8F8F8;
  --cinza:#1A1A1A;
  --cinza-texto:#B4B4B4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--preto);
  color:var(--claro);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:76px;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--laranja);text-decoration:none}

h1,h2,h3,.rotulo{font-family:'Archivo Black',system-ui,sans-serif;text-transform:uppercase;line-height:1.16;letter-spacing:-.01em}
h1{font-size:2rem}
h2{font-size:1.5rem;margin-bottom:.5rem}
h3{font-size:1.05rem}
p{margin-bottom:1rem}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:52px 0;border-top:1px solid #262626}
.rotulo{font-size:.72rem;letter-spacing:.16em;color:var(--laranja);margin-bottom:10px;display:block}
.junto{white-space:nowrap}
.claro{background:var(--claro);color:#0A0A0A}
.claro h2,.claro h3{color:#0A0A0A}
.claro p,.claro li{color:#3A3A3A}
.claro .rotulo{color:var(--laranja-escuro)}
.claro a{color:var(--laranja-escuro);font-weight:700}

/* CABEÇALHO */
header{padding:16px 0;border-bottom:1px solid #262626;position:relative;z-index:5}
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{
  font-family:'Archivo Black',sans-serif;font-size:1rem;text-transform:uppercase;
  color:var(--claro);display:flex;align-items:center;gap:10px
}
.marca img{width:42px;height:42px;flex:none}
.marca span{color:var(--laranja)}
.topo .insta{font-size:.85rem;font-weight:600}

/* HERO */
.hero{padding:40px 0 48px;border-top:none;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  right:-26%;top:8%;
  width:min(560px,96vw);aspect-ratio:1;
  background:url("fotos/logo-oficial.png") center/contain no-repeat;
  opacity:.09;
  filter:grayscale(.15)
}
.hero>*{position:relative;z-index:1}
.hero h1{margin-bottom:14px}
.hero h1 em{color:var(--laranja);font-style:normal}
.hero .linha{font-size:1.08rem;color:var(--cinza-texto);margin-bottom:22px}
/* Duotone: foto de topo entra na paleta da marca.
   Só no hero. A galeria fica crua de propósito, pra provar que é real. */
.foto-hero{
  border-radius:4px;overflow:hidden;margin-bottom:24px;
  background:#000;aspect-ratio:3/2;position:relative;isolation:isolate
}
.foto-hero img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(1.04)
}
.foto-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,#EF8626 0%,#B85F14 55%,#3A1D05 100%);
  mix-blend-mode:color;opacity:.72
}
.foto-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)
}
.migalha{font-size:.82rem;color:#7A7A7A;margin-bottom:14px}
.migalha a{color:#7A7A7A}

/* BOTÕES */
.botao{
  display:inline-block;background:var(--laranja);color:#000;
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.02em;
  padding:15px 26px;border-radius:999px;text-align:center
}
.botao.vazado{background:transparent;color:var(--laranja);box-shadow:inset 0 0 0 2px var(--laranja)}
.claro .botao{background:#000;color:var(--laranja)}
.botao-largo{display:block;width:100%}
.sob-botao{margin:12px 0 0;font-size:.9rem;color:#7A7A7A}
.claro .sob-botao{color:#5A5A5A}

/* PROVA SOCIAL */
.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#262626;border-block:1px solid #262626}
.prova{background:var(--preto);padding:20px 10px;text-align:center}
.prova b{font-family:'Archivo Black',sans-serif;font-size:1.5rem;color:var(--laranja);display:block}
.prova small{font-size:.74rem;color:var(--cinza-texto);letter-spacing:.05em;text-transform:uppercase}

/* COMO CHEGAR */
.chegar{background:var(--cinza)}
.passos{list-style:none;counter-reset:p;margin:20px 0}
.passos li{counter-increment:p;position:relative;padding:12px 0 12px 50px;border-bottom:1px solid #2E2E2E}
.passos li:last-child{border-bottom:none}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:11px;
  width:32px;height:32px;border-radius:50%;
  background:var(--laranja);color:#000;
  font-family:'Archivo Black',sans-serif;font-size:.9rem;
  display:grid;place-items:center
}
.aviso{background:rgba(239,134,38,.12);border-left:3px solid var(--laranja);padding:14px 16px;margin:18px 0;font-size:.95rem}

/* CARDS */
.grade-cards{display:grid;gap:18px;margin-top:24px}
.card{background:var(--cinza);border-radius:4px;overflow:hidden}
.card .capa{aspect-ratio:3/2;background:#222}
.card .capa img{width:100%;height:100%;object-fit:cover}
.card .conteudo{padding:20px}
.card h3{margin-bottom:8px}
.card p{font-size:.95rem;color:var(--cinza-texto);margin-bottom:12px}
.card .horas{font-size:.85rem;color:var(--laranja);font-weight:600;margin-bottom:14px}

/* TABELA */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px}

/* Sombra de rolagem: a borda acende do lado pra onde ainda tem tabela, e some
   sozinha quando chega no fim. Truque de background-attachment, sem JS.
   Os dois primeiros gradientes sao "local" e andam com o conteudo, os dois
   ultimos sao "scroll" e ficam parados na borda. Onde um cobre o outro, some. */
.rolagem{
  background:
    linear-gradient(to right, var(--preto) 40%, rgba(0,0,0,0)) left center,
    linear-gradient(to left,  var(--preto) 40%, rgba(0,0,0,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(239,134,38,.5), rgba(239,134,38,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(239,134,38,.5), rgba(239,134,38,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 16px 100%, 16px 100%;
  background-attachment:local, local, scroll, scroll
}

/* Barra de rolagem visivel. O padrao do Windows e fininho e cinza sobre preto,
   ou seja, invisivel. Aqui ela e laranja e da pra pegar com o mouse. */
.rolagem{scrollbar-width:thin;scrollbar-color:var(--laranja) #1E1E1E}
.rolagem::-webkit-scrollbar{height:10px}
.rolagem::-webkit-scrollbar-track{background:#1E1E1E;border-radius:99px}
.rolagem::-webkit-scrollbar-thumb{background:var(--laranja);border-radius:99px}
.rolagem::-webkit-scrollbar-thumb:hover{background:#FF9A3D}

/* Coluna de horário fixa. Rolando pro lado, a hora saía da tela e a tabela
   parava de dizer qualquer coisa: "Muay thai na quinta" sem a hora é
   informação pela metade. Agora ela fica grudada na esquerda. */
.rolagem th:first-child,
.rolagem td:first-child{
  position:sticky;left:0;z-index:2;
  background:var(--preto);
  box-shadow:1px 0 0 #2E2E2E
}

/* Arrastar com o mouse. So quando a tabela realmente transborda, senao
   o cursor de mao aparece mentindo que da pra arrastar. */
.rolagem.rolavel{cursor:grab}
.rolagem.rolavel.arrastando{cursor:grabbing;user-select:none}
.rolagem.rolavel.arrastando table{pointer-events:none}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.86rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #262626;white-space:nowrap}
th{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:var(--laranja)}
td:first-child{font-weight:700;color:var(--claro)}
td{color:var(--cinza-texto)}
.dica-rolagem{font-size:.78rem;color:#7A7A7A;margin-top:8px}

/* PLANOS */
.planos{display:grid;gap:16px;margin-top:22px}
.plano{background:var(--cinza);border-radius:4px;padding:20px}
.plano h3{color:var(--laranja);margin-bottom:14px}
.plano ul{list-style:none}
.plano li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #2A2A2A;font-size:.94rem}
.plano li:last-child{border-bottom:none}
.plano li b{font-weight:700;color:var(--claro);white-space:nowrap}
.destaque{color:var(--laranja)!important}

/* SELOS */
.selos{display:grid;gap:16px;margin-top:20px}
.selo{background:var(--cinza);padding:20px;border-radius:4px}
.selo b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.9rem;color:var(--laranja);margin-bottom:6px}
.selo span{font-size:.92rem;color:var(--cinza-texto)}

/* ===== PÁGINAS INTERNAS ===== */

/* É PRA VOCÊ SE */
.marcadores{list-style:none;margin:20px 0}
.marcadores li{position:relative;padding:11px 0 11px 34px;border-bottom:1px solid #262626;font-size:1rem}
.marcadores li:last-child{border-bottom:none}
.marcadores li::before{
  content:"";position:absolute;left:2px;top:19px;
  width:12px;height:12px;background:var(--laranja);
  transform:rotate(45deg);border-radius:2px
}
.claro .marcadores li{border-bottom-color:#DEDEDE}

/* COMO É A AULA */
.aula{list-style:none;counter-reset:a;margin-top:22px;display:grid;gap:14px}
.aula li{
  counter-increment:a;background:var(--cinza);border-radius:4px;
  padding:18px 18px 18px 60px;position:relative
}
.aula li::before{
  content:counter(a);position:absolute;left:18px;top:17px;
  font-family:'Archivo Black',sans-serif;font-size:1.4rem;color:var(--laranja);
  line-height:1
}
.aula b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.86rem;margin-bottom:4px}
.aula span{font-size:.95rem;color:var(--cinza-texto)}

/* BENEFÍCIOS */
.beneficios{display:grid;gap:16px;margin-top:24px}
.beneficio{border-top:2px solid var(--laranja);padding-top:16px}
.beneficio b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.92rem;margin-bottom:6px}
.beneficio span{font-size:.95rem;color:var(--cinza-texto)}
.claro .beneficio span{color:#3A3A3A}

/* OBJEÇÕES */
.duvidas{margin-top:22px}
.duvida{border-bottom:1px solid #262626;padding:18px 0}
.duvida:last-child{border-bottom:none}
.duvida b{display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.92rem;color:var(--laranja);margin-bottom:7px}
.duvida p{margin-bottom:0;font-size:.97rem;color:var(--cinza-texto)}
.claro .duvida{border-bottom-color:#DEDEDE}
.claro .duvida b{color:var(--laranja-escuro)}
.claro .duvida p{color:#3A3A3A}

/* CITAÇÃO */
.fala{
  border-left:3px solid var(--laranja);padding:6px 0 6px 20px;
  margin:26px 0;font-size:1.15rem;line-height:1.5
}
.fala small{display:block;margin-top:10px;font-size:.82rem;color:#7A7A7A;letter-spacing:.06em;text-transform:uppercase}

/* ===== SELO QUE EXPLODE E RESSURGE (hero da home) ===== */
.selo-hero{
  aspect-ratio:1/1;background:#000;border-radius:4px;position:relative;
  display:grid;place-items:center;overflow:hidden;margin-bottom:24px;
  isolation:isolate
}
.selo-hero::before{                 /* brilho de fundo */
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(239,134,38,.22),transparent 62%);
  animation:respira 5s ease-in-out 1.3s infinite
}
.palco{position:relative;width:74%;aspect-ratio:1;display:grid;place-items:center}

/* clarão do impacto */
.clarao{
  position:absolute;width:36%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#EF8626 42%,transparent 70%);
  opacity:0;animation:clarao .5s ease-out .08s 1 both
}
/* ondas de choque */
.onda{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--laranja);opacity:0;transform:scale(.05)
}
.onda:nth-of-type(1){animation:onda 1.15s cubic-bezier(.16,.8,.3,1) .12s 1 both}
.onda:nth-of-type(2){animation:onda 1.25s cubic-bezier(.16,.8,.3,1) .22s 1 both;border-width:1px}
.onda:nth-of-type(3){animation:onda 1.4s cubic-bezier(.16,.8,.3,1) .34s 1 both;border-width:1px;opacity:.6}
/* estilhaços radiais */
.faiscas{
  position:absolute;inset:-8%;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,
    rgba(239,134,38,.85) 0deg 1.1deg, transparent 1.1deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 34%,#000 40%,#000 62%,transparent 70%);
          mask:radial-gradient(circle,transparent 34%,#000 40%,#000 62%,transparent 70%);
  animation:faiscas 1s cubic-bezier(.2,.75,.3,1) .1s 1 both
}
/* eco da própria logo, o "estilhaço" que se afasta */
.eco{
  position:absolute;width:100%;aspect-ratio:1;
  background:url("fotos/logo-oficial.png") center/contain no-repeat;
  opacity:0;animation:eco 1.2s ease-out .16s 1 both
}
.eco.dois{animation-duration:1.45s;animation-delay:.3s}
/* o selo que ressurge */
.selo-grande{
  position:relative;z-index:2;width:100%;height:auto;
  animation:flutua 6s ease-in-out .4s infinite;
  filter:drop-shadow(0 12px 34px rgba(239,134,38,.35))
}
/* enquanto os cacos voam, a logo inteira fica escondida.
   Precisa ser classe, não style inline: animação com fill "both"
   ganha de estilo inline na cascata. */
.palco.montando .selo-grande{opacity:0;animation:none}

@keyframes clarao{
  0%{opacity:0;transform:scale(.2)}
  22%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(2.4)}
}
@keyframes onda{
  0%{opacity:0;transform:scale(.06)}
  14%{opacity:.95}
  100%{opacity:0;transform:scale(1.85)}
}
@keyframes faiscas{
  0%{opacity:0;transform:scale(.15) rotate(-14deg)}
  25%{opacity:.9}
  100%{opacity:0;transform:scale(1.5) rotate(10deg)}
}
@keyframes eco{
  0%{opacity:0;transform:scale(.3)}
  30%{opacity:.5}
  100%{opacity:0;transform:scale(1.75)}
}
@keyframes ressurge{
  0%{opacity:0;transform:scale(.12) rotate(-32deg);filter:blur(9px) drop-shadow(0 0 0 transparent)}
  45%{opacity:1;filter:blur(0) drop-shadow(0 12px 34px rgba(239,134,38,.5))}
  100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0) drop-shadow(0 12px 34px rgba(239,134,38,.35))}
}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes respira{0%,100%{opacity:.65}50%{opacity:1}}

/* Quem pediu menos movimento vê o selo parado, sem perder nada. */
@media (prefers-reduced-motion:reduce){
  .selo-hero::before,.clarao,.onda,.faiscas,.eco{animation:none;opacity:0}
  .selo-grande{animation:none;opacity:1;transform:none}
}
@media (min-width:760px){
  .selo-hero{aspect-ratio:1/1;margin-bottom:0;order:2}
}

/* ===== VIDA: botões, cards, scroll e impacto ===== */

/* BOTÕES: resposta ao toque e brilho que atravessa */
.botao{position:relative;overflow:hidden;transform:translateZ(0);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s ease, background .25s ease}
.botao::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none
}
.botao:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(239,134,38,.4)}
.botao:hover::after{left:130%}
.botao:active{transform:translateY(-1px) scale(.985)}
.botao.vazado:hover{background:var(--laranja);color:#000}
.claro .botao:hover{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.botao:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
/* botão fixo respira devagar, pra chamar sem irritar */
.fixo .botao{animation:pulso 3.4s ease-in-out 2s infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(239,134,38,.5)}55%{box-shadow:0 0 0 14px rgba(239,134,38,0)}}

/* CARDS DE MODALIDADE: sobem, a foto aproxima, a borda acende */
.card{
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease;
  box-shadow:0 0 0 1px #262626
}
.card .capa{overflow:hidden}
.card .capa img{transition:transform .55s cubic-bezier(.2,.8,.3,1), filter .4s ease;filter:saturate(.85)}
.card:hover{transform:translateY(-8px);box-shadow:0 0 0 1px var(--laranja),0 22px 44px rgba(0,0,0,.6)}
.card:hover .capa img{transform:scale(1.07);filter:saturate(1.05)}
.card h3{transition:color .25s ease}
.card:hover h3{color:var(--laranja)}
/* atalhos das outras modalidades */
.outra{transition:transform .25s ease, background .25s ease, box-shadow .25s ease}
.outra:hover{transform:translateX(6px);background:#232323;box-shadow:inset 3px 0 0 var(--laranja)}
.outra .seta{transition:transform .25s ease}
.outra:hover .seta{transform:translateX(4px)}

/* REVELAÇÃO NO SCROLL */
.revelar{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.revelar.dentro{opacity:1;transform:none}
.revelar.atraso1{transition-delay:.08s}
.revelar.atraso2{transition-delay:.16s}
.revelar.atraso3{transition-delay:.24s}

/* linha laranja que cresce sob cada rótulo quando entra na tela */
.rotulo{position:relative;padding-bottom:9px}
.rotulo::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--laranja);transition:width .7s cubic-bezier(.2,.8,.3,1) .15s
}
.dentro .rotulo::after,.revelar.dentro>.rotulo::after{width:44px}

/* números da prova social contam para cima */
.prova b{transition:transform .4s cubic-bezier(.2,.9,.3,1.6)}
.provas:hover .prova b{transform:scale(1.08)}

/* ===== A LOGO SE MONTA: 12 cacos voam de fora e batem juntos ===== */
.caco{
  position:absolute;inset:0;
  background:url("fotos/logo-oficial.png") center/contain no-repeat;
  will-change:transform,opacity,filter;
  animation:caco-entra var(--dur,.95s) cubic-bezier(.14,.72,.2,1) var(--atraso,0s) 1 both
}
@keyframes caco-entra{
  0%{
    opacity:0;
    transform:translate(var(--dx),var(--dy)) rotate(var(--giro)) scale(var(--esc));
    filter:blur(16px) brightness(2.6)
  }
  18%{opacity:1}
  82%{filter:blur(1.5px) brightness(1.6)}
  100%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
    filter:blur(0) brightness(1)
  }
}
/* no instante do impacto o palco leva o soco */
.palco.bateu{animation:soco .62s cubic-bezier(.36,.07,.19,.97) 1 both}
@keyframes soco{
  0%{transform:scale(1.14)}
  10%{transform:scale(.94) translate(-9px,6px)}
  22%{transform:scale(1.05) translate(8px,-5px)}
  38%{transform:scale(.99) translate(-6px,-4px)}
  54%{transform:scale(1.02) translate(4px,3px)}
  72%{transform:translate(-2px,1px)}
  100%{transform:none}
}
/* a seção inteira treme junto, de leve */
.selo-hero.bateu{animation:treme .4s ease-out 1 both}
@keyframes treme{
  0%{transform:translate(0,0)}25%{transform:translate(3px,-2px)}
  50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}
  100%{transform:none}
}
/* anel de choque que estoura pra fora da caixa */
.choque{
  position:absolute;left:50%;top:50%;width:12%;aspect-ratio:1;
  border-radius:50%;border:3px solid var(--laranja);
  transform:translate(-50%,-50%) scale(.1);opacity:0;pointer-events:none;
  animation:choque var(--dur,.85s) cubic-bezier(.1,.75,.25,1) var(--atraso,0s) 1 both
}
@keyframes choque{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.1);border-width:6px}
  12%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9);border-width:1px}
}
/* brilho que pulsa depois que assenta */
.selo-hero::before{animation:respira 5s ease-in-out 1.6s infinite}

/* ESTILHAÇOS da explosão, criados pelo JS */
.estilhaco{
  position:absolute;top:50%;left:50%;width:var(--w,7px);height:var(--h,3px);
  background:var(--laranja);border-radius:2px;opacity:0;
  transform:translate(-50%,-50%);
  animation:estilhaco var(--dur,1.05s) cubic-bezier(.15,.75,.25,1) var(--atraso,.1s) 1 both
}
@keyframes estilhaco{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) translateX(0) scaleX(.4)}
  12%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scaleX(1.9)}
}
/* clarão que lava a tela por um instante */
.flash{
  position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff,rgba(255,255,255,.2) 40%,transparent 68%);
  opacity:0;pointer-events:none;z-index:3;
  animation:flash .42s ease-out .06s 1 both;mix-blend-mode:screen
}
@keyframes flash{0%{opacity:0;transform:scale(.4)}18%{opacity:.85}100%{opacity:0;transform:scale(1.6)}}
/* o palco leva o tranco do impacto */
.palco{animation:tranco .5s cubic-bezier(.36,.07,.19,.97) .1s 1 both}
@keyframes tranco{
  0%,100%{translate:0 0}
  12%{translate:-5px 3px}28%{translate:5px -3px}
  44%{translate:-3px -2px}62%{translate:3px 2px}80%{translate:-1px 0}
}
.selo-hero{cursor:pointer}
.selo-hero .repetir{
  position:absolute;bottom:10px;right:12px;z-index:5;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#6E6E6E;
  opacity:0;transition:opacity .3s ease;pointer-events:none
}
.selo-hero:hover .repetir{opacity:1}

@media (prefers-reduced-motion:reduce){
  .revelar{opacity:1;transform:none;transition:none}
  .rotulo::after{width:44px;transition:none}
  .fixo .botao,.flash,.estilhaco,.choque,.faiscas,.clarao,.eco,.onda{animation:none;display:none}
  .palco,.selo-hero.bateu,.palco.bateu{animation:none}
  .botao::after{display:none}
  .botao:hover,.card:hover,.outra:hover{transform:none}

  /* A logo ainda se monta, mas SEM deslocamento: os 12 cacos acendem
     em sequência no lugar. Movimento zero, montagem preservada. */
  .caco{animation:caco-acende .55s ease-out var(--acende,0s) 1 both}
  @keyframes caco-acende{
    0%{opacity:0}
    45%{opacity:1;filter:brightness(2.3)}
    100%{opacity:1;filter:brightness(1)}
  }
  .selo-grande{animation:none}
  .palco.montando .selo-grande{opacity:0;animation:none}
}

/* GRÃO: textura fina sobre tudo, tira o "chapado" de tela */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px
}

/* DECLARAÇÃO: seção só de tipografia, sem foto */
.declaracao{text-align:center;position:relative;overflow:hidden}
.declaracao::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,120vw);aspect-ratio:1;pointer-events:none;
  background:url("fotos/logo-oficial.png") center/contain no-repeat;opacity:.06
}
.declaracao .wrap{position:relative;z-index:1}
.declaracao p{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(1.55rem,7.5vw,3rem);line-height:1.16;letter-spacing:-.01em;
  max-width:15ch;margin:0 auto 14px
}
.declaracao em{color:var(--laranja);font-style:normal}
.declaracao small{
  display:block;max-width:46ch;margin:0 auto;
  font-size:.95rem;color:var(--cinza-texto);font-family:'Barlow',sans-serif;
  text-transform:none;letter-spacing:0
}
/* O botão vive aqui e não no topo. A frase acima promete a aula sem custo,
   e é logo depois dela que faz sentido ter onde clicar. */
.declaracao .botao{margin-top:26px}
@media (max-width:759px){
  .declaracao .botao{display:block;width:100%;max-width:420px;margin-inline:auto}
}

/* PILHA DE CARTAS: fotos reais em carrossel */
.pilha{
  position:relative;margin:24px auto 52px;   /* auto centraliza, 52px abre espaço pros dots */
  aspect-ratio:4/3;max-width:640px;
  cursor:pointer;user-select:none;touch-action:pan-y
}
.pilha-cartas{list-style:none;position:absolute;inset:0;margin:0;padding:0}
.carta{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#151515;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  transform-origin:50% 100%
}
/* sem JS, mostra só a primeira e some com o resto */
.pilha:not(.pronta) .carta:not(:first-child){display:none}
.pilha.pronta .carta{
  --pos:0;
  transform:translateY(calc(var(--pos) * -14px)) scale(calc(1 - var(--pos) * .055));
  opacity:calc(1 - var(--pos) * .28);
  transition:transform .55s cubic-bezier(.3,.9,.3,1), opacity .55s ease;
  pointer-events:none
}
.pilha.pronta .carta.frente{opacity:1;pointer-events:auto}
/* 42% puxa o corte pra cima: em foto de turma os rostos ficam no terço superior */
.carta img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.carta .legenda{
  position:absolute;left:0;right:0;bottom:0;padding:52px 20px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.55) 45%,transparent)
}
.carta .legenda b{
  display:block;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:1rem;color:var(--claro);margin-bottom:3px
}
.carta .legenda span{font-size:.9rem;color:#CFCFCF}
.pilha-pontos{
  position:absolute;left:0;right:0;bottom:-30px;
  display:flex;justify-content:center;gap:8px
}
.ponto{
  width:8px;height:8px;border-radius:50%;padding:0;cursor:pointer;
  border:none;background:#4A4A4A;transition:background .3s,width .3s
}
.ponto.ativo{background:var(--laranja);width:22px;border-radius:999px}
.ponto:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
.claro .ponto{background:#C4C4C4}
.claro .ponto.ativo{background:var(--laranja-escuro)}

@media (prefers-reduced-motion:reduce){
  .pilha.pronta .carta{transition:none}
}
@media (min-width:760px){
  .pilha{aspect-ratio:16/10}
  .carta .legenda b{font-size:1.15rem}
}

/* GALERIA DE FOTOS REAIS */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.galeria figure{border-radius:4px;overflow:hidden;aspect-ratio:3/2;background:#222;position:relative}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria .larga{grid-column:1/-1;aspect-ratio:16/9}
.selo-real{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7A7A7A;margin-top:14px
}
.selo-real::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja)}
@media (min-width:760px){
  .galeria{grid-template-columns:repeat(3,1fr)}
  .galeria .larga{grid-column:span 2;aspect-ratio:3/2}
}

/* OUTRAS MODALIDADES */
.outras{display:grid;gap:12px;margin-top:20px}
.outra{
  background:var(--cinza);border-radius:4px;padding:16px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px
}
.outra b{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.92rem}
.outra span{font-size:.85rem;color:var(--cinza-texto);display:block;margin-top:2px}
.outra .seta{color:var(--laranja);font-size:1.3rem;line-height:1}

/* FECHAMENTO */
.fechamento{text-align:center}

/* RODAPÉ */
footer{padding:34px 0 22px;font-size:.88rem;color:var(--cinza-texto);border-top:1px solid #262626}
footer a{color:var(--laranja)}
footer p{margin-bottom:8px}
footer nav{margin-bottom:14px}
footer nav a{margin-right:14px;font-weight:600}

/* BOTÃO FIXO */
.fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(0,0,0,.94);border-top:1px solid #262626;
  padding:12px 20px;backdrop-filter:blur(8px)
}
.fixo .botao{display:block;width:100%;max-width:520px;margin:0 auto}

/* TÍTULOS CENTRADOS NO CELULAR
   Archivo Black em caixa alta quebra em 2 ou 3 linhas na tela estreita, e a
   última linha curta abre um buraco no canto direito. Centrado, a quebra fica
   simétrica e o bloco respira. No desktop volta pra esquerda, que é onde linha
   larga se lê melhor: título centrado com 60 caracteres cansa a leitura. */
@media (max-width:759px){
  /* o hero é uma coluna só no celular, então centraliza inteiro */
  .hero>div{text-align:center}
  .hero .botao{margin-inline:auto}

  /* cabeçalho de seção: etiqueta, título e a linha de apoio logo abaixo */
  :is(section,.wrap)>:is(.rotulo,h1,h2),
  :is(section,.wrap)>:is(h1,h2)+p{text-align:center}

  /* a barrinha da etiqueta vive em position:absolute e ignora text-align,
     então precisa ser recentrada na mão. Cresce do meio pros dois lados. */
  .rotulo::after{left:50%;transform:translateX(-50%)}
}

/* DESKTOP */
@media (min-width:760px){
  body{font-size:18px}
  h1{font-size:3.1rem}
  h2{font-size:2rem}
  section{padding:72px 0}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:64px 0}
  .foto-hero{aspect-ratio:3/2;margin-bottom:0;order:2}
  .grade-cards{grid-template-columns:repeat(3,1fr)}
  /* auto-fit em vez de 2 colunas fixas: cada modalidade tem um número diferente
     de planos. Boxe tem 1, jiu-jitsu 2, muay thai 3. Com coluna fixa, o card
     sozinho do boxe ficava em meia largura com um buraco do lado. */
  .planos{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .selos{grid-template-columns:repeat(2,1fr)}
  .beneficios{grid-template-columns:repeat(2,1fr);gap:26px}
  .aula{grid-template-columns:repeat(2,1fr)}
  .outras{grid-template-columns:repeat(2,1fr)}
  table{min-width:0}
  .dica-rolagem{display:none}
}