/* ===================================================================
   COMO FUNCIONA — como-funciona.css
   Base from styles.css + temporada.css + hunter.css (.hn-prose,
   .hn-manifesto, .chip-grid, .sec). Signature element: .eco-flow —
   a connected node chain that reads like an ecosystem map.
   =================================================================== */

/* —— Hero —— */
.cf-hero h1 { font-size: clamp(30px, 9vw, 44px); line-height: 1.0; margin: 0 0 22px; }
.cf-hero h1 .l { display: block; }
.cf-hero h1 .l:last-child { color: var(--accent); }
.cf-hero { background: radial-gradient(130% 95% at 50% -5%, #101418, #0b0b0d 62%); }

/* —— Network motif —— */
.cf-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: 330px; height: 330px; color: var(--accent); opacity: .08; pointer-events: none; z-index: 1; }
.cf-mark svg { width: 100%; height: 100%; }
.cf-mark.fc { width: 290px; height: 290px; opacity: .06; transform: translate(-50%, -52%); }
.cf-hero .hero-inner, .final-cta .fc-inner { position: relative; z-index: 2; }

/* —— Step section —— */
.cf-step .cf-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(224,168,46,.12); border: 1px solid rgba(224,168,46,.3); color: var(--accent); margin-bottom: 14px; }
.cf-step .cf-ico svg { width: 23px; height: 23px; }
.cf-step .cf-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--font-cond); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: gap .2s; }
.cf-step .cf-link:hover { gap: 11px; }
.cf-step .cf-link svg { width: 15px; height: 15px; }

/* —— Eco-flow: connected node chain (the map) —— */
.eco-flow { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.eco-node { position: relative; display: flex; align-items: center; gap: 12px; background: var(--graphite); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; transition: border-color .22s, transform .22s; }
.eco-node:hover { border-color: var(--accent); transform: translateX(3px); }
.eco-node .en-dot { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(224,168,46,.12); }
.eco-node b { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); line-height: 1.05; }
.eco-arrow { display: flex; justify-content: center; height: 22px; align-items: center; }
.eco-arrow::before { content: ""; width: 2px; height: 22px; background: linear-gradient(var(--accent), rgba(224,168,46,.25)); margin-left: 21px; }

/* destino: chain completa, último nó dourado */
.cf-destino { background: radial-gradient(130% 90% at 50% -10%, #1b1707, var(--bg-premium) 60%); }
.eco-flow-full .eco-node:last-of-type { background: linear-gradient(120deg, rgba(224,168,46,.2), var(--graphite)); border-color: rgba(224,168,46,.5); box-shadow: 0 14px 36px -18px rgba(224,168,46,.55); }
.eco-flow-full .eco-node:last-of-type b { color: var(--gold-bright); font-size: 20px; }
.eco-flow-full .eco-node:last-of-type .en-dot { background: var(--gold-bright); box-shadow: 0 0 0 5px rgba(243,201,92,.2); }

/* chips dentro de um step herdam .chip-grid já existente */