:root{
   --blanco: #ffffff;
   --azul: #2c4aac;
   --amarillo: #c7db27;
   --gris: #a6a6a6;   
}
/**Globales**/
 html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;   
 }
 *, *:before, *:after {
   box-sizing: inherit;  
 }
 h1,h2,h3 {
    text-align: center;

 }
  
        
 body{
    font-size: 16px; /* 1rem = 10 px*/
     font-family: "Quicksand", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
         
 }


.boton{
    background-color: var(--amarillo);
   color: var(--blanco);
   padding: 1rem 3rem;
   margin-top: 1rem;
   font-size: 2rem;
   text-transform: uppercase;
   font-weight: bold;
   border-radius: .5rem;
   width: 90%;
   text-align: center;
   border: none;

}
@media (min-width: 768px) {
      .boton{
      width: auto;
   }
.boton:hover{
   cursor: pointer;
}

}
  

.fondo-titulo{
     background-color: var(--amarillo);
}
 
 .titulo {
   text-align: center;
    font-size: 3.8rem;
    color: #2c4aac;
 }
.subtitulo{
   text-align: center;
   font-size: 2.5rem;
   color: #2c4aac;
}
@media (min-width: 768px) {
 
}
.contenedor-campos

 /*utilidades*/
.w-100{
   width: 100%;
 }
 @media (min-width: 768px) {
   .w-100{
      width: auto;
   }
  
 }
.flex{
   display: flex;

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

}

.redes{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   text-align: center;
}



/**contacto**/

.formulario{
   background-color: var(--azul);
   width: min(60rem, 100%);/*utilizar el valor mas pequeño*/
   margin: 0 auto;
   padding: 2rem;
   border-radius: 1.5rem;


}
.formulario fieldset{
   border: none;
}
.formulario legend{
   text-align: center;
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 2rem;
   color: var(--blanco);

} 
@media (min-width: 480px) {
 .contenedor-campos{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto auto 28rem;
   column-gap: 1rem;
}
}
.campo:nth-child(3){
   grid-column: 1/3;
}

.campo{
   margin-bottom: 1rem;

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

}
.campo textarea{
   height: 20rem;
}
.input-text{
   width: 100%;
   border: none;
   padding: 1.5rem;
   border-radius: .5rem;

}
.campo input,
.campo textarea{
   width: 100%;
   box-sizing: border-box;
}

/*redes*/
.redes{
  display: flex;
  flex-direction: column;        /* 👈 uno debajo del otro */
  align-items: center;
  gap: 3rem;
  margin: 4rem auto;
}

/* cada red (icono + botón) */
.red{
  display: flex;
  flex-direction: column;        /* icono arriba, botón abajo */
  align-items: center;
  gap: 1.5rem;
}

/* iconos */
.iconos{
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconos svg{
  width: 3.5rem;
  height: 3.5rem;
}

/* ===== DESKTOP ===== */
@media (min-width: 768px){
  .redes{
    flex-direction: row;         /* 👈 en fila */
    justify-content: center;
    gap: 7rem;
  }
}

.footer{
   text-align: center;
}