/* ============================================================
   TEAM MÁXIMO — SITE
   Todo valor visual vem de tokens.css. Nada de hex solto aqui.
   ============================================================ */

/* ---- ajustes responsivos dos tokens de layout -------------- */
@media (max-width: 1023px) { :root { --tm-section-y: 64px; } }
@media (max-width: 639px)  { :root { --tm-section-y: 48px; } }

img { max-width: 100%; display: block; }
/* Itens de grid/flex encolhem em vez de esticar o layout (min-width:auto é o padrão). */
.bento > *, .sep-grid > *, .prof > *, .faq-grid > *, .gal > *, .steps > *,
.stats > *, .ft-in > *, .cta-in > *, .exp-cta > * { min-width: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: var(--tm-space-4); top: var(--tm-space-4); z-index: 999;
  transform: translateY(-200%);
  background: var(--tm-white); color: var(--tm-black);
  padding: var(--tm-space-3) var(--tm-space-4); border-radius: var(--tm-radius-md);
  font-weight: 800; font-size: var(--tm-btn); text-decoration: none;
}
.skip:focus { transform: none; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tm-space-2);
  font-family: var(--tm-font-ui); font-weight: 800; font-size: var(--tm-btn);
  letter-spacing: -.01em; line-height: 1; text-decoration: none;
  border-radius: var(--tm-radius-md); border: 1px solid transparent;
  padding-inline: var(--tm-space-5); cursor: pointer;
  transition: background-color var(--tm-dur-fast) var(--tm-ease),
              color var(--tm-dur-fast) var(--tm-ease),
              border-color var(--tm-dur-fast) var(--tm-ease);
}
.btn:hover { text-decoration: none; }
.btn-sm { height: 40px; }
.btn-md { height: 48px; }
.btn-lg { height: 56px; padding-inline: var(--tm-space-6); }

.btn-primary { background: var(--tm-red); color: var(--tm-white); }
.btn-primary:hover { background: var(--tm-red-deep); color: var(--tm-white); }
.btn-primary:active { background: var(--tm-red-press); }

.btn-secondary { background: transparent; color: var(--tm-black); border-color: var(--tm-line-strong); }
.btn-secondary:hover { background: var(--tm-paper-2); color: var(--tm-black); border-color: var(--tm-black); }

.btn-onDark { background: transparent; color: var(--tm-on-night); border-color: var(--tm-night-line); }
.btn-onDark:hover { background: rgba(241,240,238,.08); color: var(--tm-on-night); border-color: var(--tm-on-night); }

.lnk {
  font-size: var(--tm-body-s); font-weight: 700; color: var(--tm-ink-2);
  padding: 0; text-align: left; border-bottom: 1px solid var(--tm-line-strong);
  transition: color var(--tm-dur-fast) var(--tm-ease), border-color var(--tm-dur-fast) var(--tm-ease);
}
.lnk:hover { color: var(--tm-red-deep); border-color: var(--tm-red-deep); }

/* ============================================================
   HEADER
   ============================================================ */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--tm-night);
  border-bottom: 1px solid transparent;
  transition: background-color var(--tm-dur) var(--tm-ease),
              border-color var(--tm-dur) var(--tm-ease);
}
.hd.is-stuck {
  background: rgba(17,17,22,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--tm-night-line);
}
.hd-in { height: 76px; display: flex; align-items: center; gap: var(--tm-space-6); transition: height var(--tm-dur) var(--tm-ease); }
.hd.is-stuck .hd-in { height: 64px; }

.hd-logo { display: block; flex: none; }
.hd-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); }

.hd-nav { display: flex; gap: var(--tm-space-6); margin-inline-start: auto; }
.hd-nav a {
  font-size: var(--tm-body-s); font-weight: 700; color: var(--tm-on-night-mute);
  text-decoration: none; transition: color var(--tm-dur-fast) var(--tm-ease);
}
.hd-nav a:hover { color: var(--tm-on-night); text-decoration: none; }

.hd-burger { display: none; width: 44px; height: 44px; margin-inline-start: auto; flex-direction: column; justify-content: center; gap: 6px; }
.hd-burger span { display: block; height: 2px; width: 22px; background: var(--tm-on-night); margin-inline: auto; transition: transform var(--tm-dur) var(--tm-ease), opacity var(--tm-dur) var(--tm-ease); }
.hd-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 76px 0 0 0; z-index: 99;
  background: var(--tm-night);
  padding: var(--tm-space-7) var(--tm-gutter) var(--tm-space-8);
  display: flex; flex-direction: column; gap: var(--tm-space-6);
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-h3);
  color: var(--tm-on-night); text-decoration: none;
  padding-block: var(--tm-space-4); border-bottom: 1px solid var(--tm-night-line);
}
.drawer-nav a:hover { color: var(--tm-on-night); text-decoration: none; }
.drawer-cta { width: 100%; }

@media (max-width: 1023px) {
  .hd-nav, .hd-cta { display: none; }
  .hd-burger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--tm-night); color: var(--tm-on-night);
  padding-block: calc(76px + var(--tm-space-10)) var(--tm-space-10);
  overflow: hidden;
}
.hero-in { position: relative; z-index: 2; }
.hero-mark {
  position: absolute; z-index: 1; pointer-events: none;
  right: -8%; top: 50%; transform: translateY(-50%);
  width: min(52vw, 620px); aspect-ratio: 1;
  background: url("../img/logo-tm.png") center / contain no-repeat;
  filter: brightness(0) invert(1); opacity: .06;
}
.hero-eyebrow { color: var(--tm-on-night-mute); margin-bottom: var(--tm-space-5); }
.hero-h1 {
  font-size: var(--tm-display-xl); line-height: .98; letter-spacing: -.02em;
  color: var(--tm-on-night); text-wrap: balance;
}
.hero-lead {
  margin-top: var(--tm-space-5); max-width: 46ch;
  font-size: var(--tm-body-l); line-height: 1.65; color: var(--tm-on-night-mute);
}
.hero-free { margin-top: var(--tm-space-4); font-size: var(--tm-body-l); color: var(--tm-on-night); }
.hero-free strong { font-weight: 800; }
.hero-ctas { margin-top: var(--tm-space-7); display: flex; flex-wrap: wrap; gap: var(--tm-space-3); }

.stripes {
  position: absolute; inset: auto 0 0 0; height: 14px; z-index: 2;
  background: repeating-linear-gradient(-55deg, var(--tm-red) 0 16px, transparent 16px 30px);
}

@media (max-width: 639px) {
  .hero { padding-block: calc(76px + var(--tm-space-8)) var(--tm-space-8); }
  .hero-mark { right: -30%; opacity: .05; }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   SEÇÕES / CABEÇALHOS
   ============================================================ */
.section { padding-block: var(--tm-section-y); }
.sec-night { background: var(--tm-night); color: var(--tm-on-night); }

.head { max-width: 62ch; margin-bottom: var(--tm-space-8); }
.head h2 { margin-top: var(--tm-space-4); text-wrap: balance; }
.head-sub { margin-top: var(--tm-space-4); font-size: var(--tm-body-l); color: var(--tm-mute); max-width: 56ch; }
.head-dark h2 { color: var(--tm-on-night); }
.head-dark .tm-eyebrow { color: var(--tm-on-night-mute); }
.head-dark .head-sub { color: var(--tm-on-night-mute); }

/* ============================================================
   NÚMEROS
   ============================================================ */
.stats-sec { padding-block: var(--tm-space-8); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tm-line); border-bottom: 1px solid var(--tm-line);
}
.stat {
  padding: var(--tm-space-6) var(--tm-space-5);
  display: flex; flex-direction: column; gap: var(--tm-space-2);
}
.stat + .stat { border-left: 1px solid var(--tm-line); }
.stat-n {
  font-family: var(--tm-font-display); font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.02em;
  color: var(--tm-black);
}
.stat-l { font-size: var(--tm-body-s); color: var(--tm-ink-2); max-width: 20ch; }

@media (max-width: 767px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--tm-line); }
  .stat + .stat { border-left: none; }
  .stat:nth-child(even) { border-left: 1px solid var(--tm-line); }
  .stat { padding: var(--tm-space-5) var(--tm-space-4); }
}

/* ============================================================
   TAGS DE CATEGORIA
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  border-radius: var(--tm-radius-sm); padding: 5px var(--tm-space-3);
  font-size: var(--tm-caption); font-weight: 700; line-height: 1.2;
  background: var(--c-bg); color: var(--c-fg);
  border: 1px solid color-mix(in srgb, var(--c-fg) 24%, transparent);
}
.cat-fund { --c-bg: var(--tm-cat-fund-bg); --c-fg: var(--tm-cat-fund-fg); }
.cat-adv  { --c-bg: var(--tm-cat-adv-bg);  --c-fg: var(--tm-cat-adv-fg); }
.cat-all  { --c-bg: var(--tm-cat-all-bg);  --c-fg: var(--tm-cat-all-fg); }
.cat-fem  { --c-bg: var(--tm-cat-fem-bg);  --c-fg: var(--tm-cat-fem-fg); }
.cat-kids { --c-bg: var(--tm-cat-kids-bg); --c-fg: var(--tm-cat-kids-fg); }
.cat-mt   { --c-bg: var(--tm-cat-thai-bg); --c-fg: var(--tm-cat-thai-fg); }

/* ============================================================
   CARD BASE
   ============================================================ */
.card {
  background: var(--tm-white); border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-lg); padding: var(--tm-space-5);
  transition: border-color var(--tm-dur) var(--tm-ease),
              box-shadow var(--tm-dur) var(--tm-ease),
              transform var(--tm-dur) var(--tm-ease);
}

/* ============================================================
   BENTO DE TURMAS
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--tm-grid-gap); }

.turma { display: flex; flex-direction: column; gap: var(--tm-space-3); grid-column: span 4; }
.turma:hover { border-color: var(--tm-line-strong); box-shadow: var(--tm-shadow-md); transform: translateY(-2px); }
.turma h3 { font-size: var(--tm-h3); }
.turma-meta {
  font-size: var(--tm-caption); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tm-faint); margin-top: calc(var(--tm-space-2) * -1);
}
.turma-body { font-size: var(--tm-body); color: var(--tm-ink); }
.turma-foot {
  margin-top: auto; padding-top: var(--tm-space-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--tm-space-3);
}

.turma-wide { grid-column: span 7; padding: var(--tm-space-6); }
.turma-wide h3 { font-size: var(--tm-h2); font-family: var(--tm-font-display); font-weight: 500; line-height: 1.1; }
.turma-wide .turma-body { font-size: var(--tm-body-l); max-width: 46ch; }
.turma-tall { grid-column: span 5; padding: var(--tm-space-6); }
.turma-tall h3 { font-size: var(--tm-h2); font-family: var(--tm-font-display); font-weight: 500; line-height: 1.1; }
.turma-tall .turma-body { font-size: var(--tm-body-l); }

.turma-strip {
  grid-column: span 12; flex-direction: row; align-items: center;
  justify-content: space-between; gap: var(--tm-space-6);
  background: transparent; border-style: dashed;
}
.turma-strip:hover { transform: none; box-shadow: none; border-color: var(--tm-line-strong); }
.strip-txt { display: flex; align-items: baseline; gap: var(--tm-space-5); flex-wrap: wrap; }
.turma-strip h3 { font-size: var(--tm-h4); font-family: var(--tm-font-ui); font-weight: 800; }
.turma-strip .turma-body { font-size: var(--tm-body-s); color: var(--tm-ink-2); max-width: 60ch; }
.turma-strip .btn { flex: none; }

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(8, 1fr); }
  .turma { grid-column: span 4; }
  .turma-wide, .turma-tall { grid-column: span 8; }
  .turma-strip { grid-column: span 8; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; }
  .turma, .turma-wide, .turma-tall, .turma-strip { grid-column: auto; }
  .turma-strip { flex-direction: column; align-items: flex-start; }
  .turma-foot .btn { width: 100%; }
}

/* ============================================================
   GRADE DE HORÁRIOS
   ============================================================ */
.sched {
  background: var(--tm-white); border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-xl); padding: var(--tm-space-6);
}
.sched-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tm-space-5); flex-wrap: wrap; margin-bottom: var(--tm-space-6);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--tm-space-2); }
.fbtn {
  height: 40px; padding-inline: var(--tm-space-4);
  border-radius: var(--tm-radius-pill); border: 1px solid var(--tm-line-strong);
  font-size: var(--tm-body-s); font-weight: 700; color: var(--tm-ink-2);
  display: inline-flex; align-items: center; gap: var(--tm-space-2);
  transition: background-color var(--tm-dur-fast) var(--tm-ease),
              color var(--tm-dur-fast) var(--tm-ease),
              border-color var(--tm-dur-fast) var(--tm-ease);
}
.fbtn:hover { border-color: var(--tm-black); color: var(--tm-black); }
.fbtn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-fg, var(--tm-black)); }
.fbtn[aria-pressed="true"] { background: var(--c-bg, var(--tm-black)); color: var(--c-fg, var(--tm-white)); border-color: color-mix(in srgb, var(--c-fg, var(--tm-black)) 30%, transparent); }
.fbtn.f-all[aria-pressed="true"] { background: var(--tm-black); color: var(--tm-white); border-color: var(--tm-black); }
.fbtn.f-all[aria-pressed="true"] .dot { background: var(--tm-red); }

.sched-count { font-size: var(--tm-body-s); color: var(--tm-mute); }
.sched-count b { color: var(--tm-black); font-weight: 800; }

/* --- desktop: grade --- */
.grid {
  display: grid; grid-template-columns: 92px repeat(5, 1fr);
  gap: 1px; background: var(--tm-line);
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); overflow: hidden;
}
.gh {
  background: var(--tm-white); padding: var(--tm-space-3) var(--tm-space-2);
  text-align: center; font-size: var(--tm-caption); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tm-black);
}
.gh.corner { background: var(--tm-paper); }
.gt {
  background: var(--tm-paper); padding: var(--tm-space-3);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.gt .t { font-size: var(--tm-body-s); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gt .p { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-faint); }
.gc { background: var(--tm-white); padding: var(--tm-space-2); display: flex; flex-direction: column; gap: var(--tm-space-1); }

.chip {
  display: block; text-decoration: none;
  border-radius: var(--tm-radius-sm); padding: 6px var(--tm-space-2);
  font-size: var(--tm-caption); font-weight: 700; line-height: 1.25;
  background: var(--c-bg); color: var(--c-fg);
  border: 1px solid color-mix(in srgb, var(--c-fg) 22%, transparent);
  transition: border-color var(--tm-dur-fast) var(--tm-ease), background-color var(--tm-dur-fast) var(--tm-ease);
}
.chip:hover { text-decoration: none; color: var(--c-fg); border-color: var(--c-fg); }
.grid .gc:empty { background: var(--tm-paper); }
.grid .row-off { display: none; }

/* --- mobile: lista por dia --- */
.days { display: flex; flex-direction: column; gap: var(--tm-space-5); }
.day { border-top: 1px solid var(--tm-line); padding-top: var(--tm-space-4); }
.day-l { font-size: var(--tm-eyebrow); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-mute); margin-bottom: var(--tm-space-3); }
.slot { display: grid; grid-template-columns: 72px 1fr; gap: var(--tm-space-3); padding-block: var(--tm-space-2); align-items: start; }
.slot + .slot { border-top: 1px solid var(--tm-line); }
.slot-t { font-size: var(--tm-body-s); font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 6px; }
.slot-c { display: flex; flex-wrap: wrap; gap: var(--tm-space-2); }
.slot-c .chip { flex: 0 1 auto; }

.sched-empty { padding: var(--tm-space-8) var(--tm-space-4); text-align: center; color: var(--tm-mute); }
.sched-fallback { font-size: var(--tm-body-s); color: var(--tm-mute); }
.sched-foot { margin-top: var(--tm-space-5); font-size: var(--tm-body); color: var(--tm-mute); }
.sched-foot a { cursor: pointer; font-weight: 700; }

@media (max-width: 899px) { .grid { display: none; } }
@media (min-width: 900px) { .days { display: none; } }
@media (max-width: 639px) {
  .sched { padding: var(--tm-space-4); border-radius: var(--tm-radius-lg); }
  .sched-bar { margin-bottom: var(--tm-space-5); }
}

/* ============================================================
   PRIMEIRA AULA
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--tm-grid-gap); }
.step {
  border-top: 1px solid var(--tm-night-line); padding-top: var(--tm-space-4);
  display: flex; flex-direction: column; gap: var(--tm-space-3);
}
.step-n {
  font-family: var(--tm-font-display); font-weight: 500; font-size: 32px;
  line-height: 1; color: var(--tm-red);
}
.step p { font-size: var(--tm-body-s); color: var(--tm-on-night-mute); }

.exp-cta {
  margin-top: var(--tm-space-8); padding-top: var(--tm-space-7);
  border-top: 1px solid var(--tm-night-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tm-space-6); flex-wrap: wrap;
}
.exp-hl {
  font-family: var(--tm-font-display); font-weight: 500; font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35;
  color: var(--tm-on-night); max-width: 34ch;
}

@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .steps { grid-template-columns: 1fr; } .exp-cta .btn { width: 100%; } }

/* ============================================================
   TATAMES SEPARADOS (assinatura)
   ============================================================ */
.sep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tm-space-9); align-items: center; }
.sep-txt h2 { margin-top: var(--tm-space-4); }
@media (min-width: 1024px) { .sep-txt h2 { max-width: 18ch; } }
.sep-p { margin-top: var(--tm-space-5); font-size: var(--tm-body-l); color: var(--tm-ink); }
.sep-close {
  margin-top: var(--tm-space-6); padding-top: var(--tm-space-5);
  border-top: 1px solid var(--tm-line);
  font-size: var(--tm-body); color: var(--tm-ink-2);
}

.mats { padding: var(--tm-space-6); }
.mats-cap { display: flex; align-items: baseline; gap: var(--tm-space-3); margin-bottom: var(--tm-space-5); }
.mats-time {
  font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-h2);
  line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.mats-day { font-size: var(--tm-eyebrow); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-mute); }

.mats-rows { display: flex; flex-direction: column; gap: var(--tm-space-3); }
.mat {
  display: flex; align-items: center; gap: var(--tm-space-4);
  border-radius: var(--tm-radius-md); padding: var(--tm-space-4) var(--tm-space-5);
  background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--c-fg) 20%, transparent);
  transform-origin: left center;
}
.mat-name { font-weight: 800; font-size: var(--tm-body); color: var(--c-fg); }
.mat-room { margin-inline-start: auto; font-size: var(--tm-caption); font-weight: 700; color: color-mix(in srgb, var(--c-fg) 70%, transparent); white-space: nowrap; }
.mats-note { margin-top: var(--tm-space-5); font-size: var(--tm-caption); color: var(--tm-faint); }

.js .mats .mat { opacity: 0; transform: scaleX(.4); }
.mats.is-in .mat { animation: matIn var(--tm-dur-slow) var(--tm-ease-out) both; }
.mats.is-in .mat:nth-child(2) { animation-delay: 90ms; }
.mats.is-in .mat:nth-child(3) { animation-delay: 180ms; }
.mats.is-in .mat:nth-child(4) { animation-delay: 270ms; }
@keyframes matIn { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mats .mat { opacity: 1; transform: none; } }

@media (max-width: 1023px) { .sep-grid { grid-template-columns: 1fr; gap: var(--tm-space-7); } }

/* ============================================================
   PROFESSOR
   ============================================================ */
.prof { display: grid; grid-template-columns: 5fr 7fr; gap: var(--tm-space-8); align-items: start; }
.prof-photo {
  margin: 0; aspect-ratio: 4 / 5; border-radius: var(--tm-radius-xl);
  overflow: hidden; background: var(--tm-night-2);
  border: 1px solid var(--tm-night-line);
}
.prof-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Grid de competição — prova que ele ainda compete */
.comp-block { margin-top: var(--tm-space-8); }
.comp-l { color: var(--tm-on-night-mute); margin-bottom: var(--tm-space-5); }
.comp { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--tm-grid-gap); }
.comp > * { min-width: 0; }
.comp figure { margin: 0; display: flex; flex-direction: column; }
.comp img {
  display: block; width: 100%; object-fit: cover;
  border-radius: var(--tm-radius-lg); border: 1px solid var(--tm-night-line);
  background: var(--tm-night-2);
}
.comp figcaption {
  padding-top: var(--tm-space-3);
  font-size: var(--tm-caption); color: var(--tm-on-night-mute);
}
/* A foto em ação define a altura da linha; as duas de pódio esticam para
   bater com ela. O height:auto é obrigatório — sem ele o atributo height
   do <img> vira a altura real e estoura o grid. */
.comp-main { grid-column: span 6; }
.comp-main img { height: auto; aspect-ratio: 3 / 2; }
.comp-side { grid-column: span 3; }
.comp-side img { height: 0; flex: 1 1 auto; min-height: 0; }

@media (max-width: 767px) {
  .comp { grid-template-columns: repeat(2, 1fr); }
  .comp-main { grid-column: span 2; }
  .comp-side { grid-column: span 1; }
  .comp-side img { height: auto; flex: none; aspect-ratio: 3 / 4; }
}

.proof { margin: var(--tm-space-8) 0 0; }
.proof img {
  display: block; width: 100%; height: auto; object-fit: cover;
  border-radius: var(--tm-radius-xl);
  border: 1px solid var(--tm-night-line);
}
.proof figcaption {
  margin-top: var(--tm-space-4); font-size: var(--tm-caption);
  color: var(--tm-on-night-mute);
}
@media (max-width: 767px) { .proof img { aspect-ratio: 4 / 3; } }
@media (max-width: 479px) { .proof img { aspect-ratio: 1 / 1; } }
.prof-txt p { font-size: var(--tm-body-l); color: var(--tm-on-night-mute); }
.prof-reads { margin-top: var(--tm-space-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--tm-space-6); }
.read { border-top: 1px solid var(--tm-night-line); padding-top: var(--tm-space-4); }
.read-l {
  font-size: var(--tm-eyebrow); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tm-on-night); margin-bottom: var(--tm-space-3);
  display: flex; align-items: flex-start; gap: var(--tm-space-2);
}
.read-l::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tm-red); flex: none; margin-top: .4em;
}
.read p:not(.read-l) { font-size: var(--tm-body); }

@media (max-width: 1023px) {
  .prof { grid-template-columns: 1fr; gap: var(--tm-space-6); }
  .prof-photo { aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) { .prof-reads { grid-template-columns: 1fr; gap: var(--tm-space-5); } }

/* ============================================================
   GALERIA
   ============================================================ */
/* Faixa de foto de ponta a ponta */
.band { margin: 0; }
.band img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2400 / 925; object-fit: cover;
}
.band-cap {
  padding-block: var(--tm-space-4);
  font-size: var(--tm-caption); color: var(--tm-mute);
}
/* Em tela estreita, a panorâmica inteira deixaria cada pessoa do tamanho de
   um grão. Cortamos o miolo para as pessoas aparecerem em tamanho legível. */
@media (max-width: 1023px) { .band img { aspect-ratio: 16 / 9; } }
@media (max-width: 767px)  { .band img { aspect-ratio: 4 / 3; } }
@media (max-width: 479px)  { .band img { aspect-ratio: 1 / 1; } }

/* Galeria */
.gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--tm-grid-gap); }
.shot { margin: 0; display: flex; flex-direction: column; }
.shot img {
  width: 100%; flex: 1; min-height: 0; object-fit: cover;
  border-radius: var(--tm-radius-xl); border: 1px solid var(--tm-line);
  background: var(--tm-paper-2);
}
.shot figcaption {
  padding-top: var(--tm-space-3);
  font-size: var(--tm-caption); color: var(--tm-mute);
}
.shot-sala  { grid-column: span 8; grid-row: 1; }
.shot-sala img  { aspect-ratio: 16 / 9; }
.shot-fem   { grid-column: span 8; grid-row: 2; }
.shot-fem img   { aspect-ratio: 16 / 9; }
.shot-turma { grid-column: span 4; grid-row: 1 / span 2; }

@media (max-width: 767px) {
  .gal { grid-template-columns: 1fr; }
  .shot, .shot-turma { grid-column: auto; grid-row: auto; }
  .shot img { aspect-ratio: 3 / 2; }
  .shot-turma img { aspect-ratio: 3 / 4; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--tm-space-8); align-items: start; }
.faq-head { margin-bottom: 0; position: sticky; top: 112px; }
.faq-head h2 { text-wrap: balance; }

.qa { border-top: 1px solid var(--tm-line); }
.qa:last-child { border-bottom: 1px solid var(--tm-line); }
.qa summary {
  list-style: none; cursor: pointer;
  padding-block: var(--tm-space-5);
  display: flex; align-items: center; gap: var(--tm-space-4);
  font-size: var(--tm-h4); font-weight: 800; letter-spacing: -.01em;
  transition: color var(--tm-dur-fast) var(--tm-ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--tm-red-deep); }
.qa summary::after {
  content: ""; margin-inline-start: auto; flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--tm-black) 0 0) center / 14px 1.5px no-repeat,
    linear-gradient(var(--tm-black) 0 0) center / 1.5px 14px no-repeat;
  transition: transform var(--tm-dur) var(--tm-ease);
}
.qa[open] summary::after { transform: rotate(90deg); background-size: 14px 1.5px, 0 0; }
.qa p { padding-bottom: var(--tm-space-5); max-width: 62ch; color: var(--tm-ink); }
.qa a { cursor: pointer; font-weight: 700; }

@media (max-width: 1023px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--tm-space-6); }
  .faq-head { position: static; margin-bottom: var(--tm-space-4); }
}

/* ============================================================
   FAIXA CTA
   ============================================================ */
.cta-band { position: relative; background: var(--tm-night); color: var(--tm-on-night); padding-block: var(--tm-space-9); overflow: hidden; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-7); flex-wrap: wrap; }
.cta-txt { flex: 1 1 520px; max-width: 700px; }
.cta-in .btn { flex: none; }
.cta-h { font-size: var(--tm-display-l); line-height: 1.02; letter-spacing: -.02em; color: var(--tm-on-night); }
.cta-sub { margin-top: var(--tm-space-4); font-size: var(--tm-body-l); color: var(--tm-on-night-mute); max-width: 44ch; }
.stripes-b { inset: 0 0 auto 0; }
@media (max-width: 639px) { .cta-in .btn { width: 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.ft { background: var(--tm-night); color: var(--tm-on-night); padding-block: var(--tm-space-8) var(--tm-space-6); border-top: 1px solid var(--tm-night-line); }
.ft-in { display: grid; grid-template-columns: 3fr 3fr 2fr 4fr; gap: var(--tm-space-7); align-items: start; }
.ft-logo { height: 44px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--tm-space-4); }
.ft-name { font-weight: 800; }
.ft-city { font-size: var(--tm-body-s); color: var(--tm-on-night-mute); }
.ft-l { font-size: var(--tm-eyebrow); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--tm-faint); margin-bottom: var(--tm-space-4); }
.ft-col p { font-size: var(--tm-body-s); color: var(--tm-on-night-mute); margin-bottom: var(--tm-space-2); }
.ft-txt { max-width: 28ch; }
.ft a { color: var(--tm-on-night); cursor: pointer; }
.ft a:hover { color: var(--tm-red); }
.ft-map {
  border-radius: var(--tm-radius-lg); overflow: hidden;
  border: 1px solid var(--tm-night-line); background: var(--tm-night-2);
}
.ft-map:empty { display: none; }
/* Dessaturação leve: tira o ruído de cor do mapa sem prejudicar a leitura
   dos nomes de rua. Filtro forte fazia o mapa parecer defeito. */
.ft-map iframe {
  display: block; width: 100%; height: 260px; border: 0;
  filter: grayscale(.45) contrast(1.04);
}
@media (max-width: 1023px) { .ft-map iframe { height: 220px; } }

.ft-base {
  margin-top: var(--tm-space-7); padding-top: var(--tm-space-5);
  border-top: 1px solid var(--tm-night-line);
  display: flex; justify-content: space-between; gap: var(--tm-space-4); flex-wrap: wrap;
  font-size: var(--tm-caption); color: var(--tm-faint);
}

@media (max-width: 1023px) { .ft-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px)  { .ft-in { grid-template-columns: 1fr; gap: var(--tm-space-6); } }

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wa-float {
  position: fixed; right: var(--tm-space-5); bottom: var(--tm-space-5); z-index: 90;
  width: 56px; height: 56px; border-radius: var(--tm-radius-pill);
  background: var(--tm-red); color: var(--tm-white);
  display: grid; place-items: center; box-shadow: var(--tm-shadow-md);
  opacity: 0; visibility: hidden;
  transition: background-color var(--tm-dur-fast) var(--tm-ease),
              opacity var(--tm-dur) var(--tm-ease), visibility var(--tm-dur) var(--tm-ease);
}
.wa-float.is-on { opacity: 1; visibility: visible; }
.wa-float:hover { background: var(--tm-red-deep); color: var(--tm-white); }
.wa-float svg { width: 26px; height: 26px; }

/* ============================================================
   PASSE DE MOBILE
   Em tela de toque, todo elemento clicável precisa de pelo menos
   44px de altura (regra de acessibilidade do HANDOFF, seção 6).
   No desktop os tamanhos do design system valem como estão.
   ============================================================ */
@media (max-width: 767px) {
  /* Rótulo em português é longo e quebra em duas linhas. Com altura fixa e
     line-height 1 as linhas se sobrepõem; aqui o botão cresce e o texto
     respira. O mínimo mantém o alvo de toque. */
  .btn {
    height: auto; min-height: 48px; line-height: 1.25;
    padding-block: 12px; text-align: center;
  }
  .btn-lg { min-height: 56px; }

  /* Pílulas de filtro da grade. */
  .fbtn { height: auto; min-height: 44px; padding-block: 8px; }

  /* Retrato vertical pede recorte vertical no celular — em 3:2 a foto
     cortava o professor na altura do peito e sobrava parede. */
  .prof-photo { aspect-ratio: 4 / 5; }

  /* Links de texto ganham área de toque sem mudar o desenho. */
  .lnk { padding-block: 10px; }
  .sched-foot a, .qa a { display: inline-block; padding-block: 6px; }

  /* Logo do header: 36px de imagem dentro de 44px de área. */
  .hd-logo { display: flex; align-items: center; min-height: 44px; }

  /* Cada aula da lista por dia é um link para o WhatsApp. */
  .slot-c .chip { min-height: 44px; display: flex; align-items: center; }
  .slot { grid-template-columns: 62px 1fr; }

  /* Links do rodapé são navegação isolada: precisam dos 44px cheios.
     Já os links dentro de frase (FAQ, rodapé da grade) ficam menores de
     propósito — a WCAG isenta link em linha de texto, e forçar altura ali
     faria a área de toque invadir a linha de cima. */
  .ft-col p { margin-bottom: 0; }
  .ft-col a { display: inline-block; padding-block: 11px; }

  /* Cabeçalho da grade empilha sem aperto. */
  .sched-bar { flex-direction: column; align-items: flex-start; gap: var(--tm-space-4); }

  /* Cartão dos tatames: hora e dia lado a lado sem quebrar. */
  .mats-cap { flex-wrap: wrap; row-gap: var(--tm-space-1); }

  /* Números de destaque não precisam do tamanho de desktop. */
  .stat-n { font-size: 40px; }
}

/* ============================================================
   REVEAL
   ============================================================ */
/* Sem JS, nada é escondido — a classe .js só existe se o script rodou. */
.js [data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--tm-dur-slow) var(--tm-ease-out), transform var(--tm-dur-slow) var(--tm-ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }