:root{
  --bg-navy: #0A1628;
  --bg-navy-2: #0D1D33;
  --card: #10233D;
  --card-2: #142943;
  --cyan: #3EE4FF;
  --cyan-dim: rgba(62,228,255,0.15);
  --text: #FFFFFF;
  --text-dim: #9FB0C3;
  --border: rgba(62,228,255,0.35);
  --yellow: #FFC93C;
  --radius: 16px;
}

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

html, body{ height:auto; min-height:100%; }

body{
  font-family:'Poppins', sans-serif;
  background:linear-gradient(180deg, var(--bg-navy) 0%, var(--bg-navy-2) 100%);
  color:var(--text);
}

/* Container único: o fundo azul ocupa a tela inteira (mobile e desktop).
   Em telas largas, só o conteúdo fica centralizado numa coluna — sem
   moldura de celular, sem card, sem borda. */
.app-shell{
  width:100%;
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.screen{
  display:none;
  flex-direction:column;
  flex:1;
}
.screen.active{display:flex;}

/* ---------- HOME ---------- */
.home-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
}
.logo-wrap{ text-align:center; margin-bottom:32px; }
.logo-img{ width:220px; max-width:70vw; height:auto; }
.tagline{ margin-top:10px; color:var(--text-dim); font-size:15px; font-weight:500; letter-spacing:0.5px;}

.q-title{ font-size:22px; font-weight:700; margin-bottom:6px; text-align:center; max-width:360px; }
.q-sub{ color:var(--text-dim); font-size:14px; margin-bottom:28px; text-align:center; }

.btn-stack{ display:flex; flex-direction:column; gap:14px; width:100%; }
.btn{
  border-radius:100px;
  padding:16px 20px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
  text-align:center;
}
.btn-outline{
  background:transparent;
  border:1.5px solid var(--border);
  color:var(--text);
}
.btn-outline:active{ background:var(--cyan-dim); }
.btn-solid{
  background:var(--cyan);
  border:1.5px solid var(--cyan);
  color:var(--bg-navy);
}
.btn-solid:active{ opacity:0.85; }

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 20px 18px;
  flex-shrink:0;
}
.icon-btn{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.topbar-title{
  font-size:17px;
  font-weight:700;
  letter-spacing:0.5px;
}

/* ---------- FOCO ---------- */
.foco-body{ padding:10px 24px 40px; flex:1; }
.disclaimer{
  margin-top:28px;
  background:var(--card);
  border:1px solid rgba(255,201,60,0.25);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
.disclaimer p{ font-size:12.5px; line-height:1.5; color:var(--text-dim); }
.disclaimer strong{ color:var(--text); }

/* ---------- TREINOS LIST ---------- */
.treinos-body{ padding:0 20px 30px; flex:1; }

.metodologia-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:22px;
}
.video-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 9/16;
  max-height:70vh;
  background:linear-gradient(135deg,#123049,#0a1a2b);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.play-btn{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
}
.video-label{
  position:absolute;
  bottom:10px; left:14px;
  font-size:12px;
  font-weight:600;
  color:var(--text-dim);
  background:rgba(0,0,0,0.4);
  padding:4px 10px;
  border-radius:8px;
}
.metodologia-text{
  padding:14px 16px 16px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-dim);
  white-space:pre-line;
}

.treinos-list{ display:flex; flex-direction:column; gap:10px; }
.treino-item{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.treino-num{
  width:44px; height:44px;
  border-radius:12px;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:14px;
  color:var(--cyan);
  flex-shrink:0;
}
.treino-name{
  flex:1;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:0.3px;
}
.treino-name svg{ flex-shrink:0; margin-left:8px; }

/* ---------- TREINO EXERCICIOS LIST ---------- */
.treino-body{ padding:0 20px 30px; flex:1; }
.exercicios-list{ display:flex; flex-direction:column; gap:10px; }
.exercicio-item{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.exercicio-item .num{
  width:26px; height:26px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  font-weight:700;
  color:var(--text-dim);
  flex-shrink:0;
}
.exercicio-item .name{ flex:1; font-size:13.5px; font-weight:600; }
.exercicio-item svg{ flex-shrink:0; }

/* ---------- EXERCICIO VIDEO ---------- */
.exercicio-body{ padding:0 20px 30px; flex:1; }
.video-frame{
  width:100%;
  aspect-ratio: 9/16;
  max-height:70vh;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:16px;
}
.video-frame iframe{ width:100%; height:100%; border:0; }

.toggle-pill{
  display:flex;
  align-items:center;
  background:var(--card);
  border-radius:100px;
  padding:4px;
  gap:4px;
  margin-bottom:16px;
}
.toggle-btn{
  flex:1;
  border:none;
  background:transparent;
  color:var(--text-dim);
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  padding:10px 0;
  border-radius:100px;
  cursor:pointer;
}
.toggle-btn.active{
  background:var(--yellow);
  color:var(--bg-navy);
}
.toggle-icon{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.subs-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sub-item{
  background:var(--card-2);
  border-left:3px solid var(--cyan);
  border-radius:8px;
  padding:10px 14px;
  font-size:12.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.sub-item.active{ border-left-color:var(--yellow); }
.sub-item-thumb{
  width:52px; height:52px;
  flex-shrink:0;
  border-radius:8px;
  background:#0a1a2b linear-gradient(135deg,#123049,#0a1a2b);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sub-item-name{ flex:1; }

.exercicio-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.nav-btn{
  display:flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:none;
  color:var(--cyan);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  padding:6px;
}
.nav-btn:disabled{ opacity:0.3; cursor:default; }
.ex-counter{ font-size:12px; color:var(--text-dim); font-weight:600; }

.lista-mini{ display:flex; flex-direction:column; gap:8px; }
.mini-block{ display:flex; flex-direction:column; }
.mini-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-dim);
  cursor:pointer;
  background:var(--card);
  border:1px solid transparent;
}
.mini-item.active{
  color:var(--text);
  border-color:var(--border);
  background:var(--cyan-dim);
}
.mini-item .check{
  width:18px; height:18px;
  border-radius:50%;
  border:1.5px solid var(--text-dim);
  flex-shrink:0;
}
.mini-item.active .check{
  border-color:var(--cyan);
  background:var(--cyan);
}
.mini-item-name{ flex:1; }
.mini-chevron{ flex-shrink:0; transition:transform .2s ease; }
.mini-chevron.open{ transform:rotate(180deg); }

.mini-subs{
  margin:8px 0 4px;
  padding-left:28px;
}
.mini-subs-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:8px;
}