html{
    font-size: 62.5%; /* reset para el REM - 62.5% = 10px de 16px // lo agrega para acomodar los REM para que no sea tan grande pero ami se me achica mucho la letra*/
    box-sizing: border-box;/*es para que el paddin no afecte los botones para limitar su tamaño, creao por el programador de google*/
} 
* , *:before , *:after{
    box-sizing: inherit; /*es para que el paddin no afecte los botones para limitar su tamaño, creao por el programador de google*/
    /*por ejemplo si ponemos un tamaño de 10px y ademas un paddin, este ultimo no va a afectar los 10px*/
}
    
    



body{
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    line-height: 1.4; /*separa o agrega el interlineado*/
}

/* Goblales */
img{
    max-width: 100%; /*MUY IMPORTANTE PARA AJUSTAR LAS IMAGENES AL CONTENEDOR*/
}
.contenedor{
    max-width: 110rem; /* para centrar los contenidos en los pixeles indicados*/
    margin: 0 auto; /* SERIA:0 auto 0 auto // 0 a las 12 - auto a las 15 - 0 a las 18 - auto a las 21 // margin-left: margin-right */

}
h1{
    font-size: 3.2rem;

}
h2{
    font-size: 2.9rem;

}
h3{
    font-size: 2.4rem;

}
h4{
    font-size: 2.0rem;

}
/* Utilidades */
.seccion{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.fw-300{
    font-weight: 300; /*cambia el trazo o grueso de la letra, si sube se hace mas, si baja es mas fina*/
}
.centrar-texto{
    text-align: center;
}

.d-block{
    display: block!important; /* se usa el important porque mas adelante tenemos otro display inline-block que nos modifica el boton ya que es en cascada, por lo tanto lo usamos para pisar el siguiente, y seguir teniendo utilidades*/
}

.contenido-centrado{
    max-width: 800px;
}

/* Botones */

.boton{
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.6rem;
    padding: 0.9rem 2.8rem;
    margin-top: 2.8rem;
    display: inline-block; /*los enlaces y las imagenes son inline-block mientras que los textos o parrafos pueden ser solo block*/
    text-align: center;
    border: none;

}
.boton:hover{
    cursor: pointer; /*hover y cursor es para que cuando acerquemos el mouse al boton cambie la forma del cursor*/
}
.boton-naranja{
    background-color: #e66109;

}

.boton-verde{
    background-color: #2cbe07;
    
}

/*Header*/
.site-header{
    background-color: #333333;
    padding: 1rem 0 2.6rem 0;
}

.site-header.inicio {

    background-image: url(../img/header.jpg);
    background-position: center center; /*posiciona la imagen en centro y la expande desde ahi*/
    background-size: cover ; /*para forzar el ancho y largo pero sin afectar las proporciones*/
    height: 100vh;/*cubre la altura de la pantalla pero se corta si lo achicas*/
    min-height: 60rem;/*este es para que no se corte el 100vh*/
}

.contenido-header{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*Podemos usar flex-end o flex-start(default) o center y lo coloca a todo el contenido abajo o en el centro o por default // distribuidos se usa space*/
    /*space-between coloca uno arriba y otro abajo (hablando de los hijos principales)*/
}

.contenido-header h1{

    color: blanchedalmond;
    padding-bottom: 2rem; /*espacio hacia adentro del elemento, a diferencia del margin que es hacia otro elemento*/
    max-width: 55rem; /*maximos pixeles que puede ocupar a lo largo*/
    line-height: 1.8; /*separa o agrega el interlineado*/
    font-size: 3.0rem;
}

.barra {
    display: flex;
    justify-content: space-between; /*Permite alinear contenido horizontalmante*/
    align-items: center;/*Permite alinear contenido verticalmente*/
    padding-top: 1rem;
}

/* Navegacion */
.navegacion a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.8rem ; /*es igual a 18px*/
    margin-right: 1.5rem;
}

.navegacion a:hover{
    color: #71B100;
}
.navegacion a:last-of-type{
    margin: 0;
}

/* Iconos nosotros */

.iconos-nosotros{
    display: flex;
    justify-content: space-between; /*separa los 3 cuadros para que no queden juntos y tengan una mejor vista*/  
}
.icono{
    flex-basis: calc(33.3% - 0.8rem); /*es para darle un ancho a todos los elementos, antes de usaba width*/
    text-align: center; /*podemos usar right left o justify pero queda mejor centrado (center)*/
}
.icono h3{
    text-transform: uppercase; /*convierte en MAYUSCULAS - capitalize (convierte la primera letra a mayus) - lowercase (para hacerlo minus)*/
}

/* Anuncios */
.contenedor-anuncios{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* para que despues de las 3 columnas se pasen abajo, se pone en el padre el de abajo es el hijo*/
}

.anuncio{

    /*flex-grow: 0; el contenido puede agrandarse si es posible*/
    /*flex-shrink: 0;  permite que el contenido se encoja O NO , si ponemos 0 no se encoje, y siempre toma el tamñano de la base se usa para que el contenido pueda achicarse si es posible*/
    /*flex-basis: calc(33.3% - 0.8rem); es la base el tamañp de la caja*/

    flex: 0 0 calc(33.3% - 0.8rem); /*a los tres de arriba los podemos poner como uno solo, en este orden: grow shrink basis*/
    
    /*border-style: solid;  tipo de linea que tendra el recuadro, hay muchas opciones*/
    /*border-color: dimgray; color de linea del recuadro*/
    /*border-width: 2px; tamaño de las lineas del recuadro*/

    border: 2px solid rgb(134, 134, 134); /* se utiliza para acortar codigo con los 3 border en uno solo 1: tamaño 2:tipo 3:color*/
    
    background: #e4e0e0 ;
    margin-bottom: 2rem;
   
}
.contenido-anuncio{
    padding: 1.7rem;
}

.contenido-anuncio h3 , .contenido-anuncio p{
    margin: 0;
}

.precio{

    color: rgb(33, 187, 33);
    font-weight: 700;
}

.icono-caracteristicas{
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    flex: 1;
    max-width: 400px;
}

.icono-caracteristicas li{
    /*flex: 1;*/
    display: flex;
}
.icono-caracteristicas li img{
    margin-right: 1.6rem;
}

.ver-todas{
    display: flex;
    justify-content: flex-end; /*mueve el boton a la derecha del todo*/
}

/* Contacto Home */ 
.imagen-contacto{
    background-image: url(../img/encuentra.jpg);
    background-position: center center;
    background-size: cover;
    height: 36rem;
    display: flex;/*sirve para habilitar flexbox*/
    align-items: center;

}
.contenido-contacto{
    flex: 1; /*es un factor de crecimiento. por ejemplo si hay un elemento y 1000px le asigna a ese elemnto los 1000 si hay 2 le asigna 500 a cada uno*/
    color: #ffffff;
}
.contenido-contacto p{
    font-size: 1.6rem;
}

/* Seccion Inferior */

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

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

.seccion-inferior .testimoniales{

    flex-basis: calc(40% - 1.8rem);
}

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

.entrada-blog:last-of-type {
    margin-bottom: 0; /* Elimina el segundo margen del article, para que solo este la separacion entre los dos titulos pero despues del segundo no este separado*/
}

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


.entrada-blog .texto-entrada{
    flex-basis: calc(60% - 2.8rem);
}
.texto-entrada a{
    color: black;
    text-decoration: none; /* SACA LA LINEA DE ENLACE */
}
.texto-entrada h4{
    margin: 0;
}

.texto-entrada h4::after{
    content: '';
    display: block;
    width: 14.8rem;
    padding: .2rem;
    background-color: chartreuse;
    /* SE LLAMA pseudoelemento, no aparece en el codigo, tenemos muchos mas, por ejemplo en nav usamos hover, ahora ::after , lo usamos para el subrayado ahora*/
    /* los pseudoelementos se usan mucho, podemos leer la documentacion de eso (en firefox) , los pseudoelementos "no existen"*/
    margin-top: .8rem;
}

.texto-entrada span{
    color: chocolate;
}
/* Testimoniales */
.testimonial{
    background-color: lawngreen;
    font-size: 2.2rem;
    padding: 1.8rem;
    color: lemonchiffon;
    border-radius: 1.8rem; /* Para redondear las esquinas tambien exiten otros que podemos probar border-top-right-radius y otros mas */
}
.testimonial p{
    text-align: right;
}
.testimonial blockquote::before{
    content: ''; /*como vemos este es otro pseudoelemento solo que enves de after es before, osea se agrega antes*/
    background-image: url(../img/comilla.svg);
    width: 3.8rem;
    height: 3.8rem;
    position: absolute; /*el hijo siempre lleva la absoluta, permite acceder a otras propiedades como top,left,right y botton*/
    left: -1.6rem;
}
.testimonial blockquote{
    position: relative; /*el padre siempre lleva la relativa , ya que no cambia nada, si no la ponemos, toma como referencia toda la pagina*/
    padding-left: 4rem;
    font-weight: 300;
}

/* Footer */
.site-footer{
    background-color: #333333;
    margin: 0px;
}
.contenedor-footer{
    padding: 3rem 0;
    display: flex;
    justify-content: space-between; /*coloca un elemento del lado izuqierdi y otro del derecho*/
}
.nav-footer a{
    color: #ffffff;
    text-decoration: none; /* SACA LA LINEA DE ENLACE */
    padding: .5rem;
    font-weight: 550;
}
.copyright{
    margin: 0px;
    color: #ffffff;
}

/* INTERNAS */
/* Nosotros */
.contenido-nosotros{
    display: grid; /*es como flex pero mas actual css grid*/
    grid-template-columns: 50% 40%; /* toma dos columnas y le indicas el tamaño*/
    grid-column-gap: 2rem; /* antes usabamos margin , ahora usamos esta propiedad que agrega separacion*/
}

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

/* Anuncio */

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

}

/* Contacto */
form p{
    font-size: 1.4rem;
    color: #4f4f4f;
    margin: 2rem 0 1rem 0;
}
legend{
    font-size: 2.2rem;
    columns: #4f4f4f;
}

label{
    font-weight: 600;
    text-transform: uppercase;
    display: block; /*para que no se amontonen todos*/
}
input:not([type="submit"]) , textarea , select{
    padding: 1rem;
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    border-radius: .8rem;
    margin-bottom: 2rem;
    border: none;
    /*para cambiar el color del texto pongo color: y el color que quiera*/
    /*agregamos en :not para poder anular alguno, en esta caso el submit*/
}
input[type="radio"]{
    width: auto; /*para que se ajuste automaticamente*/
    margin: 0px;
}
select{
    -webkit-appearance: none;
    appearance: none; /*Para arreglar el selecc para poder observar correctamente los estilos*/
}

textarea{
    height: 20rem;
}
.forma-contacto{
    max-width: 30rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
}