/*
Theme Name: Ecotec Ingenieria
Template: twentytwentyfive
Author: DND Studio
Version: 8.1
Requires at least: 6.7
Tested up to: 7.1
Text Domain: ecotec
Description: Tema propio Ecotec. Twenty Twenty-Five solo aporta el motor de bloques; el diseño es 100% Ecotec.
*/

/* La hoja ecotec-source.css (copia identica del CSS original del mockup) hace todo el trabajo
   de diseno. Este archivo solo resuelve friccion especifica del editor de bloques de WP. */

body { background: var(--bg); }

/* Cada pagina trae su propio hero/heading dentro del HTML pegado; ocultamos el titulo
   automatico que agrega la plantilla padre para no duplicar encabezados. */
.wp-block-post-title { display:none; }
.page-hero .wp-block-post-title,
.page-hero h1.page-title { display:block !important; }
.page-hero .wp-block-post-excerpt,
.page-hero .wp-block-post-excerpt p {
	margin: 0;
	max-width: 640px;
	color: rgba(255,255,255,.82);
	font-size: 1.05rem;
	line-height: 1.55;
}

/* El contenido se pega como bloques "HTML personalizado": quitamos los margenes que
   Gutenberg agrega por defecto entre bloques para que las secciones queden pegadas
   exactamente como en el HTML fuente. */
.entry-content > * { margin-block: 0 !important; }
.entry-content { max-width: none !important; padding: 0 !important; }

/* El theme padre (twentytwentyfive) agrega un margin-top al <main> del editor de bloques
   (~70px) pensado para un header estatico. Nuestro header es fijo (position:fixed) y el
   body ya reserva el espacio correcto con padding-top:var(--nav-h), asi que ese margen
   extra del <main> duplica el espacio y deja un vacio blanco entre el nav y el hero. */
.wp-site-blocks > main.wp-block-group { margin-top: 0 !important; padding-top: 0 !important; }
.wp-site-blocks > main.wp-block-group > :first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* La franja de "Prototipo" del mockup se deja oculta (display:none) igual que en el
   HTML original: existe en el markup pero no se muestra en el sitio publicado. */

/* Nota: se probo forzar 'Baloo 2' en los titulares por una impresion visual del mockup,
   pero el codigo fuente real (carpeta "webecotec" del cliente, ecotec.css) especifica
   'Outfit' en todos los titulares. Se revierte para que la replica sea fiel al codigo
   fuente original en vez de a una suposicion visual. */

/* Logo original del cliente (imagen real: "ecoTEC" con el simbolo de reciclaje en vez
   de la "o"), tal como la envio — reemplaza el logo de texto/SVG que se habia armado
   antes de tener el archivo original. Tamano grande en el header, como se pidio. */
.nav-logo { display: flex; align-items: center; height: 100%; }
/* Tamano exacto del logo pedido por el cliente: 232.75 x 78px. ecotec-source.css trae
   ".nav-logo img { height: calc(var(--nav-h) - 4px) }" (mas especifico que una sola
   clase por ser clase+etiqueta), asi que igualamos esa especificidad para fijar el
   tamano real desde aqui en vez del calculo relativo al alto del nav. */
.nav-logo img.nav-logo-img { display: block; width: 232.75px !important; height: 78px !important; max-width: none; }
.f-logo-img {
	display: block;
	width: auto; height: 52px; max-width: 210px;
	margin: 0;
	background: none; padding: 0; border-radius: 0;
	box-sizing: content-box; object-fit: contain;
}
@media (max-width: 480px) {
	.nav-logo img.nav-logo-img { width: 174px !important; height: 58px !important; }
}

/* Enlace activo del menu, como en el mockup: color azul + negrita, sin subrayado. */
.nav-links a.active { text-decoration: none; }

/* Cuando hay sesion de WordPress iniciada, la barra de admin (fixed, top:0, z-index 99999)
   queda encima de nuestro header (tambien fixed, top:0) y tapa el logo y el inicio del menu.
   La empujamos hacia abajo el alto exacto de esa barra, como hace WP con el resto del sitio. */
body.admin-bar #nav { top: 32px; }
body.admin-bar .nav-mobile { top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar #nav { top: 46px; }
	body.admin-bar .nav-mobile { top: calc(var(--nav-h) + 46px); }
}

/* El grid de logos de clientes usa gap:1px + fondo var(--border) en el contenedor para
   simular lineas divisorias finas entre celdas. Como el grid es "auto-fill" (numero de
   columnas segun el ancho disponible), cuando la ultima fila no se llena completa
   (por ejemplo 12 logos en un grid de 7 columnas) las celdas vacias del final quedan sin
   ningun .client-cell encima y muestran ese fondo completo como un bloque de color suelto.
   Lo resolvemos quitando el "truco" de fondo del contenedor y dibujando las lineas divisorias
   como border en cada celda real: asi solo se ve linea donde hay contenido. */
.client-grid { background: transparent !important; gap: 0 !important; }
.client-cell {
	background: var(--bg, #fff) !important;
	border-right: 1px solid var(--border, #D0D8EE);
	border-bottom: 1px solid var(--border, #D0D8EE);
}

/* Bloques de "Servicios" (imagen + texto alternados): la imagen tenia una altura fija
   (300px en el HTML de la pagina) mientras la columna de texto crece con el contenido
   (bullets, descripcion), dejando un hueco en blanco debajo de la foto cuando el texto
   es mas alto. La hacemos estirarse (align-items:stretch) para que la imagen siempre
   llene el alto real de la fila, recortada con object-fit:cover. */
.srv-detail-inner, .srv-detail-grid { align-items: stretch !important; }
.srv-detail-img { height: auto !important; display: flex; }
.srv-detail-img img { height: 100% !important; min-height: 320px; object-fit: cover; }
@media (max-width: 640px) {
	.srv-detail-img img { min-height: 220px; }
}

/* Caja CTA final ("¿Necesitas asesoria en alguno de estos servicios?"): los parrafos
   dentro traen text-align:justify, que con una sola linea de texto se comporta como
   alineado a la izquierda (se ve pegado al borde, descentrado respecto al titulo, que
   si esta centrado). Ademas el texto "Respondemos en menos de 24 horas..." tiene muy
   poco contraste sobre el fondo celeste claro de la caja. */
.cta-banner p { text-align: center !important; }
.cta-banner p:last-of-type { color: #4A5575 !important; }

/* Grid de "Sectores que atendemos": con grid + auto-fit, la ultima fila incompleta queda
   pegada a la izquierda dejando un hueco grande a la derecha. Cambiamos a flexbox con
   wrap y centrado para que la fila incompleta quede pareja/centrada en vez de colgando. */
.sectors-grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
.sectors-grid .sector-item { flex: 1 1 150px; max-width: 190px; }

/* Nota: los chips de servicios bajo la descripcion del hero se habian reactivado por
   error (existian en el mockup pero estan comentados/deshabilitados en el HTML fuente
   real). Se quitaron del markup de la pagina de inicio; ya no se necesita este CSS. */

/* El HTML fuente de cada pagina (servicios.html, nosotros.html, etc.) trae su propio
   <main> "pelado" (sin clases) envolviendo el page-hero y el resto del contenido, tal
   como en el sitio original. El theme padre (twentytwentyfive) aplica el ancho de
   contenido global (content-size, 1200px) a CUALQUIER etiqueta <main> como parte de su
   sistema de layout constrained/FSE, lo que angosta nuestro <main> pelado con margenes
   blancos a los lados — cosa que no pasa en el sitio fuente, donde el ancho completo lo
   maneja cada seccion (page-hero, wrap, etc.) por su cuenta. Anulamos esa restriccion
   solo para el <main> sin clases (el nuestro; el <main class="wp-block-group"> de la
   plantilla no se toca). */
main:not([class]) { max-width: none !important; margin: 0 !important; width: 100% !important; }

/* ─── Gutenberg: layout full-bleed ───────────────────────────── */
.ecotec-main,
.ecotec-main > .wp-block-post-content,
.entry-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
header.wp-block-template-part,
footer.wp-block-template-part { margin: 0 !important; display: contents; }

/* ─── Header FSE (site-logo + navigation) ────────────────────── */
#nav.ecotec-nav {
	display: block;
	padding: 0;
	overflow: hidden;
}
#nav .nav-inner {
	height: 100%;
	overflow: hidden;
}
#nav .wp-block-site-logo,
#nav .nav-logo { display: flex; align-items: center; height: 100%; }
#nav .wp-block-site-logo a { line-height: 0; }
#nav .wp-block-site-logo img,
#nav .nav-logo img,
#nav .nav-logo img.custom-logo {
	display: block;
	width: auto;
	height: calc(var(--nav-h) - 4px);
	max-width: min(233px, calc(100vw - 100px));
	object-fit: contain;
}
@media (min-width: 1081px) {
	#nav .nav-logo img.custom-logo {
		width: 232.75px;
		height: 78px;
		max-width: none;
	}
}
#nav .wp-block-navigation { margin-left: 8px; flex: 1; }
#nav .wp-block-navigation-item a {
	font-size: 14px; font-weight: 500; color: var(--ink-2);
	padding: 6px 12px; border-radius: 6px;
	text-decoration: none;
}
#nav .wp-block-navigation-item a:hover {
	color: var(--p); background: var(--p-lt);
}
#nav .wp-block-navigation-item.current-menu-item a {
	color: var(--p); font-weight: 600;
}
#nav .nav-cta { margin-left: auto; }
#nav .nav-cta .wp-block-button__link {
	display: inline-flex; align-items: center;
	background: var(--p); color: #fff !important;
	border-radius: var(--r, 8px);
	padding: 10px 22px; font-size: 14px; font-weight: 600;
	text-decoration: none;
}
#nav .nav-cta .wp-block-button__link:hover { background: var(--p-dk); }
#nav .nav-mob-cta { display: none; }

/*
 * Menú: WP usa overlay "mobile" a 600px. Nosotros usamos overlay siempre
 * y restauramos la fila de enlaces a 1081px (breakpoint del mockup).
 * Cerrado: nada del overlay puede entrar en el flujo ni pintar sobre el hero.
 */
@media (max-width: 1080px) {
	#nav .nav-cta { display: none !important; }
	#nav .wp-block-navigation.nav-links {
		display: flex !important;
		align-items: center;
		margin-left: auto;
		flex: 0 0 auto;
		width: auto;
		min-width: 44px;
	}
	#nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
		visibility: visible !important;
		margin-left: auto;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--border);
		border-radius: 8px;
		background: #fff;
		align-items: center;
		justify-content: center;
		color: var(--ink);
		flex-shrink: 0;
		z-index: 1101;
	}
	#nav .wp-block-navigation__responsive-container-open svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}
	#nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		position: absolute !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		clip-path: inset(50%) !important;
		inset: auto !important;
	}
	#nav:has(.is-menu-open) {
		overflow: visible;
	}
	#nav:has(.is-menu-open) .nav-inner {
		overflow: visible;
	}
}

@media (min-width: 1081px) {
	#nav .wp-block-navigation__responsive-container-open,
	#nav .wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	#nav .wp-block-navigation__responsive-container,
	#nav .wp-block-navigation__responsive-container.hidden-by-default {
		display: flex !important;
		position: relative !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		background: transparent !important;
		padding: 0 !important;
		z-index: auto !important;
		visibility: visible !important;
		clip-path: none !important;
	}
	#nav .wp-block-navigation__responsive-close,
	#nav .wp-block-navigation__responsive-dialog,
	#nav .wp-block-navigation__responsive-container-content,
	#nav .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 4px;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		box-shadow: none;
	}
	#nav .wp-block-navigation-item {
		display: flex !important;
		flex-direction: row !important;
	}
	#nav .nav-mob-cta { display: none !important; }
}

/* ─── Hero / botones Gutenberg ───────────────────────────────── */
.ecotec-hero .btn-hero-primary .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--verde) !important; color: #fff !important;
	border: 2px solid var(--verde);
	border-radius: 8px; padding: 14px 28px;
	font-size: 15px; font-weight: 700;
	box-shadow: 0 4px 20px rgba(26,140,26,.4);
}
.ecotec-hero .btn-hero-secondary .wp-block-button__link {
	display: inline-flex; align-items: center;
	background: transparent !important; color: rgba(255,255,255,.9) !important;
	border: 2px solid rgba(255,255,255,.28);
	border-radius: 8px; padding: 14px 24px;
	font-size: 15px; font-weight: 600;
}
.ecotec-hero .btn-hero-primary .wp-block-button__link:hover {
	background: var(--verde-dk) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(26,140,26,.5);
}
.ecotec-main .wp-block-button .wp-block-button__link {
	border-radius: var(--r, 8px) !important;
}
.ecotec-hero .btn-hero-secondary .wp-block-button__link:hover {
	background: rgba(255,255,255,.1) !important;
	border-color: rgba(255,255,255,.5);
}
.ecotec-hero .wp-block-columns { gap: 48px; }
.ecotec-hero .stat-card.wp-block-group { display: flex; flex-direction: row; align-items: center; }
.ecotec-hero .agof-card.wp-block-group { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.ecotec-hero .stat-card p { color: inherit; }

/* ─── Secciones home en grupos ───────────────────────────────── */
.wp-block-group.services-grid { display: grid !important; }
.wp-block-group.stats-grid { display: grid !important; }
.wp-block-group.agof-inner { display: grid !important; align-items: start; }
.wp-block-group.agof-caps { display: grid !important; }
.wp-block-group.agof-text { display: flex !important; flex-direction: column; min-width: 0; }
.wp-block-group.trust-inner {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: stretch;
	justify-items: stretch;
	width: 100%;
	gap: 0;
}
.wp-block-group.trust-item {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 8px 14px;
	white-space: normal;
}
.wp-block-group.trust-inner > * {
	margin-block: 0 !important;
}
.trust-item p { margin: 0; line-height: 1.25; }
.trust-item .trust-icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}
#trust .trust-icon.flag-de {
	width: 28px;
	height: 20px;
	flex-basis: 28px;
}
.wp-block-group.carousel-track {
	display: flex !important;
	width: max-content;
	gap: 0 !important;
}
.card-img .wp-block-image,
.card-img figure { margin: 0; height: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-footer .wp-block-button__link {
	padding: 7px 16px; font-size: 13px;
	background: transparent; color: var(--p);
	border: 2px solid var(--p); border-radius: var(--r, 8px) !important;
}
.card-footer .wp-block-button__link:hover { background: var(--p); color: #fff; }
.agof-section .btn-white .wp-block-button__link {
	background: #fff !important; color: var(--p) !important;
	padding: 10px 22px; font-weight: 600; font-size: 14px;
	border-radius: var(--r, 8px) !important;
	white-space: normal;
	text-align: center;
}
#clientes-strip .wp-block-button .wp-block-button__link {
	background: transparent !important;
	color: var(--p) !important;
	border: 2px solid var(--p) !important;
	border-radius: var(--r, 8px) !important;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
}
#clientes-strip .wp-block-button .wp-block-button__link:hover {
	background: var(--p) !important;
	color: #fff !important;
}
#stats .wp-block-group.stat-item {
	padding: 32px 0 !important;
	background: transparent;
	min-width: 0;
	text-align: left;
}
#stats .wp-block-group.stats-grid,
.wp-block-group.stats-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 40px !important;
}
#stats .stat-num {
	margin: 0 0 8px !important;
	font-size: 2.4rem;
	line-height: 1.05;
	overflow-wrap: normal;
	word-break: normal;
	min-height: 2.6rem;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	text-align: left;
}
#stats .stat-num.stat-claim {
	font-size: clamp(1.12rem, 1.5vw, 1.4rem) !important;
	line-height: 1.2 !important;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
#stats .stat-lbl {
	margin: 0 !important;
	text-align: left;
}
.wp-block-button.is-style-outline,
.wp-block-button.btn,
.wp-block-button.btn-outline,
.wp-block-button.btn-primary,
.wp-block-button.subject-btn,
.wp-block-button.filter-btn,
.wp-block-button.anchor-link {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	white-space: normal;
	transform: none;
}
.wp-block-button.btn .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: var(--r, 8px) !important;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none !important;
}
.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--p) !important;
	border: 2px solid var(--p) !important;
}
.wp-block-button.btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--p) !important;
	color: #fff !important;
}
.wp-block-button.btn-primary .wp-block-button__link {
	background: var(--p) !important;
	color: #fff !important;
	border: none !important;
}
.agof-section .wp-block-buttons {
	position: static !important;
	margin-top: 28px !important;
	display: block !important;
	width: fit-content;
	max-width: 100%;
}
.cta-banner .wp-block-button__link {
	background: var(--p); color: #fff;
	padding: 14px 28px; font-size: 16px; font-weight: 700;
	border-radius: var(--r, 8px);
}
.cta-banner .cta-note { font-size: 13px; color: #4A5575; margin-top: 14px !important; }
.ecotec-servicios { padding: 64px 0; }
.eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--p); margin-bottom: 8px !important;
}
.section-title { font-family: 'Outfit', sans-serif; font-weight: 800; }
.cli-item .wp-block-image { margin: 0; }
#clientes-strip > .wp-block-buttons { margin-top: 32px; justify-content: center; }
@media (max-width: 480px) {
	#nav .nav-logo img.custom-logo { width: auto !important; height: calc(var(--nav-h) - 4px) !important; }
}

/* ─── Gutenberg vs mockup: anular layout/gap del tema padre ──── */
.ecotec-main :where(.is-layout-flow) > *,
.ecotec-hero :where(.is-layout-flow) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.ecotec-main .entry-content > main {
	display: contents;
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	text-decoration: none !important;
}
#nav .wp-block-navigation {
	font-size: 14px;
}
.wp-block-columns.hero-content {
	align-items: center !important;
	gap: 48px !important;
	flex-wrap: nowrap !important;
}
.ecotec-hero .hero-right-col {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}
.hero-h1,
.hero-desc,
.hero-eyebrow {
	text-align: left !important;
	hyphens: none;
}
.hero-right-col .stat-card:nth-child(3) .stat-card-num,
.hero-right-col .stat-card:nth-child(4) .stat-card-num {
	font-size: 1.1rem;
	line-height: 1.2;
}
.wp-block-group.agof-seal { display: flex !important; flex-direction: column; }
.wp-block-group.agof-cap { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; }
.agof-seal p,
.agof-cap p { margin: 0 !important; text-align: center; }
.agof-cap p { text-align: left; }
.agof-section h2,
.agof-section .agof-text p { color: #fff !important; }
.agof-section .agof-text p { text-align: left; }
.card-footer {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.card-icon { margin: 0 0 12px !important; }
.eyebrow { text-align: inherit; }

/* Overlay abierto: panel a pantalla completa debajo del header, como el mockup */
@media (max-width: 1080px) {
	#nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		top: var(--nav-h) !important;
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		padding: 12px 20px 40px !important;
		padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
		background: var(--bg, #fff) !important;
		overflow: auto !important;
		z-index: 100000 !important;
		transform: none !important;
		visibility: visible !important;
		clip-path: none !important;
		inset: var(--nav-h) 0 0 0 !important;
	}
	body.admin-bar #nav .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--nav-h) + 32px) !important;
		inset: calc(var(--nav-h) + 32px) 0 0 0 !important;
	}
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 0;
		box-shadow: none;
	}
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
	}
	#nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		font-family: 'Outfit', sans-serif;
		font-size: 20px;
		font-weight: 600;
		color: var(--ink);
		padding: 18px 0;
		border-bottom: 1px solid var(--border);
		border-radius: 0;
		width: 100%;
		text-align: left;
	}
	#nav .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 8px;
		right: 16px;
		width: 44px;
		height: 44px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}
	#nav .is-menu-open .nav-mob-cta {
		display: block;
		margin-top: 32px;
		text-align: center;
	}
	#nav .nav-mob-cta .btn {
		width: 100%;
		justify-content: center;
		color: #fff !important;
		background: var(--p);
	}
}
@media screen and (max-width: 782px) {
	body.admin-bar #nav .wp-block-navigation__responsive-container.is-menu-open {
		top: calc(var(--nav-h) + 46px) !important;
		inset: calc(var(--nav-h) + 46px) 0 0 0 !important;
	}
}

/* En WP el body ya reserva --nav-h; no repetir ese padding del mockup. */
@media (max-width: 768px) {
	.hero-content {
		padding-top: 16px !important;
	}
}

.page-hero {
	position: relative;
	z-index: 0;
}

/* Hero: el mockup apila a 900px; WP columnas recién a 781px */
@media (max-width: 900px) {
	.wp-block-columns.hero-content {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		gap: 28px !important;
	}
	.wp-block-columns.hero-content > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100%;
	}
	.ecotec-hero .hero-right-col {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.ecotec-hero .hero-right-col .agof-card { grid-column: 1 / -1; }
	.ecotec-hero.wp-block-cover { min-height: auto; }
	.hero-ctas {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.hero-ctas .wp-block-button,
	.hero-ctas .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}
@media (max-width: 1000px) {
	.wp-block-group.trust-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-group.trust-item {
		border-right: none;
		justify-content: flex-start;
		padding: 10px 12px;
	}
	.wp-block-group.trust-item:last-child {
		grid-column: 1 / -1;
		justify-content: center;
		max-width: 280px;
		margin-inline: auto !important;
	}
}
@media (max-width: 640px) {
	.ecotec-servicios,
	.agof-section,
	.cta-banner,
	#clientes-strip { padding: 36px 0; }
	.hero-ctas .wp-block-button__link { width: 100%; }
}
@media (max-width: 540px) {
	.wp-block-group.trust-inner {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin-inline: auto;
	}
	.wp-block-group.trust-item,
	.wp-block-group.trust-item:last-child {
		justify-content: flex-start;
		max-width: none;
		grid-column: auto;
	}
	.ecotec-hero .hero-right-col { grid-template-columns: 1fr; }
	.hero-ctas .wp-block-button__link { font-size: 14px; padding: 12px 20px; }
	.agof-seal { width: 120px; height: 120px; margin: 0 auto; }
	.wp-block-group.agof-inner { justify-items: center; }
	.cta-banner .wp-block-button,
	.cta-banner .wp-block-button__link { width: 100%; max-width: 420px; }
}

/* Interiores Gutenberg: grupos heredan las grillas del mockup */
.wp-block-group.ecotec-surface { background: var(--surface); }
.srv-detail.is-alt { background: var(--surface); }
.wp-block-columns.srv-detail-grid,
.wp-block-columns.split,
.wp-block-columns.two-col,
.wp-block-columns.contact-layout,
.wp-block-columns.footer-grid {
	display: grid !important;
	gap: inherit;
}
.wp-block-columns.contact-layout {
	gap: 56px !important;
	align-items: start;
}
.wp-block-columns.contact-layout > .wp-block-column {
	min-width: 0;
}
.wp-block-columns.srv-detail-grid {
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: stretch;
}
.wp-block-columns.srv-detail-grid.flip > .wp-block-column:first-child { order: 2; }
.wp-block-group.srv-detail-img .wp-block-image,
.wp-block-group.srv-detail-img figure { margin: 0; height: 100%; }
.wp-block-group.srv-detail-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--r-lg); }
.wp-block-group.srv-clients,
.wp-block-group.nosotros-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.wp-block-group.srv-clients p.pill,
.wp-block-group.nosotros-pills p.pill { width: auto; margin: 0; }
.wp-block-group.srv-extra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.page-hero nav.breadcrumb,
.page-hero .breadcrumb { margin-bottom: 16px; }
.page-hero .breadcrumb-inner { margin: 0 !important; color: rgba(255,255,255,.8); }
.page-hero .breadcrumb-inner a { color: rgba(255,255,255,.8); }
.anchor-nav-wrap { padding: 28px 0 0; }
.wp-block-buttons.anchor-nav,
.wp-block-buttons.filter-bar,
.wp-block-buttons.subject-grid {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}
.wp-block-button.anchor-link,
.wp-block-button.filter-btn,
.wp-block-button.subject-btn,
.olores-block .wp-block-button,
.cta-box .wp-block-button {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.wp-block-button.anchor-link .wp-block-button__link,
.wp-block-button.filter-btn .wp-block-button__link {
	font-size: 13px; font-weight: 600;
	padding: 7px 14px; border-radius: 20px;
	border: 1px solid var(--border) !important;
	background: var(--bg) !important;
	color: var(--ink-2) !important;
	box-shadow: none !important;
	outline: none !important;
}
.wp-block-button.anchor-link .wp-block-button__link:hover,
.wp-block-button.anchor-link .wp-block-button__link:focus,
.wp-block-button.anchor-link .wp-block-button__link:focus-visible,
.wp-block-button.filter-btn .wp-block-button__link:hover,
.wp-block-button.filter-btn .wp-block-button__link:focus,
.wp-block-button.filter-btn .wp-block-button__link:focus-visible {
	border-color: var(--p) !important;
	color: var(--p) !important;
	background: var(--bg) !important;
	outline: none !important;
	box-shadow: none !important;
}
.wp-block-button.filter-btn.active .wp-block-button__link,
.wp-block-buttons.filter-bar a.active {
	background: var(--p) !important; color: #fff !important; border-color: var(--p) !important;
}
.wp-block-group.proj-listing-section {
	padding: 40px 0 64px;
}
.wp-block-group.proj-listing {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.wp-block-buttons.filter-bar {
	margin: 0 !important;
	position: relative;
	z-index: 1;
}
.wp-block-group.proj-listing > .wp-block-group.proj-grid-lg,
.wp-block-ecotec-proyectos-grid {
	margin: 0 !important;
}
.wp-block-ecotec-proyectos-grid .wp-block-group.proj-grid-lg {
	margin: 0;
}
.cta-box p.divider {
	font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: lowercase;
	color: var(--ink-3); margin: 20px 0 12px !important;
	font-family: Inter, sans-serif;
}
.wp-block-group.proj-grid-lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wp-block-group.proj-img { height: 200px; overflow: hidden; }
.wp-block-group.proj-img .wp-block-image,
.wp-block-group.proj-img figure { margin: 0; height: 100%; }
.wp-block-group.proj-img img { width: 100%; height: 100%; object-fit: cover; }
.proj-title-card a { color: inherit; text-decoration: none; }
.proj-title-card a:hover { color: var(--p); }
.proj-more { margin: 14px 0 0 !important; font-size: 13px; font-weight: 600; }
.proj-more a { color: var(--p); text-decoration: none; }
.proj-more a:hover { text-decoration: underline; }
.wp-block-group.proyecto-detalle { padding: 48px 0 72px; }
.wp-block-group.proyecto-detalle .proj-meta { margin: 8px 0 0; }
.wp-block-group.proyecto-detalle .section-title {
	margin: 36px 0 18px !important;
	position: relative;
	z-index: 1;
}
.wp-block-gallery.proyecto-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px !important;
	margin: 0 0 8px !important;
	--wp--style--unstable-gallery-gap: 14px;
}
.wp-block-gallery.proyecto-gallery > .wp-block-image,
.wp-block-gallery.proyecto-gallery figure.wp-block-image {
	width: auto !important;
	flex: none !important;
	margin: 0 !important;
	height: 240px;
	overflow: hidden;
	border-radius: var(--r);
}
.wp-block-gallery.proyecto-gallery img {
	width: 100% !important;
	height: 100% !important;
	max-height: 240px !important;
	object-fit: cover !important;
	border-radius: var(--r);
}
.proj-back { margin-top: 32px !important; font-weight: 600; }
.proj-back a { color: var(--p); }
.hidden { display: none !important; }
.wp-block-group.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.wp-block-group.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.wp-block-group.team-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 28px 22px 24px;
	text-align: center;
	height: 100%;
}
.wp-block-group.team-card > p { margin: 0 0 8px !important; }
.wp-block-group.team-card p.team-avatar {
	width: 88px; height: 88px; border-radius: 50%;
	background: var(--p-lt); border: 3px solid var(--p);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 16px !important;
	font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; color: var(--p);
	line-height: 1;
}
.wp-block-group.team-card .team-name { margin: 0 0 4px !important; }
.wp-block-group.team-card .team-role { margin: 0 0 12px !important; }
.wp-block-group.team-card p.team-tag { width: auto; margin: 0; display: inline-block; }
.wp-block-group.team-card p.team-bio {
	text-align: left;
	font-size: 14px; color: var(--ink-2); line-height: 1.65;
	margin: 12px 0 14px !important;
}
.wp-block-group.team-card .team-email { margin: 0 !important; }
.wp-block-group.feature-item { display: flex; align-items: flex-start; gap: 12px; }
.wp-block-group.feature-item > p { margin: 0 !important; }
.wp-block-group.cert-card { display: flex; align-items: flex-start; gap: 14px; }
.wp-block-group.cert-card > p { margin: 0 !important; }
.wp-block-group.certs-grid,
.wp-block-group.faq-grid { display: grid; gap: 16px; }
.wp-block-group.faq-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.wp-block-group.certs-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wp-block-group.sectors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.wp-block-group.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.wp-block-group.client-cell { background: var(--bg); padding: 20px 16px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.wp-block-group.client-cell .wp-block-image { margin: 0; }
.wp-block-group.client-cell img { max-height: 52px; object-fit: contain; filter: grayscale(100%) contrast(.7); opacity: .6; }
.wp-block-group.client-cell:hover img { filter: none; opacity: 1; }
.wp-block-group.split-img { position: relative; }
.wp-block-group.split-img .wp-block-image { margin: 0; }
.wp-block-group.split-img img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--r-lg); }
.wp-block-group.split-stats { position: absolute; bottom: -16px; right: -16px; z-index: 1; }
.wp-block-group.team-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wp-block-group.cinfo-list { display: flex; flex-direction: column; gap: 20px; }
.wp-block-group.cinfo-row { display: flex; align-items: flex-start; gap: 14px; }
.wp-block-buttons.subject-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 28px;
}
.wp-block-buttons.subject-grid .wp-block-button { margin: 0; width: 100%; }
.wp-block-buttons.subject-grid .wp-block-button__link {
	width: 100%;
	padding: 10px 12px; border-radius: var(--r);
	border: 1px solid var(--border) !important;
	background: var(--surface) !important;
	font-size: 13px; color: var(--ink-2) !important; font-weight: 500;
	box-shadow: none !important; text-align: left;
	outline: none !important;
}
.wp-block-buttons.subject-grid .wp-block-button__link:hover,
.wp-block-buttons.subject-grid .wp-block-button__link:focus,
.wp-block-buttons.subject-grid .wp-block-button__link:focus-visible {
	border-color: var(--p) !important;
	background: var(--p-lt) !important;
	color: var(--p) !important;
	outline: none !important;
	box-shadow: none !important;
}
.wp-block-buttons.subject-grid .wp-block-button.active .wp-block-button__link,
.wp-block-buttons.subject-grid a.active {
	border-color: var(--p) !important; background: var(--p) !important; color: #fff !important;
}
.wp-block-group.olores-block {
	margin-top: 32px;
	max-width: 100%;
	box-sizing: border-box;
}
.wp-block-group.olores-block h3 { margin: 0 0 8px !important; }
.wp-block-group.olores-block p { margin: 0 0 14px !important; }
.client-note {
	text-align: center;
	font-size: 13px;
	color: var(--ink-3);
	margin: 20px 0 0 !important;
}
#footer.wp-block-group,
footer.ecotec-footer { background: #0D1124; color: rgba(255,255,255,.75); padding: 36px 0 20px !important; }
#footer .is-layout-flow > *,
#footer .wp-block-group > *,
#footer .wp-block-columns,
#footer .wp-block-column { margin-block: 0 !important; }
.wp-block-columns.footer-grid {
	grid-template-columns: 1.35fr 1fr 1fr 1fr;
	gap: 24px 32px !important;
	margin: 0 0 20px !important;
	align-items: start;
}
#footer .wp-block-image.f-logo,
#footer figure.f-logo {
	display: inline-block;
	background: #fff;
	padding: 8px 12px;
	border-radius: 10px;
	width: fit-content;
	max-width: 100%;
	height: auto !important;
	margin: 0 0 14px !important;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}
#footer .wp-block-image.f-logo img,
#footer figure.f-logo img {
	display: block;
	height: 52px !important;
	width: auto !important;
	max-width: 210px !important;
	object-fit: contain;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0;
	box-sizing: content-box;
}
#footer .footer-brand p { margin: 0 !important; max-width: 34ch; }
#footer .f-title { margin: 0 0 8px !important; }
#footer .f-title + .wp-block-group.f-links { margin-bottom: 18px !important; }
#footer .f-links { gap: 6px; }
#footer .f-links p { margin: 0 !important; line-height: 1.35; }
#footer .f-links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#footer .f-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
#footer .f-tag { margin: 0 !important; }
#footer .footer-bottom {
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin-top: 0 !important;
	padding-top: 16px !important;
}
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--p);
	outline-offset: 2px;
}
.wp-block-button.anchor-link .wp-block-button__link:focus-visible,
.wp-block-button.filter-btn .wp-block-button__link:focus-visible,
.wp-block-button.subject-btn .wp-block-button__link:focus-visible,
.olores-block .wp-block-button__link:focus-visible,
.cta-box .wp-block-button__link:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
@media (max-width: 860px) {
	.wp-block-columns.srv-detail-grid,
	.wp-block-columns.split,
	.wp-block-columns.two-col,
	.wp-block-columns.contact-layout { grid-template-columns: 1fr !important; }
	.wp-block-columns.srv-detail-grid.flip > .wp-block-column:first-child { order: 0; }
	.wp-block-group.values-grid,
	.wp-block-group.proj-grid-lg { grid-template-columns: 1fr 1fr; }
	.wp-block-group.team-grid,
	.wp-block-group.faq-grid { grid-template-columns: 1fr; }
	.wp-block-group.stats-grid,
	#stats .wp-block-group.stats-grid { grid-template-columns: 1fr 1fr; }
	.wp-block-buttons.subject-grid { grid-template-columns: 1fr; }
	.wp-block-columns.footer-grid { grid-template-columns: 1fr 1fr; }
	.wp-block-group.proj-listing { gap: 28px; }
	.wp-block-gallery.proyecto-gallery > .wp-block-image,
	.wp-block-gallery.proyecto-gallery figure.wp-block-image { height: 200px; }
	.wp-block-gallery.proyecto-gallery img { max-height: 200px !important; }
}
@media (max-width: 540px) {
	.wp-block-group.values-grid,
	.wp-block-group.proj-grid-lg { grid-template-columns: 1fr; }
	.wp-block-columns.footer-grid { grid-template-columns: 1fr !important; }
	.wp-block-group.proj-listing { gap: 24px; }
	.wp-block-group.proj-img { height: 180px; }
	.wp-block-buttons.filter-bar { gap: 6px; }
	.wp-block-gallery.proyecto-gallery { grid-template-columns: 1fr !important; }
	.wp-block-gallery.proyecto-gallery > .wp-block-image,
	.wp-block-gallery.proyecto-gallery figure.wp-block-image { height: 220px; }
	.wp-block-gallery.proyecto-gallery img { max-height: 220px !important; }
	.page-hero .page-title { font-size: clamp(1.45rem, 6vw, 2.2rem); }
}