body {background: radial-gradient(circle at center,#081018 0%,#020509 100%);color:#fff;font-family:'Orbitron',sans-serif;margin:0;padding:0;}
.donaciones-section {min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1rem;background:url('../recursos/fondo-reglas.png') center/cover no-repeat;}
.donaciones-container {text-align:center;max-width:1200px;}
.titulo-principal {color:#FFCC00;font-size:2.2rem;margin-bottom:0.8rem;text-shadow:0 0 10px rgba(255,204,0,0.6);}
.intro {max-width:700px;margin:0 auto 2.5rem;color:#CFEFFF;font-size:1.1rem;line-height:1.6;}
.packs-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;justify-items:center;}
.pack-card {background:rgba(0,0,0,0.65);border:1px solid rgba(255,255,255,0.15);border-radius:10px;padding:2rem 1.2rem;width:100%;max-width:300px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 0 12px rgba(255,255,255,0.08);display:flex;flex-direction:column;justify-content:space-between;}
.pack-card:hover {transform:translateY(-8px);box-shadow:0 0 20px rgba(255,204,0,0.3);}
.pack-card h2 {margin-bottom:.5rem;font-size:1.4rem;color:#FFCC00;}
.pack-desc {color:#A8EFFF;font-size:1rem;margin-bottom:1rem;}
.pack-card ul {list-style:none;padding:0;margin:0 0 1rem 0;text-align:left;color:#CFEFFF;flex-grow:1;}
.pack-card ul li {margin-bottom:.5rem;font-size:.95rem;}
.precio {font-size:1.5rem;font-weight:bold;color:#FFCC00;margin-bottom:.8rem;}
.btn-comprar {display:inline-block;background:#FFCC00;color:#000;padding:.5rem 1.2rem;border-radius:8px;text-decoration:none;font-weight:bold;transition:all .3s ease;}
.btn-comprar:hover {background:#FFD633;transform:scale(1.05);}
.bronce {border-color:#cd7f32;}
.plata {border-color:#c0c0c0;}
.oro {border-color:#FFD700;}
.battlepass {border-color:#7BE2FF;}
.nota {font-size:.9rem;color:#bbb;margin-top:2rem;line-height:1.4;}
@media(max-width:768px){.titulo-principal{font-size:1.8rem;}.intro{font-size:1rem;}.pack-card{padding:1.6rem;}.precio{font-size:1.3rem;}}


.modal-donacion {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(5,15,25,0.95);backdrop-filter:blur(6px);align-items:center;justify-content:center;z-index:1000;}
.modal-donacion-content {background:linear-gradient(135deg,rgba(10,30,45,0.95),rgba(20,50,65,0.95));border:1px solid rgba(255,204,0,0.3);box-shadow:0 0 25px rgba(255,204,0,0.4);border-radius:12px;padding:2rem;color:#fff;text-align:left;width:90%;max-width:450px;position:relative;animation:fadeIn .3s ease-out;}
.modal-donacion-content h2 {color:#FFCC00;margin-top:0;margin-bottom:1rem;text-align:center;}
.modal-donacion-content p {font-size:.95rem;color:#CFEFFF;text-align:center;margin-bottom:1.5rem;}
.modal-donacion-content label {display:block;margin-bottom:.4rem;font-weight:bold;color:#FFCC00;font-size:.9rem;}
.modal-donacion-content input {width:100%;padding:.6rem;border:none;border-radius:6px;margin-bottom:1rem;background:rgba(255,255,255,0.1);color:#fff;outline:none;font-size:.95rem;}
.modal-donacion-content input:focus {background:rgba(255,255,255,0.15);box-shadow:0 0 6px rgba(255,204,0,0.5);}
.modal-buttons {display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;}
.btn-cancelar,.btn-compra {flex:1;padding:.6rem 1rem;border:none;border-radius:8px;font-weight:bold;cursor:pointer;transition:all .3s ease;}
.btn-cancelar {background:#444;color:#fff;}
.btn-cancelar:hover {background:#666;}
.btn-compra {background:#FFCC00;color:#000;}
.btn-compra:hover {background:#FFD633;}
.cerrar-donacion {position:absolute;top:10px;right:15px;font-size:1.5rem;color:#FFCC00;cursor:pointer;transition:color .2s ease;}
.cerrar-donacion:hover {color:#fff;}
@keyframes fadeIn {from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.Scon{font-size: 30px;color: #ff6565;padding: 20px;padding-top: 40px;padding-bottom: 40px;}

.inputcont{ position:relative; }
.modal-donacion-content input.input-validado { background:rgba(0,255,100,0.05); border-color:#00ff88; color:#fff; }
.check-valido { color:#00ff88; font-size:1.2rem; margin-left:.5rem; position:relative; top:2px; font-weight:bold; text-shadow:0 0 6px #00ff88; }
.check-valido{ position: absolute; right: -5px; top: 25px;}

/* Contenedor del botón PayPal */
#paypal-button-container { width:50%; text-align:center; margin-top: 0px; }
.paypal-button { width:100%!important; border-radius:8px!important; }
/* Reforzar el estilo dorado */
.paypal-button { background:#ffc107!important; border-radius:8px!important; box-shadow:0 0 10px rgba(255,193,7,0.4)!important; }
/* Opcional: efecto hover */
.paypal-button:hover { filter:brightness(1.15); }



/*Sqal2*/
.swal2-popup { background: radial-gradient(circle at top left, rgba(10,15,25,0.95), rgba(0,0,0,0.95)); border: 1px solid rgba(255,204,0,0.4); box-shadow: 0 0 25px rgba(255,204,0,0.2); border-radius: 10px; color: #fff; font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; } 
.swal2-title { color: #FFCC00 !important; text-shadow: 0 0 10px rgba(255,204,0,0.6); font-size: 1.5rem; } 
.swal2-html-container { color: #CFEFFF; font-size: 1rem; text-shadow: 0 0 6px rgba(255,255,255,0.1); } 
.swal2-confirm { background: linear-gradient(135deg, #FFCC00, #FFD633); color: #000 !important; font-weight: bold; border-radius: 8px !important; box-shadow: 0 0 10px rgba(255,204,0,0.4); transition: all 0.2s ease-in-out; } 
.swal2-confirm:hover { background: linear-gradient(135deg, #FFD633, #FFF07A); box-shadow: 0 0 15px rgba(255,204,0,0.6); } 
.swal2-icon { border: none !important; box-shadow: none !important; } 
.swal2-icon.swal2-success { color: #00ff99; text-shadow: 0 0 8px #00ff99; } 
.swal2-icon.swal2-warning { color: #ffcc00; text-shadow: 0 0 8px #ffcc00; } 
.swal2-icon.swal2-error { color: #ff5555; text-shadow: 0 0 8px #ff5555; } 
.swal2-show { animation: swalFadeIn 0.4s ease-out; } 
@keyframes swalFadeIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1); } } 
@media (max-width: 600px) { .swal2-popup { width: 90% !important; padding: 1rem !important; } .swal2-title { font-size: 1.3rem !important; } }
.swal2-confirm.swal2-styled.swal2-success { background: linear-gradient(135deg, #00ff99, #33ffaa); }
.swal2-confirm.swal2-styled.swal2-error { background: linear-gradient(135deg, #ff5555, #ff7777); }
.swal2-confirm.swal2-styled.swal2-warning { background: linear-gradient(135deg, #FFCC00, #FFD633); }


/*View details*/
.modal-detalles { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); overflow-y:auto; z-index:9999; padding:20px; box-sizing:border-box; }
.modal-detalles.mostrar { display:flex; align-items:center; justify-content:center; }
.modal-detalles-content { position:relative; background:#111; color:#f0f0f0; border-radius:10px; max-width:650px; width:92%; max-height:90vh; overflow-y:auto; padding:24px 26px; box-shadow:0 0 25px rgba(255,193,7,0.35); border:1px solid rgba(255,193,7,0.15); }
.cerrar-detalles { position:absolute; top:10px; right:15px; font-size:24px; color:#ffc107; cursor:pointer; transition:0.2s; }
.cerrar-detalles:hover { color:#fff; }
.btn-detalles { display:inline-block; background:#00000000; color:#ffc107; text-decoration:underline; margin-bottom:10px; font-weight:600; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; margin-top:8px; transition:0.2s; }
.btn-detalles:hover { filter:brightness(1.15); }
#tituloPack { color:#ffc107; text-align:center; font-size:1.5rem; margin-bottom:10px; letter-spacing:0.5px; text-shadow:0 0 8px rgba(255,193,7,0.5); }
#contenidoPack h4 { color:#ffc107; font-size:1.1rem; margin-top:15px; margin-bottom:8px; border-bottom:1px solid rgba(255,193,7,0.2); padding-bottom:4px; }
#contenidoPack p { margin-bottom:10px; }
#contenidoPack ul { margin:0 0 10px 18px; padding:0; }
#contenidoPack li { margin-bottom:4px; list-style:disc; font-size:.93rem; color:#CFEFFF; line-height:1.45; }
.etiqueta-quality { display:inline-block; background:#ffc1077d; color:#000; font-weight:600; font-size:0.8em; border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle; box-shadow:0 0 4px rgba(255,193,7,0.4); }
