/* Diseño y desarrollo: https://github.com/noemirtil */

  @font-face {
      font-family: 'Questrial';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/Questrial-Regular.woff2') format('woff2');
  }

  @font-face {
      font-family: 'Nunito';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/Nunito-ExtraLight.woff2') format('woff2');
  }

  @font-face {
      font-family: 'Quicksand';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/Quicksand-Light.woff2') format('woff2');
  }

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/Montserrat-Thin.woff2') format('woff2');
  }

:root {
    /* Color palette */
    --darkest: #641A24;
    --dark: #7D202D;
    --mid: #AF2D3F;
    --mid-hsl: 352deg 59% 43%;
    --brand: #FB425A;
    --brand-hsl: 352deg 96% 62%;
    --light: #ffd5db;
    --lightest: #ffffff;

    /* Shadows */
    --shadow-color: var(--mid-hsl);
    --shadow-elevation-low:
        0.1px 1px 1px hsl(var(--shadow-color) / 0.48),
        0.1px 1.5px 1.5px -1.7px hsl(var(--shadow-color) / 0.39),
        0.3px 4px 3.9px -3.5px hsl(var(--shadow-color) / 0.3);
    --shadow-elevation-medium:
        0.1px 1px 1px hsl(var(--shadow-color) / 0.4),
        0.2px 2.1px 2.1px -0.9px hsl(var(--shadow-color) / 0.36),
        0.4px 4.4px 4.3px -1.7px hsl(var(--shadow-color) / 0.31),
        0.8px 9.8px 9.6px -2.6px hsl(var(--shadow-color) / 0.27),
        1.6px 20px 19.6px -3.5px hsl(var(--shadow-color) / 0.22);
    --shadow-elevation-high:
        0.1px 1px 1px hsl(var(--shadow-color) / 0.38),
        0.3px 3.3px 3.2px -0.4px hsl(var(--shadow-color) / 0.35),
        0.5px 5.9px 5.8px -0.8px hsl(var(--shadow-color) / 0.33),
        0.8px 9.6px 9.4px -1.2px hsl(var(--shadow-color) / 0.31),
        1.2px 15.2px 14.9px -1.6px hsl(var(--shadow-color) / 0.29),
        1.9px 23.5px 23px -1.9px hsl(var(--shadow-color) / 0.27);
    --box-shadow: 0 2px 6px #96273665;
    --text-shadow: 2px 2px 2px #96273665;
    --link-shadow: 2px 2px 1px var(--mid);
    --menu-shadow: 2px 3px 1px var(--mid);
    --mirtilshadow: #ffacb717;

    /* Other variables */
    --corner: 1rem;
    --title: clamp(1.6rem, 6vw, 3.4vw);
    --description: clamp(1.6rem, 4vw, 2rem);
    --paragraph: clamp(1rem, 2vw, 1.4rem);
    --link: clamp(1rem, 2vw, 1.4rem);
}

html {
    font-size: 18px;
    /* Defines the standard value for 1rem */
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    font-size: 1.1rem;
    font-family: 'Questrial', 'Nunito', 'Quicksand', 'Montserrat', 'Geneva', Verdana, sans-serif;
    text-decoration: none;
    transition: all 0.24s;
    color: inherit;
    min-width: 0;
}

/* MARK: Body
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    height: 100%;
    background-image: url("img/fondo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    color: var(--lightest);
    overflow-wrap: break-word;

    p {
        text-wrap: balance;
        font-size: var(--paragraph);
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h2 {
        text-align: center;
        font-size: var(--title);
        color: var(--lightest);
    }

    hr {
        border-top: 0 solid var(--lightest);
        margin: 0.4rem 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    img,
    iframe,
    picture,
    video,
    canvas,
    svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: hidden;
        object-fit: contain;
        border: none;
    }

    .hidden {
        display: none;
    }

    .transparent {
        opacity: 0;
    }

    .button1 {
        color: var(--lightest);
        background: none;
        backdrop-filter: blur(4px);
        margin-block: 1rem;
        padding-block: 0.2rem;
        width: 90%;
        font-size: 1.2rem;
        border-radius: 50px;
        border: 2px solid var(--lightest);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: var(--shadow-elevation-medium);
        transition: all 0.5s;

        .arrow {
            width: 1rem;
            transition: all 0.5s;

            &.reverse {
                transform: rotate(-180deg)
            }
        }

        &:hover {
            cursor: pointer;
            width: 86%;
            backdrop-filter: blur(14px);
            text-shadow: var(--text-shadow);
            box-shadow: var(--shadow-elevation-high);
            transition: all 0.3s;

            .arrow {
                transform: rotate(360deg) scale(1.8);
                transition: all 0.3s;

                &.reverse {
                    transform: rotate(180deg) scale(1.8);
                }
            }

        }
    }

    .button1:active {
        background: var(--mid);
        transform: translateY(4px);
        box-shadow: var(--shadow-elevation-medium);
    }
}

/* MARK: Header
*/
header {
    position: sticky;
    top: 0;
    z-index: 1;

    #shadow {
        height: 200vh;
        width: 100vw;
        right: 0;
        position: fixed;
        background-image:
            linear-gradient(#4c000ac8, #af2d3e00);
        backdrop-filter: blur(8px);
    }

    .shadow-class {
        top: -200vh;
    }

    #header-desktop-container {
        display: none;
    }

    .lang-links-desktop {
        position: absolute;
        top: 0;
        left: -60vh;
        display: flex;
        color: var(--lightest);
        border-bottom-right-radius: 1.4rem;
        border-top-right-radius: 1.4rem;
        background-color: #ff6d88;
        background-image:
            linear-gradient(to left, #FB425A, #ff38532f);
        box-shadow: 5px 3px 6px #a92839;
        z-index: 1;

        button {
            padding: 0.6rem 0.6rem 0.2rem 0.6rem;
            border: none;
            background-color: transparent;
        }

        #esp-desk {
            padding-left: 1.2rem;
        }

        #eng-desk {
            border-bottom-right-radius: 1.4rem;
            border-top-right-radius: 1.4rem;
            padding-right: 1.2rem;
        }
    }

    #lang-links-desktop>.current-page {
        border-bottom: 0.4rem solid var(--light);
        transition: all 0.5s;

        &:hover {
            cursor: default;
            transition: all 0.2s;
        }
    }

    #lang-links-desktop>.current-not {
        /* spaceholder to avoid jumping */
        border-bottom: 0.4rem solid transparent;
        transition: all 0.6s;

        &:hover {
            cursor: pointer;
            text-shadow: 2px 2px 2px #96273665;
            border-bottom: 0.4rem solid var(--lightest);
            transition: all 0.3s;
        }
    }

    .lang-links-mob {
        display: none;
        top: -200vh;
    }

    #header-mobile-container {
        width: 100%;
        display: flex;
        justify-content: center;
        position: fixed;
        top: 20vh;
        right: 0;
        transition: all 0.5s;

        #lang-links-mobile {
            text-align: center;
            width: 68vw;

            .burger-nav {
                font-size: 1.8rem;
                display: flex;
                flex-direction: column;
            }

            .burger-nav button {
                background: transparent;
                border-block: none;
                padding-inline: 1rem;
                font-size: larger;
                text-shadow: var(--text-shadow);
                margin-top: 1.6rem;
            }

            #burger-nav>.current-page {
                border-left: 4px solid var(--lightest);
                border-right: 4px solid var(--lightest);
                border-radius: 2px;
                color: var(--lightest);
                transition: all 0.5s;

                &:hover {
                    cursor: default;
                    transition: all 0.2s;
                }
            }

            #burger-nav>.current-not {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                color: var(--light);
                transition: all 0.5s;

                &:hover {
                    color: var(--lightest);
                    text-shadow: var(--menu-shadow);
                    cursor: pointer;
                    transition: all 0.2s;
                }
            }

            #burger-lang {
                color: var(--light);
                margin-top: 4rem;
                font-size: 1.6rem;
                display: flex;
                justify-content: space-between;
                transition: all 0.5s;

                &:hover {
                    color: var(--lightest);
                    text-shadow: var(--menu-shadow);
                    cursor: pointer;
                    transition: all 0.2s;
                }

                button {
                    background: transparent;
                    border: none;
                }
            }

            #burger-lang>.current-page {
                border-bottom: 4px solid var(--lightest);
                border-radius: 4%;
                color: var(--lightest);
                transition: all 0.5s;

                &:hover {
                    cursor: default;
                    transition: all 0.2s;
                }
            }

            #burger-lang>.current-not {
                border-bottom: 4px solid transparent;
                color: var(--light);
                transition: all 0.5s;

                &:hover {
                    color: var(--lightest);
                    text-shadow: var(--menu-shadow);
                    cursor: pointer;
                    transition: all 0.2s;
                }
            }
        }
    }

    #burger {
        position: fixed;
        right: 1rem;
        top: 1rem;
        background: none;
        border: none;
        transition: all 0.5s;

        &:hover {
            cursor: pointer;
            transform: scale(1.6);
            transition: all 0.2s;
        }
    }

    .burger__bar1,
    .burger__bar2,
    .burger__bar3 {
        background-color: var(--lightest);
        width: 21px;
        height: 3px;
        margin: 4px 0;
    }

    .burger--open .burger__bar1 {
        transform: translate(0, 7px) rotate(-45deg);
    }

    .burger--open .burger__bar2 {
        opacity: 0;
    }

    .burger--open .burger__bar3 {
        transform: translate(0, -7px) rotate(45deg);
    }

    .show-mob {
        display: block;
        top: 0;
    }

    .show-desk {
        left: 0;
    }
}

/* MARK: Main
*/
main {
    line-height: 1.5;

    #homegrid {
        /* || Mobile Home grid */
        display: grid;
        grid-template-columns: 6rem repeat(2, 1fr) 6rem;
        grid-template-rows: repeat(9, max-content);
        grid-template-areas:
            "banner banner . . "
            "symbols symbols symbols symbols"
            "description description description description"
            "lista lista lista lista"
            "la-lenadora la-lenadora la-lenadora la-lenadora"
            "cliente cliente cliente cliente"
            "criades criades criades criades"
            "cuidamos cuidamos cuidamos cuidamos"
            "gigs gigs gigs gigs";
    }

    a {
        cursor: pointer;
        color: var(--lightest);
    }

    #banner-covers-section {
        display: contents;
    }

    #banner-section {
        grid-area: banner;
        display: flex;
        justify-content: center;
    }

    #banner {
        max-width: 18rem;
    }

    #covers-section {
        display: none;
    }

    #symbols-section {
        grid-area: symbols;
        position: sticky;
        top: 2rem;
        display: flex;
        justify-content: space-evenly;
    }

    .symbols {
        max-width: 3.7rem;
        margin: 0;
        box-shadow: var(--box-shadow);
        border-radius: 50%;
        transition: all 0.6s;

        &:hover {
            /* max-width: 4rem; */
            transform: rotate(360deg) scale(1.14);
            box-shadow: var(--shadow-elevation-medium);
            transition: all 0.3s;
        }
    }

    #description-section {
        grid-area: description;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;

        p {
            font-size: var(--description);
        }
    }

    #videos-section {
        display: contents;

        .video {
            display: flex;
            justify-content: center;
            width: 267px;
            margin: 2vw auto;

            iframe {
                border-radius: 12px;
                box-shadow: var(--shadow-elevation-medium);
            }
        }

        #lista {
            grid-area: lista;
        }

        #la-lenadora {
            grid-area: la-lenadora;
        }

        #cliente {
            grid-area: cliente;
        }

        #criades {
            grid-area: criades;
        }

        #cuidamos {
            grid-area: cuidamos;
        }
    }

    #gigs-section {
        grid-area: gigs;
        padding: 6vw;
        color: var(--light);

        #concert-title {
            margin-bottom: 1rem;
        }

        a {
            color: var(--lightest);
            transition: all 0.5s;

            &:hover {
                text-shadow: var(--link-shadow);
                transition: all 0.2s;
            }
        }

        .centered {
            text-align: center;
        }
    }

    #pro-page {
        display: none;
        flex-direction: column;
        align-items: center;

        #pro-title {
            font-size: clamp(1.4rem, 3.8vw, 2rem);
        }

        #pro-banner-section {
            #banner-pro {
                transition: opacity 0.5s;
                width: 50vw;
                height: fit-content;
                position: fixed;
                left: 0;
            }
        }

        #pro-dl-section {
            margin-top: 40vw;
            width: 100vw;
            max-width: 30rem;
            padding: 0 4vw 0 4vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}

/* MARK: Footer
*/
footer {
    margin-top: 2rem;
    margin-inline: auto;
    max-width: 30rem;

    #form-shadow {
        height: 200vh;
        width: 100vw;
        right: 0;
        position: fixed;
        background-image:
            linear-gradient(#4c000ac8, #af2d3e00);
        backdrop-filter: blur(8px);
        z-index: 2;
    }

    .form-shadow-class {
        top: -200vh;
    }

    .show-form {
        display: block;
        top: 0;
    }

    #result {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem;

        p {
            font-size: min(34px, 7vw);
            white-space: pre-line;
            /* Necessary for escaping \n newline in JS innerHTML */
        }
    }

    form {
        display: flex;
        flex-direction: column;
        padding: 0 4vw 0 4vw;


        input {
            background-color: transparent;
            width: 100%;
            align-self: flex-start;
            border: 0;
        }

        textarea {
            background-color: transparent;
            width: 100%;
            border: 0;
            resize: none;
        }

        textarea:focus,
        input:focus {
            outline: none;
            background-color: #fb425b33;
            backdrop-filter: blur(20px);
            border-radius: 6px;
        }

        button {
            align-self: center;
            margin-top: 1rem;
        }
    }

    #copyright {
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 1rem;
        color: var(--light);
    }

    a {
        color: var(--light);
        text-shadow: 0 1px 0 var(--mirtilshadow), 1px 0 0 var(--mirtilshadow), 1px 2px 1px var(--mirtilshadow), 2px 1px 1px var(--mirtilshadow), 2px 3px 2px var(--mirtilshadow), 3px 2px 2px var(--mirtilshadow), 3px 4px 2px var(--mirtilshadow), 4px 3px 3px var(--mirtilshadow), 4px 5px 3px var(--mirtilshadow), 5px 4px 2px var(--mirtilshadow), 5px 6px 2px var(--mirtilshadow), 6px 5px 2px var(--mirtilshadow), 6px 7px 1px var(--mirtilshadow), 7px 6px 1px var(--mirtilshadow), 7px 8px 0 var(--mirtilshadow), 8px 7px 0 var(--mirtilshadow);
        transition: all 0.5s;

        &:hover {
            cursor: pointer;
            color: var(--lightest);
            text-shadow: var(--shadow-elevation-medium);
            transition: all 0.2s;
        }
    }

}

/* MARK: @media 570
*/
@media screen and (min-width: 570px) {

    header {
        height: 3rem;

        #header-mobile-container {
            display: none;
        }

        #header-desktop-container {
            backdrop-filter: blur(16px);
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            #menu-section>.current-page {
                border-bottom: 2px solid var(--light);
                transition: all 0.5s;

                &:hover {
                    cursor: default;
                    transition: all 0.2s;
                }
            }

            #menu-section>.current-not {
                /* spaceholder to avoid jumping */
                border-bottom: 2px solid transparent;
                transition: all 0.6s;
                /* Necessary for border animation */
                position: relative;

                &:hover {
                    cursor: pointer;
                    text-shadow: 2px 2px 2px #96273665;
                    border-bottom: 2px solid var(--lightest);
                    transition: all 0.3s;
                }

                /* Border animation */
                &::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    left: 50%;
                    bottom: -2px;
                    background-color: var(--lightest);
                }

                &:hover::after {
                    width: 100%;
                    left: 0;
                }
            }
        }

        .lang-btn {
            background-color: transparent;
            border: none;
            color: var(--lightest);
            width: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 2px solid transparent;
            transition: all 0.6s;
            /* Necessary for border animation */
            position: relative;

            &:hover {
                border-bottom: 2px solid var(--lightest);
                text-shadow: 2px 2px 2px #96273665;
                cursor: pointer;
                transition: all 0.3s;
            }

            /* Border animation */
            &::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                left: 50%;
                bottom: -2px;
                background-color: var(--lightest);
            }

            &:hover::after {
                width: 100%;
                left: 0;
            }
        }

        #dropdown-lang-nav {
            padding-inline: 1rem;
        }

        #menu-section {
            width: 60vw;
            display: flex;
            justify-content: space-evenly;

            button {
                background: transparent;
                border-inline: none;
                border-top: none;
            }
        }

        #burger {
            display: none;
        }
    }

    main {
        #homegrid {
            /* || Tablet Home grid */
            grid-template-rows: repeat(6, max-content);
            grid-template-areas:
                " banner banner covers symbols"
                " description description covers symbols"
                " lista lista la-lenadora la-lenadora"
                " cliente cliente criades criades"
                " . cuidamos cuidamos . "
                " . gigs gigs . ";
        }

        .button1 {
            font-size: 1.4rem;
        }

        #covers-section {
            grid-area: covers;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: flex-end;
            gap: 1rem;

            img {
                width: 24vW;
                height: auto;
                max-height: 26vh;
                /* Maintain aspect ratio */
            }
        }

        #banner-section {
            display: flex;
            justify-content: center;
            align-items: center;
            left: 1rem;

            #banner {
                max-height: 40vh;
                max-width: 20rem;
                padding-bottom: 4rem;
            }
        }

        #description-section {
            /* font-size: 0.1rem; */
            max-height: 30vh;
            padding-bottom: 6rem;
        }

        #symbols-section {
            flex-direction: column;
            justify-content: space-evenly;
            align-items: flex-end;
            position: sticky;
            margin-right: 0.6rem;
        }

        #gigs-section {
            grid-area: gigs;
            padding: 0;
        }

        #videos-section {
            .video {
                height: 24vw;
            }

            #lista {
                width: 42.72vw;
            }

            #la-lenadora {
                width: 42.72vw;
            }

            #cliente {
                width: 42.72vw;
            }

            #criades {
                width: 42.72vw;
            }

            #cuidamos {
                width: 42.72vw;
            }
        }

        #pro-page {
            h2 {
                font-size: clamp(1.4rem, 5.8vw, 2.2rem);
            }

            #pro-banner-section {
                padding: 0 4vw 0 4vw;

                #banner-pro {
                    position: static;
                    width: auto;
                    height: 10rem;
                }
            }

            #pro-dl-section {
                margin-top: 0;
            }
        }
    }

    footer {
        max-width: 32rem;
    }
}

/* MARK: @media 770
*/
@media screen and (min-width: 770px) {

    #homegrid {
        /* || Desktop Home grid */
        grid-template-areas:
            " . banner covers symbols"
            " . description covers symbols"
            " . lista la-lenadora . "
            " . cliente criades . "
            " . cuidamos cuidamos . "
            " . gigs gigs . ";
    }

    main {

        #covers-section {
            align-items: center;

            img {
                max-height: 26vh;
            }
        }

        #symbols-section {
            align-items: center;
            margin-right: 0;
        }

        #videos-section {
            .video {
                height: 20vw;
            }

            #lista {
                width: 35.6vw;
            }

            #la-lenadora {
                width: 35.6vw;
            }

            #cliente {
                width: 35.6vw;
            }

            #criades {
                width: 35.6vw;
            }

            #cuidamos {
                width: 35.6vw;
            }
        }

        #gigs-section {
            padding-inline: 8vw;

            a {
                font-size: min(24px, 2.6vw);
            }
        }

        #pro-page {
            #pro-dl-section {
                padding: 0 2rem 0 2rem;
            }
        }
    }

}