/* ============ FONTES LOCAIS ============
   Antes vinham do Google Fonts. O css2 era render-blocking e custava ~200ms
   (DNS + TLS pra fonts.googleapis.com, depois DE NOVO pra fonts.gstatic.com)
   ANTES de comecar a baixar um .woff2 sequer. Mesmos arquivos, mesma origem,
   sem terceiro no caminho — e sem vazar IP do visitante pro Google.
   As faces latin-ext so baixam se aparecer um glifo daquele range. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-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;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400-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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-600-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;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-600-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-400-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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-400-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500-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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600-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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700-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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700-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;
}

/* ================= ATG CINEMA =================
   Carvão + branco-osso + vermelho-sangue. Display condensada industrial (Anton),
   corpo Barlow. Grão e vinheta em toda mídia.

   TOKENS (parecer Malewicz, itens 18 e 22): um espaçamento de seção (--sec),
   8 tamanhos de fonte, um vermelho vivo. Tudo que e tamanho vem daqui. */

:root {
  --carvao: #101013;
  --carvao-2: #0a0a0c;
  --carvao-3: #17171b;
  --osso: #f1ece1;
  --osso-dim: rgba(241, 236, 225, 0.62);
  --linha: rgba(241, 236, 225, 0.1);
  --sangue: #c1121f;
  --sangue-vivo: #ef4d50;
  --display: "Anton", Impact, sans-serif;
  --cond: "Barlow Condensed", sans-serif;
  --body: "Barlow", sans-serif;

  /* espacamento vertical de secao: unico */
  --sec: clamp(72px, 9vw, 110px);

  /* escala tipografica: 8 tamanhos */
  --fs-h1: clamp(120px, 26vw, 380px);
  --fs-h2: clamp(42px, 6vw, 84px);
  --fs-h2-sm: clamp(32px, 4vw, 54px);
  --fs-h3: 26px;
  --fs-lead: clamp(18px, 2vw, 26px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 13px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* entrada e uma categoria propria: ease-out forte, curto. A --ease a 0,7s gastava
     450ms nos ultimos 5% do percurso, e esse rabo e o que se sentia como pagina se ajeitando. */
  --ease-entrada: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--carvao);
  color: var(--osso);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sangue); color: var(--osso); }
.red { color: var(--sangue-vivo); }

/* foco visivel no teclado (item 18) */
:focus-visible { outline: 2px solid var(--sangue-vivo); outline-offset: 3px; }

/* pular para o conteudo: fica fora da tela ate receber foco pelo Tab */
.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: var(--osso); color: var(--carvao);
  font-family: var(--cond); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 10px 16px; border-radius: 6px;
  transition: top 0.16s ease-out;
}
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }
button, a, summary { -webkit-tap-highlight-color: rgba(193, 18, 31, 0.25); }

/* Raio LEVE (pedido do Peter): quadrado com uma quebradinha. */
.prog-card, .coach-card, .plan2-card, .rev-card, .gbadge, .gal-item, .gal-item img,
.btn, .form input, .form select, .mapbox, .mapbox iframe, .sched-note, .coach-badge,
.coach-photo, .lightbox img, .primeira-foto, .sched-list, .grau {
  border-radius: 6px;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- grão de filme (global, fixo) ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  animation: grain-shift 0.9s steps(4) infinite;
}
/* aba em segundo plano nao precisa de grao animado queimando bateria. Escopo no unico
   elemento que anima pra sempre; seletor universal recalcularia a arvore inteira. */
body.pausado .grain { animation-play-state: paused; }
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

/* ---------- vinheta pra toda mídia ---------- */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 22%, transparent 72%, rgba(0, 0, 0, 0.6));
}

/* Isola layout/paint por secao. So o hero e sempre visivel (e o unico pinado). */
section { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.hero { content-visibility: visible; }
/* ancoras nao podem sumir embaixo da topbar fixa */
section[id], #inscricao, #mapa { scroll-margin-top: 84px; }

/* ---------- tipos compartilhados ---------- */
.kicker {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.32em;
  color: var(--sangue-vivo);
  margin-bottom: 18px;
}
/* marcador de grau da faixa: barra preta com N riscos vermelhos = numero da secao */
.grau {
  display: inline-flex; align-items: center; gap: 2px;
  height: 16px; margin-top: 1px; padding: 0 5px; flex-shrink: 0;
  background: #000; box-shadow: 0 0 0 1px rgba(241, 236, 225, 0.18);
}
.grau i { display: block; width: 2px; height: 9px; background: var(--sangue-vivo); }
.h2 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 0.95; text-transform: uppercase;
  margin-bottom: 0.5em;
  text-wrap: balance;
}
.h2-sm { font-size: var(--fs-h2-sm); }
.sec-sub { font-size: var(--fs-body); color: var(--osso-dim); max-width: 60ch; margin-bottom: 36px; text-wrap: balance; }
.txt { font-size: var(--fs-body); color: var(--osso-dim); max-width: 52ch; }
.txt-mini { font-size: var(--fs-small); color: var(--osso-dim); margin-top: 14px; max-width: 52ch; }
.kids-list { list-style: none; margin: 22px 0 22px; }
.kids-list li {
  position: relative; padding: 7px 0 7px 22px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-body); letter-spacing: 0.04em;
}
.kids-list li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 12px; height: 2px; background: var(--sangue-vivo);
}
/* linha de objecao: cond 600, filete vermelho a esquerda */
.objecao {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-lead);
  line-height: 1.25; color: var(--osso);
  border-left: 3px solid var(--sangue-vivo); padding-left: 16px;
  max-width: 34ch; margin: 6px 0 0;
}
/* modulo CTA + citacao + prova (mesma anatomia em 5 secoes) */
.cta-mod { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-mod.center { align-items: center; text-align: center; margin-top: 28px; }
.cta-quote { max-width: 46ch; }
.cta-quote blockquote { font-family: var(--body); font-style: italic; font-size: var(--fs-body); color: var(--osso); line-height: 1.5; }
.cta-quote figcaption { margin-top: 4px; font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso-dim); }
.cta-quote.center { text-align: center; margin: 28px auto 0; }
.prova, .hero-prova {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso-dim);
}
.form-note { font-size: var(--fs-micro); color: var(--osso-dim); }

/* ---------- topo ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(13, 13, 16, 0.97);
  border-bottom: 1px solid rgba(241, 236, 225, 0.07);
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 64px; width: auto; display: block; }
@media (max-width: 760px) { .brand-logo { height: 50px; } }
.topnav { display: flex; gap: 26px; align-items: center; }
.topnav a {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso-dim);
  transition: color 0.2s;
}
.nav-cta {
  color: var(--osso) !important;
  background: var(--sangue); padding: 10px 16px; border-radius: 6px;
  transition: background 0.2s;
}
.nav-burger { display: none; }
@media (max-width: 760px) {
  .topnav { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%;
    background: var(--osso);
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(13, 13, 16, 0.98); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mobile-nav a { font-family: var(--display); font-size: 28px; text-transform: uppercase; color: var(--osso); min-height: 44px; display: inline-flex; align-items: center; }
.mobile-nav .btn { margin-top: 10px; font-size: var(--fs-small); }

/* ================= HERO scroll-scrub: texto e CTA desde p=0 ================= */
.hero { height: 260vh; position: relative; }
@media (max-width: 760px) { .hero { height: 200vh; } }
/* ALTURA do palco do hero (Peter 15/09, Samsung no celular): com 100dvh o palco tinha a altura da tela
   COM a barra do navegador. Quando o dedo comecava a arrastar, a barra recolhia, a tela crescia ~15% e o
   navegador so recalculava o dvh quando o dedo soltava: nesse meio tempo sobrava uma faixa preta embaixo.
   Agora o palco nasce com 100lvh (a MAIOR altura possivel, barra recolhida), entao nunca fica menor que a
   tela e a faixa preta nao existe em estado nenhum. O que a barra tapa no comeco (--barra) e descontado
   so do TEXTO e do lema, pra eles nascerem centrados no que da pra ver. No computador --barra = 0. */
.hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  background: var(--carvao-2);
  --barra: 0px;
}
@supports (height: 1svh) { .hero-stage { --barra: calc(100lvh - 100svh); } }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.08);
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: saturate(0.85) contrast(1.08);
}
.hero-type {
  position: absolute; inset: 0 0 var(--barra, 0px) 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px 60px;
}
.hero-h1 { display: flex; flex-direction: column; align-items: center; }
.hero-atg {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 0.82;
  letter-spacing: 0.01em;
  color: var(--osso);
  text-shadow: 0 12px 80px rgba(0, 0, 0, 0.75);
  will-change: transform;
}
.hero-sub {
  display: block;
  font-family: var(--cond); font-weight: 600;
  font-size: clamp(17px, 3vw, 34px);
  text-transform: uppercase; letter-spacing: 0.35em; text-indent: 0.35em;
  color: var(--osso);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);
  margin-top: 14px;
  white-space: nowrap;
}
.hero-leitor {
  font-family: var(--cond); font-weight: 500;
  font-size: var(--fs-lead); line-height: 1.25;
  color: var(--osso);
  margin-top: 26px; max-width: 46ch;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}
/* uma frase por linha (Peter 16/09): solto, o texto quebrava em "Pro seu / filho" */
.hero-leitor span { display: block; }
.hero-leitor span + span { margin-top: 2px; }
/* a nota do Google leva ao perfil: prova que da pra conferir, nao so afirmar */
.prova-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(241, 236, 225, 0.6); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .prova-link:hover { text-decoration-color: currentColor; } }
.hero-cta { margin-top: 28px; }
/* CHIP no texto pequeno do hero. Sombra de texto so resolve na media do quadro; as duas
   linhas de prova caem sobre kimono BRANCO no quadro mais claro do video. O painel proprio
   garante contraste em qualquer quadro, e a mesma regra vale pro lema la embaixo. */
.hero-prova {
  margin-top: 16px; max-width: 680px; line-height: 1.5;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* prova nao e legenda: sai do cinza e do corpo micro (auditoria 16/09) */
  font-size: 14px; letter-spacing: 0.06em; color: var(--osso);
}
.hero-prova span, .hero-prova a, .lema-txt {
  display: inline-block; padding: 5px 11px; border-radius: 4px;
  background: rgba(10, 10, 12, 0.68);
  box-shadow: inset 0 0 0 1px rgba(241, 236, 225, 0.09);
  color: var(--osso);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hero-prova span, .hero-prova a, .lema-txt {
    background: rgba(10, 10, 12, 0.54);
    -webkit-backdrop-filter: blur(9px) saturate(0.85);
    backdrop-filter: blur(9px) saturate(0.85);
  }
}
@media (max-width: 760px) {
  /* 13px, nao 11: sao as duas provas que seguram quem chegou do Google (auditoria 16/09) */
  .hero-prova { max-width: 100%; font-size: 13px; letter-spacing: 0.04em; }
  .hero-prova span, .hero-prova a, .lema-txt { padding: 5px 10px; }
}
/* lema no slot inferior, visivel o scrub inteiro */
.hero-lema {
  position: absolute; bottom: calc(24px + var(--barra, 0px)); left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--cond); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--osso);
}
.lema-filete { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--sangue), transparent); }
@media (max-width: 760px) {
  .hero-sub { letter-spacing: 0.22em; text-indent: 0.22em; }
  .hero-type { padding-bottom: 96px; }
  .hero-lema { bottom: calc(18px + var(--barra, 0px)); }
  .lema-filete { height: 26px; }
}

/* PORTAO de janela baixa: celular deitado (ex.: 720x400) e janela curta no desktop.
   Com --fs-h1 em 26vw o "ATG" sozinho comia a tela inteira e o CTA saia do quadro.
   Aqui a tipografia passa a ser medida pela ALTURA, e o hero encurta. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { height: 170vh; }
  .hero-type { padding: 52px 20px 36px; }
  .hero-atg { font-size: clamp(52px, 21vh, 170px); }
  .hero-sub { font-size: clamp(12px, 3.2vh, 22px); margin-top: 6px; letter-spacing: 0.24em; text-indent: 0.24em; }
  .hero-leitor { margin-top: 12px; font-size: clamp(14px, 3.6vh, 20px); }
  .hero-cta { margin-top: 14px; padding: 12px 20px; }
  .hero-prova { margin-top: 10px; font-size: 10px; line-height: 1.35; }
  .hero-lema { display: none; }
}

/* ================= 1 · POR ONDE VOCÊ ENTRA ================= */
.programas { padding: var(--sec) 0 calc(var(--sec) * 0.7); background: var(--carvao); }
.prog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.prog-card {
  position: relative; overflow: hidden;
  background: var(--carvao-3);
  aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end;
  cursor: pointer;
  outline: 1px solid rgba(241, 236, 225, 0.08);
  transition: outline-color 0.2s, transform 0.22s var(--ease-entrada);
}
.prog-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.32; filter: saturate(0.7) contrast(1.1);
  transition: opacity 0.3s, transform 0.3s var(--ease-entrada);
}
/* recorte diferente da mesma foto real da turma (metade direita) */
.prog-img-kids { object-position: 50% 60%; }
.prog-img-adultos { object-position: 50% 30%; }
.prog-img-comp { object-position: 50% 28%; }
.prog-body {
  position: relative; z-index: 2; padding: 26px;
  width: 100%;
  background: linear-gradient(to top, rgba(10, 10, 12, 0.96) 0, rgba(10, 10, 12, 0.88) 40%, transparent 72%);
}
.prog-num {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: 0.3em; color: var(--sangue-vivo);
}
.prog-card h3 {
  font-family: var(--display); font-size: clamp(30px, 3.2vw, 44px);
  text-transform: uppercase; line-height: 1; margin: 6px 0 10px;
}
.prog-card p { font-size: var(--fs-small); color: var(--osso-dim); max-width: 34ch; }
.prog-fato {
  display: block; margin-top: 12px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--osso);
}
.prog-link {
  display: block; margin-top: 12px;
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso-dim);
  transition: color 0.25s;
}
.prog-card:focus-visible .prog-link { color: var(--osso); }
/* link de texto pra pagina de detalhe (/programas): um so, discreto, sob os cards */
.prog-mais { margin-top: 22px; font-size: var(--fs-small); color: var(--osso-dim); }
.prog-mais { line-height: 1.6; }
.prog-mais a { color: var(--osso); font-family: var(--cond); font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .prog-mais a:hover { color: var(--sangue-vivo); } }
@media (max-width: 820px) {
  .prog-grid { grid-template-columns: 1fr; gap: 12px; }
  .prog-card {
    aspect-ratio: auto; display: grid; grid-template-columns: 104px 1fr; align-items: stretch;
  }
  .prog-video { position: static; width: 104px; height: 100%; min-height: 150px; opacity: 1; }
  .prog-img-kids { object-position: 50% 60%; }
  .prog-body { padding: 16px 16px 16px 18px; background: none; }
  .prog-card h3 { font-size: 26px; margin: 4px 0 6px; }
  .prog-card p { font-size: var(--fs-micro); }
  .prog-fato { font-size: 11px; margin-top: 8px; letter-spacing: 0.05em; }
  .gal-cap .lugar { display: none; }
  .prog-link { margin-top: 8px; font-size: 12px; }
}

/* ================= 2 · KIDS ================= */
.kids { position: relative; overflow: hidden; min-height: 84vh; display: flex; align-items: center; }
.kids-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
}
.kids::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.9) 40%, rgba(10, 10, 12, 0.25) 62%, rgba(10, 10, 12, 0.25) 100%);
}
/* com o video, quimono branco passa atras dos textos pequenos: sobem pra creme 75% */
.kids .txt-mini, .kids .cta-quote figcaption, .kids .prova { color: #b9b4ab; }
.kids-wrap { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--sec) * 0.75); padding-bottom: calc(var(--sec) * 0.75); }
@media (max-width: 760px) { .kids::before { background: rgba(10, 10, 12, 0.74); } }
.kids-box { max-width: 560px; }

/* ================= 3 · ADULTOS DO ZERO (video da pegada em tela cheia + texto a direita) ================= */
/* Peter 15/09: os golpes ganharam um PALCO proprio no topo da secao (video livre, sem texto por cima, pra ver o
   movimento inteiro; rotulos 3 na esquerda e 2 na direita). O texto vem embaixo, em duas colunas.
   --palco: 16:9 da largura, no maximo a altura da tela menos o menu. */
.iron {
  position: relative; overflow: hidden; background: #09090b;
  --palco: min(56.25vw, calc(100vh - 92px));
  padding-top: var(--palco);
}
.iron-video {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--palco);
  object-fit: cover; object-position: center;
  filter: saturate(0.8) contrast(1.1);
}
.iron::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--palco); z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 72%, #09090b 100%);
}
.iron .vignette { inset: 0 0 auto 0; height: var(--palco); }
.iron-wrap {
  position: relative; z-index: 2;
  padding-top: calc(var(--sec) * 0.3); padding-bottom: calc(var(--sec) * 0.75);
}
/* as 2 colunas centralizadas uma com a outra na vertical (Peter 15/09) */
.iron-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 72px; align-items: center; }
.iron-col-b .objecao { margin-top: 0; }
@media (max-width: 1100px) {
  .iron-body { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .iron-col-b { padding-top: 6px; }
  .iron-body { align-items: start; }
}
/* fundamentos clicaveis (teste 15/09, so computador): rotulo + linha + ponto no corpo do Airton, estilo ficha
   tecnica. A base e uma FOTO igual ao 1o e ao ultimo quadro dos golpes (Peter: o loop dava corte seco no clique).
   Clicou: o video do golpe entra por cima sem transicao (mesmo quadro), toca e some no fim, na mesma foto. */
.iron-golpe {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: var(--palco);
  object-fit: cover; object-position: center; filter: saturate(0.8) contrast(1.1);
  opacity: 0;
}
.iron-golpe.on { opacity: 1; }
.golpes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.golpe {
  position: absolute; height: 80px; transform: translateY(-40px); transition: opacity 0.25s;
  pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; color: var(--osso); text-align: left;
}
.golpe-nome {
  position: absolute; left: 0; bottom: 48px; white-space: nowrap;
  font-family: var(--display); font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  text-decoration: underline 2px transparent; text-underline-offset: 6px;
  transition: transform 0.2s var(--ease), text-decoration-color 0.2s;
}
.golpe-sub {
  position: absolute; left: 0; top: 48px; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241, 236, 225, 0.8); transition: transform 0.2s var(--ease);
}
.golpe-play {
  position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(241, 236, 225, 0.55); transition: border-color 0.2s, background 0.2s;
}
.golpe-play::after {
  content: ""; position: absolute; left: 10px; top: 7px;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--osso);
}
.golpe-linha { position: absolute; left: 0; right: 7px; top: 40px; height: 1px; background: rgba(241, 236, 225, 0.5); transition: background 0.2s; }
.golpe-ponto {
  position: absolute; right: 0; top: 34px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--sangue); transition: opacity 0.2s;
}
@keyframes golpe-pulsa { 0% { box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.6); } 70%, 100% { box-shadow: 0 0 0 12px rgba(193, 18, 31, 0); } }
/* pulsa 3 vezes quando a secao aparece e para (nao disputa com o botao vermelho); mouse em cima volta a pulsar */
.golpes.chamou .golpe-ponto { animation: golpe-pulsa 2.2s ease-out 3; }
.golpe:focus-visible .golpe-ponto { animation: golpe-pulsa 2.2s ease-out infinite; }
@media (hover: hover) {
  .golpe:hover .golpe-ponto { animation: golpe-pulsa 2.2s ease-out infinite; }
  .golpe:hover .golpe-linha { background: var(--sangue); }
  .golpe:hover .golpe-nome, .golpe:hover .golpe-sub { transform: translateX(4px); }
  .golpe:hover .golpe-play { border-color: var(--sangue); background: var(--sangue); }
}
.golpe:focus-visible { outline: 2px solid var(--osso); outline-offset: 6px; }
/* tocando: sublinhado vermelho no nome e o sub vira "Tocando" (o JS troca o texto) */
.golpe[aria-pressed="true"] .golpe-nome { text-decoration-color: var(--sangue); }
.golpe[aria-pressed="true"] .golpe-sub { color: var(--osso); }
.golpe[aria-pressed="true"] .golpe-play { border-color: var(--sangue); background: var(--sangue); }
/* durante o golpe o corpo sai do lugar: linha e ponto somem, o nome fica; os outros rotulos apagam pra nao
   disputar com o movimento (o parceiro entra pela direita, por baixo dos rotulos de la) */
.iron.golpeando .golpe-linha, .iron.golpeando .golpe-ponto { opacity: 0; }
.iron.golpeando .golpe:not([aria-pressed="true"]) { opacity: 0.35; }
/* rotulos da direita espelhados: ponto na esquerda da linha, texto alinhado a direita */
.golpe[data-lado="dir"] .golpe-nome { left: auto; right: 0; }
.golpe[data-lado="dir"] .golpe-sub { left: auto; right: 0; flex-direction: row-reverse; }
.golpe[data-lado="dir"] .golpe-linha { left: 7px; right: 0; }
.golpe[data-lado="dir"] .golpe-ponto { right: auto; left: 0; }
@media (hover: hover) { .golpe[data-lado="dir"]:hover .golpe-nome, .golpe[data-lado="dir"]:hover .golpe-sub { transform: translateX(-4px); } }
.golpes-dica, .golpes-cta { display: none; } /* so no celular (bloco do mini player la embaixo) */
@keyframes golpe-progresso { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .golpe-ponto { animation: none !important; } .golpe-nome, .golpe-sub { transition: none; } }
/* ---- celular e tablet (<=900px): a secao vira um mini player (Peter 15/09: "ui/ux incrivel pra mobile") ----
   Palco no topo: o Airton de ponta a ponta, 5:4, sem texto por cima. Grudado embaixo, painel 2x2+1 de golpes
   com botao grande pro polegar; a barra vermelha enche enquanto o golpe toca. O texto vem depois, sem escurecido.
   Na 1a vez que o palco aparece, a entrada de queda toca sozinha (mostra que e interativo). --painel: o JS mede.
   16/09: a lista de 5 linhas inteiras (sugestao do Conselho) VOLTOU pro 2x2+1 a pedido do Peter: ela somava
   300px e empurrava os golpes pra fora da tela, entao trocar de golpe exigia rolar e perder a animacao.
   Regra que fica: palco + painel tem que caber na MESMA tela, junto com a barra verde fixa.
   A dica e o convite moram sobre o rodape do palco, onde nao custam altura nenhuma. */
@media (max-width: 900px) {
  .iron { display: block; min-height: 0; --palco: min(80vw, 560px, 44vh); --painel: 113px; padding-top: calc(var(--palco) + var(--painel)); }
  .iron-video, .iron-golpe { inset: 0 0 auto 0; height: var(--palco); object-position: 53% 50%; }
  .iron::before {
    inset: 0 0 auto 0; height: var(--palco);
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0.35) 0%, transparent 20%, transparent 58%, rgba(10, 10, 12, 0.92) 100%);
  }
  .iron .vignette { display: none; }
  .iron-wrap { justify-content: flex-start; padding-right: 24px; padding-top: 40px; }
  /* dica e convite ocupam o MESMO lugar, no rodape do palco: um sai, o outro entra, sem mexer no layout */
  .golpes-dica, .golpes-cta {
    display: flex; align-items: center; gap: 10px;
    position: absolute; left: 16px; right: 16px; top: calc(var(--palco) - 40px); height: 40px; z-index: 3; margin: 0;
    font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(241, 236, 225, 0.85); transition: opacity 0.3s;
  }
  .golpes-dica::before, .golpes-cta::before { content: ""; flex-shrink: 0; width: 18px; height: 2px; background: var(--sangue); }
  .golpes-cta { color: var(--osso); opacity: 0; visibility: hidden; }
  .golpes-cta::after { content: "→"; margin-left: auto; color: var(--sangue-vivo); font-size: 15px; }
  .iron.golpeando .golpes-dica, .iron.mostra-cta .golpes-dica { opacity: 0; }
  .iron.mostra-cta .golpes-cta { opacity: 1; visibility: visible; }
  .golpes {
    inset: auto 0 auto 0; top: var(--palco);
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 56px; gap: 1px;
    background: rgba(241, 236, 225, 0.1); border-bottom: 1px solid rgba(241, 236, 225, 0.1);
    pointer-events: auto;
  }
  /* play ENCOSTADO na direita da celula (Peter 16/09): os 5 circulos ficam na mesma linha vertical
     dentro de cada coluna, e o nome respira a esquerda mesmo quando quebra em duas linhas */
  .golpe {
    position: relative; left: auto; top: auto; width: auto; height: auto; transform: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px;
    background: var(--carvao-2); overflow: hidden; -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
  }
  .golpe:active { background: #16161a; }
  .golpe-linha, .golpe-ponto { display: none; }
  .golpe-sub { position: static; }
  .golpe-sub-txt { display: none; }
  .golpe-nome {
    position: static; white-space: normal; text-decoration: none;
    font-family: var(--cond); font-weight: 700; font-size: 15px; line-height: 1.15; letter-spacing: 0.04em;
    transition: color 0.2s;
  }
  .golpe-play { width: 24px; height: 24px; }
  .golpe-play::after { left: 8px; top: 6px; border-width: 5px 0 5px 8px; }
  .golpe::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sangue); }
  .golpe.tocando::after { animation: golpe-progresso var(--dur, 5s) linear forwards; }
  .golpe[aria-pressed="true"] { background: rgba(193, 18, 31, 0.16); }
  .golpe[aria-pressed="true"] .golpe-nome { color: #fff; }
  .iron.golpeando .golpe:not([aria-pressed="true"]) { opacity: 1; }
  .golpe[data-lado="dir"] .golpe-sub { flex-direction: row; }
  .iron-body { grid-template-columns: minmax(0, 1fr); }
  /* numero impar de golpes: o ultimo ocupa a linha inteira, mas o play dele para na COLUNA da esquerda,
     senao ficava sozinho la na ponta, fora do prumo dos outros */
  .golpe:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: calc(50% + 14px); }
}

/* ================= 4 · QUEM DÁ A SUA AULA ================= */
.treinadores { padding: var(--sec) 0; background: var(--carvao); }
/* os dois cards com a MESMA foto (pedido do Peter, 14/09): colunas iguais e mesma grade
   foto|texto. O Airton continua em destaque pelo contorno vermelho, selos e "historia completa". */
.coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coach-card {
  background: var(--carvao-3); padding: 28px;
  outline: 1px solid rgba(241, 236, 225, 0.08);
  display: grid; grid-template-columns: 44% 1fr; column-gap: 26px; row-gap: 0;
  align-items: start; align-content: start;
  transition: outline-color 0.3s;
}
.coach-featured {
  outline-color: rgba(193, 18, 31, 0.55);
  grid-template-areas: "foto body" "foto badges" "foto more";
}
.coach-featured .coach-photo { grid-area: foto; width: 100%; }
.coach-featured .coach-body { grid-area: body; }
.coach-featured .coach-badges { grid-area: badges; align-self: start; }
.coach-featured .coach-more { grid-area: more; justify-self: start; align-self: start; }
.coach-photo {
  position: relative; overflow: hidden; flex-shrink: 0;
  width: 100%; aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #232329, #101013);
  outline: 1px solid rgba(241, 236, 225, 0.15);
}
.coach-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sangue);
}
.coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.coach-photo-lg img { object-position: 0% 30%; }
/* video em loop por cima da foto: a foto E o 1o quadro do video (mesmo enquadramento), entao nao pula ao comecar */
.coach-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  opacity: 0; transition: opacity 0.4s ease;
}
.coach-photo-lg .coach-video { object-position: 0% 30%; }
.coach-video.on { opacity: 1; }
.coach-body { flex: 1; min-width: 0; }
.coach-card h3 { font-family: var(--display); font-size: var(--fs-h3); text-transform: uppercase; }
.coach-role {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--sangue-vivo);
  margin: 6px 0 12px;
}
.coach-body > p:not(.coach-role) { font-size: var(--fs-small); color: var(--osso-dim); }
.coach-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.coach-badge {
  display: inline-block; white-space: nowrap;
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--osso);
  border: 1px solid rgba(241, 236, 225, 0.25);
  padding: 6px 10px;
}
.coach-more {
  margin-top: 18px; padding: 0 0 3px;
  min-height: 44px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso);
  border-bottom: 1px solid rgba(241, 236, 225, 0.35);
  transition: color 0.25s, border-color 0.25s;
}
/* as tres linhas da antiga Filosofia, agora assinatura do professor */
.assinatura {
  margin-top: 40px;
  font-family: var(--cond); font-weight: 500; font-size: 22px; line-height: 1.3;
  color: var(--osso); max-width: 40ch; text-wrap: balance;
}
.assinatura span {
  display: block; margin-top: 6px;
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sangue-vivo);
}
@media (max-width: 1100px) and (min-width: 821px) {
  .coach-grid { grid-template-columns: 1fr; }
  .coach-card { grid-template-columns: 230px 1fr; }
  .coach-body > p:not(.coach-role) { max-width: 62ch; }
}
@media (max-width: 820px) {
  .coach-grid { grid-template-columns: 1fr; }
  .coach-card { grid-template-columns: 150px 1fr; column-gap: 16px; padding: 20px; }
  .coach-featured { grid-template-areas: "foto body" "badges badges" "more more"; }
  .coach-featured .coach-photo img { object-position: 0% 30%; }
  .coach-featured .coach-badges { margin-top: 18px; }
  .coach-card h3 { font-size: 22px; }
  .coach-badge { padding: 5px 8px; font-size: 11px; }
}
@media (max-width: 560px) {
  .coach-card { grid-template-columns: 1fr; row-gap: 20px; }
  .coach-featured { grid-template-areas: "foto" "body" "badges" "more"; row-gap: 0; }
  .coach-featured .coach-body { margin-top: 20px; }
  .coach-photo { aspect-ratio: 4 / 3; }
  .coach-featured .coach-photo img, .coach-photo-lg img { object-position: 0% 30%; }
}

/* modal da historia do professor */
.bio-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 10, 0.82); backdrop-filter: blur(6px);
  padding: 24px;
}
.bio-modal[hidden] { display: none; }
.bio-box {
  position: relative;
  max-width: 640px; max-height: 86vh; overflow-y: auto;
  background: var(--carvao-3); border-radius: 6px;
  outline: 1px solid rgba(241, 236, 225, 0.15);
  padding: 40px 42px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}
.bio-box p { font-size: var(--fs-small); color: var(--osso-dim); margin-top: 12px; }
.bio-name {
  font-family: var(--display); font-size: clamp(26px, 3vw, 36px);
  text-transform: uppercase; margin-top: 4px; color: var(--osso);
}
.bio-sub {
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--sangue-vivo) !important; margin-top: 22px !important;
}
.bio-list { margin-top: 10px; }
.bio-close {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: rgba(241, 236, 225, 0.6);
  transition: color 0.25s;
}
@media (max-width: 640px) { .bio-box { padding: 30px 24px; } }

/* ================= 5 · PROVA (numeros sobre o video + 3 avaliacoes + CTA) ================= */
.prova-sec { background: var(--carvao); }
.prova-top {
  position: relative; overflow: hidden;
  min-height: 71vh; /* subiu 20% (52 -> 62vh) e depois mais 15% (62 -> 71vh): o video atras dos numeros aparece melhor (Peter 15/09) */
  display: flex; align-items: flex-end;
  padding: 80px 0 48px;
}
.res-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; filter: saturate(0.75) contrast(1.1);
}
.res-wrap { position: relative; z-index: 2; width: 100%; }
.res-wrap .kicker { margin-bottom: 34px; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.res-item { text-align: center; }
.res-item strong {
  display: block;
  /* os numeros contam do zero quando a faixa aparece: digito de largura fixa pra nao tremer no caminho */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1; color: var(--osso);
  text-shadow: 0 8px 50px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}
.res-item span {
  display: block; margin-top: 10px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--osso-dim);
}
@media (max-width: 820px) { .res-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; } }
.prova-body { padding: calc(var(--sec) * 0.6) 24px calc(var(--sec) * 0.8); }
.prova-body .h2 { max-width: 22ch; }
.stars { color: #fbbc04; letter-spacing: 2px; }
/* carrossel de avaliacoes: trilho com transform movido pelo JS (fila continua, seta, segurar e arrastar).
   A fila ocupa a TELA INTEIRA (Peter 15/09: entra pela borda direita e sai pela esquerda, sem pedaco
   cortado na beira do conteudo), mas o tamanho do card segue a largura do conteudo (--cw, o JS mede):
   3 por vez no desktop, 2 no tablet, 1 + pontinha do proximo no celular. --por = cards por --cw. */
.rev-carrossel { position: relative; --por: 3; --gap: 14px; --cw: min(100vw - 48px, 1152px); padding-bottom: 68px; }
.rev-janela { overflow: hidden; padding: 1px 0; margin: -1px calc(50% - 50vw); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; } /* 1px: o contorno do card nao e cortado pelo overflow */
.rev-janela.arrastando { cursor: grabbing; }
.rev-trilho { display: flex; gap: var(--gap); will-change: transform; }
.rev-trilho .rev-card { flex: 0 0 calc((var(--cw) - (var(--por) - 1) * var(--gap)) / var(--por)); }
@media (max-width: 1000px) { .rev-carrossel { --por: 2; } }
/* celular: pontinha do proximo card aparecendo convida a arrastar */
@media (max-width: 640px) { .rev-carrossel { --por: 1.22; --gap: 12px; } }
.rev-seta {
  position: absolute; bottom: 0; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(241, 236, 225, 0.16); border-radius: 50%;
  background: rgba(16, 16, 19, 0.78); color: var(--osso); cursor: pointer;
  opacity: 0.8; transition: opacity 0.2s, border-color 0.2s;
}
.rev-seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* setas embaixo da fila, juntas e centralizadas (com a fila de ponta a ponta nao sobra lateral pra elas):
   16px entre elas, 24px dos cards e do link */
.rev-ant { left: calc(50% - 52px); }
.rev-prox { right: calc(50% - 52px); }
.prova-body .rev-more { margin-top: 24px; }
.rev-seta:focus-visible { opacity: 1; outline: 2px solid var(--osso); outline-offset: 2px; }
.rev-card {
  background: var(--carvao-3); padding: 26px;
  outline: 1px solid rgba(241, 236, 225, 0.08);
  display: flex; flex-direction: column;
}
.rev-card .stars { font-size: 15px; }
.rev-card blockquote { flex: 1; margin: 14px 0 18px; font-size: var(--fs-small); line-height: 1.6; color: var(--osso-dim); }
.rev-card figcaption { font-family: var(--cond); font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.08em; }
.rev-more { margin-top: 16px; text-align: center; }
.rev-more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--osso-dim);
  transition: color 0.2s;
}

/* ================= 6 · SUA PRIMEIRA AULA ================= */
.primeira { padding: calc(var(--sec) * 0.8) 0; background: var(--carvao-2); }
.primeira-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.primeira-foto {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  outline: 1px solid rgba(241, 236, 225, 0.1); background: var(--carvao-3);
}
.primeira-foto img, .primeira-video { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: saturate(0.85) contrast(1.05); }
/* video da entrega da faixa por cima da foto: toca 1 vez e para no ultimo quadro, que e a propria foto */
.primeira-video { position: absolute; inset: 0; }
.primeira-body .sec-sub { margin-bottom: 26px; }
.passos { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.passos li { display: flex; gap: 16px; align-items: flex-start; }
.passos .prog-num { padding-top: 3px; flex-shrink: 0; }
.passos p { font-size: var(--fs-body); color: var(--osso-dim); max-width: 52ch; }
@media (max-width: 480px) { .passos { gap: 12px; } .passos p, .txt, .kids-list li { font-size: 15px; line-height: 1.5; } .kids-list li { padding: 6px 0 6px 22px; } }
.passos strong { color: var(--osso); font-weight: 600; }
.primeira .objecao { margin-top: 22px; max-width: 44ch; font-size: 19px; }
.cta-linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.cta-linha .btn { height: 54px; }
.primeira .cta-quote { margin-top: 18px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--osso); color: #101013;
  height: 54px; padding: 0 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s var(--ease);
}
.gbadge-g { width: 26px; height: 26px; flex-shrink: 0; }
.gbadge-nota { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; line-height: 1; }
.gbadge .stars { font-size: 15px; }
.gbadge-sub { display: block; margin-top: 2px; font-family: var(--cond); font-weight: 500; font-size: 12px; color: #5f6368; }
@media (max-width: 900px) {
  .primeira-grid { grid-template-columns: 1fr; gap: 26px; }
  .primeira-foto { aspect-ratio: 4 / 3; }
  .primeira-foto img, .primeira-video { object-position: center 8%; } /* foto quadrada: 4:3 cabe da cabeca do professor ate a mao do aluno pegando a faixa (16:10 cortava os dedos) */
  .primeira .objecao { font-size: var(--fs-lead); }
}

/* ================= 7 · QUANTO CUSTA ================= */
.planos { padding: var(--sec) 0; background: var(--carvao); }
.planos .kicker { justify-content: center; }
.planos .h2, .planos .sec-sub, .plan2-foot { text-align: center; }
.planos .sec-sub { margin-inline: auto; }
.plan-flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--sangue); color: var(--osso);
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 6px 14px; white-space: nowrap;
}
.per-toggle {
  display: flex; width: max-content; margin-inline: auto;
  gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--carvao-3);
  outline: 1px solid rgba(241, 236, 225, 0.1);
}
.per-btn {
  border: 0; cursor: pointer; background: none;
  color: var(--osso-dim); min-height: 44px;
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 9px 22px; border-radius: 999px;
  transition: background 0.25s, color 0.25s, transform 0.14s var(--ease-entrada);
}
.per-btn.on { background: var(--sangue); color: #fff; }
.plan2-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 430px)); gap: 14px;
  margin-top: 34px; justify-content: center;
}
.plan2-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--carvao-3); padding: 34px 30px 28px;
  border-radius: 6px; outline: 1px solid rgba(241, 236, 225, 0.08);
}
.plan2-card.featured {
  outline: 2px solid var(--sangue);
  background: linear-gradient(180deg, #1c1418, var(--carvao-3) 45%);
}
.plan2-card h3 { font-family: var(--display); font-size: 30px; text-transform: uppercase; }
.plan2-sub { margin-top: 2px; font-size: var(--fs-small); color: var(--osso-dim); }
.freq { display: flex; gap: 8px; margin-top: 18px; }
.freq-btn {
  flex: 1; cursor: pointer; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(241, 236, 225, 0.25); border-radius: 6px; background: none;
  color: var(--osso-dim);
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 9px 8px;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.14s var(--ease-entrada);
}
.freq-btn.on { border-color: rgba(241, 236, 225, 0.6); color: var(--osso); background: rgba(255, 255, 255, 0.04); }
/* preco dentro do botao de frequencia */
.freq-val { display: block; font-weight: 700; font-size: var(--fs-body); letter-spacing: 0.02em; }
.plan2-anchor {
  margin-top: 22px; min-height: 22px;
  font-family: var(--cond); font-weight: 500; font-size: var(--fs-small); color: var(--osso-dim); letter-spacing: 0.04em;
}
/* MEDIDO: com display:none o card encolhia 66px e a grade 131px ao trocar pra Mensal,
   e o CTA pulava 139px pra cima debaixo do dedo. O espaco agora fica reservado. */
.plan2-anchor[hidden] { display: block; visibility: hidden; }
.plan2-riscado { text-decoration: line-through; text-decoration-color: var(--sangue-vivo); text-decoration-thickness: 2px; }
.plan2-price { font-family: var(--display); font-size: 62px; line-height: 1; margin: 2px 0 4px; }
.plan2-price { display: inline-block; }
.plan2-price sup { font-size: 22px; margin-right: 4px; vertical-align: 26px; color: var(--osso-dim); }
.plan2-per { font-family: var(--cond); font-weight: 500; font-size: 17px; color: var(--osso-dim); letter-spacing: 0.05em; }
.plan2-save {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.04em;
  color: var(--osso);
}
.plan2-save { min-height: 22px; }
.plan2-save:empty { display: block; }
.plan2-pay { margin-top: 6px; font-size: var(--fs-micro); color: var(--osso-dim); }
.plan2-cta { width: 100%; margin-top: 22px; }
.plan2-assinar {
  display: block; margin-top: 12px; text-align: center;
  font-size: var(--fs-micro); color: var(--osso-dim); text-decoration: underline; text-underline-offset: 3px;
  min-height: 24px;
}
.plan2-foot { margin-top: 22px; font-size: var(--fs-micro); color: var(--osso-dim); }
@media (max-width: 900px) {
  .plan2-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .per-toggle { display: flex; width: 100%; }
  .per-btn { flex: 1; padding: 9px 6px; }
}

/* ================= 8 · AGENDE ================= */
.agende { padding: calc(var(--sec) * 0.7) 0; background: var(--carvao-2); }
.agende-wrap { max-width: 568px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.form label {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--osso-dim);
  display: flex; flex-direction: column; gap: 8px;
}
.form input, .form select {
  background: var(--carvao-3); border: 1px solid rgba(241, 236, 225, 0.14);
  color: var(--osso); font-family: var(--body); font-size: 16px;
  padding: 14px 16px; outline: none; min-height: 48px;
}
.form input:focus, .form select:focus { border-color: var(--sangue-vivo); }

/* ================= 9 · FAQ ================= */
.faq { padding: var(--sec) 0; background: var(--carvao); }
.faq-wrap { max-width: 820px; }
.faq-list { border-top: 1px solid var(--linha); }
.faq-list details { border-bottom: 1px solid var(--linha); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; min-height: 44px;
  font-family: var(--cond); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-mais { color: var(--sangue-vivo); font-size: 22px; transition: transform 0.25s; }
.faq-list details[open] .faq-mais { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 18px; font-size: var(--fs-small); color: var(--osso-dim); max-width: 68ch; }
.faq-list details a { color: var(--osso); text-decoration: underline; text-underline-offset: 3px; }
.faq-cta { margin-top: 26px; font-size: var(--fs-small); color: var(--osso-dim); }
.faq-cta a { color: var(--osso); font-weight: 600; }

/* ================= 10 · HORÁRIOS + MAPA ================= */
.base { padding: var(--sec) 0; background: var(--carvao-2); }
.hoje {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-body); letter-spacing: 0.04em;
  color: var(--osso); margin-bottom: 8px;
}
.hoje[hidden] { display: none; }
.hoje b { color: var(--sangue-vivo); font-weight: 700; }
/* mapa centralizado na vertical com a tabela de horarios (Peter 15/09); no celular volta a empilhar */
.base-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; margin-top: 28px; }
@media (max-width: 900px) { .base-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; } }
.sched-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sf-btn {
  border: 1px solid rgba(241, 236, 225, 0.25); border-radius: 999px;
  background: none; cursor: pointer; color: var(--osso-dim);
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 14px; min-height: 40px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sf-btn.on { border-color: var(--sangue-vivo); color: var(--osso); background: rgba(193, 18, 31, 0.15); }
.sched-scroll { overflow-x: auto; }
.sched { width: 100%; border-collapse: collapse; font-family: var(--cond); min-width: 560px; }
.sched th, .sched td {
  padding: 12px 8px; text-align: center;
  border-bottom: 1px solid var(--linha);
  font-size: var(--fs-small); white-space: nowrap;
}
.sched thead th {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sangue-vivo); font-size: var(--fs-micro);
}
.sched thead th:first-child { text-align: left; }
.sched tbody th { text-align: left; font-weight: 700; letter-spacing: 0.04em; color: var(--osso); }
.sched tbody td { color: var(--osso-dim); }
.sched tbody tr { transition: opacity 0.25s, background 0.25s; }
.sched.filtered tbody tr { opacity: 0.22; }
.sched.filtered tbody tr.hit { opacity: 1; background: rgba(193, 18, 31, 0.1); }
.sched.filtered tbody tr.hit td { color: var(--osso); }
/* mobile: lista por turma (a tabela de 560px em 342 escondia os dias) */
.sched-list { display: none; }
.sl-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 0; border-bottom: 1px solid var(--linha);
  transition: opacity 0.25s;
}
.sl-item strong { font-family: var(--cond); font-weight: 700; font-size: var(--fs-body); letter-spacing: 0.04em; text-transform: uppercase; }
.sl-item span { font-family: var(--cond); font-size: var(--fs-small); color: var(--osso-dim); letter-spacing: 0.02em; }
.sched-list.filtered .sl-item { opacity: 0.25; }
.sched-list.filtered .sl-item.hit { opacity: 1; }
.sched-list.filtered .sl-item.hit span { color: var(--osso); }
@media (max-width: 760px) {
  .sched-scroll { display: none; }
  .sched-list { display: block; border-top: 1px solid var(--linha); }
}
.sched-note { margin-top: 14px; font-size: var(--fs-micro); color: var(--osso-dim); max-width: 80ch; }
.sched-cta { margin-top: 22px; }
.sched-cta-mob { display: none; }
@media (max-width: 760px) { .sched-cta { width: 100%; } .sched-cta-desk { display: none; } .sched-cta-mob { display: inline; } }
.mapbox { outline: 1px solid var(--linha); position: relative; }
.mapbox iframe { width: 100%; height: 340px; border: 0; }
@media (max-width: 760px) { .sched-filter { display: none; } .mapbox iframe { height: 240px; } }
.addr { margin-top: 12px; font-size: var(--fs-small); color: var(--osso-dim); }
.addr a { color: var(--osso); font-weight: 600; }

/* ================= 11 · GALERIA ================= */
.galeria { padding: var(--sec) 0; background: var(--carvao); }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
.gal-item {
  position: relative; overflow: hidden; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 1 / 1; background: var(--carvao-3);
  outline: 1px solid rgba(241, 236, 225, 0.07);
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) contrast(1.05);
  transition: filter 0.28s, transform 0.28s var(--ease-entrada);
}
/* legenda sempre visivel, sobre gradiente no rodape do quadrado */
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 12px 10px; text-align: left;
  font-family: var(--cond); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--osso);
  background: linear-gradient(to top, rgba(5, 5, 7, 0.85), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .gal-cap { white-space: normal; font-size: 11px; letter-spacing: 0.04em; line-height: 1.3; padding-top: 30px; } }
/* foto de grupo em paisagem ocupa 2 colunas: a turma nao e cortada nas pontas e as
   5 extras fecham 2 linhas cheias (sem quadrado orfao), tanto em 4 quanto em 2 colunas */
.gal-item[hidden] { display: none; }
.gal-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
/* altura fixa por linha: com aspect-ratio, o largo (2 col + gap) sairia 5px mais alto que o quadrado */
@supports (height: 1cqi) {
  .gal-grid { container-type: inline-size; }
  .gal-item, .gal-wide { aspect-ratio: auto; height: calc((100cqi - 30px) / 4); }
  @media (max-width: 900px) { .gal-item, .gal-wide { height: calc((100cqi - 10px) / 2); } }
}
.gal-extra.entra { animation: gal-entra 0.34s var(--ease-entrada) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes gal-entra { from { opacity: 0; transform: translateY(14px); } }
.gal-mais-wrap { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 900px) { .gal-mais-wrap { margin-top: 28px; } }
.gal-mais[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 5, 7, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lb-btn {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(241, 236, 225, 0.1); color: var(--osso); font-size: 26px;
  transition: background 0.2s;
}
.lb-fechar { top: 18px; right: 18px; }
.lb-ant { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-prox { right: 14px; top: 50%; transform: translateY(-50%); }

/* ================= BOTÕES ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-weight: 700; font-size: 15.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 15px 26px; min-height: 48px;
  transition: background 0.2s, color 0.2s, transform 0.14s var(--ease-entrada);
  cursor: pointer; border: 0; text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn.solid { background: var(--sangue); color: var(--osso); }
.btn.ghost { background: transparent; color: var(--osso); outline: 1px solid rgba(241, 236, 225, 0.35); }
.btn-full { width: 100%; }
.per-btn:active, .freq-btn:active, .sf-btn:active, .coach-more:active { transform: scale(0.97); }

/* ================= CTA FLUTUANTE: pilula vermelha (desktop) / barra inferior (mobile) ================= */
.wafloat {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #0b1f16; /* verde do WhatsApp: o botao leva pro WhatsApp (Peter 15/09) */
  padding: 13px 20px; border-radius: 999px; min-height: 48px;
  font-family: var(--cond); font-weight: 700; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.1em;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease), opacity 0.3s, background 0.2s;
}
.wafloat.off { opacity: 0; pointer-events: none; transform: translateY(12px); }
.wafloat-mob { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .wafloat {
    left: 0; right: 0; bottom: 0; border-radius: 0;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
    justify-content: center; letter-spacing: 0.08em; font-size: 15px;
  }
  .wafloat.off { transform: translateY(100%); }
  .wafloat-desk { display: none; }
  .wafloat-mob { display: inline; }
}

/* ================= FOOTER ================= */
.footer { border-top: 1px solid rgba(241, 236, 225, 0.08); padding: 36px 0; background: var(--carvao-2); }
.foot-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 6px; }
.foot-social { display: flex; gap: 14px; margin-bottom: 6px; }
.foot-social a { color: var(--osso-dim); transition: color 0.2s; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.foot-links a { transition: color 0.2s; }
.foot-mini { font-size: 12.5px; opacity: 0.75; }
.foot-brand { font-family: var(--display); font-size: 22px; }
.foot-lema { font-family: var(--cond); font-weight: 500; font-size: var(--fs-small); color: var(--osso-dim); letter-spacing: 0.14em; text-transform: uppercase; margin-left: 10px; }
/* tres acoes do rodape: no computador ficam em linha, no celular viram alvos de 48px de altura */
.foot-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; }
.foot-acao { color: var(--osso); font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
.foot-acao + .foot-acao::before { content: ""; width: 1px; height: 14px; background: rgba(241, 236, 225, 0.25); margin-right: 18px; }
@media (max-width: 760px) {
  .foot-acoes { display: block; margin-top: 16px; }
  .foot-acao { display: flex; min-height: 48px; padding: 4px 0; border-top: 1px solid rgba(241, 236, 225, 0.12); }
  .foot-acao:last-child { border-bottom: 1px solid rgba(241, 236, 225, 0.12); }
  .foot-acao + .foot-acao::before { display: none; }
}
.footer p, .footer a { font-size: var(--fs-small); color: var(--osso-dim); }
.foot-credit-row { width: 100%; text-align: center; margin-top: 22px; }
.foot-credit { font-size: 12px; color: var(--osso-dim); opacity: 0.55; transition: opacity 0.2s; }

/* ================= PAGINA /PROGRAMAS ================= */
.phero {
  position: relative; overflow: hidden;
  min-height: 56vh;
  display: flex; align-items: flex-end;
  padding: 150px 0 70px;
  background: var(--carvao-2);
}
.phero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.35; filter: saturate(0.75) contrast(1.1);
}
.phero-wrap { position: relative; z-index: 2; }
.h1-page {
  font-family: var(--display);
  font-size: clamp(54px, 9vw, 128px);
  line-height: 0.9; text-transform: uppercase;
}
.phero-sub { margin-top: 18px; max-width: 62ch; color: var(--osso-dim); font-size: var(--fs-body); }
.psec { padding: 96px 0; background: var(--carvao); }
.psec-b { background: var(--carvao-2); }
.psec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.psec-grid.flip .psec-media { order: 2; }
@media (max-width: 900px) {
  .psec { padding: 70px 0; }
  .psec-grid { grid-template-columns: 1fr; gap: 30px; }
  .psec-grid.flip .psec-media { order: 0; }
}
.psec-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 6px;
  outline: 1px solid rgba(241, 236, 225, 0.1);
  background: var(--carvao-3);
}
.psec-media img, .psec-media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8) contrast(1.08);
}
.psec-meta {
  display: inline-block; margin-top: 20px;
  font-family: var(--cond); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--osso);
  border: 1px solid rgba(241, 236, 225, 0.25); border-radius: 6px;
  padding: 6px 12px;
}
.psec-txt { margin-top: 16px; font-size: 15.5px; color: var(--osso-dim); max-width: 56ch; }
.psec .faq-list { margin-top: 26px; }
.psec .faq-list summary { font-size: 16px; }
.psec-note { margin-top: 18px; font-size: 13.5px; color: var(--osso-dim); max-width: 56ch; }
.psec-cta { margin-top: 28px; }
.psec ol { margin: 0; padding-left: 20px; color: var(--osso-dim); font-size: 15px; }
.psec ol li { padding: 4px 0; }
.pcta {
  position: relative; overflow: hidden;
  padding: 110px 0; text-align: center;
  background: var(--carvao-2);
}
.pcta-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.psec .kicker { display: block; }

/* ================= HOVER so em mouse (item 22) ================= */
@media (hover: hover) {
  .topnav a:hover { color: var(--osso); }
  .nav-cta:hover { background: var(--sangue-vivo); }
  .prog-card:hover { outline-color: var(--sangue); transform: translateY(-6px); }
  .prog-card:hover .prog-video { opacity: 0.6; transform: scale(1.04); }
  .prog-card:hover .prog-link { color: var(--osso); }
  .coach-card:hover { outline-color: var(--sangue); }
  .coach-more:hover { color: var(--sangue-vivo); border-color: var(--sangue-vivo); }
  .bio-close:hover { color: var(--osso); }
  .rev-more a:hover { color: var(--osso); }
  .rev-seta:hover { opacity: 1; border-color: rgba(241, 236, 225, 0.4); }
  .gbadge:hover { transform: translateY(-3px); }
  .per-btn:hover:not(.on) { color: var(--osso); }
  .plan2-assinar:hover { color: var(--osso); }
  .sf-btn:hover { color: var(--osso); }
  .gal-item:hover img { filter: none; transform: scale(1.05); }
  .lb-btn:hover { background: rgba(241, 236, 225, 0.22); }
  .btn.solid:hover { background: var(--sangue-vivo); }
  .btn.ghost:hover { outline-color: var(--osso); }
  .wafloat:hover { transform: translateY(-3px); background: #1ebe5b; }
  .foot-social a:hover, .foot-links a:hover, .footer a:hover { color: var(--osso); }
  .foot-credit:hover { opacity: 1; }
  .faq-cta a:hover, .addr a:hover { color: var(--sangue-vivo); }
}
.gal-item:focus-visible img { filter: none; transform: scale(1.05); }
/* podio em retrato: mostra o alto do podio (a cabeca do 1o lugar); Europeu em paisagem: zoom no centro do podio */
.gal-topo { object-position: center top; }
/* foto da turma em 4:3 dentro do card 2:1: o corte pega os rostos, nao o teto nem o tatame vazio */
.gal-kids { object-position: center 38%; }
.gal-zoom { transform: scale(1.55); transform-origin: 50% 42%; }
.gal-item:hover .gal-zoom, .gal-item:focus-visible .gal-zoom { transform: scale(1.62); }

/* ================= reveals (8 blocos, nao 30) ================= */
/* MEDIDO: a 0,7s o bloco cruzava a linha de leitura do celular com opacidade 0,49, e o
   texto secundario caia a 2,5:1 de contraste, reprovando AA. A 0,28s chega a 0,85 e sempre
   fecha em 1. A guarda `html.js` existe porque o opacity:0 e CSS puro: sem ela, JS desligado
   ou JS que quebra deixa 8 blocos invisiveis pra sempre. */
html.js [data-reveal], html.js [data-stagger] > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.28s var(--ease-entrada), transform 0.28s var(--ease-entrada);
}
html.js [data-reveal].on, html.js [data-stagger].on > * { opacity: 1; transform: none; }
/* variante unica: conjunto de iguais entra em ordem de leitura. --i e gravado uma vez, no
   filho, no load. Nunca no pai: trocar variavel no pai recalcula estilo de todos os filhos. */
html.js [data-stagger] { --passo: 45ms; }
html.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * var(--passo)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  [data-reveal], [data-stagger] > * { transition: none !important; opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .plan2-price { animation: none !important; }
  .hero-atg { transform: none !important; }
  .wafloat, .btn, .prog-card, .gbadge { transition: none !important; }
  .gal-extra.entra { animation: none; }
  .coach-video { display: none; }
}

/* =====================================================================================
   VERSAO CLARA (opcional, 15/09). Padrao continua o escuro; o script inline do <head> poe
   html[data-tema-site="claro"] quando o visitante escolhe (botao da nav, localStorage ou ?tema=claro).
   So 6 secoes clareiam: programas, avaliacoes (menos a faixa de numeros), planos, inscricao, faq e
   horarios. Nav, hero, kids, adultos, treinadores (decisao do Peter com o Conselho: fotos e video
   rendem mais no escuro), primeira aula, galeria, rodape e o WhatsApp flutuante ficam identicos. Nenhuma regra escura acima foi mexida: tudo aqui e escopado.
   Paleta do Conselho: fundo off-white quente (#f6f3ee, alternando #efebe4 em secoes seguidas),
   texto #141414, secundario #57534c (6,4:1 no fundo mais escuro), vermelho de TEXTO #a50f1a
   (o --sangue-vivo passa 3,6:1 no claro e reprova), botao solido #c1121f com hover #a50f1a.
   Corte seco entre escuro e claro: nenhum degrade de emenda.
   ===================================================================================== */

/* ---------- botao da versao clara (fica na nav, que e sempre escura) ---------- */
.tema-btn {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  background: none; border: 1px solid rgba(241, 236, 225, 0.2);
  color: var(--osso-dim); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tema-btn svg { width: 18px; height: 18px; display: block; }
/* ligado: a metade cheia vira pro outro lado (estado visivel sem cor nova) */
html[data-tema-site="claro"] .tema-btn svg { transform: rotate(180deg); }
.tema-btn:focus-visible { outline: 2px solid var(--osso); outline-offset: 3px; }
@media (hover: hover) { .tema-btn:hover { color: var(--osso); border-color: rgba(241, 236, 225, 0.45); } }
/* MEDIDO: a nav original ja quebra linha a partir de 820px; os 58px do botao (32 + 1 gap) anteciparam a
   quebra pra 880px (pegava iPad Pro de 834). De 761 a 880px o botao sai e a nav fica exatamente como era. */
@media (min-width: 761px) and (max-width: 880px) { .topnav .tema-btn { display: none; } }
/* no menu do celular: item com texto e chavinha liga/desliga, abaixo do CTA vermelho */
.tema-btn-menu {
  display: inline-flex; align-items: center; gap: 10px;
  width: auto; height: auto; min-height: 44px; margin-top: 6px; padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.tema-chave {
  position: relative; width: 30px; height: 18px; border-radius: 999px;
  background: rgba(241, 236, 225, 0.18);
}
.tema-chave::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--osso-dim);
}
.tema-btn-menu[aria-pressed="true"] { color: var(--osso); }
.tema-btn-menu[aria-pressed="true"] svg { transform: none; }
.tema-btn-menu[aria-pressed="true"] .tema-chave { background: var(--osso); }
.tema-btn-menu[aria-pressed="true"] .tema-chave::after { left: 15px; background: var(--carvao); }
/* troca seca: sem isso os botoes com transition de cor animavam a pagina inteira no clique */
html.tema-trocando *, html.tema-trocando *::before, html.tema-trocando *::after { transition: none !important; }

/* ---------- tokens das areas claras ----------
   Redefinir as variaveis NO CONTAINER faz todo var(--osso) / var(--osso-dim) de dentro virar escuro
   sem reescrever regra por regra. Em #programas o escopo e so o .wrap: os cards com foto seguem
   escuros com texto creme. Em #avaliacoes e so o .prova-body: a faixa de numeros segue escura. */
html[data-tema-site="claro"] #programas > .wrap,
html[data-tema-site="claro"] #avaliacoes .prova-body,
html[data-tema-site="claro"] #planos,
html[data-tema-site="claro"] #inscricao,
html[data-tema-site="claro"] #faq,
html[data-tema-site="claro"] #horarios {
  --osso: #141414;
  --osso-dim: #57534c;
  --linha: rgba(20, 20, 20, 0.1);
  --sangue-vivo: #a50f1a;
  color: var(--osso);
}
html[data-tema-site="claro"] #programas,
html[data-tema-site="claro"] #avaliacoes,
html[data-tema-site="claro"] #planos,
html[data-tema-site="claro"] #faq { background: #f6f3ee; }
html[data-tema-site="claro"] #inscricao,
html[data-tema-site="claro"] #horarios { background: #efebe4; }
/* o grau e barra PRETA com riscos: fica igual ao escuro (o risco vermelho vivo e sobre preto, nao sobre o claro) */
html[data-tema-site="claro"] #programas .grau,
html[data-tema-site="claro"] #avaliacoes .grau,
html[data-tema-site="claro"] #planos .grau,
html[data-tema-site="claro"] #inscricao .grau,
html[data-tema-site="claro"] #faq .grau,
html[data-tema-site="claro"] #horarios .grau { --sangue-vivo: #ef4d50; }
/* botao solido: vermelho da marca com texto BRANCO (o var(--osso) dele virou #141414 no escopo) */
html[data-tema-site="claro"] #avaliacoes .btn.solid,
html[data-tema-site="claro"] #planos .btn.solid,
html[data-tema-site="claro"] #inscricao .btn.solid { color: #fff; }
html[data-tema-site="claro"] #programas ::selection,
html[data-tema-site="claro"] #avaliacoes ::selection,
html[data-tema-site="claro"] #planos ::selection,
html[data-tema-site="claro"] #inscricao ::selection,
html[data-tema-site="claro"] #faq ::selection,
html[data-tema-site="claro"] #horarios ::selection { color: #fff; }

/* ---------- 1 · por onde voce entra: muda fundo, titulo, kicker e o link de baixo ---------- */
html[data-tema-site="claro"] #programas .prog-mais a { color: #a50f1a; }
@media (hover: hover) {
  html[data-tema-site="claro"] #programas .prog-mais a:hover { color: #141414; }
}

/* ---------- 5 · avaliacoes: faixa de numeros escura, fila de cards brancos ---------- */
/* a faixa nao tinha fundo proprio (herdava o carvao da secao, e o video e 55% opaco): sem isso ela clareava */
html[data-tema-site="claro"] #avaliacoes .prova-top { background: var(--carvao); }
/* folga vertical pra sombra do card nao ser cortada pelo overflow da janela (1px no escuro) */
html[data-tema-site="claro"] #avaliacoes .rev-janela { padding-block: 10px; margin-block: -10px; }
html[data-tema-site="claro"] #avaliacoes .rev-card {
  background: #fff; outline: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.06), 0 4px 12px rgba(20, 20, 20, 0.04);
}
html[data-tema-site="claro"] #avaliacoes .rev-card blockquote { color: #2b2823; }
html[data-tema-site="claro"] #avaliacoes .rev-seta {
  background: #fff; color: #141414; opacity: 1;
  border-color: rgba(20, 20, 20, 0.28);
}
@media (hover: hover) {
  html[data-tema-site="claro"] #avaliacoes .rev-seta:hover { border-color: #141414; }
}

/* ---------- 7 · quanto custa ---------- */
/* trilho cinza quente; pilula ATIVA preta (vermelho fica so no botao e no selo) */
html[data-tema-site="claro"] #planos .per-toggle { background: #e7e2d9; outline-color: rgba(20, 20, 20, 0.08); }
html[data-tema-site="claro"] #planos .per-btn.on { background: #141414; color: #f6f3ee; }
html[data-tema-site="claro"] #planos .plan2-card {
  background: #fff; outline: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px rgba(20, 20, 20, 0.06);
}
html[data-tema-site="claro"] #planos .plan2-card.featured {
  outline: 2px solid #c1121f;
  box-shadow: 0 2px 4px rgba(20, 20, 20, 0.06), 0 18px 44px rgba(20, 20, 20, 0.13);
}
html[data-tema-site="claro"] #planos .plan-flag { background: #c1121f; color: #fff; }
html[data-tema-site="claro"] #planos .freq-btn { border-color: rgba(20, 20, 20, 0.24); }
html[data-tema-site="claro"] #planos .freq-btn.on { border-color: #141414; color: #141414; background: rgba(20, 20, 20, 0.04); }
html[data-tema-site="claro"] #planos .plan2-riscado { color: #6b665e; text-decoration-color: currentColor; }

/* ---------- 8 · agende: formulario num card branco ---------- */
html[data-tema-site="claro"] #inscricao .form {
  background: #fff; padding: 28px; border-radius: 6px;
  outline: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 10px 30px rgba(20, 20, 20, 0.06);
}
html[data-tema-site="claro"] #inscricao .form label { color: #141414; }
html[data-tema-site="claro"] #inscricao .form input,
html[data-tema-site="claro"] #inscricao .form select {
  background: #fff; color: #141414; border: 1px solid #8a857c; min-height: 52px;
}
html[data-tema-site="claro"] #inscricao .form input::placeholder { color: #6b665e; opacity: 1; }
/* "Escolha a turma" com cara de placeholder enquanto nada foi escolhido; as opcoes seguem escuras */
html[data-tema-site="claro"] #inscricao .form select:invalid { color: #6b665e; }
html[data-tema-site="claro"] #inscricao .form select option { color: #141414; }
html[data-tema-site="claro"] #inscricao .form input:focus,
html[data-tema-site="claro"] #inscricao .form select:focus {
  border-color: #141414; box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.2);
}
@media (max-width: 480px) { html[data-tema-site="claro"] #inscricao .form { padding: 20px 18px; } }

/* ---------- 9 · faq: so divisorias finas ---------- */
html[data-tema-site="claro"] #faq .faq-mais { color: #c1121f; }
html[data-tema-site="claro"] #faq .faq-list details p { color: #57534c; max-width: 65ch; }

/* ---------- 10 · horarios ---------- */
html[data-tema-site="claro"] #horarios .sf-btn { border-color: rgba(20, 20, 20, 0.3); }
html[data-tema-site="claro"] #horarios .sf-btn.on { background: #141414; border-color: #141414; color: #f6f3ee; }
/* tabela (desktop) e lista (celular) viram folha branca */
html[data-tema-site="claro"] #horarios .sched-scroll,
html[data-tema-site="claro"] #horarios .sched-list {
  background: #fff; border-radius: 6px;
  outline: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 8px 24px rgba(20, 20, 20, 0.05);
}
html[data-tema-site="claro"] #horarios .sched,
html[data-tema-site="claro"] #horarios .sched-list { font-variant-numeric: tabular-nums; }
html[data-tema-site="claro"] #horarios .sched th:first-child { padding-left: 18px; }
html[data-tema-site="claro"] #horarios .sched td:last-child { padding-right: 18px; }
html[data-tema-site="claro"] #horarios .sched tbody tr:last-child th,
html[data-tema-site="claro"] #horarios .sched tbody tr:last-child td { border-bottom: 0; }
html[data-tema-site="claro"] #horarios .sched.filtered tbody tr.hit { background: rgba(193, 18, 31, 0.06); }
html[data-tema-site="claro"] #horarios .sched-list { border-top: 0; padding: 4px 16px; }
html[data-tema-site="claro"] #horarios .sl-item:last-child { border-bottom: 0; }
html[data-tema-site="claro"] #horarios .btn.ghost { outline: 2px solid #141414; outline-offset: -1px; color: #141414; }
@media (hover: hover) {
  html[data-tema-site="claro"] #horarios .btn.ghost:hover { background: #141414; color: #f6f3ee; }
}

/* as 5 estrelas sao o unico texto que reprovava contraste na versao clara (#fbbc04 dava 1,71:1 no card
   branco). No escuro a cor do Google fica; no claro entra um dourado escuro que passa em AA. */
html[data-tema-site="claro"] #avaliacoes .stars,
html[data-tema-site="claro"] .prova-body .stars { color: #8a6100; }

/* ================= PAGINA DE TEXTO (politica de privacidade) =================
   Coluna unica de leitura: 68 caracteres por linha, que e o limite confortavel.
   Mesma paleta escura das outras paginas internas. */
.doc { background: var(--carvao); padding: calc(var(--sec) * 0.9) 0 var(--sec); }
.doc-wrap { max-width: 720px; }
.doc .h1-page { margin-top: 6px; }
.doc-lead {
  font-family: var(--cond); font-weight: 500; font-size: var(--fs-lead); line-height: 1.4;
  color: var(--osso); margin-top: 22px; max-width: 60ch;
}
.doc-data {
  font-family: var(--cond); font-weight: 600; font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--osso-dim);
  margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--linha);
}
.doc-h2 {
  font-family: var(--display); font-size: clamp(22px, 3vw, 30px); line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--osso);
  margin-top: 44px;
}
.doc p, .doc-lista {
  /* texto longo pede mais luz que uma legenda: o --osso-dim (62%) cansa numa pagina inteira */
  font-family: var(--body); font-size: 17px; line-height: 1.65; color: rgba(241, 236, 225, 0.82);
  margin-top: 14px; max-width: 68ch;
}
.doc p strong, .doc-lista strong { color: var(--osso); font-weight: 600; }
.doc-lista { padding-left: 20px; }
.doc-lista li { margin-top: 10px; }
.doc a { color: var(--osso); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 236, 225, 0.45); }
@media (hover: hover) { .doc a:hover { text-decoration-color: var(--sangue-vivo); color: var(--osso); } }
.doc-volta { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--linha); }
@media (max-width: 640px) { .doc p, .doc-lista { font-size: 16px; } .doc-h2 { margin-top: 36px; } }