/* pagos.css: estilos de la seccion de contratacion en linea de Kryptasec.
   Todos los selectores empiezan con #contratar para no afectar ninguna otra parte del sitio. */
#contratar .pg-box{max-width:720px;margin:28px auto 0;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:28px}
#contratar .pg-step{margin-bottom:30px}
#contratar .pg-step:last-child{margin-bottom:0}
#contratar .pg-step h3{margin:0 0 14px;font-size:18px}
#contratar .pg-plans,#contratar .pg-periods{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#contratar .pg-periods{margin-top:14px}
#contratar .pg-opt{position:relative;display:block;cursor:pointer}
#contratar .pg-opt input{position:absolute;opacity:0;width:1px;height:1px}
#contratar .pg-opt span{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:12px}
#contratar .pg-opt b{font-size:16px}
#contratar .pg-opt small{color:var(--muted);font-size:13px}
#contratar .pg-opt input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}
#contratar .pg-opt input:focus-visible+span{outline:2px solid var(--accent-dark);outline-offset:2px}
#contratar .pg-resumen{margin:16px 0 4px;font-weight:600}
#contratar .pg-nota{margin:0;color:var(--muted);font-size:14px}
#contratar .pg-campos{display:grid;gap:14px;grid-template-columns:1fr 1fr}
#contratar .pg-campo.pg-full{grid-column:1/-1}
#contratar .pg-campo label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--text2)}
#contratar .pg-campo input{width:100%;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font:inherit}
#contratar .pg-campo input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
#contratar .pg-campo small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
#contratar .pg-oculto{display:none!important}
#contratar .pg-espera{margin:0;color:var(--muted)}
#contratar .pg-total{margin:0 0 14px;font-size:18px}
#contratar .pg-total strong{color:var(--accent-dark)}
#contratar .pg-metodos{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 16px}
#contratar .pg-metodos label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
#contratar .pg-metodos label[hidden]{display:none}
#contratar .yappy-pago-bloque label{display:block;margin-bottom:6px;font-weight:600}
#contratar .yappy-sello-seguridad{border:1px solid var(--border)!important;background:#fff}
#contratar .form-status{margin-top:12px;font-size:15px}
#contratar .form-status.is-error{color:#B3261E}
#contratar .form-status.is-success{color:var(--ok);font-weight:600}
#contratar .pg-aviso{margin:18px 0 0;color:var(--muted);font-size:13.5px;text-align:center}
@media(max-width:620px){#contratar .pg-campos{grid-template-columns:1fr}#contratar .pg-box{padding:20px}}
#contratar .pg-box{margin-left:0}
#contratar{scroll-margin-top:72px}