/* Drop Cajas Especiales: estilos aislados dentro del módulo de Guías. */
.xsg-page .xsg-guide-tabs {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

#xsg-guide-special-boxes:checked ~ .xsg-guide-tabs label[for="xsg-guide-special-boxes"] {
	background: linear-gradient(110deg, #17405e, #0a2032);
	border-color: #47a3d2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
}

#xsg-guide-special-boxes:checked ~ .xsg-guide-tabs label[for="xsg-guide-special-boxes"]:after {
	opacity: 1;
}

#xsg-guide-special-boxes:checked ~ .xsg-guide-tabs label[for="xsg-guide-special-boxes"] .xsg-tab-number {
	border-color: #d5a83c;
	color: #e8ba47;
}

#xsg-guide-special-boxes:checked ~ .xsg-guide-panels .xsg-guide-panel-special-boxes {
	display: block;
}

.xsg-guide-panel-special-boxes .xsg-special-intro {
	font-size: 16px;
	line-height: 25px;
}

.xsg-guide-panel-special-boxes .xsg-special-intro strong {
	color: #efc257;
}

.xsg-guide-panel-special-boxes .xsg-special-rules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 17px;
}

.xsg-guide-panel-special-boxes .xsg-special-rules > span {
	display: flex;
	align-items: center;
	min-height: 70px;
	padding: 11px 13px;
	background: linear-gradient(145deg, #123149, #071827);
	border: 1px solid #345b73;
	border-radius: 4px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.xsg-guide-panel-special-boxes .xsg-special-rules b {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 43px;
	width: 43px;
	height: 43px;
	margin-right: 11px;
	background: #071a2a;
	border: 1px solid #b98e31;
	border-radius: 4px;
	color: #efc052;
	font-size: 22px;
	line-height: 24px;
}

.xsg-guide-panel-special-boxes .xsg-special-rules small {
	color: #b9cad7;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.xsg-guide-panel-special-boxes .xsg-special-boxes {
	display: grid;
	gap: 13px;
}

.xsg-guide-panel-special-boxes .xsg-special-box {
	position: relative;
	background: rgba(5, 17, 29, .96);
	border: 1px solid #31546d;
	border-left: 4px solid #a9b3ba;
	border-radius: 5px;
	box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
	overflow: hidden;
}

.xsg-guide-panel-special-boxes .xsg-special-box-epica {
	border-left-color: #348eda;
}

.xsg-guide-panel-special-boxes .xsg-special-box-leyenda {
	border-left-color: #9b62df;
}

.xsg-guide-panel-special-boxes .xsg-special-box-mitica {
	border-left-color: #d5493f;
}

.xsg-guide-panel-special-boxes .xsg-special-box[open] {
	border-top-color: #417c9e;
	border-right-color: #417c9e;
	border-bottom-color: #417c9e;
	box-shadow: 0 11px 24px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .03);
}

.xsg-guide-panel-special-boxes .xsg-special-box summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100px;
	padding: 13px 15px;
	background: radial-gradient(circle at 88% 25%, rgba(225, 177, 59, .1), transparent 28%), linear-gradient(105deg, #12344e, #071827 72%);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.xsg-guide-panel-special-boxes .xsg-special-box summary::-webkit-details-marker {
	display: none;
}

.xsg-guide-panel-special-boxes .xsg-special-box summary:hover {
	background: radial-gradient(circle at 88% 25%, rgba(225, 177, 59, .14), transparent 30%), linear-gradient(105deg, #17405c, #092033 72%);
}

.xsg-guide-panel-special-boxes .xsg-special-box-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 96px;
	width: 96px;
	height: 74px;
	margin-right: 15px;
	background: radial-gradient(circle, rgba(239, 188, 69, .14), transparent 70%), #061725;
	border: 1px solid #49718a;
	border-radius: 5px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 6px 14px rgba(0, 0, 0, .28);
}

.xsg-guide-panel-special-boxes .xsg-special-box-image img {
	display: block;
	width: 84px;
	height: 63px;
	object-fit: contain;
	filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .48));
}

.xsg-guide-panel-special-boxes .xsg-special-box-title {
	display: block;
	min-width: 0;
}

.xsg-guide-panel-special-boxes .xsg-special-box-title small,
.xsg-guide-panel-special-boxes .xsg-special-box-title strong,
.xsg-guide-panel-special-boxes .xsg-special-box-title em {
	display: block;
}

.xsg-guide-panel-special-boxes .xsg-special-box-title small {
	margin-bottom: 3px;
	color: #70b9dd;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.1px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-title strong {
	color: #f4f8fc;
	font-family: "PT Sans", Arial, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 25px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-title em {
	margin-top: 4px;
	color: #9fb6c7;
	font-size: 13px;
	font-style: normal;
	line-height: 18px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-guarantee {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 108px;
	min-height: 56px;
	margin-left: auto;
	padding: 7px 9px;
	background: rgba(29, 24, 12, .82);
	border: 1px solid #a7802d;
	border-radius: 4px;
	box-shadow: 0 0 13px rgba(220, 169, 47, .1);
	text-align: center;
}

.xsg-guide-panel-special-boxes .xsg-special-box-guarantee b {
	color: #f1c453;
	font-size: 18px;
	line-height: 21px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-guarantee small {
	color: #bba467;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .7px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-arrow {
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin: 0 5px 0 15px;
	border-right: 2px solid #5fc3f3;
	border-bottom: 2px solid #5fc3f3;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}

.xsg-guide-panel-special-boxes .xsg-special-box[open] .xsg-special-box-arrow {
	transform: rotate(225deg) translate(-2px, -2px);
}

.xsg-guide-panel-special-boxes .xsg-special-box-content {
	padding: 16px;
	border-top: 1px solid #2d5068;
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 62px;
	padding: 9px 11px;
	background: linear-gradient(150deg, rgba(16, 46, 69, .86), rgba(7, 23, 36, .92));
	border: 1px solid #2d5066;
	border-radius: 3px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview small {
	margin-bottom: 4px;
	color: #74a8c2;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .8px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview strong {
	color: #e5eef5;
	font-size: 15px;
	line-height: 20px;
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview > span:nth-child(2) {
	border-color: #8b6c28;
	background: linear-gradient(150deg, rgba(49, 38, 17, .86), rgba(19, 22, 24, .92));
}

.xsg-guide-panel-special-boxes .xsg-special-box-overview > span:nth-child(2) small,
.xsg-guide-panel-special-boxes .xsg-special-box-overview > span:nth-child(2) strong {
	color: #e7b94a;
}

.xsg-guide-panel-special-boxes .xsg-special-box-description {
	margin: 15px 0 11px;
	color: #aec1cf;
	font-size: 14px;
	line-height: 21px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category {
	min-width: 0;
	padding: 13px;
	background: rgba(10, 30, 47, .82);
	border: 1px solid #2c4d63;
	border-radius: 4px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category:last-child:nth-child(odd),
.xsg-guide-panel-special-boxes .xsg-special-drop-category-wide {
	grid-column: 1 / -1;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category h4 {
	display: flex;
	align-items: center;
	margin: 0 0 11px;
	padding-bottom: 9px;
	border-bottom: 1px solid #315167;
	color: #e8b94b;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category h4 small {
	margin-left: auto;
	padding: 2px 7px;
	background: #061724;
	border: 1px solid #315269;
	border-radius: 10px;
	color: #91b2c6;
	font-size: 11px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category li {
	position: relative;
	min-width: 0;
	padding: 6px 8px 6px 18px;
	background: rgba(5, 18, 29, .72);
	border: 1px solid rgba(53, 85, 105, .7);
	border-radius: 3px;
	color: #c0d0db;
	font-size: 13px;
	line-height: 19px;
}

.xsg-guide-panel-special-boxes .xsg-special-drop-category li:before {
	content: "";
	position: absolute;
	left: 8px;
	top: 13px;
	width: 4px;
	height: 4px;
	background: #35b4ed;
	box-shadow: 0 0 5px rgba(53, 180, 237, .52);
	transform: rotate(45deg);
}

.xsg-guide-panel-special-boxes .xsg-special-note {
	margin-top: 16px;
}

.xsg-guide-panel-special-boxes .xsg-special-note p {
	font-size: 13px;
	line-height: 20px;
}

.xsg-guide-panel-special-boxes .xsg-special-note strong,
.xsg-guide-panel-special-boxes .xsg-special-note b {
	color: #e5b748;
}

@media (max-width: 900px) and (min-width: 701px) {
	.xsg-page .xsg-guide-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.xsg-page .xsg-guide-tabs {
		grid-template-columns: 1fr;
	}

	.xsg-guide-panel-special-boxes .xsg-special-rules,
	.xsg-guide-panel-special-boxes .xsg-special-box-overview,
	.xsg-guide-panel-special-boxes .xsg-special-drop-grid,
	.xsg-guide-panel-special-boxes .xsg-special-drop-category ul {
		grid-template-columns: 1fr;
	}

	.xsg-guide-panel-special-boxes .xsg-special-drop-category:last-child:nth-child(odd),
	.xsg-guide-panel-special-boxes .xsg-special-drop-category-wide {
		grid-column: auto;
	}

	.xsg-guide-panel-special-boxes .xsg-special-box summary {
		padding: 12px;
	}

	.xsg-guide-panel-special-boxes .xsg-special-box-image {
		flex-basis: 74px;
		width: 74px;
		height: 62px;
		margin-right: 11px;
	}

	.xsg-guide-panel-special-boxes .xsg-special-box-image img {
		width: 66px;
		height: 50px;
	}

	.xsg-guide-panel-special-boxes .xsg-special-box-guarantee {
		display: none;
	}
}