/* CUSTOM PROPERTY */
:root {
  --fuenteTitle: "Nunito", sans-serif;
  --fuenteBody: "Open Sans", sans-serif;
  --fuentelink: "Poppins", sans-serif;
  --coloAzul: #0099e5;
  --colorBlanco: #ffffff;
  --colorNegro: #000000;
  --colorTitle: #263954;
  --colorParrafo: #666;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  font-size: 62.5%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  padding: 0;
  margin: 0;
}
body {
  line-height: 1.5;
}
a {
  display: inline-block;
  text-decoration: none;
}
img {
  display: inline-block;
  width: 100%;
}
li{
    list-style: none;
}

/* CSS DEL CONTENEDOR */
[class$="__contenedor"] {
  width: 90%;
  max-width: 120rem;
  margin: 0 auto;
}

h2 {
  font-family: var(--fuenteTitle);
  color: var(--colorTitle);
}
p {
  font-family: var(--fuenteBody);
  font-weight: 500;
  color: var(--colorParrafo);
  font-size: 1.6rem;
}
/* estilos boton */
.boton {
  background-color: var(--coloAzul);
  color: var(--colorBlanco);
  padding: 1rem;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 0.2rem;
  display: block;

  text-align: center;
  font-size: 1.8rem;
}

/* ESTILOS DEL HEADER */
.header {
  position: fixed;
  width: 100%;
  background-color: var(--colorBlanco);
  box-shadow: 0px 0px 0px 1px rgb(0 0 0 /0.1);
}
.header__contenedor {
  padding: 1rem 0;
}
@media (min-width: 1280px) {
  .header__contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
  }
}
.header__logotipo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.header__title {
  font-size: 1.7rem;
  color: var(--colorNegro);
}
.menu__icon {
  width: 2rem;
  cursor: pointer;
  
}

@media (min-width: 1280px) {
  .header__title {
    font-size: 3rem;
  }
  .menu__icon {
    display: none;
  }
}
.header__navegacion {
  text-align: center;
  margin-top: 1rem;

  display: none;
  border-top: 0.3rem solid var(--coloAzul);
}
@media (min-width: 1280px) {
  .header__navegacion {
    display: inline;
    border-top: unset;
  }
}
.header__link {
  display: block;
  color: var(--colorNegro);
  font-size: 2rem;
  padding-right: 2rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.header__link:nth-child(7) {
  padding-right: 0;
}
@media (min-width: 1280px) {
  .header__link {
    display: inline;
    font-size: 1.8rem;
    padding-top: 0;
  }
}
/* BANNER */
.banner {
  background-image: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%),
    url(../img/benner.jpg);
  height: 80rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.banner__title {
  font-size: 2rem;
  color: var(--colorBlanco);
  margin-bottom: 2rem;
}
@media (min-width: 1280px) {
  .banner__title {
    font-size: 8rem;
  }
}
.banner__txt {
  color: var(--colorBlanco);
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.5;
}
.banner__formulario {
  display: flex;
}
.banner__input {
  width: 15rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  .banner__input {
    width: 20rem;
  }
}
/* inicia la primera seccion de nombre plan */

.plan {
  margin-top: 9rem;
  text-align: center;
}
.plan__txt {
  margin-bottom: 4rem;
  line-height: 1.7;
}
.plan__link {
  color: var(--coloAzul);
}
.plan__title {
  font-size: 3rem;
  width: 80%;
  margin: 0 auto;
  font-weight: 500;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .plan__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 768px) {
  .plan__boton {
    width: 50%;
    margin: 0 auto;
  }
}
@media (min-width: 1280px) {
  .plan__boton {
    width: 30%;
    margin: 0 auto;
  }
}
/* inicia css del div de tell */
.tell {
  margin-top: 9rem;
  background-image: url(../img/uno.jpg);
  height: 80rem;
  background-repeat: no-repeat;
  background-position: -35rem 0;
  display: flex;
  flex-direction: column;
  text-align: right;
  padding: 5rem;
}
.tell__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tell__title {
  color: var(--colorBlanco);
  margin-bottom: 2rem;
  font-weight: 500;
  grid-column: 1 / 4;
  width: 100%;
  font-size: 2rem;
}
.tell__txt {
  grid-column: 1 / 4;
  color: var(--colorBlanco);
}
@media (min-width: 768px) {
  .tell__title,
  .tell__txt {
    grid-column: 3 / 3;
  }
}
.grid {
  height: 80rem;
}
@media (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.grid__uno,
.grid__dos {
  height: 50rem;
}
@media (min-width: 768px) {
  .grid__uno,
  .grid__dos {
    height: unset;
  }
}
.grid__uno {
  background-image: url(../img/dos.jpg);
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
}
@media (min-width: 768px) {
  .grid__uno {
    grid-column: 1 / 2;
  }
}
.grid__dos {
  background-image: url(../img/tres.jpg);
  background-position: center;
  padding: 4rem 6rem;
}
@media (min-width: 768px) {
  .grid__dos {
    grid-column: 2/ 4;
  }
}
.grid__title {
  font-size: 3rem;
  font-weight: 500;
  color: var(--colorBlanco);
}
.grid__title--centrado {
  margin: 0 auto;
}
.grid__txt {
  color: var(--colorBlanco);
}
@media (min-width: 768px) {
  .grid__title {
    width: 80%;
  }

  .grid__txt--width {
    width: 50%;
  }
}

/* SECCION CARD */
.card{
    margin-top: 25rem;
    text-align: center;
}
@media(min-width:768px){
    .card{
        margin-top: 10rem;
    }
}
.card__title{
    font-size: 4rem;
    margin-bottom: 3rem;
}
@media(min-width:768px){
    .card__grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
    }
}

.card__uno{
    margin-bottom: 5rem;
}
@media(min-width:768px){
    .card__uno{
        margin-bottom: 0;
    }
}
.card__subtitle{
    font-size: 2rem;
    padding: 2rem 0;
}
/* CATEGORIAS */
.categorias{
    margin-top: 9rem;
    text-align: center;
}
.categorias__title{
    font-size: 3rem;
    margin-bottom: 3rem;
}
.categorias__grid{
    display: grid;
    grid-template-columns: 
    repeat(2,1fr);
    gap: 3rem;
}
@media(min-width:768px){
    .categorias__grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 3rem;
    }
}

.categorias__txt{
    font-size: 1.8rem;
    cursor: pointer;
   
    margin-bottom: 1rem;
    transition-property: color;
    transition-duration: .2s;
}
@media(min-width:768px){
    .categorias__txt{
        text-align: left;
    }
}
.categorias__txt:hover{
    color: var(--coloAzul);
}
.categorias__boton{
  
  
    margin: 0 auto;
    margin-top: 5rem;
}
@media(min-width:768px){
    .categorias__boton{
        width: 20%;
    }
}
/*  CSS DEL  DIV IMAGEN*/

.imagen{
    margin-top: 9rem;
    background-image: 
    url(../img/siete.jpg);
    height: 80rem;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.imagen__title{
    font-size: 5rem;
    color: var(--colorBlanco);
    margin-bottom: 2rem;
}
.imagen__boton{
    width: 90%;
    margin: 0 auto;
}
@media(min-width:768px){
    .imagen__boton{
        width: 40%;
       
    }
}
@media(min-width:1280px){
    .imagen__boton{
        width: 20%;
        
    }
}

/* Seccion de happy */
.happy{
    padding: 20rem 0;
    background-color: 
    var(--coloAzul);
    text-align: center;
}
.happy__title{
    font-size: 5rem;
    color: var(--colorBlanco);
    margin-bottom: 5rem;
}

@media(min-width:768px){
    .happy__grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
        margin-bottom: 0;
    }
    .happy__card{
        margin-bottom: 0;
    }
    
}
.happy__card{
    margin-bottom: 5rem;
}
.happy__card:nth-child(3){
    margin-bottom: 0;
}
.happy__img{
    width: 10rem;
    margin-bottom: 5rem;
}
.happy__txt,.happy__autor,
.happy__puesto{
    font-family: var(--fuenteBody);
 
    color: var(--colorBlanco);
}
.happy__txt{
    margin-bottom: 2rem;
}

.happy__autor{
    font-weight: 700;
    margin-bottom: .5rem;
}
/* Seccion download */

@media(min-width:768px){
    .download__grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        
    }
}
.download__card{
    height: 80rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 2rem 4rem;
}
.uno{

    
    background-image: url(../img/ocho.jpg);

}
.dos{
    background-image: url(../img/nueve.jpg);
}
.tres{
    background-image: url(../img/diez.jpg);
}
.cuatro{
    background-image: url(../img/once.jpg);
}

.download__title{
  font-weight: 500;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--colorBlanco);
}
.download__autor{
  padding-bottom: 2rem;
}
.download__span{
  color: var(--colorBlanco);
 
}
.download__boton{
  background-color: unset;
  color: var(--coloAzul);
  text-align: left;
  padding: 0;
  padding-top: 2rem;
}

/*PRECIOS */
.precios{
  margin-top: 9rem;
  
}
.precios__title{
  text-align: center;
  font-size: 4rem;
  font-weight: 500;
  margin-bottom: 3rem;
}
.precios__info{
  color: var(--coloAzul);
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 500;
}
.precios__card{
  margin: 4rem 0;
  margin-top: 5rem;
}
@media(min-width:768px){

  .precios__grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rem;

  }
}
.precios__tipo{
  font-weight: 500;
  font-size: 2rem;
  margin-bottom: 2rem;
}
.precios__precio{
  color: var(--coloAzul);
  font-size: 4rem;
  padding-bottom: 3rem;
  
  border-bottom: 
  .1rem solid var(--colorParrafo);
}
.precios__span{
  color: var(--colorParrafo);
  font-size: 2rem;
}
.precios__lista{
  margin-top: 3rem;
}
.precios__link{

  background: transparent;

  padding-bottom: 3rem;
 
  font-size: 2rem;
}
.precios__link--oculto{
  color: #ccc;
}
 /* Unicode for a bullet */
 .precios__link::before{
   /* Unicode for a bullet */
   content: "\2022";
   color: var(--coloAzul);
   padding-right: 2rem;

 }
 .precios__boton{
  margin-top: 2rem;
 }
 .precios__boton--fondo{
  background-color: unset;
  border: .2rem solid var(--coloAzul);
  color: var(--coloAzul);
  transition-property: background-color, color;
  transition-duration: .6s;
  
 }
 .precios__boton--fondo:hover{
  background-color: var(--coloAzul);
  color: var(--colorBlanco);

 }

 @media(min-width:768px){
  .precios__boton{
    width: 60%;
  }
 }
 @media(min-width:1280px){
  .precios__boton{
    width: 40%;
  }
 }
 .precios__boton--blanco{
  border: .2rem solid var(--coloAzul);
  transition-property: background-color,color;
  transition-duration: .6s;
 }
 .precios__boton--blanco:hover{
  background-color: unset;
  color: var(--coloAzul);
 }

 /* FEATURES */
 .featured{
  margin-top: 9rem;
  
 }
 .featured__title{
  font-size: 5rem;
  text-align: center;
  font-weight: 500;
  margin-bottom: 5rem;
 }
 @media(min-width:768px){
  .featured__flex{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
 }

 .featured__card{
 
  margin-bottom: 5rem;
  text-align: center;

 }
 @media(min-width:768px){
  .featured__img{
    width: 90%;
    margin: 0 auto;
  }
 }

 .featured__titular{
  padding-top: 2rem ;
  font-size: 2rem;
  font-weight: 500;
 }
 .featured__ocupacion{
  color: var(--colorParrafo);
  padding: 1rem 0;
 }

 .featured__iconos{
  padding-top: 2rem;
  display: flex;
  justify-content: space-evenly;
 }

 .featured__icono{
  cursor: pointer;
  font-size: 2rem;
  padding: 3rem 0;
  color: var(--colorParrafo);
  transition-property: color;
  transition-duration: .5s;
}
.featured__icono:hover{
  color: var(--coloAzul);
}
.featured__boton{
  background-color: unset;
  color: var(--coloAzul);
  font-weight: 700;
  width: 50%;
  margin: 0 auto;
  transition-property: background-color;
  transition-duration: .7s;
}
.featured__boton:hover{
  background-color: #ccc;
}
/*  botones */
.botones{

  margin-top: 9rem;
  text-align: center;
  background-image: url(../img/dieciceis.jpg);
  height: 50rem;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.botones__title{
  font-size: 6rem;
  font-weight: 500;
  color: var(--colorBlanco);
}
.botones__grid{
  margin-top: 3rem;
}
@media(min-width:768px){
  .botones__grid{
    display: flex;
    gap:2rem;
    justify-content: center;

  }
}
.botones__boton{

  width: 90%;
  margin: 0 auto;
  margin-bottom: 2rem;
  
}

@media(min-width:768px){
  .botones__boton{
    width:unset;
    margin: 0;

 
  }
}
.botones__boton--blanco{
  background-color: var(--colorBlanco);
  color: var(--coloAzul);
}
/* update */
.update{

  background-color: #F7F7F7;
  padding: 15rem 0;
}
@media(min-width:768px){
  .update__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3rem;
  }
}
.update__title{
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--colorParrafo);
}
.update__formulario{
  margin-top: 5rem;
}
@media(min-width:768px){
  .update__formulario{
    margin-top: 0;
  }
}
.update__input{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
  height: 5rem;
  font-size: 2rem;
  outline: none;
  border: none;
}
.update__boton{
  width: 100%;
}
.footer{
  text-align: center;
  background-color: var(--colorNegro);
  padding: 2rem 0;
}
/* home html */
.galeria{
  margin-top: 9rem;
}
.galeria__imagen{
  height: 60rem;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 5rem 2rem;
}
.galeria__title{
  font-size: 3rem;
  color: var(--colorBlanco);
  padding: 2rem 0;
}
.galeria__autor{
  color: var(--colorParrafo);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.galeria__span{
  color: var(--colorBlanco);
}
.galeria__boton{
  background-color: unset;
  width: 20%;
  margin: 0 ;
  padding: 0;
  color: var(--coloAzul);
}
.galeria__imagen--uno{
  background-image: url(../img/siete.jpg);
}
.galeria__imagen--dos{
  background-image: url(../img/nueve.jpg);
}
.galeria__imagen--tres{
  background-image: url(../img/quince.jpg);
}
.galeria__imagen--cuatro{
  background-image: url(../img/nueve.jpg);
}
@media(min-width:768px){
  .galeria__imagen{
    margin-bottom: 0;
  }
  .galeria__grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
  }
  .galeria__imagen--uno{
     grid-column: 1 / 4;
  }
  .galeria__imagen--dos{
    grid-column: 4 / 6;
  }
  .galeria__imagen--tres{
    grid-column: 1 / 3;
  }
  .galeria__imagen--cuatro{
    grid-column: 3 / 6;
  }
}
/* pricing html */
.ever{
  margin-top: 9rem;
  text-align: center;
}
.ever__title{
  font-size: 3rem;
  padding-bottom: 3rem;
}
@media(min-width:768px){
  .ever__title{
    font-size: 6rem;
  }
}
.ever__txt{
  font-size: 1.8rem;

  margin: 0 auto;
  line-height: 2;
  margin-bottom: 4rem;
}
@media(min-width:768px){
  .ever__txt{
    width: 70%;
  }
  .ever__boton{
    width: 30%;
    margin: 0 auto;
  }
}
/* qeustion */
.question{
  margin: 9rem 0;
  text-align: center;
}
.question__title{
  font-size: 3rem;
}
.question__grid{
  margin-top: 9rem;
}
@media(min-width:768px){
  .question__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
  }
}
.question__card{
    text-align: left;
    margin-bottom:5rem;
}
@media(min-width:768px){
  .question__card{
    margin-bottom: 2rem;
  }
}
.question__titulo{
  font-size: 2rem;
  padding-bottom: 2rem;
}
/* about html */

.servicio{
  margin-top: 9rem;
  text-align: center;
}
.servicio__title{
  font-size: 3rem;
  padding-bottom: 5rem;
}
.servicio__txt{
  
  text-align: left;
  margin-bottom: 2rem;
}
@media (min-width:768px) {
  .servicio__txt{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2rem;
  }
  
}

/* dos */
.provide{
  margin-top: 9rem;
}
.provide__img,.provide__card{
  height: 70rem;
}

.provide__card--segundo{
  background-color: #353740;
}
.provide__card--segundo,.provide__card--cuarto{
  padding:20rem 5rem;
}
@media(min-width:768px){
  .provide__grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
  }
  .provide__card--primero{
    grid-column: 1 / 3;
    grid-row: 1 / 5;
  }
  .provide__card--segundo{
    grid-column: 3 / 5;    
    grid-row: 1 / 5;
  }
  .provide__card--tercero{
    grid-column: 3 / 5;
    grid-row: 7 / 10;
 
  }
  .provide__card--cuarto{
    grid-column: 1 / 3;
    grid-row: 7 / 10;
  }
}
.provide__title{
  font-size: 3rem;
  color: var(--colorParrafo);
  padding-bottom: 3rem;
}
.provide__txt{
  font-size: 1.8rem;
}
.provide__boton{
  margin-top: 3rem;
}
@media(min-width:768px){
  .provide__boton{
    width:50%;
  }
}
@media(min-width:1280px){
  .provide__boton{
    width:30%;
  }
}
/* seccion AZUl */
.azul{
  background-color: var(--coloAzul);
  padding: 20rem 0;
}
.azul__card{
  text-align: center;
  margin-bottom: 5rem;
}
@media(min-width:768px){
  .azul__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
  }
  .azul__card{
    display: flex;
    gap: 3rem;
    text-align: left;
    margin-bottom: 0;
  }
}

.azul__img{
width: 10rem;
}
.azul__txt{
  color: var(--colorBlanco);
  padding-bottom: 2rem;
}
.azul__nombre{
  color: var(--colorBlanco);
  font-weight: 700;
  padding-bottom: 1rem;
}
.azul__direccion{
  color: var(--colorBlanco);
}
.margin{
  margin-top: 0;
  height: 80rem;
}

/* categoria html */
.categoria{
  margin-top: 9rem;
}
.categoria__titulo{
  font-size: 3rem;
  text-align: center;
  padding-bottom: 5rem;
  font-weight: 500;
}
@media(min-width:768px){
  .categoria__grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4rem;
  }
}

.categoria__card{
  margin-bottom: 4rem;
}
.categoria__img{
  height: 40rem;
  margin-bottom: 3rem;
}
.categoria__title{
  font-size: 2rem;
  font-weight: 500;
  padding-bottom: 2rem;
}
.categoria__txt{
  line-height: 2;
}
/* CONTACTO HTML */


@media(min-width:768px){

  .contacto__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3rem;

  }
}
.contacto__formulario{
  padding: 9rem 4rem;
}
.contacto__title{
  font-size: 4rem;
  font-weight: 500;
  padding-bottom: 3rem;
}
 @media(min-width:768px){
  .contacto__subgrid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;

  }
 }
.contacto__campo{
  width: 100%;
  height: 5rem;
  padding: 1rem;
  font-size: 1.7rem;
  margin-bottom: 3rem;
  outline: none;
}
.contacto__campo--mensaje{
  height: 20rem;
}
@media(min-width:768px){
  .contacto__boton{
    width: 80%;

  }
} 
@media(min-width:1280px){
  .contacto__boton{
    width: 40%;

  }
} 


.contacto__informacion{
  background-color: var(--coloAzul);
  padding: 9rem 6rem;
}

.contacto__title--blanco,.contacto__txt{
  color: var(--colorBlanco);
}
.contacto__txt{
  line-height: 2;
}
.contacto__boton--fondo{

  background-color: var(--colorBlanco);
  color: var(--coloAzul);

  margin-top: 3rem;
}

@media(min-width:768px){

  .contacto__boton--fondo{
    width: 90%;
  }

}

@media(min-width:1280px){

  .contacto__boton--fondo{
    width: 50%;
  }

}


/* preguntas */
.preguntas{
  margin-top: 9rem;
}
.preguntas__title{
  font-size: 5rem;
  font-weight: 500;
  text-align: center;
  padding-bottom: 4rem;
}
.preguntas__grid{
  margin-top: 5rem;
}
@media(min-width:768px){
  .preguntas__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4rem;
  }
}
.preguntas__card{
  margin-bottom: 5rem;
}
@media(min-width:768px){
  .preguntas__card{
    margin-bottom: 0;
  }
}
.preguntas__subtitle{
  font-size: 2rem;
  padding-bottom: 3rem;
}