/* =============================================================
   promo.css — components for the Google-indexed promo landing
   pages under /promociones/<slug>/.
   Loaded AFTER css/styles.css and reuses its design tokens.
   ============================================================= */

/* discount / campaign badge in the hero */
.promo-badge{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--purple);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.5em .95em;border-radius:var(--radius-pill);
  box-shadow:var(--shadow-purple);margin-bottom:1rem;
}

/* trust chips row under the hero copy */
.trust-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;}
.trust-pill{
  display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:.8rem;
  padding:.5rem .85rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
}
.trust-pill svg{color:var(--teal);flex-shrink:0;}

/* headline offer card (hero) */
.offer-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  border-left:5px solid var(--teal);padding:1.35rem 1.5rem;margin:1.7rem 0 1.5rem;
}
.offer-card__label{
  font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:.45rem;
}
.offer-card__price{
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:clamp(1.4rem,3.6vw,1.95rem);line-height:1.12;
}
.offer-card__price del{
  color:var(--ink-mute);font-weight:600;font-size:.6em;margin-right:.5em;
  text-decoration-thickness:2px;
}
.offer-card__note{font-size:.85rem;color:var(--ink-mute);margin:.55rem 0 0;}

/* detailed price list section */
.price-list{display:flex;flex-direction:column;gap:.85rem;max-width:660px;margin-inline:auto;}
.price-row{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.25rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;box-shadow:var(--shadow-sm);
}
.price-row__name{font-family:var(--display);font-weight:600;color:var(--ink);}
.price-row__val{font-family:var(--display);font-weight:800;color:var(--teal-deep);white-space:nowrap;text-align:right;}
.price-row__val del{display:block;color:var(--ink-mute);font-weight:600;font-size:.78em;}
.price-note{font-size:.85rem;color:var(--ink-mute);text-align:center;margin:1.1rem auto 0;max-width:660px;}

/* benefit + step grids (reuse .icard from styles.css for benefits) */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gap);margin-top:2.2rem;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gap);margin-top:2.2rem;}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.3rem;box-shadow:var(--shadow-sm);}
.step__num{
  width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;
  font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:.85rem;
}
.step h3{margin-bottom:.35rem;}
.step p{font-size:.95rem;margin:0;}

/* legal / vigencia strip */
.promo-legal{font-size:.82rem;color:var(--ink-mute);max-width:720px;margin-inline:auto;text-align:center;}

/* mobile sticky CTA bar (paid-traffic conversion aid) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.10);
  padding:.7rem clamp(12px,4vw,20px);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(115%);transition:transform .3s ease;
}
.sticky-cta .btn{width:100%;}
@media (max-width:720px){
  .sticky-cta{display:block;}
  .sticky-cta.is-visible{transform:none;}
  /* keep the floating WhatsApp button clear of the sticky bar */
  .wa-fab{bottom:calc(76px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion:reduce){
  .sticky-cta{transition:none;}
}