:root {
  --bg: #0b0b0b;
  --ink: #f1f1f1;
  --muted: #a3a3a3;
  --line: rgba(255,255,255,.14);
  --sand: #1a1a1a;
  --acc: #f1f1f1;
  --acc2: #f1f1f1;
  --gris: #d9d9d9;
  --display: "Bungee", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --serif: "Bungee", system-ui, sans-serif;
  --r: 0px;
  --r-sm: 0px;
}
body { background: var(--bg) !important; color: var(--ink); }
.mesh { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: 1; }
em, i { font-family: inherit; font-style: normal; color: inherit; }
.label, .lead, .note { color: var(--muted); }
.bn { filter: grayscale(1) contrast(1.08); }

.glass, .glass.pc, .glass.coach, .glass.det, .glass.bloque, .glass.so, .glass.tourl, .legal-in { background: #141414 !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.top { padding: 0; background: #0b0b0b !important; border-bottom: 1px solid var(--line) !important; }
.top .wrap { border-radius: 0; height: 60px; padding: 0 var(--g); background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: 1180px; }
.brand { font: 400 17px/1 var(--display); color: var(--ink); text-transform: uppercase; }
.brand b { color: var(--ink); font-weight: 400; }
.top .nav-d a { font: 400 11px var(--display); text-transform: uppercase; color: #cfcfcf; border-radius: 0; padding: 8px 10px; }
.top .nav-d a:hover, .top .nav-d a[aria-current] { background: none; color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.menu-b { background: none; border-radius: 0; width: 44px; }
.menu-b i { background: #fff; width: 24px; height: 2px; }
.menu { background: #111 !important; border: 1px solid var(--line) !important; border-radius: 0 !important; left: 0; right: 0; top: 60px; padding: 8px var(--g) 18px; }
.menu-velo { background: rgba(0,0,0,.6); }
.menu nav a { font: 400 22px var(--display); text-transform: uppercase; color: #fff; border-radius: 0; border-bottom: 1px solid var(--line); padding: 18px 2px; }
.menu nav a b { background: none; color: #fff; }
.menu nav a[aria-current] { background: none; text-decoration: underline; text-underline-offset: 6px; }
.menu nav a[aria-current] b { background: #fff; color: #000; border-radius: 0; }
.menu-pie { border-color: var(--line); }

.lang { background: #1c1c1c; border-radius: 0; }
.lang button { border-radius: 0; color: #9a9a9a; }
.lang button[aria-pressed="true"] { background: #fff; color: #000; box-shadow: none; }

.btn { border-radius: 0; background: #f1f1f1; color: #0b0b0b; border: 2px solid #f1f1f1; box-shadow: none; font: 400 13px var(--display); text-transform: uppercase; letter-spacing: .02em; height: 50px; }
.btn.acc { background: #f1f1f1; color: #0b0b0b; box-shadow: none; }
.btn.ghost, .btn.out { background: transparent; color: #f1f1f1; border-color: #f1f1f1; }
.btn.negro { background: #0b0b0b; color: #f1f1f1; border-color: #0b0b0b; }
.btn.sm { height: 40px; font-size: 11.5px; }
.btn.wa, .btn.ok { background: #f1f1f1 !important; color: #0b0b0b !important; }
.btn.no { background: transparent !important; color: #f1f1f1 !important; border-color: #555 !important; }
.ul { color: #fff; text-decoration-color: #fff; font: 400 12px var(--display); text-transform: uppercase; }
.chip { border-radius: 0; background: #222; color: #ddd; }
.chip.acc { background: #f1f1f1; color: #0b0b0b; }
.precio { font-family: var(--display); font-weight: 400; color: #fff; }

.field span { color: #ddd; }
.field input, .field select, .field textarea { background: #1a1a1a; border-color: #333; border-radius: 0; color: #fff; }
.sheet { background: #121212; color: #f1f1f1; border-radius: 0; }
.sheet .note, .sheet small { color: #a3a3a3; }
.box, .upload { background: #1b1b1b; border-radius: 0; color: #ddd; }
.copy, .x { background: #262626; color: #fff; border-radius: 0; }
.opt { background: #1b1b1b; border-color: #333; }
.stepper i { border-radius: 0; background: #2a2a2a; }
.stepper i.on, .prog i { background: #f1f1f1; }
.prog { background: #262626; border-radius: 0; }
.prog i { border-radius: 0; }
.op { background: #1b1b1b; color: #f1f1f1; border-radius: 0; border: 1.5px solid #2a2a2a; }
.op::after { border-color: #666; }
.op[aria-pressed="true"] { border-color: #f1f1f1; background: #222; }
.op[aria-pressed="true"]::after { background: #f1f1f1; border-color: #f1f1f1; box-shadow: inset 0 0 0 4px #222; }
.acepto a, .note a, .legal a, .salud a { color: #fff; }
.done .ic { background: #f1f1f1; color: #000; box-shadow: none; }
.toast { background: #f1f1f1; color: #000; border-radius: 0; }
.badge { border-radius: 0; }
.lista li { background: #1b1b1b; border-radius: 0; }
.lista li i { background: #f1f1f1; color: #000; border-radius: 0; }
.muestra { background: #1b1b1b; border-radius: 0; }
.muestra .e, .muestra .d { border-color: #2a2a2a; }
.pc .ph, .det .ph, .so .ph, .coach .ph { border-radius: 0; }
.pc .ph img, .det .ph img, .so .ph img, .coach .ph img { filter: grayscale(1) contrast(1.08); }
.legal p, .legal li { color: #cfcfcf; }
.legal .datos, .legal .aviso, .form-legal, .legal .nota-en { background: #1b1b1b; border-radius: 0; }
.ok-legal { border-radius: 0; }
.weeks button, .tabs button, .seg button { border-radius: 0 !important; background: #1b1b1b !important; color: #ddd !important; }
.weeks button.on, .tabs button.on, .seg button.on { background: #f1f1f1 !important; color: #000 !important; }
details, .mi, .ped, .dia, .cli, .kpi, .login, .lock, .chart { border-radius: 0 !important; background: #141414 !important; border-color: #2a2a2a !important; color: #f1f1f1; }
.exr input, .dia input.nom { background: #1b1b1b !important; color: #fff; border-color: #333 !important; }
.chart .bar, .hb-t i { fill: #f1f1f1; background: #f1f1f1 !important; }
.barra-compra { border-radius: 0; left: 0; right: 0; bottom: 0; padding-bottom: calc(10px + var(--safe)); background: #141414 !important; }
.lfoot { border-top: 1px solid var(--line); }
.lfoot .marca { font: 400 16px var(--display); text-transform: uppercase; }
.lfoot .marca b { color: #fff; font-weight: 400; }

.fh { position: relative; min-height: min(86svh, 720px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); background: #000; }
.fh > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; filter: grayscale(1) contrast(1.05) brightness(.62); }
.fh .in { position: relative; z-index: 1; padding: 40px var(--g) 70px; max-width: 760px; }
.fh h1 { font-size: clamp(30px, 8.6vw, 64px); line-height: 1.02; color: #fff; }
.fh p { color: #e6e6e6; margin: 16px auto 24px; max-width: 34ch; font-size: 14.5px; }

.fs { padding: 50px 0 70px; text-align: center; }
.fs > .wrap > h2 { font-size: clamp(54px, 17vw, 120px); line-height: .9; margin-bottom: 34px; color: #e8e8e8; }
.fcards { display: grid; gap: 22px; }
@media (min-width: 760px) { .fcards { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.fcard { display: block; text-decoration: none; color: inherit; }
.fcard .ph { aspect-ratio: 4 / 3.3; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.fcard .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: transform .8s var(--soft); }
.fcard:hover .ph img { transform: scale(1.05); }
.fcard .tag { display: block; width: 76%; margin: -22px auto 0; position: relative; background: var(--gris); color: #0b0b0b; font: 400 14px var(--display); text-transform: uppercase; padding: 13px 10px; }
.fcard .mas { display: flex; justify-content: space-between; align-items: center; width: 76%; margin: 18px auto 0; padding-bottom: 8px; border-bottom: 1px solid #555; font: 400 11.5px var(--display); text-transform: uppercase; color: #ddd; }

.fb { background: var(--gris); color: #0b0b0b; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); padding: 80px 0; text-align: center; }
.fb h2 { font-size: clamp(22px, 6.4vw, 38px); line-height: 1.12; color: #0b0b0b; max-width: 20ch; margin: 0 auto 22px; }
.fb .btn { min-width: 240px; }
.fb small { display: block; margin-top: 12px; font-size: 12.5px; color: #333; }

.fp { padding: 50px 0 20px; }
.fp > .wrap > h2 { font-size: clamp(32px, 9.5vw, 60px); line-height: 1; margin-bottom: 26px; }
.frow { display: grid; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.frow .ph { aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.frow .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.frow h3 { font-size: clamp(24px, 7vw, 36px); line-height: 1.05; }
.frow p { color: #cfcfcf; font-size: 14.5px; margin: 10px 0 12px; }
.frow ul { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; }
.frow li { display: flex; gap: 10px; font-size: 14px; color: #e6e6e6; }
.frow li::before { content: "»"; font: 400 15px var(--display); color: #fff; }
.frow .pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 900px) { .frow { grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; } .frow:nth-child(even) .ph { order: 2; } }

.fc { padding: 40px 0 60px; }
.fc > .wrap > h2 { font-size: clamp(32px, 9.5vw, 60px); line-height: 1; margin-bottom: 8px; }
.fc .lead { margin-bottom: 20px; max-width: 46ch; }
.fc .quiz { background: #141414; border: 1px solid var(--line); padding: 20px 16px; }
.fc .quiz .paso h2 { font: 400 18px/1.25 var(--display); text-transform: uppercase; }
