/* ==========================================================================
   MED · grade.css — página da grade de aulas (med-grade/index.html)
   Depende de tokens.css + base.css + components.css
   ========================================================================== */

.is-oculto { display: none !important; }

/* ---------- Topo ---------- */
.grade-topo { padding-top: var(--s-6); overflow: hidden; }
.grade-topo__dagua { right: -8vw; bottom: -6vw; }
.grade-topo__marca { display: flex; justify-content: center; margin-bottom: clamp(56px, 6vw, 96px); }
.grade-topo__logo { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; border-radius: var(--r-sm); }
.grade-topo__logo img { height: 44px; width: auto; }
.grade-topo__logo span { font-family: var(--f-caps); font-size: var(--t-micro); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--tx-claro-2); line-height: 1.35; }
.grade-topo__logo b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .2em; color: var(--tx-claro); }

.grade-topo__texto { max-width: 900px; margin-inline: auto; text-align: center; }
.grade-topo__texto .t-lead { margin-inline: auto; max-width: 52ch; }

/* Números (o dt vem antes no HTML para leitores de tela; visualmente o número fica em cima) */
.grade-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(56px, 6vw, 88px) 0 0; padding: 0;
  border-block: 1px solid var(--linha-escura);
}
.grade-numero { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); text-align: center; }
.grade-numero + .grade-numero { border-left: 1px solid var(--linha-escura); }
.grade-numero dd {
  margin: 0; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .06em .08em 0;
}
.grade-numero dt { font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--tr-caps-2); text-transform: uppercase; color: var(--tx-claro-3); }

.grade-legenda { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-6); font-size: var(--t-small); color: var(--tx-claro-2); }
.grade-legenda li { display: flex; align-items: center; gap: var(--s-3); text-wrap: pretty; }
.grade-legenda .badge { flex: none; }

/* Triângulo de "play" no selo de aula */
.grade-mod__play { width: 9px; height: 9px; fill: currentColor; stroke: none; }

/* ---------- Barra fixa: índice + filtro ---------- */
.grade-barra {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(14,15,17,.86);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--linha-escura);
}
.grade-barra__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 68px; }
.grade-barra__indice { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.grade-barra__indice a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--tr-caps-2); text-transform: uppercase;
  color: var(--tx-claro-2); text-decoration: none;
  transition: color var(--d-micro), background-color var(--d-micro), box-shadow var(--d-micro);
}
.grade-barra__indice a span { color: var(--ouro); }
.grade-barra__indice a:hover { color: var(--tx-claro); }
.grade-barra__indice a[aria-current="true"] { color: var(--ouro-claro); background: rgba(192,150,72,.08); box-shadow: inset 0 0 0 1px var(--linha-ouro); }

.grade-filtro { display: inline-flex; flex: none; padding: 4px; border-radius: var(--r-pill); background: rgba(243,238,230,.03); box-shadow: inset 0 0 0 1px var(--linha-escura-2); }
.grade-filtro button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-caps-2); text-transform: uppercase;
  color: var(--tx-claro-2);
  transition: color var(--d-micro), background-color var(--d-micro), box-shadow var(--d-micro);
}
.grade-filtro button:hover { color: var(--tx-claro); }
.grade-filtro button[aria-pressed="true"] { color: var(--ouro-claro); background: var(--grafite-2); box-shadow: inset 0 0 0 1px var(--linha-ouro); }

/* ---------- Cabeça de cada pilar ---------- */
.grade-pilar { padding-block: clamp(72px, 4vw + 48px, 128px); }
.grade-pilar__cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); }
.grade-pilar__num {
  font-family: var(--f-display); font-weight: 400; font-variant-numeric: lining-nums; line-height: .78; letter-spacing: -.03em;
  font-size: clamp(4.2rem, 2.8rem + 5vw, 8rem);
  background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .06em .04em .04em 0;
}
.grade-pilar__titulos { padding-bottom: var(--s-1); }
.grade-pilar__desc { margin: 0 0 var(--s-3); font-family: var(--f-caps); font-size: var(--t-caps); font-weight: 500; letter-spacing: var(--tr-caps-2); text-transform: uppercase; color: var(--ouro); }
.grade-pilar__selo { margin-bottom: var(--s-2); }
.grade-pilar__linha { margin: var(--s-5) 0 clamp(32px, 4vw, 56px); }

.secao--clara .grade-pilar__num { background: none; color: var(--ouro-profundo); }
.secao--clara .grade-pilar__desc { color: var(--ouro-profundo); }

/* ---------- Mentorias ao vivo (pilar 00) ---------- */
.grade-vivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.grade-vivo { display: flex; flex-direction: column; }
.grade-vivo__qtd { display: flex; align-items: baseline; gap: var(--s-3); min-height: 4.2rem; margin: var(--s-5) 0 0; color: var(--ouro-claro); }
.grade-vivo__qtd .t-caps { color: var(--tx-claro-2); }
.grade-vivo__qtd .t-caps:only-child { align-self: flex-end; padding-bottom: .55rem; color: var(--ouro-claro); }
.grade-vivo__num {
  font-family: var(--f-display); font-weight: 400; font-size: 4rem; line-height: 1;
  background: var(--grad-ouro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.grade-vivo__titulo { margin: var(--s-3) 0 var(--s-2); font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; line-height: 1.15; text-wrap: balance; }

/* ---------- Módulos (alvenaria em duas colunas) ---------- */
.grade-mods { columns: 2; column-gap: var(--s-5); }
.grade-mod { break-inside: avoid; margin-bottom: var(--s-5); padding: clamp(22px, 2.6vw, 32px); }
.grade-mod__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.grade-mod__rotulo { margin: 0; font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--tr-caps-2); text-transform: uppercase; color: var(--tx-claro-3); }
.grade-mod__titulo { margin: 0 0 var(--s-4); font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.grade-mod__aulas { list-style: none; margin: 0; padding: 0; }
.grade-mod__aulas li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--linha-escura); font-size: var(--t-small); line-height: 1.45; color: var(--tx-claro-2); }
.grade-mod__aulas li::before { content: ""; position: absolute; left: 3px; top: calc(10px + .72em - 3px); width: 6px; height: 6px; background: var(--ouro); transform: rotate(45deg); }
.grade-mod__prof { display: block; margin-top: 2px; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: var(--ouro-claro); }

/* Live: mesma estrutura, com o vinho da assinatura da Bárbara como detalhe */
.grade-mod--live { background: linear-gradient(180deg, rgba(107,31,44,.26), rgba(107,31,44,.06)); box-shadow: inset 0 0 0 1px var(--linha-vinho), var(--sh-2); }
.grade-mod--live .grade-mod__aulas li::before { background: var(--vinho-vivo); }

/* ---------- Professores convidados (linho) ---------- */
.professores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
.professor { padding: var(--s-5) 0; border-top: 1px solid var(--linha-clara); }
.professor__area { margin: 0 0 var(--s-2); font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-caps-2); text-transform: uppercase; color: var(--ouro-profundo); }
.professor__nome { margin: 0 0 var(--s-2); font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--tx-escuro); }
.professor__aulas { list-style: none; margin: 0; padding: 0; }
.professor__aulas li { font-size: var(--t-small); line-height: 1.45; color: var(--tx-escuro-2); }
.professor__aulas li + li { margin-top: var(--s-1); }

/* ---------- Fechamento e rodapé ---------- */
.grade-fim { overflow: hidden; }
.grade-fim .divisor { max-width: 240px; margin-inline: auto; }
.rodape { padding-bottom: var(--s-8); }
.rodape__marca { display: inline-block; border-radius: var(--r-sm); }
.rodape__marca img { height: 96px; }
.rodape__legal { text-align: right; line-height: 1.6; }
.rodape__legal p { margin: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .grade-barra__indice a { padding: 0 10px; }
  .grade-barra__indice a span { display: none; }
}
@media (max-width: 960px) {
  .grade-vivos { grid-template-columns: 1fr; }
  .grade-vivo__qtd { min-height: 0; }
  .professores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grade-mods { columns: 1; }
  .grade-barra__indice { display: none; }
  .grade-barra__linha { justify-content: center; min-height: 60px; }
}
@media (max-width: 640px) {
  .grade-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-numero:nth-child(3) { border-left: 0; }
  .grade-numero:nth-child(n+3) { border-top: 1px solid var(--linha-escura); }
  .grade-numero { padding: var(--s-5) var(--s-2); }
  .grade-legenda { flex-direction: column; align-items: flex-start; text-align: left; }
  .grade-legenda li { align-items: flex-start; }
  .grade-pilar__cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .grade-pilar__selo { display: none; }
  .grade-filtro { width: 100%; }
  .grade-filtro button { flex: 1; padding: 0 8px; }
  .professores { grid-template-columns: 1fr; }
  .rodape__linha { flex-direction: column; align-items: center; text-align: center; gap: var(--s-6); }
  .rodape__marca img { height: 150px; }
  .rodape__legal { text-align: center; }
}