:root {
			--gold: hsl(249, 67%, 23%);
			--dark: #1a2332;
			--cream: #f7f4ef;
			--card-bg: #ffffff;
			--shadow: 0 4px 24px rgba(26, 35, 50, 0.10);
		}

		/* Layout General */
		.page-body-custom {
			padding: 40px 0;
			background: #f4f7f6;
		}

		/* Grid de Noticias (Estilo Deporte) */
		.news-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 25px;
		}

		.news-card {
			background: white;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
			transition: 0.3s;
			cursor: pointer;
		}

		.news-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
		}

		.news-card .thumb {
			height: 200px;
			overflow: hidden;
		}

		.news-card .thumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.news-card-body {
			padding: 20px;
		}

		.news-cat {
			color: #0d9488;
			font-weight: 800;
			font-size: 11px;
			text-transform: uppercase;
		}

		.news-card-body h3 {
			font-size: 18px;
			margin: 10px 0;
			color: #1a1a1a;
			line-height: 1.3;
		}

		/* Sidebar */
		.sidebar-card {
			background: white;
			border-radius: 12px;
			margin-bottom: 25px;
			overflow: hidden;
			border: 1px solid #eee;
		}

		.sidebar-head {
			background: #fafafa;
			padding: 15px;
			font-weight: 700;
			border-bottom: 1px solid #eee;
		}

		.dest-item {
			display: flex;
			padding: 15px;
			border-bottom: 1px solid #f5f5f5;
			text-decoration: none !important;
		}

		.dest-thumb {
			width: 70px;
			height: 70px;
			border-radius: 8px;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 12px;
		}

		.dest-thumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.dest-info h4 {
			font-size: 13px;
			color: #333;
			margin: 0;
		}

		body {
			font-family: 'Nunito', sans-serif;
			background: var(--cream);
		}

		/* ── FILTROS ── */
		.filtros-wrap {
			padding: 32px 0 8px;
			display: flex;
			align-items: center;
			gap: 12px;
			flex-wrap: wrap;
		}

		.filtros-wrap span {
			font-weight: 700;
			color: var(--dark);
			font-size: .95rem;
		}

		.btn-filtro {
			border: 2px solid var(--dark);
			background: transparent;
			color: var(--dark);
			border-radius: 50px;
			padding: 6px 20px;
			font-family: 'Nunito', sans-serif;
			font-weight: 700;
			font-size: .85rem;
			cursor: pointer;
			transition: all .2s;
		}

		.btn-filtro:hover,
		.btn-filtro.activo {
			background: var(--gold);
			border-color: var(--gold);
			color: #fff;
		}

		/* ── GRID ── */
		.noticias-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 28px;
			padding: 32px 0 60px;
		}

		/* ── TARJETA ── */
		.card-noticia {
			background: var(--card-bg);
			border-radius: 16px;
			overflow: hidden;
			box-shadow: var(--shadow);
			cursor: pointer;
			transition: transform .25s, box-shadow .25s;
			animation: fadeUp .45s ease both;
		}

		.card-noticia:hover {
			transform: translateY(-6px);
			box-shadow: 0 12px 36px rgba(26, 35, 50, 0.16);
		}

		@keyframes fadeUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.card-img-wrap {
			position: relative;
			overflow: hidden;
			height: 200px;
		}

		.card-img-wrap img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform .4s ease;
		}

		.card-noticia:hover .card-img-wrap img {
			transform: scale(1.06);
		}

		.card-body-inner {
			padding: 20px 22px 24px;
		}

		.badge-categoria {
			display: inline-block;
			background: var(--gold);
			color: #fff;
			font-size: .72rem;
			font-weight: 800;
			letter-spacing: .08em;
			text-transform: uppercase;
			padding: 3px 10px;
			border-radius: 50px;
			margin-bottom: 10px;
		}

		.card-mes {
			float: right;
			font-size: .8rem;
			color: #888;
			font-weight: 600;
		}

		.card-titulo {
			font-family: 'Playfair Display', serif;
			font-size: 1.12rem;
			color: var(--dark);
			font-weight: 700;
			margin: 6px 0 8px;
			line-height: 1.35;
			clear: both;
		}

		.card-desc {
			font-size: .88rem;
			color: #666;
			line-height: 1.55;
			margin-bottom: 14px;
		}

		.card-link {
			font-size: .88rem;
			font-weight: 800;
			color: var(--dark);
			text-decoration: none;
			letter-spacing: .02em;
		}

		.card-link:hover {
			color: var(--gold);
		}

		.card-link i {
			margin-left: 4px;
			font-size: .8rem;
		}

		/* ── EMPTY / LOADER ── */
		.empty-state {
			text-align: center;
			padding: 60px 20px;
			color: #aaa;
			grid-column: 1/-1;
		}

		.empty-state i {
			font-size: 3rem;
			margin-bottom: 12px;
			display: block;
		}

		.loader-wrap {
			text-align: center;
			padding: 60px;
			grid-column: 1/-1;
		}

		.loader {
			width: 40px;
			height: 40px;
			border: 3px solid #e0ddd8;
			border-top-color: var(--gold);
			border-radius: 50%;
			animation: spin .8s linear infinite;
			margin: 0 auto 12px;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg);
			}
		}

		/* ════════════════════════════════════
       MODAL — LAYOUT HORIZONTAL
    ════════════════════════════════════ */
		.modal-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(10, 12, 26, .75);
			backdrop-filter: blur(6px);
			z-index: 9999;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		.modal-overlay.open {
			display: flex;
		}

		/* contenedor principal en dos columnas */
		.modal-box {
			background: #fff;
			border-radius: 20px;
			width: 100%;
			max-width: 940px;
			max-height: 88vh;
			display: flex;
			/* ← HORIZONTAL */
			overflow: hidden;
			box-shadow: 0 32px 80px rgba(0, 0, 0, .3);
			animation: modalIn .28s cubic-bezier(.34, 1.5, .64, 1) both;
			position: relative;
		}

		@keyframes modalIn {
			from {
				opacity: 0;
				transform: scale(.9) translateY(16px);
			}

			to {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		/* ── columna izquierda: imagen ── */
		.modal-col-img {
			flex: 0 0 420px;
			position: relative;
			overflow: hidden;
		}

		.modal-col-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		/* gradiente sobre la imagen para dar profundidad */
		.modal-col-img::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(160deg, rgba(26, 35, 50, .22) 0%, transparent 55%);
			pointer-events: none;
		}

		/* badge categoría flotando sobre la imagen */
		.modal-img-badge {
			position: absolute;
			bottom: 18px;
			left: 18px;
			z-index: 2;
			background: var(--gold);
			color: #fff;
			font-size: .68rem;
			font-weight: 800;
			letter-spacing: .1em;
			text-transform: uppercase;
			padding: 4px 13px;
			border-radius: 50px;
		}

		/* ── columna derecha: texto ── */
		.modal-col-content {
			flex: 1;
			overflow-y: auto;
			padding: 38px 34px 34px;
			display: flex;
			flex-direction: column;
		}

		.modal-mes-tag {
			font-size: .75rem;
			color: #aaa;
			font-weight: 700;
			letter-spacing: .09em;
			text-transform: uppercase;
			margin-bottom: 10px;
		}

		.modal-titulo {
			font-family: 'Playfair Display', serif;
			font-size: 1.45rem;
			color: var(--dark);
			font-weight: 700;
			line-height: 1.3;
			margin: 0 0 14px;
		}

		.modal-sep {
			width: 40px;
			height: 3px;
			background: var(--gold);
			border: none;
			border-radius: 2px;
			margin: 0 0 18px;
		}

		.modal-descripcion {
			font-size: .92rem;
			color: #555;
			line-height: 1.8;
			white-space: pre-line;
			flex-grow: 1;
		}

		.modal-footer {
			margin-top: 24px;
			padding-top: 18px;
			border-top: 1px solid #eee;
		}

		.btn-fb {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: #1877f2;
			color: #fff;
			border: none;
			border-radius: 50px;
			padding: 10px 22px;
			font-family: 'Nunito', sans-serif;
			font-weight: 700;
			font-size: .88rem;
			cursor: pointer;
			text-decoration: none;
			transition: background .2s;
		}

		.btn-fb:hover {
			background: #1260cc;
			color: #fff;
			text-decoration: none;
		}

		/* botón X para cerrar */
		.btn-cerrar-modal {
			position: absolute;
			top: 14px;
			right: 14px;
			z-index: 20;
			background: rgba(255, 255, 255, .92);
			border: none;
			width: 34px;
			height: 34px;
			border-radius: 50%;
			font-size: .88rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--dark);
			box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
			transition: background .2s, transform .15s;
		}

		.btn-cerrar-modal:hover {
			background: #fff;
			transform: scale(1.1);
		}

		/* ── En móvil: vuelve a vertical ── */
		@media (max-width: 640px) {
			.modal-box {
				flex-direction: column;
				max-height: 92vh;
				overflow-y: auto;
			}

			.modal-col-img {
				flex: 0 0 200px;
				height: 200px;
			}

			.modal-col-content {
				padding: 22px 20px 26px;
			}

			.modal-titulo {
				font-size: 1.2rem;
			}
		}