:root{
    --fuentePrincipal: 'Roboto', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif;

    --primario: #1073ba;
    --secundario: #00da55;
    --gris: #3b3b3b;
    --blanco: #ffffff;
    --negro: #1f1e1e;
    --grisClaro: #e1e1e1;

    --separacion: 5rem;
}

/*Snipet: 1rem = 10px*/
html{
    box-sizing: border-box;
    font-size: 62.5%;
}*,*:before, *:after{
    box-sizing: inherit;
}


body{
    font-family: var(--fuentePrincipal);
    font-size: 1.6rem;
    line-height: 1.5;
}

/*Globales*/


.contenedor{
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;

}
h1,h2,h3{
    font-weight: 900;
    font-family: var(--fuentePrincipal);
    margin: calc(var(--separacion)/ 2) 0;
}

h1{
    font-size: 4.4rem;
}
h2{
    font-size: 3.6rem ;
}
h3{
    font-size: 2.8rem;
}
img{
    width: 100%;
    height: auto;
    display: block;
}

/*utilidades*/
.text-center{
    text-align: center;
}


/*Degradados*/
.degradado-verde{
    color: transparent;
    background: linear-gradient(to right, var(--primario) 0%, var(--secundario) 100%);
   /* --webkit-background-clip:text; */
    background-clip:text;
}

/*header*/


.navegacion-principal{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2rem;
    background-color:  var(--negro);
    
}
.contenedorNav{
    background-color:  var(--negro);
}



@media (min-width: 778px) {
    .contenedorNav{
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0;
        padding: 0;
    }
      

}















  

.logo {
    max-width: 5rem;
}

.nav-list {
    list-style-type: none;
    display: flex;

    gap: 2rem;
}

.nav-list li a {
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    color: var(--blanco);
}

.nav-list li a:hover{
    cursor: pointer;
    color: transparent;
    background: linear-gradient(to right, var(--primario) 0%, var(--secundario) 100%);
   /* --webkit-background-clip:text; */
    background-clip:text;
}

.abrir-menu,
.cerrar-menu {
    display: none;
}

@media screen and (max-width: 778px) {
    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 1.25rem;
        background-color: transparent;
        cursor: pointer;
    }

    .abrir-menu {
        color: var(--blanco);
        font-size: 3.5rem;

        border-radius: 100%;
        padding: .5rem;
        
    }
    /*
    .contenedorNav{
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0;
        padding: 0;
    }*/
    .abrir-menu:hover{
        background-color: var(--gris);
    }
    .logo{
        display: none;
    }

    .cerrar-menu {
        color: #ececec;
        font-size: 3.5rem;
    }

    .nav {
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #1c1c1c;
        padding: 2rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }

    .navegacion-principal{
        justify-content: space-between;
    }
    .nav.visible {
        opacity: 1;
        visibility: visible;
    
    }
    
    .nav-list {
        flex-direction: column;
        align-items: end;
    }

    .nav-list li a {
        color: var(--blanco)
    }



}




#progress{
    position: fixed;
    top: 0;
    width: 0%;
    background: linear-gradient(to right, var(--primario) 0%, var(--secundario) 100%);
   
    height: 1rem;

    animation: progress-grow auto linear;
    animation-timeline: scroll(root block);
    /*animation-timeline: scroll(elemento vertical/horizontal;) */
}


@keyframes progress-grow {
    from{ width: 0%;}
    to{ width: 100%;}
}













.header{
    background-color: var(--negro);
    padding: calc(var(--separacion)) 0 calc(var(--separacion) * 2) 0;

    color: var(--blanco);
}

@media (min-width: 768px) {
      .contenido-header{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
}

.texto-header{
    text-align: center;
    padding-top: var(--separacion);
}
@media (min-width: 768px) {
      .texto-header{
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
      }
}

.texto-header p {
    margin: 0;
}
.tagline-producto{
    font-size: 3rem;
    font-weight: 900;
}
.nombre-producto{
    font-size: 6rem;
         margin: 0;
}
@media (min-width: 768px) {
    .nombre-producto{
        font-size: 10rem;
        line-height: 1;
    }
}


.precio-producto span{
    font-size: 10rem;
    font-weight: 900;
}




/*Iconos*/
.iconos{
    padding: var(--separacion) 0;
}

@media (min-width: 768px) {
    .iconos{
        display: flex;
        gap: 2rem;
        text-align: center;
    }
}
.icono{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--separacion)/2);
}
.icono:last-of-type{
    margin: 0;
}

@media (min-width: 768px) {
      .icono{
        margin: 0;
      }
}
.icono img{
    width: 5rem;
}
.icono h3{
    color: var(--primario);
    text-transform: uppercase;
    margin-top: calc(var(--separacion) / 2);
}


/* sobre tech pro */

.sobre-tech{
    background-image: linear-gradient(to bottom, transparent 50%, var(--primario) 0% ), url(../img/imagen-mujer.jpg);

    background-position: right;
    background-repeat: repeat, no-repeat;
    background-size: 100%, 110rem;
}
@media (min-width: 768px) {
    .sobre-tech{
        background-image: linear-gradient(to left, transparent 50%, var(--primario) 0% ), url(../img/imagen-mujer.jpg);
        background-repeat: repeat, no-repeat;
        column-gap: 4rem;
    }
}
@media (min-width: 1600px) {
      .sobre-tech{
        background-size: 100%, 210rem;
      }
}
.sobre-tech-grid{
    display: grid;
    grid-template-rows: repeat(2, 40rem);
    row-gap: var(--separacion);
}

@media (min-width: 768px) {
    .sobre-tech-grid{
        grid-template-rows: unset;
        row-gap: unset;

        grid-template-columns: repeat(2, 1fr);
        column-gap: 4rem;
        padding: calc(var(--separacion)*2);
    }
}

.texto-sobre-tech{
    grid-row: 2 / 3  ;
   color: var(--blanco);

   display: flex;
   flex-direction: column;
   justify-content: center;

   padding-bottom: var(--separacion);
}
@media (min-width: 768px) {
      .texto-sobre-tech{
        padding-bottom: 0;
      }
}
.texto-sobre-tech h2{
    margin: 0;
    font-weight: 4rem;
}
.texto-sobre-tech h2 span{
    font-weight: bold;
}
.texto.sobre-tech p{
    font-size: 2rem ;
    line-height: 2;
}


/* MODELOS */


.modelos{
    padding: var(--separacion);
}
.header-modelos{
    font-size: 6rem;
    margin-bottom: var(--separacion);
}

.listado-modelos{
    display: flex;
    flex-direction: column-reverse;
}

@media (min-width: 992px){
    .listado-modelos{
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows:repeat(2, 20rem);
        gap: 4rem;

    }
}


.modelo{
    background-color: var(--grisClaro);
    margin-bottom: 2rem;
    padding-left: 4rem;
    color: var(--primario);
    border-radius: 2rem;
    min-height: 20rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-size: 15rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition-property: transform background-size;
    transition-duration: 300ms;
}

.modelo:hover{
    transform: scale(1.1);
    background-size: 30rem;
}



@media (min-width: 992px){
    .modelo{
        margin-bottom: 0;
    }
}

.modelo h3{
    font-size: 2.4rem;
}
.modelo .precio{
    font-size: 4rem;
    font-weight: 900;
    line-height: 0;
}
.modelo:first-of-type(){
    margin-bottom: 0;
}

.modelo-x{
    background-image: url(../img/modelo-x.svg);
    background-repeat: no-repeat;
    background-position: 90% center;
}
.modelo-y{
    background-image: url(../img/modelo-x.svg);
    background-repeat: no-repeat;
    background-position: 90% center;

}


.modelo-z{
    background-image: url(../img/modelo-z.svg);
    background-repeat: no-repeat;
    background-position: 90% center;
    background-color: var(--primario);

    color: var(--blanco);
}

@media (min-width: 992px){
    .modelo-z{
        grid-column: 2 / 3;
        grid-row: 1 / 3;

        background-size: 25rem;
    }
    .modelo-z h3{
        font-size: 3rem;
    }
}
.modelo-z .precio {
    font-size: 6rem;
}
  




/** Newsletter*/
.newsletter {
    background-image: linear-gradient( to bottom, transparent 50%, var(--blanco) 0% ), url(../img/newsletter.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%, 70rem;
}

@media (min-width: 768px) { 
    .newsletter {
    background-image: linear-gradient( to right, transparent 50%, var(--blanco) 0% ), url(../img/newsletter.jpg);

        background-position: center, -21rem 0rem;
        background-size: 100%, 100rem;
        padding: 10rem 0;
    }

}
@media (min-width: 2200px) { 
    .newsletter {
        background-size: 100%, 200rem;
        background-position: center, 0% -30rem;
    }
}

.contenido-newsletter {
    display: grid;
    grid-template-rows:repeat(2, 30rem);
    gap: var(--separacion);
}
@media (min-width: 768px) { 
    .contenido-newsletter {
        grid-template-rows: unset;
        grid-template-columns: repeat(2, 1fr);
    }
}

.texto-newsletter {
    grid-row: 2 / 3;
}
@media (min-width: 768px) { 
    .texto-newsletter {
        grid-row: unset;
        grid-column: 2 / 3;
    }
}
.formulario input[type="text"] {
    width: 100%;
    padding: 1rem;
}

.formulario input[type="submit"] {
    width: 100%;
    padding: 2rem;
    background-color: var(--primario);
    color: var(--blanco);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 900;
    border: none;
}

.footer p {
    text-align: center;
    font-family: var(--fuenteSecundaria);
    text-transform: uppercase;
    font-size: 2rem;
    color: var(--primario);
    padding: 2rem 0;
}