/* Añadir al final de style.css (junto al bloque #container-module-price-horizontal) */

.billing-toggle { display: flex; justify-content: center; gap: 0.3em; margin: -0.5em auto 2em; background: #e2e8ec; border-radius: 2em; padding: 0.3em; width: fit-content; }
.billing-toggle button { border: 0; background: transparent; padding: 0.6em 1.6em; border-radius: 2em; font: 1em roboto_medium; color: #333; cursor: pointer; }
.billing-toggle button.active { background: #0F69B2; color: #fff; }

.plans-status { text-align: center; color: #666; font: 0.95em roboto_regular; margin-top: 1.5em; }
.plan-eq { font: 0.85em/1.3em roboto_regular; color: #0F69B2; margin-bottom: 0.6em; }
.plan-features li.strong { font-family: roboto_bold; }
button.btn-plan { width: 100%; border: 0; cursor: pointer; }
button.btn-plan:disabled { opacity: 0.6; cursor: wait; }

body.modal-open { overflow: hidden; }
.pay-overlay { position: fixed; inset: 0; background: rgba(11, 31, 58, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1em; }
.pay-overlay[hidden] { display: none; }
.pay-modal { position: relative; background: #fff; border-radius: 1em; padding: 2em; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; }
.pay-modal h3 { font: 1.5em roboto_bold; color: #000; }
.pay-sub { font: 0.9em roboto_regular; color: #666; margin-bottom: 1.2em; }
.pay-close { position: absolute; top: 0.5em; right: 0.8em; border: 0; background: none; font-size: 1.8em; cursor: pointer; color: #666; }
.pay-field { margin-bottom: 0.9em; }
.pay-field label { display: block; font: 0.85em roboto_medium; color: #333; margin-bottom: 0.3em; }
.pay-field input { width: 100%; padding: 0.7em; border: 1px solid #ccd3d9; border-radius: 0.35em; font: 1em roboto_regular; }
.pay-promo > div { display: flex; gap: 0.5em; }
.pay-promo button { border: 0; background: #e2e8ec; border-radius: 0.35em; padding: 0 1.2em; font: 0.95em roboto_medium; cursor: pointer; }
.pay-promo small { display: block; margin-top: 0.3em; font: 0.85em roboto_regular; color: #0F69B2; }
.pay-summary { background: #F4F6F7; border-radius: 0.5em; padding: 1em; margin: 1em 0; font: 0.95em roboto_regular; }
.pay-summary .orig { text-decoration: line-through; color: #888; }
.pay-summary .disc { color: #1a7f37; }
.pay-summary .total { font: 1.2em roboto_bold; color: #000; margin-top: 0.3em; }
.pay-error { color: #c0392b; font: 0.9em roboto_regular; min-height: 1.2em; margin-bottom: 0.6em; }
.pay-note { font: 0.8em roboto_regular; color: #888; text-align: center; margin-top: 0.8em; }

.thanks-box { text-align: center; padding: 3em 0; }
.thanks-box p { font: 1.1em/1.5em roboto_regular; color: #666; margin-bottom: 1.5em; }
.thanks-box .btn-plan { display: inline-block; width: auto; padding: 1em 2.5em; }
.thanks-box .btn-plan[hidden] { display: none; }