#tipos-eventos {
    background-color: #2222227f;
    color: white;
    padding: 20px;
    max-width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
}

.evento {
    margin-bottom: 40px;
}

.titulo-evento {
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

.contenido-evento {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.texto-evento {
    flex: 1;
    font-size: 1.5em;
    padding: 20px;
}

.imagen-evento {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative; /* Necesario para el posicionamiento del icono */
}

.imagen-evento img {
    max-width: 500px;
    height: auto;
    border: 3px solid white;
    border-radius: 5px;
    transition: opacity 0.3s ease; /* Transición para oscurecer la imagen */
}

.imagen-evento:hover img {
    opacity: 0.2; /* Oscurece la imagen al hacer hover */
}

.imagen-evento::after {
    content: '→'; /* Icono o texto que indica el enlace */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: rgb(255, 255, 255);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.imagen-evento:hover::after {
    opacity: 1; /* Muestra el icono al hacer hover */
}


/* Diseño Responsivo */
@media (max-width: 768px) {
    .contenido-evento {
        flex-direction: column; /* Cambia a columna en dispositivos más pequeños */
        align-items: center; /* Centra los elementos */
    }

    .texto-evento, .imagen-evento {
        width: 100%; /* Ocupa todo el ancho */
        text-align: center; /* Centra el texto */
    }

    .imagen-evento img {
        max-width: 90%; /* Limita el ancho de la imagen en dispositivos móviles */
    }
}

@media (max-width: 480px) {
    .titulo-evento {
        font-size: 2em; /* Tamaño del título más pequeño */
    }

    .texto-evento {
        font-size: 1.2em; /* Tamaño del texto más pequeño */
        padding: 10px; /* Reduce el padding */
    }

    .imagen-evento img {
        max-width: 100%; /* Mantiene la imagen dentro de su contenedor */
    }
}
