:root{
    --primario: #1073BA;
    --secundario: #00DA55;
    --gris: #3B3B3B;
    --blanco: #FFFFFF;
    --negro: #1F1E1E;
    --grisClaro: #e1e1e1;

    --separacion: 5rem;
    
    --fuentePrincipal:font-family: 'Roboto', sans-serif;
    --fuenteSecundaria:font-family: 'Lato', sans-serif;
}
html{
    box-sizing:border-box;
    font-size: 62.5%;
}
*, *:before,*:after{
    box-sizing:inherit;
}
body{
    font-size: 1.6rem;
    font-family: var(--fuentePrincipal);
    line-height: 1.5;
}

/*Globales*/
.contenedor{
    max-width: 120rem;
    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;
}

/*Utilidades*/
.degradado-verde{
  background:linear-gradient(to right,var(--primario) 0%,var(--secundario) 100%);
  -webkit-background-clip: text;
}
/*header*/
.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:1fr 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-top: 0;
    }
}   
.texto-header p{
    margin: 0;
}
.tagline-producto{
    font-size: 3rem;
    font-weight: 900;
    margin: 0;
}
.nombre-producto{
    font-size: 6rem;
    margin:0;
    color: transparent;
}
@media(min-width: 768px){ 
    .nombre-producto{
        font-size:10rem;
        line-height: 1;
    }   
}
.precio-producto span{
    font-weight: 900;
    font-size: 6rem;
}

/*sección iconos*/
 .seccion-iconos{
    padding: var(--separacion) 0;
 }
.icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}
.icon img{
    width: 10%;
}
.icon h3{
    color: var(--primario);
}
.icon h3,
.icon p{
    margin:1.5rem 0 0 0;
    text-align: center;
} 


@media(min-width: 768px){ 
    .seccion-iconos{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
    }
    .icon img{
        width: 20%;
    }
}


/*sobre*/
.seccion-sobre{
   background-repeat: repeat,no-repeat;
   background-position:right;
   background-size: 100%,110rem;
}

.notavif.notwebp .seccion-sobre{
    background-image: linear-gradient(to bottom, transparent 50%,var(--primario) 50%),
    url('../img/imagen-mujer.jpg');
}
.avif .seccion-sobre{
    background-image: linear-gradient(to bottom, transparent 50%,var(--primario) 50%),
    url('../img/imagen-mujer.avif');
}
.webp .seccion-sobre{
    background-image: linear-gradient(to bottom, transparent 50%,var(--primario) 50%),
    url('../img/imagen-mujer.webp');
}
.grid-sobre{
    display: grid;
    grid-template-rows: repeat(2,40rem);
}
.grid-sobre .texto-sobre{
    grid-row: 2/3;
    color: var(--blanco);
}
.texto-sobre span{
    font-weight: 700;
}
.texto-sobre{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

@media(min-width: 768px){ 
    .seccion-sobre{
        padding: var(--separacion) 0;
     }
     .notavif.notwebp .seccion-sobre{
        background-image: linear-gradient(to right, var(--primario) 50%,transparent 50%),
        url('../img/imagen-mujer.jpg');
    }
    .avif .seccion-sobre{
        background-image: linear-gradient(to right, var(--primario) 50%,transparent 50%),
        url('../img/imagen-mujer.avif');
    }
    .webp .seccion-sobre{
        background-image: linear-gradient(to right, var(--primario) 50%,transparent 50%),
        url('../img/imagen-mujer.webp');
    }
     .grid-sobre{
       grid-template-rows: unset;
       grid-template-columns: repeat(2,1fr);
     }
     .texto-sobre{
        padding: var(--separacion);
     }

}

/*MODELOS*/
.main-contenido{
    margin:0 auto;
    text-align: center;
}
.main-modelos{
    padding: 5rem 0;
}
.main-contenido h1{
    margin-top: 0;
    font-size: 5rem;
    background: linear-gradient(to right, var(--primario) 20%, var(--secundario) 100%) ;
    -webkit-background-clip: text;
    color:transparent;
}
.modelo:nth-child(1){
    grid-row: 3/4;
    background-image: url('../img/modelo-x.svg');
}
.modelo:nth-child(2){
    background-image: url('../img/modelo-y.svg');
    background-repeat: no-repeat;
}

.modelo:nth-child(3){
    background-color: var(--primario);
    grid-row: 1/2;
    background-image: url('../img/modelo-z.svg');
    background-size: 12rem;
}

.modelo{
    display: flex;
    align-items: center;
    min-height: 20rem;
    background-color: var(--grisClaro);
    border-radius: calc(var(--separacion)/2.5);
    background-repeat: no-repeat;
    background-position: 90% center;
    background-size: 10rem;
    transition-property: transform background-size;
    transition-duration: .4s;
}
.modelo:hover{
    transform: scale(1.1);
    background-size: 16rem;
}
.modelo:nth-child(3) h3{
    color:var(--blanco);
}
.modelos{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    gap: 3rem;
}
.modelo h3:nth-child(1){
    padding-left: 2rem;
}
.modelo h3{
  color: var(--primario);
  font-weight: 700;
  font-size: 2.5rem;
}

.modelo:nth-child(3) .precio{
    font-size: 5rem;
}

@media(min-width: 500px){ 
    .modelo{
        background-size: 15rem;
        transition-property: transform background-size;
        transition-duration: .4s;
    }
    .modelo:nth-child(3){
        background-size: 17rem;
    }
    .modelo:hover{
        transform: scale(1.1);
        background-size: 30rem;
    }
}

@media(min-width:992px ){ 
    .modelos{
        grid-template-rows: unset;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,20rem);
        gap: 4rem;
    }
    .modelo:nth-child(1){
        grid-row: 1/2;
    }
    .modelo:nth-child(2){
        grid-row: 2/3;
    }
    .modelo:nth-child(3){
        grid-row: 1/3;
    }
}


/*Newsletter*/
.formulario h2{
    font-weight: 900;
}
.formulario input{
    border-radius: .1rem;
    border: solid var(--grisClaro) ;
    padding: .5rem;
}
.formulario p{
    margin-top:0;
}
.formulario button{
    padding: 1rem 0;
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    transition: background-color .3s ease-in-out;
}
.formulario button:hover{
    background-color:rgb(10, 64, 118) ;
}
.seccion-formulario{
    background-repeat: no-repeat;
    background-size: 100%,70rem;
    background-position: center top ;
    display: grid;
    grid-template-rows: repeat(2,30rem);
}
.notavif.notwebp .seccion-formulario{
    background-image: linear-gradient(to top, white 50%, transparent 50%),
    url('../img/newsletter.jpg');
}
.avif .seccion-formulario{
    background-image: linear-gradient(to top, white 50%, transparent 50%),
    url('../img/newsletter.avif');
}
.webp .seccion-formulario{
    background-image: linear-gradient(to top, white 50%, transparent 50%),
    url('../img/newsletter.webp');
}

.formulario{
    display: flex;
    flex-direction:column;
    justify-content: center;
   
}
.formulario{
    grid-row: 2/3;
}

@media(min-width: 768px){ 
    .seccion-formulario{
    background-size: 100%,120rem;
    background-position: left;
        grid-template-rows: unset;
        grid-template-columns: repeat(2,1fr);
        padding:7rem 0;
    }
    .notavif.notwebp .seccion-formulario{
        background-image: linear-gradient(to left, white 50%, transparent 50%),
        url('../img/newsletter.jpg');
    }
    .avif .seccion-formulario{
        background-image: linear-gradient(to left, white 50%, transparent 50%),
        url('../img/newsletter.avif');
    }
    .webp .seccion-formulario{
        background-image: linear-gradient(to left, white 50%, transparent 50%),
        url('../img/newsletter.webp');
    }
    .formulario{
        grid-column: 2/3;
        width: 80%;
        margin-right: 7rem;
    }
}

/*FOOTER*/
.footer{
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}
.footer p{
    font-family: var(--fuentePrincipal);
    color: var(--primario);
    font-weight: 900;
    font-size: 1rem;
}
@media(min-width: 768px){ 
    .footer p{
        font-size: 2rem;
    }
}