/* ============================================================
   VIVO — "Seguimiento en tiempo real" broadcast spread.
   Anatomy unlike FRONT/DESCARGA: tall photo + a broadcast panel
   (scoreboard bar + run-in feed rows), then a full-width push
   "alerta" callout. Run-in bold lead-ins preserve PDF casing.
   ============================================================ */

.vivo {
  border-top: 1px solid var(--rule);
  padding-block: var(--rhythm);
}

.vivo__head { max-width: 46ch; }
.vivo__head h2 { margin-top: 1rem; }
.vivo__head .standfirst { margin-top: 1rem; }

.vivo__body {
  margin-top: clamp(34px, 4vw, 60px);
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(26px, 3.5vw, 56px);
  align-items: stretch;
}

.vivo__plate { display: flex; flex-direction: column; }
.vivo__plate img {
  flex: 1;
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 50% 30%;
  box-shadow: var(--shadow-plate);
}

/* broadcast panel */
.feed {
  border: 1px solid var(--rule-strong);
  background: var(--night-2);
  display: flex;
  flex-direction: column;
}

/* scoreboard bar */
.feed__bar {
  display: flex;
  align-items: center;
  gap: 0.8ch;
  padding: 0.8rem 1.2rem;
  background: var(--night-3);
  border-bottom: 2px solid var(--ember);
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.feed__live { display: inline-flex; align-items: center; gap: 0.7ch; color: var(--ember); font-weight: 600; }
.feed__live::before {
  content: "";
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-veil);
}
.feed__count { margin-left: auto; color: var(--ink-faint); letter-spacing: 0.18em; }

/* feed rows — run-in bold lead-ins (casing preserved from PDF) */
.feed__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.feed__row {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: start;
  padding: 1.15rem 1.2rem;
  border-top: 1px solid var(--rule);
}
.feed__row:first-child { border-top: 0; }
.feed__no {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding-top: 0.15em;
}
.feed__row p { margin: 0; color: var(--ink-soft); }
.feed__row b { color: var(--ink); font-weight: 700; }

/* push alerta — full-width callout, mark + body */
.alerta {
  margin-top: clamp(28px, 3.5vw, 52px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  border: 1px solid var(--ember-line);
}
.alerta__mark {
  display: flex;
  align-items: center;
  padding: 1.4rem 1.6rem;
  background: var(--ember);
  color: var(--night);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.alerta__body {
  padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.4rem, 2.6vw, 2.4rem);
}
.alerta__kicker {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
}
.alerta__body p { margin: 0.7rem 0 0; color: var(--ink-soft); max-width: 62ch; }
.alerta__body .ticket { margin-top: 1.3rem; }

/* ===== mobile ===== */
@media (max-width: 880px) {
  .vivo__body { grid-template-columns: 1fr; gap: clamp(24px, 7vw, 40px); }
  .vivo__plate { order: -1; }
  .vivo__plate img { min-height: clamp(260px, 60vw, 420px); }
  .vivo__head { max-width: none; }
}
@media (max-width: 520px) {
  .alerta { grid-template-columns: 1fr; }
  .alerta__mark {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0.8rem 1.2rem;
    justify-content: flex-start;
  }
  .feed__row { grid-template-columns: 2rem 1fr; padding-inline: 1rem; }
  .alerta__body .ticket { width: 100%; justify-content: center; }
}