@media (max-width: 1200px) {
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3 !important;
    margin-bottom: 1.3em !important;
}

h1 { font-size: clamp(3rem, 5vw + 1rem, 4rem) !important;}
h2 {font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;}
h3 {font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem) !important;}
h4 {font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem) !important;}
h5 { font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem) !important;}
h6 { font-size: clamp(1rem, 1vw + 0.25rem, 1rem) !important;}

p {
    font-size: clamp(1rem, 1vw + 0.25rem, 1rem)!important;
    line-height: 1.7 !important;
    margin-bottom: 1em !important;
}

h2{
    font-weight: 600;
}
	
	.logo {
    width: 54px;
 
}
	.slider-txt {
        width: 90% !important;
        top: 100px;
}
	.slider-txt .txt {
    width: 45%;
    margin: 6% 0 0 8%;
 
}
	.slider-txt .txt h1 {
    font-size: 42px !important;
    line-height: 46px !important;
}
	.slider-txt .txt h2 {
    font-size: 20px !important;
    line-height: 25px !important;
}
	.slider:before{
		content: '';
		position: absolute;
		background: #0E183F;
		background: radial-gradient(circle,rgba(14, 24, 63, 1) 48%, rgba(14, 24, 63, 0) 93%);
		left: -1540px;
		z-index: 9999;
		width: 300%;
		height: 300%;
		top: -920px;
	}
	#certificaciones {
    background-size: 510px auto;
 
}
	.cert-cont {
    margin: 50px 0 0;
 
}
	.cert-ind {
  
    align-items: self-start;
  
}
	.cert-ind img {
  
    margin: 20px 0 0 0;
}
	

.wrap {
    background-color: #060822;
}

.header ul {
    justify-content: right;
}
.nav-cont {
    border-bottom: navajowhite;
}
h1, h2, h3, h4, h5 {
    text-align: left !important;
}
#closeMenuBtn, #openMenuBtn{
    display: block !important;
    width: 34px;
    height: 34px;
    top: 20px;
    right: 10px;
    background-color: transparent;
    color: var(--white);
    font-size: 26px;
    padding: 0;
    border: none;
    margin-left: 10px;
    z-index: 9999;
}
#closeMenuBtn{
    float: right;
    top: 0;
    right: 0;
    position: absolute;
    border-radius: 50px;
    border: solid 1px var(--white);
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0;
    margin: 0;
    font-size: 18px;
}
.nav-top{
    display: flex;
    align-items: flex-start;
    position: relative;
}
.nav-top .logo{
    width: 60px;
}
.header ul {
    margin: 0;
    display: block;
}
.header ul li {
    display: block;
    transition: left 0.3s ease; /* Transición para el deslizamiento */
}
.header ul li a {
    font-size: 18px;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: navajowhite;
    box-sizing: border-box;
    /* padding: 0 !important; */
    /* border-bottom: solid 1px; */
}
	.nav-row{
		width: 100%;
	}
	.sobre-nav{
    width: 100%;
}
	.sobre-nav ul{
    display: flex;
    align-items: center;
    justify-content: end;
}
	.sobre-nav ul li{}
	.sobre-nav ul li a{
    width: auto;
    border: solid 1px;
    /* CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX; */
}
/* ------------------------------------------------------------------ */
/* MENÚ SLIDING (Deslizante) - CONFIGURACIÓN INICIAL */
/* ------------------------------------------------------------------ */
.bajo-nav{
    position: absolute; /* Usar fixed para cubrir toda la pantalla */
    top: 0;
    left: -100%; /* Posición inicial: 100% fuera de la vista */
    background: var(--blue-dark); /* Asume que 'var(--blue-dark)' está definido */
    width: 100%; /* Ocupa el 80% del ancho del móvil */
    max-width: 100%; /* Opcional: limitar el ancho en tablets */
    height: 100dvh; /* Cubre toda la altura de la vista (dvh es mejor que vh) */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 9999; /* Asegurar que esté por encima de todo */
    overflow-y: auto; /* Permite scroll si el contenido es largo */
    transition: left 0.3s ease; /* Transición para el deslizamiento */
    background-color: var(--blue-dark);
}

/* Estado ABIERTO (Activado por JS con la clase menu-abierto) */
.bajo-nav.menu-abierto {
    left: 0; /* Mueve el menú a la vista */
}

/* ------------------------------------------------------------------ */
/* NAVEGACIÓN Y ACORDEÓN (CORREGIDO) */
/* ------------------------------------------------------------------ */
nav{
    width: 100%;
    top: 60px;
    left: 0;
    margin: 30px 0 0 0;
}

/* CORRECCIÓN CLAVE: Dejar que la lista se comporte normalmente (vertical) */
nav ul{
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    /* REGLAS ELIMINADAS: display: flex !important; y flex-direction: column !important; */
}

nav ul li a{
    padding: 8px 0  !important; /* Ajustado el padding para mejor toque */
    display: block;
    text-decoration: none;
    color: white;
    background-color: #333;
    border-bottom: 1px solid #444;
}

/* Estilo para los ítems principales con submenú */
.has-submenu > a {
    cursor: pointer;
    position: relative;
}

/* SUBMENÚS (ACORDEÓN) - El corazón de la animación */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* 1. Ocultar los submenús por defecto */
    max-height: 0;
    /* overflow: hidden; */
    
    /* 2. Transición fluida (animación) */
    transition: max-height 0.4s ease-in-out;
    background-color: transparent;
    width: 100%;
    /* position: unset; */
    left: 0;
    height: 0;
    overflow: hidden;
    transition: left 1s ease; /* Transición para el deslizamiento */
    border: none;
    position: relative;
    transition: all 0.4s ease;
    top: 0;
    box-sizing: border-box;
}

/* Estilo de los enlaces dentro del submenú */
.submenu a {
    padding: 5px 0 5px 15px!important; /* Pequeña indentación */
    background-color: transparent !important;
    border-top: none; /* Evitar doble línea */
}

/* 3. Clase que JavaScript añade para mostrar el submenú */
.submenu.active {
    /* CLAVE: Un valor grande, mayor que la altura de tu submenú más largo */
    max-height: 500px !important;
    /* position: relative; */
    /* left: 0; */
    margin-bottom: 20px;
    /* overflow: visible; */
    height: 220px;
    transition: left 1s ease; /* Transición para el deslizamiento */
    transition: all 0.4s ease;
}

/* Opcional: Indicador visual de si está abierto/cerrado (flecha) */
.has-submenu > a::after {
    content: '+';
    position: absolute;
    right: 15px;
    transition: transform 0.4s;
}
/* control por .open en el li y animación usando max-height */
#menu-acordeon .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease;
}

/* opcional: cuando el li tenga clase open, el submenu ya se expande vía JS */
#menu-acordeon li.open > .submenu {
  /* max-height se pone en JS con scrollHeight, esto solo sirve como fallback */
}
	.sub-empresa{
    height: 170px !important;
}
	.sub-servicios{
    height: 100px !important;
}
	.sub-tabla{
    height: 130px !important;
}
	.sub-links{
    height: 100px !important;
}

/* Nota: el selector ~a::after no funcionará con el HTML que tenemos.
   Usamos un selector más simple que funciona en los enlaces que activan el submenu.
   La clase active está en el UL, no en el A.
   Esto solo funcionará si pones el indicador de flecha dentro del <a> en HTML o usas JS.
   Dejo el selector original si tienes una estructura diferente:
*/
/* .has-submenu > .submenu.active ~ a::after {
    content: 'â–²';
    transform: rotate(180deg);
} */

/* ------------------------------------------------------------------ */
/* OTROS ESTILOS DE COMPONENTES (Mantenido de tu código) */
/* ------------------------------------------------------------------ */

.slider-txt .txt h1 {
    margin: 0 0 20px 0 !important;
}
	    .content {
        width: 92%;
    }
#certificaciones {
          background-position: right -60px;
          background-size: 60% auto;
}
.cert-ind {
    padding: 7%;
    flex-direction: column !important;
    display: flex;
    align-items: flex-start;
}
.cert-ind .cert-txt {
    padding: 26px 0;
}
.cert-ind img {
    width: 20%;
    margin: 0 0 0 0;
}
	.graf-ind{
		width: 66px;
		height: 120px;
	}
.about-graf {
          width: 70%;
        margin: 0px auto 60px;
}
	.graf-ind img {
    max-height: 170px !important;
    width: 100%;
}
	.graf-ind .graf-number{
    font-size: 190% !important;
    margin: 0 0 0px 0 !important;
}
.graf-ind .graf-txt{
    line-height: 100% !important;
    font-size: 70% !important;
    text-align: center;
}
.about p {
    text-align: left;
    width: 100%;
}
.servicios > p {
    width: 100%;
}
.serv-box {
    padding: 4%;
    
}
.serv-txt, .serv-img {
    width: 100% !important;
}
.serv-ind {
    opacity: 1;
    padding: 0;
    margin: 0 0 40px 0;
}
.serv-txt {
    display: flex;
    flex-direction: column;
}
.serv-img-item {
    position: relative !important;
    margin-bottom: 7%;
    display: block;
    opacity: 1;
}
.servicios > p {
    margin: 50px 0 30px !important;
}
.serv-ind:first-child {
    border-bottom:none;
}
#descanso {
    height: 270px;
    background-size: 180%;
    background-position: 20% 0;
}
.team-cont {
    padding: 0;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.5%;
}
#contacto {
    margin: 470px 0 0 0;
}
.slider-contacto {
    margin: 40px 0 40px 0;
}


#mapa {
    height: 350px;
    background-position: -300px -40px;
    background-size: 250%;
}
.clients h2 {
    text-align: initial;
}
.footer {
    width: 100%;
}
.footer-nav .row ul:first-child {
    display: none;
}

.logos {
    width: 120px !important;
    height: 120px !important;
}
.vhf h2, .vhf h4, .vhf p, .vhf p span{
    margin: 0 0 20px 0 !important;
}
.vhf h2:before{
    content: none;
}
.vhf p{
    width: 50%;
    float: left;
}

#contacto {
    background-color: #080722;
}

} /* Cierre de @media (max-width: 1200px) */


@media (max-width: 767px) {

.desktop{
    display: none !important;
}
.mobile{
    display: block !important;
}	
	.content {
    width: 88%;
}
.slider-txt {
    position: relative;
    top: 120px;
    left: 1%;
    width: 100%;
    margin: 0 0 120px 0;
    width: 100% !important;
}
	.slider-txt .txt {
    width: 100%;
    z-index: 9999;
    margin: 6% 0px 0px;
}
	.slider {
    height: 200px;
    margin: 150px 0 0 0;
}
	.about-graf {
    width: 100%;
    margin: 60px auto;
}
	    .serv-box {
        padding: 7%;
        flex-direction: column-reverse;
    }
	#certificaciones {
           background-position: right 70px;
        background-size: 100% auto;
}
	 .cert-cont {
        margin: 110px 0 0;
    }
	.cert-ind img {
    width: 50%;
    margin: 0 0 0 0;
}
.form-cols {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
}
	.col-2-2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    row-gap: 9%;
}	
	footer {
    background-position: -110px 0;
}
	   
	
	
} /* Cierre de @media (max-width: 767px) */