/* Última capa de contención del lienzo.
   Se carga después de los estilos históricos para impedir que una capa visual
   aumente el ancho de documento en móviles, tablets o escritorio. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
  overscroll-behavior-x: none;
}

body {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip !important;
}

/* Fallback para navegadores que aún no implementan `clip`. */
@supports not (overflow: clip) {
  html,
  body { overflow-x: hidden !important; }
}

/* Carruseles y pistas animadas permanecen recortados por su propio módulo. */
.marquee,
.client-marquee,
.hero-visual,
.home-video-hero,
.fleet-hero-carousel,
.hero-carousel,
.personal-carousel,
.moto-carousel { overflow-x: clip !important; }

/* El menú móvil se mantiene dentro del lienzo; se muestra con opacidad. */
@media (max-width: 1050px) {
  body > .mobile-nav-panel {
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}

/* Controles flotantes anclados al borde visible, sin cálculos de ancho. */
.floating-controls {
  left: auto !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  max-width: calc(100% - 36px) !important;
}

@media (max-width: 850px) {
  .floating-controls {
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100% - 24px) !important;
  }
}