/* Contador */
#contador-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 60px;
    background: linear-gradient(90deg, #ffeb3b, #ff4081);
    color: white;
    display: flex;
        font-family: 'Montserrat', sans-serif!important;
    justify-content: center;
    align-items: center;
}

#contador-header div {
  text-align: center;
  font-weight: bold;
}

#contador-header span {
  font-size: 20px; /* número más pequeño */
  display: block;
  line-height: 1;   font-family: 'Montserrat', sans-serif!important;
}

#contador-header .unidad {
  font-size: 10px;
  font-weight: bold;
  margin-top: 2px; color:#FFFFFF;
}
/* Mostrar solo en móviles */
#contador-header-mobile {
  display: none;
}


/* Solo en pantallas móviles */
@media screen and (max-width: 768px) {
  #contador-header {
    display: none!important; /* Oculta el contador de escritorio */
  }

  #contador-header-mobile {
    position: fixed;
    top:0!important;
    display: flex!important;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-family: 'Montserrat', sans-serif!important;
    color: #fff;
    width: 100%;
    gap: 15px;
    z-index: 1000;
    height: 60px;
    background: linear-gradient(90deg, #ffeb3b, #ff4081);
  }

  .contador-mobile .etapa-label {
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .contador-mobile .bloques-contador {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    justify-content: space-around;
  }

  .contador-mobile .bloques-contador > div {
    min-width: 50px;
    text-align: center;
  }

  .contador-mobile span {
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 1;
  }

  .contador-mobile .unidad {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 2px;
    line-height: 1;
  }
}
/* Menú principal */
nav.menu-principal {
    background-color: #111111;
    color: white;
    padding: 5px 20px;
    position: fixed; /* Fijar debajo del contador */
    top: 60px; /* Ajusta según la altura de #contador-header */
    width: 100%;
    height: 60px;
    z-index: 999;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
}

.menu-principal .nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.menu-principal ul.menu-list {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0;
    margin: 0 auto; /* <-- centrado */
}

.menu-principal li {
    position: relative;
}

.menu-principal a {
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight:500;
}

/* Botón hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}
.menu-toggle span {
    height: 3px;
    width: 25px;
    background: white;
    display: block;
}
/* Overlay oscuro al abrir menú */
.mobile-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 98;
    display: none;
}
.mobile-menu {
    position: fixed;
    top: 60px; /* Empieza justo debajo del contador */
    left: -300px; /* se mueve cuando se abre */
    width: 270px;
    height: calc(100vh - 60px); /* ocupa el resto del alto menos el contador */
    background-color: #111;
    color: white;
    z-index: 999; /* asegúrate que esté sobre el contenido pero debajo del contador */
    transition: all 0.3s ease;
    padding: 20px;
    overflow-y: auto;
}
.mobile-menu.open {
    left: 0;
}

.mobile-overlay.show {
    display: block;
}

/* Estilo del menú */
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-menu ul li {
    margin: 15px 0;
}
.mobile-menu ul li a {
    color: white;
    text-decoration: none;
    display: block;
    font-weight: 600;
    font-size: 1rem;
}

/* Botón hamburguesa (estilo sugerido) */
/* Estilo general */
body.menu-open .menu-toggle {
    display: none !important;
}
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: transparent;
    border: none;
    z-index: 100;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

.menu-toggle-container {
    display: none;
    align-items: center;
    justify-content: space-between;
    /*padding: 10px 20px;*/
    width: 100%;
}

.mobile-logo img {
    height: 35px;
    max-width: 140px;
}

/* Solo visible en mobile */
@media (max-width: 768px) {
  .menu-toggle {
          display: flex;
          position: absolute;
          top: 20px;   /* Ajusta según la altura de tu header */
          left: 20px;  /* Alineación izquierda con padding */
      }

      .menu-list {
          display: none !important; /* Oculta menú horizontal */
      }

      .nav-container {
          position: relative;
      }

    .menu-toggle-container {
        display: flex;
    }
    .menu-toggle {
        position: static;
    }

    .menu-principal .menu-list {
        display: none !important;
    }
}
.menu-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  background-color: #111;
  height: 60px;
  position: fixed;
  top: 60px; /* justo debajo del contador */
  width: 100%;
  z-index: 1001;
}