.upload-preview{margin-top:.5rem;display:flex;align-items:center;gap:.5rem}
.upload-preview img{display:none;max-width:180px;max-height:120px;border-radius:10px;border:1px solid var(--border);box-shadow:0 8px 30px color-mix(in oklab, var(--primary) 18%, transparent)}
:root {
	--bg: #0b0f1a;
	--text: #e6edf7;
	--muted: #9aa4b2;
	--card: rgba(17, 23, 34, 0.6);
	--brand: #5DADE2; /* azul claro cielo; se puede sobrescribir desde HTML */
	--primary: var(--brand);
	--accent: #7c3aed;
	--border: rgba(147, 197, 253, 0.15);
	--header-brand: #f9fafb;
	--header-sub: #e5e7eb;
	--header-nav: #f9fafb;
	--count-number: #f9fafb;
	--count-label: #e5e7eb;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f8fafc;
		--text: #0b1220;
		--muted: #4b5563;
		--card: rgba(255, 255, 255, 0.75);
		--border: rgba(2, 6, 23, 0.12);
		/* brand/primary stay, but can be tuned for light */
		--header-brand: #0b1220;
		--header-sub: #4b5563;
		--header-nav: #0b1220;
		--count-number: #111827;
		--count-label: #4b5563;
	}
	body::before {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.474), rgba(255, 254, 254, 0.77)),
			url('../trotamundoos.png');
	}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden}
img, video, iframe {max-width:100%}
body{
	font-family:'Inter',system-ui,Segoe UI,Roboto,Arial;
	display:flex;flex-direction:column;
	background-color:var(--bg);
	color:var(--text);
}
body::before{
	content:'';
	position:fixed;
	inset:0;
	z-index:-1;
	background-image:url('../trotamundoos.png');
	background-size:cover;
	background-position:center;
	background-color:var(--bg);
	background-blend-mode:overlay;
	pointer-events:none;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:var(--card);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-footer{background:transparent;border-top:1px solid var(--border);margin-top:auto}
.header-inner{display:flex;align-items:center;justify-content:space-between;position:relative}
.site-header .logo{margin:0;font-size:1.25rem}
.brand{display:flex;gap:.75rem;align-items:center}
#league-logo{width:48px;height:48px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:#0f172a;backdrop-filter:saturate(120%) blur(6px)}
.brand-text .league{display:block;color:var(--header-brand);font-weight:600}
.brand-text .location{color:var(--header-sub)}
.site-header .logo a{color:var(--header-brand)}
.site-header a{color:var(--text);text-decoration:none}
.site-header nav{display:flex;align-items:center;gap:1rem}
.site-header nav a{color:var(--header-nav)}
.nav-logos{display:flex;align-items:center;gap:.5rem;margin-right:.25rem}
.nav-logo{height:48px;width:48px;object-fit:cover;border-radius:50%;border:1px solid var(--border);background:#0f172a}
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:color-mix(in oklab, var(--bg) 60%, #000 40%);color:#fff;cursor:pointer;font-size:1.2rem;padding:0}
.nav-toggle:focus{outline:none;border-color:color-mix(in oklab, var(--primary) 40%, var(--border))}
.hero{padding:2.5rem 0}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:center}
.hero-copy h2{margin-top:0;font-size:2.4rem;letter-spacing:.2px}
.lead{color:var(--muted)}
.hero-meta{display:flex;flex-wrap:wrap;gap:1rem;margin:.75rem 0}
.meta .label{display:block;color:var(--muted);font-size:.8rem}
.meta .value{font-weight:600}
.ctas{display:flex;gap:.75rem;margin-top:1rem}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;text-decoration:none;font-weight:600;transition:transform .08s ease, box-shadow .2s}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 30px color-mix(in oklab, var(--primary) 35%, transparent)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--border);color:#fff;backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab, var(--bg) 60%, #000 40%)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.1rem;backdrop-filter:saturate(120%) blur(10px)}
.section{margin:2rem auto}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.specs{margin:0;padding-left:1rem}
.placeholder{height:240px;background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 85%, transparent), color-mix(in oklab, var(--bg) 60%, transparent));border:1px dashed var(--border);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.agenda{margin:0;padding-left:0}
.agenda-card{position:relative;overflow:hidden}
.agenda-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.35rem}
.agenda-row{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:.15rem;align-items:flex-start}
.agenda-time{
	min-width:72px;
	font-weight:700;
	color:var(--primary);
	background:color-mix(in oklab, var(--primary) 18%, transparent);
	border-radius:999px;
	padding:.4rem .7rem;
	text-align:center;
	border:1px solid var(--border);
	box-shadow:0 8px 24px color-mix(in oklab,var(--primary) 18%,transparent);
}
.agenda-info h4{margin:.05rem 0 .1rem 0;font-size:.95rem}
.agenda-info p{margin:0;font-size:.85rem;color:var(--muted)}
.cta-bar{background:transparent;border-top:1px solid var(--border);padding:1.25rem 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr} .grid{grid-template-columns:1fr} .cta-inner{flex-direction:column;gap:.75rem} }

.hero-card .card{height:100%}

.countdown-card{
	background:radial-gradient(circle at top left,color-mix(in oklab,var(--primary) 10%,#111827),color-mix(in oklab,#020617 20%,#111827 80%));
	border:1px solid color-mix(in oklab,var(--primary) 28%,rgba(148,163,184,.45));
	box-shadow:0 18px 36px rgba(15,23,42,.72);
}

.countdown-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:.75rem;
	margin-top:.75rem;
}

.count-box{
	background:radial-gradient(circle at top,color-mix(in oklab,var(--primary) 16%,#111827),color-mix(in oklab,#020617 15%,#111827 85%));
	border-radius:.9rem;
	padding:.45rem .3rem .55rem;
	border:1px solid color-mix(in oklab,var(--primary) 22%,rgba(148,163,184,.5));
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-width:0;
}

.count-number{
	font-size:1.45rem;
	font-weight:800;
	letter-spacing:.06em;
	color:var(--count-number);
	text-shadow:0 0 18px color-mix(in oklab,var(--primary) 70%,transparent);
}

.count-label{
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.15em;
	color:var(--count-label);
	margin-top:.15rem;
}

/* Ajuste específico del contador en modo claro: tarjeta clara, texto oscuro y rojos suaves */
@media (prefers-color-scheme: light){
	.countdown-card{
		background:linear-gradient(135deg,#ffffff,#fee2e2);
		border:1px solid rgba(248,113,113,.55);
		box-shadow:0 18px 40px rgba(15,23,42,.22);
	}
	.count-box{
		background:linear-gradient(135deg,#ffffff,color-mix(in oklab,var(--primary) 16%,#fee2e2 84%));
		border:1px solid rgba(185,28,28,.55);
	}
	.count-number{
		text-shadow:none;
	}
}

@media (max-width:600px){
		/* Solo muestra los primeros 8 equipos en móvil */
		.carousel-track .carousel-item:nth-child(n+9){display:none}
	.countdown-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
}

@media (max-width:900px){
	.site-header nav{
		display:none;
		flex-direction:column;
		position:absolute;
		right:1rem;
		top:72px;
		background:color-mix(in oklab, var(--bg) 80%, #020617 20%);
		padding:.7rem .95rem;
		border-radius:14px;
		box-shadow:0 22px 60px rgba(15,23,42,.9);
		backdrop-filter:saturate(150%) blur(18px);
		border:1px solid var(--border);
		z-index:40;
	}
	.site-header nav a{
		display:block;
		padding:.55rem .35rem;
		min-width:170px;
		text-align:left;
		border-bottom:1px solid color-mix(in oklab, var(--border) 80%, #000 20%);
		color:var(--text);
		font-weight:600;
	}
	.site-header nav a:last-child{border-bottom:none;}
	.site-header nav.nav-open{display:flex;}
	.nav-toggle{display:inline-flex;}
}

/* Accent badges for distances */
.badge {display:inline-block;padding:.3rem .6rem;border-radius:999px;font-size:.8rem;background:color-mix(in oklab, var(--primary) 18%, transparent);border:1px solid var(--border);color:var(--primary);font-weight:600}
.card h4 {display:flex;align-items:center;gap:.5rem}

/* Strava embed wrapper styling (we can't restyle internal content) */
.embed { margin-top: .75rem; }
.embed .embed-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.embed .embed-header .title { font-weight:600; color:var(--text); }
.embed .embed-header .actions a { color:var(--muted); text-decoration:none; font-size:.9rem; }
.strava-frame, .embed iframe, .strava-embed-placeholder { width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 8px 30px color-mix(in oklab, var(--primary) 18%, transparent); }
.strava-frame { aspect-ratio: 16 / 9; }
.strava-embed-placeholder, .embed iframe:not(.embed-wrapper iframe) { min-height: 450px; }
.embed-wrapper { position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 400px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 8px 30px color-mix(in oklab, var(--primary) 18%, transparent); }
.embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Formulario de inscripción */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.form-control{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.form-control.full{grid-column:1/-1}
.form-control label{color:var(--muted);font-weight:600}
.form-control input,.form-control select{appearance:none;background:color-mix(in oklab, var(--bg) 70%, #000 30%);border:1px solid var(--border);border-radius:10px;padding:.65rem .75rem;color:var(--text);width:100%}
.form-control input::placeholder{color:color-mix(in oklab, var(--muted) 75%, transparent)}
.form-control input:focus,.form-control select:focus{outline:none;border-color:color-mix(in oklab, var(--primary) 40%, var(--border))}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.muted{color:var(--muted)}
@media (max-width:900px){ .form-grid{grid-template-columns:1fr} }

@media (max-width:900px){
	.embed .embed-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
	.embed .embed-header .actions a { font-size: 1rem; }
	.embed-wrapper { aspect-ratio: 16 / 9; min-height: 260px; }
}

@media (max-width:600px){
	.embed-wrapper { min-height: 240px; }
	.embed .embed-header { margin-bottom: .75rem; }
}


.form-steps{margin-bottom:1rem}
.form-step{display:none}
.form-step.active{display:block}

/* Fullscreen hero video (Index only) */
.hero-full{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.65))}
.hero-content{position:relative;text-align:center;z-index:2;color:#f9fafb;text-shadow:0 10px 24px rgba(0,0,0,.6)}
.hero-full .lead{color:#e5e7eb;opacity:.98;max-width:780px;margin:0 auto 1rem auto}
.hero-full .ctas{justify-content:center}
.overlay-header .site-header{position:absolute;top:0;left:0;right:0;z-index:3;background:transparent;border-bottom:1px solid rgba(255,255,255,.15)}
/* En el Index, el header va sobre el video oscuro: forzamos texto claro siempre */
.overlay-header .brand-text .league,
.overlay-header .brand-text .location,
.overlay-header .site-header .logo a,
.overlay-header .site-header nav a{
	color:#f9fafb;
}

/* Mejor comportamiento al hacer scroll a secciones desde el menú (Index) */
.overlay-header section{scroll-margin-top:88px}

/* Ajustes extra para móviles (Index y generales) */
@media (max-width:600px){
	.container{padding:.85rem}
	.header-inner{gap:.5rem}
	.nav-logos{margin-right:0;gap:.35rem}
	.nav-logo{width:40px;height:40px}
	.site-header .logo{font-size:1.05rem}
	.brand-text .league{font-size:.8rem}
	.brand-text .location{font-size:.75rem}
	.hero-full{min-height:90svh}
	.hero-content h2{font-size:1.8rem;margin-bottom:.4rem}
	.hero-full .lead{font-size:.95rem;padding:0 .4rem}
	.grid{grid-template-columns:1fr}
	.section{margin:1.5rem auto}
	#calendario.section, #equipos.section, #faq.section{margin-top:1.2rem;margin-bottom:1.2rem}
	.calendar-list{gap:.4rem}
	.calendar-item{padding:.7rem .85rem}
}

@media (max-width:480px){
	body{font-size:15px}
	.section{margin:1.5rem auto}
	.card{padding:1rem}
	.hero-full{min-height:80svh}
	.hero-content h2{font-size:1.6rem}
	.hero-full .lead{font-size:.9rem}
	.ctas{flex-direction:column;align-items:stretch}
	.ctas .btn{width:100%;text-align:center}
	.calendar-item .date{min-width:90px}
}

/* Eventos cards */
.event-thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:12px;border:1px solid var(--border);box-shadow:0 8px 30px color-mix(in oklab, var(--primary) 18%, transparent)}
.event-thumb.contain{aspect-ratio:16/9;object-fit:contain;background:#0f172a}
.event-meta{color:var(--muted);margin:.35rem 0 .5rem 0}
.team-logo{display:block;margin-top:.75rem;max-width:100%;height:64px;object-fit:contain;border:1px solid var(--border);border-radius:12px;background:#0f172a;padding:.25rem}

/* Teams carousel */
.teams-carousel{position:relative;display:flex;align-items:center;gap:.5rem}
.carousel-viewport{overflow:hidden;flex:1}
.carousel-track{display:flex;gap:1.25rem;scroll-snap-type:none;overflow-x:auto;padding:.5rem .25rem;scroll-behavior:auto;scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-item{flex:0 0 auto;height:140px;display:flex;align-items:center;justify-content:center;scroll-snap-align:none;padding:.25rem .5rem;background:transparent;border:none;border-radius:0;box-shadow:none}
.carousel-item img{height:100%;width:auto;object-fit:contain;filter:saturate(.92) opacity(.95);transition:transform .2s ease, filter .2s ease}
.carousel-item img:hover{transform:scale(1.05);filter:saturate(1) opacity(1)}
.carousel-btn{background:color-mix(in oklab, var(--bg) 50%, #000 50%);color:#fff;border:1px solid var(--border);width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.carousel-btn:hover{filter:brightness(1.1)}
.carousel-btn:disabled{opacity:.5;cursor:default}
@media (max-width:900px){ .carousel-item{height:110px} }

/* Carrusel más compacto y tipo grid en móviles pequeños */
@media (max-width:600px){
	.teams-carousel{margin-top:.25rem}
	.carousel-viewport{overflow:visible}
	.carousel-track{
		display:grid;
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:.6rem;
		padding:.25rem 0;
	}
	.carousel-item{
		height:72px;
		padding:0;
	}
}

/* Centered, large section titles (Index only) */
.overlay-header #eventos > h3,
.overlay-header #equipos > h3,
.overlay-header #faq > h3,
.overlay-header #calendario > h3 { text-align:center; font-size:2.2rem; line-height:1.2; margin:0 0 1rem 0 }
@media (max-width:900px){
	.overlay-header #eventos > h3,
	.overlay-header #equipos > h3,
	.overlay-header #faq > h3,
	.overlay-header #calendario > h3 { font-size:1.9rem }
}

/* Calendar list styling */
.calendar-list{display:flex;flex-direction:column;gap:.6rem}
.calendar-item{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:.9rem 1rem;backdrop-filter:saturate(120%) blur(8px)}
.calendar-logo{width:52px;height:52px;object-fit:cover;border-radius:50%;border:1px solid var(--border);background:#0f172a}
.calendar-item .date{min-width:130px;font-weight:700;color:var(--primary)}
.calendar-item .info{color:var(--text)}
.calendar-item .meta-line{margin-top:.25rem}
@media (max-width:900px){ .calendar-item .date{min-width:110px} }

/* Versión móvil del calendario: tarjetas más compactas y layout apilado */
@media (max-width:700px){
	.calendar-item{
		display:grid;
		grid-template-columns:auto 1fr;
		column-gap:.75rem;
		row-gap:.15rem;
		padding:.7rem .8rem;
		align-items:center;
	}
	.calendar-logo{
		width:44px;
		height:44px;
		grid-row:1 / span 2;
	}
	.calendar-item .date{
		min-width:auto;
		font-size:.9rem;
		margin-bottom:.05rem;
		grid-column:2;
	}
	.calendar-item .info{
		grid-column:2;
	}
}

/* Versión escritorio del calendario: dos columnas cuando hay espacio */
@media (min-width:1100px){
	.calendar-list{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:.8rem 1.2rem;
	}
}

/* Footer redesigned */
.site-footer{
	margin-top:3rem;
	padding:1.75rem 0 1.2rem;
	background:
		radial-gradient(900px 500px at 10% -20%, color-mix(in oklab, var(--primary) 20%, transparent) 0%, transparent 60%),
		linear-gradient(to bottom, color-mix(in oklab, #020617 70%, var(--bg) 30%), var(--bg));
	border-top:1px solid color-mix(in oklab, var(--border) 70%, #000 30%);
	box-shadow:0 -18px 40px rgba(15,23,42,.9);
}
.site-footer .footer-meta{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:1.5rem;
	margin-bottom:.75rem;
	flex-wrap:wrap;
}
.site-footer .footer-group{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:.4rem;
}
.site-footer .footer-label{
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.08em;
	font-size:.75rem;
	font-weight:600;
}
.site-footer .social-links a,
.site-footer .contact-list a{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	color:var(--muted);
	text-decoration:none;
	margin-right:.5rem;
	padding:.25rem .5rem;
	border-radius:999px;
	background:color-mix(in oklab, var(--bg) 75%, #000 25%);
	border:1px solid color-mix(in oklab, var(--border) 70%, #020617 30%);
}
.site-footer .social-links a:hover,
.site-footer .contact-list a:hover{
	color:var(--text);
	background:color-mix(in oklab, var(--primary) 16%, #020617 84%);
	border-color:color-mix(in oklab, var(--primary) 35%, var(--border));
}
.site-footer .social-links a svg,
.site-footer .contact-list a svg{
	width:16px;
	height:16px;
}
.site-footer .footer-legal{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:.75rem;
	border-top:1px solid color-mix(in oklab, var(--border) 70%, #000 30%);
	padding-top:.6rem;
	flex-wrap:wrap;
	font-size:.8rem;
}
.site-footer .legal-link{
	color:var(--muted);
	text-decoration:none;
}
.site-footer .legal-link:hover{color:var(--text)}
.partner-logos{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:1rem;
	flex-wrap:wrap;
	padding:.5rem .9rem;
	border-radius:18px;
	background:color-mix(in oklab, var(--bg) 65%, #020617 35%);
	border:1px solid color-mix(in oklab, var(--border) 80%, #000 20%);
}
.partner-logos img{
	height:52px;
	object-fit:contain;
	max-width:160px;
	border-radius:14px;
	padding:.25rem .8rem;
	background:#020617;
	box-shadow:0 14px 34px rgba(15,23,42,.9);
	filter:saturate(.95) opacity(.95);
	transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.partner-logos img:hover{
	transform:translateY(-2px) scale(1.05);
	filter:saturate(1.08) opacity(1);
	box-shadow:0 20px 40px rgba(15,23,42,1);
}
@media (max-width:700px){
	.site-footer{
		padding:1.5rem 0 1rem;
	}
	.site-footer .footer-meta{
		flex-direction:column;
		align-items:flex-start;
	}
	.partner-logos{
		padding:.4rem .7rem;
	}
	.partner-logos img{
		height:42px;
		max-width:140px;
	}
}