/* ============================================================
   FORTALECIMIENTO FUNCIONAL · Bike Passion Training Center
   Sistema visual — estética deportiva oscura + acento naranja
   ============================================================ */

:root{
  /* superficies (base negra de marca) */
  --black:     #000000;
  --bg:        #0C0C0D;                  /* near-black */
  --bg-2:      #161618;                  /* superficie elevada */
  --bg-3:      #202023;                  /* tarjetas / bordes suaves */
  --light:     #F2F2F0;                  /* sección clara */
  --light-2:   #D8D9D4;                  /* gris claro de marca */

  /* texto */
  --ink:       #F5F5F3;                  /* texto sobre oscuro */
  --ink-mut:   #9D9DA6;                  /* gris medio de marca */
  --ink-dim:   #52555A;                  /* gris fuerte de marca */
  --ink-dark:  #141416;                  /* texto sobre claro */
  --ink-dark-mut: #52555A;

  /* marca */
  --orange:    #FF4306;                  /* naranja primario Bike Passion */
  --orange-hi: #FF6334;
  --orange-deep: #D63500;

  /* líneas */
  --line:      rgba(245,245,243,0.12);
  --line-strong: rgba(245,245,243,0.22);

  /* tipografías */
  --display: "Welfare", "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  --body:    "Work Sans", system-ui, sans-serif;
  --mono:    "Work Sans", system-ui, sans-serif;

  /* medidas */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 6px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- tipografía ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:0.98; letter-spacing:-0.02em; text-wrap:balance; }
.em{ font-style:italic; color:var(--orange); font-weight:800; }
.eyebrow{
  font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--orange); display:inline-block; }
.eyebrow.center::after{ content:""; width:26px; height:1.5px; background:var(--orange); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }
.sec-pad{ padding-block:clamp(72px, 11vw, 140px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:16px var(--pad);
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  padding-block:11px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand .blogo{ height:42px; width:auto; display:block; }
.foot-brand .brand .blogo{ height:54px; }
.brand .btxt{ display:flex; flex-direction:column; line-height:1; }
.brand .btxt b{ font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.02em; }
.brand .btxt span{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mut); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--ink-mut);
  text-transform:uppercase; transition:color .2s; position:relative; padding:4px 0;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--orange);
  transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--display); font-weight:700; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 22px; border-radius:var(--radius); transition:transform .15s ease, background .2s, color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn-primary{ background:var(--orange); color:var(--black); }
.btn-primary:hover{ background:var(--orange-hi); transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--orange); }
.btn-ghost{ border:1.5px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.btn-dark{ background:var(--ink-dark); color:var(--light); }
.btn-dark:hover{ background:#2A2A2E; transform:translateY(-2px); }
.btn-lg{ padding:17px 30px; font-size:.95rem; }

.burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); transition:.3s; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--pad);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.7,0,.2,1); opacity:0; visibility:hidden;
}
.mobile-menu.open{ transform:translateX(0); opacity:1; visibility:visible; }
.mobile-menu a{ font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:-.02em; padding:10px 0; border-bottom:1px solid var(--line); }
.mobile-menu a:last-of-type{ border:none; }
.mobile-menu .btn{ margin-top:24px; align-self:flex-start; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:140px; padding-bottom:0; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{
  font-size:clamp(3rem, 8.5vw, 6.6rem); font-weight:900; line-height:0.92;
  text-transform:uppercase; margin:22px 0 0;
}
.hero p.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-mut); max-width:46ch; margin:26px 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-media{ position:relative; }
.hero-media image-slot{ width:100%; aspect-ratio:4/5; }
.hero-badge{
  position:absolute; left:-22px; bottom:36px; background:var(--orange); color:var(--black);
  padding:16px 20px; border-radius:var(--radius); max-width:220px; box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
}
.hero-badge b{ font-family:var(--display); font-weight:900; font-size:2.2rem; line-height:1; display:block; }
.hero-badge span{ font-size:.8rem; font-weight:600; line-height:1.25; display:block; margin-top:4px; }

.hero-stats{ display:flex; gap:clamp(24px,4vw,56px); margin-top:48px; padding-top:30px; border-top:1px solid var(--line); flex-wrap:wrap; }
.stat b{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; display:block; }
.stat b .u{ color:var(--orange); }
.stat span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mut); margin-top:8px; display:block; }

/* marquee */
.marquee{ margin-top:clamp(56px,8vw,96px); border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.marquee-track{ display:flex; align-items:center; width:max-content; white-space:nowrap; animation:scrollx 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,2vw,1.6rem); text-transform:uppercase;
  letter-spacing:.01em; padding:18px clamp(22px,3vw,42px); position:relative;
}
.marquee-track span::after{ content:"●"; color:var(--orange); font-size:.5em; position:absolute; right:-4px; top:50%; transform:translateY(-50%); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   QUÉ ES
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.section-head{ max-width:62ch; }
.section-head h2, h2.section-head{ font-size:clamp(2.2rem,5vw,3.8rem); text-transform:uppercase; }
.section-head p{ color:var(--ink-mut); margin-top:20px; font-size:1.08rem; }

.reasons{ list-style:none; margin-top:34px; display:flex; flex-direction:column; }
.reasons li{
  display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--line);
}
.reasons li:last-child{ border-bottom:1px solid var(--line); }
.reasons .n{ font-family:var(--mono); font-size:.8rem; font-weight:700; color:var(--orange); padding-top:5px; min-width:34px; }
.reasons .t b{ font-family:var(--display); font-weight:700; font-size:1.15rem; display:block; letter-spacing:-.01em; }
.reasons .t span{ color:var(--ink-mut); font-size:.96rem; }

.qe-media image-slot{ width:100%; aspect-ratio:3/4; }

/* ============================================================
   PILARES (esencia)
   ============================================================ */
.pillars{ background:var(--bg-2); border-block:1px solid var(--line); }
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:48px; border:1px solid var(--line); }
.pillar{ background:var(--bg-2); padding:36px 28px; transition:background .25s; }
.pillar:hover{ background:var(--bg-3); }
.pillar .pn{ font-family:var(--mono); font-size:.78rem; color:var(--orange); letter-spacing:.1em; }
.pillar h3{ font-size:1.5rem; text-transform:uppercase; margin:18px 0 12px; }
.pillar p{ color:var(--ink-mut); font-size:.96rem; }

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:54px; counter-reset:step; }
.step{ position:relative; padding-top:30px; border-top:2px solid var(--line-strong); }
.step .sn{ font-family:var(--display); font-weight:900; font-size:3.4rem; line-height:1; color:var(--bg-3); -webkit-text-stroke:1.5px var(--orange); }
.step h3{ font-size:1.35rem; text-transform:uppercase; margin:14px 0 10px; }
.step p{ color:var(--ink-mut); font-size:.96rem; }

/* ============================================================
   PROGRAMA / INCLUYE
   ============================================================ */
.includes{ background:var(--light); color:var(--ink-dark); }
.includes .eyebrow{ color:var(--orange-deep); }
.includes .eyebrow::before{ background:var(--orange-deep); }
.includes h2{ font-size:clamp(2.2rem,5vw,3.6rem); text-transform:uppercase; color:var(--ink-dark); }
.includes p.sub{ color:var(--ink-dark-mut); }
.inc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.inc-card{ background:#fff; border:1px solid var(--light-2); border-radius:8px; padding:30px 26px; transition:transform .2s, box-shadow .2s; }
.inc-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(0,0,0,.32); }
.inc-card .ic{ width:46px; height:46px; border-radius:8px; background:color-mix(in oklch,var(--orange) 18%,#fff); display:grid; place-items:center; color:var(--orange-deep); }
.inc-card h3{ font-size:1.25rem; margin:20px 0 10px; color:var(--ink-dark); text-transform:uppercase; }
.inc-card p{ color:var(--ink-dark-mut); font-size:.96rem; }

/* ============================================================
   PRECIOS
   ============================================================ */
.price-banner{
  display:flex; align-items:flex-start; gap:12px; margin-top:26px; max-width:60ch;
  background:color-mix(in oklch, var(--orange) 12%, var(--bg-2));
  border:1px solid color-mix(in oklch, var(--orange) 35%, transparent);
  border-radius:8px; padding:14px 18px; color:var(--ink-mut); font-size:.96rem; line-height:1.45;
}
.price-banner svg{ color:var(--orange); flex-shrink:0; margin-top:2px; }
.price-banner strong{ color:var(--ink); font-weight:700; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.plans.five{ grid-template-columns:repeat(5,1fr); gap:16px; }
.plans.five .plan{ padding:28px 22px; }
.plans.five .price{ font-size:2.2rem; }
.plan-note{ color:var(--ink-mut); font-size:.9rem; margin:16px 0 22px; flex:1; }
.plan{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:32px 28px;
  display:flex; flex-direction:column; transition:transform .2s, border-color .2s; position:relative;
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.plan.featured{ border-color:var(--orange); background:linear-gradient(180deg, color-mix(in oklch,var(--orange) 10%,var(--bg-2)), var(--bg-2)); }
.plan .tag{ position:absolute; top:-12px; left:28px; background:var(--orange); color:var(--black); font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:4px; }
.plan .ptitle{ font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-mut); }
.plan .price{ font-family:var(--display); font-weight:900; font-size:2.8rem; line-height:1; margin:16px 0 4px; }
.plan .price small{ font-size:.9rem; font-weight:600; color:var(--ink-mut); font-family:var(--body); }
.plan .per{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.plan ul{ list-style:none; margin:24px 0 28px; display:flex; flex-direction:column; gap:13px; flex:1; }
.plan ul li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:var(--ink-mut); }
.plan ul li svg{ flex-shrink:0; margin-top:3px; color:var(--orange); }
.plan .btn{ width:100%; }
.price-note{ text-align:center; margin-top:28px; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; }

/* ============================================================
   COACH
   ============================================================ */
.coach{ background:var(--bg-2); border-block:1px solid var(--line); }
.coach-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,72px); align-items:center; }
.coach-media{ position:relative; }
.coach-media image-slot{ width:100%; height:auto; aspect-ratio:3/4; }
.coach-quote{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.08; letter-spacing:-.02em; }
.coach-quote .em{ display:inline; }
.coach-name{ margin-top:28px; }
.coach-name b{ font-family:var(--display); font-weight:900; font-size:1.4rem; text-transform:uppercase; display:block; }
.coach-name span{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }
.coach-bio{ color:var(--ink-mut); margin-top:22px; font-size:1.02rem; }
.coach-socials{ display:flex; gap:12px; margin-top:26px; }
.coach-socials a{ width:44px; height:44px; border:1px solid var(--line-strong); border-radius:8px; display:grid; place-items:center; transition:.2s; color:var(--ink-mut); }
.coach-socials a:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-3px); }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.tcard{ background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:30px 28px; display:flex; flex-direction:column; }
.tcard .stars{ color:var(--orange); letter-spacing:3px; font-size:.9rem; }
.tcard p{ font-size:1.05rem; margin:18px 0 24px; flex:1; line-height:1.5; }
.tcard .who{ display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--line); }
.tcard .who image-slot{ width:48px; height:48px; }
.tcard .who b{ font-family:var(--display); font-weight:700; font-size:1rem; display:block; }
.tcard .who span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-mut); text-transform:uppercase; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:880px; margin:48px auto 0; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; gap:20px; padding:26px 0; text-align:left; }
.faq-q .qn{ font-family:var(--mono); font-size:.8rem; color:var(--orange); font-weight:700; flex-shrink:0; }
.faq-q .qt{ font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.35rem); letter-spacing:-.01em; flex:1; }
.faq-q .qi{ flex-shrink:0; width:30px; height:30px; position:relative; }
.faq-q .qi::before,.faq-q .qi::after{ content:""; position:absolute; background:var(--orange); transition:transform .3s; }
.faq-q .qi::before{ top:50%; left:6px; right:6px; height:2px; transform:translateY(-50%); }
.faq-q .qi::after{ left:50%; top:6px; bottom:6px; width:2px; transform:translateX(-50%); }
.faq-item.open .qi::after{ transform:translateX(-50%) scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq-a .faq-a-inner{ padding:0 0 28px 54px; color:var(--ink-mut); font-size:1.02rem; }

/* ============================================================
   OTROS SERVICIOS
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.svc{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line); group:hover; }
.svc .svc-img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.svc image-slot{ width:100%; aspect-ratio:4/3; }
.svc .svc-body{ padding:26px 24px; background:var(--bg-2); }
.svc .sl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.svc h3{ font-size:1.4rem; text-transform:uppercase; margin:10px 0 12px; }
.svc p{ color:var(--ink-mut); font-size:.94rem; margin-bottom:16px; }
.svc a.more{ font-family:var(--display); font-weight:700; font-size:.84rem; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); display:inline-flex; gap:8px; align-items:center; transition:gap .2s; }
.svc a.more:hover{ gap:14px; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{ text-align:center; background:var(--orange); color:var(--black); }
.cta-final h2{ font-size:clamp(2.4rem,6vw,4.6rem); text-transform:uppercase; letter-spacing:-.02em; }
.cta-final .em{ color:#FFFFFF; font-style:italic; }
.cta-final p{ font-size:1.15rem; max-width:50ch; margin:20px auto 36px; font-weight:500; color:rgba(12,12,13,0.72); }
.cta-final .btn-dark{ background:var(--black); color:var(--ink); }
.cta-final .btn-dark:hover{ background:#1A1A1C; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding-block:64px 28px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-brand .brand{ margin-bottom:18px; }
.foot-brand p{ color:var(--ink-mut); font-size:.96rem; max-width:34ch; }
.foot-tag{ font-family:var(--display); font-weight:800; color:var(--orange); margin-top:16px; letter-spacing:-.01em; }
.foot-col h4{ font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:18px; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-col a, .foot-col li{ color:var(--ink-mut); font-size:.96rem; transition:color .2s; }
.foot-col a:hover{ color:var(--orange); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:54px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; }
.foot-bottom span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-dim); }

/* ============================================================
   REVEAL ANIM
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .inc-grid,.plans,.tgrid,.svc-grid{ grid-template-columns:repeat(2,1fr); }
  .plans.five{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-media{ order:-1; max-width:420px; }
  .split,.coach-grid{ grid-template-columns:1fr; gap:40px; }
  .coach-media{ max-width:420px; }
  .plans.five{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .pillar-grid,.steps,.inc-grid,.plans,.tgrid,.svc-grid,.plans.five{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-badge{ left:0; }
  .plans{ gap:32px; }
  .plan.featured{ order:-1; }
}