/* Padrão do site (03/11): todos os subtítulos e todos os botões iguais,
   na receita aprovada no hero da home.
   Carregado por último em todas as páginas. Usa !important de propósito:
   cada página tem seletores próprios mais específicos, e aqui é a regra
   que vale para todas. Só fonte, peso, tamanho e entrelinha; cor e
   espaçamento continuam de cada página. */

/* ---------- subtítulos: o texto logo abaixo de um título ---------- */
.hero__d,
.chamada-m__d,
:is(h1, h2) + .prose,
.vit__d, .vit__lado-d, .vista__d, .dentro__d, .bloco__d, .etapa__d,
.aula__d, .pay__d{
  font-family:var(--familia-texto) !important;
  font-weight:300 !important;
  font-size:clamp(var(--tam-15), 1.2vw, var(--tam-17)) !important;
  line-height:1.42 !important;
}

/* Botão: a marcação usa .btn direto (componentes.css); a ponte da .pill saiu em 06/11. */

/* ---------- rótulo mono em caixa alta → Onest, sem caixa alta ----------
   Os rótulos, contadores e metas que usavam JetBrains Mono em caixa alta.
   Os sinais (+, ×, setas) viraram ícone SVG em 06/11: a JetBrains saiu das páginas. */
.eyebrow, .step__n, .estado, .pend, .aula__n, .curso__mods, .custos dt, .dentro__curso, .faixa18 p, .fig-cap--pill, .foot__curso, .mod__n, .mod__qt,
.aplica__op small, .bt__etiqueta, .bt__rotulo, .lede__cargo, .nivel__l, .planos__preco small, .preco__valor span, .split__h,
.aulas__min, .aulas__n, .capc__rot, .capc__meta, .folha__preco small, .folha__tag, .gf-meta, .gf-sheet-meta, .grupo__meta, .passo__conta, .passo__n,
.ponte__rotulo, .preco-linha__v small, .topo__dica, .topo__rotulo, .traz__n,
.achado__min, .call__hora, .call__pend, .cap__rot, .cap__meta, .cartao__aula, .cartao__min, .chip, .contas__de, .crumb, .etapa__n, .fe__meta,
.ferr__aulas a, .ferr__n, .fila__meta, .fila__mod, .fluxo__aulas a, .lista__n, .mod__meta, .modl__n, .modlin__n, .pay__min,
.plano__rotulo, .plano__valor span, .ponte__rot, .processo__n, .tabela thead th, .tabela__m, .tabela__n, .tabela__nao, .tv__meta, .tv__tag,
.uso__num, .vista__rot, .vit__rotulo, .vitmod__n, .esc__mn{
  font-family:var(--familia-texto) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-variant-numeric:tabular-nums;
}

/* ---------- menu do topo → Item de menu em cápsula (04/11) ----------
   O rolo do link tinha 40 px numa barra de 60: alto demais; 32 ficou
   baixo. Agora mede --alt-menu-topo (36). */
.nav .nav__link{ --rolo:var(--alt-menu-topo) !important; }

/* ---------- títulos e sombra (04/11) ----------
   Regra: título grande (display e título de seção) em Bricolage Grotesque;
   todo o resto (card, painel, lista, playlist, etapa, banner, fluxo) em
   Onest 600. Preço e número de destaque não são título e ficam como estão.
   O nome hot ("hot model") é desenho da marca: Poppins em todo lugar. */
.bloco__t, .breves__t, .comun-banner__t, .etapa__t, .fluxo__t, .gf-title, .pack-arte__t, .pasta__t, .ponte__t, .ponte__p,
.vit__lado-t, .vitmod__t, .painel__t, .fila__t, .processo__t, .uso__t, .faq-discord__t, .modc__t, .bobz__nome, .step__t,
.capc__t, .esc__t, .grupo__t, .call__data, .soma2, .lb__v{
  font-family:var(--familia-texto) !important;
  font-weight:var(--peso-titulo-p) !important;
  letter-spacing:-.01em !important;
}
.hotnome{ font-family:var(--familia-marca) !important; }
/* a playlist da aula: número e minutos no tamanho de meta, não 11 px */
.lista__n{ font:var(--tipo-meta-p, 500 var(--tam-12)/1 "Onest", sans-serif) !important; }

/* sem sombra: nem em título de card, nem em card, chip, menu ou botão.
   Legibilidade sobre foto vem do véu (gradiente), não de sombra. */
.dc__t, .cartao__t, .cartao__min, .ex-card__t, .dc__badge, .numjanela{ }
.cartao__caixa, .cartao--d:hover .cartao__caixa, .cartao--d:focus-visible .cartao__caixa, .cartao--d.is-aberta .cartao__caixa,
.dc__ic, .fe__chip, .step, .planos__capsula, .vsl__midia, .pay__caixa, .nav, .agente__balao, .band, .lbox img,
.player__play:not(:focus-visible), .agente__disco:not(:focus-visible), .selo18:not(:focus-within){   /* o anel de foco continua */
}

/* ---------- medida de leitura (04/11) ----------
   Texto corrido nunca passa de --medida-leitura (~70 caracteres por
   linha). A tela cresce, a linha não. Auditoria em 1920 px achou textos
   com 80 a 187 caracteres por linha; estes são todos os parágrafos do
   site e da plataforma. Os centralizados continuam no centro. */
.prose, .hero__d, .vista__d, .dentro__d, .bloco__d, .etapa__d, .aula__d, .pay__d, .nota, .soma2, .vitmod__d,
.faq__a, .pe p, .lede, .comun-banner__d, .pack-fluxos__d, .pasta__promessa, .gl__intro, .intro, .sec__cab p,
:is(h1, h2) + p{
  max-width:var(--medida-leitura);
}
.bobz__fine{ max-width:var(--medida-leitura); margin-inline:auto; }

/* Galeria em arco (04/11): os cards giram para fora da tela. O recorte do
   palco (sticky) não segura a largura da página no celular, então a seção
   também recorta. overflow:clip não cria rolagem, e o sticky segue
   funcionando. */
.gtrack{ overflow-x:clip; }

/* Menu do site no celular (04/11). Fechado: a cápsula flutuante de sempre,
   com o hambúrguer à esquerda (sem moldura), a marca ao lado e o "Entrar"
   à direita. Aberto: a própria cápsula cresce até preencher a tela
   (top/left/largura/altura/raio animados) e vira o menu: itens grandes em
   lista, alinhados à esquerda, com fio entre eles; o "Entrar" desce para o
   pé, na largura toda. A cápsula usa left fixo em vez de left:50% +
   translate, para a expansão sair do lugar dela sem salto. */
@media (max-width: 1060px){
  .nav, .nav.is-stuck, .nav.is-stuck:hover, .nav.is-stuck:focus-within{
    left:calc(var(--gutter, 20px) / 2) !important; translate:none !important;
    top:var(--menu-topo-m) !important; height:var(--menu-alt-m) !important; box-sizing:border-box;
    /* a expansão anima (posição, tamanho e raio) */
    transition:top var(--dur-expande) var(--ease-gaveta), left var(--dur-expande) var(--ease-gaveta), width var(--dur-expande) var(--ease-gaveta),
      height var(--dur-expande) var(--ease-gaveta), border-radius var(--dur-expande) var(--ease-gaveta), padding var(--dur-expande) var(--ease-gaveta), transform var(--dur-some) var(--ease-gaveta) !important;
  }
  .nav{ justify-content:flex-start !important; gap:12px; }
  .nav .nav__burger{
    order:-1; flex:none; display:grid !important; place-items:center; width:40px; height:40px; padding:0; margin-left:-10px;
    border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  }
  .nav > .nav__cta{ margin-left:auto; }
  /* a marca fica sempre inteira no celular: as letras recolhendo ao rolar e
     reabrindo ao tocar faziam a cápsula mexer */
  .nav .nav__brand, .nav.is-stuck .nav__brand, .nav.is-stuck:hover .nav__brand, .nav.is-stuck:focus-within .nav__brand{
    width:calc(var(--marca-h) * 273.28 / 89.68) !important; transition:none !important;
  }
  .nav .marca__letra, .nav.is-stuck .marca__letra, .nav.is-stuck:hover .marca__letra, .nav.is-stuck:focus-within .marca__letra{
    opacity:1 !important; transform:none !important; transition:none !important;
  }

  .nav[data-open="true"], .nav.is-stuck[data-open="true"], .nav.is-stuck[data-open="true"]:hover, .nav.is-stuck[data-open="true"]:focus-within, .nav[data-open="true"]:focus-within{
    top:0 !important; left:0 !important; width:100vw !important; height:100dvh !important; max-width:none !important;
    border-radius:0 !important; border-color:transparent !important; box-shadow:none !important;
    background:var(--menu-fundo-aberto) !important;
    display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr auto; align-items:start !important; align-content:stretch;
    column-gap:12px; row-gap:0;
    /* fechada: top 14 + padding 10 / left gutter/2 + padding 22. Aberta, o
       padding soma esses valores e a linha de cima (hambúrguer + marca) não
       sai do lugar enquanto a cápsula cresce */
    padding:24px var(--gutter, 20px) max(20px, env(safe-area-inset-bottom)) calc(var(--gutter, 20px) / 2 + 22px) !important;
    grid-template-rows:42px 1fr auto !important;
    /* trava o fundo sem mexer na página (overflow:hidden no body pulava no Safari) */
    touch-action:none; overscroll-behavior:contain;
  }
  .nav[data-open="true"] .nav__burger{ grid-column:1; grid-row:1; align-self:center; }
  .nav[data-open="true"] > a:first-child, .nav[data-open="true"] .nav__marca{ grid-column:2; grid-row:1; align-self:center; justify-self:start; }
  .nav[data-open="true"] .nav__links{
    grid-column:1 / -1; grid-row:2; position:static !important; translate:none !important; margin:clamp(28px, 6vh, 48px) 0 0 -10px !important;
    display:flex !important; flex-direction:column; align-items:stretch !important; gap:0 !important; width:auto !important;
  }
  .nav[data-open="true"] .nav__link{
    --rolo:var(--alt-menu-gaveta) !important;
    display:flex !important; align-items:center; justify-content:space-between !important; gap:12px;
    width:100% !important; height:var(--rolo); padding:0 2px !important; overflow:visible !important;
    border-radius:0 !important; background:none !important; box-shadow:none !important;
    border-bottom:1px solid var(--cor-borda-sutil, var(--cor-borda-sutil)) !important;
    font-family:var(--familia-texto) !important; font-size:clamp(var(--tam-20), 6.4vw, var(--tam-24)) !important; font-weight:600 !important;
    letter-spacing:-.02em !important; color:var(--cor-texto-titulo) !important; text-align:left;
    animation:menu-surge var(--dur-surge) ease .12s both;
  }
  .nav[data-open="true"] .nav__link:nth-child(2){ animation-delay:.15s; }
  .nav[data-open="true"] .nav__link:nth-child(3){ animation-delay:.18s; }
  .nav[data-open="true"] .nav__link:nth-child(4){ animation-delay:.21s; }
  .nav[data-open="true"] .nav__link:nth-child(5){ animation-delay:.24s; }
  .nav[data-open="true"] .nav__link:nth-child(6){ animation-delay:.27s; }
  /* seta à direita de cada item */
  .nav[data-open="true"] .nav__link::after{
    content:""; flex:none; width:20px; height:20px; background:currentColor; opacity:.45;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .nav[data-open="true"] .nav__link[aria-current="page"]{ color:var(--sunset-400, var(--sunset-400)) !important; }
  .nav[data-open="true"] .nav__link--destaque{ color:var(--cor-texto-titulo) !important; }
  /* sem o efeito de rolo: uma cópia do texto, parada */
  .nav[data-open="true"] .nav__rolo{ display:block !important; height:auto !important; transform:none !important; translate:none !important; line-height:1.2 !important; }
  .nav[data-open="true"] .nav__rolo > span{ display:block; transform:none !important; translate:none !important; }
  .nav[data-open="true"] .nav__rolo > span[aria-hidden="true"]{ display:none !important; }
  .nav[data-open="true"] .nav__cta{
    grid-column:1 / -1; grid-row:3; display:inline-flex !important; justify-content:center; width:100% !important; margin:0 0 0 -10px !important;
    min-height:52px; font-size:var(--tam-15) !important; position:static !important;
    animation:menu-surge var(--dur-surge) ease .3s both;
  }
  body:has(.nav[data-open="true"]){ overflow:visible !important; }
}
@keyframes menu-surge{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .nav, .nav[data-open="true"]{ transition:none !important; } .nav[data-open="true"] .nav__link, .nav[data-open="true"] .nav__cta{ animation:none; } }

/* Menu do site: sobe ao rolar para baixo e volta ao puxar para cima (04/11).
   transform (e não translate) porque no desktop a cápsula já usa translate
   para centralizar. Aberto, nunca some. */
@media (min-width: 1061px){
  .nav{ transition:width var(--dur-lenta) var(--curva-suave), background var(--dur-lenta) var(--curva-saida), border-color var(--dur-lenta) var(--curva-saida),
    box-shadow var(--dur-lenta) var(--curva-saida), -webkit-backdrop-filter var(--dur-lenta) var(--curva-saida), backdrop-filter var(--dur-lenta) var(--curva-saida),
    transform var(--dur-some) var(--ease-gaveta) !important; }
}
.nav.nav--some:not([data-open="true"]){ transform:translateY(calc(-100% - 40px)) !important; }
@media (prefers-reduced-motion: reduce){ .nav.nav--some:not([data-open="true"]){ transition:none !important; } }