@font-face {
  font-family: 'Arca Majora';
  src: url(../fonts/ArcaMajora3-Heavy.otf);
  font-family: 'Museo Sans';
  src: url(../fonts/MuseoSans_500.otf);
}
:root {--blanco: #FFFFFF;
       --oscuro: #212121;
       --primario: #6F95FF;
       --secundario: #3D5CB3;
       --gris: #e7dede; 
       --fuentePrincipal:'Archivo Black';
       --fuenteSecundaria: 'Museo Sans';}

/* globales*/
html
{font-size: 62.5%;}
*, *:before, *:after 
{box-sizing: inherit;
scroll-snap-type: y mandatory;}

/**scroll snap
servicios,
.navegacion-principal,
.formulario
{scroll-snap-align: center;
 scroll-snap-stop: always;}
**/

body
{font-size: 16px; /* 1rem = 10px */
 font-family: 'Archivo Black', 'Arca Majora','Noto Serif', sans-serif;
 background-image: linear-gradient(to top, var(--gris) 0%, var(--blanco) 100%);}

header {
  display: flex;
  max-height: 15rem;
}
.logo{
  margin-right: auto;
  margin-left: auto;
  height: 15rem;
  width: auto;
}

.nav-bg{
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem;
}
 .contenedor
{max-width: 90rem;
 margin: 0 auto 0 auto;
align-items: center;}

 h2 span, section div p {
  font-family: var(--fuenteSecundaria);
  font-size: 1.6rem;
 }
 .boton
 {background-color: var(--blanco);
  color: var(--secundario);
  padding: 1rem 1.5rem 1rem 1rem;
  margin-top: 1rem;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5rem;
  width: 60%;
  text-align: center;
  border: none;
}

 .detalle {
  font-family: 'Arca Majora';
  font-size: 1.8rem;
  margin-left: 2rem;
  margin-right: 2rem;
 }

 section.servicio p {
  font-size: 1.6rem;
  font-family: var(--fuenteSecundaria);
  color: var(--primario);
 }
  .boton, .social-media, .botonwsp:hover
  {cursor: pointer;} /** le pone la manito al cursor**/

  .sombra 
  {-webkit-box-shadow: -18px 9px 25px -5px rgba(0,0,0,0.96);
   -moz-box-shadow: -18px 9px 25px -5px rgba(0,0,0,0.96);
   box-shadow: -18px 9px 25px -5px rgba(0,0,0,0.96);
   padding: 2rem;
   background-color: var(--blanco);
   border-radius: 1rem; 
   color:var(--secundario);}

 /* tipografia*/
 h1
 {font-size: 3.8rem;}
 h2
 {font-size: 2.8rem;
 }
 h3
 {font-size: 1.8rem;
  font-family: var(--fuenteSecundaria);
}

h1, h2, h3
{text-align: center;}
 

/**utilidades**/
.w-sm-100
{width: 100%;}

.flex
{display: flex;}

.alinear-derecha
{justify-content: flex-end;}


/* navegacion principal*/
.nav-bg, .navegacion-principal 
 {background-color: var(--secundario); }
 
 .navegacion-principal a 
    {color:var(--blanco);
     text-decoration: none;
     font-size: 1.5rem;
     font-weight: 400;
     }

    .navegacion-principal a:hover 
    {background-color: var(--primario);
     color: var(--secundario);}

 /*oficina*/
 .oficina 
 {background-image: url(../images/oficina.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  position: relative;
  margin-bottom: 2rem;}

  .contenido-oficina
  {position: absolute;
   background-color: rgb(0 0 0 / 60%);
   width: 100%;
   height: 100%;
   color: var(--blanco);
   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;}


/** servicios **/

img{
  height: 8rem;
  width: auto;
}
img.iconos{
  height: 3.6rem;
  width:auto;
}

.servicio
{display: flex;
flex-direction: column;
align-items: center;}

.servicio h3
{color: var(--secundario);
}

.servicio p
{line-height: 2;
 text-align: center;
 margin-bottom: 3rem;}

.servicio .iconos
{height: 8rem;
 width: auto;
 background-color: var(--secundario);
 border-radius: 50% ;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
}
/**contacto**/

div.contacto img{
  margin-left: auto;
  margin-right: auto;
  margin-top: -2rem;
  display: flex;
  align-items: center;
}
.formulario
{background-color: var(--gris);
 margin-left: auto;
 margin-right: auto;
 width: min(30rem, 100%); /**utiliza el valor mas pequño**/
 /** margin: 0 auto; se utiliza esto para centrar el formulario cuando el padre no es
 un display flex, o sea por default un block**/
 padding: 2rem;
 border-radius: 1rem;
}

.formulario fieldset
{border: none;}

.formulario legend
{text-align: center;
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2rem;
color: var(--primario);
}


.campo:nth-child(3), /**selecciona el 3er div**/
.campo:nth-child(4) /**selecciona el 4to div**/
{grid-column: 1 / 3;}

.campo 
{margin-bottom: 1rem;}

.campo label
{ color: var(--secundario);
font-weight: bold;
margin-bottom: .5rem;
display: block;}

.campo textarea
{height: 15rem;}

.input-text
{width: 90%;
 border: none;
 padding: 1rem;
 border-radius: .5rem;
 color:var(--primario)}

::placeholder{
  color:var(--primario);
}
 .enviar .boton
 {width: 100%;}

 .botonwsp
 {display: flex;
  align-items: center;
  background-color: var(--blanco);
  color: var(--secundario);
  padding: 1rem 1.5rem 1rem 1rem;
  margin-top: 1rem;
  font-size: 1.6rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5rem;
  width: 15rem;
  text-align: center;
  border: 1px solid var(--secundario);
}

.social-media
 {
  padding: auto;
  justify-content: center;
  background-color: var(--blanco);
  color: var(--secundario);
  margin-top: 1.5rem;
  margin-left: 1rem;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: none;
  width: 15rem;
  text-align: center;
  border: none;
  font-family: var(--fuenteSecundaria);
}
 
section a {
  margin-right: auto;
  margin-left: auto;
 }

 /** footer **/
 .footer
 {text-align: center;
color:var(--primario)}


a:link 
{
  text-decoration: none;
}

div.social-media span {
  display: flex;
 align-items: center;
 color: var(--secundario);
 text-align: center;
}
.instagram, .linkedin, .mail{
 padding-right: 2rem;

}

span span {padding-left: .5rem;}

@media (min-width: 768px) {

  .logo{
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
    height: 15rem;
    width: auto;
  }

  .nav-bg{
    width:100%;
    justify-content: flex-end;
    padding:0;
    height: 5rem;
  }
  .navegacion-principal 
  { display:flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    } 

    .navegacion-principal a{
      margin-right: 3rem;
      font-weight: 700;
      font-size: 2rem;

    }
    .navegacion-principal a:hover 
    {margin-top:0;
     margin-bottom: 0;
     height: 5rem;
     display: flex;
     align-items: center;
    }

    .oficina{
      width:auto;
    }
    .contenido-oficina{
      width: 100%;
    }

    .detalle {
      margin-top: 20rem;
      margin-left: 15rem;
      margin-right: 15rem;
     }
   .servicios
   {display:grid;
    grid-template-columns: repeat(3, 1fr);
     column-gap: 1rem;}

    .contenedor{
      margin-left: 0 auto 0 auto;
      width: 100%;
    }

   .contenedor-campos
   {display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: auto auto 20rem;
   column-gap: 3rem;
   margin-right: 5rem;}  
   
   .boton {width: auto;}

   .w-sm-100 {width: auto;}

   .formulario
    { width: min(80rem, 100%);/**utiliza el valor mas pequño**/
    }

  .social-media
 {display: flex; 
  align-items: center;
  background-color: var(--blanco);
  color: var(--secundario);
  padding: auto 0;
  margin-top: 1.5rem;
  margin-left: 40rem;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: none;
  width: 15rem;
  text-align: center;
  border: none;
  font-family: var(--fuenteSecundaria);}

  }