/* =============================================
   PRICING PAGE (pricing.html)
   Detalle de los tres planes del bloque PRC-001 de la home:
   promo de lanzamiento, un bloque por plan (con id para los
   enlaces /pricing#landing, #business, #systems), comparativa
   y lo que pasa después del lanzamiento.
============================================= */

.pricing-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.pricing-jump a {
  padding: 11px 18px; border-radius: 999px; font-size: var(--fs-button); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--obsidian-rgb), .28); color: var(--obsidian);
}

/* promo */
.pricing-promo {
  margin-top: 8px; border-radius: 22px;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 90px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 48px;
}
.pricing-promo__eyebrow { grid-column: 1 / -1; margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.pricing-promo h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.03em; }
.pricing-promo h2 strong { font-weight: 800; }
.pricing-promo h2 s { color: var(--muted); font-weight: 500; font-size: .55em; text-decoration-thickness: 2px; }
.pricing-promo > p:not(.pricing-promo__eyebrow) { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.pricing-promo__cta {
  grid-column: 2; grid-row: 2 / span 2; align-self: center;
  padding: 16px 26px; border-radius: 999px; background: var(--limestone); color: var(--obsidian);
  font-size: var(--fs-button); font-weight: 600; white-space: nowrap;
}

/* planes */
.plans { display: grid; gap: 8px; margin-top: 8px; }
.plan {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px);
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 90px); border-radius: 22px; background: var(--limestone);
  scroll-margin-top: 96px;
}
.plan:nth-child(2) { background: var(--mist); }
.plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.plan__index { font-size: var(--fs-label); font-weight: 600; color: var(--graphite); letter-spacing: .08em; }
.plan__badge {
  padding: 6px 12px; border-radius: 999px; background: var(--obsidian); color: var(--limestone);
  font-size: var(--fs-label); font-weight: 600;
}
.plan__badge--quiet { background: transparent; color: var(--obsidian); box-shadow: inset 0 0 0 1px rgba(var(--obsidian-rgb), .3); }
.plan h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.03em; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 0; }
.plan__price strong { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1; letter-spacing: -.04em; }
.plan__period { width: 100%; font-size: var(--fs-small); color: var(--graphite); font-weight: 600; }
.plan__was { color: var(--graphite); font-size: var(--fs-h5); }
.plan__desc { margin: 0; max-width: 40ch; color: var(--graphite); font-size: var(--fs-lead); line-height: var(--lh-lead); }

.plan__body { display: flex; flex-direction: column; gap: 30px; }
.plan__block h3, .aftercare h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-h5); }
.plan__block p { margin: 0; color: var(--graphite); font-size: var(--fs-body); line-height: var(--lh-body); }
.plan__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--obsidian-rgb), .14); }
.plan__list li {
  display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(var(--obsidian-rgb), .14);
  font-size: var(--fs-body); line-height: 1.4;
}
.plan__list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .5em; border-radius: 50%; background: var(--obsidian); }
.plan__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.plan__facts dt { font-size: var(--fs-label); font-weight: 600; color: var(--graphite); }
.plan__facts dd { margin: 6px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.plan__facts dd strong { display: block; font-size: var(--fs-body); }
.plan__cta {
  align-self: flex-start; padding: 16px 28px; border-radius: 999px; background: var(--obsidian); color: var(--limestone);
  font-size: var(--fs-button); font-weight: 600;
}

/* comparativa */
.cmp { margin-top: 8px; padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 90px); border-radius: 22px; background: var(--limestone); }
.cmp h2, .aftercare h2 { margin: 0 0 clamp(24px, 4vw, 48px); font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.03em; }
.cmp__scroll { overflow-x: auto; }
.cmp__scroll:focus-visible { outline: 2px solid var(--obsidian); outline-offset: 4px; }
.cmp table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-small); }
.cmp th, .cmp td { padding: 16px 12px; text-align: left; border-bottom: 1px solid rgba(var(--obsidian-rgb), .14); vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-size: var(--fs-h5); }
.cmp tbody th { font-weight: 600; color: var(--graphite); width: 28%; }
.cmp td s { color: var(--graphite); }
.cmp__yes { font-weight: 700; }
.cmp__no { color: var(--gravel); }

/* después del lanzamiento */
.aftercare { margin-top: 8px; padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 90px); border-radius: 22px; }
.aftercare__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aftercare article { padding: 28px; border-radius: 18px; background: rgba(var(--limestone-rgb), .5); }
.aftercare article p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.aftercare__care { background: var(--obsidian) !important; color: var(--limestone); }
.aftercare__price { margin: 0 0 6px !important; }
.aftercare__price strong { font-family: var(--font-display); font-size: var(--fs-h4); }
.aftercare__care p:last-child { margin-top: 12px !important; color: var(--mist); }

.pricing-shell-page .work-outro { margin-top: 8px; }

@media (max-width: 900px) {
  .plan, .pricing-promo { grid-template-columns: 1fr; }
  .pricing-promo__cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .aftercare__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .plan__facts { grid-template-columns: 1fr; }
  /* comparativa: las tres columnas a la vista, sin desplazamiento lateral */
  .cmp { padding-left: 16px; padding-right: 16px; }
  .cmp table { min-width: 0; table-layout: fixed; font-size: var(--fs-caption); }
  .cmp th, .cmp td { padding: 12px 4px; overflow-wrap: break-word; hyphens: auto; }
  .cmp thead th { letter-spacing: -.02em; }
  .cmp tbody th { width: 31%; }
  .cmp thead th { font-size: var(--fs-small); }
  .plan__cta, .pricing-promo__cta { align-self: stretch; justify-self: stretch; text-align: center; }
}
@media (max-width: 360px) {
  .cmp thead th { font-size: var(--fs-caption); }
  .cmp tbody th { width: 37%; }
}

/* hero photo (desk-budget.webp) has white paper behind the title: a soft
   centre shade keeps "Pricing" readable */
.pricing-hero .about-hero__shade {
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(var(--obsidian-rgb), .42), transparent 75%),
    linear-gradient(90deg, rgba(var(--obsidian-rgb), .5), rgba(var(--obsidian-rgb), .32) 50%, rgba(var(--obsidian-rgb), .55)),
    linear-gradient(0deg, rgba(var(--obsidian-rgb), .35), transparent 50%);
}