/*
 * Grupo Ingenia — extras.css
 * Pequeños ajustes de estilo que complementan theme.json sin ocultar la
 * editabilidad desde el Site Editor. Todo se basa en CSS variables nativas
 * del tema (--wp--preset--*), por lo que respeta cambios globales.
 */

/* ---------- Tipografía base ---------- */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	scroll-behavior: smooth;
}

/* ---------- Header pegajoso suave ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	margin-block-end: 0 !important;
}

/* Eliminar gap entre header → main → footer (heredado del block-gap global) */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* Sin gap entre secciones full-width (todas las secciones de la home) */
.wp-site-blocks > main > .wp-block-post-content > .wp-block-group.alignfull,
.wp-site-blocks > main .wp-block-post-content > .wp-block-group.alignfull,
.wp-site-blocks > main > .wp-block-post-content > .wp-block-cover.alignfull,
.wp-site-blocks > main .wp-block-post-content > .wp-block-cover.alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* El primer bloque dentro de main (típicamente el hero) pegado al header */
.wp-site-blocks > main > :first-child,
.wp-site-blocks > main > .wp-block-post-content > :first-child,
.wp-site-blocks > main .wp-block-post-content > :first-child {
	margin-block-start: 0 !important;
}

/* Logo del header con altura controlada */
.wp-site-blocks > header .wp-block-site-logo img,
.ingenia-logo img {
	max-height: 78px;
	width: auto;
	display: block;
}

/* Logo blanco en el footer — controlamos solo el img, no el figure */
.ingenia-logo-footer {
	margin: 0 !important;
}

.ingenia-logo-footer a {
	display: inline-block;
	line-height: 0;
}

.ingenia-logo-footer img {
	width: 150px !important;
	height: auto !important;
	max-height: none !important;
	display: block;
}

/* ---------- Navigation polished ---------- */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.85rem;
	border-radius: 8px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--neutral-50);
	color: var(--wp--preset--color--primary) !important;
}

/* Sin text-decoration en hover de los links del nav — el theme.json
 * aplica `link :hover { text-decoration: underline }` globalmente, lo cual
 * genera una línea azul indeseada en items activos (que ya tienen el
 * subrayado dorado del ::after). Override aquí. */
.wp-block-navigation a,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
	text-decoration: none !important;
}

/* Estado ACTIVO del nav — page-level (.is-current-page) y section-level
 * (.is-current-section) gestionados por assets/js/nav-active.js. También
 * cubrimos `.current-menu-item` que WP aplica nativamente para links no-custom. */
.wp-block-navigation a.is-current-page,
.wp-block-navigation a.is-current-section,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600;
	position: relative;
	background: var(--wp--preset--color--neutral-50);
}

/* Subrayado dorado debajo del link activo — indicador de "estás aquí" */
.wp-block-navigation a.is-current-page::after,
.wp-block-navigation a.is-current-section::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.2rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

/* ---------- Header mobile (≤600px = breakpoint del overlayMenu)
 * En desktop el botón "Cotizar proyecto" es un wp:button standalone;
 * en mobile se oculta del top bar y el overlay del hamburger queda
 * solo con los enlaces de navegación (sin CTA).
 * ---------- */

@media (max-width: 600px) {
	/* Ocultar el botón standalone del top bar — el hamburger queda solo
	   y con justify-content:space-between del padre se va a la derecha */
	.ingenia-header-cta {
		display: none !important;
	}

	/* Forzar el overlay del nav a full viewport con stack vertical
	   (default de WP a veces se rompe por flex-constraints del padre) */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: var(--wp--preset--color--base) !important;
		padding: 5rem 1.5rem 2rem !important;
		z-index: 9999 !important;
		box-sizing: border-box !important;
		overflow-y: auto !important;
	}

	/* Sobrescribir las CSS variables del bloque (setCascadingProperties + justifyContent:right
	   las setea con flex-end / margin-inline-start:auto, que en columna empujan los items
	   afuera del viewport) */
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open * {
		--navigation-layout-justification-setting: flex-start !important;
		--navigation-layout-justify: flex-start !important;
		--navigation-layout-align: stretch !important;
		--navigation-layout-direction: column !important;
		--navigation-layout-wrap: nowrap !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open
		ul.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0.25rem !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		font-size: 1.1rem !important;
		font-weight: 500 !important;
		padding: 1rem 0.25rem !important;
		border-bottom: 1px solid rgba(15, 26, 51, 0.08);
		color: var(--wp--preset--color--contrast) !important;
		text-align: left !important;
		box-sizing: border-box !important;
	}
}

/* ---------- Botones outline (variación) ---------- */
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--primary) !important;
	border: 1.5px solid var(--wp--preset--color--primary) !important;
}

.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Botones outline sobre fondos oscuros (hero, mission-vision, cta-banner)
 * Atrapamos cualquier sección dark — wp-block-cover.is-dark, .ingenia-on-dark,
 * y la clase utilitaria has-base-color en el botón.
 */
.has-base-color.is-style-outline > .wp-block-button__link,
.ingenia-on-dark .is-style-outline .wp-block-button__link,
.ingenia-hero .is-style-outline .wp-block-button__link,
.wp-block-cover.is-dark .is-style-outline .wp-block-button__link {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.85) !important;
	color: #ffffff !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ingenia-on-dark .is-style-outline .wp-block-button__link:hover,
.ingenia-hero .is-style-outline .wp-block-button__link:hover,
.wp-block-cover.is-dark .is-style-outline .wp-block-button__link:hover {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--wp--preset--color--primary) !important;
}

/* ---------- Tarjetas: hover sutil ---------- */
.ingenia-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

/* Imagen feature de la sección "Alquiler de maquinaria" — antes estos estilos
   vivían inline en el <img>, lo que rompía la validación del bloque wp:image. */
.ingenia-machinery-img img {
	border-radius: 12px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Fondo del CTA banner — antes estaba inline en el style del wp:group, lo que
   no es generado por save() y rompía la validación. Movido a className. */
.ingenia-cta-banner-bg {
	background-color: #0A1226;
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url(/wp-content/uploads/2026/04/build.jpg);
	background-position: 50% 75%;
	background-size: cover;
}

.ingenia-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -12px rgba(15, 26, 51, 0.18);
}

/* ============================================================
 * SERVICIOS — Patrón "lista expandible" (enterprise B2B)
 * Layout: imagen + caption a la izquierda, lista de servicios a la derecha.
 * El primer item está expandido con descripción + sub-items; los demás son
 * cabezales clickables (visualmente — al ser HTML estático no hace expand,
 * pero el patrón comunica "explorá más" mediante hover).
 * ============================================================ */

/* Eyebrow con dash a la izquierda, estilo "— OUR SERVICES" */
.ingenia-eyebrow-accent {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600;
}

/* Imagen feature con caption sobrepuesta */
.ingenia-services-feature {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: #0A1226;
	box-shadow: 0 24px 48px -16px rgba(15, 26, 51, 0.18);
}

.ingenia-services-feature .wp-block-image,
.ingenia-services-feature > figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.ingenia-services-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	display: block;
}

.ingenia-services-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		transparent 35%,
		rgba(8, 14, 32, 0.55) 70%,
		rgba(8, 14, 32, 0.92) 100%);
	pointer-events: none;
}

.ingenia-services-feature-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 2rem;
	color: #ffffff;
}

.ingenia-services-feature-caption h3 {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}

.ingenia-services-feature-caption p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}

/* Accordion de servicios con <details>/<summary> nativo */
.ingenia-services-list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ingenia-service-item {
	position: relative;
	border-left: 2px solid var(--wp--preset--color--neutral-200);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	transition: border-color 0.22s ease, padding-left 0.22s ease, background-color 0.22s ease;
}

.ingenia-service-item:last-of-type {
	border-bottom: none;
}

/* Cabezal clickeable — el summary YA contiene el texto (sin <h4> interno) */
.ingenia-service-item summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1.25rem 1.5rem;
	transition: padding-left 0.22s ease, font-size 0.22s ease, color 0.22s ease;
	-webkit-tap-highlight-color: transparent;

	/* Tipografía heredada del antiguo <h4> interno */
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.ingenia-service-item summary::-webkit-details-marker { display: none; }
.ingenia-service-item summary::marker { content: ""; }

/* Toggle "+" / "−" — generado como pseudo-elemento del summary */
.ingenia-service-item summary::after {
	content: "+";
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

/* Estado: abierto */
.ingenia-service-item[open] {
	border-left-color: var(--wp--preset--color--primary);
	border-left-width: 3px;
	background: linear-gradient(90deg, rgba(26, 45, 92, 0.025) 0%, transparent 60%);
}

.ingenia-service-item[open] summary {
	padding-left: calc(1.5rem - 1px);
	font-size: 1.3rem;
}

.ingenia-service-item[open] summary::after {
	content: "−";
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

/* Hover en cerrado */
.ingenia-service-item:not([open]):hover {
	background: rgba(244, 246, 250, 0.6);
}

.ingenia-service-item:not([open]):hover summary {
	color: var(--wp--preset--color--primary-light);
}

.ingenia-service-item:not([open]):hover summary::after {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Body del accordion — los hijos directos del details (excepto summary)
   reciben padding y la animación al abrir, ya que ahora wp:details no
   genera un wrapper .ingenia-service-body. */
.ingenia-service-item[open] > *:not(summary) {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	animation: ingeniaAccordion 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ingenia-service-item[open] > *:not(summary):last-child {
	padding-bottom: 1.5rem;
}

@keyframes ingeniaAccordion {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ingenia-service-desc {
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--wp--preset--color--neutral-700);
	margin: 0 0 1rem;
}

.ingenia-service-sub {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.ingenia-service-sub li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700);
}

.ingenia-service-sub li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
/* Focus ring (accesibilidad) */
.ingenia-service-item summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
	border-radius: 8px;
}

@media (max-width: 900px) {
	.ingenia-services-feature { aspect-ratio: 16 / 11; margin-bottom: 2rem; }
	.ingenia-services-feature-caption { padding: 1.5rem; }
	.ingenia-service-item summary { padding: 1rem 1.25rem; font-size: 1.05rem; }
	.ingenia-service-item[open] summary { font-size: 1.15rem; }
	.ingenia-service-item[open] > *:not(summary) { padding-left: 1.25rem; padding-right: 1.25rem; }
	.ingenia-service-item[open] > *:not(summary):last-child { padding-bottom: 1.25rem; }
}

/* ============================================================
 * SOBRE INGENIA + MISIÓN/VISIÓN — Sección combinada
 * Imagen feature con badge + caption a la izquierda,
 * grid 2×2 de pilares (2 cards azules en diagonal) a la derecha.
 * ============================================================ */

/* Imagen feature con badge "Misión & Visión" + caption inferior */
.ingenia-about-feature {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
	height: 100%;
	min-height: 360px;
	background: #0A1226;
	box-shadow: 0 24px 48px -16px rgba(15, 26, 51, 0.18);
}

.ingenia-about-feature .wp-block-image,
.ingenia-about-feature > figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.ingenia-about-feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ingenia-about-feature:hover img {
	transform: scale(1.03);
}

.ingenia-about-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(8, 14, 32, 0.20) 0%,
		transparent 30%,
		rgba(8, 14, 32, 0.55) 70%,
		rgba(8, 14, 32, 0.92) 100%);
	pointer-events: none;
}

/* Badge "Misión & Visión" en esquina superior izquierda */
.ingenia-about-badge {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #ffffff;
}

.ingenia-about-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Caption sobrepuesta abajo */
.ingenia-about-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 2rem;
	color: #ffffff;
}

.ingenia-about-caption h3 {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.45rem;
}

.ingenia-about-caption p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

/* Grid 2×2 de pilares (Misión, Visión, Confiabilidad, Mejora continua) */
.ingenia-pillars-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	height: 100%;
}

.ingenia-pillar-card {
	position: relative;
	padding: 1.75rem;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--neutral-100);
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				border-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
	overflow: hidden;
}

.ingenia-pillar-card.is-featured {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-light) 110%);
	border-color: transparent;
	color: #ffffff;
}

/* Glow decorativo sutil en cards azules */
.ingenia-pillar-card.is-featured::before {
	content: "";
	position: absolute;
	inset: -50% -50% auto auto;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(200, 162, 78, 0.20) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.ingenia-pillar-card > * {
	position: relative;
	z-index: 1;
}

/* Hover */
.ingenia-pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -16px rgba(15, 26, 51, 0.18);
}

.ingenia-pillar-card.is-light:hover {
	border-color: var(--wp--preset--color--primary-light);
}

.ingenia-pillar-card.is-featured:hover {
	box-shadow: 0 22px 48px -14px rgba(10, 18, 38, 0.40);
}

/* Iconito en círculo */
.ingenia-pillar-icon {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 1rem;
}

.ingenia-pillar-icon.is-light {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--accent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Tipografía dentro de los pilares */
.ingenia-pillar-card h4 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--primary);
}

.ingenia-pillar-card.is-featured h4 {
	color: #ffffff;
}

.ingenia-pillar-card p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700);
	margin: 0;
}

.ingenia-pillar-card.is-featured p {
	color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 1100px) {
	.ingenia-about-feature { min-height: 460px; }
}

@media (max-width: 800px) {
	.ingenia-about-feature {
		min-height: 360px;
		margin-bottom: 1.25rem;
	}
	.ingenia-pillars-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.ingenia-about-feature { min-height: 280px; }
	.ingenia-about-caption { padding: 1.5rem; }
	.ingenia-about-badge { top: 1rem; left: 1rem; font-size: 0.72rem; }
	.ingenia-pillar-card { padding: 1.5rem; }
}

/* ============================================================
 * VALUES — Card grid (4 cols → 2 → 1) con icono, título y tags.
 * Reemplaza la antigua "values strip" densa horizontal. Cada valor
 * tiene su propio espacio visual y un icono que invierte color en hover.
 * ============================================================ */
.ingenia-values {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.ingenia-values-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	margin: 0.5rem 0 2.5rem !important;
	max-width: 640px;
}

.ingenia-values-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

/* Force every direct child of the grid to behave as a stretched flex column
   regardless of WP's is-layout-flow / is-layout-constrained wrappers.
   Also clear the margin-block-start that WP's `is-layout-flow > * + *` rule
   injects on every non-first child — that margin is what pushed cards 2-4
   down inside their grid cell, breaking the top alignment. */
.ingenia-values-grid > * {
	align-self: stretch;
	height: 100%;
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.ingenia-value-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.75rem 1.5rem !important;
	border-radius: 14px;
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-100);
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	height: 100%;
}

/* Push tags to the bottom of the card so all 4 cards align baselines even
   when one tag wraps to two lines. The icon and title stay anchored at the
   top, the gap between title and tags absorbs the extra height. */
.ingenia-value-card .ingenia-value-tags {
	margin-top: auto !important;
}

/* Subtle accent corner — lifts each card visually without being noisy */
.ingenia-value-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	background: radial-gradient(circle at top right, rgba(207, 165, 78, 0.10), transparent 70%);
	pointer-events: none;
	transition: background 0.25s ease;
}

.ingenia-value-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary-light);
	background: var(--wp--preset--color--base);
	box-shadow: 0 14px 32px -18px rgba(15, 26, 51, 0.18);
}

.ingenia-value-card:hover::before {
	background: radial-gradient(circle at top right, rgba(207, 165, 78, 0.22), transparent 70%);
}

/* Icon chip — square rounded, accent color on default, inverts on hover */
.ingenia-value-icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ingenia-value-card:hover .ingenia-value-icon {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	transform: rotate(-4deg);
}

.ingenia-value-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
	margin: 0 !important;
}

.ingenia-value-tags {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700);
	margin: 0 !important;
	letter-spacing: 0.01em;
}

@media (max-width: 1100px) {
	.ingenia-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ingenia-values-grid { grid-template-columns: 1fr; gap: 0.85rem; }
	.ingenia-value-card { padding: 1.35rem 1.25rem !important; }
	.ingenia-value-icon { width: 42px; height: 42px; border-radius: 10px; }
}

/* ============================================================
 * NEWS — Portfolio cards (3 horizontales, imagen + título overlay)
 * ============================================================ */
.ingenia-news-portfolio .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.ingenia-news-portfolio .wp-block-post-template > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ingenia-portfolio-card {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
	background: #0A1226;
	aspect-ratio: 4 / 3;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
				box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	cursor: pointer;
}

.ingenia-portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px -16px rgba(15, 26, 51, 0.30);
}

/* Imagen ocupa toda la card como background */
.ingenia-portfolio-card .wp-block-post-featured-image,
.ingenia-portfolio-card-image {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden;
}

.ingenia-portfolio-card .wp-block-post-featured-image a,
.ingenia-portfolio-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.ingenia-portfolio-card .wp-block-post-featured-image img {
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ingenia-portfolio-card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* Overlay con gradiente de abajo hacia arriba (texto siempre legible) */
.ingenia-portfolio-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	background: linear-gradient(180deg,
		transparent 25%,
		rgba(8, 14, 32, 0.55) 65%,
		rgba(8, 14, 32, 0.92) 100%);
	pointer-events: none;
	transition: background 0.3s ease;
}

.ingenia-portfolio-card:hover .ingenia-portfolio-card-overlay {
	background: linear-gradient(180deg,
		rgba(8, 14, 32, 0.10) 15%,
		rgba(8, 14, 32, 0.65) 60%,
		rgba(8, 14, 32, 0.95) 100%);
}

/* Categoría en oro arriba del título */
.ingenia-portfolio-card-cat,
.ingenia-portfolio-card-overlay .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--accent) !important;
	margin: 0 !important;
	pointer-events: auto;
}

.ingenia-portfolio-card-overlay .wp-block-post-terms a {
	color: var(--wp--preset--color--accent) !important;
	text-decoration: none;
}

/* Título sobre la imagen */
.ingenia-portfolio-card-title,
.ingenia-portfolio-card-overlay .wp-block-post-title {
	margin: 0.5rem 0 0 !important;
	pointer-events: auto;
}

.ingenia-portfolio-card-overlay .wp-block-post-title {
	color: #ffffff !important;
}

.ingenia-portfolio-card-overlay .wp-block-post-title a {
	color: #ffffff !important;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	display: block;
}

.ingenia-portfolio-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent) !important;
}

/* Footer del news section: link + flechas decorativas */
.ingenia-portfolio-link {
	margin: 0 !important;
}

.ingenia-portfolio-link a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: gap 0.2s ease, color 0.2s ease;
}

.ingenia-portfolio-link a:hover {
	gap: 0.75rem;
	color: var(--wp--preset--color--primary-light);
}

.ingenia-portfolio-arrows {
	display: flex;
	gap: 0.6rem;
}

.ingenia-portfolio-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--neutral-200);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ingenia-portfolio-arrow:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

@media (max-width: 1100px) {
	.ingenia-news-portfolio .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 700px) {
	.ingenia-news-portfolio .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.ingenia-portfolio-arrows { display: none; }
}
/* Secondary cards (apiladas, layout horizontal) */
.ingenia-news-secondary .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 800px) {
	.ingenia-news-side-card { flex-direction: column !important; }
	.ingenia-news-side-card .wp-block-post-featured-image { flex: 0 0 auto; aspect-ratio: 16/9; }
}

/* ============================================================
 * PROCESS — Dotted line conector sutil entre pasos (desktop)
 * ============================================================ */
#proceso .wp-block-columns:last-of-type {
	position: relative;
}

#proceso .wp-block-columns:last-of-type::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: 6%;
	right: 6%;
	border-top: 2px dotted var(--wp--preset--color--neutral-200);
	z-index: 0;
	pointer-events: none;
}

#proceso .wp-block-columns:last-of-type > .wp-block-column {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
}

@media (max-width: 900px) {
	#proceso .wp-block-columns:last-of-type::before { display: none; }
	#proceso .wp-block-columns:last-of-type > .wp-block-column { background: transparent; }
}
.ingenia-logo-strip {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 2rem !important;
	align-items: center !important;
	justify-items: start !important;
	width: 100%;
}

/* Logos a color natural (sin grayscale agresivo) */
.ingenia-brand-logo {
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	width: 100%;
	max-width: 240px;
}

.ingenia-brand-logo img {
	max-height: 64px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: 0.85;
	mix-blend-mode: multiply;
	transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
				transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ingenia-brand-logo:hover img {
	opacity: 1;
	transform: translateY(-2px);
}

/* SVGs sin natural size: forzar dimensiones para que el browser los renderice */
.ingenia-brand-logo.is-svg img,
.ingenia-brand-logo img[src$=".svg"] {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px;
}

.ingenia-brand-logo:hover img {
	filter: grayscale(0%) brightness(1) contrast(1);
	opacity: 1;
	transform: translateY(-2px);
}
@media (max-width: 1100px) {
	.ingenia-logo-strip {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 2.5rem 2rem !important;
	}
}

@media (max-width: 700px) {
	.ingenia-logo-strip {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 760px) {
	.ingenia-logo-strip { gap: 2rem 1.5rem !important; }
	.ingenia-brand-logo { height: 52px; max-width: 180px; }
	.ingenia-brand-logo img { max-height: 52px; }
	.ingenia-logo-shelf { padding: 1.75rem 1.25rem !important; }
}

@media (max-width: 480px) {
	.ingenia-logo-strip {
		grid-template-columns: 1fr !important;
		gap: 1.25rem !important;
		justify-items: center !important;
	}
	.ingenia-brand-logo { height: 44px; }
	.ingenia-brand-logo img { max-height: 44px; }
}

/* ============================================================
 * BENTO GRID DE SERVICIOS (legacy, no se usa actualmente —
 * conservado por si en el futuro querés volver a este patrón)
 * Layout 12-col compacto: featured wide (8×1), medianas (4×1), banners (12).
 * Info-density alta: padding ajustado, iconos chicos, tipografía compacta.
 * Inspirado en Atlas Copco, Siemens, Emerson, Honeywell.
 * ============================================================ */
.ingenia-bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.25rem;
	align-items: stretch;
}
/* Override del layout constrained de WP core que centra hijos pequeños.
 * Sin esto, dentro de cada bento card el icono, número y chips quedan al
 * centro horizontalmente. Forzamos alineación natural (left, full-width). */
.ingenia-bento-card.is-layout-constrained > *,
.ingenia-bento-card.wp-block-group-is-layout-constrained > *,
.ingenia-bento-card .ingenia-bento-content.is-layout-constrained > *,
.ingenia-bento-card .ingenia-bento-content.wp-block-group-is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Tarjeta destacada: 8 cols × 1 row (wide, no tall) */
.ingenia-bento-card.is-featured {
	grid-column: span 8;
	background: linear-gradient(135deg, #0A1226 0%, #1A2D5C 60%, #2D4F8F 130%);
	border-color: transparent;
}

/* Variante featured con foto: IMMERSIVE OVERLAY (foto full-bleed + gradient lateral)
 * Patrón enterprise tipo Stripe/Linear/Vercel: la foto ocupa toda la card,
 * un degradado direccional ancla el texto a la izquierda con contraste WCAG AA,
 * la imagen respira en el lado derecho y se complementa con una stat badge glass.
 */
.ingenia-bento-card.is-featured.has-media {
	display: block;
	padding: 0 !important;
	overflow: hidden;
	min-height: 340px;
}
/* Gradient direccional: opaco a la izquierda (donde vive el texto),
 * transparente a la derecha (la imagen se muestra clara). */
.ingenia-bento-media-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			95deg,
			rgba(8, 14, 32, 0.92) 0%,
			rgba(10, 18, 38, 0.78) 30%,
			rgba(14, 27, 61, 0.30) 55%,
			rgba(14, 27, 61, 0.00) 80%
		),
		linear-gradient(180deg, transparent 70%, rgba(8, 14, 32, 0.30) 100%);
}
@media (max-width: 800px) {
	.ingenia-bento-card.is-mid-banner {
		grid-template-columns: 1fr;
	}
	.ingenia-bento-card.is-mid-banner .ingenia-bento-media img {
		min-height: 220px;
		aspect-ratio: 16 / 9;
	}
}
/* Tablet — medianas a 6 cols, featured full-width */
@media (max-width: 1100px) {
	.ingenia-bento-card { grid-column: span 6; }
	.ingenia-bento-card.is-featured { grid-column: span 12; }
	.ingenia-bento-card.is-featured.has-media {
		min-height: 360px;
		max-height: 420px;
	}
	.ingenia-bento-card.is-featured.has-media .ingenia-bento-content {
		max-width: 65%;
		padding: 2rem !important;
	}
}

/* Mobile — todo apilado */
@media (max-width: 760px) {
	.ingenia-bento-grid { gap: 1rem; }
	.ingenia-bento-card,
	.ingenia-bento-card.is-featured,
	.ingenia-bento-card.is-dark,
	.ingenia-bento-card.is-mid-banner,
	.ingenia-bento-card.is-banner {
		grid-column: span 12 !important;
	}
	.ingenia-bento-card.is-featured.has-media {
		min-height: 480px;
		max-height: none;
	}
	.ingenia-bento-card.is-featured.has-media .ingenia-bento-content {
		max-width: 100%;
		padding: 1.75rem !important;
		justify-content: flex-end;
	}
	.ingenia-bento-media-overlay {
		background:
			linear-gradient(
				180deg,
				rgba(8, 14, 32, 0.30) 0%,
				rgba(8, 14, 32, 0.78) 55%,
				rgba(8, 14, 32, 0.95) 100%
			);
	}
	.ingenia-stat-badge {
		position: relative;
		bottom: auto;
		right: auto;
		left: auto;
		margin-top: 1.25rem;
		max-width: 100%;
		flex-direction: row;
		align-items: baseline;
		gap: 0.75rem;
	}
	.ingenia-stat-badge-num { font-size: 1.75rem; }
	.ingenia-stat-badge-label { margin-top: 0; }
}

/* Mobile xs — chips más chicos */
@media (max-width: 480px) {
	.ingenia-bento-card { padding: 1.5rem !important; }
	.ingenia-chip { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
	.ingenia-bento-icon { width: 40px; height: 40px; }
}

/* Mobile */
@media (max-width: 640px) {
	.ingenia-bento-grid { gap: 1rem; }
	.ingenia-bento-card,
	.ingenia-bento-card.is-featured,
	.ingenia-bento-card.is-dark,
	.ingenia-bento-card.is-banner {
		grid-column: span 12 !important;
	}
	.ingenia-bento-card.is-featured,
	.ingenia-bento-card.is-banner {
		padding: 2rem !important;
	}
}
/* ---------- Tag inline al lado del icono (compacta, no decorativa grande) ---------- */
.ingenia-bento-tag {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	line-height: 1;
}
@media (max-width: 900px) {
	.ingenia-bento-brands {
		gap: 1rem !important;
		padding: 1rem;
	}
}

/* ---------- Eyebrow / kicker ---------- */
.ingenia-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* ---------- Number badge para pasos ---------- */
.ingenia-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	opacity: 0.18;
	letter-spacing: -0.04em;
}

/* ---------- Iconos de servicios ---------- */
.ingenia-icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--wp--preset--color--neutral-50);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
}

/* ---------- Imagen con esquinas grandes ---------- */
.ingenia-rounded img {
	border-radius: 12px;
}

/* ---------- Línea decorativa bajo títulos ---------- */
.ingenia-title-underline::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--primary-light) 100%);
	margin-top: 1rem;
	border-radius: 2px;
}

.has-text-align-center.ingenia-title-underline::after {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
 * STANDARIZACIÓN DE SECCIONES
 * Ritmo vertical, tipografía y border-radius uniformes.
 * ============================================================ */

/* Standardize H2 size in all section headers (excepto el hero h1) */
.wp-site-blocks main .wp-block-group[id] > .wp-block-columns > .wp-block-column h2.wp-block-heading,
.wp-site-blocks main .wp-block-group[id] > .wp-block-group h2.wp-block-heading {
	font-size: clamp(1.85rem, 3.4vw, 2.85rem) !important;
	line-height: 1.1 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

/* Eyebrow con dash azul consistente en todas las secciones */
.ingenia-eyebrow.ingenia-eyebrow-accent {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600;
}

/* Border-radius escalado y consistente */
.ingenia-card,
.ingenia-news-card,
.ingenia-bento-card { border-radius: 10px; }
/* Microinteracciones unificadas (mismo timing en todo) */
.ingenia-card,
.ingenia-news-card,
.ingenia-bento-card,
.ingenia-stat-badge,
.ingenia-brand,
.ingenia-bento-icon,
.ingenia-chip,
.wp-block-button__link {
	transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				border-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				background-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
				color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
 * PROCESS — Step numbers con gradient (sin línea conectora)
 * La numeración 01-04 ya comunica secuencia por sí sola.
 * Cada step gana un thin accent line top como hover state.
 * ============================================================ */
.ingenia-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-light) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	position: relative;
}

/* Indicador horizontal de secuencia: thin line bajo el step number */
.ingenia-step-number::after {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	margin-top: 0.5rem;
	border-radius: 2px;
}

/* Mini-ícono arriba del número en cada paso */
.ingenia-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wp-block-column:hover .ingenia-step-icon {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-light) 100%);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.ingenia-step-number { font-size: 2.5rem; }
}

/* ============================================================
 * DIFFERENTIATORS — Refinamiento del icono y hover
 * ============================================================ */
#diferencia .ingenia-icon {
	width: 64px;
	height: 64px;
	font-size: 1.6rem;
	background: linear-gradient(135deg, var(--wp--preset--color--neutral-50) 0%, var(--wp--preset--color--base) 100%);
	border: 1px solid var(--wp--preset--color--neutral-100);
	box-shadow: 0 8px 20px -10px rgba(15, 26, 51, 0.12);
}

#diferencia .ingenia-card {
	border: 1px solid var(--wp--preset--color--neutral-100);
	height: 100%;
	box-sizing: border-box;
}

/* Asegurar que la columna pase su altura completa al card (cuando una card
   tiene más texto, las demás se igualan en lugar de quedar cortas) */
#diferencia .wp-block-column {
	display: flex;
}

#diferencia .wp-block-column > .ingenia-card {
	flex: 1;
}

#diferencia .ingenia-card:hover {
	border-color: var(--wp--preset--color--primary-light);
}

#diferencia .ingenia-card:hover .ingenia-icon {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-light) 100%);
	color: var(--wp--preset--color--base);
	border-color: transparent;
	box-shadow: 0 12px 28px -10px rgba(26, 45, 92, 0.45);
}

/* ============================================================
 * VALUES — Mejor entrada visual con accent dot
 * ============================================================ */
#valores .wp-block-column > .wp-block-group {
	position: relative;
	overflow: hidden;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

#valores .wp-block-column > .wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--primary-light) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#valores .wp-block-column > .wp-block-group:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--primary-light) !important;
	box-shadow: 0 18px 40px -16px rgba(15, 26, 51, 0.16);
}

#valores .wp-block-column > .wp-block-group:hover::before {
	transform: scaleX(1);
}

/* ============================================================
 * NEWS CARDS — Hover con más jerarquía
 * ============================================================ */
.ingenia-news-card {
	border: 1px solid var(--wp--preset--color--neutral-100) !important;
}

.ingenia-news-card:hover {
	border-color: var(--wp--preset--color--primary-light) !important;
	box-shadow: 0 24px 48px -16px rgba(15, 26, 51, 0.14);
	transform: translateY(-3px);
}

.ingenia-news-card .wp-block-post-featured-image {
	overflow: hidden;
}

.ingenia-news-card .wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ingenia-news-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* ============================================================
 * SECTION BOUNDARIES — Hairline divider sutil entre secciones
 * del mismo color (white→white, light→light)
 * ============================================================ */
.wp-block-group.alignfull.has-base-background-color + .wp-block-group.alignfull.has-base-background-color {
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.wp-block-group.alignfull.has-neutral-50-background-color + .wp-block-group.alignfull.has-neutral-50-background-color {
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}

/* ============================================================
 * ACCENT ORO — Subir presencia sutil del color de marca
 * ============================================================ */
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Selection (cuando seleccionás texto) */
::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

/* ============================================================
 * MOBILE — Padding uniforme en todas las secciones
 * ============================================================ */
@media (max-width: 760px) {
	#servicios,
	#nosotros,
	#diferencia,
	#proceso,
	#mision-vision,
	#valores,
	#maquinaria,
	#marcas,
	#noticias,
	#contacto {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	.ingenia-title-underline::after { width: 48px; height: 2px; }
}

/* ---------- Hero ----------
 *
 * Estructura: el hero usa la MISMA forma que las demás secciones
 *   .ingenia-hero (wp:group align:full + layout:constrained:1600px)
 *     ↳ .ingenia-hero-content (wp:group layout:default — wrapper 1600px)
 *         contenido (eyebrow, h1, lead, buttons, stats) anclado a la izq
 *
 * Por qué el wrapper interno: el layout `constrained` del padre aplica a
 * sus hijos `max-width: 1600px; margin-left: auto; margin-right: auto`, lo
 * que los CENTRA cuando el viewport supera los 1600px. Si forzamos
 * `margin-left: 0` en el H1 directamente, lo pegamos al padding del padre
 * (al borde de la ventana), saliéndose del contenedor 1600px centrado.
 *
 * El wrapper `.ingenia-hero-content` con `layout: default` recibe el
 * centrado del 1600px del padre — pero ADENTRO no centra a sus hijos,
 * así que el H1 (con max-width 1000px) y el lead (max-width 720px) se
 * anclan naturalmente a la izquierda del contenedor 1600px, alineados
 * con el eyebrow, los botones y las stats.
 *
 * Estilos visuales del hero (fallback CSS). La meta es moverlos al atributo
 * nativo del bloque Group para que sean editables desde el inspector — pero
 * mientras tanto, el bg image y min-height viven aquí para que el visual no
 * dependa de un atributo de bloque que aún no está seteado.
 */
.ingenia-hero {
	position: relative;
	overflow: hidden;
	min-height: 720px;
	background-image: url("../../../../uploads/2026/04/hero.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
}

/* Overlay lateral oscuro sobre la imagen del hero */
.ingenia-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(8, 14, 32, 0.94) 0%, rgba(8, 14, 32, 0.55) 50%, rgba(8, 14, 32, 0.30) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Acota el ancho del titular y del lead para legibilidad; al estar dentro
 * de `.ingenia-hero-content` (flow), quedan automáticamente anclados a la
 * izquierda del contenedor 1600px — sin necesidad de margin/padding hacks. */
.ingenia-hero-content > .ingenia-hero-title {
	max-width: 1000px;
}

.ingenia-hero-content > .ingenia-hero-lead {
	max-width: 720px;
}

/* "sin sorpresas." en el H1 va en peso 300 italic. El <em> ya es italic por
 * default; el peso 300 está aquí (no inline en el HTML) porque rich-text de
 * Gutenberg no preserva style="..." en <em> y eso invalida el bloque. */
.ingenia-hero-title em {
	font-weight: 300;
}

/* Vignette inferior sutil para anclar las stats al fondo */
.ingenia-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 35%;
	background: linear-gradient(180deg, transparent 0%, rgba(8, 14, 32, 0.35) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Hijos directos del hero quedan por encima de la vignette */
.ingenia-hero > .wp-block-group,
.ingenia-hero > * {
	position: relative;
	z-index: 2;
}

/* Text-shadow sutil para legibilidad sobre cualquier zona de la imagen */
.ingenia-hero h1,
.ingenia-hero h2,
.ingenia-hero h3,
.ingenia-hero p {
	text-shadow: 0 2px 16px rgba(8, 14, 32, 0.55);
}

/* Refuerzo de contraste para texto secundario sobre dark */
.ingenia-hero p.has-neutral-200-color,
.ingenia-hero .has-neutral-200-color {
	color: rgba(255, 255, 255, 0.92) !important;
}

/* Eyebrow legible pero discreto */
.ingenia-hero .ingenia-eyebrow {
	color: rgba(255, 255, 255, 0.78) !important;
	font-weight: 600;
}

/* Cifras de stats con un poco más de "peso visual" sobre la imagen */
.ingenia-hero h3 {
	text-shadow: 0 2px 24px rgba(8, 14, 32, 0.7), 0 0 1px rgba(8, 14, 32, 0.5);
}

/* Stats — fila flex anclada a la izquierda, cada item left-aligned. Sin
 * grupos `layout:constrained` internos que recentraban el label. */
.ingenia-hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1.5rem 3rem;
	margin-top: 4rem;
	text-align: left;
}

.ingenia-hero-stat {
	text-align: left;
}

.ingenia-hero-stat-number {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: #ffffff;
	text-shadow: 0 2px 24px rgba(8, 14, 32, 0.7), 0 0 1px rgba(8, 14, 32, 0.5);
}

.ingenia-hero-stat-label {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 16px rgba(8, 14, 32, 0.55);
}
/* ---------- News card ---------- */
.ingenia-news-card .wp-block-post-featured-image img {
	border-radius: 10px 10px 0 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.ingenia-news-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	transition: color 0.15s ease;
}

.ingenia-news-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
}

/* ---------- Contact Form 7 — alineado al tema, spacing compacto ---------- */
.wpcf7 form,
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
}

/* Cada <p> wrapper de CF7 actúa como row sin margin */
.wpcf7 form > p,
.wpcf7-form > p {
	margin: 0 !important;
}
/* Label ajustado al input */
.wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	line-height: 1.3;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 1px 2px rgba(15, 26, 51, 0.03);
}

/* También al wrapper que CF7 inserta entre el label y el input */
.wpcf7 .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-form-control-wrap input,
.wpcf7 .wpcf7-form-control-wrap select,
.wpcf7 .wpcf7-form-control-wrap textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--secondary);
	opacity: 0.7;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(26, 45, 92, 0.10);
}

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

/* Acceptance (checkbox de términos) más compacto */
.wpcf7 .wpcf7-acceptance {
	display: block;
}

.wpcf7 .wpcf7-list-item {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--neutral-700);
	line-height: 1.5;
}

.wpcf7 .wpcf7-list-item-label {
	margin-left: 0.5rem;
}

/* Submit button */
.wpcf7 .wpcf7-submit {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	margin-top: 0.5rem;
}

.wpcf7 .wpcf7-submit:hover {
	background: var(--wp--preset--color--primary-light);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(26, 45, 92, 0.4);
}

@media (max-width: 600px) {
	.wpcf7 .ingenia-form-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Responsive: ajustes finos ---------- */
@media (max-width: 600px) {
	.ingenia-step-number {
		font-size: 2.5rem;
	}

	.wp-site-blocks > header .wp-block-site-logo img,
	.ingenia-logo img {
		max-height: 56px;
	}

	.ingenia-logo-footer img {
		width: 120px !important;
	}
}

/* ---------- Print friendly ---------- */
@media print {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > footer.wp-block-template-part {
		position: static;
	}
}

/* ---------- Accesibilidad: foco visible ---------- */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Animación sutil al cargar ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ingenia-fade-in {
		animation: ingeniaFadeIn 0.7s ease both;
	}
}

@keyframes ingeniaFadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * TRUST BAR — banda fina de credenciales bajo el hero
 * ============================================================ */
.ingenia-trust-bar .ingenia-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}

.ingenia-trust-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	font-size: 0.92rem;
	color: var(--wp--preset--color--neutral-700);
	line-height: 1.4;
}

.ingenia-trust-item strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ingenia-trust-item em {
	font-style: italic;
	color: var(--wp--preset--color--secondary);
	font-size: 0.82rem;
}

@media (max-width: 760px) {
	.ingenia-trust-bar .ingenia-trust-list {
		gap: 1rem 1.5rem;
	}
	.ingenia-trust-item {
		flex: 0 0 calc(50% - 1.5rem);
		font-size: 0.85rem;
	}
}

@media (max-width: 480px) {
	.ingenia-trust-item {
		flex: 1 1 100%;
		border-left-width: 2px;
	}
}

/* ============================================================
 * TESTIMONIOS Y CASOS — cards con métrica + cita + cite
 * ============================================================ */
.ingenia-testimonial-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	margin: 0;
	padding: 1.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral-100);
	border-radius: 12px;
	box-sizing: border-box;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ingenia-testimonial-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -16px rgba(15, 26, 51, 0.16);
	border-color: var(--wp--preset--color--primary-light);
}

/* Badge de categoría (`data-category="Obra civil"` etc.) — sólo aparece
 * cuando la card declara el atributo, así las cards sin categoría siguen
 * viéndose como antes. */
.ingenia-testimonial-card[data-category]::before {
	content: attr(data-category);
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	margin-bottom: -0.25rem;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
}

.ingenia-testimonial-metric {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.ingenia-testimonial-metric strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--primary);
}

.ingenia-testimonial-metric span {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--neutral-700);
}

.ingenia-testimonial-quote {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	flex: 1;
}

.ingenia-testimonial-quote p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	font-style: italic;
	color: var(--wp--preset--color--neutral-700);
}

.ingenia-testimonial-quote p::before {
	content: "“";
	display: inline-block;
	margin-right: 0.15em;
	font-family: var(--wp--preset--font-family--display);
	font-style: normal;
	font-size: 1.4em;
	line-height: 0;
	color: var(--wp--preset--color--accent);
	transform: translateY(0.15em);
}

.ingenia-testimonial-cite {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-style: normal;
	padding-top: 1rem;
	border-top: 1px dashed var(--wp--preset--color--neutral-200);
}

.ingenia-testimonial-cite strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.ingenia-testimonial-cite span {
	font-size: 0.82rem;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0.02em;
}

@media (max-width: 900px) {
	.ingenia-testimonial-card { padding: 1.75rem; }
}

/* ============================================================
 * REFACTOR EDITOR-FRIENDLY — soporte para variantes con bloques
 * nativos de Gutenberg. Mantiene paridad visual con los `wp:html`
 * que existieron antes, pero ahora los datos son editables vía
 * wp:heading / wp:paragraph / wp:group desde el editor.
 *
 * Las clases viejas (.ingenia-trust-item strong/span, etc.)
 * SIGUEN funcionando para el HTML que ya está guardado en posts;
 * estas reglas adicionales aplican cuando el cliente reinserta
 * los patterns y se generan los bloques nativos nuevos.
 * ============================================================ */

/* --- Hero stats: el wp:group con .ingenia-hero-stat ahora envuelve
 * h3.ingenia-hero-stat-number + p.ingenia-hero-stat-label. Los
 * estilos de `.ingenia-hero-stat-number` y `.ingenia-hero-stat-label`
 * que ya existen aplican tal cual — solo necesitamos resetear el
 * margin que el block-gap o el reset de WP puedan introducir. */
.ingenia-hero-stat.wp-block-group {
	display: block; /* asegura que sea block-level dentro del flex .ingenia-hero-stats */
}

.ingenia-hero-stat .ingenia-hero-stat-number,
.ingenia-hero-stat .ingenia-hero-stat-label {
	margin-block-start: 0 !important; /* override del block-gap injection de WP */
}

.ingenia-hero-stat .ingenia-hero-stat-label {
	color: rgba(255, 255, 255, 0.92) !important;
}

/* --- Trust bar: cada .ingenia-trust-item ahora es un wp:group
 * con dos paragraphs (.ingenia-trust-item-name + -desc) en lugar
 * de strong+span. Display inline-flex se mantiene del CSS viejo. */
.ingenia-trust-item.wp-block-group {
	margin: 0 !important;
}

.ingenia-trust-item .ingenia-trust-item-name,
.ingenia-trust-item .ingenia-trust-item-desc {
	margin: 0 !important;
	line-height: 1.4;
}

.ingenia-trust-item .ingenia-trust-item-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ingenia-trust-item .ingenia-trust-item-desc {
	font-size: 0.92rem;
	color: var(--wp--preset--color--neutral-700);
}

/* --- Testimonial badge: era pseudo `[data-category]::before`,
 * ahora es un <p class="ingenia-testimonial-badge"> editable. */
.ingenia-testimonial-card .ingenia-testimonial-badge {
	align-self: flex-start;
	margin: 0 0 -0.25rem !important;
	padding: 0.3rem 0.7rem;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 4px;
	width: max-content;
	max-width: 100%;
}

/* --- Testimonial metric: era strong+span, ahora h3+p. */
.ingenia-testimonial-metric .ingenia-testimonial-metric-number {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--primary);
}

.ingenia-testimonial-metric .ingenia-testimonial-metric-label {
	margin: 0 !important;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--neutral-700);
}

/* --- Testimonial cite: era strong+span, ahora p+p con clases. */
.ingenia-testimonial-cite .ingenia-testimonial-cite-name {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.ingenia-testimonial-cite .ingenia-testimonial-cite-role {
	margin: 0 !important;
	font-size: 0.82rem;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0.02em;
}

/* Link "Ver caso →" al detalle del proyecto, abajo de cada card.
 * Sólo aparece cuando la card viene del bloque dinámico
 * `grupo-ingenia/testimonios-proyectos` (no estaba en el pattern estático). */
.ingenia-testimonial-card .ingenia-testimonial-link {
	margin: 0.4rem 0 0 !important;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ingenia-testimonial-card .ingenia-testimonial-link a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 150ms ease, transform 150ms ease;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.ingenia-testimonial-card .ingenia-testimonial-link a:hover,
.ingenia-testimonial-card .ingenia-testimonial-link a:focus-visible {
	border-bottom-color: var(--wp--preset--color--primary);
}

.ingenia-testimonial-card .ingenia-testimonial-link a:hover span,
.ingenia-testimonial-card .ingenia-testimonial-link a:focus-visible span {
	transform: translateX(2px);
	transition: transform 150ms ease;
}

/* ============================================================
 * BRANDS — variante secundaria (logos más chicos para cuando
 * la sección queda como afterthought tras el testimonial)
 * ============================================================ */
.ingenia-logo-strip.is-secondary .ingenia-brand-logo {
	height: 48px;
}

.ingenia-logo-strip.is-secondary .ingenia-brand-logo img {
	max-height: 44px;
	opacity: 0.72;
}

.ingenia-logo-strip.is-secondary .ingenia-brand-logo:hover img {
	opacity: 1;
}

/* Lucianotti trae su propio marco + badge "CHILLERs" dentro del PNG, lo
 * que lo hace lucir más pequeño que el resto. Compensar visualmente. */
.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child {
	height: 68px;
}
.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child img {
	max-height: 64px;
}
@media (max-width: 760px) {
	.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child { height: 60px; }
	.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child img { max-height: 56px; }
}
@media (max-width: 480px) {
	.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child { height: 52px; }
	.ingenia-logo-strip.is-secondary .ingenia-brand-logo:first-child img { max-height: 48px; }
}

/* ============================================================
 * STICKY CTA MOBILE — Pill flotante "Cotizar proyecto"
 * Solo visible ≤600px (cuando el hamburger menu reemplaza la navegación)
 * ============================================================ */
.ingenia-mobile-cta {
	display: none;
}

@media (max-width: 600px) {
	.ingenia-mobile-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: max(1rem, env(safe-area-inset-bottom));
		z-index: 50;
		padding: 0.95rem 1.25rem;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--display);
		font-weight: 600;
		font-size: 0.95rem;
		text-decoration: none;
		border-radius: 999px;
		box-shadow: 0 14px 32px -8px rgba(15, 26, 51, 0.45);
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}

	.ingenia-mobile-cta:hover,
	.ingenia-mobile-cta:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 18px 40px -10px rgba(15, 26, 51, 0.55);
		color: var(--wp--preset--color--base);
	}

	/* Reservar espacio al final del footer para que el sticky CTA no
	   tape el copyright cuando se llega al final de la página */
	.wp-site-blocks > footer.wp-block-template-part,
	footer.wp-block-group {
		padding-bottom: 6rem !important;
	}
}

/* ============================================================
 * FOOTER — Legal links inline (Términos / Privacidad / Cookies)
 * ============================================================ */
.ingenia-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.ingenia-footer-legal li {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ingenia-footer-legal li + li::before {
	content: "·";
	position: absolute;
	left: -0.85rem;
	color: var(--wp--preset--color--neutral-700);
}

.ingenia-footer-legal a {
	color: var(--wp--preset--color--neutral-200);
	text-decoration: none;
	transition: color 0.18s ease;
}

.ingenia-footer-legal a:hover {
	color: var(--wp--preset--color--base);
}

/* ============================================================
 * COOKIE BANNER — minimal native, cumple Ley 8968 CR
 * Aparece solo si el usuario no decidió aún (12 meses de retención).
 * En mobile (≤600px) sube por encima del sticky CTA.
 * ============================================================ */
.ingenia-cookie-banner {
	position: fixed;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
	justify-content: space-between;
	max-width: 720px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-shadow: 0 24px 56px -16px rgba(10, 18, 38, 0.55);
	font-size: 0.92rem;
	line-height: 1.5;
}

.ingenia-cookie-banner[hidden] {
	display: none !important;
}

.ingenia-cookie-text {
	flex: 1 1 320px;
}

.ingenia-cookie-text strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	color: var(--wp--preset--color--base);
}

.ingenia-cookie-text p {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--neutral-200);
	font-size: 0.88rem;
	line-height: 1.55;
}

.ingenia-cookie-text a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ingenia-cookie-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.ingenia-cookie-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ingenia-cookie-btn.is-primary {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
}

.ingenia-cookie-btn.is-primary:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

.ingenia-cookie-btn.is-secondary {
	background: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.3);
}

.ingenia-cookie-btn.is-secondary:hover {
	border-color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.ingenia-cookie-banner {
		left: 0.75rem;
		right: 0.75rem;
		bottom: max(5.25rem, calc(env(safe-area-inset-bottom) + 5rem));
		padding: 1rem 1.1rem;
	}
	.ingenia-cookie-actions {
		width: 100%;
	}
	.ingenia-cookie-btn {
		flex: 1;
	}
	/* Cuando el banner está visible, empujar el sticky CTA arriba para no solapar */
	html.ingenia-has-cookie-banner .ingenia-mobile-cta {
		bottom: max(1rem, env(safe-area-inset-bottom));
	}
}

/* ============================================================
 * PROYECTOS · CPT — single + archive
 *
 * Single (`single-proyecto.html`):
 *   .ingenia-proyecto-hero       — wp:cover con featured image + overlay dark
 *   .ingenia-proyecto-meta       — strip horizontal de cliente/año/ubicación/métrica
 *   .ingenia-proyecto-body       — contenido del post (post-content)
 *   .ingenia-proyecto-galeria    — grid responsive de imágenes
 *   .ingenia-proyecto-video      — wrapper 16:9 para iframe
 *
 * Archive (`archive-proyecto.html`):
 *   .ingenia-proyectos-grid      — wp:post-template como grid
 *   .ingenia-proyecto-card       — card de listado (imagen + meta)
 * ============================================================ */

/* Hero — cinematográfico con gradient asimétrico (más oscuro abajo-izq
 * para legibilidad del título, más transparente arriba-der para mostrar
 * la imagen). Inspirado en case studies de Stripe / Vercel / Linear. */
.ingenia-proyecto-hero,
.ingenia-proyectos-archive-hero {
	margin-top: 0 !important;
}

.ingenia-proyecto-hero {
	position: relative;
	color: #ffffff;
	overflow: hidden;
}

/* Gradient custom encima del dim — sustituye el "muro plano" de
 * background-dim por una transición elegante. Usa pseudo en lugar de
 * pelear con `wp-block-cover__background`. */
.ingenia-proyecto-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(8, 14, 32, 0.15) 0%,
		rgba(8, 14, 32, 0.45) 50%,
		rgba(8, 14, 32, 0.92) 100%);
	pointer-events: none;
	z-index: 1;
}

.ingenia-proyecto-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.ingenia-proyecto-hero .ingenia-proyecto-hero-eyebrow,
.ingenia-proyecto-hero .ingenia-proyecto-hero-eyebrow a {
	color: var(--wp--preset--color--accent) !important;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	font-size: 0.82rem !important;
}

.ingenia-proyecto-hero .ingenia-proyecto-hero-eyebrow a:hover {
	color: #ffffff !important;
	text-decoration: none;
}

.ingenia-proyecto-hero .ingenia-proyecto-title {
	max-width: 1100px;
	text-shadow: 0 2px 24px rgba(8, 14, 32, 0.6);
}

/* Cliente debajo del título — destacado pero subordinado */
.ingenia-proyecto-hero-cliente {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 16px rgba(8, 14, 32, 0.55);
	letter-spacing: 0.005em;
}

.ingenia-proyecto-hero-cliente-label {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	margin-right: 0.35em;
}

.ingenia-proyecto-hero-cliente strong {
	font-weight: 700;
}

/* Breadcrumb sutil arriba del contenido */
.ingenia-proyecto-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0.02em;
}

.ingenia-proyecto-breadcrumb a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ingenia-proyecto-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
}

.ingenia-proyecto-breadcrumb .is-current {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

.ingenia-proyecto-breadcrumb span[aria-hidden] {
	color: var(--wp--preset--color--neutral-200);
}

/* Meta strip — bandeja de datos con la métrica destacada al final
 * (peso visual 2x mayor que el resto, separador vertical antes). */
.ingenia-proyecto-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem 2.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	align-items: center;
}

.ingenia-proyecto-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ingenia-proyecto-meta-item.is-metric {
	grid-column: span 1;
	padding-left: 1.5rem;
	border-left: 1px solid var(--wp--preset--color--neutral-100);
	gap: 0.1rem;
}

.ingenia-proyecto-meta-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.ingenia-proyecto-meta-item strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.005em;
}

.ingenia-proyecto-meta-metric {
	font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1 !important;
	color: var(--wp--preset--color--accent) !important;
}

@media (max-width: 760px) {
	.ingenia-proyecto-meta-item.is-metric {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--neutral-100);
		padding-top: 1rem;
	}
}

/* Layout 2-col del case study: contenido editorial + aside sticky.
 * Inspiración: Stripe customer stories, IDEO, Pentagram. */
.ingenia-proyecto-cols {
	gap: 4rem !important;
}

.ingenia-proyecto-aside {
	position: sticky;
	top: 6rem; /* offset por header sticky */
	height: fit-content;
}

.ingenia-proyecto-aside-card {
	box-shadow: 0 18px 40px -16px rgba(15, 26, 51, 0.18);
}

.ingenia-proyecto-aside a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 500;
}

.ingenia-proyecto-aside a:hover {
	color: var(--wp--preset--color--primary-light);
	text-decoration: underline;
}

/* Servicios involucrados — tags clicables debajo del CTA card */
.ingenia-proyecto-servicios {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.ingenia-proyecto-servicios-label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.85rem;
}

.ingenia-proyecto-servicios-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ingenia-proyecto-servicios-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	background: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-100);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--wp--preset--color--neutral-700) !important;
	text-decoration: none !important;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ingenia-proyecto-servicios-tag:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #ffffff !important;
}

@media (max-width: 900px) {
	.ingenia-proyecto-cols {
		gap: 2.5rem !important;
	}
	.ingenia-proyecto-aside {
		position: static;
		top: auto;
	}
}

/* ============================================================
 * Navegación entre proyectos — cards prev/next al final
 * ============================================================ */
.ingenia-proyecto-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.ingenia-proyecto-nav-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--neutral-100);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	text-decoration: none !important;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	min-height: 110px;
}

.ingenia-proyecto-nav-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: 0 18px 40px -18px rgba(15, 26, 51, 0.18);
}

.ingenia-proyecto-nav-card.is-next {
	flex-direction: row-reverse;
	text-align: right;
}

.ingenia-proyecto-nav-card-image {
	display: block;
	flex-shrink: 0;
	width: 110px;
	height: 90px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--neutral-100);
}

.ingenia-proyecto-nav-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	min-width: 0;
}

.ingenia-proyecto-nav-card-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.ingenia-proyecto-nav-card-cat {
	font-size: 0.78rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ingenia-proyecto-nav-card-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.005em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (max-width: 700px) {
	.ingenia-proyecto-nav {
		grid-template-columns: 1fr;
	}
	.ingenia-proyecto-nav-card.is-next {
		flex-direction: row;
		text-align: left;
	}
}

/* Override del CTA banner SOLO en single de proyecto: el pattern compartido
 * tiene padding-top/bottom 5rem (apropiado en el home), pero acá quedan
 * 80px de "dead space" antes del eyebrow. Lo bajamos a 3rem para juntar
 * el banner con la card de prev/next. No afecta el home ni otras páginas. */
body.single-proyecto .ingenia-on-dark {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

/* Cuerpo del proyecto — el texto ahora vive dentro de la columna del 62%,
 * así que NO necesita max-width: el ancho de la columna ya da una línea
 * legible (~600-900px según viewport). Las galerías/imágenes/videos
 * ocupan todo el ancho de la columna. */
.ingenia-proyecto-body {
	font-size: 1.075rem;
	line-height: 1.75;
	color: var(--wp--preset--color--neutral-700);
}

.ingenia-proyecto-body h2 {
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.ingenia-proyecto-body h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	font-size: 1.35rem;
}

.ingenia-proyecto-body p,
.ingenia-proyecto-body ul,
.ingenia-proyecto-body ol {
	margin-bottom: 1.25rem;
}

/* Lead paragraph — la "tesis" del case study, debe destacar del body */
.ingenia-proyecto-body .ingenia-proyecto-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important;
	font-weight: 500;
	line-height: 1.45 !important;
	letter-spacing: -0.005em;
	margin-bottom: 2.75rem !important;
	padding-bottom: 2rem;
	color: var(--wp--preset--color--primary);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.ingenia-proyecto-body .ingenia-proyecto-lead strong {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Media: galerías/imágenes/videos/embeds llenan el ancho del contenedor */
.ingenia-proyecto-body .wp-block-gallery,
.ingenia-proyecto-body .wp-block-image,
.ingenia-proyecto-body .wp-block-video,
.ingenia-proyecto-body .wp-block-embed {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	max-width: none;
	width: 100%;
}

/* ----------- Galería pulida dentro del cuerpo del proyecto -----------
 * WP block gallery por defecto es flex con widths calculados — quedan
 * filas asimétricas y sin aspect-ratio. Acá lo convertimos en grid
 * uniforme: cada imagen es un cuadro 4:3 con object-fit:cover, gap fino
 * entre tiles, y hover sutil. Respetamos `columns-N` cuando el editor
 * elige número específico de columnas. */
.ingenia-proyecto-body .wp-block-gallery,
.ingenia-proyecto-body .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.75rem;
}

/* Override de las columnas explícitas del bloque cuando el editor las elige */
.ingenia-proyecto-body .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.ingenia-proyecto-body .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.ingenia-proyecto-body .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.ingenia-proyecto-body .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.ingenia-proyecto-body .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.ingenia-proyecto-body .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Cada item de galería = cuadro 4:3 con border-radius pulido */
.ingenia-proyecto-body .wp-block-gallery .wp-block-image,
.ingenia-proyecto-body .wp-block-gallery.has-nested-images > .wp-block-image {
	margin: 0 !important;
	width: 100% !important;
	flex: none !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--neutral-100);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ingenia-proyecto-body .wp-block-gallery .wp-block-image:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -10px rgba(15, 26, 51, 0.22);
}

.ingenia-proyecto-body .wp-block-gallery .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Caption de galería oculto por defecto (estética case-study limpia) —
 * se puede activar quitando este display:none si el cliente lo pide. */
.ingenia-proyecto-body .wp-block-gallery .wp-block-image figcaption {
	display: none;
}

@media (max-width: 700px) {
	.ingenia-proyecto-body .wp-block-gallery,
	.ingenia-proyecto-body .wp-block-gallery.has-nested-images,
	.ingenia-proyecto-body .wp-block-gallery[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem;
	}
}

/* ----------- Imagen única (no galería) ----------- */
.ingenia-proyecto-body > .wp-block-image img,
.ingenia-proyecto-body .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	display: block;
}

/* ----------- Video (subido) y embeds (YouTube/Vimeo) -----------
 * Tratamiento unificado: aspect-ratio 16:9 forzado, fondo dark mientras
 * carga, sombra elevada, hover lift sutil. El wrapper figure/div del
 * bloque mantiene el border-radius incluso cuando el iframe interno
 * tiene su propio fondo. */
.ingenia-proyecto-body .wp-block-video,
.ingenia-proyecto-body .wp-block-embed {
	position: relative;
	margin-top: 2.5rem !important;
	margin-bottom: 2.5rem !important;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-900);
	box-shadow: 0 22px 48px -18px rgba(15, 26, 51, 0.22);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ingenia-proyecto-body .wp-block-video:hover,
.ingenia-proyecto-body .wp-block-embed:hover {
	transform: translateY(-3px);
	box-shadow: 0 32px 64px -20px rgba(15, 26, 51, 0.3);
}

/* Video subido: aspect-ratio 16:9 forzado, video llena el frame */
.ingenia-proyecto-body .wp-block-video {
	aspect-ratio: 16 / 9;
}

.ingenia-proyecto-body .wp-block-video video {
	width: 100% !important;
	height: 100% !important;
	display: block;
	object-fit: cover;
	border-radius: 12px;
	background: #000;
}

/* Embeds (YouTube/Vimeo): el wrapper interno del bloque core mantiene
 * el ratio responsive. Forzamos también 16:9 por si el embed declara otro. */
.ingenia-proyecto-body .wp-block-embed {
	aspect-ratio: 16 / 9;
}

.ingenia-proyecto-body .wp-block-embed__wrapper {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	height: 100%;
}

.ingenia-proyecto-body .wp-block-embed iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: 12px;
	display: block;
}

/* Caption del bloque (cuando el editor agrega "Añadir leyenda") */
.ingenia-proyecto-body .wp-block-video figcaption,
.ingenia-proyecto-body .wp-block-embed figcaption {
	position: relative;
	margin: 1rem 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.88rem;
	font-style: italic;
	line-height: 1.5;
	text-align: left;
	color: var(--wp--preset--color--secondary);
	max-width: 100%;
}

/* Cuando hay 2 videos/embeds adyacentes, reducir el gap entre ellos
 * (de 5rem combinados a ~2rem) para que se sientan agrupados. */
.ingenia-proyecto-body .wp-block-video + .wp-block-video,
.ingenia-proyecto-body .wp-block-embed + .wp-block-embed,
.ingenia-proyecto-body .wp-block-video + .wp-block-embed,
.ingenia-proyecto-body .wp-block-embed + .wp-block-video {
	margin-top: 1rem !important;
}

/* Cuando una galería va seguida de un video (o viceversa), gap consistente */
.ingenia-proyecto-body .wp-block-gallery + .wp-block-video,
.ingenia-proyecto-body .wp-block-gallery + .wp-block-embed,
.ingenia-proyecto-body .wp-block-video + .wp-block-gallery,
.ingenia-proyecto-body .wp-block-embed + .wp-block-gallery {
	margin-top: 1rem !important;
}

/* Heading + media adyacente — funcionan como "section label" del bloque
 * de media. Reducimos el gap heading→media para que se sientan conectados. */
.ingenia-proyecto-body h2 + .wp-block-gallery,
.ingenia-proyecto-body h2 + .wp-block-video,
.ingenia-proyecto-body h2 + .wp-block-embed,
.ingenia-proyecto-body h3 + .wp-block-gallery,
.ingenia-proyecto-body h3 + .wp-block-video,
.ingenia-proyecto-body h3 + .wp-block-embed,
.ingenia-proyecto-body h4 + .wp-block-gallery,
.ingenia-proyecto-body h4 + .wp-block-video,
.ingenia-proyecto-body h4 + .wp-block-embed {
	margin-top: 1.25rem !important;
}

/* Y el heading recibe un acento dorado debajo cuando precede media —
 * lo vuelve más "section label" visual, no solo otro h2 más. */
.ingenia-proyecto-body h2:has(+ .wp-block-gallery),
.ingenia-proyecto-body h2:has(+ .wp-block-video),
.ingenia-proyecto-body h2:has(+ .wp-block-embed),
.ingenia-proyecto-body h3:has(+ .wp-block-gallery),
.ingenia-proyecto-body h3:has(+ .wp-block-video),
.ingenia-proyecto-body h3:has(+ .wp-block-embed) {
	display: inline-block;
	padding-bottom: 0.4rem;
	margin-bottom: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* ----------- Pull quote — comilla decorativa + tipografía editorial -----
 * El testimonio cierra el case study; debe sentirse como un "highlight"
 * con peso editorial. Comilla de apertura grande en accent + texto
 * display large + cite con tratamiento de firma. */
.ingenia-proyecto-body .wp-block-quote {
	position: relative;
	margin-top: 4rem;
	margin-bottom: 2rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	padding: 2.5rem 0 2.5rem 0;
}

.ingenia-proyecto-body .wp-block-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.5rem;
	line-height: 0.7;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.75rem;
}

.ingenia-proyecto-body .wp-block-quote p {
	margin-bottom: 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}

.ingenia-proyecto-body .wp-block-quote cite {
	display: block;
	font-style: normal;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.ingenia-proyecto-body .wp-block-quote cite::before {
	content: "— ";
	color: var(--wp--preset--color--accent);
}

/* ============================================================
 * Archive · grid de cards de proyecto
 * ============================================================ */
.ingenia-proyectos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ingenia-proyectos-grid > li {
	margin: 0;
}

@media (max-width: 1100px) {
	.ingenia-proyectos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.ingenia-proyectos-grid {
		grid-template-columns: 1fr;
	}
}

.ingenia-proyecto-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--neutral-100);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	height: 100%;
	padding: 0 !important; /* override del wp:group default que mete padding */
}

.ingenia-proyecto-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -16px rgba(15, 26, 51, 0.2);
	border-color: var(--wp--preset--color--primary-light);
}

/* Imagen FLUSH con el borde del card — sin padding ni margin alrededor.
 * Forzamos overrides agresivos porque WP core mete márgenes en figures
 * y el wp:post-featured-image hereda spacing del block-gap. */
.ingenia-proyecto-card > .wp-block-post-featured-image,
.ingenia-proyecto-card .ingenia-proyecto-card-image,
.ingenia-proyecto-card figure {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	display: block;
	overflow: hidden;
	border-radius: 0 !important; /* el card ya hace el clip via overflow:hidden + border-radius */
}

.ingenia-proyecto-card .ingenia-proyecto-card-image a {
	display: block;
	width: 100%;
	overflow: hidden;
}

.ingenia-proyecto-card .ingenia-proyecto-card-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ingenia-proyecto-card:hover .ingenia-proyecto-card-image img {
	transform: scale(1.06);
}

/* Card body — el contenedor con el contenido textual */
.ingenia-proyecto-card-body {
	flex: 1; /* expande al alto restante del card para que la card sea uniforme */
	display: flex !important;
	flex-direction: column;
	gap: 0.5rem;
}

/* Badge de categoría — dorado, posición destacada arriba del título */
.ingenia-proyecto-card-cat {
	display: inline-block;
	margin: 0 !important;
	padding: 0.3rem 0.7rem;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 4px;
	align-self: flex-start;
	width: max-content;
	max-width: 100%;
}

.ingenia-proyecto-card-cat a {
	color: inherit;
	text-decoration: none;
}

/* Título del proyecto */
.ingenia-proyecto-card-title {
	margin: 0.25rem 0 0 !important;
}

/* Stretched link — covers the whole card so any click on empty space
   (background, summary text, "Ver caso →" pseudo) activates the post-title's
   permalink. The card body intentionally avoids creating new stacking
   contexts so this absolute pseudo-element measures against
   `.ingenia-proyecto-card` (which is `position: relative`). */
.ingenia-proyecto-card-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Featured image link sits above the stretched-link overlay so it stays a
   focusable, cursor-visible link (same destination). */
.ingenia-proyecto-card .ingenia-proyecto-card-image a {
	position: relative;
	z-index: 2;
}

/* Other body content (terms, date, excerpt) above the overlay too — the
   post-terms link must remain individually clickable. */
.ingenia-proyecto-card-body > *:not(.ingenia-proyecto-card-title) {
	position: relative;
	z-index: 2;
}

.ingenia-proyecto-card-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ingenia-proyecto-card-title a:hover {
	color: var(--wp--preset--color--primary-light);
}

/* Meta line: "Cliente · Año" — jerarquía: cliente fuerte, año subordinado */
.ingenia-proyecto-card-meta {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-700);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Año en color secundario para crear jerarquía dentro del meta-line */
.ingenia-proyecto-card-meta::after {
	content: "";
}

/* Resumen — line-clamp a 3 líneas para uniformidad visual del grid */
.ingenia-proyecto-card-resumen {
	margin: 0.25rem 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--neutral-700);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* "Ver caso →" — afford ance al final de cada card.
 * No es un link separado: es CSS-only, parte del card que es full-clickable.
 * Visual: link estilo button-text con flecha, hover desliza la flecha. */
.ingenia-proyecto-card-body::after {
	content: "Ver caso →";
	display: inline-block;
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.01em;
	transition: color 0.2s ease, letter-spacing 0.2s ease;
	align-self: flex-start;
	width: 100%;
}

.ingenia-proyecto-card:hover .ingenia-proyecto-card-body::after {
	color: var(--wp--preset--color--primary-light);
	letter-spacing: 0.04em; /* la flecha "se separa" en hover */
}

/* Override del pseudo-text para news cards (mismo styling, distinto label) */
.ingenia-noticia-card .ingenia-proyecto-card-body::after {
	content: "Leer noticia →";
}

/* ============================================================
 * HONEYPOT CF7 — campo oculto anti-spam, invisible para humanos
 * pero presente para bots automatizados.
 * ============================================================ */
.ingenia-hp-field {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}