:root{
			--bg:#0a0805; --card:#0b0d12; --muted:#9aa3b2; --accent:#1c9118; --glass:rgba(255,255,255,0.04);
			--radius:12px; --max:1100px;
		}
		*{box-sizing:border-box}
		html,body{height:100%;}
		body{
			margin:0; 
			font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; 
			color:#f4ebd0;
			-webkit-font-smoothing: antialiased; 
			-moz-osx-font-smoothing:grayscale;
			line-height:1.45;
			/* background image stays fixed and visible, transition happens on top */
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.911), rgba(3,17,13,0.4)), url('../img/estadio_bg.jpg');
			background-blend-mode: multiply;
			background-size: cover;
			background-position: center top;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height:100vh;
		}

		
		.wrap{
			max-width:var(--max); 
			margin:0 auto; 
			padding:40px 20px;}
		/* Navbar: fixed to top so it stays visible while scrolling */
		header{
			position:fixed; 
			top:0; left:0; right:0; z-index:40; 
			backdrop-filter: blur(6px); 
			background:linear-gradient(180deg, rgba(4,6,10,0.6), rgba(4,6,10,0.25)); border-bottom:1px solid rgba(255,255,255,0.03)
		}

		.nav{
			display:flex; 
			align-items:center; 
			justify-content:space-between; 
			gap:16px; 
			padding:14px 20px;
		}
		.menu-toggle{ display:none; background:transparent; border:none; color:inherit; font-size:20px; cursor:pointer }
		.brand{
			display:flex; 
			align-items:center; 
			gap:12px; 
			text-decoration:none; 
			color:inherit
		}
		.logo{
			width:80px; 
			height:60px; 
			border-radius:10px; 
			display:grid; 
			place-items:center; 
			font-weight:800; 
			color:#001;}
		nav a{
			color:var(--muted); 
			margin-left:18px; 
			text-decoration:none; 
			font-weight:600}
		nav a:hover{
			color:var(--accent)
		}
		.cta{
			background:linear-gradient(90deg,var(--accent),#7af3b4); 
			color:#02111a; 
			padding:10px 14px; 
			border-radius:10px; 
			font-weight:700; 
			text-decoration:none
		}

		/* Hero */
		.hero{
			display: block; 
			grid-template-columns:1fr 360px; 
			gap:36px; 
			align-items:center; 
			padding:60px 0
		}

		.hero-left h1{
			font-size:44px; 
			margin:0 0 12px; 
			letter-spacing:-0.02em; 
			text-align: center;
		}
		.hero-left p{
			color:var(--muted);
			 margin:0 0 22px;
			  text-align: center;
			}

		.stats{
			display:flex; 
			gap:18px; 
			margin-top:18px
		}

		.stat{
			background:var(--card);
			 padding:14px 18px;
			  border-radius:12px; 
			  min-width:120px
			}
		.stat strong{
			display:block; 
			font-size:20px
		}

		.hero-card{
			background:linear-gradient(180deg, #03110d, transparent); 
			border-radius:16px; padding:0; 
			box-shadow:0 10px 30px rgba(3,6,20,0.6); 
			border:1px solid rgba(255,255,255,0.03);
			position:relative;
			height:400px;
			width: 300px;
			overflow:hidden;
		}
		.hero-card img{
			position:relative;
			top:0; left:0; right:0; bottom:0;
			height:400px;
			width: 300px;
			object-fit:cover; display:flex;
		}
		.hero-card h3, .hero-card .muted{
			position:relative; 
			z-index:2; 
			margin:0 0 10px
		}

		

		/* Sections */
		section{
			padding:72px 0;
		}
		.section-head{
			display:flex; 
			align-items:center; 
			justify-content:space-between; 
			gap:12px; 
			/*margin-bottom:22px;*/
			font-size: large;
		}
		.cards{
			display:grid; 
			grid-template-columns:1fr; 
			gap:18px
		}
		

/* Make only the two cards inside the About section sit side-by-side */
#about .cards { 
	grid-template-columns: repeat(2, 1fr); 
	gap:18px; 
	text-align: center; 
	}
		.card .cards{
			grid-template-columns:repeat(auto-fit,minmax(200px,1fr))
		}
		.card{
					background:var(--card);
					padding:18px; 
					border-radius:12px; 
					border:1px solid rgba(255,255,255,0.03);
					background:linear-gradient(135deg, rgba(3, 54, 40, 0.76), rgba(8, 78, 58, 0.678));
					transition: transform 240ms ease, box-shadow 240ms ease;
					/* toned-down neon glow to reduce haze */
					box-shadow:
						0 12px 30px rgba(0,0,0,0.5),
						0 0 20px rgba(28,145,24,0.16),
						0 0 48px rgba(122,95,255,0.12);
				}
		.card:hover{
					transform: translateY(-6px);
				}

		/* Optional stronger neon variant */
		.card.neon-strong{
					box-shadow:
						0 14px 36px rgba(0,0,0,0.55),
						0 0 28px rgba(28,145,24,0.22),
						0 0 64px rgba(122,95,255,0.18);
				}

		@media (prefers-reduced-motion: reduce){
			.card{ transition:none; transform:none; }
		}
		.card h4{
			margin:0 0 8px
		}
		.muted{
			color:var(--muted);
		}	
		
#history .cards { 
	grid-template-columns: repeat(2, 1fr); 
	gap:18px; 
	text-align: center;
	}
	#history .card .cards{
			grid-template-columns:repeat(auto-fit,minmax(200px,1fr))
		}
	#history .card{
			background:var(--card); 
			padding:1px; 
			border-radius:12px; 
			border:1px solid rgba(255,255,255,0.03);
			background:linear-gradient(135deg, rgba(3, 54, 40, 0.76), rgba(8, 78, 58, 0.678));
		}
		.card h4{
			margin:0 0 8px;
			
		}
		.muted{
			color:var(--muted)
		}	
				
		/* Carousel */
		.carousel{
			position:relative; 
			width:100%; 
			overflow:hidden; 
			border-radius:16px; 
			margin-top:22px
		}
		.carousel-track{
			display:flex; 
			transition:transform 0.5s ease-in-out; 
			width:100%
		}
		.carousel-slide{
			min-width:100%; 
			height:500px;
			background-size:cover; 
			background-position:center;
			position:relative;
			display:flex;
			align-items:center;
			justify-content:center
		}
		.carousel-slide::before{
			content:'';
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background:linear-gradient(135deg, rgba(3,17,13,0.7), rgba(3,17,13,0.4));
			z-index:1
		}
		.carousel-content{
			position:relative;
			z-index:2;
			width:100%;
			max-width:600px;
			padding:40px;
		}
		.carousel-slide .card{
			background:rgba(11,13,18,0.9);
			backdrop-filter:blur(10px);
			border:1px solid rgba(255,255,255,0.1)
		}
		.carousel-prev, .carousel-next{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			background:rgba(28,145,24,0.8);
			color:#f4ebd0;
			border:none;
			width:48px;
			height:48px;
			border-radius:10px;
			cursor:pointer;
			z-index:10;
			font-size:20px;
			display:flex;
			align-items:center;
			justify-content:center;
			transition:all 0.3s ease
		}
		.carousel-prev:hover, .carousel-next:hover{
			background:rgba(28,145,24,1); 
			transform:translateY(-50%) scale(1.1)
		}
		.carousel-prev{
			left:20px
		}
		.carousel-next{
			right:20px
		}
		.carousel-dots{
			position:absolute;
			bottom:20px;
			left:50%;
			transform:translateX(-50%);
			display:flex;
			gap:8px;
			z-index:10
		}
		.carousel-dot{
			width:10px;
			height:10px;
			border-radius:50%;
			background:rgba(255,255,255,0.3);
			cursor:pointer;
			transition:all 0.3s ease;
			border:none
		}
		.carousel-dot.active{
			background:var(--accent); 
			transform:scale(1.3)
		}
		
		footer{
			padding:28px 0; 
			border-top:1px solid rgba(255,255,255,0.03); 
			margin-top:40px
		}
		.socials{
			display:flex; 
			gap:12px
		}
		.icon{width:40px; 
			height:40px; 
			display:inline-grid; 
			place-items:center; 
			border-radius:10px; 
			background:var(--glass); 
			color:var(--muted); 
			overflow:hidden
		}
		.icon img{
			width:20px; 
			height:20px; 
			display:block
		}

		/* Social card (centered below contact) */
		.social-card{
			display:flex; 
			justify-content:center; 
			gap:12px; 
			align-items:center}

		/* Center footer copyright */
		footer .copyright{display:block; text-align:center;
			place-items:center; 
			border-radius:10px; 
			background:var(--glass); 
			color:var(--muted);
		}	
		/* Social card (centered below contact) */
		.social-card{
			display:block; 
			justify-content:center; 
			gap:12px; 
			align-items:center}

		/* Center footer copyright */
		footer .copyright{display:block; text-align:center}

		/* Footer: keep partner text next to logo and constrain logo size */
		footer .container{
			display:flex;
			align-items:center;
			justify-content:center;
			gap:12px;
			margin-top:12px;
			flex-wrap:wrap;
		}
		footer .container .row{
			margin:0;
			padding-right:8px;
			color:var(--muted);
			font-weight:600;
		}
		footer .logo-container{display:flex; align-items:center}
		footer .logo-container img{
			max-width:160px;
			height:auto;
			display:block;
		}

		/* Responsive */
		@media (max-width:920px){
			.hero{grid-template-columns:1fr;}
			/* show hamburger and hide inline nav links */
			.menu-toggle{ display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:8px; color:var(--muted); border:1px solid rgba(255,255,255,0.04); background:transparent }
			nav a{display:none}
			/* mobile nav panel (hidden by default, shown when header has .open) */
			nav{
				display:none !important; 
				position:fixed; 
				top:72px; 
				right:16px; 
				background:linear-gradient(180deg, rgba(3,17,13,0.95), rgba(3,17,13,0.85));
				padding:12px 16px; 
				border-radius:12px; 
				z-index:60; 
				min-width:200px; 
				flex-direction:column; 
				gap:10px; 
				box-shadow:0 10px 30px rgba(0,0,0,0.6);
			}
			header.open nav{ display:flex !important }
			nav a{ display:block; margin:0; color:var(--muted); font-weight:600; padding:8px 6px; text-decoration:none }
		}

	/* Stack the About cards on small devices */
	@media (max-width:720px){
	    #about .cards{ grid-template-columns: 1fr; }
	    .carousel-slide{ height:420px }
	    .hero-left h1{ font-size:32px }
	    .hero{ padding:40px 0 }
	}

	/* Ensure social icons in the contact card are visible on small screens */
	@media (max-width:720px){
		#contact .card{
			/* allow wrapping and stack vertically on small screens */
			display:flex;
			flex-wrap:wrap;
			flex-direction:column;
			align-items:center;
			gap:12px;
			padding:12px;
		}
		/* make the right-side CTA container full width and centered */
		/* override inline min-width on the CTA wrapper so it doesn't push icons off-screen */
		#contact .card > div:last-child{
			min-width:0 !important;
			width:100% !important;
			text-align:center;
			order:3;
		}
		/* keep icons tidy when stacked */
		#contact .card .icon{ margin:6px; }
		#contact .card .cta{ display:inline-block; }
	}

	/* Small phones */
	@media (max-width:420px){
	    .carousel-slide{ height:320px }
	    .logo{ width:54px; height:46px }
	    .hero-left h1{ font-size:26px }
	}

	/* About map: simple sizing so it looks good in the About section */
	.about-map{ 
		display:block; 
		margin:20px auto 0;
		max-width:820px; 
		width:100%; 
		height:auto; 
		border-radius:12px; 
		
		padding-top: 75px;
	}

	/* Centered large logo (middle of page) */
	.center-logo{ 
		display:flex; 
		justify-content:center; 
		align-items:center; 
		margin:28px 0 
	}
	.center-logo-img{ 
		width:260px; 
		max-width:90%; 
		height:auto; 
		display:block; 
		border-radius:12px; 
	}

	@media (max-width:720px){
	    .center-logo-img{ width:200px }
	}

	@media (max-width:420px){
	    .center-logo-img{ width:160px }
	}

/* Stat circle used in #history */
	.stat-circle{ 
		width:110px; 
		height:110px; 
		border-radius:50%; 
		display:inline-flex;
		align-items:center;
		justify-content:center; 
		margin:12px auto; 
		background:linear-gradient(180deg, rgba(28,145,24,0.12), rgba(0,0,0,0.2)); 
		border:1px solid rgba(255,255,255,0.04); 
		box-shadow:0 8px 20px rgba(0,0,0,0.45) 
	}
	.stat-circle-inner{ 
		width:86px; 
		height:86px; 
		border-radius:50%; 
		display:flex;
		align-items:center; 
		justify-content:center; 
		background:linear-gradient(180deg, rgba(3,17,13,0.6), rgba(3,17,13,0.3)); 
	}
	.stat-value{ 
		font-size:24px; 
		font-weight:800; 
		color:var(--accent); 
	}

@media (max-width:420px){
	.stat-circle{ width:86px; height:86px }
	.stat-circle-inner{ width:66px; height:66px }
	.stat-value{ font-size:18px }
}

/* show a plus sign after the stat value; hide when value is empty */
.stat-value::before{ 
	content:'+'; 
	margin-left:6px; 
	color:var(--accent); 
	font-weight:800 }
.stat-value:empty::before{ content:'' }

	/* Add top offset so main content isn't covered by the fixed header. Adjust value if header height changes. */
	body{
		padding-top:72px
	}