body {
      background-color: #0A0A0A;
      color: #F5F5F5;
      font-family: 'Roboto', sans-serif;
    }
    h1, h2, h3, h4, .font-display {
      font-family: 'Montserrat', sans-serif;
    }
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #141414;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #E50914;
      border-radius: 4px;
    }

/* Iconos gráficos de beneficios */
.benefit-icon{height:2.1rem;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#f4f4f5}.peru-flag-icon{display:inline-block;width:2.6rem;height:1.65rem;border-radius:.2rem;border:1px solid #3f3f46;background:linear-gradient(90deg,#d91023 0 33.333%,#fff 33.333% 66.666%,#d91023 66.666% 100%);box-shadow:0 1px 4px rgba(0,0,0,.45)}

/* Ficha técnica: visor ampliado de imágenes */
#modalImage{transition:transform .2s ease}
#modalImage:hover{transform:scale(1.015)}
#imageZoomModal img{user-select:none;-webkit-user-drag:none}
@media (max-width:640px){#imageZoomModal{padding:12px}#zoomImage{max-height:84vh;max-width:96vw}}

/* Carrusel dinámico de fotos de clientes: derecha a izquierda */
.jvt-customer-carousel{position:relative;width:100%;overflow:hidden;padding:.5rem .15rem 1rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.jvt-customer-track{display:flex;width:max-content;animation:jvtCustomerScroll 32s linear infinite;will-change:transform}
.jvt-customer-set{display:flex;gap:1rem;padding-right:1rem}
.jvt-customer-card{width:280px;flex:0 0 280px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.jvt-customer-card:hover{transform:translateY(-8px) scale(1.025);box-shadow:0 18px 38px rgba(0,0,0,.45);border-color:#E50914}
.jvt-customer-image-wrap{position:relative;overflow:hidden}
.jvt-customer-card img{transition:transform .5s ease,filter .5s ease}
.jvt-customer-card:hover img{transform:scale(1.08);filter:brightness(.72)}
.jvt-customer-hover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:#fff;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:0;background:rgba(0,0,0,.2);transition:opacity .35s ease}
.jvt-customer-hover i{font-size:1.5rem}
.jvt-customer-card:hover .jvt-customer-hover{opacity:1}
.jvt-customer-carousel:hover .jvt-customer-track{animation-play-state:paused}
@keyframes jvtCustomerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.jvt-customer-card{width:230px;flex-basis:230px}.jvt-customer-set{gap:.75rem;padding-right:.75rem}.jvt-customer-track{animation-duration:26s}}

/* Pago contra entrega: destacado premium, integrado al estilo oscuro de JVT MOTOS */
.jvt-payment-highlight{padding:1.15rem 0;background:linear-gradient(180deg,#0c0c0c 0%,#090909 100%);border-top:1px solid #252525;border-bottom:1px solid #252525}
.jvt-payment-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.1rem 1.35rem;border:1px solid #2d2d2d;border-left:3px solid #E50914;border-radius:16px;background:linear-gradient(135deg,#151515 0%,#101010 55%,#0d0d0d 100%);box-shadow:0 10px 30px rgba(0,0,0,.28);overflow:hidden}
.jvt-payment-card::after{content:"";position:absolute;right:-80px;top:-110px;width:260px;height:260px;border-radius:50%;background:rgba(229,9,20,.055);pointer-events:none}
.jvt-payment-copy{display:flex;align-items:center;gap:1rem;min-width:0}
.jvt-payment-icon{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(229,9,20,.10);border:1px solid rgba(229,9,20,.35);color:#E50914;font-size:1.25rem}
.jvt-payment-kicker{font-size:.62rem;line-height:1;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#a1a1aa;margin-bottom:.35rem}
.jvt-payment-title{margin:0;font-family:'Montserrat',sans-serif;font-size:clamp(1.05rem,2.2vw,1.45rem);line-height:1.1;font-weight:900;letter-spacing:.02em;color:#fff}
.jvt-payment-title span{color:#E50914}
.jvt-payment-text{margin:.35rem 0 0;color:#d4d4d8;font-size:.82rem;line-height:1.45;max-width:760px}
.jvt-payment-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 auto;padding:.72rem 1.15rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#E50914;color:#fff;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:900;letter-spacing:.04em;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 7px 18px rgba(229,9,20,.18)}
.jvt-payment-button:hover{background:#c90812;transform:translateY(-1px);box-shadow:0 10px 24px rgba(229,9,20,.28)}
.jvt-commercial-messages{padding:1.55rem 0 1.7rem;background:#0a0a0a;border-bottom:1px solid #1f1f1f}
.jvt-commercial-card{min-height:92px;padding:1rem 1.1rem;border:1px solid #292929;border-radius:13px;background:linear-gradient(145deg,#151515,#111);box-shadow:0 5px 16px rgba(0,0,0,.18);transition:border-color .2s ease,transform .2s ease}
.jvt-commercial-card:hover{border-color:#3b3b3b;transform:translateY(-2px)}
.jvt-commercial-label{margin:0;font-size:.62rem;line-height:1;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#E50914}
.jvt-commercial-text{margin:.55rem 0 0;color:#fff;font-size:.88rem;line-height:1.45;font-weight:500}
@media(max-width:767px){.jvt-payment-card{align-items:flex-start;flex-direction:column;padding:1rem}.jvt-payment-copy{align-items:flex-start}.jvt-payment-button{width:100%}.jvt-commercial-card{min-height:auto}}


/* Ajustes específicos para móviles: mantienen la estética de escritorio y evitan desbordes */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:767px){
  /* Encabezado compacto para pantallas pequeñas */
  header .h-20{height:4.25rem}
  header #headerLogo{width:3.5rem;height:3.5rem;flex:0 0 3.5rem}
  header #headerStoreName{font-size:1.05rem;letter-spacing:.04em}
  header #headerSlogan{font-size:.48rem;letter-spacing:.11em}
  header .items-center.gap-3{gap:.35rem}
  header #userAccountLabel{display:none}
  header .p-2\.5{padding:.55rem}
  header #headerWhatsappBtn{padding:.6rem .7rem}
  header #headerWhatsappBtn i{font-size:1rem}

  /* Banda superior más limpia en celular */
  body > div.bg-jvtRed{font-size:.62rem;line-height:1.2;min-height:2rem}

  /* Hero: reduce el espacio vertical sin sacrificar la imagen */
  #inicio{padding-top:3.5rem;padding-bottom:3.5rem}
  #inicio .grid{gap:2rem}
  #inicio .mt-12{margin-top:2rem}

  /* Pago contra entrega */
  .jvt-payment-highlight{padding:.8rem 0}
  .jvt-payment-card{gap:.85rem;padding:.9rem;border-radius:13px}
  .jvt-payment-copy{width:100%;gap:.75rem}
  .jvt-payment-icon{width:42px;height:42px;flex-basis:42px;font-size:1.05rem;border-radius:10px}
  .jvt-payment-kicker{font-size:.54rem;letter-spacing:.12em}
  .jvt-payment-title{font-size:1.05rem}
  .jvt-payment-text{font-size:.76rem;line-height:1.4}
  .jvt-payment-button{width:100%;padding:.68rem .9rem;font-size:.68rem}

  /* Tarjetas comerciales */
  .jvt-commercial-messages{padding:.9rem 0 1.1rem}
  .jvt-commercial-card{padding:.85rem .95rem;border-radius:11px}
  .jvt-commercial-label{font-size:.58rem}
  .jvt-commercial-text{font-size:.78rem;line-height:1.4;margin-top:.45rem}

  /* Carrito: elimina el espacio lateral que podía provocar desborde en 320–390 px */
  #cartDrawer > .fixed.inset-y-0.right-0{padding-left:0}
  #cartDrawer > .fixed.inset-y-0.right-0 > .w-screen{width:100vw;max-width:100vw}
  #cartDrawer .p-6{padding:1rem}
  #cartDrawer h2{font-size:1rem}

  /* Checkout y ficha técnica */
  #checkoutModal{padding:.65rem}
  #checkoutModal > div{margin-top:.75rem;margin-bottom:.75rem;padding:1rem}
  #checkoutModal h2{font-size:1.15rem;line-height:1.2;padding-right:1.5rem}
  #productModal{padding:.65rem}
  #productModal > div{margin-top:.75rem;margin-bottom:.75rem}
  #productModal .p-6{padding:1rem}
  #productModal #modalTitle{font-size:1.25rem;line-height:1.15}
  #productModal .grid.grid-cols-2.gap-2{grid-template-columns:1fr}

  /* Controles táctiles */
  button,a{touch-action:manipulation}
  #floatingWhatsappBtn{right:1rem;bottom:1rem;padding:.8rem}
  #floatingWhatsappBtn i{font-size:1.45rem}
}
@media(max-width:380px){
  header #headerStoreName{font-size:.95rem}
  header #headerLogo{width:3rem;height:3rem;flex-basis:3rem}
  header .items-center.gap-3{gap:.25rem}
  #inicio .grid-cols-3{gap:.5rem}
  #inicio .grid-cols-3 p{font-size:.65rem}
  .jvt-payment-title{font-size:.98rem}
  .jvt-payment-text{font-size:.72rem}
}

/* Encabezado fijo al desplazarse: único ajuste solicitado. Mantiene el diseño y evita saltos de contenido. */
header.jvt-header-fixed{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1000 !important;
}
header.jvt-header-fixed + #inicio{
  margin-top:var(--jvt-header-height,5rem) !important;
}
@media(max-width:767px){
  header.jvt-header-fixed + #inicio{
    margin-top:var(--jvt-header-height,4.25rem) !important;
  }
}


/* Interacción de ventanas emergentes: al abrir un modal, la página principal queda inmóvil.
   El scroll queda limitado exclusivamente al contenedor emergente activo. */
html:has(body.jvt-modal-open),
body.jvt-modal-open{
  overscroll-behavior: none;
}
#reviewModal,
#productModal,
#imageZoomModal,
#quoteRequestModal,
#cartDrawer,
#checkoutModal,
#userAuthModal,
#accountSettingsModal,
#voucherModal{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#reviewModal,
#productModal,
#checkoutModal,
#accountSettingsModal{
  overscroll-behavior-y: contain;
}
#cartDrawer .overflow-y-auto,
#checkoutModal .overflow-y-auto{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* Documentos legales: lectura cómoda en modal */
.legal-document h3 { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .025em; margin-bottom: .4rem; font-size: .82rem; }
.legal-document p { color: #d4d4d8; }
.legal-document a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal-document a:hover { color: #ef4444; }

/* Optimización móvil solicitada: catálogo en dos columnas y ficha técnica usable en pantallas pequeñas */
@media (max-width: 767px) {
  /* Catálogo: dos motos por fila para reducir el desplazamiento vertical */
  #featuredGrid,
  #productGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
  }
  #featuredGrid article,
  #productGrid article { min-width: 0; border-radius: .8rem; }
  #featuredGrid article > div:first-child,
  #productGrid article > div:first-child { height: 8.75rem !important; }
  #featuredGrid article > div:nth-child(2),
  #productGrid article > div:nth-child(2) { padding: .55rem !important; }
  #featuredGrid article h3,
  #productGrid article h3 { font-size: .76rem !important; line-height: 1.2; min-height: 2.25em; }
  #featuredGrid article .my-2,
  #productGrid article .my-2 { margin-top: .35rem; margin-bottom: .35rem; padding-top: .35rem; font-size: .58rem; }
  #featuredGrid article .mt-2.flex.flex-wrap,
  #productGrid article .mt-2.flex.flex-wrap { gap: .2rem; }
  #featuredGrid article .mt-2.flex.flex-wrap span,
  #productGrid article .mt-2.flex.flex-wrap span { font-size: .43rem !important; padding: .15rem .25rem; }
  #featuredGrid article > div:last-child,
  #productGrid article > div:last-child { padding: 0 .45rem .5rem !important; }
  #featuredGrid article > div:last-child .grid,
  #productGrid article > div:last-child .grid { gap: .2rem !important; }
  #featuredGrid article > div:last-child .grid button,
  #productGrid article > div:last-child .grid button { font-size: .53rem !important; line-height: 1.2; padding: .45rem .1rem !important; }
  #featuredGrid article > div:last-child > button,
  #productGrid article > div:last-child > button { font-size: .58rem !important; padding: .45rem .15rem !important; }

  /* Ficha técnica: ocupa el viewport, tiene scroll propio y conserva visible el botón de cierre */
  /* No sobrescribir .hidden: el modal debe desaparecer al cerrarse.
     * La regla anterior con #productModal mantenía display:block incluso oculto,
     * impidiendo cerrar la ficha y dejando bloqueado el scroll de fondo. */
  #productModal:not(.hidden) {
    display: block !important;
    padding: .35rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #productModal > div {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - .7rem) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    border-radius: .9rem !important;
    padding-bottom: .5rem;
  }
  #productModal > div > button[onclick="closeModal()"] {
    position: fixed !important;
    top: .65rem !important;
    right: .65rem !important;
    z-index: 1300 !important;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #18181b !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.65);
  }
  #productModal > div > .grid { grid-template-columns: minmax(0,1fr) !important; }
  #productModal > div > .grid > div:first-child {
    height: min(31vh, 13rem) !important;
    min-height: 9rem;
    padding: .55rem !important;
  }
  #productModal #modalImage { max-height: 28vh; }
  #productModal #modalBrandBadge { top: .6rem; left: .6rem; font-size: .55rem; padding: .25rem .45rem; }
  #productModal > div > .grid > div:last-child { padding: .8rem !important; }
  #productModal #modalTitle { font-size: 1.05rem !important; padding-right: 2.4rem; margin-bottom: .35rem; }
  #productModal #modalPrice { font-size: 1.45rem !important; margin-bottom: .8rem; }
  #productModal #modalSpecs { max-height: none !important; overflow: visible !important; margin-bottom: .85rem; font-size: .75rem; }
  #productModal #modalSpecs li { gap: .5rem; padding: .35rem 0; }
  #productModal #modalSpecs li > span:first-child { min-width: 6.5rem; }
  #productModal #modalThumbnails button { height: 3rem; }
  #productModal #modalAddToCartBtn,
  #productModal #modalBuyNowBtn,
  #productModal #modalWhatsappLink { font-size: .67rem !important; padding: .65rem .45rem !important; }
}

@media (max-width: 380px) {
  #featuredGrid, #productGrid { gap: .45rem !important; }
  #featuredGrid article > div:first-child,
  #productGrid article > div:first-child { height: 7.5rem !important; }
  #featuredGrid article > div:last-child .grid button,
  #productGrid article > div:last-child .grid button { font-size: .48rem !important; }
}