/*
 * A casca comum do site novo (21/09/2026): cabeçalho e rodapé iguais aos da
 * home em TODAS as páginas: turma, coach, preços, blog, artigos, páginas
 * legais e o pouso do convite de desafio.
 *
 * Desde 23/09/2026 a home também usa esta casca, em vez de desenhar a sua no
 * próprio <style>: o cabeçalho e o rodapé moram só aqui.
 *
 * Tudo mora em classes `pg-*` e nenhuma regra pega elemento solto. É o que
 * deixa esta casca cair em cima de páginas antigas (blog, legais), que têm
 * regras próprias para `header`, `footer`, `.brand` e `a`, sem herdar nada
 * delas. Por isso as cores e as fontes estão escritas por extenso aqui, e
 * não em variáveis da página. Esta folha entra DEPOIS do <style> da página,
 * para ganhar os empates.
 */

.pg-cab, .pg-rod {
  font-family: 'Inter', 'Inter Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #2F3338;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.pg-cab *, .pg-rod * { box-sizing: border-box; }

/* Mesma largura da `.shell` da home. */
.pg-in { width: min(1440px, 100% - 96px); margin-inline: auto; }

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */
header.pg-cab {
  position: static; background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0; padding: 0;
}
header.pg-cab .pg-in {
  height: 104px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.pg-marca {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
  color: inherit; text-decoration: none;
}
.pg-marca img { display: block; max-width: none; border-radius: 0; box-shadow: none; }
.pg-marca .pg-simbolo { width: 44px; height: 44px; object-fit: contain; }
.pg-marca .pg-palavra { width: 150px; height: auto; }

.pg-cab nav {
  display: flex; align-items: center; gap: 32px; margin: 0; padding: 0;
  font-family: 'Inter', 'Inter Reserva', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6;
}
.pg-cab nav a {
  color: #2F3338; text-decoration: none; font-weight: 500; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
.pg-cab nav a:hover,
.pg-cab nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.pg-cab nav a.pg-entrar {
  border: 1px solid #2F3338; padding: 10px 22px; border-radius: 4px;
  background: transparent; color: #2F3338;
  /* A mola vem de pagina.css; nas páginas sem ela (blog, legais) a volta é linear. */
  transition: transform 440ms var(--mola, linear);
}
.pg-cab nav a.pg-entrar:hover { text-decoration: underline; }
.pg-cab nav a.pg-entrar:active { transform: scale(.97); transition: transform 100ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pg-cab nav a.pg-entrar, .pg-cab nav a.pg-entrar:active { transform: none; transition: none; }
  .pg-cab nav a.pg-entrar:active { background: #E5E5ED; }
}
.pg-cab a:focus-visible, .pg-rod a:focus-visible { outline: 3px solid #2F3338; outline-offset: 6px; }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
footer.pg-rod {
  width: min(1440px, 100% - 96px); margin: 64px auto 0;
  border: 0; border-top: 1px solid #D7D8DE; background: transparent;
  padding: 30px 0 36px; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; font-size: 12px; line-height: 1.6;
  letter-spacing: .01em; color: #5D6268; text-align: left;
}
.pg-rod .pg-assinatura { display: flex; flex-direction: column; gap: 10px; }
.pg-rod nav { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; padding: 0; }
.pg-rod a { color: #5D6268; text-decoration: none; margin: 0; font-weight: 400; }
.pg-rod a:hover { color: #2F3338; text-decoration: underline; text-underline-offset: 5px; }
.pg-rod .pg-marca { color: #2F3338; }

/* ── Idiomas (23/09/2026) ────────────────────────────────────────────────
 * Saiu a pílula que flutuava no canto da tela, por cima do conteúdo: o
 * seletor mora no rodapé e no menu do celular. O build-i18n.py preenche o
 * marcador <!--idiomas--> de cada página com os três links. */
.pg-idiomas {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0;
  border: 1px solid #D7D8DE; border-radius: 999px;
  font-family: 'Inter', 'Inter Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.pg-idiomas a, .pg-rod .pg-idiomas a {
  padding: 7px 10px; border-radius: 999px; color: #5D6268; text-decoration: none;
}
.pg-idiomas a:hover, .pg-rod .pg-idiomas a:hover { color: #2F3338; text-decoration: none; }
.pg-idiomas a[aria-current], .pg-rod .pg-idiomas a[aria-current] { background: #2F3338; color: #fff; }

/* ── Botão do menu (só no celular) ──────────────────────────────────────── */
.pg-abre, .pg-fecha {
  display: none; place-items: center; width: 40px; height: 40px; margin: 0;
  padding: 0; border: 0; border-radius: 999px; background: none;
  color: #2F3338; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pg-fecha { display: inline-grid; }
.pg-abre span, .pg-fecha span { position: relative; display: block; width: 18px; height: 8px; }
.pg-abre span::before, .pg-abre span::after,
.pg-fecha span::before, .pg-fecha span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  border-radius: 1px; background: currentColor;
}
.pg-abre span::before { top: 0; }
.pg-abre span::after { bottom: 0; }
/* As duas linhas do menu viram o x do fechar. */
.pg-fecha span::before, .pg-fecha span::after { top: 50%; margin-top: -.75px; }
.pg-fecha span::before { transform: rotate(45deg); }
.pg-fecha span::after { transform: rotate(-45deg); }
.pg-abre:focus-visible, .pg-fecha:focus-visible { outline: 3px solid #2F3338; outline-offset: 2px; }
.pg-abre:active, .pg-fecha:active { background: #E5E5ED; }

/* ── Menu do celular: popover nativo ────────────────────────────────────
 * O popover cuida de Esc, do toque fora e do foco; o site.js só espelha o
 * estado em aria-expanded. A folha nasce do botão (transform-origin no canto
 * de cima à direita) e se materializa: escala, opacidade e desfoque juntos,
 * na mola de 440 ms. Sai pelo mesmo caminho. Sem suporte a popover, fica
 * escondida e o rodapé continua com todos os links. */
.pg-menu {
  display: none; position: fixed; inset: 8px 8px auto auto; margin: 0;
  width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
  flex-direction: column; padding: 0 20px 22px; border: 0; border-radius: 22px;
  background: rgb(255 255 255 / .88);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 24px 60px -12px rgba(47,51,56,.35);
  font-family: 'Inter', 'Inter Reserva', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #2F3338; text-align: left;
  transform-origin: top right;
  opacity: 0; transform: scale(.96); filter: blur(8px);
  transition: opacity 440ms var(--mola, ease-out), transform 440ms var(--mola, ease-out),
              filter 440ms var(--mola, ease-out), overlay 440ms allow-discrete, display 440ms allow-discrete;
}
.pg-menu:popover-open { display: flex; opacity: 1; transform: none; filter: none; }
.pg-menu.pg-menu-aberto { display: flex; opacity: 1; transform: none; filter: none; }
@starting-style { .pg-menu:popover-open { opacity: 0; transform: scale(.96); filter: blur(8px); } }
.pg-menu::backdrop {
  background: rgb(47 51 56 / 0);
  transition: background-color 440ms, overlay 440ms allow-discrete, display 440ms allow-discrete;
}
.pg-menu:popover-open::backdrop { background: rgb(47 51 56 / .14); }
@starting-style { .pg-menu:popover-open::backdrop { background: rgb(47 51 56 / 0); } }
.pg-menu-topo { display: flex; justify-content: flex-end; align-items: center; height: 58px; margin-right: -10px; }
.pg-menu > a {
  display: block; padding: 13px 0; border-bottom: 1px solid #D7D8DE;
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Reserva', sans-serif; font-size: 24px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.2; color: #2F3338; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pg-menu > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.pg-menu > a.pg-entrar {
  margin-top: 20px; padding: 13px 18px; border: 1px solid #2F3338; border-radius: 4px;
  font-family: 'Inter', 'Inter Reserva', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-align: center;
}
.pg-menu > a:active { color: #5D6268; }
.pg-menu .pg-idiomas { align-self: flex-start; margin-top: 20px; }
.pg-menu .pg-idiomas a { padding: 10px 14px; }
.pg-menu a:focus-visible { outline: 3px solid #2F3338; outline-offset: 4px; }

/* ── Barra compacta ─────────────────────────────────────────────────────
 * O cabeçalho do topo continua como está. Depois do hero, o site.js põe um
 * clone dele numa barra fixa de 60 px que desce do topo (translateY, 590 ms
 * de mola) e sobe pelo mesmo caminho quando se volta ao hero. É fixed com
 * transform: não empurra nada (CLS zero). Material translúcido, e no lugar
 * de um fio de 1 px, uma borda de 12 px que se dissolve no conteúdo. */
.pg-barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: rgb(242 242 247 / .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transform: translateY(calc(-100% - 14px)); visibility: hidden;
  transition: transform 590ms var(--mola, ease-out), visibility 0s linear 590ms;
}
.pg-barra.pg-barra-visivel { transform: none; visibility: visible; transition: transform 590ms var(--mola, ease-out), visibility 0s; }
.pg-barra::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: linear-gradient(rgb(242 242 247 / .72), rgb(242 242 247 / 0));
}
.pg-barra .pg-in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pg-barra .pg-marca .pg-simbolo { width: 30px; height: 30px; }
.pg-barra .pg-marca .pg-palavra { width: 110px; }
.pg-barra nav a.pg-entrar { padding: 6px 16px; }

/* Vidro sobre vidro, não (§12). Com a página rolada, o menu abre por cima da
 * barra, e os dois são translúcidos: na faixa em que se sobrepõem, um desfoque
 * borraria o outro. Enquanto o menu está aberto, a barra deixa de ser material
 * e fica sólida, na cor da página. Ela continua no lugar, porque é dela que o
 * menu nasce (§7), e o véu do menu já a escurece. Deixar o topo do menu sólido
 * foi a outra saída, e perdeu: a emenda entre o branco e o vidro aparecia.
 * Regras separadas, porque um navegador que não conhece :popover-open
 * descartaria a lista inteira; sem :has(), fica como era. */
body:has(.pg-menu:popover-open) .pg-barra { background: #F2F2F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:has(.pg-menu.pg-menu-aberto) .pg-barra { background: #F2F2F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:has(.pg-menu:popover-open) .pg-barra::after { background: linear-gradient(#F2F2F7, rgb(242 242 247 / 0)); }
body:has(.pg-menu.pg-menu-aberto) .pg-barra::after { background: linear-gradient(#F2F2F7, rgb(242 242 247 / 0)); }

/* Transparência reduzida e contraste alto: barra e folha sólidas (§14). */
@media (prefers-reduced-transparency: reduce) {
  .pg-barra, .pg-menu { background: #F2F2F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pg-barra::after { background: linear-gradient(#F2F2F7, rgb(242 242 247 / 0)); }
}
@media (prefers-contrast: more) {
  .pg-barra, .pg-menu { background: #F2F2F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pg-barra { border-bottom: 1px solid #2F3338; }
  .pg-barra::after { display: none; }
  .pg-menu { border: 1px solid #2F3338; }
  .pg-idiomas { border-color: #2F3338; }
}
/* Movimento reduzido: a barra e a folha aparecem por opacidade, sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .pg-barra { transform: none; opacity: 0; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .pg-barra.pg-barra-visivel { opacity: 1; transition: opacity 200ms linear, visibility 0s; }
  .pg-menu { transform: none; filter: none; transition: opacity 200ms linear, overlay 200ms allow-discrete, display 200ms allow-discrete; }
  @starting-style { .pg-menu:popover-open { transform: none; filter: none; } }
}

@media (max-width: 1050px) {
  .pg-in, footer.pg-rod { width: calc(100% - 48px); }
}
@media (max-width: 700px) {
  .pg-in, footer.pg-rod { width: calc(100% - 36px); }
  header.pg-cab .pg-in { height: 82px; }
  .pg-barra .pg-in { height: 56px; }
  .pg-marca { gap: 9px; }
  .pg-marca .pg-simbolo { width: 35px; height: 35px; }
  .pg-marca .pg-palavra { width: 118px; }
  .pg-cab nav { gap: 12px; }
  .pg-cab nav .pg-d { display: none; }
  .pg-cab nav a.pg-entrar { padding: 8px 16px; }
  /* O ícone encosta na margem do conteúdo, e o alvo de toque (40 px) cresce para dentro. */
  .pg-abre { display: inline-grid; place-items: center end; }
  footer.pg-rod { flex-direction: column; align-items: flex-start; }
  .pg-rod nav { gap: 18px; }
}
@media (max-width: 350px) {
  .pg-marca .pg-palavra { width: 100px; }
}
@media print { .pg-cab nav, .pg-rod nav, .pg-barra, .pg-menu, .pg-idiomas { display: none; } }