html {
  scroll-behavior: smooth;
}
body {
  font-family:
    "Manrope",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.font-race {
  font-family: "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -0.02em;
}
[x-cloak] {
  display: none !important;
}

/* =========================LANDING RUNNING APP STYLE========================= */
.race-landing {
  min-height: 100vh;
  overflow-x: hidden;
  color: #082f49;
  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(56, 189, 248, 0.35),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 18%,
      rgba(37, 99, 235, 0.24),
      transparent 30%
    ),
    linear-gradient(180deg, #e9f7ff 0%, #f8fbff 48%, #eef7ff 100%);
}
.race-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.race-nav::before {
  content: "";
  position: absolute;
  inset: 10px 12px -10px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(2, 48, 71, 0.08);
  z-index: -1;
}
.race-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #0f172a;
}
.race-brand-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28);
}
.race-brand-icon svg {
  width: 26px;
  height: 26px;
}
.race-brand strong {
  display: block;
  font-weight: 900;
  line-height: 1;
}
.race-brand small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
}
.race-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.race-nav-links a {
  padding: 12px 14px;
  border-radius: 16px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.race-nav-links a:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.race-nav-cta,
.race-btn,
.race-submit,
.race-modal-footer button {
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 900;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}
.race-nav-cta {
  padding: 13px 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 14px 36px rgba(37, 99, 235, 0.28);
}
.race-nav-cta:hover,
.race-btn:hover,
.race-submit:hover,
.race-modal-footer button:hover {
  transform: translateY(-1px);
}
.race-hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 18px 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 58px;
  align-items: center;
}
.race-hero-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(16px);
  opacity: 0.65;
  pointer-events: none;
}
.race-hero-glow-one {
  width: 180px;
  height: 180px;
  left: -48px;
  top: 130px;
  background: #7dd3fc;
}
.race-hero-glow-two {
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: 80px;
  background: #60a5fa;
}
.race-pill,
.race-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.75);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.race-pill span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #84cc16;
  box-shadow: 0 0 0 6px rgba(132, 204, 22, 0.16);
}
.race-hero h1 {
  max-width: 780px;
  margin: 22px 0 0;
  font-size: clamp(56px, 8vw, 102px);
  line-height: 0.84;
  color: #062044;
  text-transform: uppercase;
}
.race-hero-copy p {
  max-width: 650px;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
}
.race-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.race-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 19px;
}
.race-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #00afef);
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.3);
}
.race-btn-ghost {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.race-metric-strip {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
}
.race-metric-strip article {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.86);
  
}
.race-metric-strip span {
  display: block;
  font-family: "Barlow Condensed";
  font-size: 32px;
  font-weight: 900;
  color: #0f172a;
  line-height: 0.95;
}
.race-metric-strip small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.race-app-showcase {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
}
.race-phone-card {
  width: min(100%, 390px);
  border-radius: 42px;
  padding: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.8)
  );
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 30px 90px rgba(2, 48, 71, 0.18);
}
.phone-topbar {
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.phone-topbar span {
  width: 72px;
  height: 8px;
  border-radius: 999px;
  background: #dbeafe;
}
.phone-topbar span {
  width: 34px;
  height: 8px;
  border-radius: 999px;
  background: #bfdbfe;
}
.phone-hero-slide {
  overflow: hidden;
  min-height: 210px;
  border-radius: 32px;
  padding: 24px;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.phone-hero-slide svg {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  width: calc(100% - 32px);
}
.phone-hero-slide small {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 900;
  opacity: 0.82;
}
.phone-hero-slide strong {
  display: block;
  margin-top: 12px;
  max-width: 240px;
  font-size: 42px;
  line-height: 0.9;
  font-family: "Barlow Condensed";
  text-transform: uppercase;
}
.phone-hero-slide p {
  max-width: 250px;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.84);
}
.slide-blue {
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
}
.slide-cyan {
  background: linear-gradient(135deg, #0891b2, #2563eb);
}
.slide-indigo {
  background: linear-gradient(135deg, #4f46e5, #00afef);
}
.phone-countdown {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.phone-countdown div {
  border-radius: 22px;
  background: #f1f5f9;
  padding: 14px 6px;
  text-align: center;
}
.phone-countdown small {
  display: block;
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.phone-countdown strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 25px;
  font-weight: 900;
}
.phone-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.phone-list > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.phone-list p {
  margin: 0;
  min-width: 0;
}
.phone-list strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-list small {
  display: block;
  color: #64748b;
  font-size: 11px;
  margin-top: 3px;
}
.flat-dot {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 14px;
  display: inline-block;
}
.flat-dot-blue {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}
.flat-dot-cyan {
  background: linear-gradient(135deg, #06b6d4, #67e8f9);
}
.flat-dot-lime {
  background: linear-gradient(135deg, #84cc16, #bef264);
}
.floating-chip {
  position: absolute;
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 60px rgba(2, 48, 71, 0.12);
  backdrop-filter: blur(14px);
}
.floating-chip strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}
.floating-chip span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  margin-top: 5px;
}
.floating-chip-one {
  left: 2%;
  top: 1%;
}
.floating-chip-two {
  right: 2%;
  bottom: 18%;
}
.race-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 18px;
}
.race-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.race-section-heading h2,
.race-route-copy h2,
.race-kit h2,
.race-form-copy h2 {
  margin: 12px 0 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.9;
  text-transform: uppercase;
  color: #062044;
}
.race-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.race-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 24px;
  border-radius: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.07);
}
.race-stat-card::after {
  content: "";
  position: absolute;
  right: -45px;
  top: -45px;
  width: 125px;
  height: 125px;
  border-radius: 999px;
  opacity: 0.18;
  background: var(--accent, #2563eb);
}
.race-stat-card .flat-icon {
  width: 52px;
  height: 52px;
  border-radius: 20px;
  background: rgba(37, 99, 235, 0.1);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.race-stat-card small {
  display: block;
  margin-top: 22px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.race-stat-card strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 31px;
  line-height: 1;
  font-weight: 900;
}
.race-stat-card p {
  margin-top: 16px;
  color: #64748b;
  line-height: 1.55;
}
.accent-blue {
  --accent: #2563eb;
}
.accent-cyan {
  --accent: #06b6d4;
}
.accent-lime {
  --accent: #84cc16;
}
.accent-indigo {
  --accent: #4f46e5;
}
.race-progress {
  height: 9px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 16px;
}
.race-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}
.race-route-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}
.race-route-map {
  min-height: 430px;
  border-radius: 38px;
  background: linear-gradient(135deg, #dff6ff, #eff6ff);
  border: 1px solid rgba(14, 116, 144, 0.12);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.race-route-map::before {
  content: "";
  position: absolute;
  inset: 50px;
  border-radius: 40px;
  background-image:
    linear-gradient(rgba(14, 116, 144, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 116, 144, 0.08) 1px, transparent 1px);
  background-size: 46px 46px;
}
.route-line {
  position: absolute;
  left: 10%;
  top: 54%;
  width: 80%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #84cc16);
  transform: rotate(-14deg);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.22);
}
.route-pin {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 8px solid #2563eb;
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}
.route-pin span {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  color: #0f172a;
}
.route-pin-start {
  left: 14%;
  top: 58%;
}
.route-pin-finish {
  right: 14%;
  top: 34%;
  border-color: #84cc16;
}
.route-runner {
  position: absolute;
  left: 48%;
  top: 42%;
  width: 72px;
  height: 72px;
  border-radius: 28px;
  background: #0f172a;
  transform: rotate(-14deg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2);
}
.route-runner::before {
  content: "RUN";
  position: absolute;
  inset: 13px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  color: #2563eb;
  font-family: "Barlow Condensed";
  font-size: 26px;
  font-weight: 900;
}
.race-route-copy,
.race-kit,
.race-registration {
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.07);
}
.race-route-copy {
  padding: 34px;
}
.route-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.route-detail span {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 900;
}
.route-detail p {
  margin: 0;
  color: #475569;
}
.race-kit {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 24px;
  align-items: center;
  padding: 34px;
}
.race-kit p {
  margin-top: 18px;
  color: #64748b;
  line-height: 1.8;
}
.kit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kit-cards article {
  min-height: 160px;
  padding: 18px;
  border-radius: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.kit-cards span {
  display: block;
  font-size: 32px;
}
.kit-cards strong {
  display: block;
  margin-top: 18px;
  font-weight: 900;
  color: #0f172a;
}
.kit-cards small {
  display: block;
  margin-top: 5px;
  color: #64748b;
}
.race-registration {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 24px;
  padding: 34px;
  align-items: start;
}
.race-form-copy p {
  margin-top: 18px;
  color: #64748b;
  line-height: 1.8;
}
.form-price-card {
  margin-top: 24px;
  width: fit-content;
  min-width: 220px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, #062044, #1d4ed8);
  color: #fff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24);
}
.form-price-card small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}
.form-price-card strong {
  display: block;
  margin-top: 6px;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}
.form-price-card span {
  display: block;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 900;
  margin-top: 4px;
}
.race-form-card {
  padding: 22px;
  border-radius: 32px;
  background: #fff;
  /* border: 1px solid #e2e8f0;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08); */
}
.form-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.form-stepper div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}
.form-stepper .active {
  background: #dbeafe;
  color: #1d4ed8;
}
.form-stepper span {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
}
.race-form {
  display: grid;
  gap: 14px;
}
.race-form label,
.admin-form-grid label {
  display: grid;
  gap: 8px;
}
.race-form label span,
.admin-form-grid label span {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}
.race-form input,
.race-form select,
.participant-grid input,
.participant-grid select,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.admin-input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #f8fafc;
  padding: 0 15px;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.admin-form-grid textarea {
  padding: 14px 15px;
}
.race-form input,
.race-form select,
.participant-grid input,
.participant-grid select,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.admin-input {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
  background: #fff;
}
.form-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-total-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.form-total-box span {
  color: #1d4ed8;
  font-weight: 900;
}
.form-total-box strong {
  font-size: 24px;
  color: #0f172a;
}
.race-submit {
  min-height: 56px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.25);
}
.race-submit:disabled,
.race-modal-footer button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.race-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 18px;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(8px);
}
.race-modal-card {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.25);
  overflow: hidden;
}
.race-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: blur(12px);
}
.race-modal-header h3 {
  font-size: 44px;
  text-transform: uppercase;
  margin: 8px 0 0;
  line-height: 0.9;
}
.race-modal-header p {
  margin: 6px 0 0;
  color: #64748b;
}
.race-modal-header button {
  height: 44px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  font-weight: 900;
  color: #0f172a;
  background: #f1f5f9;
}
.race-modal-body {
  max-height: 66vh;
  overflow-y: auto;
  padding: 20px;
  display: grid;
  gap: 14px;
}
.participant-card {
  padding: 18px;
  border-radius: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.participant-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.participant-head span {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 900;
}
.participant-head strong {
  color: #0f172a;
}
.participant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.race-modal-footer {
  padding: 18px 24px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
}
.race-modal-footer small {
  color: #64748b;
  font-weight: 800;
}
.race-modal-footer strong {
  display: block;
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
}
.race-modal-footer button {
  min-height: 54px;
  border-radius: 18px;
  color: #fff;
  padding: 0 24px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}
.race-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 18px 50px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
  font-weight: 800;
}
.race-footer strong {
  color: #0f172a;
}

/* =========================ADMIN SAAS========================= */
.admin-saas-body {
  background: #edf4ff;
  color: #0f172a;
}
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff;
  border-right: 1px solid #dbeafe;
  box-shadow: 12px 0 50px rgba(15, 23, 42, 0.04);
}
.admin-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
  text-decoration: none;
}
.admin-logo > span {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.23);
}
.admin-logo svg {
  width: 28px;
  height: 28px;
}
.admin-logo strong {
  display: block;
  font-weight: 900;
  font-size: 18px;
}
.admin-logo small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-nav-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 18px;
  color: #475569;
  text-decoration: none;
  font-weight: 900;
}
.admin-nav-item {
  background: #f1f5f9;
  color: #1d4ed8;
}
.admin-nav-item.is-active {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: #fff;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22);
}
.admin-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.admin-nav-item.is-active .admin-nav-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
}
.admin-nav-icon svg {
  width: 21px;
  height: 21px;
}
.admin-sidebar-card {
  margin-top: auto;
  padding: 18px;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.admin-sidebar-card span {
  display: block;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}
.admin-sidebar-card strong {
  display: block;
  margin-top: 10px;
  font-size: 32px;
  font-family: "Barlow Condensed";
  color: #0f172a;
  line-height: 0.9;
}
.admin-sidebar-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-weight: 800;
}
.admin-logout-form button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
  cursor: pointer;
}
.admin-main-wrap {
  min-width: 0;
}
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 78px;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: rgba(237, 244, 255, 0.86);
  border-bottom: 1px solid rgba(191, 219, 254, 0.65);
  backdrop-filter: blur(18px);
}
.admin-eyebrow,
.admin-page-kicker {
  display: block;
  color: #2563eb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}
.admin-topbar strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  margin-top: 2px;
}
.admin-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}
.admin-user-pill > span {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 900;
}
.admin-user-pill strong {
  font-size: 14px;
  margin: 0;
}
.admin-user-pill small {
  display: block;
  color: #64748b;
  font-size: 12px;
}
.admin-mobile-nav {
  display: none;
  padding: 12px 18px;
  gap: 8px;
  overflow-x: auto;
}
.admin-mobile-nav a {
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid #dbeafe;
}
.admin-mobile-nav a.is-active {
  color: #fff;
  background: #2563eb;
}
.admin-content {
  padding: 28px;
}
.admin-page-stack {
  display: grid;
  gap: 20px;
}
.admin-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
}
.admin-hero-card::after {
  content: "";
  position: absolute;
  right: -52px;
  top: -52px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: #bfdbfe;
  opacity: 0.55;
}
.admin-hero-card > * {
  position: relative;
  z-index: 1;
}
.admin-hero-card h1 {
  margin: 8px 0 0;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.85;
  text-transform: uppercase;
  color: #082f49;
}
.admin-hero-card p {
  margin: 12px 0 0;
  color: #64748b;
  max-width: 670px;
  line-height: 1.7;
}
.admin-hero-card.compact {
  min-height: 170px;
}
.admin-price-widget {
  min-width: 230px;
  padding: 22px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24);
}
.admin-price-widget small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}
.admin-price-widget strong {
  display: block;
  margin-top: 6px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.admin-price-widget span {
  display: block;
  margin-top: 6px;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 900;
}
.saas-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.saas-metrics-grid.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.saas-metric-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  min-height: 190px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
}
.saas-metric-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: var(--metric, #2563eb);
  opacity: 0.13;
}
.saas-flat-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(37, 99, 235, 0.1);
  font-size: 25px;
}
.saas-metric-card small {
  display: block;
  margin-top: 18px;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}
.saas-metric-card strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  font-weight: 900;
}
.saas-metric-card p {
  margin-top: 12px;
  color: #64748b;
  font-size: 13px;
}
.metric-blue {
  --metric: #2563eb;
}
.metric-cyan {
  --metric: #06b6d4;
}
.metric-amber {
  --metric: #f59e0b;
}
.metric-red {
  --metric: #ef4444;
}
.admin-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.admin-panel-card {
  padding: 22px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
}
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.panel-heading span {
  display: block;
  color: #2563eb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}
.panel-heading h2 {
  margin: 5px 0 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}
.panel-badge,
.panel-link {
  padding: 8px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.admin-chart {
  height: 330px;
}
.admin-main-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22);
}
.admin-main-action:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.admin-table-wrap {
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  min-width: 580px;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-table.wide {
  min-width: 1000px;
}
.admin-table th {
  text-align: left;
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 13px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.admin-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.admin-table td small {
  display: block;
  margin-top: 3px;
  color: #64748b;
}
.table-size {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
}
.delivery-btn {
  min-height: 38px;
  border: 0;
  border-radius: 14px;
  padding: 0 12px;
  font-weight: 900;
  color: #15803d;
  background: #dcfce7;
  cursor: pointer;
}
.delivery-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-inline-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-input {
  max-width: 270px;
  min-height: 46px;
}
.admin-select {
  max-width: 105px;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-form-grid .span-full {
  grid-column: 1 / -1;
}
.user-create-panel {
  max-width: 1120px;
}

/* Inscritos grouped cards */
.inscritos-wrap {
  --card-bg: #fff;
  --muted: #64748b;
  --text: #0f172a;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --soft-2: #f1f5f9;
  --blue-soft: #eff6ff;
  --blue: #2563eb;
  --green-soft: #ecfdf5;
  --green: #15803d;
  --amber-soft: #fffbeb;
  --amber: #b45309;
  --red-soft: #fef2f2;
  --red: #b91c1c;
}
.inscritos-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.inscritos-title {
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.inscritos-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
}
.inscritos-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ui-input,
.ui-select {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 0 16px;
  font-size: 0.95rem;
  color: var(--text);
  transition: 0.2s ease;
  outline: none;
}
.ui-input {
  min-width: 280px;
}
.ui-input,
.ui-select {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.group-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition:
    0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.group-card {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  border-color: #dbeafe;
}
.group-header {
  background: linear-gradient(180deg, #fff, #f8fafc);
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.group-header-left,
.group-header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.toggle-btn {
  border-color: #bfdbfe;
  background: var(--blue-soft);
  color: var(--blue);
}
.group-label {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
  color: var(--muted);
}
.group-count {
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 700;
}
.group-total {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 14px;
}
.group-ref {
  font-family: SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 14px;
}
.badge-code,
.badge-status {
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.badge-code {
  background: var(--blue-soft);
  color: var(--blue);
}
.badge-code.is-empty {
  background: var(--soft-2);
  color: var(--muted);
}
.badge-status.status-paid {
  background: var(--green-soft);
  color: var(--green);
}
.badge-status.status-pending {
  background: var(--amber-soft);
  color: var(--amber);
}
.badge-status.status-failed {
  background: var(--red-soft);
  color: var(--red);
}
.badge-status.status-draft {
  background: var(--soft-2);
  color: var(--muted);
}
.table-wrap {
  overflow-x: auto;
  background: #fff;
}
.group-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  border-spacing: 0;
}
.group-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.group-table tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.cell-name {
  font-weight: 900;
  color: var(--text) !important;
}
.cell-muted {
  color: var(--muted) !important;
}
.cell-mono {
  font-family: SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--muted) !important;
}
.action-delete {
  border: 0;
  border-radius: 13px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
  padding: 9px 12px;
  cursor: pointer;
}
.empty-state {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  border-radius: 22px;
  padding: 28px;
  text-align: left;
  font-weight: 900;
}
.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.pagination-info {
  color: #64748b;
  font-weight: 800;
}
.pagination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ui-button-secondary {
  height: 42px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}
.page-chip {
  height: 42px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  padding: 0 14px;
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
  border: 1px solid #e2e8f0;
}

@media (max-width: 1100px) {
  .race-hero,
  .race-registration,
  .race-route-panel,
  .race-kit {
    grid-template-columns: 1fr;
  }
  .race-app-showcase {
    min-height: 560px;
  }
  .race-stat-grid,
  .saas-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    display: none;
  }
  .admin-mobile-nav {
    display: flex;
  }
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .race-nav {
    padding: 12px 12px 0;
  }
  .race-nav-links {
    display: none;
  }
  .race-brand small {
    display: none;
  }
  .race-nav-cta {
    padding: 12px 14px;
    font-size: 13px;
  }
  .race-hero {
    padding-top: 58px;
    gap: 28px;
  }
  .race-hero h1 {
    font-size: 58px;
  }
  .race-metric-strip,
  .race-stat-grid,
  .kit-cards,
  .form-grid-two,
  .participant-grid,
  .saas-metrics-grid,
  .saas-metrics-grid.two-cols,
  .admin-grid-two,
  .admin-form-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .race-section {
    padding: 36px 14px;
  }
  .race-section-heading {
    display: block;
  }
  .race-app-showcase {
    min-height: auto;
  }
  .floating-chip {
    display: none;
  }
  .race-route-copy,
  .race-kit,
  .race-registration {
    padding: 22px;
    border-radius: 28px;
  }
  .race-modal {
    padding: 10px;
  }
  .race-modal-footer,
  .race-modal-header,
  .admin-hero-card,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .race-modal-footer button {
    width: 100%;
  }
  .race-footer {
    display: block;
    text-align: center;
  }
  .race-footer span {
    display: block;
    margin-top: 8px;
  }
  .admin-topbar {
    padding: 14px;
  }
  .admin-user-pill {
    display: none;
  }
  .admin-content {
    padding: 16px 14px 28px;
  }
  .admin-hero-card {
    padding: 22px;
    border-radius: 24px;
  }
  .admin-hero-card h1 {
    font-size: 46px;
  }
  .admin-price-widget {
    width: 100%;
  }
  .admin-inline-controls,
  .admin-input {
    width: 100%;
    max-width: none;
  }
  .ui-input {
    min-width: 100%;
  }
}

/* Registro cliente / empleado */
.registration-type-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.registration-type-card {
  min-height: 210px;
  border: 1px solid #dbeafe;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.registration-type-card {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 20px 46px rgba(37, 99, 235, 0.12);
}
.registration-type-card .type-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 28px;
  margin-bottom: 22px;
}
.type-client {
  background: #dbeafe;
  color: #1d4ed8;
}
.type-employee {
  background: #e0f2fe;
  color: #0369a1;
}
.registration-type-card strong {
  display: block;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.registration-type-card small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  line-height: 1.55;
  font-weight: 800;
}
.form-type-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 22px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.form-type-bar small {
  display: block;
  color: #1d4ed8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}
.form-type-bar strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-weight: 900;
}
.form-type-bar button {
  border: 0;
  min-height: 38px;
  border-radius: 14px;
  padding: 0 13px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 900;
  cursor: pointer;
}
.employee-alert-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
  border: 1px solid #bfdbfe;
}
.employee-alert-card span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
}
.employee-alert-card p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}
.employee-alert-card strong {
  color: #0f172a;
}
.payment-method-panel {
  margin-top: 4px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border: 1px solid #dbeafe;
}
.payment-method-panel h4 {
  margin: 12px 0 4px;
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}
.payment-method-panel p {
  margin: 0;
  color: #64748b;
  line-height: 1.65;
}
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.payment-method-grid button,
.payment-method-option {
  min-height: 154px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.payment-method-grid button,
.payment-method-option {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.1);
}
.payment-method-grid button.is-selected,
.payment-method-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.payment-method-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dbeafe;
  font-size: 23px;
}
.payment-method-grid strong {
  display: block;
  margin-top: 14px;
  color: #0f172a;
  font-weight: 900;
}
.payment-method-grid small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  line-height: 1.45;
  font-weight: 800;
}
.group-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.78rem;
  font-weight: 900;
}
.group-meta-chip.employee {
  background: #ecfeff;
  color: #0369a1;
}

@media (max-width: 760px) {
  .registration-type-picker,
  .payment-method-grid {
    grid-template-columns: 1fr;
  }
  .registration-type-card {
    min-height: 170px;
  }
  .form-type-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .form-type-bar button {
    width: 100%;
  }
}

.employee-side-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
}
.employee-side-link span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  color: #2563eb;
}
.employee-side-link svg {
  width: 18px;
  height: 18px;
}
.employee-side-link:hover {
  transform: translateY(-1px);
  background: #dbeafe;
}

.employee-register-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(0, 175, 239, 0.24),
      transparent 28%
    ),
    radial-gradient(circle at 86% 16%, rgba(37, 99, 235, 0.2), transparent 30%),
    linear-gradient(135deg, #eef7ff 0%, #f8fbff 52%, #e0f2fe 100%);
}
.employee-register-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.employee-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid #dbeafe;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}
.employee-register-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 24px;
  align-items: stretch;
}
.employee-register-hero,
.employee-register-card {
  position: relative;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
}
.employee-register-hero {
  padding: 38px;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 51, 153, 0.96), rgba(0, 175, 239, 0.86)),
    linear-gradient(180deg, #003399, #00afef);
}
.employee-register-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -130px;
  bottom: -110px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.employee-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 900;
  font-size: 13px;
}
.employee-badge span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #a7f3d0;
  box-shadow: 0 0 0 6px rgba(167, 243, 208, 0.18);
}
.employee-register-hero h1 {
  margin: 26px 0 12px;
  font-size: clamp(52px, 7vw, 88px);
  line-height: 0.84;
  letter-spacing: -0.05em;
}
.employee-register-hero p {
  margin: 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 700;
}
.employee-info-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.employee-info-grid article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
}
.employee-info-grid article span {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  color: #1d4ed8;
}
.employee-info-grid svg {
  width: 22px;
  height: 22px;
}
.employee-info-grid strong,
.employee-info-grid small {
  display: block;
}
.employee-info-grid strong {
  font-size: 19px;
  font-weight: 900;
}
.employee-info-grid small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
}
.employee-register-card {
  padding: 34px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px);
}
.employee-register-card h2 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 0.9;
}
.employee-register-card > p {
  margin: 0 0 20px;
  color: #64748b;
  font-weight: 800;
  line-height: 1.6;
}
.employee-simple-form {
  margin-top: 18px;
}
.employee-modal-card {
  max-width: 920px;
}
.employee-footer {
  width: min(1180px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 920px) {
  .employee-register-shell {
    grid-template-columns: 1fr;
  }
  .employee-register-nav {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .employee-register-nav {
    flex-direction: column;
  }
  .employee-back-link {
    width: 100%;
    justify-content: center;
  }
  .employee-register-shell {
    width: min(100% - 24px, 1180px);
    margin-top: 22px;
  }
  .employee-register-hero,
  .employee-register-card {
    padding: 22px;
    border-radius: 28px;
  }
  .employee-register-hero h1 {
    font-size: 52px;
  }
}

/* Admin submenu inscritos */
.admin-nav-group {
  display: grid;
  gap: 6px;
}
.admin-nav-item.has-children {
  position: relative;
}
.admin-nav-item.has-children::after {
  content: "\203A";
  margin-left: auto;
  font-size: 20px;
  opacity: 0.45;
  transform: rotate(90deg);
}
.admin-nav-group.is-open .admin-nav-item.has-children {
  background: #f1f5f9;
  color: #1d4ed8;
}
.admin-nav-submenu {
  display: grid;
  gap: 6px;
  margin-left: 46px;
  padding-left: 10px;
  border-left: 2px solid #dbeafe;
}
.admin-nav-subitem {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 15px;
  color: #64748b;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
}
.admin-nav-subitem span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
}
.admin-nav-subitem span svg {
  width: 17px;
  height: 17px;
}
.admin-nav-subitem {
  background: #f8fafc;
  color: #1d4ed8;
}
.admin-nav-subitem.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}
.admin-nav-subitem.is-active span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Vistas separadas: clientes / empleados */
.participants-hero {
  align-items: stretch;
}
.participants-hero.client-view::after {
  background: #bfdbfe;
}
.participants-hero.employee-view::after {
  background: #a5f3fc;
}
.participants-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 430px);
}
.participants-tab {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-radius: 16px;
  text-decoration: none;
  color: #475569;
  font-weight: 900;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.participants-tab span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eff6ff;
}
.participants-tab {
  color: #1d4ed8;
  transform: translateY(-1px);
}
.participants-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.24);
}
.participants-tab.is-active span {
  background: rgba(255, 255, 255, 0.18);
}
.participants-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.participants-summary-strip article {
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid #dbeafe;
}
.participants-summary-strip span {
  display: block;
  color: #2563eb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}
.participants-summary-strip strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
.participants-summary-strip small {
  display: block;
  margin-top: 7px;
  color: #64748b;
  font-weight: 800;
}
.participants-table.clients-table {
  min-width: 1240px;
}
.participants-table.employees-table {
  min-width: 1320px;
}

@media (max-width: 760px) {
  .participants-hero-actions {
    width: 100%;
    justify-content: stretch;
  }
  .participants-tab,
  .participants-hero-actions .admin-main-action {
    flex: 1 1 100%;
    justify-content: center;
  }
  .participants-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* Admin welcome splash - only first load of /admin per session */
.admin-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(0, 175, 239, 0.28),
      transparent 31%
    ),
    radial-gradient(
      circle at 78% 12%,
      rgba(37, 99, 235, 0.32),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(2, 6, 23, 0.86), rgba(15, 23, 42, 0.72));
  backdrop-filter: blur(14px);
  animation: adminWelcomeIn 0.28s ease both;
}
.admin-welcome-overlay.is-leaving {
  animation: adminWelcomeOut 0.48s ease both;
}
.admin-welcome-modal {
  position: relative;
  width: min(540px, 100%);
  overflow: hidden;
  text-align: center;
  padding: 42px 34px 32px;
  border-radius: 36px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(239, 246, 255, 0.94)
  );
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 34px 100px rgba(2, 6, 23, 0.36);
}
.admin-welcome-modal::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -96px;
  top: -96px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
}
.admin-welcome-modal::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  left: -72px;
  bottom: -82px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.16);
}
.admin-welcome-modal > * {
  position: relative;
  z-index: 1;
}
.admin-welcome-orbit {
  width: 104px;
  height: 104px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 24px 50px rgba(37, 99, 235, 0.28);
  color: #fff;
  transform: rotate(-4deg);
}
.admin-welcome-runner {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.16);
  animation: adminWelcomeRunner 1.05s ease-in-out infinite alternate;
}
.admin-welcome-runner svg {
  width: 44px;
  height: 44px;
}
.admin-welcome-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.admin-welcome-modal h2 {
  margin: 16px 0 0;
  color: #082f49;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(56px, 10vw, 82px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.admin-welcome-modal p {
  margin: 16px auto 0;
  max-width: 360px;
  color: #475569;
  font-weight: 800;
  line-height: 1.55;
}
.admin-welcome-progress {
  width: min(360px, 100%);
  height: 10px;
  margin: 26px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}
.admin-welcome-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4, #84cc16);
  animation: adminWelcomeLoading 1.15s ease-in-out infinite;
}
.admin-welcome-close {
  margin-top: 22px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22);
}
.admin-welcome-close {
  transform: translateY(-1px);
}
@keyframes adminWelcomeIn {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes adminWelcomeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes adminWelcomeRunner {
  from {
    transform: translateX(-4px) rotate(-3deg);
  }
  to {
    transform: translateX(5px) rotate(3deg);
  }
}
@keyframes adminWelcomeLoading {
  0% {
    transform: translateX(-115%);
  }
  55% {
    transform: translateX(45%);
  }
  100% {
    transform: translateX(245%);
  }
}
@media (max-width: 640px) {
  .admin-welcome-modal {
    padding: 34px 22px 28px;
    border-radius: 30px;
  }
  .admin-welcome-orbit {
    width: 88px;
    height: 88px;
    border-radius: 30px;
  }
  .admin-welcome-runner {
    width: 58px;
    height: 58px;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Indicador visual fuerte para método de pago de empleados */
.employee-payment-selector .payment-method-option {
  position: relative;
  overflow: hidden;
  border-width: 2px;
}
.employee-payment-selector .payment-method-option .payment-icon {
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}
.employee-payment-selector .payment-method-option.is-selected {
  transform: translateY(-2px);
}
.employee-payment-selector .payment-method-option.is-selected .payment-icon {
  transform: scale(1.04);
}
.employee-payment-selector .payment-method-option.is-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px currentColor;
  opacity: 0.28;
}
.payment-credit-option.is-selected {
  border-color: #16a34a !important;
  background: linear-gradient(
    135deg,
    #ecfdf5 0%,
    #ffffff 60%,
    #dcfce7 100%
  ) !important;
  box-shadow:
    0 20px 45px rgba(22, 163, 74, 0.18),
    0 0 0 5px rgba(34, 197, 94, 0.14) !important;
  color: #15803d;
}
.payment-epayco-option.is-selected {
  border-color: #2563eb !important;
  background: linear-gradient(
    135deg,
    #eff6ff 0%,
    #ffffff 60%,
    #dbeafe 100%
  ) !important;
  box-shadow:
    0 20px 45px rgba(37, 99, 235, 0.18),
    0 0 0 5px rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8;
}
.payment-radio-dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.payment-method-option.is-selected .payment-radio-dot {
  border-color: currentColor;
  background: currentColor;
}
.payment-method-option.is-selected .payment-radio-dot::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
}
.payment-selected-pill {
  position: absolute;
  top: 15px;
  right: 48px;
  border-radius: 999px;
  padding: 6px 10px;
  background: currentColor;
  color: #fff !important;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}
.payment-selection-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
}
.payment-selection-summary > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-weight: 1000;
}
.payment-selection-summary strong {
  display: block;
  color: #0f172a;
  font-weight: 1000;
}
.payment-selection-summary small {
  display: block;
  color: #64748b;
  font-weight: 800;
  line-height: 1.35;
}
.payment-selection-summary.is-credit {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.payment-selection-summary.is-credit > span {
  background: #16a34a;
}
.payment-selection-summary.is-epayco {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.payment-selection-summary.is-epayco > span {
  background: #2563eb;
}
.employee-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 11px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-weight: 1000;
  font-size: 12px;
  white-space: nowrap;
}

/* Ajuste visual selector medio de pago empleado */
.employee-payment-selector .payment-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.employee-payment-selector .payment-method-option {
  position: relative;
  min-height: 150px;
  padding: 20px 18px 18px;
  border-radius: 22px;
  overflow: hidden;
}

.employee-payment-selector .payment-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.employee-payment-selector .payment-radio-dot {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #dbe7ff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  z-index: 3;
}

.employee-payment-selector .payment-radio-dot::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 999px;
  background: transparent;
  transform: scale(0);
  transition: transform 0.2s ease;
}

.employee-payment-selector
  .payment-method-option.is-selected
  .payment-radio-dot {
  border-color: #22c55e;
  background: #16a34a;
}

.employee-payment-selector
  .payment-method-option.is-selected
  .payment-radio-dot::after {
  content: "\2713";
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  transform: scale(1);
}

.employee-payment-selector .payment-selected-pill {
  position: absolute;
  right: 16px;
  bottom: 14px;
  top: auto;
  max-width: calc(100% - 32px);
  padding: 7px 11px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  white-space: nowrap;
  box-shadow: none;
}

.employee-payment-selector .payment-method-option strong {
  display: block;
  margin-top: 22px;
  padding-right: 10px;
  font-size: 16px;
}

.employee-payment-selector .payment-method-option.is-selected {
  border-color: #22c55e;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
  box-shadow: 0 18px 40px rgba(34, 197, 94, 0.18);
}

.employee-payment-selector .payment-epayco-option.is-selected {
  border-color: #2563eb;
  background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.16);
}

.employee-payment-selector
  .payment-epayco-option.is-selected
  .payment-radio-dot {
  border-color: #2563eb;
  background: #2563eb;
}

.employee-payment-selector
  .payment-epayco-option.is-selected
  .payment-selected-pill {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

@media (max-width: 640px) {
  .employee-payment-selector .payment-method-grid {
    grid-template-columns: 1fr;
  }

  .employee-payment-selector .payment-method-option {
    min-height: 135px;
  }
}

.employee-payment-selector .payment-selected-pill {
  display: none !important;
}

.employee-name-code-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(120px, 1fr);
  gap: 14px;
  align-items: end;
}

.employee-name-code-row label {
  min-width: 0;
}

.employee-name-code-row input {
  width: 100%;
}

@media (max-width: 640px) {
  .employee-name-code-row {
    grid-template-columns: 1fr;
  }
}

/* Nombre 80% + Código 20% en formulario empleado */
.employee-simple-form .employee-name-code-row {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) minmax(110px, 1fr) !important;
  gap: 14px !important;
  align-items: end !important;
  width: 100% !important;
}

.employee-simple-form .employee-name-code-row > label {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.employee-simple-form .employee-name-code-row input {
  width: 100% !important;
}

/* Solo en pantallas demasiado pequeñas se apila */
@media (max-width: 430px) {
  .employee-simple-form .employee-name-code-row {
    grid-template-columns: 1fr !important;
  }
}

/* Empleados sin agrupación: tabla plana y encabezado simple */
.employees-toolbar-simple .inscritos-title {
  font-size: 1.85rem;
}

.employees-toolbar-simple .inscritos-subtitle strong,
.participants-hero.employee-view p strong {
  color: #0f172a;
  font-weight: 1000;
}

.employees-flat-list {
  margin-top: 18px;
}

.employees-flat-table-wrap {
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.employees-flat-table tbody tr {
  background: #f8fafc;
}

.employees-flat-table .employee-code-pill {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

/* Estado validación código empleado contra API Buk */
.employee-code-validation {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
}

.employee-code-validation.is-active {
  color: #15803d;
}

.employee-code-validation.is-error {
  color: #b91c1c;
}

.employee-name-code-row input.is-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14) !important;
  background: #f0fdf4 !important;
}

.employee-name-code-row input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
  background: #fff7f7 !important;
}

/* Validación empleado por cédula */
.employee-simple-form .employee-document-name-row {
  display: grid !important;
  grid-template-columns: minmax(145px, 0.35fr) minmax(0, 0.65fr) !important;
  gap: 14px !important;
  align-items: end !important;
  width: 100% !important;
}
.employee-simple-form .employee-document-name-row > label {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.employee-simple-form .employee-document-name-row input {
  width: 100% !important;
}
.employee-document-name-row input.is-valid,
.employee-name-code-row input.is-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14) !important;
  background: #f0fdf4 !important;
}
.employee-document-name-row input.is-invalid,
.employee-name-code-row input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
  background: #fff7f7 !important;
}
.participant-grid input[readonly].readonly-input {
  background: #eef6ff !important;
  color: #475569 !important;
  cursor: not-allowed !important;
  border-color: #bfdbfe !important;
  font-weight: 900 !important;
}
@media (max-width: 520px) {
  .employee-simple-form .employee-document-name-row {
    grid-template-columns: 1fr !important;
  }
}
.hero-video-title {
  width: 100%;
  max-width: 760px;
  margin: 22px 0 0;
  border-radius: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.hero-video-title video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 760px) {
  .hero-video-title {
    max-width: 100%;
    border-radius: 24px;
  }
}

/* ======HERO VIDEO SIN MARCO / SIN RECUADRO====== */

.race-hero-copy .hero-video-title {
  width: 100% !important;
  max-width: 760px !important;
  margin: 18px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.race-hero-copy .hero-video-title video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .race-hero-copy .hero-video-title {
    max-width: 100% !important;
    margin: 14px 0 18px !important;
  }
}

@media (min-width: 1024px) {
  .race-app-showcase {
    transform: translateY(-120px);
  }
}

.hero-video-title {
  position: relative;
  isolation: isolate;
}

.hero-video-title::before {
  content: "RUN";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;

  font-size: clamp(140px, 20vw, 300px);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.08em;

  color: rgba(37, 99, 235, 0.06);
  -webkit-text-stroke: 2px rgba(37, 99, 235, 0.18);

  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.hero-video-title video {
  position: relative;
  z-index: 1;
}

.hero-video-title video {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 76%,
    rgba(255, 255, 255, 0.45) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 76%,
    rgba(255, 255, 255, 0.45) 88%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Bloque full width con texto en movimiento antes del formulario */
.race-deadline-marquee {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  height: 90px;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 20px;
  margin-bottom: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 50%, #172554 100%);
  box-shadow: 0 18px 50px rgba(37, 99, 235, 0.26);
}

.race-deadline-marquee::before,
.race-deadline-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.race-deadline-marquee::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(29, 78, 216, 1),
    rgba(29, 78, 216, 0)
  );
}

.race-deadline-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(23, 37, 84, 1), rgba(23, 37, 84, 0));
}

.race-deadline-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: raceDeadlineScroll 24s linear infinite;
  will-change: transform;
}

.race-deadline-track span {
  flex: 0 0 auto;
  padding: 0 42px;
  color: #ffffff;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 8px 26px rgba(15, 23, 42, 0.24);
}

.race-deadline-track span::after {
  content: "\2022";
  margin-left: 42px;
  color: rgba(255, 255, 255, 0.72);
}

@keyframes raceDeadlineScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  .race-deadline-marquee {
    height: 74px;
    margin-top: 10px;
    margin-bottom: 24px;
  }

  .race-deadline-marquee::before,
  .race-deadline-marquee::after {
    width: 54px;
  }

  .race-deadline-track {
    animation-duration: 18s;
  }

  .race-deadline-track span {
    padding: 0 26px;
    font-size: 1rem;
    letter-spacing: 0.06em;
  }

  .race-deadline-track span::after {
    margin-left: 26px;
  }
}

/* =========================================================MOBILE LANDING: MENÚ HAMBURGUESA + FORMULARIO SIN DESFASE========================================================= */

/* Evita que inputs con width:100% + padding se salgan del contenedor */
.race-landing,
.race-landing *,
.race-landing *::before,
.race-landing *::after {
  box-sizing: border-box;
}

/* Botón hamburguesa oculto en escritorio */
.race-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
  cursor: pointer;
  place-items: center;
  padding: 0;
}

.race-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  margin: 3px 0;
}

.race-mobile-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 14px;
  width: min(260px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(191, 219, 254, 0.9);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 80;
}

.race-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 900;
}

.race-mobile-menu a {
  background: #eff6ff;
  color: #1d4ed8;
}

@media (min-width: 761px) {
  .race-mobile-menu {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .race-nav {
    width: calc(100% - 20px);
    max-width: none;
    margin: 0 10px;
    padding: 10px 10px 0;
    gap: 10px;
  }

  .race-nav::before {
    inset: 6px 0 -8px;
    border-radius: 22px;
  }

  .race-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .race-brand > span:last-child {
    min-width: 0;
  }

  .race-brand strong {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .race-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    flex: 0 0 42px;
  }

  .race-nav-links,
  .race-nav-cta {
    display: none !important;
  }

  .race-menu-toggle {
    display: grid;
  }

  .race-hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .race-registration {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
    padding: 18px !important;
    gap: 18px;
    overflow: hidden;
  }

  .race-form-copy,
  .race-form-card,
  .race-form,
  .race-form label,
  .form-grid-two,
  .form-total-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .race-form-card {
    padding: 16px;
    border-radius: 26px;
    overflow: hidden;
  }

  .race-form input,
  .race-form select,
  .participant-grid input,
  .participant-grid select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .form-stepper {
    grid-template-columns: 1fr;
  }

  .form-stepper div {
    min-width: 0;
  }

  .form-price-card {
    width: 100%;
    min-width: 0;
  }

  .race-modal-card {
    width: 100%;
    max-width: 100%;
  }

  .participant-card,
  .participant-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .race-registration {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 14px !important;
  }

  .race-form-card {
    padding: 14px;
  }

  .form-total-box {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .race-registration .form-stepper {
    display: none !important;
  }
}

/* ================================Detalles del evento - Gradient Cards================================ */

.race-stats-pro {
  position: relative;
  padding-top: clamp(70px, 7vw, 110px);
  padding-bottom: clamp(70px, 7vw, 110px);
}

.race-section-heading-pro {
  max-width: 1180px;
  margin-inline: auto;
  margin-bottom: 38px;
}

.race-section-heading-pro h2 {
  max-width: 1050px;
  line-height: 0.9;
}

.race-stats-subtitle {
  margin: 14px 0 0;
  max-width: 560px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.7;
}

.race-stat-grid-pro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.race-stat-card-pro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 285px;
  padding: 30px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.race-stat-card-pro::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -72px;
  top: -72px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  z-index: -1;
  transition:
    transform 0.45s ease,
    opacity 0.35s ease;
}

.race-stat-card-pro::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%),
    radial-gradient(
      circle at 20% 110%,
      rgba(255, 255, 255, 0.22),
      transparent 35%
    );
  pointer-events: none;
  z-index: -1;
}

.race-stat-card-pro:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 38px 95px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: saturate(1.08);
}

.race-stat-card-pro:hover::before {
  transform: scale(1.22) translate(-8px, 8px);
  opacity: 0.9;
}

.stat-blue {
  background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 45%, #06b6d4 100%);
}

.stat-cyan {
  background: linear-gradient(145deg, #0891b2 0%, #06b6d4 48%, #22d3ee 100%);
}

.stat-lime {
  background: linear-gradient(145deg, #65a30d 0%, #84cc16 50%, #bef264 100%);
}

.stat-indigo {
  background: linear-gradient(145deg, #4338ca 0%, #6366f1 50%, #a78bfa 100%);
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.stat-icon-pro {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 18px 34px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
}

.stat-icon-pro svg {
  width: 29px;
  height: 29px;
}

.stat-number {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.58);
}

.race-stat-card-pro small {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.race-stat-card-pro strong {
  display: block;
  color: #ffffff;
  font-size: clamp(31px, 2.5vw, 44px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.race-stat-card-pro p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.65;
}

.stat-card-line,
.stat-progress-pro {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.stat-card-line::before {
  content: "";
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
}

/* ================================

Detalles del evento - Gradientes================================ */

.race-stats-gradient {
  position: relative;
  padding-top: clamp(70px, 7vw, 110px);
  padding-bottom: clamp(70px, 7vw, 110px);
}

.race-stat-gradient-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.race-stat-gradient-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 30px;
  border-radius: 36px;
  color: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  isolation: isolate;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.race-stat-gradient-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 3;
}

.race-stat-gradient-card::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -80px;
  top: -70px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(2px);
  z-index: -1;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.race-stat-gradient-card {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 42px 100px rgba(15, 23, 42, 0.24);
}

.race-stat-gradient-card:hover::after {
  transform: scale(1.18) translate(-12px, 12px);
  opacity: 0.9;
}

.gradient-blue {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255, 255, 255, 0.35),
      transparent 28%
    ),
    linear-gradient(145deg, #2563eb 0%, #0ea5e9 100%);
}

.gradient-cyan {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255, 255, 255, 0.35),
      transparent 28%
    ),
    linear-gradient(145deg, #0891b2 0%, #22d3ee 100%);
}

.gradient-lime {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255, 255, 255, 0.32),
      transparent 28%
    ),
    linear-gradient(145deg, #65a30d 0%, #a3e635 100%);
}

.gradient-indigo {
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255, 255, 255, 0.35),
      transparent 28%
    ),
    linear-gradient(145deg, #4f46e5 0%, #8b5cf6 100%);
}

.stat-gradient-bg-text {
  position: absolute;
  right: -8px;
  bottom: 8px;
  font-size: clamp(70px, 6vw, 110px);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: rgba(255, 255, 255, 0.13);
  pointer-events: none;
  z-index: 0;
}

.stat-gradient-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 18px 35px rgba(15, 23, 42, 0.14);
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}

.stat-gradient-icon svg {
  width: 30px;
  height: 30px;
}

.race-stat-gradient-card small {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.race-stat-gradient-card strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(34px, 2.5vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #fff;
}

.race-stat-gradient-card p {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.stat-gradient-progress {
  position: relative;
  z-index: 2;
  height: 9px;
  margin-top: 24px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.28);
}

.stat-gradient-progress span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.65);
  animation: statGradientPulse 2.4s ease-in-out infinite;
}

@keyframes statGradientPulse {
  0%,
  100% {
    opacity: 0.82;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.25);
  }
}

@media (max-width: 1100px) {
  .race-stat-gradient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .race-stat-gradient-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .race-stat-gradient-card {
    min-height: 250px;
    padding: 26px;
    border-radius: 30px;
  }

  .race-stat-gradient-card::before {
    border-radius: 29px;
  }

  .stat-gradient-bg-text {
    font-size: 84px;
  }
}

/* =========================================================
   DETALLES DEL EVENTO: SLIDER SOLO EN MÓVIL
   Mantiene las 4 cards, pero en celular se muestran como carrusel horizontal.
   ========================================================= */

@media (max-width: 680px) {
  .race-stats-pro {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .race-stats-pro .race-section-heading-pro {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-bottom: 22px !important;
  }

  .race-stats-pro .race-section-heading-pro h2 {
    font-size: clamp(42px, 14vw, 58px) !important;
    line-height: 0.9 !important;
    max-width: 100% !important;
  }

  .race-stat-grid-pro {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 18px !important;
    padding: 4px 18px 22px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  .race-stat-grid-pro::-webkit-scrollbar {
    display: none !important;
  }

  .race-stat-grid-pro {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .race-stat-card-pro {
    flex: 0 0 min(86vw, 360px) !important;
    width: min(86vw, 360px) !important;
    min-width: min(86vw, 360px) !important;
    max-width: min(86vw, 360px) !important;
    min-height: 245px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    border-radius: 30px !important;
    padding: 24px !important;
    transform: none !important;
  }

  .race-stat-card-pro:hover {
    transform: none !important;
  }

  .race-stat-card-pro strong {
    font-size: clamp(32px, 10vw, 42px) !important;
  }

  .race-stat-card-pro p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-top: 14px !important;
  }

  .stat-card-top {
    margin-bottom: 22px !important;
  }

  .stat-icon-pro {
    width: 56px !important;
    height: 56px !important;
    border-radius: 20px !important;
  }

  .stat-icon-pro svg {
    width: 27px !important;
    height: 27px !important;
  }

  .stat-progress-pro,
  .stat-card-line {
    left: 24px !important;
    right: 24px !important;
    bottom: 22px !important;
  }

  .race-stats-pro::after {
    content: "Desliza ->";
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 10px auto;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(191, 219, 254, 0.9);
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  }
}

@media (max-width: 390px) {
  .race-stat-card-pro {
    flex-basis: 88vw !important;
    width: 88vw !important;
    min-width: 88vw !important;
    max-width: 88vw !important;
  }
}

/* ================================
   Ruta ida y vuelta 7K
================================ */

.race-route-loop-panel {
  align-items: stretch;
}

.race-route-loop-map {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: 40px;
  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(125, 211, 252, 0.45),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(37, 99, 235, 0.22),
      transparent 34%
    ),
    linear-gradient(135deg, #e0f7ff 0%, #eff6ff 54%, #f7fee7 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.race-route-loop-map::before {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 36px;
  background-image:
    linear-gradient(rgba(14, 116, 144, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 116, 144, 0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

.route-loop-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
}

.route-loop-bg-path {
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 18px 35px rgba(37, 99, 235, 0.18));
}

.route-loop-path {
  stroke: url(#routeLoopGradient);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22 18;
  animation: routeDashMove 1.9s linear infinite;
  filter: url(#routeGlow);
}

.route-loop-runner {
  fill: #ffffff;
  stroke: #1d4ed8;
  stroke-width: 5;
  filter: drop-shadow(0 10px 20px rgba(37, 99, 235, 0.38));
}

.route-loop-start-dot {
  fill: #ffffff;
  stroke: #1d4ed8;
  stroke-width: 7;
  filter: drop-shadow(0 12px 25px rgba(37, 99, 235, 0.28));
}

.route-loop-start-ring {
  fill: transparent;
  stroke: rgba(37, 99, 235, 0.24);
  stroke-width: 4;
  animation: routePulse 1.7s ease-in-out infinite;
}

.route-loop-label {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 1000;
  fill: #082f49;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.route-loop-label-up {
  fill: #1d4ed8;
}

.route-loop-label-down {
  fill: #15803d;
}

.route-loop-badge {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 24px;
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
}

.route-loop-badge strong {
  display: block;
  color: #0f172a;
  font-size: 34px;
  line-height: 0.9;
  font-weight: 1000;
}

.route-loop-badge span {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.route-loop-mini-cards {
  position: absolute;
  z-index: 5;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.route-loop-mini-cards article {
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.route-loop-mini-cards span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 13px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 1000;
  font-size: 12px;
}

.route-loop-mini-cards strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-weight: 1000;
}

.route-loop-mini-cards small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-loop-copy {
  position: relative;
}

.route-loop-intro {
  margin: 18px 0 4px;
  color: #64748b;
  line-height: 1.8;
  font-weight: 800;
}

.route-loop-intro strong {
  color: #0f172a;
}

.route-total-pill {
  margin-top: 20px;
  padding: 18px;
  border-radius: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.22);
}

.route-total-pill strong {
  display: block;
  font-size: 42px;
  line-height: 0.9;
  font-weight: 1000;
  font-family: "Barlow Condensed", Impact, sans-serif;
}

.route-total-pill span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 900;
}

@keyframes routeDashMove {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes routePulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
    transform-origin: center;
  }
  50% {
    opacity: 0.85;
    transform: scale(1.35);
    transform-origin: center;
  }
}

@media (max-width: 760px) {
  .race-route-loop-map {
    min-height: 500px;
    border-radius: 30px;
  }

  .route-loop-svg {
    min-height: 390px;
    transform: scale(1.12);
    transform-origin: center;
  }

  .route-loop-badge {
    top: 18px;
    left: 18px;
  }

  .route-loop-mini-cards {
    grid-template-columns: 1fr;
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .route-loop-mini-cards article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 12px;
  }

  .route-loop-mini-cards span {
    grid-row: 1 / 3;
  }

  .route-loop-mini-cards strong,
  .route-loop-mini-cards small {
    margin-top: 0;
  }

  .route-loop-label {
    font-size: 14px;
  }
}

/* ================================
   Formulario inscripción - UI PRO
================================ */

.race-form-card { /*
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) !important;
    border: 1px solid rgba(191, 219, 254, .75) !important;
    box-shadow:
        0 24px 70px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255,255,255,.9) !important; */
}

.race-form {
    gap: 18px !important;
}

/* Labels más limpios */
.race-form label span {
    color: #10233f !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em !important;
}

/* Inputs más estéticos */
.race-form input,
.race-form select {
    min-height: 62px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(203, 213, 225, .95) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    padding: 0 18px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 24px rgba(15, 23, 42, .035) !important;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease !important;
}

.race-form input::placeholder,
.race-form select::placeholder {
    color: #9aa7b8 !important;
    font-weight: 650 !important;
}

/* Focus más premium, menos invasivo */
.race-form input:focus,
.race-form select:focus {
    border-color: #38bdf8 !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, .16),
        0 16px 34px rgba(37, 99, 235, .10),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
    transform: translateY(-1px);
}

/* Grid de correo/celular más limpio */
.form-grid-two {
    gap: 14px !important;
}

/* Caja de precio más elegante */
.form-total-box {
    min-height: 76px !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(56, 189, 248, .20), transparent 34%),
        linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%) !important;
    border: 1px solid rgba(147, 197, 253, .70) !important;
    box-shadow:
        0 16px 36px rgba(37, 99, 235, .08),
        inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.form-total-box span {
    color: #1d4ed8 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

.form-total-box strong {
    color: #061833 !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 1000 !important;
    letter-spacing: -0.04em !important;
}

/* Botón más moderno */
.race-submit {
    min-height: 62px !important;
    border-radius: 22px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    background:
        linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 58%, #22d3ee 100%) !important;
    box-shadow:
        0 18px 42px rgba(37, 99, 235, .26),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.race-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 24px 54px rgba(37, 99, 235, .34),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.race-submit:active {
    transform: translateY(0) scale(.99) !important;
}

/* Stepper más fino en escritorio */
.form-stepper div {
    border-radius: 20px !important;
    background: #f3f7fc !important;
    color: #64748b !important;
}

.form-stepper .active {
    background: linear-gradient(135deg, #dbeafe, #e0f2fe) !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.form-stepper span {
    border-radius: 12px !important;
    font-weight: 1000 !important;
}

/* Ajustes móvil */
@media (max-width: 768px) {
    .race-form-card {
        padding: 18px !important;
        border-radius: 30px !important;
    }

    .race-form {
        gap: 16px !important;
    }

    .race-form input,
    .race-form select {
        min-height: 58px !important;
        border-radius: 20px !important;
        font-size: 15px !important;
    }

    .form-total-box {
        min-height: 72px !important;
        border-radius: 22px !important;
    }

    .race-submit {
        min-height: 58px !important;
        border-radius: 20px !important;
    }
}

/*----------------------------*/
/* ================================
   Inputs landing - línea inferior animada en PC
================================ */

@media (min-width: 769px) {
    .race-form label {
        position: relative;
        gap: 6px !important;
    }

    .race-form label span {
        color: #10233f !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        letter-spacing: -0.01em !important;
    }

    .race-form input,
    .race-form select {
        min-height: 58px !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 2px solid rgba(148, 163, 184, 0.35) !important;
        background-color: transparent !important;
        background-image: linear-gradient(90deg, #1d4ed8, #06b6d4, #22d3ee) !important;
        background-repeat: no-repeat !important;
        background-position: left bottom !important;
        background-size: 0% 2px !important;

        color: #0f172a !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        padding: 0 4px 4px !important;

        box-shadow: none !important;
        outline: none !important;

        transition:
            background-size 0.35s ease,
            border-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease !important;
    }

    .race-form input::placeholder {
        color: #9aa7b8 !important;
        font-weight: 650 !important;
    }

    .race-form input:focus,
    .race-form select:focus {
        border-color: transparent !important;
        background-color: transparent !important;
        background-size: 100% 2px !important;
        box-shadow: none !important;
        transform: translateY(-1px);
    }

    .race-form input:hover,
    .race-form select:hover {
        border-bottom-color: rgba(37, 99, 235, 0.45) !important;
    }

    .race-form input:focus::placeholder {
        color: rgba(100, 116, 139, 0.55) !important;
    }

    .form-grid-two {
        gap: 18px !important;
    }
}



/* =========================================================
   FIX: botones activos por defecto
   Motivo: algunas reglas quedaron sin :disabled y hacían que los botones
   se vieran como inactivos permanentemente.
   ========================================================= */
.race-landing .race-submit:not(:disabled),
.race-landing .race-modal-footer button:not(:disabled),
.race-landing .race-nav-cta,
.race-landing .race-btn {
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.race-landing .race-submit:disabled,
.race-landing .race-modal-footer button:disabled {
    opacity: .65 !important;
    cursor: not-allowed !important;
}

/* Cédula y nombre con el mismo ancho en formulario empleado */
.employee-simple-form .employee-document-name-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
    width: 100% !important;
}

.employee-simple-form .employee-document-name-row > label {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.employee-simple-form .employee-document-name-row input {
    width: 100% !important;
    max-width: 100% !important;
}

/* En móvil sí se apilan para que no quede apretado */
@media (max-width: 640px) {
    .employee-simple-form .employee-document-name-row {
        grid-template-columns: 1fr !important;
    }
}


/* ================================
   Cantidad inscritos - Stepper PRO
   Inspirado en custom number input
================================ */

.run-qty-field {
    display: grid;
    gap: 10px;
}

.run-qty-label {
    color: #10233f;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.run-qty-stepper {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    align-items: center;
    min-height: 62px;
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(191, 219, 254, .85);
    box-shadow:
        0 16px 38px rgba(15, 23, 42, .07),
        inset 0 1px 0 rgba(255,255,255,.92);
}

.run-qty-stepper input {
    width: 100% !important;
    min-height: 62px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    color: #061833 !important;
    font-size: 24px !important;
    font-weight: 1000 !important;
    padding: 0 !important;
    outline: none !important;
}

/* Quita flechas nativas del input number */
.run-qty-stepper input::-webkit-inner-spin-button,
.run-qty-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.run-qty-stepper input[type="number"] {
    -moz-appearance: textfield;
}

.run-qty-btn {
    width: 58px;
    height: 62px;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #1d4ed8;
    background: #f1f7ff;
    font-size: 28px;
    font-weight: 1000;
    line-height: 1;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        opacity .2s ease;
}

.run-qty-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #06b6d4);
    color: #ffffff;
}

.run-qty-btn:active:not(:disabled) {
    transform: scale(.94);
}

.run-qty-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.run-qty-minus {
    border-right: 1px solid rgba(191, 219, 254, .75);
}

.run-qty-plus {
    border-left: 1px solid rgba(191, 219, 254, .75);
}

/* Móvil */
@media (max-width: 768px) {
    .run-qty-stepper {
        grid-template-columns: 54px minmax(0, 1fr) 54px;
        min-height: 58px;
        border-radius: 20px;
    }

    .run-qty-stepper input {
        min-height: 58px !important;
        font-size: 22px !important;
    }

    .run-qty-btn {
        width: 54px;
        height: 58px;
        font-size: 26px;
    }
}

/* =========================================================
   Móvil: mejorar visual de ruta animada ida/vuelta
   ========================================================= */

@media (max-width: 760px) {

    /* Oculta el bloque derecho "Ruta Farmanorte Run" en móvil */
    .race-route-loop-panel .route-loop-copy {
        display: none !important;
    }

    /* Deja solo el mapa/ruta en móvil */
    .race-route-loop-panel {
        display: block !important;
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* Ajusta el alto del mapa para que se vea mejor */
    .race-route-loop-map {
        min-height: 430px !important;
        height: 430px !important;
        border-radius: 30px !important;
        overflow: hidden !important;
    }

    /* Oculta el badge 7K / Ida y vuelta para liberar espacio */
    .route-loop-badge {
        display: none !important;
    }

    /* Sube el SVG animado */
    .route-loop-svg {
        min-height: 360px !important;
        height: 360px !important;
        transform: translateY(-99px) scale(1.16) !important;
        transform-origin: center top !important;
    }

    /* Sube un poco las etiquetas dentro del SVG */
    .route-loop-label {
        font-size: 13px !important;
    }

    /* Las mini cards quedan abajo, más compactas */
    .route-loop-mini-cards {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        gap: 8px !important;
    }

    .route-loop-mini-cards article {
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    .route-loop-mini-cards span {
        width: 30px !important;
        height: 30px !important;
        border-radius: 12px !important;
    }

    .route-loop-mini-cards strong {
        font-size: 13px !important;
    }

    .route-loop-mini-cards small {
        font-size: 11px !important;
    }
}

/* =========================================================
   Modal participantes - mejora UI solo móvil
   ========================================================= */

@media (max-width: 760px) {
    .race-modal {
        padding: 0 !important;
        background: rgba(2, 6, 23, .68) !important;
    }

    .race-modal-card {
        width: 100% !important;
        min-height: 100vh !important;
        margin: 0 !important;
        border-radius: 34px 34px 0 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .race-modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        padding: 28px 22px 20px !important;
        background: rgba(255, 255, 255, .96) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .race-modal-header h3 {
        font-size: clamp(52px, 15vw, 78px) !important;
        line-height: .82 !important;
        margin-top: 12px !important;
        color: #082f49 !important;
    }

    .race-modal-header p {
        font-size: 18px !important;
        line-height: 1.35 !important;
        color: #64748b !important;
    }

    .race-modal-header button {
        position: absolute !important;
        right: 18px !important;
        top: 22px !important;
        min-height: 44px !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
        background: #f1f5f9 !important;
        color: #0f172a !important;
        font-weight: 1000 !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
    }

    .race-modal-body {
        max-height: none !important;
        height: auto !important;
        padding: 18px 16px 120px !important;
        overflow-y: visible !important;
        background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
    }

    .participant-card {
        padding: 18px !important;
        border-radius: 28px !important;
        background: #ffffff !important;
        border: 1px solid rgba(191, 219, 254, .85) !important;
        box-shadow:
            0 18px 48px rgba(15, 23, 42, .08),
            inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    }

    .participant-head {
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #edf2f7 !important;
    }

    .participant-head span {
        width: 42px !important;
        height: 42px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, #1d4ed8, #06b6d4) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 26px rgba(37, 99, 235, .22) !important;
    }

    .participant-head strong {
        font-size: 18px !important;
        color: #0f172a !important;
        font-weight: 1000 !important;
    }

    .participant-grid-mobile-pro {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .participant-field {
        display: grid !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .participant-field span {
        display: block !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 1000 !important;
        letter-spacing: -0.01em !important;
    }

    .participant-field input,
    .participant-field select {
        width: 100% !important;
        min-height: 58px !important;
        border-radius: 20px !important;
        border: 1px solid #dbeafe !important;
        background:
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
        color: #0f172a !important;
        font-size: 16px !important;
        font-weight: 750 !important;
        padding: 0 16px !important;
        outline: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 8px 20px rgba(15, 23, 42, .035) !important;
    }

    .participant-field input::placeholder {
        color: #9aa7b8 !important;
        font-weight: 650 !important;
    }

    .participant-field input:focus,
    .participant-field select:focus {
        border-color: #38bdf8 !important;
        background: #ffffff !important;
        box-shadow:
            0 0 0 4px rgba(56, 189, 248, .14),
            0 14px 30px rgba(37, 99, 235, .08) !important;
    }

    .participant-date-field {
        padding: 14px !important;
        border-radius: 22px !important;
        background: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
    }

    .participant-date-field span {
        color: #1d4ed8 !important;
    }

    .participant-date-field input[type="date"] {
        background: #ffffff !important;
        color: #0f172a !important;
        font-weight: 900 !important;
    }

    .race-modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 9 !important;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
        background: rgba(255, 255, 255, .96) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -18px 40px rgba(15, 23, 42, .08) !important;
    }

    .race-modal-footer button {
        width: 100% !important;
        min-height: 58px !important;
        border-radius: 20px !important;
        font-size: 16px !important;
        font-weight: 1000 !important;
    }
}

/* =========================================================
   Fix móvil: campo fecha de nacimiento no se sale del marco
   ========================================================= */

@media (max-width: 760px) {
    .participant-date-field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .participant-date-field input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;

        display: block !important;
        height: 58px !important;
        line-height: 58px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        border-radius: 18px !important;
        overflow: hidden !important;

        -webkit-appearance: none !important;
        appearance: none !important;

        font-size: 15px !important;
        text-align: left !important;
    }

    .participant-grid-mobile-pro,
    .participant-field,
    .participant-field input,
    .participant-field select {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   Modal participantes móvil: selects más altos
   Género, talla y RH
   ========================================================= */

@media (max-width: 760px) {
    .participant-field select {
        min-height: 57px !important;
        height: 57px !important;
        line-height: 57px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    }

    .participant-field select:focus {
        border-color: #38bdf8 !important;
        box-shadow:
            0 0 0 4px rgba(56, 189, 248, .14),
            0 14px 30px rgba(37, 99, 235, .08) !important;
    }
}

/* =========================================================
   Modal participantes PC: campos con mismo estilo que móvil
   ========================================================= */

@media (min-width: 761px) {
    .participant-grid-mobile-pro {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .participant-field {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .participant-field span {
        display: block !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 1000 !important;
        letter-spacing: -0.01em !important;
    }

    .participant-field input,
    .participant-field select {
        width: 100% !important;
        min-height: 64px !important;
        height: 64px !important;
        border-radius: 20px !important;
        border: 1px solid #dbeafe !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
        color: #0f172a !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        padding: 0 16px !important;
        outline: none !important;
        box-sizing: border-box !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .9),
            0 8px 20px rgba(15, 23, 42, .035) !important;
    }

    .participant-field input::placeholder {
        color: #9aa7b8 !important;
        font-weight: 650 !important;
    }

    .participant-field input:focus,
    .participant-field select:focus {
        border-color: #38bdf8 !important;
        background: #ffffff !important;
        box-shadow:
            0 0 0 4px rgba(56, 189, 248, .14),
            0 14px 30px rgba(37, 99, 235, .08) !important;
    }

    .participant-date-field {
        padding: 14px !important;
        border-radius: 22px !important;
        background: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
        box-sizing: border-box !important;
    }

    .participant-date-field span {
        color: #1d4ed8 !important;
    }

    .participant-date-field input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-weight: 900 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
}

/* =========================================================
   Vista empleado: campos con estilo pro en PC y móvil
   ========================================================= */

.employee-register-card input,
.employee-register-card select,
.employee-simple-form input,
.employee-simple-form select {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    border: 1px solid #dbeafe !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 8px 20px rgba(15, 23, 42;
    height: 64px !important;
    border-radius: 20px !important;
    border: 1px solid #dbeafe !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%), .035) !important;
}

.employee-register-card input::placeholder,
.employee-simple-form input::placeholder {
    color: #9aa7b8 !important;
    font-weight: 650 !important;
}

.employee-register-card input:focus,
.employee-register-card select:focus,
.employee-simple-form input:focus,
.employee-simple-form select:focus {
    border-color: #38bdf8 !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, .14),
        0 14px 30px rgba(37, 99, 235, .08) !important;
}

.employee-register-card label span,
.employee-simple-form label span {
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.01em !important;
}

/* Cédula y nombre iguales en la vista empleado */
.employee-simple-form .employee-document-name-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: end !important;
    width: 100% !important;
}

.employee-simple-form .employee-document-name-row > label {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* En móvil se apilan para que no se vea apretado */
@media (max-width: 640px) {
    .employee-simple-form .employee-document-name-row {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   Vista empleado: modal participante con campos pro
   ========================================================= */

.employee-modal-card .participant-grid {
    gap: 16px !important;
}

.employee-modal-card .participant-grid input,
.employee-modal-card .participant-grid select,
.employee-modal-card .participant-field input,
.employee-modal-card .participant-field select {
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    border: 1px solid #dbeafe !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 8px 20px rgba(15, 23, 42, .035) !important;
}

.employee-modal-card .participant-grid input:focus,
.employee-modal-card .participant-grid select:focus,
.employee-modal-card .participant-field input:focus,
.employee-modal-card .participant-field select:focus {
    border-color: #38bdf8 !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, .14),
        0 14px 30px rgba(37, 99, 235, .08) !important;
}

/* Fecha nacimiento en modal empleado */
.employee-modal-card input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Ruta animada: camiseta PNG recorriendo el mapa */
.route-loop-runner {
    display: none !important;
}

.route-loop-shirt {
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: routeShirtFloat 1.45s ease-in-out infinite alternate;
    filter:
        drop-shadow(0 12px 18px rgba(15, 23, 42, .24))
        drop-shadow(0 0 14px rgba(37, 99, 235, .22));
}

@keyframes routeShirtFloat {
    from {
        transform: translateY(-2px) scale(1);
    }
    to {
        transform: translateY(2px) scale(1.035);
    }
}

@media (max-width: 760px) {
    .route-loop-shirt {
        filter:
            drop-shadow(0 10px 16px rgba(15, 23, 42, .26))
            drop-shadow(0 0 10px rgba(37, 99, 235, .18));
    }
}
/* =========================================================
   Ruta real simulada 5K / 10K - SVG animado sin imagen base
   Versión limpia: líneas delgadas, 10K azul y fondo tipo mapa sutil
   ========================================================= */
.route-real-panel {
    align-items: stretch;
}

.route-real-map {
    background:
        radial-gradient(circle at 18% 16%, rgba(219, 234, 254, .54), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(191, 219, 254, .46), transparent 28%),
        radial-gradient(circle at 50% 86%, rgba(226, 232, 240, .60), transparent 35%),
        linear-gradient(135deg, #f8fafc 0%, #eef5fb 48%, #fbfdff 100%) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .10) !important;
}

.route-real-map::before {
    background-image:
        linear-gradient(rgba(100, 116, 139, .036) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .036) 1px, transparent 1px),
        radial-gradient(circle at 18px 18px, rgba(100,116,139,.055) 1px, transparent 1.6px) !important;
    background-size: 38px 38px, 38px 38px, 76px 76px !important;
    opacity: .95 !important;
}

.route-real-badge {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .10) !important;
}

.route-real-badge strong {
    font-size: 27px;
    line-height: 1;
}

.route-real-svg {
    min-height: 430px;
    overflow: visible;
}

.route-real-map-bg {
    fill: rgba(255, 255, 255, .30);
    stroke: rgba(255, 255, 255, .72);
    stroke-width: 1.2;
}

.route-real-streets path {
    stroke: rgba(148, 163, 184, .34);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-real-streets path:nth-child(7),
.route-real-streets path:nth-child(8),
.route-real-streets path:nth-child(9) {
    stroke: rgba(100, 116, 139, .26);
    stroke-width: 3.2;
}

.route-real-map-labels text {
    fill: rgba(71, 85, 105, .40);
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.route-real-water {
    stroke: rgba(14, 165, 233, .105);
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-real-shadow {
    fill: none;
    stroke: rgba(255, 255, 255, .92);
    stroke-width: 13;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-real-shadow-10k {
    filter: drop-shadow(0 10px 20px rgba(37, 99, 235, .12));
}

.route-real-shadow-5k {
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .08));
}

.route-real-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 13 11;
    animation: routeDashMove 1.8s linear infinite;
}

.route-real-path-10k {
    stroke: #2563eb;
    stroke-width: 5.4;
    filter: url(#routeRealBlueGlow);
}

.route-real-path-5k {
    stroke: #111827;
    stroke-width: 5.2;
    filter: url(#routeRealDarkGlow);
    animation-duration: 1.45s;
}

.route-real-arrows path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .72;
}

.route-real-arrows-10k path {
    stroke: #2563eb;
}

.route-real-arrows-5k path {
    stroke: #111827;
}

.route-real-marker circle:first-child {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 4.5;
    filter: drop-shadow(0 10px 18px rgba(37, 99, 235, .22));
}

.route-real-marker circle:last-child {
    fill: #111827;
}

.route-real-label {
    font-family: "Manrope", sans-serif;
    font-weight: 1000;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .94);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.route-real-label-main {
    fill: #2563eb;
    font-size: 16px;
}

.route-real-label-sub {
    fill: #111827;
    font-size: 13px;
}

.route-km-tag rect {
    stroke: rgba(255, 255, 255, .82);
    stroke-width: 1.4;
    filter: drop-shadow(0 7px 12px rgba(15, 23, 42, .10));
}

.route-km-tag text {
    fill: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 1000;
}

.route-km-tag-blue rect {
    fill: #2563eb;
}

.route-km-tag-dark rect {
    fill: #111827;
}

.route-real-runner circle {
    fill: #ffffff;
    stroke-width: 3.6;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .18));
}

.route-real-runner text {
    font-family: "Manrope", sans-serif;
    font-size: 9.5px;
    font-weight: 1000;
}

.route-real-runner-10k circle {
    stroke: #2563eb;
}

.route-real-runner-10k text {
    fill: #2563eb;
}

.route-real-runner-5k circle {
    stroke: #111827;
}

.route-real-runner-5k text {
    fill: #111827;
}

.route-real-mini-cards article {
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .72) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
}

.route-real-mini-cards .route-mini-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.route-real-mini-cards .route-mini-dark {
    background: #e5e7eb;
    color: #111827;
}

.route-detail-5k span {
    background: #111827 !important;
    color: #ffffff !important;
}

.route-detail-10k span {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.route-real-total-pill {
    background: linear-gradient(135deg, #111827 0%, #2563eb 100%) !important;
    box-shadow: 0 18px 40px rgba(37, 99, 235, .20) !important;
}

@media (max-width: 760px) {
    .route-real-map {
        min-height: 500px !important;
        height: 500px !important;
    }

    .route-real-svg {
        height: 378px !important;
        min-height: 378px !important;
        transform: translateY(-42px) scale(1.04) !important;
        transform-origin: center top !important;
    }

    .route-real-streets path {
        stroke-width: 1.9;
        opacity: .84;
    }

    .route-real-streets path:nth-child(7),
    .route-real-streets path:nth-child(8),
    .route-real-streets path:nth-child(9) {
        stroke-width: 2.8;
    }

    .route-real-shadow {
        stroke-width: 11;
    }

    .route-real-path {
        stroke-width: 4.7;
    }

    .route-real-arrows path {
        stroke-width: 2.4;
    }

    .route-real-label-main {
        font-size: 15px !important;
    }

    .route-real-label-sub {
        font-size: 12px !important;
    }

    .route-km-tag text {
        font-size: 13px;
    }

    .route-real-mini-cards {
        grid-template-columns: 1fr !important;
        bottom: 14px !important;
    }
}

@media (max-width: 430px) {
    .route-real-svg {
        transform: translateY(-35px) scale(1.13) !important;
    }

    .route-km-tag {
        opacity: .92;
    }
}

/* =========================================================
   Ruta real importada desde Illustrator - 5K negro / 10K azul
   ========================================================= */
.route-illustrator-panel {
    align-items: stretch;
}

.route-illustrator-map {
    min-height: 690px !important;
    height: auto !important;
    overflow: hidden !important;
    padding: 26px 22px 138px !important;
    background:
        radial-gradient(circle at 15% 14%, rgba(219, 234, 254, .60), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(191, 219, 254, .48), transparent 28%),
        radial-gradient(circle at 45% 90%, rgba(226, 232, 240, .72), transparent 38%),
        linear-gradient(135deg, #f8fafc 0%, #edf6ff 48%, #ffffff 100%) !important;
}

.route-illustrator-map::before {
    opacity: .72 !important;
}

.route-illustrator-badge {
    z-index: 4;
}

.route-illustrator-svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 545px !important;
    min-height: 545px !important;
    margin-top: 14px;
    overflow: visible;
}

.route-ai-canvas {
    fill: rgba(255, 255, 255, .26);
    stroke: rgba(255, 255, 255, .66);
    stroke-width: 1.2;
}

.route-ai-streets path {
    fill: none;
    stroke: rgba(100, 116, 139, .18);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-ai-streets path:nth-last-child(-n + 3) {
    stroke: rgba(71, 85, 105, .18);
    stroke-width: 2.5;
}

.route-ai-halos path {
    fill: none;
    stroke: rgba(255, 255, 255, .96);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.route-ai-halo-blue {
    filter: drop-shadow(0 10px 18px rgba(37, 99, 235, .10));
}

.route-ai-halo-dark {
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, .08));
}

.route-ai-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4.2;
    stroke-dasharray: 10 9;
    animation: routeDashMove 1.85s linear infinite;
}

.route-ai-path-blue {
    stroke: #2563eb;
    filter: url(#routeAiBlueGlow);
}

.route-ai-path-dark {
    stroke: #0f172a;
    stroke-width: 4;
    filter: url(#routeAiDarkGlow);
    animation-duration: 1.5s;
}

.route-ai-start circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 3;
    filter: drop-shadow(0 7px 12px rgba(37, 99, 235, .18));
}

.route-ai-start rect {
    fill: #ffffff;
    stroke: rgba(15, 23, 42, .20);
    stroke-width: 1;
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .10));
}

.route-ai-start text,
.route-ai-start-label,
.route-ai-km text,
.route-ai-runner text {
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 1000;
}

.route-ai-start text {
    fill: #0f172a;
    font-size: 8px;
    letter-spacing: .5px;
}

.route-ai-start-label {
    fill: #0f172a;
    font-size: 12px;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .94);
    stroke-width: 5px;
    stroke-linejoin: round;
}

.route-ai-km rect {
    stroke: rgba(255, 255, 255, .88);
    stroke-width: 1.2;
    filter: drop-shadow(0 7px 10px rgba(15, 23, 42, .10));
}

.route-ai-km-blue rect {
    fill: #2563eb;
}

.route-ai-km-dark rect {
    fill: #0f172a;
}

.route-ai-km text {
    fill: #ffffff;
    font-size: 10.5px;
}

.route-ai-place rect {
    fill: rgba(15, 23, 42, .92);
    stroke: rgba(255, 255, 255, .86);
    stroke-width: 1.1;
    filter: drop-shadow(0 10px 14px rgba(15, 23, 42, .14));
}

.route-ai-place circle {
    fill: #ffffff;
    opacity: .96;
}

.route-ai-place text {
    fill: #ffffff;
    font-size: 10px;
    letter-spacing: .55px;
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 1000;
}

.route-ai-place-san-rafael {
    transform-box: fill-box;
}

.route-ai-road-highlight path {
    fill: none;
    stroke: rgba(220, 38, 38, .86);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-dasharray: 9 7;
    filter: drop-shadow(0 6px 10px rgba(220, 38, 38, .14));
}

.route-ai-road-highlight rect {
    fill: rgba(255, 255, 255, .94);
    stroke: rgba(220, 38, 38, .42);
    stroke-width: 1;
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .10));
}

.route-ai-road-highlight text {
    fill: #b91c1c;
    font-size: 9.2px;
    letter-spacing: .42px;
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 1000;
}

.route-ai-street-badge rect {
    fill: rgba(255, 255, 255, .92);
    stroke: rgba(15, 23, 42, .14);
    stroke-width: 1;
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .09));
}

.route-ai-street-badge text {
    fill: #334155;
    font-size: 8.8px;
    letter-spacing: .18px;
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 1000;
}

.route-ai-runner circle {
    fill: #ffffff;
    stroke-width: 3.2;
    filter: drop-shadow(0 9px 14px rgba(15, 23, 42, .16));
}

.route-ai-runner-10k circle {
    stroke: #2563eb;
}

.route-ai-runner-5k circle {
    stroke: #0f172a;
}

.route-ai-runner-10k text {
    fill: #2563eb;
    font-size: 8.8px;
}

.route-ai-runner-5k text {
    fill: #0f172a;
    font-size: 8.8px;
}

.route-illustrator-mini-cards {
    z-index: 5;
}

.route-illustrator-copy .route-loop-intro {
    max-width: 56ch;
}

@media (max-width: 1020px) {
    .route-illustrator-map {
        min-height: 660px !important;
    }

    .route-illustrator-svg {
        height: 510px !important;
        min-height: 510px !important;
    }
}

@media (max-width: 760px) {
    .route-illustrator-map {
        min-height: 620px !important;
        height: 620px !important;
        padding: 78px 10px 126px !important;
    }

    .route-illustrator-svg {
        height: 430px !important;
        min-height: 430px !important;
        transform: translateY(-8px) scale(1.08) !important;
        transform-origin: center top !important;
    }

    .route-ai-streets path {
        stroke-width: 1.3;
        opacity: .82;
    }

    .route-ai-halos path {
        stroke-width: 8.8;
    }

    .route-ai-path {
        stroke-width: 3.5;
        stroke-dasharray: 8 8;
    }

    .route-ai-path-dark {
        stroke-width: 3.4;
    }

    .route-ai-km text {
        font-size: 9.5px;
    }
    .route-ai-place text {
        font-size: 9px;
    }

    .route-ai-place-san-rafael {
        transform: translate(54px, 850px) scale(.94);
    }

    .route-ai-road-highlight text {
        font-size: 8.2px;
    }

    .route-ai-street-badge text {
        font-size: 7.8px;
    }

    .route-ai-road-highlight path {
        stroke-width: 1.8;
    }

    .route-illustrator-mini-cards {
        bottom: 14px !important;
    }
}

@media (max-width: 430px) {
    .route-illustrator-map {
        min-height: 590px !important;
        height: 590px !important;
    }

    .route-illustrator-svg {
        height: 392px !important;
        min-height: 392px !important;
        transform: translateY(0) scale(1.16) !important;
    }

    .route-ai-km {
        opacity: .96;
    }
    .route-ai-place-san-rafael {
        transform: translate(56px, 852px) scale(.88);
    }

    .route-ai-street-badge-gran-colombia {
        transform: translate(235px, 562px) scale(.92);
    }

    .route-ai-street-badge-av-cero {
        transform: translate(68px, 730px) scale(.9);
    }
}

/* ======================================================
   Premios oficiales home
====================================================== */
.race-prizes {
  position: relative;
  isolation: isolate;
  margin: 34px 0 86px;
  padding: 88px 18px;
  overflow: hidden;
  color: #f8fafc;
  background:
    radial-gradient(circle at 14% 14%, rgba(250, 204, 21, 0.17), transparent 30%),
    radial-gradient(circle at 86% 22%, rgba(37, 99, 235, 0.24), transparent 34%),
    linear-gradient(145deg, #06111f 0%, #0a1830 48%, #081b38 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 34px 90px rgba(2, 8, 23, 0.18);
}

.race-prizes::before,
.race-prizes::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.race-prizes::before {
  top: -80px;
  left: 7%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.018), 0 0 0 88px rgba(255, 255, 255, 0.012);
}

.race-prizes::after {
  right: 5%;
  bottom: -100px;
  box-shadow: 0 0 0 52px rgba(37, 99, 235, 0.035), 0 0 0 104px rgba(37, 99, 235, 0.02);
}

.race-prizes-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.race-prizes-grid-lines {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.race-prizes-orb {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(18px);
  pointer-events: none;
}

.race-prizes-orb-one {
  width: 200px;
  height: 200px;
  top: 25%;
  left: -90px;
  background: rgba(234, 179, 8, 0.13);
}

.race-prizes-orb-two {
  width: 260px;
  height: 260px;
  right: -120px;
  bottom: 15%;
  background: rgba(37, 99, 235, 0.17);
}

.race-prizes-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: end;
}

.race-prizes-heading-copy {
  max-width: 760px;
}

.race-prizes-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #fde68a;
  background: rgba(250, 204, 21, 0.09);
  border: 1px solid rgba(250, 204, 21, 0.22);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.race-prizes-kicker svg {
  width: 18px;
  height: 18px;
}

.race-prizes-heading h2 {
  margin: 20px 0 0;
  color: #ffffff;
  font-size: clamp(54px, 7vw, 92px);
  line-height: 0.86;
  text-transform: uppercase;
}

.race-prizes-heading h2 span {
  color: transparent;
  background: linear-gradient(100deg, #fde68a 0%, #facc15 45%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.race-prizes-heading-copy > p {
  max-width: 700px;
  margin: 24px 0 0;
  color: #a8b8ce;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 650;
}

.race-prize-pool {
  position: relative;
  min-width: 260px;
  padding: 24px;
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(250, 204, 21, 0.2), rgba(245, 158, 11, 0.06)),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(253, 230, 138, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.race-prize-pool::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -36px;
  top: -42px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.18);
  filter: blur(4px);
}

.race-prize-pool > span,
.race-prize-pool > small {
  display: block;
  position: relative;
  z-index: 1;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.race-prize-pool > strong {
  display: block;
  position: relative;
  z-index: 1;
  margin: 7px 0 3px;
  color: #ffffff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 45px;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.race-prize-pool-meta {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}

.race-prize-pool-meta span {
  padding: 7px 9px;
  border-radius: 999px;
  color: #fde68a;
  background: rgba(2, 6, 23, 0.36);
  border: 1px solid rgba(253, 230, 138, 0.14);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.race-prizes-category-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 52px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.085);
  backdrop-filter: blur(12px);
}

.race-prizes-category-bar > div:first-child {
  display: flex;
  align-items: center;
  gap: 13px;
}

.race-prizes-category-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: #facc15;
  background: rgba(250, 204, 21, 0.1);
}

.race-prizes-category-icon svg {
  width: 24px;
  height: 24px;
}

.race-prizes-category-bar p {
  margin: 0;
}

.race-prizes-category-bar p strong,
.race-prizes-category-bar p small {
  display: block;
}

.race-prizes-category-bar p strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.race-prizes-category-bar p small {
  margin-top: 3px;
  color: #8fa3bc;
  font-size: 12px;
  font-weight: 700;
}

.race-prizes-gender-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.race-prizes-gender-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 13px;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.18);
  font-size: 11px;
  font-weight: 900;
}

.race-prizes-gender-pills span:last-child {
  color: #fce7f3;
  background: rgba(236, 72, 153, 0.09);
  border-color: rgba(244, 114, 182, 0.16);
}

.race-prizes-gender-pills svg {
  width: 16px;
  height: 16px;
}

.race-prize-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  margin-top: 24px;
}

.race-podium-card {
  position: relative;
  min-width: 0;
  padding: 28px 24px 22px;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.race-podium-card::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -72px;
  top: -72px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.08;
}

.race-podium-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.race-podium-silver {
  color: #dbe3ef;
}

.race-podium-gold {
  min-height: 408px;
  padding-top: 42px;
  color: #facc15;
  background:
    linear-gradient(155deg, rgba(250, 204, 21, 0.17), rgba(245, 158, 11, 0.045)),
    rgba(255, 255, 255, 0.045);
  border-color: rgba(250, 204, 21, 0.29);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.3), 0 0 60px rgba(250, 204, 21, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.race-podium-bronze {
  color: #f0a56c;
}

.race-podium-featured {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #422006;
  background: linear-gradient(135deg, #fde68a, #facc15);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(250, 204, 21, 0.18);
}

.race-podium-medal {
  width: 64px;
  height: 72px;
  color: currentColor;
}

.race-podium-medal svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
}

.race-podium-medal text {
  fill: #0b1422;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 17px;
  font-weight: 1000;
}

.race-podium-rank {
  margin-top: 10px;
}

.race-podium-rank span,
.race-podium-rank strong {
  display: block;
}

.race-podium-rank span {
  color: #91a4bd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.race-podium-rank strong {
  margin-top: 3px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;
}

.race-podium-money {
  margin-top: 22px;
}

.race-podium-money strong,
.race-podium-money span {
  display: block;
}

.race-podium-money strong {
  color: #ffffff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(35px, 4vw, 48px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.race-podium-gold .race-podium-money strong {
  color: #fff7cc;
}

.race-podium-money span {
  margin-top: 6px;
  color: #8fa3bc;
  font-size: 11px;
  font-weight: 850;
}

.race-podium-winners {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.race-podium-winners span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.15);
  font-size: 10px;
  font-weight: 900;
}

.race-podium-winners span:last-child {
  color: #fce7f3;
  background: rgba(236, 72, 153, 0.08);
  border-color: rgba(244, 114, 182, 0.14);
}

.race-podium-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8fa3bc;
  font-size: 10px;
}

.race-podium-card footer strong {
  color: #ffffff;
  font-weight: 950;
}

.race-podium-card footer span {
  font-weight: 800;
}

.race-special-prizes {
  margin-top: 64px;
}

.race-special-prizes-heading span {
  color: #60a5fa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.race-special-prizes-heading h3 {
  margin: 7px 0 0;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 0.95;
  text-transform: uppercase;
}

.race-special-prizes-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.race-special-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  min-width: 0;
  min-height: 238px;
  padding: 24px;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

.race-special-card::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  right: -62px;
  top: -62px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.075;
}

.race-special-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
}

.race-special-time {
  color: #22d3ee;
  background: linear-gradient(145deg, rgba(8, 145, 178, 0.14), rgba(255, 255, 255, 0.04));
}

.race-special-unboxing {
  color: #a78bfa;
}

.race-special-recap {
  color: #fb7185;
}

.race-special-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.race-special-icon svg {
  width: 27px;
  height: 27px;
}

.race-special-copy {
  min-width: 0;
}

.race-special-copy > span {
  color: currentColor;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.race-special-copy h4 {
  margin: 5px 0 0;
  color: #ffffff;
  font-size: 19px;
  font-weight: 1000;
  line-height: 1.15;
}

.race-special-copy p {
  margin: 9px 0 0;
  color: #91a4bd;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
}

.race-special-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

.race-special-tags span {
  padding: 6px 8px;
  border-radius: 999px;
  color: #cbd5e1;
  background: rgba(2, 6, 23, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 9px;
  font-weight: 850;
}

.race-special-amount {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-top: 3px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.race-special-amount strong {
  color: #ffffff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 35px;
  line-height: 0.95;
}

.race-special-amount span,
.race-special-amount small {
  color: #91a4bd;
  font-size: 10px;
  font-weight: 850;
}

.race-special-amount small {
  margin-left: auto;
}

.race-prizes-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.race-prizes-summary > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(2, 6, 23, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.race-prizes-summary svg {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: #facc15;
}

.race-prizes-summary > div:last-child svg {
  color: #60a5fa;
}

.race-prizes-summary p,
.race-prizes-summary strong,
.race-prizes-summary span {
  display: block;
  margin: 0;
}

.race-prizes-summary strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.race-prizes-summary span {
  margin-top: 3px;
  color: #8196b0;
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 1020px) {
  .race-prizes-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .race-prize-pool {
    width: min(420px, 100%);
  }

  .race-prize-podium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .race-podium-gold {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: auto;
  }

  .race-special-prizes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .race-special-time {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .race-prizes {
    margin: 22px 0 64px;
    padding: 68px 16px;
  }

  .race-prizes-heading {
    gap: 28px;
  }

  .race-prizes-heading h2 {
    font-size: clamp(48px, 16vw, 72px);
  }

  .race-prizes-heading-copy > p {
    font-size: 15px;
  }

  .race-prize-pool {
    min-width: 0;
  }

  .race-prizes-category-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .race-prizes-gender-pills {
    width: 100%;
  }

  .race-prizes-gender-pills span {
    flex: 1;
    justify-content: center;
  }

  .race-prize-podium,
  .race-special-prizes-grid,
  .race-prizes-summary {
    grid-template-columns: 1fr;
  }

  .race-podium-gold,
  .race-special-time {
    grid-column: auto;
  }

  .race-podium-gold {
    order: -1;
  }

  .race-podium-card {
    min-height: 0;
  }

  .race-special-card {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .race-prizes {
    padding-inline: 13px;
  }

  .race-prizes-category-bar,
  .race-podium-card,
  .race-special-card {
    border-radius: 24px;
  }

  .race-podium-money strong {
    font-size: 42px;
  }

  .race-special-amount small {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-podium-card,
  .race-special-card {
    transition: none;
  }
}


/* =====================================================
   PREMIOS RACE PRIZE BOARD / versión editorial compacta
===================================================== */
.prize-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Fondo de extremo a extremo */
  width: 100vw;
  max-width: none;
  margin: 34px calc(50% - 50vw) 70px;
  border-radius: 0;
  color: #f8fbff;
  background: radial-gradient(circle at 84% 0%, rgba(0, 175, 239, 0.24), transparent 28%), linear-gradient(145deg, #51009b 0%, #120155 52%, #1b00a5 100%);
  box-shadow: 0 34px 90px rgba(2, 22, 43, 0.24);
}

.prize-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 74%, rgba(255,255,255,.035) 74% 74.2%, transparent 74.2%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 56px;
  opacity: .7;
}

.prize-board-noise {
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -125px;
  top: -145px;
  border: 74px solid rgba(163, 230, 53, .11);
  border-radius: 50%;
}

.prize-board-shell {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 54px;
}

.prize-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: end;
}

.prize-board-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #86f8ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.prize-board-kicker i {
  width: 34px;
  height: 2px;
  background: currentColor;
}

.prize-board-title h2 {
  margin: 16px 0 0;
  max-width: 600px;
  font-size: clamp(58px, 8vw, 104px);
  line-height: .76;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.prize-board-title h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.78);
}

.prize-board-total {
  min-width: 250px;
  text-align: right;
}

.prize-board-total > small,
.prize-board-total > b {
  display: block;
  color: #91a8bd;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.prize-board-total > strong {
  display: block;
  margin: 2px 0 -6px;
  color: #86f8ff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(78px, 10vw, 126px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.055em;
}

.prize-board-total > strong span {
  font-size: .44em;
  vertical-align: top;
  position: relative;
  top: .08em;
  margin-right: 3px;
}

.prize-board-total > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.prize-board-total > div span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #dce9f4;
  background: rgba(255,255,255,.055);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.prize-board-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 46px;
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #7f9bb4;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.prize-rank-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.prize-rank-card {
  position: relative;
  min-height: 248px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.prize-rank-card:hover {
  transform: translateY(-5px);
  border-color: rgb(255 202 248 / 55%);
  background: rgba(255,255,255,.085);
}

.prize-rank-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 58px;
  border-top: 1px dashed rgba(255,255,255,.16);
}

.prize-rank-first {
  color: #061b32;
  border-color: transparent;
  background: linear-gradient(145deg, #ebecfd, #0abffd);
  box-shadow: 0 22px 46px rgba(163,230,53,.14);
}

.prize-rank-first:hover {
  background: linear-gradient(145deg, #52c3ff, #c6e9ff);
  border-color: transparent;
}

.prize-rank-first::after {
  border-color: rgba(6,27,50,.2);
}

.prize-rank-number {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 58px;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.04em;
  opacity: .94;
}

.prize-rank-copy {
  grid-column: 1 / -1;
  align-self: end;
}

.prize-rank-copy span {
  display: block;
  margin-bottom: 4px;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .66;
}

.prize-rank-copy strong {
  display: block;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.025em;
}

.prize-rank-people {
  display: flex;
  gap: 6px;
  align-self: start;
}

.prize-rank-people span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 10px;
  color: #eb6796;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 1000;
}

.prize-rank-first .prize-rank-people span {
  color: #061b32;
  border-color: rgba(6,27,50,.15);
  background: rgba(6,27,50,.08);
}

.prize-rank-card > small {
  grid-column: 1 / -1;
  align-self: end;
  position: relative;
  z-index: 1;
  padding-top: 18px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .68;
}

.prize-extra-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  color: #9bb0c4;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.prize-extra-head i {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.12);
}

.prize-extra-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.prize-extra-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.prize-extra-time {
  border-color: rgba(0,175,239,.3);
  background: linear-gradient(120deg, rgba(0,175,239,.13), rgba(255,255,255,.045));
}

.prize-extra-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #a3e635;
  background: rgba(163,230,53,.1);
}

.prize-extra-icon svg {
  width: 21px;
  height: 21px;
}

.prize-extra-card div {
  min-width: 0;
}

.prize-extra-card div small,
.prize-extra-card div strong {
  display: block;
}

.prize-extra-card div small {
  color: #7f9bb4;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prize-extra-card div strong {
  margin-top: 3px;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prize-extra-card > b {
  color: #f8fbff;
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 27px;
  line-height: 1;
  white-space: nowrap;
}

.prize-extra-card > b small {
  color: #8fa6ba;
  font-family: "Manrope", sans-serif;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.prize-board-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #7894ad;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.prize-board-foot-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a3e635;
}

@media (max-width: 980px) {
  .prize-board {
    margin: 30px calc(50% - 50vw) 60px;
  }

  .prize-board-shell {
    padding: 48px 28px;
  }

  .prize-rank-grid {
    grid-template-columns: 1fr 1fr;
  }

  .prize-rank-first {
    grid-column: 1 / -1;
  }

  .prize-extra-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .prize-board {
    margin: 24px calc(50% - 50vw) 52px;
  border-radius: 0;
  }

  .prize-board-shell {
     padding: 42px 18px;
  }

  .prize-board-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .prize-board-title h2 {
    font-size: clamp(54px, 18vw, 78px);
  }

  .prize-board-total {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    min-width: 0;
    text-align: left;
  }

  .prize-board-total > small,
  .prize-board-total > b {
    grid-column: 1;
  }

  .prize-board-total > strong {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 84px;
  }

  .prize-board-total > div {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .prize-board-label-row {
    margin-top: 34px;
  }

  .prize-rank-grid {
    grid-template-columns: 1fr;
  }

  .prize-rank-first {
    grid-column: auto;
  }

  .prize-rank-card {
    min-height: 202px;
  }

  .prize-extra-card {
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: 14px;
  }

  .prize-extra-card > b {
    font-size: 24px;
  }

  .prize-board-foot {
    flex-wrap: wrap;
    text-align: center;
  }
}

/* Dashboard ejecutivo premium - resumen */
.admin-page-stack--premium-dashboard {
  gap: 18px;
}

.admin-hero-card--summary {
  padding: 24px 26px;
  border-radius: 28px;
  border: 1px solid #e5edf8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.96) 100%);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

.admin-hero-card--summary::after {
  width: 150px;
  height: 150px;
  right: -42px;
  top: -42px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.42) 0%, rgba(191, 219, 254, 0.14) 62%, transparent 68%);
  opacity: 1;
}

.admin-hero-copy {
  max-width: 720px;
}

.admin-hero-side {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.admin-hero-card--summary h1 {
  margin-top: 10px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.92;
}

.admin-hero-card--summary p {
  max-width: 560px;
}

.admin-inline-kpi-chip {
  min-width: 180px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid #e5edf8;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.admin-inline-kpi-chip__label {
  display: block;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.admin-inline-kpi-chip strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-kpi-card,
.dashboard-revenue-card,
.admin-panel-card--premium {
  border: 1px solid #e6edf7;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.dashboard-kpi-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  min-height: 148px;
  border-radius: 24px;
}

.dashboard-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.dashboard-kpi-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-kpi-card__top,
.dashboard-revenue-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-kpi-card__hint,
.dashboard-revenue-item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5edf8;
  color: #64748b;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.dashboard-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #0f172a;
}

.dashboard-icon svg {
  width: 20px;
  height: 20px;
}

.dashboard-icon.is-violet {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.12);
}

.dashboard-icon.is-blue {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
}

.dashboard-icon.is-amber {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
}

.dashboard-icon.is-rose {
  color: #be123c;
  background: rgba(244, 63, 94, 0.12);
}

.dashboard-icon.is-soft-blue {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
}

.dashboard-icon.is-soft-cyan {
  color: #0891b2;
  background: rgba(6, 182, 212, 0.1);
}

.dashboard-icon.is-soft-amber {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
}

.dashboard-icon.is-dark-glow {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.dashboard-kpi-card small,
.dashboard-revenue-item small {
  display: block;
  margin-top: 14px;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.dashboard-kpi-card strong,
.dashboard-revenue-item strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
  font-weight: 900;
}

.dashboard-kpi-card p,
.dashboard-revenue-item p,
.dashboard-section-head p {
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-revenue-card {
  border-radius: 28px;
  padding: 22px;
}

.dashboard-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-section-head__eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  color: #2563eb;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 900;
}

.dashboard-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.dashboard-highlight-total {
  min-width: 220px;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
  box-shadow: 0 16px 36px rgba(29, 78, 216, 0.2);
}

.dashboard-highlight-total small,
.dashboard-highlight-total span {
  display: block;
}

.dashboard-highlight-total small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.dashboard-highlight-total strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.dashboard-highlight-total span {
  margin-top: 8px;
  color: rgba(191, 219, 254, 0.96);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-revenue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-revenue-item {
  padding: 18px;
  border-radius: 22px;
  background: #f8fbff;
  border: 1px solid #e6edf7;
}

.dashboard-revenue-item.is-dark {
  background: linear-gradient(160deg, #0f172a 0%, #172554 100%);
  border-color: transparent;
}

.dashboard-revenue-item.is-dark .dashboard-revenue-item__tag {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

.dashboard-revenue-item.is-dark small,
.dashboard-revenue-item.is-dark p {
  color: rgba(226, 232, 240, 0.78);
}

.dashboard-revenue-item.is-dark strong {
  color: #fff;
}

.admin-grid-two--dashboard {
  gap: 18px;
}

.admin-panel-card--premium {
  padding: 22px;
  border-radius: 28px;
}

.panel-heading--premium {
  margin-bottom: 14px;
}

.panel-heading--premium h2 {
  font-size: 22px;
}

@media (max-width: 1220px) {
  .dashboard-kpi-grid,
  .dashboard-revenue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-hero-side {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 980px) {
  .dashboard-section-head,
  .admin-hero-card--summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-highlight-total,
  .admin-inline-kpi-chip,
  .admin-price-widget {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .dashboard-kpi-grid,
  .dashboard-revenue-grid,
  .admin-grid-two--dashboard {
    grid-template-columns: 1fr;
  }

  .dashboard-revenue-card,
  .admin-panel-card--premium,
  .dashboard-kpi-card {
    border-radius: 24px;
  }

  .dashboard-highlight-total strong,
  .admin-inline-kpi-chip strong {
    font-size: 28px;
  }
}

.btn-puntos-farmanorte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    margin-left: 4px;
    border-radius: 999px;
    background: #003399;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    letter-spacing: .3px;
    box-shadow: 0 6px 16px rgba(0, 51, 153, 0.22);
    transition: all .2s ease;
}

.btn-puntos-farmanorte:hover {
    background: #00256f;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 51, 153, 0.28);
}

.form-price-card-points {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 20px;
    border: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, #003399 0%, #0056d6 48%, #001f6b 100%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 51, 153, .28);
}

.form-price-card-points::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%, rgba(255,255,255,.12));
    pointer-events: none;
}

.points-discount-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #003399;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .35px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.points-discount-badge strong {
    font-size: 13px;
    line-height: 1;
}

.points-card-logo {
    position: relative;
    z-index: 2;
    width: 150px;
    max-width: 62%;
    margin-bottom: 18px;
}

.points-card-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.points-price-content {
    position: relative;
    z-index: 2;
}

.points-price-content small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 700;
}

.points-price-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.points-price-row strong {
    color: #ffffff;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -1.4px;
}

.points-price-row span {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
}

.points-full-price {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 700;
}

.points-full-price b {
    color: rgba(255, 255, 255, .75);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

@media (max-width: 640px) {
    .form-price-card-points {
        padding: 20px 18px 18px;
        border-radius: 20px;
    }

    .points-discount-badge {
        top: 12px;
        right: 12px;
        font-size: 10px;
    }

    .points-card-logo {
        width: 128px;
        margin-bottom: 16px;
    }

    .points-price-row strong {
        font-size: 34px;
    }
}


/* Ruta Google Maps Farmanorte Run - ajuste visual */
.route-illustrator-map::before {
    opacity: .18 !important;
    background-size: 68px 68px !important;
}

.route-illustrator-svg .route-ai-streets path {
    stroke: rgba(71, 85, 105, .16);
    stroke-width: 2.1;
}

.route-illustrator-svg .route-ai-streets path:nth-last-child(-n + 3) {
    stroke: rgba(37, 99, 235, .14);
    stroke-width: 2.8;
}

.route-ai-street-badge-malecon rect {
    stroke: rgba(37, 99, 235, .18);
}

.route-ai-street-badge-malecon text {
    fill: #1d4ed8;
}

@media (max-width: 430px) {
    .route-ai-place-san-rafael {
        transform: translate(52px, 872px) scale(.88);
    }

    .route-ai-street-badge-gran-colombia {
        transform: translate(238px, 552px) scale(.92);
    }

    .route-ai-street-badge-av-cero {
        transform: translate(95px, 790px) scale(.9);
    }

    .route-ai-street-badge-malecon {
        transform: translate(400px, 470px) scale(.9);
    }
}

/* =========================================================
   Ruta Google Maps oficial - ajuste 2026-07-05
   ========================================================= */
.route-ai-path-official {
  stroke-width: 5.2px;
  stroke-dasharray: 14 8;
  filter: url(#routeAiBlueGlow) drop-shadow(0 12px 18px rgba(37, 99, 235, .18));
}

.route-ai-path-5k {
  stroke-width: 4.1px;
  stroke-dasharray: 8 7;
  opacity: .98;
}

.route-ai-waypoints circle {
  fill: #ffffff;
  stroke: #00afef;
  stroke-width: 2.2;
  filter: drop-shadow(0 7px 10px rgba(37, 99, 235, .22));
  animation: routeWaypointPulse 2.4s ease-in-out infinite;
}

.route-ai-waypoints circle:nth-child(2n) {
  animation-delay: .35s;
}

.route-ai-waypoints circle:nth-child(3n) {
  animation-delay: .7s;
}

@keyframes routeWaypointPulse {
  0%, 100% { opacity: .82; transform: scale(1); transform-box: fill-box; transform-origin: center; }
  50% { opacity: 1; transform: scale(1.32); transform-box: fill-box; transform-origin: center; }
}

.route-ai-street-badge-malecon rect {
  fill: rgba(255, 255, 255, .94);
  stroke: rgba(37, 99, 235, .22);
}

.route-ai-street-badge-malecon text {
  fill: #1d4ed8;
}

.route-ai-km-blue-8 rect {
  fill: #2563eb;
}

@media (max-width: 760px) {
  .route-ai-path-official {
    stroke-width: 4.4px;
    stroke-dasharray: 11 8;
  }

  .route-ai-waypoints circle {
    stroke-width: 1.8;
  }

  .route-ai-street-badge-gran-colombia {
    transform: translate(296px, 545px) rotate(-24deg) scale(.88);
  }

  .route-ai-street-badge-av-cero {
    transform: translate(244px, 674px) rotate(-38deg) scale(.88);
  }

  .route-ai-street-badge-malecon {
    transform: translate(403px, 461px) rotate(-84deg) scale(.88);
  }

  .route-ai-place-san-rafael {
    transform: translate(42px, 890px) scale(.86);
  }
}

@media (max-width: 430px) {
  .route-ai-street-badge-gran-colombia {
    transform: translate(296px, 545px) rotate(-24deg) scale(.78);
  }

  .route-ai-street-badge-av-cero {
    transform: translate(244px, 674px) rotate(-38deg) scale(.78);
  }

  .route-ai-street-badge-malecon {
    transform: translate(403px, 461px) rotate(-84deg) scale(.78);
  }

  .route-ai-place-san-rafael {
    transform: translate(42px, 890px) scale(.78);
  }
}


.race-kit-pro .race-kit-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.race-kit-pro .race-kit-head h2 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .92;
}

.race-kit-pro .kit-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.race-kit-pro .kit-cards article {
  position: relative;
  min-height: 185px;
  padding: 20px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, .20), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(37, 99, 235, .10);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.race-kit-pro .kit-cards article::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: rgba(0, 175, 239, .10);
}

.race-kit-pro .kit-card-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 28px;
}

.race-kit-pro .kit-cards strong,
.race-kit-pro .kit-cards small {
  position: relative;
  z-index: 1;
}

.race-kit-pro .kit-cards strong {
  display: block;
  margin-top: 18px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 1000;
}

.race-kit-pro .kit-cards small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 750;
}

@media (max-width: 760px) {
  .race-kit.race-kit-pro {
    padding: 22px;
  }

  .race-kit-pro .race-kit-head {
    display: block;
    margin-bottom: 18px;
  }

  .race-kit-pro .race-kit-head h2 {
    margin-top: 12px;
    font-size: 34px;
  }

  .race-kit-pro .kit-cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
  }

  .race-kit-pro .kit-cards::-webkit-scrollbar {
    display: none;
  }

  .race-kit-pro .kit-cards article {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 188px;
  }
}

/* Kit runner full width purple strip - fixed horizontal rail */
.race-kit.race-kit-fullwidth-purple {
  position: relative;
  display: block;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 18px;
  margin-bottom: 0;
  padding: clamp(28px, 3.4vw, 46px) clamp(16px, 4vw, 54px);
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at 9% 16%, rgba(168, 85, 247, .42), transparent 30%),
    radial-gradient(circle at 74% 20%, rgba(79, 70, 229, .34), transparent 30%),
    linear-gradient(112deg, #10051d 0%, #24103f 38%, #3d1672 67%, #0b1020 100%);
  box-shadow: none;
}

.race-kit.race-kit-fullwidth-purple::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.07) 0 1px, transparent 1px 70px),
    radial-gradient(circle at 50% 120%, rgba(216,180,254,.24), transparent 40%);
  opacity: .42;
  pointer-events: none;
}

.race-kit.race-kit-fullwidth-purple::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  pointer-events: none;
}

.kit-strip-shell {
  position: relative;
  z-index: 1;
  width: min(1320px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 34px);
}

.kit-strip-copy {
  width: clamp(250px, 24vw, 330px);
  flex: 0 0 clamp(250px, 24vw, 330px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kit-strip-kicker {
  width: fit-content;
  color: #f5e8ff;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.kit-strip-copy h2 {
  max-width: 310px;
  margin: 16px 0 0;
  color: #ffffff;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.kit-strip-copy p {
  max-width: 300px;
  margin: 14px 0 0;
  color: rgba(245, 232, 255, .76);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 760;
}

.kit-strip-items {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 32px;
  background: rgba(255, 255, 255, .075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 28px 76px rgba(3, 7, 18, .24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.kit-strip-items::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(216,180,254,.48), rgba(255,255,255,.08));
  pointer-events: none;
}

.kit-strip-item {
  position: relative;
  min-width: 0;
  min-height: 150px;
  padding: 20px clamp(12px, 1.25vw, 18px);
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.kit-strip-item + .kit-strip-item {
  border-left-color: rgba(255, 255, 255, .10);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.kit-strip-item:hover {
  transform: translateY(-2px);
 
}

.kit-strip-item::before {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  right: -50px;
  bottom: -54px;
  border-radius: 999px;
  background: rgba(168, 85, 247, .32);
  filter: blur(2px);
  pointer-events: none;
}

.kit-strip-number {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.20);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
}

.kit-strip-item strong,
.kit-strip-item small {
  position: relative;
  z-index: 1;
  display: block;
}

.kit-strip-item strong {
  margin-top: 22px;
  color: #ffffff;
  font-size: clamp(17px, 1.28vw, 21px);
  line-height: 1.05;
  font-weight: 1000;
  white-space: normal;
}

.kit-strip-item small {
  margin-top: 9px;
  color: rgba(245, 232, 255, .75);
  font-size: clamp(11.5px, .9vw, 13px);
  line-height: 1.42;
  font-weight: 730;
}

@media (max-width: 1180px) {
  .kit-strip-shell {
    flex-direction: column;
  }

  .kit-strip-copy {
    width: 100%;
    flex-basis: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    gap: 18px;
    align-items: end;
  }

  .kit-strip-copy h2 {
    max-width: 620px;
  }

  .kit-strip-copy p {
    max-width: 360px;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .race-kit.race-kit-fullwidth-purple {
    margin-top: 8px;
    padding: 26px 14px 32px;
  }

  .kit-strip-shell {
    gap: 18px;
  }

  .kit-strip-copy {
    display: block;
  }

  .kit-strip-copy h2 {
    max-width: 100%;
    margin-top: 14px;
    font-size: 40px;
  }

  .kit-strip-copy p {
    max-width: 100%;
    margin-top: 12px;
  }

  .kit-strip-items {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .kit-strip-items::before {
    display: none;
  }

  .kit-strip-items::-webkit-scrollbar {
    display: none;
  }

  .kit-strip-item,
  .kit-strip-item + .kit-strip-item {
    flex: 0 0 calc(100vw - 28px);
    min-height: 188px;
    scroll-snap-align: start;
    border-radius: 28px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 48px rgba(2, 6, 23, .18);
  }

  .kit-strip-item:hover {
    transform: none;
  }

  .kit-strip-number {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }

  .kit-strip-item strong {
    margin-top: 30px;
    font-size: 25px;
  }

  .kit-strip-item small {
    font-size: 14px;
    line-height: 1.55;
  }
}


/* =========================RUTA INTERACTIVA FARMANORTE RUN========================= */
.race-map-pro-section {
  max-width: none;
  width: 100%;
  padding: clamp(42px, 5vw, 74px) 0;
}

.race-map-pro-shell {
  width: min(1380px, calc(100% - 36px));
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.race-map-pro-head {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  align-items: end;
  gap: 22px;
}

.race-map-pro-head h2 {
  margin: 0;
  color: #062044;
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: 0.84;
  text-transform: uppercase;
  letter-spacing: -0.045em;
}

.race-map-pro-head p {
  max-width: 760px;
  margin: 14px 0 0;
  color: #526173;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.65;
}

.race-map-pro-stage {
  position: relative;
  overflow: hidden;
  min-height: 650px;
  border-radius: 42px;
  background: #08111f;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 34px 90px rgba(2, 48, 71, 0.18);
}

.race-route-leaflet {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 650px;
  background: #dbeafe;
}

.race-route-leaflet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.58) 0%, rgba(3, 7, 18, 0.18) 28%, rgba(3, 7, 18, 0.03) 52%, rgba(3, 7, 18, 0.16) 100%),
    radial-gradient(circle at 18% 20%, rgba(0, 175, 239, 0.16), transparent 34%);
  mix-blend-mode: multiply;
}

.race-map-pro-toolbar {
  position: absolute;
  z-index: 610;
  top: 22px;
  left: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
}

.race-map-pro-toolbar button,
.race-map-pro-toolbar a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  padding: 0 15px;
  color: #0f172a;
  background: transparent;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.race-map-pro-toolbar button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #003399, #00afef);
  box-shadow: 0 12px 28px rgba(0, 51, 153, 0.24);
}

.race-map-pro-toolbar a {
  color: #003399;
  background: #eff6ff;
}

.race-map-pro-overlay {
  position: absolute;
  z-index: 610;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  pointer-events: none;
}

.race-map-pro-overlay article {
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(15px);
}

.race-map-pro-overlay small,
.race-map-pro-overlay strong {
  display: block;
}

.race-map-pro-overlay small {
  color: #2563eb;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.race-map-pro-overlay strong {
  margin-top: 5px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 1000;
}

.race-km-marker {
  display: grid;
  place-items: center;
}

.race-km-marker span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #003399, #00afef);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 51, 153, 0.34);
  font-size: 12px;
  font-weight: 1000;
}

.race-map-pin span {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 999px;
  background: #ffffff;
  border: 7px solid #111827;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
}

.race-map-pin-start span {
  border-color: #22c55e;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.18), 0 10px 24px rgba(15, 23, 42, 0.3);
}

.race-runner-map-marker {
  display: grid;
  place-items: center;
}

.race-runner-map-marker span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a, #84cc16);
  border: 2px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(22, 163, 74, 0.32);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.race-map-tooltip {
  border: 0 !important;
  border-radius: 16px !important;
  padding: 9px 11px !important;
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
}

.race-map-tooltip strong,
.race-map-tooltip small {
  display: block;
}

.race-map-tooltip strong {
  font-size: 12px;
  font-weight: 1000;
}

.race-map-tooltip small {
  margin-top: 2px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.race-route-leaflet .leaflet-control-attribution {
  border-radius: 14px 0 0 0;
  background: rgba(255, 255, 255, 0.84);
  font-size: 10px;
  font-weight: 700;
}

.race-route-leaflet .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.17);
}

.race-route-leaflet .leaflet-control-zoom a {
  border: 0;
  color: #0f172a;
  font-weight: 1000;
}

@media (max-width: 900px) {
  .race-map-pro-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .race-map-pro-stage,
  .race-route-leaflet {
    min-height: 570px;
  }

  .race-map-pro-overlay {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .race-map-pro-section {
    padding: 34px 0;
  }

  .race-map-pro-shell {
    width: min(100% - 24px, 1380px);
  }

  .race-map-pro-stage {
    border-radius: 30px;
  }

  .race-map-pro-stage,
  .race-route-leaflet {
    min-height: 620px;
  }

  .race-map-pro-toolbar {
    top: 12px;
    left: 12px;
    right: 12px;
    justify-content: center;
  }

  .race-map-pro-toolbar button,
  .race-map-pro-toolbar a {
    flex: 1 1 auto;
    min-height: 40px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .race-map-pro-overlay {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .race-map-pro-overlay article {
    padding: 13px 14px;
    border-radius: 20px;
  }
}


/* =========================MAPA GOOGLE MY MAPS EMBED========================= */
.race-map-embed-section {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(28px, 4vw, 48px) clamp(14px, 3vw, 34px);
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 175, 239, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(238, 247, 255, 0.64), rgba(255, 255, 255, 0.9));
}

.race-map-embed-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 38px);
  background: #ffffff;
  border: 1px solid rgba(191, 219, 254, 0.9);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.12);
}

.race-map-embed-shell iframe {
  display: block;
  width: 100%;
  height: clamp(460px, 64vh, 720px);
  border: 0;
}

@media (max-width: 760px) {
  .race-map-embed-section {
    padding: 22px 12px;
  }

  .race-map-embed-shell {
    border-radius: 24px;
  }

  .race-map-embed-shell iframe {
    height: 460px;
  }
}

.kit-strip-item::before {
  display: none !important;
}

@media (max-width: 640px) {
  .race-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .race-footer article {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 0 10px;
  }

  .race-footer article img {
    display: block;
    width: min(180px, 55vw) !important;
    height: auto;
    margin: 0 auto;
  }
}

/* ====== HERO MÓVIL: IMAGEN ALEATORIA EN VEZ DE VIDEO ====== */
.hero-image-mobile {
  display: none;
}

.hero-video-desktop {
  display: block;
}

@media (max-width: 760px) {
  .race-hero-copy .hero-video-title .hero-video-desktop {
    display: none !important;
  }

  .race-hero-copy .hero-video-title .hero-image-mobile {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: contain;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (min-width: 761px) {
  .race-hero-copy .hero-video-title .hero-image-mobile {
    display: none !important;
  }

  .race-hero-copy .hero-video-title .hero-video-desktop {
    display: block !important;
  }
}

@media (max-width: 760px) {
  .race-hero-copy .hero-video-title .hero-image-mobile {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.55) 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.55) 86%,
      transparent 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.race-predict-stopwatch svg {
    width: 18px;
    height: 18px;
}

.race-stopwatch-hand {
    transform-origin: 12px 13px;
    animation: raceStopwatchTick 1.15s linear infinite;
}

@keyframes raceStopwatchTick {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ====== FIX FINAL MÓVIL HERO + MÉTRICAS + PHONE CARD ====== */
.race-metric-dots {
  display: none;
}

@media (max-width: 760px) {
  .race-landing,
  .race-hero,
  .race-hero-copy,
  .race-app-showcase,
  .race-phone-card {
    box-sizing: border-box;
  }

  .race-hero {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 12px 26px !important;
    gap: 20px !important;
    align-items: start !important;
    overflow: hidden !important;
  }

  .race-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .race-hero-copy .hero-video-title {
    width: 100% !important;
    max-width: 420px !important;
    margin: 14px auto 10px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .race-hero-copy .hero-video-title::before {
    display: none !important;
  }

  .race-hero-copy .hero-video-title .hero-video-desktop {
    display: none !important;
  }

  .race-hero-copy .hero-video-title .hero-image-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .race-hero-copy .race-metric-strip[data-race-metric-slider] {
    display: flex !important;
    grid-template-columns: none !important;
    width: min(100%, 370px) !important;
    max-width: 370px !important;
    min-width: 0 !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  .race-hero-copy .race-metric-strip[data-race-metric-slider]::-webkit-scrollbar {
    display: none;
  }

  .race-hero-copy .race-metric-strip[data-race-metric-slider] > article[data-race-metric-slide] {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 126px !important;
    margin: 0 !important;
    padding: 24px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .race-hero-copy .race-metric-strip[data-race-metric-slider] > article[data-race-metric-slide] span {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(42px, 12.5vw, 58px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.035em !important;
  }

  .race-hero-copy .race-metric-strip[data-race-metric-slider] > article[data-race-metric-slide] small {
    width: 100% !important;
    display: block !important;
    margin: 12px 0 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  .race-metric-dots[data-race-metric-dots] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 9px auto 0 !important;
  }

  .race-metric-dots[data-race-metric-dots] button {
    appearance: none;
    -webkit-appearance: none;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(37, 99, 235, 0.24) !important;
    cursor: pointer;
    transition:
      width 0.22s ease,
      background 0.22s ease,
      transform 0.22s ease;
  }

  .race-metric-dots[data-race-metric-dots] button.is-active {
    width: 28px !important;
    background: linear-gradient(90deg, #003399, #00afef) !important;
    transform: scale(1.02);
  }

  .race-app-showcase {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .race-phone-card {
    width: min(100%, 370px) !important;
    max-width: 370px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border-radius: 32px !important;
  }

  .phone-hero-slide {
    min-height: 178px !important;
    padding: 20px !important;
    border-radius: 26px !important;
  }

  .phone-hero-slide strong {
    max-width: 100% !important;
    font-size: 36px !important;
  }

  .phone-countdown {
    gap: 8px !important;
  }

  .phone-countdown div {
    padding: 12px 4px !important;
    border-radius: 18px !important;
  }

  .phone-countdown strong {
    font-size: 22px !important;
  }

  .phone-list {
    width: 100% !important;
    gap: 9px !important;
  }

  .phone-list > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
    border-radius: 18px !important;
  }

  .phone-list p {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .phone-list strong {
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  .phone-list small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .flat-dot {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 761px) {
  .race-metric-dots[data-race-metric-dots] {
    display: none !important;
  }
}
/* ====== FIN FIX FINAL MÓVIL HERO + MÉTRICAS + PHONE CARD ====== */

/* ====== TIRAS DIAGONALES FARMANORTE RUN 2026 ====== */
.race-landing {
  position: relative;
  overflow: hidden;
}

.race-nav,
.race-landing main,
.race-footer {
  position: relative;
  z-index: 3;
}

.race-run-tape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 800px;
  height: 88px;
  overflow: hidden;
  background: #003399;
  box-shadow: 0 24px 54px rgba(0, 51, 153, 0.20);
  transform: rotate(-48deg);
  transform-origin: center;
}

.race-run-tape::before,
.race-run-tape::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.race-run-tape::before {
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      transparent 24%,
      transparent 76%,
      rgba(0, 0, 0, 0.10)
    );
}

.race-run-tape::after {
  inset: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.race-run-tape-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../img/logrun2026.png");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 150px auto;
  animation: raceRunTapeLoop 15s linear infinite;
  will-change: background-position;
}

/* Izquierda: un poco despegada de la esquina */
.race-run-tape-left {
  left: -380px;
  top: 150px;
}

/* Derecha: baja hasta quedar detrás del marquee, sin pasarse para no mostrar puntas */
.race-run-tape-right {
  right: -390px;
  top: 760px;
}

.race-run-tape-right .race-run-tape-track {
  animation-direction: reverse;
  animation-duration: 17s;
}

@keyframes raceRunTapeLoop {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 520px center;
  }
}

@media (min-width: 1440px) {
  .race-run-tape {
    width: 920px;
    height: 96px;
  }

  .race-run-tape-track {
    background-size: 164px auto;
  }

  .race-run-tape-left {
    left: -440px;
    top: 154px;
  }

  .race-run-tape-right {
    right: -448px;
    top: 800px;
  }
}

@media (max-width: 1180px) {
  .race-run-tape-left {
    left: -395px;
    top: 140px;
  }

  .race-run-tape-right {
    right: -405px;
    top: 720px;
  }
}

@media (max-width: 1024px) {
  .race-run-tape {
    width: 680px;
    height: 74px;
  }

  .race-run-tape-track {
    background-size: 124px auto;
  }

  .race-run-tape-left {
    left: -330px;
    top: 132px;
  }

  .race-run-tape-right {
    right: -342px;
    top: 658px;
  }
}

@media (max-width: 760px) {
  .race-run-tape {
    width: 460px;
    height: 54px;
    opacity: 0.92;
    box-shadow: 0 18px 38px rgba(0, 51, 153, 0.16);
  }

  .race-run-tape::after {
    inset: 5px 0;
  }

  .race-run-tape-track {
    background-size: 86px auto;
    animation-duration: 13s;
  }

  .race-run-tape-left {
    left: -250px;
    top: 106px;
  }

  .race-run-tape-right {
    right: -264px;
    top: 540px;
  }
}

@media (max-width: 420px) {
  .race-run-tape {
    width: 420px;
    height: 50px;
  }

  .race-run-tape-track {
    background-size: 80px auto;
  }

  .race-run-tape-left {
    left: -238px;
    top: 102px;
  }

  .race-run-tape-right {
    right: -248px;
    top: 516px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-run-tape-track {
    animation: none;
  }
}
/* ====== FIN TIRAS DIAGONALES FARMANORTE RUN 2026 ====== */

/* ====== FIX REAL MENÚ MÓVIL FIJO + PRIORIDAD ====== */
@media (max-width: 760px) {
  .race-nav {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 20px), 1180px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 !important;
    padding: 10px 10px 0 !important;
    z-index: 1000 !important;
    isolation: isolate !important;
  }

  .race-nav::before {
    z-index: -1 !important;
  }

  .race-landing main {
    padding-top: 0 !important;
  }

  .race-hero {
    padding-top: 58px !important;
  }

  .race-brand,
  .race-menu-toggle {
    position: relative !important;
    z-index: 1001 !important;
  }

  .race-menu-toggle {
    display: grid !important;
    align-self: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    pointer-events: auto !important;
  }

  .race-mobile-menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    right: 10px !important;
    width: min(280px, calc(100vw - 20px)) !important;
    z-index: 1010 !important;
  }

  .race-nav-links,
  .race-nav-cta {
    display: none !important;
  }

  .race-run-tape,
  .race-hero,
  .race-hero-copy,
  .race-app-showcase,
  .race-deadline-marquee {
    position: relative;
    z-index: auto;
  }
}
/* ====== FIN FIX REAL MENÚ MÓVIL FIJO + PRIORIDAD ====== */


/* ====== FIX MENÚ MÓVIL FIJO SIN HUECO EXTRA ====== */
@media (max-width: 760px) {
  .race-landing main {
    padding-top: 0 !important;
  }

  .race-hero {
    padding-top: 58px !important;
  }
}
/* ====== FIN FIX MENÚ MÓVIL FIJO SIN HUECO EXTRA ====== */

 
            .race-legal-fullwidth {
                width: 100vw;
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
                padding: 18px clamp(16px, 4vw, 56px) 28px;
                background: rgba(2, 6, 23, .04);
                border-top: 1px solid rgba(15, 23, 42, .08);
            }

            .race-legal-fullwidth p {
                width: min(1280px, 100%);
                margin: 0 auto;
                color: rgba(15, 23, 42, .58);
                font-size: 11px;
                line-height: 1.65;
                font-weight: 500;
                text-align: justify;
            }

            @media (max-width: 640px) {
                .race-legal-fullwidth {
                    padding: 16px 16px 24px;
                }

                .race-legal-fullwidth p {
                    font-size: 10px;
                    line-height: 1.55;
                    text-align: left;
                }
            }
        

            .race-legal-link {
                appearance: none;
                -webkit-appearance: none;
                display: inline;
                margin-left: 4px;
                padding: 0;
                border: 0;
                background: transparent;
                color: #003399;
                font: inherit;
                font-size: inherit;
                font-weight: 800;
                line-height: inherit;
                text-decoration: underline;
                text-underline-offset: 3px;
                cursor: pointer;
            }

            .race-legal-link:hover {
                color: #00afef;
            }

            .race-terms-lock {
                overflow: hidden;
            }

            .race-terms-modal {
                position: fixed;
                inset: 0;
                z-index: 99999;
                display: none;
                background: rgba(2, 6, 23, .72);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }

            .race-terms-modal.is-open {
                display: block;
            }

            .race-terms-dialog {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background:
                    radial-gradient(circle at 14% 0%, rgba(0, 175, 239, .10), transparent 32%),
                    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            }

            .race-terms-header {
                min-height: 78px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
                padding: 18px clamp(18px, 4vw, 52px);
                border-bottom: 1px solid rgba(15, 23, 42, .10);
                background: rgba(255, 255, 255, .88);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
            }

            .race-terms-header small,
            .race-terms-header strong {
                display: block;
            }

            .race-terms-header small {
                color: #00afef;
                font-size: 11px;
                font-weight: 900;
                letter-spacing: .14em;
                text-transform: uppercase;
            }

            .race-terms-header strong {
                margin-top: 4px;
                color: #0f172a;
                font-size: clamp(20px, 3vw, 34px);
                line-height: 1;
            }

            .race-terms-close {
                width: 46px;
                height: 46px;
                flex: 0 0 46px;
                display: grid;
                place-items: center;
                border: 0;
                border-radius: 999px;
                color: #0f172a;
                background: #ffffff;
                box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
                font-size: 28px;
                line-height: 1;
                cursor: pointer;
            }

            .race-terms-content {
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: clamp(22px, 4vw, 46px) clamp(16px, 4vw, 56px) 60px;
            }

            .race-terms-article {
                width: min(980px, 100%);
                margin: 0 auto;
                color: #334155;
            }

            .race-terms-article h2 {
                margin: 0 0 18px;
                color: #003399;
                font-size: clamp(28px, 5vw, 54px);
                line-height: .95;
                letter-spacing: -.03em;
                text-transform: uppercase;
            }

            .race-terms-article h3 {
                margin: 30px 0 10px;
                color: #0f172a;
                font-size: 18px;
                line-height: 1.25;
            }

            .race-terms-article p {
                margin: 0 0 13px;
                color: #475569;
                font-size: 14px;
                line-height: 1.72;
            }

            .race-terms-article strong {
                color: #0f172a;
            }

            @media (max-width: 640px) {
                .race-terms-header {
                    min-height: 68px;
                    padding: 14px 16px;
                }

                .race-terms-close {
                    width: 42px;
                    height: 42px;
                    flex-basis: 42px;
                }

                .race-terms-content {
                    padding: 20px 16px 44px;
                }

                .race-terms-article p {
                    font-size: 13px;
                    line-height: 1.65;
                }
            }
        

  
            .race-allied-brands {
                position: relative;
                overflow: hidden;
                padding-block: clamp(42px, 6vw, 76px);
            }

            .race-allied-brands-head {
                width: min(1120px, calc(100% - 32px));
                margin: 0 auto 26px;
                text-align: center;
            }

            .race-allied-brands-head h2 {
                margin: 10px 0 0;
            }

            .race-allied-brands-slider {
                width: 100%;
                overflow: hidden;
                -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            }

            .race-allied-brands-track {
                display: flex;
                align-items: center;
                gap: 22px;
                width: max-content;
                animation: alliedBrandsSlide 34s linear infinite;
                will-change: transform;
            }

            .race-allied-brands-slider:hover .race-allied-brands-track {
                animation-play-state: paused;
            }

            .race-brand-logo-card {
                width: 200px;
                height: 200px;
                flex: 0 0 200px;
                display: grid;
                place-items: center;
                border-radius: 34px;
                
               
            }

            .race-brand-logo-placeholder {
                width: 128px;
                height: 128px;
                display: grid;
                place-items: center;
                border-radius: 30px;
                color: #003399;
                background:
                    radial-gradient(circle at 30% 24%, rgba(0, 175, 239, .20), transparent 36%),
                    linear-gradient(145deg, #ffffff, #eaf3ff);
                border: 1px solid rgba(0, 51, 153, .12);
                font-size: 18px;
                font-weight: 1000;
                letter-spacing: .08em;
                text-transform: uppercase;
            }

            @keyframes alliedBrandsSlide {
                from { transform: translateX(0); }
                to { transform: translateX(calc(-50% - 11px)); }
            }

            @media (max-width: 640px) {
                .race-allied-brands {
                    padding-block: 38px 58px;
                }

                .race-allied-brands-track {
                    gap: 16px;
                    animation-duration: 28s;
                }

                .race-brand-logo-card {
                    width: 200px;
                    height: 200px;
                    flex-basis: 200px;
                    border-radius: 30px;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .race-allied-brands-track {
                    animation: none;
                    overflow-x: auto;
                    max-width: 100vw;
                    padding-inline: 16px;
                }
            }
            
            .race-brand-logo-img {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
        

            .race-route-details-dropdown {
                width: min(1180px, calc(100% - 28px));
                margin: 18px auto 0;
            }

            .race-route-details-dropdown details {
                overflow: hidden;
                border-radius: 28px;
                background: rgba(255, 255, 255, .84);
                border: 1px solid rgba(15, 23, 42, .08);
                box-shadow: 0 18px 54px rgba(15, 23, 42, .08);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
            }

            .race-route-details-dropdown summary {
                min-height: 78px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
                padding: 20px clamp(20px, 3vw, 34px);
                color: #062044;
                cursor: pointer;
                list-style: none;
                font-size: clamp(28px, 4vw, 46px);
                line-height: .9;
                text-transform: uppercase;
                user-select: none;
            }

            .race-route-details-dropdown summary::-webkit-details-marker {
                display: none;
            }

            .race-route-details-dropdown summary span {
                display: inline-flex;
                align-items: center;
                gap: 12px;
            }

            .race-route-details-dropdown summary span::before {
                content: "";
                width: 10px;
                height: 10px;
                flex: 0 0 10px;
                border-radius: 999px;
                background: #84cc16;
                box-shadow: 0 0 0 8px rgba(132, 204, 22, .14);
            }

            .race-route-details-arrow {
                width: 56px;
                height: 56px;
                flex: 0 0 56px;
                display: grid;
                place-items: center;
                border-radius: 999px;
                color: #ffffff;
                background: linear-gradient(135deg, #003399, #00afef);
                box-shadow: 0 16px 34px rgba(37, 99, 235, .22);
                position: relative;
                font-style: normal;
                font-size: 0;
                line-height: 1;
                transition: transform .24s ease;
            }

            .race-route-details-arrow::before {
                content: "";
                width: 14px;
                height: 14px;
                border-right: 4px solid #ffffff;
                border-bottom: 4px solid #ffffff;
                transform: translateY(-3px) rotate(45deg);
                border-radius: 2px;
            }

            .race-route-details-dropdown details[open] .race-route-details-arrow {
                transform: rotate(180deg);
            }

            .race-route-details-body {
                padding: 0 clamp(16px, 3vw, 34px) clamp(20px, 3vw, 34px);
            }

            .race-route-details-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
            }

            .race-route-reference-card {
                position: relative;
                overflow: hidden;
                padding: clamp(18px, 2.5vw, 26px);
                border-radius: 24px;
                background: linear-gradient(180deg, #ffffff, #f8fbff);
                border: 1px solid rgba(15, 23, 42, .08);
            }

          

            .race-route-reference-card.is-10k {
                --route-ref-accent: rgba(250, 204, 21, .28);
            }

            .race-route-reference-card.is-5k {
                --route-ref-accent: rgba(56, 189, 248, .26);
            }

            .race-route-reference-head {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                margin-bottom: 18px;
            }

            .race-route-reference-head strong {
                color: #0f172a;
                font-size: 24px;
                font-weight: 1000;
                line-height: 1;
            }

            .race-route-reference-head small {
                flex: 0 0 auto;
                padding: 8px 11px;
                border-radius: 999px;
                color: #0f172a;
                background: #f8fafc;
                border: 1px solid rgba(15, 23, 42, .08);
                font-size: 11px;
                font-weight: 1000;
                letter-spacing: .08em;
                text-transform: uppercase;
            }

            .race-route-reference-list {
                position: relative;
                z-index: 1;
                display: grid;
                gap: 10px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .race-route-reference-list li {
                display: grid;
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 10px;
                align-items: start;
                color: #475569;
                font-size: 14px;
                line-height: 1.45;
                font-weight: 750;
            }

            .race-route-reference-list b {
                width: 34px;
                height: 34px;
                display: grid;
                place-items: center;
                border-radius: 20px;
                color: #003399;
                background: #eff6ff;
                font-size: 12px;
                font-weight: 1000;
            }

            .race-route-reference-card.is-10k .race-route-reference-list b {
                color: #854d0e;
                background: #fef3c7;
            }

            .race-route-reference-card.is-5k .race-route-reference-list b {
                color: #0369a1;
                background: #e0f2fe;
            }

            @media (max-width: 760px) {
                .race-route-details-dropdown {
                    width: min(100% - 24px, 1180px);
                    margin-top: 14px;
                }

                .race-route-details-dropdown summary {
                    min-height: 68px;
                    padding: 17px 18px;
                    font-size: 30px;
                    align-items: center;
                }

                .race-route-details-arrow {
                    width: 48px;
                    height: 48px;
                    flex-basis: 48px;
                }

                .race-route-details-arrow::before {
                    width: 12px;
                    height: 12px;
                    border-width: 3px;
                }

                .race-route-details-grid {
                    grid-template-columns: 1fr;
                }

                .race-route-reference-head {
                    align-items: flex-start;
                    flex-direction: column;
                }

                .race-route-reference-list li {
                    font-size: 13px;
                }
            }
        


            .race-map-official-head {
                width: min(1180px, calc(100% - 28px));
                margin: 0 auto 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
            }

            .race-map-official-head h2 {
                margin: 0;
                color: #062044;
                font-size: clamp(38px, 5vw, 74px);
                line-height: .88;
                text-transform: uppercase;
            }

            .race-route-map-labels {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-wrap: wrap;
                gap: 10px;
            }

            .race-route-map-label {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                min-height: 42px;
                padding: 0 15px;
                border-radius: 999px;
                background: rgba(255, 255, 255, .82);
                border: 1px solid rgba(15, 23, 42, .08);
                color: #0f172a;
                font-size: 12px;
                font-weight: 1000;
                letter-spacing: .08em;
                text-transform: uppercase;
                box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

            .race-route-map-dot {
                position: relative;
                width: 13px;
                height: 13px;
                flex: 0 0 13px;
                border-radius: 999px;
                animation: routeDotFade 1.45s ease-in-out infinite;
            }

            .race-route-map-dot::after {
                content: "";
                position: absolute;
                inset: -8px;
                border-radius: inherit;
                opacity: .35;
                animation: routeDotHalo 1.45s ease-in-out infinite;
            }

            .race-route-map-label.is-10k .race-route-map-dot,
            .race-route-map-label.is-10k .race-route-map-dot::after {
                background: #facc15;
            }

            .race-route-map-label.is-5k .race-route-map-dot,
            .race-route-map-label.is-5k .race-route-map-dot::after {
                background: #38bdf8;
            }

            @keyframes routeDotFade {
                0%, 100% {
                    opacity: .48;
                    transform: scale(.86);
                }
                50% {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            @keyframes routeDotHalo {
                0%, 100% {
                    opacity: .12;
                    transform: scale(.7);
                }
                50% {
                    opacity: .34;
                    transform: scale(1.1);
                }
            }

            @media (max-width: 760px) {
                .race-map-official-head {
                    align-items: flex-start;
                    flex-direction: column;
                    margin-bottom: 14px;
                }

                .race-route-map-labels {
                    width: 100%;
                    justify-content: flex-start;
                }

                .race-route-map-label {
                    min-height: 38px;
                    padding-inline: 13px;
                    font-size: 11px;
                }
            }
        

        
            .prize-extra-conditions-trigger {
                appearance: none;
                -webkit-appearance: none;
                display: inline;
                min-height: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                color: #ffffff;
                background: transparent;
                box-shadow: none;
                font: inherit;
                font-size: 13px;
                font-weight: 900;
                letter-spacing: .04em;
                text-transform: uppercase;
                text-decoration: underline;
                text-decoration-thickness: 1px;
                text-underline-offset: 4px;
                cursor: pointer;
            }

            .prize-extra-conditions-trigger:hover {
                color: #41cafd;
                background: transparent;
                box-shadow: none;
            }

            .race-extra-prizes-lock {
                overflow: hidden;
            }

            .race-extra-prizes-modal {
                position: fixed;
                inset: 0;
                z-index: 100000;
                display: none;
                width: 100vw;
                height: 100vh;
                background: rgba(2, 6, 23, .76);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

            .race-extra-prizes-modal.is-open {
                display: block;
            }

            .race-extra-prizes-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 8% 8%, rgb(246 137 255 / 28%), transparent 30%), radial-gradient(circle at 90% 4%, rgba(56, 189, 248, .20), transparent 34%), radial-gradient(circle at 50% 105%, rgba(168, 85, 247, .18), transparent 36%), linear-gradient(135deg, #1d004b 0%, #15126f 46%, #290453 100%);
}

            .race-extra-prizes-dialog::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: .28;
                background-image:
                    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
                background-size: 44px 44px;
                mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
                -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
            }

            .race-extra-prizes-header {
                position: relative;
                z-index: 2;
                min-height: 82px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px;
                padding: 20px clamp(18px, 4vw, 56px);
                border-bottom: 1px solid rgba(255, 255, 255, .10);
                background: rgba(3, 7, 18, .56);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
            }

            .race-extra-prizes-header small,
            .race-extra-prizes-header strong {
                display: block;
            }

            .race-extra-prizes-header small {
                color: #facc15;
                font-size: 11px;
                font-weight: 950;
                letter-spacing: .18em;
                text-transform: uppercase;
            }

            .race-extra-prizes-header strong {
                margin-top: 5px;
                color: #ffffff;
                font-size: clamp(22px, 3vw, 36px);
                line-height: .92;
                text-transform: uppercase;
            }

            .race-extra-prizes-close {
                width: 48px;
                height: 48px;
                flex: 0 0 48px;
                display: grid;
                place-items: center;
                border: 1px solid rgba(255, 255, 255, .16);
                border-radius: 999px;
                color: #ffffff;
                background: rgba(255, 255, 255, .10);
                box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
                font-size: 30px;
                line-height: 1;
                cursor: pointer;
                transition: transform .18s ease, background .18s ease;
            }

            .race-extra-prizes-close:hover {
                transform: rotate(90deg);
                background: rgba(255, 255, 255, .17);
            }

            .race-extra-prizes-content {
                position: relative;
                z-index: 1;
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                padding: clamp(24px, 5vw, 62px) clamp(16px, 5vw, 72px) 70px;
            }

            .race-extra-prizes-article {
                width: min(1180px, 100%);
                margin: 0 auto;
            }

            .race-extra-prizes-hero {
                display: grid;
                grid-template-columns: minmax(0, .95fr) minmax(320px, .72fr);
                gap: clamp(22px, 5vw, 64px);
                align-items: end;
                margin-bottom: clamp(24px, 4vw, 42px);
            }

            .race-extra-prizes-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                width: fit-content;
                min-height: 36px;
                padding: 0 13px;
                border: 1px solid rgba(250, 204, 21, .34);
                border-radius: 999px;
                color: #fde68a;
                background: rgba(250, 204, 21, .08);
                font-size: 11px;
                font-weight: 950;
                letter-spacing: .16em;
                text-transform: uppercase;
            }

            .race-extra-prizes-eyebrow::before {
                content: "";
                width: 9px;
                height: 9px;
                border-radius: 999px;
                background: #facc15;
                box-shadow: 0 0 0 7px rgba(250, 204, 21, .13);
            }

            .race-extra-prizes-article h2 {
                max-width: 760px;
                margin: 18px 0 0;
                color: #ffffff;
                font-size: clamp(58px, 10vw, 122px);
                line-height: .75;
                letter-spacing: -.055em;
                text-transform: uppercase;
            }

            .race-extra-prizes-article h2 em {
                display: block;
                color: #facc15;
                font-style: normal;
            }

            .race-extra-prizes-intro-panel {
                position: relative;
                overflow: hidden;
                padding: clamp(20px, 3vw, 30px);
                border-radius: 32px;
                background:
                    linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
                border: 1px solid rgba(255, 255, 255, .14);
                box-shadow: 0 28px 70px rgba(0, 0, 0, .24);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
            }

            .race-extra-prizes-intro-panel::after {
                content: "3";
                position: absolute;
                right: -16px;
                bottom: -38px;
                color: rgba(255, 255, 255, .05);
                font-family: "Barlow Condensed", Impact, sans-serif;
                font-size: 180px;
                font-weight: 900;
                line-height: 1;
            }

            .race-extra-prizes-intro-panel p {
                position: relative;
                z-index: 1;
                margin: 0;
                color: rgba(255, 255, 255, .78);
                font-size: clamp(15px, 1.6vw, 18px);
                line-height: 1.75;
                font-weight: 650;
            }

            .race-extra-prizes-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 18px;
            }

            .race-extra-prizes-card {
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                min-height: 360px;
                padding: clamp(22px, 3vw, 32px);
                border-radius: 34px;
                background:
                    radial-gradient(circle at 20% 0%, var(--extra-glow, rgba(250, 204, 21, .18)), transparent 36%),
                    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
                border: 1px solid rgba(255, 255, 255, .14);
                box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
            }

            .race-extra-prizes-card:nth-child(2) {
                --extra-glow: rgba(56, 189, 248, .19);
            }

            .race-extra-prizes-card:nth-child(3) {
                --extra-glow: rgba(168, 85, 247, .20);
            }

            .race-extra-prizes-card::before {
                content: attr(data-number);
                position: absolute;
                right: 22px;
                top: 18px;
                color: rgba(255, 255, 255, .06);
                font-family: "Barlow Condensed", Impact, sans-serif;
                font-size: 104px;
                font-weight: 900;
                line-height: .8;
            }

            .race-extra-prizes-icon {
                position: relative;
                z-index: 1;
                width: 58px;
                height: 58px;
                display: grid;
                place-items: center;
                border-radius: 22px;
                color: #111827;
                background: linear-gradient(135deg, #fde68a 0%, #facc15 50%, #d97706 100%);
                box-shadow: 0 18px 36px rgba(234, 179, 8, .23);
            }

            .race-extra-prizes-icon svg {
                width: 28px;
                height: 28px;
            }

            .race-extra-prizes-card h3 {
                position: relative;
                z-index: 1;
                margin: 28px 0 0;
                color: #ffffff;
                font-size: clamp(28px, 3vw, 38px);
                line-height: .9;
                letter-spacing: -.02em;
                text-transform: uppercase;
            }

            .race-extra-prizes-card p {
                position: relative;
                z-index: 1;
                margin: 18px 0 0;
                color: rgba(255, 255, 255, .72);
                font-size: 14px;
                line-height: 1.72;
            }

            .race-extra-prizes-card b {
                position: relative;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                width: fit-content;
                margin-top: auto;
                padding: 13px 15px;
                border-radius: 999px;
                color: #111827;
                background: #facc15;
                box-shadow: 0 16px 36px rgba(250, 204, 21, .22);
                font-size: 18px;
                line-height: 1;
            }

            @media (max-width: 980px) {
                .race-extra-prizes-hero {
                    grid-template-columns: 1fr;
                    align-items: start;
                }

                .race-extra-prizes-grid {
                    grid-template-columns: 1fr;
                }

                .race-extra-prizes-card {
                    min-height: auto;
                }
            }

            @media (max-width: 640px) {
                .prize-extra-conditions-trigger {
                    width: auto;
                    min-height: 0;
                    padding: 0;
                    font-size: 11px;
                    line-height: 1.4;
                    text-align: center;
                }

                .race-extra-prizes-header {
                    min-height: 68px;
                    padding: 14px 16px;
                }

                .race-extra-prizes-close {
                    width: 42px;
                    height: 42px;
                    flex-basis: 42px;
                }

                .race-extra-prizes-content {
                    padding: 24px 16px 48px;
                }

                .race-extra-prizes-article h2 {
                    font-size: clamp(54px, 18vw, 84px);
                }

                .race-extra-prizes-intro-panel {
                    border-radius: 26px;
                }

                .race-extra-prizes-card {
                    border-radius: 28px;
                }

                .race-extra-prizes-card p {
                    font-size: 13px;
                    line-height: 1.65;
                }
            }
        
        
        
        .race-predict-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 14px 0 8px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d055f 0%, #a443b3 55%, #040099 100%) !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    box-shadow: 0 14px 34px rgb(225 151 247 / 28%);
    font-weight: 1000 !important;
    letter-spacing: .01em;
}

        .race-predict-nav-button:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0f47a5 0%, #0aa5d5 55%, #0e3ecb 100%) !important;
    transform: translateY(-1px);
}

        .race-predict-star {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            color: #7c2d12;
            background: linear-gradient(135deg, #fde68a 0%, #facc15 48%, #d97706 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 8px 18px rgba(234, 179, 8, .34);
        }

        .race-predict-star svg {
            width: 17px;
            height: 17px;
            display: block;
            fill: currentColor;
        }

        .race-mobile-menu .race-predict-nav-button {
            justify-content: flex-start;
            width: 100%;
            padding: 9px 14px 9px 9px !important;
        }

/* ====== APROBACIÓN CRÉDITO FARMANORTE EMPLEADOS ====== */
.employee-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.action-approve-credit {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.action-approve-credit:hover {
  background: #bbf7d0;
}

.action-approve-credit[x-cloak],
.action-approve-credit[style*="display: none"] {
  display: none !important;
}
/* ====== FIN APROBACIÓN CRÉDITO FARMANORTE EMPLEADOS ====== */

/* ====== AJUSTE TABLA EMPLEADOS COMPACTA ====== */
.employees-flat-table {
  min-width: 1040px !important;
}

.employees-flat-table th,
.employees-flat-table td {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.employees-flat-table .cell-actions {
  width: 86px;
  min-width: 86px;
  text-align: right;
}

.employee-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.employee-action-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  line-height: 1;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

.employee-action-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.employee-action-btn:hover {
  transform: translateY(-1px);
}

.employee-action-approve {
  color: #166534;
  background: #dcfce7;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.20);
}

.employee-action-approve:hover {
  background: #bbf7d0;
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0.28),
    0 10px 22px rgba(22, 163, 74, 0.14);
}

.employee-action-delete {
  color: #b91c1c;
  background: #fee2e2;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.16);
}

.employee-action-delete:hover {
  background: #fecaca;
  box-shadow:
    inset 0 0 0 1px rgba(220, 38, 38, 0.24),
    0 10px 22px rgba(220, 38, 38, 0.12);
}

.employee-action-btn[x-cloak],
.employee-action-btn[style*="display: none"] {
  display: none !important;
}

@media (max-width: 760px) {
  .employees-flat-table {
    min-width: 940px !important;
  }

  .employees-flat-table th,
  .employees-flat-table td {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* ====== FIN AJUSTE TABLA EMPLEADOS COMPACTA ====== */




/* ======  BOTÓN APROBANDO CRÉDITO ====== */
.employee-action-btn:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none !important;
  box-shadow: none !important;
}
/* ====== FIN BOTÓN APROBANDO CRÉDITO ====== */


/* ====== KIT RUNNER SLIDER MÓVIL ====== */
@media (max-width: 760px) {
  .race-kit-fullwidth-purple .kit-strip-items {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .race-kit-fullwidth-purple .kit-strip-items::-webkit-scrollbar {
    display: none;
  }

  .race-kit-fullwidth-purple .kit-strip-item {
    flex: 0 0 86% !important;
    width: 86% !important;
    min-width: 86% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .race-kit-fullwidth-purple .kit-strip-item:first-child {
    margin-left: 0;
  }

  .race-kit-fullwidth-purple .kit-strip-item:last-child {
    margin-right: 0;
  }
}
/* ====== FIN KIT RUNNER SLIDER MÓVIL ====== */


/* =========================================================
   FIX DEFINITIVO: MODALES SOBRE TODA LA LANDING EN MÓVIL
   - El menú móvil tenía z-index 2147483000.
   - <main> crea un stacking context propio.
   - Las modales se teletransportan/mueven a <body> desde landing.php.
   ========================================================= */

html.race-modal-lock,
body.race-modal-lock,
body.race-terms-lock,
body.race-extra-prizes-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.race-modal,
.race-terms-modal,
.race-extra-prizes-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  isolation: isolate;
  overscroll-behavior: contain;
}

.race-modal {
  z-index: 10000 !important;
}

.race-terms-modal {
  z-index: 10010 !important;
}

.race-extra-prizes-modal {
  z-index: 10020 !important;
}

.race-modal-header button,
.race-terms-close,
.race-extra-prizes-close {
  position: relative;
  z-index: 20;
  pointer-events: auto !important;
  touch-action: manipulation;
}

@media (max-width: 760px) {
  .race-nav {
    z-index: 1000 !important;
  }

  .race-brand,
  .race-menu-toggle {
    z-index: 1001 !important;
  }

  .race-mobile-menu {
    z-index: 1010 !important;
  }

  .race-modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .race-modal-card {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  .race-terms-dialog,
  .race-extra-prizes-dialog {
    height: 100vh !important;
    height: 100dvh !important;
  }
}