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

:root {
    font-size: 100%;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    display: block;
}

p a {
    display: inline;
    text-decoration: underline;
}

img,
picture,
video,
iframe,
svg {
    display: block;
    width: 100%;
}

body {
    font-family: Rubrik;
    background-image: url(../../assets/imgs/webm/cuadras.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* FIN DE RESET */

/* VARIABLES */

:root {
    --color-oscuro: rgba(34, 34, 34);
    --color-rosado: rgb(255, 102, 102);
    --color-rosadoopacitty: rgba(255, 102, 102, 0.5);
    --color-fondo: rgba(68, 68, 68, 0.5);
    --color-fonts: rgba(255, 255, 255);
    --color-buttons: rgba(253, 253, 253, 0.5);
    --color-bttnshover: rgba(255, 102, 102, 0.5);
}

/* FIN DE VARIABLES */

@font-face {
    font-family: Rubrik;
    src: url('../../assets/fonts/Rubik/Rubik-VariableFont_wght.ttf');
}

/* FIN DE VARIABLES */

/* HEADER */

.Wrapper-header {
    width: 100%;
    height: 4rem;
    background-color: var(--color-rosado);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Container-h1 {
    width: 50%;
    margin: auto;
    padding: 1rem;
}

.Header-h1 {
    font-size: 1.2em;
    margin: auto 3rem;
    color: var(--color-fonts);
}

.Container-menu {
    width: 50%;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Header-menu-hamburguesa {
    display: none;
    width: 15%;
    background-color: var(--color-buttons);
    margin: auto;
}

.Header-menu-hamburguesa:hover {
    cursor: pointer;
}

.Menu-nav {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Menu-ul {
    width: 50%;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Menu-li {
    width: 30%;
    text-align: center;
    font-size: 1em;
    color: var(--color-fonts);
}

.Menu-li:hover {
    background-color: var(--color-rosadoopacitty);
    border: white solid 3px;
    border-radius: 1rem;
}

/* FIN HEADER */

/* Sección h2 */
.Wrapper-h2 {
    width: 100%;
    /* background-color: blue; */
}

.Container-h2 {
    width: 50%;
    /* background-color: green; */
    margin: 5rem auto 0;
}

.Contact-h2 {
    width: 100%;
    background-color: rgba(34, 34, 34, 0.5);
    padding: 2rem;
    color: var(--color-fonts);
}

/* Fin Sección h2 */

/* Sección contacto */

.Contact {
    width: 50%;
    min-height: 6.25rem;
    margin: 0 auto 20rem auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
}

.Wrapper-contact-up {
    width: 100%;
    min-height: 6.25rem;
    background-color: rgba(34, 34, 34, 0.5);
    padding: 2rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-end;
}

.Contact-ul {
    width: 100%;
    gap: 1rem;
    padding: 1rem;
    border: solid 5px white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-end;
}

.Contact-li {
    color: white;
}

.Wrapper-contact-down {
    width: 100%;
    min-height: auto;
    background-color: rgba(34, 34, 34, 0.5);
    padding: 2rem;
}

.Contact-down-ul {
    width: 100%;
    gap: 1rem;
    padding: 1rem;
    border: solid 5px white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

}

.Contact-down-li {
    color: white;
}

/* Fin sección contacto */

/* Footer */
.Wrapper-footer {
    width: 100%;
    background-color: var(--color-oscuro);

}

.Footer-policy {
    width: 90%;
    padding: 1rem;
}

.Policy-ul {
    width: 50%;
    margin: 2rem auto auto;
    color: var(--color-fonts);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Footer-copy {
    width: 12rem;
    padding: 1rem;
    color: var(--color-fonts);
    margin: auto;
}

/* Fin Footer */

/* MediaQuerys */


@media (min-width:992px) {
    .Menu-ul {
        width: 60%;
    }

    .Footer-copy {
        margin: auto;
    }
}

@media (min-width:1024px) {
    .Container-h1 {
        padding: 0;
    }

    .Menu-li {
        width: 60%;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .Menu-ul {
        width: 100%;
    }

    .Menu-li {
        width: 50%;
    }

    .Container-h2 {
        width: 90%;
    }

    .Contact {
        width: 90%;
    }

    .Footer-copy {
        margin: auto;
    }

    .Policy-ul {
        margin: auto auto auto 13rem;
    }
}

@media (min-width:425px) and (max-width:600px) {
    .Header-h1 {
        margin: auto;
    }

    .Container-menu {
        width: 60%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-end;
    }

    .Header-menu-hamburguesa {
        width: 2.5rem;
        margin: auto .5rem auto;
        display: block;
    }

    .Menu-nav {
        margin: 0;
    }

    .Menu-ul {
        width: 70%;
        display: none;
        flex-flow: column nowrap;
        align-items: flex-start;
    }

    .Menu-ul.isActive {
        width: 100%;
        display: flex
;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-end;
        margin: auto;
    }

    .Menu-li {
        margin: .5rem auto auto;
    }
    .Menu-li-a{
        width: 8rem;
    }

    /* .Menu-nav {
        width: 80%;
        display: none;
    }

    .Menu-nav.isActive {
        display: flex;
    }

    .Menu-ul {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    } */
    .Container-h2 {
        width: 90%;
    }

    .Contact {
        width: 90%;
    }

    .Policy-ul {
        width: 100%;
        margin: 2rem auto auto 2rem;
    }

    .Footer-copy {
        margin: auto;
    }
}

@media (max-width:424px) {
    .Header-menu-hamburguesa {
        display: block;
        margin: auto auto auto 7rem;
    }

    .Menu-nav {
        width: 80%;
        display: none;
    }

    .Menu-nav.isActive {
        display: flex;
    }

    .Menu-ul {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .Container-h1 {
        margin: 0;
    }

    .Header-h1 {
        margin: 0;
    }

    .Container-h2 {
        width: 90%;
    }

    .Wrapper-contact-up,
    .Wrapper-contact-down {
        padding: .5rem;
    }

    .Contact {
        width: 90%;
    }

    .Policy-ul {
        width: 100%;
        margin: 2rem auto auto 2rem;
    }

    .Footer-copy {
        margin: auto;
    }
}

/* Fin de MediAQuerys */