/* ================================================================
   RESET RESPONSIVO GLOBAL - Zona Litoral
   Correcciones para imágenes gigantes y diseño roto
   ================================================================ */

/* Reset HTML5 */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* RESET CRÍTICO DE IMÁGENES - Todas responsivas */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Imágenes dentro de links */
a img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Imágenes de producto específicamente */
.card-img, .card-img-top, .card-img-bottom {
    max-width: 100% !important;
    height: auto !important;
}

/* Contenedor de imágenes */
.img-wrap, .img-container, .image-container {
    max-width: 100%;
    overflow: hidden;
}

.img-wrap img, .img-container img, .image-container img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* SVG responsivo */
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Contenedores de media */
.media-container, .image-block, .photo-container {
    max-width: 100%;
    overflow: hidden;
}

/* Reset de figuras */
figure {
    max-width: 100%;
    overflow: hidden;
}

figure img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Bootstrap img-fluid asegurado */
.img-fluid {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Carousel y sliders */
.carousel img, .slider img, .gallery img {
    max-width: 100% !important;
    height: auto !important;
}

/* Imágenes en tarjetas (custom) */
.product-image, .item-image, .thumbnail-image {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Imágenes en héroe/banner */
.hero-image, .banner-image, .hero img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* CONTENEDORES RESPONSIVOS */
.container, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Aseguramos que los divs no rompan el flujo */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.col, [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

/* Grid Bootstrap responsivo garantizado */
@media (max-width: 576px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .col-sm-1 { width: 8.333333%; }
    .col-sm-2 { width: 16.666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.333333%; }
    .col-sm-5 { width: 41.666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.333333%; }
    .col-sm-8 { width: 66.666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1 { width: 8.333333%; }
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-8 { width: 66.666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1 { width: 8.333333%; }
    .col-lg-2 { width: 16.666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333333%; }
    .col-lg-8 { width: 66.666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1 { width: 8.333333%; }
    .col-xl-2 { width: 16.666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.333333%; }
    .col-xl-5 { width: 41.666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.333333%; }
    .col-xl-8 { width: 66.666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.333333%; }
    .col-xl-11 { width: 91.666667%; }
    .col-xl-12 { width: 100%; }
}

/* Asegurar que las tarjetas se comportan bien */
.card {
    width: 100%;
    overflow: hidden;
}

.card-body {
    overflow: auto;
}

/* Tables responsivas */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* Embeds responsivos (videos) */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* GARANTIZAR QUE NO HAYA OVERFLOW */
main, section, article, aside {
    max-width: 100%;
    overflow-x: hidden;
}

/* Navbar y fixed elements */
nav {
    max-width: 100%;
    overflow-x: hidden;
}

footer {
    max-width: 100%;
    overflow-x: hidden;
}

/* Forzar que los elementos no se salgan de la pantalla */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Safari fix para images */
img {
    -webkit-transform: translate3d(0, 0, 0);
}

/* Fix específico para Zona Litoral */
.floating-mabel,
.mabel-face {
    max-width: 100% !important;
    height: auto !important;
}

/* Imágenes de hero con filtros */
.hero img, .hero-section img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Asegurar que los espacios de padding no rompan el flujo */
.p-5, .px-5, .py-5,
.p-4, .px-4, .py-4,
.p-3, .px-3, .py-3 {
    max-width: 100%;
    overflow-x: hidden;
}