/* ===========================================================================
   LBF Karts — estilos compartidos por todas las páginas públicas.
   Los estilos de cada bloque siguen inline (vienen del diseño). Acá viven
   sólo las bases, los estados :hover y el menú, que en el export original
   dependían de JavaScript.
   =========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:#0B0B0B;color:#F2EFE9;font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:#E7B93F;text-decoration:none}
a:hover{color:#F5D36A}
:focus-visible{outline:2px solid #F2C230;outline-offset:3px}
button,input,select{font:inherit}
input::placeholder{color:#5E584F}
input:focus,select:focus{border-color:#E7B93F;outline:none}
::selection{background:#D93A28;color:#fff}

/* ── Estados :hover que el export traía como atributo style-hover ── */
/* El hover aclara el rojo; con #E9573F el texto blanco cae a 3.56:1.
   #D93A28 da 4.58:1 y sigue leyendose como estado activo. */
.h-rojo:hover{background:#D93A28!important}
.h-oro:hover{border-color:#E7B93F!important;color:#E7B93F!important}
.h-borde:hover{border-color:#E7B93F!important}
.h-nav:hover{background:#151312!important;color:#E7B93F!important}
.h-zoom{overflow:hidden;display:block}
.h-zoom img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.h-zoom:hover img{transform:scale(1.06)}

/* ── Menú lateral ──
   Sin JS el panel queda cerrado y la navegación se hace igual desde el
   pie o desde las tarjetas: la página se lee entera. */
.velo{position:fixed;inset:0;z-index:44;background:rgba(6,6,6,.7);
  opacity:0;pointer-events:none;transition:opacity .3s;border:0;padding:0;cursor:pointer}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(400px,86vw);
  background:#0E0D0C;border-left:1px solid #2A2621;transform:translateX(101%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow-y:auto}
body.menu-abierto{overflow:hidden}
body.menu-abierto .velo{opacity:1;pointer-events:auto}
body.menu-abierto .panel{transform:translateX(0)}

.hamburguesa{flex:none;width:48px;height:44px;display:grid;place-items:center;gap:0;
  background:transparent;border:1px solid #3A352E;cursor:pointer;transition:border-color .2s}
.hamburguesa span{display:block;width:20px;height:2px;background:#F2EFE9;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s,background .2s}
.hamburguesa:hover{border-color:#E7B93F}
body.menu-abierto .hamburguesa{border-color:#E7B93F}
body.menu-abierto .hamburguesa span{background:#E7B93F}
/* Las tres barras están en un grid de 3 filas de 2px con 5px de hueco:
   7px de centro a centro. Por eso el desplazamiento es exactamente 7px. */
body.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Salto al contenido: primer tabulador de la pagina ── */
.saltar{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;
  background:#E7B93F;color:#0B0B0B;font-weight:800;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
.saltar:focus{left:8px;top:8px;color:#0B0B0B}

/* ── Navegacion de escritorio ──
   Debajo de 1024px no se muestra: ahi manda la hamburguesa y el panel. */
.nav-esc{display:none}
@media (min-width:1024px){
  .nav-esc{display:flex;align-items:center;gap:4px;margin-left:18px}
  .nav-esc .nav-link{display:inline-flex;align-items:center;height:40px;padding:0 12px;
    color:#D8D2C9;font-size:13.5px;font-weight:700;letter-spacing:.04em;
    border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
  .nav-esc .nav-link:hover{color:#E7B93F}
  .nav-esc .nav-link.activo{color:#E7B93F;border-bottom-color:#D93A28}
  /* Con los enlaces a la vista la hamburguesa sobra. */
  .hamburguesa{display:none}
}

/* ── Franja de pit lane: la firma de la marca ── */
.pit{height:5px;background:repeating-linear-gradient(90deg,#D93A28 0 13px,#E8E4DC 13px 19px)}

/* ── Sliders del calculador de karts ── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:38px;
  background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#2A2621}
input[type=range]::-moz-range-track{height:6px;background:#2A2621}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  margin-top:-10px;background:#E7B93F;border:3px solid #0B0B0B;box-shadow:0 0 0 1px #E7B93F;border-radius:50%}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#E7B93F;
  border:3px solid #0B0B0B;border-radius:50%}

[data-scroll-x]{scrollbar-width:none;-ms-overflow-style:none}
[data-scroll-x]::-webkit-scrollbar{display:none}

@media (max-width:900px){
  [data-kart-panel]{flex:1 1 100%!important}
  [data-hero-tipo]{font-size:clamp(52px,15vw,110px)!important}
}
@media (max-width:768px){
  [data-oculto-movil]{display:none!important}
  [data-hero-media]{object-position:52% 42%!important}
}
@media (max-width:640px){
  [data-video-predio]{aspect-ratio:4/3!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001s!important;animation:none!important}
}