/*==========================================================
                    MAQUINARIA
==========================================================*/

.maquinaria{
    position:relative;

    padding:120px 8%;

    background:
        linear-gradient(
            180deg,
            #EEF3F8,
            #FFFFFF,
            #EEF3F8
        );

    overflow:hidden;
}


/*==========================================================
                    DECORACIÓN
==========================================================*/

.maquinaria::before{
    content:"02";

    position:absolute;

    right:5%;

    top:20px;

    font-size:260px;

    font-weight:900;

    color:rgba(47,69,155,.05);

    line-height:1;

    pointer-events:none;
}


/*==========================================================
                    GRID
==========================================================*/

.maquinas-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(380px,1fr));

    gap:40px;

    max-width:1250px;

    margin:auto;
}


/*==========================================================
                    TARJETA
==========================================================*/

.maquina{

    background:#FFFFFF;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow1);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    display:flex;

    flex-direction:column;
}


.maquina:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow2);
}


/*==========================================================
                    IMAGEN DE LA MÁQUINA
==========================================================*/

.maquina-imagen{
    position:relative;

    width:100%;

    height:350px;

    overflow:hidden;

    background:#eef2f6;

    display:flex;

    align-items:center;

    justify-content:center;
}


/* Capa sutil sobre la imagen */

.maquina-imagen::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 60%,
            rgba(0,0,0,.12)
        );

    pointer-events:none;
}


/* Imagen */

.maquina img{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    display:block;

    border-radius:0;

    transition:transform .7s ease;
}


/* Zoom elegante */

.maquina:hover img{

    transform:scale(1.06);
}


/*==========================================================
                    INFORMACIÓN
==========================================================*/

.maquina-info{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;
}


/* Categoría */

.maquina-categoria{

    display:inline-block;

    background:rgba(47,69,155,.08);

    color:var(--azul);

    font-size:.75rem;

    font-weight:600;

    letter-spacing:1px;

    padding:6px 14px;

    border-radius:30px;

    margin-bottom:15px;

    width:fit-content;
}


/* Título */

.maquina-info h3{

    color:var(--titulo);

    font-size:1.5rem;

    margin-bottom:15px;
}


/* Descripción */

.maquina-info p{

    color:var(--texto);

    line-height:1.8;
}


/*==========================================================
                    ESPECIFICACIONES
==========================================================*/

.especificaciones{

    margin-top:25px;

    padding:0;

    list-style:none;
}


.especificaciones li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    color:var(--texto);
}


.especificaciones i{

    color:var(--amarillo);

    font-size:18px;

    flex-shrink:0;
}


/*==========================================================
                    BOTÓN
==========================================================*/

.maquina-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    padding-top:20px;

    color:var(--azul);

    font-weight:600;

    transition:.3s;

    text-decoration:none;
}


.maquina-btn i{

    transition:.3s;
}


.maquina-btn:hover{

    color:var(--azul-claro);

    gap:16px;
}


/*==========================================================
                    TABLET
==========================================================*/

@media (max-width:850px){

    .maquinaria{

        padding:90px 6%;

    }


    .maquinas-grid{

        grid-template-columns:1fr;

        gap:35px;

    }


    .maquina-imagen{

        height:380px;

    }

}


/*==========================================================
                    CELULAR
==========================================================*/

@media (max-width:576px){

    .maquinaria{

        padding:80px 5%;

    }


    .maquinaria::before{

        font-size:140px;

        top:20px;

    }


    .maquinas-grid{

        gap:25px;

    }


    .maquina{

        border-radius:16px;

    }


    .maquina-imagen{

        height:340px;

    }


    .maquina-info{

        padding:25px;

    }


    .maquina-info h3{

        font-size:1.35rem;

    }

}