/* ===== SECTION: oferta ===== */
/* Ficha de producto: ledger con reglas finas y numeración en serif, un ítem destacado (la comunidad)
   y un panel de precio en Newsreader. Móvil: apilado. Desktop: ledger + panel fijo a la derecha. */

#oferta{ background:var(--ground); }
.spec{ display:grid; gap:clamp(2.25rem,5vw,3rem); }

/* ---- ledger ---- */
.spec-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns:2rem minmax(0,1fr); grid-template-areas:"idx body" "idx value" "idx note";
  column-gap:10px; padding:24px 0; border-bottom:1px solid var(--line);
}
.spec-index{
  grid-area:idx; font-family:var(--serif); font-variation-settings:'opsz' 36; font-size:1.05rem;
  line-height:1.25; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:.12em;
}
.spec-body{ grid-area:body; min-width:0; }
.spec-body h3{ margin-bottom:8px; }
.spec-body > p{ color:var(--body-ink); font-size:.95rem; line-height:1.55; margin:0; }
.spec-body > p strong{ color:var(--ink); }
.spec-value{ grid-area:value; display:flex; align-items:center; gap:10px; margin-top:12px; }
.spec-price{ font-size:.86rem; color:var(--muted); font-variant-numeric:tabular-nums; text-decoration-thickness:1px; white-space:nowrap; }
.spec-badge{
  display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--pill);
  background:var(--surface-2); color:var(--muted); font-size:.64rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3; white-space:nowrap;
}

/* ítem destacado: la comunidad */
.spec-row-featured{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 12px 24px; margin:14px -12px; column-gap:10px;
}
.spec-row-featured + .spec-row{ border-top:1px solid var(--line); }
.spec-note{ grid-area:note; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.spec-note p{ font-size:.9rem; line-height:1.5; color:var(--muted); margin:0 0 12px; }
.spec-note ul{ display:grid; gap:8px; }
.spec-note li{ position:relative; padding-left:28px; font-size:.92rem; line-height:1.5; color:var(--body-ink); }
.spec-note li::before{
  content:"✓"; position:absolute; left:0; top:.18em; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-ink); font-size:.6rem; font-weight:600; line-height:1;
}

/* ---- panel de precio ---- */
.spec-panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 22px 26px; text-align:center; box-shadow:0 30px 80px -40px rgba(20,20,19,.25);
}
.spec-panel .eyebrow{ margin-bottom:18px; }
.spec-total{ font-size:.86rem; color:var(--muted); margin:0 0 12px; }
.spec-total s{ text-decoration-thickness:1px; font-variant-numeric:tabular-nums; }
.spec-big{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin:0;
  font-family:var(--serif); font-variation-settings:'opsz' 72; font-weight:400;
  font-size:clamp(3.4rem,12vw,4.6rem); line-height:.95; letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.spec-period{ font-family:var(--sans); font-size:.95rem; font-weight:400; letter-spacing:0; color:var(--muted); }
.spec-per{ font-size:.84rem; color:var(--muted); margin:14px 0 0; }
.spec-breakdown{ margin:22px 0 0; border-top:1px solid var(--line); text-align:left; }
.spec-breakdown li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:.9rem; color:var(--muted);
}
.spec-breakdown li b{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
#oferta .spec-panel .cta{ display:flex; width:100%; margin-top:24px; font-size:.95rem; padding:14px 20px; }
.spec-cta-note{ margin:12px 0 0; font-size:.78rem; color:var(--muted); }

/* ---- desktop ---- */
@media (min-width:1025px){
  .spec{ grid-template-columns:minmax(0,1fr) 352px; gap:clamp(3rem,6vw,5.5rem); align-items:start; }
  .spec-row{ grid-template-columns:3rem minmax(0,1fr) auto; grid-template-areas:"idx body value" "idx note note"; column-gap:20px; padding:30px 0; }
  .spec-note{ max-width:640px; }
  .spec-index{ padding-top:.2em; }
  .spec-value{ margin-top:.3em; align-self:start; justify-self:end; }
  .spec-row-featured{ padding:30px 28px; margin:16px -28px; column-gap:20px; }
  .spec-note ul{ grid-template-columns:1fr 1fr; gap:8px 20px; }
  .spec-panel{ position:sticky; top:28px; padding:32px 30px 30px; }
}