/* ============================================================
   FEATURE: Planes y precios
   Mobile-first: tarjetas apiladas en una columna; en tablet/
   desktop se muestran las 3 en fila con la misma altura.
   ============================================================ */
.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:stretch;
}
@media (min-width:860px){ .pricing-grid{ grid-template-columns:1fr 1fr 1fr; } }

.price-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:30px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  position:relative;
}
@media (min-width:480px){ .price-card{ padding:34px 28px; } }

.price-card.featured{
  border:2px solid var(--navy-deep);
  box-shadow:var(--shadow-md);
}
.price-pill{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  background:var(--navy-deep);
  color:#fff;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:6px 16px;
  border-radius:999px;
}
.price-card h3{
  font-family:var(--font-display);
  font-size:1.1rem;
  margin:6px 0 16px;
  color:var(--text-dark);
}
.price-amount{
  font-family:var(--font-display);
  font-weight:800;
  font-size:2.4rem;
  color:var(--navy-deep);
  margin-bottom:6px;
}
.price-amount sup{ font-size:1.1rem; font-weight:700; }
.price-amount .per{ font-family:var(--font-body); font-weight:500; font-size:.95rem; color:var(--text-muted); }

.price-card p.price-desc{
  font-size:.88rem;
  color:var(--text-muted);
  line-height:1.55;
  margin:0 0 26px;
  flex:1;
}

.price-btn{
  display:block;
  width:100%;
  min-height:48px;
  line-height:48px;
  border-radius:999px;
  border:1.5px solid var(--navy-deep);
  background:transparent;
  color:var(--navy-deep);
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
  appearance:none;
  font-family:inherit;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.price-card.featured .price-btn{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.price-btn:hover{ background:var(--navy-deep); color:#fff; }
.price-card.featured .price-btn:hover{ background:var(--orange-dark); border-color:var(--orange-dark); }