/* ===================================================================
   EQUIPES & DUPLAS — equipes.css
   Base from styles.css + temporada.css + hunter.css
   (.hn-card, .hn-prose, .hn-manifesto, .hn-foe-grid, .chip-grid).
   =================================================================== */

/* —— Hero (font sized so the longest line never wraps; clean stack) —— */
.eq-hero h1 { font-size: clamp(24px, 6.8vw, 34px); line-height: 1.04; }
.eq-hero h1 .l { display: block; white-space: nowrap; }
.eq-hero h1 .l:last-child { color: var(--accent); }
.eq-hero { background: radial-gradient(130% 95% at 50% -5%, #181614, #0b0b0d 62%); }

/* Emblema/escudo motif (identidade) */
.eq-emblem { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 320px; height: 320px; color: var(--accent); opacity: .07; pointer-events: none; z-index: 1; }
.eq-emblem svg { width: 100%; height: 100%; }
.eq-emblem.fc { width: 280px; height: 280px; opacity: .06; }
.eq-hero .hero-inner, .final-cta .fc-inner { position: relative; z-index: 2; }

/* —— Flow (timeline vertical) —— */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.flow .fl-step { display: flex; align-items: center; gap: 12px; background: var(--graphite); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; transition: border-color .22s, transform .22s; }
.flow .fl-step:hover { border-color: var(--accent); transform: translateX(3px); }
.flow .fl-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #0a0a0a; font-family: var(--font-display); font-size: 14px; display: grid; place-items: center; }
.flow .fl-step b { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); }
.flow .fl-arrow { text-align: center; color: var(--accent); font-size: 15px; padding: 3px 0; }

/* —— Liderança (papéis) —— */
.eq-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.eq-roles .role { display: flex; align-items: center; gap: 10px; background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); transition: border-color .22s, transform .22s; }
.eq-roles .role:hover { border-color: var(--accent); transform: translateY(-2px); }
.eq-roles .role .r-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(224,168,46,.12); border: 1px solid rgba(224,168,46,.26); color: var(--accent); }
.eq-roles .role .r-ico svg { width: 16px; height: 16px; }

/* —— O futuro (linhas) —— */
.eq-future { display: flex; flex-direction: column; gap: 8px; }
.eq-future .fut-line { display: flex; align-items: center; gap: 11px; background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); }
.eq-future .fut-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

@media (max-width: 360px) {
  .eq-roles { grid-template-columns: 1fr; }
}