/* Estilos Generales y Reset Básico */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el footer se quede abajo */
}

/* Header */
.main-header {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 200px; /* Altura del header para que el logo esté a la mitad */
    width: 100%;
    margin-bottom: 5px; /* Espacio debajo del header */
    box-sizing: border-box; /* Incluir padding y border en el tamaño total */
}

.logo {
    max-width: 100%; /* Asegura que el logo no se salga del header en pantallas pequeñas */
    height: auto; /* Mantiene la proporción del logo */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Contenedor principal de las tarjetas */
.content-wrapper {
    display: flex;
    flex-direction: column; /* Las tarjetas se apilan verticalmente por defecto */
    align-items: center; /* Centra las tarjetas horizontalmente */
    gap: 30px; /* Espacio entre las tarjetas */
    max-width: 900px; /* Ancho máximo del contenido */
    margin: 0 auto 50px auto; /* Centra el wrapper y añade espacio inferior */
    padding: 0 20px; /* Padding para evitar que el contenido toque los bordes en móviles */
    flex-grow: 1; /* Permite que el contenido ocupe el espacio disponible */
    box-sizing: border-box;
}

/* Estilo de Tarjeta Individual */
.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* --- Altura Fija y Flexbox para Contenido --- */
    height: 480px; /* Mantén esta altura, ajusta si es necesario */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Esto es clave para que no se desborde el contenido si se excede la altura */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%; /* La imagen ocupará todo el ancho disponible del contenedor de la tarjeta */
    height: 250px; /* Altura fija para todas las imágenes. ¡Ajusta este valor! */
                   /* Este valor es crítico para el tamaño uniforme */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse,
                          recortando lo que sea necesario si las proporciones no coinciden. */
    border-radius: 4px;
    margin-bottom: 15px;
}

.card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.title-link {
    text-decoration: none;
    color: #000;
    transition: color 0.3s ease;
}

.title-link:hover {
    color: #149cc4;
}

.card-subtitle {
    font-size: 1em;
    line-height: 1.6;
    color: #7f8c8d;
}

/* Footer */
.main-footer {
    background-color: #1ea6ce;
    color: #fff;
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Empuja el footer hacia abajo si el contenido es corto */
}

/* Media Queries para Responsividad */
@media (min-width: 768px) {
    .content-wrapper {
        flex-direction: row; /* En pantallas más grandes, las tarjetas se ponen en fila */
        flex-wrap: wrap; /* Permite que las tarjetas salten de línea si no caben */
        justify-content: center; /* Centra las tarjetas cuando están en fila */
        gap: 40px; /* Aumenta el espacio entre tarjetas en pantallas grandes */
        
        /* Ajuste para acomodar 3 tarjetas. Incrementamos el ancho máximo del wrapper */
        max-width: 1300px; /* Aumenta el ancho máximo del contenedor para que las 3 tarjetas quepan cómodamente */
    }

    .card {
        /* Para 3 tarjetas en una fila, cada una debe ocupar aproximadamente 33.33% del ancho,
           menos el espacio de los `gap` */
        width: calc(33.33% - 27px); /* (40px de gap / 3 cards * 2 gaps) = 26.66px, redondeado a 27px */
        max-width: 400px; /* Mantén este max-width para que las tarjetas no se estiren demasiado */
    }

    /* Removimos este ajuste, ya no es necesario con el cálculo de 3 tarjetas */
    /* .content-wrapper.single-card .card {
        width: auto;
    } */
}

@media (max-width: 480px) {
    .card {
        padding: 15px; /* Menos padding en pantallas muy pequeñas */
    }

    .card-title {
        font-size: 1.5em; /* Reducir tamaño de fuente en móviles */
    }

    .card-subtitle {
        font-size: 0.9em;
    }

    .main-header {
        height: 150px; /* Menor altura del header en móviles */
    }
}