* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #ffffff;
  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




#imglogo{
  width: 190px;
  height: auto;
 padding-top: -25px;
 padding-left: -5px;
}

.menu  {
  height: 60px;
  background-color: #2D2E45;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.logolink {
  height: 44px;
  width: auto;
  margin-top: 2px;
}

.menu h1 {
  font-size: 18px;
  text-align:left;
  padding: 12.5px 0 12.5px 12.5px;
  color: #4164B0;
  width: 0;
}


.header{

  margin: auto;
  width: 500px;

}

ul, ol{ list-style: none; }


.nav { display: flex; align-items: center; gap: 4px; }
.nav li a{
  background: transparent;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  display: block;
  border-radius: 6px;
}
.nav li a:hover, .nav li a:focus{
  background: #3a3b59;
  outline: none;
}



.nav > li { position: relative; }



.nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #2D2E45;
  border: 1px solid #3a3b59;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 6px;
}

.nav li:hover > ul{
  display: block;


}


.nav li ul li { position: relative; }
.nav li ul li a { padding: 10px 12px; border-radius: 6px; color: #fff; }
.nav li ul li a:hover { background: #3a3b59; }
.nav  li ul li ul{
  top: 0;
  left: 100%;
}




.box{ padding: 10px; overflow: auto; background-color: #f7f7f7; width: 100%; height: auto; }
img{ max-width: 100%; height: auto; }

@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }


.caja-som { position: relative; display: inline-block; margin: 5px 5px 15px; }

button {
  border: none;
  background: #2D2E45;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
  cursor: pointer;
  transition: background .2s ease;
}
button:hover{ background: #3a3b59; }
button:focus-visible{ outline: 2px solid #8f90ad; outline-offset: 2px; }



.container  { width: 100%; min-height: 50px; background: #f7f7f7; }

#imgsocial{
  margin-top: 10px;
  width:34px;
  height: auto;
  display: inline-block;
}
 
 #imgsocial:hover{
  width: 39px;
  height: auto;


 }



.box-pag{ padding: 10px; width: 100px; margin-left: 5px; text-align: center; height: auto; background-color: #2D2E45; color: white; border-radius: 6px; }


.boton-flecha{
  padding: 8px 12px;
  background: #2D2E45;
  color: white;
  min-width: 130px;
  text-align: center;
  display: inline-block;
  border-radius: 8px;
  transition: background .2s ease, transform .1s ease;
}
.boton-flecha:hover{ background: #3a3b59; }
.boton-flecha:active{ transform: translateY(1px); }


/*
pagina 1



.caja-pag-1{
background: black;
    }
.caja-pag-1{
  margin-top: 40px;
  margin-bottom: 50px;
  width: 100%;
  height: auto;
  background: #CCC;
  overflow: hidden;
}
*/
.caja-pag-1 video { width: 80%; height: auto; display: inline-block; }
img { cursor: pointer; }