* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


:root {
	--primary-color: rgb(238, 228, 217);
	--secondary-color: #6c757d;
	--success-color: #28a745;
	--danger-color: #dc3545;
	--warning-color: #ffc107;
	--info-color: #17a2b8;
	--hover-color: rgb(255, 184, 47);
	--back-color: #ECEAEA;

	--boder1-color: #EF7B45;
	--shadow1-color: 0 0 0 0.25rem rgba(239, 123, 69, .25);

	--font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-roboto: 'Roboto', sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;

	--spacing-unit: 8px;

	--font-family-nx: 'Kanit'
}
main {
	/* margin-top: 60px;*/ /* Debe coincidir con la altura del header */
	background: #ECEAEA;
}
body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: #212529;

	height: 100%;
}
.nav-link.active {
	color: var(--hover-color) !important;
}

/* h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: #212529;
} */
.page-title {
	font-size: 48px;
	font-weight: 700;
	color: #333333;

	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 8px rgba(232, 165, 52, 0.25); /* glow dorado sutil */

	letter-spacing: 0.5px;
	margin-bottom: 20px;
}
.section-title {
	font-size: 28px;
	font-weight: 700;
	color: #494948; /* dorado del branding */
	margin-top: 20px;
	margin-bottom: 10px;

	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70);
}
.section-text {
	font-size: 17px;
	color: #333;
	line-height: 1.6;
}

.section-text b {
	color: #111;
	font-weight: 700;
}
h1 {
	font-family: var(--font-family-nx);
	font-size: 55px !important;
}
h2 {
	font-family: var(--font-family-nx);
	font-size: 30px !important;
}
h3 {
	font-family: var(--font-family-nx);
	font-size: 25px !important;
}

p {
	margin-bottom: 1rem;
}

a {
	color: var(--boder1-color) !important;
	text-decoration: none;
}

a:hover {
	color: var(--primary-color-dark);
	text-decoration: underline;
}

.container {
	width: 100%;
	padding-right: var(--spacing-unit);
	padding-left: var(--spacing-unit);
	margin-right: auto;
	margin-left: auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -var(--spacing-unit);
	margin-left: -var(--spacing-unit);
}

.col {
	flex: 1;
	padding-right: var(--spacing-unit);
	padding-left: var(--spacing-unit);
}
.cont-900 {
	width: 900px !important;
}
.form-control:focus {
	border-color: var(--boder1-color) !important;
	box-shadow: var(--shadow1-color) !important;
}
.form-select:focus {
	border-color: var(--boder1-color) !important;
	box-shadow: var(--shadow1-color) !important;
}
.form-check-input:checked {
	border-color: var(--boder1-color) !important;
	background-color: var(--boder1-color) !important;
	box-shadow: var(--shadow1-color) !important;
}
.form-check-input:focus {
	border-color: var(--boder1-color) !important;
	box-shadow: var(--shadow1-color) !important;
}
.btnNx {
	width: 250px;
	height: 50px;
	border: 0 solid;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
	outline: 1px solid;
	outline-color: rgba(35, 26, 160, 0.5);
	outline-offset: 0;
	text-shadow: none;
	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
	background: url('../img/btnNx.png');
	color: #fff;
}
.btnNx:hover {
	border: 1px solid;
	box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
	outline-color: rgba(255, 255, 255, 0);
	outline-offset: 15px;
	text-shadow: 1px 1px 2px whitesmoke;
}
.text-yellow {
	color: var(--hover-color) !important;
}


/*Header*/
.nav-item a:not(.cmn-btn):not(.border-btn) {
	color: var(--primary-color) !important;
	text-decoration: none;
}
.nav-link:hover {
	color: var(--hover-color) !important;

}
.dropdown-item:hover {
	background-color: var(--hover-color) !important; /* Color de fondo al pasar el mouse */
	color: #000000 !important; /* Color del texto al pasar el mouse */

}
.h-11 {
	height: 2.75rem;
}
/*form-container*/
.form-container {
	max-width: 400px; /* Define el ancho máximo */
	margin: auto; /* Centra el formulario */
	padding: 54px;
	box-shadow: 5px;
	border: 1px solid #c6cfd8;
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

}
.form-container2 {
	background: #ffffff;
	border-radius: 20px;
	padding: 40px 50px;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 35px rgba(232, 165, 52, 0.12); /* glow dorado suave */

	border: 1px solid rgba(255, 199, 118, 0.25);

}
/*btn-nx*/
.btn-nx{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:220px;
    height:52px;

    border-radius:10px;
    border:none;

    font-weight:700;
    font-size:1rem;

    color:white;

    background:linear-gradient(
        180deg,
        #ffb347 0%,
        #ff8c00 55%,
        #e06a00 100%
    );

    box-shadow:
        0 0 14px rgba(255,140,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.4);

    transition:all .25s ease;
}


.btn-nx:hover{
    transform:translateY(-1px);

    box-shadow:
        0 0 20px rgba(255,140,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.5);

    background:linear-gradient(
        180deg,
        #ffc15e 0%,
        #ff9c1a 55%,
        #e06a00 100%
    );
}
.btn-nx:active{
    transform:translateY(1px);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.35);
}
/*Contenedor*/
.contenedor {
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
	padding: 30px 84px !important;
	background: #fff !important;
	transform: translateY(-10em);

}
.head-content {
	height: 600px;
}
/* 🔹 Base común */
.cmn-btn,
.border-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 8px 20px;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	font-family: var(--font-family-base, system-ui);

	border-radius: 5px;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;

	color: inherit !important; /* ← esto evita que Bootstrap u otros lo fuercen a blanco */
}

/* 🔸 Registrar (botón lleno) */
.cmn-btn {
	background: linear-gradient(180deg, #FF6E04 -1.75%, #FFC876 100.23%);
	border: 2px solid transparent;
	color: #111218 !important; /* ← texto NEGRO */
}

.cmn-btn:hover {
	background: linear-gradient(180deg, #FFC876 -1.75%, #FF6E04 100.23%);
}

/* 🔸 Login (botón bordeado) */
.border-btn {
	background: linear-gradient(#111218, #111218) padding-box, linear-gradient(180deg, #FF6E04 -1.75%, #FFC876 100.23%) border-box;
	border: 2px solid transparent;
	color: #FF9A2F !important; /* ← texto NARANJO */
}

.border-btn:hover {
	background: linear-gradient(#1B1C22, #1B1C22) padding-box, linear-gradient(180deg, #FFC876 -1.75%, #FF6E04 100.23%) border-box;
}

.register-title {
	font-size: 48px;
	font-weight: 700;
	text-align: center;
	color: #1A1A1A;

	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 0 10px rgba(232, 165, 52, 0.25);

	margin-bottom: 40px;
}


.nav > li > a {
	margin-right: 10px; /* Añade margen derecho para separar los botones */
	text-decoration: none;
}

.nav > li > a:last-child {
	margin-right: 0; /* Quita el margen derecho del último botón */
}
/*Modal*/
.modal {
	z-index: 1040 !important; /* Ensure modal is above the backdrop */
}
.modal-backdrop {
	z-index: 1030 !important; /* Ensure backdrop is below the modal */
}
/*Terms*/
.lista-numerada {
	counter-reset: list-counter; /* Resetea el contador */
	list-style: none; /* Elimina el estilo de lista predeterminado */
}
.lista-numerada li {
	counter-increment: list-counter; /* Incrementa el contador */
	margin-bottom: 0.5rem;
	position: relative;
	padding-left: 2em; /* Espacio para el número */
}
.lista-numerada li::before {
	content: counter(list-counter) "."; /* Muestra el número */
	font-weight: bold; /* Negrita */
	position: absolute;
	left: 0; /* Alinea el número a la izquierda */
}

/*Popular News*/
/* .popular-news{
    padding-top: 10%;
} */
.polpular-news-cont {
	padding-top: 3%;
}

.featured-news-wrapper {
	padding-top: 0.7em;
}
.featured-news-wrapper > p {
	text-transform: uppercase;
	font-family: Source Sans Pro, sans-serif;
}

/*Stats*/
.icon1 {
	width: 32px;
	height: 32px;
	margin: 16px 12px;
}
.fixed-background {
	background-image: url('../img/Captura\ de\ pantalla\ 2024-06-27\ 225758.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	align-items: center;


}
/*down-reg*/
.down-reg > h3 {
	color: aliceblue !important;
}
.down-reg > h2 {
	color: aliceblue !important;
}
.down-reg p {
	color: beige;
}


/*register*/
.formRegisterH2 {
	color: black !important;
	font-family: var(--font-family-nx);
	font-weight: 400;
	font-size: 40px;
	margin: 0 0 31px;
}

/*Events*/
.eventos {
	text-align: center;
	padding-top: 200px;

	font-family: var(--font-family-nx);
	font-size: 78px !important;
	font-weight: 600;
	letter-spacing: 3.5px;

	color: #F7E9C0;

	text-shadow: 0 0 15px rgba(255, 176, 71, 0.7), 0 0 30px rgba(227, 140, 20, 0.4), 0 4px 10px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.4);
}
th {
	background: gold !important;
}
td {
	background: #FCF9ED !important;
}
/*Table*/
table td {
	vertical-align: middle;
	text-align: center;
}

/*Drop down-*/
.drop-down02 {
	position: relative;
}
.drop-down02 .sub-menu02 {
	position: absolute !important;
	left: 100% !important;
	top: 0 !important;
}

.drop-down02 .dropdown-toggle {
	padding: 0.25rem 1.1rem !important;
}
/*Tooltip*/
.custom-tooltip {
	--bs-tooltip-bg: var(--hover-color);
	--bs-tooltip-color: var(--bs-white);
}
/*Top Botton*/
#topBtn {
	display: none; /* Oculto por defecto */
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	font-size: 24px; /* Tamaño del icono */
	border: none;
	outline: none;
	background-color: var(--boder1-color);
	color: white;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#topBtn:hover {
	background-color: #555;
}
/*Cards*/
/* .card:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    transform: scale(1.1);
  } */
.sinfo:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
	transform: scale(1.1);
}
#fb img {

	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
}
#dc img {

	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
}
.social-floating{

    position:fixed;
    right:20px;
    top:40%;

    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:9999;

}

.social-btn{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
    color:white;

    text-decoration:none;

    transition:0.3s;

    box-shadow:0 0 10px rgba(0,0,0,0.5);

}

.social-btn.discord{
    background:#5865F2;
    color:white !important;
    text-decoration: none !important;
}

.social-btn.facebook{
    background:#1877F2;
    color:white !important;
    text-decoration: none !important;
}

.social-btn:hover{

    transform:scale(1.15);

    box-shadow:
    0 0 10px rgba(255,140,0,0.6),
    0 0 20px rgba(255,140,0,0.5);

}

.status-bar {
	margin-top: 88px;


}
.status-img-size {
	width: 20px;
}


/*TreeSkill*/
.tree {
	font-size: 0.95rem;
}
.tree .node,
.tree .leaf {
	position: relative;
	padding: 0.25rem 0.5rem 0.25rem 1.25rem;
	border-radius: 0.5rem;
}

.tree .root {
	font-weight: 700;
	color: #111;
	background: rgba(13, 110, 253, .06);
}

.tree .node {
	font-weight: 600;
	color: #f59f00;
}

.tree .leaf {
	font-weight: 700;
	color: #a16b06; /* dorado */
}

.tree .branch {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 2px solid rgba(0, 0, 0, .08);
}
.tree .branch .leaf {
	margin-left: 3rem; /* ajusta a gusto */
}

.tree .node::before,
.tree .leaf::before {
	content: "";
	position: absolute;
	left: 0.45rem;
	top: 0.85rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: rgba(13, 110, 253, .35);
}

.tree .leaf::before {
	background: rgba(245, 159, 0, .8);
}

.tree .node:hover,
.tree .leaf:hover {
	background: rgba(0, 0, 0, .04);
}

.carousel-caption h1,
.carousel-caption p {
    text-shadow: 0 3px 8px rgba(0,0,0,0.8);
}

.carousel-item{
    position:relative;

}

.carousel-item::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40%;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    z-index:1;
}
.carousel-caption{
    z-index:2; /* ahora texto encima */
    position: relative; /* para activar el z-index */
}
/*Medias*/
.footer{
    background: linear-gradient(to bottom, #2b2b2b, #1f1f1f) !important;
}


@media(max-width: 767.98px) {
	.container {
		padding-right: var(--spacing-unit-half);
		padding-left: var(--spacing-unit-half);
	}
	.formRegisterH2 {
		font-size: 30px;
	}
	.contenedor {
		padding: var(--bs-padding, 1rem) !important;
	}
	.drop-down02 .sub-menu02 {
		position: static !important;
	}
	h1 {
		font-size: 30px !important;
		display: flex;
		justify-content: center;
	}

	.stacked {
		display: block;
		width: 100%;
	}
	.stacked td {
		display: block;
		width: 100%;
		text-align: left;
		padding: 8px 0;
	}
	.btnsreg {
		padding-bottom: 10px;
	}
	.social-icon {
		padding-bottom: 15px;
	}

    .carousel-caption a {
        display: none !important;
    }
    .carousel-caption h1{
        font-size: 20px !important;

    }
     .carousel-caption p {
        text-align: center;
        color: #fff!important;
    }


}

@media(min-width: 768px) {
	.container {
		max-width: 720px;
	}

}

@media(min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media(min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}


/* ==========================================
   L2 APELLA - CAROUSEL MOBILE
   ========================================== */

@media (max-width: 767px) {

    #myCarousel {
        margin-bottom: 0 !important;
    }

    #myCarousel .carousel-item {
        position: relative;
        height: 360px;
        overflow: hidden;
    }

    /* Imagen de fondo */
    #myCarousel .carousel-item > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* Oscurecimiento para legibilidad */
 #myCarousel .carousel-item::after {
    content: none;
}

    /* Contenedor de texto */
    #myCarousel .carousel-item > .container {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 0 42px;
    }

    /* Caption Bootstrap */
    #myCarousel .carousel-caption {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 !important;
        margin: 0;
        text-align: center !important;
        color: #fff;
    }

    #myCarousel .carousel-caption h1 {
        font-size: 27px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 12px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    }

    #myCarousel .carousel-caption p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 16px;
        text-shadow: 0 2px 6px rgba(0,0,0,0.9);
    }

    /* Botón de registro */
    #myCarousel .animated-button1 {
        display: inline-block;
        max-width: 100%;
        font-size: 14px;
        padding: 12px 18px;
        margin: 0;
    }

    /* Indicadores */
    #myCarousel .carousel-indicators {
        bottom: 8px;
        z-index: 3;
    }

    /* Flechas */
    #myCarousel .carousel-control-prev,
    #myCarousel .carousel-control-next {
        width: 9%;
        z-index: 3;
    }
}