/* =========================================================
   NÚMEROS FINOS · Landing "Abono mensual"
   Estructura PAS · 1 sola acción (WhatsApp). Para pauta y link en bio.
   Reutiliza tokens y componentes de styles.css (.section, .btn, .faq,
   .pillars, .promises, .finalcta, .wa-float…).
   ========================================================= */

/* -------- Top bar minimal (sin menú: es una landing de conversión) -------- */
.lp-topbar { border-bottom: 1px solid var(--gris-claro); background: #fff; position: sticky; top: 0; z-index: 50; }
.lp-topbar .nav { min-height: 60px; }
.lp-topbar__back { font-family: var(--ff-mono); font-size: .8rem; color: var(--gris); }
.lp-topbar__back:hover { color: var(--azul); }

/* -------- CTA centrado reutilizable -------- */
.cta-center { text-align: center; margin-top: 2.2rem; }
.cta-center .btn__micro,
.abono-hero__micro { font-family: var(--ff-mono); font-size: .8rem; color: var(--gris); margin-top: 1.1rem; }
.section--dark .cta-center .btn__micro,
.section--blue .cta-center .btn__micro { color: rgba(255, 255, 255, .75); }

/* -------- Hero centrado -------- */
.abono-hero { position: relative; overflow: hidden; background: #fff; padding: 3.2rem 0 3.6rem; text-align: center; }
.abono-hero .eyebrow { color: var(--azul); }
.abono-hero h1 { font-size: clamp(2.2rem, 6.5vw, 4rem); max-width: 18ch; margin: 0 auto; }
.abono-hero h1 .az { color: var(--azul); }
.abono-hero__lead { font-size: 1.12rem; color: var(--gris); margin: 1.3rem auto 1.8rem; max-width: 56ch; }

/* -------- Lista de dolores (Problema) -------- */
.pain-list { max-width: 640px; margin: 2.4rem auto 0; display: grid; gap: .9rem; list-style: none; }
.pain-list li { position: relative; padding-left: 2.1rem; font-size: 1.05rem; }
.pain-list li::before {
  content: "✕"; position: absolute; left: 0; top: -.05em;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--gris-claro); color: var(--gris);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

/* -------- 4 pasos (Solución) -------- */
.steps { display: grid; gap: 1.2rem; margin-top: 2.6rem; }
.step { background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radius); padding: 1.6rem 1.4rem; }
.step__n { font-family: var(--ff-tit); font-size: 2.4rem; line-height: 1; color: var(--azul); }
.step h3 { font-size: 1.12rem; text-transform: none; font-family: var(--ff-txt); font-weight: 700; margin: .6rem 0 .4rem; }
.step p { color: var(--gris); font-size: .95rem; }

/* -------- Tabla antes / después (Beneficios) -------- */
.ba { display: grid; gap: 1rem; max-width: 820px; margin: 2.6rem auto 0; }
.ba__row { display: grid; border: 1px solid var(--gris-claro); border-radius: var(--radius); overflow: hidden; }
.ba__cell { padding: 1rem 1.2rem; font-size: .98rem; }
.ba__cell--before { background: var(--gris-claro); color: var(--gris); }
.ba__cell--after { background: #fff; color: var(--negro); font-weight: 600; }
.ba__k { display: block; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.ba__cell--before .ba__k { color: var(--gris); }
.ba__cell--after .ba__k { color: var(--azul); }

/* -------- Qué incluye (checklist) -------- */
.incl { max-width: 560px; margin: 2.4rem auto 0; list-style: none; display: grid; gap: .75rem; }
.incl li { position: relative; padding-left: 2rem; font-size: 1.02rem; }
.incl li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: var(--azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* -------- Planes / precios -------- */
.plans { display: grid; gap: 1rem; max-width: 760px; margin: 2.2rem auto 0; }
.plan {
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.plan__cat { font-family: var(--ff-txt); font-weight: 600; }
.plan__val { font-family: var(--ff-tit); text-transform: uppercase; font-weight: 700; font-size: 1.5rem; color: var(--azul); white-space: nowrap; }
.plan__val small { font-family: var(--ff-mono); font-size: .58rem; font-weight: 400; text-transform: none; color: var(--gris); margin-left: .15rem; }
.plans-note { font-family: var(--ff-mono); font-size: .78rem; color: var(--gris); max-width: 60ch; margin: 1.4rem auto 0; text-align: center; line-height: 1.5; }

/* -------- Responsive -------- */
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ba__row { grid-template-columns: 1fr 1fr; }
  .ba__cell--before { border-right: 1px solid #dcdcdc; }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}