/*  ------------------------------------------------------------------
    TIPOGRAFÍA Y VARIABLES
------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
    --gold-primary:#d4af37;
    --gold-light:#f7eabc;
    --gold-dark:#b8860b;
    --dark:#222;
    --light:#ffffff;
    --gray:#f6f6f6;
}

/*  ------------------------------------------------------------------
    RESET + FIX DESBORDAMIENTO
------------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}
html{scroll-behavior:smooth;overflow-x:clip;}     /* corta scroll horizontal */
body{background:var(--light);width:100%;overflow-x:hidden;}

/*  ------------------------------------------------------------------
    LAYOUT BÁSICO
------------------------------------------------------------------ */
.container{max-width:1200px;width:100%;margin:0 auto;padding:0 15px;}

/*  ------------------------------------------------------------------
    HEADER
------------------------------------------------------------------ */
.header{
    position:fixed;top:0;left:0;width:100%;
    background:transparent;box-shadow:none;z-index:1000;
    transition:all .3s ease;padding:10px 0;
}
.header.scrolled{
    background:rgba(255,255,255,.95);
    box-shadow:0 2px 10px rgba(0,0,0,.1);padding:5px 0;
}
.header-container{
    max-width:1200px;width:100%;margin:0 auto;padding:0 15px;
    display:flex;justify-content:space-between;align-items:center;
}
.logo{display:flex;align-items:center;text-decoration:none;}
.logo-img{height:60px;margin-right:8px;border-radius:20%;}
.logo-text{font-size:22px;font-weight:700;color:var(--light);}
.header.scrolled .logo-text{color:var(--dark);}
.logo-text span{color:var(--gold-primary);}

/* Navegación en desktop ------------------------------------------------ */
.nav-menu{display:flex;list-style:none;}
.nav-item{margin-left:25px;}
.nav-link{
    color:var(--light);text-decoration:none;font-weight:500;font-size:15px;
    position:relative;transition:color .3s ease;
}
.header.scrolled .nav-link{color:var(--dark);}
.nav-link:hover{color:var(--gold-primary);}
.header.scrolled .nav-link:hover{color:var(--gold-primary);}
.nav-link::after{
    content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
    background:var(--gold-primary);transition:width .3s ease;
}
.nav-link:hover::after{width:100%;}

/* Botón de cierre en off-canvas --------------------------------------- */
.close-menu{
    display:none;position:absolute;top:10px;right:15px;
    font-size:24px;padding:10px;cursor:pointer;color:var(--dark);z-index:1001;
}
.nav-menu.active .close-menu{display:block;}

/* Hamburguesa ---------------------------------------------------------- */
.hamburger{display:none;cursor:pointer;z-index:1001;background:none;border:none;padding:10px;}
.bar{width:25px;height:3px;margin:5px auto;background:var(--light);transition:all .3s ease;}
.header.scrolled .bar{background:var(--dark);}

/*  ------------------------------------------------------------------
    DROPDOWN -- NUEVO LOOK
------------------------------------------------------------------ */
.dropdown{position:relative;}
/* --- Desktop --- */
.dropdown .submenu{
    position:absolute;left:0;top:110%;min-width:230px;list-style:none;
    background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:8px;
    padding:.5rem 0;box-shadow:0 8px 25px rgba(0,0,0,.08);
    transform-origin:top;transform:scaleY(0);opacity:0;
    transition:transform .25s ease,opacity .25s ease;z-index:999;
}
.dropdown:hover .submenu{transform:scaleY(1);opacity:1;}
.dropdown>.submenu::before{
    content:'';position:absolute;top:-6px;left:28px;width:10px;height:10px;
    background:#fff;border-left:1px solid rgba(0,0,0,.06);
    border-top:1px solid rgba(0,0,0,.06);transform:rotate(45deg);
}
.submenu li a{
    display:block;padding:.55rem 1.2rem;font-size:.9rem;
    color:var(--dark);white-space:nowrap;transition:background .2s,color .2s;
}
.submenu li a:hover{background:var(--gray);color:var(--gold-primary);}

/* --- Móvil (≤991 px) -------------------------------------------------- */
@media (max-width:991px){
    .dropdown .submenu{
        position:static;background:transparent;border:none;box-shadow:none;
        padding:0;transform:none;opacity:1;
        max-height:0;overflow:hidden;transition:max-height .35s ease;
    }
    .dropdown.open .submenu{max-height:500px;}
    .submenu li a{
        width:90%;margin:6px auto;background:var(--gray);
        border-radius:6px;padding:12px 18px;font-size:15px;
    }
    .submenu li a:hover{background:rgba(212,175,55,.12);}
    .dropdown>.submenu::before{display:none;}
    .dropdown-toggle::after{content:'▸';margin-left:6px;transition:transform .3s;}
    .dropdown.open .dropdown-toggle::after{transform:rotate(90deg);}
}

/*  ------------------------------------------------------------------
    HERO
------------------------------------------------------------------ */
.hero{
    width:100%;height:60vh;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
              url('Imagenes/fondohiru.jpg') center/cover no-repeat;
    display:flex;align-items:center;justify-content:center;text-align:center;color:var(--light);
}
.hero-content{max-width:800px;width:90%;padding:0 15px;opacity:0;
    transform:translateY(50px);animation:fadeInUp 1s forwards .5s;}
.hero-title{
    font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:20px;
    background:linear-gradient(to right,var(--gold-light),var(--gold-primary),var(--gold-dark));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 10px rgba(0,0,0,.2);
}
.hero-subtitle{font-size:clamp(14px,2.5vw,18px);margin-bottom:25px;}
.btn{
    display:inline-block;padding:12px 25px;border-radius:50px;
    background:var(--gold-primary);color:var(--light);border:2px solid var(--gold-primary);
    font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;
}
.btn:hover{background:transparent;color:var(--gold-primary);transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(212,175,55,.3);}

/*  ------------------------------------------------------------------
    CONTACT SECTION
------------------------------------------------------------------ */
.contact{padding:80px 0;background:var(--light);}
.section-title{
    font-size:clamp(28px,4vw,36px);font-weight:700;text-align:center;
    margin-bottom:40px;color:var(--dark);position:relative;
}
.section-title::after{
    content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
    width:80px;height:3px;background:var(--gold-primary);
}
.contact-container{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;}
.contact-info{flex:1;min-width:280px;padding-right:15px;opacity:0;transform:translateX(-30px);}
.contact-info.animate{animation:fadeInLeft .8s forwards;}
.contact-form{flex:1;min-width:280px;opacity:0;transform:translateX(30px);}
.contact-form.animate{animation:fadeInRight .8s forwards;}
.contact-title{font-size:28px;font-weight:600;margin-bottom:15px;color:var(--dark);}
.contact-text{font-size:15px;line-height:1.7;margin-bottom:25px;color:#555;}
.contact-details{list-style:none;margin-bottom:25px;}
.contact-details li{display:flex;align-items:center;margin-bottom:12px;font-size:15px;color:#555;}
.contact-details i{
    width:35px;height:35px;border-radius:50%;background:var(--gold-light);color:var(--gold-primary);
    display:flex;align-items:center;justify-content:center;margin-right:12px;
}
.social-links{display:flex;}
.social-link{
    width:35px;height:35px;border-radius:50%;background:var(--gold-light);color:var(--gold-primary);
    display:flex;align-items:center;justify-content:center;margin-right:8px;text-decoration:none;
    transition:all .3s ease;
}
.social-link:hover{background:var(--gold-primary);color:var(--light);transform:translateY(-5px);}
.form-group{margin-bottom:15px;}
.form-control{
    width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:15px;color:var(--dark);
    transition:all .3s ease;
}
.form-control:focus{border-color:var(--gold-primary);box-shadow:0 0 10px rgba(212,175,55,.2);outline:none;}
textarea.form-control{min-height:120px;resize:vertical;}
.btn-submit{
    padding:12px 25px;border:none;border-radius:50px;
    background:var(--gold-primary);color:var(--light);
    font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:1px;
    cursor:pointer;transition:all .3s ease;
}
.btn-submit:hover{background:var(--gold-dark);transform:translateY(-5px);box-shadow:0 10px 20px rgba(212,175,55,.3);}
.contact-map{text-align:center;margin-top:30px;}
.map-image{width:100%;max-width:500px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.1);}

/*  ------------------------------------------------------------------
    FOOTER
------------------------------------------------------------------ */
.footer{background:var(--dark);padding:40px 0 0;color:var(--light);position:relative;}
.footer::before{
    content:'';position:absolute;top:0;left:0;width:100%;height:5px;
    background:linear-gradient(to right,var(--gold-dark),var(--gold-primary),var(--gold-light),var(--gold-primary),var(--gold-dark));
}
.footer-container{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
}
.footer-logo .logo-text{font-size:22px;font-weight:700;}
.footer-logo .logo-text span{color:var(--gold-primary);}
.footer-text{max-width:280px;font-size:13px;line-height:1.7;color:#999;margin-bottom:15px;}
.footer-title{font-size:18px;font-weight:600;margin-bottom:15px;color:var(--light);}
.footer-menu{list-style:none;}
.footer-menu li{margin-bottom:8px;}
.footer-menu a{color:#999;text-decoration:none;font-size:13px;transition:all .3s ease;}
.footer-menu a:hover{color:var(--gold-primary);padding-left:5px;}
.newsletter-form{display:flex;}
.newsletter-input{
    flex:1;padding:10px 12px;background:#333;border:none;color:var(--light);
    font-size:13px;border-radius:5px 0 0 5px;
}
.newsletter-btn{
    background:var(--gold-primary);color:var(--light);border:none;
    padding:0 15px;border-radius:0 5px 5px 0;cursor:pointer;transition:all .3s ease;
}
.newsletter-btn:hover{background:var(--gold-dark);}
.copyright{
    text-align:center;padding:15px 0;margin-top:20px;
    font-size:13px;color:#888;border-top:1px solid #333;
}
.copyright .highlight{color:var(--gold-primary);font-weight:700;}

/*  ------------------------------------------------------------------
    BACK-TO-TOP
------------------------------------------------------------------ */
.back-to-top{
    position:fixed;bottom:15px;right:15px;z-index:999;
    width:45px;height:45px;border-radius:50%;background:var(--gold-primary);color:var(--light);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:all .3s ease;
}
.back-to-top.active{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--gold-dark);transform:translateY(-5px);}

/*  ------------------------------------------------------------------
    ANIMACIONES KEYFRAMES
------------------------------------------------------------------ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-50px);}to{opacity:1;transform:none;}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:none;}}

/*  ------------------------------------------------------------------
    RESPONSIVE EXTRAS
------------------------------------------------------------------ */
@media (max-width:991px){
    .contact-info,.contact-form{flex:100%;padding-right:0;text-align:center;}
    .contact-info{margin-bottom:30px;}
    .contact-details,.social-links{justify-content:center;}
}

@media (max-width:768px){
    /* Icono hamburguesa */
    .hamburger{display:block;}
    .hamburger.active .bar:nth-child(2){opacity:0;}
    .hamburger.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .hamburger.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

    /* Off-canvas navigation */
    .nav-menu{
        position:fixed;inset:0;width:100vw;height:100vh;background:var(--light);
        display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
        padding:60px 0;transform:translateX(100%);transition:transform .35s ease;
        box-shadow:0 10px 20px rgba(0,0,0,.1);z-index:1000;
    }
    .nav-menu.active{transform:translateX(0);}
    .nav-item{margin:15px 0;}
    .nav-link{color:var(--dark);font-size:16px;}
    .nav-link:hover{color:var(--gold-primary);}
    .close-menu{display:block;}

    .hero{height:50vh;}
    .footer-container{grid-template-columns:1fr;text-align:center;}
    .footer-logo,.footer-links,.footer-newsletter{margin-bottom:20px;}
    .social-links{justify-content:center;}
}

@media (max-width:576px){
    .logo-img{height:50px;}
    .logo-text{font-size:18px;}
    .hero{height:40vh;}
    .hero-title{font-size:clamp(24px,6vw,32px);}
    .hero-subtitle{font-size:clamp(12px,3vw,16px);}
    .btn{padding:10px 20px;font-size:14px;}
    .contact{padding:60px 0;}
    .section-title{font-size:clamp(24px,3.5vw,30px);}
    .form-control{padding:10px;font-size:14px;}
    .btn-submit{padding:10px 20px;font-size:14px;}
    .map-image{max-width:100%;}
}
/* Corrección para el menú hamburguesa */
.hamburger {
  display: none;  /* Por defecto oculto en desktop */
  cursor: pointer;
  z-index: 1001;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  width: 25px;
  height: 3px;
  margin: 5px auto;
  display: block;  /* Asegurarse que los elementos bar se muestren correctamente */
  background: var(--light);  /* Color claro para el modo normal */
  transition: all .3s ease;
}

.header.scrolled .bar {
  background: var(--dark);  /* Color oscuro cuando la cabecera hace scroll */
}

/* Aumentar la especificidad y asegurar que la hamburguesa aparezca en móvil */
@media (max-width: 991px) {
  .hamburger {
      display: block !important;  /* Forzar la visualización en móvil */
      position: relative;
      z-index: 1002;  /* Asegurar que esté por encima de otros elementos */
  }
  
  /* Animación de hamburguesa a X */
  .hamburger.active .bar:nth-child(2) {
      opacity: 0;
  }
  
  .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }
}

/* Corrección para la línea vertical en menú móvil */
@media (max-width: 991px) {
  /* Eliminar la línea vertical en la navegación móvil */
  .nav-menu {
      background-image: none !important;
  }
  
  /* Revisar si hay una línea después de cada elemento de navegación */
  .nav-link::after {
      display: none !important;
  }
  
  /* Caso específico - la línea vertical podría ser un pseudo-elemento */
  .nav-item::before,
  .nav-item::after {
      display: none !important;
  }
  
  /* Eliminar cualquier borde que pueda estar causando la línea */
  .nav-item, 
  .nav-link {
      border: none !important;
  }
  
  /* En caso de que sea un div o span decorativo */
  .nav-menu .vertical-line,
  .nav-menu > li > a > .line {
      display: none !important;
  }
  
  /* Solución específica para el submenú */
  .dropdown-toggle::after {
      content: "▾" !important; /* Solo mostrar el símbolo, no una línea */
      border: none !important;
      background: none !important;
      width: auto !important;
      height: auto !important;
      position: static !important;
  }
}

/* Mejora del submenú en pantallas móviles */
@media (max-width: 991px) {
  /* Contenedor del submenú mejorado */
  .dropdown .submenu {
    position: static;
    width: 90%;
    max-width: 300px;
    text-align: center;
    margin: 5px auto 15px;
    padding: 5px 0;
    background: var(--gray);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
  }
  
  /* Animación de entrada suave */
  .dropdown.open .submenu {
    animation: slideDown 0.4s ease-in-out;
  }
  
  /* Ajuste de elementos del submenú */
  .dropdown .submenu li {
    margin: 0;
    transition: background-color 0.2s;
  }
  
  /* Aumentar el espaciado vertical para todos los ítems de navegación en móvil */
@media (max-width: 991px) {
  .nav-menu li,
  .nav-menu .nav-item,
  .nav-link,
  .hamburger-menu li,
  .mobile-menu li {
    padding: 15px 0 !important;
    margin: 5px 0 !important;
  }
  
  /* Espaciado extra para "Pruebas Radiológicas" específicamente */
  .nav-menu a[href*="radiologicas"],
  .nav-menu a:contains("Radiológicas"),
  .nav-menu li:nth-child(3),
  .nav-menu li:nth-child(3) a,
  a:contains("Pruebas Radiológicas"),
  li:contains("Pruebas Radiológicas"),
  li a:contains("Pruebas Radiológicas") {
    padding: 25px 0 !important;
    margin: 10px 0 !important;
  }
}
  
  /* Estilo mejorado de los enlaces del submenú */
  .dropdown .submenu li a {
    padding: 12px 15px;
    display: block;
    font-size: 15px;
    width: 100%;
    margin: 0;
    border-radius: 0;
    color: var(--dark);
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: all 0.2s ease;
  }
  
  /* Último elemento sin borde inferior */
  .dropdown .submenu li:last-child a {
    border-bottom: none;
  }
  
  /* Efecto hover mejorado */
  .dropdown .submenu li a:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-primary);
    transform: translateX(3px);
  }
  
  /* Indicador visual para desplegar el submenú */
  .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dropdown-toggle::after {
    content: "▾";
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    transition: transform 0.3s;
    color: var(--gold-primary);
  }
  
  .dropdown.open .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  
  /* Destacar el ítem activo */
  .dropdown.open .dropdown-toggle {
    color: var(--gold-primary);
  }
}

/* Animación para la apertura del submenú */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 400px;
  }
}

/* Eliminar el rectángulo gris antes de abrir el submenú */
@media (max-width: 991px) {
  /* Ocultar el submenú por defecto */
  .dropdown .submenu {
    display: none;
    background: transparent; /* Asegurar que no haya fondo visible cuando está cerrado */
  }
  
  /* Mostrar el submenú solo cuando está abierto */
  .dropdown.open .submenu {
    display: block;
    background: var(--gray); /* Aplicar el fondo gris solo cuando está abierto */
  }
  
  /* Eliminar cualquier espacio o elemento que pueda estar causando el rectángulo */
  .dropdown-toggle::before,
  .dropdown::before,
  .dropdown::after {
    display: none !important;
  }
  
  /* Asegurar que no haya elementos visibles antes del despliegue */
  .dropdown {
    background: transparent !important;
  }
  
  /* Revisar si hay algún pseudo-elemento que cause el rectángulo */
  .nav-item.dropdown::before,
  .nav-item.dropdown::after {
    content: none !important;
  }
  
  /* Eliminar cualquier padding o margen que pueda estar causando espacio gris */
  .dropdown {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Ajustar la animación para que no muestre nada antes de comenzar */
  @keyframes slideDown {
    0% {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
      visibility: hidden;
    }
    1% {
      visibility: visible;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      max-height: 400px;
      visibility: visible;
    }
  }
}
@media (max-width: 991px) {
  /* Selector específico para el elemento Pruebas Radiológicas */
  .nav-item.dropdown {
    padding: 5px 0 !important;
    margin: 5px 0 !important;
  }
  
  /* Si quieres que el enlace dentro también tenga más espacio */
  .nav-item.dropdown > .nav-link.dropdown-toggle {
    padding: 10px 0 !important;
  }
}
/* Correcciones para permitir scroll en el menú móvil y mejorar submenu */

/* 1. Fix para permitir scroll en el menú móvil */
@media (max-width: 991px) {
  /* Asegurar que el menú móvil permita scroll */
  .nav-menu {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      background: var(--light);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 60px;
      transform: translateX(100%);
      transition: transform .35s ease;
      box-shadow: 0 10px 20px rgba(0,0,0,.1);
      z-index: 1000;
      overflow-y: auto !important; /* Forzar scroll vertical */
      overflow-x: hidden;
      justify-content: flex-start; /* Cambiar a flex-start para que el contenido empiece desde arriba */
  }

  /* Posicionar la X correctamente (fijo) */
  .hamburger.active,
  .close-menu {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1060;
  }

  /* Eliminar la línea animada debajo de los enlaces */
  .nav-link::after {
      display: none !important;
      content: none !important;
  }

  /* 2. Mejorar manejo del submenu */
  .dropdown .submenu {
      display: none; /* Ocultar completamente por defecto */
      position: static;
      width: 90%;
      max-width: 300px;
      margin: 5px auto;
      background: var(--gray);
      border-radius: 10px;
      box-shadow: 0 3px 8px rgba(0,0,0,.05);
      opacity: 1;
      visibility: visible;
      transform: none;
  }
  
  /* Mostrar submenu solo cuando tiene la clase open */
  .dropdown.open .submenu {
      display: block;
      animation: slideDown .4s ease;
  }
  
  /* 3. Mejorar espaciado para los elementos del menú */
  .nav-item {
      margin: 10px 0 !important;
      width: 80%;
      text-align: center;
  }
  
  .nav-link {
      display: block;
      padding: 10px 0 !important;
      font-size: 16px;
      color: var(--dark);
  }
  
  /* 4. Asegurar que solo el dropdown tenga flecha y esté bien estilizada */
  .dropdown-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .dropdown-toggle::after {
      content: '▾';
      margin-left: 8px;
      font-size: 14px;
      color: var(--gold-primary);
      transform: none !important;
      transition: transform 0.3s;
  }
  
  .dropdown.open .dropdown-toggle::after {
      transform: rotate(180deg) !important;
  }
  
  /* 5. Estilos para los elementos dentro del submenu */
  .dropdown .submenu li {
      margin: 0 !important;
  }
  
  .dropdown .submenu li a {
      display: block;
      width: 100%;
      padding: 12px 15px !important;
      font-size: 15px;
      color: var(--dark);
      border-bottom: 1px solid rgba(0,0,0,.03);
      transition: all .2s;
  }
  
  .dropdown .submenu li:last-child a {
      border-bottom: none;
  }
  
  .dropdown .submenu li a:hover {
      background: rgba(212,175,55,.15);
      color: var(--gold-primary);
      transform: translateX(3px);
  }
}

/* Animación para el submenú */
@keyframes slideDown {
  0% {
      opacity: 0;
      transform: translateY(-10px);
      max-height: 0;
  }
  100% {
      opacity: 1;
      transform: translateY(0);
      max-height: 400px;
  }
}
/* Corrección para la posición de la X de cierre */

/* Posicionamiento fijo y absoluto para la X */
.hamburger.active,
.close-menu {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1100 !important; /* Valor muy alto para que esté por encima de todo */
    display: block !important;
}

/* Estilos específicos para la X si es un carácter de texto */
.close-menu {
    font-size: 24px !important;
    font-weight: bold !important;
    color: var(--dark) !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 50% !important;
}

/* Si la X está formada por las barras del hamburger */
.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
    background-color: var(--dark) !important;
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0 !important;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
    background-color: var(--dark) !important;
}

/* Eliminar cualquier otra X que pueda estar apareciendo en el menú */
.nav-menu > *:first-child:not(.nav-item),
.nav-menu::before,
.nav-menu .x-icon,
.nav-menu > x,
.nav-menu > .close-icon {
    display: none !important;
}

/* Ajustar el menú para que tenga espacio en la parte superior para la X */
@media (max-width: 991px) {
    .nav-menu {
        padding-top: 70px !important; /* Dar espacio para la X */
    }
    
    /* Ocultar cualquier elemento que podría estar generando una X extra */
    .nav-menu > *:not(.nav-item):not(.dropdown) {
        display: none !important;
    }
    
    /* Asegurarse de que el primer elemento no es una X */
    .nav-menu > *:first-child:not(.nav-item):not(.dropdown) {
        display: none !important;
    }
}