/* As variáveis de cor mudaram para /tokens.css, que é carregado ANTES deste arquivo em
   toda página. Foram para lá porque o portal da academia também precisa delas, e cópia
   de token vira divergência de marca na primeira troca. Não redeclarar aqui. */

/* Guia de Aparelho — sistema visual.
   Escuro de propósito: lido no salão, celular na mão, e tela clara em academia vira espelho.
   Cores de texto validadas em contraste (mínimo 4.5:1) antes de entrar aqui. */

* { box-sizing: border-box; }

/* O menu fechado fica fora da tela pela direita. Sem isto ele cria barra de
   rolagem horizontal no celular: à esquerda o navegador ignora o transbordo,
   à direita não. clip não vira contêiner de rolagem, então o sticky continua. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--fundo); color: var(--texto);
  /* Sem overflow-x aqui, de propósito.
     Ele existia para conter o menu fechado, que fica fora da tela pela direita. Só que
     o menu é position:fixed, e elemento fixo não entra na conta de rolagem do documento:
     medido, scrollWidth e clientWidth batem com ou sem o overflow.
     Em troca, ele cobrava caro. O par hidden/clip era para o Safari antigo cair no hidden,
     e overflow:hidden no body transforma o body em contêiner de rolagem — o position:sticky
     do cabeçalho passa a se referenciar a ele em vez da viewport. Resultado no iPhone: o
     cabeçalho sumia durante a rolagem e voltava deslocado, que é a tremida que apareceu no
     vídeo. Verificado nas 13 larguras do auditor: nenhuma rolagem lateral sem ele. */
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* acessibilidade: foco sempre visível, e quem não quer animação não recebe */
:focus-visible { outline: 3px solid var(--acento-texto); outline-offset: 3px; border-radius: 6px; }
/* Dentro da barra vermelha o anel padrão não serve: vermelho claro sobre vermelho dá
   2,21:1, abaixo dos 3:1 que um indicador de foco precisa. Quem navega por teclado
   perde de vista onde está justamente no topo da página. Branco resolve com folga. */
.topo-movel :focus-visible,
.rodape :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.pula {
  background: var(--acento); border-radius: 0 0 10px 0; color: #fff; font-weight: 700;
  left: 0; padding: 12px 18px; position: absolute; top: -100px; z-index: 100; text-decoration: none;
}
.pula:focus { top: 0; }
.oculto-visual {
  clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

/* ---------------------------------------------------- estrutura ---------- */

.painel-lateral {
  background: #06122c; border-left: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 16px calc(24px + env(safe-area-inset-bottom));
  position: fixed; inset: 0 0 0 auto; width: var(--lateral); z-index: 60;
  transform: translateX(100%); transition: transform .25s ease; visibility: hidden;
}
.painel-lateral.aberto { transform: none; visibility: visible; }

.veu {
  background: rgba(2,7,20,.72); inset: 0; opacity: 0; pointer-events: none;
  position: fixed; transition: opacity .25s ease; z-index: 55;
}
.veu.aberto { opacity: 1; pointer-events: auto; }

.conteudo { padding-bottom: 40px; }
.faixa { margin: 0 auto; max-width: var(--coluna); padding: 0 18px; }

/* topo mobile */
.topo-movel {
  align-items: center; background: var(--barra); display: flex; gap: 12px;
  height: calc(var(--topo) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0 18px;
  position: sticky; top: 0; z-index: 40;
}
.topo-movel .menu {
  align-items: center; background: none; border: 0; border-radius: 11px; color: #fff;
  cursor: pointer; display: flex; flex: none; height: 46px; justify-content: center;
  margin-right: -8px; padding: 0; width: 46px;
}
.topo-movel .menu svg { width: 27px; height: 27px; }
.topo-movel .logo-topo { display: block; margin-right: auto; }
.topo-movel .logo-topo img { display: block; height: 40px; width: auto; max-width: 58vw; object-fit: contain; }


/* ---------------------------------------------------- sidebar conteúdo --- */

.marca-lateral { display: block; margin: 2px 6px 18px; }
.marca-lateral img { display: block; height: auto; width: 100%; max-width: 156px; }
.marca-lateral .sub { color: var(--texto-fraco); font-size: 12px; margin-top: 8px; }

.nav-titulo {
  color: var(--texto-fraco); font-size: 11px; font-weight: 800; letter-spacing: .15em;
  margin: 18px 6px 8px; text-transform: uppercase;
}
.nav-item {
  align-items: center; border-radius: 11px; color: var(--texto-suave); display: flex; gap: 11px;
  font-size: 15.5px; font-weight: 600; min-height: 46px; padding: 0 12px; text-decoration: none;
}
.nav-item .conta { color: var(--texto-fraco); font-size: 12.5px; margin-left: auto; }
.nav-item[aria-current="page"] { background: var(--superficie-alta); color: var(--texto); }
.nav-item[aria-current="page"] .conta { color: var(--texto-suave); }
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--texto); }
.nav-ponto { background: currentColor; border-radius: 50%; flex: none; height: 7px; margin: 0 5px; opacity: .55; width: 7px; }
.nav-item .ic { display: flex; flex: none; height: 17px; width: 17px; align-items: center; justify-content: center; }
.nav-item .ic svg { height: 100%; width: 100%; }
.nav-item.destaque { color: var(--texto); font-weight: 700; }

.nav-sep { border-top: 1px solid var(--borda); margin: 16px 6px; }

/* ---------------------------------------------------- capa --------------- */

.capa { padding: 28px 0 4px; }
.capa .marcador {
  align-items: center; color: var(--acento-texto); display: flex; font-size: 12px; font-weight: 800;
  gap: 8px; letter-spacing: .16em; margin: 0 0 10px; text-transform: uppercase;
}
.capa .marcador::before { background: var(--acento); content: ""; height: 2px; width: 20px; }
.capa h1 { font-size: clamp(34px,10vw,52px); font-weight: 800; letter-spacing: -.035em; line-height: .95; margin: 0; }
.capa .linha { color: var(--texto-suave); font-size: 15.5px; margin: 12px 0 0; max-width: 54ch; }

.trilha { color: var(--texto-fraco); font-size: 13px; margin: 0 0 14px; }
.trilha a { text-decoration: none; }
.trilha a:hover { color: var(--texto); }
.trilha span { margin: 0 6px; opacity: .5; }

/* ---------------------------------------------------- busca -------------- */

.busca { margin: 22px 0 6px; position: relative; }
.busca input {
  appearance: none; background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 13px; color: var(--texto); font-family: inherit; font-size: 16px;
  min-height: 52px; padding: 0 16px 0 46px; width: 100%;
}
.busca input::placeholder { color: var(--texto-fraco); }
.busca input:focus { border-color: var(--acento-texto); outline: none; }
.busca > svg { left: 16px; position: absolute; top: 26px; transform: translateY(-50%); width: 18px; opacity: .6; }
.busca .vazio { color: var(--texto-suave); display: none; font-size: 15px; padding: 14px 2px; }
.painel-lateral .busca { margin: 0 0 10px; }
.painel-lateral .busca input { font-size: 16px; min-height: 46px; padding-left: 42px; }
.painel-lateral .busca > svg { left: 14px; top: 23px; width: 16px; }

/* ---------------------------------------------------- grades ------------- */

.grade { display: grid; gap: 11px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 16px 0 0; }
.grade.lista { grid-template-columns: minmax(0, 1fr); }
/* 1fr sozinho é minmax(auto,1fr): o auto respeita o conteúdo e o card cresce
   além da tela. minmax(0,1fr) + min-width:0 é o que segura a coluna. */
.item { min-width: 0; }

.cat {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  display: block; padding: 17px; text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.cat:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.cat .nome { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cat .quantos { color: var(--texto-suave); display: block; font-size: 13.5px; margin-top: 4px; }
.cat .quantos b { color: var(--texto); font-weight: 700; }
.cat .unid { color: var(--texto-fraco); display: block; font-size: 12.5px; margin-top: 2px; }
.cat .chamada { color: var(--texto-fraco); font-size: 12.5px; margin-top: 9px; }

.item {
  align-items: center; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); display: flex; gap: 14px; padding: 12px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.item:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.grade.lista .item { margin-bottom: 0; }
.item .foto {
  align-items: center; background: linear-gradient(150deg,var(--superficie-alta),#071634);
  border: 1px solid var(--borda); border-radius: 11px; display: flex; flex: none;
  height: 78px; justify-content: center; overflow: hidden; position: relative; width: 94px;
}
.item .foto svg { height: 100%; width: 100%; }
.item .foto.desenho { background: linear-gradient(155deg,#14274d,#0a1830); }
.item .foto .selo {
  background: rgba(0,0,0,.6); border-radius: 4px; bottom: 4px; color: #d5deee; font-size: 7.5px;
  font-weight: 700; left: 4px; letter-spacing: .06em; padding: 2px 5px; position: absolute;
}
.item .info { min-width: 0; overflow: hidden; }
.item .info h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.item .info .apelido { color: var(--texto-suave); font-size: 13px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .info .un { color: var(--texto-fraco); font-size: 12px; margin-top: 5px; }
.item .seta { color: var(--texto-fraco); font-size: 22px; margin-left: auto; padding-left: 6px; }

/* ---------------------------------------------------- abas --------------- */

.abas {
  background: rgba(4,13,34,.94); backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borda); margin-bottom: 4px; padding: 10px 0;
  position: sticky; top: calc(var(--topo) + env(safe-area-inset-top)); z-index: 30;
}
/* As abas rolam de lado quando o aparelho tem muitos exercícios, mas a barra de
   rolagem em cima do fundo escuro vira um risco cinza atravessado. Some com ela e
   deixa o gesto: quem arrasta descobre, quem não arrasta não perde nada porque a
   última aba fica meio visível na borda. */
.abas .interno { display: flex; gap: 7px; margin: 0 auto; max-width: var(--coluna);
  overflow-x: auto; padding: 0 18px; scrollbar-width: none; -ms-overflow-style: none; }
.abas .interno::-webkit-scrollbar { display: none; }
@media (max-width: 400px) { .abas button { font-size: 14px; padding: 6px 11px; } }
.abas button {
  -webkit-tap-highlight-color: transparent; appearance: none; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 12px; color: var(--texto-suave); cursor: pointer;
  flex: 1 0 auto; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
  min-height: 46px; padding: 6px 16px; white-space: nowrap;
}
.abas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ---------------------------------------------------- exercício ---------- */

.painel[hidden] { display: none; }
.painel { padding: 24px 0 8px; }
.painel > h2 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; }
.painel > .resumo { color: var(--texto-suave); font-size: 15.5px; margin: 0 0 20px; }

.player {
  aspect-ratio: 16/9; background: #000; border: 1px solid var(--borda); border-radius: var(--raio);
  cursor: pointer; display: block; margin: 0 0 24px; overflow: hidden; padding: 0; position: relative; width: 100%;
}
.player img { height: 100%; left: 0; object-fit: cover; opacity: .74; position: absolute; top: 0; width: 100%; }
.player iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.player .botao {
  align-items: center; background: var(--acento); border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%;
  transform: translate(-50%,-50%); transition: transform .18s ease; width: 64px;
}
.player:hover .botao { transform: translate(-50%,-50%) scale(1.07); }
.player .botao::after {
  border-bottom: 11px solid transparent; border-left: 19px solid #fff; border-top: 11px solid transparent;
  content: ""; margin-left: 5px;
}
.player .legenda {
  bottom: 12px; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; left: 14px;
  position: absolute; text-shadow: 0 1px 8px rgba(0,0,0,.95);
}
.sem-video {
  align-items: center; aspect-ratio: 16/9; background: linear-gradient(150deg,var(--superficie-alta),#071634);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--texto-suave);
  display: flex; flex-direction: column; font-size: 14px; gap: 5px; justify-content: center; margin: 0 0 24px; text-align: center;
}
.sem-video b { color: var(--texto); font-size: 15px; }

.rotulo {
  color: var(--texto-suave); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  margin: 0 0 13px; text-transform: uppercase;
}
.passos { counter-reset: p; list-style: none; margin: 0 0 26px; padding: 0; }
.passos li { counter-increment: p; padding: 0 0 15px 42px; position: relative; }
.passos li:last-child { padding-bottom: 0; }
.passos li::before {
  background: var(--superficie-alta); border: 1px solid var(--borda-forte); border-radius: 9px;
  color: var(--texto); content: counter(p); font-size: 13px; font-weight: 800; height: 29px;
  left: 0; line-height: 27px; position: absolute; text-align: center; top: 0; width: 29px;
}
.passos strong { color: #fff; }

.musculos { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0 0 26px; padding: 0; }
.musculos li {
  align-items: baseline; display: flex; flex-wrap: wrap; gap: 3px 9px; padding: 5px 0 5px 17px;
  position: relative;
}
.musculos li::before {
  background: var(--acento-texto); border-radius: 50%; content: ""; height: 8px;
  left: 0; position: absolute; top: 9px; width: 8px;
}
.musculos li + li::before { background: var(--texto-fraco); opacity: .55; }
.musculos .qual { color: var(--texto); font-size: 15px; font-weight: 700; }
.musculos li + li .qual { color: var(--texto-suave); font-weight: 600; }
.musculos .grau { color: var(--texto-fraco); font-size: 13.5px; }

.erro {
  /* rgba do --acento e do --acento-texto atuais; antes vinham do #cf0d13, que era
     o vermelho amostrado do PNG velho da logo e não existe mais em lugar nenhum. */
  background: linear-gradient(180deg, rgba(209,10,21,.15), rgba(209,10,21,.05));
  border: 1px solid rgba(255,81,70,.35); border-radius: var(--raio); margin: 0 0 24px; padding: 18px;
}
.erro p { margin: 0; }
.erro p + p { color: var(--texto-suave); font-size: 15px; margin-top: 9px; }
.erro .titulo {
  color: var(--acento-texto); font-size: 12px; font-weight: 800; letter-spacing: .14em;
  margin-bottom: 9px; text-transform: uppercase;
}
.variacao { border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 15px; margin: 0 0 24px; padding-top: 18px; }
.variacao strong { color: var(--texto); display: block; font-size: 16px; margin-bottom: 5px; }

.professor {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  margin: 26px 0 0; padding: 20px;
}
.professor strong { display: block; margin-bottom: 7px; }
.professor p { color: var(--texto-suave); font-size: 15px; margin: 0; }
/* Verde do WhatsApp de verdade (#25d366), não o teal apagado que estava aqui.
   O antigo (#128c7e sobre branco) dava 4,14:1, abaixo do mínimo, e num fundo escuro
   ainda parecia desligado — botão apagado faz o preço ao lado parecer barato.
   Verde vivo pede texto escuro: assim vai a 8,4:1 e ainda salta 8,6:1 do card. */
.chamar {
  align-items: center; background: #25d366; border-radius: 11px; color: #04240f; display: inline-flex;
  font-size: 15.5px; font-weight: 800; gap: 9px; min-height: 48px; padding: 0 18px; text-decoration: none;
}
.chamar:hover { background: #2ee06e; }
.chamar:active { background: #1fbe5a; }
.chamar svg { width: 19px; height: 19px; flex: none; }
.professor .chamar { margin-top: 15px; }

/* ---------------------------------------------------- publicidade -------- */
/* hierarquia = tamanho da logo: master 46, categoria 36, aparelho 28 */

.anuncio { border-radius: var(--raio); display: block; text-decoration: none; transition: border-color .15s ease; }
.anuncio:hover { border-color: var(--borda-forte); }
.anuncio .marca { align-items: center; display: flex; gap: 13px; }
.anuncio .logo { border-radius: 10px; flex: none; }
.anuncio .nome { font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.anuncio .nome span { display: block; font-weight: 500; opacity: .74; }
.anuncio .tagline { color: var(--texto-suave); margin: 11px 0 0; }

.anuncio.master { background: var(--superficie); border: 1px solid var(--borda-forte); padding: 19px; }
.anuncio.master .logo { height: 46px; width: 46px; }
.anuncio.master .nome { font-size: 20px; }
.anuncio.master .nome span { font-size: 13px; }
.anuncio.master .tagline { font-size: 14.5px; }

.anuncio.categoria { background: var(--superficie); border: 1px solid var(--borda); padding: 16px; }
.anuncio.categoria .logo { height: 36px; width: 36px; }
.anuncio.categoria .nome { font-size: 17px; }
.anuncio.categoria .nome span { font-size: 12px; }
.anuncio.categoria .tagline { font-size: 13.5px; margin-top: 9px; }

.anuncio.aparelho { background: rgba(255,255,255,.03); border: 1px solid var(--borda); padding: 13px; }
.anuncio.aparelho .logo { height: 28px; width: 28px; }
.anuncio.aparelho .nome { font-size: 15px; }
.anuncio.aparelho .nome span { display: inline; font-size: 13px; }
.anuncio.aparelho .tagline { font-size: 12.5px; margin-top: 7px; }

.anuncio.vago {
  align-items: center; background: transparent; border: 1px dashed var(--borda-forte);
  display: flex; gap: 13px; padding: 16px;
}
.anuncio.vago .mais {
  align-items: center; border: 1.5px dashed var(--borda-forte); border-radius: 10px; color: var(--texto-fraco);
  display: flex; flex: none; font-size: 22px; height: 40px; justify-content: center; width: 40px;
}
.anuncio.vago .chamada { font-size: 15.5px; font-weight: 700; }
.anuncio.vago .sub { color: var(--texto-suave); font-size: 13px; margin-top: 3px; }

.bloco-anuncio { margin: 26px 0; }
.bloco-anuncio > .cota {
  color: var(--texto-fraco); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  margin-bottom: 8px; text-transform: uppercase;
}
.rodizio > .anuncio[hidden] { display: none; }

/* ---------------------------------------------------- ações -------------- */

.acoes { display: grid; gap: 11px; margin: 30px 0 0; }
.acao {
  align-items: center; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); display: flex; gap: 14px; min-width: 0; padding: 16px;
  text-decoration: none; transition: border-color .15s ease;
}
.acao .txt { min-width: 0; }
.acao .txt b, .acao .txt span { overflow-wrap: anywhere; }
.acao:hover { border-color: var(--borda-forte); }
.acao .icone { align-items: center; border-radius: 11px; display: flex; flex: none; height: 42px; justify-content: center; width: 42px; }
.acao .txt b { display: block; font-size: 16px; }
.acao .txt span { color: var(--texto-suave); font-size: 13.5px; }
.acao .seta { color: var(--texto-fraco); font-size: 22px; margin-left: auto; }
.estrelas { display: flex; gap: 3px; margin-bottom: 3px; }
.estrelas svg { width: 17px; height: 17px; display: block; }
.acao .txt .apoio { color: var(--texto-suave); display: block; font-size: 13.5px; }

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

.cotas { display: grid; gap: 12px; margin: 22px 0 0; }
.cota-card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px;
}
.cota-card.destaque { border-color: rgba(255,81,70,.45); }
.cota-card .topo-cota { align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.cota-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cota-card .preco { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.cota-card .preco small { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.cota-card p { color: var(--texto-suave); font-size: 14.5px; margin: 10px 0 0; }
.cota-card .quantas {
  color: var(--acento-texto); font-size: 12px; font-weight: 800; letter-spacing: .1em;
  margin-top: 12px; text-transform: uppercase;
}

/* ---------------------------------------------------- rodapé ------------- */
/* fundo da marca em toda a largura: fecha a página e dispensa cartão atrás da logo */

.rodape { background: var(--barra); margin-top: 56px; padding: 40px 0 calc(34px + env(safe-area-inset-bottom)); }
.rodape .marca-rodape { display: block; margin: 0 0 24px; padding: 0; width: fit-content; }
.rodape .marca-rodape img { display: block; height: 38px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }

.rodape .colunas { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 26px; }
.rodape .rot-rod {
  align-items: center; color: var(--barra-fraco); display: flex; font-size: 11px; font-weight: 800; gap: 7px;
  letter-spacing: .14em; margin: 0 0 9px; text-transform: uppercase;
}
.rodape .rot-rod svg { height: 14px; width: 14px; opacity: .7; stroke: currentColor; }
.rodape p { color: var(--barra-texto); font-size: 14.5px; line-height: 1.6; margin: 0 0 3px; }
.link-mapa { display: inline-block; padding: 3px 0; text-decoration: none; }
.link-mapa:hover { text-decoration: underline; }
.ir-mapa {
  align-items: center; color: var(--barra-fraco); display: flex; font-size: 12.5px; font-weight: 600;
  gap: 5px; margin-top: 4px;
}
.ir-mapa svg { flex: none; height: 12px; width: 12px; }
.rodape a { color: var(--barra-texto); }
.rodape .hora { display: flex; gap: 10px; justify-content: space-between; max-width: 260px; }
.rodape .hora span { color: var(--barra-fraco); font-size: 14px; }
.rodape .hora b { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }

.rodape .links-rod {
  border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 22px 40px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-top: 24px;
}
.rodape .grupo-links { display: flex; flex-direction: column; gap: 7px; }
.rodape .links-rod a { color: var(--barra-texto); font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 26px; }
.rodape .links-rod a:hover { color: #fff; text-decoration: underline; }

.rodape .feito-por {
  align-items: center; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap;
  gap: 6px 10px; margin-top: 24px; padding-top: 22px;
}
.rodape .feito-por span { color: var(--barra-fraco); font-size: 13px; }
.rodape .feito-por .utly {
  align-items: center; color: var(--barra-texto); display: inline-flex; font-size: 13px; font-weight: 400;
  letter-spacing: 0; min-height: 26px; text-decoration: none;
}
.rodape .feito-por .utly b { color: #fff; font-weight: 700; }
.rodape .feito-por .utly:hover { text-decoration: underline; }

.rodape .aviso-demo {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  color: var(--barra-fraco); font-size: 12.5px; line-height: 1.5; margin-top: 22px; padding: 12px 14px;
}

/* ---------------------------------------------------- desktop ------------ */

@media (min-width: 1000px) {
  .topo-movel { display: none; }
  .painel-lateral { transform: none; visibility: visible; }
  .veu { display: none; }
  .conteudo { margin-left: var(--lateral); }
  .painel-lateral { border-left: 0; border-right: 1px solid var(--borda); inset: 0 auto 0 0; }
  .faixa { padding: 0 40px; }
  .abas { top: 0; }
  .abas .interno { padding: 0 40px; }
  .capa { padding: 40px 0 4px; }
  .capa h1 { font-size: clamp(40px,4vw,54px); }
  .grade { gap: 13px; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); }
  .rodape { margin-top: 68px; padding: 52px 0 44px; }
  .rodape .colunas { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* na tela larga a página do aparelho usa duas colunas em vez de esticar a linha */
@media (min-width: 1180px) {
  :root { --coluna: 1000px; }
  .painel { display: grid; gap: 0 38px; grid-template-columns: minmax(0,1.5fr) minmax(290px,1fr); align-items: start; }
  .painel > h2, .painel > .resumo { grid-column: 1 / -1; }
  .painel .principal { grid-column: 1; }
  .painel .lateral { grid-column: 2; position: sticky; top: 92px; }
  .painel .lateral .rotulo:first-child { margin-top: 0; }
  .capa .linha { max-width: 62ch; }
}

/* ------------------------------------------------ correções de exibição --
   Os cards usam <span> por dentro (link não pode conter <div> em HTML válido),
   então cada pedaço precisa declarar que é bloco. */
.cat .nome, .cat .quantos, .cat .chamada { display: block; }
.item .info { display: block; min-width: 0; }
.item .info .apelido, .item .info .un { display: block; }
.anuncio.vago .chamada, .anuncio.vago .sub { display: block; }

/* A logo agora é SVG com fundo transparente, na versão de fundo escuro. Antes ela
   vinha num PNG com o azul embutido, e o rodapé precisava de um cartão azul por baixo
   para o retângulo não aparecer solto. Não precisa mais: ela assenta direto no fundo. */
.marca-lateral { display: block; margin: 0 0 26px; padding: 0 4px; text-decoration: none; }

.rodape .marca-rodape { display: inline-block; }
.topo-movel .logo-topo { display: block; }
.anuncio.aparelho .nome span { margin-left: 5px; }

/* ------------------------------------------------ foto real do aparelho --
   Serve para reconhecer, não para decorar. Quem chega pelo QR está de pé na
   frente da máquina, então a foto confirma e sai da frente: fica ao lado do
   título, no espaço que já estava vazio, sem empurrar o vídeo para baixo. */
.item .foto.tem-foto { padding: 0; }
.item .foto img { display: block; height: 100%; object-fit: cover; width: 100%; }

.capa.com-foto { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0,1fr) 96px; }
.capa.com-foto .texto { min-width: 0; }
.retrato { margin: 0; }
.retrato picture { display: block; }
.retrato img {
  border: 1px solid var(--borda-forte); border-radius: 12px; display: block;
  height: 128px; object-fit: cover; width: 96px;
}
.retrato figcaption {
  color: var(--texto-fraco); font-size: 10.5px; letter-spacing: .04em;
  line-height: 1.3; margin-top: 7px; text-align: center; text-transform: uppercase;
}

@media (min-width: 1000px) {
  .capa.com-foto { gap: 30px; grid-template-columns: minmax(0,1fr) 168px; }
  .retrato img { height: 224px; width: 168px; }
  .retrato figcaption { font-size: 11px; }
}

/* ------------------------------------------------ anatomia --------------
   Substitui a frase genérica do tipo "empurrar e fechar os braços": mostrar
   o músculo aceso comunica na hora e não depende de ler. */
.cat { text-align: center; }
.cat .corpo { display: block; height: 112px; margin: 2px auto 12px; }
.cat .corpo svg { display: block; height: 100%; width: auto; margin: 0 auto; }
.cat .musc { color: var(--texto-fraco); display: block; font-size: 12.5px; margin-top: 7px; }

.sentir { align-items: center; display: flex; gap: 18px; margin: 0 0 26px; }
.sentir .corpo-fig { flex: none; height: 150px; }
.sentir .corpo-fig svg { display: block; height: 100%; width: auto; }
.sentir .musculos { margin: 0; }

@media (min-width: 1180px) {
  .sentir { align-items: center; flex-direction: column; gap: 16px; text-align: center; }
  .sentir .corpo-fig { height: 180px; }
  .sentir .musculos { align-items: center; }
}

/* ------------------------------------------------ cotas de patrocínio ---- */
.cota-card .topo-cota { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; }
.cota-card .alcance {
  color: var(--acento-texto); display: block; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; margin-top: 5px; text-transform: uppercase;
}
.cota-card .pe-cota {
  align-items: center; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: space-between; margin-top: 18px; padding-top: 16px;
}
.cota-card .quantas { color: var(--texto-fraco); margin: 0; }
.cota-card .chamar { margin-top: 0; }

/* ------------------------------------------------ voltar um nível --------
   A pessoa chega direto pelo QR, sem histórico. history.back() levaria ela
   para fora do site, então a seta aponta sempre para o nível de cima. */
.linha-volta { align-items: center; display: flex; gap: 10px; margin: 0 0 14px; }
.linha-volta .trilha { margin: 0; }
.voltar-seta {
  align-items: center; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; color: var(--texto-suave); display: inline-flex; flex: none;
  height: 38px; justify-content: center; text-decoration: none; width: 38px;
  transition: border-color .15s ease, color .15s ease;
}
.voltar-seta svg { height: 19px; width: 19px; }
.voltar-seta:hover { border-color: var(--borda-forte); color: var(--texto); }
.voltar-seta:active { background: var(--superficie-alta); }

/* ------------------------------------------------ instalar no celular ----
   Android instala em um toque pela API; o iPhone não tem API nenhuma, então
   lá o caminho é ensinar. Mostrar só o que funciona na plataforma da pessoa
   evita o pior caso: um botão que não faz nada. */
.instalar-btn {
  align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; color: #fff; cursor: pointer; display: flex; font-family: inherit; gap: 15px;
  margin: 26px 0 6px; min-height: 74px; padding: 16px 18px; text-align: left; width: 100%;
}
.instalar-btn:hover { background: rgba(255,255,255,.11); }
.instalar-btn > svg { height: 22px; width: 22px; flex: none; }
.instalar-btn b { display: block; font-size: 15.5px; }
.instalar-btn small { color: var(--barra-fraco); display: block; font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.instalar-btn .seta { color: var(--barra-fraco); font-size: 22px; margin-left: auto; }

.folha {
  align-items: flex-end; background: rgba(2,7,20,.72); display: flex; inset: 0;
  justify-content: center; padding: 0; position: fixed; z-index: 90;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.folha[hidden] { display: none; }
.folha-in {
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 20px 20px 0 0;
  max-height: 88dvh; max-width: 520px; overflow-y: auto; padding: 26px 22px calc(30px + env(safe-area-inset-bottom));
  position: relative; width: 100%;
}
.folha-x {
  background: none; border: 0; color: var(--texto-suave); cursor: pointer; font-size: 30px;
  line-height: 1; padding: 4px 10px; position: absolute; right: 10px; top: 12px;
}
.folha h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; padding-right: 40px; }
.folha p { color: var(--texto-suave); font-size: 15.5px; margin: 0 0 18px; }
.folha .obs { color: var(--texto-fraco); font-size: 13.5px; }
.folha .ok { color: var(--texto); font-size: 17px; font-weight: 700; }
.instalar-agora { width: 100%; justify-content: center; background: var(--acento); }
.instalar-agora:hover { background: var(--acento-forte); }

.passos-ios { counter-reset: i; list-style: none; margin: 0 0 18px; padding: 0; }
.passos-ios li {
  align-items: flex-start; color: var(--texto); display: flex; font-size: 15px; gap: 12px;
  line-height: 1.45; padding: 11px 0;
}
.passos-ios li + li { border-top: 1px solid var(--borda); }
.ic-ios {
  align-items: center; background: var(--superficie-alta); border: 1px solid var(--borda);
  border-radius: 10px; color: var(--texto-suave); display: flex; flex: none; height: 38px;
  justify-content: center; width: 38px;
}
.ic-ios svg { height: 19px; width: 19px; }
.txt-ios { flex: 1; min-width: 0; }
.txt-ios b { color: #fff; }

.folha .passo-android, .folha .passo-androidmanual, .folha .passo-ios,
.folha .passo-manual, .folha .passo-pronto { display: none; }
.folha[data-modo="android"] .passo-android { display: block; }
.folha[data-modo="androidmanual"] .passo-androidmanual { display: block; }
.folha[data-modo="ios"] .passo-ios { display: block; }
.folha[data-modo="manual"] .passo-manual { display: block; }
.folha[data-modo="pronto"] .passo-pronto { display: block; }

@media (min-width: 620px) {
  .folha { align-items: center; padding: 20px; }
  .folha-in { border-radius: 20px; }
}

/* ------------------------------------------------ planos da academia -----
   Página opcional: sai inteira se a academia não quiser mostrar preço. */
.planos-lista { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 22px; }
.plano-card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px;
}
.plano-card.destaque { border-color: rgba(255,81,70,.45); background: linear-gradient(180deg, rgba(209,10,21,.09), var(--superficie)); }
.topo-plano { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.plano-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.plano-card .obs-plano { color: var(--texto-suave); display: block; font-size: 13.5px; line-height: 1.45; margin-top: 6px; max-width: 34ch; }
.plano-card .valor {
  color: var(--texto); font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; text-align: right; white-space: nowrap;
}
.plano-card .valor small { color: var(--texto-suave); font-size: 14px; font-weight: 600; margin-right: 2px; }
.plano-card .valor span { color: var(--texto-fraco); display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; margin-top: 6px; }
/* margin-bottom aqui em vez de margin-top no botão: o botão usa margin-top:auto para
   alinhar o pé de todos os cards da fileira, e auto engole qualquer margem que eu
   pusesse nele. A garantia de respiro precisa vir de cima. */
.por-treino {
  border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 13.5px;
  margin-top: 18px; margin-bottom: 18px; padding-top: 14px;
}
.por-treino b { color: var(--texto); }
.plano-card .chamar { width: 100%; justify-content: center; }
.plano-card { display: flex; flex-direction: column; }
.plano-card .chamar { margin-top: auto; }
@media (min-width: 820px) { .planos-lista { grid-template-columns: 1fr 1fr; } }

/* aponta para o botão de compartilhar, que no iPhone fica na barra de baixo.
   É o mais perto de "instalar sozinho" que a Apple deixa fazer. */
.aponta-ios {
  align-items: center; color: var(--acento-texto); display: flex; flex-direction: column;
  gap: 6px; margin-top: 6px; padding-top: 4px;
}
.aponta-ios span { font-size: 13px; font-weight: 700; }
.aponta-ios svg { height: 30px; width: 30px; animation: desce 1.4s ease-in-out infinite; }
@keyframes desce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .aponta-ios svg { animation: none; opacity: .9; } }

/* ------------------------------------------- ficha de segurança e manutenção --
   Duas leituras na mesma peça. O bloco de cima é do aluno e some em cinco
   segundos: quatro itens, letra grande, sem tabela. O de baixo é da academia e
   do fiscal, e aí sim vira tabela, porque o que se pede ali é registro com data.
   O roteiro de inspeção sanitária cobra equipamento em boas condições de
   conservação, livre de ferrugem e rachadura, e que o estabelecimento mantenha
   os documentos que atestam isso. É esse documento que o bloco de baixo é. */

.ficha { border-top: 1px solid var(--borda); margin-top: 34px; padding-top: 28px; }
.ficha h2 {
  align-items: center; display: flex; font-size: 21px; font-weight: 800;
  gap: 10px; letter-spacing: -.02em; margin: 0 0 20px;
}
.ficha h2 svg { color: var(--acento-texto); height: 22px; width: 22px; flex: none; }

.rot-ficha {
  color: var(--texto-fraco); font-size: 11px; font-weight: 800; letter-spacing: .14em;
  margin: 0 0 12px; text-transform: uppercase;
}

/* --- o que o aluno confere --- */
.bloco-aluno {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; margin-bottom: 22px;
}
.checa { list-style: none; margin: 0; padding: 0; }
.checa li { padding: 0 0 14px 30px; position: relative; }
.checa li:last-child { padding-bottom: 0; }
/* quadradinho de conferência: o gesto de "olhei" sem precisar de texto */
.checa li::before {
  border: 2px solid var(--acento-texto); border-radius: 5px; content: "";
  height: 17px; left: 0; position: absolute; top: 3px; width: 17px;
}
.checa b { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.checa span { color: var(--texto-suave); display: block; font-size: 14px; line-height: 1.5; margin-top: 3px; }
.ficha .alerta {
  background: rgba(209,10,21,.12); border: 1px solid rgba(255,81,70,.35);
  border-radius: 11px; color: var(--texto); font-size: 14.5px; line-height: 1.5;
  margin: 16px 0 0; padding: 12px 14px;
}
.ficha .alerta b { color: var(--acento-texto); }

/* --- o que a academia registra --- */
.bloco-academia {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px;
}
.ficha table { border-collapse: collapse; font-size: 14px; width: 100%; }
.ficha th {
  border-bottom: 1px solid var(--borda-forte); color: var(--texto-fraco); font-size: 11px;
  font-weight: 800; letter-spacing: .1em; padding: 0 10px 8px 0; text-align: left;
  text-transform: uppercase;
}
.ficha td { border-bottom: 1px solid var(--borda); padding: 11px 10px 11px 0; vertical-align: top; }
.ficha tr:last-child td { border-bottom: 0; }
.ficha .criterio { color: var(--texto-suave); }
.ficha .data { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* a periodicidade é etiqueta, não texto solto: o olho acha o "diária" na varredura */
.quando {
  border-radius: 999px; display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 9px; white-space: nowrap;
}
.quando.diária    { background: rgba(255,81,70,.16);  color: var(--acento-texto); }
.quando.semanal   { background: rgba(251,191,36,.14); color: #f2c14e; }
.quando.mensal    { background: rgba(155,172,202,.14); color: var(--texto-suave); }
.quando.trimestral { background: rgba(155,172,202,.10); color: var(--texto-fraco); }

.ultima { color: var(--texto-suave); font-size: 14.5px; margin: 0 0 14px; }
.ultima b { color: var(--texto); }
.ultima.vazio {
  background: rgba(255,255,255,.03); border: 1px dashed var(--borda-forte);
  border-radius: 11px; margin: 0; padding: 14px;
}

.tecnicos { display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.dt span { color: var(--texto-fraco); display: block; font-size: 11px; font-weight: 800;
           letter-spacing: .1em; text-transform: uppercase; }
.dt b { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; }

@media (max-width: 560px) {
  /* Tabela em 375px vira scroll lateral ou texto espremido. Cada linha vira bloco:
     o rótulo da coluna reaparece como etiqueta antes do valor. */
  .ficha .insp, .ficha .insp tr, .ficha .insp td { display: block; width: 100%; }
  .ficha .insp tr:first-child { display: none; }
  .ficha .insp tr { border-bottom: 1px solid var(--borda); padding: 13px 0; }
  .ficha .insp tr:last-child { border-bottom: 0; }
  .ficha .insp td { border: 0; padding: 0; }
  .ficha .insp td:first-child { font-weight: 700; }
  .ficha .insp td:nth-child(2) { margin: 6px 0; }
  .ficha .insp td.criterio { font-size: 13.5px; }
}

/* Atalho para a ficha, na capa do aparelho. Fica logo abaixo do nome porque quem
   chega pela placa está de pé na frente da máquina: a pergunta "posso usar isso?"
   vem antes de "como faço?", e a resposta não pode estar a três rolagens dali. */
.ir-ficha {
  align-items: center; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 12px; color: var(--texto); display: inline-flex; gap: 11px;
  margin-top: 16px; min-height: 52px; padding: 8px 14px; text-decoration: none;
  transition: border-color .15s ease;
}
.ir-ficha:hover { border-color: var(--borda-forte); }
.ir-ficha > svg { color: var(--acento-texto); flex: none; height: 21px; width: 21px; }
.ir-ficha span { display: block; font-size: 13px; color: var(--texto-suave); line-height: 1.35; }
.ir-ficha b { display: block; font-size: 15px; color: var(--texto); font-weight: 700; }
.ir-ficha i { color: var(--texto-fraco); font-size: 20px; font-style: normal; margin-left: 4px; }

/* o atalho vira faixa larga quando está no fim de um bloco, não ao lado do título */
.ir-ficha.larga { display: flex; margin-top: 14px; width: 100%; }
.ir-ficha.larga i { margin-left: auto; }

/* o item de conferência é botão: alvo de toque inteiro, não só o quadradinho */
.checa-item {
  background: none; border: 0; color: inherit; cursor: pointer; display: block;
  font: inherit; padding: 0; text-align: left; width: 100%;
}
.checa li { padding-left: 0; }
.checa-item { padding: 0 0 0 30px; position: relative; }
.checa li::before { content: none; }
.checa-item::before {
  border: 2px solid var(--acento-texto); border-radius: 5px; content: "";
  height: 17px; left: 0; position: absolute; top: 3px; width: 17px;
  transition: background .12s ease, border-color .12s ease;
}
/* marcado: o quadradinho preenche e o texto recua, para o olho achar o que falta */
.checa-item[aria-pressed="true"]::before {
  background: var(--acento-texto); border-color: var(--acento-texto);
}
.checa-item[aria-pressed="true"]::after {
  border: solid var(--fundo); border-width: 0 2.5px 2.5px 0; content: "";
  height: 9px; left: 6px; position: absolute; top: 5px;
  transform: rotate(45deg); width: 5px;
}
.checa-item[aria-pressed="true"] b,
.checa-item[aria-pressed="true"] span { color: var(--texto-fraco); }