/* GLOBAL STYLES
-------------------------------------------------- */
/* Styles by dgmarianaperez april.2025 - oct.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: #02cffd; /*#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, .nav-pills .nav-link {font-family: var(--text-font); font-size:16px; line-height: 1.28rem; font-weight: 400; font-optical-sizing: auto; font-style: normal; color:var(--txtW); margin:0; padding:0;}
main {padding: 68px 0 40px; flex: 1;}
main.container-fluid {max-width: 96%; margin: 0 auto;}
section {padding: 8px 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); height: 52px;}
.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;}
.idiomas {background-color: black;}

/* ::: 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;}
.btn-cancel {background-color: transparent; border: solid 1px var(--light-purple-neon); color: var(--light-purple-neon);}
.btn-cancel:hover, .btn-cancel:focus {background-color: transparent; border: solid 1px var(--bluer-color-light); color: var(--bluer-color-light);}
.btn-secondary {background-color: var(--bluer-color); opacity: 0.8;}
.btn-secondary:hover, .btn-secondary:focus {background-color: var(--bluer-color-light); color:#1a1a1a}
#lostPwdModal {background: rgba(0,0,0,0.6);}
#lostPwdModal .modal-content {height: 70vh;}
#lostPwdModal .modal-content, .offcanvas, #checkoutPage .modal-content {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 (Login Form) ::: */
.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: 28px;}
.connected {width: 28px; height: 28px; 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.02em; line-height: 1em; 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;} */
.gamesCatalog .col {padding: 16px;}
.gamesCatalog .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;  z-index: 10;}
.card .heart:hover, .card .heart:focus {border:0; position: absolute; top:10px; right: 10px; background: var(--gradient-violet); color:var(--white)}
.gamesCatalog .card:hover::before {opacity: 1; }
.gamesCatalog .card:hover, .gamesCatalog .card:active, .gamesCatalog .card:focus { 
  --blur: 1.5rem; --box-blur: calc(0.5 * var(--blur));
  --glow: var(--light-blue-neon); color: var(--light-blue-neon, white); 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); 
  border: 4px solid currentColor; border-radius: 12px; 
}
.gamesCatalog .card-img {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;}
.gamesCatalog .card:hover .card-img, .gamesCatalog .card:active .card-img, .gamesCatalog .card:focus .card-img {border-radius: 8px; background: var(--col-navy); padding: 2px;}
.gamesCatalog .card:hover .heart, .gamesCatalog .card:active .heart, .gamesCatalog .card:focus .heart {top: 6px; right: 6px;}


/* categories badges */
/*.gamesCatalog .card-badges {position: absolute;  top: 10px; left: 10px; display: flex; gap: 4px; z-index: 10; }
.gamesCatalog .card .btn { z-index: 2;} */
.gamesCatalog .col {perspective: 800px;}
.gamesCatalog .card {transform: rotateY(-25deg); transition: transform 0.3s ease;}
.gamesCatalog .card:hover {transform: rotateY(0);}

/* Modal Styling */
.modal-sz {--bs-modal-width: 980px;}
.modal-dialog {margin: 0.8rem auto}
.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: 40px; height: 40px; margin-right: 0.8rem !important; 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); animation: neonAnim 10s alternate-reverse infinite; color: #0CDCFF; }
.modal .btn-play, .modal .btn-play:hover, .modal .btn-play:focus {font-size: 1rem; width: max-content; padding: 8px 12px; justify-content: space-around;}
.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: 140px; padding: 8px 12px;}
.modal .dataCarac p {margin: 0; padding: 0; line-height: 1.2rem; font-weight: 300; font-size: 0.92rem;}
.modal .dataCarac b {font-weight: 400; color:#a5b5c6}
.modal .gameSummary {height: 140px; padding: 8px 12px; overflow: auto; line-height: 1.28rem; font-weight: 300;}
.modal .dataCarac span:not(:last-child):after {content: ",";}


/* ::: CARRUSEL en modal ::: */
.modal-body .carousel-container {display: flex; gap: 1rem; margin-bottom: 1rem; padding: 0; height: 392px}
.modal-body .main-carousel {flex-grow: 1; aspect-ratio: 16 / 9;}
.modal-body .main-carousel { position: relative; z-index: 2; }
.modal-body .carousel-item iframe { position: relative; z-index: 3; pointer-events: auto; }
.modal-body .thumbnail-wrapper { z-index: 1; }
.modal-body .main-carousel .carousel-control-prev, .modal-body .main-carousel .carousel-control-next { z-index: 4; }
/* Reduce el área clicable lateral de las flechas para no superponer los controles del iframe */
.modal-body .main-carousel .carousel-control-prev,
.modal-body .main-carousel .carousel-control-next {
  width: 56px; /* área estrecha junto al borde */
  /* Deshabilitamos pointer-events en la franja completa para que el iframe reciba clics;
     solo el icono será interactivo (ver más abajo). */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.modal-body .main-carousel .carousel-control-prev-icon,
.modal-body .main-carousel .carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.32);
  box-shadow: 0 0 8px rgba(0,0,0,0.35);
  /* Hacemos solo el icono clicable */
  pointer-events: auto;
}
/* On small screens keep controls slightly larger but still narrow */
@media only screen and (max-width: 767px) {
  .modal-body .main-carousel .carousel-control-prev,
  .modal-body .main-carousel .carousel-control-next { width: 44px; }
  .modal-body .main-carousel .carousel-control-prev-icon,
  .modal-body .main-carousel .carousel-control-next-icon { width: 34px; height: 34px; background-size: 34px 34px; }
}
.modal-body .carousel-item, .modal-body .carousel-item img, .modal-body .carousel-item iframe {width: 100%; height: 100%; object-fit: contain;}
.modal-body .carousel-item iframe {border: 0;}
.modal-body .carousel-item {height: 392px;}

/* ==== Estilos específicos para el login de UnityKernel ==== */
.unity-login-card {
  max-width: 420px;
  width: 100%;
  background: rgba(10,18,35,0.85);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.unity-login-title {
  font-family: var(--title-font);
  color: var(--txtW);
  font-size: 1.5rem;
  margin-bottom: 0;
}
.unity-login-subtitle {
  color: var(--main-blue); /* mismo tono que enlaces '¿No tienes cuenta?' */
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* Aumentar especificidad para sobreescribir utilidades como .text-muted */
.text-muted.unity-login-subtitle {
  color: var(--main-blue) !important;
}

@media only screen and (max-width: 576px) {
  .unity-login-card { padding: 1rem; }
  .unity-login-title { font-size: 1.25rem; }
}
.modal-body .thumbnail-wrapper {flex-shrink: 0; width: 160px; display: flex; flex-direction: column;}
.modal-body .thumb-nav-btn {width: 100%; border-radius: 0;}
.modal-body .thumbnail-nav {display: flex; flex-direction: column; gap: 0.48rem; margin: 8px 0; overflow-y: auto; /* o hidden si se quiere ocultar el scrollbar */
  height: 300px; /* Altura fija para el contenedor de miniaturas */
  scrollbar-width: none; -ms-overflow-style: none;}
.modal-body .thumbnail-nav::-webkit-scrollbar { display: none; }
.modal-body .thumbnail-nav img {width: 100%; height: auto; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s ease;}
.modal-body .thumbnail-nav img.active {border-color: var(--light-blue-neon);}
.modal .thumb-nav-btn {color: var(--light-purple-neon); border-color: var(--light-purple-neon)}


/* ::: CARRUSEL anuncios ::: */
.ads .carousel-indicators {margin-bottom: 0;}
.ads .carousel-indicators button {width: 8px !important; height: 8px !important; border: 2px solid var(--light-blue-neon); border-radius: 50%; margin: 0 4px 4px; background: transparent;
-webkit-box-shadow: 0px 0px 2px 0px #b5fbff; -moz-box-shadow: 0px 0px 2px 0px #b5fbff; box-shadow: 0px 0px 2px 0px #b5fbff }
.ads .carousel-indicators button.active {border: 2px solid var(--light-purple-neon);}


/* ::: PLANES ::: */
.cardPlan {position: relative; margin: 0 auto; padding: 32px 16px; width: 100%; max-width: 300px; height: auto; 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: 4px 0 16px; text-align: center; font-size: 1.44em;}
.cardPlan h5::after {display:block; content: ""; width: 60px; height: 2px; background: var(--bluer-color); margin: 16px auto;}
.cardPlan ul {margin: 0; padding: 0 16px;}
.cardPlan ul li {display: flex; margin: 0 0 10px; padding: 0; list-style: none; color: var(--white); font-size: 1rem;}
.cardPlan i {font-size: 20px; margin-right: 8px;}
.cardPlan .card-body {padding: 0; flex: initial;}
.cardPlan .card-footer {border-top: 0;}
.desde::before {content:"Desde"; font-family: var(--text-font); font-size: 0.88rem; display: block; width: 100%; margin-top: -16px; font-weight: 500;}
.moneda {text-align: center; font-size: 0.92em;}


/* ::: 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;}
.promocode {border: 1px solid #404F69; border-right: 0; border-left: 0; padding: 12px 0 20px; margin-top: 20px;}
.bt-total {border-top: solid 1px var(--txtW); margin-top: 8px; padding-top: 8px;}
.payment-methods .btn {width: auto; padding: 12px 24px;}
.nav-pills .nav-link {width: auto; padding: 8px 16px; margin-right: 8px; border: solid 1px var(--bluer-color-light);}
/* pagos */
.list-pagos li p, .list-pagos li strong {font-size: .88rem; line-height: 1rem; margin: 4px 0px; color:#FFF;}
.list-pagos li p{color: rgba(255,255,255,.8);}
.cyber-card { background: var(--container-bg); border: 2px solid var(--bluer-color-light); border-radius: 0; padding: 2rem; box-shadow: 0 0 15px var(--purple-neon), inset 0 0 10px rgba(0, 255, 255, 0.2); backdrop-filter: blur(5px); }
.pago-option { background: transparent; border: 1px solid var(--bluer-color-light); border-radius: 4px; color: var(--text-color); margin-bottom: 8px; transition: all 0.3s ease-in-out; cursor: pointer; position: relative; }
.pago-option .pago-content {padding: 8px;}
.pago-option:hover { border-color: var(--light-purple-neon); box-shadow: 0 0 10px var(--purple-neon);}
.pago-option input[type="radio"] { display: none; }
.pago-option input[type="radio"]:checked + .pago-content { background-color: rgba(255, 0, 255, 0.1); color: #fff; border-color: var(--light-purple-neon); box-shadow: 0 0 4px var(--purple-neon);}
.pago-option input[type="radio"]:checked + .pago-content::before {font-family: var(--icons-font); content: '\F4F4'; font-size: 14px; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--light-blue-neon); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pago-name { padding-left: 8px; }
.pago-price { color: var(--light-blue-neon); font-size: 0.92rem;}
h5 .bi-caret-right-fill {font-size: 14px; margin-right: -4px;}



/* ::: LEGALES ::: */
.legalPage, .legalPage2 {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;}
.flexCentraX {display: flex; align-items: center;}
.wIcon { justify-content: center; max-width: 380px; margin: 0 auto 24px;}
.wIcon i {font-size: 24px; margin-left: 8px;}
.edit .form-check-input {margin-top: 5px;}
.edit a {margin-left: -8px; margin-top: -4px; font-size: 0.8rem;}


/* ::: LOGUED IN ::: */
.preTable {border: solid 1px var(--bluer-color-light); border-radius: 8px; padding:0;}
.table-darkBlue td, .table-darkBlue th { background-color: transparent; color: #dde2e6; text-align: center; border-bottom: 1px solid var(--bluer-color-light);}
.table-darkBlue th { background-color: rgba(255, 255, 255, .1); color: #dde2e6; }

/* 	::: 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.48rem;}
  .cardPlan h5 {height: 68px;}
  .cardPlan ul, .cardPlan .card-footer {padding: 0 4px;}
  .modal-body .thumbnail-wrapper {width: 80px;}
}
@media only screen and (max-width: 767px) {
  .cardPlan {min-height: 460px;}
  .planes .justify-content-evenly {flex-direction: column;}
  .cardPlan h5 {height: auto;}
  .modal-body .gameIcon {width: 28px; height: 28px;}
  .modal-body .carousel-container {display: initial;}
  .modal-body .thumbnail-wrapper {flex-shrink: 0; width: 100%; display: flex; flex-direction: row;}
  .modal-body .thumbnail-nav {flex-direction: row; margin: 8px 0 0; height: 32px; width: auto; gap: 0.08rem;}
  .modal-body .thumbnail-nav img {height: 32px; width: auto;}
  .modal-body .carousel-container, .modal-body .carousel-item {height: 420px;}
  .modal-body .thumb-nav-btn {display: none;}
  .modal .dataCarac {height: auto; margin-bottom: 20px;}
}
@media only screen and (max-width: 640px) {
  .cardPlan{width: 80%; min-height: auto; max-width: 400px; margin: 20px auto; padding: 32px 24px;}
  .modal-body .carousel-container, .modal-body .carousel-item {height: 240px;}
}
@media only screen and (max-width: 597px) {
  .nav-pills .nav-item, .nav-pills .nav-item button {width: 100%; margin-bottom: 4px;}
}

.modal-body .thumbnail-nav .thumb-wrapper { position: relative; display: block; width: 100%; cursor: pointer; }
.modal-body .thumbnail-nav .thumb-image { display: block; width: 100%; height: auto; object-fit: cover; border: 2px solid transparent; transition: border-color 0.2s ease; }
.modal-body .thumbnail-nav .thumb-wrapper.active .thumb-image { border-color: var(--light-blue-neon); }
.imagen-superpuesta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem; /* tamaño del icono */
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Small screens: reduce icon size */
@media only screen and (max-width: 767px) {
  .imagen-superpuesta { font-size: 1.2rem; padding: 4px; }
}