/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/* Contenedor de paquetes de servicios */
.service-packages {
    display: flex;
    justify-content: center; /* Centra las tarjetas horizontalmente */
    flex-wrap: wrap;
    padding: 20px;
    gap: 80px; /* Espacio entre tarjetas */
    margin: 0 auto; /* Centra el contenedor */
    max-width: 1000px; /* Ancho máximo del contenedor */
}

/* Tarjeta de paquete de servicios */
.package-card {
    background-color: #ffffff;
    padding: 15px; /* Ajusta el padding para reducir el espacio interno */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    max-width: 400px; /* Ancho máximo de la tarjeta */
    width: 100%; /* Ancho completo en pantallas pequeñas */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s; /* Transición suave para el efecto */
}

/* Efecto de hover en la tarjeta */
.package-card:hover {
    transform: translateY(-10px); /* Efecto de elevación */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Título de la tarjeta de paquete */
.package-card h2 {
    font-size: 22px; /* Tamaño de fuente ligeramente más grande */
    color: #333;
    margin-bottom: 10px; /* Espacio reducido debajo del título */
    font-weight: 700;
}

/* Lista de servicios */
.package-list {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
    font-size: 16px; /* Tamaño de fuente ajustado */
    color: #555;
    line-height: 1.4; /* Espacio entre líneas reducido */
}

/* Estilo del botón de precio */
.price-button {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-size: 16px;
    color: #fff;
    background-color: #28a745; /* Color de fondo verde */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px; /* Espacio reducido arriba del botón */
    transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves */
}

/* Efecto al pasar el ratón sobre el botón */
.price-button:hover {
    background-color: #218838; /* Color de fondo al pasar el ratón */
    transform: translateY(-2px); /* Efecto de elevación al pasar el ratón */
}

/* Responsividad */
@media (max-width: 767px) {
    .service-packages {
        flex-direction: column;
        align-items: center;
    }

    .package-card {
        width: 90%; /* Ancho completo en pantallas pequeñas */
    }
}