/* Fontes reaproveitadas da página principal (mesma identidade). */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/bigshouldersdisplay-700-normal.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/bigshouldersdisplay-800-normal.woff2') format('woff2');}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/bigshouldersdisplay-900-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/ibmplexmono-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/ibmplexmono-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/ibmplexmono-600-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/instrumentsans-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/instrumentsans-500-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/instrumentsans-600-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/instrumentsans-700-normal.woff2') format('woff2');}

/* ============================================================
   CENTRAL DE TREINOS — Método Vargas
   Mesma identidade da landing: pretos quentes + brasa
   ============================================================ */

:root{
  --ink-0:#070503;
  --ink-1:#0E0A07;
  --ink-2:#17100A;
  --ink-3:#221710;

  --ember:#FF4D00;
  --flame:#FF7A1A;
  --amber:#FFA028;
  --grad:linear-gradient(97deg,var(--ember) 0%,var(--amber) 100%);

  --bone:#F5EDE3;
  --ash:#B5AA9C;
  --smoke:#8D8377;

  --line:rgba(255,170,110,.14);
  --line-soft:rgba(255,170,110,.08);

  --display:'Big Shoulders Display',Impact,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --r-s:6px;
  --r-m:14px;
  --header-h:66px;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink-0);
  color:var(--bone);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{color:var(--bone);font-weight:600}
::selection{background:var(--ember);color:var(--ink-0)}

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

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding-inline:clamp(20px,4.5vw,44px);
}

.display{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.012em;
}
.am{color:var(--amber);font-style:normal}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  font-family:var(--body);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--r-s);
  padding:.85em 1.4em;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn--fire{background:var(--grad);color:#160903;box-shadow:0 8px 26px rgba(255,77,0,.26)}
.btn--fire:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,77,0,.4)}
.btn--ghost{border:1px solid var(--line);color:var(--bone);background:rgba(255,160,80,.04)}
.btn--ghost:hover{border-color:var(--amber);background:rgba(255,160,80,.09)}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(7,5,3,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.55em;text-decoration:none;line-height:1}
/* O logo nunca pode encolher: com a altura fixa, perder largura achata o desenho (em 360px chegou a
   3,06:1 em vez de 3,62:1). Duas travas, porque são duas causas: flex:none (o item flex cede largura
   quando falta espaço) e max-width:none (o img{max-width:100%} global limitava ao contêiner .brand,
   que por sua vez encolhia). */
/* 38px e 3px mais alto, igual ao cabeçalho da LP (ver o comentário em assets/style.css) */
.brand-logo{display:block;flex:none;max-width:none;height:38px;width:auto;transform:translateY(-3px)}
.header-cta{padding:.65em 1.1em;font-size:.76rem}

@media (max-width:520px){
  .header-cta span,.header-cta{font-size:.72rem}
  .header-cta{padding:.6em .9em}
  /* logo menor e respiro menor entre ele e o botão: em 390px (iPhone comum) é o que deixa
     "Falar com o Gustavo" em uma linha só. Abaixo de ~385px o botão quebra em duas, o que cabe. */
  .header .wrap{gap:.75rem}
  .brand-logo{height:36px}
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{position:relative;overflow:hidden;padding-block:clamp(2.6rem,6vw,4.2rem) clamp(1.6rem,4vw,2.4rem);border-bottom:1px solid var(--line-soft)}
.intro-title{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:1rem}
.intro-sub{color:var(--ash);font-size:clamp(1rem,1.5vw,1.16rem);max-width:60ch}
#intro-meta{color:var(--smoke)}

/* ============================================================
   PLAYER
   ============================================================ */
.player-wrap{padding-bottom:clamp(1.6rem,4vw,2.6rem)}
.player{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.player-frame{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ink-0);
}
.player-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}

/* estado vazio */
.player-empty{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-align:center;
  padding:1.5rem;
}
.player-mv{
  font-family:var(--mono);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.6rem;
}
.player-empty-title{font-weight:600;font-size:1.1rem;color:var(--bone)}
.player-empty-sub{color:var(--smoke);font-size:.92rem;max-width:34ch}

/* barra de info sob o vídeo */
/* texto só pra leitor de tela (fica fora da tela, mas é lido) */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.player-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.3rem;
  border-top:1px solid var(--line-soft);
  background:var(--ink-2);
}
.player-tag{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.2em;
}
.player-nome{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1;
  letter-spacing:.01em;
}
.player-close{
  flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--smoke);
  border:1px solid var(--line);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.player-close:hover{color:var(--bone);border-color:var(--amber);background:rgba(255,160,80,.08)}

/* ============================================================
   BUSCA + FILTROS
   ============================================================ */
.controls{padding-bottom:1.6rem}
.controls .wrap{display:flex;flex-direction:column;gap:1rem}

.search{
  position:relative;
  display:flex;
  align-items:center;
}
.search-ico{
  position:absolute;left:1.1rem;
  color:var(--smoke);
  pointer-events:none;
}
.search input{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--bone);
  background:var(--ink-1);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:.95em 3rem .95em 3rem;
  transition:border-color .2s ease,background .2s ease;
}
/* O input[type=search] traz um "x" nativo do navegador, que no tema escuro sai
   azul e aparece ao lado do nosso. Desligado: o botão de limpar é o .search-clear,
   que a gente controla (e a tecla Esc do próprio input continua funcionando). */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{
  -webkit-appearance:none;
  appearance:none;
}
.search input::placeholder{color:var(--smoke)}
.search input:focus{outline:none;border-color:var(--amber);background:var(--ink-2)}
.search-clear{
  position:absolute;right:1rem;
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--smoke);
}
.search-clear:hover{color:var(--bone)}

/* ============================================================
   ÍNDICE — rail de grupos musculares (a peça de assinatura da
   página: uma aba de fichário, não um filtro de chips genérico)
   ============================================================ */
.indice{padding-bottom:clamp(4rem,9vh,7rem)}
.indice-wrap{
  display:grid;
  grid-template-columns:176px 1fr;
  gap:clamp(1.6rem,3vw,2.6rem);
  align-items:start;
}

.rail{
  position:sticky;
  top:calc(var(--header-h) + 18px);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line);
}
.rail-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.6em .9em;
  margin-left:-1px;
  border-left:2px solid transparent;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--smoke);
  text-align:left;
  transition:color .2s ease,border-color .2s ease;
}
.rail-item:hover{color:var(--ash)}
.rail-item.on{color:var(--amber);border-left-color:var(--ember)}
.rail-count{
  font-size:.7rem;
  color:var(--smoke);
  opacity:.8;
}
.rail-item.on .rail-count{color:var(--amber)}

.conteudo{min-width:0}

@media (max-width:860px){
  .indice-wrap{grid-template-columns:1fr}
  .rail{
    position:sticky;
    top:var(--header-h);
    z-index:5;
    flex-direction:row;
    overflow-x:auto;
    border-left:0;
    border-bottom:1px solid var(--line);
    background:var(--ink-0);
    padding-bottom:2px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail-item{
    flex:none;
    border-left:0;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .rail-item.on{border-left-color:transparent;border-bottom-color:var(--ember)}
}

/* ============================================================
   LISTAS POR GRUPO MUSCULAR
   ============================================================ */
.grupo-bloco{margin-bottom:clamp(2.2rem,5vw,3.2rem);scroll-margin-top:calc(var(--header-h) + 70px)}
.grupo-bloco[hidden]{display:none}

.grupo-head{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding-bottom:.8rem;
  margin-bottom:.3rem;
  border-bottom:1px solid var(--line);
}
.grupo-head h2{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,1.7rem);
  line-height:1;
}
.grupo-count{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--smoke);
  white-space:nowrap;
}

.ex-lista{display:flex;flex-direction:column}

.ex-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.1rem;
  padding:.85em 0;
  text-align:left;
  width:100%;
  border-bottom:1px solid var(--line-soft);
  transition:background-color .18s ease;
}
.ex-row:hover{background:rgba(255,160,80,.045)}
.ex-row.active{background:rgba(255,77,0,.07)}
.ex-row[hidden]{display:none}

.ex-num{
  flex:none;
  width:2.1em;
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--smoke);
}
.ex-row.active .ex-num,
.ex-row:hover .ex-num{color:var(--amber)}

.ex-nome{
  flex:1;
  min-width:0;
  font-weight:600;
  font-size:1rem;
  color:var(--bone);
}

.ex-play{
  flex:none;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--smoke);
  transition:color .18s ease,background-color .18s ease;
}
.ex-row:hover .ex-play,
.ex-row.active .ex-play{color:var(--ember);background:rgba(255,77,0,.1)}
.ex-play svg{width:13px;height:13px;margin-left:1px}

/* exercício sem vídeo ainda */
.ex-row.soon{cursor:default}
.ex-row.soon:hover{background:none}
.ex-row.soon .ex-nome{color:var(--smoke)}
.ex-soon{
  flex:none;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--smoke);
  opacity:.7;
}

.vazio{
  color:var(--smoke);
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.04em;
  padding:2rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line-soft);padding:2.2rem 0}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.footer p{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--smoke)}
.footer p b{color:var(--ash);font-weight:500}
.footer-back{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--amber);text-decoration:none}
.footer-back:hover{text-decoration:underline}