/* Área do aluno do Método 10 em 30: a identidade da landing, pensada primeiro para Android de entrada, 360 px. */
@font-face { font-family: Saira; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/saira-var.woff2) format("woff2"); }
@font-face { font-family: Saira; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/saira-var-italic.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2"); }

:root {
  --black: #000; --ink: #0d0e10; --plate: #15171a; --rail: #2a2d32; --steel: #8d939c; --silver: #d4d7db; --white: #f7f8f9;
  --gold: #d9a62e; --gold-hi: #f6d47c; --gold-lo: #9c7414; --danger: #ff8f86;
  --metal: linear-gradient(176deg, #fff 0%, #eef0f2 30%, #9fa4ab 49%, #e9ebee 66%, #b9bdc3 100%);
  --fio: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-hi) 50%, var(--gold) 88%, transparent);
  --display: "Saira", sans-serif; --body: "Barlow", system-ui, sans-serif;
  --barra: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: var(--black); color: var(--silver);
  font: 400 1rem/1.5 var(--body);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--gold-hi); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
h1:focus { outline: none; }

.tela { width: 100%; max-width: 520px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 16px; }
.tela.com-barra { padding-bottom: calc(var(--barra) + 32px + env(safe-area-inset-bottom)); }
.logo { width: 148px; height: auto; }
.logo.grande { width: min(240px, 72%); margin: 24px auto 32px; }
.fio { height: 1px; background: var(--fio); border: 0; margin: 16px 0; }
.titulo {
  padding-right: .12em; font: italic 900 clamp(1.7rem, 8vw, 2.1rem)/1.1 var(--display); text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow-wrap: break-word;
}
.subtitulo { margin-top: 8px; color: var(--silver); }
.ajuda { margin-top: 8px; color: var(--steel); font-size: .95rem; }
.erro { margin-top: 12px; color: var(--danger); }
.pilha { display: grid; gap: 12px; }
.pilha.folga { margin-top: 24px; }
.noscript { padding: 16px; }
.quebra { overflow-wrap: anywhere; }

.botao {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px 24px; border: 0;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold), var(--gold-lo)); color: #140d00;
  font: 800 1rem/1.2 var(--display); letter-spacing: .02em; text-transform: uppercase; text-align: center; text-decoration: none;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.botao:focus-visible { outline: 2px solid #140d00; outline-offset: -5px; }
.botao:disabled { opacity: .55; cursor: default; }
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--gold-hi);
  font: 600 1rem/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.linha-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }

.rotulo { display: block; margin-bottom: 8px; color: var(--silver); font-weight: 600; }
.campo {
  display: block; width: 100%; min-height: 52px; padding: 12px; border: 1px solid var(--rail); border-radius: 0; background: var(--ink);
  color: var(--white); font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.campo::placeholder { color: var(--steel); opacity: 1; }
.campo:focus { border-color: var(--gold); outline: 1px solid var(--gold); outline-offset: 0; }
textarea.campo { min-height: 112px; resize: vertical; }
.codigo { font: 700 1.5rem/1 var(--display); letter-spacing: .25em; text-align: center; }
.com-sufixo { position: relative; }
.com-sufixo .campo { padding-right: 52px; }
.sufixo { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--steel); pointer-events: none; }
.marcar { display: flex; gap: 12px; min-height: 44px; padding: 12px; border: 1px solid var(--rail); background: var(--ink); cursor: pointer; }
.marcar input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--gold); }

/* stepper */
.progresso { position: sticky; top: 0; z-index: 10; margin: -16px -16px 8px; padding: 16px 16px 8px; background: var(--black); }
.progresso-trilho { height: 2px; background: var(--rail); }
.progresso-fio { height: 2px; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi)); transition: width .2s; }
.passo-topo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--steel); font-size: .9rem; }
.passo { padding-top: 8px; }
.opcoes { display: grid; gap: 8px; margin-top: 24px; }
.opcoes.dias { grid-template-columns: repeat(2, 1fr); }
.opcao {
  display: flex; align-items: center; width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--rail); border-radius: 0;
  background: var(--ink); color: var(--white); font: 600 1rem/1.3 var(--body); text-align: left;
}
.opcao[aria-pressed="true"] { border-color: var(--gold); background: var(--plate); color: var(--gold-hi); }
.acoes-passo { margin-top: 24px; }

/* em análise */
.passos { margin-top: 24px; border-top: 1px solid var(--rail); }
.passos li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--rail); color: var(--steel); }
.passos .ponto { flex: none; width: 12px; height: 12px; border: 1px solid var(--steel); transform: skewX(-14deg); }
.passos .feito { color: var(--silver); }
.passos .feito .ponto { border-color: var(--gold); background: var(--gold); }
.passos .agora { color: var(--white); font-weight: 600; }
.passos .agora .ponto { border-color: var(--gold-hi); }

/* cabeçalho do material */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo .logo { width: 112px; }
.topo-info { color: var(--steel); font-size: .85rem; text-align: right; }

/* treino */
.faixa-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 16px; }
.dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 4px 0; border: 1px solid var(--rail);
  border-radius: 0; background: var(--ink); color: var(--steel); font: 700 .78rem/1.2 var(--display);
}
.dia small { font: 600 .72rem/1.2 var(--body); color: var(--steel); }
.dia.tem-treino { color: var(--silver); }
.dia.tem-treino small { color: var(--gold); }
.dia.hoje { border-color: var(--steel); }
.dia[aria-pressed="true"] { border-color: var(--gold); background: var(--plate); color: var(--gold-hi); }
.bloco { margin-top: 24px; }
.bloco-titulo { font: italic 800 1.25rem/1.2 var(--display); text-transform: uppercase; color: var(--white); }
.exercicios { margin-top: 8px; border-top: 1px solid var(--rail); }
.exercicio {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--rail);
  background: none; color: var(--silver); text-align: left;
}
.exercicio-texto { flex: 1; min-width: 0; }
.exercicio-nome { display: block; color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.exercicio-meta { display: block; margin-top: 2px; color: var(--steel); font-size: .92rem; }
.exercicio-tecnica { display: block; margin-top: 2px; color: var(--gold-hi); font-size: .92rem; }
.tocar { flex: none; width: 32px; height: 32px; color: var(--gold); }
.descanso { margin-top: 24px; padding: 16px; border: 1px solid var(--rail); background: var(--ink); }
.orientacoes { margin-top: 8px; display: grid; gap: 4px; }
.orientacoes li { padding-left: 16px; position: relative; }
.orientacoes li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--gold); }

/* dieta */
.refeicao { margin-top: 24px; }
.alimentos { margin-top: 8px; border-top: 1px solid var(--rail); }
.alimento { padding: 12px 0; border-bottom: 1px solid var(--rail); }
.alimento-linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.alimento-nome { color: var(--white); font-weight: 600; }
.alimento-qtd { color: var(--silver); }
.trocas { margin-top: 4px; padding-left: 12px; border-left: 1px solid var(--gold-lo); }
.trocas li { padding: 2px 0; }

/* barra inferior */
.barra {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rail);
  background: var(--ink); padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  position: relative; min-height: var(--barra); border: 0; background: none; color: var(--steel);
  font: 800 .95rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.barra button[aria-current="page"] { color: var(--gold-hi); }
.barra button[aria-current="page"]::before { content: ""; position: absolute; top: -1px; right: 12%; left: 12%; height: 2px; background: var(--fio); }
.barra button:focus-visible { outline-offset: -4px; }

/* proteção: marca-d'água, sem seleção de texto e sem impressão */
.material { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.marca-dagua { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .09; background-repeat: repeat; }
@media print { body { display: none; } }

/* vídeo em tela cheia */
.video { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--black); }
.video-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 16px; border-bottom: 1px solid var(--rail); }
.video-nome { min-width: 0; color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.video-corpo { position: relative; flex: 1; min-height: 0; }
.video-corpo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-aviso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; }
.video-marca { position: absolute; top: 12%; left: 8%; z-index: 2; pointer-events: none; color: var(--white); opacity: .35; font-weight: 600; transition: top .6s, left .6s; }

/* página de privacidade */
.texto h2 { margin-top: 24px; color: var(--white); font: 800 1.1rem/1.3 var(--display); text-transform: uppercase; }
.texto p, .texto ul { margin-top: 8px; }
.texto li { margin-top: 4px; padding-left: 16px; position: relative; }
.texto li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--gold); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }