:root{
--primario: #003B4D;
--secundario: #6F7C80;
--dark: #101111;
--white: #ffffff;
--rdwn: #69131F;
--pastel: #f4f2e6;
--GRIS: #f4f3ee;
--azul: #69b9ff;
--fuente1: 'Open Sans', sans-serif;
--fuente2: 'Roboto', sans-serif; 
}

/**globales **/

html {
box-sizing: border-box;
font-size: 62.5%; /**1rem=10px**/
}
*, *:before, *:after {
box-sizing: inherit;
}

body {
background-color:  var(--white);
font-size: 1.6rem;
line-height: 1.5;
}

li{
    font-size: 1,5rem;

font-family: Arial, Helvetica, sans-serif;
color: var(--primario);
margin: 0 auto;
}

p{
font-size: 1.8rem;
font-family: Arial, Helvetica, sans-serif;
color: var(--primario);
margin: 0 auto;

}

a{
text-decoration: none;  
 

}

img{
max-width: 100%; 
}

.contenedor {
margin: 0 auto;
    justify-content: space-between;
   align-items: center;
}




@media (min-width: 468px) {
.header {
display: flex;
flex-direction: column;

}
}

@media (min-width: 300px) {
    .contenedor_x {
       width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        margin: 2rem;
            
    }
}


@media (min-width: 268px) {
    .texto{
    column-count: 3;
    text-align: left;
    margin: 3rem;
}
}

.contenedor_head {
    display: flex;
    gap: 5rem;
    align-items: center;
    justify-content: space-between;
   
}
@media (min-width: 768px) {
    .barra{
display: flex;
justify-content: space-between;
align-items: center;
    }
}




.contenedor{
max-width: 120rem;
width: 80%;
margin: 0 auto;
}

h1, h2, h3, H4 {
text-align: center;
color: var(--primario);
font-family: var(--fuente1);
font-weight: 300;
line-height: 130%;
}

h1 {
font-size: 4rem;
}

h2 {
font-size: 3.2rem;
}

h3 {
font-size: 2.4rem;
}

h4 {
    font-size: 1.8rem;
    }


/** header **/
.header {
display: flex;
background-image: url(../img/fondo_plane.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
justify-content: space-evenly;


/** background-attachment: fixed;**/ 
}

.logo_header {
margin: 1rem;

}

/**navegacion**/
@media (min-width: 465px) {
    .barra{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .navegacion{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-basis: calc(50% -1rem);
        gap: 3rem;
        }
}
.navegacion{
display: flex;
align-items: center;
justify-content: space-evenly;
flex-basis: calc(50% -1rem);
gap: 3rem;
}

.navegacion__enlace {
display:flex;
justify-content: space-between;
color: var(--primario);
font-family: 'Open Sans'; 

}
.navegacion__enlace:hover
{
color: var(--secundario)
}

.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}



.boton{
display: flex;
justify-content: space-between;
size: auto;
margin-right: 10px;
margin-left: 10px;
padding: 12px 30px;
border-radius: 4px;
background-color: #69b9ff;
-webkit-transition: background-color 300ms ease;
transition: background-color 300ms ease;
color: #fff;
font-size: 16px;
line-height: 21px;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
border: none;

}

.boton:hover{
background-color: var(--secundario)
}


/** border bottom: 1px solid var(--primario)
margin-bottom: 2rem;
last-of-type{ border:none margin-bottom: 0**/


.footer {
display: flex;
background-color: var(--pastel);
margin: 0 auto;
align-items: center;
justify-content: space-between;



}


.imagen_header{
    gap: 5rem;
}
@media (min-width: 468px) {
    .formulario {
        display: block;

    }
   
}
.contenedor_x__formulario {
   display: block;
  justify-content: center;
   align-items: center;

    width: 468px;
    padding: 1rem;
    margin: 0 auto;
    box-shadow: -5px 5px 8px 1px rgba(1, 1, 1, 0.2);
    background-color: var(--GRIS);

          /**utiliza el valor mas peq**/
}

.campo {
display: flex;
font-family: var(--fuente1);
margin: 1rem;


}

.campo__label_1 {
    flex: 0 0 8rem;
    font-family: var(--fuente1);
    text-align: right;
    margin: 1rem;
    
}

.campo__label_2 {
    flex: 1;
    font-family: var(--fuente1);
    border: none;
    margin-left: 1rem;
    
}

.campo__label_2--textarea {
font-family: var(--fuente1);
height: 200px;
color: #6F7C80;

}


    .contenedor_servicios{
        display: flex;
       justify-content: space-evenly;
        max-width: 90%;
         margin: 0 auto;
         
       
        }

.servicios {
    display: block;
    justify-content: left;
    
}

.brokers {
    display: block;
  
    align-content: center;
    flex-wrap: wrap;
}

.imagen{
        
       scale: 40%;
    
}
@media (min-width: 300px) {
    

.barra__footer{
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center; 
   background-color: var(--pastel);
    margin-top: 3rem;
    gap: 2rem;
}
}

.col3{
    display: flex;
   justify-content: center; 
   gap: .5rem;
}
