/* MOTOCLUBes — hoja de estilos de la web pública.
   Identidad de la app: naranja #FF7A1A, fondo #0E0E0E, tipografía Manrope.
   Un solo fichero para las tres versiones de idioma: el texto vive en cada HTML,
   la forma vive aquí. Si se toca el diseño, se toca UNA vez. */

:root{
  --naranja:#FF7A1A;
  --naranja-suave:rgba(255,122,26,.14);
  --fondo:#0E0E0E;
  --fondo-2:#151515;
  --tarjeta:#191919;
  --borde:rgba(255,255,255,.09);
  --texto:#FFFFFF;
  --texto-2:rgba(255,255,255,.62);
  --texto-3:rgba(255,255,255,.34);
  --radio:18px;
  --ancho:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--fondo);color:var(--texto);
  -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 22px}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:40;
  background:rgba(14,14,14,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
}
.barra .envoltura{display:flex;align-items:center;gap:14px;height:62px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.4px;font-size:17px}
.marca img{width:30px;height:30px;border-radius:9px}
.marca span{color:var(--naranja)}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.barra nav a{font-size:14px;color:var(--texto-2);font-weight:600}
.barra nav a:hover{color:var(--texto)}
.idiomas{display:flex;gap:4px;margin-left:8px}
.idiomas a{
  font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;
  color:var(--texto-3);border:1px solid transparent;
}
.idiomas a.activo{color:var(--naranja);border-color:var(--naranja);background:var(--naranja-suave)}

/* Menú de móvil. Sin JavaScript: <details> se abre y se cierra solo.
   Antes las secciones simplemente se ocultaban por debajo de 760 px, o sea que
   en un teléfono la barra no llevaba a ningún sitio. */
.menu{display:none;position:relative}
.menu summary{
  list-style:none;cursor:pointer;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--borde);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:17px;height:2px;background:var(--texto);border-radius:2px}
.menu[open] summary{border-color:var(--naranja)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);min-width:212px;
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:16px;
  padding:8px;box-shadow:0 18px 46px rgba(0,0,0,.55);
}
.menu-panel a{
  display:block;padding:12px 14px;border-radius:10px;font-size:15px;
  font-weight:600;color:var(--texto-2);
}
.menu-panel a:hover,.menu-panel a:active{background:rgba(255,255,255,.06);color:var(--texto)}

/* ---------- Portada: el casco que llega con humo ---------- */
.portada{
  position:relative;text-align:center;padding:86px 0 74px;overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(255,122,26,.15),transparent 70%);
}
.escena{position:relative;width:148px;height:148px;margin:0 auto 26px;display:flex;align-items:center;justify-content:center}
.escena img{
  width:132px;height:132px;border-radius:30px;position:relative;
  box-shadow:0 22px 55px rgba(0,0,0,.6);
  animation:mc-casco 1.1s cubic-bezier(.16,1,.3,1) both;
}
.humo{position:absolute;border-radius:50%;pointer-events:none;background:rgba(160,160,160,.65)}
.h1{left:-20px;top:50%;width:42px;height:42px;transform:translateY(-50%);filter:blur(11px);animation:mc-humo 1.1s ease-out .35s both}
.h2{left:-6px;top:36%;width:34px;height:34px;filter:blur(9px);animation:mc-humo 1s ease-out .5s both}
.h3{left:6px;top:62%;width:30px;height:30px;filter:blur(8px);animation:mc-humo .95s ease-out .6s both}
.h4{left:-30px;top:54%;width:26px;height:26px;filter:blur(7px);animation:mc-humo 1.05s ease-out .75s both}
@keyframes mc-casco{0%{transform:translateX(-120vw)}100%{transform:translateX(0)}}
@keyframes mc-humo{0%{opacity:0;transform:translateX(0) scale(.6)}15%{opacity:.55}100%{opacity:0;transform:translateX(-90px) scale(1.7)}}
@keyframes mc-sube{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .escena img,.humo,.portada h1,.lema,.acciones,.aviso-beta{animation:none!important;opacity:1!important;transform:none!important}
}

.portada h1{
  font-size:clamp(34px,7vw,58px);font-weight:800;letter-spacing:-1.6px;line-height:1.05;
  animation:mc-sube .5s ease-out 1.05s both;
}
.portada h1 span{color:var(--naranja)}
.lema{
  margin:16px auto 0;max-width:520px;font-size:clamp(16px,2.4vw,19px);color:var(--texto-2);
  animation:mc-sube .5s ease-out 1.2s both;
}
.lema strong{color:var(--texto);font-weight:700}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;animation:mc-sube .5s ease-out 1.35s both}
.aviso-beta{
  margin-top:22px;font-size:13px;color:var(--texto-3);
  animation:mc-sube .5s ease-out 1.5s both;
}

/* ---------- Botones y distintivos de tienda ---------- */
.boton{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:13px;
  font-weight:700;font-size:15px;border:1px solid var(--borde);transition:.18s;
}
.boton-principal{background:var(--naranja);border-color:var(--naranja);color:#111}
.boton-principal:hover{filter:brightness(1.1)}
.boton-suave{background:transparent;color:var(--texto)}
.boton-suave:hover{background:rgba(255,255,255,.06)}

.tiendas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tienda{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-width:196px;padding:11px 20px;border:1px solid var(--borde);border-radius:13px;
  background:var(--fondo-2);cursor:default;
}
.tienda em{font-style:normal;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--naranja);font-weight:800}
.tienda b{font-size:16px;font-weight:700;letter-spacing:-.3px}

/* ---------- Secciones ---------- */
section{padding:74px 0;border-top:1px solid var(--borde)}
.rotulo{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--naranja);font-weight:800;margin-bottom:12px}
h2{font-size:clamp(25px,4.2vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:14px}
.entradilla{color:var(--texto-2);max-width:620px;font-size:16px}

.rejilla{display:grid;gap:16px;margin-top:38px}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.rejilla-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tarjeta{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:24px;transition:.18s;
}
.tarjeta:hover{border-color:rgba(255,122,26,.4);transform:translateY(-2px)}
.tarjeta .icono{font-size:24px;margin-bottom:12px;display:block}
.tarjeta h3{font-size:17px;font-weight:800;margin-bottom:7px;letter-spacing:-.3px}
.tarjeta p{font-size:14.5px;color:var(--texto-2)}
.marca-proximo{
  display:inline-block;margin-top:11px;font-size:10.5px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--naranja);background:var(--naranja-suave);
  padding:3px 9px;border-radius:999px;
}

.franja{background:var(--fondo-2)}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:34px}
.cifra{text-align:center;padding:22px 12px;border:1px solid var(--borde);border-radius:var(--radio)}
.cifra b{display:block;font-size:30px;font-weight:800;color:var(--naranja);letter-spacing:-1px}
.cifra span{font-size:13px;color:var(--texto-2)}

.negocio{
  display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center;
  background:linear-gradient(135deg,rgba(255,122,26,.11),transparent 62%);
  border:1px solid rgba(255,122,26,.26);border-radius:26px;padding:38px;
}
@media(max-width:760px){.negocio{grid-template-columns:1fr;padding:28px}}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--borde);padding:48px 0 60px;background:var(--fondo-2)}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:760px){.pie-rejilla{grid-template-columns:1fr;gap:24px}}
footer h4{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--texto-3);font-weight:800;margin-bottom:12px}
footer a{display:block;font-size:14px;color:var(--texto-2);padding:3px 0}
footer a:hover{color:var(--naranja)}
.empresa{margin-top:36px;padding-top:22px;border-top:1px solid var(--borde);font-size:12px;color:var(--texto-3);line-height:1.8}

/* ---------- Página pública de ruta ---------- */
.ruta-cab{padding:44px 0 28px}
.ruta-cab h1{font-size:clamp(24px,5vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.15}
.ruta-meta{color:var(--texto-2);font-size:15px;margin-top:8px}
.trazado{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:18px;margin-top:22px;
}
.trazado svg{width:100%;height:auto;display:block}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-top:20px}
.dato{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:16px;text-align:center}
.dato b{display:block;font-size:21px;font-weight:800;letter-spacing:-.5px}
.dato span{font-size:12px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.cargando,.error{padding:60px 0;text-align:center;color:var(--texto-2)}

/* ============================================================================
   MÓVIL. La web se ve sobre todo en un teléfono, encima de una moto o en el
   sofá: aquí se ajusta lo que en pantalla ancha funciona y en 380 px no.
   ============================================================================ */

/* Un ancla no puede quedar tapada por la barra pegajosa de 62 px. */
section,[id]{scroll-margin-top:76px}

/* Nada se desborda por un título largo o una URL. */
h1,h2,h3,.ruta-cab h1{overflow-wrap:break-word}

/* Los botones se pulsan con el dedo, no con el ratón. */
.boton,.idiomas a,.menu-panel a,footer a{-webkit-tap-highlight-color:rgba(255,122,26,.2)}

@media(max-width:860px){
  .tienda{min-width:0;flex:1 1 240px;max-width:340px}
}

@media(max-width:760px){
  .barra nav a.solo-ancha{display:none}
  .menu{display:block}
  .barra nav{gap:8px}
  .barra .envoltura{height:58px;gap:8px}
  .marca{font-size:16px}
  .marca img{width:27px;height:27px}
  .idiomas{gap:2px;margin-left:0}
  .idiomas a{padding:5px 7px;font-size:11px}

  .envoltura{padding:0 18px}
  section{padding:54px 0}
  .portada{padding:58px 0 52px}
  .escena{width:126px;height:126px;margin-bottom:20px}
  .escena img{width:112px;height:112px;border-radius:26px}
  .acciones{margin-top:26px;gap:10px}
  .boton{padding:13px 20px;flex:1 1 auto;justify-content:center;min-height:48px}
  .rejilla{margin-top:28px;gap:13px}
  .tarjeta{padding:20px}
  .cifras{grid-template-columns:1fr 1fr}

  .ruta-cab{padding:30px 0 20px}
  .trazado{padding:12px;margin-top:18px}
  .datos{grid-template-columns:1fr 1fr;gap:10px}
  .dato{padding:14px}
  footer{padding:38px 0 46px}
}

/* Teléfonos estrechos de verdad. */
@media(max-width:400px){
  .envoltura{padding:0 15px}
  .tiendas{flex-direction:column}
  .tienda{width:100%;max-width:none}
  .acciones .boton{width:100%}
}

/* El recorte inferior del iPhone no se come el pie. */
@supports(padding:max(0px)){
  footer{padding-bottom:max(46px,calc(env(safe-area-inset-bottom) + 34px))}
}

/* ---------- El bloque de por qué existe ---------- */
.manifiesto{max-width:700px}
.manifiesto p{color:var(--texto-2);font-size:16.5px;margin-bottom:16px}
.firma{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:22px;border-top:1px solid var(--borde)}
.firma img{width:46px;height:46px;border-radius:13px;flex:0 0 auto}
.firma b{display:block;font-size:15px;font-weight:800}
.firma span{font-size:13px;color:var(--texto-3)}

/* ---------- Preguntas frecuentes ---------- */
.faqs{margin-top:34px;display:grid;gap:11px}
.faq{
  background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;
}
.faq[open]{border-color:rgba(255,122,26,.42)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 58px 20px 22px;position:relative;
  font-size:16px;font-weight:700;letter-spacing:-.2px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;
  border:1px solid var(--borde);border-radius:9px;
}
.faq summary i::before,.faq summary i::after{
  content:"";position:absolute;background:var(--naranja);border-radius:2px;
  left:50%;top:50%;transition:.2s;
}
.faq summary i::before{width:11px;height:2px;margin:-1px 0 0 -5.5px}
.faq summary i::after{width:2px;height:11px;margin:-5.5px 0 0 -1px}
.faq[open] summary i{border-color:var(--naranja)}
.faq[open] summary i::after{transform:rotate(90deg);opacity:0}
.faq p{padding:0 22px 22px;color:var(--texto-2);font-size:15px;max-width:660px}

@media(max-width:760px){
  .faq summary{padding:17px 52px 17px 18px;font-size:15px}
  .faq summary i{right:16px}
  .faq p{padding:0 18px 18px;font-size:14.5px}
  .manifiesto p{font-size:15.5px}
}

/* ---------- Iconos de trazo ----------
   Antes eran emoji. Un emoji lo pinta cada sistema a su manera: en iPhone sale de
   una forma, en Android de otra y en Windows de otra, y dentro de la misma rejilla
   unos son planos y otros de colores. Estos son SVG, heredan el naranja y pesan nada. */
.ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  background:var(--naranja-suave);color:var(--naranja);
  border:1px solid rgba(255,122,26,.22);
}
.ico svg{width:22px;height:22px;display:block}
.tarjeta:hover .ico{background:rgba(255,122,26,.22)}

/* ---------- Títulos de grupo dentro de Funciones ---------- */
.grupo-titulo{
  margin:44px 0 -6px;font-size:13px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--texto-3);
  display:flex;align-items:center;gap:12px;
}
.grupo-titulo::after{content:"";flex:1;height:1px;background:var(--borde)}
.grupo-titulo:first-of-type{margin-top:34px}

@media(max-width:760px){
  .ico{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
  .ico svg{width:20px;height:20px}
  .grupo-titulo{margin:34px 0 -4px;font-size:12px}
}