/* HEADER (ahora semántico + Grid) */


body{
    
			            margin: 0;
						padding: 0;
						background-color: white;
						font-family: 'Open Sans', sans-serif;
                
					}


.header{
  background: #0A3161;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 9999;
  align-content: flex-start;
 align-items: flex-start;

  /* borde blanco REAL 100% */
  border-bottom: 1px solid #ffffff;

  /* STICKY de verdad (mejor que JS fixed) */
  position: sticky;
  top: 0;
  
}

/* Si tú quieres el “doble efecto” (línea azul pegada debajo) */
.header::after{
  content: "";
  display: block;
  height: 1px;
  background: #0A3161;
}

.header-grid{
  display: grid;

  /* equivalente a tu tabla 5% / 95% pero mejor */
  grid-template-columns: 56px 1fr 56px;

  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* En desktop grande, si quieres volver al 5% exacto, lo puedes activar:
@media(min-width: 900px){
  .header-grid{ grid-template-columns: 5% 1fr 5%; }
}
*/

.header-left{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-center{
  text-align: center;
  padding: 0 6px;
}

.header-right{
  width: 56px;
  height: 56px;
}

/* Tu H1 y P, pero ahora en clases (MISMO clamp) */
.an-title{
  color: #fff;
  margin: 0;
  margin-top: 2px;
  font-weight: 800;
  font-family: Helvetica, sans-serif;
  text-align: center;
  letter-spacing: -2px;
  font-stretch: ultra-condensed;
  text-shadow: 3px 3px #02043E;
  font-size: clamp(2rem, 4vw, 4.5rem);
}

.an-motto{
  margin-bottom: 9px;
  color: #fff;
  text-align: center;
  font-style: italic;
  line-height: 1px;
  letter-spacing: 0px;
  font-size: clamp(0.7rem, 0.8vw, 1rem);
  font-weight: 400;
  margin-top: 2px;
}

/* Burger líneas (equivale a tus div inline, pero limpio) */
.burger-line{
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 6px;
  margin: 4px 0;
}
.burger-line.w35{ width: 35px; }
.burger-line.w30{ width: 30px; }

/* Ajuste fino en móviles */
@media (max-width: 650px){
  .header-grid{
    grid-template-columns: 56px 1fr 56px;
  }
}


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: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.4s;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  
}

/* Bot贸n cerrar */
.index-closebtn {
  position: absolute;
  top: 5px;
  right: 20px;
  font-size: 25px;
  color: #333;
  cursor: pointer;
  text-decoration: none;
   border: 2 solid ghostwhite;
   
   background: #c1c1c1;
  
   padding: 5px 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: 9%;
   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;
			    }
			    
			    
			}