/*
 * MU CHULO - skin clasico + moderno
 * Se carga despues de style.css y override.css, asi que pisa sus estilos.
 * Para volver al skin anterior alcanza con borrar este archivo.
 */

:root {
	--oro: #d6ab4f;
	--oro-claro: #f6dc95;
	--oro-oscuro: #8a6424;
	--fuego: #e2461b;
	--brasa: #ff8a2b;
	--fondo: #09070a;
	--panel: rgba(17, 13, 16, 0.78);
	--panel-claro: rgba(32, 25, 28, 0.72);
	--borde: rgba(214, 171, 79, 0.28);
	--borde-fuerte: rgba(214, 171, 79, 0.6);
	--texto: #ddd4c4;
	--texto-suave: #9c917f;
	--radio: 10px;
	--azul: #3d9bff;
}

/* ---------- BASE ---------- */
html {
	min-width: 0;
}
body {
	background-color: var(--fondo);
	color: var(--texto);
	padding-top: 72px;
}
body::before {
	/* viñeta oscura sobre el fondo para que se lea todo */
	content: "";
	position: fixed;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%);
	pointer-events: none;
	z-index: -1;
}
a {
	color: var(--oro);
}
a:hover, a:focus {
	color: var(--oro-claro) !important;
}
::selection {
	background: var(--fuego);
	color: #fff;
}
h1, h2, h3, h4, .page-title, .panel-title {
	font-family: 'Cinzel', serif !important;
	letter-spacing: 0.5px;
}

/* ---------- MENU DE ARRIBA ---------- */
.chulo-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 72px;
	z-index: 1000;
	background: linear-gradient(180deg, rgba(14,10,12,0.92), rgba(14,10,12,0.78));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 6px 30px rgba(0,0,0,0.6);
}
.chulo-topbar::after {
	/* linea dorada con brillo de fuego en el centro */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--oro-oscuro) 15%, var(--oro) 35%, var(--azul) 50%, var(--oro) 65%, var(--oro-oscuro) 85%, transparent);
}
.chulo-topbar-inner {
	max-width: 1240px;
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.chulo-brand img {
	height: 54px;
	width: auto;
	filter: drop-shadow(0 0 8px rgba(61,155,255,0.35));
	transition: transform .3s ease, filter .3s ease;
}
.chulo-brand:hover img {
	transform: scale(1.05);
	filter: drop-shadow(0 0 14px rgba(61,155,255,0.75));
}

#navbar {
	flex: 1;
	width: auto;
	border: 0;
	backdrop-filter: none;
}
#navbar > ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}
#navbar ul li {
	position: relative;
	font-size: 14px;
}
#navbar > ul > li > a {
	position: relative;
	display: block;
	padding: 10px 16px;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	white-space: nowrap;
	color: var(--texto) !important;
	border-radius: 6px;
	transition: color .25s ease, background .25s ease;
}
#navbar > ul > li > a::after {
	/* subrayado de fuego al pasar el mouse */
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 4px;
	height: 2px;
	background: linear-gradient(90deg, var(--oro), var(--brasa));
	transition: left .25s ease, right .25s ease;
}
#navbar > ul > li > a:hover,
#navbar > ul > li:focus-within > a {
	color: var(--oro-claro) !important;
	background: rgba(214,171,79,0.08);
}
#navbar > ul > li > a:hover::after,
#navbar > ul > li:focus-within > a::after {
	left: 16px;
	right: 16px;
}

/* desplegable de redes sociales */
.chulo-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--oro);
	transition: transform .25s ease;
}
.chulo-dropdown:hover .chulo-caret,
.chulo-dropdown:focus-within .chulo-caret {
	transform: rotate(180deg);
}
#navbar .chulo-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: rgba(18,13,16,0.97);
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
	box-shadow: 0 18px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	display: block;
	text-align: left;
}
#navbar .chulo-dropdown:hover .chulo-dropdown-menu,
#navbar .chulo-dropdown:focus-within .chulo-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 4px);
}
#navbar .chulo-dropdown-menu li {
	display: block;
}
#navbar .chulo-dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 7px;
	color: var(--texto) !important;
	font-size: 15px;
	text-transform: none;
	transition: background .2s ease, transform .2s ease;
}
#navbar .chulo-dropdown-menu a i {
	width: 22px;
	font-size: 20px;
	text-align: center;
}
#navbar .chulo-dropdown-menu a:hover {
	background: rgba(255,255,255,0.06);
	transform: translateX(4px);
}
.chulo-social-whatsapp i { color: #25d366; }
.chulo-social-discord i { color: #7289ff; }
.chulo-social-tiktok i { color: #fff; text-shadow: -1.5px 0 #25f4ee, 1.5px 0 #fe2c55; }

/* login / registro / idioma */
.chulo-account {
	display: flex;
	align-items: center;
	gap: 8px;
}
.chulo-btn-ghost, .chulo-btn-fire {
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: bold;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	transition: all .25s ease;
}
.chulo-btn-ghost {
	color: var(--oro) !important;
	border: 1px solid var(--borde-fuerte);
}
.chulo-btn-ghost:hover {
	background: rgba(214,171,79,0.12);
	color: var(--oro-claro) !important;
}
.chulo-btn-fire {
	color: #fff !important;
	background: linear-gradient(135deg, var(--brasa), var(--fuego) 60%, #a1200c);
	box-shadow: 0 0 0 1px rgba(255,160,80,0.4), 0 4px 16px rgba(226,70,27,0.35);
}
.chulo-btn-fire:hover {
	color: #fff !important;
	box-shadow: 0 0 0 1px rgba(255,190,110,0.7), 0 4px 24px rgba(255,110,40,0.6);
	transform: translateY(-1px);
}

/* selector de idioma: se ve solo el actual, el resto al pasar el mouse */
.chulo-account .webengine-language-switcher {
	position: relative;
	margin: 0 0 0 4px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--borde);
	border-radius: 6px;
	display: block;
}
.chulo-account .webengine-language-switcher li {
	display: none;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
}
.chulo-account .webengine-language-switcher li:first-child {
	display: block;
}
.chulo-account .webengine-language-switcher li a {
	display: block;
	padding: 6px 10px;
	color: var(--texto) !important;
	font-size: 12px;
}
.chulo-account .webengine-language-switcher:hover {
	background: rgba(18,13,16,0.97);
}
.chulo-account .webengine-language-switcher:hover li {
	display: block;
}

/* ---------- CABECERA (logo grande + reloj) ---------- */
#header {
	padding: 40px 0 0 0;
}
.webengine-mu-logo {
	max-width: 460px;
	width: 100%;
	filter: drop-shadow(0 0 25px rgba(61,155,255,0.35));
	animation: chulo-latido 4s ease-in-out infinite;
}
@keyframes chulo-latido {
	0%, 100% { filter: drop-shadow(0 0 18px rgba(61,155,255,0.30)); }
	50% { filter: drop-shadow(0 0 34px rgba(110,180,255,0.65)); }
}
.header-info-container {
	width: 1040px;
	text-align: right;
}
.header-info-container .header-info {
	width: 330px;
	background: var(--panel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.header-info-container .header-info .header-info-block {
	color: var(--texto-suave);
}
.header-info-container .header-info .header-info-block .online-count {
	color: #5dff7a;
	font-weight: bold;
}
.webengine-online-bar {
	background: rgba(0,0,0,0.6);
	border: 1px solid var(--borde);
}
.webengine-online-bar .webengine-online-bar-progress {
	background: linear-gradient(90deg, var(--oro), var(--brasa));
	box-shadow: 0 0 10px var(--brasa);
}

/* ---------- CONTENEDOR PRINCIPAL (marco clasico dorado) ---------- */
#container {
	position: relative;
	margin-top: 20px;
	background: linear-gradient(180deg, rgba(20,15,18,0.88), rgba(12,9,11,0.94));
	border: 1px solid var(--borde);
	border-bottom: 0;
	border-radius: var(--radio) var(--radio) 0 0;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(246,220,149,0.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--texto);
}
#container::before, #container::after {
	/* esquinas doradas tipo marco del MU */
	content: "";
	position: absolute;
	top: -1px;
	width: 46px;
	height: 46px;
	border-top: 2px solid var(--oro);
	pointer-events: none;
}
#container::before {
	left: -1px;
	border-left: 2px solid var(--oro);
	border-top-left-radius: var(--radio);
}
#container::after {
	right: -1px;
	border-right: 2px solid var(--oro);
	border-top-right-radius: var(--radio);
}

.page-title {
	color: transparent;
	background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-oscuro));
	-webkit-background-clip: text;
	background-clip: text;
	font-weight: 900;
	text-shadow: none;
	border-bottom: 1px solid var(--borde);
	padding-bottom: 10px;
}

/* ---------- PANELES ---------- */
.panel,
.panel-news,
.panel-sidebar,
.panel-general,
.panel-addstats,
.panel-downloads {
	background: var(--panel-claro);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: 0 8px 24px rgba(0,0,0,0.45);
	color: var(--texto);
	overflow: hidden;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.panel:hover {
	border-color: var(--borde-fuerte);
	box-shadow: 0 8px 30px rgba(0,0,0,0.55), 0 0 18px rgba(214,171,79,0.08);
}
.panel > .panel-heading,
.panel-sidebar > .panel-heading,
.panel-news .panel-heading {
	background: linear-gradient(180deg, rgba(214,171,79,0.14), rgba(214,171,79,0.02));
	border: 0;
	border-bottom: 1px solid var(--borde);
	border-radius: 0;
	color: var(--oro);
}
.panel-title,
.panel-news .panel-title,
.panel-sidebar .panel-title {
	color: var(--oro-claro) !important;
	font-weight: 700;
}
.panel-news .panel-title a {
	color: var(--oro-claro) !important;
}
.panel-news .panel-title a:hover {
	color: var(--brasa) !important;
}
.panel-news .panel-body {
	padding: 16px 20px;
	color: var(--texto);
	line-height: 1.6;
}
.panel-news .panel-footer,
.panel-footer {
	background: rgba(0,0,0,0.25);
	border-top: 1px solid var(--borde);
	color: var(--texto-suave);
}
.panel-body .panel-title {
	color: var(--oro);
	border-bottom: 1px solid var(--borde);
}
.panel-usercp {
	background: var(--panel-claro);
}
.panel-usercp ul li a {
	color: var(--texto) !important;
}
.panel-usercp ul li a:hover {
	color: var(--brasa) !important;
}

/* banners del sidebar */
.sidebar-banner img {
	max-width: 100%;
	border-radius: var(--radio);
	border: 1px solid var(--borde);
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	transition: transform .3s ease, box-shadow .3s ease;
}
.sidebar-banner img:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,120,40,0.25);
}

/* ---------- TABLAS ---------- */
.table, .table > tbody > tr > td, .table > thead > tr > th {
	background: transparent;
	color: var(--texto);
	border-color: rgba(214,171,79,0.12) !important;
}
.table > tbody > tr:hover > td {
	background: rgba(214,171,79,0.05);
}
.rankings-table tr td {
	border-bottom: 1px solid rgba(214,171,79,0.12);
	color: var(--texto);
}
.rankings-table tr:first-child td {
	color: var(--oro);
	font-family: 'Cinzel', serif;
	border-bottom: 2px solid var(--oro);
}
.rankings-table tr:hover td {
	background: rgba(214,171,79,0.05);
}
.rankings-table-place {
	color: var(--oro-claro);
}
.rankings-class-image,
.general-table-ui img {
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--borde-fuerte), 0 0 8px rgba(0,0,0,0.6);
}
.rankings_menu a {
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--borde);
	border-radius: 6px;
	color: var(--texto-suave);
	transition: all .2s ease;
}
.rankings_menu a:hover {
	border-color: var(--oro);
	color: var(--oro-claro) !important;
}
.rankings_menu a.active {
	background: linear-gradient(135deg, var(--brasa), var(--fuego));
	border-color: var(--brasa);
	color: #fff;
}
.rankings_menu span {
	color: var(--oro);
	font-family: 'Cinzel', serif;
}
.rankings-update-time {
	color: var(--texto-suave);
}
.rankings-class-filter-selection,
.rankings-class-filter-selection:hover {
	color: var(--texto) !important;
}
.rankings-class-filter-selection img {
	box-shadow: 0 0 0 2px var(--borde-fuerte);
}

.myaccount-table,
.general-table-ui {
	background: rgba(0,0,0,0.3);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	color: var(--texto);
}
.myaccount-table tr td {
	border-bottom: 1px solid rgba(214,171,79,0.12);
}
.myaccount-table tr td:first-child {
	color: var(--oro);
}
.general-table-ui tr:first-child td {
	color: var(--oro);
}
.general-table-ui tr:nth-child(2n+2) td {
	background: rgba(255,255,255,0.02);
}
.myaccount-character-block {
	background: rgba(0,0,0,0.4);
	border: 1px solid var(--borde);
}
.myaccount-character-name a,
.myaccount-character-block-location {
	color: var(--texto) !important;
}

/* ---------- FORMULARIOS Y BOTONES ---------- */
.form-control,
input[type=text], input[type=password], input[type=number], input[type=email], select, textarea {
	background: rgba(0,0,0,0.45) !important;
	border: 1px solid var(--borde) !important;
	border-radius: 6px !important;
	color: var(--texto) !important;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
	border-color: var(--oro) !important;
	box-shadow: 0 0 0 3px rgba(214,171,79,0.18) !important;
	outline: none;
}
.btn-primary,
.btn-castlewidget,
input[type=submit] {
	color: #fff !important;
	background: linear-gradient(135deg, var(--brasa), var(--fuego) 60%, #a1200c) !important;
	border: 1px solid rgba(255,160,80,0.5) !important;
	border-radius: 6px !important;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 14px rgba(226,70,27,0.3);
	transition: all .2s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-castlewidget:hover,
input[type=submit]:hover {
	color: #fff !important;
	border-color: rgba(255,200,120,0.8) !important;
	box-shadow: 0 4px 22px rgba(255,110,40,0.55);
	transform: translateY(-1px);
}
.alert {
	border-radius: var(--radio);
	background: rgba(0,0,0,0.4);
	color: var(--texto);
	border: 1px solid var(--borde);
}
.alert-danger { border-color: rgba(226,70,27,0.6); }
.alert-success { border-color: rgba(93,255,122,0.4); }
.alert-info, .alert-warning { border-color: var(--borde-fuerte); }
.thumbnail {
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--borde);
}

/* ---------- FOOTER ---------- */
.footer {
	position: relative;
	background: rgba(8,6,8,0.95);
	border: 1px solid var(--borde);
	border-top: 0;
	color: var(--texto-suave);
	border-radius: 0 0 var(--radio) var(--radio);
}
.footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 40px;
	right: 40px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.footer a {
	color: var(--texto-suave);
}
.footer hr {
	border-top: 1px solid rgba(214,171,79,0.15);
}
.chulo-footer-social {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}
.footer .footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 22px;
	border-radius: 50%;
	border: 1px solid var(--borde-fuerte);
	background: rgba(255,255,255,0.03);
	filter: none;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer .footer-social-link:hover {
	transform: translateY(-3px);
	background: rgba(214,171,79,0.1);
	box-shadow: 0 0 18px rgba(214,171,79,0.35);
	text-decoration: none !important;
}
.webengine-powered {
	color: var(--texto-suave) !important;
}

/* ---------- CASTLE SIEGE ---------- */
.castle-owner-widget .alt {
	color: var(--oro);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0b080a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--oro-oscuro), var(--oro)); border-radius: 5px; }

/* ---------- FONDO DEL CIELO ---------- */
/* El fondo de la pagina es img/cielo_nubes.jpg (las nubes del cielo, sin el logo).
   El logo es img/cielo.jpg (cielo con el logo) mostrado chico en la cabecera,
   con los bordes difuminados para que se funda con las nubes. */
body {
	background: #0a1530 url('../img/cielo_nubes.jpg') no-repeat top center !important;
	background-size: max(100vw, 1400px) auto !important;
}
body::before {
	background: radial-gradient(ellipse at 50% 20%, rgba(0,0,0,0) 45%, rgba(5,10,30,0.45) 100%);
}
#header {
	padding: 18px 0 0 0;
}
#header .webengine-mu-logo {
	display: none;
}
#header a {
	/* tamano del logo: cambiar el 640px para agrandarlo o achicarlo */
	display: block;
	width: min(640px, 90vw);
	aspect-ratio: 2000 / 1039;
	margin: 0 auto;
	background: url('../img/cielo.jpg') no-repeat center / cover;
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
	transition: transform .4s ease;
}
#header a:hover {
	transform: scale(1.02);
}
.header-info-container {
	display: none;
}

/* el recuadro de cada seccion (Ranking, Descargas, Guias...) con el cielo de fondo */
/* para mas o menos cielo: cambiar los 0.25 / 0.45 (mas alto = mas oscuro) */
#container {
	background:
		linear-gradient(180deg, rgba(8,12,30,0.25), rgba(6,8,20,0.45)),
		url('../img/cielo_nubes.jpg') center top / cover no-repeat !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
#container .panel,
#container .panel-news,
#container .panel-sidebar {
	background: rgba(10,12,24,0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* ---------- GUIAS (modules/guias.php) ---------- */
.chulo-guias-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 20px;
}
.chulo-guias-tabs a {
	padding: 8px 14px;
	border: 1px solid var(--borde);
	border-radius: 6px;
	background: rgba(0,0,0,0.35);
	color: var(--texto) !important;
	font-size: 13px;
	text-decoration: none !important;
	transition: all .2s ease;
}
.chulo-guias-tabs a i {
	margin-right: 5px;
	color: var(--oro);
}
.chulo-guias-tabs a:hover {
	border-color: var(--oro);
}
.chulo-guias-tabs a.active {
	background: linear-gradient(135deg, var(--brasa), var(--fuego));
	border-color: var(--brasa);
	color: #fff !important;
}
.chulo-guias-tabs a.active i {
	color: #fff;
}
.chulo-guia {
	display: none;
	animation: chulo-aparece .3s ease;
}
.chulo-guia.active {
	display: block;
}
@keyframes chulo-aparece {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.chulo-guia h2 {
	color: var(--oro-claro);
	font-size: 22px;
	margin: 0 0 14px;
}
.chulo-guia p, .chulo-guia li {
	line-height: 1.7;
}
.chulo-pasos {
	padding-left: 22px;
}
.chulo-pasos li {
	margin-bottom: 8px;
}
.chulo-lista {
	list-style: none;
	padding: 0;
}
.chulo-lista li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(214,171,79,0.12);
}
.chulo-lista li i {
	width: 24px;
	color: var(--oro);
}
.tecla {
	display: inline-block;
	min-width: 26px;
	padding: 1px 7px;
	border: 1px solid var(--borde-fuerte);
	border-bottom-width: 3px;
	border-radius: 5px;
	background: rgba(0,0,0,0.5);
	color: var(--oro-claro);
	font-weight: bold;
	text-align: center;
}
.chulo-datos {
	display: flex;
	gap: 12px;
	margin: 18px 0;
}
.chulo-datos div {
	flex: 1;
	padding: 12px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: rgba(0,0,0,0.35);
	text-align: center;
}
.chulo-datos span {
	display: block;
	color: var(--texto-suave);
	font-size: 12px;
	text-transform: uppercase;
}
.chulo-datos b {
	color: var(--oro-claro);
	font-family: 'Cinzel', serif;
	font-size: 22px;
}
.chulo-tabla > thead > tr > th {
	color: var(--oro);
	font-family: 'Cinzel', serif;
	border-bottom: 2px solid var(--oro) !important;
}
.chulo-tabla small {
	color: var(--texto-suave);
}
.chulo-tabla code {
	background: rgba(0,0,0,0.5);
	color: var(--brasa);
}
.chulo-tabla tr.vip td:first-child::after {
	content: "VIP";
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--oro-claro), var(--oro));
	color: #1a1208;
	font-size: 10px;
	font-weight: bold;
}
.chulo-nota {
	padding: 10px 14px;
	border-left: 3px solid var(--azul);
	background: rgba(61,155,255,0.08);
	border-radius: 0 6px 6px 0;
	color: var(--texto);
}
.chulo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}
.chulo-card {
	padding: 16px;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	background: rgba(0,0,0,0.4);
}
.chulo-card h3 {
	margin: 0 0 8px;
	color: var(--oro-claro);
	font-size: 17px;
}

/* ---------- DONACIONES (modules/donation.php) ---------- */
.chulo-donar-intro {
	font-size: 15px;
	margin: 10px 0 18px;
}
.chulo-precios td,
.chulo-precios th {
	text-align: center;
	vertical-align: middle !important;
}
.chulo-precios th i {
	margin-right: 4px;
}
.chulo-precios td.wc {
	color: var(--oro-claro);
	font-family: 'Cinzel', serif;
	font-weight: 700;
	text-align: left;
}
.chulo-precios td.wc i {
	color: var(--oro);
	margin-right: 6px;
}
.chulo-precios tr.destacado td {
	background: rgba(255,138,43,0.12) !important;
}
.chulo-precios tr.destacado td.wc::after {
	content: "MÁS ELEGIDO";
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--brasa), var(--fuego));
	color: #fff;
	font-family: 'PT Sans', sans-serif;
	font-size: 10px;
}
.chulo-donar h2 {
	color: var(--oro-claro);
	font-size: 20px;
	margin: 24px 0 12px;
}
.chulo-donar .chulo-card h3 i {
	color: var(--oro);
	margin-right: 6px;
}
.chulo-donar .chulo-pasos {
	margin-top: 16px;
}