/* ===================================================================
   POLOS — polos.css
   Base from styles.css + temporada.css (.tp-polo-card, .has-skel) +
   hunter.css (.hn-card, .hn-prose, .hn-manifesto, .chip-grid).
   =================================================================== */

/* —— Hero —— */
.pl-hero h1 { font-size: clamp(38px, 12vw, 56px); line-height: .92; }
.pl-hero h1 .l { display: block; }
.pl-hero h1 .l:last-child { color: var(--accent); }
.pl-hero { background: radial-gradient(130% 95% at 50% -5%, #14181a, #0b0b0d 62%); }

/* Map motif behind hero (3 pins conectados) */
.pl-map { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 28% 38%, rgba(224,168,46,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 30%, rgba(224,168,46,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 64%, rgba(224,168,46,.5) 0 3px, transparent 4px),
    linear-gradient(rgba(224,168,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,168,46,.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 34px 34px, 34px 34px;
}
.pl-hero .hero-inner { position: relative; z-index: 2; }

/* —— Polo cards (cidade, sem números) —— */
#polo-cards .tpp-body { gap: 6px; }
.tpp-cidade { font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--txt-dim); }

/* —— Headline tri-linha (mais que localização) —— */
.gold.soft { color: var(--sand); }
#mais-title { line-height: 1.04; }
#mais-title .gold { display: inline; }

/* —— Flow (timeline vertical, igual UR Play) —— */
.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) —— */
.pl-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pl-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; }
.pl-roles .role:hover { border-color: var(--accent); transform: translateY(-2px); }
.pl-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); }
.pl-roles .role .r-ico svg { width: 16px; height: 16px; }

/* —— Política oficial (rede / padrão) —— */
.pl-net { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pl-net .net-item { display: flex; align-items: center; gap: 9px; background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-family: var(--font-cond); font-weight: 600; font-size: 13px; color: var(--sand); }
.pl-net .net-item .ni-ic { flex: 0 0 19px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: rgba(224,168,46,.16); color: var(--accent); }
.pl-net .net-item .ni-ic svg { width: 12px; height: 12px; }

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