/* Padpoint para clubes v2 */
.theme-clubs { --nav-bg: var(--blue); --footer-bg: var(--blue); }

/* Hero */
.hero { position: relative; display: grid; align-items: center; min-height: clamp(600px, 88svh, 920px); padding-block: 72px clamp(190px, 24vh, 280px); background: var(--blue-night); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; transform: scale(calc(1 + var(--p, 0) * .16)); will-change: transform; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(4 12 40 / .82) 0%, rgb(4 12 40 / .5) 42%, rgb(4 12 40 / .06) 76%), linear-gradient(180deg, transparent 55%, rgb(4 12 40 / .55)); opacity: calc(1 + var(--p, 0) * .4); }
.hero-copy { position: relative; display: grid; justify-items: start; gap: clamp(20px, 2.2vw, 30px); transform: translateY(calc(var(--p, 0) * -70px)); opacity: calc(1 - var(--p, 0) * 1.5); }
.hero-copy .t-lead { max-width: 25em; color: rgb(255 255 255 / .9); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* Product windows */
.window { border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px rgb(20 20 25 / .07), 0 40px 90px -30px rgb(4 21 74 / .38), 0 12px 28px -14px rgb(4 21 74 / .2); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding-inline: 18px; border-bottom: 1px solid var(--line); background: #f7f8fb; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e4; }
.window-bar span { margin-left: 14px; padding: 4px 14px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.3; color: var(--ink-mute); }
.window iframe { width: 100%; border: 0; background: #fff; }
.scheduler-frame { height: 583px; }
.checkout-frame { height: 850px; }
.trainers-frame { height: 821px; }
.payments-frame { height: 1153px; }
.showcase { position: relative; z-index: 2; margin-top: clamp(-220px, -19vh, -150px); padding-bottom: clamp(56px, 7vw, 100px); }
.showcase .wrap { --max: 1180px; }

/* Operations */
.ops { padding-block: var(--section); }
.ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(44px, 5vw, 80px); }
.op { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: clamp(280px, 26vw, 360px); padding: clamp(26px, 2.6vw, 40px); border-radius: var(--radius); background: var(--ice-soft); overflow: hidden; isolation: isolate; transition: transform .7s var(--ease-out), background-color .4s, color .4s; }
.op::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(6 73 237 / .16), transparent 70%); opacity: 0; transition: opacity .5s; }
.op::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) calc(var(--i, 0) * 120ms + 250ms); }
.ops-grid.in .op::after, html:not(.motion) .op::after { transform: scaleX(1); }
.op p { color: var(--ink-soft); }
.op .link-arrow { margin-top: auto; color: var(--blue); }
@media (hover: hover) {
  .op:hover { transform: translateY(-8px); }
  .op:hover::before { opacity: 1; }
}

/* Feature rows */
.feature { padding-block: var(--section); }
.feature--tint { background: var(--ice-soft); }
.feature-grid { --max: 1400px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.feature--flip .feature-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature-copy { order: 2; }
.feature-copy { position: sticky; top: calc(var(--nav-h) + 56px); display: grid; justify-items: start; gap: clamp(18px, 2vw, 28px); }
.feature-copy h2 { font-size: clamp(34px, 4vw, 62px); line-height: 1.02; letter-spacing: -.03em; }

/* Getting started */
.steps { position: relative; padding-block: var(--section); background: var(--ice); overflow: hidden; }
.steps .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps h2 { position: sticky; top: calc(var(--nav-h) + 56px); }
.steps-list { position: relative; display: grid; gap: clamp(36px, 4.4vw, 64px); margin: 0; padding: 6px 0 6px 52px; list-style: none; }
.steps-list::before, .steps-list::after { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: rgb(6 73 237 / .18); }
.steps-list::after { background: var(--blue); transform: scaleY(var(--p, 1)); transform-origin: top; }
.steps-list li { position: relative; display: grid; gap: 8px; opacity: clamp(.45, calc((var(--p, 1) - var(--t, 0)) * 9 + .45), 1); }
.steps-list li::before { content: ''; position: absolute; left: -52px; top: 6px; z-index: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--ice); box-shadow: inset 0 0 0 2px var(--blue); transition: background-color .4s, box-shadow .4s, transform .6s var(--ease-out); }
.steps-list li.on::before { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 7px rgb(6 73 237 / .14); transform: scale(1.08); }
.steps-list p { max-width: 30em; color: var(--ink-soft); }

@media (max-width: 1040px) {
  .feature-grid, .feature--flip .feature-grid, .steps .wrap { grid-template-columns: 1fr; }
  .feature-copy, .steps h2 { position: static; }
  .feature--flip .feature-copy { order: 0; }
  .ops-grid { grid-template-columns: 1fr; }
  .op { min-height: 0; }
}
@media (max-width: 700px) {
  .hero { min-height: clamp(560px, 84svh, 760px); padding-block: 56px 170px; align-items: end; }
  .hero-media video { object-position: 50% 50%; }
  .hero-shade { background: linear-gradient(180deg, rgb(4 12 40 / .35), rgb(4 12 40 / .86) 70%); }
  .showcase { margin-top: -120px; }
  .window { --radius: 16px; }
  .window-bar { height: 34px; padding-inline: 14px; }
  .window-bar span { display: none; }
}