/*estilo*/


/*----------- Estilos cabecera----------*/

#logo{
width:100%;
border-radius: 250px;
margin:10px auto;
padding:5px;
text-align:center;
box-shadow: 5px 5px 5px #333;
}
/*----------- Estilos menú de la esquina con las materias----------*/

nav {
padding: 1%;
z-index:1;
}

#btnmenu {
display: none;
}

nav label {
display: none;
width: 45px;
height: 45px;
}

nav label:hover{
cursor: pointer;
border:5px double white;
}

.menu ul {
margin: 0;
list-style: none;
padding: 0;
display: flex;
}

li{
  color:red;
}

.menu li a:hover {
background: #ffbb58;
color:black;
box-shadow: 0 0 10px #333;
}

.menu li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
background-color: navy;
border:5px double white;
box-shadow: 0 0 10px #333;
font-size: 1em; /* Tamaño de fuente inicial */
}

main{
padding: 20px;
}

@media(max-width: 720px){
nav label {
display: block;
border:5px double white;
}
.menu{
  position: absolute;
  width: 70%;
  margin-left: -80%;
  transition: all 0.1s;     
}
.menu ul{
  flex-direction: column;
}
.menu li {
  border-top: 1px solid white;
}

#btnmenu:checked ~ .menu{
  margin: 0;   
}
}

/*----------- Cuerpo----------*/

* {
box-sizing: border-box;
}

.tituloSeccion{
  background-color: blue;
  text-align:center; 
  color: white;
  padding: 1%;
  border-radius: 50px;
}

.menu2 {
float:left;
width:20%;
text-align:center; 
}

.menu2 a {
background-color: blue;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:white;
border:5px double white;
border-radius: 25px;
}

.menu2 a:hover {
background: #ffbb58;
color:black;
}

.main1{
  float:left;
  width:60%;
  padding-left: 2%; 
  padding-right: 2%;
  padding-top: 2%;
  padding-bottom:2%;
  border-radius: 50px;
  font-size: 1.0em; /* Para cambiar el tamaño del menu del cuerpo de la página*/
  }

.main2 {
float:left;
width:60%;
padding-left: 2%; 
 padding-right: 2%;
padding-top: 2%;
padding-bottom:2%;
box-shadow: 5px 5px 5px #333;
border-radius: 50px;
font-size: 1.0em; /* Para cambiar el tamaño del menu del cuerpo de la página*/
}

.right {
float:left;
width:20%;
padding:15px;
margin-top:7px;
text-align:center;
}

@media only screen and (max-width:720px) {
.menu2, .main2, .main1, .right {
width:100%;
padding:4%;
font-size: 1.0em; /* Para cambiar el tamaño del menu del cuerpo de la página*/
}

}


/*-----------------Contenidos------------------------------------------*/

.titulo {
width:100%;
border-radius: 20px;
text-align:center;
}

#subtitulo {
width:100%;
color:black;
text-align:center;
border-radius: 15px;
background-color: white;
text-shadow: 2px 2px 5px blue;
}

a{
width:100%;
text-decoration:none;
color: blue;
font-size:1.0em; 
list-style-type: upper-roman; 
border-radius: 15px;
padding: 6px 6px;
}

a:hover {
width:100%;
background-color: blue;
text-decoration:none;
color: white;
font-size:1.0em; 
list-style-type: upper-roman; 
border-radius: 15px;
padding: 6px 6px;
}

.texto {
width:100%;
background-color:white;
display:none;
}

.grande {
font-size: 200%;
}

input[type=submit]{
background-color: navy;
border: 2px solid black;
border-radius:25px;
color: white;
padding: 16px 16px;
text-decoration: none;
margin: 2px 2px;
cursor: pointer;
box-shadow: 10px 10px 5px grey;
}

input:hover[type=submit]{
background-color: #ffbb58;
border: 2px solid black;
border-radius:25px;
color: white;
padding: 16px 16px;
text-decoration: none;
margin: 2px 2px;
cursor: pointer;
box-shadow: 10px 10px 5px grey;
}

.button:hover {
background-color: #ffbb58;
color: white;
}
.button:active {
box-shadow: 10px 10px 5px grey;
transform: translateY(4px);
}


h1, h2, h3 {

text-align:center;
background-color: white;
color:blue;
}

table {
box-shadow: 0 0 10px #333;
text-align:center;
}

table, th, td {
border: 1px solid black;
}

th {
text-align:center;
padding:9px;
color: white;
background-color: navy;
}

td {
text-align:left;
padding:9px;
color: navy;
} 

.formulario{
background-color:white;
padding:20px;
display:flex;
text-align:center;
flex-wrap:wrap;
}

@media screen and (min-width: 721px) {

.pantallita2{
display: none;
}
.repetir2{
display: none;
}

}

@media screen and (max-width: 720px){

.pantallita{
  display: none;
}
.titulo{
display: none;
}

.logosExternos{
  width:50%;
}

a{ 
width:100%;
text-decoration:none;
color:blue;
font-size:1em; 
list-style-type: upper-roman; 
background-color: white;
padding: 0px 0px;
}

.aa{ 
width:100%;
text-decoration:none;
color: white;
font-size:1.0em; 
list-style-type: upper-roman; 
box-shadow: 5px 5px 5px #333;
background-color: navy;
padding: 6px 6px;
}

.img2{
display: none;
}

a:hover {
width:100%;
text-decoration:none;
color: white;
font-size:1.0em; 
list-style-type: upper-roman; 
background-color: navy;
transform: translateX(40px);
padding: 2px 2px;
}

.aa:hover {
width:100%;
text-decoration:none;
color: black;
font-size:1.0em; 
list-style-type: upper-roman; 
box-shadow: 5px 5px 5px #333;
background-color: #ffbb58;
padding: 6px 6px;
}

}


/* --- Estilos para el Sub-header --- */
.subheader {
  background-color: #f0f0f0; /* Fondo gris claro para destacarlo */
  padding: 15px 25px;
  display: flex;
  justify-content: space-between; /* Empuja los elementos a los extremos */
  align-items: center; /* Centra verticalmente */
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap; /* Permite que se apilen en pantallas pequeñas */
  gap: 15px;
}

.subheader .tagline {
  margin: 0;
  font-size: 1em;
  color: #333;
  font-weight: 500;
}

.subheader .who-is a {
  text-decoration: none;
  color: navy;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out;
}

.subheader .who-is a:hover {
  background-color: #e0e0e0;
}

/* Vista para móviles */
@media (max-width: 768px) {
  .subheader {
    flex-direction: column; /* Apila los elementos verticalmente */
    text-align: center;
  }
}