/* ===== 01. Base y capas compartidas de los formularios ===== */
.page-form{min-height:100vh;background:#edf6ff url('https://membresia.eduperks.shop/assets/img/fondo-compartido.jpg') center top/cover no-repeat}
.page-form .site-header{height:103px;padding-top:10px;max-width:1080px}
.page-form .brand{width:330px}
.page-form .checkout-steps{left:36%;top:33px;width:380px}
.form-container{position:relative;z-index:1;width:calc(100% - 96px);max-width:1270px;margin:auto}
.hero-people{position:absolute;top:0;right:6.8%;width:438px;height:300px;object-fit:contain;z-index:0;pointer-events:none}
.form-intro{position:relative;min-height:162px;padding:0 5px}
.form-intro h1{font-size:62px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;margin:0 0 7px}
.form-intro h1 span,.form-intro em{color:var(--brand-red);font-style:normal}
.form-intro>p:not(.step-caption){font-size:20px;color:var(--text-muted);margin:0 0 3px;line-height:1.4}
.form-intro .mandatory-note{font-style:italic}
.form-panel{background:#fff;border:1px solid #e2e2e2;border-radius:25px;box-shadow:0 3px 5px #0005;padding:11px 28px;position:relative;isolation:isolate}
.page-data .form-panel{max-width:1180px;margin:0 auto}
/* ===== 02. Encabezados de paneles y avisos ===== */
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:5px;min-height:56px}
.panel-heading h2{display:flex;align-items:center;gap:18px;font-size:30px;font-weight:800;line-height:1.2;margin:0}
.heading-icon{display:grid;place-items:center;background:#f2e0e8;border-radius:50%;width:55px;height:55px;flex:0 0 55px;color:#cf3c45}
.heading-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.3}
.form-notice{display:flex;align-items:center;gap:14px;color:#c52b32;background:#f2e0e8;padding:5px 10px;font-size:13px;border-radius:10px;min-height:46px}
.form-notice>span{display:grid;place-items:center;border-radius:50%;background:#ce3b44;color:white;font-size:32px;width:37px;height:37px}
.edit-link{font-size:20px;color:#008bff;text-decoration:none}
.edit-actions{display:flex;align-items:center;gap:18px}
button.edit-link{border:0;background:none;padding:0;font-family:inherit;text-align:right}
#confirmacion-form [hidden]{display:none!important}
#confirmacion-form .confirmation-grid{row-gap:15px}
#confirmacion-form.is-editing .panel-heading{margin-bottom:12px}
#confirmacion-form .required-note{margin:10px 0 0}
.page-data[data-page="confirmacion"] .hero-people{position:absolute;top:0;right:6.8%;margin:0}
@media(max-width:767px){.page-data[data-page="confirmacion"] .hero-people{right:0;width:210px;height:175px;object-fit:contain;object-position:top right}.edit-actions{gap:14px;flex-wrap:wrap}#confirmacion-form .confirmation-grid{row-gap:15px}}
/* ===== 03. Campos y errores de validación ===== */
.fields-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:65px;row-gap:5px}
.field{min-width:0}
.field label{display:block;font-size:19px;margin-bottom:5px}
.required{color:#e33233;margin-left:2px}
.form-control,.form-select{font-family:inherit;font-size:19px;line-height:1.25;min-height:38px;padding:5px 10px;border:1px solid #aaa;border-radius:11px}
.form-control::placeholder{color:#c4c4c4;opacity:1}
.form-control:focus,.form-select:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px #24365f22}
.invalid-feedback{font-size:12px;line-height:1.3;margin-top:3px}
.required-note{display:block;font-size:12px;color:#aaa;margin-top:4px}
/* ===== 04. Consentimientos y botones ===== */
.panel-actions{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:35px;margin-top:10px}
.consent-row{display:flex;align-items:flex-start;flex-wrap:wrap;column-gap:11px;margin:4px 0}
.consent-row input{width:28px;height:28px;flex:0 0 28px;accent-color:var(--brand-red);margin:0;cursor:pointer}
.consent-row input:disabled{appearance:none;position:relative;opacity:1;cursor:default;background:var(--brand-red);border:1px solid var(--brand-red);border-radius:6px}
.consent-row input:disabled:checked::after{content:'';position:absolute;width:13px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);left:6px;top:7px}
.consent-row label{flex:1;font-size:17px;line-height:1.6}
.consent-row .invalid-feedback{flex-basis:100%;margin-left:39px}
.legal-link{border:0;padding:0;background:none;color:#008bff;text-decoration:underline;text-underline-offset:4px;font:inherit;cursor:pointer}
.action-primary{background:var(--brand-red);border:1px solid var(--brand-red);border-radius:12px;color:white;font-size:23px;font-weight:700;padding:10px 15px;box-shadow:0 3px 5px #0006}
.action-primary:hover,.action-primary:active{background:#a31d22!important;border-color:#a31d22!important;color:white}
.confirmation-grid{margin:0;row-gap:10px}
.confirmation-grid dt{font-size:19px;font-weight:400;margin-bottom:8px}
.confirmation-grid dd{font-size:19px;font-weight:700;margin:0;min-height:27px;overflow-wrap:anywhere}
.page-data[data-page="confirmacion"] .form-panel{padding-bottom:25px}
.page-data[data-page="confirmacion"] .panel-heading{margin-bottom:13px}
/* ===== 05. Pago y resumen ===== */
.payment-container{position:relative;z-index:1;width:calc(100% - 44px);max-width:1322px;margin:auto}
.payment-container .form-intro{padding-left:40px;min-height:154px}
.page-payment .hero-people{width:377px;height:281px;right:7%}
.payment-layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:0;align-items:stretch}
.payment-panel{padding:8px 39px}
.payment-panel .panel-heading h2{font-size:26px;gap:15px}
.payment-panel .heading-icon{width:50px;height:50px;flex-basis:50px}
.payment-panel .form-notice{font-size:11px;gap:10px;min-height:42px}
.payment-panel .form-notice>span{width:33px;height:33px;font-size:28px}
.payment-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.payment-panel .field{margin:4px 0}
.payment-panel .field label{font-size:17px;margin-bottom:5px}
.payment-panel .form-control,.payment-panel .form-select{font-size:17px;min-height:35px}
.security-message{display:flex;gap:10px;align-items:center;margin:6px -15px 0}
.security-shield{display:grid;place-items:center;flex:0 0 76px;height:76px;border-radius:50%;background:#f2e0e8;color:#cb3945;font-size:48px}
.security-shield svg{width:70%;height:80%;fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round}
.security-message h3{font-size:24px;font-weight:800;margin:0 0 4px}
.security-message p{font-size:13px;line-height:1.3;color:var(--text-muted);margin:0}
.plan-summary{padding:18px 16px;background:#fffafb}
.plan-summary>h2{font-size:22px;font-weight:800;white-space:nowrap;text-align:center;margin-bottom:14px}
.summary-inner{background:white;border-radius:25px;box-shadow:0 2px 3px #0008;padding:20px 25px;min-height:295px}
.summary-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:23px}
.summary-title span{font-size:19px;background:#f2e0e8;color:#dc262b;border-radius:5px;padding:3px 8px}
.summary-inner p{font-size:13px;color:#999;line-height:1.2;margin:0 0 25px}
.summary-inner h3{font-size:19px;font-weight:700;margin-bottom:0}
.summary-price{display:block;font-size:56px;font-weight:800;color:var(--brand-red);line-height:1.2;letter-spacing:-2px}
.payment-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 6% 0}
.payment-actions .btn{font-size:30px;line-height:1.15}
.action-secondary{color:#e32a23;border:1px solid #e32a23;background:#fff;box-shadow:0 3px 5px #0006;border-radius:12px;font-weight:600;padding:10px 15px}
.action-secondary:hover{background:#fff4f4;color:#b32323}
.demo-caption{text-align:center;font-size:12px;color:#626262;margin:12px 0 0}
.page-payment .demo-caption{color:#fff}
/* ===== 06. Resultado de pago ===== */
.success-card{position:relative;z-index:1;max-width:592px;width:90%;margin:83px auto 0;padding:49px 35px 24px;text-align:center;background:white;border:1px solid #e2e2e2;border-radius:25px;box-shadow:0 3px 5px #0006}
.success-check{display:block;position:relative;margin:0 auto 25px;width:136px;height:136px;background:#35a72b;border-radius:50%}
.success-check::after{content:'';position:absolute;width:72px;height:40px;border-left:18px solid #fff;border-bottom:18px solid #fff;border-radius:10px;transform:rotate(-45deg);left:34px;top:41px}
.success-card h1{font-size:55px;font-weight:800;white-space:nowrap;letter-spacing:-1.5px;margin:0 0 20px}
.success-card h1 span{color:var(--brand-red)}
.success-thanks{font-size:23px;color:var(--text-muted);margin-bottom:25px;white-space:nowrap}
.success-thanks img{width:145px;height:auto;vertical-align:middle}
.success-description{font-size:17px;line-height:1.2;color:var(--text-muted);margin-bottom:35px}
.receipt-note{display:inline-flex;align-items:center;gap:9px;background:var(--brand-blue);border-radius:24px;color:white;font-size:17px;line-height:1.2;padding:16px;box-shadow:0 3px 5px #0008;text-align:left;margin-bottom:20px}
.envelope{display:block;width:60px;height:40px;background:linear-gradient(40deg,transparent 48%,#24365f 49%,#24365f 51%,transparent 52%),linear-gradient(-40deg,transparent 48%,#24365f 49%,#24365f 51%,transparent 52%),#fff}
.success-home{display:inline-block;font-size:13px;margin-top:12px;color:var(--brand-blue)}
/* ===== 06.1. Resultado de cobro no exitoso (Pantalla 4.1) ===== */
.payment-error-icon{display:block;position:relative;width:136px;height:136px;margin:0 auto 25px;background:var(--brand-red);border-radius:50%}
.payment-error-icon::before,.payment-error-icon::after{content:'';position:absolute;top:60px;left:30px;width:76px;height:16px;background:#fff;border-radius:10px;transform:rotate(45deg)}
.payment-error-icon::after{transform:rotate(-45deg)}
.page-failure .success-card h1{font-size:44px;white-space:normal;line-height:1.2}
.page-failure .success-description{line-height:1.5}
@media(max-width:767px){.payment-error-icon{width:105px;height:105px}.payment-error-icon::before,.payment-error-icon::after{width:59px;height:13px;top:46px;left:23px}.page-failure .success-card h1{font-size:clamp(26px,7vw,40px)}}
/* ===== 07. Tabletas y móviles: fondo y orden de capas ===== */
@media(max-width:1199px){.page-form .site-header{width:90%}.page-form .brand{width:280px}.page-form .checkout-steps{left:38%;width:330px}.hero-people{right:1%;width:360px;object-position:top}.form-container{width:94%}.form-intro h1{font-size:49px}.form-intro>p:not(.step-caption){font-size:17px;max-width:58%}.form-panel{padding:14px 22px}.fields-grid{column-gap:28px}.panel-heading h2{font-size:25px}.form-notice{font-size:11px;gap:7px}.consent-row label{font-size:14px}.panel-actions{gap:20px}.payment-layout{grid-template-columns:minmax(0,1fr) 245px;gap:12px}.payment-panel{padding:12px 20px}.payment-panel .panel-heading{flex-wrap:wrap}.payment-names{gap:12px}.plan-summary>h2{font-size:19px}.summary-inner{padding:20px 15px}.security-message h3{font-size:21px}.page-payment .hero-people{right:2%}}
@media(max-width:767px){.page-form{background-position:78% -1px;background-size:auto 768px;background-color:#e6f2ff}.page-form .site-header{height:auto;padding-top:22px}.page-form .brand{width:235px}.page-form .checkout-steps{left:auto;top:auto;width:100%;max-width:340px}.hero-people{top:82px;right:0;width:210px;height:175px;object-fit:cover;object-position:top;z-index:0}.form-container,.payment-container{width:92%}.form-intro{min-height:0;background:#ffffffeb;border-radius:16px;padding:15px!important;margin-bottom:20px}.form-intro h1{font-size:36px;letter-spacing:-1px}.form-intro>p:not(.step-caption){font-size:16px;max-width:none}.form-panel{border-radius:20px;padding:16px}.panel-heading{flex-wrap:wrap;margin-bottom:14px;gap:12px}.panel-heading h2{font-size:23px;gap:10px}.heading-icon{width:43px;height:43px;flex-basis:43px}.heading-icon svg{width:28px;height:28px}.form-notice{width:100%;font-size:12px}.fields-grid{grid-template-columns:1fr;gap:12px}.field label{font-size:16px}.form-control,.form-select{font-size:16px;min-height:44px}.panel-actions{grid-template-columns:1fr;gap:16px;margin-top:18px}.consent-row{margin:10px 0}.consent-row label{font-size:14px}.consent-row input{width:24px;height:24px;flex-basis:24px}.action-primary{font-size:21px}.confirmation-grid{gap:15px}.confirmation-grid dt{font-size:16px;margin-bottom:4px}.confirmation-grid dd{font-size:17px}.edit-link{font-size:16px}.page-payment .hero-people{width:200px;height:175px;right:0;top:80px}.payment-layout{grid-template-columns:1fr;gap:18px}.payment-names{grid-template-columns:1fr;gap:8px}.payment-panel .form-control,.payment-panel .form-select{min-height:44px;font-size:16px}.payment-panel .field{margin:10px 0}.payment-panel .panel-heading h2{font-size:22px}.security-message{margin:15px 0 0;align-items:flex-start}.security-shield{flex-basis:45px;height:45px;font-size:30px}.security-message h3{font-size:19px}.security-message p{font-size:12px}.summary-inner{min-height:0}.summary-inner p{margin-bottom:10px}.plan-summary>h2{font-size:23px}.payment-actions{margin:22px 0 0;gap:10px}.payment-actions .btn{font-size:20px}.page-payment .demo-caption{color:#24365f}.success-card{margin-top:35px;padding:30px 18px 22px}.success-check{width:105px;height:105px}.success-check::after{width:60px;height:33px;border-width:0 0 14px 14px;left:24px;top:30px}.success-card h1{font-size:clamp(27px,7.5vw,44px);letter-spacing:-1px}.success-thanks{font-size:16px;white-space:normal}.success-thanks img{width:110px}.success-description{font-size:15px}.receipt-note{font-size:14px;padding:13px;gap:8px}.envelope{width:46px;height:32px}.page-success .site-footer{height:25px}}

/* ===== 08. Fotografía móvil: espacio propio para evitar superposiciones ===== */
@media(max-width:767px){.page-form .hero-people{position:relative;top:auto;right:auto;display:block;width:230px;height:auto;margin:-10px auto 16px;object-fit:contain;z-index:0}}

/* ===== 09. Calendario móvil y fotografía superior de Pantalla 2.0 ===== */
.flatpickr-calendar{z-index:1050;font-family:var(--font-main);max-width:calc(100vw - 24px)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--brand-red);border-color:var(--brand-red)}
input[data-validation-proxy]{background-color:#fff;cursor:pointer}
.page-data[data-page='datos'] .hero-people{position:absolute;top:0;margin:0;right:6.8%}
@media(max-width:767px){.page-data[data-page='datos'] .hero-people{top:0;right:0;width:210px;height:175px;object-fit:contain;object-position:top right;z-index:0}}