/***************************** 0. ROOT *****************************/

#header-root_CONTAINER{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: relative;
    height: 100%;
    width: 100%;
}

/***************************** 1. LOGO e ICONOS *****************************/

#header-root_logo-iconos_CONTAINER{
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    padding-bottom: 7rem;
    position: relative;
}

#header-root_logo {
    display: flex;
    user-select: none;
    -webkit-user-drag: none;
}

#header-root_icons_CONTAINER {
    align-items: center;
    display: flex;
    gap: 10px;
}

.header-root_icon_wrapper {
    /* 1. Soluciona el problema de alineación del SVG */
    align-items: center;
    display: flex;
    justify-content: center;
    /* 2. Estilos visuales de la cajita */
    background: #2c2c2c;
    border-radius: 8px;
    padding: 10px;
    user-select: none;
    -webkit-user-drag: none;
}

@media (hover: hover) {
    .header-root_icon_wrapper:hover {
        background: #616161;
    }
}


/*********************** 1. PRÓXIMAMENTE y FORMULARIO ***********************/


#header-root_proximamente_CONTAINER{
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
    position: relative;
}

#header-root_proximamente_planeta{
    position: absolute;
    top: -10rem;
    z-index: -1;
    user-select: none;
    -webkit-user-drag: none;
}

#header-root_proximamente_planeta img{
    height: auto;
    width: 45rem;
}


#header-root_proximamente_titulo{
    position: relative;
    font-size: clamp(2rem, 10vw, 4rem);
    font-weight: 850;
    user-select: none;
    -webkit-user-drag: none;
}

#header-root_proximamente_descripcion {
    display: block;
    font-size: clamp(0.9rem, 1vw, 2rem);
    font-weight: 500;
    text-align: center;
    user-select: none;
    -webkit-user-drag: none;
}