/* Cartões que se abrem sobre a etapa atual — inspiração: Dilum Sanjaya,
   https://codepen.io/dilums/pen/NWodZMd. Implementação própria, sem dependências. */
#ciclo{scroll-margin-top:84px}
.ciclo[hidden]{display:none}
.cycle{--cycle-accent:var(--cyan);position:relative;isolation:isolate;overflow:hidden;min-width:0;height:660px;border:1px solid var(--line-strong);border-radius:24px;background:var(--deep);color:var(--ink)}
.cycle-images,.cycle-image,.cycle-shade{position:absolute;inset:0;pointer-events:none}
.cycle-images{z-index:-2;overflow:hidden}
.cycle-image{width:100%;height:100%;object-fit:cover;object-position:center}
.cycle-shade{z-index:-1;background:linear-gradient(90deg,rgba(5,8,16,.86) 2%,rgba(5,8,16,.52) 36%,rgba(5,8,16,.04) 66%),linear-gradient(0deg,rgba(5,8,16,.86),transparent 46%,rgba(5,8,16,.08))}
.cycle-top{position:absolute;top:30px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.cycle-top span:first-child{display:flex;align-items:center;gap:10px;color:var(--cycle-accent)}
.cycle-top span:first-child::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.cycle-top span:last-child{color:#c3cbd7}
.cycle-copy{position:absolute;top:150px;left:36px;width:42%;max-width:490px}
.cycle-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cycle-accent)}
.cycle-label::before{content:"";display:block;width:34px;height:3px;margin-bottom:22px;background:currentColor;border-radius:2px}
.cycle-title{font-size:clamp(32px,3.7vw,48px);line-height:1.06;letter-spacing:-.045em;margin:16px 0 20px;text-wrap:balance}
.cycle-description{max-width:43ch;font-size:15px;line-height:1.65;color:#d0d8e5}
.cycle-link{margin-top:26px;min-height:44px;padding:0 20px;border-color:rgba(255,255,255,.48);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:rgba(8,12,20,.26)}
.cycle-link svg{width:15px;height:15px}
.cycle-deck{position:absolute;left:62%;right:0;top:210px;display:flex;gap:16px;padding:6px 28px 20px 6px;overflow-x:auto;scrollbar-width:none}
.cycle-deck::-webkit-scrollbar{display:none}
.cycle-card{position:relative;flex:0 0 clamp(154px,16vw,204px);height:280px;overflow:hidden;padding:0;text-align:left;color:#fff;border:1px solid rgba(255,255,255,.26);border-radius:15px;background:#0c1220;cursor:pointer;box-shadow:0 16px 30px rgba(0,0,0,.35);transition:transform .25s,border-color .25s}
.cycle-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,16,.98),rgba(5,8,16,.24) 65%,rgba(5,8,16,.08))}
.cycle-card:hover{transform:translateY(-5px);border-color:var(--cycle-accent)}
.cycle-card img{width:100%;height:100%;object-fit:cover}
.cycle-card-copy{position:absolute;left:17px;right:14px;bottom:20px;z-index:1}
.cycle-card-copy::before{content:"";display:block;width:24px;height:2px;background:var(--cyan);margin-bottom:14px}
.cycle-card small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#d6c9ff;margin-bottom:8px}
.cycle-card strong{display:block;font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.15;letter-spacing:-.025em}
.cycle-bottom{position:absolute;bottom:34px;left:36px;right:36px;display:flex;align-items:center;gap:14px}
.cycle-control{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(8,12,20,.4);color:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.cycle-control:hover{border-color:var(--cyan);background:rgba(101,232,255,.12)}
.cycle-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cycle-progress{flex:1;height:2px;margin-left:12px;background:rgba(255,255,255,.2)}
.cycle-progress span{display:block;width:100%;height:100%;background:var(--cycle-accent);transform:scaleX(0);transform-origin:left}
.cycle-count{min-width:85px;margin-left:10px;font-family:var(--mono);font-size:12px;color:#b7c0cd;white-space:nowrap}
.cycle-count b{font-family:var(--sans);font-size:38px;font-weight:500;letter-spacing:-.05em;color:#fff;margin-right:8px;font-variant-numeric:tabular-nums}
.cycle-tracks{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cycle-track{display:flex;align-items:center;gap:9px;padding:10px 15px;min-height:44px;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-family:var(--sans);font-size:12px;cursor:pointer}
.cycle-track b{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--violet-ink)}
.cycle-track:hover,.cycle-track[aria-pressed="true"]{border-color:var(--cyan);color:var(--ink);background:rgba(101,232,255,.07)}
.cycle-track[aria-pressed="true"] b{color:var(--cyan)}
.cycle-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1080px) and (min-width:721px){
  .cycle{height:660px}
  .cycle-copy{top:130px;width:44%;left:28px}
  .cycle-title{font-size:34px}
  .cycle-deck{left:52%;top:192px}
}
@media(max-width:720px){
  .cycle{height:auto;min-height:750px;padding:86px 22px 24px;border-radius:18px;display:flex;flex-direction:column;gap:28px}
  .cycle-top{top:22px;left:22px;right:22px;font-size:9px;letter-spacing:.08em}
  .cycle-top span:last-child{display:none}
  .cycle-shade{background:linear-gradient(180deg,rgba(5,8,16,.6),rgba(5,8,16,.8) 44%,rgba(5,8,16,.96)),linear-gradient(90deg,rgba(5,8,16,.7),transparent)}
  .cycle-copy{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:none;min-height:360px}
  .cycle-label{font-size:10px}
  .cycle-label::before{margin-bottom:16px}
  .cycle-title{font-size:clamp(28px,7.7vw,40px);max-width:18ch;margin:14px 0 16px}
  .cycle-description{font-size:14px;line-height:1.6;max-width:40ch}
  .cycle-link{margin-top:20px}
  .cycle-deck{position:relative;left:auto;right:auto;top:auto;bottom:auto;gap:12px;margin:0 -22px 0 -6px;padding:6px 22px 12px 6px;flex:none}
  .cycle-card{flex-basis:148px;height:202px;border-radius:12px}
  .cycle-card-copy{left:13px;bottom:15px}
  .cycle-card strong{font-size:15px}
  .cycle-card small{font-size:9px}
  .cycle-card-copy::before{margin-bottom:10px}
  .cycle-bottom{position:relative;left:auto;right:auto;bottom:auto;gap:8px}
  .cycle-progress{margin-left:6px}
  .cycle-count{min-width:64px;margin-left:4px;font-size:10px}
  .cycle-count b{font-size:28px;margin-right:4px}
  .cycle-tracks{gap:8px}
  .cycle-track{flex:1 1 calc(50% - 8px);padding:10px;font-size:11px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  #ciclo *,#ciclo *::before,#ciclo *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}