/**
Theme Name: OM Retail
Author: Estudio Dos Manos
Author URI: https://nachomonge.com
Description: Child theme de Astra para OM Retail.
Version: 1.0.23
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: om-retail
Template: astra
*/

/* Prevenir overflow horizontal global SIN romper position:sticky en descendientes.
   `overflow-x: clip` corta el desbordamiento sin establecer un contexto de scroll
   (cosa que `overflow-x: hidden` sí hace, lo que rompe sticky en cualquier hijo). */
html, body { overflow-x: clip; }

/* =========================================================
   1. @font-face — Franie (local, WOFF2)
   ========================================================= */

@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Franie'; src:url('assets/fonts/franie/Franie-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

/* =========================================================
   1.5. Reset del margin-block-start que WP inyecta automáticamente
        a los hijos de cualquier wp-block-group (.is-layout-flow > *)
        — rompía la alineación de cards en grid y de items en flex.
   ========================================================= */

/* Prevenir overflow horizontal global */
html, body {
	overflow-x: hidden;
}

.om-hero__inner > *,
.om-hero__visual > *,
.om-hero__text > *,
.om-tagline__inner > *,
.om-benefits__inner > *,
.om-benefits__top > *,
.om-benefits__cards > *,
.om-benefit-card > *,
.om-solutions__inner > *,
.om-solutions__top > *,
.om-solutions__grid > *,
.om-solution-card > *,
.om-page-hero__inner > *,
.om-breadcrumb-bar > *,
.om-clients__inner > *,
.om-clients__left > *,
.om-clients__grid > * {
	margin-block-start: 0 !important;
}

/* =========================================================
   2. Design tokens
   ========================================================= */

:root {
	--om-navy:    #013a5b;
	--om-deep:    #021b28;
	--om-blue:    #54adc5;
	--om-cloud:   #ecf7fe;
	--om-orange:  #e75905;
	--om-emerald: #81d2c0;
	--om-white:   #ffffff;
	--om-off:     #f6fafd;
	--om-border:  rgba(1,58,91,.10);
	--om-text-dim: rgba(1,58,91,.45);
	--om-trans:   .3s cubic-bezier(.4,0,.2,1);

	--om-header-h:        72px;
	--om-font-display:    'Franie', system-ui, sans-serif;
	--om-font-body:       'Barlow', system-ui, sans-serif;
}

/* =========================================================
   3. Tipografía base — Astra body + headings
   ========================================================= */

body {
	font-family: var(--om-font-body);
	color: var(--om-navy);
}

h1, h2, h3, h4, h5, h6,
.om-header__menu a {
	font-family: var(--om-font-display);
}

a {
	color: inherit;
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: none;
}

/* Anular subrayado de Astra en single posts y comentarios */
.ast-single-post .entry-content a,
.ast-comment-content a:not(.ast-comment-edit-reply-wrap a),
.entry-content a,
.entry-content a:hover,
.entry-content a:focus {
	text-decoration: none !important;
}

/* =========================================================
   4. Header — blanco, logo izda, menú centrado, CTA naranja
   ========================================================= */

.om-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999; /* Por encima del drawer (z-index 199) y de cualquier elemento de la página */
	background: var(--om-white);
	border-bottom: 0;
	box-shadow: none;
	transition: box-shadow var(--om-trans), background var(--om-trans);
}

/* Reservar espacio para el header fijo en páginas interiores (la home tiene hero que arranca en y=0). */
body:not(.home) {
	padding-top: var(--om-header-h);
}

/* Bloqueo de scroll cuando el drawer móvil está abierto — defensa CSS adicional al JS. */
html:has(.om-menu-locked),
body.om-menu-locked {
	overflow: hidden !important;
	touch-action: none !important;
	overscroll-behavior: contain !important;
}

/* Al scrollear en interiores, sombra muy sutil para separar del contenido. */
body:not(.home) .om-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(1,58,91,.04);
}

.om-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	height: var(--om-header-h);
}

.om-header__logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	/* Ancho fijo del contenedor del logo — evita que el cambio entre logo color/blanco
	   modifique la posición del menú. */
	width: 180px;
	height: 36px;
	position: relative;
	z-index: 300; /* Por encima del drawer (z-199) para verse cuando el drawer está abierto. */
}

.om-header__logo img,
.om-header__logo svg {
	display: block;
	width: 180px !important;
	height: 36px !important;
	object-fit: contain;
	object-position: left center;
}

/* Menú (centrado) */
.om-header__menu {
	flex: 1;
	display: flex;
	justify-content: center;
}

.om-header__menu ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.om-header__menu a {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	color: var(--om-navy);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 8px;
	transition: background var(--om-trans), color var(--om-trans);
	white-space: nowrap;
	letter-spacing: .01em;
}

/* Hover y current item: sólo cambio de color (sin chip de fondo + sin alterar padding/border).
   Usamos !important porque Astra inyecta inline CSS que pisa el menu-link del current item. */
.om-header .om-header__menu a:hover,
.om-header .om-header__menu .current-menu-item > a,
.om-header .om-header__menu .current-menu-item > .menu-link,
.om-header .om-header__menu .current_page_item > a,
.om-header .om-header__menu .current_page_item > .menu-link {
	background: transparent !important;
	color: var(--om-blue) !important;
	/* Defensiva: sólo color + neutralizar cambios visuales de Astra.
	   NO tocamos padding ni font-weight aquí — heredan del rule base, así el item NO se desplaza. */
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	outline: 0 !important;
}

/* CTA pill azul */
.om-header__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .02em;
	background: var(--om-blue);
	color: var(--om-white) !important;
	padding: 11px 22px;
	border-radius: 100px;
	text-decoration: none;
	transition: background var(--om-trans), transform var(--om-trans), box-shadow var(--om-trans);
}

.om-header__cta:hover {
	background: #3f8fa6;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(84,173,197,.40);
}

/* Mostrar/ocultar variantes de logo según contexto */
.om-header__logo-white { display: none; }
.home .om-header__logo-color { display: none; }
.home .om-header__logo-white { display: block; }
/* Cuando el header se vuelve sólido (scroll en home), volvemos al logo en color */
.home .om-header.is-scrolled .om-header__logo-color { display: block; }
.home .om-header.is-scrolled .om-header__logo-white { display: none; }
/* Drawer móvil abierto en home: forzamos header en modo "sólido claro" para que
   el logo (color) y la X (navy) sean siempre visibles sobre el drawer claro.
   Solución global vía atributo data-* para sortear specificity wars. */
body.home .om-header.is-menu-open {
	background: var(--om-white) !important;
}
body.home .om-header.is-menu-open .om-header__inner {
	background: transparent !important;
}
body.home .om-header.is-menu-open .om-header__logo-color { display: block !important; }
body.home .om-header.is-menu-open .om-header__logo-white { display: none !important; }
body.home .om-header.is-menu-open .om-header__toggle {
	background: var(--om-navy) !important;
	border: 0 !important;
}
body.home .om-header.is-menu-open .om-header__toggle span {
	background: var(--om-white) !important;
}

.om-header__cta svg { width: 13px; height: 13px; flex: 0 0 13px; }
/* Defensive: ningún SVG dentro del header debe poder reventar su contenedor. */
.om-header svg { max-width: 100%; max-height: 100%; }

/* Pie del drawer móvil — oculto por defecto (sólo se muestra dentro del drawer en móvil). */
.om-mobile-drawer-foot { display: none; }

/* =========================================================
   Selector de idioma (Polylang) — formato ES | FR | EN
   ========================================================= */
.om-header__lang {
	flex-shrink: 0;
	order: 4; /* Tras logo (auto), menú (auto), CTA (order 3) — el lang queda a la DERECHA del CTA. */
}
.om-header__cta { order: 3; } /* CTA antes que el lang switcher. */

.om-header__lang-list {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
}

.om-header__lang-item { display: inline-flex; align-items: center; }

.om-header__lang-item + .om-header__lang-item::before {
	content: '|';
	margin: 0 8px;
	color: rgba(0, 0, 0, .25);
	font-weight: 300;
}

.om-header__lang-item a {
	display: inline-block;
	padding: 4px 2px;
	color: var(--om-navy);
	text-decoration: none;
	transition: color var(--om-trans), opacity var(--om-trans);
}

.om-header__lang-item a:hover,
.om-header__lang-item a:focus-visible {
	color: var(--om-blue);
	outline: none;
}

/* Header transparente en home — claritos sobre el navy */
.home .om-header:not(.is-scrolled) .om-header__lang-item a {
	color: var(--om-white);
}

.home .om-header:not(.is-scrolled) .om-header__lang-item + .om-header__lang-item::before {
	color: rgba(255, 255, 255, .4);
}

.home .om-header:not(.is-scrolled) .om-header__lang-item a:hover,
.home .om-header:not(.is-scrolled) .om-header__lang-item a:focus-visible {
	color: var(--om-white);
	opacity: .8;
}

/* Header transparente en la HOME (sobre el hero navy) */
.home .om-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
}

/* Logo blanco directamente sobre navy — sin pill background.
   Mantener mismo width/height que en interiores para que el menú no se desplace. */
.home .om-header__logo img {
	background: transparent;
	padding: 0;
	border-radius: 0;
	width: 180px;
	height: 36px;
	box-sizing: content-box;
}

/* Menú: texto en blanco sobre el navy — SOLO los items de la lista del menú principal,
   NO los <a> del drawer foot (pills idioma, CTA, email/teléfono). */
.home .om-header__menu .om-header__menu-list a {
	color: var(--om-white);
}

.home .om-header__menu .om-header__menu-list a:hover,
.home .om-header__menu .om-header__menu-list .current-menu-item > a {
	background: rgba(255,255,255,.10);
	color: var(--om-white);
}

/* Hamburguesa móvil: línea blanca sobre navy */
.home .om-header__toggle {
	border-color: rgba(255,255,255,.30);
}
.home .om-header__toggle span {
	background: var(--om-white);
}

/* Al hacer scroll: header sólido blanco con logo en color — sin borde, sólo sombra sutil.
   Animación con fade (opacity) en lugar de translate para evitar que el header
   se quede stuck fuera del viewport en iOS Safari con "Reducir movimiento". */
.home .om-header.is-scrolled {
	position: fixed;
	background: var(--om-white);
	border-bottom: 0;
	box-shadow: 0 2px 12px rgba(1,58,91,.04);
	animation: om-header-fadein .35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.home .om-header.is-scrolled {
		animation: none !important;
		transform: none !important;
	}
}

/* Al hacer scroll en home: menú vuelve a colores oscuros (sobre blanco) */
.home .om-header.is-scrolled .om-header__menu a {
	color: var(--om-navy);
}
.home .om-header.is-scrolled .om-header__menu a:hover,
.home .om-header.is-scrolled .om-header__menu .current-menu-item > a {
	background: var(--om-cloud);
	color: var(--om-blue);
}
/* Burger en home scrolled: vuelve al estilo navy filled con líneas blancas (mismo que en interiores). */
.home .om-header.is-scrolled .om-header__toggle {
	background: var(--om-navy);
	border: 0;
}
.home .om-header.is-scrolled .om-header__toggle span {
	background: var(--om-white);
}

@keyframes om-header-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes om-header-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Hamburguesa (mobile) — pill brand-style con morph a X */
.om-header__toggle {
	display: none;
	position: relative;
	z-index: 300; /* Por encima del drawer (z-199) para que la X esté siempre visible. */
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--om-navy);
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, transform .25s ease;
}
.om-header__toggle:hover { background: var(--om-blue); transform: translateY(-1px); }

.om-header__toggle span {
	display: block;
	position: absolute;
	left: 50%;
	width: 18px;
	height: 1.75px;
	background: var(--om-white);
	border-radius: 2px;
	transform: translateX(-50%);
	transform-origin: 50% 50%;
	transition: transform .35s cubic-bezier(.65,.05,.36,1), top .35s cubic-bezier(.65,.05,.36,1), width .25s ease, opacity .2s ease;
}
.om-header__toggle span:nth-child(1) { top: calc(50% - 4px); }
.om-header__toggle span:nth-child(2) { top: calc(50% + 4px); width: 12px; margin-left: 3px; }

/* Estado abierto: morph a X */
.om-header.is-menu-open .om-header__toggle {
	background: var(--om-cobalt, var(--om-blue));
}
.om-header.is-menu-open .om-header__toggle span:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 18px;
}
.om-header.is-menu-open .om-header__toggle span:nth-child(2) {
	top: 50%;
	margin-left: 0;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 18px;
}

/* Variante home no-scroll: burger blanco translúcido para resaltar sobre el navy del hero */
.home .om-header:not(.is-scrolled) .om-header__toggle {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.30);
}
.home .om-header:not(.is-scrolled) .om-header__toggle:hover {
	background: rgba(255,255,255,.22);
}
.home .om-header:not(.is-scrolled) .om-header__toggle span { background: var(--om-white); }

/* Mobile (≤ 992px) */
@media (max-width: 992px) {
	.om-header__inner {
		padding: 0 24px;
		gap: 16px;
		justify-content: flex-end;
	}
	/* Logo a la izquierda, todo lo demás (lang, CTA, burger) empujado a la derecha. */
	.om-header__logo { margin-right: auto; }
	.om-header__toggle { display: inline-flex; }
	/* Asegurar que el burger es siempre el último item de la fila. */
	.om-header__toggle { order: 99; }

	.om-header__menu {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		flex: none;
		width: 100vw;
		max-width: none;
		height: 100vh;
		background: var(--om-white);
		/* padding-top = header-h + 48px de respiro para que los items no toquen el header. */
		padding: calc(var(--om-header-h) + 48px) 28px 40px;
		transform: translateX(100%);
		transition: transform .4s cubic-bezier(.65,.05,.36,1);
		box-shadow: none;
		overflow-y: auto;
		justify-content: flex-start;
		display: flex;
		flex-direction: column;
		gap: 8px;
		z-index: 199; /* justo por debajo del header (200) para que la X siempre se vea */
		/* Forma D decorativa de fondo, marca de agua */
		background-image:
			radial-gradient(circle at 100% 100%, rgba(84,173,197,.07) 0%, transparent 45%),
			radial-gradient(circle at 0% 0%, rgba(1,58,91,.04) 0%, transparent 35%);
	}

	.om-header.is-menu-open .om-header__menu { transform: translateX(0); }

	.om-header__menu ul,
	.om-header__menu .om-header__menu-list {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
	}

	.om-header__menu li { list-style: none; }

	/* IMPORTANTE: scopear a la <ul> del menú principal — NO afectar a los <a> del drawer foot. */
	.om-header__menu .om-header__menu-list a,
	.home .om-header__menu .om-header__menu-list a,
	.home .om-header.is-scrolled .om-header__menu .om-header__menu-list a {
		display: block;
		width: 100%;
		font-family: var(--om-font-display);
		font-size: 22px;
		font-weight: 600;
		letter-spacing: -.01em;
		line-height: 1.2;
		color: var(--om-navy);
		padding: 22px 0;
		border-bottom: 1px solid rgba(1,58,91,.08);
		border-radius: 0;
		text-decoration: none;
		transition: color .2s ease, transform .25s ease, padding-left .25s ease;
	}

	/* Sin flecha decorativa en hover (eliminada por petición — distrae). */
	.om-header__menu .om-header__menu-list a::after {
		content: none !important;
		display: none !important;
	}

	/* Soluciones: ocultar el ::after del link (el chevron va en el botón hermano). */
	.om-header__menu .om-header__menu-list .has-megamenu > a::after {
		display: none !important;
	}

	/* "Soluciones" mantiene su color navy original al abrir el submenu y al ser current-menu-ancestor.
	   Tampoco cambia el grosor de la fuente — sólo color al estar activo. */
	.om-header .om-header__menu .om-header__menu-list .has-megamenu > a,
	.om-header .om-header__menu .om-header__menu-list .has-megamenu.is-open > a,
	.om-header .om-header__menu .om-header__menu-list .has-megamenu > .menu-link,
	.om-header .om-header__menu .om-header__menu-list .has-megamenu.is-open > .menu-link,
	.om-header .om-header__menu .om-header__menu-list .current-menu-ancestor > a,
	.om-header .om-header__menu .om-header__menu-list .current-menu-ancestor > .menu-link {
		color: var(--om-navy) !important;
		font-weight: 600 !important;
	}

	/* Active items: el item current cambia SÓLO color (azul), nunca grosor. */
	.om-header .om-header__menu .om-header__menu-list a,
	.om-header .om-header__menu .om-header__menu-list .menu-link,
	.om-header .om-header__menu .om-header__menu-list .current-menu-item > a,
	.om-header .om-header__menu .om-header__menu-list .current-menu-item > .menu-link,
	.om-header .om-header__menu .om-header__menu-list .current_page_item > a,
	.om-header .om-header__menu .om-header__menu-list .current_page_item > .menu-link {
		font-weight: 600 !important;
	}

	/* Estructurar la <li>.has-megamenu como flex row: enlace + botón toggle.
	   El border-bottom va en el <li> entero (no en el <a> hijo) para que la línea cubra
	   también el botón chevron y separe correctamente de "Catálogos". */
	.om-header__menu .om-header__menu-list .has-megamenu {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(1,58,91,.08);
	}
	.om-header__menu .om-header__menu-list .has-megamenu > a {
		flex: 1 1 auto;
		width: auto !important;
		border-bottom: 0 !important;
	}
	.om-header__menu .om-header__menu-list .has-megamenu > .om-megamenu {
		flex: 0 0 100%;
		order: 99;
	}

	/* Botón toggle del megamenu en mobile drawer — limpio, sin marco visible. */
	.om-mega-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		padding: 0;
		margin: 0;
		border: 0 !important;
		background: transparent !important;
		cursor: pointer;
		outline: 0;
		box-shadow: none !important;
		appearance: none;
		-webkit-appearance: none;
		transition: none;
	}
	.om-mega-toggle:hover,
	.om-mega-toggle:focus,
	.om-mega-toggle:focus-visible {
		background: transparent !important;
		outline: 0 !important;
		box-shadow: none !important;
	}
	.om-mega-toggle__arrow {
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--om-navy);
		border-bottom: 2px solid var(--om-navy);
		transform: rotate(45deg) translate(-2px, -2px);
		transform-origin: center;
		transition: transform .3s ease, border-color .25s ease;
	}
	.has-megamenu.is-open .om-mega-toggle__arrow {
		transform: rotate(225deg) translate(-2px, -2px);
		border-color: var(--om-blue);
	}

	/* Submenú "Soluciones": el megamenu HTML inyectado se convierte en lista compacta dentro del drawer. */
	.om-header__menu .om-megamenu {
		display: none !important;
		padding: 2px 0 8px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.om-header__menu .has-megamenu.is-open .om-megamenu {
		display: block !important;
	}
	.om-header__menu .om-megamenu__inner {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.om-header .om-header__menu .om-megamenu__card {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 14px !important;
		padding: 10px 0 !important;
		text-decoration: none !important;
		border-bottom: 1px dashed rgba(1,58,91,.06) !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		width: 100% !important;
		min-width: 0;
		max-width: 100% !important;
		box-sizing: border-box;
		font-size: 13px !important;
		font-weight: 500 !important;
		color: var(--om-navy) !important;
		overflow: visible !important;
	}
	.om-header .om-header__menu .om-megamenu__card:hover {
		transform: none !important;
		box-shadow: none !important;
	}
	.om-header__menu .om-megamenu__card:last-child {
		border-bottom: 0 !important;
	}
	/* Imagen cuadrada a la izquierda — más pequeña (48px) para dar más sitio al título. */
	.om-header .om-header__menu .om-megamenu__image {
		display: block !important;
		flex: 0 0 48px !important;
		width: 48px !important;
		height: 48px !important;
		aspect-ratio: 1 / 1 !important;
		min-width: 48px !important;
		max-width: 48px !important;
		border-radius: 10px !important;
		overflow: hidden !important;
		background: var(--om-cloud) !important;
		margin: 0 !important;
	}
	.om-header .om-header__menu .om-megamenu__image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
	.om-header__menu .om-megamenu__body {
		display: flex !important;
		flex-direction: column;
		gap: 0 !important;
		min-width: 0 !important;
		flex: 1 1 0 !important;
		max-width: 100% !important;
		padding: 4px 0 !important;
		overflow: hidden !important;
	}
	.om-header__menu .om-megamenu__title {
		font-family: var(--om-font-display) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: var(--om-navy) !important;
		margin: 0 !important;
		letter-spacing: -.01em !important;
		line-height: 1.25 !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
		hyphens: auto !important;
		max-width: 100% !important;
		width: 100% !important;
		white-space: normal !important;
		padding: 0 !important;
	}
	.om-header__menu .om-megamenu__excerpt {
		display: none; /* mantener compacto */
	}
	.om-header__menu .om-megamenu__cta {
		display: none; /* el card entero es clickable */
	}

	.om-header__menu .om-header__menu-list a:hover,
	.om-header__menu .om-header__menu-list a:focus,
	.om-header__menu .om-header__menu-list a:focus-visible,
	.om-header__menu .om-header__menu-list a:active,
	.home .om-header__menu .om-header__menu-list a:hover,
	.home .om-header__menu .om-header__menu-list .current-menu-item > a {
		background: transparent !important;
		color: var(--om-blue) !important;
		outline: 0 !important;
		box-shadow: none !important;
		/* Sin padding-left/right ni transform: el item NO se desplaza en ninguna dirección
		   cuando se hace click/hover/focus. */
		transform: none !important;
		translate: 0 !important;
		top: auto !important;
		position: static !important;
	}

	.om-header__menu .om-header__menu-list .current-menu-item > a {
		color: var(--om-blue);
	}

	/* Pie del drawer (lang switcher + CTA + contacto mini) — visible sólo en móvil */
	.om-mobile-drawer-foot {
		display: flex !important;
		margin-top: auto;
		padding-top: 40px;
		flex-direction: column;
		gap: 24px;
	}
	/* Fila CTA + pills idioma a la derecha del CTA. */
	.om-mobile-drawer-foot__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
	}
	/* Switcher idioma: una sola fila centrada */
	.om-mobile-drawer-foot__lang {
		display: flex;
		gap: 6px;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.om-mobile-drawer-foot__lang span {
		display: none; /* Quitamos el label "Selector de idioma" — los pills se entienden solos */
	}
	.om-header .om-mobile-drawer-foot__lang a {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 40px !important;
		height: 32px;
		padding: 0 !important;
		border-radius: 999px;
		border: 1px solid rgba(1,58,91,.18);
		background: transparent;
		font-family: var(--om-font-display);
		font-size: 11px !important;
		font-weight: 700;
		letter-spacing: .08em;
		color: var(--om-navy);
		text-decoration: none;
		text-transform: uppercase;
		box-sizing: border-box;
		transition: background .2s ease, color .2s ease, border-color .2s ease;
		white-space: nowrap;
	}
	.om-mobile-drawer-foot__lang a:hover {
		background: var(--om-navy);
		color: var(--om-white);
		border-color: var(--om-navy);
	}
	/* CTA: pill compacto, alineado a la izquierda — !important para ganar a .om-header__menu a */
	.om-header .om-mobile-drawer-foot__cta {
		display: inline-flex !important;
		align-self: flex-start;
		box-sizing: border-box;
		align-items: center;
		gap: 8px;
		padding: 12px 18px !important;
		border-radius: 999px !important;
		background: var(--om-blue) !important;
		color: var(--om-white) !important;
		font-family: var(--om-font-display);
		font-size: 12px !important;
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap !important;
		transition: background .2s ease, transform .2s ease;
	}
	.om-mobile-drawer-foot__cta:hover {
		background: var(--om-navy);
		transform: translateY(-1px);
	}
	.om-mobile-drawer-foot__cta svg {
		flex: 0 0 12px;
		width: 12px;
		height: 12px;
	}
	/* Contacto mini */
	.om-mobile-drawer-foot__contact {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-top: 20px;
		border-top: 1px solid rgba(1,58,91,.08);
	}
	.om-header .om-mobile-drawer-foot__contact a {
		font-family: var(--om-font-display);
		font-size: 13px !important;
		color: rgba(1,58,91,.65) !important;
		text-decoration: none;
		transition: color .2s ease;
		padding: 0 !important;
		background: transparent !important;
		border-radius: 0 !important;
		display: block !important;
		width: auto !important;
	}
	.om-mobile-drawer-foot__contact a:hover { color: var(--om-blue); }
	.om-mobile-drawer-foot__contact-label {
		font-size: 10px !important;
		font-weight: 600;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: rgba(1,58,91,.45) !important;
		margin-bottom: 2px;
	}

	/* Ocultar el switcher de idioma del header en móvil (lo movemos al drawer) */
	.om-header__lang { display: none; }
	/* Y ocultar el CTA del header en móvil (lo movemos también al drawer) */
	.om-header__cta { display: none; }

	/* CTA en el header móvil — la mantengo fuera del drawer, compacta */
	.om-header__cta {
		padding: 9px 14px;
		font-size: 11px;
	}
	.om-header__cta-text { display: none; }
}

/* Header en móvil muy estrecho */
@media (max-width: 400px) {
	.om-header__inner { padding: 0 16px; gap: 8px; }
}

/* =========================================================
   5. Hero — deep navy, círculo naranja con vídeo
   ========================================================= */

.om-hero {
	position: relative;
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--om-white);
}

.om-hero::before {
	content: '';
	position: absolute; inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 60% at 30% 50%, rgba(84,173,197,.12) 0%, transparent 70%),
		radial-gradient(ellipse 40% 40% at 75% 30%, rgba(129,210,192,.08) 0%, transparent 70%);
}

.om-hero .om-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 120px 0 80px;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 60px;
}

/* Visual D — ocupa exactamente la mitad del hero */
.om-hero .om-hero__visual {
	flex: 0 0 50vw !important;
	width: 50vw;
	display: flex;
	align-items: center;
	position: relative;
}

/* Forma "D" — rectángulo a la izquierda + media luna a la derecha (estilo Bascule).
   Ocupa exactamente la mitad del hero (50vw) y nace del borde izquierdo del viewport. */
.om-hero__circle {
	width: 100%;
	height: 35vw;
	max-height: 90vh;
	border-radius: 0 40% 40% 0 / 0 50% 50% 0;
	position: relative;
	overflow: hidden;
	margin-left: 0;
	flex-shrink: 0;
	background: transparent;
	box-shadow: none !important;
}

/* Vídeo: rellena la forma D */
.om-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Imagen: rellena la forma D */
.om-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 2;
}

/* Overlay sutil */
.om-hero__circle-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 70% 50%, rgba(231,89,5,.15) 0%, transparent 70%);
	pointer-events: none;
	z-index: 3;
}

/* Badge flotante con dato destacado — se superpone al borde derecho de la D */
.om-hero__badge {
	display: none !important;
}

@keyframes om-badge-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

.om-hero__badge-num {
	font-family: var(--om-font-display);
	font-size: 38px;
	font-weight: 900;
	color: var(--om-navy);
	line-height: 1;
}

.om-hero__badge-text {
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 400;
	color: rgba(1,58,91,.55);
	line-height: 1.4;
	max-width: 110px;
}

.om-hero__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--om-emerald);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(129,210,192,.25);
}

@media (max-width: 992px) {
	.om-hero__badge {
		bottom: -20px;
		right: 12px;
		padding: 14px 18px;
	}
	.om-hero__badge-num { font-size: 30px; }
}

/* Texto — flexible, ocupa el resto del hero. */
.om-hero .om-hero__text {
	flex: 1 1 0 !important;
	min-width: 0;
	padding-right: 60px;
	max-width: 720px;
}

.om-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 32px;
	padding: 0;
	line-height: 1.3;
	white-space: nowrap;
}

.om-hero__eyebrow::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-hero__h1 {
	font-family: var(--om-font-display);
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 28px;
}

.om-hero__h1 strong { font-weight: 700; display: block; }
.om-hero__h1 em { font-style: normal; color: var(--om-blue); }

.om-hero__body {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255,255,255,.50);
	max-width: 400px;
	margin: 0 0 48px;
}

.om-hero__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

/* Botones */
.om-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 14px 28px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform var(--om-trans), box-shadow var(--om-trans), background var(--om-trans);
	cursor: pointer;
	border: 0;
}

.om-btn--light {
	background: var(--om-white);
	color: var(--om-navy);
}

.om-btn--light:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

.om-btn--ghost-light {
	background: transparent;
	color: rgba(255,255,255,.60);
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.25);
	padding: 0 0 2px;
	border-radius: 0;
	transition: color var(--om-trans), border-color var(--om-trans);
}

.om-btn--ghost-light:hover {
	color: var(--om-white);
	border-color: rgba(255,255,255,.60);
	transform: none;
	box-shadow: none;
}

.om-btn svg { width: 13px; height: 13px; }

/* Estilos de botón para Gutenberg (block patterns):
   se aplican cuando el botón tiene la clase is-style-om-light / is-style-om-ghost-light */
.wp-block-button.is-style-om-light .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--om-white);
	color: var(--om-navy);
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .03em;
	padding: 14px 28px;
	border-radius: 100px;
	text-decoration: none;
	transition: transform var(--om-trans), box-shadow var(--om-trans);
}
.wp-block-button.is-style-om-light .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013a5b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--om-trans);
}
.wp-block-button.is-style-om-light .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.wp-block-button.is-style-om-light .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button.is-style-om-ghost-light .wp-block-button__link {
	background: transparent;
	color: rgba(255,255,255,.60);
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	padding: 0 0 2px;
	border-radius: 0;
	border-bottom: 1px solid rgba(255,255,255,.25);
	text-decoration: none;
	transition: color var(--om-trans), border-color var(--om-trans);
}
.wp-block-button.is-style-om-ghost-light .wp-block-button__link:hover {
	color: var(--om-white);
	border-color: rgba(255,255,255,.60);
}

/* Scroll hint — eliminado en todas las resoluciones por petición del cliente. */
.om-hero__scroll {
	display: none !important;
}

.om-hero__scroll-bar {
	width: 1px;
	height: 44px;
	background: rgba(255,255,255,.12);
	position: relative;
	overflow: hidden;
}

.om-hero__scroll-bar::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	right: 0;
	height: 100%;
	background: rgba(255,255,255,.45);
	animation: om-sb 2s ease-in-out infinite;
}

@keyframes om-sb { to { top: 200%; } }

/* Hero responsive */
@media (max-width: 992px) {
	.om-hero { min-height: auto; padding-top: 80px; padding-bottom: 60px; }
	.om-hero .om-hero__inner {
		flex-direction: column !important;
		gap: 40px !important;
		padding: 60px 0 0 !important;
		align-items: stretch !important;
	}
	.om-hero .om-hero__visual {
		flex: 0 0 auto !important;
		width: 70vw !important;
		max-width: 420px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	.om-hero .om-hero__circle {
		width: 100% !important;
		height: 60vw !important;
		max-height: 420px !important;
	}
	.om-hero .om-hero__text {
		flex: 0 0 auto !important;
		max-width: none !important;
		width: 100% !important;
		padding: 0 32px !important;
		text-align: center !important;
	}
	.om-hero__h1 { font-size: clamp(40px, 7vw, 64px) !important; }
	.om-hero__eyebrow { justify-content: center; }
	.om-hero__actions { justify-content: center; }
}

@media (max-width: 600px) {
	.om-hero { padding-top: 60px; padding-bottom: 80px; }
	.om-hero .om-hero__inner { gap: 32px !important; padding-top: 40px !important; }
	/* Visual: pegado al borde izquierdo (forma D natural). */
	.om-hero .om-hero__visual {
		width: 86vw !important;
		max-width: 400px !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	.om-hero .om-hero__circle {
		width: 100% !important;
		height: 86vw !important;
		max-height: 400px !important;
	}
	/* Badge: dentro del viewport en móvil */
	.om-hero__badge {
		right: 4%;
		left: auto;
		bottom: -16px;
		padding: 10px 14px;
		gap: 8px;
	}
	.om-hero__badge-num { font-size: 24px; }
	.om-hero__badge-text { font-size: 10px; max-width: 90px; line-height: 1.25; }
	.om-hero .om-hero__text {
		padding: 0 20px !important;
		text-align: center !important;
	}
	.om-hero__h1 {
		font-size: clamp(34px, 9vw, 52px) !important;
		line-height: 1.05;
	}
	.om-hero__eyebrow {
		display: block;
		font-size: 10px;
		text-align: center;
		letter-spacing: .12em;
		max-width: 100%;
		white-space: normal;
		line-height: 1.4;
	}
	.om-hero__eyebrow::before { display: none; }
	.om-hero__body { font-size: 15px; line-height: 1.5; }
	/* Botones: apilados, centrados, sin estirar ancho completo */
	.om-hero__actions {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	.om-hero__actions .wp-block-button__link {
		width: auto;
		text-align: center;
	}
}

/* =========================================================
   6. Sección Tagline — fondo blanco con ghost text "Turn Retail ON"
   ========================================================= */

.om-tagline {
	background: var(--om-white);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

.om-tagline__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--om-font-display);
	font-size: clamp(72px, 13vw, 200px);
	font-weight: 900;
	white-space: nowrap;
	color: rgba(1, 58, 91, .035);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.03em;
	line-height: 1;
}

.om-tagline__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}

.om-tagline__inner > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Caso por defecto (titular grande): "El 70% de las decisiones se toman en el punto de venta." */
.om-tagline__h2 {
	font-family: var(--om-font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -.02em;
	max-width: 1100px;
	margin: 0 0 40px;
	color: var(--om-navy);
}
.om-tagline__h2 strong { font-weight: 700; }
.om-tagline__h2 em,
.om-tagline__h2 .om-blue {
	font-style: normal;
	color: var(--om-blue);
}

/* Variante eyebrow + heading: SOLO cuando el H2 contiene un <br> (caso "Nuestros pilares.<br><strong>...</strong>").
   El texto fuera del strong se renderiza como eyebrow azul, el <strong> como heading grande. */
.om-tagline__h2:has(br) {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	color: var(--om-blue);
	text-transform: uppercase;
	display: block;
}
.om-tagline__h2:has(br)::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 3px;
}
.om-tagline__h2:has(br) br { display: none; }
.om-tagline__h2:has(br) strong {
	display: block;
	font-weight: 700;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--om-navy);
	text-transform: none;
	margin-top: 18px;
}

.om-tagline__rule {
	width: 40px;
	height: 2px;
	background: var(--om-orange);
	border: 0;
	margin: 0 0 28px;
}

.om-tagline__body {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.80;
	color: rgba(1, 58, 91, .45);
	max-width: 520px;
	margin: 0;
}

/* Soluciones (ES id 17, EN id 490, FR id 492): párrafos del tagline más anchos. */
.page-id-17 .om-tagline__body,
.page-id-490 .om-tagline__body,
.page-id-492 .om-tagline__body {
	max-width: 900px;
}

@media (max-width: 768px) {
	.om-tagline { padding: 80px 0; }
	.om-tagline__inner { padding: 0 24px; }
	.om-tagline__h2 {
		font-size: clamp(20px, 4.5vw, 28px);
	}
}

@media (max-width: 600px) {
	.om-tagline { padding: 64px 0; }
}

/* =========================================================
   7. Sección Beneficios — navy + 4 tarjetas blancas con icono
   ========================================================= */

.om-benefits {
	background-color: var(--om-navy);
	background-image: url('/wp-content/uploads/lineal-frutas-verduras-supermercado.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 0 !important;
	position: relative;
	overflow: hidden;
}

@media (max-width: 600px) {
	.om-benefits { padding: 70px 0 !important; }
}

/* Capa de color navy con transparencia sobre la imagen */
.om-benefits::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(1,58,91,.72) 0%, rgba(2,27,40,.78) 100%),
		radial-gradient(ellipse 65% 80% at 85% 10%, rgba(84,173,197,.22) 0%, transparent 55%);
}

/* Grid sutil de puntos por encima del overlay para textura */
.om-benefits::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .12;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
}

.om-benefits__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-benefits__top {
	text-align: center;
	margin-bottom: 64px;
}

.om-benefits__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 20px;
}

.om-benefits__eyebrow::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-benefits__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--om-white);
	margin: 0;
}

.om-benefits__h2 strong { font-weight: 700; }

.om-benefits .om-benefits__cards {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

/* Si hay solo 3 cards, mostrarlas en 3 columnas centradas */
.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.om-benefits .om-benefit-card {
	background: rgba(255,255,255,.96);
	border-radius: 20px;
	padding: 32px 26px 30px;
	overflow: hidden;
	transition: transform var(--om-trans), box-shadow var(--om-trans);
	/* Forzar misma altura entre cards de la misma fila */
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	align-self: stretch;
}

/* Imagen de portada para benefit card (opcional, rompe padding) */
.om-benefits .om-benefit-card > .om-benefit-card__image {
	display: block;
	width: calc(100% + 52px) !important;
	margin: -32px -26px 22px !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--om-cloud);
	flex-shrink: 0;
	order: -1;
	border-radius: 20px 20px 0 0;
}
.om-benefit-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.om-benefit-card:hover .om-benefit-card__image img {
	transform: scale(1.05);
}

.om-benefit-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 56px rgba(0,0,0,.25);
}

.om-benefit-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.om-benefit-card__icon--blue    { background: rgba(84,173,197,.14); }
.om-benefit-card__icon--emerald { background: rgba(129,210,192,.16); }
.om-benefit-card__icon--orange  { background: rgba(231,89,5,.10); }
.om-benefit-card__icon--navy    { background: rgba(1,58,91,.08); }

.om-benefit-card__title {
	font-family: var(--om-font-display);
	font-size: 20px;
	font-weight: 400;
	color: var(--om-navy);
	margin: 0 0 14px;
	line-height: 1.2;
	letter-spacing: -.01em;
	/* Reservar siempre 2 líneas para que todas las cards mantengan misma altura */
	min-height: calc(1.2em * 2);
}

.om-benefit-card__title em {
	font-style: normal;
	color: var(--om-blue);
}

.om-benefit-card__title strong {
	font-weight: 700;
	color: var(--om-navy);
}

.om-benefit-card__desc {
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.70;
	color: rgba(1, 58, 91, .45);
	margin: 0;
}

@media (max-width: 992px) {
	.om-benefits__inner { padding: 0 24px; }
	.om-benefits .om-benefits__cards { grid-template-columns: repeat(2, 1fr) !important; }
	/* Con `:has()` de 3 cards: 2 columnas también en tablet */
	.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(3):last-child) {
		grid-template-columns: repeat(2, 1fr) !important;
		max-width: none !important;
	}
}

@media (max-width: 600px) {
	.om-benefits { padding: 70px 0 !important; }
	.om-benefits__inner { padding: 0 24px; }

	/* En móvil, las benefit cards también pasan a slider horizontal con scroll snap */
	.om-benefits .om-benefits__cards,
	.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(3):last-child) {
		display: flex !important;
		grid-template-columns: none !important;
		max-width: none !important;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		align-items: stretch;
		margin: 0 -24px !important;
		padding: 0 24px 16px !important;
	}
	.om-benefits .om-benefits__cards::-webkit-scrollbar { display: none; }

	.om-benefits .om-benefit-card {
		flex: 0 0 calc(100vw - 48px);
		max-width: none;
		height: auto !important;
		scroll-snap-align: center;
	}

	/* Imagen de benefit card: ajustar márgenes negativos al nuevo padding */
	.om-benefits .om-benefit-card > .om-benefit-card__image {
		width: calc(100% + 52px) !important;
	}
}

/* =========================================================
   8. Sección Soluciones — fondo blanco, ghost 360°, grid 6 cards
   ========================================================= */

.om-solutions {
	background: var(--om-white);
	padding: 100px 0 120px;
	position: relative;
	overflow: hidden;
}

.om-solutions__ghost {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--om-font-display);
	font-size: clamp(100px, 18vw, 260px);
	font-weight: 900;
	white-space: nowrap;
	color: rgba(1, 58, 91, .025);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.05em;
	line-height: 1;
}

.om-solutions__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-solutions__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 56px;
}

.om-solutions__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.02em;
	max-width: 600px;
	margin: 0;
	color: var(--om-navy);
}

.om-solutions__h2 strong { font-weight: 700; }

.om-solutions__intro {
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(1, 58, 91, .45);
	max-width: 320px;
	margin: 0;
}

.om-solutions .om-solutions__grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 48px;
	align-items: stretch;
}

.om-solutions .om-solution-card {
	border: 1px solid var(--om-border);
	border-radius: 20px;
	padding: 30px 26px 60px;
	position: relative;
	overflow: hidden;
	transition: border-color var(--om-trans), box-shadow var(--om-trans), transform var(--om-trans);
	/* Forzar misma altura entre cards de la misma fila */
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	align-self: stretch;
}

/* Imagen de portada de la card — rompe padding superior y laterales para
   que la foto cubra todo el ancho y llegue al borde superior de la card */
.om-solutions .om-solution-card > .om-solution-card__image {
	display: block;
	width: calc(100% + 52px) !important;
	margin: -30px -26px 24px !important;
	padding: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f4f4f4;
	flex-shrink: 0;
	order: -1;
	border-radius: 20px 20px 0 0;
}

.om-solution-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
	padding: 0;
	margin: 0 !important;
	box-sizing: border-box;
}

.om-solution-card:hover .om-solution-card__image img {
	transform: scale(1.05);
}

.om-solution-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--om-navy), var(--om-blue));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--om-trans);
}

.om-solution-card:hover {
	border-color: var(--om-blue);
	box-shadow: 0 8px 32px rgba(1, 58, 91, .10);
	transform: translateY(-4px);
}

.om-solution-card:hover::after { transform: scaleX(1); }

.om-solution-card__num {
	font-family: var(--om-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(1, 58, 91, .28);
	margin: 0 0 18px;
}

.om-solution-card__title {
	font-family: var(--om-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 6px;
	color: var(--om-navy);
}

.om-solution-card__tag {
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 14px;
}

.om-solution-card__desc {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.70;
	color: rgba(1, 58, 91, .45);
	margin: 0;
}

/* Toggle decorativo */
.om-solution-card__toggle {
	position: absolute;
	bottom: 22px;
	right: 22px;
	width: 42px;
	height: 22px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	padding: 3px;
	transition: background var(--om-trans);
}

.om-solution-card__toggle-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	transition: transform var(--om-trans);
}

.om-solution-card:hover .om-solution-card__toggle-dot { transform: translateX(20px); }

/* Botón "Descargar ficha" — sustituye al toggle decorativo */
.om-solution-card__download {
	position: absolute;
	bottom: 22px;
	left: 26px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--om-navy);
	text-decoration: none;
	letter-spacing: .02em;
	transition: color var(--om-trans), gap var(--om-trans);
	border-bottom: 1px solid rgba(1, 58, 91, .15);
	padding-bottom: 3px;
}
.om-solution-card__download:hover {
	color: var(--om-blue);
	border-color: var(--om-blue);
	gap: 12px;
}
.om-solution-card__download svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* Variantes de color para el download según tag de la card */
.om-solution-card--c .om-solution-card__download:hover { color: var(--om-orange); border-color: var(--om-orange); }
.om-solution-card--b .om-solution-card__download:hover { color: #5ab8a3; border-color: #5ab8a3; }
.om-solution-card--a .om-solution-card__download:hover { color: var(--om-blue); border-color: var(--om-blue); }

/* Variantes de color (3 paletas que se rotan) */
.om-solution-card--a .om-solution-card__tag         { color: var(--om-blue); }
.om-solution-card--a .om-solution-card__toggle      { background: rgba(84, 173, 197, .20); }
.om-solution-card--a .om-solution-card__toggle-dot  { background: var(--om-blue); }

.om-solution-card--b .om-solution-card__tag         { color: #5ab8a3; }
.om-solution-card--b .om-solution-card__toggle      { background: rgba(90, 184, 163, .20); }
.om-solution-card--b .om-solution-card__toggle-dot  { background: #5ab8a3; }

.om-solution-card--c .om-solution-card__tag         { color: var(--om-orange); }
.om-solution-card--c .om-solution-card__toggle      { background: rgba(231, 89, 5, .15); }
.om-solution-card--c .om-solution-card__toggle-dot  { background: var(--om-orange); }

.om-solutions__cta {
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Botón outline */
.om-btn--outline {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--om-navy);
	border: 2px solid var(--om-navy);
	background: transparent;
	padding: 13px 28px;
	border-radius: 100px;
	text-decoration: none;
	transition: background var(--om-trans), color var(--om-trans), transform var(--om-trans);
}

.om-btn--outline:hover {
	background: var(--om-navy);
	color: var(--om-white);
	transform: translateY(-2px);
}

.om-btn--outline svg { width: 13px; height: 13px; }

@media (max-width: 992px) {
	.om-solutions__inner { padding: 0 24px; }
	.om-solutions .om-solutions__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.om-solutions__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.om-solutions__intro { max-width: none; }
}

@media (max-width: 600px) {
	.om-solutions { padding: 70px 0 80px; }
	.om-solutions__inner { padding: 0 24px; }

	/* En móvil, el grid se convierte en slider horizontal con scroll snap */
	.om-solutions .om-solutions__grid {
		display: flex !important;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		align-items: stretch;
		margin: 0 -24px !important;
		padding: 0 24px 16px !important;
	}
	.om-solutions .om-solutions__grid::-webkit-scrollbar { display: none; }

	.om-solutions .om-solution-card {
		flex: 0 0 calc(100vw - 48px);
		max-width: none;
		height: auto !important;
		scroll-snap-align: center;
	}

	.om-solutions .om-solution-card > .om-solution-card__image {
		width: calc(100% + 52px) !important;
	}
}

/* =========================================================
   8.5. Flechas para sliders móviles (.om-solutions, .om-benefits)
   ========================================================= */

.om-slider-arrows {
	display: none;
	gap: 32px;
	margin-top: 56px !important;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	justify-content: center;
}

@media (max-width: 600px) {
	.om-slider-arrows {
		display: flex;
		margin-top: 40px !important;
		margin-bottom: 56px !important;
	}
}

.om-slider-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.om-slider-arrow svg { width: 18px; height: 18px; }
.om-slider-arrow:disabled {
	opacity: .3;
	cursor: not-allowed;
}
.om-slider-arrow:not(:disabled):active {
	transform: scale(.95);
}

/* Flechas sobre fondo blanco (Soluciones) */
.om-solutions .om-slider-arrow {
	border-color: rgba(1, 58, 91, .25);
	color: var(--om-navy);
	background: var(--om-white);
}
.om-solutions .om-slider-arrow:not(:disabled):hover {
	background: var(--om-cloud);
	border-color: var(--om-blue);
}

/* Flechas sobre fondo navy (Beneficios) */
.om-benefits .om-slider-arrow {
	border-color: rgba(255, 255, 255, .30);
	color: var(--om-white);
	background: rgba(255, 255, 255, .08);
}
.om-benefits .om-slider-arrow:not(:disabled):hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .55);
}

/* =========================================================
   9. Carrusel auto-scroll — full width, 4 visibles
   ========================================================= */

.om-carousel {
	width: 100vw;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--om-cloud);
}
/* Anular margins/padding heredados de wp-block-group */
.om-carousel.wp-block-group,
section.om-carousel,
.om-carousel.is-layout-flow {
	margin: 0 !important;
	padding: 0 !important;
}

.om-carousel__track {
	display: flex;
	width: max-content;
	animation: om-carousel-scroll 50s linear infinite;
}

.om-carousel:hover .om-carousel__track { animation-play-state: paused; }

/* Flechas del carrusel principal — visibles en hover (desktop) y siempre en móvil */
.om-carousel__arrows {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 10;
	padding: 0 16px;
}
.om-carousel__arrow {
	pointer-events: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(255,255,255,.92);
	color: var(--om-navy);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
	opacity: 0;
	transition: opacity .25s ease, transform .2s ease, background .2s ease;
}
.om-carousel:hover .om-carousel__arrow,
.om-carousel:focus-within .om-carousel__arrow { opacity: 1; }
.om-carousel__arrow:hover {
	background: var(--om-white);
	transform: scale(1.06);
}
.om-carousel__arrow svg { width: 18px; height: 18px; }

@media (max-width: 992px) {
	.om-carousel__arrow { opacity: 1; width: 40px; height: 40px; }
	.om-carousel__arrow svg { width: 16px; height: 16px; }
}

.om-carousel__slide {
	flex: 0 0 25vw;
	height: 25vw;
	max-height: 420px;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.om-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s ease;
}

.om-carousel__slide:hover img {
	transform: scale(1.05);
}

@keyframes om-carousel-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 992px) {
	.om-carousel__slide { flex: 0 0 50vw; height: 50vw; }
}

@media (max-width: 600px) {
	.om-carousel__slide { flex: 0 0 80vw; height: 80vw; }
}

/* =========================================================
   10. Sección Resultados — fondo deep navy, 2 columnas
   ========================================================= */

.om-results {
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	padding: 100px 0 120px;
	position: relative;
	overflow: hidden;
}

.om-results__ghost {
	position: absolute;
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--om-font-display);
	font-size: clamp(100px, 18vw, 240px);
	font-weight: 900;
	color: rgba(255, 255, 255, .03);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.05em;
	line-height: 1;
	white-space: nowrap;
}

.om-results__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: start;
}

.om-results__left { }

.om-results__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 24px;
}

.om-results__label::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-results__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 18px;
}

.om-results__h2 strong { font-weight: 700; }

.om-results__body {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.80;
	color: rgba(255, 255, 255, .45);
	max-width: 380px;
	margin: 0;
}

.om-results__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Card en forma de pill, con número gigante a la derecha */
.om-result-card {
	border-radius: 100px;
	padding: 22px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	transition: transform var(--om-trans), box-shadow var(--om-trans);
	overflow: hidden;
}

.om-result-card:hover {
	transform: translateX(8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

/* Variantes de color */
.om-result-card--blue    { background: var(--om-blue); }
.om-result-card--emerald { background: var(--om-emerald); }
.om-result-card--orange  { background: var(--om-orange); }
.om-result-card--navy    { background: var(--om-navy); }

/* Anchos progresivos — para dar ritmo visual (estilo Bascule).
   Cada card hija es ligeramente más estrecha que la anterior. */
.om-results__cards > .om-result-card:nth-child(1) { width: 100%; }
.om-results__cards > .om-result-card:nth-child(2) { width: 88%; }
.om-results__cards > .om-result-card:nth-child(3) { width: 76%; }

@media (max-width: 600px) {
	.om-results__cards > .om-result-card { width: 100% !important; }
}

.om-result-card__body {
	flex: 1;
	min-width: 0;
}

.om-result-card__title {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--om-white);
	margin: 0 0 4px;
	line-height: 1.3;
	letter-spacing: .01em;
}

.om-result-card__desc {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, .85);
	margin: 0;
}

.om-result-card__num {
	font-family: var(--om-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	line-height: 1;
	color: var(--om-white);
	flex-shrink: 0;
	margin: 0;
	letter-spacing: -.02em;
}

@media (max-width: 992px) {
	.om-results__inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
}

@media (max-width: 600px) {
	.om-results { padding: 70px 0 80px; }
	.om-results__inner { padding: 0 24px; gap: 40px; }
	.om-result-card {
		border-radius: 24px;
		padding: 20px 22px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.om-result-card__num { font-size: clamp(40px, 12vw, 52px); }
	.om-result-card__title { font-size: 14px; }
	.om-result-card__desc  { font-size: 12px; }
}

/* Hijos del Resultados — anular margin-block-start */
.om-results__inner > *,
.om-results__left > *,
.om-results__cards > *,
.om-result-card > *,
.om-result-card__body > * {
	margin-block-start: 0 !important;
}

/* =========================================================
   11. Sección Por qué OM — fondo cloud + 2 columnas + 4 stat cards oscuras
   ========================================================= */

.om-why {
	background: var(--om-cloud);
	padding: 120px 0 !important;
	position: relative;
	overflow: hidden;
}

@media (max-width: 600px) {
	.om-why { padding: 70px 0 !important; }
}

.om-why__ghost {
	position: absolute;
	left: -60px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--om-font-display);
	font-size: clamp(100px, 16vw, 200px);
	font-weight: 900;
	color: rgba(1, 58, 91, .04);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.05em;
	line-height: 1;
	white-space: nowrap;
}

.om-why__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.om-why__left { }

.om-why__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 24px;
}

.om-why__label::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-why__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--om-navy);
	margin: 0 0 18px;
}

.om-why__h2 strong { font-weight: 700; }

.om-why__body {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.80;
	color: rgba(1, 58, 91, .55);
	max-width: 460px;
	margin: 0 0 28px;
}

.om-why__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--om-navy);
	border-bottom: 1px solid rgba(1, 58, 91, .25);
	padding-bottom: 4px;
	text-decoration: none;
	transition: color var(--om-trans), border-color var(--om-trans), gap var(--om-trans);
}

.om-why__link:hover {
	color: var(--om-blue);
	border-color: var(--om-blue);
	gap: 14px;
}

.om-why__link svg { width: 13px; height: 13px; }

/* Grid de stat cards oscuras */
.om-why__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.om-stat-card {
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(1, 58, 91, .10);
	border-radius: 22px;
	padding: 32px 28px 30px;
	transition: transform var(--om-trans), border-color var(--om-trans), box-shadow var(--om-trans), background var(--om-trans);
}

.om-stat-card:hover {
	transform: translateY(-4px);
	border-color: rgba(84, 173, 197, .35);
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 16px 40px rgba(1, 58, 91, .12);
}

.om-stat-card__num {
	font-family: var(--om-font-display);
	font-size: clamp(26px, 2.4vw, 36px);
	font-weight: 400;
	line-height: 1;
	color: var(--om-navy);
	margin: 0 0 12px;
	letter-spacing: -.02em;
}

.om-stat-card__num small {
	font-size: 14px;
	font-weight: 600;
	color: var(--om-navy);
	margin-left: 5px;
	letter-spacing: 0;
}

.om-stat-card__desc {
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(1, 58, 91, .55);
	margin: 0;
}

@media (max-width: 992px) {
	.om-why__inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
	.om-why__body { max-width: none; }
}

@media (max-width: 600px) {
	.om-why { padding: 70px 0 80px; }
	.om-why__inner { padding: 0 24px; }
	.om-why__cards { grid-template-columns: 1fr; }
	.om-stat-card { padding: 24px 20px 22px; }
}

/* Reset margin-block-start de hijos */
.om-why__inner > *,
.om-why__left > *,
.om-why__cards > *,
.om-stat-card > * {
	margin-block-start: 0 !important;
}

/* =========================================================
   12. Sección Clientes — fondo blanco + grid 4×6 con marcas
   ========================================================= */

.om-clients {
	background: var(--om-white);
	padding: 100px 0 120px;
	position: relative;
	overflow: hidden;
}

.om-clients__ghost {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--om-font-display);
	font-size: clamp(40px, 13vw, 200px);
	font-weight: 900;
	white-space: nowrap;
	color: rgba(1, 58, 91, .025);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.04em;
	line-height: 1;
	max-width: 100vw;
	overflow: hidden;
}

.om-clients__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 72px 40px 0;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 72px;
	align-items: start;
}

.om-clients__left { }

.om-clients__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 20px;
}

.om-clients__label::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-clients__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--om-navy);
	margin: 0 0 20px;
}

.om-clients__h2 strong { font-weight: 700; }

.om-clients__body {
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(1, 58, 91, .55);
	margin: 0;
}

.om-clients__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
}

.om-client-item {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--om-off);
	border: 1px solid var(--om-border);
	transition: background var(--om-trans);
	padding: 14px 18px;
	overflow: hidden;
}

.om-client-item:hover {
	background: var(--om-cloud);
}

.om-client-item img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: grayscale(100%);
	opacity: 0.65;
	transition: filter var(--om-trans), opacity var(--om-trans);
}

.om-client-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* Esquinas redondeadas del grid */
.om-client-item:first-child       { border-radius: 18px 0 0 0; }
.om-client-item:nth-child(4)      { border-radius: 0 18px 0 0; }
.om-client-item:nth-last-child(4) { border-radius: 0 0 0 18px; }
.om-client-item:last-child        { border-radius: 0 0 18px 0; }

@media (max-width: 992px) {
	.om-clients__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 40px 24px 0; }
	.om-clients__left { min-width: 0; max-width: 100%; }
	.om-clients__grid { grid-template-columns: repeat(3, 1fr); }
	/* Resetear todos los radii primero */
	.om-client-item { border-radius: 0; }
	.om-client-item:first-child       { border-radius: 18px 0 0 0; }
	.om-client-item:nth-child(3)      { border-radius: 0 18px 0 0; }
	.om-client-item:nth-last-child(3) { border-radius: 0 0 0 18px; }
	.om-client-item:last-child        { border-radius: 0 0 18px 0; }
	/* Resetear los que eran para 4 columnas */
	.om-client-item:nth-child(4)      { border-radius: 0; }
	.om-client-item:nth-last-child(4) { border-radius: 0; }
}

@media (max-width: 600px) {
	.om-clients { padding: 70px 0 80px; overflow: hidden; }
	.om-clients__inner {
		padding: 0 20px;
		max-width: 100vw;
		box-sizing: border-box;
	}
	.om-clients__left {
		min-width: 0;
		max-width: 100%;
	}
	/* Ghost text + título responsive en móvil. */
	.om-clients__ghost { font-size: clamp(40px, 14vw, 70px); }
	.om-clients__h2 {
		font-size: clamp(20px, 5.5vw, 26px) !important;
		line-height: 1.2 !important;
		max-width: 100% !important;
		overflow-wrap: break-word !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
		hyphens: auto;
		white-space: normal !important;
	}
	.om-clients__h2 strong { display: inline; }
	.om-clients__label { font-size: 10px; }
	.om-clients__body {
		font-size: 13px;
		line-height: 1.6;
		max-width: 100%;
		overflow-wrap: break-word;
	}

	/* En móvil: scroll horizontal manual con snap (más reliable que marquee CSS,
	   especialmente en iOS Safari donde la animación falla). El usuario desliza
	   con el dedo para ver todos los logos. */
	.om-clients .om-clients__grid {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		width: auto !important;
		animation: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -20px;
		padding: 0 20px;
	}
	.om-clients .om-clients__grid::-webkit-scrollbar { display: none; }
	.om-clients .om-client-item {
		flex: 0 0 45vw;
		aspect-ratio: 16 / 10;
		padding: 16px 22px;
		border-radius: 0 !important;
		border-top: 1px solid var(--om-border);
		border-bottom: 1px solid var(--om-border);
		border-left: 0;
		border-right: 0;
		background: var(--om-off);
		scroll-snap-align: start;
	}
	.om-clients .om-client-item img {
		opacity: 0.85;
		filter: grayscale(50%);
	}
}

@keyframes om-clients-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reset margin-block-start de hijos */
.om-clients__inner > *,
.om-clients__left > *,
.om-clients__grid > * {
	margin-block-start: 0 !important;
}

/* =========================================================
   12.5. Page Hero — cabecera compacta para páginas interiores
   ========================================================= */

.om-page-hero {
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	padding: 100px 0;
	position: relative;
	overflow: hidden;
	color: var(--om-white);
}

/* Imagen de fondo opcional + overlay navy */
.om-page-hero--with-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--om-page-hero-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}
.om-page-hero--with-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1,58,91,.72) 0%, rgba(2,27,40,.78) 100%);
	z-index: 0;
}

.om-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}

.om-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 14px;
}

/* Breadcrumbs — generados por shortcode [om_breadcrumbs] */
.om-breadcrumbs {
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	letter-spacing: .02em;
}

/* Barra independiente del breadcrumb (sección entre hero y siguiente bloque) */
.om-breadcrumb-bar {
	background: var(--om-white) !important;
	padding: 16px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--om-border);
}
.om-breadcrumb-bar > * { margin-block-start: 0 !important; }

.om-breadcrumb-bar .om-breadcrumbs {
	max-width: 1400px;
	margin: 0 auto !important;
	padding: 0 40px;
	display: flex;
}

/* Cuando el breadcrumb vive dentro de la barra, aplicar estilos light automáticamente */
.om-breadcrumb-bar .om-breadcrumbs a,
.om-breadcrumb-bar .om-breadcrumbs span {
	color: rgba(1, 58, 91, .55);
}
.om-breadcrumb-bar .om-breadcrumbs a:hover,
.om-breadcrumb-bar .om-breadcrumbs span[aria-current="page"] {
	color: var(--om-navy);
}
.om-breadcrumb-bar .om-breadcrumbs__sep {
	color: rgba(1, 58, 91, .25);
}

@media (max-width: 600px) {
	.om-breadcrumb-bar .om-breadcrumbs { padding: 0 24px; }
}

.om-breadcrumbs a,
.om-breadcrumbs span {
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
	transition: color var(--om-trans);
}

.om-breadcrumbs a:hover {
	color: var(--om-white);
}

.om-breadcrumbs span[aria-current="page"] {
	color: var(--om-white);
}

.om-breadcrumbs__sep {
	color: rgba(255, 255, 255, .25);
	font-size: 11px;
}

/* Variante sobre fondo claro (cuando no está dentro del page-hero navy) */
.om-breadcrumbs--light a,
.om-breadcrumbs--light span {
	color: rgba(1, 58, 91, .55);
}
.om-breadcrumbs--light a:hover,
.om-breadcrumbs--light span[aria-current="page"] {
	color: var(--om-navy);
}
.om-breadcrumbs--light .om-breadcrumbs__sep {
	color: rgba(1, 58, 91, .25);
}

.om-page-hero__eyebrow::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-page-hero__h1 {
	font-family: var(--om-font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 24px !important;
	padding-top: 0;
}

.om-page-hero__h1 strong { font-weight: 700; }
.om-page-hero__h1 em {
	font-style: normal;
	color: var(--om-blue);
}

.om-page-hero__body {
	font-family: var(--om-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, .65);
	max-width: 640px;
	margin: 0 auto;
}

.om-page-hero__inner > * { margin-block-start: 0 !important; }

@media (max-width: 992px) {
	.om-page-hero { padding: 80px 0; }
	.om-page-hero__inner { padding: 0 24px; }
}

@media (max-width: 600px) {
	.om-page-hero { padding: 60px 0; }
	.om-page-hero__inner { padding: 0 24px; }
	.om-page-hero__body { font-size: 14px; }
}

/* =========================================================
   12.6. Bloque categorías — 3 cards verticales con foto + título + CTA
   ========================================================= */

.om-categories {
	background: var(--om-white);
	padding: 100px 0 !important;
	position: relative;
	overflow: hidden;
}

.om-categories__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Si solo hay 2 cards: grid de 2 columnas centradas */
.om-categories__grid:has(> .om-category-card:nth-child(2):last-child),
.om-categories__grid:has(> .om-catalog-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

/* =========================================================
   12.5.A  Variante CLARA del bloque Beneficios
   ========================================================= */

.om-benefits.om-benefits--light {
	background-color: var(--om-cloud) !important;
	background-image: none !important;
}

/* Conócenos (ES 16, EN 494, FR 496): sección "Lo que nos define cada día"
   (clase `om-benefits--valores` añadida explícitamente al bloque en BD) con
   foto de fondo `nuestros-valores.webp`. Specificity alta para sobreescribir
   la regla genérica `.page-id-X .om-benefits:not(--light)` con conocenos.webp. */
body.page-id-16 section.om-benefits.om-benefits--valores,
body.page-id-494 section.om-benefits.om-benefits--valores,
body.page-id-496 section.om-benefits.om-benefits--valores {
	background-image: url('/wp-content/uploads/nuestros-valores.webp') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* Conócenos (ES id 16, EN id 494, FR id 496): imagen específica para la sección Propósito.
   Excluimos la variante `--light` (sección Valores con cards blancos) que debe quedar SIN imagen. */
.page-id-16 .om-benefits:not(.om-benefits--light),
.page-id-494 .om-benefits:not(.om-benefits--light),
.page-id-496 .om-benefits:not(.om-benefits--light) {
	background-image: url('/wp-content/uploads/conocenos.webp') !important;
}

/* Soluciones (ES id 17, EN id 490, FR id 492): imagen "Por qué OM Retail". */
.page-id-17 .om-benefits:not(.om-benefits--light),
.page-id-490 .om-benefits:not(.om-benefits--light),
.page-id-492 .om-benefits:not(.om-benefits--light) {
	background-image: url('/wp-content/uploads/porque-om-retail.webp') !important;
}

/* Visual Merchandising sub-página (ES 120, EN 503, FR 505): imagen específica de Beneficios. */
.page-id-120 .om-benefits:not(.om-benefits--light),
.page-id-503 .om-benefits:not(.om-benefits--light),
.page-id-505 .om-benefits:not(.om-benefits--light) {
	background-image: url('/wp-content/uploads/beneficios-visual-merchandising.webp') !important;
}

/* PLV sub-página (ES 173, EN 508, FR 510): imagen "Por qué OM". */
.page-id-173 .om-benefits:not(.om-benefits--light),
.page-id-508 .om-benefits:not(.om-benefits--light),
.page-id-510 .om-benefits:not(.om-benefits--light) {
	background-image: url('/wp-content/uploads/plv-por-que-om.webp') !important;
}
.om-benefits.om-benefits--light::before,
.om-benefits.om-benefits--light::after {
	display: none !important;
}
.om-benefits--light .om-benefits__eyebrow {
	color: var(--om-blue);
}
.om-benefits--light .om-benefits__eyebrow::before {
	background: var(--om-blue);
}
.om-benefits--light .om-benefits__h2,
.om-benefits--light .om-benefits__h2 strong {
	color: var(--om-navy);
}
.om-benefits--light .om-benefit-card {
	background: var(--om-white) !important;
	box-shadow: 0 8px 24px rgba(1, 58, 91, .08);
	border: 1px solid var(--om-border);
}
.om-benefits--light .om-benefit-card__title,
.om-benefits--light .om-benefit-card__title strong {
	color: var(--om-navy);
}
.om-benefits--light .om-benefit-card__title em {
	color: var(--om-blue);
}
.om-benefits--light .om-benefit-card__desc {
	color: rgba(1, 58, 91, .55);
}

/* =========================================================
   12.5.B  Variantes adicionales del grid de Beneficios
   ========================================================= */

/* 5 cards (Valores) — 5 columnas en desktop, 3+2 en tablet, 2 en tablet pequeña */
.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(5):last-child) {
	grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 1200px) {
	.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(5):last-child) {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 992px) {
	.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(5):last-child) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* 2 cards (Propósito: Misión / Visión) — 2 columnas centradas */
.om-benefits .om-benefits__cards:has(> .om-benefit-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr) !important;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
   12.5.C  Sección Manifesto — gran tagline centrada con ghost text
   ========================================================= */

.om-statement {
	background: var(--om-white);
	padding: 140px 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.om-statement__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--om-font-display);
	font-size: clamp(100px, 18vw, 260px);
	font-weight: 900;
	white-space: nowrap;
	color: rgba(1, 58, 91, .03);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.05em;
	line-height: 1;
}

.om-statement__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-statement__h2 {
	font-family: var(--om-font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--om-navy);
	margin: 0;
}
.om-statement__h2 strong {
	font-weight: 700;
	display: block;
}
.om-statement__h2 em {
	font-style: normal;
	color: var(--om-blue);
}

.om-statement__inner > * { margin-block-start: 0 !important; }

@media (max-width: 600px) {
	.om-statement { padding: 90px 0; }
	.om-statement__inner { padding: 0 24px; }
}

/* =========================================================
   12.6.A  Sección Proceso (4 pasos numerados con timeline)
   ========================================================= */

.om-process {
	background: var(--om-white);
	padding: 120px 0 !important;
	position: relative;
	overflow: hidden;
}

.om-process__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-process__top {
	text-align: center;
	margin-bottom: 64px;
}

.om-process__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 20px;
}
.om-process__eyebrow::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-process__h2 {
	font-family: var(--om-font-display);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--om-navy);
	margin: 0;
}
.om-process__h2 strong { font-weight: 700; }

.om-process__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
}
/* Línea horizontal que conecta los círculos */
.om-process__steps::before {
	content: '';
	position: absolute;
	top: 28px;
	left: 12.5%;
	right: 12.5%;
	height: 1px;
	background: linear-gradient(to right, var(--om-blue) 0%, var(--om-blue) 50%, rgba(84,173,197,.15) 100%);
	z-index: 0;
}

.om-process-step {
	position: relative;
	z-index: 1;
	text-align: center;
	background: var(--om-white);
	padding: 0 16px;
}

.om-process-step__num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--om-white);
	border: 2px solid var(--om-blue);
	color: var(--om-blue);
	font-family: var(--om-font-display);
	font-size: 18px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.om-process-step:hover .om-process-step__num {
	background: var(--om-blue);
	color: var(--om-white);
	transform: scale(1.06);
}

.om-process-step__title {
	font-family: var(--om-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--om-navy);
	margin: 0 0 12px;
	line-height: 1.2;
}

.om-process-step__desc {
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(1, 58, 91, .55);
	margin: 0;
}

@media (max-width: 992px) {
	.om-process { padding: 80px 0 !important; }
	.om-process__inner { padding: 0 24px; }
	.om-process__steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.om-process__steps::before { display: none; }
}

@media (max-width: 600px) {
	.om-process__steps { grid-template-columns: 1fr; gap: 32px; }
}

.om-process__inner > *,
.om-process__top > *,
.om-process__steps > *,
.om-process-step > * {
	margin-block-start: 0 !important;
}

/* =========================================================
   12.6.B  Card de catálogo — foto + título + botón
   ========================================================= */

.om-catalog-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none !important;
	color: var(--om-navy);
	padding: 0;
	background: transparent;
	height: 100%;
}

/* Botón siempre alineado abajo independientemente del largo del título */
.om-catalog-card__cta {
	margin-top: auto;
}

.om-catalog-card__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 28px;
	box-shadow: 0 24px 48px rgba(1, 58, 91, .12);
	transition: transform .35s ease, box-shadow .35s ease;
	background: var(--om-cloud);
}
.om-catalog-card:hover .om-catalog-card__image {
	transform: translateY(-6px);
	box-shadow: 0 32px 64px rgba(1, 58, 91, .20);
}
.om-catalog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.om-catalog-card:hover .om-catalog-card__image img {
	transform: scale(1.04);
}

.om-catalog-card__title {
	font-family: var(--om-font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 300;
	line-height: 1.2;
	color: var(--om-navy);
	margin: 0 0 22px;
	max-width: 320px;
}
.om-catalog-card__title strong { font-weight: 700; }

.om-catalog-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	color: var(--om-white) !important;
	background: var(--om-blue);
	padding: 13px 26px;
	border-radius: 100px;
	transition: background var(--om-trans), transform var(--om-trans), gap var(--om-trans);
}
.om-catalog-card:hover .om-catalog-card__cta {
	background: #3f8fa6;
	transform: translateY(-1px);
	gap: 13px;
}
.om-catalog-card__cta svg { width: 13px; height: 13px; }

.om-category-card {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 4 / 5;
	display: block;
	color: var(--om-white);
	text-decoration: none !important;
	transition: transform .35s ease;
	cursor: pointer;
}
.om-category-card:hover { transform: translateY(-6px); }

.om-category-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.om-category-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s ease;
}
.om-category-card:hover .om-category-card__image img {
	transform: scale(1.06);
}

.om-category-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2,27,40,.10) 0%, rgba(2,27,40,.85) 100%);
	z-index: 1;
}

.om-category-card__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 36px 32px;
}

.om-category-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 12px;
}
.om-category-card__eyebrow::before {
	content: '';
	width: 20px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-category-card__title {
	font-family: var(--om-font-display);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--om-white);
	margin: 0 0 22px;
}
.om-category-card__title strong { font-weight: 700; }

.om-category-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	color: var(--om-white) !important;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.30);
	padding: 11px 22px;
	border-radius: 100px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background .25s ease, border-color .25s ease, gap .25s ease;
}
.om-category-card:hover .om-category-card__cta {
	background: var(--om-white);
	color: var(--om-navy) !important;
	border-color: var(--om-white);
	gap: 14px;
}
.om-category-card__cta svg { width: 13px; height: 13px; }

@media (max-width: 992px) {
	.om-categories { padding: 70px 0 !important; }
	.om-categories__inner { padding: 0 24px; }
	.om-categories__grid,
	.om-categories__grid:has(> .om-category-card:nth-child(2):last-child),
	.om-categories__grid:has(> .om-catalog-card:nth-child(2):last-child) {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		max-width: 100% !important;
	}
	.om-category-card { aspect-ratio: 16 / 10; }
}

/* =========================================================
   12.7. Bloque destacado de producto (Duplo) — fondo navy + 2 columnas
   ========================================================= */

.om-feature {
	background-color: var(--om-navy);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	padding: 100px 0;
	position: relative;
	overflow: hidden;
	color: var(--om-white);
}

.om-feature__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: stretch;
}

.om-feature__text { }

.om-feature__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 20px;
}
.om-feature__eyebrow::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}

.om-feature__h2 {
	font-family: var(--om-font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 24px;
}
.om-feature__h2 strong { font-weight: 700; }
.om-feature__h2 em {
	font-style: normal;
	color: var(--om-blue);
}

.om-feature__body {
	font-family: var(--om-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, .65);
	margin: 0 0 36px;
	max-width: 480px;
}

.om-feature__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

/* Visual — caja blanca con sombra que destaca el producto */
.om-feature__visual {
	position: relative;
	background: var(--om-white);
	border-radius: 24px;
	padding: 60px 40px;
	min-height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	overflow: hidden;
}

/* Variante --photo: la imagen llena toda la caja (foto a sangre, sin padding) */
.om-feature__visual--photo {
	padding: 0;
	background: transparent;
}
.om-feature__visual--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.om-feature__visual img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .5s ease;
}
.om-feature:hover .om-feature__visual img {
	transform: scale(1.04);
}

/* Reset margin-block-start de hijos */
.om-feature__inner > *,
.om-feature__text > * {
	margin-block-start: 0 !important;
}

@media (max-width: 992px) {
	.om-feature { padding: 70px 0; }
	.om-feature__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 0 24px;
	}
	.om-feature__visual {
		padding: 20px;
		min-height: 0;
		aspect-ratio: 4 / 3;
		width: 100%;
	}
	.om-feature__visual--photo {
		aspect-ratio: 4 / 3;
		padding: 0;
	}
	.om-feature__visual img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

@media (max-width: 600px) {
	.om-feature__visual {
		padding: 16px;
		aspect-ratio: 1 / 1;
	}
	.om-feature__visual--photo { aspect-ratio: 1 / 1; }
	.om-feature__actions { flex-direction: column; align-items: stretch; }
	.om-feature__actions .om-btn { justify-content: center; }
}

/* =========================================================
   12.8. Bloque Conecta — fondo navy con líneas separadoras
   ========================================================= */

.om-connect {
	background-color: var(--om-deep);
	background-image: url('/wp-content/uploads/conecta-marca-publico-casos-exito.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 100px 0;
	position: relative;
	overflow: hidden;
	color: var(--om-white);
	text-align: center;
}

/* Overlay navy con transparencia + patrón sutil sobre la imagen */
.om-connect::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(2,27,40,.82) 0%, rgba(2,27,40,.92) 100%),
		url('assets/images/patron-tile.svg') center / 220px 135px round;
	pointer-events: none;
	z-index: 0;
}

.om-connect__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 40px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.om-connect__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
	transition: background var(--om-trans), transform var(--om-trans), border-color var(--om-trans);
	cursor: pointer;
}
.om-connect__icon:hover {
	background: rgba(255, 255, 255, .10);
	border-color: var(--om-white);
	transform: scale(1.08);
}
.om-connect__icon svg {
	width: 22px;
	height: 22px;
	color: var(--om-white);
	margin-left: 3px;
}

.om-connect__h2 {
	font-family: var(--om-font-display);
	font-size: clamp(30px, 4.2vw, 52px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 20px;
}
.om-connect__h2 strong { font-weight: 700; }
.om-connect__h2 em {
	font-style: normal;
	color: var(--om-blue);
}

.om-connect__body {
	font-family: var(--om-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, .65);
	max-width: 640px;
	margin: 0 auto 36px;
}

.om-connect__inner > * { margin-block-start: 0 !important; }

@media (max-width: 992px) {
	.om-connect { padding: 70px 0; }
	.om-connect__inner { padding: 50px 24px; }
}

/* =========================================================
   12.9. Blog — listado (archive) y single post
   ========================================================= */

/* ---------- ARCHIVE (lista de posts) ---------- */

.om-archive {
	background: var(--om-white);
	padding: 70px 0 120px;
}
.om-archive__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---------- FEATURED POST (el más reciente) — solo en home del blog ---------- */
.om-featured-post {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: center;
	background: var(--om-cloud);
	border-radius: 28px;
	overflow: hidden;
	margin-bottom: 70px;
	text-decoration: none !important;
	color: var(--om-navy);
	transition: transform .35s ease, box-shadow .35s ease;
}
.om-featured-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(1, 58, 91, .12);
}
.om-featured-post__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.om-featured-post__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s ease;
}
.om-featured-post:hover .om-featured-post__image img {
	transform: scale(1.06);
}
.om-featured-post__body {
	padding: 48px 56px 48px 0;
}
.om-featured-post__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-orange);
	background: rgba(231, 89, 5, .12);
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: 18px;
}
.om-featured-post__cat {
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 12px;
	display: block;
}
.om-featured-post__title {
	font-family: var(--om-font-display);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--om-navy);
	margin: 0 0 18px;
	transition: color var(--om-trans);
}
.om-featured-post:hover .om-featured-post__title { color: var(--om-blue); }
.om-featured-post__excerpt {
	font-family: var(--om-font-display);
	font-size: 15px;
	line-height: 1.7;
	color: rgba(1, 58, 91, .65);
	margin: 0 0 24px;
}
.om-featured-post__meta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--om-navy);
}
.om-featured-post__meta svg {
	width: 13px; height: 13px;
	transition: transform var(--om-trans);
}
.om-featured-post:hover .om-featured-post__meta svg {
	transform: translateX(4px);
	color: var(--om-blue);
}

/* ---------- FILTROS DE CATEGORÍAS ---------- */
.om-archive__filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 48px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--om-border);
}
.om-archive__filter {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--om-navy);
	background: transparent;
	border: 1px solid var(--om-border);
	padding: 9px 18px;
	border-radius: 100px;
	text-decoration: none !important;
	transition: background var(--om-trans), color var(--om-trans), border-color var(--om-trans);
}
.om-archive__filter:hover {
	background: var(--om-cloud);
	border-color: var(--om-blue);
	color: var(--om-blue);
}
.om-archive__filter.is-active {
	background: var(--om-navy);
	color: var(--om-white) !important;
	border-color: var(--om-navy);
}

/* ---------- GRID DE POSTS ---------- */
.om-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 28px;
}

/* ---------- PAGINACIÓN ---------- */
.om-archive .pagination,
.om-archive .nav-links {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	gap: 8px;
	font-family: var(--om-font-display);
}
.om-archive .pagination a,
.om-archive .pagination span,
.om-archive .nav-links a,
.om-archive .nav-links span {
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 100px;
	color: var(--om-navy);
	text-decoration: none !important;
	transition: background var(--om-trans);
}
.om-archive .pagination a:hover,
.om-archive .nav-links a:hover {
	background: var(--om-cloud);
	color: var(--om-blue);
}
.om-archive .pagination .current,
.om-archive .nav-links .current {
	background: var(--om-navy);
	color: var(--om-white);
}

@media (max-width: 992px) {
	.om-archive__inner { padding: 0 24px; }
	.om-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
	.om-featured-post { grid-template-columns: 1fr; gap: 0; margin-bottom: 50px; }
	.om-featured-post__image { aspect-ratio: 16 / 9; }
	.om-featured-post__body { padding: 32px 28px 36px; }
}
@media (max-width: 600px) {
	.om-archive { padding: 50px 0 80px; }
	.om-archive__grid { grid-template-columns: 1fr; gap: 32px; }
	.om-featured-post { border-radius: 18px; }
}

.om-post-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	text-decoration: none !important;
	color: inherit;
}
.om-post-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px;
	margin-bottom: 18px;
	background: var(--om-cloud);
}
.om-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.om-post-card:hover .om-post-card__image img {
	transform: scale(1.05);
}
.om-post-card__cat {
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.om-post-card__cat::before {
	content: '';
	width: 18px;
	height: 1.5px;
	background: var(--om-blue);
}
.om-post-card__title {
	font-family: var(--om-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--om-navy);
	margin: 0 0 12px;
	transition: color var(--om-trans);
}
.om-post-card:hover .om-post-card__title {
	color: var(--om-blue);
}
.om-post-card__meta {
	font-family: var(--om-font-display);
	font-size: 12px;
	color: rgba(1, 58, 91, .55);
	margin: auto 0 0;
}

/* ---------- SINGLE POST ---------- */

.om-post {
	background: var(--om-white);
	padding: 0 0 100px;
}

/* Hero del post: imagen destacada full-width con overlay y título centrado */
.om-post__hero {
	position: relative;
	width: 100%;
	min-height: 360px;
	overflow: hidden;
	background: var(--om-deep);
	color: var(--om-white);
}
.om-post__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.om-post__hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om-post__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2,27,40,.55) 0%, rgba(2,27,40,.85) 100%);
	z-index: 1;
}
.om-post__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto;
	padding: 80px 40px;
	text-align: center;
}
.om-post__cat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 20px;
	text-decoration: none !important;
}
.om-post__cat::before {
	content: '';
	width: 24px;
	height: 1.5px;
	background: var(--om-blue);
}
.om-post__title {
	font-family: var(--om-font-display);
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 24px;
}
.om-post__meta {
	font-family: var(--om-font-display);
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
	display: inline-flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Contenido del post */
.om-post__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 70px 40px 0;
	font-family: var(--om-font-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(1, 58, 91, .85);
}
.om-post__body h2 {
	font-family: var(--om-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--om-navy);
	margin: 56px 0 20px;
}
.om-post__body h3 {
	font-family: var(--om-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--om-navy);
	margin: 40px 0 16px;
}
.om-post__body h4 {
	font-family: var(--om-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--om-navy);
	margin: 32px 0 14px;
}
.om-post__body p { margin: 0 0 22px; }
.om-post__body a {
	color: var(--om-blue);
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
.om-post__body a:hover {
	color: var(--om-navy);
}
.om-post__body strong { font-weight: 700; color: var(--om-navy); }
.om-post__body ul,
.om-post__body ol { margin: 0 0 22px; padding-left: 24px; }
.om-post__body li { margin: 0 0 10px; }
.om-post__body img,
.om-post__body figure {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 32px 0;
}
.om-post__body figure img { margin: 0; }
.om-post__body figcaption {
	font-size: 13px;
	color: rgba(1, 58, 91, .55);
	margin-top: 8px;
	text-align: center;
}
.om-post__body blockquote {
	border-left: 3px solid var(--om-blue);
	padding-left: 24px;
	margin: 32px 0;
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	color: var(--om-navy);
	line-height: 1.4;
}

@media (max-width: 992px) {
	.om-post__hero { min-height: 300px; }
	.om-post__hero-inner { padding: 60px 24px; }
	.om-post__body { padding: 50px 24px 0; font-size: 16px; }
}

/* Footer del post — categorías y tags + back to blog */
.om-post__footer {
	max-width: 760px;
	margin: 60px auto 0;
	padding: 0 40px 80px;
}
.om-post__taxonomies {
	display: flex;
	gap: 12px 16px;
	flex-wrap: wrap;
	align-items: center;
	padding: 32px 0;
	border-top: 1px solid var(--om-border);
	border-bottom: 1px solid var(--om-border);
	margin-bottom: 40px;
}
.om-post__tax-label {
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.om-post__tax-item {
	font-family: var(--om-font-display);
	font-size: 13px;
	color: var(--om-navy);
	background: var(--om-cloud);
	padding: 6px 14px;
	border-radius: 100px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: background var(--om-trans), color var(--om-trans);
}
.om-post__tax-item:hover {
	background: var(--om-blue);
	color: var(--om-white);
}
.om-post__back {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--om-navy);
	text-decoration: none !important;
	transition: color var(--om-trans), gap var(--om-trans);
}
.om-post__back:hover {
	color: var(--om-blue);
	gap: 14px;
}
.om-post__back svg { width: 13px; height: 13px; }

@media (max-width: 992px) {
	.om-post__footer { padding: 0 24px; margin-top: 40px; }
}

@media (max-width: 600px) {
	.om-post__footer { padding: 0 20px 60px; }
	/* Taxonomías: grid forzado 2 col alineadas. */
	.om-post__taxonomies {
		display: grid !important;
		grid-template-columns: max-content 1fr !important;
		row-gap: 12px !important;
		column-gap: 14px !important;
		padding: 24px 0 !important;
		margin-bottom: 28px !important;
		align-items: center !important;
		flex-wrap: unset !important;
		justify-content: flex-start !important;
	}
	.om-post__tax-label {
		font-size: 10px !important;
		letter-spacing: .12em !important;
		white-space: nowrap !important;
		justify-self: flex-start !important;
		text-align: left !important;
		margin: 0 !important;
	}
	.om-post__tax-item {
		font-size: 12px !important;
		padding: 5px 12px !important;
		justify-self: flex-start !important;
		margin: 0 !important;
	}
	.om-post__back {
		font-size: 13px;
		padding: 12px 0;
	}
}

/* =========================================================
   13. CTA final — gradient navy
   ========================================================= */

.om-cta {
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	padding: 100px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.om-cta__ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--om-font-display);
	font-size: clamp(80px, 14vw, 220px);
	font-weight: 900;
	white-space: nowrap;
	color: rgba(255, 255, 255, .04);
	user-select: none;
	pointer-events: none;
	letter-spacing: -.04em;
	line-height: 1;
}

.om-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-cta__h2 {
	font-family: var(--om-font-display);
	font-size: clamp(28px, 4vw, 56px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--om-white);
	margin: 0 0 18px;
}

.om-cta__h2 strong { font-weight: 700; }

.om-cta__body {
	font-family: var(--om-font-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, .55);
	margin: 0 auto 44px;
	max-width: 460px;
}

.om-cta__btns {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.om-btn--white {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 400;
	background: var(--om-white);
	color: var(--om-navy) !important;
	padding: 16px 32px;
	border-radius: 100px;
	text-decoration: none !important;
	transition: transform var(--om-trans), box-shadow var(--om-trans);
}
.om-btn--white:hover,
.om-btn--white:focus {
	text-decoration: none !important;
}

.om-btn--white:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
}

.om-btn--white svg { width: 13px; height: 13px; }

.om-btn--ghost-white {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, .85) !important;
	border: 1px solid rgba(255, 255, 255, .30);
	background: transparent;
	padding: 16px 32px;
	border-radius: 100px;
	text-decoration: none;
	transition: color var(--om-trans), border-color var(--om-trans);
}

.om-btn--ghost-white:hover {
	color: var(--om-white) !important;
	border-color: rgba(255, 255, 255, .60);
}

/* Variante CLARA del CTA */
.om-cta.om-cta--light {
	background-color: var(--om-white);
	background-image: none;
}
.om-cta--light .om-cta__ghost {
	color: rgba(1, 58, 91, .04);
}
.om-cta--light .om-cta__h2,
.om-cta--light .om-cta__h2 strong {
	color: var(--om-navy);
}
.om-cta--light .om-cta__body {
	color: rgba(1, 58, 91, .55);
}
.om-cta--light .om-btn--white {
	background: var(--om-orange);
	color: var(--om-white) !important;
}
.om-cta--light .om-btn--white:hover {
	background: #c94d04;
	box-shadow: 0 12px 36px rgba(231,89,5,.30);
}
.om-cta--light .om-btn--ghost-white {
	color: var(--om-navy) !important;
	border-color: rgba(1, 58, 91, .25);
}
.om-cta--light .om-btn--ghost-white:hover {
	color: var(--om-navy) !important;
	border-color: var(--om-navy);
}

/* Carrusel — sin separación top/bottom con secciones adyacentes */
.om-carousel.wp-block-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
:where(.wp-site-blocks) > .om-carousel,
.om-carousel + * {
	margin-block-start: 0 !important;
}

.om-cta__inner > * {
	margin-block-start: 0 !important;
}

@media (max-width: 600px) {
	.om-cta { padding: 70px 0; }
	.om-cta__inner { padding: 0 24px; }
}

/* =========================================================
   14. Footer site-wide — fondo blanco con 4 columnas
   ========================================================= */

.om-footer {
	background: var(--om-white);
	padding: 70px 0 36px;
	color: var(--om-navy);
}

.om-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

.om-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
}

.om-footer__brand-logo {
	display: inline-flex;
	margin-bottom: 18px;
}
.om-footer__brand-logo img { height: 36px; width: auto; display: block; }

.om-footer__claim {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(1, 58, 91, .55);
	max-width: 300px;
	margin: 0;
}

.om-footer__col h4 {
	font-family: var(--om-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--om-blue);
	margin: 0 0 18px;
}

.om-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.om-footer__col a {
	font-family: var(--om-font-display);
	font-size: 13px;
	font-weight: 400;
	color: rgba(1, 58, 91, .65);
	text-decoration: none;
	transition: color var(--om-trans);
}
.om-footer__col a:hover { color: var(--om-blue); }

.om-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid var(--om-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.om-footer__bottom p {
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 400;
	color: rgba(1, 58, 91, .45);
	margin: 0;
}

.om-footer__legal {
	display: flex;
	gap: 18px;
}

.om-footer__legal a {
	font-family: var(--om-font-display);
	font-size: 12px;
	font-weight: 400;
	color: rgba(1, 58, 91, .45);
	text-decoration: none;
	transition: color var(--om-trans);
}
.om-footer__legal a:hover { color: var(--om-blue); }

@media (max-width: 992px) {
	.om-footer__inner { padding: 0 24px; }
	.om-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Footer compacto en móvil */
@media (max-width: 600px) {
	.om-footer { padding: 40px 0 24px; }
	.om-footer__inner { padding: 0 20px; }
	.om-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px 16px;
		margin-bottom: 28px;
	}
	.om-footer__brand {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}
	.om-footer__brand-logo { margin-bottom: 12px; }
	.om-footer__brand-logo img { height: 30px; }
	.om-footer__claim {
		font-size: 12px;
		line-height: 1.6;
		max-width: none;
	}
	.om-footer__col h4 {
		font-size: 10px;
		margin: 0 0 12px;
	}
	.om-footer__col ul { gap: 8px; }
	.om-footer__col a { font-size: 12px; }
	.om-footer__bottom {
		padding-top: 18px;
		gap: 8px;
		flex-direction: column;
		align-items: flex-start;
	}
	.om-footer__bottom p { font-size: 11px; }
	.om-footer__legal { gap: 12px; flex-wrap: wrap; }
	.om-footer__legal a { font-size: 11px; }
}

/* Anular los margins de 60px que Astra añade al #primary en pantallas >= 1200px */
@media (min-width: 1200px) {
	.ast-plain-container.ast-no-sidebar #primary,
	.ast-no-sidebar #primary,
	#primary {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* También en cualquier breakpoint, por si Astra usa otras reglas */
.ast-plain-container.ast-no-sidebar #primary,
.ast-no-sidebar #primary {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Ocultar footer por defecto de Astra cuando usamos el nuestro */
.site-below-footer-wrap,
.site-primary-footer-wrap,
.site-above-footer-wrap,
footer[itemtype="https://schema.org/WPFooter"]:not(.om-footer) {
	display: none !important;
}

/* =========================================================
   15. Anular header y títulos por defecto de Astra
   ========================================================= */

.ast-primary-header-bar,
#masthead .site-header,
.site-header.ast-primary-submenu-animation-fade .ast-primary-header-bar {
	display: none !important;
}

/* Páginas: ocultar título y franja superior */
.page .entry-header,
.page .entry-title,
.page .ast-page-header-section,
.page .ast-single-post-banner {
	display: none !important;
}

/* En la home: que la página ocupe full-width y el hero llegue a los bordes */
.home .ast-container,
.home #primary,
.home .site-content > .ast-container {
	max-width: none;
	padding: 0;
}

.home .entry-content {
	padding-top: 0;
}

/* En single posts y casos de éxito: full-width sin huecos alrededor del hero */
.single-post .ast-container,
.single-post #primary,
.single-post .site-content > .ast-container,
.single-casos-exito .ast-container,
.single-casos-exito #primary,
.single-casos-exito .site-content > .ast-container,
.post-type-archive-casos-exito .ast-container,
.post-type-archive-casos-exito #primary,
.post-type-archive-casos-exito .site-content > .ast-container {
	max-width: none !important;
	padding: 0 !important;
}

.single-post .entry-content,
.single-casos-exito .entry-content,
.post-type-archive-casos-exito .entry-content,
.single-post .ast-article-inner,
.single-casos-exito .ast-article-inner,
.post-type-archive-casos-exito .ast-article-inner,
.single-post .ast-article-single,
.single-casos-exito .ast-article-single,
.post-type-archive-casos-exito .ast-article-single {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
}

/* Reset específico para que la cabecera del post/caso pegue al header sin gap */
.single-post .om-post,
.single-casos-exito .om-caso {
	margin-top: 0 !important;
}
.single-post .om-post > *:first-child,
.single-casos-exito .om-caso > *:first-child {
	margin-top: 0 !important;
}

/* También aplicar a archive del blog y categorías */
.blog .ast-container,
.blog #primary,
.blog .site-content > .ast-container,
.archive .ast-container,
.archive #primary,
.archive .site-content > .ast-container {
	max-width: none !important;
	padding: 0 !important;
}
.blog .entry-content,
.archive .entry-content,
.blog .ast-article-inner,
.archive .ast-article-inner {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
}

/* =========================================================
   16. Casos de éxito — single + archive
   ========================================================= */

/* Card de caso en archive */
.om-archive__grid--casos {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px) { .om-archive__grid--casos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .om-archive__grid--casos { grid-template-columns: 1fr; } }

.om-caso-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: var(--om-navy);
	box-shadow: 0 2px 12px rgba(15, 31, 60, 0.06);
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
}
.om-caso-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 31, 60, 0.14);
}
.om-caso-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f4f4f4;
}
.om-caso-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.om-caso-card:hover .om-caso-card__image img { transform: scale(1.04); }
.om-caso-card__body {
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.om-caso-card__client {
	font-family: 'Franie', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #54adc5;
}
.om-caso-card__title {
	font-family: 'Franie', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.3;
	color: var(--om-navy);
	margin: 0 !important;
}
.om-caso-card__sector {
	font-size: 13px;
	color: #6b7280;
}
.om-caso-card__cta {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Franie', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #54adc5;
}
.om-caso-card__cta svg { width: 16px; height: 16px; }

/* Single caso */
.om-caso { background: #fff; }

/* Cabecera del caso — sin imagen detrás del texto */
.om-caso__header {
	background: #fff;
	padding: 60px 0 32px;
}
.om-caso__header-inner {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px;
}
.om-caso__eyebrow {
	display: inline-block;
	font-family: 'Franie', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	background: #54adc5;
	padding: 8px 16px;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: 18px;
}
.om-caso__title {
	font-family: 'Franie', sans-serif;
	font-weight: 300;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.15;
	color: var(--om-navy);
	margin: 0 0 28px !important;
	max-width: 900px;
}
.om-caso__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 40px;
	margin: 0;
	padding-top: 6px;
	border-top: 1px solid #eef0f3;
	padding-top: 22px;
}
.om-caso__fact dt {
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 4px;
}
.om-caso__fact dd {
	margin: 0;
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--om-navy);
}

/* Imagen destacada del caso — limpia, ancho del contenido, sin texto encima */
.om-caso__featured {
	max-width: 1100px;
	margin: 8px auto 0 !important;
	padding: 0 32px;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.om-caso__featured img {
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	margin: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
}

.om-caso__body {
	max-width: 820px;
	margin: 0 auto;
	padding: 60px 32px 40px;
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--om-navy);
}
.om-caso__body h2 {
	font-family: 'Franie', sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.25;
	color: var(--om-navy);
	margin: 48px 0 18px !important;
}
.om-caso__body h3 {
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 22px;
	color: var(--om-navy);
	margin: 36px 0 14px !important;
}
.om-caso__body p { margin: 0 0 22px !important; }
.om-caso__body img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 28px 0 !important;
}
.om-caso__body figure { margin: 28px 0 !important; }
.om-caso__body a {
	color: #54adc5;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* === Galería del proyecto: carousel horizontal con flechas === */
.om-caso__gallery-wrap {
	position: relative !important;
	margin: 36px 0 !important;
	padding: 0;
	overflow: visible !important;
	display: block !important;
}

/* La galería pasa a ser un track horizontal */
.om-caso__body .wp-block-gallery {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.om-caso__body .wp-block-gallery::-webkit-scrollbar { display: none; }

/* Cada slide — DESKTOP: 2 fotos visibles */
.om-caso__body .wp-block-gallery > * { margin: 0 !important; }
.om-caso__body .wp-block-gallery .wp-block-image {
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 calc((100% - 14px) / 2) !important;
	max-width: calc((100% - 14px) / 2) !important;
	scroll-snap-align: start;
	display: block;
}
.om-caso__body .wp-block-gallery .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	margin: 0 !important;
	display: block;
	cursor: zoom-in;
	transition: transform .3s ease, box-shadow .3s ease;
}
.om-caso__body .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.02);
	box-shadow: 0 8px 20px rgba(15, 31, 60, 0.15);
}
.om-caso__body .wp-block-gallery .wp-block-image figcaption { display: none; }

/* Flechas — se inyectan con JS dentro de .om-caso__gallery-wrap */
.om-caso__gallery-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px;
	border-radius: 999px !important;
	background: #54adc5 !important;
	border: 0 !important;
	box-shadow: 0 6px 18px rgba(15, 31, 60, 0.25) !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 10;
	color: #fff !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: background .2s ease, transform .2s ease, opacity .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.om-caso__gallery-arrow svg {
	width: 22px !important;
	height: 22px !important;
	display: block;
}
.om-caso__gallery-arrow:hover {
	background: #408ea3 !important;
	color: #fff !important;
	transform: translateY(-50%) scale(1.06) !important;
}
.om-caso__gallery-arrow:disabled {
	opacity: 0.35;
	pointer-events: none;
	background: #54adc5 !important;
	color: #fff !important;
}
.om-caso__gallery-arrow--prev { left: 12px !important; right: auto !important; }
.om-caso__gallery-arrow--next { right: 12px !important; left: auto !important; }

@media (max-width: 1100px) {
	.om-caso__gallery-arrow--prev { left: 8px !important; }
	.om-caso__gallery-arrow--next { right: 8px !important; }
}

/* Tablet: sigue 2 fotos visibles */
@media (max-width: 768px) {
	.om-caso__gallery-arrow {
		width: 40px !important;
		height: 40px !important;
	}
	.om-caso__gallery-arrow svg { width: 18px !important; height: 18px !important; }
}

/* Móvil: 1 foto al 100% del contenedor (con flechas fuera por padding del wrap) */
@media (max-width: 540px) {
	.om-caso__body .wp-block-gallery .wp-block-image {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	.om-caso__gallery-arrow {
		width: 36px !important;
		height: 36px !important;
	}
	.om-caso__gallery-arrow svg { width: 16px !important; height: 16px !important; }
}

/* Body más ancho para que la galería respire */
.om-caso__body { max-width: 980px !important; }

.om-caso__soluciones {
	background: #f5fafc;
	border-left: 4px solid #54adc5;
	padding: 22px 26px;
	border-radius: 8px;
	margin: 0 0 40px !important;
}
.om-caso__sol-label {
	display: block;
	font-family: 'Franie', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #54adc5;
	margin-bottom: 8px;
}
.om-caso__soluciones p { margin: 0 !important; font-size: 16px; }

.om-caso__footer {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 32px 100px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}
.om-caso__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--om-navy);
	text-decoration: none;
	padding: 12px 0;
}
.om-caso__back svg { width: 18px; height: 18px; }
.om-caso__back:hover { color: #54adc5; }

.om-caso__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #54adc5;
	color: #fff;
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 16px;
	padding: 16px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}
.om-caso__cta:hover { background: #408ea3; color: #fff; }
.om-caso__cta svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
	.om-caso__header { padding: 40px 0 24px; }
	.om-caso__header-inner { padding: 0 20px; }
	.om-caso__featured { padding: 0 20px; }
	.om-caso__featured img { max-height: 380px; border-radius: 12px; }
	.om-caso__facts { gap: 18px 28px; }
	.om-caso__fact dd { font-size: 16px; }
	.om-caso__body { padding: 40px 20px 30px; font-size: 16px; }
	.om-caso__body h2 { font-size: 26px; }
	.om-caso__footer { padding: 0 20px 60px; }
}

/* =========================================================
   17. Megamenu — Soluciones
   ========================================================= */

/* El item de menú con megamenu necesita position relative para anclar el panel */
.om-header__menu-list .has-megamenu {
	position: static; /* permite que el megamenu ocupe todo el ancho */
}

/* Ocultar submenu por defecto cuando hay megamenu (no queremos duplicado) */
.om-header__menu-list .has-megamenu > .sub-menu {
	display: none !important;
}

/* Indicador visual (chevron) en el item con megamenu */
.om-header__menu-list .has-megamenu > a::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s ease;
	vertical-align: middle;
}
.om-header__menu-list .has-megamenu.is-open > a::after,
.om-header__menu-list .has-megamenu:hover > a::after,
.om-header__menu-list .has-megamenu:focus-within > a::after {
	transform: rotate(225deg) translateY(2px);
}

/* Botón toggle del megamenu — oculto en desktop (sólo aparece en mobile drawer). */
.om-mega-toggle { display: none; }

/* Panel megamenu: oculto por defecto */
.om-megamenu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 16px 40px rgba(15, 31, 60, 0.12);
	border-top: 1px solid #eef0f3;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 100;
}

/* Mostrar al hacer hover sobre el item o foco dentro */
.om-header__menu-list .has-megamenu:hover .om-megamenu,
.om-header__menu-list .has-megamenu:focus-within .om-megamenu,
.om-header__menu-list .has-megamenu.is-open .om-megamenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.om-megamenu__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.om-megamenu__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--om-navy);
	border: 0;
	transition: transform .25s ease, box-shadow .25s ease;
	padding: 0 !important;
	margin: 0 !important;
}
.om-megamenu__card > * {
	margin: 0 !important;
}
.om-megamenu__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 31, 60, 0.12);
}

.om-megamenu__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f4f4f4;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}
.om-megamenu__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	transition: transform .4s ease;
}
.om-megamenu__card:hover .om-megamenu__image img { transform: scale(1.05); }

.om-megamenu__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.om-megamenu__title {
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	color: var(--om-navy);
	margin: 0 !important;
}
.om-megamenu__excerpt {
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #5b6573;
	margin: 0 !important;
}
.om-megamenu__cta {
	margin-top: auto;
	padding-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #54adc5;
}
.om-megamenu__cta svg { width: 14px; height: 14px; }

/* Header transparente (home) — fondo blanco al desplegar megamenu para legibilidad */
.om-header.is-transparent .has-megamenu:hover,
.om-header.is-transparent .has-megamenu:focus-within,
.om-header.is-transparent .has-megamenu.is-open {
	/* El megamenu en sí ya es blanco, no hace falta más */
}

/* ======== MÓVIL: acordeón en lugar de overlay ======== */
@media (max-width: 992px) {
	.om-header__menu-list .has-megamenu > a::after {
		margin-left: auto;
	}
	.om-megamenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .35s ease;
	}
	.om-header__menu-list .has-megamenu.is-open .om-megamenu {
		max-height: 2000px;
	}
	/* Desactivar hover en móvil — solo click */
	.om-header__menu-list .has-megamenu:hover .om-megamenu,
	.om-header__menu-list .has-megamenu:focus-within .om-megamenu {
		max-height: 0;
	}
	.om-header__menu-list .has-megamenu.is-open .om-megamenu {
		max-height: 2000px;
	}
	.om-megamenu__inner {
		grid-template-columns: 1fr;
		padding: 16px 0 24px;
		gap: 14px;
	}
	.om-megamenu__image { aspect-ratio: 16 / 8; }
	.om-megamenu__title { font-size: 17px; }
	.om-megamenu__excerpt { font-size: 13px; }
}

/* =========================================================
   18. Página de contacto — foto de fondo + card + Contact Form 7
   ========================================================= */

.om-contacto-bg {
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	padding: 80px 0 100px;
	position: relative;
	color: var(--om-white);
	/* Breakout: forzar full viewport rompiendo el max-width:1200px que Astra hereda. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Aplicar el mismo breakout y el pattern SVG a la sección de info. */
.om-contacto-info {
	background-color: var(--om-deep);
	background-image: url('assets/images/patron-tile.svg');
	background-size: 220px 135px;
	background-position: center;
	background-repeat: round;
	color: var(--om-white);
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Página /contacto/ (ES 474, EN 513, FR 515): aplicar breakout al om-page-hero para que el header
   quede full width igual que las secciones del form y de info. */
.page-id-474 .om-page-hero,
.page-id-513 .om-page-hero,
.page-id-515 .om-page-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.om-contacto-bg__inner {
	max-width: 1400px; /* Mismo ancho que el resto de la web (om-feature__inner, om-page-hero__inner, etc.) */
	margin: 0 auto;
	padding: 0 24px;
}
.om-contacto-card {
	background: #fff;
	border-radius: 18px;
	padding: 48px 48px 40px;
	box-shadow: 0 24px 60px rgba(15, 31, 60, 0.30);
}
.om-contacto-card__title {
	font-family: 'Franie', sans-serif;
	font-weight: 400;
	font-size: 28px;
	color: var(--om-navy);
	margin: 0 0 8px !important;
}
.om-contacto-card__sub {
	color: #5b6573;
	margin: 0 0 28px !important;
	font-size: 15px;
}
.om-contacto-card__placeholder {
	background: #f5fafc;
	border: 1px dashed #54adc5;
	border-radius: 12px;
	padding: 24px;
	color: var(--om-navy);
}
.om-contacto-card__placeholder p { margin: 0 0 8px !important; }
.om-contacto-card__placeholder p:last-child { margin: 0 !important; }
.om-contacto-card__placeholder code {
	background: #fff;
	border: 1px solid #d8dde3;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 13px;
}

/* Tira inferior con datos directos */
.om-contacto-info {
	background: #f8fafb;
	padding: 56px 0;
}
.om-contacto-info__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.om-contacto-info__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.om-contacto-info__label {
	font-family: 'Franie', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #54adc5;
}
.om-contacto-info__item a {
	color: var(--om-navy);
	font-family: 'Franie', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.om-contacto-info__item a:hover { color: #54adc5; }
.om-contacto-info__item p {
	margin: 0 !important;
	color: var(--om-navy);
	font-size: 15px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.om-contacto-bg { padding: 50px 0 70px; }
	.om-contacto-card { padding: 32px 24px 28px; border-radius: 14px; }
	.om-contacto-info__inner {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}
@media (max-width: 480px) {
	.om-contacto-info__inner { grid-template-columns: 1fr; }
}

/* === Bloque legal dentro del CF7 (texto consentimiento RGPD) === */
.om-cf7__legal {
	background: #f5f7f9;
	border-radius: 10px;
	padding: 18px 20px;
	margin: 18px 0 22px !important;
	font-size: 12px;
	line-height: 1.55;
	color: #5b6573;
}
.om-cf7__legal p { margin: 0 0 6px !important; }
.om-cf7__legal p:last-child { margin: 0 !important; }
.om-cf7__legal strong { color: var(--om-navy); font-size: 13px; }
.om-cf7__legal a { color: #54adc5; text-decoration: underline; }

.om-cf7__check { margin: 6px 0 10px !important; }
.om-cf7__submit { text-align: right; margin-top: 8px !important; }

/* === Contact Form 7 — estilos OM Retail === */
.om-contacto .wpcf7,
.wpcf7-form {
	max-width: 100%;
}
.wpcf7-form p {
	margin: 0 0 18px !important;
}
.wpcf7-form label {
	display: block;
	font-family: 'Franie', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--om-navy);
	margin-bottom: 6px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100% !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #d8dde3;
	border-radius: 10px;
	padding: 14px 16px;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	color: var(--om-navy);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #54adc5;
	box-shadow: 0 0 0 3px rgba(84, 173, 197, 0.15);
}
.wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	background: #54adc5;
	color: #fff;
	font-family: 'Franie', sans-serif;
	font-weight: 500;
	font-size: 16px;
	border: 0;
	padding: 16px 32px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
	background: #408ea3;
	transform: translateY(-2px);
}
.wpcf7-form input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.wpcf7-acceptance label {
	display: inline-flex !important;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #5b6573;
	cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: #54adc5;
}
.wpcf7-not-valid-tip {
	color: #d83a52 !important;
	font-size: 13px !important;
	margin-top: 4px !important;
	display: block;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border: 0 !important;
	background: #fde8eb !important;
	color: #b1283c !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	border: 0 !important;
	background: #e8f7f1 !important;
	color: #1d7a59 !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
}

/* Grid 2 cols dentro del form: Nombre+Empresa, Email+Teléfono */
.wpcf7-form .om-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 900px) {
	.om-contacto__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.om-contacto__info {
		position: static;
		padding: 28px 24px;
	}
	.wpcf7-form .om-row-2 {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.om-contacto { padding: 50px 0 70px; }
	.om-contacto__inner { padding: 0 20px; }
}

/* =========================================================
   Modal catálogo (lead magnet de /catalogos/)
   ========================================================= */

.om-cat-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s ease;
}
.om-cat-modal.is-open { opacity: 1; }
.om-cat-modal[hidden] { display: none; }

.om-cat-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1, 27, 40, .68);
	backdrop-filter: blur(2px);
}

.om-cat-modal__panel {
	position: relative;
	background: var(--om-white);
	border-radius: 22px;
	padding: 40px 36px 32px;
	max-width: 480px;
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: 0 24px 64px rgba(1, 27, 40, .32);
	transform: translateY(20px);
	transition: transform .3s ease;
}
.om-cat-modal.is-open .om-cat-modal__panel { transform: translateY(0); }

.om-cat-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--om-navy);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.om-cat-modal__close:hover { background: var(--om-cloud); }

.om-cat-modal__title {
	font-family: var(--om-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--om-navy);
	margin: 0 0 10px;
	line-height: 1.2;
}

.om-cat-modal__intro {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(1, 58, 91, .72);
	margin: 0 0 22px;
}

.om-cat-modal__form { display: flex; flex-direction: column; gap: 16px; }

.om-cat-modal__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--om-navy); }
.om-cat-modal__field > span { font-weight: 600; }
.om-cat-modal__field input[type="email"] {
	border: 1px solid var(--om-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--om-navy);
	background: var(--om-white);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.om-cat-modal__field input[type="email"]:focus {
	outline: 0;
	border-color: var(--om-blue);
	box-shadow: 0 0 0 3px rgba(74, 144, 226, .15);
}

.om-cat-modal__rgpd {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(1, 58, 91, .75);
}
.om-cat-modal__rgpd input[type="checkbox"] {
	margin: 3px 0 0;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--om-blue);
}
.om-cat-modal__rgpd a { color: var(--om-blue); text-decoration: underline; }

.om-cat-modal__submit {
	background: var(--om-navy);
	color: var(--om-white);
	border: 0;
	border-radius: 999px;
	padding: 14px 24px;
	font-family: var(--om-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
	margin-top: 4px;
}
.om-cat-modal__submit:hover { background: var(--om-blue); }
.om-cat-modal__submit:active { transform: scale(.98); }
.om-cat-modal__submit:disabled { opacity: .65; cursor: progress; }

.om-cat-modal__status {
	font-size: 13px;
	margin: 8px 0 0;
	min-height: 18px;
	line-height: 1.4;
}
.om-cat-modal__status.is-error   { color: #B53A2A; }
.om-cat-modal__status.is-success { color: #1E8A5F; }

@media (max-width: 600px) {
	.om-cat-modal__panel { padding: 32px 22px 24px; border-radius: 18px; }
	.om-cat-modal__title { font-size: 19px; }
}