/* Cañas y Tapas — burbuja del menú (la caja redondeada, no toda la barra)
   con fondo dorado y letra negra, igual arriba del todo que ya fijada al
   hacer scroll. El selector con #header-sticky (el id real del bloque)
   gana en especificidad a las reglas .header-sticky.tp-header-9-sticky de
   main.css (la plantilla), así que valen igual antes y después de que el
   JS añada esa clase al hacer scroll. */

#header-sticky.tp-header-9-area {
  background: transparent;
}

#header-sticky .tp-header-9-box {
  margin-left: 90px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  #header-sticky .tp-header-9-box {
    margin-left: 0;
  }
}

#header-sticky .tp-header-9-menu > nav > ul {
  padding: 6px 10px;
  border-radius: 40px;
  background: var(--tp-common-yellow-green);
  border-color: var(--tp-common-yellow-green);
}

#header-sticky .tp-header-9-menu > nav > ul > li {
  padding: 8px 0;
}

#header-sticky .tp-header-9-menu > nav > ul > li > a {
  margin: 0;
  padding: 7px 23px;
  color: var(--tp-common-black);
}

#header-sticky .tp-header-9-menu > nav > ul > li > a:hover {
  color: var(--tp-common-black);
  background-color: rgba(23, 19, 16, 0.12);
}

#header-sticky .tp-header-9-btn .tp-btn-yellow-green {
  color: var(--tp-common-black-9);
  background-color: var(--tp-common-yellow-green);
}