/* 
  Ajustes globales de layout para evitar conflictos entre componentes
*/
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* 
body {
  padding-bottom: 60px;
}

@media screen and (max-height: 670px) {
  body {
    padding-bottom: 56px;
  }
}
*/

@supports (-webkit-touch-callout: none) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

.news-carousel,
.categories-carousel,
.category-menu,
.search-bar,
.bottom-nav,
.main-header {
  max-width: 100vw;
  box-sizing: border-box;
}

.home-page {
  padding-bottom: 60px;
}

@media screen and (max-height: 670px) {
  .home-page {
    padding-bottom: 56px;
  }
}

.welcome-header {
  padding: 20px 15px;
}

.welcome-header h1 {
  font-family: var(--font-destacados);
  font-size: 24px;
  margin: 0 0 10px 0;
  color: var(--color-black);
}

.welcome-header p {
  font-family: var(--font-base);
  font-size: 16px;
  margin: 0;
  color: rgba(0, 0, 0, 0.7);
}

/* === NUEVO: Restricción de 1200px para contenido === */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Asegurar que carruseles respeten el contenedor */
.news-carousel {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}