/* REF: FEAT-002 - Green Station como sección de vapestation.pe (opción B) - Diego - 19/10/2026 */

/* ---------- Barra de marcas (todas las páginas) ---------- */
nav.vs-marcas.vs-marcas {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  padding: 0 45px;
  background: #0b0b0b;
  border-bottom: 1px solid #262626;
  font-family: "Nunito", sans-serif;
}
nav.vs-marcas .vs-marcas__tabs { display: flex; }
nav.vs-marcas .vs-marcas__tab {
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-bottom: 3px solid transparent;
  opacity: .5;
  transition: opacity .15s ease, background-color .15s ease;
}
nav.vs-marcas .vs-marcas__tab:hover,
nav.vs-marcas .vs-marcas__tab:focus-visible { opacity: .85; }
nav.vs-marcas .vs-marcas__tab img { display: block; width: auto !important; max-width: none; height: 15px !important; }
nav.vs-marcas .vs-marcas__tab--green img { height: 19px !important; }
nav.vs-marcas .vs-marcas__tab.is-activa { opacity: 1; background: #1c1c1c; }
nav.vs-marcas .vs-marcas__tab--vape.is-activa { border-bottom-color: #ff3232; }
nav.vs-marcas .vs-marcas__tab--green.is-activa { border-bottom-color: #6cde01; }
nav.vs-marcas .vs-marcas__nota { align-self: center; color: #8d8d8d; font-size: 12px; }

@media (max-width: 767px) {
  nav.vs-marcas.vs-marcas { padding: 0; min-height: 34px; }
  nav.vs-marcas .vs-marcas__tabs { flex: 1; }
  nav.vs-marcas .vs-marcas__tab { flex: 1; justify-content: center; padding: 0 8px; }
  nav.vs-marcas .vs-marcas__tab img { height: 12px !important; }
  nav.vs-marcas .vs-marcas__tab--green img { height: 16px !important; }
  nav.vs-marcas .vs-marcas__nota { display: none; }
}

/* La sección Green usa el CSS de greenstation.pe (assets/css/greenstation/green-*.css). */

/* ---------- Portada /greenstation/ ---------- */
.vs-gs-portada { max-width: 1320px; margin: 0 auto 40px; padding: 0 16px; font-family: "Nunito", sans-serif; }
.vs-gs-portada > .wp-block-group__inner-container > * + * { margin-top: 28px; }
.vs-gs-banner { margin: 28px 0 0; }
.vs-gs-banner img { display: block; width: 100%; height: auto; border-radius: 6px; }
.vs-gs-solo-movil { display: none; }
@media (max-width: 767px) {
  .vs-gs-solo-escritorio { display: none; }
  .vs-gs-solo-movil { display: block; }
}
.vs-gs-categorias { gap: 16px; }
.vs-gs-categorias img { display: block; width: 100%; height: auto; border-radius: 8px; transition: transform .15s ease; }
.vs-gs-categorias a:hover img,
.vs-gs-categorias a:focus-visible img { transform: translateY(-2px); }
.vs-gs-portada .vs-gs-antetitulo + .vs-gs-titulo { margin-top: 0; }
.vs-gs-blog.wp-block-latest-posts { padding: 0; }
.vs-gs-blog li { list-style: none; }
.vs-gs-blog .wp-block-latest-posts__featured-image img { width: 100%; height: auto; border-radius: 6px; }
.vs-gs-blog .wp-block-latest-posts__post-title { display: block; margin-top: 8px; color: #111; font-weight: 700; }
.vs-gs-portada .vs-gs-titulo {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
}
.vs-gs-portada .vs-gs-antetitulo {
  margin: 0 0 4px;
  color: #3f8f00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.vs-gs-hero img { display: block; width: 100%; height: auto; }
.vs-gs-categorias .wp-block-column { position: relative; }
.vs-gs-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 22px 12px;
  border-radius: 10px;
  background: #0b0b0b;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vs-gs-cat:hover,
.vs-gs-cat:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--vs-green-lima, #6cde01); }
.vs-gs-cat img { width: 64px; height: 64px; object-fit: contain; }
.vs-gs-aviso {
  padding: 14px 18px;
  background: #f1f3f5;
  color: #444;
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}