/* FUENTES LOCALES */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-latin-300-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}



:root{

  --jo-y:#FFCC00;

  --jo-black:#1A1A1A;

  --jo-text:#4A4A4A;

  --jo-muted:#767676;

  --jo-line:#E0E0E0;

  --jo-alt:#F5F5F5

}



.jo-page,.jo-page *{box-sizing:border-box}

.jo-page{margin:0;background:#fff;color:var(--jo-black);font-family:'DM Sans',sans-serif}

.jo-wrap{width:min(1200px,calc(100% - 32px));margin:auto}

.jo-display{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em}

.jo-cond{font-family:'Barlow Condensed',sans-serif}



.jo-kicker{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:16px;

  font:700 12px/1 'Barlow Condensed',sans-serif;

  letter-spacing:.3em;

  text-transform:uppercase;

  color:var(--jo-muted)

}



.jo-kicker:before{

  content:"";

  width:32px;

  height:2px;

  background:var(--jo-y)

}



.jo-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  text-decoration:none;

  padding:15px 25px;

  border-radius:4px;

  background:var(--jo-y);

  color:var(--jo-black);

  font:700 16px/1 'Barlow Condensed',sans-serif;

  text-transform:uppercase;

  letter-spacing:.07em;

  box-shadow:0 4px 15px rgba(255,204,0,.35);

  transition:.2s

}



.jo-btn:hover{

  transform:translateY(-2px);

  opacity:.92

}



.jo-btn.dark{

  background:var(--jo-black);

  color:#fff;

  box-shadow:none

}



/* WHATSAPP */

.jo-btn.whatsapp{

  margin-top:10px;

  width:100%;

  background:#25D366;

  color:#fff;

  box-shadow:0 4px 15px rgba(37,211,102,.25);

  gap:9px;

}



.jo-btn.whatsapp:hover{

  background:#1ebe5d;

  opacity:1;

}



.jo-btn.whatsapp svg{

  width:20px;

  height:20px;

  fill:currentColor;

  flex-shrink:0;

}



.jo-section{padding:96px 0}



.jo-title{

  font:400 clamp(42px,5vw,68px)/.98 'Bebas Neue',sans-serif;

  margin:0 0 18px

}



.jo-yellow{color:var(--jo-y)}



.jo-nav{

  position:sticky;

  top:0;

  z-index:50;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(12px);

  border-bottom:1px solid var(--jo-line)

}



.jo-navin{

  min-height:70px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px

}



.jo-logo{

  height:42px;

  width:auto;

  max-width:180px;

  object-fit:contain

}



.jo-logo-fallback{

  display:none;

  font:700 24px/1 'Barlow Condensed',sans-serif

}



.jo-links{

  display:flex;

  align-items:center;

  gap:28px

}



.jo-links a{

  color:var(--jo-text);

  text-decoration:none;

  font:700 14px/1 'Barlow Condensed',sans-serif;

  text-transform:uppercase;

  letter-spacing:.08em

}



.jo-hero{

  min-height:calc(100vh - 70px);

  display:flex;

  align-items:center;

  position:relative;

  overflow:hidden;

  background:#1A1A1A url('../assets/images/imagen-hero-ebike.webp') center 40%/cover no-repeat;

  color:#fff

}



.jo-hero:before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(105deg,rgba(26,26,26,.92),rgba(26,26,26,.48) 52%,rgba(26,26,26,.12))

}



.jo-hero:after{

  content:"";

  position:absolute;

  inset:0 auto 0 0;

  width:4px;

  background:var(--jo-y)

}



.jo-heroin{

  position:relative;

  z-index:2;

  padding:90px 0 70px;

  max-width:820px

}



.jo-hero .jo-kicker{color:var(--jo-y)}



.jo-hero h1{

  font:400 clamp(60px,8vw,112px)/.91 'Bebas Neue',sans-serif;

  margin:0 0 26px

}



.jo-hero p{

  max-width:650px;

  font-size:19px;

  line-height:1.7;

  color:rgba(255,255,255,.84);

  font-weight:300;

  margin:0 0 34px

}



.jo-actions{

  display:flex;

  gap:14px;

  flex-wrap:wrap

}



.jo-btn.outline{

  background:transparent;

  border:1px solid rgba(255,255,255,.5);

  color:#fff;

  box-shadow:none

}



.jo-stats{

  background:var(--jo-alt);

  border-top:4px solid var(--jo-y)

}



.jo-statsgrid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-left:1px solid var(--jo-line)

}



.jo-stat{

  padding:38px 16px;

  text-align:center;

  border-right:1px solid var(--jo-line)

}



.jo-stat b{

  display:block;

  font:400 clamp(48px,6vw,82px)/1 'Bebas Neue',sans-serif

}



.jo-stat strong{

  display:block;

  font:700 14px/1.2 'Barlow Condensed',sans-serif;

  text-transform:uppercase;

  letter-spacing:.05em

}



.jo-stat small{color:var(--jo-muted)}



.jo-grid2{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:24px

}



.jo-card{

  background:#fff;

  border:1px solid var(--jo-line);

  border-radius:9px;

  padding:30px;

  box-shadow:0 2px 8px rgba(0,0,0,.05)

}



.jo-icon{

  width:48px;

  height:48px;

  border-radius:6px;

  background:var(--jo-y);

  display:grid;

  place-items:center;

  font-size:20px;

  margin-bottom:16px

}



.jo-card h3{

  font:700 21px/1.2 'Barlow Condensed',sans-serif;

  margin:0 0 10px

}



.jo-card p{

  color:var(--jo-text);

  font-size:15px;

  line-height:1.65;

  margin:0

}



.jo-quote{

  margin-top:40px;

  padding:30px 34px;

  background:var(--jo-black);

  color:#fff;

  border-left:4px solid var(--jo-y);

  border-radius:8px;

  font-size:19px;

  line-height:1.7

}



.jo-divider{

  height:56px;

  background:var(--jo-alt);

  display:flex;

  align-items:center;

  justify-content:center;

  color:#aaa;

  font:700 11px/1 'Barlow Condensed',sans-serif;

  letter-spacing:.25em;

  text-transform:uppercase

}



.jo-divider:before,.jo-divider:after{

  content:"";

  height:1px;

  width:min(260px,25vw);

  background:linear-gradient(90deg,transparent,var(--jo-line));

  margin:0 20px

}



.jo-divider:after{transform:rotate(180deg)}



.jo-services{background:var(--jo-alt)}



.jo-service-head{

  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:30px;

  margin-bottom:42px

}



.jo-service-head>p{

  max-width:380px;

  color:var(--jo-text);

  line-height:1.65

}



.jo-pricing{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:22px

}



.jo-price{

  display:flex;

  flex-direction:column;

  background:#fff;

  border:1px solid var(--jo-line);

  border-radius:12px;

  overflow:hidden;

  box-shadow:0 2px 12px rgba(0,0,0,.06)

}



.jo-price.featured{

  border:2px solid var(--jo-y);

  box-shadow:0 8px 30px rgba(255,204,0,.18)

}



.jo-badge{

  padding:12px 22px;

  background:var(--jo-alt);

  color:var(--jo-muted);

  font:700 12px/1 'Barlow Condensed',sans-serif;

  letter-spacing:.14em

}



.featured .jo-badge{

  background:var(--jo-y);

  color:var(--jo-black)

}



.jo-pricebody{

  padding:24px;

  display:flex;

  flex-direction:column;

  height:100%

}



.jo-num{

  font:400 64px/1 'Bebas Neue',sans-serif

}



.jo-num small{

  font:700 18px/1 'Barlow Condensed',sans-serif;

  color:var(--jo-muted)

}



.jo-price h3{

  font:700 19px/1.2 'Barlow Condensed',sans-serif;

  margin:5px 0

}



.jo-duration{

  font-size:12px;

  color:var(--jo-muted);

  margin-bottom:15px

}



.jo-price hr{

  border:0;

  border-top:1px solid var(--jo-line);

  width:100%;

  margin:8px 0 15px

}



.jo-price p{

  font-size:14px;

  line-height:1.65;

  color:var(--jo-text)

}



.jo-price ul{

  list-style:none;

  padding:0;

  margin:10px 0 16px

}



.jo-price li{

  position:relative;

  padding-left:20px;

  margin:8px 0;

  color:var(--jo-text);

  font-size:13.5px;

  line-height:1.45

}



.jo-price li:before{

  content:'✓';

  position:absolute;

  left:0;

  color:var(--jo-y);

  font-weight:900

}



.jo-for{

  background:var(--jo-alt);

  border:1px solid var(--jo-line);

  border-radius:7px;

  padding:13px;

  margin:0 0 18px!important

}



.jo-price .jo-btn{

  margin-top:auto;

  width:100%;

  font-size:14px

}



/* Hace que el WhatsApp tenga separación aunque esté debajo del botón principal */

.jo-price .jo-btn.whatsapp{

  margin-top:10px;

}



.jo-coming{

  margin-top:26px;

  padding:24px;

  background:#fff;

  border:1px solid var(--jo-line);

  border-radius:10px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px

}



.jo-coming h4{

  font:700 20px/1.2 'Barlow Condensed',sans-serif;

  margin:0 0 6px

}



.jo-coming p{

  margin:0;

  color:var(--jo-text);

  font-size:14px

}



.jo-aboutgrid{

  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:70px;

  align-items:center

}



.jo-about p{

  color:var(--jo-text);

  line-height:1.75

}



.jo-mini{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:14px;

  margin-top:28px

}



.jo-mini>div{

  background:var(--jo-alt);

  border:1px solid var(--jo-line);

  border-radius:8px;

  padding:18px

}



.jo-mini b{

  display:block;

  font:400 40px/1 'Bebas Neue',sans-serif

}



.jo-mini span{

  font:700 11px/1.3 'Barlow Condensed',sans-serif;

  color:var(--jo-muted);

  text-transform:uppercase;

  letter-spacing:.06em

}



.jo-photo{

  aspect-ratio:3/4;

  border-radius:16px;

  background:var(--jo-alt);

  position:relative;

  box-shadow:-14px -14px 0 var(--jo-y);

  overflow:hidden

}



.jo-photo img{

  width:100%;

  height:100%;

  object-fit:cover

}



.jo-photo-fallback{

  position:absolute;

  inset:0;

  display:grid;

  place-items:center;

  color:var(--jo-muted);

  text-align:center;

  padding:30px

}



.jo-photo-label{

  position:absolute;

  left:16px;

  bottom:16px;

  background:rgba(255,204,0,.96);

  padding:8px 10px;

  border-radius:4px;

  font:700 11px/1.2 'Barlow Condensed',sans-serif;

  text-transform:uppercase;

  letter-spacing:.05em

}



.jo-process{background:var(--jo-alt)}



.jo-steps{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:20px

}



.jo-step{

  background:#fff;

  border:1px solid var(--jo-line);

  border-radius:10px;

  padding:26px

}



.jo-step b{

  display:block;

  font:400 52px/1 'Bebas Neue',sans-serif;

  color:var(--jo-y);

  margin-bottom:12px

}



.jo-step h3{

  font:700 19px/1.2 'Barlow Condensed',sans-serif;

  margin:0 0 10px

}



.jo-step p{

  font-size:14px;

  line-height:1.65;

  color:var(--jo-text);

  margin:0

}



.jo-faqgrid{

  display:grid;

  grid-template-columns:.8fr 1.2fr;

  gap:70px

}



.jo-faqgrid>div>p{

  color:var(--jo-text);

  line-height:1.7

}



.jo-faq details{

  border:1px solid var(--jo-line);

  border-radius:8px;

  margin-bottom:12px;

  background:#fff;

  overflow:hidden

}



.jo-faq summary{

  cursor:pointer;

  list-style:none;

  padding:18px 55px 18px 22px;

  font:700 17px/1.35 'Barlow Condensed',sans-serif;

  position:relative

}



.jo-faq summary::-webkit-details-marker{display:none}



.jo-faq summary:after{

  content:'+';

  position:absolute;

  right:20px;

  top:50%;

  transform:translateY(-50%);

  width:26px;

  height:26px;

  border-radius:50%;

  background:var(--jo-alt);

  display:grid;

  place-items:center

}



.jo-faq details[open]{background:#FFFBEB}



.jo-faq details[open] summary:after{

  background:var(--jo-y);

  content:'×'

}



.jo-answer{

  padding:0 22px 18px;

  color:var(--jo-text);

  font-size:14.5px;

  line-height:1.7

}



.jo-final{

  padding:110px 0;

  text-align:center;

  background:var(--jo-black);

  color:#fff;

  border-top:4px solid var(--jo-y)

}



.jo-final .jo-kicker{

  justify-content:center;

  color:var(--jo-y)

}



.jo-final .jo-kicker:after{

  content:"";

  width:32px;

  height:2px;

  background:var(--jo-y)

}



.jo-final h2{

  font:400 clamp(56px,7vw,96px)/.94 'Bebas Neue',sans-serif;

  margin:0 0 22px

}



.jo-final p{

  max-width:620px;

  margin:0 auto 34px;

  color:rgba(255,255,255,.7);

  line-height:1.7

}



.jo-trust{

  display:flex;

  justify-content:center;

  gap:28px;

  flex-wrap:wrap;

  margin:28px 0;

  color:rgba(255,255,255,.55);

  font:700 13px/1 'Barlow Condensed',sans-serif

}



.jo-trust span:before{

  content:'•';

  color:var(--jo-y);

  margin-right:8px

}



.jo-legal{

  font-size:12px!important;

  color:rgba(255,255,255,.35)!important;

  margin-bottom:0!important

}



.jo-footer{

  padding:38px 0;

  background:var(--jo-alt);

  border-top:1px solid var(--jo-line)

}



.jo-footin{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px

}



.jo-footlinks{

  display:flex;

  gap:20px;

  flex-wrap:wrap

}



.jo-footlinks a{

  font:700 12px/1 'Barlow Condensed',sans-serif;

  color:var(--jo-muted);

  text-decoration:none;

  text-transform:uppercase;

  letter-spacing:.06em

}



.jo-copy{

  font-size:11px;

  color:#aaa;

  text-align:right

}



.jo-disclaimer{

  text-align:center;

  border-top:1px solid var(--jo-line);

  padding-top:20px;

  margin-top:20px;

  font-size:11px;

  color:#aaa

}



@media(max-width:900px){

  .jo-links a:not(.jo-btn){display:none}

  .jo-statsgrid,.jo-pricing,.jo-steps{grid-template-columns:repeat(2,1fr)}

  .jo-aboutgrid,.jo-faqgrid{grid-template-columns:1fr}

  .jo-service-head{display:block}

  .jo-service-head>p{max-width:none}

  .jo-aboutgrid{gap:45px}

  .jo-photo{max-width:540px}

  .jo-section{padding:72px 0}

}



@media(max-width:620px){

  .jo-wrap{width:min(100% - 24px,1200px)}

  .jo-navin{min-height:62px}

  .jo-logo{height:34px}

  .jo-links .jo-btn{font-size:12px;padding:12px 14px}

  .jo-hero{min-height:auto}

  .jo-heroin{padding:80px 0 60px}

  .jo-hero h1{font-size:58px}

  .jo-hero p{font-size:16px}

  .jo-actions{display:grid}

  .jo-btn{width:100%}

  .jo-statsgrid,.jo-grid2,.jo-pricing,.jo-steps{grid-template-columns:1fr}

  .jo-stat{border-bottom:1px solid var(--jo-line)}

  .jo-service-head{margin-bottom:28px}

  .jo-coming,.jo-footin{align-items:flex-start;flex-direction:column}

  .jo-copy{text-align:left}

  .jo-final{padding:80px 0}

  .jo-final h2{font-size:54px}

  .jo-section{padding:64px 0}

  .jo-mini{grid-template-columns:1fr 1fr}

}