/* ==========================================================================
   La Vuelta Alpa Corral — estilos de las páginas internas
   Una sola hoja para: recorrido, cronograma, gastronomías, alojamientos,
   datos útiles, deslinde, mensajes, inscriptos y vouchers.

   Todas las rutas propias son relativas, asi que el dia que muevas el
   contenido de /2027 a la raiz no hay que tocar nada.
   ========================================================================== */

@font-face{
	font-family:"Wilker";
	src:url("../fonts/wilker.woff2") format("woff2"),
	    url("../fonts/wilker.woff") format("woff");
	font-weight:400;
	font-style:normal;
	font-display:swap;
}

:root{
	--negro:#000;
	--blanco:#fff;
	--gris:#8a8a8a;
	--gris-claro:#d9d9d9;
	--panel:#f1f2f2;
	--rojo:#e01b17;
	--verde:#b6e819;
	--display:"Wilker","Arial Narrow",system-ui,sans-serif;
	--texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--radio:24px;
	--radio-sm:16px;
	--gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}

body{
	margin:0;
	background:var(--blanco);
	color:var(--negro);
	font-family:var(--texto);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	padding:clamp(16px,4vw,40px) var(--gutter) 80px;
	min-height:100vh;
}
body::before{content:none!important}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}

.container,.wrap{max-width:1100px;margin:0 auto;position:relative;z-index:1}

/* ── Botón volver ─────────────────────────────────────────────────────── */
.volver-btn,.btn-volver{
	position:fixed;top:clamp(12px,2.5vw,22px);left:clamp(12px,2.5vw,22px);z-index:1000;
	width:46px;height:46px;border-radius:50%;
	background:var(--negro);color:var(--blanco);border:0;
	display:flex;align-items:center;justify-content:center;
	font-size:1.05rem;text-decoration:none;
	transition:background-color .18s ease,transform .18s ease;
}
.volver-btn:hover,.btn-volver:hover{background:var(--rojo);transform:none}

/* ── Logo y títulos ───────────────────────────────────────────────────── */
.logo-container{text-align:center;margin-bottom:20px}
.logo-img,img.logo,.page-logo{width:130px;max-width:60%;margin:0 auto 16px;display:block}

h1,.page-header h1{
	font-family:var(--display);
	font-weight:400;
	font-size:clamp(26px,5vw,46px);
	line-height:1;
	color:var(--negro);
	text-align:center;
	margin:0 0 8px;
	display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
	letter-spacing:normal;
	text-shadow:none;
}
h1 i,.page-header h1 i{color:var(--rojo);font-size:.72em}

.page-header{text-align:center;margin-bottom:clamp(24px,4vw,40px)}
.page-header p,.page-sub{color:var(--gris);font-size:14px;margin-top:6px}
.divider{width:64px;height:4px;background:var(--rojo);margin:14px auto 0;border-radius:2px}

/* ── Bloques ──────────────────────────────────────────────────────────── */
.box{
	background:var(--panel);
	border:0;
	border-radius:var(--radio);
	padding:clamp(18px,2.4vw,30px);
	margin-bottom:18px;
	backdrop-filter:none;
	color:var(--negro);
}
.box h3{
	font-family:var(--display);font-weight:400;
	font-size:clamp(16px,1.8vw,22px);
	color:var(--negro);
	display:flex;align-items:center;gap:10px;
	margin:0 0 14px;
}
.box h3 i{color:var(--rojo)}
.box h3 span{color:var(--gris)!important;font-family:var(--texto);font-size:13px!important}

/* ── Buscador ─────────────────────────────────────────────────────────── */
#buscador,select,input[type="text"]{
	width:100%;padding:13px 16px;
	border:2px solid var(--negro)!important;
	border-radius:999px;
	background:var(--blanco)!important;
	color:var(--negro)!important;
	font-size:15px;font-family:var(--texto);
	margin-bottom:16px;
}
#buscador::placeholder{color:var(--gris)}
select{border-radius:14px;background:var(--blanco)!important}
select option{background:var(--blanco);color:var(--negro)}

/* ── Tarjetas de lugares (gastronomía, alojamientos, datos útiles) ────── */
#lista-lugares{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

.lugar-card{
	background:var(--blanco);
	border:0;
	border-radius:var(--radio-sm);
	padding:18px;
	transition:transform .2s ease,box-shadow .2s ease;
	box-shadow:none;
}
.lugar-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.lugar-card h4{
	font-family:var(--display);font-weight:400;
	font-size:17px;line-height:1.15;margin:0 0 10px;color:var(--negro);
}
.lugar-card h4 i{color:var(--rojo)}
.lugar-card p{margin:4px 0;font-size:14px;color:#444}
.lugar-card p i{color:var(--gris);width:16px}
.lugar-card strong{font-weight:600}
.lugar-card a{color:var(--negro)!important;border-bottom:1px solid var(--gris-claro)}
.lugar-card a:hover{color:var(--rojo)!important;border-color:var(--rojo);text-decoration:none}
.lugar-card h4 a{border:0}

.categoria-titulo{
	grid-column:1/-1!important;
	text-align:center!important;
	font-family:var(--display);font-weight:400;
	font-size:clamp(20px,2.6vw,30px);
	color:var(--negro);
	margin:28px 0 6px;
	text-transform:uppercase;
}

/* ── Galería (recorrido y cronograma) ─────────────────────────────────── */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;justify-items:center}
.img-grid.single{grid-template-columns:minmax(280px,820px);justify-content:center}
.img-grid.two{grid-template-columns:repeat(2,minmax(280px,520px));justify-content:center}

.img-item{
	width:100%;position:relative;overflow:hidden;
	border:0;border-radius:var(--radio);
	background:var(--panel);
	box-shadow:none;cursor:pointer;
	transition:transform .22s ease,box-shadow .22s ease;
}
.img-item:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
.img-item img{width:100%;height:auto;border-radius:var(--radio);filter:none!important}
.img-num{
	position:absolute;top:12px;left:12px;
	background:var(--negro);border:0;color:var(--blanco);
	font-family:var(--display);font-size:11px;font-weight:400;
	padding:5px 11px;border-radius:999px;backdrop-filter:none;
}
.img-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease;background:rgba(0,0,0,.35);border-radius:var(--radio)}
.img-item:hover .img-zoom{opacity:1}
.img-zoom i{font-size:1.8rem;color:var(--blanco);filter:none}

.btn-descarga,.download-btn,.btn-limpiar{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	font-family:var(--display);font-weight:400;font-size:14px;
	padding:13px 26px;border-radius:999px;
	background:var(--negro);color:var(--blanco)!important;border:0;
	cursor:pointer;text-decoration:none;
	transition:background-color .18s ease;
}
.btn-descarga:hover,.download-btn:hover,.btn-limpiar:hover{background:var(--rojo)}
.btn-descarga-wrap{text-align:center;margin-bottom:20px}
.download-btn{display:flex;margin:30px auto 0}

/* ── Estado vacío ─────────────────────────────────────────────────────── */
.empty-state,.empty{
	text-align:center;padding:64px 20px;color:var(--gris);
	background:var(--panel);border:0;border-radius:var(--radio);
}
.empty-state i,.empty i{font-size:2.6rem;margin-bottom:14px;display:block;color:var(--gris-claro);opacity:1}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.lightbox{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex}
.lightbox-inner{position:relative;max-width:95vw;max-height:92vh;display:flex;align-items:center;justify-content:center}
.lightbox-inner img{max-width:100%;max-height:90vh;border:0;border-radius:var(--radio);box-shadow:none;object-fit:contain}
.lb-close,.lb-nav{
	position:fixed;background:var(--blanco);border:0;color:var(--negro);
	border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background-color .18s ease;z-index:3100;
}
.lb-close{top:18px;right:18px;width:46px;height:46px;font-size:1.35rem}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:1.2rem}
.lb-close:hover,.lb-nav:hover{background:var(--rojo);color:var(--blanco);transform:none}
.lb-nav:hover{transform:translateY(-50%)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:3100;font-family:var(--display);font-size:13px;color:var(--negro);background:var(--blanco);padding:7px 16px;border-radius:999px}
.lb-nav.hidden{display:none}

/* ── Mensajes / avisos ────────────────────────────────────────────────── */
.header{text-align:center;padding:20px 16px 24px}
.live-pill{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--rojo);border:0;border-radius:999px;
	padding:6px 16px;font-family:var(--display);font-size:11px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--blanco);margin-bottom:14px;
}
.live-dot{width:7px;height:7px;background:var(--blanco);border-radius:50%;animation:latir 1.4s ease-in-out infinite;flex-shrink:0}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.3}}
.refresh-bar{text-align:center;font-size:12px;color:var(--gris);padding-bottom:20px}
.refresh-bar span{color:var(--negro);font-weight:600}

.msg-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.msg-card{
	background:var(--panel);border:0;border-top:0;border-radius:var(--radio);
	padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,30px);
	backdrop-filter:none;box-shadow:none;text-align:center;overflow:hidden;
	display:flex;flex-direction:column;align-items:center;
	animation:subir .3s ease both;
}
.msg-card::before{content:none!important}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.msg-badge{
	background:var(--negro)!important;border:0!important;color:var(--blanco)!important;
	font-family:var(--display);font-size:10px;letter-spacing:.08em;
	padding:6px 16px;border-radius:999px;margin-bottom:14px;
	display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;
}
.msg-nombre{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);line-height:1;color:var(--negro);margin-bottom:12px;letter-spacing:normal}
.msg-texto{font-size:15px;line-height:1.55;color:#333!important;margin-bottom:16px;max-width:38ch}
.msg-fecha-wrap{border-top:1px solid var(--gris-claro);padding-top:12px;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
.msg-hora{font-family:var(--texto);font-size:13px;color:var(--gris);letter-spacing:normal}
.msg-dia{font-size:13px;color:var(--gris)}

/* ── Inscriptos ───────────────────────────────────────────────────────── */
.filtro-box{
	background:var(--panel);border:0;border-radius:var(--radio);
	padding:18px;margin-bottom:24px;backdrop-filter:none;
	display:flex;flex-direction:column;gap:8px;
}
.filtro-box label{font-family:var(--display);font-size:13px;color:var(--negro);font-weight:400}
.filtro-box label i{color:var(--rojo)}
.select-wrap{display:flex;align-items:center;gap:10px;background:transparent;border-radius:0;padding:0}
.select-wrap i{color:var(--rojo);font-size:1.1rem}
.select-wrap select{margin-bottom:0}

.box:hover{transform:none}
.count{
	background:var(--negro);color:var(--blanco);
	font-family:var(--display);font-size:15px;
	padding:5px 13px;border-radius:999px;margin-left:auto;
}
.badge-merge{
	background:var(--verde);border:0;color:var(--negro);
	font-family:var(--display);font-size:11px;font-weight:400;
	padding:4px 11px;border-radius:999px;margin-left:6px;white-space:nowrap;
}
.total-inscriptos-badge{
	display:inline-flex;margin-left:12px;
	background:var(--negro)!important;color:var(--blanco);
	font-family:var(--display);font-size:18px;font-weight:400;
	padding:7px 18px;border-radius:999px;
}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
	font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.06em;
	color:var(--gris);padding:10px;text-align:center;border-bottom:2px solid var(--negro);
}
th i{display:none}
td{text-align:center;padding:11px 10px;border-bottom:1px solid var(--gris-claro);font-size:14px}
.no-ins{color:var(--gris);padding:6px 0;margin:0}

/* ── Deslinde ─────────────────────────────────────────────────────────── */
#deslinde .box{text-align:left}
#deslinde p,#deslinde li{line-height:1.65;margin-bottom:12px;font-size:15px;color:#222}
#deslinde .box .box{background:var(--blanco);margin-top:18px}
#deslinde table td{text-align:left;border-bottom:1px solid var(--gris-claro);padding:9px 8px}
#deslinde h1{margin-bottom:18px;text-align:center}

/* ── Resultados ───────────────────────────────────────────────────────── */
.page-bg{background:var(--blanco)!important}
.page-center{max-width:1100px;margin:0 auto}
.cat-block{background:var(--panel);border:0;border-radius:var(--radio);padding:clamp(18px,2.4vw,28px);margin-bottom:18px}
.cat-header{font-family:var(--display);font-size:clamp(17px,2vw,24px);color:var(--negro);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cat-count{background:var(--negro);color:var(--blanco);font-family:var(--display);font-size:14px;padding:4px 12px;border-radius:999px;margin-left:auto}
.fila-corredor{background:var(--blanco);border:0;border-radius:var(--radio-sm);margin-bottom:8px;transition:transform .18s ease}
.fila-corredor:hover{transform:translateY(-2px)}
.corredor-name{font-family:var(--display);font-size:16px;color:var(--negro)}
.foto-corredor,.foto-placeholder{border-radius:50%;border:0;background:var(--gris-claro)}
.medal-oro{color:#d4a017}
.medal-plata{color:#9aa0a6}
.medal-bronce{color:#b06a3b}
.filter-bar{background:var(--panel);border:0;border-radius:var(--radio);padding:18px;margin-bottom:22px}
.clic-hint{color:var(--gris);font-size:13px}
.btn-close-modal,.btn-ig-story,.btn-download-story,.btn-share-row{font-family:var(--display);border-radius:999px}

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width:768px){
	body{padding-top:70px}
	th,td{font-size:13px;padding:9px 6px}
}
@media (max-width:600px){
	#lista-lugares,.img-grid,.img-grid.two,.msg-list{grid-template-columns:1fr}
	.volver-btn,.btn-volver{width:42px;height:42px}
	.box{padding:16px}
	.lb-close{top:12px;right:12px}
	.lb-nav{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
	.lugar-card,.img-item,.fila-corredor,.volver-btn,.btn-descarga,.download-btn{transition:none}
	.msg-card{animation:none}
	.live-dot{animation:none}
}