/* ============================================================
   NINJA* (lafour_theme) — editorial.css
   Páginas estáticas de texto largo sobre hero jarallax (/us y
   equivalentes). Rejilla editorial: rail de viñetas + una sola
   columna de texto justificado, en lugar del apilado centrado
   de Bootstrap que traía el HTML migrado.

   Se ancla bajo .lafour-main / article para ganar en
   especificidad a las reglas de prosa de layout.css
   (.lafour-main p, .lafour-main h2…), sin recurrir a !important.

   OJO al acotar los selectores de párrafo: la regla del cuerpo
   va sobre .ninja-editorial__block p / __intro p, NO sobre
   .ninja-editorial p. Un selector genérico (0,2,1) le gana a las
   reglas de una sola clase como __cta u __outro-line (0,2,0) y
   les roba el tamaño y la alineación.
   ============================================================ */

.lafour-main .ninja-editorial,
article .ninja-editorial {
  max-width: 62rem;
  margin-inline: auto;
  text-align: left;
  color: var(--c-text);
}

/* ── Cabecera ────────────────────────────────────────────── */
.lafour-main .ninja-editorial__hero,
article .ninja-editorial__hero {
  padding-block-end: var(--space-6);
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-main .ninja-editorial__mark,
article .ninja-editorial__mark {
  width: 84px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-5);
}
.lafour-main .ninja-editorial__kicker,
article .ninja-editorial__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 var(--space-3);
}
.lafour-main .ninja-editorial__claim,
article .ninja-editorial__claim {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 var(--space-3);
  max-width: 22ch;
}
.lafour-main .ninja-editorial__brand,
article .ninja-editorial__brand {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

/* ── Bloques con viñeta ──────────────────────────────────── */
.lafour-main .ninja-editorial__block,
article .ninja-editorial__block {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0 var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-border);
}

/* Viñeta = marca NINJA* en rojo, vía la misma máscara SVG que los
   throbbers (--lafour-ninja-throbber-mask, definida en base.css).
   Sustituye a la numeración: no hay orden de importancia. */
.lafour-main .ninja-editorial__bullet,
article .ninja-editorial__bullet {
  display: block;
  width: 13px;
  height: 13px;
  margin-top: 0.45rem;
  background: var(--c-brand);
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lafour-main .ninja-editorial__h,
article .ninja-editorial__h {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

/* ── Cuerpo ──────────────────────────────────────────────── */
/* Bebas Neue: al no tener minúsculas rinde ópticamente más pequeña,
   de ahí el salto a --text-lg y el interlineado corto. */
.lafour-main .ninja-editorial__block p,
.lafour-main .ninja-editorial__intro p,
article .ninja-editorial__block p,
article .ninja-editorial__intro p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin: 0 0 var(--space-2);
  color: var(--c-text);
}
.lafour-main .ninja-editorial__block p:last-child,
.lafour-main .ninja-editorial__intro p:last-child,
article .ninja-editorial__block p:last-child,
article .ninja-editorial__intro p:last-child {
  margin-bottom: 0;
}
.lafour-main .ninja-editorial__lead,
article .ninja-editorial__lead {
  color: var(--c-muted);
}
.lafour-main .ninja-editorial strong,
article .ninja-editorial strong {
  font-weight: var(--weight-regular);
  color: var(--c-brand);
}

/* ── Lista de detalles (dos columnas, sin viñetas de Word) ─ */
.lafour-main .ninja-editorial__detail-list,
article .ninja-editorial__detail-list {
  columns: 2;
  column-gap: var(--space-8);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}
.lafour-main .ninja-editorial__detail-list li,
article .ninja-editorial__detail-list li {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  line-height: 1.6;
  break-inside: avoid;
  padding-left: var(--space-4);
  position: relative;
  color: var(--c-muted);
}
.lafour-main .ninja-editorial__detail-list li::before,
article .ninja-editorial__detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--c-brand);
}

/* ── Cierre ──────────────────────────────────────────────── */
.lafour-main .ninja-editorial__outro,
article .ninja-editorial__outro {
  padding-block: var(--space-8) 0;
  text-align: center;
}
.lafour-main .ninja-editorial__outro-kicker,
article .ninja-editorial__outro-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--space-3);
}
.lafour-main .ninja-editorial__outro-line,
article .ninja-editorial__outro-line {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
.lafour-main .ninja-editorial__outro-line--muted,
article .ninja-editorial__outro-line--muted {
  color: var(--c-dim);
}
.lafour-main .ninja-editorial__outro-line em,
article .ninja-editorial__outro-line em {
  font-style: normal;
  color: var(--c-brand);
}
.lafour-main .ninja-editorial__cta,
article .ninja-editorial__cta {
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .lafour-main .ninja-editorial__block,
  article .ninja-editorial__block {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    padding-block: var(--space-5);
  }
  .lafour-main .ninja-editorial__detail-list,
  article .ninja-editorial__detail-list {
    columns: 1;
  }
  /* Columnas estrechas: el justificado abre huecos feos. */
  .lafour-main .ninja-editorial__block p,
  .lafour-main .ninja-editorial__intro p,
  article .ninja-editorial__block p,
  article .ninja-editorial__intro p {
    text-align: left;
  }
}