<div class="impulsa-nav-container">
    <div class="impulsa-nav-wrapper">
        <a href="/app/impulsa-tu-exito" class="impulsa-nav-option">Rutas de Aprendizaje</a>
        <a href="/app/impulsa-tu-exito-sesiones-en-vivo" class="impulsa-nav-option">Sesiónes en vivo</a>
        <a href="/app/impulsa-tu-exito-contenido-especial" class="impulsa-nav-option">Contenido Especial</a>
        <a href="/app/impulsa-tu-exito-caja-de-herramientas" class="impulsa-nav-option">Caja de Herramientas</a>
    </div>
</div>

<style>
    .impulsa-nav-container {
        margin: 80px 0;
    }
    .impulsa-nav-wrapper {
        display: flex;
        gap: 30px;
        justify-content: center;
        justify-content: space-around;
    }
    .impulsa-nav-option {
        text-decoration: none;
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
        border-radius: 20px;
        padding: 20px;
        border: 2px solid #fff;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        background: linear-gradient(to bottom, #04417a, #012449, #000f23);
    }
    .impulsa-nav-option:hover {
        transform: scale(1.25);
    }
</style>