/* =========================================================
   LifeStrategics · Brand Source (páginas /brand-source/*)
   Hero de capas de grafito con contorno light trail.
   Usa tokens de config.css. Se carga después de service-page.css.
   ========================================================= */

/* Capas de grafito (mismo lenguaje que los visuales del blog) */
.bs-top   { fill: #262626 }
.bs-left  { fill: #1c1c1c }
.bs-right { fill: #141414 }
.bs-grid  { stroke: rgba(240,236,228,.07); stroke-width: .5 }
.bs-edge  { fill: none; stroke: rgba(240,236,228,.42); stroke-width: .8; stroke-linejoin: round }
.bs-label { fill: var(--muted); font-family: var(--ls-font-sans); font-size: 8.5px; letter-spacing: .04em }
.bs-lead  { stroke: rgba(240,236,228,.22); stroke-width: .7 }

/* Contorno base (el light trail va en .bs-trail-css, al final) */
.bs-contour { fill: none; stroke: rgba(240,236,228,.10); stroke-width: 1.2; stroke-linejoin: round }

/* Cable a la IA */
.bs-cable  { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round }
.bs-bubble { fill: #202020; stroke: rgba(240,236,228,.42); stroke-width: .8 }
.bs-wave   { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round }

/* Tarjetas de camino con enlace */
.bs-path-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--text);
  font-weight: var(--w-600);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 2px;
}
.bs-path-link:hover { border-bottom-color: var(--blue) }

/* Filtro de tres preguntas */
.bs-check { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px }
.bs-check li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted) }
.bs-check li::before { content: ''; flex: 0 0 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: var(--blue) }
.bs-route { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; align-items: center }

/* Rejillas con menos tarjetas que columnas (evita celdas vacías) */
@media (min-width: 821px) {
  .fit-grid.bs-two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 821px) {
  .value-grid.bs-three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 820px) {
  .value-grid.bs-three { grid-template-columns: 1fr; gap: 14px; background: transparent; border-bottom: 0 }
}
@media (max-width: 540px) { .bs-label { font-size: 11px } }

.hero .hero-copy p.bs-hero-note { margin-top: 14px; font-size: var(--fs-helper) !important; color: var(--muted2) }

/* Contorno con la misma técnica que .ls-trail de los botones:
   tres degradados cónicos (azul, amarillo, rojo) que giran a 8, 12 y 17 s,
   recortados con una máscara al contorno de las capas. */
.hero-viz { position: relative }
.bs-trail-css {
  position: absolute; inset: 0; pointer-events: none;
  background:
    conic-gradient(from var(--ls-spin-1) at 50% 53.6%, transparent 0%, var(--ls-blue)   15%, transparent 35%),
    conic-gradient(from var(--ls-spin-2) at 50% 53.6%, transparent 0%, var(--ls-yellow) 15%, transparent 35%),
    conic-gradient(from var(--ls-spin-3) at 50% 53.6%, transparent 0%, var(--ls-red)    15%, transparent 35%);
  animation: ls-spin-1 8s linear infinite, ls-spin-2 12s linear infinite, ls-spin-3 17s linear infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 236'%3E%3Cpath d='M160 30 L236 62 L236 191 L160 223 L84 191 L84 62 Z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 236'%3E%3Cpath d='M160 30 L236 62 L236 191 L160 223 L84 191 L84 62 Z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) { .bs-trail-css { animation: none } }