:root{--primary:#F37021;--primary-dark:#d65a10;--text-main:#333333;--text-muted:#666666;--bg-body:#f7f7f7;--white:#ffffff;--border:#e0e0e0;--shadow:0 4px 20px rgba(0,0,0,0.05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Roboto',sans-serif;background-color:var(--bg-body);color:var(--text-main);line-height:1.6;display:flex;flex-direction:column;min-height:100vh}header{background-color:var(--white);padding:1rem 5%;border-bottom:1px solid var(--border)}.header-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:10px;text-decoration:none}.logo img{height:60px;width:auto}.main-container{max-width:1200px;margin:3rem auto;padding:0 5%;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:2rem}.info-column{flex:1;min-width:300px;padding-top:1rem}.info-column h1{font-size:2rem;color:var(--text-main);margin-bottom:1rem;font-weight:600}.info-column p{font-size:1.1rem;color:var(--text-muted);margin-bottom:1rem}.info-column a{color:var(--primary);text-decoration:none;font-weight:600}.info-column a:hover{text-decoration:underline}.login-card{background:var(--white);padding:2.5rem;border-radius:8px;box-shadow:var(--shadow);text-align:center;position:relative;min-height:500px;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:450px}.form-step{transition:opacity 0.4s ease,transform 0.4s ease;width:100%}.form-step.hidden{display:none;opacity:0;transform:translateY(10px)}.form-step.active{display:block;opacity:1;transform:translateY(0)}#step-login{text-align:center}#step-login h2{font-size:1.5rem;margin-bottom:1.5rem;color:var(--text-main);font-weight:600}.card-selector{display:flex;gap:1rem;margin-bottom:1.5rem;justify-content:center}.radio-option{flex:1}.radio-option input{display:none}.radio-option label{display:block;padding:10px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--text-muted);transition:all 0.2s}.radio-option input:checked+label{border-color:var(--primary);background-color:rgb(243 112 33 / .05);color:var(--primary);font-weight:600}.input-group{text-align:left;margin-bottom:1rem}.input-group label{display:block;font-size:.85rem;font-weight:500;color:var(--text-muted);margin-bottom:.5rem}.input-group input{width:100%;padding:12px;border:1px solid var(--border);border-radius:6px;font-size:1rem;color:var(--text-main);transition:border 0.2s;box-sizing:border-box;font-family:Roboto}.input-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(243 112 33 / .1)}.btn-primary{width:100%;padding:12px;background:var(--primary);color:var(--white);border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background 0.2s;font-family:Roboto}.btn-primary:hover{background:var(--primary-dark)}.payment-row{display:flex;gap:1rem;margin-bottom:0rem}.payment-col{flex:1}.select-custom{width:100%;padding:12px;border:1px solid var(--border);border-radius:6px;font-size:1rem;background-color:var(--white);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;font-family:Roboto}.input-money{position:relative}.input-money span{position:absolute;left:12px;top:49%;transform:translateY(-50%);color:var(--text-muted);font-weight:600}.input-money input{padding-left:30px;font-weight:600;color:#666}.payment-form input,.payment-form select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:6px;font-size:1rem;color:var(--text-main);background-color:#fff;transition:all 0.2s ease;font-family:'Roboto',sans-serif;box-sizing:border-box;margin-bottom:10px}.payment-form input:focus,.payment-form select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(243 112 33 / .1)}.card-logo-container{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:45px;height:30px;pointer-events:none;z-index:10;display:flex;align-items:center;justify-content:center}.card-logo-container img{width:100%;height:100%;object-fit:contain;filter:grayscale(20%);transition:filter 0.3s}.card-logo-container img:hover{filter:grayscale(0%)}.payment-form input.has-logo{padding-right:65px}.error{color:#dc3545;font-size:.8rem;display:none;margin-top:-6px;font-weight:500;line-height:1.4;text-align:left}.error.active{display:block;animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.terms{margin-top:20px;font-size:.9rem;display:flex;align-items:center;flex-direction:row;justify-content:center;align-items:center;gap:10px;color:var(--text-muted)}.terms input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;margin:0}.terms label{cursor:pointer;user-select:none;font-weight:500}.terms-note{text-align:center;margin-top:15px;font-size:.75rem;color:#666;font-weight:500;line-height:1.5;padding:12px;background-color:#f9f9f9;border-radius:6px;border-left:3px solid var(--primary)}.submit-btn{width:100%;background-color:var(--primary);color:#fff;padding:14px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:15px;transition:background 0.2s,transform 0.1s;font-family:'Roboto',sans-serif}.submit-btn:hover:not(:disabled){background-color:var(--primary-dark);transform:translateY(-1px)}.submit-btn:disabled{background-color:#e0e0e0;color:#999;cursor:not-allowed;transform:none}.btn-back{background:#fff0;color:var(--text-muted);border:1px solid var(--border);margin-top:10px;width:100%;padding:12px;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all 0.2s;font-family:'Roboto',sans-serif}.btn-back:hover{background:#f0f0f0;color:var(--text-main);border-color:#ccc}.payment-logos{display:flex;justify-content:center;gap:20px;margin:0 0 25px 0;flex-wrap:wrap;opacity:.8}.payment-logos img{height:32px;width:auto;max-width:80px;transition:opacity 0.2s;filter:grayscale(100%)}.payment-logos img:hover{opacity:1;filter:grayscale(0%)}.success-container,.error-container{text-align:center;animation:fadeIn 0.5s ease-out;max-width:100%}.icon-circle{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem auto;font-size:2.5rem;color:#fff;box-shadow:0 4px 15px rgb(0 0 0 / .15)}.icon-circle.success{background:linear-gradient(135deg,#28a745,#218838)}.icon-circle.error{background:linear-gradient(135deg,#dc3545,#c82333)}.receipt-box{background:#f8f9fa;border:1px dashed var(--border);border-radius:8px;padding:1.2rem;margin:1.5rem 0;text-align:left;font-size:.9rem;color:var(--text-muted)}.receipt-box strong{color:var(--text-main)}.error-receipt{background:#fff5f5;border:1px solid #ffcdd2}.error-receipt strong{color:#c62828}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.details-grid div{display:flex;flex-direction:column}.details-grid span{font-size:.8rem;color:#888;margin-bottom:2px}.details-grid strong{font-size:.9rem;color:var(--text-main)}.full-width{grid-column:span 2}.form-step.hidden{display:none;opacity:0;transform:translateY(10px)}.form-step.active{display:block;opacity:1;transform:translateY(0)}#btnDownloadReceipt{background:linear-gradient(135deg,#3c754c,#3c754c);border:none;box-shadow:0 4px 10px rgb(40 167 69 / .3);transition:transform 0.2s,box-shadow 0.2s}#btnDownloadReceipt:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgb(40 167 69 / .4)}.downloading{pointer-events:none;opacity:.7}footer{background:#3C3C3C;color:#fff;padding:2rem 5% 1rem;margin-top:auto;border-top:1px solid var(--border)}.footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.footer-col h4{color:#fff;margin-bottom:1rem;font-size:1.1rem}.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:.5rem}.footer-col a{color:#fff;text-decoration:none;font-size:.9rem;transition:color 0.2s}.footer-col a:hover{color:#fff}.footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1rem;border-top:1px solid var(--border);text-align:center;font-size:.85rem}@media (max-width:767px){.main-container{margin:1rem auto;padding:0 1rem}.info-column{min-width:100%;text-align:center}.login-card{width:100%;max-width:100%;padding:1.5rem}.payment-row{gap:.5rem}.payment-col{width:100%}}.payment-form.has-logo{position:relative;width:100%}.card-logo-container{position:absolute;right:4px;top:42%;transform:translateY(-50%);width:60px;height:38px;border-radius:0;padding:4px;pointer-events:none;z-index:10;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-logo-container img{width:100%;height:100%;object-fit:contain;border-radius:6px;margin:0;padding:0;transition:all 0.3s ease;filter:grayscale(20%);display:block}.factura-contenedor{width:100%;max-width:600px;margin:20px auto}.btn-factura{background-color:#f67e1a;color:#fff;padding:12px 24px;border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:700;display:inline-block;transition:background-color 0.3s;max-width:100%;box-sizing:border-box}.btn-factura:hover{background-color:#e06d14}#facturaImagen{max-width:100%;height:auto;border:1px solid #ddd;padding:5px;box-sizing:border-box}.card-logo-container:hover img{filter:grayscale(0%);transform:scale(1.05)}.payment-form input.has-logo{padding-right:65px;padding-left:16px}.error-msg{display:block;color:red;font-size:.8rem;margin-top:4px;min-height:1em}input.invalid{border-color:red}.payment-methods{text-align:center;margin:24px 0}.payment-methods__title{font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5f6b7a;margin:0 0 12px;text-align:left}.payment-methods__list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;padding:0;max-width:440px;margin:0 auto}.payment-methods__item{display:flex;align-items:center;justify-content:center;width:88px;height:52px;padding:8px 12px;background:#fff;border:1px solid #e3e7ec;border-radius:8px;box-shadow:0 1px 2px rgb(16 24 40 / .06);transition:box-shadow 0.2s ease,transform 0.2s ease}.payment-methods__item:hover{box-shadow:0 4px 10px rgb(16 24 40 / .12);transform:translateY(-1px)}.payment-methods__item img{max-width:100%;max-height:100%;object-fit:contain}.payment-methods__note{font-size:.8rem;color:#6b7785;margin:12px 0 0}