/* =========================================
   SECCIÓN ARRIENDO DE MAQUINARIA (ACTUALIZADA CON IMÁGENES)
========================================= */
.arriendo-section {
    padding: 80px 5%;
    background-color: #fcfcfc; /* Un blanco casi puro */
    text-align: center;
}

.arriendo-header {
    margin-bottom: 60px;
}

.arriendo-tag {
    display: inline-block;
    background-color: #03194b; /* Azul Marino */
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.arriendo-title {
    color: #03194b; /* Azul Marino */
    font-size: 2.8rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.arriendo-desc {
    color: #555;
    font-size: 1.15rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grilla de Tarjetas */
.maquinaria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Tarjetas un poco más anchas */
    gap: 35px;
    max-width: 1300px;
    margin: 0 auto 60px auto;
}

.maq-card {
    background-color: #ffffff;
    border-radius: 15px; /* Bordes más suaves */
    overflow: hidden; /* Importante para que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 8px 25px rgba(3, 25, 75, 0.06); /* Sombra suave azulada */
    transition: all 0.3s ease-in-out;
    border-bottom: 5px solid transparent;
    display: flex;
    flex-direction: column; /* Contenido en columna: imagen arriba, texto abajo */
    text-align: left; /* Texto alineado a la izquierda dentro de la tarjeta */
}

.maq-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 40px rgba(3, 25, 75, 0.12);
    border-bottom: 5px solid #005a2c; /* Borde rojo al hacer hover */
}

/* Contenedor de Imagen */
.maq-image-container {
    width: 100%;
    height: 220px; /* Altura fija para las imágenes */
    overflow: hidden;
    position: relative;
}

.maq-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para cubrir el contenedor sin deformarse */
    transition: transform 0.5s ease; /* Animación suave para el zoom */
}

.maq-card:hover .maq-img {
    transform: scale(1.08); /* Pequeño zoom en la imagen al hacer hover en la tarjeta */
}

/* Contenido de la Tarjeta (Texto) */
.maq-content {
    padding: 25px;
    flex-grow: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.maq-icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.maq-icon-sm {
    font-size: 1.5rem;
    color: #005a2c; /* Ícono rojo para resaltar */
    flex-shrink: 0;
}

.maq-name {
    color: #03194b; /* Azul Marino */
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.maq-detail {
    color: #666;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

/* Botón de WhatsApp */
.arriendo-cta {
    margin-top: 20px;
}

.btn-wa-arriendo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #ffffff;
    padding: 16px 38px;
    border-radius: 50px;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
}

.btn-wa-arriendo:hover {
    background-color: #005a2c;
    transform: scale(1.06);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .arriendo-title {
        font-size: 2.2rem;
    }
    .maquinaria-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: 25px;
    }
}