/*
	NexTech — capa de identidad de marca sobre Tessellate.
	Este archivo se carga DESPUÉS de main.css y no modifica la plantilla original.

	Paleta definitiva (del kit de identidad): Original #111111 / #F26522
*/

:root {
	--ink: #111111;
	--accent: #F26522;
	--ink-soft: #2B2B2B;
	/* Bandas de contenido: tinta aclarada un 18% para que el salto contra las
	   franjas claras sea menos duro. Hero y footer quedan en tinta plena. */
	--band: color-mix(in srgb, #fff 18%, var(--ink));
}

/* ---- Tipografía de marca ---- */

body, input, textarea, select, button {
	font-family: 'Archivo', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oxanium', sans-serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.main > header h2 {
	color: var(--ink);
}

.main > header p {
	color: var(--ink-soft);
}

a {
	color: var(--accent);
}

::selection {
	background: var(--accent);
	color: #fff;
}

/* ---- Logo (lockup del kit: Oxanium SemiBold + bajada Archivo) ---- */

.brand-wordmark {
	font-family: 'Oxanium', sans-serif;
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.004em;
	white-space: nowrap;
	margin: 0;
}

.brand-nex { color: #ffffff; }
.brand-tech { color: var(--accent); }
.mark-accent { fill: var(--accent); }
.acc { color: var(--accent); }

.brand-lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	margin-bottom: 1.25em;
}

.brand-lockup .brand-mark {
	margin-bottom: 0.35em;
}

/* con #header para ganarle a "#header header h1/p" de la plantilla */
#header .brand-lockup .brand-wordmark {
	font-size: 4.5em;
	line-height: 0.94;
	margin-bottom: 0;
}

#header header p.brand-tagline,
.brand-tagline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	margin: 0.6em 0 0 0;
	font-size: 1.6em;
	white-space: nowrap;
}

.brand-tagline i {
	display: block;
	width: 2.2em;
	height: 3px;
	background: var(--accent);
}

.brand-tagline b {
	font-family: 'Archivo', sans-serif;
	font-weight: 400;
	font-size: 0.62em;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}

/* ---- Hero ---- */

#header {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55)),
		url("images/overlay.png"),
		url("../../images/header.jpg");
	background-size: auto, auto, cover;
	background-position: center, top left, center center;
	background-repeat: no-repeat, repeat, no-repeat;
	background-color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--accent);
}

#header header p.hero-copy {
	font-weight: 300;
	letter-spacing: 0.02em;
}

/* ---- Franjas claras: papel de marca en lugar de blanco puro ----
   El template usa #fff contra bandas casi negras y el salto es demasiado duro.
   Teñimos el blanco con un 6% de la tinta (~#f1f1f1, el mismo tono de fondo
   que usan las láminas del kit) para bajar el contraste. */

body {
	background: color-mix(in srgb, var(--ink) 6%, #fff);
}

.main > header,
.main > .content.style4 {
	background: color-mix(in srgb, var(--ink) 6%, #fff);
}

/* ---- Bandas de contenido: degradados derivados de la paleta activa ---- */

.main > .content.dark {
	background-color: var(--band);
	/* regla de 2px de acento en cada costura clara/oscura: convierte el corte
	   duro en un borde intencional (criterio Modernist del kit) */
	box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent);
}

.main > .content.style1 {
	background:
		url("images/bgtr.svg") top right no-repeat,
		url("images/bgbl.svg") bottom left no-repeat,
		url("images/overlay.png"),
		linear-gradient(45deg,
			color-mix(in srgb, var(--accent) 24%, var(--band)),
			color-mix(in srgb, var(--accent) 8%, var(--band)) 55%,
			var(--band));
}

.main > .content.style2 {
	background:
		url("images/bgtr.svg") top right no-repeat,
		url("images/bgbl.svg") bottom left no-repeat,
		url("images/overlay.png"),
		linear-gradient(45deg,
			var(--band),
			color-mix(in srgb, var(--accent) 14%, var(--band)) 60%,
			color-mix(in srgb, #000 20%, var(--band)));
}

.main > .content.style3 {
	background:
		url("images/bgtr.svg") top right no-repeat,
		url("images/bgbl.svg") bottom left no-repeat,
		url("images/overlay.png"),
		linear-gradient(45deg,
			color-mix(in srgb, #000 20%, var(--band)),
			var(--band) 50%,
			color-mix(in srgb, var(--accent) 18%, var(--band)));
}

/* ---- Botones ---- */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	background: var(--accent);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	letter-spacing: 0.04em;
}

	input[type="button"]:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	button:hover,
	.button:hover {
		background: color-mix(in srgb, #000 15%, var(--accent));
	}

	input[type="reset"].alt,
	.button.alt {
		background: none;
		color: inherit;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
	}

.dark input[type="submit"],
.dark button,
.dark .button {
	background: var(--accent);
	box-shadow: none;
	color: #fff;
}

	.dark input[type="submit"]:hover,
	.dark button:hover,
	.dark .button:hover {
		background: color-mix(in srgb, #fff 18%, var(--accent));
	}

/* ---- Íconos de features ---- */

.dark .feature-icon .icon {
	background: var(--accent);
	color: #fff;
}

.dark .feature-icon:before,
.dark .feature-icon:after {
	background: rgba(255, 255, 255, 0.35);
}

/* ---- Imágenes: marco sutil sobre fondo oscuro ---- */

.dark .image img {
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ---- Footer oscuro (cierra la página como abre: sobre tinta) ---- */

#footer {
	background: var(--ink);
	box-shadow: inset 0 2px 0 var(--accent);
	padding-top: 5em;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 2.5em;
}

.footer-brand .brand-wordmark.small {
	font-size: 1.6em;
}

#footer ul.icons a {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	color: #fff;
}

	#footer ul.icons a:hover {
		background: var(--accent);
		box-shadow: inset 0 0 0 1px var(--accent);
	}

#footer .copyright {
	color: rgba(255, 255, 255, 0.45);
}

/* ---- Ajustes responsive del lockup ---- */

@media screen and (max-width: 736px) {

	#header .brand-lockup .brand-wordmark {
		font-size: 3em;
	}

	.brand-lockup .brand-mark {
		width: 52px;
		height: 52px;
	}

	/* Debajo de ~140px de ancho la bajada no se lee (regla del kit):
	   en móvil el lockup sigue siendo grande, así que se mantiene. */
	.brand-tagline b {
		font-size: 0.5em;
	}

}