/** Globales **/
:root{
    /*Defino colores a utilizar en el proyecto*/
    --selectedItemInicio: #fff;
    --selectedItemRest: #F3EDE4;
    --selectedItemAnchor: #000;
    --selectedUneteInicio: rgba(255,255,255,.2);
    --selectedLinkInicio: rgba(255,255,255,.4);
    --selectedUneteRest: rgba(42, 57, 82, .2);
    --blue: rgba(42, 57, 82);
    --selectedLinkRest: rgba(42, 57, 82, .4);
}

* {
    font-family: "League Spartan", sans-serif;
}

/*  Estilos para la parte de NAV, lista, links y items */
.header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 100vw;  
    margin: 0rem 5rem;
}

.header .logo_header{
    justify-content: flex-start;    
    width: 6rem;
    margin: 0.275rem 0;   
}

.header .navegacion{
    padding: 0.5rem 0rem;      
    
}
.header .navegacion_blm{
    padding: 0.5rem 0rem;      
    
}

 .navegacion ul li{
    margin-left: 0.188rem; 
    display: inline-block;
    text-wrap: nowrap;
    list-style: none; 
}
.navegacion_blm ul li{
    margin-left: 0.188rem; 
    display: inline-block;
    text-wrap: nowrap;
    list-style: none; 
}

/* Estilos para inicio dentro del NavBar */
.nav-enlace {
    text-decoration: none;
    font-size: 1.25rem; 
    color: white; 
    padding: 0.313rem 0.938rem;
}

.nav-enlace--activo-unete{
    text-decoration: none;
    font-size: 1.25rem; 
    color: white; 
    padding: 0.625rem 1.25rem;
    background-color: var(--selectedUneteInicio);
    border-radius: 0.938rem;
    transition: 400ms;
}

.nav-enlace--activo-unete:hover{
    background-color: var(--selectedLinkRest);
    padding: 0.625rem 1.25rem;
    border-radius: 0.938rem;
    color: var(--selectedItemInicio);
}

.nav-enlace--selected{
    text-decoration: none;
    font-size: 1.25rem; 
    color: white; 
    padding: 0.625rem 0.938rem;
    background-color: var(--selectedLinkInicio);
    border-radius: 0.938rem;
    transition: 400ms;
}

/* Estilos para el resto de opciones dentro del NavBar*/

.nav-enlace--lightside {
    text-decoration: none;
    font-size: 1.25rem; 
    color: var(--selectedItemAnchor); 
    padding: 0.313rem 0.938rem;
    transition: 400ms;
}

.nav-enlace--selectedLight{
    text-decoration: none;
    font-size: 1.25rem; 
    color: var(--selectedItemAnchor); 
    padding: 0.625rem 0.938rem;
    background-color: var(--selectedLinkRest);
    border-radius: 0.938rem;
    transition: 400ms;
}

.nav-enlace--activolight{
    text-decoration: none;
    font-size: 1.25rem; 
    color: white; 
    padding: 0.625rem 1.25rem;
    background-color: var(--blue);
    border-radius: 0.938rem;
    transition: 400ms;
}

/*Efectos Hover para el NavBarCambio puntero a mano al pasar sobre un elemento*/
.nav-enlace:hover {
    cursor: pointer;
    background-color: var(--selectedItemInicio);
    padding: 0.625rem 0.938rem;
    border-radius: 0.938rem;
    color: var(--selectedItemAnchor);
    transition: 500ms;
}

.nav-enlace--lightside:hover {
    cursor: pointer;
    background-color: var(--blue);
    padding: 0.625rem 0.938rem;
    border-radius: 0.938rem;
    color: var(--selectedItemInicio);
    transition: 500ms;
}

.nav-enlace--activolight:hover{
    background-color: var(--selectedItemInicio);
    padding: 0.625rem 1.25rem;
    border-radius: 0.938rem;
    color: var(--selectedItemAnchor);
}
.navegacion_blm a{
color: white;
}
/* Estilo para la p, texto, del inicio */

.texto_inicio{
    color: white;
    display: flex;
    margin: 5rem 0rem 2rem 0rem;
    padding: 0rem 4.375rem;
    width: 47.7rem;
    font-size: 4.2rem;
}

/* Estilo para los botones de acceso a socio y buscar empleo */

.botones_inicio{
    display: flex;
    flex-direction: row;
    margin: -1rem 4.7rem;
    gap: 2.3rem;
}

.botones_inicio .acceso_socios{
    display: flex;
    align-items: center;
    height: 1.125rem;
    color: var(--selectedItemAnchor);
    font-size: 1.25rem;
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    background-color: var(--selectedItemInicio);
    text-decoration: none;
    font-weight: bold;
    transition: 400ms;    
}

.botones_inicio .buscar_empleo_boton{
    display: flex;
    align-items: center;
    height: 1.125rem;
    color: var(--selectedItemInicio);
    font-size: 1.25rem;
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    background-color: var(--selectedUneteInicio);
    text-decoration: none; 
    margin-right: 0.313rem;
    font-weight: bold;
    transition: 400ms;
}

.botones_inicio .portal_boton{
    display: flex;
    align-items: center;
    height: 1.125rem;
    color: var(--selectedItemInicio);
    font-size: 1.25rem;
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    background-color: var(--selectedUneteInicio);
    text-decoration: none; 
    margin-right: 0.313rem;
    font-weight: bold;
    transition: 400ms;
}

.botones_inicio .acceso_socios:hover{    
    background-color: var(--selectedItemAnchor);
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    color: var(--selectedItemInicio);
}

.botones_inicio .portal_boton:hover{    
    background-color: var(--selectedItemAnchor);
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    color: var(--selectedItemInicio);
}

.botones_inicio .buscar_empleo_boton:hover{
    background-color: var(--selectedItemInicio);
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    color: var(--selectedItemAnchor);
}

/*Estilo ícono del chat*/

.icono_chat{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 0.625rem;
    left: 0.938rem;
}

.icono_chat i{
    font-size: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
    color:white;
}

/*Estilos redes lateral*/
.redes_inicio {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: absolute; 
    bottom: 0.625rem;
    right: 1rem;
}

.redes_inicio i {
    width: 3.125rem;
    height: 3.125rem;
    justify-content: left;
    margin-bottom: 0.313rem; 
    font-size: 2.188rem; 
    color: white; 
}

/*Estilo principal (marco)*/
.principal{
        position: relative;
        left: 3.438rem;
        width: 92vw;
        height: 80vh;
        border: 3px solid white;
}

/* Estilos para el pie de página */
.piepagina {
    background-color: var(--selectedItemAnchor);
    color: white;
    text-align: center;
    padding: 1rem 0;
}

.piepagina .grupo1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 2rem;
}

.piepagina .grupo2 {
    margin-top: 1rem;
}

.piepagina .box {
    flex: 1;
    padding: 1rem;
}

.piepagina .box h2 {
    margin-bottom: 1rem;
}

.piepagina .box p {
    text-align: left;
}

.piepagina .redes_footer {
    display: flex;
    justify-content: space-around;
}

.piepagina .redes_footer a {
    color: white;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.piepagina .redes_footer a:hover {
    color: var(--selectedItemInicio);
}

/* Colocacion del fondo de la página */
.fondos {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.fondoinicio {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media Queries para hacer el sitio responsive */
@media (max-width: 1199px) {
    
    .principal {
        left: 0;
        width: 100vw;
        height: auto;
        border: none;
    }

    .texto_inicio {
        margin: 2rem 0;
        padding: 0 1rem;
        width: 90%;
        font-size: 2rem;
        text-align: center;
    }

    .botones_inicio {
        flex-direction: column;
        align-items: center;
        margin: 1rem 0;
        width: 100%;
    }

    .botones_inicio a {
        margin: 0.5rem 0;
        width: 80%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .redes_inicio {
        flex-direction: row;
        bottom: -4rem;
        left: 50%;
        transform: translateX(-50%);
        display: none;
    }

    .redes_inicio i {
        margin: 0 0.5rem;
    }


}