/*
 * Landing de ExtraTurn — `docs/features/landing.md`.
 * Sin dependencias externas: la fuente de marca (Changa, OFL) se sirve desde aquí mismo para
 * que la página no haga ninguna petición a terceros y no necesite aviso de cookies.
 */

@font-face {
	font-family: 'Changa';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/changa-latin-500-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Changa';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/changa-latin-700-normal.woff2') format('woff2');
}

:root {
	/* Colores del logo. */
	--brand-blue: #405481;
	--brand-orange: #ff6700;
	/* El naranja del logo no llega a 4,5:1 sobre fondo claro: para texto se usa uno más oscuro. */
	--orange-text: #c24e00;
	--bg: #faf7f2;
	--ink: #24304d;
	--muted: #5b6680;
	--line: #e3ddd2;
	color-scheme: light;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

/* La página cabe entera en la pantalla: contenido centrado en el espacio libre y el pie siempre
   visible abajo. Si sobrara contenido aparecería la barra de scroll y se vería como una franja a
   la derecha; por eso en pantallas bajas se compacta (al final). El fondo, en tamaños relativos,
   cubre la página entera. */
body {
	background: radial-gradient(ellipse 120% 70% at 50% 0%, rgb(64 84 129 / 0.12), transparent 70%),
		radial-gradient(ellipse 90% 60% at 100% 100%, rgb(255 103 0 / 0.1), transparent 70%), var(--bg);
	display: grid;
	grid-template-rows: 1fr auto;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	color: var(--ink);
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		sans-serif;
	-webkit-font-smoothing: antialiased;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2rem 1rem;
	text-align: center;
}

.brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.brand img {
	width: clamp(5rem, 18vw, 7.5rem);
	height: auto;
}

.wordmark {
	margin: 0;
	font-family: 'Changa', system-ui, sans-serif;
	/* La marca se escribe en Changa Bold. */
	font-weight: 700;
	font-size: clamp(2.5rem, 9vw, 4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--brand-blue);
}

.claim {
	/* Una sola línea; si no cabe (móvil), se parte en líneas equilibradas. */
	margin: 0;
	font-family: 'Changa', system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 5.5vw, 2.5rem);
	line-height: 1.15;
	color: var(--ink);
	text-wrap: balance;
}

.claim em {
	font-style: normal;
	color: var(--orange-text);
}

/* «Muy pronto» y «Compártenos» en la misma línea y a la misma altura. */
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}

.soon {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 2px solid var(--brand-blue);
	border-radius: 999px;
	background: var(--brand-blue);
	color: #fff;
	font-family: 'Changa', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	/* Aire extra entre la frase y los botones. */
	margin-top: 1.25rem;
}

.social {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--brand-blue);
	font-weight: 600;
	text-decoration: none;
	transition:
		color 0.15s,
		border-color 0.15s;
}

.social a:hover,
.social a:focus-visible {
	color: var(--orange-text);
	border-color: var(--brand-orange);
}

.social svg {
	width: 1.25rem;
	height: 1.25rem;
}

.share {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 2px solid var(--brand-blue);
	border-radius: 999px;
	background: transparent;
	color: var(--brand-blue);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.share:hover,
.share:focus-visible {
	background: var(--brand-blue);
	color: #fff;
}

.share svg {
	width: 1.125rem;
	height: 1.125rem;
}

.back {
	color: var(--muted);
	font-size: 0.9rem;
}

.back a {
	color: var(--brand-blue);
	font-weight: 600;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Lo anuncian los lectores de pantalla al copiar el enlace. */
.status {
	min-height: 1.25rem;
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
}

/* Vacío no ocupa sitio: sólo aparece al copiar el enlace. */
.status:empty {
	display: none;
}

footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	padding: 1rem 1rem 1.5rem;
	color: var(--muted);
	font-size: 0.875rem;
}

footer a {
	color: var(--brand-blue);
	font-weight: 600;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--brand-orange);
	outline-offset: 3px;
}

/* Pantallas bajas (portátil con la ventana sin maximizar, móvil en horizontal): todo más compacto
   para que quepa sin scroll. */
@media (max-height: 720px) {
	main {
		gap: 1.25rem;
		padding: 1rem;
	}
	.brand img {
		width: 4.5rem;
	}
	.wordmark {
		font-size: 2.5rem;
	}
	.actions {
		gap: 0.75rem;
		margin-top: 0.75rem;
	}
}

/* Móvil en horizontal: el logo al lado del nombre. */
@media (max-height: 480px) {
	main {
		gap: 0.75rem;
		padding: 0.75rem 1rem;
	}
	.brand {
		flex-direction: row;
	}
	.brand img {
		width: 2.75rem;
	}
	.wordmark {
		font-size: 2rem;
	}
	.claim {
		font-size: 1.5rem;
	}
	.actions {
		gap: 0.5rem;
		margin-top: 0.25rem;
	}
	footer {
		padding: 0.5rem 1rem 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}