/* --- Sección con Contenido Doble (sin cambios aquí) --- */
.contenido-doble {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
}

.texto-columna {
    flex: 1;
    padding-right: 20px;
    max-width: 50%;
}

.texto-columna h2 {
    color: #444444;
    font-size: 2.2em;
    margin-bottom: 15px;
}

.texto-columna p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
}

a.card-button {
    display: inline-block;
    background-color: #FFCD00;
    color: #454545 !important;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
a.card-button:hover{
    background-color: #454545;
    color: white !important;
}

.imagen-columna {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
}

.imagen-columna img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* --- Estilos de los enlaces de imagen (reemplazan a .btn-imagen) --- */
.btn-hor {
    display: flex;
    gap: 0.5rem; /* Espacio entre los enlaces de imagen en fila */
    padding: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: center; /* Centra los enlaces de imagen cuando están en fila */
}

.btn-imagen-enlace { /* Nueva clase para los 'a' que contienen las imágenes */
    border: none; /* Elimina cualquier borde por defecto del enlace */
    background: none; /* Asegura que no tenga fondo */
    padding: 0; /* Elimina el padding por defecto del enlace */
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    transition: transform 0.3s ease-in-out;
    display: flex; /* Permite centrar la imagen dentro del enlace */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0; /* Elimina cualquier margen por defecto del enlace */
    text-decoration: none; /* Remueve el subrayado del enlace */
}

.btn-imagen-enlace img { /* Estilos para la imagen dentro del enlace */
    max-width: 100%;
    height: auto;
    display: block; /* Importante para que la imagen no tenga espacio extra debajo */
    border-radius: 0.6rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
}

.btn-imagen-enlace:hover { /* Efecto hover para el enlace (ya no para el botón) */
    transform: scale(1.05);
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {
    .contenido-doble {
        flex-direction: column;
        padding: 30px 15px;
        gap: 30px;
        width: 100%;
        max-width: none;
        margin: 20px 0;
    }

    .texto-columna,
    .imagen-columna {
        max-width: 100%;
        width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .texto-columna h2 {
        font-size: 1.8em;
    }

    /* Reglas para apilar enlaces de imagen dentro de .btn-hor */
    .btn-hor {
        flex-direction: column; /* Apila los enlaces de imagen verticalmente */
        align-items: center; /* Centra los enlaces individualmente */
        gap: 15px; /* Espacio entre los enlaces apilados en 768px */
        width: 100%;
        padding: 15px;
    }

    .btn-imagen-enlace { /* Ajuste para el enlace en esta resolución */
        width: 100%;
        max-width: 400px; /* Opcional: limita el ancho máximo de cada enlace */
    }

    .btn-imagen-enlace img { /* Asegura que la imagen dentro del enlace ocupe todo el ancho */
        width: 100%;
    }
}

/* Media Query para pantallas de 400px o menos */
@media (max-width: 400px) {
    .contenido-doble {
        flex-direction: column;
        gap: 20px;
        padding: 20px 10px;
        width: 100%;
        max-width: none;
        margin: 10px 0;
    }

    .texto-columna,
    .imagen-columna {
        max-width: 100%;
        width: 100%;
        text-align: center;
        padding-right: 0;
    }

    .texto-columna h2 {
        font-size: 1.5em;
    }

    .texto-columna p {
        font-size: 0.9em;
    }

    /* Ajustes específicos para enlaces de imagen en pantallas muy pequeñas */
    .btn-hor {
        gap: 10px;
        padding: 0.5rem;
        width: 100%;
    }

    .btn-imagen-enlace {
        width: 100%;
    }

    .btn-imagen-enlace img {
        width: 100%;
    }
}