html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Ajusta el valor según lo necesites */
  }
  
body{
    background-color:#8097a9;
    color:#252525;
    font-family: "Montserrat", serif;
    font-size: 20pt;
    margin:0;
}

h1{
    color:rgb(41,58,73);
    font-size: 250%;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

h4{
    color:rgb(30, 30, 46);
    margin:0 0 1% 0;
    font-size: 20pt;
}

h2{
    font-weight:700;
}

/*//////MENU PRINCIPAL/////*/
.menu {
    display: flex;
    gap: 20px;
    padding: 20px;
    justify-content: center;
    flex-wrap: wrap;
    position:fixed;    
    background-color: rgba(255,255,255,0.9);
    height: 40px;
    top:0px;
    width: 100%;
  }

.menu-opcion {
    padding: 5px 30px;
    background-color: black;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    border: 3px solid black;
    text-align: center;
    font-size: 20px;
    transition: background-color 0.3s;
}
.menu a{
    color: white;
}

#etqregresar{
    background-color: #8097a9;
}

.menu-opcion:hover {
    background-color: white;
    color: black;
}

#etqregresar a:hover{
    background-color: white;
} 

/*////////IMAGEN PRINCIPAL SUPERIOR//////*/
#bannersuperior img{
    width:100%;
    height: 200px;
    padding-top: 60pt;
}

/*//////SECCION DE LA DEFINICION/////*/
#BannerPrincipal{
    display:block;
    clear:both;
    float:left;
    width:100%;
    background-color:#8097a9;
    border-top: solid black 5pt;
    border-bottom: solid black 5pt;
}

#BannerPrincipal h1{
    display:block;
    clear:none;
    float:left;
    font-size: 45pt;
    width:25%;
    color:#061006;
    padding:0% 0% 0% 10%;
    min-width: 0;
    margin:1% 0;
    text-align: center;
}

#defestadistica{
    display:block;
    clear:none;
    float:right;
    width:57%;
    color:rgb(41,58,73);
    line-height: 46pt;
    border-left: 5px solid black;
    padding: 0 2% 0 3%;
    min-width: 0;
    margin:2% 0;
    text-align: justify;
}

/*//////////AREA DE TEORIA/////////*/
#etqintroduccion,
#etqejemplos,
#FormularioContacto{
  /*scroll-margin-top: 100px;  Ajusta este valor según lo que necesites */
  padding-left: 5%;
}

#etqintroduccion{
    padding-top: 15%;
    padding-bottom: 1%;
    padding-left: 10%;
    padding-right: 10%;
    background-color: white;
}

/*//////////AREA DE EJEMPLOS/////////*/
#etqejemplos {
    margin-top: 0%;
    padding-bottom: 3%;
    border-top: solid 8px black;
}

#etqejemplos #imagena{
    display: block;
    margin: auto;
    float: center;
    border: solid 8px;
    border-bottom: none;
}

#etqejemplos #imagenb{
    display: block;
    margin: auto;
    float: center;
    border: solid 8px;
    border-top: none;
    border-bottom: none;
}

#etqejemplos #imagenc{
    display: block;
    margin: auto;
    float: center;
    border: solid 8px;
    border-top: none;
    margin-bottom: 20px;
}

/*//////////CARACTERISTICAS DE LOS LINKS/////////*/

a:visited{
    color:white;
}
a:hover{
    background-color:#eeeeee;
}
a:active{
    background-color:#dddddd;
}

#cierre{
    background-color: rgb(128,151,169);
}

  /*////ZONA DE CONTACTO////*/
#FormularioContacto{
    background-color: black;
    display:block;
    clear:both;
    float:left;
    padding: 0;
    width:100%;
    text-align: left;
}

#FormularioContacto h2,h4{
    text-align: center;
    padding: 0;
    margin: 0;
    color:white;
}

#FormularioContacto form input{
    display: block;
    width:100%;
    background-color: white;
    margin:1% 0;
    padding: 2%;
    font-size: 20pt;
    border:solid 3pt black;
    height: 10px;
}

#FormularioContacto form textarea{
    display: block;
    width:1200px;
    background-color: white;
    margin:1% 0;
    padding: 2%;
    font-size: 20pt;
    border:solid 3pt black;
    height: 200px;
}

#FormularioContacto form input:focus{
    background-color: #1d3d5e;
    color:white;
}

#FormularioContacto label{
    padding-top: 1%;
    display:block;
    color:white;
}

#Formulario2 {
    width: 1200px;
    background-color: black;
    margin: 0 auto 2%;
    padding: 20px;
    border:solid 10px white;
}

#copyright{
    background-color: #1680e4;
    text-align: right;
    padding-right: 35px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#btnenviar{
    height: 50px;
    width: 200px;
    float: right;
    display:block;     /* Asegura que el botón no ocupe todo el ancho */
    text-align: center;       /* Centra el texto dentro del botón */
    margin: 10px 20px;       /* Añadir relleno para hacer el botón más grande */
    font-size: 20pt;
    cursor: pointer;        
    padding: 5px; /* Espaciado alrededor de la palabra */
    border: 2px solid white; /* Borde alrededor de la palabra */
    border-radius: 5px; /* Bordes redondeados (opcional) */
    background-color: gray; /* Fondo de la palabra (opcional) */
    font-weight: bold; /* Opcional, para hacer la palabra más destacada */
}

/*///////////PIE DE PAGINA///////////*/
#PiedePagina{
    display:block;
    clear:both;
    float:left;
    width:100%;
    min-height: 200px;
}

#Cierre{
    display:block;
    clear:both;
    float:left;
    width:100%;
}

.justificar{
    text-align: justify;
}