/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--c-white);
	color: var(--c-dark);
	border-bottom: 1px solid rgba(27, 27, 26, 0.1);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Se retira al bajar y vuelve al subir (main.js) */
.site-header.is-hidden { transform: translateY(-100%); }

/* Over a photo hero the header floats in white (fixed, so it takes no room)
   and turns solid once the page scrolls past it */
.home .site-header,
.has-header-overlay .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	color: var(--c-white);
	/* sobre la foto no lleva filete; lo recupera al volverse sólida */
	border-bottom-color: transparent;
	/* keeps the transform transition from the base rule, so it still slides */
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.home .site-header.is-scrolled,
.has-header-overlay .site-header.is-scrolled {
	background: var(--c-white);
	color: var(--c-dark);
	border-bottom-color: rgba(27, 27, 26, 0.1);
}

/* On the home it waits above the top edge and drops in when the hero has
   finished opening (home.js marks the body hero-open) */
.home .site-header { transform: translateY(-100%); }
.home.hero-open .site-header { transform: none; }
.home.hero-open .site-header.is-hidden { transform: translateY(-100%); }

/* Con el menú desplegado la barra se queda donde está pase lo que pase: si
   estaba retirada, el logotipo y el "_Cerrar" se iban fuera de pantalla. */
.site-header.is-menu-open,
.home .site-header.is-menu-open,
.home.hero-open .site-header.is-menu-open.is-hidden { transform: none; }

/* Medidas tomadas a 1:1 sobre los PNG del diseno: 32px de margen lateral,
   logotipo de 46px de alto, columnas del menu separadas 186px y el idioma a
   162px de la ultima. */
.site-header__inner {
	padding: 22px max(clamp(16px, 2.2vw, 42px), var(--edge-bleed)) 14px;
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 11.25vw, 216px);
}

.site-header__logo {
	color: inherit;
	margin-right: auto;
}

.site-header__logo .logo-mark {
	/* 46px, que es lo que mide en los PNG a 1440; no sigue creciendo */
	height: clamp(22px, 3.2vw, 46px);
}

.site-header__nav-block {
	display: flex;
	gap: clamp(20px, 12.22vw, 235px);
}

.site-header__nav-group {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(15px, 1.042vw, 20px);
	letter-spacing: -0.02em;
	/* 19,3px de paso entre opciones a 1440, medido en el diseno */
	line-height: 1.27;
}

.site-header__nav-group a {
	white-space: nowrap;
}

/* Hover and current section read in bold. The hidden bold copy of the
   label (data-text) reserves its width so nothing shifts on hover. */
.site-header__nav-group a {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	padding-left: 0.6em; /* room for the dash */
}

.site-header__nav-group a::after {
	content: attr(data-text);
	font-weight: 700;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

.site-header__nav-group a:hover,
.site-header__nav-group .is-current > a,
.site-header__nav-group .has-submenu.is-open > a {
	font-weight: 700;
}

/* Al señalar una opción —y en la que estás— la rayita de la izquierda crece
   hasta subrayar la palabra entera, como en el resto de la web. El filete va
   de fondo para poder animarlo, a la misma altura que el guion. */
.site-header__nav-group a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.3em + 1px);
	background-size: 0 1px;
	transition: background-size 0.35s ease;
}

.site-header__nav-group a:hover,
.site-header__nav-group .is-current > a,
.site-header__nav-group .has-submenu.is-open > a {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__nav-group a { transition: none; }
}

/* The "_" before each label is a 1px bar sitting where the glyph would.
   En el diseno arranca justo en la linea base, pegada al texto. */
.site-header__dash {
	position: absolute;
	right: calc(100% - 0.5em);
	/* un pixel por debajo de la línea base, para que respire del texto */
	bottom: calc(0.3em - 1px);
	width: 0.53em;
	height: 1px;
	background: currentColor;
}

/* --- Productos submenu ----------------------------------------------------
   Sits to the left of the menu column. On open, the dash of "_Productos"
   stretches leftwards until it is the rule over the submenu; the links
   fade in once it has drawn. On close the links fade first and the dash
   shrinks back. */
.site-header__nav-group .has-submenu {
	position: relative;
	--submenu-w: clamp(300px, 26vw, 380px);
}

.has-submenu > a .site-header__dash {
	transition: width 0.3s ease 0.1s;
}

.has-submenu.is-open > a .site-header__dash {
	width: calc(0.5em + var(--submenu-w));
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header__submenu {
	position: absolute;
	top: calc(100% - 0.2em);
	right: 100%;
	width: var(--submenu-w);
	display: flex;
	gap: 24px;
	padding: 12px 40px 0 0;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.4s;
}

.site-header__submenu-col {
	flex: 1 1 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.site-header__submenu-col a {
	font-weight: 300;
	white-space: nowrap;
}

.has-submenu.is-open .site-header__submenu {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.has-submenu.is-open .site-header__submenu-col {
	opacity: 1;
	transform: none;
	transition: opacity 0.25s ease 0.3s, transform 0.25s ease 0.3s;
}

/* The header grows to enclose the open submenu (height set by header.js) */
.site-header__inner { transition: min-height 0.35s ease; }

.site-header__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	/* el idioma va en la misma letra y cuerpo que el menu, subrayado */
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(15px, 1.042vw, 20px);
	letter-spacing: -0.02em;
	line-height: 1.27;
}

/* El idioma en uso va a la derecha con su filete debajo; al pasar por encima
   los otros salen por la izquierda y el filete crece hasta cubrirlos a todos.
   El filete va en el contenedor, así que crece solo al ensancharse este. */
.lang-switcher {
	position: relative;
	display: inline-block;
	padding-bottom: 0.3em;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 100% 0.08em;
}

.lang-switcher__actual {
	font-weight: 400;
	text-decoration: none;
}

/* Los otros idiomas salen fuera de la caja, hacia la izquierda, para que al
   desplegarse no empujen al resto de la cabecera. Se descubren de derecha a
   izquierda junto con su trozo de filete, que empalma con el del idioma en
   uso: parece un solo filete que crece. */
.lang-switcher__otros {
	position: absolute;
	right: 100%;
	bottom: 0;
	display: flex;
	gap: 1.15em;
	padding: 0 1.15em 0.3em 0;
	white-space: nowrap;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 100% 0.08em;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 0.4s ease;
}

.lang-switcher--con-otros:hover .lang-switcher__otros,
.lang-switcher--con-otros:focus-within .lang-switcher__otros,
.lang-switcher--con-otros.is-open .lang-switcher__otros {
	clip-path: inset(0);
}

/* El cuadrado solo existe como boton del menu en movil: en el diseno de
   escritorio la barra acaba en el idioma. */
.site-header__icon {
	width: 13px;
	height: 13px;
	border: 1px solid currentColor;
	display: inline-block;
}

/* --- Menú de móvil ------------------------------------------------------
   Hasta 900px los menús no caben en la barra: se despliegan debajo, y el
   cuadrado de la derecha deja de ser un adorno para ser el botón que los
   abre. */

.site-header__toggle {
	display: none;
	padding: 6px;
	margin: -6px;
	color: inherit;
}

/* La marca corta, la del pie y el rótulo del botón solo existen en móvil. */
.logo-mark--corto,
.logo-mark--pie,
.site-header__rotulo { display: none; }

.site-header__panel-meta { display: none; }

@media (max-width: 900px) {
	.site-header__toggle { display: inline-flex; }

	/* En móvil manda siempre la marca corta y el botón es un rótulo. */
	.logo-mark { display: none; }

	.logo-mark--corto {
		display: block;
		height: 36px;
	}

	.site-header__icon { display: none; }

	.site-header__rotulo {
		display: block;
		font-size: clamp(15px, 4.3vw, 20px);
		letter-spacing: -0.02em;
	}

	.site-header__rotulo::after { content: attr(data-abrir); }

	.site-header.is-menu-open .site-header__rotulo::after { content: attr(data-cerrar); }

	/* El menú desplegado es una pantalla negra entera. En la portada hay que
	   ganarle a .is-scrolled, que pone el texto en negro sobre blanco y aquí
	   dejaba el logotipo y el "_Cerrar" en negro sobre negro. */
	.site-header.is-menu-open,
	.home .site-header.is-menu-open,
	.home .site-header.is-menu-open.is-scrolled,
	.has-header-overlay .site-header.is-menu-open.is-scrolled {
		background: var(--c-dark);
		color: var(--c-cream);
		border-bottom-color: transparent;
	}

	.site-header__nav-block {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		display: none;
		flex-direction: column;
		gap: 0;
		/* el hueco de arriba es la propia barra, que queda por encima */
		padding: 150px 20px 40px;
		overflow-y: auto;
		background: var(--c-dark);
		color: var(--c-cream);
		border-bottom: 0;
	}

	.site-header.is-menu-open .site-header__nav-block {
		display: flex;
	}

	/* El logotipo y el botón se quedan por encima del panel. */
	.site-header__logo,
	.site-header__meta {
		position: relative;
		z-index: 2;
	}

	/* Las dos listas van seguidas, como una sola columna. */
	.site-header__nav-group {
		gap: 0;
		font-weight: 300;
		/* 44px a 375, medido en el PNG */
		font-size: clamp(32px, 11.7vw, 54px);
		line-height: 1.2;
	}

	.site-header__nav-group a { padding-left: 0.53em; }

	.site-header__dash { height: 2px; }

	/* En el panel no hay hover ni negrita: todas las opciones se leen igual. */
	.site-header__nav-group a { background-image: none; }

	.site-header__nav-group .is-current > a,
	.site-header__nav-group .has-submenu.is-open > a { font-weight: 300; }

	/* El submenú de Productos es cosa del ratón; en móvil se va a su archivo. */
	.site-header__submenu {
		display: none;
	}

	.site-header__panel-meta {
		display: block;
		margin-top: clamp(24px, 6vw, 40px);
	}

	.site-header__meta .lang-switcher { display: none; }

	/* Aquí el idioma en uso va a la izquierda: al pulsarlo el filete crece
	   hacia la derecha y los demás aparecen debajo de él. */
	.site-header__panel-meta .lang-switcher {
		display: block;
		width: 7em;
		padding-bottom: 0;
		background: none;
		font-weight: 300;
		font-size: clamp(19px, 5.7vw, 26px);
	}

	.site-header__panel-meta .lang-switcher__actual,
	.site-header__panel-meta .lang-switcher__otros a {
		font-weight: 300;
	}

	.site-header__panel-meta .lang-switcher__actual {
		display: block;
		/* un botón se encoge hasta su texto aunque sea de bloque, y entonces el
		   filete no tendría hacia dónde crecer */
		width: 100%;
		text-align: left;
		/* el filete pegado al código y sin sobresalir de él */
		padding-bottom: 0.04em;
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		/* la caja de la línea baja bastante por debajo de la base de las
		   letras, así que el filete se sube hasta pegarlo a ellas */
		background-position: 0 calc(100% - 0.42em);
		background-size: 1.26em 1px;
		transition: background-size 0.35s ease;
	}

	.site-header__panel-meta .lang-switcher.is-open .lang-switcher__actual {
		background-size: 100% 1px;
	}

	.site-header__panel-meta .lang-switcher__otros {
		position: static;
		display: flex;
		justify-content: flex-end;
		gap: 0.6em;
		/* sin el hueco de la línea, para que queden pegados al filete */
		line-height: 1;
		padding: 0;
		background: none;
		clip-path: none;
		max-height: 0;
		margin: 0;
		opacity: 0;
		transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease;
	}

	.site-header__panel-meta .lang-switcher.is-open .lang-switcher__otros {
		max-height: 3em;
		margin-top: -0.3em;
		opacity: 1;
	}

	.site-header__panel-meta .lang-switcher__otros a::before {
		content: '_';
	}

	/* Los datos van pegados al fondo del panel y en cuerpo pequeño. */
	.site-header__panel-meta {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	.site-header__contacto {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: auto;
		padding-top: clamp(32px, 9vw, 60px);
		font-style: normal;
		font-family: var(--font-mono);
		font-size: clamp(11px, 3.2vw, 14px);
	}

	.site-header__telefono {
		font-family: var(--font-display);
		font-size: clamp(13px, 3.7vw, 16px);
		margin-top: 8px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--c-dark);
	color: var(--c-cream);
}

.site-footer__contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.site-footer__block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 48px);
	padding: clamp(32px, 5vw, 64px) var(--gutter);
}

/* The two blocks share the page edge between them */
.site-footer__block:first-child { padding-left: var(--edge); }
.site-footer__block:last-child { padding-right: var(--edge); }

.site-footer__block + .site-footer__block {
	border-left: 1px solid rgba(215, 208, 198, 0.25);
}

.site-footer__lead {
	font-weight: 300;
	/* 37px a 1440, medido en el PNG de contacto */
	font-size: clamp(24px, 2.57vw, 44px);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

.site-footer__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__copy {
	font-weight: 300;
	font-size: clamp(14px, 0.972vw, 18.7px);
	line-height: 1.2;
	margin-bottom: 24px;
}

/* Contact Form 7 output: transparent fields on a rule, so the markup the
   plugin generates picks up the design without needing custom form HTML */
.site-footer__form p { margin: 0; }

.site-footer__form input[type="text"],
.site-footer__form input[type="email"],
.site-footer__form input[type="tel"],
.site-footer__form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-cream);
	color: var(--c-cream);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(14px, 0.972vw, 18.7px);
	padding: 6px 0;
}

.site-footer__form input::placeholder,
.site-footer__form textarea::placeholder {
	color: var(--c-cream);
	opacity: 0.7;
}

.site-footer__form .wpcf7-response-output {
	font-size: clamp(12px, 0.833vw, 16px);
	margin: 8px 0 0;
	border-radius: 0;
}

/* Newsletter: field and arrow share one rule. CF7 also emits a hidden
   fieldset and a response div as siblings, so the flex items are pinned
   explicitly rather than relying on source order. */
.site-footer__form--inline .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	border-bottom: 1px solid var(--c-cream);
}

.site-footer__form--inline .hidden-fields-container,
.site-footer__form--inline .wpcf7-spinner { display: none; }

.site-footer__form--inline .wpcf7-form > p:first-of-type {
	flex: 1 1 0;
	min-width: 0;
}

.site-footer__form--inline .wpcf7-response-output { flex: 1 0 100%; }

.site-footer__form--inline input[type="email"] { border-bottom: 0; }

.site-footer__form--inline input[type="submit"] {
	background: none;
	border: 0;
	color: var(--c-cream);
	font-family: var(--font-body);
	font-size: clamp(16px, 1.111vw, 21.3px);
	line-height: 1;
	padding: 6px 0 6px 12px;
	cursor: pointer;
}

.site-footer__button {
	align-self: flex-start;
	background: var(--c-cream);
	color: var(--c-dark);
	/* la caja mide 148 x 28 en el diseño, con la letra a 12px */
	padding: 0.5em 0.82em;
	line-height: 1.2;
	font-size: clamp(12px, 0.85vw, 16.3px);
}

.site-footer__legal {
	padding: 20px var(--edge);
	border-top: 1px solid rgba(215, 208, 198, 0.25);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-weight: 300;
	font-size: clamp(12px, 0.833vw, 16px);
}

/* La firma va bajo el aviso de derechos, en el gris del diseño. */
.site-footer__autoria {
	display: block;
	margin-top: 0.4em;
	color: #8b8680;
}

.site-footer__autoria a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__legal-links {
	display: flex;
	gap: clamp(20px, 4vw, 56px);
	font-size: clamp(14px, 0.972vw, 18.7px);
}

.site-footer__social {
	display: flex;
	gap: 16px;
}

.site-footer__social svg {
	width: 18px;
	height: 18px;
}

/* The wordmark sits well clear of the legal row and runs off the bottom
   edge, as in the design */
.site-footer__banner {
	padding: clamp(80px, 22vw, 320px) var(--edge) 0;
	overflow: hidden;
}

.site-footer__banner .logo-mark--giant {
	width: 100%;
	height: auto;
	margin-bottom: -6%;
	color: var(--c-cream);
}

@media (max-width: 900px) {
	.site-footer__contact,
	.site-footer__block {
		grid-template-columns: 1fr;
	}

	/* En el diseño de móvil manda "_Cuéntanos qué necesitas" y la newsletter
	   va debajo, al revés que en escritorio. Y todo va más apretado. */
	.site-footer__contact {
		display: flex;
		flex-direction: column-reverse;
	}

	.site-footer__block { padding: 26px var(--edge); }

	.site-footer__lead { font-size: 28px; }

	.site-footer__copy {
		font-size: 13px;
		margin-bottom: 18px;
	}

	.site-footer__button { font-size: 13px; }

	.site-footer__block + .site-footer__block {
		border-left: 0;
		border-bottom: 1px solid rgba(215, 208, 198, 0.25);
		border-top: 0;
	}

	/* El aviso legal va en dos columnas: a la izquierda el copyright con los
	   iconos debajo, a la derecha los enlaces en columna. */
	.site-footer__legal {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: 20px;
		row-gap: 16px;
		padding-top: 22px;
		padding-bottom: 22px;
		font-size: 11px;
	}

	.site-footer__legal > p { grid-area: 1 / 1; }

	.site-footer__legal-links {
		grid-area: 1 / 2 / 3 / 3;
		flex-direction: column;
		gap: 9px;
		font-size: 13px;
	}

	.site-footer__social { gap: 14px; }

	.site-footer__social svg {
		width: 21px;
		height: 21px;
	}

	.site-footer__social { grid-area: 2 / 1; }

	/* El cierre es la marca corta, grande y pegada a la derecha. */
	.site-footer__banner {
		display: flex;
		justify-content: flex-end;
		padding: clamp(28px, 9vw, 56px) var(--edge) clamp(20px, 6vw, 34px);
	}

	.site-footer__banner .logo-mark--giant { display: none; }

	.site-footer__banner .logo-mark--pie {
		display: block;
		height: clamp(90px, 36vw, 150px);
		color: var(--c-cream);
	}
}

/* ==========================================================================
   Generic fallback page (index.php) — placeholder until Nosotros,
   Productos, Proyectos, Noticias, etc. get their own templates.
   ========================================================================== */
.generic-content__inner {
	padding: 80px var(--edge);
}

/* ==========================================================================
   Páginas de texto (page.php): aviso legal, privacidad, cookies
   ========================================================================== */
.legal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--gutter);
	padding: clamp(20px, 2.2vw, 32px) var(--edge) clamp(56px, 6.6vw, 127px);
}

.legal__title {
	grid-column: 1 / -1;
	margin-bottom: clamp(32px, 4.2vw, 80px);
}

.legal__content {
	grid-column: 2;
	max-width: 40em;
	font-size: clamp(15px, 1.042vw, 20px);
	line-height: 1.35;
}

.legal__content h2,
.legal__content h3,
.legal__content h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Cada apartado arranca con su filete, como las secciones de Descargas. */
.legal__content h2 {
	font-size: clamp(20px, 1.67vw, 32px);
	margin: 2.2em 0 0.8em;
	padding-top: 0.5em;
	border-top: 1px solid var(--c-dark);
}

.legal__content h2:first-child { margin-top: 0; }

.legal__content h3 {
	font-size: clamp(17px, 1.25vw, 24px);
	margin: 1.8em 0 0.6em;
}

.legal__content h4 {
	font-size: inherit;
	margin: 1.4em 0 0.4em;
}

.legal__content p,
.legal__content ul { margin: 0 0 1em; }

/* Las listas llevan la rayita de la casa en vez del punto. */
.legal__content li {
	position: relative;
	padding-left: 1.1em;
	margin-bottom: 0.4em;
}

.legal__content li::before {
	content: '_';
	position: absolute;
	left: 0;
}

.legal__content li ul { margin: 0.4em 0 0; }

.legal__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.legal__fecha {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-grey-warm);
}

@media (max-width: 900px) {
	.legal { grid-template-columns: 1fr; }

	.legal__content { grid-column: 1; }
}