/* Startup Riders Pro v4 — capa sobre ../pro/styles.css.
   Refina el primer viewport y equilibra el bloque de teardowns en movil. */

/* ---------- HERO (menos capas compitiendo en el primer viewport) ---------- */
.hero { padding-top: 24px; }
.hero-grid { gap: 24px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(.68rem, 3vw, .76rem);
  letter-spacing: .02em;
  color: var(--brand-ink-soft);
  margin-bottom: 14px;
  white-space: nowrap;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-yellow); border: 1px solid var(--brand-ink); }
.hero .eyebrow { margin-bottom: 10px; font-size: .68rem; }
.hero h1 { max-width: 18ch; font-size: clamp(1.9rem, 8vw, 3.6rem); line-height: 1.05; margin-bottom: 16px; }
.hero .sub { max-width: 39ch; font-size: clamp(1rem, 4vw, 1.2rem); line-height: 1.5; }
.hero .cta-row { gap: 12px; margin: 22px 0 10px; }
.hero .microcopy { font-size: .84rem; }
.hero .trust { margin-top: 14px; padding-top: 14px; font-size: .88rem; }

/* ---------- TORN DOWN SO FAR (logos + cifras en reticula) ---------- */
.torn { padding: 24px 20px 16px; border-top: 1px solid var(--brand-border); }
.torn-label { font-family: var(--font-text); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--brand-ink-soft); margin-bottom: 10px; }
.torn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.torn-item { min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "logo company" "logo metric"; column-gap: 9px; row-gap: 2px; align-items: center; padding: 12px 0; border-top: 1px solid var(--brand-border); }
.torn-logo { width: 22px; height: 22px; border-radius: 5px; filter: grayscale(1) contrast(1.05); }
.torn-item .torn-logo { grid-area: logo; }
.torn-company { grid-area: company; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.15; color: var(--brand-ink); }
.torn-item em { grid-area: metric; font-family: var(--font-mono); font-style: normal; font-weight: 500; font-size: .68rem; line-height: 1.2; color: var(--brand-ink-soft); white-space: nowrap; }

/* Las portadas son prueba visual, no enlaces de salida. */
.issues .issue { cursor: default; }
.issues .issue:hover img { transform: none; }
.issues-section { background: var(--brand-black); color: var(--brand-on-black); }
.issues-section .issues { margin-top: 0; }

/* Reduce a la mitad solo los dos saltos verticales señalados. */
.torn + .how { padding-top: 26px; }
.segments { padding-bottom: 26px; }
.segments + .made { padding-top: 26px; }

/* ---------- HOW IT'S MADE (metodologia real, tangibiliza el valor) ---------- */
.made { background: var(--brand-bg-2); }
.made h2 { max-width: 22ch; margin-bottom: 12px; }
.made-lede { color: var(--brand-ink-soft); font-size: clamp(1rem, 3.8vw, 1.15rem); max-width: 62ch; margin-bottom: 28px; }
.made-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.made-steps li { display: flex; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--brand-border); }
.made-steps li:last-child { border-bottom: 1px solid var(--brand-border); }
.made-n { font-family: var(--font-mono); font-weight: 700; font-size: .82rem; color: var(--brand-ink); background: var(--brand-yellow); border-radius: 6px; padding: 2px 8px; flex: none; }
.made-steps strong { font-family: var(--font-display); }
.made-steps span { color: var(--brand-ink-soft); }
.made-foot { margin-top: 22px; font-size: 1.02rem; max-width: 60ch; }

/* ---------- PLANS (comparativa + pricing en un unico bloque) ---------- */
.plans { background: var(--brand-bg-2); }
.plans h2 { max-width: 20ch; margin-bottom: 10px; }
.plans-lede { color: var(--brand-ink-soft); max-width: 60ch; margin-bottom: 34px; }
.plan-grid { display: grid; gap: 16px; }
.plan-card { position: relative; min-width: 0; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.plan-card-featured { border: 2px solid var(--brand-ink); box-shadow: var(--shadow); }
.plan-flag { position: absolute; top: -12px; left: 18px; font-family: var(--font-text); font-weight: 700; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; background: var(--brand-yellow); color: var(--brand-yellow-ink); border-radius: 6px; padding: 4px 9px; }
.plan-card h3 { margin-bottom: 12px; font-size: 1.25rem; }
.plan-price { min-height: 44px; margin-bottom: 20px; font-family: var(--font-text); font-weight: 500; font-size: 1.02rem; line-height: 1.4; color: var(--brand-ink-soft); }
.plan-price span { white-space: nowrap; }
.plan-features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; }
.plan-features li { min-height: 58px; padding: 14px 0; border-top: 1px solid var(--brand-border); font-size: .93rem; line-height: 1.42; color: var(--brand-ink); }
.plan-features li:last-child { border-bottom: 1px solid var(--brand-border); }
.plan-feature-off { color: #888883 !important; text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-cta { width: 100%; justify-content: center; margin-top: auto; }
.plan-cta-secondary { background: var(--brand-ink); color: var(--brand-on-black); }
.plans-guarantee { margin-top: 24px; color: var(--brand-ink-soft); font-size: .95rem; max-width: 62ch; }
.plans-guarantee strong { color: var(--brand-ink); }

/* La CTA fija no compite con la CTA del hero. JS la activa despues. */
.cta-sticky { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.cta-sticky.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* social proof en vertical en movil (feedback Luis 09-07): a 3 columnas
   los numeros quedaban apretados en pantallas estrechas */
@media (max-width: 719px) {
  .proof-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 859px) {
  .hero { padding-bottom: 28px; }
  .hero .fig { display: none; }
}

@media (min-width: 720px) {
  .torn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
}

@media (min-width: 860px) {
  .torn + .how { padding-top: 42px; }
  .segments { padding-bottom: 42px; }
  .segments + .made { padding-top: 42px; }
}

@media (min-width: 960px) {
  .torn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 24px; }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .plan-card { padding: 26px 22px; }
}

/* ---------- WIDE DESKTOP (editorial, sin alterar tablet ni movil) ---------- */
@media (min-width: 1200px) {
  .wrap,
  .hero-grid { max-width: 1440px; }

  .hero {
    padding: 72px clamp(48px, 5vw, 96px) 40px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.24fr) minmax(400px, .76fr);
    gap: clamp(64px, 6vw, 112px);
    align-items: start;
  }
  .hero h1 {
    max-width: 17ch;
    font-size: clamp(3.9rem, 4.4vw, 4.9rem);
    line-height: .99;
    letter-spacing: -.03em;
  }
  .hero .sub { max-width: 47ch; }

  section { padding-inline: clamp(48px, 5vw, 96px); }
  .torn { padding-inline: clamp(48px, 5vw, 96px); }

  .problem .wrap {
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(72px, 8vw, 144px);
    align-items: start;
  }
  .problem h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 15ch;
  }
  .problem p {
    grid-column: 2;
    margin-top: 0;
    max-width: 58ch;
  }
  .problem .cta-ghost {
    grid-column: 2;
    margin-top: 28px;
  }

  .how h2 { max-width: 21ch; }
  .how .cards {
    gap: 0;
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
  }
  .how .card {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--brand-border);
    border-radius: 0;
    padding: 32px clamp(28px, 3vw, 48px);
  }
  .how .card:first-child { padding-left: 0; }
  .how .card:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .proof .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    column-gap: clamp(72px, 8vw, 144px);
    align-items: center;
  }
  .proof .eyebrow { grid-column: 1 / -1; }
  .proof-grid {
    grid-column: 1;
    margin-bottom: 0;
  }
  .proof-line {
    grid-column: 2;
    max-width: 44ch;
  }
}

@media (min-width: 1800px) {
  .wrap,
  .hero-grid { max-width: 1600px; }

  .hero-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(500px, .72fr);
  }
  .hero h1 { font-size: 5.1rem; }
}