/* ======================================================================
   Botones de navegación entre secciones (Rutas / Eventos / Destinos / Inicio)
   con borde de 1px "vivo": un degradado cónico que rota lentamente y un aura
   suave del mismo color. Mismo tamaño y forma redondeada que el switch Lista|Mapa.
   Los ángulos se animan con @property; sin soporte queda un borde fijo con
   los mismos colores. Claro y oscuro con html[data-theme="dark"].
   ====================================================================== */
@property --tur-ang {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.tur-nav-secciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 34px 0 6px; }

.tur-nav-btn {
	--tur-fondo: #fff;
	--tur-c1: #f91942; --tur-c2: #f5a927; --tur-c3: #a327f5;
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 24px;
	border: 1px solid transparent; border-radius: 999px;
	background:
		linear-gradient(var(--tur-fondo), var(--tur-fondo)) padding-box,
		conic-gradient(from var(--tur-ang), var(--tur-c1), var(--tur-c2), var(--tur-c3), var(--tur-c1)) border-box;
	color: #1b1f27 !important;
	font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
	animation: tur-nav-giro 7s linear infinite;
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Aura: el mismo degradado, desenfocado y por detrás */
.tur-nav-btn::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
	background: conic-gradient(from var(--tur-ang), var(--tur-c1), var(--tur-c2), var(--tur-c3), var(--tur-c1));
	filter: blur(11px); opacity: .38; transition: opacity .25s ease;
}
/* Relleno sólido del interior (por encima del aura): solo el borde de 1px lleva color */
.tur-nav-btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: var(--tur-fondo);
}
.tur-nav-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
.tur-nav-btn:hover::before { opacity: .6; }
.tur-nav-btn:focus-visible { outline: 2px solid #f91942; outline-offset: 3px; }
.tur-nav-btn i { font-size: 14px; }

@keyframes tur-nav-giro { to { --tur-ang: 360deg; } }

/* Colores por sección (los del borde vivo) */
.tur-nav-rutas    { --tur-c1: #27F5D6; --tur-c2: #F2F527; --tur-c3: #9827F5; }
.tur-nav-eventos  { --tur-c1: #2A27F5; --tur-c2: #AD27F5; --tur-c3: #F52754; }
.tur-nav-destinos { --tur-c1: #F52727; --tur-c2: #F5A927; --tur-c3: #A327F5; }
.tur-nav-inicio   { --tur-c1: #F52727; --tur-c2: #F5A927; --tur-c3: #A327F5; }

html[data-theme="dark"] .tur-nav-btn { --tur-fondo: var(--tur-surface); color: var(--tur-text) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .tur-nav-btn::before { opacity: .5; }

/* Con el mapa a pantalla completa no hace falta */
body.mapa-vista-activa .tur-nav-secciones { display: none; }

@media (max-width: 480px) {
	.tur-nav-secciones { gap: 10px; margin-top: 26px; }
	.tur-nav-btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tur-nav-btn { animation: none; }
	.tur-nav-btn, .tur-nav-btn:hover { transform: none; }
}

/* ======================================================================
   Invitación a crear una ruta (arriba de /rutas): título, descripción, una ruta que se dibuja
   sola sobre un mapa y termina en el botón "+" (el destino: "empieza la tuya"). Ciclo de 10s:
   0-54% se traza la línea y aparecen las paradas (al 28%/56%/88% del recorrido, de ahí los
   porcentajes de cada @keyframes), 54-72% pulso del botón, 84-93% se desvanece y reinicia.
   Sin animación (ruta completa fija) con prefers-reduced-motion.
   ====================================================================== */
.tur-invitacion { display: flex; align-items: center; gap: 28px; margin: 34px 0 4px; padding: 26px 30px; border-radius: 22px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); overflow: hidden; --tur-inv-fondo: #fff; }
html[data-theme="dark"] .tur-invitacion { background: var(--tur-surface); --tur-inv-fondo: var(--tur-surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.tur-invitacion-texto { flex: 0 1 400px; min-width: 0; }
.tur-invitacion-titulo { margin: 0 0 6px; font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #1b1f27; }
html[data-theme="dark"] .tur-invitacion-titulo { color: var(--tur-text); }
.tur-invitacion-desc { max-width: 54ch; margin: 0; font-size: 15px; line-height: 1.6; color: #647082; }
html[data-theme="dark"] .tur-invitacion-desc { color: var(--tur-text-muted); }

/* Mapa animado */
.tur-ruta-anim { flex: 1 1 auto; min-width: 0; height: auto; max-height: 130px; color: #1b1f27; }
html[data-theme="dark"] .tur-ruta-anim { color: var(--tur-text); }
.tur-ruta-anim .contorno { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .07; }
.tur-ruta-anim .fantasma { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 6; opacity: .28; }
.tur-ruta-anim .trazo { fill: none; stroke: #f91942; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tur-ruta-trazo 10s linear infinite; filter: drop-shadow(0 2px 4px rgba(249, 25, 66, .35)); }
.tur-ruta-anim .parada { fill: #f91942; stroke: var(--tur-inv-fondo); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tur-ruta-anim .p0 { animation: tur-pin-0 10s linear infinite; }
.tur-ruta-anim .p1 { animation: tur-pin-1 10s linear infinite; }
.tur-ruta-anim .p2 { animation: tur-pin-2 10s linear infinite; }
.tur-ruta-anim .p3 { animation: tur-pin-3 10s linear infinite; }
.tur-ruta-anim .cabeza { fill: #f91942; stroke: var(--tur-inv-fondo); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(249, 25, 66, .7)); }

@keyframes tur-ruta-trazo {
	0% { stroke-dashoffset: 1; opacity: 1; }
	54% { stroke-dashoffset: 0; opacity: 1; }
	84% { stroke-dashoffset: 0; opacity: 1; }
	93% { stroke-dashoffset: 0; opacity: 0; }
	93.1%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes tur-pin-0 { 0%, .4% { opacity: 0; transform: scale(0); } 3% { opacity: 1; transform: scale(1.35); } 5.5%, 84% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(1); } }
@keyframes tur-pin-1 { 0%, 14.8% { opacity: 0; transform: scale(0); } 17.5% { opacity: 1; transform: scale(1.35); } 20%, 84% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(1); } }
@keyframes tur-pin-2 { 0%, 29.8% { opacity: 0; transform: scale(0); } 32.5% { opacity: 1; transform: scale(1.35); } 35%, 84% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(1); } }
@keyframes tur-pin-3 { 0%, 47.3% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.35); } 52.5%, 84% { opacity: 1; transform: scale(1); } 93%, 100% { opacity: 0; transform: scale(1); } }

/* Botón "+": disco rojo de marca (el destino de la ruta) */
.tur-crear-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.tur-crear-disco { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #f91942; box-shadow: 0 4px 12px rgba(249, 25, 66, .4); animation: tur-pulso 10s ease-out infinite; }
.tur-crear-disco svg { width: 24px; height: 24px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.tur-crear-btn:hover { transform: translateY(-2px) scale(1.05); }
.tur-crear-btn:hover .tur-crear-disco svg { transform: rotate(90deg); }
.tur-crear-btn:focus-visible { outline: 2px solid #f91942; outline-offset: 4px; }
@keyframes tur-pulso {
	0%, 53% { box-shadow: 0 4px 12px rgba(249, 25, 66, .4), 0 0 0 0 rgba(249, 25, 66, 0); }
	54% { box-shadow: 0 4px 12px rgba(249, 25, 66, .4), 0 0 0 0 rgba(249, 25, 66, .5); }
	72%, 100% { box-shadow: 0 4px 12px rgba(249, 25, 66, .4), 0 0 0 20px rgba(249, 25, 66, 0); }
}

@media (max-width: 767px) {
	.tur-invitacion { flex-wrap: wrap; margin-top: 76px; padding: 20px; gap: 6px 14px; }
	.tur-invitacion-texto { flex: 1 1 100%; }
	.tur-invitacion-desc { font-size: 14px; }
	.tur-ruta-anim { flex: 1 1 0; max-height: 96px; }
	.tur-crear-btn { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.tur-ruta-anim .trazo { animation: none; stroke-dashoffset: 0; }
	.tur-ruta-anim .parada { animation: none; opacity: 1; }
	.tur-ruta-anim .cabeza { display: none; }
	.tur-crear-disco { animation: none; }
	.tur-crear-btn:hover { transform: none; }
	.tur-crear-btn:hover .tur-crear-disco svg { transform: none; }
}
body.mapa-vista-activa .tur-invitacion { display: none; }