/* =========================================================
   MICRO DRAMAS EN ESPAÑOL
   PANTALLA DE INICIO / SELECCIÓN DE USUARIO
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   DOCUMENTO
========================================================= */

html,
body {

    width: 100%;

    min-width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;
}


/* =========================================================
   CUERPO
========================================================= */

body {

    min-height: 100vh;

    background:
         #0d0d0f;

    color:
        #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x:
        hidden;

    overflow-y:
        auto;
}


/* =========================================================
   PANTALLA PRINCIPAL
========================================================= */

.portal-screen {

    position:
        relative;

    width:
        100vw;

    min-height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px 20px;

    margin:
        0;

    text-align:
        center;
}


/* =========================================================
   LOGO
========================================================= */

.portal-logo {

    display:
        block;

    width:
        430px;

    max-width:
        80vw;

    height:
        auto;

    margin:
        0 auto 48px auto;
}


/* =========================================================
   TÍTULO
========================================================= */

.portal-title {

    display:
        block;

    width:
        100%;

    margin:
        0 auto 38px auto;

    color:
        #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        25px;

    font-weight:
        700;

    letter-spacing:
        0.3px;

    line-height:
        1.2;

    text-align:
        center;
}


/* =========================================================
   CONTENEDOR DE PERFILES
========================================================= */

.profiles {

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    margin:
        0 auto;

    padding:
        0;
}


/* =========================================================
   PERFIL INVITADO
========================================================= */

.profile-card {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    width:
        170px;

    margin:
        0 auto;

    color:
        #ffffff;

    text-decoration:
        none;

    cursor:
        pointer;

    outline:
        none;

    user-select:
        none;
}


/* =========================================================
   CAJÓN DEL AVATAR
========================================================= */

.profile-avatar {

    width:
        150px;

    height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #111116;

    border:
        3px solid transparent;

    border-radius:
        4px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.45);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


/* =========================================================
   IMAGEN AVATAR
========================================================= */

.profile-avatar img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    pointer-events:
        none;
}


/* =========================================================
   NOMBRE
========================================================= */

.profile-name {

    margin:
        14px auto 0 auto;

    color:
        #b3b3b3;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        center;

    transition:
        color 0.22s ease;
}


/* =========================================================
   HOVER
========================================================= */

.profile-card:hover
.profile-avatar {

    transform:
        scale(1.06);

    border-color:
        #ffffff;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.70);
}


.profile-card:hover
.profile-name {

    color:
        #ffffff;
}


/* =========================================================
   FOCO TECLADO
========================================================= */

.profile-card:focus-visible
.profile-avatar {

    transform:
        scale(1.06);

    border-color:
        #ffffff;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.70);
}


.profile-card:focus-visible
.profile-name {

    color:
        #ffffff;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .portal-screen {

        width:
            100vw;

        min-height:
            100vh;

        padding:
            30px 16px;
    }


    .portal-logo {

        width:
            300px;

        max-width:
            85vw;

        margin:
            0 auto 38px auto;
    }


    .portal-title {

        margin:
            0 auto 30px auto;

        font-size:
            21px;
    }


    .profile-avatar {

        width:
            125px;

        height:
            125px;
    }


    .profile-name {

        margin-top:
            12px;

        font-size:
            17px;
    }
}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 360px) {

    .portal-logo {

        width:
            260px;

        margin:
            0 auto 32px auto;
    }


    .portal-title {

        font-size:
            19px;

        margin:
            0 auto 26px auto;
    }


    .profile-avatar {

        width:
            110px;

        height:
            110px;
    }
}