/* REF: UI-010 - Icono del botón VAPETECA del menú principal - 07/10/2026
 * Mismo patrón que .icon-tiendas (Porto › Custom CSS): máscara CSS pintada con
 * currentColor, para que herede el color del enlace (blanco/negro y hover), con el
 * SVG incrustado como data URI (la máscara exige CORS y el CDN no lo envía).
 * Icono: book-open, Lucide (licencia MIT), trazo 1.25 como el resto.
 */
.icon-vapeteca {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-bottom: -3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%207v14%22/%3E%3Cpath%20d=%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.25%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%207v14%22/%3E%3Cpath%20d=%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22/%3E%3C/svg%3E") no-repeat center / contain;
}

/* REF: UI-010 - El menú principal cabe en pantallas medianas - 07/10/2026
 * Con VAPETECA el menú mide ~1231 px (antes ~1097, que ya se salía por la izquierda
 * por debajo de ~1100 px). Por debajo de 1366 px se reducen márgenes, y entre 992 y
 * 1199 también letra y espaciado, para que quepa siempre en una línea. Por encima de
 * 1366 px no cambia nada. (Por debajo de 992 px Porto usa el menú móvil.)
 * «body» delante: un snippet fija el padding con !important y la misma especificidad. */
@media (min-width: 1280px) and (max-width: 1365px) {
  body #header .main-menu > li.menu-item > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  body #header .main-menu > li.menu-item > a {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body #header .main-menu > li.menu-item > a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 13px !important;
    letter-spacing: 0.6px !important;
  }
  body #header .main-menu > li.menu-item > a [class^="icon-"] {
    margin-right: 3px;
  }
}