/* ===== SERVICIOS ===== */
.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 20px;
    justify-items: stretch; /* cada tarjeta ocupa el mismo ancho */
    align-items: stretch; /* todas se estiran a la misma altura */
}

.service-card {
    font-family: Geneva, Tahoma, sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    width: 100%;
    min-height: 420px; /* asegura altura mínima uniforme */
    display: flex;
    flex-direction: column; /* permite organizar verticalmente */
    justify-content: flex-start; /* mantiene orden arriba */
}

.service-image {
    width: 100%;
    height: 180px; /* fija altura de la imagen */
    border-radius: 10px;
    object-fit: cover; /* mantiene proporción sin deformar */
    margin-bottom: 15px;
}

.service-card h3 {
    font-weight: 300;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 700;
}

.service-card p {
    text-align: justify;
    flex-grow: 1; /* hace que el texto ocupe el espacio sobrante */
}

.service-card:hover {
    transform: scale(1.05);
    border-color: var(--jaffa);
}

@media (max-width: 1024px) {
    .services {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (max-width: 600px) {
    .services {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}