/*!
 =========================================================
 * WebEngine CMS - Streamers Module
 * MU-EXODUS Theme
 =========================================================
 
 * Author MU-EXODUS Development Team
 * Copyright (c) 2026 MU-EXODUS, All Rights Reserved
 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 
 =========================================================
*/

/* =========================================================
   STREAMERS MODULE - Panels (Bootstrap)
========================================================= */
.panel-streamers,
.panel-benefits,
.panel-how-to-join,
.panel-contact {
	margin-bottom: 30px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.125);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	overflow: hidden;
}

.panel-streamers .panel-heading,
.panel-benefits .panel-heading,
.panel-how-to-join .panel-heading,
.panel-contact .panel-heading {
	padding: 14px 18px;
	background: linear-gradient(90deg, var(--ColorTemplate) 0%, var(--ColorTemplateAlpha) 100%);
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.panel-streamers .panel-title,
.panel-benefits .panel-title,
.panel-how-to-join .panel-title,
.panel-contact .panel-title {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel-streamers .panel-title i,
.panel-benefits .panel-title i,
.panel-how-to-join .panel-title i,
.panel-contact .panel-title i {
	color: #fff;
}

.panel-streamers .panel-body,
.panel-benefits .panel-body,
.panel-how-to-join .panel-body,
.panel-contact .panel-body {
	padding: 18px;
	background: #fff;
}

/* Badge de conteo en vivo dentro del título */
.panel-streamers .panel-title .badge {
	margin-left: auto;
	background: #dc3545;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* =========================================================
   STREAMERS GRID
========================================================= */
.streamers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

/* =========================================================
   STREAMER CARD
========================================================= */
.streamer-card {
	background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.streamer-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	border-color: var(--ColorTemplate);
}

.streamer-thumbnail {
	position: relative;
	width: 100%;
	height: 140px;
	overflow: hidden;
	background: #f5f5f5;
}

.streamer-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.streamer-card:hover .streamer-thumbnail img {
	transform: scale(1.05);
}

/* Placeholder cuando no hay thumbnail */
.streamer-thumbnail-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	color: rgba(255,255,255,0.4);
	font-size: 2.5rem;
}

.streamer-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.streamer-card:hover .streamer-overlay {
	opacity: 1;
}

.streamer-watch-button {
	background: var(--ColorTemplate);
	color: #fff;
	border: none;
	padding: 8px 20px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}

.streamer-watch-button:hover {
	background: #fff;
	color: var(--ColorTemplate);
	text-decoration: none;
}

/* =========================================================
   PLATFORM BADGE (sobre el thumbnail)
========================================================= */
.streamer-platform-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 3px 9px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 5px;
	backdrop-filter: blur(4px);
	z-index: 2;
	letter-spacing: 0.3px;
}

/* Colores específicos por plataforma.
   El data-platform está en el .streamer-card (padre), no en el badge. */
.streamer-card[data-platform="twitch"] .streamer-platform-badge {
	background: #9146FF;
}

.streamer-card[data-platform="youtube"] .streamer-platform-badge {
	background: #FF0000;
}

.streamer-card[data-platform="kick"] .streamer-platform-badge {
	background: #53FC18;
	color: #111;
}

/* =========================================================
   LIVE BADGE
========================================================= */
.live-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: #dc3545;
	color: #fff;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 2px 6px rgba(220,53,69,0.4);
	animation: pulse 2s infinite;
	z-index: 2;
}

.live-dot {
	width: 5px;
	height: 5px;
	background: #fff;
	border-radius: 50%;
	animation: pulse 1.5s infinite;
}

/* =========================================================
   STREAMER INFO
========================================================= */
.streamer-info {
	padding: 12px;
}

.streamer-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.streamer-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 2px solid var(--ColorTemplate);
	object-fit: cover;
}

.streamer-names {
	flex: 1;
	min-width: 0;
}

.streamer-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: #333;
	margin: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.streamer-login {
	font-size: 0.75rem;
	color: #666;
}

.streamer-title {
	font-size: 0.8rem;
	color: #444;
	margin: 0 0 8px 0;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.streamer-stats {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.streamer-viewers,
.streamer-duration {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 0.75rem;
	color: #666;
}

.streamer-viewers i,
.streamer-duration i,
.streamer-category i {
	color: var(--ColorTemplate);
}

.streamer-category {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 0.75rem;
	color: #666;
	background: #f1f3f5;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 2px 8px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================
   EMPTY STATE
========================================================= */
.streamers-empty-state {
	text-align: center;
	padding: 40px 20px;
	background: #f8f9fa;
	border-radius: 12px;
	border: 2px dashed #dee2e6;
}

.empty-state-illustration {
	font-size: 3rem;
	color: #6c757d;
	margin-bottom: 20px;
}

.streamers-empty-state h4 {
	color: #333;
	font-size: 1.2rem;
	margin-bottom: 15px;
	font-weight: 600;
}

.streamers-empty-state p {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 20px;
}

.streamers-empty-state .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #9146FF;
	border-color: #9146FF;
	color: #fff;
	padding: 10px 25px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.streamers-empty-state .btn-primary:hover {
	background: #772ce8;
	border-color: #772ce8;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(145,70,255,0.4);
}

/* Botón del estado vacío generado por JS */
.streamers-empty-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #9146FF;
	color: #fff;
	padding: 10px 25px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.streamers-empty-button:hover {
	background: #772ce8;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(145,70,255,0.4);
	text-decoration: none;
}

/* =========================================================
   LIVE COUNTER & NO-LIVE (clases del JS)
========================================================= */
.streamers-live-counter {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(5px);
	padding: 10px 20px;
	border-radius: 25px;
	border: 1px solid rgba(255,255,255,0.2);
}

.live-indicator {
	width: 10px;
	height: 10px;
	background: #ff4444;
	border-radius: 50%;
	animation: pulse 1.5s infinite;
}

.live-count {
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
}

.live-text {
	color: rgba(255,255,255,0.9);
	font-size: 0.9rem;
}

.streamers-no-live {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.7);
	font-size: 0.9rem;
}

.streamers-no-live i {
	font-size: 1rem;
}

/* =========================================================
   BENEFITS SECTION
========================================================= */
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 15px;
	max-width: 100%;
	margin: 0 auto;
}

.benefit-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.benefit-card:hover {
	transform: translateY(-3px);
	border-color: var(--ColorTemplate);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.benefit-icon {
	width: 45px;
	height: 45px;
	background: var(--ColorTemplate);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	font-size: 1.3rem;
	color: #fff;
}

.benefit-card h3 {
	color: #333;
	font-size: 0.9rem;
	margin-bottom: 8px;
	font-weight: 600;
}

.benefit-card p {
	color: #666;
	font-size: 0.8rem;
	line-height: 1.3;
}

/* =========================================================
   HOW TO JOIN SECTION (Timeline)
========================================================= */
.timeline {
	max-width: 600px;
	margin: 0 auto;
	position: relative;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ColorTemplate);
	opacity: 0.3;
}

.timeline-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20px;
	position: relative;
	padding-left: 50px;
}

.timeline-marker {
	width: 40px;
	height: 40px;
	background: var(--ColorTemplate);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
}

.timeline-content {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 15px;
	flex: 1;
}

.timeline-content h3 {
	color: #333;
	font-size: 1rem;
	margin-bottom: 8px;
	font-weight: 600;
}

.timeline-content p {
	color: #666;
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0;
}

/* =========================================================
   CONTACT SECTION
========================================================= */
.panel-contact .panel-body > p {
	color: #666;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 20px;
}

.contact-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 100%;
	margin: 0 auto;
}

/* Botones sociales (coinciden con las clases del HTML) */
.btn-discord,
.btn-instagram,
.btn-facebook,
.btn-email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 25px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	min-width: 140px;
	justify-content: center;
	color: #fff !important;
	border: none;
}

.btn-discord i,
.btn-instagram i,
.btn-facebook i,
.btn-email i {
	font-size: 1.1rem;
}

.btn-discord {
	background: #5865F2;
}

.btn-discord:hover {
	background: #4752c4;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(88,101,242,0.3);
}

.btn-instagram {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-instagram:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(225,48,108,0.3);
}

.btn-facebook {
	background: #1877F2;
}

.btn-facebook:hover {
	background: #145dbf;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(24,119,242,0.3);
}

.btn-email {
	background: var(--ColorTemplate);
}

.btn-email:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */
@media (max-width: 768px) {
	.streamers-grid {
		grid-template-columns: 1fr;
	}

	.benefits-grid {
		grid-template-columns: 1fr;
	}

	.timeline::before {
		left: 15px;
	}

	.timeline-item {
		padding-left: 40px;
	}

	.timeline-marker {
		width: 35px;
		height: 35px;
		font-size: 1rem;
		left: 0;
	}

	.contact-buttons {
		flex-direction: column;
	}

	.btn-discord,
	.btn-instagram,
	.btn-facebook,
	.btn-email {
		width: 100%;
	}

	.panel-streamers .panel-title,
	.panel-benefits .panel-title,
	.panel-how-to-join .panel-title,
	.panel-contact .panel-title {
		font-size: 14px;
		flex-wrap: wrap;
	}
}

/* Exodus: apariencia final del módulo */
.panel-streamers,.panel-benefits,.panel-how-to-join,.panel-contact{margin-bottom:28px;background:#0d1a22;border:1px solid #2a404c;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.18);overflow:hidden}
.panel-streamers .panel-heading,.panel-benefits .panel-heading,.panel-how-to-join .panel-heading,.panel-contact .panel-heading{padding:18px 22px;background:#1b2c37;border:0;border-left:4px solid #d9a936;border-bottom:1px solid #344954}
.panel-streamers .panel-title,.panel-benefits .panel-title,.panel-how-to-join .panel-title,.panel-contact .panel-title{color:#e6edf1;font-size:16px;font-weight:800}
.panel-streamers .panel-title i,.panel-benefits .panel-title i,.panel-how-to-join .panel-title i,.panel-contact .panel-title i{color:#e3b440}
.panel-streamers .panel-body,.panel-benefits .panel-body,.panel-how-to-join .panel-body,.panel-contact .panel-body{padding:22px;background:#0d1a22}
.panel-streamers .panel-title .badge{margin-left:auto;background:rgba(53,190,120,.12);color:#70d5a1;border:1px solid rgba(83,205,143,.35);box-shadow:none}
.streamers-grid{gap:18px}.streamer-card{background:#101e27;border:1px solid #304652;border-radius:14px;box-shadow:none}.streamer-card::before{content:"";position:absolute;z-index:8;top:-1px;bottom:-1px;left:-1px;width:4px;border-radius:14px 0 0 14px;background:#d9a936;transform:scaleY(0);transform-origin:center;transition:transform .3s ease;pointer-events:none}.streamer-card:hover{transform:translateY(-4px);border-color:#d9a936;box-shadow:0 12px 26px rgba(0,0,0,.28)}.streamer-card:hover::before{transform:scaleY(1)}.streamer-thumbnail{height:160px;background:#08141b}.streamer-overlay{background:rgba(4,11,16,.72)}
.streamer-watch-button,.streamers-empty-state .btn-primary,.streamers-empty-button{background:linear-gradient(180deg,#e7b943,#c7922c);border:1px solid #edc45b;border-radius:9px;color:#0b151c!important;font-weight:800}.streamer-watch-button:hover,.streamers-empty-state .btn-primary:hover,.streamers-empty-button:hover{background:#f0c75d;border-color:#f0c75d;color:#08131a!important;box-shadow:0 6px 18px rgba(217,169,54,.24)}
.streamer-info{padding:15px}.streamer-name{color:#edf2f4;font-size:15px}.streamer-login,.streamer-title,.streamer-viewers,.streamer-duration{color:#91a2ac}.streamer-title{min-height:34px}.streamer-avatar{border-color:#d9a936}.streamer-category{background:#0a171f;border-color:#2b414c;color:#aab7be}.streamer-viewers i,.streamer-duration i,.streamer-category i{color:#d9a936}
.streamers-empty-state{padding:48px 24px;background:radial-gradient(circle at 50% 20%,rgba(217,169,54,.10),transparent 42%),#0a171f;border:1px solid #2b414c;border-radius:13px}.empty-state-illustration{color:#d9a936;margin-bottom:16px}.streamers-empty-state h4{color:#e8edef;font-size:22px}.streamers-empty-state p{color:#91a2ac;max-width:620px;margin:0 auto 24px}
.benefits-grid{gap:14px}.benefit-card{background:#101e27;border:1px solid #2b414c;border-radius:12px;padding:22px 17px}.benefit-card:hover{transform:translateY(-3px);border-color:#d9a936;box-shadow:0 9px 22px rgba(0,0,0,.22)}.benefit-icon{background:rgba(217,169,54,.10);border:1px solid rgba(217,169,54,.38);color:#e3b440}.benefit-card h3{color:#e4eaed}.benefit-card p{color:#91a2ac;line-height:1.5}
.timeline{max-width:760px}.timeline::before{background:#d9a936;opacity:.28}.timeline-marker{background:#132733;border:1px solid #d9a936;color:#e3b440;box-shadow:0 0 0 5px #0d1a22}.timeline-content{background:#101e27;border:1px solid #2b414c;border-radius:11px;padding:16px 18px;transition:border-color .2s ease,transform .2s ease}.timeline-item:hover .timeline-content{border-color:#d9a936;transform:translateX(3px)}.timeline-content h3{color:#e5ecef}.timeline-content p{color:#91a2ac}.panel-contact .panel-body>p{color:#9babb4}
.btn-discord,.btn-instagram,.btn-facebook,.btn-email{background:#13232d;border:1px solid #344b56;border-radius:9px;color:#e6edf0!important}.btn-discord:hover,.btn-instagram:hover,.btn-facebook:hover,.btn-email:hover{background:#1a303c;border-color:#d9a936;box-shadow:0 6px 16px rgba(0,0,0,.2)}.contact-buttons i{color:#e3b440}
@media(max-width:768px){.panel-streamers .panel-body,.panel-benefits .panel-body,.panel-how-to-join .panel-body,.panel-contact .panel-body{padding:15px}.streamers-empty-state{padding:34px 16px}.streamers-empty-state h4{font-size:18px}}

/* Postulacion: composicion compacta y cierre con llamada a la accion. */
.streamers-steps-intro{text-align:center;margin:0 0 20px}.streamers-steps-intro span{display:block;color:#e3b440;font-size:11px;font-weight:800;letter-spacing:1.3px}.streamers-steps-intro p{margin:5px 0 0;color:#91a2ac;font-size:13px}.panel-how-to-join .timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:none}.panel-how-to-join .timeline::before{display:none}.panel-how-to-join .timeline-item{display:grid;grid-template-columns:46px 1fr;align-items:stretch;margin:0;padding:0;min-width:0}.panel-how-to-join .timeline-marker{position:static;width:46px;height:auto;min-height:92px;border-radius:11px 0 0 11px;background:rgba(217,169,54,.09);border:1px solid rgba(217,169,54,.45);border-right:0;color:#e3b440;box-shadow:none}.panel-how-to-join .timeline-content{display:flex;flex-direction:column;justify-content:center;min-height:92px;border-radius:0 11px 11px 0;padding:15px 17px}.panel-how-to-join .timeline-content h3{margin:0 0 5px}.panel-how-to-join .timeline-content p{line-height:1.45}.panel-how-to-join .timeline-item:hover .timeline-content{transform:none}.panel-how-to-join .timeline-item:hover .timeline-marker,.panel-how-to-join .timeline-item:hover .timeline-content{border-color:#d9a936;background-color:rgba(217,169,54,.055)}
.panel-contact .panel-body>p{display:none}.panel-contact .panel-body{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px}.streamers-contact-copy{display:flex;align-items:center;gap:15px;min-width:0;text-align:left}.streamers-contact-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border:1px solid rgba(217,169,54,.45);border-radius:12px;background:rgba(217,169,54,.09);color:#e3b440;font-size:20px}.streamers-contact-copy strong{display:block;color:#e6edf1;font-size:16px;margin-bottom:4px}.streamers-contact-copy p{margin:0;color:#91a2ac;font-size:13px;line-height:1.45}.panel-contact .contact-buttons{flex:0 0 auto;margin:0}.panel-contact .contact-buttons .btn{min-width:auto;padding:11px 17px;background:linear-gradient(180deg,#e7b943,#c7922c);border:1px solid #edc45b;color:#0b151c!important}.panel-contact .contact-buttons .btn:hover{background:#f0c75d;border-color:#f0c75d;transform:translateY(-2px)}
@media(max-width:900px){.panel-how-to-join .timeline{grid-template-columns:1fr}.panel-contact .panel-body{flex-direction:column;text-align:center}.streamers-contact-copy{text-align:left}.panel-contact .contact-buttons{justify-content:center}}

/* Convocatoria centrada con accesos de contacto siempre visibles. */
.panel-contact .panel-body{flex-direction:column;justify-content:center;text-align:center;padding:28px}.streamers-contact-copy{flex-direction:column;justify-content:center;max-width:680px;text-align:center}.streamers-contact-copy strong{font-size:18px}.streamers-contact-copy p{font-size:14px}.panel-contact .contact-buttons{display:flex!important;justify-content:center;flex-wrap:wrap;width:100%;margin-top:2px}.panel-contact .contact-buttons .btn{min-width:145px;color:#fff!important;border-width:1px}.panel-contact .contact-buttons .btn i{color:#fff}.panel-contact .contact-buttons .btn-discord{background:#5865f2;border-color:#7180ff}.panel-contact .contact-buttons .btn-instagram{background:linear-gradient(45deg,#f09433,#dc2743 52%,#bc1888);border-color:#e45c72}.panel-contact .contact-buttons .btn-facebook{background:#1877f2;border-color:#4290f5}.panel-contact .contact-buttons .btn-email{background:#263b47;border-color:#49616e}.panel-contact .contact-buttons .btn-discord:hover{background:#6874f5;border-color:#8993ff}.panel-contact .contact-buttons .btn-instagram:hover{background:linear-gradient(45deg,#f5a346,#e33b54 52%,#c92b96);border-color:#ee7488}.panel-contact .contact-buttons .btn-facebook:hover{background:#2b84f3;border-color:#62a3f7}.panel-contact .contact-buttons .btn-email:hover{background:#314955;border-color:#d9a936}.benefits-grid{align-items:stretch}.benefit-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:210px;padding:20px 16px;text-align:center}.benefit-card .benefit-icon{margin:0 auto 12px}.benefit-card h3{display:flex;align-items:center;justify-content:center;min-height:38px;margin:0 0 6px}.benefit-card p{display:flex;align-items:flex-start;justify-content:center;min-height:58px;margin:0;text-align:center;width:100%}

/* Botones sociales integrados al lenguaje visual de Exodus. */
.panel-contact .contact-buttons{gap:10px;margin-top:4px}.panel-contact .contact-buttons .btn{min-width:142px;padding:11px 17px;background:#13232d!important;border:1px solid #354c58!important;border-radius:9px;color:#dce5e9!important;box-shadow:none}.panel-contact .contact-buttons .btn i{transition:color .2s ease}.panel-contact .contact-buttons .btn-discord i{color:#8f98ff}.panel-contact .contact-buttons .btn-instagram i{color:#e97b9e}.panel-contact .contact-buttons .btn-facebook i{color:#6faeff}.panel-contact .contact-buttons .btn-email i{color:#e3b440}.panel-contact .contact-buttons .btn:hover{background:rgba(217,169,54,.12)!important;border-color:#d9a936!important;color:#f2d37d!important;transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.22)}.panel-contact .contact-buttons .btn:hover i{color:#e3b440}
/* Jerarquia de informacion de las tarjetas de stream. */
.streamer-info{display:flex;flex-direction:column;gap:12px;min-height:188px;padding:17px 18px}.streamer-title{order:1;display:-webkit-box;min-height:42px;margin:0;color:#edf2f4;font-size:15px;font-weight:800;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.streamer-header{order:2;gap:10px;margin:0;padding-top:11px;border-top:1px solid #263b46}.streamer-avatar{flex:0 0 38px;width:38px;height:38px}.streamer-name{color:#dce5e9;font-size:14px;font-weight:700}.streamer-login{display:inline-flex;align-items:center;gap:4px;max-width:100%;margin-top:4px;padding:3px 8px;background:#0a171f;border:1px solid #2b414c;border-radius:999px;color:#8fa0aa;font-size:11px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.streamer-login i{color:#d9a936;font-size:9px}.streamer-stats{order:3;gap:7px;margin-top:auto}.streamer-category,.streamer-viewers,.streamer-duration{display:inline-flex;align-items:center;min-height:27px;padding:4px 8px;background:#0a171f;border:1px solid #2b414c;border-radius:999px;color:#aab7be;font-size:11px;line-height:1}.streamer-viewers i,.streamer-duration i,.streamer-category i{color:#d9a936}

/* Avatar oficial con fallback por plataforma */
.streamer-avatar-shell{position:relative;display:flex;flex:0 0 42px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid rgba(217,169,54,.72);border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#1b303a,#09161e);box-shadow:0 0 0 3px rgba(217,169,54,.07)}
.streamer-avatar-shell .streamer-avatar{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;border-radius:50%;object-fit:cover;background:#0a171f}
.streamer-avatar-fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:#d9a936;font-size:17px;font-weight:800}
.streamer-avatar-fallback span{display:none}
.streamer-header{align-items:center;padding:10px 11px;background:rgba(7,17,24,.34);border:1px solid #263b46;border-radius:10px}
.streamer-name{margin:0 0 1px}

/* Datos del directo integrados en la miniatura */
.streamer-thumbnail-meta{position:absolute;right:9px;bottom:9px;left:9px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.streamer-thumbnail-meta .streamer-category,.streamer-thumbnail-meta .streamer-viewers,.streamer-thumbnail-meta .streamer-duration{min-height:24px;padding:4px 8px;background:rgba(5,13,18,.82);border:1px solid rgba(217,169,54,.48);border-radius:999px;color:#e1e7e9;font-size:10px;font-weight:700;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.32);backdrop-filter:blur(5px)}
.streamer-thumbnail-meta .streamer-category{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.streamer-audience-meta{display:flex;align-items:center;gap:5px;margin-left:auto}
.streamer-thumbnail-meta i{color:#d9a936}
.streamer-info{min-height:0}
.streamer-info .streamer-header{order:2;margin-top:auto}