/* TECNOSAN — fotográfico: racks con cables naranjas como portada, colores del logo */
:root {
	--fondo: #F4F5F6;
	--superficie: #FFFFFF;
	--texto: #1F2226;
	--texto-suave: #5D6369;
	--linea: #D9DCDF;
	--chispa: #EF8418;
	--chispa-texto: #A85300;
	--sobre-chispa: #1B1E21;
	/* bandas oscuras: cabecera, portada, soporte y pie (no cambian con el tema) */
	--oscuro: #1B1E21;
	--oscuro-texto: #F1F2F3;
	--oscuro-suave: #B4BAC0;
	--ancho-max: 1200px;
	--lateral: clamp(16px, 5vw, 56px);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fondo: #1F2226;
		--superficie: #272B30;
		--texto: #ECEEF0;
		--texto-suave: #A5ABB1;
		--linea: #363B41;
		--chispa: #F39233;
		--chispa-texto: #F6A85A;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--fondo: #1F2226;
	--superficie: #272B30;
	--texto: #ECEEF0;
	--texto-suave: #A5ABB1;
	--linea: #363B41;
	--chispa: #F39233;
	--chispa-texto: #F6A85A;
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--chispa-texto);
	text-underline-offset: 4px;
}

:focus-visible {
	outline: 2px solid var(--chispa);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3 {
	font-stretch: 118%;
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

p,
dl,
dd,
ul {
	margin: 0;
}

.marco {
	width: 100%;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 0 var(--lateral);
}

.saltar {
	position: absolute;
	left: -9999px;
}

.saltar:focus {
	left: 16px;
	top: 12px;
	z-index: 100;
	background: var(--superficie);
	padding: 8px 14px;
}

.oculto {
	position: absolute;
	left: -9999px;
}

/* Botones */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color .15s, color .15s, border-color .15s;
}

.boton--lleno {
	background: var(--chispa);
	color: var(--sobre-chispa);
}

.boton--lleno:hover {
	background: #FFA040;
}

.boton--claro {
	border-color: rgba(255, 255, 255, .45);
	color: var(--oscuro-texto);
	background: rgba(255, 255, 255, .04);
}

.boton--claro:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.boton--chico {
	min-height: 38px;
	padding: 0 16px;
	font-size: .9063rem;
}

.boton[disabled] {
	opacity: .6;
	cursor: wait;
}

/* Cabecera */
.cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(27, 30, 33, .92);
	backdrop-filter: blur(10px);
	color: var(--oscuro-texto);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cabecera__fila {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 64px;
}

.marca {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	font-stretch: 125%;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: .03em;
}

.menu {
	display: flex;
	gap: 32px;
	margin-left: auto;
	font-size: .9688rem;
}

.menu a {
	color: var(--oscuro-suave);
	text-decoration: none;
}

.menu a:hover {
	color: #fff;
}

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tema {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--oscuro-suave);
	cursor: pointer;
}

.tema:hover {
	color: #fff;
}

.tema svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* Portada */
.portada {
	position: relative;
	min-height: min(88vh, 820px);
	display: flex;
	align-items: center;
	padding: 96px 0;
	color: var(--oscuro-texto);
	background: var(--oscuro);
	overflow: hidden;
}

/* degradé por encima de las fotos para que el texto se lea */
.portada::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(20, 22, 25, .94) 0%, rgba(20, 22, 25, .82) 38%, rgba(20, 22, 25, .3) 75%, rgba(20, 22, 25, .15) 100%);
}

.portada__texto {
	position: relative;
	z-index: 2;
}

/* 5 fotos que rotan cada 7 s con fundido (ciclo de 35 s) */
.portada__fondos {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.portada__fondos div {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center right;
	opacity: 0;
}

.portada__fondos div:nth-child(1) { background-image: url('../images/portada1.jpg'); opacity: 1; }
.portada__fondos div:nth-child(2) { background-image: url('../images/portada2.jpg'); }
.portada__fondos div:nth-child(3) { background-image: url('../images/portada3.jpg'); }
.portada__fondos div:nth-child(4) { background-image: url('../images/portada4.jpg'); }
.portada__fondos div:nth-child(5) { background-image: url('../images/portada5.jpg'); }

@media (prefers-reduced-motion: no-preference) {
	.portada__fondos div {
		animation: rotar 35s linear infinite;
	}

	.portada__fondos div:nth-child(1) { opacity: 0; animation-delay: -2s; }
	.portada__fondos div:nth-child(2) { animation-delay: 5s; }
	.portada__fondos div:nth-child(3) { animation-delay: 12s; }
	.portada__fondos div:nth-child(4) { animation-delay: 19s; }
	.portada__fondos div:nth-child(5) { animation-delay: 26s; }
}

@keyframes rotar {
	0% { opacity: 0; }
	5.7% { opacity: 1; }
	20% { opacity: 1; }
	25.7% { opacity: 0; }
	100% { opacity: 0; }
}

.portada h1 {
	font-size: clamp(2.375rem, 5vw, 4.25rem);
	max-width: 15ch;
}

.bajada {
	margin-top: 24px;
	font-size: 1.1875rem;
	color: var(--oscuro-suave);
	max-width: 48ch;
}

.botonera {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

/* Secciones comunes */
.titulo {
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
}

.intro {
	color: var(--texto-suave);
	max-width: 54ch;
	font-size: 1.125rem;
}

.encabezado {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 64px;
	align-items: end;
}

/* Servicios */
.servicios {
	padding: clamp(72px, 10vw, 128px) 0 clamp(40px, 6vw, 80px);
}

.servicio {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	margin-top: clamp(56px, 8vw, 104px);
}

.servicio--invertido .servicio__foto {
	order: 2;
}

.servicio__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}

.servicio__texto h3 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	padding-top: 18px;
	border-top: 3px solid var(--chispa);
	display: inline-block;
}

.servicio__texto p {
	margin-top: 16px;
	color: var(--texto-suave);
	max-width: 50ch;
}

.servicio__texto ul {
	list-style: none;
	padding: 0;
	margin-top: 24px;
	border-top: 1px solid var(--linea);
}

.servicio__texto li {
	padding: 12px 0;
	border-bottom: 1px solid var(--linea);
	font-weight: 500;
}

/* Clientes */
.clientes {
	padding: clamp(64px, 8vw, 104px) 0;
}

.logos {
	list-style: none;
	padding: 0;
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.logos li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 6px;
	font-weight: 600;
	line-height: 1.3;
}

.logos img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	flex: none;
}

/* Soporte */
.soporte {
	background: var(--oscuro);
	color: var(--oscuro-texto);
	padding: clamp(48px, 6vw, 72px) 0;
}

.soporte__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 56px;
	flex-wrap: wrap;
}

.soporte h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.soporte p {
	margin-top: 10px;
	max-width: 60ch;
	color: var(--oscuro-suave);
}

/* Contacto */
.contacto-seccion {
	padding: clamp(72px, 10vw, 128px) 0;
}

.contacto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(40px, 7vw, 96px);
	align-items: start;
}

.contacto .intro {
	margin-top: 18px;
}

.datos {
	margin-top: 40px;
}

.datos dt {
	font-size: .9063rem;
	color: var(--texto-suave);
}

.datos dd {
	margin: 2px 0 20px;
	font-size: 1.1875rem;
	font-weight: 600;
}

.datos a {
	color: var(--texto);
	text-decoration-color: var(--chispa);
	text-decoration-thickness: 2px;
}

.formulario {
	display: grid;
	gap: 18px;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 8px;
	padding: clamp(22px, 4vw, 36px);
}

.par {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.formulario label {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 5px;
	font-size: .9375rem;
	font-weight: 600;
}

.opcional {
	font-weight: 400;
	color: var(--texto-suave);
}

.formulario input,
.formulario select,
.formulario textarea {
	width: 100%;
	font: inherit;
	font-weight: 400;
	font-size: 1rem;
	color: var(--texto);
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: 6px;
	padding: 11px 13px;
}

.formulario textarea {
	resize: vertical;
	min-height: 120px;
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
	outline: none;
	border-color: var(--chispa);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--chispa) 25%, transparent);
}

.formulario.validado :invalid {
	border-color: #D2463B;
}

.formulario .boton {
	justify-self: start;
	min-width: 220px;
}

.aviso {
	padding: 12px 16px;
	border-left: 4px solid;
	border-radius: 4px;
	font-weight: 500;
}

.aviso--ok {
	border-color: #2E9B5E;
	background: color-mix(in srgb, #2E9B5E 12%, var(--superficie));
}

.aviso--error {
	border-color: #D2463B;
	background: color-mix(in srgb, #D2463B 10%, var(--superficie));
}

/* Pie */
.pie {
	background: var(--oscuro);
	color: var(--oscuro-suave);
	padding: 28px 0;
	font-size: .9063rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.pie__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
}

.pie .marca {
	margin-right: auto;
	color: var(--oscuro-texto);
	font-size: .9375rem;
}

.pie a {
	color: var(--oscuro-suave);
}

/* Pantallas medianas y chicas */
@media (max-width: 960px) {
	.encabezado,
	.servicio,
	.contacto {
		grid-template-columns: 1fr;
	}

	.servicio--invertido .servicio__foto {
		order: 0;
	}

	.logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.portada::after {
		background: linear-gradient(180deg, rgba(20, 22, 25, .78) 0%, rgba(20, 22, 25, .9) 100%);
	}

	.portada__fondos div {
		background-position: center;
	}
}

@media (max-width: 720px) {
	.menu {
		display: none;
	}

	.cabecera__acciones {
		margin-left: auto;
	}

	.cabecera__fila {
		gap: 12px;
	}

	.portada {
		min-height: 0;
		padding: 72px 0 80px;
	}

	.logos,
	.par {
		grid-template-columns: 1fr;
	}

	.botonera .boton,
	.formulario .boton {
		flex: 1 1 100%;
		width: 100%;
	}

	.pie .marca {
		flex-basis: 100%;
	}
}

@media (max-width: 420px) {
	.largo {
		display: none;
	}
}