/* ===================== CONTENEDOR DE CATEGORÍAS ===================== */
.contenedor-categorias {
    min-height: 850px;
    margin-top: 5rem;
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100px repeat(2, 350px);
}

/* ===================== CAJA DE TEXTO PRINCIPAL ===================== */
.caja-texto-categorias {
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ===================== CADA CAJA DE CATEGORÍA ===================== */
.caja-categoria {
    display: grid;
    grid-template-rows: auto 40px;
    transition: transform 0.4s ease, background-size 0.4s ease;
}

.caja-categoria:hover {
    transform: scale(1.05);
    background-size: 140%;
}

.caja-categoria p {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

/* ===================== FONDOS DE VEHÍCULOS ===================== */
.caja-categorias-vehiculos-1 {
    background-image: url(mototaxi.jpeg);
}

.caja-categorias-vehiculos-2 {
    background-image: url(cuatrimoto.jpeg);
}

.caja-categorias-vehiculos-3 {
    background-image: url(automaticas.jpg);
}

.caja-categorias-vehiculos-4 {
    background-image: url(semiautomaticas.jpeg);
}

.caja-categorias-vehiculos-5 {
    background-image: url(todo-terreno.jpeg);
}

.caja-categorias-vehiculos-6 {
    background-image: url(dual-sport.png);
}

.caja-categorias-vehiculos-7 {
    background-image: url(cargueros.jpg);
}

.caja-categorias-vehiculos-8 {
    background-image: url(street.png);
}

/* Propiedades comunes de fondo */
.caja-categorias-vehiculos-1,
.caja-categorias-vehiculos-2,
.caja-categorias-vehiculos-3,
.caja-categorias-vehiculos-4,
.caja-categorias-vehiculos-5,
.caja-categorias-vehiculos-6,
.caja-categorias-vehiculos-7,
.caja-categorias-vehiculos-8 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===================== HOVER CAMBIO DE IMAGEN ===================== */
.caja-categorias-vehiculos-1:hover {
    background-image: url(moto-taxi.png);
}

.caja-categorias-vehiculos-2:hover {
    background-image: url(cuatrimoto-2.png);
}

.caja-categorias-vehiculos-3:hover {
    background-image: url(automaticas-2.jpg);
}

.caja-categorias-vehiculos-4:hover {
    background-image: url(semiautomaticas-2.png);
}

.caja-categorias-vehiculos-5:hover {
    background-image: url(todo-terreno-2.png);
}

.caja-categorias-vehiculos-6:hover {
    background-image: url(dual-sport-2.png);
}

.caja-categorias-vehiculos-7:hover {
    background-image: url(cargueros-2.png);
}

.caja-categorias-vehiculos-8:hover {
    background-image: url(street-2.png);
}

/* ===================== GRID POSICIONES DE CADA CAJA ===================== */
.caja-categorias-1 {
    grid-column: 1 / 2;
}

.caja-categorias-2 {
    grid-column: 2 / 3;
}

.caja-categorias-3 {
    grid-column: 3 / 4;
}

.caja-categorias-4 {
    grid-column: 4 / 5;
}

.caja-categorias-5 {
    grid-column: 1 / 2;
}

.caja-categorias-6 {
    grid-column: 2 / 3;
}

.caja-categorias-7 {
    grid-column: 3 / 4;
}

.caja-categorias-8 {
    grid-column: 4 / 5;
}

/* ===================== RESPONSIVE CONTENEDOR DE CATEGORÍAS ===================== */

/* Tablet y móviles grandes: 2 columnas */
@media screen and (max-width: 991px) {
    .contenedor-categorias {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 20px;
    }

    .caja-categoria {
        min-height: 250px;
        /* Altura uniforme */
    }

    .caja-texto-categorias {
        grid-column: 1 / -1;
    }

    .caja-categorias-1,
    .caja-categorias-2,
    .caja-categorias-3,
    .caja-categorias-4,
    .caja-categorias-5,
    .caja-categorias-6,
    .caja-categorias-7,
    .caja-categorias-8 {
        grid-column: auto;
    }
}

/* Móviles pequeños: 1 columna */
@media screen and (max-width: 480px) {
    .contenedor-categorias {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 15px;
    }

    .caja-categoria {
        min-height: 250px;
        /* Mantener misma altura */
    }

    .caja-texto-categorias {
        grid-column: 1 / -1;
    }

    .caja-categorias-1,
    .caja-categorias-2,
    .caja-categorias-3,
    .caja-categorias-4,
    .caja-categorias-5,
    .caja-categorias-6,
    .caja-categorias-7,
    .caja-categorias-8 {
        grid-column: auto;
    }
}