/* Limita el máximo del área del contenedor del menú de navegación */
.container-menu{
  display: block;
  width:100%; max-width: 1110px;
  margin:0 auto;
}

/* Estilos basados en el menú para hacerlo sticky top cuando se hace scroll */
#menuSticky{
  background-color: #fff;
  z-index: 9999;
  transition: all ease 0.6s;
  top:-100px;
}
#menuSticky.fixed{
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Nuestro menú y su estructura base en el header */
nav.mainNav {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav.mainNav a.logoHeader {
  display:block;
  flex: 0 0 200px;
  margin-right: 10px;
}
nav.mainNav a.logoHeader img {
  display: block;
  width:100%;
}

/* Inicio menú 
====================================================================*/

/* Menú principal (horizontal) */
.areaMenuNav{
  position: relative;
  display: flex;
  flex: 1; /* se expande y ocupa el espacio sobrante */
  justify-content: flex-end; /* menú a la derecha */
}
ul.menu{
  position: relative;
  display: flex;
  flex: 1; /* se expande y ocupa el espacio sobrante */
  justify-content: flex-end; /* menú a la derecha */
  font-family: Manrope, serif;
  color: #303b41;
  font-size: 0.8em;
}
ul.menu > li > a{
  text-transform: uppercase;
  font-weight: bold;
  padding:12px !important;
}
/* Reset básico */
ul.menu, ul.drop-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.menu li{
  position: relative;
}
ul.menu > li > a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

/* Submenús ocultos por defecto */
ul.drop-menu {
  position: absolute;
  top: 100%; /* debajo del padre */
  left: 0;
  width: max-content;
  background: #fff;
  border: 1px solid #ccc;
  display: none; /* oculto */
  z-index: 1000;
}

ul.drop-menu li a {
  display: block;
  padding: 6px 18px 6px 12px;
  color: #333;
  text-decoration: none;
}

/* Submenú de segundo nivel (aparece a la derecha) */
ul.drop-menu ul.drop-menu {
  top: 0;
  left: 100%; /* alineado a la derecha del padre */
  border-left: 1px solid #ccc;
}

/* Mostrar submenús solo al hacer hover en su padre */
li.con-menu:hover > ul.drop-menu {
  display: block;
}

button.btnSearch{
  padding:10px 10px 6px 10px;
  font-size: 1.3em;
}


/* Transición de animación rollOver sobre el enlace */

ul.menu li.con-menu:hover{
  background-color: #f1f1f1;
}

ul.menu li.con-menu ul.drop-menu a{
  text-decoration: none;
  position: relative;          /* para controlar el ::before */
  transition: all 0.3s ease;   /* animación suave */
}
/* Pseudo-elemento (guion) oculto por defecto */
ul.menu li.con-menu ul.drop-menu a::before {
  content: "-";                 /* el guion */
  position: absolute;
  left: 0;                      /* se coloca a la izquierda */
  opacity: 0;                   /* oculto inicialmente */
  transform: translateX(-10px); /* lo sacamos un poco hacia la izquierda */
  transition: all 0.3s ease;
}
/* Al hacer hover en el link */
ul.menu li.con-menu ul.drop-menu a:hover {
  margin-left: 10px;           /* desplaza 10px el texto */
}
/* Mostrar el guion */
ul.menu li.con-menu ul.drop-menu a:hover::before {
  opacity: 1;
  transform: translateX(-5px); /* se acerca al texto */
}

ul.menu li.con-menu a i{
  position: absolute;
  right:8px; 
  top:12px;
  color:#aaa;
  font-size: 0.8em;
}

/* Estilos para cuando el window es menor al breakpoint y se considera tamaño pantalla móvil */

.areaLogoRD{
  display: none;
}
.hideNav{
  display: none;
}
.btnOpenRD{
  display: none;
  width:40px;
  height: auto;
  background: none;
  border:solid 1px #ccc;
  padding:4px 6px;
  margin-left: 14px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.btnOpenRD .line{
  margin:4px 0;
  width: auto; height: 4px;
  background-color: #333;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

/* Estilos del menú responsive
================================================================================ */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
  .hideNav{
    display: none;
  }
  .btnOpenRD{
    display: block;
  }
  .areaMenuNav{
    display: none;
    background-color: #fff;
    position: fixed;
    left:0; right:0; top:0; bottom:0;
    z-index: 9998;
    overflow-y:auto;
  }
  .areaMenuNav ul.menu{
    flex:none;
    display: block;
    width:250px;
    left:10%;
  }
  .areaMenuNav ul.menu li{
    display: block; clear:both;
    width:auto; height: auto;
  }
  .areaMenuNav ul.menu > li > a:hover ~ .drop-menu,
  .areaMenuNav ul.menu > li ul.drop-menu a:hover ~ .drop-menu{
    display: none;
  }
  .areaMenuNav ul.menu ul.drop-menu{
    position: relative;
    left: auto; top:auto;
    border:none;
    margin-left: 12px;
    width:auto;
  }
  ul.menu li.con-menu:hover{
    background:none;
  }

  .areaMenuNav h4{
    color:#666;
    font-size:1.3em;
    padding-top: 40px;
  }
  .areaLogoRD{
    display: block;
    position: absolute;
    right:80px; top:40px;
    width:auto; max-width: 150px;
  }
  .btnCloseRD{
    position: fixed;
    right:20px; top:30px;
    border:solid 1px #ccc;
    font-size:1.3em;
    padding:3px 10px;
    background:none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
}