:root{/*declaración de vatiables*/

    --Principal: #3619a2;
    --blanco: #FFFFFF;
    --Oscuro: #212121;
    --gris: #757575;
    --grisClaro: #DFE9F3;

}
html{
    font-size: 62.5%;
    box-sizing: border-box; /*Esta línea impide que cuando ponga padings los elementos como imágenes me cambien de tamaño*/
    scroll-snap-type: y mandatory;/*Esta línea se usa para agregar la propiedad de scroll al sitio, para que cuando doy scroll se detenga 
    por secciones según como se va a definir en cada sección*/
}
*, *:before, *:after {
    box-sizing: inherit;
  }/*Estas se deben colocar junto con la que impide que los elementos cambien de tamaño*/

  body{
     font-size: 1.6rem;
     font-family: "PT Sans", serif;
     font-weight: 400;
     font-style: normal;
      
  }
  html, body{
    margin: 1rem
    ;
  }
  /*
  .header,
  .banner,
  .quienes-somos,
  .portafolio1,
  .Contacto{
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
*/


.header{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
    border-block-end: .1rem solid;
    border-color: var(--Principal);
    

}
.imagenes {
    inline-size: 10%;
    block-size: auto;
  
}
.imgfooter{
    inline-size: 30%;
    align-items: center;
}
.menu{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    padding-block-start: 1rem; 
    row-gap: 1rem;
}
.boton{
    text-decoration: none;
    background-color: var(--blanco);
    padding: .5rem;
    border-radius: .5rem;
    color: var(--Principal);
    

}

.menu a:hover{
 background-color: #3619a2;
 color: var(--blanco)
    
}

@media (min-width: 480px){
    .menu{

        flex-direction: row;
        justify-content: space-between;/*Distrribuye los limk del menú através del espacio disponible*/

    }
    
}

.fondo-menu{
    background-color: var(--grisClaro);
    padding-inline-start: 20%;
    padding-inline-end: 20%;
    inline-size: 100%;
    
    
}
.banner{
    background-image: url(../Img/Banner-ppal.jpg) ;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    block-size: 50rem;
}

.texto-banner{
    
    background-color: rgba(0, 0, 0,.7);/*anterior forma de definir la transparencia del color*/
    background-color: rgb(0 0 0 / 70%);/*Esta es la forma actual de definir la transparencia - se debe colocar ambas por que algunos navegadores aún no soportan la segunda*/
    inline-size: 100%;/*Define el ancho del elemento hace lo mismo que width*/
    block-size: 100%;/*define la altura del elemento - hace lo mismo que height*/

    /*El siguuente código se puede usar para alinear cualquier cosa en vertical y hacia el centro*/
    display: flex;/*Aplica las propiedades de flexbox*/
    flex-direction: column;/*Pone el contenido en columnas*/
    align-items: center;/*Centra Junto con la siguiente línea tanto en horizontal como en vertical todos los elementos que están dentro de la etiqueta que invoca la clase*/
    justify-content: center;
    text-align: center;

    color: var(--blanco);
}
.quienes-somos h3{
    color: var(--Principal);
    
}

.quienes-somos{
    inline-size: 40%;
    inset-block: 40%;
    display: grid;
    flex-direction: column;
    inline-size: 100%;
    text-align: justify;
    padding: 1rem;
    column-gap: 1rem;
    place-items: center;
}

@media (min-width: 480px){
.quienes-somos{
    inline-size: 40%;
    inset-block: 40%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    flex-direction: column;
    inline-size: 100%;
    text-align: justify;
    padding: 1rem;
    column-gap: 1rem;
   
}
}


p, li{
    font-size: small;
    text-align: justify;
    color: var(--Oscuro);
    padding: 2rem;
   
}
@media (min-width: 480px){
.ampliar-espacio{
    grid-column: 2/4;
}
}
.mision-vision-valores img{
    inline-size: 20%;
    block-size: 20%;
}

.mision-vision-valores {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /*sombra en los cuadros*/
 
}
@media (min-width: 480px){
.centro-objetivos{
    grid-column: 1/4;
}
}
.titulos{
    background-color: var(--grisClaro);
    padding-inline-start: 20%;
    padding-inline-end: 20%;
    inline-size: 100%;
    text-align: center;
    color: var(--Principal);
    text-transform: uppercase;
}
.portafolio1{
    background-color: var(--gris);
    display: flex;
    flex-direction: column;
    color: var(--blanco);
}

.portafolio3{
    display: grid;
    flex-direction: column;
    padding: 2rem;
}

@media (min-width: 480px){

.portafolio3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}
.ampliar-espacio2{/*creamos la clase ampliar-espacio para correo y mensaje donde necesitamos*/
    grid-column:2/4; /*le estoy diciendo que ubique el campo correo en las columnas de la 1 a la 3*/

}
}
.portafolio3 p{
    color: var(--grisClaro);
}



.sectores img{
    inline-size: 20%;
    block-size: auto;
}



.sectores{
    padding: auto;
    row-gap: 15rem;
    text-align: center;
    justify-content: center;
}

/*Contacto*/
.formulario{

    background-color: var(--Principal);
    inline-size: min(60rem, 100%); /*La función mim utiliza el valor mas pequeño de los entregados*/
    margin: 0 auto; /*Acá estamos centrando el formulario. esta forma de centrar se usa cuando NO estamos dentro de un flex box*/
    padding: 2rem;
    border-radius: 1rem;
}

.formulario fieldset{
    border: none;
}

.formulario legend{
    color: var(--Primario);
    text-align: center;
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--blanco);
    margin-block-end: 2rem;
    

}

@media (min-width:480px){
    .contenedor-campos {

        display: grid; /*Cargamos las propiedades de CSS grid*/
        grid-template-columns:1fr 1fr; /*ponemos el contenido en dos columnas*/
        grid-template-rows: auto auto 20rem;/*Acá estoy habilitando 3 filas en css grid*/
        column-gap: 1rem; /*Definimos el espacio entre columnas*/
        
    }       
}


    .ampliar-espacio{/*creamos la clase ampliar-espacio para correo y mensaje donde necesitamos*/
        grid-column:1/3; /*le estoy diciendo que ubique el campo correo en las columnas de la 1 a la 3*/

    }
  




.campo{

    margin-block-end: 1rem;

}

.campo label{

    color: var(--blanco);
    font-weight: bold;
    margin-block-end: .5rem;
    display: block;/*hace que el label ocupe todo el espacio disponible*/
}

.campo input, 
.campo textarea{/*Con este selector vamos a dar estilo a todos los campos de texto*/

    inline-size: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;

}
.boton:hover{

    cursor: pointer;
}

.flex{
    display: flex;
}
.derecha{
   
    justify-content: flex-end;
}
.campo textarea{
    block-size: 15rem;
}
/*footer*/
.footer{
    background-color: var(--grisClaro);
    text-align: center;
    padding: 1rem;
    border-block-start: .1rem solid;
    border-color: var(--Principal);
   
}
.footer p{
    text-align: center;
}
@media (min-width: 480px){
.footer{
    background-color: var(--grisClaro);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-content: center;
    column-gap: 5rem;
    border-block-start: .1rem solid;
    border-color: var(--Principal);
   
}
}
@media (min-width: 480px){
.contenido-privado{
    display: grid;
    grid-template-columns:repeat(4, 1fr);

}
}
.contenido-privado h3, h4{
    color: var(--gris);
    font-weight: bold;
}



.contenido-privado img{
    max-inline-size: 15%;
    block-size: auto;
}
.mover-img{
    grid-column: 1/5;
    text-align: center;
}

@media (max-width: 480px) { /* Para móviles pequeños */
    .contenido-privado img{
      
        max-inline-size: 40%;
        block-size: auto;
        padding-inline-start: 2rem;
        
  }
}
@media (min-width: 480px) {
    .parrafo-privado{
        grid-column: 1/5;
        padding-inline-start: 10rem;
        padding-inline-end: 10rem;
    }
}
.estudios{
   
    padding: 1rem;
    text-align: center;
    
}
.bordes{
    border: .1rem solid;
    border-color: var(--grisClaro);
    padding-block-start: 1rem;
    
}