/* ==========================================================================
   Billboard Media Kit — La activación de marca (/publicidad/activacion-de-marca/)
   Maqueta 1.8. HTML: includes/activacion.php (bbmk_act_html). Scope: .bbmk-act (el <main>) y
   .bbmk-act__foot (el pie del media kit, después de </main>).

   Tokens del shell (--bg --surf --surf2 --ink --muted --line --accent --accent-text):
   en modo oscuro dan los colores de la maqueta y en modo claro siguen el tema. Los dibujos
   (el navegador del hero, las miniaturas y las tarjetas de los casos) y la banda verde de la
   demo son siempre los de la maqueta.

   El shell fuerza color:var(--ink) !important sobre h1-h6, p y span (".bbz :where(...)",
   peso 0,1,0): cada texto de otro color lleva !important con peso 0,3,0.
   ========================================================================== */

.bbmk-act {
  --bbmk-soft: #b9b9c2;
  --bbmk-text2: #e4e4e9;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px) 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 88px;
  color: var(--ink);
  /* La maqueta no fija el interlineado (normal): sin esto se hereda el 1.45 del tema y cada renglón crece. */
  line-height: normal;
}
:root[data-theme="light"] .bbmk-act { --bbmk-soft: var(--muted); --bbmk-text2: var(--ink); }
.bbmk-act *, .bbmk-act *::before, .bbmk-act *::after { box-sizing: border-box; }
.bbmk-act ul { list-style: none; margin: 0; padding: 0; }
.bbmk-act li { margin: 0; }
.bbmk-act a:focus-visible { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 3px; }
/* El tema pone svg{fill:currentColor} (0,0,1): sin esto los íconos de trazo (fill="none": «Qué incluye», el rayo,
   los checks, las flechas) salen llenos. */
.bbmk-act svg[fill="none"] { fill: none; }

/* ---------- Hero del producto ---------- */

.bbmk-act__hero { padding-top: 28px; display: flex; flex-direction: column; gap: 28px; }
.bbmk-act__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bbz .bbmk-act .bbmk-act__crumb a { color: var(--muted); text-decoration: none; }
.bbz .bbmk-act .bbmk-act__crumb a:hover { color: var(--ink); }
.bbz .bbmk-act .bbmk-act__crumb span { color: var(--muted) !important; }
.bbz .bbmk-act .bbmk-act__crumb .bbmk-act__crumb-now { color: var(--ink) !important; }
.bbmk-act__top { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 48px; }
.bbmk-act__intro { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bbz .bbmk-act .bbmk-act__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 28 + el borde: la maqueta suma el borde de 1px al alto (content-box); acá todo es border-box. */
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-text, #00FF9A);
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text, #00FF9A) !important;
}
.bbz .bbmk-act .bbmk-act__title {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 8.4vw, 124px);
  line-height: .88;
  letter-spacing: .01em;
}
.bbz .bbmk-act .bbmk-act__accent { color: var(--accent-text, #00FF9A) !important; }
.bbz .bbmk-act .bbmk-act__dek { margin: 0; max-width: 540px; font-size: 22px; line-height: 1.4; color: var(--bbmk-text2) !important; }
.bbmk-act__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.bbz .bbmk-act .bbmk-act__btn {
  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;
}
.bbmk-act__btn:hover { transform: translateY(-2px); }
.bbz .bbmk-act .bbmk-act__btn--main { background: var(--accent, #00FF9A); color: #0a0a0c !important; }
.bbz .bbmk-act .bbmk-act__btn--line { height: 54px; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink) !important; }
.bbmk-act__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 16px 36px; padding-top: 8px; border-top: 1px solid var(--line); }
.bbmk-act__facts > div { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.bbmk-act__facts dt {
  font: 400 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bbmk-act__facts dd { margin: 0; font: 900 26px/normal 'Archivo', sans-serif; letter-spacing: -.02em; color: var(--ink); }

/* Los dibujos: un navegador con la dirección y una página esquemática (siempre oscuros). */
.bbmk-act__shot,
.bbmk-act__mini {
  background: #1d1d24;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.bbmk-act__shot { flex: 1 1 420px; min-width: 0; max-width: 560px; border-radius: 12px; }
.bbmk-act__mini { border-radius: 10px; }
.bbmk-act__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  background: #141418;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bbmk-act__bar--big { gap: 6px; height: 26px; padding: 0 10px; }
.bbz .bbmk-act .bbmk-act__bar-url {
  margin-left: 8px;
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
  color: #8b8b95 !important;
}
.bbmk-act__bar--big .bbmk-act__bar-url { letter-spacing: .06em; }
.bbmk-act__shot-page { background: #0a0a0c; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bbmk-act__mini-page { height: 200px; background: #0a0a0c; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bbmk-act__mini-page--row { flex-direction: row; gap: 10px; }

/* ---------- Secciones ---------- */

.bbmk-act__sec { display: flex; flex-direction: column; gap: 28px; }
.bbmk-act__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bbz .bbmk-act .bbmk-act__kicker {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text, #00FF9A) !important;
}
.bbz .bbmk-act .bbmk-act__h2 {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: .95;
  letter-spacing: .01em;
}
.bbz .bbmk-act .bbmk-act__lead { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--bbmk-soft) !important; }

/* 01 y 03: tarjetas de 300 o más. */
.bbmk-act__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bbmk-act__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surf);
}
.bbmk-act__card-top { display: flex; align-items: center; justify-content: space-between; }
.bbz .bbmk-act .bbmk-act__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--bg);
  color: var(--accent-text, #00FF9A) !important;
}
.bbz .bbmk-act .bbmk-act__num { font: 900 22px/1 'Archivo', sans-serif; color: var(--muted) !important; }
.bbz .bbmk-act .bbmk-act__h3 {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.bbz .bbmk-act .bbmk-act__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--bbmk-soft) !important; }
.bbz .bbmk-act .bbmk-act__text--strong { font-size: 16px; color: var(--bbmk-text2) !important; }

/* 02: tres miniaturas con su pie. */
.bbmk-act__places { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.bbmk-act__place { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bbmk-act__cap { display: flex; flex-direction: column; gap: 4px; }
/* El tema le pone a todo <figcaption> texto centrado, su letra (Poppins), su peso, su interlineado, borde, fondo y un
   margen arriba: el pie de la maqueta es texto de la página, a la izquierda y pegado a la miniatura. */
.bbz .bbmk-act .bbmk-act__cap {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 400 16px/normal 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: left;
  color: var(--ink);
}
.bbz .bbmk-act .bbmk-act__cap-t { font-size: 18px; font-weight: 600; }
.bbz .bbmk-act .bbmk-act__cap-d { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--bbmk-soft) !important; }

/* 03: la pill de cada etiqueta, con sus colores. */
.bbz .bbmk-act .bbmk-act__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0a0a0c !important;
}
.bbmk-act__pill--presentado { background: #00FF9A; }
.bbmk-act__pill--patrocinado { background: #FF2D87; }
.bbz .bbmk-act .bbmk-act__pill--publicidad { background: #7C3AED; color: #fff !important; }
.bbz .bbmk-act .bbmk-act__reads {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* 04: los planes, el más pedido con borde verde, y los extras. */
.bbmk-act__card--plan { padding: 26px 24px; gap: 16px; }
.bbmk-act__card--plan.is-top { position: relative; border: 2px solid var(--accent, #00FF9A); }
.bbmk-act__plan-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bbz .bbmk-act .bbmk-act__plan {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbz .bbmk-act .bbmk-act__best {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent, #00FF9A);
  font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0a0a0c !important;
}
.bbz .bbmk-act .bbmk-act__weeks { margin: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: 44px; line-height: .95; letter-spacing: 0; }
.bbmk-act__price-row { display: flex; align-items: baseline; gap: 8px; }
.bbz .bbmk-act .bbmk-act__price { font: 900 40px/normal 'Archivo', sans-serif; letter-spacing: -.03em; }
.bbz .bbmk-act .bbmk-act__iva { font-size: 14px; color: var(--muted) !important; }
.bbmk-act__checks {
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--bbmk-text2);
}
.bbmk-act__checks li { display: flex; align-items: flex-start; gap: 8px; }
.bbmk-act__checks svg { flex: 0 0 auto; margin-top: 3px; color: var(--accent-text, #00FF9A); }
.bbmk-act__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 16px 20px;
  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 12px;
}
.bbz .bbmk-act .bbmk-act__extras-t {
  font: 700 11px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbz .bbmk-act .bbmk-act__extra { font-size: 15px; color: var(--bbmk-text2) !important; }
.bbmk-act__extra strong { font-family: 'Archivo', sans-serif; font-weight: 900; }
.bbz .bbmk-act .bbmk-act__extras-note { margin-left: auto; font-size: 13px; color: var(--muted) !important; }

/* 05: la banda verde de la demo, con el círculo violeta y el cuadrado negro. */
.bbmk-act__demo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 18px;
  background: #00FF9A;
  color: #0a0a0c;
  scroll-margin-top: calc(var(--bbz-header-h, 80px) + 20px);
}
.bbmk-act__demo-circle { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: #7C3AED; right: -90px; top: -140px; }
.bbmk-act__demo-square { position: absolute; width: 80px; height: 80px; background: #0a0a0c; left: 52%; bottom: -44px; transform: rotate(18deg); }
.bbmk-act__demo-text { position: relative; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bbz .bbmk-act .bbmk-act__demo-kicker {
  font: 700 12px/1.3 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0a0a0c !important;
}
.bbz .bbmk-act .bbmk-act__demo-t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 6vw, 88px);
  line-height: .9;
  letter-spacing: .01em;
  color: #0a0a0c !important;
}
.bbz .bbmk-act .bbmk-act__demo-d { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.45; color: #0a0a0c !important; }
.bbmk-act__demo-go { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bbz .bbmk-act .bbmk-act__demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 34px;
  border-radius: 999px;
  background: #0a0a0c;
  color: #fff !important;
  font: 700 20px/1 'Space Grotesk', system-ui, sans-serif;
  text-decoration: none;
  transition: transform .15s;
}
.bbmk-act__demo-btn:hover { transform: translateY(-2px); }
.bbmk-act__demo a:focus-visible { outline-color: #0a0a0c; }
.bbz .bbmk-act .bbmk-act__demo-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: #0a0a0c;
  font: 400 12px/1 'JetBrains Mono', ui-monospace, monospace;
  color: #00FF9A !important;
}

/* 06: los casos, con la foto del hub o los grafismos de la marca, y solo las métricas reales. */
.bbmk-act__cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.bbmk-act__case { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--surf); }
.bbmk-act__case-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050505; }
.bbmk-act__case-media.is-plain { background: #1d1d24; }
.bbmk-act__case-media.is-plain::after { content: ""; position: absolute; right: 0; top: 0; width: 42%; height: 100%; background: #24242c; }
.bbmk-act__case-media > img:not(.bbmk-act__case-logo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bbmk-act__case-circle { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--bbmk-case-p, #00FF9A); right: -60px; top: -80px; }
.bbmk-act__case-square { position: absolute; width: 110px; height: 110px; background: var(--bbmk-case-s, #7C3AED); right: 150px; bottom: -60px; transform: rotate(14deg); }
.bbmk-act__case-logo { position: absolute; left: 16px; top: 16px; height: 24px; width: auto; max-width: 160px; object-fit: contain; }
.bbz .bbmk-act .bbmk-act__case-brand { z-index: 1; position: absolute; left: 16px; top: 16px; font: 900 22px/1 'Archivo', sans-serif; color: #fff !important; }
.bbmk-act__case-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bbz .bbmk-act .bbmk-act__case-meta {
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.bbz .bbmk-act .bbmk-act__case-t {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.bbmk-act__case-nums { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.bbmk-act__case-nums > div { display: flex; flex-direction: column; gap: 2px; }
.bbmk-act__case-nums dt {
  font: 400 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bbmk-act__case-nums dd { margin: 0; font: 900 24px/normal 'Archivo', sans-serif; color: var(--ink); }
.bbz .bbmk-act .bbmk-act__case-link { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--accent-text, #00FF9A); }

/* ---------- Cierre y pie del media kit ---------- */

.bbmk-act__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.bbz .bbmk-act .bbmk-act__close-t {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  line-height: .95;
}
/* El pie va después de </main> (fuera de .bbmk-act): el borde a todo el ancho y la columna de 1200 adentro. */
.bbmk-act__foot { border-top: 1px solid var(--line); color: var(--ink); line-height: normal; }
.bbmk-act__foot-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 40px);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bbmk-act__foot a:focus-visible { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 3px; }
.bbz .bbmk-act__foot .bbmk-act__logo { font: 900 22px/1 'Archivo', sans-serif; letter-spacing: -.04em; }
.bbmk-act__logo sup {
  margin-left: 2px;
  font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  color: var(--accent-text, #00FF9A);
}
.bbmk-act__foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.bbz .bbmk-act__foot .bbmk-act__foot-nav a { font-size: 13px; color: var(--muted); text-decoration: none; }
.bbz .bbmk-act__foot .bbmk-act__foot-nav a:hover { color: var(--ink); }
.bbz .bbmk-act__foot .bbmk-act__copy { font-size: 12px; color: var(--muted) !important; }

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .bbmk-act { gap: 56px; padding-bottom: 48px; }
  .bbmk-act__top { gap: 28px; }
  .bbmk-act__intro { flex-basis: 100%; gap: 18px; }
  .bbz .bbmk-act .bbmk-act__dek { font-size: 18px; }
  .bbz .bbmk-act .bbmk-act__btn { flex: 1 1 100%; }
  .bbmk-act__facts dd { font-size: 22px; }
  .bbmk-act__shot { flex-basis: 100%; }
  .bbmk-act__cards,
  .bbmk-act__places,
  .bbmk-act__cases { grid-template-columns: minmax(0, 1fr); }
  .bbz .bbmk-act .bbmk-act__extras-note { margin-left: 0; }
  .bbz .bbmk-act .bbmk-act__demo-btn { height: 56px; padding: 0 28px; font-size: 18px; }
  .bbmk-act__demo-circle { width: 170px; height: 170px; right: -70px; top: -100px; }
}

@media (prefers-reduced-motion: reduce) {
  .bbmk-act__btn, .bbmk-act__demo-btn { transition: none; }
  .bbmk-act__btn:hover, .bbmk-act__demo-btn:hover { transform: none; }
}