body {
    font-family: 'Arial', sans-serif; /* Fuente moderna */
    margin: 0;
    padding: 0;
    background-color: #eef2f3; /* Color de fondo suave */
    color: #333; /* Color de texto */
}

/* Estilos para el menú */
.menu {
    background-color: #007bff; /* Color de fondo del menú */
    color: #fff; /* Color del texto en el menú */
    padding: 15px; /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.menu ul {
    list-style-type: none; /* Sin viñetas */
    margin: 0;
    padding: 0;
    display: flex; /* Flexbox para alinear elementos */
    justify-content: center; /* Centrado del menú */
}

.menu li {
    margin-right: 30px; /* Espaciado entre elementos del menú */
}

.menu a {
    color: #fff; /* Color del texto de los enlaces */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
    transition: color 0.3s ease; /* Transición suave al cambiar color */
}

.menu a:hover {
    color: #ffcc00; /* Color al pasar el mouse */
}

/* Estilos para el contenedor */
.container {
    padding: 20px; /* Espaciado interno */
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: auto; /* Centrado automático */
}

/* Estilos para las tarjetas */
.card-container {
    display: grid; /* Uso de grid para las tarjetas */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    gap: 20px; /* Espaciado entre tarjetas */
}

.card {
    background-color: white; /* Fondo blanco para las tarjetas */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    overflow: hidden; /* Ocultar desbordamiento */
    transition: transform 0.3s ease; /* Transición suave al pasar el mouse */
    display: flex; /* Flexbox para el contenido de la tarjeta */
    flex-direction: column; /* Columna en la tarjeta */
    padding: 15px; /* Espaciado interno */
}

.card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}

.card-image {
    width: 100%; /* Imagen ocupa todo el ancho */
    height: 200px; /* Altura fija para la imagen */
    object-fit: cover; /* Ajuste de imagen */
    border-radius: 10px 10px 0 0; /* Bordes redondeados en la parte superior */
}

.card h2 {
    margin: 10px 0; /* Margen superior e inferior */
    font-size: 1.5em; /* Tamaño de fuente */
    color: #007bff; /* Color del título */
}

.card .title {
    color: #666; /* Color del subtítulo */
    font-size: 1em; /* Tamaño de fuente */
    margin: 0 0 10px; /* Margen inferior */
}

.card p {
    margin: 5px 0; /* Margen superior e inferior */
    flex-grow: 1; /* Permite que el párrafo crezca */
}

.social-links {
    margin: 15px 0; /* Margen superior e inferior */
    display: flex; /* Flexbox para enlaces sociales */
    justify-content: center; /* Centrado de enlaces sociales */
}

.social-links a {
    color: #333; /* Color de enlaces sociales */
    margin: 0 10px; /* Espaciado entre enlaces */
    font-size: 1.5em; /* Tamaño de fuente */
    transition: color 0.3s ease; /* Transición suave al cambiar color */
}

.social-links a:hover {
    color: #007bff; /* Color al pasar el mouse */
}

/* Estilos para botones */
button {
    background-color: #007bff; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    padding: 10px 0; /* Espaciado interno */
    width: 100%; /* Ancho completo */
    font-size: 1em; /* Tamaño de fuente */
    cursor: pointer; /* Cursor de mano */
    transition: background-color 0.3s ease; /* Transición suave al cambiar color */
    margin-top: auto; /* Margen superior automático */
    border-radius: 5px; /* Bordes redondeados */
}

button:hover {
    background-color: #0056b3; /* Color al pasar el mouse */
}

/* Media queries para responsividad */
@media (max-width: 900px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas más pequeñas */
    }
}

@media (max-width: 600px) {
    .card-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
}