/* ============================================================
   04. COMPONENTES DE CONTEÚDO + PEÇAS DO CURSO DE BENZIMENTO
   Combinações dos componentes básicos. Nenhum token novo.
   ============================================================ */

/* ---------- 4.1 HERO ---------------------------------------- */

/* Hero com imagem: título editorial em cima, faixa fotográfica embaixo */
.hero {
  position: relative;
  padding-block: var(--esp-9) 0;
  overflow: hidden;
}
.hero__cabeca {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--gap-img-conteudo); align-items: end;
  margin-bottom: var(--esp-8);
}
@media (max-width: 860px) { .hero__cabeca { grid-template-columns: 1fr; gap: var(--esp-6); } }
.hero__faixa {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--esp-3);
}
@media (max-width: 720px) { .hero__faixa { grid-template-columns: 1fr; } }
.hero__faixa .foto:first-child { border-radius: var(--raio-arco) var(--raio-md) 0 0 / var(--raio-arco) var(--raio-md) 0 0; }
.hero__faixa .foto { border-radius: var(--raio-md) var(--raio-md) 0 0; }
.hero__faixa .foto:nth-child(2) { border-radius: var(--raio-arco); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Hero dividido: metade cor, metade fotografia. Sem sobreposição de texto. */
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 34rem;
}
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; min-height: 0; } }
.hero-split__texto {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--gap-titulo-texto);
  padding: var(--esp-10) clamp(1.5rem, 5vw, 5rem);
}
.hero-split__midia { position: relative; min-height: 22rem; }
.hero-split__midia .foto { position: absolute; inset: 0; }

/* ---------- 4.2 SEÇÕES EDITORIAIS --------------------------- */

/* Introdução: parágrafo largo, centrado, com ornamento */
.intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--esp-5); }
.intro p {
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  line-height: 1.38;
  letter-spacing: -.012em;
  font-weight: var(--w-medio);
  max-width: 30ch;
  color: var(--title-primary);
  margin: 0;
}

/* Cabeçalho de seção reutilizável */
.cabeca-secao {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--gap-img-conteudo); align-items: end;
  margin-bottom: var(--esp-8);
}
@media (max-width: 720px) { .cabeca-secao { grid-template-columns: 1fr; align-items: start; gap: var(--esp-5); } }

/* Seção texto + fotografia */
.texto-foto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-img-conteudo); align-items: center; }
.texto-foto--larga { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 860px) { .texto-foto, .texto-foto--larga { grid-template-columns: 1fr; } }

/* ---------- 4.3 GRADES -------------------------------------- */

.grade-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap-grid);
}
.beneficio { display: flex; flex-direction: column; gap: var(--esp-4); }
.beneficio__titulo {
  font-family: var(--fonte-display);
  font-size: 1.125rem; font-weight: var(--w-titulo);
  line-height: 1.3; color: var(--title-primary); margin: 0;
}
.beneficio__texto { font-size: var(--t-small); color: var(--text-secondary); margin: 0; }

/* Grade editorial: colunas desiguais, ritmo de revista */
.grade-editorial { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-grid); }
.grade-editorial > :nth-child(1) { grid-column: span 7; }
.grade-editorial > :nth-child(2) { grid-column: span 5; }
.grade-editorial > :nth-child(3) { grid-column: span 4; }
.grade-editorial > :nth-child(4) { grid-column: span 8; }
@media (max-width: 860px) { .grade-editorial > * { grid-column: span 12 !important; } }

/* ---------- 4.4 GALERIAS ------------------------------------ */

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
@media (max-width: 720px) { .galeria { grid-template-columns: repeat(2, 1fr); } }

/* Galeria assimétrica: alturas e formas alternadas, como um mural */
.galeria-assim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
  align-items: start;
}
.galeria-assim > :nth-child(1) { grid-column: span 2; }
.galeria-assim > :nth-child(2) { grid-column: span 1; margin-top: var(--esp-8); }
.galeria-assim > :nth-child(3) { grid-column: span 1; }
.galeria-assim > :nth-child(4) { grid-column: span 1; margin-top: calc(var(--esp-6) * -1); }
.galeria-assim > :nth-child(5) { grid-column: span 2; }
.galeria-assim > :nth-child(6) { grid-column: span 1; margin-top: var(--esp-6); }
@media (max-width: 720px) {
  .galeria-assim { grid-template-columns: repeat(2, 1fr); }
  .galeria-assim > * { grid-column: span 1 !important; margin-top: 0 !important; }
}

/* ---------- 4.5 PASSOS NUMERADOS ---------------------------- */

.passos { display: flex; flex-direction: column; }
.passo {
  display: grid;
  grid-template-columns: 4.5rem 1fr minmax(0, 1.1fr);
  gap: var(--gap-img-conteudo);
  align-items: start;
  padding-block: var(--esp-7);
  border-top: 1px solid var(--border-light);
}
.passo:last-child { border-bottom: 1px solid var(--border-light); }
@media (max-width: 860px) { .passo { grid-template-columns: 3.25rem 1fr; gap: var(--esp-5); } }
.passo__num {
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: .9;
  font-weight: var(--w-display);
  letter-spacing: -.03em;
  color: var(--text-accent);
  opacity: .55;
  transition: opacity var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.passo__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  font-weight: var(--w-titulo); color: var(--title-primary); margin: 0;
}
.passo__texto { font-size: var(--t-small); color: var(--text-secondary); margin: var(--esp-3) 0 0; }
.passo.is-selected .passo__num,
.passo.is-active .passo__num { opacity: 1; color: var(--terra-700); }
@media (hover: hover) and (pointer: fine) {
  .passo:hover .passo__num, .passo.is-hover .passo__num { opacity: 1; }
}

/* Passo compacto em coluna (variante do mesmo componente) */
.passo--coluna { grid-template-columns: 1fr; gap: var(--esp-4); border: 0; padding-block: 0; }
.passo--coluna .passo__num { opacity: 1; color: var(--terra-500); }

/* ---------- 4.6 INFORMAÇÕES PRÁTICAS ------------------------ */

.praticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0;
  border: var(--traco-fino) solid var(--border-light);
  border-radius: var(--raio-md);
  overflow: hidden;
}
.praticas > * {
  padding: var(--pad-card-denso);
  border-right: 1px solid var(--border-light);
}
.praticas > :last-child { border-right: 0; }
@media (max-width: 720px) {
  .praticas > * { border-right: 0; border-bottom: 1px solid var(--border-light); }
  .praticas > :last-child { border-bottom: 0; }
}

/* ---------- 4.7 CTA ----------------------------------------- */

/* CTA de WhatsApp: faixa horizontal, canal direto */
.cta-whats {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-6); flex-wrap: wrap;
  padding: var(--esp-6) var(--pad-card);
  border-radius: var(--raio-lg);
  background: color-mix(in srgb, var(--verde-600) 12%, transparent);
  border: var(--traco-fino) solid color-mix(in srgb, var(--verde-600) 34%, transparent);
}
.cta-whats__texto { display: flex; align-items: center; gap: var(--esp-5); }
.cta-whats__tit {
  font-family: var(--fonte-display); font-size: 1.125rem;
  font-weight: var(--w-titulo); margin: 0; color: var(--title-primary);
}
.cta-whats__sub { font-size: var(--t-small); color: var(--text-secondary); margin: var(--esp-1) 0 0; }

/* CTA final: bloco escuro de fechamento */
.cta-final {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-titulo-texto);
  padding: var(--esp-10) var(--pad-card);
  border-radius: var(--raio-arco-sut);
}
.cta-final .acoes { margin-top: var(--esp-4); justify-content: center; }

/* ---------- 4.8 PEÇAS DO CURSO DE BENZIMENTO ---------------- */

/* Card de informação do curso — local, formato, vagas, datas */
.curso-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gap-grid);
}
.curso-info__item {
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: var(--pad-card-denso);
  border-radius: var(--raio-md);
  background: var(--surface-light);
  border: var(--traco-fino) solid var(--border-light);
}
.ctx-escuro .curso-info__item { background: var(--surface-light); border-color: var(--border-on-dark); }

/* Card de conteúdo / experiência — "o que você vai viver" */
.experiencia {
  position: relative;
  display: flex; flex-direction: column; gap: var(--esp-4);
  padding: var(--pad-card);
  padding-top: var(--esp-7);
  border-radius: var(--raio-arco-sut);
  background: var(--surface-warm);
  overflow: hidden;
}
.experiencia__ord {
  font-family: var(--fonte-display);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--terra-700);
  margin: 0;
}
.experiencia__titulo {
  font-family: var(--fonte-display);
  font-size: 1.25rem; line-height: 1.25;
  font-weight: var(--w-titulo); color: var(--title-primary); margin: 0;
}
.experiencia__texto { font-size: var(--t-small); color: var(--text-secondary); margin: 0; }
.experiencia--escura { background: var(--bg-mata); color: var(--text-on-dark); }
.experiencia--escura .experiencia__titulo { color: var(--creme-300); }
.experiencia--escura .experiencia__ord { color: var(--ouro-400); }
.experiencia--escura .experiencia__texto { color: var(--text-on-dark-sec); }

.grade-experiencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--gap-grid);
}

/* Bloco de apresentação da Yasmin */
.mentora { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--gap-img-conteudo); align-items: center; }
@media (max-width: 860px) { .mentora { grid-template-columns: 1fr; } }
.mentora__retrato { position: relative; }
.mentora__retrato .foto { border-radius: var(--raio-arco); }
.mentora__selo {
  position: absolute; right: calc(var(--esp-5) * -1); bottom: var(--esp-7);
  z-index: 4;
}
.mentora__creds {
  display: flex; flex-wrap: wrap; gap: var(--esp-2);
  margin-top: var(--esp-5);
}

/* Área de informações de pagamento */
.pagamento {
  display: flex; flex-direction: column; gap: var(--esp-5);
  padding: var(--pad-card);
  border-radius: var(--raio-md);
  border: var(--traco-medio) dashed var(--border-medium);
  background: transparent;
}
.pagamento__linhas { display: flex; flex-direction: column; gap: 0; }
.pagamento__linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  padding-block: var(--esp-3);
  font-size: var(--t-small);
}
.pagamento__linha + .pagamento__linha { border-top: 1px dotted var(--border-light); }
.pagamento__linha strong { font-family: var(--fonte-display); font-weight: var(--w-titulo); }
.pagamento__meios { display: flex; gap: var(--esp-3); flex-wrap: wrap; color: var(--text-muted); }

/* Galeria de encontros — fotografia documental em tiras */
.encontros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--esp-3);
}
.encontros .foto:nth-child(odd)  { border-radius: var(--raio-arco); }
.encontros .foto:nth-child(even) { border-radius: var(--raio-md); }