/*
	Xfeel — capa de identidad sobre la plantilla Landed (HTML5 UP)
	Paleta tomada del logotipo y del arte "sincroniza tu mente":
	--x-cyan     #29b6f6   (X del logo, acentos y CTAs)
	--x-blue     #1565c0   (azul profundo del logo)
	--x-indigo   #232946   (fondos de contenido)
	--x-night    #141a2e   (fondo base nocturno)
	--x-lilac    #b9c6ff   (bruma lila del cielo del cover)
*/

:root {
	--x-cyan: #29b6f6;
	--x-cyan-deep: #0f9ae0;
	--x-blue: #1565c0;
	--x-indigo: #232946;
	--x-night: #141a2e;
	--x-lilac: #b9c6ff;
}

/* ---------- Logo ---------- */

#logo a {
	font-weight: 400;
	letter-spacing: 0.05em;
	font-size: 1.6em;
}

#logo .x-mark {
	color: var(--x-cyan);
	font-weight: 700;
}

/* ---------- Acentos globales (sustituyen el rojo #e44c65) ---------- */

strong, b { color: inherit; }

a {
	color: var(--x-cyan);
}

	a:hover {
		color: #6fd0fb !important;
	}

/* línea decorativa bajo los títulos de sección */
header.major:after {
	background: var(--x-cyan);
}

/* íconos de la sección "sesión": glifo cian visible sobre fondo oscuro */
.icon.major {
	background: rgba(41, 182, 246, 0.10);
	box-shadow: inset 0 0 0 1px rgba(41, 182, 246, 0.35);
}

	.icon.major.alt:before {
		color: var(--x-cyan) !important;
		text-shadow: none !important;
	}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
.button.primary {
	background-color: var(--x-cyan) !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

	input[type="submit"].primary:hover,
	.button.primary:hover {
		background-color: #45c4fa !important;
	}

	input[type="submit"].primary:active,
	.button.primary:active {
		background-color: var(--x-cyan-deep) !important;
	}

/* botones secundarios (borde) al pasar el cursor: cian, no rojo */
input[type="submit"]:hover, input[type="submit"]:active,
input[type="reset"]:hover, input[type="reset"]:active,
input[type="button"]:hover, input[type="button"]:active,
.button:hover, .button:active {
	box-shadow: inset 0 0 0 1px var(--x-cyan);
	color: var(--x-cyan) !important;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
.button:active {
	background-color: rgba(41, 182, 246, 0.15);
}

/* foco de campos de formulario */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--x-cyan);
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
	border-color: var(--x-cyan);
}

/* los primarios conservan texto blanco sobre cian, también en hover/active */
input[type="submit"].primary:hover, input[type="submit"].primary:active,
.button.primary:hover, .button.primary:active {
	box-shadow: none !important;
	color: #ffffff !important;
}

/* ---------- Banner: pulso hipnagógico ---------- */

#banner {
	background-color: var(--x-night);
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 38%, rgba(41, 182, 246, 0.28), rgba(41, 182, 246, 0) 65%),
		radial-gradient(ellipse 90% 70% at 50% 110%, rgba(185, 198, 255, 0.20), rgba(185, 198, 255, 0) 60%),
		linear-gradient(160deg, #10162b 0%, #1a2242 45%, #232946 100%);
	background-attachment: scroll;
	overflow: hidden;
}

/* video real de sesión: protagonista a pantalla completa, difuminado */
#banner .x-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	filter: blur(6px) brightness(0.9) saturate(1.05);
	transform: scale(1.08); /* oculta los bordes que genera el blur */
}

@media (prefers-reduced-motion: reduce) {
	#banner .x-video { display: none; }
}

	/* overlay más ligero: el desenfoque + el vidrio ya dan legibilidad */
	#banner:after {
		background-image: linear-gradient(to bottom, rgba(16, 22, 43, 0.20), rgba(16, 22, 43, 0.40)), url("images/overlay.png");
	}

/* panel de vidrio esmerilado centrado sobre el video */
#banner .content {
	text-align: center !important;
	margin-right: 0 !important;
	background: rgba(20, 26, 46, 0.38);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 1.25em;
	box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.35);
	padding: 4em 4.5em !important;
	max-width: 44em !important;
}

	#banner .content header h2 {
		font-size: 4.5em;
		line-height: 1.1;
		letter-spacing: 0.04em;
	}

	#banner .content .x-tagline {
		font-size: 1.6em;
		letter-spacing: 0.35em;
		text-transform: uppercase;
		margin: 0.5em 0 0.75em 0 !important;
		color: rgba(255, 255, 255, 0.9);
	}

	#banner .content .actions {
		margin-top: 1.5em;
		justify-content: center;
	}

@media screen and (max-width: 736px) {
	#banner .content {
		padding: 2.5em 1.5em !important;
		max-width: 92vw !important;
	}

	#banner .content header h2 {
		font-size: 3em;
	}

	#banner .content .x-tagline {
		font-size: 1.1em;
		letter-spacing: 0.25em;
	}
}

	/* halo que "respira", evocando la luz hipnagógica del dispositivo */
	#banner .x-halo {
		display: block;
		position: absolute;
		left: 50%;
		top: 34%;
		width: 62rem;
		height: 62rem;
		margin: -31rem 0 0 -31rem;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(41, 182, 246, 0.25) 0%, rgba(21, 101, 192, 0.12) 40%, rgba(0, 0, 0, 0) 70%);
		animation: x-breathe 8s ease-in-out infinite;
		pointer-events: none;
		z-index: 1; /* sobre el overlay :after; .content (también z-index 1) va después en el árbol y queda encima */
	}

@keyframes x-breathe {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50% { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#banner .x-halo { animation: none; }
}

/* portada de la app en la sección de lista de espera */
#lista .x-app-cover {
	display: block;
	max-width: 34em;
	width: 90%;
	margin: 0 auto 2.5em auto;
	border-radius: 0.75em;
	overflow: hidden;
	box-shadow: 0 1.25em 3em rgba(0, 0, 0, 0.45);
}

	#lista .x-app-cover img {
		display: block;
		width: 100%;
		border-radius: 0.75em;
	}

/* ---------- Spotlights: familia azul Xfeel ---------- */

/* secciones más compactas en escritorio: la foto se aprecia completa de un vistazo
   (solo >736px; en móvil la plantilla ya usa altura automática) */
@media screen and (min-width: 737px) {
	.spotlight {
		height: 75vh;
		min-height: 36em;
	}

	/* menos padding vertical en los paneles laterales para que el texto
	   quepa holgado en la nueva altura */
	.spotlight.left .content,
	.spotlight.right .content {
		padding: 3.5em 3em;
	}
}

/* el panel de texto siempre por encima de la foto y algo más ligero,
   para que la imagen respire detrás */
.spotlight .content {
	z-index: 1;
}

.spotlight.style1 .content {
	border-color: var(--x-cyan);
	background: rgba(20, 26, 46, 0.88);
}

.spotlight.style2 .content {
	border-color: var(--x-blue);
	background: rgba(26, 34, 66, 0.88);
}

.spotlight.style3 .content {
	border-color: var(--x-lilac);
	background: rgba(35, 41, 70, 0.88);
}

/* ---------- Secciones envolventes ---------- */

.wrapper.style1 {
	background: linear-gradient(160deg, #1a2242 0%, var(--x-indigo) 100%);
}

.wrapper.style2 {
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(41, 182, 246, 0.16), rgba(41, 182, 246, 0) 60%),
		linear-gradient(180deg, #10162b 0%, #1a2242 100%);
}

.wrapper .icon.major {
	color: var(--x-cyan);
}

p.ciencia {
	max-width: 46em;
	margin: 0 auto;
	font-size: 0.9em;
	opacity: 0.75;
	font-style: italic;
}

/* ---------- Footer ---------- */

#footer {
	background: #0d1224;
}

#footer .tagline {
	max-width: 40em;
	margin: 0 auto 2em auto;
	font-size: 1.1em;
	color: rgba(255, 255, 255, 0.75);
}

#footer .copyright li {
	display: block;
	border: 0;
	margin: 0.35em 0;
	padding: 0;
}