/* ==========================================================================
   Gracie Barra Tubarão · design system
   Estética de referência: Art of Jiu Jitsu (preto no branco, Bebas Neue em
   caixa alta, corpo pequeno com tracking, muito respiro, cantos retos).
   Acento único: vermelho do escudo Gracie Barra (#E2211C), com parcimônia.
   Mobile-first. Componentes documentados no README.md.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* cor */
  --c-bg: #ffffff;
  --c-ink: #000000;
  --c-ink-2: rgba(0, 0, 0, .72);   /* texto secundário (AA em branco) */
  --c-soft: #f5f5f5;               /* faixas de sub-menu e blocos meta */
  --c-frame: #fafafa;
  --c-line: #000000;
  --c-line-soft: rgba(0, 0, 0, .14);
  --c-accent: #e2211c;             /* vermelho do escudo GB: 4,7:1 no branco */
  --c-btn-hover: #333333;
  --c-on-dark: #ffffff;
  --c-overlay: rgba(0, 0, 0, .55);

  /* fontes */
  --f-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --f-body: "Helvetica Neue", Helvetica, Arimo, Arial, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, monospace;

  /* escala tipográfica (mobile → desktop) */
  --fs-hero: clamp(4.25rem, 14vw, 11rem);
  --fs-h1: clamp(2.75rem, 7vw, 4.5rem);
  --fs-h2: clamp(2.25rem, 4.5vw, 3rem);
  --fs-h3: clamp(1.75rem, 3vw, 2.375rem);
  --fs-lead: .9375rem;   /* 15px */
  --fs-body: .8125rem;   /* 13px */
  --fs-ui: .6875rem;     /* 11px: nav, botões, footer, eyebrow */
  --lh-body: 2;          /* 26px no corpo */
  --ls-body: .06em;
  --ls-ui: .1em;

  /* espaço (base 4px) */
  --sp-1: .5rem;   /* 8 */
  --sp-2: .75rem;  /* 12 */
  --sp-3: 1.25rem; /* 20 */
  --sp-4: 2.5rem;  /* 40 */
  --sp-5: 3rem;    /* 48 */
  --sp-6: 5rem;    /* 80 */
  --sp-section: clamp(4.5rem, 10vw, 9rem);
  --gutter: 1rem;  /* 16px no celular */

  /* larguras */
  --w-text: 47.5rem;   /* 760px: coluna de texto */
  --w-narrow: 36rem;   /* 576px */
  --w-media: 60rem;    /* 960px: foto larga */
  --w-wide: 75rem;     /* 1200px */

  /* forma */
  --radius-btn: 5px;
  --header-h: 68px;
  --subnav-h: 52px;

  /* movimento */
  --ease-out-slow: cubic-bezier(0, 0, .3, 1);
  --dur-reveal: .6s;
  --dur-ui: .25s;

  /* camadas */
  --z-header: 30;
  --z-menu: 40;
  --z-float: 20;
}
@media (min-width: 48rem) { :root { --gutter: 2.5rem; } }

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-transform: uppercase;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--c-ink); color: var(--c-on-dark); padding: .75rem 1rem;
  font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-decoration: none;
}
.skip-link:focus { top: .5rem; }

/* 3. Layout ---------------------------------------------------------------- */
/* .section: bloco vertical com respiro. Variações: --soft (fundo #F5F5F5),
   --dark (preto), --tight (metade do respiro), --flush-top / --flush-bottom. */
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: calc(var(--sp-section) / 2); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--soft { background: var(--c-soft); }
.section--dark { background: var(--c-ink); color: var(--c-on-dark); }

/* .container: largura máxima centralizada com gutter lateral.
   --text (760), --narrow (576), --media (960), --wide (1200), --bleed (100%). */
.container { width: 100%; max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)); }
.container--media { max-width: calc(var(--w-media) + 2 * var(--gutter)); }
.container--bleed { max-width: none; padding-inline: 0; }

.center { text-align: center; }
.nowrap { white-space: nowrap; } /* ex.: <span class="nowrap">Jiu-Jitsu</span> em títulos, evita quebra no hífen */
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-4); }

/* 4. Tipografia ------------------------------------------------------------ */
/* .eyebrow: rótulo técnico em Space Mono com um traço vermelho curto antes. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--f-mono); font-size: var(--fs-ui); line-height: 1.4;
  letter-spacing: .25em; color: var(--c-ink-2); margin: 0 0 var(--sp-3);
}
.eyebrow::before { content: ""; width: 1.25rem; height: 2px; background: var(--c-accent); flex: none; }
.section--dark .eyebrow, .hero .eyebrow { color: rgba(255, 255, 255, .8); }

/* .title: título display (Bebas Neue). Tamanhos: --xl (h1 de página),
   padrão (h2 de seção), --md (h3 de card/bloco). */
.title {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2);
  line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  margin: 0 0 var(--sp-3); text-wrap: balance;
}
.title--xl { font-size: var(--fs-h1); line-height: 1; }
.title--md { font-size: var(--fs-h3); line-height: 1.05; }
.title:last-child { margin-bottom: 0; }

/* .prose: bloco de texto corrido (coluna estreita). .prose--center centraliza. */
.prose { max-width: var(--w-text); }
.prose--center { margin-inline: auto; text-align: center; }
.lead { font-size: var(--fs-lead); line-height: 1.85; }
.muted { color: var(--c-ink-2); }

/* 5. Botões e links -------------------------------------------------------- */
/* .btn (outline), .btn--primary (preto cheio), .btn--light (sobre foto/escuro).
   .btn-row agrupa botões centralizados. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75rem 2rem;
  border: 1px solid var(--c-line); border-radius: var(--radius-btn);
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--f-body); font-size: var(--fs-ui); font-weight: 400;
  letter-spacing: var(--ls-ui); line-height: 1.3; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui), transform .1s;
}
.btn:hover { background: var(--c-ink); color: var(--c-on-dark); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--c-ink); color: var(--c-on-dark); }
.btn--primary:hover { background: var(--c-btn-hover); border-color: var(--c-btn-hover); }
.btn--light { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark); }
.btn--light:hover { background: var(--c-on-dark); color: var(--c-ink); }
.btn--solid-light { background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark); }
.btn--solid-light:hover { background: transparent; color: var(--c-on-dark); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.btn-row--start { justify-content: flex-start; }
@media (max-width: 29.99rem) { .btn-row .btn { width: 100%; } }

/* .link-more: link de texto sublinhado ("Saiba mais"). Hover sublinha em vermelho. */
.link-more {
  display: inline-block; font-size: var(--fs-ui); letter-spacing: var(--ls-ui);
  text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px;
  padding-block: .6rem; transition: text-decoration-color var(--dur-ui);
}
.link-more:hover { text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }

/* 6. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line-soft);
}
.site-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--header-h); padding-inline: var(--gutter);
  max-width: 1600px; margin-inline: auto;
}
.brand {
  grid-column: 2; display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--c-ink);
}
.brand__mark { width: 30px; height: 30px; }
.brand__name { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .14em; line-height: 1; padding-top: .15em; white-space: nowrap; }
.brand__mark, .brand__name { flex: none; }
@media (max-width: 29.99rem) { .brand__name { font-size: 1.15rem; letter-spacing: .1em; } .brand__mark { width: 26px; height: 26px; } }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.4rem; }
.nav__list--start { padding-right: 1.5rem; }
.nav__list--end { padding-left: 1.5rem; }
.nav__list--end { justify-content: flex-end; }
.nav a:not(.btn), .nav__toggle {
  font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-decoration: none;
  color: var(--c-ink); padding-block: .5rem; background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); text-transform: uppercase; display: inline-flex; align-items: center; gap: .35rem;
  text-underline-offset: .5em; text-decoration-thickness: 1px;
}
.nav a:not(.btn):hover, .nav__toggle:hover { text-decoration: underline; }
.nav a[aria-current="page"], .nav .is-active > .nav__toggle { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.nav__toggle svg { width: 8px; height: 5px; transition: transform var(--dur-ui); }
.nav__item { position: relative; }
.nav__dropdown {
  position: absolute; top: calc(100% + .75rem); left: -1.25rem; min-width: 15rem;
  list-style: none; margin: 0; padding: .75rem 0; background: var(--c-bg);
  border: 1px solid var(--c-line); display: none;
}
.nav__item.is-open .nav__dropdown { display: block; }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.nav__dropdown a { display: block; padding: .45rem 1.25rem; }
.nav .btn { min-height: 40px; padding: .5rem 1.25rem; }
.nav .btn:hover { text-decoration: none; }

.menu-button {
  grid-column: 1; grid-row: 1; justify-self: start; width: 44px; height: 44px; margin-left: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--c-ink);
}
.menu-button svg { width: 22px; height: 22px; }
.header-cta { display: none; grid-column: 3; justify-self: end; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-decoration: none; padding: .75rem 0; }
@media (min-width: 48rem) { .header-cta { display: inline-block; } }
.header-cta:hover { text-decoration: underline; text-underline-offset: .5em; }

@media (min-width: 80rem) {
  .menu-button, .header-cta { display: none; }
  .nav { display: contents; }
  .nav__list--start { grid-column: 1; grid-row: 1; }
  .nav__list--end { grid-column: 3; grid-row: 1; }
}

/* menu mobile (painel em tela cheia abaixo do header) */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  background: var(--c-bg); overflow-y: auto; padding: var(--sp-4) var(--gutter) var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--c-line-soft); }
.mobile-menu a { display: block; padding: .9rem 0; text-decoration: none; font-family: var(--f-display); font-size: 2rem; letter-spacing: .03em; line-height: 1.1; }
.mobile-menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.mobile-menu__group { padding: .9rem 0; }
.mobile-menu__label { font-family: var(--f-mono); font-size: var(--fs-ui); letter-spacing: .25em; color: var(--c-ink-2); }
.mobile-menu__group ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.mobile-menu__group a { font-size: 1.5rem; padding: .5rem 0; }
.mobile-menu .btn { width: 100%; margin-top: var(--sp-4); font-family: var(--f-body); font-size: var(--fs-ui); }
body.menu-open { overflow: hidden; }

/* .subnav: faixa cinza com links centralizados separados por "·" (AOJ text bar).
   No celular vira rolagem horizontal contida. */
.subnav { background: var(--c-soft); }
.subnav__list {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); min-height: var(--subnav-h);
  display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none;
  white-space: nowrap; max-width: 100%;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { display: flex; align-items: center; }
.subnav__list li + li::before { content: "·"; padding-inline: .9rem; color: var(--c-ink-2); }
.subnav a { font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-decoration: none; padding-block: .9rem; }
.subnav a:hover { text-decoration: underline; text-underline-offset: .5em; }
.subnav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .5em; }
@media (min-width: 48rem) { .subnav__list { justify-content: center; } }

/* 7. Hero ------------------------------------------------------------------ */
/* .hero: foto full-bleed com véu escuro e conteúdo branco centralizado.
   Filhos: .hero__media (picture/img ou vídeo), .hero__content, .hero__mark
   (escudo), .hero__title (slogan gigante), .hero__caption. */
.hero {
  position: relative; isolation: isolate; display: grid; place-items: center;
  min-height: max(34rem, min(calc(100svh - var(--header-h)), 60rem));
  color: var(--c-on-dark); text-align: center; overflow: hidden;
}
.hero__media, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72) 100%);
}
.hero__content { padding: var(--sp-6) var(--gutter); display: flex; flex-direction: column; align-items: center; }
.hero__mark { width: clamp(64px, 9vw, 96px); height: auto; margin-bottom: var(--sp-4); }
.hero__title {
  font-family: var(--f-display); font-size: var(--fs-hero); line-height: .88; letter-spacing: .01em;
  margin: 0; max-width: 11ch; text-wrap: balance;
}
.hero__title sup { font-family: var(--f-body); font-size: .12em; vertical-align: top; position: relative; top: .5em; margin-left: .15em; letter-spacing: 0; }
.hero__caption { margin: var(--sp-4) 0 0; font-size: var(--fs-lead); letter-spacing: var(--ls-ui); }
.hero .btn-row { margin-top: var(--sp-3); }

/* .page-intro: abertura de página interna (título + lead + botões), centralizada. */
.page-intro { padding-block: clamp(3.5rem, 8vw, 7rem) var(--sp-section); text-align: center; }
.page-intro .title--xl { max-width: 16ch; margin-inline: auto; margin-bottom: var(--sp-4); }
.page-intro .prose { margin-inline: auto; }

/* 8. Mídia ----------------------------------------------------------------- */
/* .figure: foto larga centralizada (usar dentro de .container--media ou --wide).
   .figure--bleed: foto de borda a borda. .figure__img define proporção via
   modificadores --3x2, --16x9, --4x5, --21x9. */
.figure { margin: 0; }
.figure img { width: 100%; object-fit: cover; }
.figure--3x2 img { aspect-ratio: 3 / 2; }
.figure--16x9 img { aspect-ratio: 16 / 9; }
.figure--4x5 img { aspect-ratio: 4 / 5; }
.figure--21x9 img { aspect-ratio: 16 / 10; }
@media (min-width: 48rem) { .figure--21x9 img { aspect-ratio: 21 / 9; } }
.figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--c-ink-2); }

/* .pair: duas fotos verticais lado a lado (empilham no celular abaixo de 30rem). */
.pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; max-width: 55rem; margin-inline: auto; }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48rem) { .pair { gap: 20px; } }

/* .video: embed 16:9 responsivo (iframe youtube-nocookie). */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--c-ink); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* .map: embed do Google Maps em tons de cinza (cor volta no hover/foco). */
.map { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--c-line); background: var(--c-soft); }
@media (min-width: 48rem) { .map { aspect-ratio: 16 / 9; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .4s; }
.map:hover iframe, .map:focus-within iframe { filter: none; }

/* 9. Blocos ---------------------------------------------------------------- */
/* .split: título à esquerda, texto à direita (AOJ "Our Method"). Empilha no celular. */
.split { display: grid; gap: var(--sp-3); }
.split__title { text-align: left; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--sp-6); align-items: start; }
  .split__title { text-align: right; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* .list: lista com marcador quadrado. .list--terms: primeiro trecho em negrito
   (<strong>Termo:</strong> texto). .list--center centraliza a coluna. */
.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-top: 1px solid var(--c-line-soft); }
.list li:last-child { border-bottom: 1px solid var(--c-line-soft); }
.list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 6px; height: 6px; background: var(--c-ink); }
.list--center { max-width: var(--w-text); margin-inline: auto; }
.section--dark .list li { border-color: rgba(255,255,255,.2); }
.section--dark .list li::before { background: var(--c-on-dark); }

/* .facts: grade de blocos curtos (endereço, horário, contato). */
.facts { display: grid; gap: var(--sp-4); }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
.fact { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.fact .title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.fact a { text-underline-offset: .35em; }
.fact a:hover { text-decoration-color: var(--c-accent); }

/* .programs: faixa full-bleed com foto e cards de programa (AOJ "Academy
   programs"). Card em hover/foco vira caixa branca sólida. */
.programs { position: relative; isolation: isolate; color: var(--c-on-dark); padding-block: var(--sp-section); overflow: hidden; }
.programs__media, .programs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.programs::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .72); z-index: -1; }
.programs__grid { display: grid; gap: 1px; margin-top: var(--sp-5); }
@media (min-width: 48rem) { .programs__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
@media (min-width: 72rem) { .programs__grid { grid-template-columns: repeat(3, 1fr); } }
.program-card {
  position: relative; display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .7); transition: background-color var(--dur-ui), color var(--dur-ui);
}
.program-card .title { margin-bottom: var(--sp-2); }
.program-card > p:not(.program-card__tag) { flex: 1; }
.program-card .link-more { margin-top: var(--sp-3); align-self: flex-start; }
.program-card .link-more::after { content: ""; position: absolute; inset: 0; } /* card inteiro clicável */
.program-card:hover, .program-card:focus-within { background: var(--c-bg); color: var(--c-ink); border-top-color: var(--c-accent); }
.program-card__tag { font-family: var(--f-mono); font-size: var(--fs-ui); letter-spacing: .25em; margin-bottom: var(--sp-1); opacity: .85; }

/* .people: fileira de instrutores (foto vertical escurecida, nome na base).
   .person > img + .person__name + .person__role */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .people { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.person { position: relative; margin: 0; color: var(--c-on-dark); overflow: hidden; }
.person img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; }
.person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%); }
.person figcaption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--sp-3); text-align: center; }
.person__name { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1; display: block; }
.person__role { font-size: var(--fs-ui); letter-spacing: var(--ls-ui); display: block; margin-top: .4rem; }

/* .quote: citação grande em Bebas com autoria em mono. */
.quote { margin: 0 auto; max-width: 52rem; text-align: center; }
.quote p { font-family: var(--f-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: .01em; }
.quote cite { display: block; margin-top: var(--sp-3); font-style: normal; font-family: var(--f-mono); font-size: var(--fs-ui); letter-spacing: .25em; color: var(--c-ink-2); }

/* .faq: perguntas em <details>/<summary> com "+" que gira. */
.faq { max-width: var(--w-text); margin-inline: auto; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 1.1rem 0; font-weight: 700; letter-spacing: var(--ls-body); min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1; flex: none; transition: transform var(--dur-ui), color var(--dur-ui); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--c-accent); }
.faq summary:hover { text-decoration: underline; text-underline-offset: .4em; }
.faq__answer { padding: 0 2.5rem 1.4rem 0; color: var(--c-ink-2); }

/* .cta-band: faixa preta final com título, texto curto e botão. Filete
   vermelho de 3px no topo (único uso de cor em área grande). */
.cta-band { background: var(--c-ink); color: var(--c-on-dark); text-align: center; padding-block: var(--sp-section); border-top: 3px solid var(--c-accent); }
.cta-band .title { margin-bottom: var(--sp-2); }

/* .stats: números grandes (Bebas) com legenda. */
.stats { display: grid; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; text-align: center; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats__num { display: block; font-family: var(--f-display); font-size: clamp(3.5rem, 8vw, 6rem); line-height: 1; }
.stats__label { font-size: var(--fs-ui); letter-spacing: var(--ls-ui); }

/* .table: tabela de grade horária ou planos, 1px preto, rolagem contida no celular. */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); line-height: 1.6; min-width: 44rem; }
.table th, .table td { padding: .9rem 1rem; border-bottom: 1px solid var(--c-line-soft); text-align: left; vertical-align: top; }
.table thead th { background: var(--c-ink); color: var(--c-on-dark); font-weight: 400; }
.table tbody th { font-weight: 700; white-space: nowrap; }
.table tr.is-featured { background: var(--c-soft); }

/* .stub: página em construção. */
.stub { min-height: 50vh; display: grid; place-items: center; text-align: center; }

/* 10. Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--c-line); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); line-height: 1.9; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--c-accent); }
.site-footer__cols { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__col a { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .site-footer__cols { grid-template-columns: 1.1fr 1fr 1fr 1.4fr 1.2fr; padding-block: var(--sp-6); } }
.site-footer__col h2 { font-family: var(--f-mono); font-size: var(--fs-ui); letter-spacing: .25em; color: var(--c-ink-2); margin-bottom: var(--sp-2); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { padding-block: .15rem; }
.site-footer__brand, .site-footer__col--wide { grid-column: 1 / -1; }
@media (min-width: 60rem) { .site-footer__brand, .site-footer__col--wide { grid-column: auto; } }
.site-footer__brand img { width: 96px; height: 96px; margin-bottom: var(--sp-2); }
.site-footer__bottom {
  border-top: 1px solid var(--c-line-soft); padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); justify-content: space-between;
}
@media (max-width: 47.99rem) { .site-footer__bottom { padding-bottom: calc(var(--sp-4) + 72px); } } /* espaço do botão flutuante */

/* 11. WhatsApp flutuante (só no celular) ----------------------------------- */
.wa-float {
  position: fixed; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); z-index: var(--z-float);
  width: 52px; height: 52px; border-radius: 50%; background: var(--c-ink); color: var(--c-on-dark);
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.35);
  transition: background-color var(--dur-ui);
}
.wa-float:hover { background: var(--c-btn-hover); }
.wa-float svg { width: 24px; height: 24px; }
@media (min-width: 48rem) { .wa-float { display: none; } }

/* 12. Movimento: reveal no scroll ------------------------------------------ */
/* Marcar elementos com [data-reveal]. O JS adiciona .is-visible ao entrar na
   tela e escalona irmãos em 75ms (--reveal-order). Sem JS, nada fica oculto. */
.js [data-reveal] { opacity: .01; transform: translateY(2rem); }
.js [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out-slow), transform var(--dur-reveal) var(--ease-out-slow);
  transition-delay: calc(var(--reveal-order, 0) * 75ms);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
.map--spaced { margin-top: var(--sp-5); }
.spaced { margin-top: var(--sp-5); }
/* card sem etiqueta (ex.: Aulas Particulares) alinha o título com os vizinhos */
@media (min-width: 48rem) { .program-card:not(:has(.program-card__tag)) { padding-top: calc(var(--sp-4) + var(--fs-ui) * 1.4 + var(--sp-1)); } }