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

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

header nav ul {
    list-style-type: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

/* Grid container para dos columnas */
.card-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Dos columnas, la segunda columna es más estrecha */
    gap: 20px; /* Espacio entre columnas */
    margin-top: 20px;
}

/* Contenedor de las tarjetas (en la primera columna) */
.card-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 20px; /* Espacio entre tarjetas */
}

/* Estilo para las tarjetas */
.card {
    background: linear-gradient(180deg, #2c3e50, #1f2c38); /* Degradado de color */
    border-radius: 15px; /* Bordes redondeados */
    padding: 20px;
    text-align: center; /* Centra el texto */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave alrededor de la tarjeta */
    transition: transform 0.3s ease; /* Animación para efecto de hover */
}

/* Para las tarjetas de la primera columna */
.card img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Bordes redondeados de la imagen */
}

.card:hover {
    transform: translateY(-10px); /* Desplaza la tarjeta al hacer hover */
}

.card p {
    color: white;
}

/* Estilo especial para la tarjeta de Facebook (segunda columna) */
.fb-page {
    width: 100%;
    height: 100%;
}

/* Tarjeta de Facebook ocupa el doble de altura de las otras */
.fb-card {
    height: 100%;
    grid-row: span 2; /* Esto hará que la tarjeta de Facebook ocupe el doble de altura */
}

/* Asegura que las tarjetas sean responsivas en pantallas más pequeñas */
@media screen and (max-width: 720px) {
    .card-container {
        grid-template-columns: 1fr; /* Una columna en pantallas medianas */
    }
    .card-wrapper {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}

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

.social-links {
    margin-top: 20px;
    background-color: #ecf0f1;
    padding: 20px;
}
 
footer {
    text-align: center;
    padding: 20px;
    background-color: #2c3e50;
    color: white;
    margin-top: 40px;
}

.logo img {
    width: 99%;        /* El ancho de la imagen será el 90% del contenedor */
    height: 280px;     /* La altura de la imagen será de 200px, por ejemplo */
    object-fit: cover; /* Hace que la imagen llene el espacio sin distorsionarse */
}