/* Full-bleed sin scroll horizontal */
.catalogo, .filtros-grid-categorias { padding: 0; }
.filtros-grid-categorias {
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Grid responsive full-width (sin JS) */
.grid-categorias {
    display: grid;
    gap: 12px;
    width: 100%;
    align-items: start;
    grid-auto-flow: dense; /* empaquetado sin huecos; la última queda a la izquierda */
}
/* Modificadores de columnas según cantidad */
.grid-categorias.grid-1-col { grid-template-columns: 1fr; }
.grid-categorias.grid-2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-categorias.grid-3-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.categoria-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0 !important;
    background: #111;
}
/* Variación de ancho por tamaño (escritorio) */
.categoria-item.grande { grid-column: span 2; }
.categoria-item.mediana { grid-column: span 1; }
.categoria-item.pequena { grid-column: span 1; }

.categoria-img-wrapper {
    position: relative;
    width: 100%;
}
.categoria-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .3s ease, transform .3s ease;
}
/* Overlay uniforme para legibilidad del texto */
.categoria-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    transition: opacity .3s ease;
    pointer-events: none;
}
/* Texto centrado en medio */
.categoria-nombre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 700;
    font-size: clamp(14px, 1.6vw, 20px);
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    z-index: 2;
    text-align: center;
    width: 90%;
    padding: 4px 6px;
    overflow-wrap: anywhere;
}
/* Hover tonalidad (solo en dispositivos con hover) */
@media (hover: hover) and (pointer: fine) {
    .categoria-item:hover .categoria-img-wrapper img {
        filter: grayscale(20%) brightness(0.85) saturate(90%);
        transform: scale(1.03);
    }
}

/* Variantes de altura para efecto mosaico */
.categoria-item.grande .categoria-img-wrapper { aspect-ratio: 3 / 1; }
.categoria-item.mediana .categoria-img-wrapper { aspect-ratio: 21 / 9; }
.categoria-item.pequena .categoria-img-wrapper { aspect-ratio: 16 / 9; }

/* Normalizar el contenedor de productos para evitar padding/márgenes */
#productos { margin: 0; padding: 0; }

/* Quitar expansión del último ítem para que quede en la primera columna sin estirarse */
.grid-categorias.grid-2-cols > .categoria-item:last-child:nth-child(odd) { grid-column: auto; }
.grid-categorias.grid-2-cols > .categoria-item:last-child:nth-child(odd) .categoria-img-wrapper { aspect-ratio: unset; }
.grid-categorias.grid-3-cols > .categoria-item:last-child:nth-child(3n+1) { grid-column: auto; }
.grid-categorias.grid-3-cols > .categoria-item:last-child:nth-child(3n+1) .categoria-img-wrapper { aspect-ratio: unset; }

/* Evitar cualquier scroll horizontal residual */
html, body {
    overflow-x: hidden;
}

/* Breakpoints: responsive coherente */
@media (max-width: 1024px) {
    .grid-categorias.grid-3-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .categoria-item.grande { grid-column: span 2; }
    .categoria-nombre { font-size: clamp(14px, 2.2vw, 22px); }
}
@media (max-width: 640px) {
    .grid-categorias,
    .grid-categorias.grid-2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .categoria-item.grande, .categoria-item.mediana, .categoria-item.pequena { grid-column: span 1; }
    /* ratios más altos en móvil para mejor legibilidad y área táctil */
    .categoria-item.grande .categoria-img-wrapper { aspect-ratio: 16 / 9; }
    .categoria-item.mediana .categoria-img-wrapper { aspect-ratio: 3 / 2; }
    .categoria-item.pequena .categoria-img-wrapper { aspect-ratio: 4 / 3; }
    .categoria-nombre { font-size: clamp(14px, 4.5vw, 20px); }
    .grid-categorias { gap: 8px; }
    /* Evitar desbordes horizontales por transform en pantallas táctiles */
    .categoria-item:hover .categoria-img-wrapper img { transform: none; }
}
@media (max-width: 380px) {
    .grid-categorias.grid-3-cols,
    .grid-categorias.grid-2-cols,
    .grid-categorias.grid-1-col { grid-template-columns: 1fr; }
}
@media (min-width: 1025px) {
    /* Sección a altura de pantalla en desktop */
    .filtros-grid-categorias { min-height: 100vh; }
    .grid-categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Alturas en vh para un look inmersivo y consistente */
    .categoria-item.grande .categoria-img-wrapper { height: 38vh; aspect-ratio: auto; }
    .categoria-item.mediana .categoria-img-wrapper { height: 32vh; aspect-ratio: auto; }
    .categoria-item.pequena .categoria-img-wrapper { height: 26vh; aspect-ratio: auto; }
    /* Mosaico especial para exactamente 4 categorías */
    .grid-categorias.grid-4-mosaic {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .grid-categorias.grid-4-mosaic > .categoria-item:nth-child(1) { grid-column: span 7; }
    .grid-categorias.grid-4-mosaic > .categoria-item:nth-child(2) { grid-column: span 5; }
    .grid-categorias.grid-4-mosaic > .categoria-item:nth-child(3) { grid-column: span 5; }
    .grid-categorias.grid-4-mosaic > .categoria-item:nth-child(4) { grid-column: span 7; }
    .grid-categorias.grid-4-mosaic .categoria-item .categoria-img-wrapper { height: 44vh; aspect-ratio: auto; }
}
@media (max-width: 1024px) {
    .grid-categorias.grid-4-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lema inspiracional sobre el catálogo */
.lema-catalogo {
    /* limitar el ancho para forzar saltos de línea y centrar */
    width: auto;
    max-width: 60ch;
    margin: 18px auto 26px; /* centrado horizontal + separación */
    text-align: center;
    font-family: "Viaoda Libre", serif;
    font-style: italic; /* itálica */
    font-weight: 500;
    color: #111;
    font-size: clamp(15px, 2vw, 24px); /* un paso más pequeño */
    line-height: 1.35;
    letter-spacing: 0.2px;
    padding: 6px 8px;
    box-sizing: border-box;
}
.lema-catalogo::after {
    content: "";
    display: block;
    width: min(200px, 50%); /* separador más largo */
    height: 1px;
    background: #e5e5e5;
    margin: 10px auto 0;
}
@media (max-width: 640px) {
    .lema-catalogo {
        max-width: 90%;
        font-size: clamp(14px, 4.2vw, 20px);
        margin: 14px auto 20px;
        padding: 6px 6px;
    }
    .lema-catalogo::after { width: min(140px, 60%); }
}