/* Hero — extraído de src/lib/components/Hero.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg);
	color: var(--fg);

	.bg {
		position: absolute;
		inset: 0;
		overflow: hidden;
	}

	.ember-fallback {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(
				120% 90% at 50% 100%,
				color-mix(in srgb, var(--accent) 55%, transparent) 0%,
				color-mix(in srgb, var(--accent) 18%, transparent) 38%,
				transparent 66%
			),
			var(--bg);
	}

	.hero-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		animation: kenburns 18s ease-out both;
		will-change: transform;
	}

	/* Duotono: tiñe la foto hacia la paleta activa para que combine. */
	.tone {
		position: absolute;
		inset: 0;
		background: var(--bg);
		mix-blend-mode: color;
		opacity: 0.6;
	}

	.scrim {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--bg) 72%, transparent) 0%,
			color-mix(in srgb, var(--bg) 28%, transparent) 38%,
			color-mix(in srgb, var(--bg) 55%, transparent) 72%,
			var(--bg) 100%
		);
	}

	.content {
		position: relative;
		z-index: 10;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0 var(--pad) var(--space-9);
	}

	.tagline {
		color: var(--on-dark-muted);
		margin-bottom: var(--space-6);
	}

	.pulse {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--accent);
		animation: float 2.6s ease-in-out infinite;
		flex: none;
	}

	.title {
		font-family: var(--serif);
		font-size: var(--fs-display);
		font-weight: 400;
		line-height: 0.92;
		color: var(--on-dark);
		letter-spacing: -0.015em;
		max-width: 15ch;
	}

	.ital {
		font-style: italic;
		color: var(--hl);
	}

	.lede-row {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-6);
		margin-top: var(--space-7);
	}

	.lede {
		font-size: var(--fs-lg);
		line-height: 1.5;
		font-weight: 500;
		max-width: 44ch;
		margin: 0;
		color: var(--on-dark);
	}

	.lede strong {
		font-weight: 700;
	}

	.cta-solid {
		font-size: var(--fs-sm);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		text-decoration: none;
		background: var(--accent-deep);
		color: var(--accent-ink);
		padding: var(--btn-pad-lg);
		border-radius: 100px;
		white-space: nowrap;
	}

	.seal {
		position: absolute;
		top: var(--space-9);
		right: var(--space-7);
		width: 116px;
		height: 116px;
		z-index: 10;
		animation: spin 22s linear infinite;
	}

	.seal svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.seal text {
		font-family: var(--sans);
		font-size: 9.4px;
		font-weight: 600;
		/* Con el tracking general (1,3px) la frase medía 315px en un círculo de
		   276,5 y se cortaba en "P". A 0,5px mide lo que el círculo. */
		letter-spacing: 0.5px;
		fill: var(--on-dark);
	}

	.cue {
		position: absolute;
		bottom: var(--space-6);
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
	}

	.cue-label {
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-xs);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	.cue-track {
		width: 1px;
		height: 34px;
		background: var(--line-on-dark-strong);
		position: relative;
		overflow: hidden;
	}

	.cue-dot {
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 14px;
		background: var(--accent);
		animation: scrollcue 1.8s var(--ease) infinite;
	}

	@media (max-width: 900px) {
		.seal {
			display: none;
		}
		.title {
			max-width: 100%;
		}
		.content {
			padding-bottom: var(--space-8);
		}
	}

	@media (max-width: 540px) {
		/* El botón de reservar quedaba pegado al borde inferior, donde se monta
		   el botón flotante de WhatsApp (56px + margen) y viven los gestos del
		   celular. Se sube lo que ocupa ese botón. */
		.content {
			padding-bottom: calc(var(--space-7) + 72px);
		}
		.tagline {
			margin-bottom: var(--space-5);
		}
		.lede-row {
			margin-top: var(--space-5);
			gap: var(--space-5);
		}
		.cta-solid {
			width: 100%;
			text-align: center;
		}
		.cue {
			display: none;
		}
	}
}