:root {
	/* Color */
	--color-primary: #FF5000;
	--color-text: #333333;
	--color-text-muted: #777777;
	--color-text-soft: #555555;
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-bg: #FFFFFF;
	--color-bg-alt: #F3F3F3;
	--color-border: #E8E8E8;
	--color-border-soft: #DDDDDD;
	--color-border-input: #DFDFDF;
	--color-placeholder: #999999;
	--color-icon-muted: #AAAAAA;
	--color-icon-muted-hover: #444444;
	--color-error: #D64545;
	--color-overlay: rgba(0, 0, 0, 0.85);
	--color-menu-text: #FCF6EC;

	/* Tipografía */
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Poppins', sans-serif;

	--text-h1: 24px;
	--text-h2: 18px;
	--text-h3: 16px;
	--text-h4: 14px;
	--text-h5: 12px;
	--text-h6: 10px;
	--text-body: 14px;
	--text-counter: 80px;
	--text-section-title: 30px;
	--text-vertical-word: 30px;
	--text-contact: 22px;

	/* Espaciado */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;
	--space-section: var(--space-7);

	/* Layout */
	--container-max-width: 1200px;
	--container-max-width-narrow: 1030px;
}

@media (min-width: 481px) {
	:root {
		--text-counter: 120px;
		--text-section-title: 42px;
		--text-vertical-word: 46px;
		--text-contact: 42px;
		--space-section: var(--space-8);
	}
}

/* Deja sitio al header fijo al saltar a una sección */
html {
	scroll-padding-top: var(--space-5);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-text);
	text-transform: uppercase;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
	font-size: var(--text-body);
	line-height: 2;
	color: var(--color-text-muted);
	letter-spacing: 0.5px;
}

.text-lead {
	line-height: 1.5;
}

.text-display {
	font-family: var(--font-heading);
	font-size: var(--text-vertical-word);
	font-weight: 100;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--color-text);
	text-transform: uppercase;
}

/* Utilidades */

.margin-bottom--1 { margin-bottom: var(--space-1); }
.margin-bottom--2 { margin-bottom: var(--space-2); }
.margin-bottom--3 { margin-bottom: var(--space-3); }
.margin-bottom--4 { margin-bottom: var(--space-4); }
.margin-bottom--5 { margin-bottom: var(--space-5); }
.margin-bottom--6 { margin-bottom: var(--space-6); }
.margin-bottom--7 { margin-bottom: var(--space-7); }
.margin-bottom--8 { margin-bottom: var(--space-8); }

.text-align--left { text-align: left; }
.text-align--center { text-align: center; }
.text-align--right { text-align: right; }

a {
	color: var(--color-black);
	transition: color 0.2s;
}

a:hover {
	color: var(--color-text-soft);
}

ul,
ol {
	font-family: var(--font-body);
	color: var(--color-text-muted);
}

/* Botón */

.btn {
	display: inline-block;
	padding: var(--space-2) var(--space-5);
	border: 1px solid var(--color-black);
	background-color: var(--color-black);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-h5);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-black);
}

/* Layout */

.container {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.container--narrow {
	max-width: var(--container-max-width-narrow);
	position: relative;
}

@media (min-width: 481px) {
	.container--narrow {
		padding-inline: 0;
	}
}

.container--tight {
	max-width: 730px;
	padding-inline: 0;
}

/* Header */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.3s, border-color 0.3s;
}

.site-header__inner {
	display: flex;
	align-items: center;
	padding-block: var(--space-4);
}

.site-header__controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-left: auto;
}

.site-header__logo {
	display: none;
}

.site-header__toggle {
	display: block;
	position: relative;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--color-white);
	transition: transform 0.3s, top 0.3s, opacity 0.3s;
}

.site-header__toggle-icon {
	top: 11px;
}

.site-header__toggle-icon::before {
	content: "";
	top: -8px;
}

.site-header__toggle-icon::after {
	content: "";
	top: 8px;
}

/* Móvil: el menú es un panel a todo el ancho bajo el header */
.site-header__nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--color-overlay);
}

.site-header__nav-link {
	display: block;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-black);
	color: var(--color-menu-text);
}

.site-header__nav-link:hover {
	color: var(--color-primary);
}

/* Escritorio: el menú aparece en línea junto a la hamburguesa */
@media (min-width: 481px) {
	.site-header__nav {
		position: static;
		width: auto;
		background: none;
	}

	.site-header__nav-list {
		display: flex;
		align-items: center;
		gap: var(--space-5);
	}

	.site-header__nav-link {
		padding: 0;
		border-bottom: 0;
		font-family: var(--font-heading);
		font-size: var(--text-h5);
		font-weight: 600;
		text-transform: uppercase;
		color: var(--color-white);
	}
}

/* Header — sólido (al salir del hero) */

.site-header--solid {
	background: var(--color-white);
	border-bottom-color: var(--color-border);
}

.site-header--solid .site-header__logo {
	display: block;
}

.site-header--solid .site-header__toggle-icon,
.site-header--solid .site-header__toggle-icon::before,
.site-header--solid .site-header__toggle-icon::after {
	background: var(--color-text);
}

@media (min-width: 481px) {
	.site-header--solid .site-header__toggle {
		display: none;
	}

	.site-header--solid .site-header__nav {
		display: block;
	}

	.site-header--solid .site-header__nav-link {
		color: var(--color-text);
	}

	.site-header--solid .site-header__nav-link:hover {
		color: var(--color-primary);
	}
}

/* Header — menú abierto (tras --solid para que la X no recupere la barra central) */

.site-header--nav-open .site-header__nav {
	display: block;
}

.site-header--nav-open .site-header__toggle-icon {
	background: transparent;
}

.site-header--nav-open .site-header__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.site-header--nav-open .site-header__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Hero */

.hero {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__logo {
	position: absolute;
	top: 75%;
	left: 50%;
	width: 500px;
	max-width: calc(100% - 2 * var(--space-6));
	transform: translate(-50%, -50%);
}

.hero__social {
	position: absolute;
	left: var(--space-6);
	bottom: var(--space-6);
	color: var(--color-white);
}

.hero__social:hover {
	color: var(--color-primary);
}

.hero__social-icon {
	width: 20px;
	height: 20px;
}

.hero__pagination {
	position: absolute;
	left: 50%;
	bottom: var(--space-3);
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-1);
}

.hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid var(--color-black);
}

.hero__dot--active {
	background: var(--color-black);
}

/* Título de sección */

.section-title {
	position: relative;
	text-align: center;
}

.section-title__counter {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	font-family: var(--font-heading);
	font-size: var(--text-counter);
	font-weight: 700;
	line-height: 1;
	color: var(--color-border);
}

.section-title__heading {
	position: relative;
	margin-top: var(--space-6);
	font-size: var(--text-section-title);
	font-weight: 700;
	line-height: 1;
}

.section-title--right {
	margin-bottom: var(--space-4);
}

@media (min-width: 481px) {
	.section-title--right {
		margin-bottom: var(--space-7);
		margin-left: 50%;
		padding-left: var(--space-6);
		text-align: left;
	}

	.section-title--right .section-title__counter {
		left: 0;
		transform: none;
	}
}

/* Estudio */

.estudio {
	padding-block: var(--space-section);
}

.estudio__mascot {
	width: 300px;
	margin-inline: auto;
	margin-bottom: var(--space-7);
}

.estudio__columns {
	display: grid;
	row-gap: var(--space-6);
}

.estudio__words {
	text-align: center;
}

@media (min-width: 481px) {
	.estudio__mascot {
		position: absolute;
		left: 48%;
		top: -45px;
		transform: translateX(-100%);
	}

	.estudio__columns {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-8);
	}

	.estudio__words {
		text-align: right;
	}
}

.estudio__word {
	margin-bottom: var(--space-4);
}

.estudio__word:last-child {
	margin-bottom: 0;
}

.estudio__text p {
	margin-bottom: var(--space-4);
}

.estudio__text p:last-child {
	margin-bottom: 0;
}

/* Qué hacemos */

.section-title--center {
	margin-bottom: var(--space-7);
}

.que-hacemos {
	padding-block: var(--space-section);
	background-color: var(--color-bg-alt);
}

.que-hacemos .section-title--center {
	margin-bottom: var(--space-3);
}

.servicios {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 481px) {
	.servicios {
		grid-template-columns: repeat(3, 1fr);
	}
}

.servicio {
	text-align: center;
}

.servicio__icon {
	width: 160px;
	margin-inline: auto;
	margin-bottom: var(--space-5);
}

.servicio__title {
	font-size: var(--text-h4);
	margin-bottom: var(--space-3);
}

/* Proyectos */

.proyectos {
	padding-block: var(--space-section);
}

.proyectos__grid {
	display: grid;
	grid-auto-rows: 260px;
	gap: var(--space-3);
}

.proyectos__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 481px) {
	.proyectos__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.proyectos__image--big {
		grid-column: span 2;
		grid-row: span 2;
	}

	.proyectos__image--wide {
		grid-column: span 2;
	}
}

/* Clientes */

.clientes {
	padding-block: var(--space-section);
	background-color: var(--color-bg-alt);
}

.clientes__carousel {
	overflow: hidden;
	container-type: inline-size;
}

/* multiply funde el fondo claro de los PNG sin transparencia con el de la sección */
.clientes__track {
	display: flex;
	align-items: center;
	width: max-content;
	mix-blend-mode: multiply;
	animation: clientes-scroll 30s linear infinite;
}

/* Solo con ratón: en táctil el :hover se queda pegado tras un toque y congelaría la cinta */
@media (hover: hover) {
	.clientes__carousel:hover .clientes__track {
		animation-play-state: paused;
	}
}

.clientes__item {
	padding-inline: var(--space-3);
}

/* Mitad del tamaño de escritorio sin alterar la proporción entre logos: unos 2 a la vez */
.clientes__logo {
	zoom: 0.5;
}

@media (min-width: 481px) {
	.clientes__item {
		padding-inline: var(--space-5);
	}

	/* Tope de ancho = 1/4 del carrusel menos el hueco, para ver unos 4 logos a la vez */
	.clientes__logo {
		zoom: 1;
		max-width: calc(25cqi - var(--space-5));
	}
}

@keyframes clientes-scroll {
	to { transform: translateX(-50%); }
}

/* Sin movimiento: los 6 logos quietos y centrados, sin la copia del bucle */
@media (prefers-reduced-motion: reduce) {
	.clientes__track {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: var(--space-4);
		animation: none;
	}

	.clientes__item--clone {
		display: none;
	}
}

/* Contacto */

.contacto {
	padding-block: var(--space-section);
	text-align: center;
}

.contacto__info {
	margin-bottom: var(--space-6);
}

.contacto__email,
.contacto__phone {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-contact);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-text);
}

.contacto__email:hover,
.contacto__phone:hover {
	color: var(--color-text-soft);
}

.contacto__social {
	display: block;
	width: fit-content;
	margin: 0 auto var(--space-8);
	color: var(--color-black);
}

.contacto__social:hover {
	color: var(--color-text-soft);
}

.contacto__form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-5);
	row-gap: var(--space-6);
	text-align: left;
}

.contacto__field--full {
	grid-column: 1 / -1;
}

.contacto__label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--text-body);
	color: var(--color-placeholder);
	text-transform: none;
}

.contacto__control {
	width: 100%;
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border-input);
	background: none;
}

.contacto__control:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: var(--space-1);
	border-bottom-color: var(--color-primary);
}

.contacto__control:invalid:not(:placeholder-shown) {
	border-bottom-color: var(--color-error);
}

.contacto__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	grid-column: 1 / -1;
}

.contacto__submit {
	grid-column: 1 / -1;
	justify-self: center;
	margin-top: var(--space-3);
}