/* Home — hero, Próxima Reunião and the GP band, moved from the approved mockup.
 * Sections added for the TZ block order (not in the mockup) reuse components.css. */

/* ── Hero: centered typographic ──────────────────────────────────────── */
.hero { padding-top: clamp(2.5rem, 5.5vw, 5rem); text-align: center; }
.hero h1 { font-size: var(--fs-h1); line-height: .92; letter-spacing: -.025em; margin: var(--space-5) auto 0; }
.hero h1 .l { display: block; }
.br-m { display: none; }
.hero h1 em { font-style: italic; color: var(--color-brand); }
.hero__sub { margin-top: var(--space-5); font-size: var(--fs-lead); font-weight: 300; color: var(--color-ink-2); }
.hero .ctas { justify-content: center; }
.hero .horizon__sun { animation: sunset 22s var(--ease) infinite; }
.pano--hero { margin-top: 28px; }
@keyframes sunset {
  0% { left: 10%; transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  70% { left: 74%; transform: translateY(0); opacity: 1; }
  86% { left: 80%; transform: translateY(12px) scale(.85); opacity: 0; }
  100% { left: 80%; opacity: 0; }
}

/* ── Próxima Reunião ─────────────────────────────────────────────────── */
.reuniao { padding-block: clamp(3.5rem, 7vw, 6rem) 0; }

/* ── Ao Vivo strip (new) ─────────────────────────────────────────────── */
.live { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-7); align-items: center; padding: var(--space-6) 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-line); }
.live h2 { font-size: var(--fs-h3); margin: 0; }
.live p { margin-top: .35rem; color: var(--color-ink-2); font-size: .9375rem; }

/* ── Grandes Prêmios band (pano 2) ───────────────────────────────────── */
.gp { padding-bottom: clamp(4rem, 8vw, 7rem); }
.gp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; padding-bottom: var(--space-6); }
.gp h2 { font-size: var(--fs-h2); line-height: 1; margin-top: var(--space-4); }
.gp h2 em { color: var(--color-brand); }

/* ── Cristal / RG split (new) ────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6.5rem); }
.duo__item { border-top: 1px solid var(--color-ink); padding-top: var(--space-5); }
.duo__item h2 { font-size: var(--fs-h3); margin-top: var(--space-3); }
.duo__item p { margin-top: var(--space-3); color: var(--color-ink-2); max-width: 52ch; }
.duo__item .photo { margin-top: var(--space-5); }
.rg-big { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); line-height: .9; margin-top: var(--space-4); }

@media (max-width: 1080px) {
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { text-align: left; }
  .hero h1 { margin-left: 0; font-size: clamp(3.5rem, 18.5vw, 4.6rem); line-height: .9; }
  .br-m { display: inline; }
  .hero .ctas { justify-content: flex-start; }
  .pano--hero .pano__img { object-position: 50% 70% !important; }
  .gp__row { grid-template-columns: 1fr; }
  .live { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
  .hero h1 { font-size: 3.1rem; }
}

/* S6: the mockup's .92 line-height makes the italic accent's inline box spill into
   the lines around it (flow.js "наезд"). As an inline-block its box is the line box;
   the glyphs render exactly as before. */
.hero h1 em { display: inline-block; line-height: .92; padding-bottom: .06em; }