/* Página de inscripción y pago */
body { margin: 0; background: #F7F6F4; color: #111; font-family: Inter, system-ui, sans-serif; }
.i-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; background: #FFF; border-bottom: 1px solid #E2E2E2; }
.i-top a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.i-brand { display: flex; gap: 10px; text-decoration: none; color: #111; }
.i-top > a:last-child { color: #111; }
.i-card[hidden] { display: none; }
.i-brand b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.marks { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; }
.marks i { width: 10px; height: 10px; display: block; }
.marks i:nth-child(1) { background: #C2410C; border-radius: 3px; } .marks i:nth-child(2) { background: #1D4ED8; border-radius: 50%; }
.marks i:nth-child(3) { background: #6D28D9; border-radius: 50%; } .marks i:nth-child(4) { background: #BE185D; border-radius: 3px; }
.i-main { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 18px; }
.i-intro h1 { margin: 4px 0 8px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(32px, 6vw, 46px); letter-spacing: -0.03em; line-height: 1.05; }
.i-intro p { margin: 0; font-size: 17px; line-height: 1.55; color: #3A3A3A; }
.i-kick { font-size: 13px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9A3412 !important; }
.i-card { background: #FFF; border: 1px solid #E2E2E2; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.i-card h2 { margin: 0; font-size: 18px; }
.i-plans { display: flex; flex-direction: column; gap: 10px; }
.i-plan { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid #D6D6D6; border-radius: 16px; cursor: pointer; }
.i-plan:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.i-plan input { width: 20px; height: 20px; accent-color: #111; flex: none; }
.i-plan span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.i-plan small { color: #555; font-size: 14px; }
.i-plan em { font-style: normal; font-weight: 700; white-space: nowrap; }
.i-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.i-field input, .i-field select { font: inherit; font-weight: 400; font-size: 16px; height: 48px; padding: 0 14px; border: 1.5px solid #CFCFCF; border-radius: 12px; background: #FFF; box-sizing: border-box; }
.secure-input { position: relative; height: 48px; border: 1.5px solid #CFCFCF; border-radius: 12px; padding: 0 14px; background: #FFF; box-sizing: border-box; }
.secure-input iframe { display: block; width: 100%; height: 100%; }
.i-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.i-total { margin: 0; font-size: 17px; }
.i-note, .i-legal { margin: 0; font-size: 13px; color: #555; line-height: 1.5; }
#subscription-card-form { display: flex; flex-direction: column; gap: 14px; }
.i-cta { font: inherit; font-weight: 600; font-size: 17px; min-height: 54px; border: 0; border-radius: 999px; background: #111; color: #FFF; cursor: pointer; }
.i-cta:disabled { opacity: .55; cursor: progress; }
.i-status { margin: 0; font-size: 15px; color: #3A3A3A; }
.i-alert { padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; background: #F3F3F1; }
.i-alert.ok { background: #E7F0FF; color: #1E3A8A; }
.i-alert.warn { background: #FFF1E6; color: #7C2D12; }
.i-alert.error { background: #FDE8E8; color: #8A1C1C; }
.i-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.i-actions button { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #111; background: #FFF; cursor: pointer; }
.i-actions button.danger { border-color: #B91C1C; color: #B91C1C; }
.i-actions button[hidden] { display: none; }
@media (max-width: 480px) { .i-row { grid-template-columns: 1fr; } .i-card { padding: 20px 16px; } }