/* Planes: precios y descuentos protagonistas (2026-09-18). Hereda tema de paleta.css. */
.plans .plan{min-width:0}
.plan-price{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1}
.plan-price .amt,.plan:not(.plan-featured) .plan-price .amt{font-family:"Nunito","Plus Jakarta Sans Variable",var(--font);font-size:clamp(32px,2.75vw,42px);font-weight:900;letter-spacing:-.03em;color:var(--hero-600);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.plan-price>span:not(.amt){font-size:15px;font-weight:600;color:var(--corr-500)}
.plan-deal{display:flex;align-items:center;gap:10px;min-height:26px;margin-top:8px}
.plan-deal s{white-space:nowrap;font-size:14px;font-weight:600;color:var(--corr-400,#8a94a6);text-decoration-thickness:2px}
.plan-save[hidden],.plan-deal s[hidden]{display:none}
.plan-save{display:inline-block;white-space:nowrap;padding:5px 11px;border-radius:999px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;box-shadow:0 8px 18px -10px rgba(22,163,74,.8)}
.plan-bill{font-size:14px;font-weight:700;margin-top:6px;color:var(--hero-600)}
.plan-featured .plan-price .amt{font-size:clamp(36px,3.1vw,48px)}
/* Toggle de período: más grande y con el ahorro en pastilla */
.bill-toggle{padding:6px;gap:6px}
.bill-toggle button{font-size:15.5px;padding:12px 22px;display:inline-flex;align-items:center;gap:9px}
.bill-toggle .save{margin:0;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:800;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;text-transform:uppercase;letter-spacing:.02em}
.bill-toggle button.is-on .save{background:#fff;color:#15803d}
/* Temas */
html[data-style="brutal"] .plan-price .amt{color:var(--b-ink);text-shadow:none}
html[data-style="brutal"] .plan-save,html[data-style="brutal"] .bill-toggle .save{border-radius:0;background:var(--b-ink);color:var(--b-paper);box-shadow:3px 3px 0 var(--b-accent)}
html[data-style="brutal"] .bill-toggle button.is-on .save{background:var(--b-paper);color:var(--b-ink);box-shadow:none}
@media (width<=640px){.bill-toggle button{padding:10px 14px;font-size:14px}.bill-toggle .save{font-size:11px;padding:3px 7px}}
/* Con pastillas el toggle mide ~484px (todos los temas); bajo 540px ya no cabe en una línea */
@media (width<=540px){.bill-toggle .save{display:none}.bill-toggle button{padding:10px 16px}}
/* 320px: el contenedor mide 280px y el toggle sin pastillas ~295px; sin esto las etiquetas se parten en dos líneas */
@media (width<=350px){.bill-toggle button{padding:10px 11px}}