/* Estilos para el contenedor principal de esta sección */
#Img-NavBar{
        max-height: 35px;
        padding-top: 2%;
}


#portal-secciones {
    background-color: #005cbf;
    /* Patron de retícula y nodos generado con gradientes para evocar conexión y conocimiento */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0),
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 25px 25px, 25px 25px, 25px 25px;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para las tarjetas interactivas, solo dentro de #portal-secciones */
#portal-secciones .interactive-card {
    display: block;
    height: 14rem;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease-in-out;
}

/* Estilo para que la imagen cubra el contenedor, solo dentro de #portal-secciones */
#portal-secciones .img-cover {
    width: 100%;
    height: 100%;
    object-fit:fill;
}

/* Efectos de Hover, solo para elementos dentro de #portal-secciones */
#portal-secciones .interactive-card:hover {
    transform: scale(1.1);
}

#portal-secciones .rotate-right:hover {
    transform: scale(1.1) rotate(2deg);
}

#portal-secciones .rotate-left:hover {
    transform: scale(1.1) rotate(-2deg);
}

/* Efectos de brillo, solo para elementos dentro de #portal-secciones */
#portal-secciones .glow-yellow:hover {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.7);
}
#portal-secciones .glow-orange:hover {
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.7);
}
#portal-secciones .glow-pink:hover {
    box-shadow: 0 0 25px rgba(219, 39, 119, 0.7);
}
#portal-secciones .glow-teal:hover {
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.7);
}