/*Inicio Globales*/
:root{
    --primario:  #1073ba;
    --secundario: #00DA55;
    --gris: #3B3B3B;
    --blanco: #FFFFFF;
    --negro: #1f1e1e;
    --grisClaro: #e1e1e1;

    --separacion: 5rem;

    --fuentePrincipal : 'Roboto', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif;
}

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;
}

.contenedor{
    /*El max-width toma solamente 120rem y nunca sale de este*/
    max-width: 120rem;
    /*El width al 90% se asegura de unicamente tomar 90% del espacio disponible*/
    width: 90%;
    margin: 0 auto;

}

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

h1{
    font-size: 4.4rem;
}
h2{
    font-size: 3.6rem;
}
h3{
    font-size: 2.8rem;
}

img{
    max-width: 100%;
    display: block;
    height: auto;
}

/*Fin de los Globales*/

/*Inicio Utilidades*/
.text-center{
    text-align: center;
}

/*Fin utilidades*/


/*Inicio degradados*/

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

/*Fin degradados*/

.header{
    background-color: var(--negro);
    padding: calc(var(--separacion) * 3) 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;
    } 
}

.imagen-header:hover{
    transform: scale(1.3);
    transition-property: transform;
    transition-duration: .3s;
}
.imagen-header:not(:hover){
    transition-duration: .3s;
}

@media (min-width: 768px){ 
    .imagen-header:hover{
        transform: scale(1.3);
        transition-property: transform;
        transition-duration: .3s;
    }
    .imagen-header:not(:hover){
        transition-duration: .3s;
    }
}

.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: 6rem;
    font-weight: 900;
}

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

@media (min-width: 768px){ 
    .iconos{
        display: flex;
        gap: 2rem;
    }
}

.icono{
    text-align: center;
    margin-bottom: calc(var(--separacion) / 2);
}

.icono:last-of-type{
    margin: 0;
}

@media (min-width: 768px){ 
    .icono{
        margin: 0;
    }
}

.icono img{
    width: 5rem;
    margin: 0 auto;
}

.icono h3{
    color: var(--primario);
    text-transform: capitalize;
    margin-top: calc(var(--separacion) / 2);
}

/*info-tech*/
/* .info-techpro{

}

@media (min-width: 768px){ 
    .info-techpro{
        display: flex;

    }
}

.info-texto{
    text-align: left;
    background-color: var(--primario);
    padding-left: calc(var(--separacion) * 10);
}

.info-texto h1{
    color: var(--blanco);
    gap: var(--separacion);
}

.info-texto p{
    font-size: 2rem;
    color: var(--blanco);

    gap: var(--separacion) 
}*/

.sobre-tech{
    /*Se toma como dos imagenes porque la primera imagen es el color degradado y el segundo la imagen de la chica*/
    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;
}

/*Optimizar el servicio de imagenes*/
/*Segun el js de modernizr estos formatos de imagenes se mostraran con dos condiciones
 1. Cuando el formato de imagen se encuentre disponible entre los archivos
 2. Que el navegador tenga la capacidad de servir dichos formatos*/
.notavif.notwebp .sobre-tech{
    background-image: linear-gradient(to bottom, transparent 50%, var(--primario) 0%),
                      url(../img/imagen-mujer.jpg);
}

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

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

/*Se serviran las imagenes que puedan servirse segun soporte el navegador
En caso de que el navegador no soporte avif, se cargara webp
En caso de que no soporte avif ni webp se servira jpg*/

@media (min-width: 768px){ 
    .sobre-tech{
        /*Se toma como dos imagenes porque la primera imagen es el color degradado y el segundo la imagen de la chica*/
        background-image: linear-gradient(to left, transparent 50%, var(--primario) 0%),
                          url(../img/imagen-mujer.jpg);
        background-repeat:repeat, no-repeat;
    }
    .notavif.notwebp .sobre-tech{
        background-image: linear-gradient(to left, transparent 50%, var(--primario) 0%),
                      url(../img/imagen-mujer.jpg);
    }

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

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

@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);
    padding-bottom: 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: space-between;
    padding-bottom: var(--separacion);
}

@media (min-width: 768px){ 
    .texto-sobre-tech{
        padding-bottom: 0;
    }
}


.texto-sobre-tech h2{
    font-size: 3.5rem;
}

.texto-sobre-tech p{
    font-size: 2rem;
    line-height: 2;
}

/*Modelos Tech*/
.modelos{
    padding: var(--separacion) 0;
}

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

.lista-modelos{
    display: flex;
    flex-direction: column-reverse;
}
@media (min-width: 992px){
    .lista-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-repeat: no-repeat;
    background-position: 97% center;
    background-size: 15rem;
    transition-property: transform background-size;
    transition-duration: .3s;
}

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

@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");
}
.modelo-y{
    background-image: url("../img/modelo-y.svg");
}
.modelo-z{
    background-image: url("../img/modelo-z.svg");
    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: 4.5rem;
    }
}

.modelo-z .precio{
    font-size: 5.5rem;
}

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

.notavif.notwebp .newsletter{
    background-image: linear-gradient(to bottom, transparent 50%, var(--blanco) 0%), url("../img/newsletter.jpg");
}

.webp .newsletter{
    background-image: linear-gradient(to bottom, transparent 50%, var(--blanco) 0%), url("../img/newsletter.webp");
}

.avif .newsletter{
    background-image: linear-gradient(to bottom, transparent 50%, var(--blanco) 0%), url("../img/newsletter.avif");
}


@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;
    }

    .notavif.notwebp .newsletter{
        background-image: linear-gradient(to right, transparent 50%, var(--blanco) 0%), url("../img/newsletter.jpg");
    }

    .webp .newsletter{
        background-image: linear-gradient(to right, transparent 50%, var(--blanco) 0%), url("../img/newsletter.webp");
    }
    
    .avif .newsletter{
        background-image: linear-gradient(to right, transparent 50%, var(--blanco) 0%), url("../img/newsletter.avif");
    }
    
}

@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{

}

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

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

/*Footer*/
.footer p{
    text-align: center;
    font-family: var(--fuenteSecundaria);
    text-transform: uppercase;
    font-size: 3rem;
    color: var(--primario);
    margin-top: 15rem;
}