/* ==========================================================================
   blocos.css — biblioteca de SEÇÕES/elementos extras p/ compor landing pages.
   Linka DEPOIS do main.css. Usa os mesmos tokens (:root) do main.css.
   Cada estrutura (estrutura-N.html) compõe um subconjunto destes blocos.
   ========================================================================== */

/* Placeholder de imagem (troque por <img> real) ------------------------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 14%, #fff), color-mix(in srgb, var(--color-secondary) 18%, #fff));
  color: var(--color-primary-dark); font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-sm); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-5); min-height: 180px;
}
.ph--wide { aspect-ratio: 16/9; }
.ph--square { aspect-ratio: 1/1; }
.ph--avatar { width: 56px; height: 56px; min-height: 0; border-radius: 50%; font-size: var(--fs-xs); flex: 0 0 auto; }

/* HERO --------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 1.5rem + 6vw, 5.5rem); }
.hero__eyebrow { color: var(--color-cta); }
.hero__title { font-size: var(--fs-3xl); max-width: 16ch; }
.hero__sub { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 52ch; margin-top: var(--space-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__note { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-4); }
.hero--split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero--split { grid-template-columns: 1.1fr 0.9fr; } }
.hero--center { text-align: center; }
.hero--center .hero__title, .hero--center .hero__sub { margin-inline: auto; }
.hero--center .hero__actions { justify-content: center; }

/* Formulário de captura ---------------------------------------------------- */
.lead-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.lead-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.lead-card p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-heading); }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; background: #fff;
  border: 1px solid #64748b; border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.form-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-3); text-align: center; }

/* Faixa de logos (prova social) ------------------------------------------- */
.logos-strip { border-block: 1px solid var(--color-border); background: var(--color-surface); padding-block: var(--space-6); }
.logos-strip__label { text-align: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-5); }
.logos-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); }
.logos-strip__item { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); color: var(--color-text-muted); opacity: .7; }

/* Bento grid --------------------------------------------------------------- */
.bento { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } .bento__item--lg { grid-column: span 2; } .bento__item--tall { grid-row: span 2; } }
.bento__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); }
.bento__item h3 { font-size: var(--fs-lg); }
.bento__item p { color: var(--color-text-muted); }

/* Estatísticas / números --------------------------------------------------- */
.stats { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-3xl); color: var(--color-primary); line-height: 1; }
.stat__label { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* Passos (como funciona) --------------------------------------------------- */
.steps { display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-3); }
.step h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); }

/* Depoimentos -------------------------------------------------------------- */
.tcards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .tcards { grid-template-columns: repeat(3, 1fr); } }
.tcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.tcard__quote { font-size: var(--fs-lg); margin-bottom: var(--space-5); }
.tcard__who { display: flex; align-items: center; gap: var(--space-3); }
.tcard__name { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); }
.tcard__role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.stars { color: #f59e0b; letter-spacing: 2px; font-size: var(--fs-lg); }

/* Módulos (curso) ---------------------------------------------------------- */
.modules { display: grid; gap: var(--space-3); max-width: var(--container-narrow); margin-inline: auto; counter-reset: mod; }
.module { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.module__n { counter-increment: mod; flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: var(--fs-xl); }
.module__n::before { content: counter(mod, decimal-leading-zero); }
.module h3 { font-size: var(--fs-lg); }
.module p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

/* Autoridade / instrutor --------------------------------------------------- */
.author { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 760px) { .author { grid-template-columns: 260px 1fr; } }
.author__media { width: 100%; aspect-ratio: 1/1; max-width: 260px; }

/* Garantia ----------------------------------------------------------------- */
.guarantee { display: flex; gap: var(--space-5); align-items: center; background: var(--color-surface); border: 2px dashed var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-6); max-width: var(--container-narrow); margin-inline: auto; }
.guarantee__seal { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; text-align: center; font-size: var(--fs-xs); line-height: 1.1; }

/* Countdown ---------------------------------------------------------------- */
.countdown { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.countdown__box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); text-align: center; min-width: 76px; box-shadow: var(--shadow-sm); }
.countdown__num { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-2xl); color: var(--color-primary); line-height: 1; }
.countdown__lbl { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Agenda / programação ----------------------------------------------------- */
.agenda { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--space-3); }
.agenda__item { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.agenda__time { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); }
.agenda__title { font-weight: 600; color: var(--color-heading); }
.agenda__desc { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Palestrantes / equipe ---------------------------------------------------- */
.people { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .people { grid-template-columns: repeat(4, 1fr); } }
.person { text-align: center; }
.person__media { width: 96px; height: 96px; aspect-ratio: 1; min-height: 0; margin: 0 auto var(--space-3); border-radius: 50%; }
.person__name { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); }
.person__role { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Antes / depois ----------------------------------------------------------- */
.beforeafter { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .beforeafter { grid-template-columns: 1fr 1fr; } }
.ba__tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .7rem; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.ba__tag--before { background: #fee2e2; color: #b91c1c; }
.ba__tag--after { background: #dcfce7; color: #15803d; }

/* Localização / contato ---------------------------------------------------- */
.location { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 820px) { .location { grid-template-columns: 1fr 1fr; } }
.location__list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.location__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.location__list svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-primary); margin-top: 2px; }
.location__map { aspect-ratio: 16/10; }