/* ============================================================
   FONTES — hospedadas junto do site em assets/fonts/
   Self-hosted: sem dependência do Google Fonts em runtime.
   ============================================================ */

/* Dela Gothic One — títulos/display */
@font-face {
  font-family:'Dela Gothic One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/dela-gothic-one-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Dela Gothic One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/dela-gothic-one-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Potta One — exclusiva do ícone ネオ (subset só com esses 2 katakanas) */
@font-face {
  font-family:'Potta One'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/potta-one-neo.woff2') format('woff2');
}

/* Archivo — fallback ativo de Degular Display (texto de apoio) */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/archivo-500.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/archivo-600.woff2') format('woff2'); }

/* IBM Plex Mono — fallback ativo de Necto Mono (mono/labels) */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* ------------------------------------------------------------
   FONTES LICENCIADAS DA MARCA (slots opcionais).
   Coloque os .woff2 em assets/fonts/ e descomente para ativar.
   Enquanto comentadas, os fallbacks acima seguram a identidade:
     FRICK 3.0       -> Dela Gothic One (somente no wordmark)
     Degular Display -> Archivo
     Necto Mono      -> IBM Plex Mono
   ------------------------------------------------------------
@font-face { font-family:'FRICK 3.0';      src:url('assets/fonts/Frick3.0-Regular.woff2') format('woff2');     font-display:swap; }*/
@font-face { font-family:'Degular Display'; src:url('assets/fonts/DegularDisplay-Bold.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Necto Mono';      src:url('assets/fonts/Necto-Mono.woff2') format('woff2');     font-display:swap; }

:root{
  --ink:    #22242B;
  --layer:  #25282A;
  --paper:  #FFFFFF;
  --gold:   #C8B560;
  --paper-dim: rgba(255,255,255,.62);
  --paper-faint: rgba(255,255,255,.34);
  --hairline: rgba(255,255,255,.10);

  --font-brand:   'FRICK 3.0', 'Dela Gothic One', sans-serif;
  --font-display: 'Dela Gothic One', sans-serif;
  --font-support: 'Degular Display', 'Archivo', sans-serif;
  --font-mono:    'Necto Mono', 'IBM Plex Mono', monospace;
  --font-icon:    'Potta One', sans-serif;

  --pad: clamp(20px, 5vw, 72px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--gold); color: var(--ink); }
a{ color: inherit; }

/* ---------- grão ---------- */
.grain{
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 60; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- linha de faixa (progresso de scroll) ---------- */
.belt{
  position: fixed; top:0; left:0;
  height: 3px; width: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 70;
}

/* ---------- nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--pad); z-index: 50;
  background: linear-gradient(to bottom, rgba(34,36,43,.92), rgba(34,36,43,0));
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height: clamp(30px, 4.6vw, 42px); width:auto; display:block; }
.nav-cta{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; font-weight: 500;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink);
  padding: 11px 20px; transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
  box-shadow: 0 6px 18px rgba(200,181,96,.18);
}
.nav-cta:hover{ background: #d8c66f; border-color: #d8c66f; color: var(--ink); box-shadow: 0 8px 22px rgba(200,181,96,.28); }

/* ---------- dropdown agendamento ---------- */
.nav-actions{ display:flex; align-items:center; gap: 12px; }
.dropdown{ position: relative; }
.nav-social{
  display:inline-flex; align-items:center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration:none; color: var(--paper);
  border: 1px solid var(--hairline); padding: 10px 16px; line-height: 1;
  transition: border-color .25s, color .25s, background .25s;
}
.nav-social:hover{ border-color: var(--gold); color: var(--gold); }
.social-icon{ width: 16px; height: 16px; fill: currentColor; flex:none; }
button.nav-cta{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold); color: var(--ink); cursor: pointer; line-height: 1;
}
button.nav-cta .caret{ font-size: 10px; transition: transform .25s; }
.dropdown.open > button.nav-cta{ border-color: #d8c66f; color: var(--ink); background: #d8c66f; }
.dropdown.open > button.nav-cta .caret{ transform: rotate(180deg); }
.dropdown-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 248px;
  background: var(--layer); border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 80;
}
.dropdown.open .dropdown-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--paper-dim);
  padding: 15px 18px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  transition: color .2s, background .2s;
}
.dropdown-menu a:last-child{ border-bottom: none; }
.dropdown-menu a .arrow{ opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; color: var(--gold); }
.dropdown-menu a:hover{ color: var(--gold); background: rgba(255,255,255,.03); }
.dropdown-menu a:hover .arrow{ opacity: 1; transform: translateX(0); }

/* ---------- hero ---------- */
.hero{
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad) clamp(48px, 9vh, 96px); overflow: hidden;
  background-image:
    linear-gradient(to top, rgba(34,36,43,.94) 0%, rgba(34,36,43,.72) 32%, rgba(34,36,43,.42) 62%, rgba(34,36,43,.55) 100%),
    linear-gradient(to right, rgba(34,36,43,.72) 0%, rgba(34,36,43,.28) 45%, rgba(34,36,43,0) 75%),
    url('assets/img/hero.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 22%;
  background-repeat: no-repeat;
}
.hero-glyph{ display: none; }
.hero-content{ position: relative; z-index: 2; max-width: 1200px; }
.hero-kicker{
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-dim); margin-bottom: clamp(20px, 3vh, 32px);
}
.hero h1{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 9.6vw, 148px); line-height: .98;
  letter-spacing: -.01em; text-transform: uppercase; margin-left: -0.04em;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero-sub{ margin-top: clamp(22px, 3.4vh, 36px); max-width: 520px; color: var(--paper-dim); }
.hero-scroll{
  position:absolute; bottom: clamp(48px, 9vh, 96px); right: var(--pad);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-faint); writing-mode: vertical-rl;
}

/* ---------- estrutura comum ---------- */
section{ padding: clamp(88px, 14vh, 160px) var(--pad); }
.label{
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: clamp(36px, 6vh, 64px);
}
.label::before{
  content:""; display:inline-block; width: 28px; height:1px;
  background: var(--gold); vertical-align: middle; margin-right: 14px;
}

/* ---------- posicionamento ---------- */
.statement{ border-top: 1px solid var(--hairline); }
.statement-text{
  font-family: var(--font-support); font-weight: 500;
  font-size: clamp(26px, 4.4vw, 56px); line-height: 1.22; max-width: 19em;
}
.statement-text em{ font-style: normal; color: var(--gold); }
.statement-after{ margin-top: clamp(28px, 5vh, 48px); max-width: 460px; color: var(--paper-dim); }

/* ---------- método ---------- */
.method{ background: var(--layer); }
.method-row{
  display: grid; grid-template-columns: minmax(180px, 320px) 1fr;
  gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 4.5vh, 44px) 0;
  border-top: 1px solid var(--hairline);
}
.method-row:last-of-type{ border-bottom: 1px solid var(--hairline); }
.method-title{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.9vw, 24px); text-transform: uppercase; line-height: 1.25;
}
.method-text{ color: var(--paper-dim); max-width: 560px; align-self: center; }

/* ---------- história ---------- */
.story-item{
  display: grid; grid-template-columns: minmax(120px, 280px) 1fr;
  gap: clamp(20px, 4vw, 64px); padding: clamp(32px, 5vh, 52px) 0;
  border-top: 1px solid var(--hairline);
}
.story-year{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 72px); line-height: 1; color: var(--paper);
}
.story-body{ align-self:center; max-width: 580px; color: var(--paper-dim); }
.story-body strong{ color: var(--paper); font-weight: 500; }
.story-thread{
  margin-top: clamp(56px, 9vh, 96px); padding-top: clamp(32px, 5vh, 48px);
  border-top: 1px solid var(--gold);
  font-family: var(--font-support); font-weight: 500;
  font-size: clamp(20px, 3vw, 34px); line-height: 1.35; color: var(--gold); max-width: 24em;
}

/* ---------- instrutores ---------- */
.crew{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.crew-card{ display:flex; flex-direction:column; }
.crew-photo{
  position: relative; aspect-ratio: 4 / 5;
  background: var(--layer); border: 1px solid var(--hairline);
  overflow: hidden; margin-bottom: clamp(18px, 2vw, 24px);
}
.crew-photo img{ width:100%; height:100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display:block; }
.crew-photo img.ph-willian{ object-position: center 30%; }
/* placeholder enquanto não tem a foto */
.crew-photo[data-empty] img{ display:none; }
.crew-photo[data-empty]{ background: var(--ink); }
.crew-photo[data-empty]::before{
  content: "ネオ"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-icon); font-size: clamp(48px, 6vw, 84px); color: rgba(255,255,255,.025);
}
.crew-photo[data-empty]::after{
  content: "Foto em breve"; position:absolute; left:0; right:0; bottom: 16px; text-align:center;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-faint);
}
.crew-name{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px); text-transform: uppercase; line-height: 1.2;
}
.crew-role{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.crew-bio{ color: var(--paper-dim); margin-top: 16px; max-width: 32ch; flex: 1; }
.crew-rank{ margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.crew-rank .lab{ display:block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.crew-rank .val{ font-family: var(--mono, 'IBM Plex Mono', monospace); font-size: 13px; letter-spacing: .03em; color: var(--paper); }

/* ---------- treinos ---------- */
.training{ background: var(--layer); }
.training-block + .training-block{ margin-top: clamp(40px, 6vh, 72px); }
.training-sublabel{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px); text-transform: uppercase; margin-bottom: clamp(20px, 3vh, 28px);
}
.training-grid{ display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.training-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.training-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.training-card{
  background: var(--layer); padding: clamp(28px, 3.5vw, 44px);
  display: flex; flex-direction: column; gap: 14px; min-height: 260px;
}
.training-card h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px); text-transform: uppercase; line-height: 1.3;
}
.training-card p{ color: var(--paper-dim); flex:1; }
.training-tag{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-faint); }

/* ---------- grade de treinos ---------- */
.schedule-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schedule{
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: rgba(200,181,96,.28); border: 1px solid rgba(200,181,96,.28);
  min-width: 720px;
}
.sch-head{
  background: var(--ink);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px); text-transform: uppercase; line-height: 1;
  padding: clamp(18px, 2vw, 28px) clamp(14px, 1.1vw, 18px) clamp(14px, 1.4vw, 18px);
}
.sch-cell{
  background: var(--ink);
  padding: clamp(16px, 1.4vw, 22px) clamp(14px, 1.1vw, 18px);
}
.sch-cell.empty{ min-height: 1px; }
.slot-modality{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(14px, 1.3vw, 17px); text-transform: uppercase; color: var(--gold); line-height: 1.1;
}
.slot-audience{ font-size: 12px; letter-spacing: .08em; color: var(--paper-dim); margin-top: 6px; }
.slot-times{ margin-top: 12px; font-size: 13px; letter-spacing: .04em; color: var(--paper); }

/* ---------- cta ---------- */
.cta{ position: relative; overflow: hidden; padding-top: clamp(110px, 18vh, 200px); padding-bottom: clamp(110px, 18vh, 200px); }
.cta-glyph{
  position:absolute; bottom:-18%; left:-4vw;
  font-family: var(--font-icon); font-size: clamp(220px, 38vw, 560px);
  line-height:.9; color: var(--layer); pointer-events:none; user-select:none;
}
.cta-inner{ position:relative; z-index:2; }
.cta h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 8.4vw, 120px); text-transform: uppercase; line-height: 1; margin-bottom: clamp(24px, 4vh, 40px);
}
.cta p{ max-width: 460px; color: var(--paper-dim); margin-bottom: clamp(32px, 5vh, 52px); }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; padding: 16px 28px;
  border: 1px solid var(--paper); transition: background .25s, color .25s, border-color .25s;
}
.btn-primary{ background: var(--paper); color: var(--ink); }
.btn-primary:hover{ background: var(--gold); border-color: var(--gold); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------- footer ---------- */
footer{
  border-top: 1px solid var(--hairline); padding: 32px var(--pad) 40px;
  display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap;
  color: var(--paper-faint); font-size: 12px; letter-spacing: .06em;
}
.footer-brand{ display:flex; align-items:center; gap:12px; color: var(--paper); }
.footer-logo{ height: 24px; width:auto; display:block; }

/* ---------- localização ---------- */
.local-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px,4vw,56px); align-items:stretch; margin-top: 12px; }
.local-info{ display:flex; flex-direction:column; justify-content:center; }
.local-logo{ height: clamp(44px, 5.5vw, 64px); width:auto; display:block; align-self:flex-start; }
.local-address{ color: var(--paper-dim); margin-top: 18px; line-height: 1.75; max-width: 32ch; }
.local-btn{
  align-self:flex-start; margin-top: 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration:none; color: var(--gold); display:inline-flex; align-items:center; gap:10px;
  border-bottom: 1px solid rgba(200,181,96,.4); padding-bottom: 6px; transition: gap .2s, border-color .2s;
}
.local-btn:hover{ gap:14px; border-color: var(--gold); }
.local-map{
  position:relative; display:block; min-height: 340px;
  border:1px solid var(--hairline); overflow:hidden; background: var(--layer);
}
.local-map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter: grayscale(1) contrast(.92) brightness(.92); pointer-events:none;
}
.local-map-overlay{ position:absolute; inset:0; z-index:2; }
@media (max-width: 860px){
  .local-grid{ grid-template-columns: 1fr; }
  .local-map{ min-height: 260px; }
}
@media (max-width: 480px){
  .nav{ padding: 13px var(--pad); }
  .nav-actions{ gap: 8px; }
  .nav-cta{ padding: 9px 12px; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }
  button.nav-cta{ gap: 7px; }
  .cta-word{ display:none; }
  .nav-social{ padding: 9px 11px; }
  .social-label{ display:none; }
  .social-icon{ width: 17px; height: 17px; }
  .brand-logo{ height: 24px; }
}

/* ---------- responsivo ---------- */
@media (max-width: 860px){
  .hero h1{ font-size: clamp(48px, 13.5vw, 72px); }
  .cta h2{ font-size: clamp(44px, 12.5vw, 72px); }
  .method-row, .story-item{ grid-template-columns: 1fr; gap: 12px; }
  .crew{ grid-template-columns: 1fr; gap: clamp(36px, 7vw, 48px); }
  .crew-photo{ aspect-ratio: 3 / 2; }
  .crew-photo img.ph-willian{ object-position: center 44%; }
  .training-grid.cols-3, .training-grid.cols-2{ grid-template-columns: 1fr; }
  .hero-glyph{ right: -22vw; top: 42%; font-size: 110vw; opacity:.8; }
  .hero-scroll{ display:none; }
  .brand-sub{ display:none; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .belt{ display:none; }
}