/*Media Queries*/

@media only screen and (min-width: 320px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1200px) {
}

/*** PAGINA PRINCIPAL ***/

html {
  box-sizing: border-box;
  /* font-size: 16px; /*Default*/
  font-size: 62.5%; /*Reset para REMS - 62.5% = 10px de 16px */
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*Fuentes*/

body {
  font-family: "Lato", sans-serif;
  font-size: 1.6rem; /*1.6rem = 16px*/
  line-height: 2;
}

/* Estilos Globales (Se van a reutilizar siempre como las utilidades) */

img {
  max-width: 100%; /*Esto hara que todas las imagenes sean responsive*/
}

.contenedor {
  max-width: 120rem; /* 120rem = 1200px /* Esto va hacer que se tome todo el espacio disponible, mientras no sobrepase los 1200px*/
  /*margin-left: auto;
      margin-right: auto; El tamaño de los margin tanto de left como right sera automatico y a eso se lo va a centrar
      margin: 0 auto 0 auto; /* Se puede escribir tambien de esta manera, son 4 puntos en sentido horario 12:00hs = 0; 03:00hs = auto; 06:00hs = 0; 09:00hs = auto*/
  margin: 0 auto; /*Tambien se puede escribir de esta forma que queda mas compacto */
  /*margin se utiliza para centrar elementos dejando espacio en las orillas*/
}

/*Sistema de tamaños de fuentes, siempre crearlas al principio del css */

/*p font-weight:400
  H1 font-weight:700*/
h1 {
  font-size: 3.8rem; /*3.8rem = 38px*/
}

h2 {
  font-size: 3.4rem; /*3.4rem = 34px*/
}

h3 {
  font-size: 3rem; /*3rem = 30px*/
}

h4 {
  font-size: 2.6rem; /*2.6rem = 26px*/
}

/*Utilidades*/

.seccion {
  margin-top: 2rem; /*2rem = 20px*/
  margin-bottom: 2rem; /*2rem = 20px*/
}

/*Esta parte la creamos para nosotros y se puede reutilizar*/

.fw-300 {
  font-weight: 300; /*Esta propiedad hace la letra mas fina, por default la letra de google fonts estaba en 700*/
}

.centrar-texto {
  text-align: center;
}

.d-block {
  display: block !important; /*!important significa que se va a ejecutar esto sin importar si debajo hay algo que los subscriba*/
}

.contenido-centrado {
  max-width: 80rem; /*80rem = 800px*/
}

/*Botones*/

.boton {
  /*clase padre, propiedades para todos los botones*/
  color: #f5f5f5;
  font-weight: 700; /*letras mas gruesas*/
  text-decoration: none; /*sin decoración*/
  font-size: 1.8rem; /*1.8rem = 18px*/ /*letras mas grandes*/
  padding: 1rem 3rem; /*1rem = 10px y 3rem = 30px*/ /*1rem arriba, 3rem izquierda y 3rem derecha*/
  margin-top: 3rem; /*3rem = 30px*/
  display: inline-block; /*display:inline-block, se le puede aplicar margin y anchos, pero no va a tomar todo el espacio disponible como si fuera un display:block*/
  /*Los enlaces e imagenes son display: inline, si se el quiere dar un ancho o padding hay que usar display:block o display:inline-block*/
  text-align: center;
  border: none;
}

.boton-amarillo {
  background-color: #d3d92a;
}
.boton-verde {
  /*clase hijo*/
  background-color: #37b302;
}

/* Header Index*/

.site-header.inicio {
  background-image: url(../img/header.jpg); /* con -image, solo se pueden poner imagenes */
  background-position: center center; /* Posicion de la imagen, al centro */
  background-size: cover; /* Esta propiedad va a forzar que tome todo el espacio disponible, tanto la altura como el ancho, pero siempre tomando como referencia las proporciones */
  height: 100vh; /* Maximo va a medir toda la pantalla, segun el dispositivo */
  min-height: 60rem; /*60rem = 600px /* Minimo va a medir 600px */
}

.contenido-header {
  height: 100%;
  display: flex;
  flex-direction: column; /*La direccion va de arriba hacia abajo, solo afecta al primer nivel de hijos de cotenido de header // class="Barra" y H1*/
  justify-content: space-between;
}

.contenido-header h1 {
  color: white;
  padding-bottom: 2rem; /*2rem = 20px, padding es el espacio hacia adentro del elemento*/
  max-width: 60rem; /*60rem = 600px*/
  line-height: 2;
}

.barra {
  display: flex;
  justify-content: space-between; /*Posiciona el elemento con un espacio entre los dos*/ /*Alinea contenido horizontalmente*/
  padding-top: 3rem; /*3rem = 30px /*padding-top: Es el espacio hacia adentro del elemento*/
  /*margin-top: 30px; margin-top: Es la separacion con otro elemento hacia afuera*/
  align-items: center; /*Esto alineara el logo como los enlaces*/ /*Alinea contenido verticalmente*/
}

/*Navegacion*/

.navegacion a {
  color: white;
  text-decoration: none; /*Elimina las lineas que estan debajo de los enlaces*/
  font-size: 1.8rem; /*1.8 rem = 18px*/
  margin-right: 2rem; /*2 rem = 20px*/
}

.navegacion a:hover {
  /*Pseudoclases (selectores)*/
  color: #71b100;
}

.navegacion a:last-of-type {
  /*Esto es un pseudo selector, que permite seleccionar el ultimo elemento y le quita la separacion o margin*/
  margin: 0;
}

/*Escribiendo .navegacion a, lo que se hace que al padre(nav) e hijo(a), se le aplica lo mismo */

/*Iconos nosotros*/

.iconos-nosotros {
  /*Padre de todos los iconos*/
  display: flex;
  justify-content: space-between; /*Esto se convina con flex-basis*/
}

.icono {
  flex-basis: calc(
    33.3% - 1rem
  ); /*33.3 menos 1 rem(10px) // Cada elemento va a medir 33% // Siempre que se usa flexbox hay que usar flex-basis */
  text-align: center; /*Alinea contenido al centro*/
}

.icono h3 {
  /*padre icono, hijo h3*/
  text-transform: uppercase; /*Pasa el texto de minusculas a todo con mayusculas*/
}

/*Anuncios*/ /*Pasos para usar flexbox*/

.contenedor-anuncios {
  /*Padre*/
  display: flex; /*Paso 1*/
  justify-content: space-between; /*Paso 3*/
  flex-wrap: wrap; /*El contenido se posiciona en columnas de 3 elementos*/
}

.anuncio {
  /*Hijo*/
  /*flex-shrink: 0; /*Arregla las columnas de los anuncios, esta propiedad debe de hacer al contenido lo mas chico posible, por defecto es 1 y 0 se establece la propiedad que esta debajo*/
  /*flex-grow: 0; /*El contenido crece si es posible*/
  /*flex-basis: calc(33.3% - 1rem); /*Paso 2*/

  /*flex-shrink, grow y basis, se pueden resumir en solo una propiedad que es flex*/

  flex: 0 0 calc(33.3% - 1rem);

  /*border-style: solid; /*Paso 4*/
  /*border-color: #B5B5B5 ; /*Paso 5*/
  /*border-width: 1px; /*Paso 6*/

  /*este estilo de border permite tener style, color y width, en uno solo*/
  border: 1px solid #b5b5b5; /*Pasos 4,5 y 6*/
  background-color: #f5f5f5;
  margin-bottom: 2rem; /*2rem = 20px*/
}

.contenido-anuncio {
  /*padding-top: 2rem;*/
  /*padding-right: 2rem;*/
  /*padding-bottom: 2rem;*/
  /*padding-left: 2rem;*/

  /*Tener escrito lo de arriba es lo mismo que escribir lo que esta debajo, cuando se necesita que de cada lado tenga la misma cantidad*/
  padding: 2rem; /*2rem = 20px*/ /*este padding aplica 2rem en todas las direcciones*/
}

.contenido-anuncio h3,
.contenido-anuncio p {
  /*elimina el espacio entre la img,h3 y el texto*/
  margin: 0;
}

.precio {
  color: #71b100;
  font-weight: 700; /*Por default esta en 400*/
}

.iconos-caracteristicas {
  max-width: 50rem; /*50rem = 500px*/ /*Esto afecta solo a la pagina de anuncio*/
  list-style: none; /*Elimina viñetas*/
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  flex: 1; /*El contenido va a crecer, pero estara limitado por max-width: 50rem;*/
}

.iconos-caracteristicas li {
  display: flex;
}

.iconos-caracteristicas li img {
  /*Agregar separacion entre los iconos y los numeros*/
  margin-right: 2rem; /*2rem = 20px*/
}

.ver-todo {
  display: flex;
  justify-content: flex-end;
}

/*Contacto Home*/

.imagen-contacto {
  /*Aca la imagen se expande*/
  background-image: url(../img/encuentra.jpg);
  background-position: center center; /*Hace que la imagen quede centrada*/
  background-size: cover;
  height: 40rem; /*40rem = 400px*/
  display: flex;
  align-items: center;
}

.contenido-contacto {
  /*Aca centra la imagen*/
  flex: 1; /*flex: 1, significa factor de crecimiento, toma 1000px y lo divide entre la cantidad de elementos,
             en este caso seria 1000px / 1 elemento = Asigna el tamaño de 1000px al elemento*/
  color: #ffffff;
}

.contenido-contacto p {
  font-size: 1.8rem; /*1.8rem = 18px*/
}

/*Seccion inferior*/

.seccion-inferior {
  display: flex; /*Separa a la mitad blog y testimoniales*/
  justify-content: space-between; /*Cuando se hacen grid o se posiciona un elemento junto a otro, hay que utilizar estos dos elementos*/
}

.seccion-inferior .blog {
  flex-basis: 60%; /*Blog tomara 60%*/
}

.seccion-inferior .testimoniales {
  flex-basis: calc(
    40% - 2rem
  ); /*Testimoniales tomara 40% menos 2rem, 2rem = 20px*/
}

.entrada-blog {
  display: flex; /*posiciona los elementos*/
  justify-content: space-between;
  margin-bottom: 2rem; /*2rem = 20px*/
}
.entrada-blog :last-of-type {
  /*Elimina la franga naranja en la parte inferior*/
  margin-bottom: 0;
}

.entrada-blog .imagen {
  flex-basis: 40%;
}

.entrada-blog .texto-entrada {
  flex-basis: calc(60% - 3rem); /*3rem = 30px*/
}

.texto-entrada h4 {
  margin: 0;
  line-height: 1.4;
}

.texto-entrada a {
  color: #000000;
  text-decoration: none;
}

.texto-entrada h4::after {
  /*Pseudoelementos, crea un elemento despues del h4*/
  content: "";
  display: block;
  width: 15rem; /*15rem = 150px*/
  height: 0.5rem; /*.5rem = 5px*/
  background-color: #71b100;
  margin-top: 1rem; /*1rem = 10px */
}

.texto-entrada span {
  color: #d3d92a;
}

/*Testimoniales*/

.testimonial {
  background-color: #71b100;
  font-size: 2rem; /*2rem=24px*/
  padding: 2rem; /*2rem=20px,espaciohaciaadentro*/
  color: #ffffff;
  border-radius: 2rem; /*2rem = 20px, aplicara 2rem en todas las direcciones*/
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}

blockquote::before {
  content: "";
  background-image: url(../img/comilla.svg);
  width: 4rem; /*4rem = 40px*/
  height: 4rem; /*4rem = 40px*/
  position: absolute; /*Posicion absoluta en el hijo*/
  left: -2rem; /*posicion de la comilla, con respecto al texto*/
}

.testimonial blockquote {
  position: relative; /*Posicion relativa en el padre*/
  padding-left: 5rem; /*5rem = 50px*/
  font-weight: 300;
}

.testimonial p {
  text-align: right;
}

/*Footer*/

.site-footer {
  background-color: #333333;
  margin: 0;
}

.contenedor-footer {
  padding: 3rem 0; /*3rem = 30px, 3 rem, 0 rem, 3rem, 0rem */
  display: flex;
  justify-content: space-between;
}

.copyright {
  margin: 0;
  color: #ffffff;
}

/*** PAGINAS INTERNAS ***/

/**Nosotros**/

/*Header Nosotros*/

.site-header {
  background-color: #333333;
  padding: 1rem 0 3rem 0; /* 1rem = 10px, 3rem = 30px // 1 rem arriba, 0 a la derecha, 3 abajo y 0 a la izquierda*/
}

.contenido-nosotros {
  display: grid; /*Parecido el funcionamiento a flexbox*/
  /*grid-template-columns: 50% 50%; /*Se define la mitad para la imagen y la otra mitad para el texto*/
  /*Se debe de determinar cuantos elementos hijos hay, para definir las columnas*/
  grid-template-columns: repeat(
    2,
    50%
  ); /*Se puede escribir de esta manera o de la anterior*/
  column-gap: 2rem; /*Separa 2 rem, el texto de la imagen, 2rem = 20px*/
}

.texto-nosotros blockquote {
  font-weight: 900;
  font-size: 2rem; /*2rem = 20px*/
  margin: 0;
  padding: 1rem 0 3rem 0;
}

/**Anuncio**/

.resumen-propiedad {
  display: flex;
  justify-content: space-between;
  align-items: center; /*Alinea los iconos con el precio*/
}

/**Blog**/

/*Usa los mismos estilos de la parte de blog que esta en la pagina index*/

/**Contacto**/

legend {
  font-size: 2.4rem; /*2.4rem =24rem*/
  color: #333333;
}

label {
  display: block; /*tomaran todo el espacio disponible*/
  font-weight: 700;
  text-transform: uppercase;
}

.contacto p {
  font-size: 1.8rem;
  color: #4f4f4f;
  margin: 2rem 0 0 0;
}

input:not([type="submit"], [type="reset"]),
textarea,
select {
  /*[]selecciona los selector atributo de type*/
  padding: 1rem; /*1rem=10px*/
  display: block; /*tomara todo el espacio disponible*/
  width: 100%; /*se fuerza a que mida 100%*/
  background-color: #e1e1e1;
  margin-bottom: 2rem; /*2rem=20px*/ /*Separa todos los input*/
  border: none; /*elimina el borde por defecto*/
  border-radius: 1rem; /*1rem = 10px*/ /*le da la forma redondeada a las esquinas*/
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  color: #000000;
}

select {
  syntax: none;
  appearance: none;
}

textarea {
  height: 20rem; /*20rem = 200px*/
}

input[type="radio"] {
  width: auto;
  margin: 0;
}

.forma-contacto {
  max-width: 30rem; /*30rem = 300px*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boton:hover {
  cursor: pointer;
}