/* "Como funciona": o anel interativo com as 4 etapas. O verde só acende na etapa 4 (o sim do banco). */
.ciclo { background: var(--azul); color: #fff; }
.ciclo .titulo p { color: #C9D3E6; }
.ciclo .rotulo { color: var(--verde); }
.ciclo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ciclo-roda { position: relative; width: min(420px, 100%); aspect-ratio: 1; justify-self: center; }
.ciclo-roda svg { width: 100%; height: 100%; }
.ciclo-roda path { fill: none; stroke-width: 10; stroke-linecap: butt; }
.ciclo-roda .trilho { stroke: rgba(255, 255, 255, .1); }
.ciclo-roda .progresso { stroke: var(--caminho); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1), stroke .4s; }
.ciclo-roda .sim { stroke: rgba(31, 191, 117, .15); transition: stroke .5s, filter .5s; }
.ciclo-roda.no-sim .progresso { stroke: #F2F6FC; }
.ciclo-roda.no-sim .sim { stroke: var(--verde); filter: drop-shadow(0 0 6px var(--verde)); }
/* pontos das etapas, na mesma posição das etapas da abertura (topo, esquerda, base, direita) */
.ciclo-ponto { position: absolute; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: var(--azul-2); color: #fff; font: 800 18px Sora, sans-serif; cursor: pointer; transition: background .3s, border-color .3s, transform .3s; }
.ciclo-ponto:hover { transform: translate(-50%, -50%) scale(1.08); }
.ciclo-ponto.feito { border-color: var(--caminho); background: var(--azul-3); }
.ciclo-ponto.ativo { background: var(--caminho); border-color: #fff; transform: translate(-50%, -50%) scale(1.15); }
.ciclo-ponto.p4.ativo { background: var(--verde); color: var(--azul); }
.ciclo-ponto.p1 { left: 50%; top: 13.3%; }
.ciclo-ponto.p2 { left: 13.3%; top: 50%; }
.ciclo-ponto.p3 { left: 50%; top: 86.7%; }
.ciclo-ponto.p4 { left: 86.7%; top: 50%; }
.ciclo-meio { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #8FA3C8; font-weight: 600; pointer-events: none; }
.ciclo-painel { position: relative; min-height: 290px; }
.ciclo-etapa { display: none; animation: entra .5s ease; }
.ciclo-etapa.ativa { display: block; }
@keyframes entra { from { opacity: 0; transform: translateX(16px); } }
.ciclo-num { display: inline-block; font-size: 13px; font-weight: 700; color: var(--caminho); text-transform: uppercase; letter-spacing: .12em; }
.ciclo-num-sim { color: var(--verde); }
.ciclo-etapa h3 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 8px 0 14px; }
.ciclo-etapa p { color: #C9D3E6; font-size: 18px; max-width: 480px; }
.ciclo-controles { display: flex; gap: 10px; margin-top: 30px; }
.ciclo .btn-linha-escura { border-color: rgba(255, 255, 255, .4); color: #fff; }
.ciclo .btn-linha-escura:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 860px) { .ciclo-grade { grid-template-columns: 1fr; gap: 28px; } .ciclo-roda { width: min(320px, 80vw); } .ciclo-painel { min-height: 0; text-align: center; } .ciclo-etapa p { margin-inline: auto; } .ciclo-controles { justify-content: center; } }