/* Página de cursos.

   É a única página do site que vende algo que não é material — e é o
   único diferencial que nenhum concorrente da busca local tem. Por isso
   ela não é uma seção do catálogo: tem página própria, para poder
   ranquear sozinha em "curso de drywall" e para dar destino a link de
   Instagram e de post do Google.

   O tom é o do resto do site: direto, sem promessa. Curso sob demanda não
   tem data nem preço fixos, e fingir que tem produziria a decepção logo
   na primeira conversa. */

.cursos {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Abertura ------------------------------------------------------------ */

.curso-capa {
  padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--linha);
}

.curso-capa .rotulo {
  display: block; margin-bottom: 14px;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--laranja-forte);
}

.curso-capa h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-stretch: 125%; font-weight: 900;
  line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance; margin: 0;
}
.curso-capa h1 em { font-style: normal; color: var(--laranja); }

.curso-capa p {
  max-width: 56ch; margin: 18px 0 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6; color: var(--texto-medio);
}

.curso-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Os três sistemas ---------------------------------------------------- */

.curso-secao { padding: clamp(38px, 6vw, 68px) 0; }

.curso-secao > h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-stretch: 118%; font-weight: 900;
  text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 8px;
}
.curso-secao > p.apoio {
  max-width: 58ch; margin: 0 0 30px;
  color: var(--texto-medio); line-height: 1.6;
}

.curso-grade {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  background: var(--linha);
  border: 1px solid var(--linha);
}

.curso-card { background: var(--papel); padding: 28px 26px 30px; }

/* Desenho da modalidade.

   Nao ha foto propria dos tres sistemas, e recorte de catalogo nao
   serve: a chapa de gesso e branca em fundo branco, e os tres lado a
   lado leriam como "tres produtos" em vez de "tres sistemas". O desenho
   mostra o que a foto de produto nao mostra — a diferenca estrutural
   entre dividir um ambiente e sustentar uma casa.

   A espessura do traco carrega informacao: fino no aco, grosso na
   madeira. Quando chegar foto ou video real da turma, isto sai. */
.curso-desenho {
  margin: 0 0 20px;
  padding: 14px 0;
  background: var(--nuvem);
  border: 1px solid var(--linha);
}
.curso-desenho svg { display: block; width: 100%; height: auto; max-height: 116px; }

.curso-desenho .estrutura { fill: none; stroke: var(--texto-medio); stroke-width: 1.9; }
.curso-desenho .estrutura.madeira { stroke: var(--texto); stroke-width: 3.2; }

/* Tracejado, porque a fita de travamento e peca aplicada sobre o quadro
   e nao parte dele. Em --linha-forte sumia contra o --nuvem do painel. */
.curso-desenho .travamento {
  stroke: var(--texto-fraco); stroke-width: 1.5; stroke-dasharray: 5 3.5;
}

/* O laranja marca o que da nome ao sistema: a chapa no drywall, o vao
   que so a parede estrutural permite abrir no steel frame. */
.curso-desenho .placa { fill: var(--laranja-fraco); stroke: var(--laranja); stroke-width: 1.9; }
.curso-desenho .vao   { fill: var(--laranja-fraco); stroke: var(--laranja); stroke-width: 1.9; }

.curso-card .numero {
  display: block; margin-bottom: 16px;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  color: var(--laranja-forte);
}

.curso-card h3 {
  font-size: 1.25rem; font-stretch: 115%; font-weight: 900;
  text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 10px;
}

.curso-card p { margin: 0; color: var(--texto-medio); line-height: 1.6; font-size: .95rem; }

/* Para quem ----------------------------------------------------------- */

.curso-publico {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 8px;
}

.curso-publico div { border-top: 3px solid var(--laranja); padding-top: 16px; }
.curso-publico strong { display: block; margin-bottom: 6px; font-size: 1.02rem; }
.curso-publico span { color: var(--texto-medio); line-height: 1.55; font-size: .93rem; }

/* Como funciona ------------------------------------------------------- */

.curso-fatos { list-style: none; margin: 0; padding: 0; max-width: 62ch; }

.curso-fatos li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--linha);
}
.curso-fatos li:last-child { border-bottom: 0; }

.curso-fatos svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  stroke: var(--laranja-forte); stroke-width: 1.7; fill: none;
}
.curso-fatos b { display: block; margin-bottom: 3px; }
.curso-fatos span { color: var(--texto-medio); line-height: 1.55; font-size: .95rem; }

/* Chamada final ------------------------------------------------------- */

.curso-chamada {
  background: var(--grafite); color: var(--claro-forte);
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 48px);
  margin: clamp(30px, 5vw, 56px) 0 clamp(50px, 7vw, 80px);
}
.curso-chamada h2 {
  max-width: 22ch;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-stretch: 120%; font-weight: 900; line-height: 1.1;
  text-wrap: balance; margin: 0 0 12px;
}
.curso-chamada p { max-width: 54ch; margin: 0 0 24px; color: var(--claro-medio); line-height: 1.6; }