/*
 * Landings de campaña (inc/landings.php): plantillas «Landing (solo logo)» y
 * «Landing (sin cabecera)». Solo se carga en páginas con esas plantillas. Las
 * secciones son bloques normales del editor con clases `eco-l-…`; aquí se les da
 * el aspecto de las landings de la web antigua (decisión del usuario, 06-10):
 * Montserrat, títulos de 30-35 px en seminegrita, botones negros que se encogen
 * al pasar el ratón y bloques que suben al aparecer (assets/landing.js).
 */

/* Montserrat, alojada en el plugin (assets/fuentes, licencia OFL): no se pide a Google. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fuentes/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fuentes/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.eco-landing {
	--eco-l-fuente: "Montserrat", Arial, sans-serif;
	--eco-l-margen: clamp(20px, 5vw, 80px);
	--eco-l-aire: clamp(48px, 7vw, 112px);
	--eco-l-tinta: #111;
	--eco-l-papel: #fff;
	--eco-l-gris: #f4f2ef;
}

html:has(body.eco-landing) {
	scroll-behavior: smooth;
}

/* Sin huecos entre cabecera, contenido y pie: cada sección trae su propio aire.
   El tema separa los bloques 90 px (y otros tantos encima del main); aquí, menos. */
.eco-landing .wp-site-blocks > * {
	margin-block: 0;
}
/* El tema pone `main { margin-top: … !important }` en todas las páginas: solo se gana con otro. */
body.eco-landing main.eco-landing__contenido {
	margin-top: 0 !important;
}
.eco-landing__contenido :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > * + * {
	margin-block-start: 1.25rem;
}
.eco-landing__contenido :is(.wp-block-group, .wp-block-column) > * + :is(.eco-l-tarjetas, .eco-l-disenadores, .eco-l-mosaico, .eco-l-ventajas, .wp-block-buttons) {
	margin-block-start: 2rem;
}

/* Tipografía de las landings antiguas (medida en ecocero.com el 06-10): Montserrat en
   todo, también en el formulario; títulos 30-35 px seminegrita, textos 16 px. */
.eco-landing,
.eco-landing :is(h1, h2, h3, h4, p, li, a, button, input, select, textarea, label) {
	font-family: var(--eco-l-fuente);
	letter-spacing: normal;
}
.eco-landing__contenido p,
.eco-landing__contenido li {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
}
.eco-landing h1 {
	font-size: clamp(1.6rem, 2.2vw, 1.875rem);
	line-height: 1.1;
	font-weight: 600;
}
.eco-landing h2 {
	font-size: clamp(1.6rem, 2.5vw, 2.1875rem);
	line-height: 1.1;
	font-weight: 600;
}
.eco-landing h3 {
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 600;
}
/* Títulos de sección en mayúsculas («¿A QUIÉN AYUDAMOS?», «QUÉ NOS DIFERENCIA») */
.eco-landing .eco-l-mayus {
	text-transform: uppercase;
	font-size: clamp(1.4rem, 2.1vw, 1.875rem);
	font-weight: 700;
}
.eco-landing .eco-l-subtitulo {
	font-size: 1.25rem;
	font-weight: 700;
}
.eco-landing .eco-l-gris-texto {
	color: #646464;
}
.eco-landing .eco-l-pequeno {
	font-size: 0.875rem;
	line-height: 1.5;
}
/* Solo para lectores de pantalla (el H1 de arquitectos, que la antigua no enseñaba) */
.eco-landing .eco-l-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.eco-l-oscuro :is(h1, h2, h3, p, li),
.eco-l-portada > .wp-block-cover__inner-container > :is(h1, h2, h3, p) {
	color: inherit;
}
.eco-l-caja :is(h1, h2, h3, p, li) {
	color: var(--eco-l-tinta);
}
.eco-landing .wp-block-buttons {
	gap: 12px;
}

/* Aparición al hacer scroll: el «fadeInUp» de Elementor (assets/landing.js) */
@keyframes eco-l-sube {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.eco-landing .eco-l-aparece {
	opacity: 0;
}
.eco-landing .eco-l-aparece--visto {
	animation: eco-l-sube 1.25s both;
}
@media (prefers-reduced-motion: reduce) {
	.eco-landing .eco-l-aparece {
		opacity: 1;
		animation: none;
	}
}

/* Selector de idioma: desplegable fijo arriba a la derecha (como el botón flotante de
   GTranslate de la antigua, sin bandera). Por encima de la cabecera, que el tema deja fija
   al hacer scroll con z-index 100. */
.eco-l-idiomas {
	position: fixed;
	top: 18px;
	right: var(--eco-l-margen);
	z-index: 200;
	font-family: var(--eco-l-fuente);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}
.eco-l-idiomas summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: var(--eco-l-papel);
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
	color: var(--eco-l-tinta);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.eco-l-idiomas summary::-webkit-details-marker {
	display: none;
}
.eco-l-idiomas[open] summary svg {
	transform: rotate(180deg);
}
.eco-l-idiomas summary svg {
	display: block;
	transition: transform 0.2s;
}
.eco-l-idiomas ul {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 150px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--eco-l-papel);
	box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}
.eco-l-idiomas li a,
.eco-l-idiomas li span {
	display: block;
	padding: 8px 16px;
	font-weight: 500;
	color: var(--eco-l-tinta);
	text-decoration: none;
}
.eco-l-idiomas li a:hover,
.eco-l-idiomas li a:focus-visible {
	background: var(--eco-l-gris);
}
.eco-l-idiomas li span {
	font-weight: 700;
}

/* Cabecera y pie de la plantilla */
.eco-landing__cabecera {
	padding: 20px var(--eco-l-margen);
	border-bottom: 1px solid #e6e6e6;
}
.eco-landing__cabecera .wp-block-site-logo img {
	width: 130px;
	height: auto;
}
.eco-landing__contenido,
.eco-landing__contenido .wp-block-post-content {
	margin-block: 0;
}
.eco-landing__contenido .wp-block-post-content > * {
	margin-block: 0;
	max-width: none;
}
.eco-landing__pie {
	padding: 0 var(--eco-l-margen) 28px;
	margin-block-start: 0;
}
.eco-landing__pie p {
	margin: 0;
}
.eco-landing__pie a {
	color: inherit;
	text-decoration: none;
}
/* Como el pie antiguo: raya, logo «EO» | © | redes */
.eco-landing__pie-fila {
	display: flex;
	align-items: center;
	gap: 0;
	border-top: 1px solid var(--eco-l-tinta);
	padding-top: 24px;
	margin-inline: auto;
	max-width: 1140px;
}
.eco-landing__pie-logo {
	padding: 0 32px 0 0;
}
.eco-landing__pie-logo img {
	width: 56px;
	height: auto;
	display: block;
}
.eco-landing__pie-derechos {
	flex: 1;
	border-left: 1px solid var(--eco-l-tinta);
	padding: 4px 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
}
.eco-landing__pie-redes {
	border-left: 1px solid var(--eco-l-tinta);
	padding: 8px 0 8px 24px;
	font-weight: 700;
	font-size: 1.125rem;
}
.eco-landing__pie-redes a {
	margin-left: 12px;
}
.eco-landing__pie-legal {
	max-width: 1140px;
	margin: 16px auto 0 !important;
	font-size: 0.75rem;
	color: #646464;
}

/* Botones: negros, rectos y, como en Elementor («shrink»), se encogen al pasar el ratón.
   El botón del formulario (.eco-form__boton) también. */
.eco-landing .wp-block-button__link,
.eco-landing .eco-form__boton {
	background: var(--eco-l-tinta);
	color: var(--eco-l-papel);
	border: 1px solid var(--eco-l-tinta);
	border-radius: 0;
	padding: 15px 30px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.3s;
}
.eco-landing .wp-block-button__link:hover,
.eco-landing .wp-block-button__link:focus-visible,
.eco-landing .eco-form__boton:hover,
.eco-landing .eco-form__boton:focus-visible {
	transform: scale(0.9);
}
.eco-landing .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--eco-l-tinta);
}
.eco-l-oscuro .wp-block-button__link {
	background: var(--eco-l-papel);
	color: var(--eco-l-tinta);
	border-color: var(--eco-l-papel);
}

/* Secciones */
.eco-l-seccion {
	padding: var(--eco-l-aire) var(--eco-l-margen);
}
/* Como los contenedores «boxed» de Elementor: el contenido de las secciones, a 1140 px como mucho */
.eco-landing .eco-l-seccion > * {
	max-width: 1140px;
	margin-inline: auto;
}
.eco-l-estrecha {
	max-width: 920px;
	margin-inline: auto;
}
.eco-l-oscuro {
	background: var(--eco-l-tinta);
	color: var(--eco-l-papel);
}
.eco-l-oscuro a {
	color: inherit;
}
.eco-l-gris {
	background: var(--eco-l-gris);
}
.eco-landing .eco-l-destacado {
	font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
	line-height: 1.2;
	font-weight: 500;
}
.eco-landing .eco-l-cifra {
	font-size: clamp(1.6rem, 2.4vw, 2.125rem);
	line-height: 1.05;
	font-weight: 600;
}
/* Caja con borde («Instalación y logística» de distribuidor) */
.eco-l-caja-borde {
	border: 1px solid var(--eco-l-tinta);
	padding: clamp(20px, 3vw, 32px);
}

/* Desplegable «¿Quién eres?» */
.eco-l-selector select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--eco-l-tinta);
	border-radius: 0;
	background: var(--eco-l-papel);
	font-size: 1rem;
	color: var(--eco-l-tinta);
}

/* Sectores en rejilla de 3 con el formulario en la tercera columna (principal) */
.eco-l-rejilla-sectores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	align-items: start;
}
.eco-landing .eco-l-rejilla-sectores > * {
	margin: 0;
}
.eco-l-rejilla-sectores > .eco-l-sector-formulario {
	grid-column: 3;
	grid-row: 1 / span 3;
}
.eco-l-rejilla-sectores .wp-block-image {
	margin: 0;
}
.eco-l-rejilla-sectores .wp-block-image img {
	width: 100%;
	aspect-ratio: 600 / 558;
	object-fit: cover;
	display: block;
}
.eco-l-rejilla-sectores h3 {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 12px;
}

/* Talleres: formas negras grandes de fondo, como en la web antigua */
.eco-l-taller {
	background: url("landing-taller-fondo.webp") no-repeat 13% 0 / 60% auto;
}
.eco-landing .eco-l-taller {
	padding: clamp(120px, 15vw, 220px) var(--eco-l-margen) var(--eco-l-aire);
}
/* La caja blanca tapa las formas: solo asoman alrededor del texto */
.eco-l-taller > .eco-l-taller-texto {
	max-width: 600px;
	margin-inline: auto;
	padding: clamp(24px, 3.5vw, 50px);
	background: var(--eco-l-papel);
}
.eco-landing .eco-l-taller-sub {
	font-size: 1.25rem;
	font-weight: 500;
}
.eco-l-taller .eco-form input,
.eco-l-taller .eco-form select {
	background: var(--eco-l-papel);
}
.eco-l-antetitulo {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
}

/* Portadas: foto a sangre con una caja blanca encima */
.eco-landing .eco-l-portada {
	padding: var(--eco-l-aire) var(--eco-l-margen);
}
.eco-l-caja {
	background: var(--eco-l-papel);
	color: var(--eco-l-tinta);
	padding: clamp(24px, 4vw, 48px);
	max-width: 640px;
	margin-inline: auto;
}
.eco-l-caja--izquierda {
	margin-inline: 0 auto;
}
.eco-l-caja--ancha {
	max-width: 820px;
}
.eco-l-caja > :first-child {
	margin-top: 0;
}
.eco-l-caja > :last-child {
	margin-bottom: 0;
}

/* Dos columnas encima de una portada (texto y formulario) */
.eco-landing .eco-l-dos-cajas {
	gap: clamp(16px, 3vw, 40px);
	margin: 0;
	text-align: left;
}
.eco-l-dos-cajas .eco-l-caja {
	max-width: none;
	margin: 0;
}

/* Dos mitades: texto y foto */
.eco-landing .eco-l-partido {
	gap: 0;
	margin: 0;
}
.eco-l-partido > .eco-l-texto {
	padding: var(--eco-l-aire) var(--eco-l-margen);
}
.eco-l-partido > .wp-block-column:not(.eco-l-texto) {
	display: flex;
	align-self: stretch;
}
.eco-l-partido .wp-block-image {
	margin: 0;
	width: 100%;
}
.eco-l-partido .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
}
/* Fotos que llevan texto dentro (la caracola): enteras, sin recortar */
.eco-landing .eco-l-entera img {
	object-fit: contain;
}

/* Rejillas de fotos con pie */
.eco-landing .eco-l-tarjetas {
	gap: clamp(16px, 2vw, 28px);
	margin-top: 32px;
}
.eco-l-tarjetas > .wp-block-column {
	align-self: flex-start;
}
.eco-l-tarjetas .wp-block-image {
	margin: 0;
}
.eco-l-tarjetas .wp-block-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.eco-l-tarjetas h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin-top: 12px;
}

/* Mosaico: fotos pegadas, misma altura */
.eco-landing .eco-l-mosaico {
	gap: 8px;
	margin: 0;
}
.eco-l-mosaico > .wp-block-column {
	align-self: stretch;
	display: flex;
}
.eco-l-mosaico .wp-block-image {
	margin: 0;
	height: 100%;
}
.eco-l-mosaico .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	display: block;
}

/* Diseñadores: de dos en dos; cada uno, el retrato grande y, al lado, el producto
   con el nombre y el lema debajo (como en la antigua) */
.eco-l-disenadores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
	margin-top: 32px;
}
.eco-landing .eco-l-disenador {
	gap: 0;
	margin: 0;
	flex-wrap: nowrap;
}
.eco-l-disenador > .wp-block-column {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
.eco-landing .eco-l-disenador .wp-block-image {
	margin: 0;
	width: 100%;
}
.eco-l-disenador .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eco-l-disenador > .wp-block-column:first-child .wp-block-image img {
	aspect-ratio: 2 / 3;
	height: auto;
}
.eco-l-disenador > .eco-l-texto .wp-block-image {
	flex: 1;
	min-height: 0;
}
.eco-landing .eco-l-disenador > .eco-l-texto > :is(h3, p) {
	padding-inline: 12px;
}
.eco-l-disenador h3 {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 12px 0 4px;
}

/* Listas de ventajas: sin viñetas, con raya fina */
.eco-l-lista {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
}
.eco-l-lista li {
	padding: 10px 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.eco-l-lista li:last-child {
	border-bottom: 0;
}

/* Rejilla de ventajas (título + texto) */
.eco-landing .eco-l-ventajas {
	gap: clamp(20px, 3vw, 40px);
	margin-top: 32px;
}
.eco-l-ventajas > .wp-block-column {
	align-self: flex-start;
}
.eco-l-ventajas h3 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 6px;
}
.eco-l-ventajas p {
	font-size: 0.9375rem;
	margin: 0;
}

/* Portada negra de profesional: el logo blanco va dentro, como en la antigua */
.eco-landing .eco-l-partido .eco-l-logo-blanco {
	width: auto;
}
.eco-landing .eco-l-partido .eco-l-logo-blanco img {
	width: 200px;
	height: auto;
	min-height: 0;
	object-fit: contain;
}
.eco-l-oscuro h1 {
	font-weight: 700;
}

/* Páginas de gracias: a la izquierda, como /descarga-catalogo-ecocero/ de la antigua */
.eco-l-gracias {
	max-width: 1140px;
	margin-inline: auto;
}
.eco-l-gracias h1 {
	font-size: 1.375rem;
}
.eco-landing .eco-l-logos {
	gap: 32px;
	margin-top: 2rem;
}
.eco-l-logos .wp-block-image {
	margin: 0;
}
.eco-l-logos .wp-block-image img {
	height: 56px;
	width: auto;
}
.eco-landing .eco-l-logos-taller {
	max-width: 1140px;
	margin: 0 auto !important;
	padding: 0 var(--eco-l-margen);
}
.eco-l-taller h1 {
	font-size: clamp(1.6rem, 2.5vw, 2.1875rem);
}

/* Rejilla final de particular: las tres fotos pegadas arriba */
.eco-l-final-particular > .eco-l-mosaico {
	margin-bottom: 1.5rem;
}

/* Formulario: ancla a la que bajan los botones «Descarga nuestro catálogo» */
#formulario {
	scroll-margin-top: 16px;
}

@media (max-width: 781px) {
	.eco-l-idiomas {
		top: 12px;
		font-size: 0.75rem;
	}
	.eco-l-idiomas summary {
		padding: 6px 10px;
	}
	.eco-l-partido > .wp-block-column:not(.eco-l-texto) {
		order: -1;
	}
	.eco-l-partido .wp-block-image img {
		min-height: 260px;
		max-height: 420px;
	}
	.eco-l-disenadores {
		grid-template-columns: 1fr;
	}
	/* En móvil las columnas se apilan a todo el ancho (con !important en el CSS de
	   WordPress): las fotos de diseñadores, mosaicos y sectores van de dos en dos. */
	.eco-landing :is(.eco-l-mosaico, .eco-l-tarjetas) {
		flex-wrap: wrap;
	}
	.eco-landing .eco-l-mosaico > .wp-block-column {
		flex-basis: calc(50% - 4px) !important;
	}
	.eco-landing .eco-l-disenador > .wp-block-column {
		flex-basis: 50% !important;
	}
	.eco-landing .eco-l-tarjetas > .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
	}
	.eco-l-mosaico .wp-block-image img {
		min-height: 160px;
	}
	.eco-l-rejilla-sectores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.eco-l-rejilla-sectores > .eco-l-sector-formulario {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.eco-l-taller {
		background-size: 120% auto;
		background-position: 30% 0;
	}
	.eco-landing__pie-fila {
		flex-wrap: wrap;
		row-gap: 12px;
	}
	.eco-landing__pie-redes {
		border-left: 0;
		padding-left: 0;
		flex-basis: 100%;
	}
	.eco-landing__pie-redes a:first-child {
		margin-left: 0;
	}
}

/* Landing de ORGATEC 2026 (plantilla del taller): los logos de ECOcero y de la feria encima del título */
.eco-landing .eco-l-taller .eco-l-logos {
	align-items: center;
	margin: 0 0 2.5rem;
}

/* Variante del taller SIN las formas negras de fondo (esas son de la Acoustic Gallery): ORGATEC, fondo blanco */
.eco-l-taller.eco-l-sin-fondo {
	background: none;
}
.eco-landing .eco-l-taller.eco-l-sin-fondo {
	padding-top: var(--eco-l-aire);
}