/* ==========================================================================
   Cursos UNA — página de curso
   Só o que é próprio desta página. Tudo que já existia (secao, tag, rotulo,
   btn, chamada, cabeçalhos) vem de styles.css e programas.css, que a página
   carrega antes deste arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — texto à esquerda, arte à direita
   -------------------------------------------------------------------------- */
.curso-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-fundo);
}
.curso-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: 24px 40px;
  /* A base é menor que o topo: a cliente pediu o "Sobre este curso" mais
     perto do hero. */
  padding: var(--espaco-dobra) 0 30px;
  /* container para o título se medir pela faixa inteira, e não pela janela */
  container-type: inline-size;
}
.curso-hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* As três linhas são todas forçadas por <br>, e não deixadas ao acaso da
   largura: a divisão é a que a cliente pediu. O teto é 46px e não os 52 do
   resto do site porque "Comportamental Dialética" mede 650px em 52px numa
   coluna de 653 — passava raspando e quebraria de novo em outra máquina. */
.curso-hero__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.5rem, 3.5vw, 2.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.curso-hero__titulo span { color: var(--c-violeta); }
.curso-hero__apoio { max-width: 52ch; color: var(--c-texto); font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.6; }
/* Formato do curso: pílula com ícone de vídeo, como na referência. É um
   selo de formato, não corpo de texto — por isso vem marcado e compacto. */
.curso-hero__formato {
  /* Desce um pouco em relação ao parágrafo: pedido da cliente. */
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border: 1px solid var(--c-borda);
  border-radius: 60px;
  background: #fff;
  color: var(--c-tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.curso-hero__formato-icone {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-fundo-lilas);
  color: var(--c-violeta);
}
.curso-hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.curso-hero__arte { width: 100%; height: auto; border-radius: var(--raio); }

/* --------------------------------------------------------------------------
   2. Sobre o curso + ficha lateral
   -------------------------------------------------------------------------- */
.curso-sobre {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  align-items: start;
  gap: 48px;
}
.curso-sobre__titulo { color: var(--c-tinta); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; line-height: 1.3; }

/* Grade de dados do curso, no formato da referência: rótulo com ícone, valor
   logo abaixo, duas colunas. "Para quem" é longo e ocupa a linha inteira. */
.curso-meta {
  /* Largura do ícone + o gap do `dt`. O texto recua por este valor para
     começar debaixo do título, não debaixo do ícone: a coluna de ícones fica
     livre e a leitura desce em uma linha só. */
  --meta-recuo: 25px;

  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; margin-top: 22px;
}
.curso-meta__item--largo { grid-column: 1 / -1; }
.curso-meta dt {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-tinta);
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.curso-meta dt svg { flex: none; width: 17px; height: 17px; color: var(--c-violeta); }
.curso-meta dd {
  /* O `dd` nasce com `margin-inline-start: 40px` do navegador, que não alinha
     nem com o ícone nem com o título. Trocar pelo recuo é o que alinha. */
  margin: 5px 0 0 var(--meta-recuo);
  color: var(--c-texto); font-size: 15px; line-height: 1.55;
}
.curso-meta dd em { font-style: italic; }

.curso-sobre__corpo { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--c-borda); }
.curso-sobre__corpo p { color: var(--c-texto); font-size: 16px; line-height: 1.75; }
.curso-sobre__corpo p + p { margin-top: 16px; }

/* A ficha acompanha a leitura: o texto da esquerda é longo e a decisão de
   inscrição precisa continuar à mão enquanto se desce. */
/* A ficha sobe e encosta na dobra do hero, como na referência: ela amarra as
   duas dobras em vez de começar depois da linha. O z-index garante que fique
   por cima do fundo do hero, não atrás dele. */
.curso-ficha {
  position: sticky;
  top: 100px;
  z-index: 2;
  /* Precisa vencer o padding-block da seção (70px) antes de começar a
     avançar de fato sobre o hero — por isso o valor é maior que o avanço
     visível, que fica em torno de 80px. */
  margin-top: clamp(-150px, -10vw, -90px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 0 0 26px;
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.curso-ficha__titulo { padding: 28px 26px 0; color: var(--c-tinta); font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.25; }
.curso-ficha__sub { padding: 0 26px; color: var(--c-texto); font-size: 14px; line-height: 1.45; }

/* Destaques com check — a parte que vem da referência. */
.curso-ficha__destaques { display: flex; flex-direction: column; gap: 12px; padding: 0 26px; }
.curso-ficha__destaques li {
  position: relative;
  padding-left: 28px;
  color: var(--c-tinta);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
/* O check é desenhado em CSS: duas hastes giradas, sem arquivo novo. */
.curso-ficha__destaques li::before {
  content: "";
  position: absolute;
  left: 4px; top: .35em;
  width: 6px; height: 11px;
  border: solid var(--c-violeta);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}

/* Especificações com divisória — a parte que é nossa. */
.curso-ficha__lista { display: flex; flex-direction: column; gap: 0; padding: 0 26px; }
.curso-ficha__lista > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--c-borda); }
.curso-ficha__lista dt { color: var(--c-texto); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.curso-ficha__lista dd { color: var(--c-tinta); font-size: 15px; font-weight: 700; line-height: 1.4; }

.curso-ficha__preco {
  display: flex; flex-direction: column; gap: 4px;
  margin-inline: 26px; padding-top: 18px;
  border-top: 1px solid var(--c-borda);
  color: var(--c-tinta); font-size: 30px; font-weight: 700; line-height: 1.15;
}
.curso-ficha__rotulo { color: var(--c-texto); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* A condição fica colada no valor: "Gratuito" sozinho dava a entender curso
   aberto, e a gratuidade depende da compra do ingresso. */
.curso-ficha__condicao { margin-top: 2px; color: var(--c-texto); font-size: 13px; font-weight: 400; line-height: 1.4; }
/* `white-space: nowrap` garante a linha única: o rótulo quebrando em duas
   deixava a seta deslocada e o botão com o dobro da altura. No celular a fonte
   cede alguns pixels para o texto caber sem estourar a ficha. */
.curso-ficha__cta { margin-inline: 26px; justify-content: center; white-space: nowrap; }
@media (max-width: 620px) {
  .curso-ficha__cta { margin-inline: 18px; padding-inline: 20px; font-size: 15px; }
}
/* `balance` reparte as linhas por igual — sem isto sobrava "e-mail." sozinho
   na última linha. */
/* Toda a ficha alinha à esquerda, a pedido da cliente: a lista com marcadores
   é o único bloco que não aceita centro, então é ela que define o eixo. */
.curso-ficha__rodape {
  padding: 0 26px;
  color: var(--c-texto);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
}
.curso-ficha__condicao { text-wrap: balance; }

/* Marca de conteúdo pendente — sai quando o texto final chegar. */
.curso-nota {
  margin-top: 20px;
  padding: 10px 16px;
  border-left: 3px solid var(--c-pessego-2);
  border-radius: 0 8px 8px 0;
  background: rgba(235,131,75,.08);
  color: var(--c-texto);
  font-size: 14px !important;
  line-height: 1.5;
}
.curso-nota--clara { background: rgba(255,255,255,.08); color: var(--c-lilas-3); }

/* --------------------------------------------------------------------------
   3 e 4. O que o curso oferece · Competências
   Eram duas dobras alternadas com cartões de gradiente ao lado do texto. A
   cliente pediu para tirar: o site inteiro já é denso e esta página deveria
   descansar. Sobrou texto corrido, numa coluna só.
   -------------------------------------------------------------------------- */
.curso-corrido { display: block; }

.curso-corrido__texto { display: flex; flex-direction: column; gap: 14px; }
.curso-corrido__titulo { color: var(--c-tinta); font-size: clamp(1.375rem, 2.3vw, 1.875rem); font-weight: 700; line-height: 1.3; }
.curso-corrido__texto p { color: var(--c-texto); font-size: 16px; line-height: 1.75; max-width: 86ch; }

.curso-competencias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 4px; }
.curso-competencias li {
  position: relative;
  padding-left: 20px;
  color: var(--c-texto);
  font-size: 15px;
  line-height: 1.55;
}
.curso-competencias li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-violeta);
}

/* --------------------------------------------------------------------------
   5. Para quem se destina
   -------------------------------------------------------------------------- */
/* Seis perfis em três colunas, numerados. O número é a âncora visual do
   cartão: sem título, era ele ou um marcador qualquer, e o número ainda
   comunica que a lista é fechada. */
.curso-publico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.curso-publico li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 22px;
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  background: #fff;
}
.curso-publico__numero {
  display: grid; place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-fundo-lilas);
  color: var(--c-violeta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}
.curso-publico p { color: var(--c-tinta); font-size: 16px; font-weight: 600; line-height: 1.45; }

/* --------------------------------------------------------------------------
   6. Aulas em sanfona
   <details>/<summary> nativos: abrem por teclado, funcionam sem JS e já
   expõem o estado para leitores de tela. Só a aparência é nossa.
   -------------------------------------------------------------------------- */
.aulas__rotulo { margin-bottom: 6px; color: var(--c-tinta); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.aulas { border-top: 1px solid var(--c-borda); }
.aula { border-bottom: 1px solid var(--c-borda); }
.aula__cabecalho {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-lento) var(--e-suave);
}
/* tira o triângulo padrão nos dois motores */
.aula__cabecalho::-webkit-details-marker { display: none; }
.aula__cabecalho::marker { content: ""; }
.aula__cabecalho:hover { background: var(--c-fundo-lilas); }
.aula__numero { color: var(--c-texto); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aula__titulo { color: var(--c-tinta); font-size: 16px; font-weight: 700; line-height: 1.4; }
/* chevron em CSS: duas bordas giradas, sem arquivo nem SVG */
.aula__seta {
  justify-self: end;
  width: 10px; height: 10px;
  margin-top: -4px;
  border: solid var(--c-violeta);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--t-lento) var(--e-suave);
}
.aula[open] .aula__seta { transform: rotate(-135deg); margin-top: 2px; }
.aula[open] .aula__cabecalho { background: var(--c-fundo-lilas); }
.aula__corpo { padding: 4px 4px 24px; max-width: 86ch; }
.aula__rotulo { margin-top: 14px; color: var(--c-violeta); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.aula__rotulo:first-child { margin-top: 0; }
.aula__corpo p { margin-top: 6px; color: var(--c-texto); font-size: 16px; line-height: 1.75; }

/* --------------------------------------------------------------------------
   7. Pré-requisitos
   -------------------------------------------------------------------------- */
.requisito-unico {
  display: flex; align-items: center; gap: 18px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 28px;
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  background: #fff;
}
/* Era um "1" dentro de um disco. Virou check a pedido da cliente: numerar um
   item único sugeria que viria um segundo. */
.requisito-unico__icone { flex: none; width: 26px; height: 26px; }
.requisito-unico p { color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.45; }

.requisito-aviso {
  max-width: 760px;
  margin: 26px auto 0;
  padding: 16px 22px;
  border-left: 3px solid var(--c-violeta);
  border-radius: 0 10px 10px 0;
  background: var(--c-fundo-lilas);
  color: var(--c-texto);
  font-size: 15px;
  line-height: 1.65;
}
.requisito-aviso strong { color: var(--c-tinta); }

/* --------------------------------------------------------------------------
   8. Equipe
   -------------------------------------------------------------------------- */
.equipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.equipe__pessoa {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
/* Preto e branco, a pedido da cliente. */
.equipe__pessoa img {
  width: 100%; height: auto;
  aspect-ratio: 260 / 240;
  object-fit: cover; object-position: center 22%;
  filter: grayscale(1);
}
/* Marca de foto pendente: ocupa o mesmo espaço da imagem, para o cartão não
   mudar de altura quando a foto real entrar. */
.equipe__sem-foto {
  display: grid; place-items: center;
  aspect-ratio: 260 / 240;
  margin: 10px 10px 0;
  border: 1.5px dashed var(--c-borda-2);
  border-radius: 12px;
  background: var(--c-fundo-lilas);
  color: var(--c-texto);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.equipe__nome { padding: 18px 20px; color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.3; }

.bibliografia { max-width: 820px; margin: 44px auto 0; padding-top: 28px; border-top: 1px solid var(--c-borda); }
.bibliografia__titulo { color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.3; }
.bibliografia__lista { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
/* Recuo francês, como manda a norma de referência bibliográfica. */
.bibliografia__lista li { padding-left: 28px; text-indent: -28px; color: var(--c-texto); font-size: 15px; line-height: 1.65; }
.bibliografia__lista em { font-style: italic; }

/* --------------------------------------------------------------------------
   9. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .curso-sobre { grid-template-columns: 1fr; gap: 32px; }
  /* empilhada, a ficha não tem o que acompanhar nem sobre o que avançar */
  .curso-ficha { position: static; max-width: 460px; margin-top: 0; }
}

@media (max-width: 900px) {
  .curso-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .curso-hero__texto { align-items: center; text-align: center; }
  .curso-hero__acoes { justify-content: center; }
  .curso-hero__apoio { margin-inline: auto; }
  .curso-meta { grid-template-columns: 1fr; gap: 18px; }
  .curso-competencias { grid-template-columns: 1fr; }
  .curso-publico,
  .equipe { grid-template-columns: 1fr 1fr; }
  /* o rótulo da aula sai da coluna própria e passa a ficar acima do título */
  .aula__cabecalho { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 14px; }
  .aula__numero { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .curso-publico,
  .equipe { grid-template-columns: 1fr; }
  .curso-ficha { max-width: none; }
}