/* START-1 · /start, «Start here»: cinco paradas numeradas, «If you came for…» y un cierre. Sólo lo que esta página usa, con los `--sf-*` de
   `/design-system.css`; la base (bandas, kicker, tarjeta) es `sitio-interior.css`. La cabecera, el pie y el salto son del marco.
   A 390 el primer pliegue lleva el h1, la bajada y la parada 1 ENTERA (número, título, línea, «You will see…», miniatura y «Go»): por eso
   la banda de las paradas arranca pegada a la introducción y la tarjeta es de una sola columna, con el botón después de la miniatura. */

.sf-pag-start .band.st-intro{padding:20px 0 0}
.sf-pag-start .st-intro .wrap{display:block}
.sf-pag-start .st-intro h1{max-width:20ch;text-wrap:balance}
.sf-pag-start .band.st-paradas{padding:20px 0 56px}
.sf-pag-start .st-lista{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.sf-pag-start .st-parada{margin:0}

.sf-pag-start .st-card{display:grid;gap:10px;padding:18px}
.sf-pag-start .st-cab{display:flex;align-items:center;gap:12px}
.sf-pag-start .st-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--sf-brand-50);color:var(--sf-acc-700);font-weight:800;font-size:var(--sf-fs-17-5);line-height:1}
.sf-pag-start .st-cab h2{font-size:var(--sf-fs-19-5);font-weight:800;line-height:1.15}
.sf-pag-start .st-linea{color:var(--sf-ink);font-weight:600;font-size:var(--sf-fs-15)}
.sf-pag-start .st-ver{color:var(--sf-mut);font-size:var(--sf-fs-15)}
.sf-pag-start .st-mini{display:block;width:100%;height:auto;margin:2px 0;border:1px solid var(--sf-line);border-radius:var(--sf-r-l);background:var(--sf-soft)}
.sf-pag-start .st-ir{justify-self:start;min-width:96px;min-height:44px}
/* «Go» en el primario del SITIO (el violeta de «Try the sandbox» de la v134: el token `--sf-brand`), no en el `--brand` que el tema de la
   instalación puede pisar: la página es del sitio y la marca es una sola. */
.sf-pag-start .sf-btn.sf-principal.st-ir{background:var(--sf-brand);color:var(--sf-paper)}
.sf-pag-start .sf-btn.sf-principal.st-ir:hover{background:var(--sf-brand-600)}
.sf-pag-start .kicker{text-transform:uppercase}

@media (min-width:900px){
  .sf-pag-start .band.st-intro{padding:48px 0 8px}
  .sf-pag-start .band.st-paradas{padding:32px 0 72px}
  .sf-pag-start .st-card{grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"cab mini" "linea mini" "ver mini" "ir mini";
    column-gap:36px;row-gap:10px;padding:28px 30px;align-items:start}
  .sf-pag-start .st-cab{grid-area:cab}
  .sf-pag-start .st-linea{grid-area:linea}
  .sf-pag-start .st-ver{grid-area:ver}
  .sf-pag-start .st-mini{grid-area:mini;margin:0}
  .sf-pag-start .st-ir{grid-area:ir;align-self:end}
  .sf-pag-start .st-linea,.sf-pag-start .st-ver{max-width:52ch}
}

/* «If you came for…» */
.sf-pag-start .band.st-otro{padding:56px 0}
.sf-pag-start .st-otro .sechead{margin-bottom:20px}
.sf-pag-start .st-filas{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:62ch}
.sf-pag-start .st-fila{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 18px;
  background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-r-l);color:var(--sf-ink);font-weight:600;text-decoration:none}
.sf-pag-start .st-fila:hover{border-color:var(--sf-acc-700)}
.sf-pag-start .st-flecha{color:var(--sf-acc-700);font-weight:800}

/* el cierre */
.sf-pag-start .band.st-cierre-banda{padding:36px 0 48px}
.sf-pag-start .st-cierre{font-size:var(--sf-fs-lead);color:var(--sf-mut);max-width:52ch}