/* =========================================================================
   Guía Primeros pasos — checklist + canal + atascos.
   Sin demos de producto (eso es la landing).
   ========================================================================= */

.gs-page{padding:0}
.gs-hero{padding:72px 0 40px}
.gs-hero h1{margin-bottom:12px;max-width:18ch}
.gs-hero .lead{max-width:52ch}

.gs-steps-section .lead,
.gs-page .lead{max-width:52ch;margin-bottom:28px}

.gs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.gs-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 20px;
  padding:22px 0;margin:0}

.gs-step-num{font-family:var(--display);font-weight:900;font-size:28px;line-height:1;
  color:var(--brand);letter-spacing:-.03em;padding-top:2px}
.gs-step-body h3{font-size:20px;margin:0 0 8px}
.gs-step-body p{margin:0 0 10px;color:var(--text-2)}
.gs-step-body p:last-child{margin-bottom:0}
.gs-step-link{margin-top:4px}
.gs-step-link a{display:inline-flex;align-items:center;font-weight:600;text-decoration:none;
  min-height:44px;padding:10px 0}
.gs-step-link a:hover{text-decoration:underline}
.gs-step-stuck{margin-top:2px}
.gs-step-stuck a{font-size:14.5px;font-weight:600;color:var(--brand-ink);text-decoration:none;
  display:inline-flex;min-height:40px;align-items:center}
.gs-step-stuck a:hover{text-decoration:underline}

.gs-channels{display:grid;gap:16px;margin-top:12px}
@media (min-width:720px){.gs-channels{grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}}
.gs-channel{margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);display:flex;flex-direction:column;gap:0;min-width:0;
  transition:border-color .15s ease,box-shadow .15s ease}
.gs-channel:hover,.gs-channel:focus-within{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 8%,transparent)}
.gs-channel-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:16px}
.gs-channel h3{margin:0;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.gs-channel-when{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.gs-channel-need{margin:0}
.gs-channel-need > p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.gs-channel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gs-channel-list li{margin:0;padding:0 0 0 14px;position:relative;font-size:15px;line-height:1.45;color:var(--text);
  overflow-wrap:anywhere}
.gs-channel-list li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;
  border-radius:50%;background:var(--brand)}
.gs-channel-list code{font-size:.92em;word-break:break-word}
.gs-k{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.gs-channel-cta{width:100%;justify-content:center;margin-top:20px;text-decoration:none;
  border-color:var(--brand);color:var(--brand-ink);font-weight:600;background:transparent}
.gs-channel-cta:hover,.gs-channel-cta:focus-visible{background:var(--brand);border-color:var(--brand);color:#fff}

.gs-stuck-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.gs-stuck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 20px;align-items:center;
  margin:0;padding:18px;background:var(--bg);border-radius:var(--r)}
.gs-stuck h3{margin:0 0 6px;font-size:18px}
.gs-stuck p{margin:0;font-size:15px;color:var(--text-2);line-height:1.5}
.gs-stuck-go{font-weight:600;text-decoration:none;white-space:nowrap;color:var(--brand-ink);
  min-height:44px;display:inline-flex;align-items:center}
.gs-stuck-go:hover{text-decoration:underline}



@media (max-width:760px){
  .gs-hero{padding:52px 0 28px}
  .gs-step{gap:14px 16px;padding:18px 0}
  .gs-step-num{font-size:24px}
  .gs-stuck{grid-template-columns:1fr;gap:8px}
}