* {
    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%;
}


input {
    background-color: white;
    color: crimson;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

/* 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 */

body {
    font-family: Rubrik;
    background-color: var(--color-oscuro);
}

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

/* HEADER */

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

.Container-header {
    width: 90%;
    margin: auto;
    padding: 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.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 auto auto 10rem;
}

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

.Header-logo {
    width: 10%;
    height: 2rem;
    background-color: #ff6b6b;
}

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

.Menu-ul {
    width: 100%;
    height: 2rem;
    margin: auto 1rem auto 40rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    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 */

/* MAIN */

/* sección parallax */

.Section-parallax {
    height: 85vh;
    width: 100%;
    color: var(--color-fonts);
    text-align: center;
    background-image: url(../assets/imgs/webm/inicio.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.Parallax-logo {
    width: 40%;
}

.Parallax-h1 {
    margin: 1rem auto;
    font-size: 1.5rem;
}

/* fin de sección parallax */

/* sección servicios */

.Section-services,
.Article-services {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.Services-h2 {
    width: 50%;
    background-color: var(--color-oscuro);
    color: var(--color-fonts);
    margin: 1rem;
    padding: 1rem;
    border: solid white 3px;
    border-radius: 1rem;
    font-size: 1.3rem;
}

.Services-tabs {
    width: 80%;
    height: 25rem;
    background-color: var(--color-oscuro);
    margin: 1rem;
    padding: .5rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 5px rgb(111, 111, 111), -1px -1px 5px white;
}

.Services-tabs-ul {
    width: 100%;
    margin: 0 0 1rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.Services-button {
    font-size: 1rem;
    margin: .5rem auto .5rem .5rem;
    width: 100%;
    padding: .5rem;
    box-shadow: 2px 2px 5px rgb(111, 111, 111), -1px -1px 5px white;
    border-radius: .5rem;
}

.Services-button:hover {
    background-color: var(--color-bttnshover);
    cursor: pointer;
}

.Services-tabs-wrapper {
    position: relative;
    color: var(--color-fonts);
}

.Services-tabs-li-inside {
    opacity: 0;
}

.Services-tabs-li-inside.isActive {
    opacity: 1;
}

.Services-tabs-li-p {
    width: 40%;
    min-height: 5rem;
    position: absolute;
    top: 5rem;
    left: 3rem;
}

.Services-imgs {
    width: 25rem;
    margin: auto 1rem auto 15rem;
    border-radius: 1rem;
    object-fit: fill;
    object-fit: contain;
    object-fit: cover;
    position: absolute;
    top: 1rem;
    right: 5rem;
    z-index: 0;
}

/* Fin sección servicios */

/* sección formulario */

.Section-subscribe {
    width: 100%;
}

.Wrapper-subs {
    width: 100%;
    background-color: var(--color-oscuro);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.Sub-left {
    width: 50%;
}

.Sub-left-h3 {
    width: 100%;
    background-color: var(--color-rosado);
    padding: 1rem 3rem;
    font-size: 1.3rem;
}

.Form-left {
    width: 60%;

    margin: 5rem;

}

input[type="text"] {
    width: 70%;
}

input[type="email"] {
    width: 70%;
}

label[for="legal"] {
    color: var(--color-fonts);
}

.Form-right {
    width: 50%;

}

input[type="submit"]:hover {
    background-color: #ff6b6b;
    color: var(--color-fonts);
    cursor: pointer;
}

.Sub-right {
    width: 20%;
}

.Sub-right-container-rrss {
    width: 10rem;
    border-radius: 1rem;
}

.Rrss-ul {
    height: 10rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.Rrss-li {
    width: 4rem;
    min-height: 4rem;
    filter: invert(1);
}

/* Fin sección formulario */

/* Fin del main */

/* 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;
    margin: 1rem 53rem;
    color: var(--color-fonts);
}

/* Fin Footer */

/* MediaQuerys */

@media (min-width:1200px) {
    .Services-imgs {
        margin: auto 1rem auto auto;
    }
}

@media (min-width:992px) and (max-width: 1025px) {
    .Container-header {
        width: 100%;
        left: calc(10%);
    }

    .Header-logo {
        width: 10rem;
        height: auto;
    }

    .Menu-ul {
        margin: auto auto auto 30rem;
    }

    .Menu-li {
        width: 50%;
    }

    .Services-tabs {
        width: 90%;
        margin: auto;
    }

    .Form-left {
        width: 80%;
        margin: 1rem;
    }

    .Footer-copy {
        width: block;
        margin: auto;
    }
}

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

    .Header-logo {
        width: 10rem;
    }

    .Menu-ul {
        margin: auto;
    }

    .Parallax-logo {
        width: 60%;
    }

    .Services-li {
        flex-flow: column nowrap;
        height: auto;
    }

    .Services-tabs {
        height: 30rem;
        margin: 2rem auto;
    }

    .Services-tabs-li-p {
        width: 90%;
        top: .5rem;
    }

    .Services-imgs {
        top: 5rem;
        right: 6rem;
        margin: auto auto 1rem;
    }

    form {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    .Form-left {
        width: 100%;
        margin: 0;
        padding: 1rem;
    }

    label {
        width: 100%;
    }

    input[type="text"] {
        width: 100%;
    }

    input[type="email"] {
        width: 100%;
    }

    .Form-right {
        width: 80%;
    }

    .Sub-right {
        width: 25%;
    }

    .Container-rrss {
        gap: 1rem;
    }

    .Rrss-ul {
        margin: auto;
        gap: 1rem;
    }

    .Footer-copy {
        margin: auto;
    }
}
@media (max-width:768px){
    .Menu-ul{
        margin: auto;
    }
    .Services-tabs{
        width: 98%;
    }
    .Services-tabs-li-p{
        left: 0;
    }
    .Services-imgs{
        margin: auto;
        right: 1rem;
    }
    .Footer-copy{
        margin: auto;
    }
}
@media (max-width:600px) {
    .Container-header {
        width: 100%;
        justify-content: flex-start;
        left: 1rem;
    }

    .Header-logo{
        width: 50%;
    }
    .Header-menu-hamburguesa {
        width: 2rem;
        margin: auto .5rem auto 5rem;
        display: block;
    }

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

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

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

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

    .Parallax-logo {
        width: 80%;
    }

    .Services-h2 {
        width: 80%;
        margin: 2rem auto 3rem;
    }

    .Services-tabs-ul {
        width: 90%;
        flex-flow: column nowrap;
    }

    .Services-tabs {
        height: 29rem;
        margin: 1rem auto;
    }

    .Services-imgs {
        width: 15rem;
        margin: inherit;
        right: 3.5rem;
    }

    .Services-tabs-li-p {
        width: 95%;
        top: 12rem;
        left: 1.5rem;
    }

    .Wrapper-subs {
        margin: 1rem auto;
        flex-flow: column nowrap;
    }

    .Sub-left {
        width: 100%;
    }

    .Form-left {
        width: 100%;
        margin: 0;
    }

    input[type="text"] {
        width: 95%;
        padding: 1rem 1rem;
    }

    input[type="email"] {
        width: 95%;
        padding: 1rem 1rem;
    }

    input[type="submit"] {
        padding: 1rem 1rem;
    }

    .Policy-ul {
        width: 100%;
    }

    .Rrss-ul {
        height: 5rem;
        flex-flow: row nowrap;
    }

    .Form-right{
        width: 60%;
    }
    .Sub-right-container-rrss {
        width: 30%;
        height: 2rem;
    }

    .Rrss-li {
        width: 1rem;
    }

    .Sub-right {
        width: 100%;
    }

    .Footer-policy {
        margin: auto;
    }

    .Footer-copy {
        margin: auto;
    }
}

@media (max-width:425px) {
    .Services-tabs {
        margin: -2rem auto 1rem;
    }
    .Header-logo{
        width: 40%;
    }
    .Header-menu-hamburguesa{
        margin: auto .5rem auto .5rem;
    }
    .Menu-nav{
        width: 50%;
    }
    .Container-rrss{
        margin: auto;
    }
    .Footer-copy {
        margin: 1rem auto;
    }
}

/* Fin de MediAQuerys */