/* ======================================================================
   Banner del inicio (resources/views/includes/usuario/banner.blade.php)
   Video + cordillera en tres planos + ruta que se traza con tres pines + titular.
   Va después de personalizado.css, que trae las reglas anteriores de .banner.
   El parallax lo mueve public/js/tur-banner.js con tres variables en .tur-hero:
   --p (0 a 1, cuánto salió el banner por arriba), --mx y --my (-1 a 1, puntero).
   ====================================================================== */

.tur-hero {
	--horizonte: #fff;
	--hero-capa: clamp(150px, 14.17vw, 200px);
	height: 470px;
	font-family: 'Bricolage Grotesque', 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	isolation: isolate;
}
html[data-theme="dark"] .tur-hero { --horizonte: var(--tur-bg, #101318); background-color: var(--tur-bg, #101318); }

/* Paleta del paisaje: claro = día que cae al atardecer; oscuro = noche con ventanas encendidas */
.tur-hero {
	--bio-lagos: #5aa86a; --bio-bosque: #2f7d4f; --bio-ciudad: #a09a93; --bio-desierto: #d9a85f; --bio-playa: #e8cb92;
	--lago: #6fb8d8; --arbol-1: #3d9159; --arbol-2: #2c7a49; --pino-1: #23623e; --pino-2: #2f7a4c;
	--edif-1: #7f7b88; --edif-2: #9a96a3; --vent: rgba(255, 255, 255, .55);
	--duna-1: #efcd8f; --duna-2: #e3b874; --mar: #4fb3c2; --tronco: #7a5a3a; --hoja: #2f8a4a;
}
html[data-theme="dark"] .tur-hero {
	--bio-lagos: #1c4a3a; --bio-bosque: #14382e; --bio-ciudad: #3a3f57; --bio-desierto: #55432f; --bio-playa: #3f5560;
	--lago: #2b6a98; --arbol-1: #1c5240; --arbol-2: #153f33; --pino-1: #0f2f27; --pino-2: #164237;
	--edif-1: #2a2d45; --edif-2: #353a58; --vent: #ffd56b;
	--duna-1: #6d5a42; --duna-2: #5b4a36; --mar: #1e5f7c; --tronco: #3b2c1e; --hoja: #1d5a40;
}

/* Video: más alto y ancho que el recuadro para que el desfase no deje bordes al descubierto */
.tur-hero video {
	top: -70px;
	left: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 70px);
	transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--p, 0) * 60px), 0);
	transition: transform .25s ease-out;
}

/* Velo suave para que el titular se lea sobre cualquier toma del video */
.tur-hero-velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(8, 12, 20, .26) 0%, rgba(8, 12, 20, .06) 42%, rgba(8, 12, 20, .22) 100%),
		radial-gradient(90% 70% at 50% 42%, rgba(8, 12, 20, .22), rgba(8, 12, 20, 0) 75%);
	pointer-events: none;
}

/* ---- Cordillera en tres planos (los arma public/js/tur-banner.js) ---- */
.tur-hero-capa {
	position: absolute;
	z-index: 2;
	left: -30px;
	bottom: -1px;
	width: calc(100% + 60px);
	height: var(--hero-capa);
	pointer-events: none;
	transition: transform .25s ease-out;
}
.tur-hero-capa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tur-hero-lejos { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--p, 0) * 42px), 0); }
.tur-hero-medio { transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--p, 0) * 22px), 0); }
.tur-hero-cerca { transform: translate3d(calc(var(--mx, 0) * -26px), 0, 0); }

.tur-hero-bruma { fill: var(--horizonte); fill-opacity: .3; stroke: var(--horizonte); stroke-opacity: .3; stroke-width: 6; stroke-linejoin: round; }
.tur-hero-nieve { fill: #fff; fill-opacity: .8; }
.tur-hero-loma-base { fill: var(--horizonte); fill-opacity: .5; }
.tur-hero-cerca path { fill: var(--horizonte); }

/* Paisaje: aparece de izquierda a derecha detrás del viajero, con borde suave (máscara que se desplaza).
   Por defecto (sin animación) queda completo. */
.tur-hero-paisaje {
	opacity: .94;
	-webkit-mask-image: linear-gradient(90deg, #000 38%, transparent 40%);
	mask-image: linear-gradient(90deg, #000 38%, transparent 40%);
	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 4% 0;
	mask-position: 4% 0;
}
.tur-hero--quieto .tur-hero-paisaje { -webkit-mask-image: none; mask-image: none; }

.tur-hero-lago { fill: var(--lago); }
.tur-hero-brillo { fill: #fff; fill-opacity: .55; }
.tur-hero-arbol-1 { fill: var(--arbol-1); }
.tur-hero-arbol-2 { fill: var(--arbol-2); }
.tur-hero-pino-1 { fill: var(--pino-1); }
.tur-hero-pino-2 { fill: var(--pino-2); }
.tur-hero-edif-1 { fill: var(--edif-1); }
.tur-hero-edif-2 { fill: var(--edif-2); }
.tur-hero-antena { fill: none; stroke: var(--edif-2); stroke-width: 1.2; }
.tur-hero-ventanas { fill: var(--vent); }
.tur-hero-duna-1 { fill: var(--duna-1); }
.tur-hero-duna-2 { fill: var(--duna-2); }
.tur-hero-mar { fill: var(--mar); fill-opacity: .92; }
.tur-hero-espuma { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 1.6; stroke-linecap: round; }
.tur-hero-tronco { fill: none; stroke: var(--tronco); stroke-width: 2; stroke-linecap: round; }
.tur-hero-hoja { fill: none; stroke: var(--hoja); stroke-width: 2.6; stroke-linecap: round; }

/* Ruta: puntos tenues siempre; encima la línea blanca que se traza (igual que en el inicio de sesión) */
.tur-hero-ruta-base { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 9; }
.tur-hero-ruta-trazo {
	fill: none;
	stroke: #fff;
	stroke-width: 3.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 1px 2px rgba(8, 12, 20, .45));
}

/* Pines: caen cuando el viajero llega a su ciudad (los anima el JS) */
.tur-hero-pin-in {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 2px 3px rgba(8, 12, 20, .35));
}
.tur-hero-gota { fill: #f91942; }
.tur-hero-ojo { fill: #fff; }
.tur-hero-etq { fill: #fff; fill-opacity: .95; }
.tur-hero-txt {
	fill: #1b1f27;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	text-anchor: middle;
}

/* El viajero (como en el inicio de sesión) */
.tur-hero-viajero { fill: #fff; stroke: #f91942; stroke-width: 2.6; filter: drop-shadow(0 1px 2px rgba(8, 12, 20, .4)); }
.tur-hero--quieto .tur-hero-viajero { display: none; }

/* ---- Hora del día: en claro pasa de día a atardecer mientras avanza la ruta; en oscuro es de noche ---- */
.tur-hero-hora {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(180deg, rgba(255, 150, 80, 0) 8%, rgba(255, 112, 64, .36) 100%);
	pointer-events: none;
}
.tur-hero--quieto .tur-hero-hora { opacity: .7; }
.tur-hero-cielo { display: none; }
html[data-theme="dark"] .tur-hero-hora {
	background: linear-gradient(180deg, rgba(6, 12, 42, .6) 0%, rgba(8, 18, 56, .5) 100%);
	opacity: 1 !important;
}
html[data-theme="dark"] .tur-hero-cielo { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tur-hero-estrellas {
	position: absolute;
	inset: 0 0 38% 0;
	background-image:
		radial-gradient(1.6px 1.6px at 8% 22%, #fff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 17% 58%, #fff 50%, transparent 52%),
		radial-gradient(1.8px 1.8px at 29% 14%, #fff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 41% 46%, #fff 50%, transparent 52%),
		radial-gradient(1.6px 1.6px at 53% 20%, #fff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 64% 62%, #fff 50%, transparent 52%),
		radial-gradient(1.8px 1.8px at 74% 12%, #fff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 85% 50%, #fff 50%, transparent 52%),
		radial-gradient(1.6px 1.6px at 93% 26%, #fff 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 23% 36%, #fff 50%, transparent 52%);
	animation: tur-hero-titila 6s ease-in-out infinite;
}
.tur-hero-luna { position: absolute; top: 9%; right: 8%; width: 40px; height: 40px; }
.tur-hero-luna path { fill: #f4efd6; }
@keyframes tur-hero-titila { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.tur-hero--pausa .tur-hero-estrellas { animation-play-state: paused; }

/* ---- Titular ---- */
.tur-hero .tur-hero-contenido {
	flex-direction: column;
	justify-content: center;
	/* El titular queda sobre la cordillera: los rótulos de los pines llegan casi al borde de su plano */
	padding: 0 20px calc(var(--hero-capa) + 4px);
	background: none;
	filter: none;
	z-index: 3;
	transform: translate3d(0, calc(var(--p, 0) * 30px), 0);
	opacity: calc(1 - var(--p, 0) * 1.2);
}

.tur-hero .banner-title {
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	color: #fff !important;
	text-align: center;
	text-shadow: 0 2px 4px rgba(8, 12, 20, .28), 0 4px 22px rgba(8, 12, 20, .34);
	font-optical-sizing: auto;
}
.tur-hero-linea {
	display: block;
	font-size: clamp(20px, 3.1vw, 34px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
	animation: tur-hero-sube .8s cubic-bezier(.16, 1, .3, 1) .1s both;
}
.tur-hero-palabra {
	display: block;
	min-height: 1.08em;
	margin-top: .06em;
	font-size: clamp(32px, 6.4vw, 66px);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
	animation: tur-hero-sube .8s cubic-bezier(.16, 1, .3, 1) .22s both;
}
/* Marcador de subrayador detrás de la palabra que se escribe */
.tur-hero .typed-highlight {
	color: #fff;
	border: 0;
	padding: 0 .1em;
	margin: 0 -.1em;
	background: linear-gradient(transparent 66%, rgba(249, 25, 66, .78) 66% 91%, transparent 91%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.tur-hero .banner-title .typed-cursor {
	display: inline-block;
	width: 3px;
	height: .8em;
	margin-left: 6px;
	border-radius: 2px;
	background: #fff;
	color: transparent;
	font-size: inherit;
	vertical-align: -.06em;
	overflow: hidden;
	opacity: .85;
	animation: blink .9s step-end infinite;
}

.tur-hero .cta-button {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	margin-top: 26px;
	padding: 0 22px;
	border-radius: 999px;
	background: #f91942;
	color: #fff;
	font: 700 16px/1 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	box-shadow: 0 8px 20px rgba(8, 12, 20, .3), 0 2px 4px rgba(8, 12, 20, .2);
	transition: background-color .2s ease, box-shadow .2s ease;
	animation: tur-hero-sube .8s cubic-bezier(.16, 1, .3, 1) .4s both;
}
.tur-hero .cta-button svg { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.tur-hero .cta-button:hover,
.tur-hero .cta-button:focus-visible {
	background: #e0113a;
	transform: none;
	color: #fff;
	box-shadow: 0 10px 24px rgba(8, 12, 20, .34), 0 2px 4px rgba(8, 12, 20, .2);
}
.tur-hero .cta-button:hover svg,
.tur-hero .cta-button:focus-visible svg { transform: translateX(4px); }
.tur-hero .cta-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes tur-hero-sube {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Escritorio: titular un 20 % más chico que en móvil ---- */
@media (min-width: 768px) {
	.tur-hero-linea { font-size: clamp(16px, 2.48vw, 27.2px); }
	.tur-hero-palabra { font-size: clamp(26px, 5.12vw, 52.8px); }
}

/* ---- Móvil ---- */
@media (max-width: 767px) {
	.tur-hero { height: 430px; --hero-capa: 126px; }
	.tur-hero .tur-hero-contenido { padding: 0 16px calc(var(--hero-capa) + 4px); }
	.tur-hero-palabra { min-height: 2.16em; }
	.tur-hero .cta-button { height: 44px; margin-top: 20px; font-size: 15px; }
}

/* ---- Sin movimiento: la ruta ya trazada y nada se mueve ---- */
@media (prefers-reduced-motion: reduce) {
	.tur-hero video,
	.tur-hero-capa,
	.tur-hero .tur-hero-contenido { transform: none !important; opacity: 1; transition: none; }
	.tur-hero-estrellas { animation: none; }
	.tur-hero-linea,
	.tur-hero-palabra,
	.tur-hero .cta-button { animation: none; }
	.tur-hero .banner-title .typed-cursor { animation: none; }
}