/* Layout das páginas do site. Os componentes trazem o estilo deles;
   aqui é só composição de página. Escrito celular primeiro: é no celular,
   por link de WhatsApp, que quase todo mundo chega. */

body { margin: 0; background: var(--tb-color-surface-default); }

.centro { max-width: 1120px; margin-inline: auto; padding-inline: var(--tb-space-6); }
.faixa { padding-block: var(--tb-space-16); }

/* Olho com régua: filete terracota que sai da palavra e vai até a margem.
   É decorativo — quem informa é a palavra. Lei da terracota. */
.regua { display: flex; align-items: center; gap: var(--tb-space-4); margin: 0 0 var(--tb-space-5); }
.regua::after { content: ""; flex: 1; height: 1px; background: var(--tb-color-brand-terracotta); }
.sobre-escuro .regua::after { background: var(--tb-color-brand-sky); }

/* Cabeçalho ---------------------------------------------------------- */
.topo { padding-block: var(--tb-space-6); }
.topo__interno { display: flex; align-items: center; gap: var(--tb-space-6); }
.topo__marca { display: inline-flex; }
.topo__nav { display: none; }
.topo__botao { display: inline-flex; align-items: center; justify-content: center; width: var(--tb-size-touch-target-min); height: var(--tb-size-touch-target-min); margin-inline-start: auto; padding: 0; background: none; border: 0; color: var(--tb-color-text-primary); cursor: pointer; }

/* Gaveta do celular: a navegação em Fraunces, do tamanho de um título, sobre
   navy. Quatro destinos não cabem numa régua de 44px em 430px de tela. */
.gaveta {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background: var(--tb-color-surface-inverse); color: var(--tb-color-text-inverse);
  padding: var(--tb-space-6);
  animation: entra .28s cubic-bezier(.2, .7, .3, 1) both;
}
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; }
.gaveta .topo__botao { color: var(--tb-color-text-inverse); margin-inline-start: 0; }
.gaveta__lista { display: grid; margin-top: var(--tb-space-10); }
.gaveta__link {
  display: flex; align-items: center; min-height: 64px;
  font-family: var(--tb-font-display); font-weight: var(--tb-weight-display-regular);
  font-size: var(--tb-text-2xl); line-height: var(--tb-leading-snug);
  color: var(--tb-color-text-inverse); text-decoration: none;
  border-bottom: 1px solid var(--tb-color-text-inverse-secondary);
}
.gaveta__link[aria-current="page"] { border-bottom: 3px solid var(--tb-color-brand-sky); }
.gaveta__pe { margin-top: auto; display: grid; gap: var(--tb-space-5); justify-items: start; padding-top: var(--tb-space-8); }

/* Hero ----------------------------------------------------------------
   A headline tem duas partes com pesos diferentes: o gancho ("Dor no corpo
   não é coisa da idade.") entra grande, e a virada entra menor. Sem essa
   hierarquia a dobra vira um bloco cinza de texto. */
.hero { position: relative; }
.hero__texto { padding-block: var(--tb-space-8) var(--tb-space-16); }
.hero__titulo { margin: 0; letter-spacing: var(--tb-tracking-display-tight); }
.hero__gancho { display: block; font-size: clamp(2.5rem, 10.5vw, 3.1rem); line-height: 1.04; }
.hero__virada { display: block; font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.25; margin-top: var(--tb-space-2); color: var(--tb-color-text-secondary); max-width: 24ch; }
.hero__virada .voz { color: var(--tb-color-text-primary); }
.hero__linha { font-size: var(--tb-text-md); max-width: 32ch; margin-top: var(--tb-space-4); }
.hero__texto .chamada { margin-top: var(--tb-space-6) !important; }

/* Arco: a meia-lua da marca virando recorte de foto. */
.hero__arco { padding-inline: var(--tb-space-6); }
.hero__foto { width: 100%; height: 56vh; max-height: 460px; object-fit: cover; object-position: 50% 38%; display: block; border-radius: 999px 999px var(--tb-radius-lg) var(--tb-radius-lg); }

/* A palavra da marca, tracking 0.9em, como filete tipográfico. Uma vez só na página. */
.pilates-lockup {
  margin: var(--tb-space-6) 0 0;
  max-width: none;
  font-weight: var(--tb-weight-body-light);
  font-size: var(--tb-text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tb-tracking-pilates);
  color: var(--tb-color-text-secondary);
  text-align: center;
  text-indent: var(--tb-tracking-pilates);
}

/* Dobras com título ---------------------------------------------------- */
.secao__cabeca { margin-bottom: var(--tb-space-8); }
.secao__titulo { margin: 0; }

/* Metodologia — três caixas, uma por passo.
   O medalhão aqui é quadrado arredondado em navy, com o ícone em creme: é o
   único degrau de contraste da dobra, e é ele que faz a caixa ler como caixa.
   A meia-lua vira sky, pela mesma regra do fundo escuro. */
.metodo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tb-space-6); }
.metodo .card { padding: var(--tb-space-6); }
.metodo .card__medalhao {
  width: var(--tb-space-12); height: var(--tb-space-12);
  border-radius: var(--tb-radius-lg);
  background: var(--tb-color-surface-inverse);
  color: var(--tb-color-text-inverse);
  --meia-lua-cor: var(--tb-color-brand-sky);
  margin-bottom: var(--tb-space-6);
}
.metodo .card__medalhao .icone { color: var(--tb-color-text-inverse); }
.metodo .card__titulo { font-size: var(--tb-text-2xl);  }

/* Prova social --------------------------------------------------------- */
.faixa--escura { background: var(--tb-color-surface-inverse); color: var(--tb-color-text-inverse); }
.faixa--escura .secao__titulo { color: var(--tb-color-text-inverse); }
.numeros { margin: 0 0 var(--tb-space-10); max-width: 46ch; }

/* No celular os depoimentos correm na horizontal, com encaixe: quatro citações
   empilhadas viravam uma parede de texto que ninguém rola até o fim. */
/* No celular os depoimentos empilham, um sob o outro. */
.citacoes {
  display: grid;
  gap: var(--tb-space-8);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--tb-space-6)); padding-inline: var(--tb-space-6);
  padding-bottom: var(--tb-space-4);
  scrollbar-width: none;
}
.citacoes::-webkit-scrollbar { display: none; }
/* Nesta página a fala vem em itálico e entre aspas, a pedido: aspa e inclinação
   marcam que a frase é de uma aluna, não da casa. */
.citacoes .depoimento__fala { font-style: italic; }
.citacoes .depoimento__fala::before { content: "\201C"; }
.citacoes .depoimento__fala::after { content: "\201D"; }
.citacoes > * { max-width: none; }

/* Primeira aula -------------------------------------------------------- */
.aula { display: grid; gap: var(--tb-space-10); }
.aula__texto { max-width: 34rem; }
.aula__foto { width: 100%; border-radius: var(--tb-radius-lg); object-fit: cover; height: auto; aspect-ratio: 3 / 4; max-height: none; object-position: 50% 50%; }
.aula__nota { margin-top: var(--tb-space-5); font-style: italic; color: var(--tb-color-text-secondary); }

/* Rodapé --------------------------------------------------------------- */
.rodape { background: var(--tb-color-surface-inverse); color: var(--tb-color-text-inverse); padding-block: var(--tb-space-16); }
.rodape__grade { display: grid; gap: var(--tb-space-10); align-items: start; }
/* Rodapé: todo item — parágrafo ou link — tem o mesmo respiro vertical, então
   o ritmo é o mesmo em qualquer coluna, com ou sem link. */
.rodape__grade > * { display: grid; gap: 0; justify-items: start; align-content: start; }
.rodape__grade > * > * { margin: 0 !important; padding-block: 11px; }
.rodape__grade .link { display: inline-flex; align-items: center; }
.rodape__contatos { justify-items: start; }

/* No celular a display fica abaixo dos 40px do corte da Light. */
@media (max-width: 640px) { .display { font-weight: var(--tb-weight-display-regular); } }

@media (min-width: 768px) {
  .centro { padding-inline: var(--tb-space-12); }
  .faixa { padding-block: var(--tb-space-16); }

  /* Hero em duas colunas já no tablet: o estúdio precisa aparecer junto da
     frase, não uma rolagem depois dela. A foto sangra até a borda direita. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; gap: var(--tb-space-10); max-width: 1120px; margin-inline: auto; padding-inline: var(--tb-space-12); }
  .hero__texto { max-width: none; padding-block: var(--tb-space-8) var(--tb-space-12); padding-inline: 0; margin: 0; }
  .hero__gancho { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
  .hero__arco { padding-inline: 0; }
  .hero__foto { height: min(74vh, 620px); max-height: none; border-radius: 999px 999px var(--tb-radius-lg) var(--tb-radius-lg); }
  .pilates-lockup { position: absolute; left: var(--tb-space-12); bottom: var(--tb-space-8); margin: 0; text-align: left; text-indent: 0; }

  .metodo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tb-space-6); }
  .citacoes { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--tb-space-10); }
  .citacoes > * { flex: initial; max-width: none; }
  .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--tb-space-8); }
  .aula { grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--tb-space-12); }
  /* Foto inteira, na proporção original: sem corte lateral, a mão dela fica dentro. */
  .aula__moldura { max-width: 480px; }
  .aula__foto { height: auto; max-height: none; aspect-ratio: 3 / 4; object-position: 50% 50%; }
}

@media (min-width: 1024px) {
  .topo__nav { display: block; }
  .topo__botao { display: none; }
  .topo__interno { gap: var(--tb-space-12); }
  .topo__nav .nav-marca__lista { gap: var(--tb-space-8); }

  /* Duas colunas, com a foto sangrando até a borda direita da tela. */
  .hero { gap: var(--tb-space-16); }
  .hero__texto { padding-block: var(--tb-space-10) var(--tb-space-16); }
  .hero__gancho { font-size: clamp(2.9rem, 4.4vw, 3.9rem); }
  .hero__virada { font-size: clamp(1.5rem, 1.9vw, 1.75rem); margin-top: var(--tb-space-3); }
  .hero__linha { font-size: var(--tb-text-lg); margin-top: var(--tb-space-5); }
  .hero__foto { height: min(82vh, 680px); }
  .pilates-lockup { bottom: var(--tb-space-10); }

  .faixa { padding-block: var(--tb-space-20); }
  .metodo { gap: var(--tb-space-8); }
  .rodape__grade { gap: var(--tb-space-12); }
}

/* Movimento: entrada única, uma vez só, e nada se mexe enquanto ela lê. */
.revela { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.revela.vista { opacity: 1; transform: none; }
.entra { animation: entra .7s cubic-bezier(.2, .7, .3, 1) both; }
.entra--1 { animation-delay: .05s; }
.entra--2 { animation-delay: .14s; }
.entra--3 { animation-delay: .26s; }
.entra--4 { animation-delay: .36s; }
.entra--5 { animation-delay: .2s; }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .entra { animation: none; }
}

/* ---------- Aviso de cookies ----------
   Barra discreta no rodapé da janela, não modal: não trava a leitura.
   Fica escondida por padrão; o medicao.js só mostra se ainda não houve escolha. */
.aviso-cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-space-4);
  align-items: center;
  justify-content: center;
  padding: var(--tb-space-5) var(--tb-space-6);
  background: var(--tb-color-surface-raised);
  border-top: 1px solid var(--tb-color-border-subtle);
  box-shadow: 0 -6px 24px rgba(5, 44, 124, .10);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__texto {
  margin: 0;
  font-size: var(--tb-text-base);
  color: var(--tb-color-text-primary);
  max-width: 46rem;
}
.aviso-cookies__acoes { display: flex; gap: var(--tb-space-3); flex-shrink: 0; }
@media (max-width: 640px) {
  .aviso-cookies { justify-content: flex-start; }
  .aviso-cookies__acoes { width: 100%; }
  .aviso-cookies__acoes .btn { flex: 1; justify-content: center; }
}