/* Elmhurst Athletics — editorial sports identity, layered over the existing UI. */
:root {
  --max: 1280px;
  --text: #f7f7f2;
  --muted: #abb2bd;
  --premium-ease: cubic-bezier(.2,.75,.25,1);
}

body { background: #0b0d0e; }
::selection { background: var(--green); color: #08110a; }
.sec { padding-block: clamp(64px,8.5vw,116px); }
.sec-head { max-width: 840px; }
h2 { font-size: clamp(34px,5vw,62px); line-height: 1.02; letter-spacing: -.045em; }
.lead { line-height: 1.75; }
.kicker { font-size: 11px; letter-spacing: .2em; margin-bottom: 20px; }
.kicker::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: .55; }
.btn { min-height: 52px; border-radius: 8px; padding-inline: 24px; transition: transform .25s var(--premium-ease),background .25s,border-color .25s,box-shadow .25s; }
.btn-primary { background: var(--green); box-shadow: 0 6px 24px rgba(50,199,54,.16); }
.btn-primary:hover { background: #49da4d; box-shadow: 0 10px 30px rgba(50,199,54,.26); }
.btn-gold:hover { background: #ffda7d; box-shadow: 0 8px 25px rgba(244,201,93,.18); }
.btn-ghost { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.24); }
.btn-sm { min-height: 44px; padding-inline: 18px; }
.btn .ic { transition: transform .25s var(--premium-ease); }
.btn:hover .ic { transform: translateY(-1px); }

/* Keep progressive enhancement readable, even before an observer runs. */
.js .rv,.js .rv.in { opacity: 1; transform: none; transition: none; }
.hdr .wrap { max-width: 1440px; }
.hdr { border-color: rgba(255,255,255,.075); }
.hdr:not(.solid):not(.menu-open) { background: rgba(11,13,14,.75); backdrop-filter: blur(18px); }
.hdr.solid,.hdr.menu-open { background: rgba(11,13,14,.96); backdrop-filter: blur(18px); }
.hdr .brand img { height: 64px; }
.hdr .brand span { max-width: 118px; font-size: 12px; line-height: 1.2; letter-spacing: .1em; }
.nav { gap: 16px; }
.nav a { position: relative; border: 0; font-size: 12.5px; font-weight: 700; padding-block: 14px; }
.nav a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 7px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--premium-ease); }
.nav a:hover::after,.nav a[aria-current=page]::after,.nav a[aria-current=true]::after { transform: scaleX(1); }
.lang { background: rgba(255,255,255,.035); }
.top-bar { background: #17170f; border-bottom-color: rgba(244,201,93,.18); box-shadow: none; }
.top-badge { border-radius: 4px; }
.top-cta-btn { border-radius: 4px; }
.screen-bar { margin-bottom: 40px; }
.screen-back { border-radius: 6px; padding: 10px 14px; }
.page.sec { padding-top: calc(var(--hdr) + var(--ann-h) + clamp(20px, 3.5vw, 36px)) !important; padding-bottom: clamp(64px,7vw,104px); }
.page .sec-head { margin-bottom: 42px; }

/* The sports film fills the opening section behind a translucent dark layer. */
.hero {
  min-height: 770px;
  min-height: max(770px,100svh);
  align-items: center;
  padding-top: calc(var(--hdr) + var(--ann-h) + 38px);
  background: radial-gradient(ellipse at 0% 90%,rgba(50,199,54,.085),transparent 55%),#0b0d0e;
}
.hero-in { position: relative; z-index: 2; padding-bottom: 60px; }
.hero-media {
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  transform: none;
  background-position: center;
  z-index: 0;
}
.hero-media video.on { opacity: 1; }
.hero-media::after { content: none; }
.hero::after { z-index: 1; background: linear-gradient(90deg,rgba(11,13,14,.74),rgba(11,13,14,.5) 55%,rgba(11,13,14,.36)),linear-gradient(180deg,rgba(11,13,14,.12),rgba(11,13,14,.04) 40%,#0b0d0e 100%); pointer-events: none; }
.hero::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg,transparent,var(--green),rgba(255,255,255,.1),transparent); opacity: .6; z-index: 3; }
.hero-top-row { gap: 10px; margin-bottom: 28px; max-width: 620px; }
.hero .pill { padding: 9px 12px; border-radius: 5px; background: rgba(11,13,14,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.hero-event-chip { padding: 9px 12px; border-radius: 5px; background: rgba(18,19,14,.87); max-width: 100%; font-size: 11px; }
.hero-event-tag { font-size: 9px; letter-spacing: .09em; }
.hero-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero h1 { font-size: clamp(64px,7.35vw,106px); font-weight: 850; line-height: .97; letter-spacing: -.055em; max-width: 760px; margin: 0 0 28px; text-wrap: initial; }
.hero h1 > span,.hero h1 em { display: block; }
.hero h1 em { color: var(--green); }
.hero .lead { max-width: 470px; font-size: 16px; color: #c4ccd1; text-shadow: 0 1px 12px #0b0d0e; }
.hero .cta-row { max-width: 660px; gap: 10px; margin-top: 32px; }
.hero .cta-row .btn { font-size: 13px; padding-inline: 18px; min-height: 52px; }
.score { max-width: 610px; border: 0; border-top: 1px solid rgba(255,255,255,.18); border-radius: 0; background: transparent; gap: 0; margin-top: 42px; }
.score > div { background: transparent; padding: 24px 22px 0 0; }
.score > div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); }
.score b { font-size: clamp(26px,2.6vw,38px); letter-spacing: -.04em; }
.score > div:first-child b { color: var(--green); }
/* Hero Video Control Button - Luxury Translucent Glassmorphism */
.vctl {
  z-index: 4;
  position: absolute;
  top: auto;
  bottom: clamp(52px, 8vh, 88px);
  right: max(calc(var(--gut) + 18px), calc((100vw - var(--max)) / 2 + var(--gut) + 18px));
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(10, 16, 12, 0.52);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #ffffff;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.vctl.show {
  display: inline-flex !important;
}
.vctl .ic {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}
.vctl.is-playing {
  background: rgba(12, 18, 14, 0.55);
  border-color: rgba(255, 255, 255, 0.36);
  color: #ffffff;
}
.vctl.is-paused {
  background: rgba(14, 40, 22, 0.76);
  border-color: rgba(0, 230, 118, 0.75);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.65), 0 0 28px rgba(0, 230, 118, 0.45);
  color: #00e676;
}
.vctl.is-paused .ic {
  transform: translateX(2px);
}
.vctl:hover {
  transform: scale(1.08) translateY(-2px);
  background: rgba(18, 30, 22, 0.78);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.68), inset 0 1.5px 3px rgba(255, 255, 255, 0.7), 0 0 30px rgba(0, 230, 118, 0.35);
}
.vctl.is-paused:hover {
  background: rgba(20, 54, 30, 0.88);
  border-color: rgba(0, 230, 118, 0.95);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.72), inset 0 1.5px 3px rgba(255, 255, 255, 0.8), 0 0 38px rgba(0, 230, 118, 0.7);
  color: #ffffff;
}
.vctl:active {
  transform: scale(0.94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.vctl:focus-visible {
  outline: 2px solid var(--green, #00e676);
  outline-offset: 4px;
}

/* Introduce the place, then show what is happening there. */
.about { padding-block: clamp(64px,7vw,96px); }
.about .sec-head { max-width: none; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px,8vw,110px); align-items: start; }
.about h2 { max-width: 12ch; font-size: clamp(34px,4vw,48px); }
.about .lead { margin-top: 0; font-size: 15px; }
.home-tournaments { position: relative; background: linear-gradient(180deg,#101310,#0b0d0e); border-block: 1px solid rgba(255,255,255,.06); }
.home-tournaments .sec-head { max-width: 760px; }
.home-tournament-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.home-tournament-grid > .tn { display: flex; flex-direction: column; height: 100%; }
.home-tournament-grid .tn-media { min-height: 225px; aspect-ratio: 16/10; }
.home-tournament-grid .tn-body { flex: 1; padding: 24px; gap: 15px; }
.home-tournament-grid .tn h3 { font-size: 28px; }
.home-tournament-grid .facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
.home-tournament-grid .facts > div { padding: 10px; }
.home-tournament-grid .facts dd { font-size: 16px; }
.home-tournament-grid .actions { margin-top: auto; }
.home-tournament-grid .btn { flex: 1; font-size: 13px; }
.home-tournaments > .wrap > .cta-row { margin-top: 30px; }

.feat-show { background: radial-gradient(ellipse at 80% 80%,rgba(244,201,93,.06),transparent 60%),#0b0d0e; border-block: 0; }
.feat-show-card { gap: 0; border-color: rgba(244,201,93,.24); border-radius: 12px; box-shadow: 0 18px 70px rgba(0,0,0,.2); background: #141712; }
.feat-show-content { padding: clamp(28px,4vw,52px); gap: 19px; }
.feat-show-title { font-size: clamp(30px,3.3vw,48px); line-height: 1.03; letter-spacing: -.035em; }
.feat-show-desc { color: #b9c1bb; }
.feat-show-badge { border-radius: 5px; }
.feat-show-fallback { background: radial-gradient(ellipse at 10% 95%,rgba(50,199,54,.15),transparent 65%),radial-gradient(ellipse at 90% 0%,rgba(244,201,93,.18),transparent 65%),repeating-linear-gradient(135deg,transparent 0 48px,rgba(244,201,93,.045) 49px 50px); }
.explore { border-top: 1px solid rgba(255,255,255,.075); }
.tiles { gap: 18px; }
.tile { padding: 28px; min-height: 252px; gap: 12px; border-radius: 10px; background: radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,100%),rgba(50,199,54,.06),transparent 65%),#121613; overflow: hidden; }
.tile.gold { background: radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,100%),rgba(244,201,93,.075),transparent 65%),#15160f; }
.tile::after { content: ""; position: absolute; height: 2px; bottom: 0; left: 0; right: 0; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--premium-ease); }
.tile.gold::after { background: var(--gold); }
.tile:hover::after,.tile:focus-visible::after { transform: scaleX(1); }
.tile-ic { width: 44px; height: 44px; border-radius: 8px; margin-bottom: 6px; }
.tile b { font-size: 30px; letter-spacing: -.03em; }
.tile-d { max-width: 30ch; font-size: 13px; }
.tile-m { margin-top: auto; padding-top: 4px; font-size: 11px; letter-spacing: .02em; }
.tile-go { top: 34px; right: 28px; width: 22px; height: 22px; }
.how { background: #10130f; border-color: rgba(255,255,255,.06); }
.steps { gap: 0; }
.st { position: relative; padding: 24px 24px 24px 0; border-left: 0; background: none; }
.st + .st { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.12); }
.st b { font-size: 36px; line-height: 1; letter-spacing: -.05em; color: var(--green); margin-bottom: 28px; }
.st h3 { font-size: 25px; margin-bottom: 12px; }
.st p { font-size: 13px; max-width: 24ch; line-height: 1.75; }
.final { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 100%,rgba(50,199,54,.16),transparent 66%),#0b0d0e; }
.final h2 { font-size: clamp(44px,7vw,90px); max-width: 12ch; }
.final .lead { margin-top: 22px; }
.final .cta-row { margin-top: 32px; }

/* Tournament films keep the action prominent and the controls reachable. */
.tn-sec { background: radial-gradient(ellipse at 90% 0%,rgba(244,201,93,.085),transparent 54%),#0b0d0e; }
.tn-list { gap: 30px; }
.tn { position: relative; border-radius: 12px; border-color: rgba(244,201,93,.22); background: radial-gradient(500px circle at var(--pointer-x,0%) var(--pointer-y,0%),rgba(244,201,93,.025),transparent 60%),#141714; transition: border-color .3s,box-shadow .3s; }
.tn:hover { border-color: rgba(244,201,93,.42); box-shadow: 0 18px 60px rgba(0,0,0,.2); }
.tn-media { min-height: 300px; overflow: hidden; isolation: isolate; background: #111811; }
.tn-media img { transition: transform .7s var(--premium-ease); }
.tn:hover .tn-media > img { transform: scale(1.035); }
.tn-media::after { z-index: 1; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.08),transparent 30%,rgba(4,9,5,.55)); }
.tn-media.deco { background: radial-gradient(ellipse at 30% 10%,rgba(244,201,93,.12),transparent 65%),#161c12; }
.tn-media.deco::before { opacity: .7; }
.tn-media.deco::after { display: block; }
.deco-in { z-index: 2; }
.tn.feat .tn-media { min-height: 270px; }
.tn.feat .tn-media.deco { min-height: 190px; }
.tn-body { padding: clamp(24px,3vw,38px); gap: 18px; }
.tn.feat .tn-body { padding: clamp(24px,3vw,38px); }
.tn h3 { font-size: clamp(28px,3.2vw,42px); letter-spacing: -.035em; }
.tn-sub { font-size: 14px; line-height: 1.7; }
.tag { border-radius: 5px; font-size: 9px; letter-spacing: .12em; padding: 7px 10px; }
.facts { gap: 0; border-radius: 8px; background: transparent; }
.facts > div { padding: 14px; background: rgba(255,255,255,.022); border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: .075em; }
.facts dd { font-size: 20px; margin-top: 5px; }
.grp { gap: 16px; margin-top: 12px; }
.grp section { border-radius: 8px; padding: 18px 16px 10px; }
.grp h4 { font-size: 10px; letter-spacing: .18em; margin-bottom: 12px; }
.tn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #060a07; z-index: 0; }
.tn-video[controls] { object-fit: contain; z-index: 3; background: #030604; }
.tn-media.is-playing::after { opacity: 0; }
.tn-video-launch { position: absolute; left: 20px; bottom: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.44); border-radius: 7px; background: rgba(7,13,8,.8); color: #fff; font: 700 12px/1.2 var(--fb); cursor: pointer; backdrop-filter: blur(14px); transition: background .25s,border-color .25s,transform .25s var(--premium-ease); }
.tn-video-launch .ic { color: var(--gold); width: 16px; height: 16px; }
.tn-video-launch:hover { background: rgba(31,35,21,.93); border-color: var(--gold); transform: translateY(-2px); }
.tn-video-launch:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.tn-video-badge { position: absolute; left: 18px; top: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(244,201,93,.3); border-radius: 4px; background: rgba(7,13,8,.8); color: var(--gold); font: 700 9px/1.2 var(--fb); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(10px); pointer-events: none; }
.tn-video-badge .ic { width: 13px; height: 13px; }
.tn-clips { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px 3px 7px; margin-inline: -3px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.tn-clip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.025); color: #d6dbd4; font: 600 11px/1.3 var(--fb); cursor: pointer; scroll-snap-align: start; transition: color .2s,background .2s,border-color .2s; }
.tn-clip .ic { width: 14px; height: 14px; }
.tn-clip img { width: 34px; height: 25px; object-fit: cover; border-radius: 3px; }
.tn-clip:hover,.tn-clip[aria-pressed=true] { color: var(--gold); border-color: var(--gold); background: rgba(244,201,93,.075); }

/* A consistent finish across booking, classes, shows, events and the app. */
.ticket,.calc,.sp,.show,.map { border-radius: 12px; }
.loc-grid > *, .map { min-width: 0; max-width: 100%; }
.map iframe { width: 100%; max-width: 100%; min-width: 0; }
.ticket { border-color: rgba(255,255,255,.2); background: #131814; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.tk-h { min-height: 72px; }
.tk-h h3 { font-size: 13px; }
.court { border-radius: 10px; overflow: hidden; }
.court img { transition: transform .6s var(--premium-ease); }
.court:hover img { transform: scale(1.025); }

/* Small app prompts appear where an account adds clear value. */
.app-nudge { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 15px; align-items: center; margin: -16px 0 28px; padding: 15px 18px; border: 1px solid rgba(50,199,54,.22); border-radius: 10px; background: linear-gradient(90deg,rgba(50,199,54,.065),rgba(255,255,255,.018)); }
.app-nudge-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: rgba(50,199,54,.12); color: var(--green); }
.app-nudge-icon .ic { width: 18px; height: 18px; }
.app-nudge strong { display: block; color: #e9f0ea; font: 800 14px/1.25 var(--fd); }
.app-nudge p { margin-top: 4px; color: #9fa9a1; font-size: 12px; line-height: 1.55; }
.app-nudge-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 11px; border-radius: 6px; color: var(--green); font: 800 11px/1.2 var(--fb); letter-spacing: .025em; text-decoration: none; white-space: nowrap; transition: color .2s,background .2s; }
.app-nudge-link .ic { width: 15px; height: 15px; transition: transform .2s var(--premium-ease); }
.app-nudge-link:hover,.app-nudge-link:focus-visible { background: rgba(50,199,54,.1); color: #66e56a; }
.app-nudge-link:hover .ic { transform: translateX(3px); }
.app-nudge-tournament { border-color: rgba(244,201,93,.22); background: linear-gradient(90deg,rgba(244,201,93,.06),rgba(255,255,255,.015)); }
.app-nudge-tournament .app-nudge-icon,.app-nudge-tournament .app-nudge-link { color: var(--gold); }
.app-nudge-tournament .app-nudge-icon { background: rgba(244,201,93,.1); }
.app-nudge-tournament .app-nudge-link:hover,.app-nudge-tournament .app-nudge-link:focus-visible { background: rgba(244,201,93,.09); color: #ffe194; }
.app-nudge-done { margin: 22px 0; text-align: left; }

/* The booking experience is a four-level guided flow. */
.book-grid { display: block; max-width: 1180px; margin-inline: auto; }
.booking-wizard { width: 100%; overflow: hidden; isolation: isolate; background: radial-gradient(800px circle at 15% 0%,rgba(50,199,54,.08),transparent 56%),#111512; }
.booking-wizard::before,.booking-wizard::after { display: none; }
.booking-wizard .tk-h { padding-inline: clamp(20px,4vw,42px); border-bottom-style: solid; border-bottom-width: 1px; }
/* Stepper de reserva: ícono propio por nivel, línea de progreso animada y micro-animaciones (solo transform/opacity). */
.booking-progress { --bp-pad: clamp(20px,4vw,42px); --bp-dot: 40px; --bp-y: 22px; position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0; padding: var(--bp-y) var(--bp-pad); border-bottom: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg,rgba(50,199,54,.05),rgba(3,8,4,.34)); list-style: none; }
.booking-progress::before,.booking-progress::after { content: ""; position: absolute; top: calc(var(--bp-y) + var(--bp-dot) / 2); left: calc(var(--bp-pad) + (100% - 2 * var(--bp-pad)) / 8); right: calc(var(--bp-pad) + (100% - 2 * var(--bp-pad)) / 8); height: 2px; margin-top: -1px; border-radius: 2px; pointer-events: none; }
.booking-progress::before { background: rgba(255,255,255,.12); }
.booking-progress::after { background: linear-gradient(90deg,#1a9a26,var(--green) 40%,#a4ff86 60%,var(--green)); background-size: 220% 100%; box-shadow: 0 0 12px rgba(50,199,54,.55); transform: scaleX(var(--bp,0)); transform-origin: left center; transition: transform .85s cubic-bezier(.22,1,.36,1); }
.booking-progress li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; min-width: 0; color: #758078; text-align: center; transition: color .3s var(--premium-ease); }
.booking-progress li span { position: relative; display: grid; width: var(--bp-dot); height: var(--bp-dot); place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: radial-gradient(circle at 30% 22%,#1b221d,#101411 70%); color: #7d8880; font: 800 12px/1 var(--fd); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .35s,border-color .35s,color .35s,box-shadow .35s,transform .45s var(--premium-ease); }
.bp-ic,.bp-check { grid-area: 1 / 1; width: 54%; height: 54%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s,transform .5s var(--premium-ease); }
.bp-check { opacity: 0; transform: scale(.35); stroke-width: 2.5; }
.bp-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.bp-ball,.bp-day,.bp-h1,.bp-h2 { transform-box: fill-box; transform-origin: center; }
.booking-progress li span em { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; background: #0b0f0c; color: #8d978f; font: 800 8px/13px var(--fd); font-style: normal; text-align: center; transition: opacity .25s,transform .35s var(--premium-ease),background .3s,color .3s,border-color .3s; }
.booking-progress li b { overflow: hidden; max-width: 100%; font: 700 10px/1.25 var(--fb); letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.booking-progress li.is-current,.booking-progress li.is-complete { color: #eaf2eb; }
.booking-progress li.is-current span { border-color: #8cff7a; background: radial-gradient(circle at 30% 22%,#9dff88,var(--green) 58%,#1d9a27); color: #061008; box-shadow: 0 0 0 5px rgba(50,199,54,.13),0 6px 26px rgba(50,199,54,.38),inset 0 1px 0 rgba(255,255,255,.45); transform: scale(1.1); }
.booking-progress li.is-current span em { border-color: #8cff7a; background: #061008; color: #8cff7a; }
.booking-progress li.is-complete span { border-color: rgba(50,199,54,.7); background: radial-gradient(circle at 30% 22%,#1f3a24,#122017 70%); color: var(--green); box-shadow: 0 0 16px rgba(50,199,54,.18),inset 0 1px 0 rgba(255,255,255,.08); }
.booking-progress li.is-complete span em { opacity: 0; transform: scale(.3); }
.booking-progress li.is-complete .bp-ic { opacity: 0; transform: scale(.3) rotate(-35deg); }
.booking-progress li.is-complete .bp-check { opacity: 1; transform: none; }
.booking-progress li.is-complete .bp-check path { stroke-dashoffset: 0; }
.booking-progress li.is-current b { color: #fff; text-shadow: 0 0 16px rgba(50,199,54,.5); }
.booking-progress li.is-complete b { color: #bcd9c0; }
@keyframes bp-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1.1); } }
@keyframes bp-burst { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.3); } }
@keyframes bp-pulse { 0% { opacity: .55; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.9); } }
@keyframes bp-flow { to { background-position: -220% 0; } }
@keyframes bp-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes bp-flash { 0% { box-shadow: 0 0 0 0 rgba(50,199,54,.55),0 0 16px rgba(50,199,54,.18); } 100% { box-shadow: 0 0 0 12px rgba(50,199,54,0),0 0 16px rgba(50,199,54,.18); } }
@keyframes bp-roll { from { transform: translateX(0) scale(1); } to { transform: translateX(11.4px) scale(1.18); } }
@keyframes bp-hop { 0% { transform: translateX(-4.6px) scale(1); } 25% { transform: translate(-4.6px,-1.8px) scale(1.2); } 50% { transform: translateX(0) scale(1); } 75% { transform: translate(0,-1.8px) scale(1.2); } 100% { transform: translateX(4.6px) scale(1); } }
@keyframes bp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes bp-type { 0% { stroke-dashoffset: 5; } 45%,80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 5; } }
@media (prefers-reduced-motion: no-preference) {
  .booking-progress::after { animation: bp-flow 2.8s linear infinite; }
  .booking-progress li.is-current span { animation: bp-pop .6s cubic-bezier(.2,1.7,.35,1) both; }
  .booking-progress li.is-current span::before,.booking-progress li.is-current span::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--green); border-radius: 50%; opacity: 0; pointer-events: none; }
  .booking-progress li.is-current span::before { animation: bp-burst .9s cubic-bezier(.2,.7,.3,1) both; }
  .booking-progress li.is-current span::after { animation: bp-pulse 2.4s ease-out 1s infinite; }
  .booking-progress li.is-complete span { animation: bp-flash .7s ease-out both; }
  .booking-progress li.is-complete .bp-check path { animation: bp-draw .55s .1s cubic-bezier(.22,1,.36,1) both; }
  .booking-progress li.is-current .bp-ball { animation: bp-roll 1.7s ease-in-out infinite alternate; }
  .booking-progress li.is-current .bp-day { animation: bp-hop 2.2s ease-in-out infinite alternate; }
  .booking-progress li.is-current .bp-h1 { animation: bp-bob 1.5s ease-in-out infinite; }
  .booking-progress li.is-current .bp-h2 { animation: bp-bob 1.5s ease-in-out .5s infinite; }
  .booking-progress li.is-current .bp-l1 { stroke-dasharray: 5; animation: bp-type 2.4s ease-in-out infinite; }
  .booking-progress li.is-current .bp-l2 { stroke-dasharray: 5; animation: bp-type 2.4s ease-in-out .4s infinite; }
}
.book-stage { position: relative; min-height: 430px; overflow: hidden; }
.book-panel { min-height: 430px; padding: clamp(28px,4vw,48px); border: 0; }
.book-panel[hidden] { display: none; }
.book-panel.is-active { animation: book-panel-enter .46s var(--premium-ease) both; }
.book-panel:focus { outline: 0; }
.book-panel:focus-visible { box-shadow: inset 0 0 0 3px var(--green); }
.book-panel-head { display: grid; gap: 10px; margin-bottom: 28px; }
.book-panel-head .step-h { margin: 0; font-size: clamp(22px,3vw,34px); letter-spacing: -.025em; text-transform: none; }
.book-panel-head .step-n { width: 34px; height: 34px; font-size: 14px; }
.book-panel-head p { max-width: 58ch; color: #a9b3ac; font-size: 14px; }
.book-level { color: var(--green); font: 800 10px/1 var(--fb); letter-spacing: .17em; text-transform: uppercase; }
.booking-wizard .courts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; overflow: visible; margin: 0; padding: 0; }
.booking-wizard .court { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,1.2fr); min-width: 0; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.025); }
.booking-wizard .court:hover { border-color: rgba(50,199,54,.48); }
.booking-wizard .court .court-media,
.booking-wizard .court img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.booking-wizard .court-b { align-content: center; padding: 18px; }
.booking-wizard .court-sel { justify-content: space-between; min-height: 52px; margin-top: 16px; border-color: rgba(50,199,54,.27); background: rgba(50,199,54,.055); }
.booking-wizard .book-note { margin: 14px 0 0; }
/* ===== CALENDARIO DEL MES & SELECCIÓN DE DÍAS Y HORAS ===== */
.cal-card { margin-bottom: 20px; padding: 18px 20px; border-radius: 12px; background: rgba(14, 20, 15, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.cal-hdr { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-title-box { display: flex; align-items: center; gap: 8px; }
.cal-title-box .ic { width: 20px; height: 20px; color: var(--green); }
.cal-month-name { font: 800 17px/1 var(--fd); color: #fff; letter-spacing: -.02em; }
.cal-ctrls { display: flex; align-items: center; gap: 6px; }
.btn-cal-arrow { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: #fff; cursor: pointer; transition: all .2s ease; }
.btn-cal-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.btn-cal-arrow:disabled { opacity: .28; cursor: not-allowed; }
.btn-cal-arrow .ic { width: 16px; height: 16px; }
.btn-cal-today { height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(50, 199, 54, 0.35); background: rgba(50, 199, 54, 0.08); color: var(--green); font: 700 11px/1 var(--fb); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: all .2s ease; }
.btn-cal-today:hover { background: rgba(50, 199, 54, 0.22); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; margin-bottom: 8px; font: 700 11px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: #79877b; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 2px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); cursor: pointer; transition: all .2s var(--premium-ease); position: relative; line-height: 1; }
.cal-day:hover:not(:disabled):not(.is-pad) { border-color: rgba(50, 199, 54, 0.6); background: rgba(50, 199, 54, 0.08); transform: translateY(-1px); }
.cal-day.is-pad { border: 0; background: transparent; opacity: .2; cursor: default; pointer-events: none; }
.cal-day.is-past { border: 1px solid rgba(255, 255, 255, 0.04); background: transparent; opacity: .25; cursor: not-allowed; pointer-events: none; }
.cal-day.is-today { border-color: rgba(50, 199, 54, 0.45); }
.cal-day.is-today::before { content: ""; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.cal-day-num { font: 800 14px/1 var(--fd); color: #e5ece6; }
.cal-day-status { display: flex; align-items: center; gap: 3px; font: 700 8px/1 var(--fb); letter-spacing: .02em; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cal-dot.free { background: var(--green); box-shadow: 0 0 6px rgba(50,199,54,.6); }
.cal-dot.busy { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.6); }
.cal-dot.full { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.6); }
.cal-day-status small { font-size: 7.5px; text-transform: uppercase; }
.cal-day.is-free .cal-day-status small { color: #8ce990; }
.cal-day.has-busy .cal-day-status small { color: #fcd34d; }
.cal-day.is-full .cal-day-status small { color: #fca5a5; }
.cal-day.is-full { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.28) !important; cursor: not-allowed !important; opacity: .75; }
.cal-day.is-full .cal-day-num { color: #f87171 !important; text-decoration: line-through; }
.cal-day[aria-pressed="true"], .cal-day.is-selected { background: var(--green) !important; border-color: var(--green) !important; box-shadow: 0 4px 14px rgba(50, 199, 54, 0.35); transform: scale(1.02); }
.cal-day[aria-pressed="true"] .cal-day-num, .cal-day.is-selected .cal-day-num { color: #041006 !important; }
.cal-day[aria-pressed="true"] .cal-day-status small, .cal-day.is-selected .cal-day-status small { color: #041006 !important; font-weight: 800; }
.cal-day[aria-pressed="true"] .cal-dot, .cal-day.is-selected .cal-dot { background: #041006; }
.cal-legend { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font: 600 11px/1 var(--fb); color: #97a399; flex-wrap: wrap; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; }
.leg-dot { width: 7px; height: 7px; border-radius: 50%; }
.leg-dot.free { background: var(--green); }
.leg-dot.busy { background: #f59e0b; }
.leg-dot.full { background: #ef4444; }
.leg-dot.selected { background: var(--green); outline: 2px solid rgba(50,199,54,.4); outline-offset: 1px; }

/* QUICK DATES STRIP */
.dates-strip-wrap { margin-bottom: 16px; }
.dates-strip-head { margin-bottom: 6px; }
.dates-strip-head .lbl { font: 700 11.5px/1 var(--fb); color: #8e9c90; text-transform: uppercase; letter-spacing: .06em; }
.booking-wizard .dates { padding: 6px 2px 10px; margin: 0; }
.booking-wizard .date { flex: 0 0 78px; min-height: 90px; border-radius: 9px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.date-occ { display: inline-block; font: 700 8.5px/1 var(--fb); text-transform: uppercase; letter-spacing: .04em; padding: 2px 5px; border-radius: 4px; margin-top: 4px; }
.date-occ.free { background: rgba(50, 199, 54, 0.15); color: var(--green); }
.date-occ.busy { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.date-occ.full { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }
.date[aria-pressed="true"] .date-occ { background: rgba(4, 16, 6, 0.25); color: #041006; }

/* SLOTS SECTION HEADER & SLOTS */
.slots-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-wrap: wrap; }
.slots-for-date { font: 600 13px/1.3 var(--fb); color: #b5c2b7; }
.slots-for-date strong { font-weight: 800; color: #fff; font-family: var(--fd); margin-left: 4px; }
.slots-live-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--fb); color: var(--green); text-transform: uppercase; letter-spacing: .06em; }
.live-dot-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.booking-wizard .slots { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 9px; }
.booking-wizard .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 8px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); text-align: center; cursor: pointer; transition: all .2s var(--premium-ease); }
.booking-wizard .slot:hover:not(:disabled) { border-color: rgba(50, 199, 54, 0.55); background: rgba(50, 199, 54, 0.06); }
.slot-time { font: 800 13px/1 var(--fd); letter-spacing: -.01em; color: #fff; }
.slot-badge { display: inline-flex; align-items: center; gap: 3px; font: 700 8.5px/1 var(--fb); letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.slot-badge.tag-free { background: rgba(50, 199, 54, 0.14); color: var(--green); border: 1px solid rgba(50, 199, 54, 0.28); }
.slot-badge.tag-busy { background: rgba(239, 68, 68, 0.22); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.42); }
.slot-badge.tag-past { background: rgba(255, 255, 255, 0.08); color: #8c9890; border: 1px solid rgba(255, 255, 255, 0.12); }
.slot-badge.tag-sel { background: rgba(0, 0, 0, 0.25); color: #041006; font-weight: 800; }
.ic-mini { width: 10px; height: 10px; }

/* OCUPADO STATE */
.booking-wizard .slot.is-busy, .booking-wizard .slot:disabled { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(24, 16, 16, 0.95)) !important; border-color: rgba(239, 68, 68, 0.3) !important; cursor: not-allowed !important; opacity: .88 !important; }
.booking-wizard .slot.is-busy .slot-time, .booking-wizard .slot:disabled .slot-time { color: #f87171 !important; text-decoration: line-through; opacity: .82; }

/* SELECTED STATE */
.booking-wizard .slot[aria-pressed="true"], .booking-wizard .slot.is-selected { background: var(--green) !important; border-color: var(--green) !important; box-shadow: 0 4px 16px rgba(50, 199, 54, 0.35); transform: translateY(-1.5px); }
.booking-wizard .slot[aria-pressed="true"] .slot-time, .booking-wizard .slot.is-selected .slot-time { color: #041006 !important; }
.booking-wizard .row { gap: 18px; }
.booking-wizard .row > div { padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.025); }

/* STEP 3: DURACIÓN & JUGADORES RICH CARDS */
.book-step3-row { display: grid; gap: 14px; }
.book-step3-row > .step3-card { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: linear-gradient(145deg, rgba(18, 28, 20, 0.75), rgba(7, 13, 9, 0.95)); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 12px; }
.step3-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step3-card-title { display: flex; align-items: center; gap: 8px; color: #fff; }
.step3-icon { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }
.step3-card-title .lbl { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #f3f4f6; }
.dur-range-pill, .pl-formation-pill { background: rgba(50, 199, 54, 0.12); color: #86efac; border: 1px solid rgba(50, 199, 54, 0.3); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; }
.dur-seg-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; border: none !important; border-radius: 0 !important; background: transparent !important; }
.dur-card-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.035); cursor: pointer; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); }
.dur-card-btn:hover:not(:disabled) { border-color: rgba(50, 199, 54, 0.5); background: rgba(50, 199, 54, 0.08); transform: translateY(-2px); }
.dur-card-btn[aria-pressed="true"], .dur-card-btn.is-active { background: linear-gradient(135deg, #32c736, #22a326) !important; border-color: #32c736 !important; box-shadow: 0 4px 18px rgba(50, 199, 54, 0.4) !important; transform: translateY(-2px); }
.dur-card-btn .dur-main { display: flex; align-items: baseline; gap: 2px; }
.dur-card-btn .dur-n { font-size: 20px; font-weight: 900; font-family: var(--fd); color: #fff; line-height: 1; }
.dur-card-btn .dur-unit { font-size: 12px; font-weight: 700; color: var(--green); }
.dur-card-btn[aria-pressed="true"] .dur-n, .dur-card-btn[aria-pressed="true"] .dur-unit { color: #041006 !important; }
.dur-card-btn .dur-sub { font-size: 9px; font-weight: 600; color: #9ca3af; margin-top: 4px; text-align: center; line-height: 1.15; }
.dur-card-btn[aria-pressed="true"] .dur-sub { color: #06280b !important; font-weight: 700; }
.dur-card-btn:disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; border-color: rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.25); transform: none !important; }
.dur-card-btn .dur-active-badge { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; background: rgba(0, 0, 0, 0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #041006; }
.dur-card-btn .dur-dis-label { font-size: 7.5px; color: #ef4444; font-weight: 700; margin-top: 2px; }

.step3-card-foot { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #9ca3af; }
.dur-rate-hint strong { color: #fff; }
.dur-rate-hint small { color: #9ca3af; font-size: 10px; font-weight: normal; margin-left: 2px; }

/* STEPPER & PLAYERS */
.stepper-modern-wrap { display: flex; justify-content: center; width: 100%; }
.stepper-modern { display: flex; align-items: center; justify-content: space-between; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 6px 10px; width: 100%; max-width: 290px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4); }
.stepper-btn { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .18s ease; flex-shrink: 0; }
.stepper-btn .ic-btn { width: 18px; height: 18px; }
.stepper-btn:hover:not([aria-disabled="true"]) { background: rgba(50, 199, 54, 0.2); border-color: rgba(50, 199, 54, 0.5); color: #86efac; transform: scale(1.05); }
.stepper-btn:active:not([aria-disabled="true"]) { transform: scale(0.95); }
.stepper-btn[aria-disabled="true"] { opacity: 0.28; cursor: not-allowed; transform: none; background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.06); color: #6b7280; }
.stepper-val-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 90px; }
.stepper-modern output { font-family: var(--fd); font-weight: 900; font-size: 32px; line-height: 1; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.stepper-val-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; font-weight: 600; margin-top: 3px; }

/* PLAYER PRESETS */
.player-presets { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 2px; }
.preset-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #d1d5db; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s ease; }
.preset-pill small { color: #9ca3af; font-weight: 500; font-size: 10px; }
.preset-pill:hover { border-color: rgba(50, 199, 54, 0.4); background: rgba(50, 199, 54, 0.1); color: #fff; }
.preset-pill.is-active, .preset-pill[aria-pressed="true"] { background: rgba(50, 199, 54, 0.22); border-color: var(--green); color: #86efac; box-shadow: 0 2px 8px rgba(50, 199, 54, 0.25); }
.preset-pill.is-active small, .preset-pill[aria-pressed="true"] small { color: #86efac; }

/* COST SPLIT */
.pl-cost-split { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #d1d5db; }
.pl-cost-split .ic-mini { width: 13px; height: 13px; color: var(--green); }
.pl-cost-split strong { color: #86efac; font-size: 12.5px; font-weight: 800; }
.booking-wizard .field { margin-bottom: 15px; }
.booking-wizard .field input,.booking-wizard .field textarea { background: rgba(2,7,3,.5); }
.booking-wizard .sum { margin-top: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.025); }
.booking-wizard .sum > div { padding-inline: 16px; }
.book-availability { margin-top: 20px; padding: 12px 14px; border-left: 3px solid var(--green); background: rgba(50,199,54,.065); color: #cad4cc; font-size: 13px; }
.booking-wizard .tk-f { padding: 18px clamp(20px,4vw,42px) 28px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(2,6,3,.4); }
.book-nav { display: flex; align-items: stretch; justify-content: flex-end; gap: 12px; }
.book-nav .btn { min-height: 58px; }
.book-back { min-width: 130px; }
.book-back .ic { transform: rotate(180deg); }
.book-next { min-width: min(100%,300px); margin-left: auto; padding-inline: 32px; color: #061008; font-size: 15px; box-shadow: 0 12px 35px rgba(50,199,54,.2); }
.book-next .ic { transition: transform .25s var(--premium-ease); }
.book-next:hover .ic { transform: translateX(4px); }
.book-next:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
.book-next[hidden],.book-back[hidden],#tk-submit[hidden],#tk-fine[hidden] { display: none; }
#tk-submit { min-height: 58px; }
.game-wipe { position: absolute; z-index: 20; inset: 0; pointer-events: none; transform: translateX(-105%); background: linear-gradient(100deg,#0c100d 0 34%,#32c736 34% 38%,#132516 38% 96%,#f4c95d 96%); box-shadow: 0 0 50px rgba(50,199,54,.35); }
.game-wipe::before { content: "LEVEL UP"; position: absolute; top: 50%; left: 50%; color: #fff; font: 900 clamp(22px,5vw,54px)/1 var(--fd); letter-spacing: .12em; text-shadow: 4px 4px 0 rgba(0,0,0,.35); transform: translate(-50%,-50%) skewX(-7deg); }
html[lang="es"] .game-wipe::before { content: "SIGUIENTE NIVEL"; }
.game-wipe span { position: absolute; inset: 0; opacity: .15; background: repeating-linear-gradient(0deg,transparent 0 5px,#fff 6px 7px); }
.book-stage.is-switching.is-forward .game-wipe { animation: booking-wipe-forward .62s cubic-bezier(.76,0,.24,1) both; }
.book-stage.is-switching.is-back .game-wipe { animation: booking-wipe-back .62s cubic-bezier(.76,0,.24,1) both; }
.book-stage.is-switching.is-forward .book-panel.is-active { animation-name: book-panel-enter-forward; }
.book-stage.is-switching.is-back .book-panel.is-active { animation-name: book-panel-enter-back; }

/* Interactive match board for level three. */
.court-game { position: relative; overflow: hidden; margin-bottom: 22px; border: 1px solid rgba(50,199,54,.34); border-radius: 12px; background: #0a160d; box-shadow: inset 0 0 50px rgba(0,0,0,.35); }
.court-game-score { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(4,10,5,.84); color: #bdc9bf; font: 700 11px/1.3 var(--fb); letter-spacing: .06em; text-transform: uppercase; }
.court-game-score b { color: var(--gold); font: 900 16px/1 var(--fd); letter-spacing: .02em; }
.court-game-pitch { position: relative; height: clamp(245px,35vw,350px); margin: 16px; border: 2px solid rgba(255,255,255,.66); border-radius: 4px; background: repeating-linear-gradient(90deg,#176325 0 12.5%,#1b6e2a 12.5% 25%); box-shadow: inset 0 0 70px rgba(0,0,0,.28); }
.court-game-line { position: absolute; border: 2px solid rgba(255,255,255,.56); pointer-events: none; }
.line-half { top: 0; bottom: 0; left: 50%; width: 0; border-width: 0 0 0 2px; }
.circle-center { top: 50%; left: 50%; width: 76px; height: 76px; border-radius: 50%; transform: translate(-50%,-50%); }
.area-left,.area-right { top: 25%; width: 16%; height: 50%; }
.area-left { left: -2px; border-left: 0; }
.area-right { right: -2px; border-right: 0; }
.court-game-goal { position: absolute; top: 38%; width: 13px; height: 24%; border: 2px solid rgba(244,201,93,.85); }
.goal-left { left: -14px; border-right: 0; }
.goal-right { right: -14px; border-left: 0; }
.court-game-ball { position: absolute; z-index: 4; top: 50%; left: 50%; width: 13px; height: 13px; border: 2px solid #101310; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.45); animation: game-ball 4.6s var(--premium-ease) infinite; }
.court-game-players { position: absolute; inset: 0; }
.court-player { position: absolute; z-index: 3; top: var(--y); left: var(--x); display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid rgba(255,255,255,.86); border-radius: 50%; box-shadow: 0 4px 9px rgba(0,0,0,.42); transform: translate(-50%,-50%); animation: player-idle 1.8s ease-in-out var(--delay) infinite alternate; }
.court-player i { color: #fff; font: 800 8px/1 var(--fd); font-style: normal; text-shadow: 0 1px 2px #000; }
.court-player.team-a { background: #0d1011; }
.court-player.team-b { background: #f1b52e; border-color: #fff4c7; }

/* Keep the complete booking decision surface inside a desktop viewport. */
.book-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
  gap: 16px 28px;
  align-items: center;
  margin-bottom: 14px;
}
.book-header-row .sec-head {
  margin-bottom: 0 !important;
}
.book-header-row .app-nudge-booking {
  margin: 0 !important;
  align-self: center;
}
@media (max-width: 959px) {
  .book-header-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }
}
.tn-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
  gap: 16px 28px;
  align-items: center;
  margin-bottom: 20px;
}
.tn-header-row .tn-head {
  margin-bottom: 0 !important;
}
.tn-head .kicker {
  font-size: 11px;
  letter-spacing: .15em;
  margin-bottom: 4px;
}
.tn-head h2 {
  font-size: clamp(22px, 2.3vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 5px !important;
  color: #f0f4f1;
}
.tn-head .lead {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #9aa59d !important;
  max-width: 54ch;
  margin: 0 !important;
}
.tn-header-row .app-nudge-tournament {
  margin: 0 !important;
  align-self: center;
  padding: 10px 14px;
}
.tn-header-row .app-nudge-tournament .app-nudge-icon {
  width: 32px;
  height: 32px;
}
.tn-header-row .app-nudge-tournament strong {
  font-size: 12.5px;
}
.tn-header-row .app-nudge-tournament p {
  display: block;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
}
.tn-header-row .app-nudge-tournament .app-nudge-link {
  min-height: 30px;
  padding-block: 4px;
}
@media (max-width: 959px) {
  .tn-header-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
}
@media (min-width: 960px) {
  .book.page { padding-top: calc(var(--hdr) + var(--ann-h) + 14px); padding-bottom: 34px; }
  .book .sec-head { margin-bottom: 0; }
  .book .sec-head .kicker { margin-bottom: 4px; }
  .book .sec-head h2 { font-size: clamp(26px,2.6vw,34px); }
  .book .sec-head .lead { max-width: 60ch; margin-top: 4px; font-size: 13px; line-height: 1.4; }
  .app-nudge-booking { min-height: 44px; margin: 0; padding: 10px 14px; gap: 10px; }
  .app-nudge-booking .app-nudge-icon { width: 32px; height: 32px; }
  .app-nudge-booking strong { font-size: 12.5px; }
  .app-nudge-booking p { display: block; margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
  .app-nudge-booking .app-nudge-link { min-height: 30px; padding-block: 4px; }
  .booking-wizard .tk-h { min-height: 46px; padding-inline: 24px; }
  .booking-progress { --bp-pad: 24px; --bp-dot: 30px; --bp-y: 8px; padding: 8px 24px 9px; }
  .booking-progress li { gap: 4px; }
  .booking-progress li span { font-size: 10px; }
  .booking-progress li span em { top: -4px; right: -4px; min-width: 12px; height: 12px; font-size: 7px; line-height: 10px; }
  .booking-progress li b { font-size: 9px; }
  .book-stage,.book-panel { min-height: 320px; }
  .book-panel { padding: 14px 24px 16px; }
  .book-panel-head { display: flex; align-items: center; gap: 10px; min-height: 34px; margin-bottom: 12px; }
  .book-panel-head .book-level { display: none; }
  .book-panel-head .step-h { flex: none; font-size: 21px; }
  .book-panel-head .step-n { width: 28px; height: 28px; font-size: 12px; }
  .booking-wizard .courts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .booking-wizard .court {
    display: grid;
    grid-template-columns: minmax(140px, .85fr) minmax(0, 1.25fr);
    min-height: 112px;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
  }
  .booking-wizard .court .court-media,
  .booking-wizard .court img {
    width: 100%;
    height: 100%;
    min-height: 112px;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .booking-wizard .court-b {
    display: grid;
    align-content: center;
    padding: 12px 16px;
    gap: 3px;
  }
  .booking-wizard .court-l { font-size: 9px; letter-spacing: .12em; }
  .booking-wizard .court-t { font-size: 14px; font-weight: 800; min-height: 0; line-height: 1.25; }
  .booking-wizard .court-s { font-size: 11.5px; line-height: 1.35; white-space: normal; }
  .booking-wizard .court-p { margin-top: 4px; font-size: 19px; }
  .booking-wizard .court-p small { font-size: 10px; }
  .booking-wizard .court-sel { display: none; }
  .booking-wizard .book-note { margin-top: 10px; font-size: 11.5px; }
  .booking-wizard .dates { padding: 2px 2px 7px; }
  .booking-wizard .date { flex-basis: 62px; min-height: 62px; padding-block: 6px; }
  .booking-wizard .date b { font-size: 17px; }
  .booking-wizard .slots { grid-template-columns: repeat(auto-fit,minmax(68px,1fr)); gap: 6px; margin-top: 5px; }
  .booking-wizard .slot { min-height: 38px; padding-block: 5px; font-size: 12px; }
  .book-panel[data-book-step="3"]:not([hidden]) { display: grid; grid-template-columns: minmax(0,1fr) 350px; grid-template-rows: auto minmax(0,1fr); gap: 0 16px; }
  .book-panel[data-book-step="3"] .book-panel-head { grid-column: 1/-1; }
  .book-panel[data-book-step="3"] .court-game { grid-column: 1; margin: 0; }
  .book-panel[data-book-step="3"] .row, .book-panel[data-book-step="3"] .book-step3-row { grid-column: 2; display: grid; align-content: start; gap: 10px; }
  .book-step3-row > .step3-card { padding: 13px 15px; }
  .court-game-score { min-height: 36px; padding-inline: 12px; font-size: 9px; }
  .court-game-score b { font-size: 13px; }
  .court-game-pitch { height: 218px; margin: 9px; }
  .book-details-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 18px; align-items: start; }
  .book-fields-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 12px; }
  .book-fields-grid .field { margin: 0; gap: 4px; }
  .book-fields-grid .field label { font-size: 11px; }
  .book-fields-grid .field input,.book-fields-grid .field textarea { min-height: 40px; padding: 8px 10px; border-radius: 8px; }
  .book-fields-grid .field textarea { height: 40px; resize: none; }
  .book-fields-grid .fine,.book-fields-grid .err { font-size: 10px; line-height: 1.2; }
  .book-consent { grid-column: 1/-1; }
  .book-consent .chk { margin: 1px 0 0; font-size: 11px; line-height: 1.35; }
  .book-consent .chk input { width: 18px; height: 18px; }
  .booking-review { display: grid; gap: 8px; }
  .booking-review .book-availability { margin: 0; padding: 8px 10px; font-size: 11px; }
  .booking-wizard .booking-review .sum { margin: 0; padding: 10px 12px; gap: 3px; }
  .booking-wizard .booking-review .sum > div { padding-inline: 0; font-size: 11px; }
  .booking-wizard .booking-review .sum .tot { margin-top: 3px; padding-top: 7px; font-size: 17px; }
  .booking-wizard .tk-f { min-height: 62px; padding: 8px 24px 10px; gap: 6px; }
  .book-nav { gap: 8px; }
  .book-nav .btn,#tk-submit { min-height: 42px; }
  .book-back { min-width: 108px; }
  .book-next { min-width: 230px; padding-inline: 22px; font-size: 13px; }
  .booking-wizard .tk-f > .fine { font-size: 10px; line-height: 1.25; }
  .book + * { margin-top: 0; }
  .book .amen { margin-top: 18px; }
}

@keyframes booking-wipe-forward { 0% { transform: translateX(-105%); } 44%,58% { transform: translateX(0); } 100% { transform: translateX(105%); } }
@keyframes booking-wipe-back { 0% { transform: translateX(105%) scaleX(-1); } 44%,58% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(-105%) scaleX(-1); } }
@keyframes book-panel-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes book-panel-enter-forward { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes book-panel-enter-back { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
@keyframes player-idle { from { margin-top: -3px; } to { margin-top: 3px; } }
@keyframes game-ball { 0%,100% { transform: translate(-50%,-50%); } 28% { transform: translate(170%,-110%); } 54% { transform: translate(-280%,80%); } 76% { transform: translate(90%,150%); } }
.amen li,.feats li,.info li { border-radius: 8px; background: #121613; border-color: rgba(255,255,255,.1); }
.cl-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
.cl { display: flex; flex-direction: column; height: 100%; border-radius: 12px; background: #131814; border: 1px solid rgba(255,255,255,.09); transition: border-color .3s,transform .3s var(--premium-ease); overflow: hidden; }
.cl:hover { border-color: rgba(50,199,54,.4); transform: translateY(-4px); }
#academia .sec-head { display: flex; flex-direction: column; gap: 8px; max-width: 740px; margin-bottom: 28px; }
#academia .sec-head .kicker { color: var(--green) !important; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; }
#academia .sec-head .kicker .ic { stroke: var(--green); }
#academia .sec-head .lead { max-width: 60ch; margin: 0; color: #a4b0a7; font-size: 14.5px; line-height: 1.55; }
.cl-top { aspect-ratio: 16/9; background: radial-gradient(ellipse at 50% 0%,rgba(50,199,54,.18),transparent 80%),#182119; overflow: hidden; position: relative; }
.cl-top.has-img { display: block; aspect-ratio: 16/9; }
.cl-top.has-img::before { display: none !important; }
.cl-top img.cl-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cl:hover .cl-top img.cl-img { transform: scale(1.05); }
.cl-top .cl-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.cl-b { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 22px 22px; gap: 12px; }
.cl-b .chip { align-self: flex-start; }
.cl h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.03em; min-height: 2.5em; margin: 0; display: flex; align-items: flex-start; }
.cl-b p.muted { font-size: 13.5px; line-height: 1.45; color: #a4b0a7; min-height: 2.9em; margin: 0; }
.cl-p { font-size: 38px; letter-spacing: -.04em; margin-top: 2px; }
.cl-b .meta { display: grid; gap: 7px; margin: 0; }
.chip { border-radius: 5px; font-size: 9px; }
.sp { padding: 30px; background: #161811; gap: 20px; }
.sp h3 { font-size: 32px; letter-spacing: -.03em; }
.sp .rates div { border-radius: 7px; padding: 16px; }
.sp .rates b { font-size: 28px; letter-spacing: -.03em; }
.show { background: #161811; }
.show-b { padding: clamp(26px,3vw,40px); gap: 20px; }
.show h4 { font-size: clamp(30px,3.4vw,44px); line-height: 1.05; letter-spacing: -.035em; }
.show img { object-position: center; }
.cat,.stats3 span { border-radius: 6px; }
.calc { padding: 30px; background: #131814; }
.request-form form { border-radius: 12px; background: #131814; }
.phone { border-width: 8px; border-color: #283129; background: #0e140f; box-shadow: 0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(50,199,54,.22),0 0 90px rgba(50,199,54,.07); }
.store { border-radius: 7px; }
details.faq summary { min-height: 78px; font-size: 20px; letter-spacing: -.015em; }
details.faq .ans { font-size: 14px; line-height: 1.8; padding-bottom: 28px; }
.ftr { background: #0f120f; padding-block: 64px 30px; }
.ftr h3 { color: #b5beb6; font-size: 10px; letter-spacing: .18em; }
.ftr a { font-size: 13px; }
.ftr ul[role="list"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 4px; }
.legal { margin-top: 48px; font-size: 11px; padding-top: 24px; }
.sticky { background: rgba(11,15,11,.97); backdrop-filter: blur(18px); }
.sticky .btn { border-radius: 7px; }

/* ===== ACADEMIA CARDS & BOTÓN INSCRIBIRSE ===== */
.cl-top-link { display: block; text-decoration: none; border-radius: inherit; flex-shrink: 0; }
.cl-title-link { color: inherit; text-decoration: none; transition: color .2s ease; }
.cl-title-link:hover { color: var(--green); }
.cl-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: auto; padding-top: 18px; }
.cl-actions .btn-enroll { min-height: 44px; height: 44px; font: 800 12px/1.2 var(--fb); letter-spacing: .04em; text-transform: uppercase; justify-content: center; align-items: center; padding-inline: 14px; background: var(--green); color: #041006; border-radius: 8px; box-shadow: 0 4px 18px rgba(50,199,54,.25); transition: transform .2s var(--premium-ease), background .2s, box-shadow .2s; box-sizing: border-box; white-space: nowrap; }
.cl-actions .btn-enroll:hover { background: #45dc49; transform: translateY(-1.5px); box-shadow: 0 8px 26px rgba(50,199,54,.4); }
.cl-actions .btn-wa { min-height: 44px; height: 44px; padding-inline: 12px; font-weight: 700; font-size: 12px; justify-content: center; align-items: center; box-sizing: border-box; white-space: nowrap; }

/* ===== PANTALLA DEDICADA DE CLASE (CLASS DETAIL SCREEN) ===== */
.class-detail-sec { padding-top: calc(var(--hdr) + var(--ann-h) + 24px); padding-bottom: 72px; }
.cld-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cld-back-btn { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--fb); text-transform: uppercase; letter-spacing: .06em; padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); color: #d6ded8; background: rgba(255,255,255,.03); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.cld-back-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.cld-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge-open { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(50,199,54,.1); border: 1px solid rgba(50,199,54,.35); font: 700 11px/1 var(--fb); color: var(--green); letter-spacing: .03em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse-green 2s infinite ease-in-out; }
@keyframes pulse-green {
  0% { transform: scale(0.92); opacity: .75; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 14px var(--green); }
  100% { transform: scale(0.92); opacity: .75; }
}

.cld-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); align-items: center; padding: clamp(24px, 4vw, 40px); background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(50,199,54,0.055) 100%), #111613; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; margin-bottom: 32px; box-shadow: 0 24px 64px rgba(0,0,0,0.35); position: relative; overflow: hidden; }
.cld-hero::before { content: ""; position: absolute; top: -120px; right: -100px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(50,199,54,0.12) 0%, transparent 70%); pointer-events: none; }
.cld-title { font: 900 clamp(30px, 3.8vw, 46px)/1.1 var(--fd); letter-spacing: -0.03em; color: #fff; margin: 0 0 10px; }
.cld-subtitle { font: 600 clamp(15px, 1.8vw, 19px)/1.35 var(--fb); color: var(--green); margin: 0 0 12px; }
.cld-desc { font: 400 15px/1.65 var(--fb); color: #b7c3ba; margin: 0 0 22px; max-width: 58ch; }
.cld-key-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cld-stat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.cld-stat .ic { color: var(--green); width: 20px; height: 20px; flex-shrink: 0; }
.cld-stat b { display: block; font: 700 10px/1.2 var(--fb); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cld-stat span { display: block; font: 600 12px/1.3 var(--fb); color: #fff; margin-top: 2px; }
.cld-price-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: rgba(50, 199, 54, 0.08); border: 1px solid rgba(50, 199, 54, 0.28); border-radius: 12px; }
.cld-price-val { font: 900 32px/1 var(--fd); color: #fff; font-variant-numeric: tabular-nums; }
.cld-price-val small { font: 500 13px/1.3 var(--fb); color: var(--muted); margin-left: 6px; }
.cld-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cld-btn-main { font: 800 12px/1.2 var(--fb); letter-spacing: .04em; text-transform: uppercase; min-height: 44px; padding-inline: 18px; }
.cld-hero-media { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 16px 40px rgba(0,0,0,0.5); aspect-ratio: 16/11; background: #0c120e; }
.cld-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cld-media-badge { position: absolute; bottom: 12px; left: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(8, 14, 9, 0.88); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font: 700 11px var(--fb); color: #d0ded3; }
.cld-media-badge .ic { color: var(--green); width: 16px; height: 16px; flex-shrink: 0; }

.cld-grid-details { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.cld-col-left { display: grid; gap: 20px; }
.cld-card { padding: 24px; background: #131915; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; }
.cld-section-title { display: flex; align-items: center; gap: 10px; font: 800 17px var(--fd); color: #fff; margin: 0 0 16px; letter-spacing: -0.01em; }
.cld-section-title .ic { color: var(--green); width: 19px; height: 19px; flex-shrink: 0; }
.cld-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cld-plan-item { position: relative; display: flex; flex-direction: column; padding: 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; transition: border-color .2s; }
.cld-plan-item.popular { border-color: rgba(50, 199, 54, 0.5); background: linear-gradient(180deg, rgba(50, 199, 54, 0.08) 0%, rgba(255,255,255,0.02) 100%); }
.cld-plan-badge { position: absolute; top: -10px; right: 14px; padding: 3px 8px; border-radius: 999px; background: var(--green); color: #041006; font: 800 9px var(--fb); text-transform: uppercase; letter-spacing: .06em; }
.cld-plan-item h4 { font: 800 15px var(--fd); color: #fff; margin: 0 0 6px; }
.cld-plan-price { font: 900 24px/1.1 var(--fd); color: #fff; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.cld-plan-price small { font: 500 12px var(--fb); color: var(--muted); }
.cld-plan-perk { font: 500 13px/1.4 var(--fb); color: #a6b5a9; margin: 0 0 14px; flex-grow: 1; }
.cld-plan-item .btn { margin-top: auto; }
.cld-feature-list, .cld-bring-list, .cld-policy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cld-feature-list li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.5 var(--fb); color: #dce5df; }
.cld-feature-list .ic { color: var(--green); width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.cld-bring-list li { display: flex; gap: 10px; align-items: center; font: 500 14px/1.5 var(--fb); color: #dce5df; }
.dot-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.cld-policy-list li { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.6 var(--fb); color: #9aa89d; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.cld-policy-list li:last-child { border-bottom: none; padding-bottom: 0; }

.cld-col-right .cld-reg-card { position: sticky; top: calc(var(--hdr) + 20px); padding: 26px; background: linear-gradient(180deg, #161e18 0%, #101511 100%); border: 1px solid rgba(50, 199, 54, 0.32); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.cld-reg-desc { font-size: 13px; line-height: 1.5; color: #a4b2a7; margin-bottom: 18px; }
.cld-form { display: grid; gap: 12px; }
.cld-form label { display: grid; gap: 5px; font: 700 12px var(--fb); color: #d0ddd3; }
.cld-form input { width: 100%; min-height: 42px; padding: 10px 13px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; color: #fff; font: 500 13px var(--fb); outline: none; transition: border-color .2s; }
.cld-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(50,199,54,0.15); }
.cld-submit-btn { min-height: 46px; font: 800 13px var(--fb); letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; }
.cld-trial-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; font: 600 11px var(--fb); color: #8fa193; text-align: center; }
.cld-trial-note .ic { color: var(--green); width: 14px; height: 14px; }

@media (min-width: 900px) {
  .tn-list > .tn:not(.feat) { grid-template-columns: minmax(0,5fr) minmax(0,6fr); }
  .tn-list > .tn:not(.feat) .tn-media { min-height: 370px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .nav { gap: 12px; margin-right: 0; }
  .hdr .brand span { display: none; }
  .hdr-cta { display: none; }
  .hero h1 { font-size: 76px; }
  .hero .lead { max-width: 440px; }
}
@media (max-width: 959px) {
  .hero { min-height: 760px; min-height: max(760px,100svh); padding-top: calc(var(--hdr) + var(--ann-h) + 48px); align-items: center; }
  .hero-in { padding-bottom: 44px; }
  .hero-media { background-position: 68% center; }
  .hero::after { background: linear-gradient(180deg,rgba(11,13,14,.68),rgba(11,13,14,.55) 55%,#0b0d0e 100%); }
  .hero h1 { max-width: 670px; font-size: clamp(56px,9.5vw,82px); }
  .hero .lead { max-width: 500px; }
  .vctl { bottom: clamp(24px, 4vh, 36px); right: var(--gut); width: 56px; height: 56px; }
  .vctl .ic { width: 25px; height: 25px; }
  .home-tournament-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-tournament-grid > .tn:last-child:nth-child(odd) { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
  .home-tournament-grid .tn-media { min-height: 250px; }
  .about .sec-head { gap: 40px; }
  .st + .st { padding-left: 18px; }
}
@media (max-width: 759px) {
  .booking-wizard .courts { display: flex; gap: 12px; overflow-x: auto; margin-inline: -24px; padding: 4px 24px 12px; scroll-snap-type: x mandatory; }
  .booking-wizard .court { flex: 0 0 84%; display: flex; min-width: 0; scroll-snap-align: center; }
  .booking-wizard .court img { height: auto; aspect-ratio: 16/8.5; }
  .booking-progress li b { font-size: 9px; letter-spacing: .03em; }
  .book-panel { padding-inline: 24px; }
  .about .sec-head { display: block; }
  .about h2 { max-width: 18ch; }
  .about .lead { margin-top: 24px; max-width: 54ch; }
  #academia .sec-head { display: block; margin-bottom: 20px; }
  #academia .sec-head .kicker { margin-bottom: 9px; }
  #academia .sec-head h2 { max-width: 22ch; font-size: clamp(25px,7.2vw,30px); }
  #academia .sec-head .lead { margin-top: 8px; font-size: 12px; line-height: 1.5; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 0; }
  .st { padding-top: 0; padding-bottom: 0; }
  .st + .st { padding-left: 0; border-left: 0; }
  .st:nth-child(even) { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); }
  .st b { margin-bottom: 18px; }
  .st h3 { font-size: 22px; }
  .cld-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .cld-hero-media { order: -1; aspect-ratio: 16/9; }
  .cld-grid-details { grid-template-columns: 1fr; }
  .cld-col-right .cld-reg-card { position: static; }
  .cld-price-box { flex-direction: column; align-items: flex-start; }
  .cld-hero-ctas { width: 100%; }
  .cld-hero-ctas .btn { flex: 1 1 100%; }
  .cl-actions { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
}
@media (max-width: 639px) {
  .app-nudge { grid-template-columns: auto minmax(0,1fr); gap: 12px; margin-top: -8px; padding: 15px; }
  .app-nudge-link { grid-column: 2; justify-self: start; min-height: 36px; margin-top: -5px; padding-left: 0; }
  .app-nudge-done { grid-template-columns: auto minmax(0,1fr); margin-top: 20px; }
  .book.page { padding-top: calc(var(--hdr) + var(--ann-h) + 12px); padding-bottom: 34px; }
  .book .sec-head { display: none; }
  .app-nudge-booking { grid-template-columns: minmax(0,1fr) auto; min-height: 40px; gap: 8px; margin: 0 0 8px; padding: 7px 10px; }
  .app-nudge-booking .app-nudge-icon,.app-nudge-booking p { display: none; }
  .app-nudge-booking strong { font-size: 11px; }
  .app-nudge-booking .app-nudge-link { grid-column: 2; min-height: 30px; margin: 0; padding: 4px 6px; font-size: 10px; }
  .booking-wizard .tk-h { min-height: 44px; padding-inline: 16px; }
  .booking-progress { --bp-pad: 10px; --bp-dot: 28px; --bp-y: 8px; padding: 8px 10px 9px; }
  .booking-progress li { gap: 4px; }
  .booking-progress li span { font-size: 10px; }
  .booking-progress li span em { top: -4px; right: -4px; min-width: 12px; height: 12px; font-size: 7px; line-height: 10px; }
  .booking-progress li b { overflow: hidden; max-width: 12ch; font-size: 7px; line-height: 1.1; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
  .book-stage,.book-panel { min-height: 340px; }
  .book-panel { padding: 12px 16px 14px; }
  .book-panel-head { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 10px; }
  .book-panel-head .book-level,.book-panel-head p { display: none; }
  .book-panel-head .step-h { margin: 0; font-size: 19px; }
  .book-panel-head .step-n { width: 26px; height: 26px; font-size: 11px; }
  .booking-wizard .courts { margin-inline: -16px; padding: 2px 16px 7px; }
  .booking-wizard .court { flex-basis: 79%; }
  .booking-wizard .court img { height: 105px; aspect-ratio: auto; }
  .booking-wizard .court-b { padding: 8px 10px 9px; gap: 2px; }
  .booking-wizard .court-l { font-size: 8px; }
  .booking-wizard .court-t { font-size: 13px; }
  .booking-wizard .court-s { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .booking-wizard .court-p { margin-top: 3px; font-size: 18px; }
  .booking-wizard .court-sel { min-height: 38px; margin-top: 7px; padding: 6px 8px; font-size: 11px; }
  .cal-card { padding: 12px 10px; margin-bottom: 12px; }
  .cal-month-name { font-size: 14px; }
  .cal-day { min-height: 40px; padding: 2px; }
  .cal-day-num { font-size: 12px; }
  .cal-day-status small { display: none; }
  .cal-legend { gap: 8px; font-size: 9px; padding-top: 8px; margin-top: 10px; }
  .booking-wizard .dates { padding: 1px 2px 6px; }
  .booking-wizard .date { flex-basis: 56px; min-height: 58px; padding: 5px 4px; }
  .booking-wizard .date b { font-size: 16px; }
  .booking-wizard .slots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 4px; }
  .booking-wizard .slot { min-height: 44px; padding: 4px 5px; font-size: 11px; }
  .slot-time { font-size: 11.5px; }
  .slot-badge { font-size: 7.5px; padding: 1px 4px; }
  .booking-wizard .row { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(112px,.85fr); gap: 7px; }
  .booking-wizard .row > div { padding: 8px; }
  .booking-wizard .seg button { min-width: 34px; min-height: 38px; padding-inline: 6px; font-size: 11px; }
  .booking-wizard .stepper button { width: 34px; height: 38px; }
  .book-step3-row { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .book-step3-row > .step3-card { padding: 12px 14px; gap: 10px; }
  .dur-card-btn { padding: 8px 3px 6px; }
  .dur-card-btn .dur-n { font-size: 17px; }
  .dur-card-btn .dur-sub { font-size: 8px; }
  .stepper-btn { width: 40px; height: 40px; }
  .stepper-modern output { font-size: 26px; }
  .preset-pill { padding: 3px 8px; font-size: 10px; }
  .court-game { margin-bottom: 8px; }
  .court-game-score { min-height: 34px; padding-inline: 10px; font-size: 8px; }
  .court-game-score b { font-size: 12px; }
  .court-game-pitch { height: 155px; margin: 8px; }
  .book-fields-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 8px; }
  .book-fields-grid .field { min-width: 0; margin: 0; gap: 3px; }
  .book-fields-grid .field label { font-size: 10px; line-height: 1.15; }
  .book-fields-grid .field input,.book-fields-grid .field textarea { min-height: 38px; padding: 7px 8px; border-radius: 8px; }
  .book-fields-grid .field textarea { height: 38px; resize: none; }
  .book-fields-grid .fine,.book-fields-grid .err { font-size: 9px; line-height: 1.15; }
  .book-consent { grid-column: 1/-1; }
  .book-consent .chk { margin: 0; font-size: 10px; line-height: 1.25; }
  .book-consent .chk input { width: 18px; height: 18px; }
  .booking-review { display: grid; gap: 6px; margin-top: 8px; }
  .booking-review .book-availability { margin: 0; padding: 7px 9px; font-size: 10px; }
  .booking-wizard .booking-review .sum { margin: 0; padding: 9px 10px; gap: 2px; }
  .booking-wizard .booking-review .sum > div { padding-inline: 0; font-size: 10px; }
  .booking-wizard .booking-review .sum .tot { margin-top: 2px; padding-top: 6px; font-size: 16px; }
  .booking-wizard .tk-f { padding: 8px 16px 9px; gap: 5px; }
  .book-nav { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); }
  .book-nav .btn,#tk-submit { min-width: 0; min-height: 42px; width: 100%; padding-inline: 10px; font-size: 12px; }
  .book-back[hidden] + .book-next { grid-column: 1/-1; }
  #tk-submit { grid-column: auto; }
  .booking-wizard #tk-fine { display: none !important; }
  .court-player { width: 21px; height: 21px; }
  .sec { padding-block: 64px; }
  .page.sec { padding-top: calc(var(--hdr) + var(--ann-h) + 28px); }
  .page .sec-head { margin-bottom: 28px; }
  .hdr .brand img { height: 60px; }
  .hero { min-height: 790px; padding-top: calc(var(--hdr) + var(--ann-h) + 28px); }
  .hero-top-row { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .hero-event-chip { font-size: 10px; gap: 6px; }
  .hero h1 { font-size: clamp(48px,12vw,72px); max-width: 11ch; margin-bottom: 26px; }
  .hero h1 > span { max-width: 9.5ch; }
  .hero .lead { font-size: 14px; max-width: 31ch; }
  .hero .cta-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; margin-top: 26px; max-width: 420px; }
  .hero .cta-row .btn:first-child { grid-column: 1/-1; }
  .hero .cta-row .btn { font-size: 12px; padding-inline: 12px; }
  .score { margin-top: 30px; max-width: 440px; }
  .score > div { padding: 18px 8px 0 0; }
  .score > div + div { padding-left: 12px; }
  .score b { font-size: 26px; }
  .vctl { bottom: 18px; width: 50px; height: 50px; }
  .vctl .ic { width: 22px; height: 22px; }
  .home-tournament-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .home-tournament-grid > .tn:last-child:nth-child(odd) { display: flex; grid-column: auto; }
  .home-tournament-grid .tn-media { min-height: 220px; aspect-ratio: 16/9; }
  .tile { min-height: 220px; padding: 26px; }
  .tile b { font-size: 28px; }
  .tile-d { max-width: 34ch; }
  .tn-media { min-height: 230px; aspect-ratio: 16/10; }
  .tn.feat .tn-media { min-height: 230px; }
  .tn.feat .tn-media.deco { min-height: 160px; }
  .tn-body,.tn.feat .tn-body { padding: 24px; }
  .tn h3 { font-size: 30px; }
  .tn-video-launch { left: 16px; bottom: 16px; }
  .tn-video-badge { top: 14px; left: 14px; }
  .facts > div { padding: 12px; }
  .facts dd { font-size: 17px; }
  .cl-b,.sp,.calc,.show-b { padding: 24px; }
  .feat-show-content { padding: 28px 24px; }
  .feat-show-poster-wrap { min-height: 320px; }
  .feat-show-fallback { min-height: 320px; }
  .screen-bar { margin-bottom: 28px; }
  details.faq summary { font-size: 18px; }
  .final .cta-row .btn { flex-basis: 100%; }
  .final .cta-row .btn:not(:first-child) { flex-basis: calc(50% - 6px); }
}
@media (max-width: 374px) {
  .hero h1 { font-size: 45px; }
  .hero-event-tag { font-size: 8px; }
  .hero-event-title { max-width: 16ch; }
  .hero .cta-row .btn { font-size: 11px; gap: 6px; }
  .score b { font-size: 23px; }
  .st h3 { font-size: 20px; }
  .tn-body,.tn.feat .tn-body { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media { transform: none !important; }
  .tile:hover,.cl:hover,.btn:hover,.tn:hover .tn-media > img,.court:hover img { transform: none; }
  .book-panel.is-active,.court-player,.court-game-ball,.game-wipe { animation: none !important; }
}
@media (forced-colors: active) {
  .tn-video-launch,.tn-clip,.tile,.tn,.cl,.sp { border-color: ButtonText; }
  .tn-video-badge { color: CanvasText; background: Canvas; border-color: CanvasText; }
  .tile::after,.nav a::after { background: Highlight; }
}

/* ==================== SELECTOR DE MÉTODO DE PAGO ==================== */
.pay-method-block {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.pay-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 580px) {
  .pay-options {
    grid-template-columns: 1fr;
  }
}
.pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--stroke, rgba(255, 255, 255, 0.12));
  background: var(--card-bg, rgba(22, 27, 34, 0.7));
  color: var(--text, #e6edf3);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.pay-opt:hover {
  border-color: rgba(50, 199, 54, 0.5);
  background: rgba(50, 199, 54, 0.05);
}
.pay-opt.is-active {
  border-color: var(--green, #32c736);
  background: rgba(50, 199, 54, 0.1);
  box-shadow: 0 0 0 1px var(--green, #32c736), 0 4px 16px rgba(50, 199, 54, 0.15);
}
.pay-opt-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.pay-opt.is-active .pay-opt-radio {
  border-color: var(--green, #32c736);
}
.pay-opt.is-active .pay-opt-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #32c736);
}
.pay-opt-info {
  flex: 1;
  min-width: 0;
}
.pay-opt-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}
.pay-opt-title .ic {
  width: 18px;
  height: 18px;
  color: var(--green, #32c736);
}
.pay-opt-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted, #8b949e);
  margin-top: 2px;
  line-height: 1.25;
}
.pay-badge-instant {
  margin-left: auto;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(50, 199, 54, 0.2);
  color: var(--green, #32c736);
  border: 1px solid rgba(50, 199, 54, 0.35);
  white-space: nowrap;
}
.pay-panel {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-logos-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.card-brand {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.card-brand.visa { color: #58a6ff; }
.card-brand.mc { color: #f0883e; }
.card-brand.amex { color: #388bfd; }
.card-brand.gpay { color: #34a853; }
.card-brand.apple { color: #f0f6fc; }
.card-inputs-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 500px) {
  .card-inputs-grid {
    grid-template-columns: 1fr 1fr;
  }
  .card-num-field {
    grid-column: span 2;
  }
}
.card-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #8b949e);
}
.card-field input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.card-field input:focus {
  border-color: var(--green, #32c736);
  box-shadow: 0 0 0 2px rgba(50, 199, 54, 0.2);
}
.card-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.card-input-wrap input {
  width: 100%;
  padding-right: 32px;
}
.ic-card-lock {
  position: absolute;
  right: 10px;
  width: 14px;
  height: 14px;
  color: var(--muted, #8b949e);
  pointer-events: none;
}
.card-security-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted, #8b949e);
}
.ic-mini {
  width: 14px;
  height: 14px;
  color: var(--green, #32c736);
  flex-shrink: 0;
}
.zelle-preview-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zelle-box-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zelle-logo-badge {
  background: #7414CA;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.zelle-email-val {
  font-size: 0.95rem;
  color: #e6edf3;
  font-family: var(--font-mono, monospace);
}
.zelle-preview-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted, #8b949e);
}

/* ==================== TARJETA DE COMPARTIR PASE ==================== */
.share-pass-card {
  margin: 14px 0;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.08), rgba(22, 27, 34, 0.8));
  border: 1px solid rgba(37, 211, 102, 0.28);
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.share-pass-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.share-pass-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  display: grid;
  place-items: center;
  color: #25D366;
  flex-shrink: 0;
}
.share-pass-icon svg {
  width: 20px;
  height: 20px;
}
.share-pass-title {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}
.share-pass-desc {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--muted, #8b949e);
  line-height: 1.35;
}
.share-pass-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .share-pass-actions {
    grid-template-columns: 1fr;
  }
}
.share-main-btn {
  background: #25D366 !important;
  color: #0d1117 !important;
  font-weight: 700 !important;
  border: none !important;
}
.share-main-btn:hover {
  background: #20bd5a !important;
}
.share-friend-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}
.share-friend-lbl {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #c9d1d9;
  margin-bottom: 6px;
}
.share-friend-row {
  display: flex;
  gap: 8px;
}
.share-friend-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.88rem;
}
.share-friend-row input:focus {
  border-color: #25D366;
  outline: none;
}
.share-friend-row .btn {
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* ==================== COMPROBANTE PAGO TARJETA ==================== */
.card-paid-block {
  margin: 14px 0;
  padding: 16px;
  border-radius: 12px;
  background: rgba(50, 199, 54, 0.1);
  border: 1px solid rgba(50, 199, 54, 0.35);
  text-align: left;
}
.card-paid-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.paid-check-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green, #32c736);
  color: #000;
  font-weight: 900;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.card-paid-hdr strong {
  display: block;
  font-size: 0.98rem;
  color: #fff;
}
.card-paid-hdr p {
  margin: 2px 0 0;
  font-size: 0.8rem;
}
.card-paid-bal {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(50, 199, 54, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #c9d1d9;
}
.card-paid-bal b {
  font-size: 1.2rem;
  color: #fff;
}

/* ==================== VIDEO EN CANCHA SELECCIONADA ==================== */
.court-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  background: var(--card2, #0d1117);
}
.booking-wizard .court-media {
  min-height: 112px;
  aspect-ratio: auto;
}
.court-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--premium-ease, ease);
}
.court:hover .court-media img {
  transform: scale(1.025);
}
.court-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  pointer-events: none;
  animation: court-video-in .4s ease-out both;
}
@keyframes court-video-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.court-video-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(7, 13, 8, 0.85);
  border: 1px solid rgba(50, 199, 54, 0.5);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.court-video-badge .ic {
  width: 10px;
  height: 10px;
  color: var(--green, #32c736);
  fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .court-video { display: none !important; }
}