/* Ajustes da home institucional sobre o design system, pedidos pelo dono em 10/08/2026.
   Mora aqui, e não no `system.css`, porque aquele arquivo é ativo espelhado da origem
   (scripts/sync-home.mjs) — editá-lo seria desfeito no próximo sync. Injetado só na home;
   as páginas do funil não carregam este arquivo. */

/* --- Hero: "4 aulas para vivenciar" com metade do tamanho de "o poder da respiração." -------
   As duas linhas vivem no mesmo h1 e só a segunda tem elemento próprio (.ctrl-signal-line).
   Então o h1 vai à metade e a linha verde volta ao tamanho original com `2em` — assim a
   proporção é exatamente 50% em qualquer largura, sem duplicar a escala responsiva. */
.ctrl-hero h1 {
  font-size: clamp(1.7rem, 3.8vw, 4.2rem);
}

.ctrl-hero h1 .ctrl-signal-line {
  font-size: 2em;
  line-height: 0.83;
  /* Respiro entre as duas linhas: o `line-height: .83` do sistema encosta uma na outra. */
  margin-top: 0.25em;
}

/* No celular a linha verde estourava a tela: "RESPIRAÇÃO." é a palavra mais longa da página e,
   na escala do sistema, saía cortada à direita. A escala cai o suficiente para ela caber
   inteira em 360px — a proporção de 50% entre as duas linhas continua valendo. */
@media (width <= 560px) {
  .ctrl-hero h1 {
    font-size: clamp(1.15rem, 7.6vw, 2.4rem);
  }
}

/* --- Respiro entre o botão e a linha "Gratuito. Acesso imediato." ---------------------------
   Precisa do `.ctrl-page` na frente: o sistema zera `margin-top` de todo `p` dentro de
   `.ctrl-page`, e essa regra tem especificidade maior que a classe sozinha — é por isso que o
   próprio `margin:28px 0 0` do design system nunca valeu aqui. */
.ctrl-page .ctrl-hero__proof {
  margin-top: 52px;
}

/* --- O medidor aparece no celular, embaixo da linha de prova ------------------------------- */
/* O sistema o esconde abaixo de 1100px porque ele é posicionado sobre o hero. Aqui ele sai do
   posicionamento absoluto e entra no fluxo, depois do conteúdo — que termina justamente na
   linha "Gratuito. Acesso imediato.". */
@media (width <= 1100px) {
  .ctrl-telemetry {
    display: block;
    position: static;
    width: min(100% - 28px, 420px);
    margin: 0 auto 72px;
  }

  .ctrl-hero__content {
    padding-bottom: 40px;
  }
}

/* --- Títulos das seções, 35% menores -------------------------------------------------------
   "A sequência percorre o tronco de baixo para cima.", "Uma zona por aula. A quarta integra
   todas." e "Não nasceu em retiros. Nasceu sob pressão." dividem o mesmo seletor. Cada valor
   do clamp é o do sistema × 0,65, então a escala responsiva continua a mesma, só menor. */
.ctrl-section h2 {
  font-size: clamp(1.53rem, 3.58vw, 3.64rem);
}

@media (width <= 560px) {
  .ctrl-section h2 {
    font-size: clamp(1.56rem, 9.1vw, 2.6rem);
  }
}

/* "Pronto para respirar com mais presença?", 45% menor (× 0,55). */
.ctrl-final h2 {
  font-size: clamp(1.76rem, 4.4vw, 4.95rem);
}

/* --- A tese centralizada no celular --------------------------------------------------------
   Acima de 820px ela divide a faixa com o código vertical, à direita, e alinhar ao centro
   descolaria o texto dele. No celular o código some e a frase fica sozinha na faixa. */
@media (width <= 820px) {
  .ctrl-thesis__grid {
    justify-items: center;
    text-align: center;
  }
}

/* --- As barras do medidor desenham a capacidade, não uma régua ----------------------------- */
/* Abdômen inteiro, costelas 25% menores, tórax 50% menor que as costelas — e as três centradas
   na própria coluna, para a leitura ficar piramidal de baixo para cima. */
.ctrl-zone i {
  justify-self: center;
  width: 100%;
}

.ctrl-zone--ribs i {
  width: 75%;
}

.ctrl-zone--chest i {
  width: 37.5%;
}

/* Cada zona ganha a cor da sua aula — a mesma do acento dos cards: abdômen ciano (aula 01),
   costelas verde (02) e tórax rosa (03). A animação do sistema pinta a barra com
   `var(--ctrl-lime)`, e a variável resolve no próprio elemento: redefini-la aqui troca a cor
   sem duplicar os três `@keyframes`. Vale só dentro da zona, não vaza para a página. */
.ctrl-zone--belly {
  --ctrl-lime: #00d9ff;
}

.ctrl-zone--chest {
  --ctrl-lime: #ff168c;
}