/* 1) Evitar full-bleed en mobile: que respete el contenedor */
@media (max-width: 720px) {
  .hero-wrap,
  .hero-slider,
  .hero-photo,
  .thumbs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Si tu hero.css usa el truco full-bleed, lo neutralizamos */
  .hero-wrap.fullbleed,
  .hero-wrap[data-fullbleed="true"] {
    margin-inline: 0 !important;
  }

  /* Evitar desbordes por bordes/redondeos */
  .hero-slider {
    border-radius: 12px;
    overflow: hidden;
  }
}

/* 2) Caja consistente: el padding cuenta dentro del ancho */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 3) (opcional, por si queda 1px de overflow en iOS/Chrome) */
html, body { overflow-x: hidden; }