/* ============================================================
   declar.ar — /<rubro>/ (landings por rubro)
   Extiende el sistema lattice de landing.css (tokens --dc-* de
   /site-theme.css). Cargar DESPUÉS de styles.min.css y landing.css.
   ============================================================ */

.rb-title { font-size: clamp(38px, 5.2vw, 70px); margin-top: 26px; max-width: 960px; }
.rb-hero .lp-lead { max-width: 700px; margin-inline: auto; }
.rb-hero-actions { justify-content: center; margin-top: 36px; }

/* ---- Lo que pasa hoy: el número hace de viñeta, no de secuencia real ---- */
.lp-page .rb-pain h3 { margin-top: 18px; }

/* ---- Banda de plan recomendado ---- */
.rb-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-block: clamp(40px, 4.5vw, 56px);
}
.lp-page .rb-plan h2 { margin-top: 10px; }
.lp-page .rb-plan p { margin-top: 8px; max-width: 72ch; font-size: 15px; color: var(--dc-muted-fg); }
.rb-plan .lp-btn { flex: none; }

/* ---- Otros rubros ---- */
.lp-page .rb-other { display: flex; flex-direction: column; gap: 10px; }
.lp-page .rb-other p { color: var(--dc-muted-fg); }
.lp-page .rb-other .lp-plan-link { margin-top: auto; padding-top: 18px; }
.lp-page .rb-other-lead { margin-top: 10px; max-width: 60ch; font-size: 15px; color: var(--dc-muted-fg); }

/* ---- CTA ---- */
.rb-cta-title { font-size: clamp(34px, 4.4vw, 58px); margin-top: 24px; max-width: 900px; }

@media (max-width: 560px) {
    .rb-plan { align-items: flex-start; }
    .rb-plan .lp-btn { width: 100%; justify-content: center; }
}