*{ box-sizing: border-box;   font-family: sans-serif;}

    :root {
        --azul-rey: #114cbb;
        --naranja: #ffbb00;
        --gris-claro: #F4F7F9;
        --blanco: #FFFFFF;  }

 body{margin: 0; text-align: center;  font-family: 'Montserrat', sans-serif; }
#Encabezado{
   position: -webkit-sticky; 
   position: sticky;
   top: 0;
   background-color: rgb(253, 252, 252);
   z-index: 1000; 
   width: 100%;  }

   #contenedorHeader{align-items: center; display: flex;  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }

   #logotipo{display: flex; float: left;  width:25%;  height: auto;   justify-content:right; }
   #logotipo img{width: 80%;  height: auto;  margin: 2%; }

/*MENU*/    
     #menu { width: 75%;  display: flex; flex-direction: column;  padding-bottom: 0px;  text-align: center;   align-items: center;}
     #btnMenu{ display: none; background: none; border: none; cursor: pointer;  }
     nav ul {top: 0; align-items: center; text-align: center; display: flex; list-style: none;   padding: 0; display: flex; }
    nav ul li a {padding: 10% 15px; text-decoration: none;  color:#114cbb; font-family:'Poppins'sans-serif; font-size: 110%;  transition:.3s }    

    nav :hover {color: #FF5C00;}
    
.submenu { width: 15%;
  display: none; margin-top: 4%;
  position: absolute; /* Posiciona respecto al padre */
  background-color: #e2dede;}
.submenu li{padding: 4%;}
/* Mostrar submenú al pasar el ratón */
.menuoferta:hover .submenu { display: block;}


 #presentacion{   display: flex; width: 100%; height: 360px;  justify-content: center;   position: relative; margin:0%;  display: inline-block;  }
 
 #presentacion img{display: flex; width: 100%; height: 100%;  justify-content:center;/* position: bottom;*/ object-fit: cover;  margin:0%;}
   #presentacion h1{  position: absolute;  top: 40%;  left: 50%; 
  transform: translate(-50%, -50%); /* Ajuste fino para centrado perfecto */
  color: #ff8800;
  font-family: "Roboto", sans-serif;
  font-size: 350%; text-transform:uppercase; letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo opcional para legibilidad */}

    #contenido{width: 90%; margin-left: 5%; }
    #division{max-width:100%;  margin:auto;  display:grid;  grid-template-columns:1fr 1fr; gap: 8%;}
    #division  p{font-family:"Roboto", sans-serif; color: #2c2c2c; text-align: justify; font-size: 1rem;}
     #contenido p{font-family:"Roboto", sans-serif; color: #2c2c2c; text-align: justify; font-size: 1rem;}
    h2{color: #114cbb; font-size: 180%; margin-top:5%; text-align: center;}
     


/*GALERIA*/
.contenedor { max-width: 90%; margin: 0 auto; text-align: center;  }

   .contenedor  h1 { color: #114cbb; }

        .subtitulo {  color: #7f8c8d; text-align: center; margin-bottom: 40px; }

        /* Estructura de la Galería (Grid) */
        .galeria-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}

        /* Tarjeta de cada Proyecto/Actividad */
        .tarjeta {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            width: 22.5%; /* Tamaño fijo base */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .tarjeta:hover { transform: scale(1.05); /* Efecto de aumento al pasar el mouse */ }

        .tarjeta img {
            width: 100%;
            height: 200px;
            object-fit: cover; /* Ajusta la imagen sin deformarla */
            display: block;
        }

        /* Información de la tarjeta */
        .infor {
            padding: 15px;
            text-align: left;
        }

        .infor h3 {
            margin: 0 0 10px 0;
            font-size: 1.2em;
            color: #2980b9;
        }

        .infor p {
            margin: 0;
            font-size: 0.9em;
            color: #555;
            line-height: 1.4;
        }

        .etiqueta {
            display: inline-block;
            background: #ecf0f1;
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 0.75em;
            font-weight: bold;
            margin-bottom: 10px;
            text-transform: uppercase;
        }


    
/*F O O T E R*/
footer{background-color:#114cbb; }
#contacto{
width:100%;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:0px;
margin: 0%;
background-color: #114cbb;
color: #ffffff; } #Informacion h2{color: #ffff;}

#formulario{
justify-content: center;
margin: 5%;
width: 80%;
height: 90vh;
margin-top: 3%;
margin-bottom:10%;
margin-left: 10%;
margin-right: 10%;
font-family: sans-serif;
color: #052692;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1)}

input,  textarea{
width:100%;
padding:8px;
margin-top:5px;
margin-bottom:1px;
border:3px solid #ccc;
border-radius:5px; }

button{
background:#0056b3;
color:white;
width: 40%;
border:none;
padding:12px;
border-radius:5px;
cursor:pointer; }

button:hover{ background-color: #052692;}


#Informacion{

padding-top: 0.02px;
display: block;
font-family:'poppins' sans-serif;
margin: 3%; color: #ffffff;} #Informacion h2{background-position: left;}
    
#info{display: flex; margin-bottom: 5%; height: 80px;}
#info div{width: 33%;}
#info p{color: #fff; text-align: center;}

#redes a{
font-size: 30px;
margin:3%;
text-decoration:none;
color:#fff;
transition:0.3s;}  

#mapa{margin-top:5%; margin: 3%;} #mapa p{color: #fff;} #mapa h2{color: #fff;}
iframe{
width:100%;
border:none;
border-radius:5px;
height:90vh;
}


    /*M O D O   R E S P O N S I V E*/

@media (max-width: 782px){
    
header{
flex-direction: column;
align-items: center;

    }
 #contenedorHeader{
    position: -webkit-sticky; 
    position:sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    width: 100%;
}

 #logotipo{
    width:96%;
    height: auto; 
   margin-left:3% ;
     }
    #logotipo img{
        width: 100%;
       justify-content:left ; }


/*MENU*/
  #btnMenu{
      display: block;
      margin-left: 40%; 
      color: #180377;
      font-size: 200%;
      cursor: pointer; }
    
    #menu {
    display: none;
    position: absolute;
    top: 80%;
    right: 0%;
    width: 30%;
    background: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    transition:max-height .4s ease;}
    

  nav ul {
    width: 100%;
    flex-direction: column; }
      #menu li{
      padding:5px 0;
      border-bottom:2px solid rgba(255,255,255,0.2); }
    

   nav ul li a:hover {color: #FF5C00;}
   #menu.activo{display: block;}
  .submenu { width: 80%;
  display: none; margin-top: 100%;margin-right: 50%;
  position: absolute; /* Posiciona respecto al padre */
  background-color: #dddbdb;}
.submenu li{padding: 5%; text-align: center;}
/* Mostrar submenú al pasar el ratón */
.menuoferta:hover .submenu { display: block;}



   #presentacion{ display: flex; width: 100%; height: 50%;  justify-content: center;   position: relative; margin:0%;  display: inline-block;  }
    
 #presentacion img{display: flex; width: 100%; height: 50%;  justify-content:center;background-position: bottom; object-fit: cover;  
     margin:0%;}
   #presentacion h1{  position: absolute;  top: 50%;  left: 50%;
  transform: translate(-50%, -50%); /* Ajuste fino para centrado perfecto */
  color: #ffa500;;
  font-family: "Roboto", sans-serif;
  font-size: 200%; }

    #contenido{width: 80%; margin-left: 10%; }
      p{font-family:"Roboto", sans-serif; color: #2c2c2c; text-align: left; font-size: 100%;}
     h2{color: #114cbb; font-size: 140%; margin-top:5%; text-align: center;} 
     
     #division{max-width:100%;   grid-template-columns:1fr; gap: 0%;}


     
     .tarjeta { width: 90%;}
     .contenedor  h1 { color: #114cbb; font-size: 140%;}

  /*F O O T E R*/
#contacto{
grid-template-columns:1fr;
}
#formulario{
    margin-top: 0%;}

#Informacion{
padding-top: 2%;
display: block;
font-family: sans-serif;
margin: 3%; color: #ffffff;}
    
#info{display: block; margin-bottom: 4%; height: auto;  }
#info div{width: 100%; text-align: center; }

}