.hero .badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.plan{display:flex;flex-direction:column;gap:.6rem}
.plan .price{font-size:1.4rem;font-weight:800;color:var(--slate)}
.post-list article{display:grid;gap:.6rem;border-bottom:1px solid #eef2f2;padding:1rem 0}
.post-meta{font-size:.9rem;color:#6b7280}
.toc{border:1px solid #e5e7eb;border-radius:.8rem;padding:.8rem;background:#fafafa}
.faq dt{font-weight:700;margin-top:1rem}
.faq dd{margin:0 0 1rem 0}
small.note{color:#6b7280}
.card .thumb{border-radius:.8rem;overflow:hidden;margin:.4rem 0;border:1px solid #e6eff0;box-shadow:var(--shadow)}
/* ===== Planes & Reservas: fondos suaves por plan ===== */
#planes-y-reservas .card {
  border-radius: 16px;           /* respeta si ya usas otro valor */
  overflow: hidden;              /* por si hay elementos decorativos */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  color: var(--ink, #0F172A);    /* asegura contraste del texto */
}

/* Plan Reset — turquesa (menta) muy tenue */
#planes-y-reservas .card[data-plan="reset"]{
  background:
    linear-gradient(180deg, rgba(21,184,166,0.08), rgba(21,184,166,0.02));
  border-color: rgba(21,184,166,0.20);
}

/* Plan Calma Profunda — violeta muy tenue */
#planes-y-reservas .card[data-plan="calma-profunda"]{
  background:
    linear-gradient(180deg, rgba(160,145,210,0.12), rgba(160,145,210,0.03));
  border-color: rgba(160,145,210,0.25);
}

/* Plan Acompañamiento Crónico — dorado/amarillo muy tenue (colibrí) */
#planes-y-reservas .card[data-plan="acompanamiento-cronico"]{
  background:
    linear-gradient(180deg, rgba(200,169,106,0.12), rgba(200,169,106,0.04));
  border-color: rgba(200,169,106,0.28);
}

/* Estados de interacción (sutiles y accesibles) */
#planes-y-reservas .card:focus-within,
#planes-y-reservas .card:hover{
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Botón mantiene contraste AA sobre fondos claros */
#planes-y-reservas .card .btn{
  /* si ya definiste btn--primary accesible, no toques esto */
  color: inherit;
}

/* Listas más aireadas en estas cards */
#planes-y-reservas .card ul{
  margin: .5rem 0 .25rem;
  padding-left: 1.1rem;
}
#planes-y-reservas .card li{
  margin: .125rem 0;
}