html{
    font-size: 62.5%; /*Para que los rems (=16px) queden en excala de 10px
    así 1rem=10px. es mejor utilizar los rem ya que estos se adecuan a la 
    densidad de pixeles de cada pantalla*/

    /* snippet para solucionar padding+ width
    html{
        box-sizing: border-box;
}
*, *:before, *:after{
    box-sizing: inherit;
} Esto sirve para que al width de las imagenes, o urls no tenga en cuenta el 
padding creando anchos desproporcionados, ya que suma los dos*/
    box-sizing: border-box;
}

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

body{
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
}

/*Globales*/

img{
    max-width: 100%;
}
.contenedor{
    /*Cual va a ser el ancho del contenedor*/
    max-width: 120rem;
    /*espacio arriba, a la derecha, abajo y la izquierda. auto es para que
    se mantenga centrado*/
    margin: 0 auto;
}

h1{
    font-size: 3.8rem;
}
h2{
    font-size: 3.4rem;
}
h3{
    font-size: 3rem;
}
h4{
    font-size: 2.6rem;
}

/*utilidades*/
.seccion{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.fw300{
    font-weight: 300;
}
.centrar-texto{
    text-align: center;
}
.d-block{
    /*al estar antes que boton se termina aplicando el display de boton. se
    puede solucionar agregando el !important o siendo más especifico en la clase
    .boton.boton-amarillo.d-block*/
    display: block!important;
}
.contenido-centrado{
    max-width: 800px;
}

/*Botones*/
.boton{
    color: white;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 1rem 3rem;
    margin-top: 3rem;
     /*las imagenes y los vinculos son display inline, que no se dejan modificar
    el ancho, margin como los parrafos, titulos y demás, que son display bloc. 
    Si se deja display block al enlace y se agrega un margin, el background toma 
    todo el ancho disponible, por esto se deja en inline-block*/
    display: inline-block;
    text-align: center;
    /*Para que a los botones de formulario que traen borde se los quite*/
    border: none;
} 
/*Cuando es un input submit no aparece el cursor en forma de mano cuando esta
sobre el boton, con esto se le obliga a hacerlo. Existen varios cursores, de 
espera, de ayuda...*/
.boton:hover{
    cursor: pointer;
}
.boton-amarillo{
    background-color: #E08709;
}
.boton-verde{
    background-color: #71B100;
}

/*Header*/
.site-header{
    background-color: #333333;
    padding: 1rem 0 3rem 0;
}
/*si en la etiqueta se tiene solo una clase se aplica la de arriba, para aplicarse
las dos tiene que tener las dos clases*/
.site-header.inicio{
    /*Background toma color e imagen, esta es más especifica*/
    background-image: url(../img/header.jpg);
    /*la imagen tiene mucho espacio innecesario, se necesita enfocar el centro*/
    background-position: center center;
    /*Para que muestra la totalidad de la imagen*/
    background-size: cover;
    /*el vh es para que el tamaño se determine según el dispositico del que se mire
    pero no puede ser demasiado pequeño, para eso el min-height*/
    height: 100vh;
    min-height: 60rem;
}

.contenido-header{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contenido-header h1{
    color: white;
    padding-bottom: 2rem;
    max-width: 60rem; /*para que el ancho de este titulo se reduzca y oblique a 
    aparezcan dos renglones, la línea de abajo agreaga espacio de interlineado*/
    line-height: 2;
}

.barra{
    display: flex;
    justify-content: space-between;
    /*espacio hacia arriba dentro del mismo elemento, el margin mueve todo
    y deja un espacio en blanco si hay una foto*/
    padding-top: 3rem;
    align-items: center; /*alinea verticalmente las elementos de la barra*/
}

/*barra de menu, la clase es de nav y se selecciona el elemento hijo que se quiere
cambiar, en este caso "a", los enlaces*/
.navegacion a{
    color: white;
    text-decoration: none; /*Para quitar el subrayado*/
    font-size: 1.8rem;
    /*Separacion entre elementos*/
    margin-right: 2rem;
}

/*color cuando se posiciona el mouse sobre el link, el a:xxx son seudo-selectores*/
.navegacion a:hover{
    color: #71B100;
}

.navegacion a:last-of-type{
    margin: 0;
}

/*iconos nosotros*/
.iconos-nosotros{
    display: flex;
    justify-content: space-between;
}

/*el ancho de cada icono, no se trabaja desde el padre, por esto se crea icono.
Además, no se puede utilizar width porque se trabaja con una flexbox. Calc 
es para realizar calculos, no sabemos cuantos pixeles sean 33.3%, pero a eso 
se le quita un rem. La función de flex-basis funciona muy bien con justify-content
del padre*/
.icono{
    flex-basis: calc(33.3% - 1rem);
    text-align: center;
}

.icono h3{
    text-transform: uppercase;
}

/*anuncios*/
.contenedor-anuncios{
    display: flex;
    justify-content: space-between;
    /*La probiedad wrap del flex tiene que ir en el padre, es para que cuando
    halla mucho contenido no se haga scroll hacia un lado, sino que tome otra
    fila abajo. Por default esta en no-wrap*/
    flex-wrap: wrap;
}

.anuncio{
    /*El flex siempre va a dejar que las imagenes se encojan por que tiene esta
    propiedad de shrink en 1, se cambia a 0 para que tome la base de 33% que le 
    estamos dando más abajo. Además, existe un comando para pasar 3 profiedades
    del flex blox, que pasa grow, shrink y basis, que se llama flex. Se utilizaría
    en esta caso flex: 0 0 calc(33.3% - 1rem);*/
    flex-shrink: 0;
    flex-basis: calc(33.3% - 1rem);
    /*ancho del bordo, estilo (puede ser doble, punteada...) y color*/
    border: 1px solid #B5B5B5;
    background: #F5F5F5;
    margin-bottom: 2rem;
}

.contenido-anuncio{
    padding: 2rem;
}

/*para aplicar lo mismo a dos selectores*/
.contenido-anuncio h3, .contenido-anuncio p{
    margin: 0;
}

.precio{
    color: #71B100;
    font-weight: 700;
}

.iconos-caracteristicas{
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    /*Se esta utilizando en anuncio.html y se toma todo el expacio, por lo que
    se debe acotar*/
    max-width: 500px;
    /*en anuncio html como se aplica flexbox con el spece between se recogen
    los numeros y los iconos, para que vuelvan a tomar el espacio que le dio
    el max width, se utiliza el flex 1*/
    flex: 1;
}

.iconos-caracteristicas li{
    display: flex;
}

.iconos-caracteristicas li img{
    margin-right: 2rem;
}

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

/*Contacto - home*/
.imagen-contacto{
    background-image: url(../img/encuentra.jpg);
    background-position: center center;
    background-size: cover;
    height: 40rem;
    display: flex;
    align-items: center;
}

.contenido-contacto{
    flex: 1;
    color: #ffffff;
}

.contenido-contacto p{
    font-size: 1.8rem;
}

/*seccion inferior*/
.seccion-inferior{
    display: flex;
    justify-content: space-between;
}

.seccion-inferior .blog{
    flex-basis: 60%;
}

.seccion-inferior .testimoniales{
    flex-basis: calc(40% - 2rem);
}

.entrada-blog{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.entrada-blog:last-of-type{
    margin-bottom: 0;
}

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

.entrada-blog .texto-entrada{
    flex-basis: calc(60% - 3rem);
}

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

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

/* h4:: xxxx son seudo-elementos. no se pueden seleccionar de la pagina y no
son visibles cuando se inspecciona la pagina*/
.texto-entrada h4::after{
   content: '';
   /*como es un seudo elemento no existe y no tiene display definido*/
   display: block;
   width: 15rem;
   height: .5rem;
   background-color: #71B100;
   margin-top: 1rem;
}

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

/*testimoniales*/
.testimonial{
    background-color: #71B100;
    color: white;
    font-size: 2.4rem;
    padding: 2rem;
    border-radius: 2rem;
}

.testimonial p{
    text-align: right;
}

.testimonial blockquote::before{
    content: '';
    background-image: url(../img/comilla.svg);
    /*como es un seudo elemento si no se le indican dimensiones no se va a ver,
    tampoco se puede olvidar el display*/
    width: 4rem;
    height: 4rem;
    display: block;
    /*al padre que es blockquote se le debe poner posición relativa, 
    por que si no se cuenta desde el inicio de la página, esto quiere decir
    que elemento se toma de de relativo es el marco de referencia. El hijo
    es absoluto para contar la dispacia que se le de*/
    position: absolute;
    left: -2rem;
}

.testimonial blockquote{
    position: relative;
    padding-left: 5rem;
    font-weight: 300;
}

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

.contenedor-footer{
    padding: 3rem 0;
    display: flex;
    justify-content: space-between;
}

.copyright{
    margin: 0;
    color: white;
}

/*pags internas*/
/*pagina nosotros*/
.contenido-nosotros{
    /*es otro nuevo como el flex, se le deben definir las columnas y pueden
    ser como 1fr 1ft osea una fracción, o repeat(2, 50%) que es lo mismo que
    repeat(2, 1fr)*/
    display: grid;
    grid-template-columns: 50% 50%;
    /*se utiliza esta propiedad en vez de margin y padding*/
    grid-column-gap: 2rem;
}

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

/*anuncio*/
.resumen-propiedad{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*Contacto*/
.contacto p{
    font-size: 1.6rem;
    color: #424141; 
    margin: 2rem 0 0 0;
}

legend{
    font-size: 2.6rem;
    color: #424141;
}
label{
    /*Hace que tome todo el espacio disponible*/
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}

/*Que afecte a todos los imputs menos submit. Si se queire tener más control puede
ser input[type="text"], input[type="tel"]{} y afectara a esos tipos de input*/
input:not([type="submit"]), textarea, select{
    padding: 1rem;
    display: block;
    width: 100%;
    border: none;
    border-radius: 1rem;
    background-color: #e1e1e1;
    margin-bottom: 2rem;
}

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

/*
Esta se utiliza cuando lo de arriba funciona parcialmente, agrega color, pero
no el padding. -webkit- es un prefijo, ya no son muy utilizados, pero en este 
caso podría funcionar. El apperance none agrega el padding, pero quita la flecha
del lado derecho
select{
    -webkit-appearance: none;
    appearance: none;
}
*/

textarea{
    height: 15rem;
}

.formaContacto{
    max-width: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}