/* Variables
----------------------------------------------------------------------------------------------------------------- */
@import './constants.css';



/* Fuentes
----------------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: 'Hatton';
    font-weight: normal;
    font-weight: normal;
    src: local('Tangerine'), url('../fonts/PP Hatton Medium 500.otf') format("opentype");
}
@font-face {
    font-family: 'Hatton';
    font-weight: bold;
    src: url('../fonts/PP Hatton Bold 700.otf') format("opentype");
}



/* Globales
----------------------------------------------------------------------------------------------------------------- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: var(--textFont--main);
    font-size: var(--textSize--normal) !important;
    line-height: var(--textSize--normal);
    color: var(--color--lightBlack);
    text-align: left;
}
input[type=date], input[type=time], input[type=datetime-local] {
    cursor: text;
}
body {
    width: 100%;
    height: 100%;
    background-color: var(--color--representative5);
}



/* Elementos generales
----------------------------------------------------------------------------------------------------------------- */

    /* Común - Título
    -------------------------------------------------- */
    .common--title {
        margin: 0;
        font-size: var(--textSize--title);
        text-align: center;
        font-weight: bold;
        cursor: default;
    }

    /* Común - Parráfos
    -------------------------------------------------- */
    .common--text {
        margin: 0;
        font-size: var(--textSize--normal);
        cursor: default;
    }

    /* Común - Etiquetas
    -------------------------------------------------- */
    .common--label {
        margin: 0 0 var(--padding--insideSubtitle);
        font-weight: bold;
        cursor: default;
    }

    /* Común - Input
    -------------------------------------------------- */
    .common--input {
        width: 100%; height: var(--height--elements);
        padding: 0 var(--padding--insideElements);
        border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;    
    }
    .common--input:hover, .common--input:focus  {
        border-bottom: solid 3px var(--colorElements--actionStrong); border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);
        outline: none;
    }
    .common--input[nodisplayed] {
        display: none;
    }
    .common--input[novisibility] {
        visibility: hidden;
    }
    .common--input[disabled] {    
        border-bottom: solid 3px var(--colorElements--tenderStrong); border-color: var(--colorElements--tenderStrong);
        background-color: var(--colorElements--tenderLight); 

        cursor: not-allowed
    }
    .common--input[disabled]:hover, .common--input[disabled]:focus {
         box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }
    .common--input[readonly] {      
        border: none;
        background-color: transparent; 

        cursor: default;
    }
    .common--input[readonly]:hover, .common--input[readonly]:focus {
       box-shadow: none;
    }
    .common--input[loading] {
        animation: elementLoading 3s ease infinite;
    }   

    /* Común - Selector
    -------------------------------------------------- */
    .common--select {
        width: 100%; height: var(--height--elements);
        padding: var(--padding--insideElements);
        border: solid 1px var(--color--action); border-radius: var(--borderRadius--elements);
        background-color: #fff;
    }
    .common--select:hover, .common--select:hover {
        border-bottom: solid 3px var(--colorElements--action); border-color: var(--colorElements--actionStrong);
        box-shadow: 0 0 10px 0 var(--colorElements--actionStrong);

        cursor: pointer;
    }
    .common--select[nodisplayed] {
        display:none;
    }
    .common--select[novisibility] {
        visibility: hidden;
    }
    .common--select[disabled] {
        border-bottom: solid 3px var(--colorElements--tenderStrong); border-color: var(--colorElements--tenderStrong);
        background-color: var(--colorElements--tenderLight); 

        cursor:not-allowed
    }
    .common--select[disabled]:hover, .common--select[disabled]:focus {
         box-shadow: 0 0 10px 0 var(--colorShadow--color);
    }

    /* Común - Butón
    -------------------------------------------------- */
    .common--button {
        width: 100%; height: var(--height--elements);
        padding: var(--padding--insideSubtitle) var(--padding--insideElements);
        border: none; border-radius: var(--borderRadius--elements);
        background-color: var(--color--action);
        box-shadow: -2px 2px 0px 0px var(--color--shadow);
        display: flex; flex-direction: row;
        
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
    .common--button:hover {      
        box-shadow: none;
        background-color: var(--color--actionStrong); 
    }
    .common--button[nodisplayed] {
        display: none;
    }
    .common--button[novisibility] {
        visibility: hidden;
    }
    .common--button[disabled] {
        background-color: var(--color--actionLight); 

        color: var(--color--gray);

        cursor: not-allowed; 
    }
    .common--button[loading][disabled], .common--button[loading] {
        background: linear-gradient(86deg, var(--color--action), #ffffff); background-size: 400% 400%; 
        box-shadow: none;

        color: #fff;

        animation: buttonLoading 3s ease infinite;
        cursor: not-allowed;
    }
    .common--button[shake] {
        animation: shake 0.5s;
    }

    .common--button > i {
        margin: auto auto auto var(--padding--insideElements);

        color: #fff;
        font-weight: bold;
    }
    .common--button > p {
        margin: auto 0 auto auto;

        color: #fff;
        text-align: center;
        font-weight: bold;
    }
    .common--button > span {
        margin: auto;

        color: #fff;
        text-align: center;
        font-weight: bold;
    }

    .common--buttonBig {
        height: var(--height--elementsBig);
    }
    .common--buttonBig > i {
        font-size: calc(var(--textSize--big) + .6rem);
    }
    .common--buttonBig > p {
        font-size: var(--textSize--big);
    }
    .common--buttonBig > span {
        font-size: var(--textSize--big);
    }



/* Navegación
----------------------------------------------------------------------------------------------------------------- */
.window--navigation {
    width: 100%; max-height: auto;
    position: fixed;
    display: flex; flex-direction: row;
    z-index: 800;

    background: rgba(0,0,0,0.1);
    backdrop-filter: saturate(180%) blur(50px);

    transition: max-height 1s ease;
}
.window--navigation nav {
    transition: max-height 1s linear;
    overflow: hidden;
}
.window--navigation nav[open] {
    max-height: 500px;
    transition: max-height 1s linear;
}
.window--navigation[open] {
    background-color: rgba(0,0,0,0.1) !important;
    backdrop-filter: saturate(180%) blur(50px) !important;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}
.window--navigation[service] {
    background-color: var(--color--representative1);
}
    .navigation--sideLinks {
        width: 100%; max-height: 100px;
        padding: 0 30px;
        display: flex;
    }
    .navigation--sideLinks > ul {
        width: 100%;
        padding: 0;
        margin: auto;
        display: flex;

        list-style: none
    }

        .navigation--sideLinks > ul li {
            margin: auto 50px auto 0;
        }
        .navigation--sideLinks > ul li a {
            padding-bottom: 8px;

            font-size: 1.7rem !important;
            color: #fff;
            letter-spacing: 3px;

            cursor: pointer;

            text-decoration: none;
        }
        .navigation--sideLinks > ul li a:hover {
            padding-bottom: 10px;
            border-bottom: solid 2px #fff;
        }
        .navigation--sideLinks > ul li:last-child {
            margin: auto auto auto 0;
        }

        .navigation--menu {
            display: none;
        }
        .navigation--menu a i {
            margin-bottom: 10px;

            font-size: 2.3rem !important;
            color: #fff;
        }

        .navigation--logo {
            width: auto; height: 80px; 
            margin: auto 50px auto auto !important;
            display: flex;
        }
        .navigation--logo a {
            position: relative;
            display: flex; flex-direction: row;
        }

        .logo--logo {
            height: 55px;
            margin: auto !important;
            display: none;
        }
        .navigation--logo a span {
            margin: auto !important;
            padding-top: 5px;

            font-size: 2rem !important;
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;

            text-decoration: none;
        }

        .navigation--sideLinks > ul .navigation--logo a:hover {
            padding-bottom: 8px !important;
        }
        .navigation--logo a:hover {
            border: none !important;
        }
        .navigation--logo a:hover span {
            color: var(--color--link);
        }

        .navigation--sideLinks > ul .navigation--menu a:hover {
            border-bottom: none;
        }
        .navigation--sideLinks > ul .navigation--menu a:hover i {
            color: var(--color--link) !important; 
        }

@media only screen and (max-width: 1150px) {
    .window--navigation {
        position: absolute;
        padding-bottom: 5px;
    }
    .window--navigation[open="open"] {
        /*background-color: var(--color--representative5);*/
    }

    .navigation--sideLinks > ul {
        display: flex;
        flex-direction: column;
    }
    .navigation--sideLinks > ul .sideLinks--mainItem {
        display: none;
    }

    .navigation--menu, .navigation--logo {
        display: flex !important;
    }
    .navigation--menu {
        width: 50px; height: 50px;
        margin: auto 40px auto 0 !important;
        display: flex;
        position: absolute; top: 23px;
    }
    .navigation--menu i {
        margin: auto;
    }
    .navigation--logo {
        padding-left: 40px;
        margin: auto auto auto 0 !important;
    }
    
    .navigation--sideLinks[open] > ul .sideLinks--mainItem {
        height: 60px;
        margin: 3px 0 !important;
        display: flex !important;
    }
    .navigation--sideLinks[open] > ul .sideLinks--mainItem a {
        margin: auto auto auto 0;
    }
}


/* Footer
----------------------------------------------------------------------------------------------------------------- */
.window--footer {
    width: 100%;
    background-color: var(--color--representative5);
    position: relative;
    display: flex;
    flex-direction: row;
}

    .footer--column1 {
        height: 250px;
        margin: auto 80px auto auto;
        display: flex; flex-direction: column;
    }

    .column1--company {
        margin: 40px auto var(--padding--insideInterfaces) 0;
        display: flex;
        flex-direction: row;
    }

    .company--logo {
        width: 50px; height: 50px;
        padding-top: 10px; padding-left: 8px;
        margin: auto var(--padding--insideInterfaces) auto 0;

        font-size: 2rem !important;
        color: #fff;
    }

    .column1--company label {
        margin: auto auto auto 0;

        font-size: 1.5rem !important;
        color: #fff;
        font-weight: bold;
    }

    .footer--column1 > p {
        line-height: 1.1rem !important;
        color: #fff;
        text-align: center;
        font-size: 0.7rem;
    }

        .footer--column1 > p strong {
            color: #fff;
            font-weight: bold;
        }

        .footer--column1 > p span {
            line-height: 1.1rem !important;
            color: #fff;
            text-align: center;
            font-size: 0.7rem;
        }

    .column1--socials {
        width: 100%;
        margin: 15px auto auto;
        display: flex;
        flex-direction: row;
    }

        .column1--socials i {
            margin: auto;
            font-size: 1.5rem !important;
            color: #fff;
        }

    .footer--column2 {
        height: 250px;
        margin: auto auto auto 0;
    }

        .footer--column2 label {
            margin: 56px auto var(--padding--insideInterfaces);
            font-size: 1.4rem !important;
            color: #fff;
            font-weight: bold;
        }

        .footer--column2 ul {
            padding: 0;
            list-style: none;
        }

            .footer--column2 ul li {
                margin-bottom: 12px;

                font-size: 1.2rem !important;
                color: #fff;
            }

                .footer--column2 ul li a {
                    color: #fff;
                    text-decoration: none;
                }

                    .footer--column2 ul li a:hover {
                        color: #5085f5;
                    }

                .footer--column2 ul li select {
                    font-size: 18px !important;
                    height: 40px;
                    margin-top: -10px;
                }

@media only screen and (max-width: 1220px) {
    .window--footer {
        flex-wrap: wrap;
    }

    .footer--column1 {
        margin-left: auto;
        margin-right: 70px;
    }

    .footer--column2 {
        margin-right: auto;
    }
}

@media only screen and (max-width: 522px) {
    .footer--column1 {
        height: 250px;
        margin: auto;
    }
    
    .footer--column2 {
        width: 250px; height: auto;
        margin: auto;
    }
    .footer--column2 label {
        width: 100%;
        margin-top: 0;
    
        text-align: center;
    }
    .footer--column2 ul li {
        width: 100%;
    
        text-align: center;
    }
}