/* =====================================================================
   SECONDBIKE — global.css · Dirección "Carril" (v3.2)
   Cabecera fija en el verde de su menú, siempre del mismo alto y sin
   efectos al hacer scroll. Sin líneas discontinuas ni cadenas: el único
   recurso del taller es la carretera de los servicios, por la que baja la
   rueda del logo.
   Colores: los suyos. Verde de su menú (#3F9104), su verde activo
   (#1B7613), negro de sus botones y blanco.
   ===================================================================== */

/* ---------- Fuentes autoalojadas (subconjunto latino, variables) ---------- */
@font-face{
  font-family:'Saira';
  src:url('../fonts/saira-italic.woff2') format('woff2');
  font-style:italic;
  font-weight:100 900;
  font-stretch:50% 125%;
  font-display:swap;
}
@font-face{
  font-family:'Saira';
  src:url('../fonts/saira.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-stretch:50% 125%;
  font-display:swap;
}
@font-face{
  font-family:'Red Hat Text';
  src:url('../fonts/red-hat-text.woff2') format('woff2');
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}
@font-face{
  font-family:'Red Hat Text';
  src:url('../fonts/red-hat-text-italic.woff2') format('woff2');
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Los suyos */
  --verde:#3F9104;          /* el verde de su menú (.header-wrapper). Texto negro 5,3:1; blanco solo en texto grande */
  --verde-activo:#1B7613;   /* su verde de menú activo. Blanco encima: 5,8:1 */
  --verde-vivo:#4FA814;     /* hover sobre verde (capa) */
  --verde-hondo:#1E4A0B;    /* su banda de datos, más honda. Blanco encima: 10:1 */
  --verde-texto:#2E6B04;    /* verde para texto sobre blanco: 6,3:1 */
  --verde-claro:#E4EFD8;
  --negro:#000000;          /* su primario: botones */
  --blanco:#FFFFFF;

  /* El taller: asfalto del carril */
  --asfalto:#262825;
  --acero:#A7ACA2;

  /* Neutros con un punto de verde */
  --fondo:#FFFFFF;
  --tinte:#F2F5EE;
  --texto:#30332E;
  --texto-suave:#5B6056;    /* 6,2:1 sobre blanco · 5,6:1 sobre tinte */
  --linea:#D6DCCF;

  /* WhatsApp, solo en WhatsApp */
  --wa:#25D366;
  --wa-tinta:#062E14;

  --sombra-1:0 1px 2px rgba(30,74,11,.06), 0 16px 36px -22px rgba(30,74,11,.34);
  --sombra-2:0 2px 6px rgba(30,74,11,.07), 0 30px 64px -30px rgba(30,74,11,.45);

  --display:'Saira','Arial Narrow',system-ui,sans-serif;
  --cuerpo:'Red Hat Text',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --muelle:cubic-bezier(.34,1.4,.64,1);
  --t-press:100ms;
  --t-corto:200ms;
  --t-medio:500ms;
  --t-largo:800ms;

  --env:1320px;
  --margen:clamp(16px,4vw,56px);
  --sec:clamp(72px,9vw,136px);
  --cab-alto:72px;
  --cadena-alto:0px;        /* sin cadena bajo la cabecera (v3.1) */
  --r-isla:24px;            /* las islas de madera redondeadas de su suelo */
  --r-tarjeta:16px;
  --r-pequeno:8px;
  --r-pill:999px;

  --anillo:#000;            /* anillo de foco, se invierte en fondos oscuros */
}
@media (max-width:999px){ :root{--cab-alto:62px} }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cab-alto) + var(--cadena-alto) + 16px);
}
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:17px;
  line-height:1.7;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
@media (min-width:1000px){ body{font-size:18px} }
img,svg,picture{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
figure > picture{height:100%}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.2em}
strong{font-weight:650;color:#1C1E1A}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--display);font-style:italic;font-weight:800;font-stretch:108%;line-height:1.05;letter-spacing:0;color:var(--negro);text-wrap:balance}
[hidden]{display:none !important}

:focus{outline:none}
:focus-visible{outline:3px solid var(--anillo);outline-offset:3px;border-radius:4px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.salta{position:fixed;left:16px;top:12px;z-index:100;background:var(--negro);color:#fff;padding:10px 16px;border-radius:var(--r-pequeno);font-weight:600;transform:translateY(-160%)}
.salta:focus-visible{transform:none;--anillo:var(--verde)}

.env{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--margen)}
.sec{padding-block:var(--sec)}
.sec--tinte{background:var(--tinte)}

/* ---------- Tipografía de sección ---------- */
.titulo{font-size:clamp(32px,4.6vw,60px);font-weight:820;font-stretch:112%;line-height:1.02}
.titulo--blanco{color:#fff}
.entradilla{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:#262924}
.destacado{font-family:var(--display);font-style:italic;font-weight:700;font-stretch:104%;font-size:clamp(19px,1.6vw,22px);line-height:1.3;color:var(--negro)}
.enlace{font-weight:650;color:var(--negro);text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:2px}
.enlace:hover{text-decoration-color:var(--negro)}

/* ---------- Botones ----------
   Una capa (::before) cambia el tono por opacidad; el botón sube 2 px.
   Nunca se anima el color de fondo. */
.boton{
  --capa:rgba(255,255,255,.14);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--cuerpo);font-size:16px;font-weight:650;line-height:1.2;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  transition:transform var(--t-corto) var(--ease);
}
.boton::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--capa);opacity:0;transition:opacity var(--t-corto) var(--ease)}
.boton svg{width:19px;height:19px;flex:none}
.boton:hover{transform:translateY(-2px)}
.boton:hover::before{opacity:1}
.boton:active{transform:scale(.97);transition-duration:var(--t-press)}
.boton--grande{min-height:56px;padding:0 26px;font-size:17px}
.boton--negro{background:var(--negro);color:#fff}
.boton--verde{background:var(--verde);color:#fff;font-size:19px;font-weight:700;--capa:rgba(255,255,255,.16)}
.boton--activo{background:var(--verde-activo);color:#fff;--capa:rgba(255,255,255,.14)}
/* Botón solo icono (llamar, WhatsApp): el verde del menú, icono blanco */
.boton-icono{
  --capa:rgba(255,255,255,.18);
  position:relative;isolation:isolate;flex:none;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--verde);color:#fff;transition:transform var(--t-corto) var(--ease);
}
.boton-icono::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--capa);opacity:0;transition:opacity var(--t-corto) var(--ease)}
.boton-icono svg{width:24px;height:24px}
.boton-icono:hover{transform:translateY(-2px)}
.boton-icono:hover::before{opacity:1}
.boton-icono:active{transform:scale(.94);transition-duration:var(--t-press)}
.boton--wa{background:var(--wa);color:var(--wa-tinta);--capa:rgba(255,255,255,.22)}
.boton--blanco{background:#fff;color:var(--negro);--capa:rgba(63,145,4,.14)}
.boton--claro{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);--capa:rgba(255,255,255,.14)}
.boton--borde{color:var(--negro);box-shadow:inset 0 0 0 2px var(--negro);--capa:rgba(0,0,0,.06)}
.fila-botones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* ---------- Cabecera: su verde, texto negro como el "bike" del logo ---------- */
.cab{position:sticky;top:0;z-index:50;background:var(--verde);color:var(--negro)}
.cab__fila{height:var(--cab-alto);display:flex;align-items:center;gap:24px}
.logo{flex:none;display:block;border-radius:6px}
.logo img{height:40px;width:auto}
@media (max-width:999px){ .logo img{height:32px} }
@media (max-width:389px){ .logo img{height:28px} }

.nav{display:none;margin-left:auto}
.nav__lista{display:flex;align-items:center;gap:4px}
.nav__lista > li > a,.nav__boton{
  display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;
  font-size:16px;font-weight:650;color:var(--negro);text-decoration:none;border-radius:var(--r-pill);white-space:nowrap;
  position:relative;
}
.nav__lista > li > a::after,.nav__boton::after{content:'';position:absolute;left:14px;right:14px;bottom:8px;height:2px;background:var(--negro);transform:scaleX(0);transform-origin:left;transition:transform var(--t-corto) var(--ease)}
.nav__lista > li > a:hover::after,.nav__boton:hover::after,.nav__boton[aria-expanded="true"]::after{transform:scaleX(1)}
.nav__boton svg{width:16px;height:16px;transition:transform var(--t-corto) var(--ease)}
.nav__boton[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__desp{position:relative}
.mega{
  position:absolute;top:calc(100% + 14px);left:-12px;width:min(460px,80vw);padding:10px;
  background:#fff;border-radius:18px;box-shadow:0 2px 6px rgba(30,74,11,.08),0 28px 60px -24px rgba(30,74,11,.45);
  opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity var(--t-corto) var(--ease),transform 300ms var(--ease),visibility 0s linear 300ms;
}
.mega::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__desp.is-abierto .mega{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.mega__item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:12px;border-radius:12px;text-decoration:none;color:var(--negro)}
.mega__item:hover{background:var(--tinte)}
.mega__icono{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--verde);color:#fff}
.mega__icono svg{width:22px;height:22px}
.mega__item strong{display:block;font-size:16px;font-weight:700;line-height:1.3}
.mega__item small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--texto-suave)}
.mega__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 2px 2px;padding:12px 12px 4px;border-top:1px solid var(--linea);font-size:14px;color:var(--texto-suave)}

.cab__acciones{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:1000px){ .nav + .cab__acciones{margin-left:0} }
.boton--cab{min-height:46px;padding:0 20px;font-size:16px;font-weight:700}
.solo-ancho{display:none}
.cab__menu{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:var(--r-pill);font-size:15px;font-weight:650;box-shadow:inset 0 0 0 2px var(--negro);transition:transform var(--t-corto) var(--ease)}
.cab__menu svg{width:22px;height:22px}
.cab__menu:active{transform:scale(.96)}
.cab .estado{display:none}

@media (max-width:519px){
  .boton--cab{padding:0 14px}
  .boton--cab span{display:none}
  .boton--cab{width:44px;padding:0}
  .cab__menu span{display:none}
  .cab__menu{width:44px;padding:0;justify-content:center}
}
@media (min-width:1000px){
  .nav{display:block}
  .cab__menu{display:none}
  .cab__fila{gap:20px}
}
@media (min-width:1180px){ .solo-ancho{display:inline} }

/* ---------- Estado abierto / cerrado (se calcula con su horario) ---------- */
.estado{align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.estado__punto{width:9px;height:9px;border-radius:50%;background:#8C9186;flex:none}
.estado[data-abierto="si"] .estado__punto{background:#6ED12A;box-shadow:0 0 0 3px rgba(110,209,42,.25)}
.cab .estado{padding:0 12px;height:36px;border-radius:var(--r-pill);background:rgba(0,0,0,.1)}
.cab .estado[data-abierto="si"] .estado__punto{background:#000;box-shadow:0 0 0 3px rgba(0,0,0,.14)}

/* ---------- Menú (móvil y tableta) ---------- */
.menu{
  position:fixed;inset:calc(var(--cab-alto) + var(--cadena-alto)) 0 0 0;z-index:49;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--verde);color:var(--negro);
  padding:24px var(--margen) calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:32px;
}
.menu.is-abierto{animation:menuEntra 360ms var(--ease) both}
@keyframes menuEntra{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.menu__grupo{margin:0 0 4px;font-size:15px;font-weight:700;color:#0E1A07}
.menu__lista{margin-bottom:22px}
.menu__lista a{display:block;padding:7px 0;font-family:var(--display);font-style:italic;font-weight:760;font-stretch:108%;font-size:clamp(24px,6.4vw,30px);line-height:1.15;text-decoration:none}
.menu__lista a:hover{text-decoration:underline;text-decoration-thickness:3px}
.menu__contacto{display:grid;gap:12px;margin-top:auto;max-width:420px}
.menu__contacto .boton{justify-content:flex-start}
.menu__contacto p{margin:8px 0 0;font-weight:600;line-height:1.55}
html.menu-abierto{overflow:hidden}

/* ---------- Pie ---------- */
.pie{background:var(--verde);color:var(--negro);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.pie__rejilla{display:grid;gap:40px;padding-block:56px 40px}
.pie__marca img{width:190px;margin-bottom:22px}
.pie__marca p{max-width:46ch;font-size:16px;line-height:1.65}
.pie__titulo{font-family:var(--display);font-style:italic;font-weight:760;font-stretch:108%;font-size:22px;margin-bottom:14px}
.pie__col ul{display:grid;gap:6px}
.pie__col a{text-decoration:none;font-weight:600}
.pie__col a:hover{text-decoration:underline}
.pie__contacto li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.55;padding-block:4px}
.pie__contacto svg{width:20px;height:20px;margin-top:2px}
.pie__red{display:inline-grid;place-items:center;width:44px;height:44px;margin-top:18px;border-radius:50%;background:var(--negro);color:#fff;transition:transform var(--t-corto) var(--ease)}
.pie__red svg{width:22px;height:22px}
.pie__red:hover{transform:translateY(-2px)}
.pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:20px 8px;border-top:1px solid rgba(0,0,0,.22);font-size:15px}
.pie__legal p{margin:0}
.pie__legal ul{display:flex;gap:20px}
.pie__legal a{text-decoration:none;font-weight:600}
.pie__legal a:hover{text-decoration:underline}
@media (min-width:600px){ .pie__rejilla{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .pie__rejilla{grid-template-columns:1.35fr .9fr .9fr 1.25fr;gap:40px} }

/* ---------- Barra fija en móvil ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:6px;
  background:var(--asfalto);
  transform:translateY(110%);transition:transform 420ms var(--ease);
}
.barra[data-visible="si"]{transform:none}
.barra a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;color:#fff;text-decoration:none;font-size:13px;font-weight:650;--anillo:#fff;transition:transform var(--t-press) var(--ease)}
.barra a:active{transform:scale(.96)}
.barra svg{width:22px;height:22px}
.barra__wa{background:var(--verde-activo)}
@media (max-width:899px){ body{padding-bottom:calc(66px + env(safe-area-inset-bottom))} }
@media (min-width:900px){ .barra{display:none} }

/* ---------- WhatsApp flotante (escritorio) ---------- */
.wa-flotante{
  position:fixed;right:24px;bottom:24px;z-index:40;
  display:none;align-items:center;gap:0;height:58px;padding:0;border-radius:var(--r-pill);
  background:var(--verde);color:#fff;text-decoration:none;font-weight:650;font-size:15px;
  box-shadow:0 10px 28px -10px rgba(30,74,11,.6);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity 320ms var(--ease),transform 420ms var(--muelle);
}
.wa-flotante[data-visible="si"]{opacity:1;transform:none;pointer-events:auto}
.wa-flotante svg{width:30px;height:30px;margin:0 14px}
.wa-flotante span{position:absolute;right:calc(100% + 12px);white-space:nowrap;padding:10px 16px;border-radius:var(--r-pill);background:#fff;color:var(--negro);box-shadow:var(--sombra-1);opacity:0;transform:translateX(8px);transition:opacity var(--t-corto) var(--ease),transform var(--t-corto) var(--ease);pointer-events:none}
.wa-flotante:hover span,.wa-flotante:focus-visible span{opacity:1;transform:none}
@media (min-width:900px){ .wa-flotante{display:inline-flex} }

/* ---------- Movimiento reducido y capturas ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0s !important;transition-duration:1ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
}
.captura *,.captura *::before,.captura *::after{animation-duration:1ms !important;animation-delay:0s !important;transition-duration:1ms !important;transition-delay:0s !important}