:root {
	--red: #E8473C;
	--red-dark: #D33A2F;
	--navy: #1B2748;
	--text: #16181D;
	--gray-light: #F2F2F2;
	--gray-mid: #6B7280;
}



body {
	font-family: 'Montserrat',Arial,sans-serif;
}


a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

.display {
	font-family: 'Bebas Neue',Impact,sans-serif !important;
	text-transform: uppercase;
	letter-spacing: .01em !important;
	line-height: 1.02 !important;
}

.container {
	max-width: 1180px;
	margin: 0 auto;
}

.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	border: none;
}

.btn-primary {
	background: var(--red);
	color: #fff!important;
}

	.btn-primary:hover {
		background: var(--red-dark);
	}

.btn-light {
	background: #fff;
	color: Black !important;
}

	.btn-light:hover {
		background: #eee;
	}


#labelDeporte {font-size:15px!important}

/* Header */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid #ececec;
	position: relative;
}



/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background: linear-gradient(rgba(10,14,24,.5),rgba(10,14,24,.5)),var(--navy);
	background-size: cover;
	background-position: center;
	color: White;
	padding: 60px 24px;
}

/* Vídeo de fondo de la portada */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
	pointer-events: none;
}

/* Capa oscura sobre el vídeo para mantener legible el texto */
.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(10,14,24,.5),rgba(10,14,24,.5));
	z-index: 1;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
}

.hero-content {
	max-width: 560px;
}

.hero h1 {
	font-size: 58px !important;
	margin-bottom: 18px !important;
	font-family: 'Bebas Neue',Impact,sans-serif;
	color: White!important
}

	.hero h1 .accent {
		display: block !important;
		font-size: 72px !important;
		font-family: 'Bebas Neue',Impact,sans-serif;
		color: White !important;
		line-height: 70px !important;
	}

.hero p {
	font-size: 17px;
	margin-bottom: 28px;
	opacity: .92;
	color:White
}

.hero .btn-group {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

@media (max-width:600px) {
	.hero h1 {
		font-size: 36px;
	}

		.hero h1 .accent {
			font-size: 46px;
		}
}

/* Promo banner */
.promo-banner {
	background: var(--gray-light);
	padding: 28px 24px;
	background-image: url('/images.ashx?id=15a593d1459081d57e8ae1dfde225d7d');
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

	.promo-banner .container {
		display: flex;
		align-items: center;
		gap: 24px;
	}

.itau-tag {
	flex-shrink: 0;
	font-family: 'Montserrat',sans-serif;
	max-width: 90px;
}

.promo-banner h3 {
	font-size: 38px;
	color: var(--navy);
	margin-bottom: 0px;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	padding: 0px;
	line-height: 38px;
}

.promo-banner p {
	font-size: 14px;
	color: #444;
}

@media (max-width:600px) {
	.promo-banner .container {

	}
}

/* Clubs */
.clubs {
	padding: 24px 0px;
}

	.clubs h2 {
		text-align: center;
		font-size: 24px;
		margin-bottom: 36px;
		letter-spacing: .02em;
		font-family: "Montserrat", sans-serif !important;
		font-weight: 600;
		color: #575656;
	}

.clubs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 auto;
}

.club-card {
	position: relative;
	height: 270px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(to bottom,rgba(10,10,12,.05) 0%,rgba(10,10,12,.1) 45%,rgba(10,10,12,.8) 100%),#3a3a3a;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px;
	color: #fff;
}
	/* placeholder: cada .club-card necesita su foto real de fondo (background-image) */
	.club-card .badge {
		position: absolute;
		top: 16px;
		right: 16px;
		background: #de575b;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		padding: 5px 13px;
		border-radius: 10px;
		letter-spacing: .04em;
	}

	.club-card h3 {
		font-size: 38px;
		margin-bottom: 4px;
		line-height:38px;
		color:white!important
	}

	.club-card p {
		font-size: 13.5px;
		opacity: .9;
		color: white;
	}

@media (max-width:760px) {
	.clubs-grid {
		grid-template-columns: 1fr;
	}
}

/* YoSoyConecta */
.yosoyconecta {
	background: var(--navy);
	color: #fff;
	padding: 54px 24px;
}

	.yosoyconecta .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 24px;
	}

	.yosoyconecta h2 {
		font-size: 40px;
		margin-bottom: 10px;
	}

	.yosoyconecta p {
		font-size: 15px;
		max-width: 540px;
		opacity: .9;
		margin-bottom: 20px;
	}

/* Two col promos */
.two-col-promos {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.promo-card {
	position: relative;
	min-height: 190px;
	padding: 30px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),#9a9a9a;
}
	/* placeholder: cada .promo-card necesita su foto real de fondo */
	.promo-card h3 {
		font-size: 30px;
		margin-bottom: 6px;
	}

	.promo-card p {
		font-size: 14px;
		color: #333;
	}

@media (max-width:760px) {
	.two-col-promos {
		grid-template-columns: 1fr;
	}
}

/* App banner */
.app-banner {
	position: relative;
	padding: 54px 24px;
	color: #fff;
	background: linear-gradient(rgba(8,12,20,.55),rgba(8,12,20,.55)),#2b3a55;
}
	/* placeholder: foto aérea real de las canchas como fondo */
	.app-banner h2 {
		font-size: 32px;
		margin-bottom: 8px;
	}

	.app-banner p {
		margin-bottom: 20px;
		opacity: .9;
		font-size: 15px;
	}

.store-badges {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.store-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #000;
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}

/* Sponsors */
.sponsors {
	padding: 54px 24px;
	text-align: center;
}

.sponsors-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 28px 44px;
	max-width: 980px;
	margin: 0 auto;
}

.sponsor {
	font-weight: 700;
	color: #666;
	font-size: 15px;
	opacity: .85;
}
/* placeholder: sustituir cada .sponsor por el logo real en svg/png */

/* Footer */
.site-footer {
	background: var(--navy);
	color: #fff;
	padding: 48px 24px 30px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
}

	.footer-grid h4 {
		font-size: 13.5px;
		margin-bottom: 14px;
		color: #fff;
		letter-spacing: .02em;
	}

	.footer-grid ul {
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: 13.5px;
		opacity: .85;
	}

.footer-tagline {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	margin-bottom: 14px;
}

.footer-logo-mark {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--red);
	flex-shrink: 0;
}

@media (max-width:760px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}