/* =========================================================================
   Billboard AR · Activaciones — hub de marca (/<alias>/)
   Maquetas 1.3 (desktop) y 1.4 (mobile). Scope: .bbact (la página) y .bbact-*.
   Después de los módulos, las piezas que la activación pone en el resto del sitio
   (BBACT_Front): bloque de la home, franja y pie de la nota, franja de sección
   (maquetas 1.5 y 1.6).

   Colores de la marca: BBACT_Render imprime --bbact-primary, --bbact-secondary y
   --bbact-ink en el style de la página solo si están cargados; los que faltan
   caen a los del tema (--accent, --accent2, --accent-ink). El resto usa los
   tokens del shell (--bg --surf --surf2 --ink --muted --line) y sigue el modo
   claro/oscuro. La banda de marca es siempre oscura, como la maqueta.

   El shell fuerza color:var(--ink) !important sobre h1-h6, p y span
   (".bbz :where(...)", peso 0,1,0). Acá se le gana con un reset a "heredar"
   (0,2,0) y cada texto de otro color lleva !important con peso 0,3,0.
   ========================================================================= */

.bbact {
  --bbact-p: var(--bbact-primary, var(--accent));
  --bbact-s: var(--bbact-secondary, var(--accent2));
  --bbact-i: var(--bbact-ink, var(--accent-ink));
  --bbact-i2: var(--bbact-ink2, var(--accent-ink));
  /* Texto secundario de las maquetas (#b9b9c2 sobre oscuro); en modo claro, el apagado del tema. */
  --bbact-soft: #b9b9c2;
}
:root[data-theme="light"] .bbact { --bbact-soft: var(--muted); }
main.bbact { background: var(--bg); color: var(--ink); }
.bbz .bbact :where(h1, h2, h3, h4, p, span, li, time) { color: inherit !important; }
.bbact a { color: inherit; }
.bbact a:focus-visible { outline: 3px solid var(--bbact-p); outline-offset: 3px; }
/* El shell les saca el outline a todos los botones (".bbz button", 0,1,1): los del hub lo recuperan (0,3,1). El visor
   de la galería es un <dialog> colgado del body, fuera de .bbact y sin --bbact-p: anillo claro fijo sobre su negro. */
.bbz .bbact button:focus-visible { outline: 3px solid var(--bbact-p); outline-offset: 3px; }
.bbz .bbact-viewer button:focus-visible { outline: 3px solid #f5f5f7; outline-offset: 3px; }
/* El tema padre le pone margen a los <li>: las listas propias del hub van sin él. */
.bbz .bbact :is(.bbact-hero__chip, .bbact-date, .bbact-track, .bbact-gallery__item) { margin: 0; }
.bbact img { max-width: 100%; }
/* El tema pone svg{fill:currentColor} (0,0,1): sin esto los íconos de trazo (fill="none": flechas, «Abrir en
   Spotify», pausa) salen llenos. Los llenos (play) llevan fill="currentColor" y no cambian. */
.bbact svg[fill="none"] { fill: none; }

/* ---------- Áreas de marca: siempre oscuras, también en modo claro ----------
   La banda, el bloque de la home, la banda «Entradas» y el fondo propio llevan los tokens oscuros del shell
   fijos; los módulos siguen el tema. Con el fondo propio en toda la página (body.bbact-skin)
   la página entera queda oscura: el texto va encima del color de la marca. */

.bbact-home,
.bbact-top,
.bbact-cta,
.bbact-backdrop,
body.bbact-skin {
  --bg: #0a0a0c; --surf: #141418; --surf2: #1c1c22; --ink: #f5f5f7; --muted: #8b8b95;
  --line: rgba(255, 255, 255, .08); --accent-text: #00FF9A;
  --bbact-soft: #b9b9c2;
  color-scheme: dark;
}
/* En modo claro el texto secundario de los módulos pasa al apagado del tema (arriba, peso 0,3,0); en las áreas
   oscuras y en la página con fondo propio se queda en el de la maqueta. Mismo peso y después: gana esta. */
:root[data-theme="light"] :is(.bbact-home, .bbact-top, .bbact-cta, .bbact-backdrop),
:root[data-theme="light"] body.bbact-skin,
:root[data-theme="light"] body.bbact-skin .bbact { --bbact-soft: #b9b9c2; }

/* ---------- Página del hub: laterales de GAM y fondo propio ---------- */

/* Los laterales del tema son fijos debajo del header; en el hub arrancan 40 px debajo de la
   banda (assets/hub.js publica cuánto falta en --bbact-rail-push) y después quedan pegados. */
body.bbact-page .bbz-rail { top: calc(var(--bbz-header-h, 75px) + 16px + var(--bbz-top, 0px) + var(--bbact-rail-push, 0px)); }

/* Fondo propio en toda la página (y en las notas de la activación): una capa fija detrás de
   todo, hermana del header. El body queda transparente para que se vea; lo que tiene fondo
   propio (header, newsletter, footer) lo sigue tapando. */
body.bbact-skin { background: transparent !important; }
body.bbact-skin main.bbact { background: transparent; }
/* El shell elige el logo por el tema (en modo claro, el negro), pero con el fondo propio el header
   y el footer quedan oscuros: va el blanco. Peso 0,4,1 contra el 0,3,0 del shell. Lo demás que el
   shell cambia en modo claro (ícono del botón de tema, newsletter) tiene fondo propio o usa los tokens. */
:root[data-theme="light"] body.bbact-skin .bbz-logo__light { display: none !important; }
:root[data-theme="light"] body.bbact-skin .bbz-logo__dark { display: block !important; }
.bbact-backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--bbact-bg, #050505); pointer-events: none; }
.bbact-backdrop--page { position: fixed; z-index: -1; }
.bbact-backdrop__img,
.bbact-backdrop__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bbact-backdrop__img img { object-fit: cover; }
.bbact-backdrop--page .bbact-backdrop__img img { object-position: center top; }
.bbact-art { position: absolute; display: block; box-sizing: border-box; }
/* Halos de color de la marca, como la sección de Gonna Go. */
.bbact-backdrop__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 8% 30%, color-mix(in srgb, var(--bbact-p) 16%, transparent), transparent 60%),
    radial-gradient(50% 70% at 92% 15%, color-mix(in srgb, var(--bbact-s) 18%, transparent), transparent 60%),
    radial-gradient(45% 60% at 88% 85%, color-mix(in srgb, var(--bbact-p) 12%, transparent), transparent 60%);
}
/* Grafismos de la página: los de la banda de 1.3, quietos detrás de la columna. */
.bbact-backdrop--page .bbact-art { opacity: .55; }
.bbact-backdrop--page .bbact-art--1 { width: 560px; height: 560px; border-radius: 50%; background: var(--bbact-p); right: -180px; top: 20vh; }
.bbact-backdrop--page .bbact-art--2 { width: 240px; height: 240px; border-radius: 50%; border: 22px solid var(--bbact-bg, #050505); right: 40px; top: calc(20vh + 150px); }
.bbact-backdrop--page .bbact-art--3 { width: 280px; height: 280px; background: var(--bbact-s); left: -120px; bottom: -110px; transform: rotate(14deg); }
.bbact-backdrop--page .bbact-art--4 { width: 140px; height: 120px; background: var(--bbact-p); left: 6%; top: 30vh; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.bbact-backdrop--page .bbact-art--5 { width: 90px; height: 14px; background: var(--bbact-s); right: 12%; bottom: 12vh; }

/* ---------- Banda de marca (maqueta 1.3) ----------
   Fondo propio (BBACT_Render::backdrop): la imagen, o sin imagen los grafismos con los
   colores de la marca. Borde de abajo de un solo color. El logo va directo sobre el fondo:
   se carga el «para fondo oscuro». */

.bbact-hero {
  position: relative;
  overflow: hidden;
  background: var(--bbact-bg, #050505);
  color: #fff;
  border-bottom: 6px solid var(--bbact-p);
}
.bbact-backdrop--hero .bbact-backdrop__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, .9) 8%, rgba(5, 5, 5, .45) 65%, rgba(5, 5, 5, .25));
}
/* Grafismos de la banda: las cinco formas de la maqueta, con el principal y el secundario. */
.bbact-backdrop--hero .bbact-art--1 { width: 560px; height: 560px; border-radius: 50%; background: var(--bbact-p); right: -140px; top: -180px; }
.bbact-backdrop--hero .bbact-art--2 { width: 240px; height: 240px; border-radius: 50%; border: 22px solid var(--bbact-bg, #050505); right: 60px; top: 30px; }
.bbact-backdrop--hero .bbact-art--3 { width: 280px; height: 280px; background: var(--bbact-s); right: 300px; bottom: -130px; transform: rotate(14deg); }
.bbact-backdrop--hero .bbact-art--4 { width: 140px; height: 120px; background: var(--bbact-p); right: 540px; top: 70px; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.bbact-backdrop--hero .bbact-art--5 { width: 90px; height: 14px; background: var(--bbact-s); right: 120px; bottom: 90px; }
.bbact-hero__inner {
  position: relative;
  z-index: 2;
  /* Como la maqueta: 1280 de contenido más el aire (el tema pone todo border-box). */
  max-width: 1280px;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 64px 40px 76px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bbact-hero__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bbz .bbact .bbact-hero__tag {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9c9cf !important;
}
.bbact-hero__logo { display: inline-flex; align-items: center; text-decoration: none; }
.bbact-hero__logo-img { display: block; height: 30px; width: auto; max-width: 200px; object-fit: contain; }
.bbz .bbact .bbact-hero__brand {
  font: 900 30px/1 'Archivo', sans-serif;
  letter-spacing: -.02em;
  color: #fff !important;
}
.bbz .bbact .bbact-hero__t {
  margin: 0;
  max-width: 760px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 9.2vw, 132px);
  line-height: .9;
  letter-spacing: .01em;
  color: #fff !important;
}
.bbact-hero__line { display: block; }
.bbz .bbact .bbact-hero__accent { color: var(--bbact-p) !important; }
.bbz .bbact .bbact-hero__dek {
  margin: 0;
  max-width: 540px;
  font-size: 20px;
  line-height: 1.45;
  color: #e4e4e9 !important;
}
/* Lo que lleva borde de 1px mide 2px más que lo lleno: la maqueta suma el borde al alto (content-box). */
.bbact-hero__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bbz .bbact .bbact-hero__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bbz .bbact .bbact-hero__chip--principal { background: var(--bbact-p); color: var(--bbact-i) !important; }
.bbz .bbact .bbact-hero__chip--contorno { height: 30px; border: 1px solid rgba(255, 255, 255, .4); color: #fff !important; }
.bbz .bbact .bbact-hero__chip--secundario { background: var(--bbact-s); color: var(--bbact-i2) !important; }
.bbact-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.bbz .bbact .bbact-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font: 700 16px/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s;
}
.bbact-hero__cta:hover { transform: translateY(-2px); }
.bbz .bbact .bbact-hero__cta--main { background: var(--bbact-p); color: var(--bbact-i); }
.bbz .bbact .bbact-hero__cta--line { height: 54px; border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
/* Versión baja, la del archivo de notas: la franja y el título, más chico. */
.bbact-hero--compact .bbact-hero__inner { padding-top: 40px; padding-bottom: 44px; gap: 16px; }
.bbz .bbact .bbact-hero--compact .bbact-hero__t { font-size: clamp(48px, 6vw, 88px); }

/* ---------- Módulos ---------- */

/* Columna de 968 px de contenido (maqueta 1.3). Con los laterales, el tema angosta main a
   min(1280, 100vw − 464): el aire de los costados baja para que la columna siga en 968. */
.bbact-modules {
  max-width: 1024px;
  margin: 0 auto;
  padding: 40px 28px 72px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
html.bbz-has-skin body.bbact-page .bbact-modules { padding-left: 4px; padding-right: 4px; }
.bbact-mod { min-width: 0; }

/* Navegación entre módulos: debajo del 970×250, una pill por módulo; la del botón, llena. */
.bbact-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.bbz .bbact .bbact-nav__pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.bbz .bbact .bbact-nav__pill:hover { border-color: var(--bbact-p); }
.bbz .bbact .bbact-nav__pill--cta { height: 32px; border: 0; background: var(--bbact-p); color: var(--bbact-i); font-weight: 700; }

/* Encabezado de módulo: kicker numerado, título y, a la derecha, un link o el lugar. */
.bbact-mod__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.bbact-mod__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bbz .bbact .bbact-mod__kicker {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bbact-p) !important;
}
.bbact-mod__kicker-short { display: none; }
.bbz .bbact .bbact-mod__t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: 52px;
  line-height: .95;
  letter-spacing: .01em;
}
.bbz .bbact .bbact-mod__more {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: auto;
}
/* Fechas: sin borde (la lista trae el suyo arriba) y, a la derecha, el lugar del evento. */
.bbact-mod--fechas .bbact-mod__head { border-bottom: 0; margin-bottom: 12px; }

/* ---------- Etiqueta ---------- */

/* La pill de la etiqueta: arriba a la izquierda de la foto de la portada. */
.bbz .bbact .bbact-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bbact-p);
  color: var(--bbact-i) !important;
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Botón ---------- */

.bbz .bbact .bbact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--bbact-p);
  color: var(--bbact-i) !important;
  font: 700 16px/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s;
}
.bbact-btn:hover { transform: translateY(-2px); }
.bbz .bbact .bbact-btn--sm { gap: 8px; height: 44px; padding: 0 22px; font-size: 14px; }

/* ---------- Banda «Entradas» (el módulo botón, maqueta 1.3) ---------- */

.bbact-mod--boton { display: flex; flex-direction: column; }
.bbact-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px 40px;
  border-radius: 14px;
  background: var(--bbact-p);
  color: var(--bbact-i);
  --bbact-cta-ink: var(--bbact-i);
  --bbact-cta-dot: var(--bbact-s);
}
.bbact-cta--secundario { background: var(--bbact-s); color: var(--bbact-i2); --bbact-cta-ink: var(--bbact-i2); --bbact-cta-dot: var(--bbact-p); }
/* El anillo de foco del color de la banda no se vería: va en su tinta. */
.bbact-cta a:focus-visible { outline-color: var(--bbact-cta-ink); }
.bbact-cta__art { position: absolute; inset: 0; pointer-events: none; }
.bbact-cta__circle { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--bbact-cta-dot); right: -90px; top: -130px; }
.bbact-cta__square { position: absolute; width: 70px; height: 70px; background: var(--bbact-bg, #050505); left: 46%; bottom: -36px; transform: rotate(18deg); }
.bbact-cta__text { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bbz .bbact .bbact-cta__kicker {
  font: 700 12px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bbact-cta-ink) !important;
}
.bbz .bbact .bbact-cta__t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: 72px;
  line-height: .92;
  letter-spacing: .01em;
  color: var(--bbact-cta-ink) !important;
}
.bbz .bbact .bbact-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 72px !important;
  padding: 0 40px !important;
  border-radius: 999px !important;
  background: #050505 !important;
  color: #fff !important;
  font: 700 22px/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s;
}
.bbact-cta__btn:hover { transform: translateY(-2px); }

/* ---------- Cita destacada (el blockquote de la maqueta 1.6) ---------- */

.bbact-quote { margin: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--bbact-p); display: flex; flex-direction: column; gap: 10px; }
.bbact-quote__text { margin: 0; padding: 0; border: 0; }
.bbz .bbact .bbact-quote__text p {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .01em;
}
.bbz .bbact .bbact-quote__by {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* ---------- Mapa del predio ---------- */

.bbact-map { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bbact-map__link { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--surf2); }
.bbact-map__img { display: block; width: 100%; height: auto; }
.bbz .bbact .bbact-map__caption { font-size: 15px; line-height: 1.5; color: var(--bbact-soft) !important; }

/* ---------- Portada (maqueta 1.3) ---------- */

.bbact-cover { overflow: hidden; border-radius: 14px; background: var(--surf); border: 1px solid var(--line); }
.bbact-cover__frame { position: relative; height: 440px; overflow: hidden; background: var(--surf2); }
.bbact-cover__media { display: block; width: 100%; height: 100%; }
.bbact-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.bbact-cover__frame .bbact-chip { position: absolute; top: 16px; left: 16px; }
.bbact-cover__body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
/* «Portada · {categoría}» en el verde del sitio (en modo claro, el verde para texto del tema). */
.bbz .bbact .bbact-cover__kicker {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent)) !important;
}
.bbz .bbact .bbact-cover__t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: .95;
  letter-spacing: .01em;
  text-wrap: balance;
}
.bbact-cover__t a { text-decoration: none; }
.bbz .bbact .bbact-cover__dek { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.5; color: var(--bbact-soft) !important; }
.bbz .bbact .bbact-cover__meta {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* ---------- Notas (maqueta 1.3) ---------- */

.bbact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 20px; }
.bbact-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bbact-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--surf2); }
.bbact-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bbact-card:hover .bbact-card__media img { transform: scale(1.04); }
.bbact-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* La etiqueta de la tarjeta es un kicker de texto en el color de la marca (no una pill). */
.bbz .bbact .bbact-card__kicker {
  font: 700 10px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bbact-p) !important;
}
/* El tema fuerza Bebas en los h3: la maqueta pide Space Grotesk (vale también en la home y en «Más de…»). */
.bbz .bbact .bbact-card__t {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.bbact-card__t a { text-decoration: none; }
.bbact-card__t a:hover { text-decoration: underline; text-decoration-color: var(--bbact-p); text-underline-offset: 3px; }
.bbz .bbact .bbact-card__date {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
/* «Ver las N notas»: solo en mobile, debajo de las 3 primeras (maqueta 1.4). */
.bbact-notes-all { display: none; }
.bbz .bbact .bbact-notes-empty { margin: 0; font-size: 16px; color: var(--muted) !important; }
/* Paginador de /<alias>/notas/. */
.bbact-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 40px; }
.bbz .bbact .bbact-pager__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bbz .bbact .bbact-pager__now {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
/* El reel de GAM (maqueta 1.7): una tarjeta más de la grilla, la 3.ª, de dos filas de alto. */
.bbz .bbact .bbact-grid > .bbz-feedcard { grid-column: auto; grid-row: span 2; align-items: stretch; padding: 0; }
.bbz .bbact .bbact-grid > .bbz-feedcard .bbz-feedcard__frame { width: 100%; }
.bbz .bbact .bbact-grid > .bbz-feedcard .bbz-ad-label {
  font: 400 10px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Video y playlist ---------- */

.bbact-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--surf2); border: 1px solid var(--line); }
.bbact-embed__poster,
.bbact-embed iframe,
.bbact-embed__media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.bbact-embed__media { object-fit: contain; background: #000; }
.bbact-embed__poster { object-fit: cover; }
.bbact-embed--yt.is-playing { background: #000; }
.bbact-embed__player { display: none; }
/* El play de la portada: 96 px en el color principal (64 en mobile). El tema le pone estilos a los
   botones y links con !important: acá se le gana igual. */
.bbz .bbact .bbact-embed__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 96px !important;
  height: 96px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--bbact-p) !important;
  color: var(--bbact-i) !important;
  transition: transform .15s;
}
.bbz .bbact .bbact-embed__play svg { display: block; width: 36px; height: 36px; }
.bbz .bbact .bbact-embed__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.bbz .bbact .bbact-embed__time {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0a0a0c;
  color: #f5f5f7 !important;
  font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em;
}
.bbz .bbact .bbact-embed__caption { margin: 24px 0 0; max-width: 720px; font-size: 17px; line-height: 1.5; color: var(--bbact-soft) !important; }
.bbact-spotify { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--surf); }

/* Playlist propia (maqueta 1.3): tarjeta con la tapa, el título, «Abrir en Spotify» y los temas. */
.bbact-playlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head open" "list list";
  align-items: center;
  gap: 20px 18px;
  padding: 24px;
  border-radius: 14px;
  background: var(--surf);
  border: 1px solid var(--line);
}
.bbact-playlist__head { grid-area: head; display: flex; align-items: center; gap: 18px; min-width: 0; }
.bbact-playlist__cover {
  position: relative;
  flex: 0 0 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bbact-p);
}
.bbact-playlist__cover::after { content: ""; position: absolute; width: 60px; height: 60px; right: -20px; bottom: -20px; background: var(--bbact-s); transform: rotate(14deg); }
.bbact-playlist__cover:has(> img:not(.bbact-playlist__logo))::after { display: none; }
.bbact-playlist__cover > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.bbact-playlist__cover > .bbact-playlist__logo { width: 64%; height: 64%; object-fit: contain; }
.bbz .bbact .bbact-playlist__mark { position: relative; z-index: 1; font: 900 40px/1 'Archivo', sans-serif; color: var(--bbact-i) !important; }
.bbz .bbact .bbact-playlist__t { font-size: 44px; }
.bbz .bbact .bbact-playlist__sub { font-size: 14px; color: var(--muted) !important; }
.bbz .bbact .bbact-playlist__open {
  grid-area: open;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bbact-tracks { grid-area: list; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bbact-track {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
}
/* El tema que suena: fondo, número en el color principal y play lleno. */
.bbact-track.is-playing { background: color-mix(in srgb, var(--ink) 5%, transparent); }
/* Interlineado normal, como la maqueta: el tema hereda 1.45 y cada fila crecía 4 px. */
.bbz .bbact .bbact-track__n { font: 400 12px/normal 'JetBrains Mono', ui-monospace, monospace; color: var(--muted) !important; }
.bbz .bbact .bbact-track.is-playing .bbact-track__n { color: var(--bbact-p) !important; font-weight: 700; }
.bbz .bbact .bbact-track__play {
  display: grid;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent) !important;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer;
}
.bbz .bbact .bbact-track__play.is-off { opacity: .4; cursor: default; }
.bbz .bbact .bbact-track.is-playing .bbact-track__play { border: 0 !important; background: var(--bbact-p) !important; color: var(--bbact-i) !important; }
.bbact-track__icon-pause,
.bbact-track.is-playing .bbact-track__icon-play { display: none; }
.bbact-track.is-playing .bbact-track__icon-pause { display: block; }
.bbact-track__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bbz .bbact .bbact-track__t { font-size: 16px; font-weight: 600; line-height: normal; }
.bbz .bbact .bbact-track__a { font-size: 13px; line-height: normal; color: var(--muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbz .bbact .bbact-track__time { font: 400 12px/normal 'JetBrains Mono', ui-monospace, monospace; color: var(--muted) !important; }

/* ---------- Fechas (maqueta 1.3) ---------- */

.bbz .bbact .bbact-mod__venue {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbact-dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bbact-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.bbact-date__when { flex: 0 0 auto; min-width: 130px; display: flex; align-items: flex-end; gap: 10px; }
/* El tema padre hereda word-break:break-word: sin esto "28" y "NOV" se parten letra por letra. */
.bbz .bbact .bbact-date__when * { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.bbz .bbact .bbact-date__day { font: 900 76px/.85 'Archivo', sans-serif; letter-spacing: -.04em; }
.bbact-date__my { display: flex; flex-direction: column; gap: 2px; }
.bbz .bbact .bbact-date__mon,
.bbz .bbact .bbact-date__dow,
.bbz .bbact .bbact-date__sep { font: 700 11px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; }
.bbz .bbact .bbact-date__mon { color: var(--bbact-p) !important; }
.bbz .bbact .bbact-date__dow { color: var(--muted) !important; }
.bbact-date__sep { display: none; }
.bbact-date__place { flex: 0 0 170px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bbz .bbact .bbact-date__label {
  font: 400 10px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbz .bbact .bbact-date__stage { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 34px; line-height: .95; letter-spacing: .01em; }
.bbact-date__info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bbz .bbact .bbact-date__lineup { font-size: 19px; font-weight: 600; line-height: 1.35; }
.bbact-date__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bbz .bbact .bbact-date__time {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbz .bbact .bbact-date__badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #FF2D87;
  color: #0a0a0c !important;
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
}

/* ---------- Galería (maqueta 1.3) ---------- */

.bbact-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bbact-gallery__item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--surf2); }
/* De la 5.ª en adelante las muestra el visor; sin JS, el link «Ver las N fotos» va al ancla de la lista. */
.bbact-gallery__item.is-more { display: none; }
.bbact-gallery:target .bbact-gallery__item.is-more { display: block; }
.bbact-gallery__link { display: block; width: 100%; height: 100%; }
.bbact-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bbact-gallery__link:hover img { transform: scale(1.04); }
.bbact-gallery__all-short { display: none; }

/* Visor de fotos (hub.js lo arma como <dialog> al pie de la página). */
.bbact-viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 5, 5, .94); color: #f5f5f7; }
.bbact-viewer::backdrop { background: rgba(5, 5, 5, .7); }
.bbact-viewer__stage { position: absolute; inset: 56px 72px 48px; display: grid; place-items: center; }
.bbact-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.bbact-viewer__count { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font: 400 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; color: #8b8b95; }
.bbact-viewer .bbact-viewer__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 999px !important;
  background: #141418 !important;
  color: #f5f5f7 !important;
  font: 400 22px/1 'Space Grotesk', system-ui, sans-serif !important;
  cursor: pointer;
}
.bbact-viewer .bbact-viewer__btn--close { top: 12px; right: 12px; }
.bbact-viewer .bbact-viewer__btn--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.bbact-viewer .bbact-viewer__btn--next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Texto libre ---------- */

.bbact-prose { max-width: 720px; font-size: 17px; line-height: 1.6; }
.bbact-prose > * { margin: 0 0 1em; }
.bbact-prose > :last-child { margin-bottom: 0; }
.bbact-prose a { text-decoration: underline; text-decoration-color: var(--bbact-p); text-underline-offset: 3px; }

/* ---------- Alcohol (la caja de la maqueta 1.6) ----------
   Al pie del hub, debajo de cada video y de la banda «Entradas». Siempre clara sobre negro. */

.bbact-alcohol { max-width: 1024px; margin: 0 auto; padding: 0 28px 48px; }
.bbact-mod .bbact-alcohol { max-width: none; margin: 16px 0 0; padding: 0; }
.bbz .bbact .bbact-alcohol p {
  margin: 0;
  border: 2px solid #f5f5f7;
  border-radius: 6px;
  padding: 10px 12px;
  background: #0a0a0c;
  font: 700 11px/1.55 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f5f5f7 !important;
}

/* =========================================================================
   Integración con el sitio — maquetas 1.5 (home) y 1.6 (nota).
   Estos bloques viven en las páginas del tema (no dentro de main.bbact), así que
   cada uno lleva su propia clase .bbact: de ahí salen las variables de marca
   (--bbact-p/-s/-i) y el reset de color del shell. Las tarjetas reusan las del
   hub (.bbact-grid, .bbact-card).
   ========================================================================= */

/* Logo (o nombre) de la marca en la franja de sección: directo sobre el color, como en la banda del hub
   (el logo que se carga es el «para fondo oscuro»). */
.bbact-band__logo { display: inline-flex; align-items: center; text-decoration: none; }
.bbact-band__logo-img { display: block; height: 30px; width: auto; max-width: 180px; object-fit: contain; }

/* ---------- Bloque en la home (maqueta 1.5) ----------
   Una sección a todo el ancho con el fondo propio de la marca, como la de Gonna Go: el color, la
   imagen o los grafismos y los halos (BBACT_Render::backdrop). Siempre oscura, también en modo
   claro (ver «Áreas de marca»). Borde de arriba de un solo color (pisa el Ruling 19). */

.bbact-home {
  position: relative;
  overflow: hidden;
  margin: 24px 0;
  background: var(--bbact-bg, #050505);
  color: #fff;
  border-top: 6px solid var(--bbact-p);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Con imagen, un velo para que el texto se lea encima. */
.bbact-backdrop--home .bbact-backdrop__img::after { content: ""; position: absolute; inset: 0; background: rgba(5, 5, 5, .55); }
/* Grafismos del bloque: los cuatro de la maqueta, con el principal y el secundario. */
.bbact-backdrop--home .bbact-art--1 { width: 320px; height: 320px; border-radius: 50%; background: var(--bbact-p); right: -90px; top: -150px; }
.bbact-backdrop--home .bbact-art--2 { width: 150px; height: 150px; border-radius: 50%; border: 16px solid var(--bbact-bg, #050505); right: 20px; top: -30px; }
.bbact-backdrop--home .bbact-art--3 { width: 110px; height: 110px; background: var(--bbact-s); right: 250px; top: -50px; transform: rotate(14deg); }
.bbact-backdrop--home .bbact-art--4 { width: 160px; height: 160px; background: var(--bbact-s); left: -70px; bottom: -110px; transform: rotate(20deg); }
.bbact-backdrop--home .bbact-art--5 { display: none; }
.bbact-home__inner {
  position: relative;
  z-index: 1;
  /* 1280 de contenido como la maqueta (el tema pone border-box): en 1440, cinco columnas de 240. */
  max-width: 1280px;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 48px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Cabecera: logo grande, separador del color principal, título y bajada, y «Ver todo →». */
.bbact-home__head { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.bbact-home__mark { display: inline-flex; align-items: center; }
.bbact-home-mark__logo-img { display: block; height: 48px; width: auto; max-width: 240px; object-fit: contain; }
.bbz .bbact .bbact-home-mark__brand { font: 900 52px/1 'Archivo', sans-serif; letter-spacing: -.03em; color: #fff !important; }
.bbact-home__rule { flex: 0 0 auto; width: 3px; height: 72px; background: var(--bbact-p); }
.bbact-home__intro { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bbz .bbact .bbact-home__t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: .92;
  letter-spacing: .01em;
  color: #fff !important;
}
.bbz .bbact .bbact-home__dek { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.45; color: #d6d6dc !important; }
.bbz .bbact .bbact-home__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #f5f5f7;
  color: #050505;
  font: 700 15px/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s;
}
.bbact-home__all:hover { transform: translateY(-2px); }
.bbact-home a:focus-visible { outline-color: #f5f5f7; }
.bbact-home .bbact-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
/* Tarjetas de la home: la caja oscura, la foto sin radio propio, la categoría y el título; sin fecha. */
.bbz .bbact .bbact-card--home {
  gap: 12px;
  padding-bottom: 18px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #111115;
}
.bbact-card--home .bbact-card__media { position: relative; border-radius: 0; }
.bbact-card--home .bbact-card__body { padding: 0 16px; }
.bbz .bbact .bbact-card--home .bbact-card__t { font-size: 18px; text-wrap: wrap; color: #f5f5f7 !important; }
/* El play de una nota de video, al centro de la foto. Es un <span>: el color va con !important para ganarle al reset
   del hub (color: inherit) y quedar en la tinta de la marca sobre el color principal. */
.bbz .bbact .bbact-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--bbact-p);
  color: var(--bbact-i) !important;
}
/* Pie: la etiqueta del tipo con el logo de la marca y, a la derecha, billboard.ar/{alias}. */
.bbact-home__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.bbact-home__by { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bbz .bbact .bbact-home__tag {
  font: 700 10px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9c9cf !important;
}
.bbz .bbact .bbact-home__pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f5f5f7;
  color: #0a0a0c !important;
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
}
.bbact-home__logo { display: inline-flex; align-items: center; text-decoration: none; }
.bbact-home__logo-img { display: block; height: 17px; width: auto; max-width: 120px; object-fit: contain; }
.bbz .bbact .bbact-home__brand { font: 900 17px/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #fff !important; }
.bbz .bbact .bbact-home__url {
  font: 400 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  color: #f5f5f7;
  text-decoration: underline;
}

/* ---------- Franja de la nota (maqueta 1.6) ----------
   Una caja oscura con el borde del color del tipo (label edge): principal en patrocinado, el verde
   del sitio en presentado y claro en publicidad; la etiqueta sin el nombre (o la pill PUBLICIDAD), el
   logo en su chip y, a la derecha, «¿Qué es esto?». Va arriba del título (hoy, sobre la foto del hero
   del tema): siempre oscura. */

.bbact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 4px solid var(--bbact-p);
  border-radius: 10px;
  padding: 10px 16px;
  background: #141418;
}
.bbact-strip--principal { border-left-color: var(--bbact-p); }
.bbact-strip--verde { border-left-color: #00FF9A; }
.bbact-strip--claro { border-left-color: #f5f5f7; }
.bbz .bbact .bbact-strip__tag {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #f5f5f7 !important;
}
.bbz .bbact .bbact-strip__pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f5f5f7;
  color: #0a0a0c !important;
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
}
.bbz .bbact .bbact-strip__logo {
  display: inline-flex;
  align-items: center;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 6px 10px;
  text-decoration: none;
}
.bbact-strip__logo-img { display: block; height: 17px; width: auto; max-width: 140px; object-fit: contain; }
.bbz .bbact .bbact-strip__brand { font: 900 17px/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #fff !important; }
.bbz .bbact .bbact-strip__what {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #8b8b95;
  text-underline-offset: 3px;
}
.bbact-strip__what:hover { color: #f5f5f7; }

/* ---------- Pie de la nota: aviso de la etiqueta, alcohol y "Más de…" ----------
   Viven dentro de .bbz-nota__article, que le pone letra capital al primer <p>,
   márgenes a las imágenes, Bebas a los h2/h3 y color de acento a los links:
   acá se les gana con selectores más pesados. */

.bbact-after { display: flex; flex-direction: column; gap: 32px; margin: 40px 0 0; font-size: 16px; line-height: 1.5; }
:root .bbz .bbact.bbact-after p:first-of-type::first-letter {
  float: none;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}
/* El aviso al pie (maqueta 1.6): el ícono en el color principal, el texto, las reglas y el chip del logo. */
.bbact-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--surf);
}
/* La (i) es un <span>: mismo !important que el play para quedar en la tinta de la marca. */
.bbz .bbact .bbact-notice__icon {
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bbact-p);
  color: var(--bbact-i) !important;
}
.bbact-notice__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bbz .bbact .bbact-notice__t { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.bbz .bbact .bbact-notice__rules { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted) !important; }
:root .bbz .bbact.bbact-after .bbact-notice__rules a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bbact-notice__logo {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
}
.bbz .bbact .bbact-notice__logo-img { display: block; height: 15px; width: auto; max-width: 120px; margin: 0; border-radius: 0; object-fit: contain; }
.bbz .bbact .bbact-notice__brand { font: 900 15px/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #fff !important; }
.bbact-after .bbact-alcohol { max-width: none; margin: 0; padding: 0; }
.bbz .bbact.bbact-after .bbact-alcohol p { text-align: left; }
.bbact-home .bbact-alcohol { max-width: none; margin: 0; padding: 0; }
/* «Más de…» (maqueta 1.6): kicker billboard.ar/{alias}, título de 44 y tres tarjetas con el nombre corto. */
.bbact-after .bbact-mod__head { margin-bottom: 20px; padding-bottom: 14px; }
.bbz .bbact.bbact-after .bbact-mod__t { font-size: 44px; }
.bbact-more .bbact-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.bbact-card--more,
.bbact-card--more .bbact-card__body { gap: 10px; }
.bbz .bbact.bbact-after .bbact-card__t { margin: 0; font: 600 17px/1.3 'Space Grotesk', system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-wrap: wrap; }
.bbact-after .bbact-card__media img { height: 100%; margin: 0; border-radius: 0; }
:root .bbz .bbact.bbact-after .bbact-card a { color: inherit; text-decoration: none; }
:root .bbz .bbact.bbact-after .bbact-mod__more { color: inherit; text-decoration: underline; text-decoration-color: var(--bbact-p); }

/* ---------- Franja de una sección patrocinada ---------- */

.bbact-band { background: var(--bbact-p); color: var(--bbact-i); border-bottom: 3px solid var(--bbact-s); }
.bbact-band__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 28px;
  color: inherit;
  text-decoration: none;
}
.bbact-band__link:focus-visible { outline-color: var(--bbact-i); outline-offset: -3px; }
.bbz .bbact .bbact-band__tag {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bbact-i) !important;
}
.bbz .bbact .bbact-band__brand { font: 900 22px/1 'Archivo', sans-serif; letter-spacing: -.02em; color: var(--bbact-i) !important; }
/* La leyenda legal de una marca de alcohol, debajo del link y sobre el color de la marca. */
.bbact-band .bbact-alcohol { max-width: 1280px; margin: 0 auto; padding: 0 28px 10px; }
.bbz .bbact.bbact-band .bbact-alcohol p { padding: 0; border: 0; background: none; text-align: left; font-size: 10px; color: var(--bbact-i) !important; }
.bbz .bbact .bbact-band__cta {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--bbact-i) !important;
}

/* ---------- Integración: tablet y mobile ---------- */

@media (max-width: 880px) {
  .bbact-home__inner { padding: 40px 28px 32px; }
}

@media (max-width: 640px) {
  /* Bloque de la home: la misma composición, más chica; los grafismos se achican desde su esquina. */
  .bbact-home { margin: 16px 0; }
  .bbact-home__inner { padding: 32px 16px 24px; gap: 22px; }
  .bbact-home__head { gap: 16px 18px; }
  .bbact-home-mark__logo-img { height: 34px; }
  .bbz .bbact .bbact-home-mark__brand { font-size: 36px; }
  .bbact-home__rule { height: 44px; }
  .bbz .bbact .bbact-home__t { font-size: 40px; }
  .bbz .bbact .bbact-home__dek { font-size: 15px; }
  .bbz .bbact .bbact-home__all { width: 100%; justify-content: center; }
  .bbact-backdrop--home .bbact-art--1 { width: 180px; height: 180px; right: -60px; top: -100px; }
  .bbact-backdrop--home .bbact-art--2 { width: 90px; height: 90px; border-width: 10px; right: 8px; top: -26px; }
  .bbact-backdrop--home .bbact-art--3 { width: 60px; height: 60px; right: 150px; top: -30px; }
  .bbact-backdrop--home .bbact-art--4 { width: 100px; height: 100px; left: -50px; bottom: -70px; }
  /* Tarjetas: filas con la miniatura, como las notas del hub en 1.4, dentro de su caja. */
  .bbz .bbact .bbact-card--home { padding: 12px; }
  .bbact-card--home .bbact-card__media { border-radius: 8px; }
  .bbact-card--home .bbact-card__body { padding: 0; }
  .bbz .bbact .bbact-card--home .bbact-card__t { font-size: 15px; }
  .bbz .bbact .bbact-card__play { width: 32px; height: 32px; }
  .bbact-card__play svg { width: 14px; height: 14px; }
  .bbact-band__logo-img { height: 24px; }
  .bbz .bbact .bbact-band__brand { font-size: 18px; }

  .bbact-strip { gap: 8px 10px; margin-bottom: 12px; padding: 8px 12px; }
  .bbz .bbact .bbact-strip__tag { font-size: 10px; letter-spacing: .14em; }
  .bbz .bbact .bbact-strip__logo { padding: 4px 8px; }
  .bbact-strip__logo-img { height: 14px; }
  .bbz .bbact .bbact-strip__brand { font-size: 14px; }
  .bbz .bbact .bbact-strip__what { font-size: 12px; }
  .bbact-notice { gap: 12px; padding: 16px; }
  .bbz .bbact .bbact-notice__t { font-size: 16px; }

  .bbact-after { gap: 24px; margin-top: 28px; }
  .bbz .bbact.bbact-after .bbact-mod__t { font-size: 28px; }
  .bbact-more .bbact-grid { grid-template-columns: 1fr; gap: 16px; }

  .bbact-band__link { padding: 8px 16px; gap: 6px 12px; }
  .bbact-band .bbact-alcohol { padding: 0 16px 8px; }
  .bbz .bbact .bbact-band__tag { font-size: 10px; letter-spacing: .12em; }
  .bbz .bbact .bbact-band__cta { margin-left: 0; font-size: 13px; }
}

/* ---------- Tablet ---------- */

/* Entre la maqueta desktop y la mobile, los grafismos de la banda se achican desde su
   esquina para no quedar debajo de todo el título. */
@media (max-width: 1100px) and (min-width: 641px) {
  .bbact-backdrop--hero.is-art { transform: scale(.72); transform-origin: top right; }
}

@media (max-width: 880px) {
  .bbact-hero__inner { padding: 48px 28px 56px; }
  .bbact-modules { gap: 48px; }
  .bbz .bbact .bbact-cover__t { font-size: 48px; }
}

/* ---------- Mobile (maqueta 1.4) ---------- */

@media (max-width: 640px) {
  .bbact-hero { border-bottom-width: 5px; }
  /* El arte va en la franja de arriba (72 px) y el texto empieza 6 px más abajo. */
  .bbact-hero__inner { padding: 78px 16px 26px; gap: 12px; }
  .bbact-backdrop--hero.is-art { bottom: auto; height: 72px; }
  .bbact-backdrop--hero .bbact-art--1 { width: 180px; height: 180px; right: -40px; top: -100px; }
  .bbact-backdrop--hero .bbact-art--2 { width: 100px; height: 100px; border-width: 12px; right: 12px; top: -46px; }
  .bbact-backdrop--hero .bbact-art--3 { width: 60px; height: 60px; right: 176px; top: 20px; bottom: auto; }
  .bbact-backdrop--hero .bbact-art--4 { width: 50px; height: 44px; left: 16px; right: auto; top: 24px; }
  .bbact-backdrop--hero .bbact-art--5 { display: none; }
  .bbact-hero__strip { gap: 10px; }
  .bbz .bbact .bbact-hero__tag { font-size: 10px; }
  .bbact-hero__logo-img { height: 22px; }
  .bbz .bbact .bbact-hero__brand { font-size: 22px; }
  .bbz .bbact .bbact-hero__t { font-size: 64px; }
  .bbz .bbact .bbact-hero__dek { font-size: 16px; }
  .bbz .bbact .bbact-hero__chip { height: 26px; padding: 0 10px; font-size: 10px; letter-spacing: .14em; }
  .bbz .bbact .bbact-hero__chip--contorno { height: 28px; }
  .bbz .bbact .bbact-hero__chip:nth-child(n + 3) { display: none; }
  .bbact-hero__ctas { padding-top: 2px; }
  .bbz .bbact .bbact-hero__cta--line { display: none; }
  .bbz .bbact .bbact-hero__cta--main { width: 100%; height: 50px; }

  .bbact-modules { padding: 24px 16px 32px; gap: 32px; }
  /* La maqueta 1.4 no tiene la fila de navegación. */
  .bbact-nav { display: none; }
  .bbact-mod__head { gap: 10px; margin-bottom: 14px; padding-bottom: 10px; }
  .bbact-mod__titles { gap: 4px; }
  .bbz .bbact .bbact-mod__kicker { font-size: 10px; }
  .bbact-mod__kicker-long { display: none; }
  .bbact-mod__kicker-short { display: inline; }
  .bbz .bbact .bbact-mod__t { font-size: 32px; }
  .bbz .bbact .bbact-mod__more { font-size: 13px; }
  .bbact-mod--fechas .bbact-mod__head { margin-bottom: 4px; }

  .bbact-cover__frame { height: 190px; }
  .bbact-cover__frame .bbact-chip { top: 12px; left: 12px; }
  .bbz .bbact .bbact-chip { height: 22px; padding: 0 9px; letter-spacing: .16em; }
  .bbact-cover__body { padding: 16px 16px 18px; gap: 10px; }
  .bbz .bbact .bbact-cover__kicker { font-size: 10px; }
  .bbz .bbact .bbact-cover__t { font-size: 34px; }
  .bbz .bbact .bbact-cover__dek { display: none; }
  .bbz .bbact .bbact-cover__meta { font-size: 10px; }
  .bbact-cover__by,
  .bbact-cover__reading { display: none; }

  /* Notas: de tarjetas a filas con la miniatura a la izquierda, sin fecha. */
  .bbact-grid { grid-template-columns: 1fr; gap: 16px; }
  .bbact-card { flex-direction: row; align-items: flex-start; gap: 12px; }
  .bbact-card__media { flex: 0 0 104px; aspect-ratio: auto; height: 78px; border-radius: 10px; }
  .bbact-card__body { flex: 1; gap: 6px; }
  .bbz .bbact .bbact-card__kicker { letter-spacing: .14em; }
  .bbz .bbact .bbact-card__t { font-size: 15px; line-height: 1.3; }
  main.bbact .bbact-card__date { display: none; }
  /* Notas del hub: 3 filas y el botón a todas (el archivo /notas/ muestra las 12 de su página). */
  .bbact-modules:not(.bbact-modules--archive) .bbact-mod--notas .bbact-mod__more { display: none; }
  .bbact-mod--notas .bbact-grid > .bbact-card:nth-of-type(n + 4) { display: none; }
  .bbact-modules--archive .bbact-mod--notas .bbact-grid > .bbact-card:nth-of-type(n + 4) { display: flex; }
  /* El 970×250 de antes de la 7.ª tarjeta se va con ellas (si no, flota entre la 3.ª y el botón). */
  .bbact-modules:not(.bbact-modules--archive) .bbact-mod--notas .bbact-grid > .bbz-ad-slot--row { display: none; }
  .bbz .bbact .bbact-notes-all {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    margin-top: 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .bbact-hero--compact .bbact-hero__inner { padding-bottom: 22px; }
  .bbz .bbact .bbact-hero--compact .bbact-hero__t { font-size: 48px; }

  .bbact-mod--video .bbact-mod__head { margin-bottom: 12px; }
  .bbz .bbact .bbact-embed__play { width: 64px !important; height: 64px !important; }
  .bbz .bbact .bbact-embed__play svg { width: 24px; height: 24px; }
  /* La maqueta 1.4 no tiene «Más videos». */
  .bbact-mod--video .bbact-mod__more { display: none; }
  .bbz .bbact .bbact-embed__time { right: 12px; bottom: 8px; height: 22px; padding: 0 8px; font-size: 10px; }
  .bbz .bbact .bbact-embed__caption { margin-top: 12px; font-size: 14px; }

  /* Playlist (1.4): compacta, con «Abrir en Spotify» a todo el ancho abajo. */
  .bbact-playlist { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "open"; gap: 12px; padding: 16px; }
  .bbact-playlist__head { gap: 12px; }
  .bbact-playlist__cover { flex-basis: 64px; height: 64px; }
  .bbact-playlist__cover::after { width: 40px; height: 40px; right: -14px; bottom: -14px; }
  .bbz .bbact .bbact-playlist__mark { font-size: 28px; }
  .bbz .bbact .bbact-playlist__t { font-size: 28px; }
  .bbz .bbact .bbact-playlist__sub { font-size: 12px; }
  .bbz .bbact .bbact-playlist__open { width: 100%; }
  .bbact-track { grid-template-columns: 20px 34px minmax(0, 1fr) auto; gap: 10px; padding: 6px; }
  .bbz .bbact .bbact-track__play { width: 32px !important; height: 32px !important; }
  .bbact-track__play svg { width: 12px; height: 12px; }
  .bbact-track__text { gap: 0; }
  .bbz .bbact .bbact-track__t { font-size: 14px; }
  .bbz .bbact .bbact-track__a { font-size: 12px; }
  .bbz .bbact .bbact-track__n,
  .bbz .bbact .bbact-track__time { font-size: 11px; }
  .bbz .bbact .bbact-grid > .bbz-feedcard { grid-row: auto; align-items: center; }
  .bbz .bbact .bbact-grid > .bbz-feedcard .bbz-feedcard__frame { width: min(100%, 320px); }

  /* Fechas (1.4): columna de 66 con el día y «FEB · VIE»; a la derecha, el lugar y el botón chico
     arriba, el line-up y el badge debajo. Sin «Puertas» ni el lugar del evento. */
  .bbact-mod__venue { display: none; }
  .bbact-date {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    grid-template-areas: "when place btn" "when info info";
    align-items: start;
    gap: 8px 14px;
    padding: 16px 0;
  }
  .bbact-date__when { grid-area: when; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .bbz .bbact .bbact-date__day { font-size: 50px; }
  /* «FEB · VIE» en un renglón si entra; si no, «VIE» baja (maqueta 1.4). Cada palabra sigue entera (nowrap arriba). */
  .bbact-date__my { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .bbz .bbact .bbact-date__mon,
  .bbz .bbact .bbact-date__dow,
  .bbz .bbact .bbact-date__sep { font-size: 10px; letter-spacing: .14em; color: var(--bbact-p) !important; }
  .bbz .bbact .bbact-date__when .bbact-date__sep { display: inline; white-space: pre; }
  /* En línea («ESCENARIO NORTE»): sin flex, el espacio entre rótulo y valor se ve. */
  .bbact-date__place { grid-area: place; align-self: center; display: block; }
  .bbz .bbact .bbact-date__label,
  .bbz .bbact .bbact-date__stage { font: 400 10px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; }
  .bbact-date__info { grid-area: info; gap: 8px; }
  .bbz .bbact .bbact-date__lineup { font-size: 15px; }
  .bbact-date__time { display: none; }
  .bbz .bbact .bbact-date__badge { align-self: flex-start; letter-spacing: .16em; }
  .bbz .bbact .bbact-date .bbact-btn { grid-area: btn; height: 30px; padding: 0 12px; font-size: 12px; }
  .bbact-date .bbact-btn svg { display: none; }

  .bbact-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bbact-gallery__item { aspect-ratio: auto; height: 120px; }
  .bbact-gallery__all-long { display: none; }
  .bbact-gallery__all-short { display: inline; }
  .bbact-viewer__stage { inset: 56px 12px 48px; }
  .bbact-viewer .bbact-viewer__btn--prev,
  .bbact-viewer .bbact-viewer__btn--next { top: auto; bottom: 6px; transform: none; }
  /* Banda «Entradas» (1.4): en columna, título de 44 y botón de 56 a todo el ancho. */
  .bbact-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; }
  .bbact-cta__circle { width: 150px; height: 150px; right: -60px; top: -80px; }
  .bbact-cta__square { display: none; }
  .bbact-cta__text { gap: 12px; }
  .bbz .bbact .bbact-cta__kicker { font-size: 10px; letter-spacing: .16em; }
  .bbz .bbact .bbact-cta__t { font-size: 44px; }
  .bbz .bbact .bbact-cta__btn { width: 100%; height: 56px !important; padding: 0 20px !important; gap: 10px; font-size: 17px; }
  .bbact-cta__btn svg { width: 18px; height: 18px; }
  .bbz .bbact .bbact-quote__text p { font-size: 30px; }
  .bbact-alcohol { padding: 0 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .bbact-btn, .bbact-hero__cta, .bbact-cta__btn, .bbact-embed__play, .bbact-card__media img, .bbact-gallery__item img, .bbact-home__all { transition: none; }
  .bbact-btn:hover, .bbact-hero__cta:hover, .bbact-cta__btn:hover, .bbact-gallery__link:hover img, .bbact-home__all:hover { transform: none; }
  .bbz .bbact .bbact-embed__play:hover { transform: translate(-50%, -50%); }
  .bbact-card:hover .bbact-card__media img { transform: none; }
}