/* ==========================================================================
   View: Campaña - the page shell of the four-stage route (SPEC 2.3, 3.2): the route card (strip on a phone and a
   tablet, sticky column from 1100px), the stage header and the stage footer. Owned by S0.
   The content of each stage lives in css/view-campana-{equipo,llamada,contactos,lanzar}.css (slices S2 to S5).
   Tokens only.
   ========================================================================== */
.campana { display: grid; gap: var(--sp-5); }
.campana__route .card { padding: 4px 8px 6px; }
@media (min-width: 1100px) {
  .campana { grid-template-columns: 292px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .campana__route { position: sticky; top: calc(var(--appbar-h) + 20px); }
  .campana__route .card { padding: 14px 10px; }
  .route--auto { grid-template-columns: 1fr; }
  .route--auto .route__link { grid-template-columns: 36px 1fr auto; justify-items: stretch; text-align: left; gap: 14px; padding: 10px 12px 10px 4px; }
  .route--auto .route__value { display: block; }
  .route--auto .route__go { display: block; }
  .route--auto .route__step::before { left: 21px; right: auto; top: 50%; width: 2px; height: 100%; }
  .route--auto .route__title { font-size: var(--fs-md); }
}
.stage { display: grid; gap: var(--sp-5); align-content: start; }
.stage-head { display: grid; gap: 6px; }
.stage-head h1 { font-size: var(--fs-2xl); letter-spacing: -.03em; }
.stage-head .lead { color: var(--muted); font-size: var(--fs-lg); max-width: 60ch; }
.stage-head__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (min-width: 1100px) { .stage-head h1 { font-size: var(--fs-3xl); } }
.stage-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1100px) { .stage-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.stage-nav { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }
.stage-nav__row { display: flex; gap: var(--sp-3); justify-content: space-between; }
.stage-nav__row .btn--primary, .stage-nav__row .btn--secondary { flex: 1 1 240px; min-width: 0; }
.stage-nav__row .btn--ghost { flex: 0 0 auto; }
/* phone: the two buttons share the row and use the small size, as the prototype did below 420px (the only extra breakpoint is gone) */
@media (max-width: 760px) { .stage-nav__row .btn--primary, .stage-nav__row .btn--secondary { flex: 1 1 0; font-size: var(--fs-sm); } }