* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



.menu_bar {
	display:none;
}

header {
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	align-items: center;
	text-align: center;
    display: flex; /* Usamos flexbox en el contenedor */
    background-color: #253576;
    font-size: 105%;
}



/* hj1 usado 2 veces */
.escritorio_btec{
    display: inline;  /* Se muestra como un bloque */
    margin: auto;          /* Se posiciona en la parte superior */
    height: auto;
    text-align: center;
    justify-content: center;
    border: none;
    width: 10%;
}

/* menu */
header nav {
	z-index:1000;
	width: 80%;
	margin: 0;
    padding-left: 1px;
}





header nav ul {
	list-style:none;
}

header nav ul li {
	display:inline-block;
	position: relative;
	margin: 0;
}



header nav ul li a {
	color:#fff;
	display:block;
	height: 100%;
	text-decoration:none;
	padding-top: 20px;
	padding-bottom: 20px;/*distancia debajo de opciones primarias*/
	padding-right: 13px;
	padding-left: 13px;
	font-size: 85%;
	font-family: "Lexend","Century Gothic", Arial;
}

header nav ul li a span {
	margin-right:10px;
}



header nav ul li .children {
	display: none;
	background-color: #f5f4f4;
	position: absolute;
    top: 100%; /* Distancia debajo del elemento principal */
	width: 150%;
	z-index:1000;
}


header nav ul li:hover .children {
	display: block;
	background: #f5f4f4;
    padding-bottom: 12px;/*Interlineado de opciones secundarias*/
}



header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: none;
}

header nav ul li .children li a {
	display: block;
	color: #313131;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    text-align: left;
}

header nav ul li .children li a span {
	float: right;
	position: relative;
	top: 3px;
	margin-right:0;
}

header nav ul li .caret {
	position: relative;
	top: 3px;
	margin-right: 0;
}







.fant_btntecnm {
    display: none;  /* Se muestra como un bloque */
}

.fant_home{
    display: none;  /* Se muestra como un bloque */
}












@media only screen and (max-width: 768px) {
	
    /* Se agrega un espacio superior de 80px al cuerpo para evitar que el contenido quede oculto detrás del menú fijo */
    body {
		margin: 0;
        padding: 0;
		background-color: #f7f7f7;
    }

    .escritorio_btec{
        display: none;
    }

    header{
        display: inline;
    }

    header nav {
        width: 100%;
    }


    .agrupador_3btns {
        display: flex;               /* Alinea los elementos horizontalmente */
        justify-content: space-between; /* Espacio equitativo entre los elementos */
        align-items: center;         /* Centra verticalmente los elementos */
        padding: 0;
        margin: 0;
      }

      
    /* Botones TecNM y Home */
    .fant_btntecnm{
        display: inline;  /* Se muestra como un bloque */
        width: 30%;     /* Ocupa todo el ancho de la pantalla */
        height: 100%;
        top: 0;
        margin: 0;          /* Se posiciona en la parte superior */
        margin-left: 1%;
        text-align: center;
        justify-content: center;
        border: none;
    }

    .fant_home{
        display: inline;  /* Se muestra como un bloque */
        top: 0;/* Se posiciona en la parte superior */
        margin: 0; 
        width: 30%;/* Ocupa todo el ancho de la pantalla */
        height: 100%;   
        padding: 5%;
        text-align: center;
        justify-content: center;
    }

    

    /* Estilo para la barra de menú fija */
    .menu_bar {
        display: inline;  /* Se muestra como un bloque */
        width: 30%;     /* Ocupa todo el ancho de la pantalla */
        top: 0;          /* Se posiciona en la parte superior */
		margin: 0;
		text-align: right;
    }

    
    /* Estilo del botón o enlace de menú dentro de la barra */
    .menu_bar .bt-menu {
        width: 90%;
        display: block;        /* Se muestra como un bloque */
        padding: 20px;         /* Relleno de 20px alrededor del texto */
        color: #fff;           /* Color del texto blanco */
        overflow: hidden;      /* Se asegura de que el contenido extra no se desborde */
        font-size: 25px;       /* Tamaño de fuente de 25px */
        font-weight: bold;     /* Negrita */
        text-decoration: none; /* Elimina el subrayado del texto */
        /*background-attachment: fixed;*/
    }

    /* Estilo del span dentro de la barra de menú (probablemente para un ícono de menú) */
    .menu_bar span {
        float: right;   /* Flota el span hacia la derecha */
        font-size: 40px; /* Tamaño de fuente grande (40px), usado probablemente para un ícono */
    }

    /* Estilo para la barra de navegación fija */
    header nav {
        width: 80%;                /* Ancho del 80% de la pantalla */
        height: calc(100% - 80px);  /* Altura 100% menos los 80px del padding-top en el body */
        position: fixed;           /* Fija la navegación en la pantalla */
        right: 100%;               /* Lo posiciona fuera de la pantalla (a la derecha) */
        margin: 0;                 /* Elimina márgenes */
		margin-top: 0;
		padding-bottom: 0;
        overflow: scroll;          /* Permite el desplazamiento si el contenido es más grande que el área disponible */
		background-color: #f1f4ff;
    }

    /* Estilo para los elementos de lista dentro de la barra de navegación */
    header nav ul li {
        display: block;                      /* Muestra cada ítem de lista como un bloque */
        border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Un borde inferior blanco semitransparente */
		padding-left: 5%;
		text-align: left;
        
    }



    /* Estilo para los enlaces dentro de los elementos de lista */
    header nav ul li a {
        display: block; /* Hace que el enlace ocupe todo el espacio del elemento de lista */
        color: #2a273a;
        font-size: 90%;
		font-weight: 400;
        font-family: "Lexend","Century Gothic", Arial;

    }



    /* Color de fondo de las opciones secundarias mientras esté estático */
    header nav ul li .children {
        display: none;  
        background-color: #f1f4ff;
    }
    
    /* Oculta los elementos hijos (submenús) cuando se pasa el mouse sobre el ítem del menú */
    /* con el hover se mantiene el color que tiene por defecto en version escritorio */
    header nav ul li:hover .children {
        display: none;  /* Al pasar el mouse sobre el ítem de la lista, oculta el submenú */
        background-color: #ffffff;
    }

    /* Estilo para los submenús dentro de los elementos de lista */
    header nav ul li .children {
        width: 100%;       /* Los submenús ocupan el 100% del ancho del ítem principal */
        position: relative; /* Posición relativa dentro del ítem principal */
    }

    /* Estilo para los enlaces dentro de los submenús */
    header nav ul li .children li a {
        margin-left: 20px; /* Se agrega un margen izquierdo de 20px a los enlaces de los submenús */
        color: #333333;
        font-weight: normal;
        font-size: 85%;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
    }

    /* Estilo para los íconos de "caret" (generalmente una flecha hacia abajo o hacia la derecha) */
    header nav ul li .caret {
        float: right; /* Flota el ícono hacia la derecha del elemento de lista */
    }
}