/*css de header*/		
		
					
					body{
    
			            margin: 0;
						padding: 0;
						background-color: white;
						font-family: 'Open Sans', sans-serif;
                
					}
	
					.sticky {
						position: fixed;
						top: 0;
						padding: 0px;
			
		
					}
						
					
					
						.header {
						background: #0A3161;
							margin: 0px;
							padding: 0px;
					        width: 100%;
							align-content: flex-start;
							align-items: flex-start;
	                        border-bottom: 1px solid white;
	                        z-index: 2;
	                       
	                   
	                       
}
					
							@media screen and (max-width: 650px){
								.header { 
					                margin: 0px;
									padding: 0px;
                                    
								
						
	}
					}
				
				
			
				
		
		/*css de sidebar*/
		
		


body
		  {
  font-family: "Montserrat", sans-serif;
			  
}
			


.index-sidebar {
 --s: 10px; /* the size */
  --c: #0A3161;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,#BFB35A 68% 70%,#0000 72%;
  background:
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
    var(--c);
    
  height: 100vh;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  
  overflow-x: hidden;
  transition: 0.4s;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  
}

/* Botón cerrar */
.index-closebtn {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 25px;
  color: white;
  cursor: pointer;
  text-decoration: none;
   border: 1px solid ghostwhite;
   opacity: 0.8;
   background: #333;
   padding: 10px;
   border-radius: 6px;
   margin bottom: 20px;
   font-weight: 300;
   
}

/* Contenedor del video */
.index-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
   top: 30px;
   margin-bottom: 30px;

}

.index-video-container video {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Botones sobre el video */
.index-buttons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.index-btn {

  position: absolute;
  background: #0A3161;
  color: yellow;
  border: 1px solid yellow;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1rem;
  padding: 5px 10px;

  font-weight: 500;
  transition: all 0.3s ease;
}


.index-btn.ingresar{

   top: 10%;
   right: 5%;
   border: 0;
   background: none;
   margin-bottom: 15px;
   padding: 0;
   color: yellow;
   font-size: 16px;
}


.index-btn.suscribete{

   top: 6%;
   left: 5%;
}



.index-btn:hover{

   background: transparent;
    color: white;
    transform: scale(1.3); 
    font-weight: 500;

   
}



/* Menú debajo del video */
.index-menu {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  

}

.index-menu a {
  padding: 7px 0;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  height: auto;
 
}

.index-menu a:hover {
  background-color: #096AE6;
  padding-left: 10px;
  transition: 0.3s;
}

/* Botón hamburguesa */
.index-hamburger{
  cursor: pointer;
  background: transparent;
  border: none;
  color: white;
  z-index: 99999;
  margin: 10px;
 
 
 
} 

@media(max-width: 600px){
    

.index-btn.ingresar{




}
.index-btn.suscribete{



}


}


			/*css dropdown button*/
			
			
			

.dropbtn {
  background-color: gold;
  color: #111;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  
  border-top-right-radius: 10px;
}

.dropbtn:hover{
    background: yellow;
    color: #111;
}




.dropdown {
  position: relative;
  display: inline-block;
  
}


.dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: yellow;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20000;
  border-top-right-radius: 12px;
  padding: 10px;
  
  
  
}


.dropdown-content a {
  color: #111;
  padding:  10px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  z-index: 2;
}


.dropdown-content a:hover {
  background-color: #ddd;
}


.show {
  display: block;
}

 
	
		/*css scroll menu*/	
			
			
	  
      	div.scrollmenu {
				background-color: #fff;
				overflow: auto;
				white-space:  nowrap;
				width: 100%;
				position: relative;
				margin: 0 auto;
				padding: 0;
	
                border-top: 2px solid #0A3161;
				border-bottom: 3px solid #f1f1f1;
				box-sizing: border-box;
				font-family: "Baskerville", serif;
			
		
				}
				
				
				
				div.scrollmenu a{
					display: inline-block;
					color: #0A3161;
					text-align: center;
	                 text-decoration: none;
					padding: 14px;
					padding-bottom: 2px;
					font-size: 18px;
					font-weight: 300;
					justify-content: center;

			
	                 }
				
			
			.hover-underline {
	    
	   position: relative;
    /* 🔥 ESTA LÍNEA ES LA CLAVE */
  text-decoration: none;
  color: #0A3161;
  font-weight: 600; 
	    
}

.hover-underline::after {
 content: "";
  position: absolute;
  left: 15px;
  bottom: 0;
  width: 75%;             /* ahora sí respeta SOLO la palabra */
  height: 2px;
  background: #0A3161;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease-in-out;
 
 
 
 
 
}

.hover-underline:hover::after {
  transform: scaleX(1);
}

	
			
			
		
			@media(max-width: 600px){
			    
			    div.scrollmenu a{
			        
			        font-size: 14px;
			    }
			    
			    
			}