/* GLOBAL STYLES
-------------------------------------------------- */
/* Styles by dgmarianaperez jun.2025 */

/* ================================================== */



/* ::: GENERALES ::: */

* {margin:0; padding:0;}
:root{
  --title-font: 'Zen Dots', Helvetica, Arial, sans-serif; --text-font: 'Red Hat Text', Helvetica, Arial, sans-serif; --icons-font: 'bootstrap-icons', sans-serif; --white: #ffffff; --txtW:#dde2e6; --main-blue:#79e6ff; /*b7def9*/
  --light-blue-neon: #0CDCFF; --purple-neon: #8a2be2; --light-purple-neon: #c39bff; --col-light-navy:#0c2041;/* #13336a*/
  --col-navy:#0a1736; /* #0f224d */
  --col-dark-navy:#030417; /*#05122e*/
  --gradient-titles: 0deg, #8c97ff 10%, #afc8fe 25%, #e2ecff 45%; --gradient-navy-x2: linear-gradient(180deg, var(--col-navy) 5%, var(--col-dark-navy) 100%); --gradient-navy-x3: linear-gradient(180deg, var(--col-light-navy) 5%, var(--col-navy) 50%, var(--col-dark-navy) 100%); --gradient-violet: linear-gradient(0deg, #4229a6 0%, #8a2be2 100%); --gradient-violet-soft: linear-gradient(0deg, #5623d8 5%, #6a79fa 100%); --multi-gradient-1: linear-gradient(-30deg, #5623d8 0%, #8a2be2 30%, #6a79fa 60%, #e615af 100%); --multi-gradient-2: linear-gradient(35deg, #5623d8 10%, #6a79fa 25%, #62cb5c 50%, #00bbcb 75%, #ab79d6 90%); --bluer-color: #8c97ff; --bluer-color-light: #afc8fe; --whiteBlur: 0 0 7px #fff,  0 0 10px #fff, 0 0 21px #fff, 0 0 42px #fff; }
  @keyframes neonAnim {
    from {box-shadow: 0 0 18px rgba(12, 220, 255, .7), 0 0 48px rgba(12, 220, 255, .7), 0 0 108px rgba(12, 220, 255, .7);}
    to {box-shadow: 0 0 13px rgba(12, 220, 255, .7),  0 0 28px rgba(12, 220, 255, .7), 0 0 68px rgba(12, 220, 255, .7);}
  }
  @keyframes neonBlur {
    0% {text-shadow: -1px -1px 1px var(--bluer-color-light), -1px 1px 1px var(--bluer-color-light), 1px -1px 1px var(--bluer-color-light), 1px 1px 1px var(--bluer-color-light), 0 0 3px var(--bluer-color-light), 0 0 10px var(--bluer-color-light), 0 0 20px var(--bluer-color-light)}
    100% {text-shadow: -1px -1px 1px var(--bluer-color-light), -1px 1px 1px var(--bluer-color-light), 1px -1px 1px var(--bluer-color-light), 1px 1px 1px var(--bluer-color-light), 0 0 5px var(--bluer-color-light), 0 0 15px var(--bluer-color-light), 0 0 25px var(--bluer-color-light)}
  }

html {max-width: 100%;}
body {overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column;}
body, html, p {font-family: var(--text-font); font-size:16px; font-weight: 400; font-optical-sizing: auto; font-style: normal; color:var(--txtW); margin:0; padding:0;}
main {padding: 80px 0 40px; flex: 1;}
main.container-fluid {max-width: 96%; margin: 0 auto;}
section {padding: 24px 0;}
.dark-scheme {background: var(--col-dark-navy); background: var(--gradient-navy-x3);}
h1, h2, h3, h4:not(.accordion-header), h5, h6 {font-family: var(--title-font); font-weight: 400; font-optical-sizing: auto; font-style: normal;
background: linear-gradient(var(--gradient-titles)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
ul li, li {list-style-type: none;}
article p {margin-bottom: 24px;}
article ul {padding-left: 12px;}
article ul li, li {list-style-type: initial;}

/* Ambient Glows */
body::before, body::after {content: ''; position: fixed; border-radius: 50%; opacity: 0.4; filter: blur(100px); z-index: -1;}
body::before {width: 320px; height: 320px; background: radial-gradient(circle, var(--light-blue-neon) 40%, transparent 70%); top: -50px; left: -50px;}
body::after { width: 680px; height: 680px; background: radial-gradient(circle, #745b88 40%, transparent 50%); bottom: -340px; right: -200px;}

/* HEADER & NAV */
.navbar {background-color:var(--col-dark-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.32);}
.navbar-brand {font-weight: 600;}
.navbar-toggler {background: var(--col-dark-navy);}
.navbar li a, .nav li a {font-family: var(--text-font); color: var(--white); text-transform: uppercase; font-weight: 600; font-size: 0.88em; letter-spacing: 1px; display: block; padding: 8px 12px;}
.header .navbar li a:hover, .header .nav li a:hover {color: var(--white); animation: neonBlur 3s infinite;}
.navbar i {font-size: 1.48em; padding: 4px 8px;}

/* FOOTER */
footer {margin-top: auto;  background-color: transparent;}
footer, footer .copyright {border-top: 1px solid rgba(255, 255, 255, 0.2);}
footer p {font-size:12px; font-weight: 400; color:var(--txtW);}
footer .comunidad a {font-size: 1.2em;}
footer .legales a { font-weight: 400; font-size: 0.76em; color: var(--white);}
footer .legales a:hover {color: var(--txtW);}
.copyright {font-size: 0.8em;}
.scroll2top {float:right; width: 40px; height: 40px; background: var(--gradient-violet-soft); position: fixed; right: 24px; bottom: 32px;}
.scroll2top:hover, .scroll2top:focus {color:var(--white); border: 1px solid var(--light-blue-neon); text-shadow: var(--whiteBlur)}

/* COOKIE BANNER */
.cookies-banner {position: fixed; bottom: 20px; left: 20px; max-width: 360px; background: var(--col-navy); border: 1px solid var(--bluer-color); border-radius: 10px; padding: 20px; padding-right: 40px; z-index: 1050;}
.cookies-banner p {font-size: 0.9em; margin-bottom: 16px;}
.cookies-banner.cookies-banner_accepted {display: none;}


/* BOTONES Y FORMS  */
.btn-primary, .modal .btn-play, .btnColor {background: var(--gradient-violet); border-color: var(--light-purple-neon); box-shadow: 0 0 10px var(--purple-neon); letter-spacing: 1px; font-family: var(--title-font); font-size: 0.8em; color: var(--white);}
.btn-primary:hover, .btn-primary:focus, .modal .btn-play:hover {background: var(--gradient-violet-soft); border-color: var(--main-blue) 3px solid; box-shadow: 0 0 10px var(--light-purple-neon); color: var(--col-dark-navy); width: 100px; padding: 8px 4px; font-family: var(--title-font); font-size: 0.8em; color: var(--white);}
.btn-primary, .btn-primary:hover, .btn-primary:focus {padding: 12px; width: 100%;}
.btnSpace a, .btnSpace button {margin-right: 8px; margin-bottom: 8px;}
a, .btn-link, form a {text-decoration:none; color: var(--main-blue);}
a:hover, .btn-link:hover {color:var(--light-blue-neon);}
form .btn-primary {border-radius: 40px;}
#lostPwdModal {background: rgba(0,0,0,0.6);}
#lostPwdModal .modal-content {height: 70vh;}
#lostPwdModal .modal-content, .offcanvas {background: var(--gradient-navy-x3);}
input, textarea, select {background-color: var(--col-light-navy) !important; color: var(--white) !important; border-color: var(--bluer-color) !important; margin-bottom: 20px !important;}
::placeholder {color: var(--bluer-color-light) !important; opacity: 1 !important;}
.formReg {background-color: rgba(255, 255, 255, 0.1); border: solid 1px var(--bluer-color-light); padding: 40px 40px 60px; border-radius: 20px;}

/* OFFCANVAS */
.offcanvas-header {background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.32); padding: 12px 28px;}
.offcanvas-body {padding: 28px;}
.offcanvas p, form p {margin: 8px 0 12px;}
.offcanvas-end a, .offcanvas .btn-link, form a, form .btn-link {text-decoration: underline; font-size: 0.98em;}
.offcanvas li {padding: 8px;}
.offcanvas li:not(:last-child) {border-bottom: solid 1px var(--bluer-color-light);}
.offcanvas li a, .offcanvas li button {color:var(--txtW); text-decoration: none; background: none; border: none;}
.offcanvas li a:hover, .offcanvas li a:focus, .offcanvas li button:hover, .offcanvas li button:focus {color:var(--main-blue)}
.form-switch .form-check-input {background-color: rgba(222, 241, 255, 0.75) !important; height: 24px; width: 40px; margin-right: 8px;}
.form-switch .form-check-input::before {content:"";}
.form-switch .form-check-input:checked {background-color: #04c935 !important; filter:none; height: 24px; width: 40px; margin-right: 8px;}
.form-switch .form-check-input:checked::before {font-family: var(--icons-font); content: "\F26E";}
.loginLnks, .loginLnks p, .loginLnks a {font-weight: 300; font-size: 0.98em;}
.pwdGuide {margin: 8px auto 40px !important;}
.un-connected i {font-size: 36px;}
.connected {width: 36px; height: 36px; background: var(--gradient-violet-soft); border: solid 1px var(--bluer-color-light); border-radius: 50%; display: flex; align-content: center; align-items: center; justify-content: center;}
.connected span {font-size: 1.2em; font-family: var(--title-font); text-transform: uppercase;}

/* BORDES */
.box::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--box-border--border); -webkit-mask: var(--box--border__top-left) 0 0 / .88rem .88rem, var(--box--border__top) .88rem 0 / calc(100% - 1.25rem) .88rem, var(--box--border__top-right) 100% 0 / .88rem .88rem, var(--box--border__left) 0 .88rem / .88rem calc(100% - 1.25rem), var(--box--border__right) 100% .88rem / .88rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100% / .88rem .88rem, var(--box--border__bottom) .88rem 100% / calc(100% - 1.25rem) .88rem, var(--box--border__bottom-right) 100% 100% / .88rem .88rem; mask: var(--box--border__top-left) 0 0 / .88rem .88rem, var(--box--border__top) .88rem 0 / calc(100% - 1.25rem) .88rem, var(--box--border__top-right) 100% 0 / .88rem .88rem, var(--box--border__left) 0 .88rem / .88rem calc(100% - 1.25rem), var(--box--border__right) 100% .88rem / .88rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100% / .88rem .88rem, var(--box--border__bottom) .88rem 100% / calc(100% - 1.25rem) .88rem, var(--box--border__bottom-right) 100% 100% / .88rem .88rem;   -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;}

/* CONTENIDO */
main {margin-top: 56px;}


/* ANUNCIOS */
.carousel-indicators[data-bs-target] {width: 12px; height: 12px; margin-right: 8px; margin-left: 8px; border-radius: 50%; border: solid 1px #112449;}
.de-item {clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);}


/* CATÁLOGO DE JUEGOS  */
.sinFavs {width: 100%; text-align: left; color:#b7def9;}
.category-btn {color: var(--txtW); border-color: var(--light-blue-neon); transition: all 0.3s ease; margin-bottom: 8px; padding: 4px 8px;}
.category-btn:hover, .category-btn.active, .category-btn:focus {color: var(--txtW); background: var(--gradient-violet-soft); border-color: var(--light-blue-neon); box-shadow: 0 0 10px var(--light-blue-neon);}
.btnModhl, .btnModhl img {border: 0 !important;}
.gmesCatalog .col {padding: 16px;}
.gmesCatalog .card {background-color: rgba(0, 0, 0, 0.6); border: none; border-radius: 8px; overflow: hidden; position: relative; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;  cursor: pointer;}
.card .heart {display: block; width: 32px; height: 32px; border:0; border-radius: 50%; font-size: 20px; position: absolute; top:10px; right: 10px; background: rgba(0,0,0,0.6); padding: 4px;}
.card .heart:hover, .card .heart:focus {border:0; position: absolute; top:10px; right: 10px; background: var(--gradient-violet); color:var(--white)}
.gmesCatalog .card::before {content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: var(--multi-gradient-1); z-index: -1; border-radius: 10px; filter: blur(5px); opacity: 0.7;  transition: opacity 0.3s ease;}
.gmesCatalog .card:hover {transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);}
.gmesCatalog .card:hover::before {opacity: 1; }
.gmesCatalog .card-img-top {width: 100%; height: auto; object-fit: cover; border-radius: 8px; padding: 5px; background: var(--multi-gradient-1);  background-clip: padding-box; border: 2px solid transparent; display: block;}
.gmesCatalog .frame2 .card-img-top {background: var(--multi-gradient-2);}


/* categories badges */
.gmesCatalog .card-badges {position: absolute;  top: 10px; left: 10px; display: flex; gap: 4px; z-index: 10; }
.gmesCatalog .card .btn { z-index: 2;}


/* Modal Styling */
.modal-sz {--bs-modal-width: 1024px;}
.modal-content {background-color: var(--col-dark-navy); color: var(--text-color); border: none; border-radius: 15px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); position: relative; /*overflow: hidden; descomentado quita el neon-glow */}
.gameIcon {width: 60px; height: 60px; object-fit: cover; margin-bottom: 8px;}
.modal-neon-border::before {content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: var(--multi-gradient-1); z-index: -1; border-radius: 18px; /* mas largo que el modal para blur */ filter: blur(10px); opacity: 0.8;}

.modal-header, .modal-footer {border-color: rgba(255, 255, 255, 0.1);}

.modal .btn-close-white {filter: invert(1) grayscale(100%) brightness(200%); margin: 0; margin-left: 8px;}
.modal .btn-borde-neon {border: solid 1px var(--light-purple-neon); color: var(--light-blue-neon);}
.modal .btn-borde-neon:hover, .modal .btn-borde-neon:focus {background: var(--col-dark-navy); border: solid 1px var(--light-blue-neon); color: var(--gradient-navy-x2); animation: neonAnim 10s alternate-reverse infinite; color: #0CDCFF; }
.modal .btn-play, .modal .btn-play:hover, .modal .btn-play:focus {width: 112px; padding: 8px 4px; justify-content: space-around;}
.modal .btn-secondary {background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--white); transition: all 0.3s ease;}
.modal .btn-secondary:hover { background-color: var(--light-blue-neon); border-color: var(--light-blue-neon); color: var(--dark-navy); box-shadow: 0 0 10px var(--light-blue-neon);}
.modal .badge-custom {background-color: rgba(0, 0, 0, 0.7); color: var(--light-blue-neon); border: 1px solid var(--light-purple-neon); padding: 0.3em 0.6em; font-size: 0.75em; border-radius: 0.25rem;}
.modal .dataCarac {background-color: rgba(246, 192, 255, 0.2); border-radius: 8px; height: auto; min-height: 120px; padding: 8px 12px;}
.modal .dataCarac p {margin: 0; padding: 0;}


/* PROPUESTAS */
.rotados .col {perspective: 800px;}
.rotados .card {transform: rotateY(-25deg); transition: transform 0.3s ease;}
.rotados .card:hover {transform: rotateY(0);}
.sqCorner .card, .sqCorner img {border-radius: 0 !important;}
.bordesNeon .card { --blur: 1.5rem; --box-blur: calc(0.5 * var(--blur)); --glow: var(--color); background: var(--col-navy); border: 4px solid currentColor; border-radius: 12px; padding: 0.6em; filter: brightness(110%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 var(--box-blur) var(--glow), 0 0 var(--box-blur) var(--glow); color: var(--color, white);
}
.bordesNeon .card.nar {--color: #fd9402;}
.bordesNeon .card.ama {--color: #f8f04b;}
.bordesNeon .card.azu {--color: #02cffd;}
.bordesNeon .card.ver {--color: #48dd3b;}
.bordesNeon .card.ros {--color: #ff56d2;}
.bordesNeon .card.roj {--color: #e92424;}
.bordesNeon button {border-radius: 12px;}
.bordesNeon .card-img-top {width: 100%; height: auto;}


/* CHECKOUT */
.checkout-steps {margin-bottom: 40px; border-bottom: 1px solid var(--bluer-color);}
.checkout-steps .nav-link {color: var(--txtW);border: none;font-family: var(--title-font); font-size: 0.9em;}
.checkout-steps .nav-link.active, .checkout-steps .show > .nav-link {color: var(--main-blue); background-color: transparent; border-bottom: 3px solid var(--main-blue); font-weight: bold;}
.checkout-steps .nav-link:hover {border-color: transparent; color: var(--light-blue-neon);}
.order-summary { background-color: rgba(12, 32, 65, 0.7); border: 1px solid var(--bluer-color-light); padding: 24px;  border-radius: 12px;}
.order-summary hr {border-top: 1px solid var(--bluer-color-light);}
.payment-methods .btn {width: auto; padding: 12px 24px;}



/* PLANES */
.cardPlan {position: relative; margin: 0 auto; padding: 32px 16px; width: 100%; max-width: 300px; height: auto; min-height: 440px; border-radius: 12px; -webkit-box-shadow: 0 10px 15px rgba(0,0,0,.1); box-shadow: 0 10px 15px rgba(0,0,0,.1); -webkit-transition: .5s; transition: .5s; }
.cardPlan.bg1 {background: linear-gradient(-30deg,#2490e2 0%, #a32586 75%);}
.cardPlan.bg2 {background: linear-gradient(-30deg,#ff7b00 0%, #372dc2 75%);}
.cardPlan.bg3 {background: linear-gradient(-30deg,#2fe35c 0%, #5d2a84 75%);}
.cardPlan:hover {-webkit-transform: scale(1.1);  transform: scale(1.08);}
.cardPlan sup {margin-right: 4px;}
.cardPlan h4 {margin: 0; padding: 0; font-size: 1.72em; text-align: center;}
.cardPlan h4 span {font-size: 0.64em;}
.cardPlan h5 {margin: 12px 0 24px; text-align: center; font-size: 1.44em;}
.cardPlan h5::after {display:block; content: ""; width: 60px; height: 2px; background: var(--bluer-color); margin: 20px auto;}
.cardPlan ul {margin: 0 0 24px; padding: 0 16px;}
.cardPlan ul li {display: flex; margin: 0 0 10px; padding: 0; list-style: none; color: var(--white); font-size: 16px;}
.cardPlan i {font-size: 20px; margin-right: 8px;}
.cardPlan .card-body {padding: 0;}
.cardPlan .card-footer {border-top: 0;}
.moneda {text-align: center; font-size: 0.92em;}

/* LEGALES */
.legalPage {width: 80%;}
.section {border-top: solid 1px var(--bluer-color-light);}
.sideBtn {position: fixed; top:240px; left: 0; opacity: 1; z-index: 9;}
.sideBtn button {color:var(--txtW); width: 44px; height: 48px; padding: 0; margin-left: -2px; font-size: 24px; background: var(--gradient-violet-soft); border: 0; border-radius: 12px;}
.sideBtn.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {border-radius: 0px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
.sideBtn button:hover, .sideBtn button:focus {color:var(--white); }
.menuVertical {background: var(--gradient-navy-x3); padding: 8px 12px 12px; border-radius: 8px; left: 4px; border: solid 1px var(--bluer-color);}
.menuVertical li {padding: 12px 4px;}
.menuVertical li:not(:last-child) {border-bottom: 1px solid var(--bluer-color);}
.menuVertical li a {color: var(--txtW);}
.menuVertical li a:hover, .menuVertical li a:focus {color: var(--light-blue-neon);}
.accordion-item {border: 1px solid var(--main-blue);}
.accordion .accordion-button, .copyright p {color:var(--txtW);}
.accordion-button .bi {margin-left: auto; transition: transform 0.2s ease-in-out;}
.accordion {--bs-accordion-bg: rgba(153, 170, 187,0.08); }
.accordion .accordion-button:not(.collapsed) {background-color: var(--col-navy); --bs-bg-opacity:0.3;}
.accordion-button:not(.collapsed) .bi-plus-circle-fill {display: none;}
.accordion-button.collapsed .bi-dash-circle-fill {display: none;}
.accordion-button:not(.collapsed) .bi-chevron-down {transform: rotate(-180deg);}
.accordion-button::after {font-family: var(--icons-font); content: "\F282"; float: right; color: #fff; text-align: center; padding: 0 8px 0 8px; font-size: 15px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; width: 30px;}
.accordion .accordion-body {color: var(--txtW); background-color: var(--col-light-navy);  --bs-bg-opacity:1;}


/* 	RESPONSIVE */
@media only screen and (max-width: 1100px) {
  .modal-sz {--bs-modal-width: 92%;}
}
@media only screen and (max-width: 991px) {
  .legalPage {width: 86.8%;}
  .cardPlan {padding: 32px 8px;}
  .cardPlan h4 {font-size: 1.48em;}
  .cardPlan h5 {height: 68px;}
  .cardPlan ul, .cardPlan .card-footer {padding: 0 4px;}
}
@media only screen and (max-width: 767px) {
  .cardPlan {min-height: 460px;}
}
@media only screen and (max-width: 640px) {
  .planes .justify-content-evenly {flex-direction: column;}
  .cardPlan{width: 80%; min-height: auto; max-width: 400px; margin: 20px auto; padding: 32px 24px;}
}