/*HOJA DE ESTILOS*/

                /*Clases Globales*/
/*contenedor header*/

.contenedor {
    max-width: 95.7rem;
    /*centrar el contenedor, con la misma distancia a la izq y derecha*/
   /* margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin: 0 auto 0 auto; */
    margin: 0 auto;
}

img{
    max-width: 100%;
}
/*resetear los rem*/
html {
    font-size: 62.5%;
}
body {
    font-family: 'Lato', sans-serif;
    font-size: 1.6rem;
    line-height: 2;
}
/*     UTILIDADES        */

.d-block{
    display: block!important;
}

.seccion {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.centrar-texto {
    text-align: center;
}
.fw-300{
    /*definir ancho de la fuente*/
    font-weight: 300;
}
/*                      HEADER                 */
.site-header{
    background-color: #333333;
    padding: 1rem 0 3rem 0 ;
}

.site-header.inicio {
    /*imagen de fondo*/
    background: url(../img/header.jpg);
    /*altura de la imgen de fondo*/
    height: 100vh; /*viewport height (alto del 100%)*/
    /*alto minimo*/
    min-height: 60rem;
    /*posicion desde donde quiero que se muestre la imagen*/
    background-position: center;
    /*ocupar el tamano disponible*/
    background-size: cover;
}

/*header total*/
.contenido-header {
    display: flex;
    /*modificar direccion (column: columna row: fila, row-reverse:organiza de derecha a izq)*/
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.contenido-header h1 {
    color: white;
    /*ancho maximmo para salto de linea*/
    max-width: 70rem;
    padding-bottom: 3rem;
    /*interlineado - renglones*/
    line-height: 1.9;
}
/*barra 1*/
/*display block se muestran en un solo bloque (vertical)*/
/*display inline se muestran su ancho de objeto, el texto ocupa solo texto (horizontal)*/
.barra {
    /*permite distribuir los elementos de una manera flexible en la pantalla*/
    display: flex;
    /*permite distribuir y alinear los elementos*/
    justify-content: space-between ;
    padding-top: 3rem;
    /*alinear los elementos*/
    align-items: center;
}
/*Menu de navegacion*/
.menu a {
    /*color: rgba(255, 255, 255, .5) // alpha chanel (trasparencia)*/
    color: white;
    text-decoration: none;
    /*margen entre textos*/
    margin-right: 1.8rem;
    font-size: 1.8rem;
}
/*pseudoselector (solo afectara a un 1 solo elemento)*/

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

/*darle color a un texto al pasar por encima*/
.barra a:hover {
    color: aqua;
}

/*              MAS SOBRE NOSOTROS                  */

.iconos-nosotros{
    /*distribuir los elementos*/
    display: flex;
    /*distribuir los elementos de manera equilibrada*/
    justify-content: space-between;
}

.icono {
    /*define el ancho de cada elemento, se utiliza porque estamos utilizando display flex*/
    flex-basis: calc(33.3% - 1rem);
    text-align: center;
}

.icono h3 {
    text-transform: uppercase;
}

/*              CASAS Y APARTAMENTOS EN VENTA                  */
.contenedor-anuncios {
        display: flex;
        justify-content: space-between;
        /*permite respetar el espacio de la pagina, organizar los anuncios en 2 filas, respetar orden*/
        flex-wrap: wrap;
}

.anuncio {
    flex: 0 0 calc(33.3% - 1rem);
    /*nos permite controlar si se encoge un elemento para respetar el flex-basis, factor de encogimiento*/
    /*flex-shrink: 0;*/
    /*permite colocar un espacio entre imagenes o contenedores*/
    /*flex-basis: calc(33.3% - 1rem);*/
    /*border-style: solid;
    border-color: #b5b5b5;
    border-width: .1rem;*/
    border: .1rem solid #b5b5b5;
    background: #f5f5f5;
    /*permite determinar si el valor de crecimiento va crecer*/
    /*flex-grow: 1;*/
    margin-bottom: 2rem;
}

.contenido-anuncio{
    padding: 2rem;
}

.contenido-anuncio h3, p{
    margin-top: .5rem;
}

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

.iconos-caracteristicas {
    /*quitar viñetas o agregar*/
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
}

.iconos-caracteristicas li {
    display: flex;
}

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

/*                      BOTON                     */

.boton {
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 1rem 3rem;
    margin-top: 3rem;
    display: inline-block;
    border: none;
    cursor: pointer;
    /*
    display:
    inline o block
    */

}

.boton-amarillo {
    background-color: #E08709;
}

.boton-verde {
    background-color: #71b100;
    margin-bottom: 3rem;

}

.ver-todas{
    display: flex;
    justify-content: flex-end;
}
/*          CONTACTO            */
.imagen-contacto{
    background-image: url(../img/encuentra.jpg);
    background-position: center;
    background-size: cover;
    height: 40rem;
    display: flex;
    align-items: center;

}

.contenido-contacto{
    flex: 1;
    color: #FFFFFF;
    /*1200px / 1 */
}

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

/*              SECCION INFERIOR                */

.seccion-inferior {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
}

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

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

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

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

.blog .nuestro-blog{
    font-size: 2.5rem;
}
 
.testimoniales .nuestro-blog {
    font-size: 2.5rem;
}

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

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

.texto-entrada a{
    color: #000000;
    text-decoration: none;
    font-size: 2.0rem;
}

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

.testimonial {
    background-color: #71b100;
    border-radius: 2rem;
    font-size: 2.2rem;
    padding: 2rem;
    padding-bottom: 0.01rem;
    color: #FFFFFF;
    text-align: left;
}

.testimonial p{
    text-align: right;
}

.testimonial blockquote{
    font-weight: 300;
    padding-left: .1rem;
}

/*      PSEUDO ELEMENTOS            */

/*Elementos css que estan visibles, pero que no existen para html */

.texto-entrada h4::after{
    content: '';
    display: block;
    background-color: #71b100;
    width: 15rem;
    height: 1rem;
    margin-top: 1rem;
}

.testimonial blockquote::before{
    content: '';
    background-image: url(../img/comilla.svg);
    display: block;
    width: 3rem;
    height: 3rem;
}
/*              FOOTER              */
.site-footer {
    background-color: #333333;
}

.contenido-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 3rem;
    align-items: center;
}

.copyright {
    color: #FFFFFF;
}

/*              DOCUMENTO NOSOTROS             */

.contenedor-nosotros{
    /*los elementos hijos seran afectados*/
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    /*espacio entre columnas*/
    column-gap: 1.5rem;
}

.texto-nosotros h2{
    font-weight: 900;
    font-size: 2rem;
    margin: 0;
    padding: 1rem 0 3rem 0;
}
/*                      TRABAJO EN CASA             */

/*                      PAGINA ANUNCIO              */
.contenedor .imagen-anuncio {
    max-width: 100%;
}

.items-anuncio {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0 2rem 0;
}

.precio-anuncio{
    color: #71b100;
    font-weight: 700;
    margin: 0;
    padding-top: 2.5rem;
    margin-left: 0;
}

.iconos-caracteristicas-anuncio{
    padding: 0;
    display: flex;
    justify-content: space-evenly;
}

.iconos-caracteristicas-anuncio li {
    display: flex;
}

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

.iconos-caracteristicas-anuncio p {
    margin-right: 6rem;
}

/*                          BLOG                    */
.margen {
    margin: 0;
    padding: 1rem 0 1rem 0;
}

/*                      ENTRADA                     */
.i-entrda{
    max-width: 100%;
}

.texto-anuncio {
    padding: 1rem 0 1rem 0;
}

/*                  CONTACTO - FORMULARIO           */

.contenido-centrado{
    max-width: 80rem;
}

label{
    display: block;
    font-weight: 700;
    text-transform: uppercase;
}

legend{
    font-size: 2rem;
    color: #6d6161;
}

input:not([type="submit"]),
textarea, select{
    padding: 1rem;
    display: block;
    width: 97%;
    background: #e1e1e1;
    margin-bottom: 2rem;
    border: none;
    border-radius: 1rem;
}
textarea{
    height: 20rem;
}
select{
    width: 100%;
}

.contacto p{
    font-size: 1.4rem;
    color: #4f4f4f;
}

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

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