/* Fondo blanco solo para esta página */
body {
  background: #fff !important;
  color: #111; /* asegura contraste en textos */
}

/* assets/css/pages/index.css */

/* Contenedor base coherente (no pisa otros .container si los hay con más especificidad) */
.main-container,
.lm-main,
main .container {
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* Imágenes y embeds fluidos por defecto */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Evita que iframes desborden en móvil */
iframe {
  max-width: 100%;
  border: 0;
}

/* Espaciado vertical suave entre bloques de la home (no intrusivo) */
main > section,
main > div[data-section],
main .lm-section {
  padding-block: clamp(24px, 6vw, 56px);
}

/* Utilidad de “full-bleed” por si alguna sección requiere ancho completo */
.full-bleed {
  width: 100%;
  margin-inline: 0;
}

/* Soporte de reducción de movimiento del usuario */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ajustes responsivos suaves para grillas genéricas que uses en secciones */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}
@media (max-width: 1024px) {
  .grid-auto { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-auto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Botón/links principales en la home (no pisa estilos existentes) */
a.btn, button.btn, .btn-primary {
  cursor: pointer;
  text-decoration: none;
}

/* Asegura que cards/listados no rompan layout por overflow accidental */
.card, .tile, .panel {
  min-width: 0; /* importante en grillas para truncar correctamente */
}

/* ======= FIX OVERFLOW MÓVIL (SEGURO) ======= */

/* 1) Evita scroll horizontal global sin tapar vertical */
html, body { max-width: 100%; overflow-x: clip; } /* mejor que hidden */

/* 2) Toda imagen/embebido fluido */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* 3) Cualquier sección/contenedor nunca debe exceder el viewport */
section, .container, .lm-section { max-width: 100%; }

/* 4) “Viewport” para carouseles/deslizables: impide que el track empuje el ancho */
[class*="carousel"], [class*="carrusel"], [class*="slider"],
.gallery-preview, .gallery-preview__viewport,
.brands-carousel, .brands__viewport {
  overflow: hidden;
}

/* 5) Los “tracks” suelen ser flex: que no rompan el ancho */
.gallery-preview__track, .brands__track, .slider__track {
  display: flex; min-width: 100%; /* no max-content */
}

/* 6) Texto largo en títulos no rompe línea */
h1, h2, h3 { overflow-wrap: anywhere; }

/* 7) Si tienes elementos a ancho viewport, evita el bug de 100vw en móvil */
.full-bleed, .hero, .lm-drawer {
  max-width: 100vw;
}

/* 8) Footer: previene desbordes accidentales */
.lm-footer, .lm-footer .container, .lm-footer__bottom, .lm-bottom__row { max-width: 100%; }