/* ==========================================================================
   Tuka Porto — instrutor de skate · Orla do Guaíba, Porto Alegre
   Folha de estilo única do site. Tokens no :root — ajuste por aqui.
   Paleta tirada do material do cliente: preto/branco do emblema,
   vermelho do flyer (42.jpg) e amarelo da arte (43.jpg).
   Sem dependências externas: as fontes são as do sistema, então o site
   funciona offline e abre por duplo clique.
   ========================================================================== */

:root{
  --preto:      #0b0b0c;
  --preto-2:    #131316;
  --card:       #17171b;
  --card-alto:  #1e1e23;
  --borda:      #2b2b32;
  --branco:     #f6f6f4;
  --cinza:      #a6a6ad;
  --cinza-fraco:#74747c;
  --vermelho:   #e63329;
  --vermelho-esc:#b8231a;
  --amarelo:    #ffd400;

  --fonte-titulo: "Archivo Black","Anton","Arial Black","Helvetica Neue",Impact,sans-serif;
  --fonte-texto:  system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --largura: 1180px;
  --raio: 4px;
  --topo-alt: 74px;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--preto);
  color:var(--branco);
  font:400 17px/1.65 var(--fonte-texto);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.envolve{ width:min(100% - 2.5rem, var(--largura)); margin-inline:auto; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--amarelo); color:#000; padding:.7rem 1.1rem; font-weight:700;
}
.pular:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

/* ---------- tipografia ---------- */

h1,h2,h3,.marca-nome,.rodape-marca{
  font-family:var(--fonte-titulo);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.96;
  margin:0 0 .6em;
}

h1{ font-size:clamp(2.6rem,8.5vw,6rem); }
h2{ font-size:clamp(1.8rem,4.4vw,3rem); }
h3{ font-size:1.15rem; letter-spacing:.04em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.olho{
  font:700 .74rem/1 var(--fonte-texto);
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--amarelo); margin:0 0 1rem;
}

.linha-fina{
  color:var(--cinza); font-size:1.06rem; max-width:60ch;
}

.secao{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.secao + .secao{ border-top:1px solid var(--borda); }

.destaque{ color:var(--amarelo); }
.destaque-vermelho{ color:var(--vermelho); }

/* ---------- botões ---------- */

.bt{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--vermelho); color:#fff;
  font:700 .82rem/1 var(--fonte-texto);
  text-transform:uppercase; letter-spacing:.12em;
  padding:1rem 1.5rem; border-radius:var(--raio);
  text-decoration:none; border:0; cursor:pointer;
  transition:background .18s, transform .18s;
}
.bt:hover{ background:var(--vermelho-esc); transform:translateY(-2px); }
.bt-grande{ padding:1.2rem 2rem; font-size:.9rem; }
.bt-zap{ background:transparent; border:1px solid var(--borda); color:var(--branco); }
.bt-zap:hover{ background:var(--card-alto); border-color:var(--cinza-fraco); }

/* ---------- topo ---------- */

.topo{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda);
  transition:background .25s;
}
.topo.is-rolado{ background:rgba(11,11,12,.96); }

.topo-linha{
  min-height:var(--topo-alt);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.marca{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.marca img{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--borda); flex:none;
}
.marca-nome{
  font-size:1.15rem; line-height:1; margin:0;
  display:flex; flex-direction:column;
}
.marca-nome small{
  font:500 .62rem/1.4 var(--fonte-texto);
  text-transform:uppercase; letter-spacing:.18em; color:var(--cinza);
  margin-top:.35rem;
}

.menu ul{
  display:flex; gap:1.6rem; list-style:none; margin:0; padding:0;
  font-size:.83rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.menu a{ text-decoration:none; color:var(--cinza); padding:.4rem 0; }
.menu a:hover,.menu a[aria-current="page"]{ color:var(--branco); }
.menu > a.bt{ display:none; }

.menu-botao{
  display:none; background:transparent; border:1px solid var(--borda); color:var(--branco);
  border-radius:var(--raio); padding:.6rem .8rem; cursor:pointer;
  align-items:center; gap:.5rem;
}
.menu-botao span{ display:block; width:16px; height:2px; background:var(--branco); }
.menu-botao em{ font-style:normal; font:600 .7rem/1 var(--fonte-texto);
  text-transform:uppercase; letter-spacing:.14em; }

/* ---------- hero ---------- */

.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  padding:calc(var(--topo-alt) + 3rem) 0 3.5rem;
  border-bottom:1px solid var(--borda);
  overflow:hidden;
}
.hero-foto{
  position:absolute; inset:0; z-index:-2;
  background:url("../fotos/silhueta-por-do-sol-01.jpg") center 42%/cover no-repeat, var(--preto-2);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--preto) 2%, rgba(11,11,12,.72) 42%, rgba(11,11,12,.35) 100%),
    linear-gradient(105deg, rgba(11,11,12,.85) 8%, transparent 62%);
}
.hero h1{ margin-bottom:.35em; }
.hero h1 span{ display:block; }
.hero .linha-fina{ color:#dcdcd8; }
.hero-ações{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.hero-tag{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--borda); border-radius:100px;
  padding:.45rem 1rem; margin-bottom:1.6rem;
  font:600 .72rem/1 var(--fonte-texto); text-transform:uppercase; letter-spacing:.16em;
  color:var(--cinza); background:rgba(11,11,12,.5);
}
.hero-tag b{ color:var(--amarelo); font-weight:700; }

/* ---------- números ---------- */

.numeros{ border-bottom:1px solid var(--borda); background:var(--preto-2); }
.numeros-linha{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--borda);
}
.numero{ background:var(--preto-2); padding:2.2rem 1.4rem; }
.numero b{
  display:block; font-family:var(--fonte-titulo); font-size:clamp(2rem,4.6vw,3rem);
  color:var(--branco); line-height:1; margin-bottom:.5rem;
}
.numero span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--cinza); }

/* ---------- sobre ---------- */

.duas-colunas{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.duas-colunas.is-invertida{ grid-template-columns:1fr 1.05fr; }
.duas-colunas img{
  width:100%; border-radius:var(--raio); border:1px solid var(--borda);
}
.figura-pilha{ display:grid; gap:1rem; }
.figura-pilha img:first-child{ aspect-ratio:4/5; object-fit:cover; }

.assinatura{
  font-family:var(--fonte-titulo); text-transform:uppercase;
  font-size:1.4rem; letter-spacing:.04em; color:var(--amarelo); margin-top:2rem;
}
.assinatura small{
  display:block; font:500 .72rem/1.6 var(--fonte-texto);
  letter-spacing:.16em; color:var(--cinza); margin-top:.5rem;
}

/* ---------- modalidades ---------- */

.cartoes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem;
}
.cartao{
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio);
  padding:1.8rem 1.5rem;
  transition:background .2s, border-color .2s, transform .2s;
}
.cartao:hover{ background:var(--card-alto); border-color:var(--cinza-fraco); transform:translateY(-3px); }
.cartao .icone{
  width:34px; height:34px; margin-bottom:1.2rem; color:var(--vermelho);
}
.cartao[data-cor="amarelo"] .icone{ color:var(--amarelo); }
.cartao p{ color:var(--cinza); font-size:.95rem; margin:0; }

/* ---------- tabela de horários ---------- */

.bloco-horario{
  margin-top:3rem; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start;
}
.tabela{ width:100%; border-collapse:collapse; font-size:.95rem; }
.tabela caption{
  text-align:left; font:700 .72rem/1 var(--fonte-texto); text-transform:uppercase;
  letter-spacing:.2em; color:var(--amarelo); padding-bottom:.9rem;
}
.tabela th,.tabela td{ text-align:left; padding:.85rem .6rem; border-bottom:1px solid var(--borda); }
.tabela th{ color:var(--cinza); font-weight:600; font-size:.83rem;
  text-transform:uppercase; letter-spacing:.08em; }
.tabela td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }

.nota{
  background:var(--card); border:1px solid var(--borda);
  border-left:3px solid var(--vermelho);
  border-radius:var(--raio); padding:1.3rem 1.4rem; font-size:.95rem; color:var(--cinza);
}
.nota strong{ color:var(--branco); }

/* ---------- método ---------- */

.passos{ list-style:none; margin:2.5rem 0 0; padding:0; counter-reset:p; display:grid; gap:1px;
  background:var(--borda); border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; }
.passos li{
  background:var(--preto-2); padding:1.6rem 1.6rem 1.6rem 4.6rem; position:relative;
}
.passos li::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  position:absolute; left:1.6rem; top:1.55rem;
  font-family:var(--fonte-titulo); font-size:1.3rem; color:var(--vermelho);
}
.passos h3{ margin:0 0 .35rem; font-size:1rem; }
.passos p{ margin:0; color:var(--cinza); font-size:.95rem; }

/* ---------- galeria (prévia no index) ---------- */

.grade-previa{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:2.5rem;
}
.grade-previa a{ display:block; overflow:hidden; border-radius:var(--raio); background:var(--card); }
.grade-previa img{
  width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .45s ease, opacity .3s;
}
.grade-previa a:hover img{ transform:scale(1.06); opacity:.85; }
.grade-previa a:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.grade-previa a:nth-child(1) img{ aspect-ratio:1/1; }

/* ---------- galeria (página) ---------- */

.faixa-pagina{
  padding:calc(var(--topo-alt) + 4rem) 0 3rem;
  background:linear-gradient(to bottom, var(--preto-2), var(--preto));
  border-bottom:1px solid var(--borda);
}

.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.filtro{
  background:transparent; border:1px solid var(--borda); color:var(--cinza);
  border-radius:100px; padding:.6rem 1.1rem; cursor:pointer;
  font:600 .8rem/1 var(--fonte-texto); text-transform:uppercase; letter-spacing:.1em;
  transition:color .18s, border-color .18s, background .18s;
}
.filtro:hover{ color:var(--branco); border-color:var(--cinza-fraco); }
.filtro.is-ativo{ background:var(--vermelho); border-color:var(--vermelho); color:#fff; }
.filtro .n{ opacity:.6; font-variant-numeric:tabular-nums; }

.grade{ columns:4; column-gap:.7rem; }
.item{ margin:0 0 .7rem; break-inside:avoid; }
.item-link{ display:block; overflow:hidden; border-radius:var(--raio); background:var(--card); }
.item img{ width:100%; transition:transform .5s ease, opacity .3s; }
.item-link:hover img{ transform:scale(1.04); opacity:.88; }
.item.is-oculto{ display:none; }

.vazio{
  display:none; padding:3rem 0; text-align:center; color:var(--cinza);
}
.vazio.is-visivel{ display:block; }

.aviso-credito{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--borda);
  font-size:.85rem; color:var(--cinza-fraco); max-width:70ch;
}
.aviso-credito strong{ color:var(--cinza); }

/* ---------- vídeos ---------- */

.grade-video{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1rem; margin-top:2.5rem;
}
.video{ margin:0; background:var(--card); border:1px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; }
.video video{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }

/* ---------- chamada / contato ---------- */

.chamada{
  background:var(--vermelho); color:#fff; padding:clamp(3rem,7vw,5rem) 0;
}
.chamada h2{ color:#fff; }
.chamada p{ color:rgba(255,255,255,.88); max-width:56ch; margin:0; }
.chamada .bt{ background:#fff; color:var(--vermelho-esc); }
.chamada .bt:hover{ background:var(--amarelo); color:#000; }
.chamada-linha{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between;
}

.contato-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:2.5rem;
}
.contato-item{
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio); padding:1.6rem;
}
.contato-item h3{ font-size:.78rem; letter-spacing:.18em; color:var(--amarelo); margin:0 0 .8rem; }
.contato-item p{ margin:0; font-size:1rem; }
.contato-item a{ color:var(--branco); text-decoration:none; border-bottom:1px solid var(--borda); }
.contato-item a:hover{ border-color:var(--amarelo); }
.contato-item small{ display:block; margin-top:.6rem; color:var(--cinza-fraco); font-size:.8rem; }

.pendente{ color:var(--cinza-fraco); font-style:italic; }

/* ---------- rodapé ---------- */

.rodape{ background:var(--preto-2); border-top:1px solid var(--borda); padding:3.5rem 0 6rem; }
.rodape-linha{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:flex-start;
  padding-bottom:2.5rem; border-bottom:1px solid var(--borda);
}
.rodape-marca{ font-size:1.5rem; margin:0 0 .5rem; }
.rodape-sub{ color:var(--cinza); font-size:.9rem; margin:0; }
.rodape-links{
  display:flex; flex-wrap:wrap; gap:1.4rem; list-style:none; margin:0; padding:0;
  font-size:.83rem; text-transform:uppercase; letter-spacing:.1em;
}
.rodape-links a{ color:var(--cinza); text-decoration:none; }
.rodape-links a:hover{ color:var(--branco); }
.rodape-fim{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding-top:1.8rem; font-size:.8rem; color:var(--cinza-fraco);
}
.rodape-fim p{ margin:0; }

/* ---------- barra fixa do WhatsApp (mobile) ---------- */

.barra-zap{
  position:fixed; inset:auto 0 0 0; z-index:40; display:none;
  background:var(--preto-2); border-top:1px solid var(--borda); padding:.6rem;
}
.barra-zap a{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--vermelho); color:#fff; text-decoration:none;
  font:700 .8rem/1 var(--fonte-texto); text-transform:uppercase; letter-spacing:.1em;
  padding:1rem; border-radius:var(--raio);
}

/* ---------- lightbox ---------- */

.lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(6,6,7,.96);
  display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem;
}
.lightbox[hidden]{ display:none; }
.lightbox figure{ margin:0; max-width:min(100%,1500px); text-align:center; }
.lightbox img{ max-width:100%; max-height:80vh; margin-inline:auto; border-radius:var(--raio); }
.lightbox figcaption{ color:var(--cinza); font-size:.85rem; margin-top:1rem; }
.lb-fechar,.lb-nav{
  position:absolute; background:transparent; color:var(--branco);
  border:1px solid var(--borda); border-radius:100px; cursor:pointer;
  width:46px; height:46px; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lb-fechar:hover,.lb-nav:hover{ background:var(--card-alto); }
.lb-fechar{ top:1.2rem; right:1.2rem; }
.lb-ant{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lb-prox{ right:1.2rem; top:50%; transform:translateY(-50%); }

/* ---------- responsivo ---------- */

@media (max-width:1080px){
  .grade{ columns:3; }
}

@media (max-width:900px){
  :root{ --topo-alt:64px; }
  .menu ul{ display:none; }
  .menu-botao{ display:flex; }
  .menu{
    position:fixed; inset:var(--topo-alt) 0 auto 0;
    background:var(--preto-2); border-bottom:1px solid var(--borda);
    padding:1.5rem; display:none;
  }
  .menu.is-aberto{ display:block; }
  .menu ul{ display:block; }
  .menu li{ border-bottom:1px solid var(--borda); }
  .menu li:last-child{ border-bottom:0; }
  .menu a{ display:block; padding:1rem 0; font-size:1rem; }
  .menu > a.bt{ display:inline-flex; margin-top:1.2rem; }
  .duas-colunas,.duas-colunas.is-invertida{ grid-template-columns:1fr; }
  .numeros-linha{ grid-template-columns:1fr 1fr; }
  .bloco-horario{ grid-template-columns:1fr; }
  .grade{ columns:2; }
  .grade-previa{ grid-template-columns:repeat(2,1fr); }
  .grade-previa a:nth-child(1){ grid-column:span 2; grid-row:auto; }
  .barra-zap{ display:block; }
  .rodape{ padding-bottom:8rem; }
  .lb-ant{ left:.4rem; }
  .lb-prox{ right:.4rem; }
}

@media (max-width:520px){
  body{ font-size:16px; }
  .grade{ columns:1; }
  .envolve{ width:min(100% - 1.8rem, var(--largura)); }
  .hero{ min-height:88vh; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}