/*
Theme Name: OMS España
Description: Tema hijo de Salient para OMS España
Author: Codiweb
Author URI:  https://codiweb.cat
Template: salient
Version: 1.0
*/

/* BTN OMS */
.oms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0 40px;
	border: 2px solid transparent;
	font-family: 'Outfit', sans-serif;
	border-radius: 6px;
	background: transparent;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.oms-btn__arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* SOLID */
.oms-btn--solid {
	background-color: #000b8c;
	border-color: #000b8c;
	color: #F6F4F0;
}
.oms-btn--solid:hover,
.oms-btn--solid:focus {
	background-color: #000869;
	border-color: #000869;
	color: #F6F4F0;
}

/* EMERGENCIA — naranja de marca, el mismo del botón del hero de la portada. */
.oms-btn--emergency {
	background-color: #F68A12;
	border-color: #F68A12;
	color: #1A1A1A;
}
.oms-btn--emergency:hover,
.oms-btn--emergency:focus {
	background-color: #D4750A;
	border-color: #D4750A;
	color: #1A1A1A;
}

/* TRANSPARENT */
.oms-btn--ghost {
	background-color: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
}
.oms-btn--ghost:hover,
.oms-btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

/* TRANSPARENT DARK */
.oms-btn--ghost-dark {
	background-color: transparent;
	border-color: #000b8c;
	color: #000b8c;
}
.oms-btn--ghost-dark:hover,
.oms-btn--ghost-dark:focus {
	background-color: rgba(0, 11, 140, 0.08);
	border-color: #000b8c;
	color: #000b8c;
}

/* TARJETAS DEL CARRUSEL (home) — la foto es el fondo de la tarjeta. Salient
   usa `cover`, que amplia la imagen hasta llenar la tarjeta y recorta lo que
   sobra: lo que se veia era un trozo ampliado, no la foto. Con `contain` se ve
   la imagen entera, tal cual es, sin ampliar y sin recortar.
   No altera la altura de la tarjeta. */
#ajax-content-wrap .oms-cards .cell .inner-wrap {
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
}

/* ALINEACION DE LAS TARJETAS — sin esto, el titulo de 2 lineas hacia subir
   37px su separador y su texto respecto a los de 3 lineas, y las descripciones
   tenian tres alturas distintas (46 / 69 / 92px). Reservando el maximo de
   lineas de cada bloque, el separador, el texto y la foto quedan a la misma
   altura en todas las tarjetas.
   Los selectores usan el elemento anterior (icono / raw del <hr>) en vez de
   `nth-child`, porque el `<a.flickity-slider__link>` solo aparece en los items
   con enlace y desplazaria el conteo.
   Las unidades van en `em` para acompañar el escalado de nectar-responsive-text:
   titulo 3 lineas x 1.235 = 3.71em · descripcion 4 lineas x 1.2 = 4.8em. */
#ajax-content-wrap .oms-cards .cell .inner-wrap > .img-with-aniamtion-wrap + .nectar-responsive-text {
	min-height: 3.71em;
}

#ajax-content-wrap .oms-cards .cell .inner-wrap > .wpb_raw_code + .nectar-responsive-text {
	min-height: 4.8em;
}

/* TARJETAS DEL POST LOOP BUILDER (nectar_post_grid con "Card Design") — todas
   a la misma altura. Salient no tiene opcion nativa para igualarlas: la imagen
   ya va a una ratio fija, pero el bloque de texto crece con el titulo, asi que
   una tarjeta de 4 lineas queda mas alta que una de 2.
   El titulo se fija a 3 lineas exactas: `min-height` reserva el hueco cuando es
   mas corto y `line-clamp` lo recorta con puntos suspensivos cuando es mas largo.
   El titulo completo sigue en el enlace .screen-reader-text y en la ficha del
   producto, asi que no se pierde para lectores de pantalla ni para el SEO.
   `line-height` va explicito porque el min-height se calcula a partir de el. */
#ajax-content-wrap .nectar-post-grid[data-card="yes"] .nectar-post-grid-item .post-heading {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	min-height: 3.9em; /* 3 lineas x 1.3 */
}

/* EYEBROW */
.oms-text-eyesection {
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.05em;
	font-weight: 600;
	line-height: 1.2;
}

/* UTILITAT TIPOGRÀFICA — Outfit.
   Posa `oms-font-outfit` al camp "CSS Class Name" (Extra Class) de qualsevol
   element/columna/row de WPBakery. La font ja la carrega Salient
   (Theme Options > Typography). L'`#ajax-content-wrap` puja l'especificitat
   per damunt dels selectors del tema; s'exclouen `i` i `[class*="icon"]`
   perquè les icones (icomoon/FontAwesome) depenen del seu propi font-family. */
:root {
	--oms-font-outfit: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.oms-font-outfit,
#ajax-content-wrap .oms-font-outfit,
#ajax-content-wrap .oms-font-outfit :is(h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, strong, em, blockquote, div, button, input, textarea):not(i):not([class*="icon"]) {
	font-family: var(--oms-font-outfit);
	font-weight: 600;
}

/* TIPOGRAFIA FLUIDA — utilitats per als títols.
   Substitueix els `3.8vw` / `2.6vw` escrits al camp "Font Size" de Salient:
   amb `vw` sol, el text es fa il·legible per sota de 768px i gegant en pantalles
   panoràmiques. `clamp(min, preferit, max)` manté el mateix escalat en `vw`
   entre mitges, però amb un terra i un sostre en `rem` (respecta el zoom i la
   mida de font del navegador, cosa que `vw` no fa).
   Ús: posa la classe al camp "CSS Class Name" (Extra Class) i deixa el camp
   "Font Size" buit.
   Els selectors arriben al títol de dins perquè elements com `split_line_heading`
   posen l'`el_class` al <div> embolcall i donen un `font-size` propi al <h1> i
   als <span> de cada línia: sense baixar-hi, la mida no s'hereta mai. */
#ajax-content-wrap .oms-fs-h1,
.oms-fs-h1,
#ajax-content-wrap .oms-fs-h1 :is(h1, h2, h3, h4, h5, h6, p, span) {
	font-size: clamp(2.75rem, 2.321rem + 2.143vw, 4.25rem);
	line-height: 1.15;
}

#ajax-content-wrap .oms-fs-h2,
.oms-fs-h2,
#ajax-content-wrap .oms-fs-h2 :is(h1, h2, h3, h4, h5, h6, p, span) {
	font-size: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);
	line-height: 1.2;
}

#ajax-content-wrap .oms-fs-h3,
.oms-fs-h3,
#ajax-content-wrap .oms-fs-h3 :is(h1, h2, h3, h4, h5, h6, p, span) {
	font-size: clamp(1.35rem, 1.236rem + 0.571vw, 1.75rem);
	line-height: 1.3;
}

/* Escala d'h4 del tema (22/28, pes 500) per a un títol que ha de ser <h3> per
   jerarquia però es veu com un h4. Porta el pes perquè el <h3> del tema és 400. */
#ajax-content-wrap .oms-fs-h4,
.oms-fs-h4,
#ajax-content-wrap .oms-fs-h4 :is(h1, h2, h3, h4, h5, h6, p, span) {
	font-size: 1.375rem;
	line-height: 1.273;
	font-weight: 500;
}

/* TEXTO DE LA FICHA DE PRODUCTO — tot el cos de la fitxa és un sol "Bloque de
   texto" amb `oms-producto-texto` al camp "CSS Class Name". Els títols són <h2>
   escrits dins del text: el constructor no pot donar-los estil, així que aquí
   reben l'Outfit i l'escala de .oms-fs-h2, sense tocar els paràgrafs.
   L'alineació es fixa a la columna de WPBakery, no aquí. */
#ajax-content-wrap .oms-producto-texto h2 {
	font-family: var(--oms-font-outfit);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);
	line-height: 1.2;
	color: #24272A;
	margin: 1.5em 0 0.5em;
}

#ajax-content-wrap .oms-producto-texto h2:first-child {
	margin-top: 0;
}

/* CARRUSEL OBJETIVOS (home) — títols amb Outfit i un pas per sota de la mida
   anterior. Els títols de les targetes són <h3> (jerarquia: l'H2 és el títol
   de la secció), i el selector cau sobre .oms-cards, que és l'el_class real de
   la columna del carrusel. La font ja la carrega Salient (Theme Options >
   Typography). No es toca el font-weight: el contrast entre la primera línia
   (fina) i el .text-cards-mejoras (700) és el que dona l'efecte de la targeta. */
#ajax-content-wrap .oms-cards .nectar-responsive-text h3,
#ajax-content-wrap .oms-cards .nectar-responsive-text h3 span,
.oms-cards .nectar-responsive-text h3,
.oms-cards .nectar-responsive-text h3 span {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#ajax-content-wrap .oms-cards .nectar-responsive-text h3,
.oms-cards .nectar-responsive-text h3 {
	font-size: clamp(1.35rem, 1.236rem + 0.571vw, 1.75rem);
	line-height: 1.15;
}

/* LOGOS CLIENTES — graella automàtica del CPT proyecto ([oms_logos_clientes]) */
#ajax-content-wrap .oms-logos,
.oms-logos {
	display: grid;
	grid-template-columns: repeat(var(--oms-logos-cols, 6), minmax(0, 1fr));
	gap: 48px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oms-logos__item {
	margin: 0;
	list-style: none;
}

.oms-logos__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* L'alçada la fixa el paràmetre "Altura de los logos" de l'editor
   (--oms-logos-h). La caixa i el logo comparteixen la mateixa mesura. */
.oms-logos__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--oms-logos-h, 60px);
}

.oms-logos__img {
	display: block;
	max-width: 100%;
	max-height: var(--oms-logos-h, 60px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.oms-logos--grayscale .oms-logos__img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

.oms-logos--grayscale .oms-logos__link:hover .oms-logos__img,
.oms-logos--grayscale .oms-logos__link:focus-visible .oms-logos__img {
	filter: grayscale(0);
	opacity: 1;
}

/* Text sota el logo: l'etiqueta HTML (span/p/h2…h6) la tria l'editor i és
   independent de l'aspecte, que el dona el modificador --body-sm/--body-md/… */
#ajax-content-wrap .oms-logos__name,
.oms-logos__name {
	display: block;
	margin: 16px 0 0;
	padding: 0;
	color: #5A6B7B;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.oms-logos--align-center .oms-logos__name {
	text-align: center;
}

.oms-logos--align-left .oms-logos__name {
	text-align: left;
}

#ajax-content-wrap .oms-logos__name--body-sm,
.oms-logos__name--body-sm {
	font-size: 0.875rem;
	line-height: 1.5;
}

#ajax-content-wrap .oms-logos__name--body-md,
.oms-logos__name--body-md {
	font-size: 1rem;
	line-height: 1.6;
}

#ajax-content-wrap .oms-logos__name--label,
.oms-logos__name--label {
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#ajax-content-wrap .oms-logos__name--h6,
.oms-logos__name--h6 {
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 600;
	color: #0B2A4A;
}

@media only screen and (max-width: 1000px) {
	#ajax-content-wrap .oms-logos,
	.oms-logos {
		grid-template-columns: repeat(var(--oms-logos-cols-t, 3), minmax(0, 1fr));
	}
}

@media only screen and (max-width: 690px) {
	#ajax-content-wrap .oms-logos,
	.oms-logos {
		grid-template-columns: repeat(var(--oms-logos-cols-p, 2), minmax(0, 1fr));
		gap: 32px 16px;
	}
}

/* Sección "Nuestra gama de maquinaria y consumibles" — tamaño de los iconos SVG.
   Los SVG llevan width intrínseco (115px), así que el max-width en línea de
   Salient no los agranda: hay que fijar width. */
#ajax-content-wrap .oms-gama-item .fancy-box-custom-icon,
#ajax-content-wrap .oms-gama-item .img-with-animation,
.oms-gama-item .fancy-box-custom-icon,
.oms-gama-item .img-with-animation {
	width: 180px;
	height: auto;
}


/* BOTÓN COMPACTO — misma familia que .oms-btn, medida de tarjeta (los 56px del
   botón base son demasiado dentro de una card). */
.oms-btn--sm {
	min-height: 40px;
	padding: 0 20px;
	font-size: 16px;
	gap: 8px;
	border-width: 1px;
}

/* LISTADO DE CATEGORÍA DE PRODUCTO (taxonomy-categoria_producto.php).
   Fondo claro, tarjetas blancas. Tipografía: Outfit (la sección lleva
   `oms-font-outfit`) y las escalas de DESIGN.md — h1 3rem/700, h2 2rem/700,
   h3 1.5rem/600, body-sm 0.875rem, label 0.75rem/600/0.05em. */
.oms-cat {
	--oms-cat-ink: #0B2A4A;
	--oms-cat-accent: #000b8c;
	--oms-cat-muted: #5A6B7B;
	--oms-cat-line: #E3E7EE;
	width: 100%;
	padding: 64px 0;
}

/* Cabecera */
.oms-cat__header {
	padding-bottom: 32px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--oms-cat-line);
	text-align: center;
}

#ajax-content-wrap .oms-cat__title,
.oms-cat__title {
	margin: 0;
	color: var(--oms-cat-ink);
	font-size: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

#ajax-content-wrap .oms-cat__subtitle,
.oms-cat__subtitle {
	max-width: 70ch;
	margin: 16px auto 0;
	color: var(--oms-cat-muted);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
}

/* Bloque: rail de la (sub)categoría + rejilla */
.oms-cat-bloque {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-bottom: 48px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--oms-cat-line);
}

.oms-cat-bloque:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.oms-cat-bloque__rail {
	position: sticky;
	top: 120px;
}

.oms-cat-bloque__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 24px;
}

/* Los SVG de categoría traen su propio círculo dibujado, así que el icono va
   suelto: sin contenedor redondo y a todo el ancho del rail. `width` explícito
   porque el SVG mide 114px de origen y max-width por sí solo no lo agranda. */
.oms-cat-bloque__icono img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
}

#ajax-content-wrap .oms-cat-bloque__nombre,
.oms-cat-bloque__nombre {
	margin: 0 0 16px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#ajax-content-wrap .oms-cat-bloque__nombre a,
.oms-cat-bloque__nombre a {
	color: var(--oms-cat-accent);
	text-decoration: none;
}

#ajax-content-wrap .oms-cat-bloque__nombre a:hover,
.oms-cat-bloque__nombre a:hover {
	text-decoration: underline;
}

.oms-cat-bloque__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

/* Tarjeta de producto */
#ajax-content-wrap .oms-cat-card,
.oms-cat-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--oms-cat-line);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}

#ajax-content-wrap .oms-cat-card:hover,
.oms-cat-card:hover {
	border-color: var(--oms-cat-accent);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.oms-cat-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 16px;
	background: #F6F4F0;
}

.oms-cat-card__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}

.oms-cat-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

#ajax-content-wrap .oms-cat-card__title,
.oms-cat-card__title {
	margin: 0;
	font-size: clamp(1.35rem, 1.236rem + 0.571vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

#ajax-content-wrap .oms-cat-card__title a,
.oms-cat-card__title a {
	color: var(--oms-cat-ink);
	text-decoration: none;
}

#ajax-content-wrap .oms-cat-card__title a:hover,
.oms-cat-card__title a:hover {
	color: var(--oms-cat-accent);
}

#ajax-content-wrap .oms-cat-card__sub,
.oms-cat-card__sub {
	margin: 0;
	color: var(--oms-cat-muted);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
}

/* Las acciones quedan abajo: con títulos de 1 o 2 líneas los botones siguen
   alineados entre todas las tarjetas de la fila. */
.oms-cat-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
}

@media only screen and (max-width: 1300px) {
	.oms-cat-bloque__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 1000px) {
	/* El rail pasa arriba, en horizontal: icono, nombre y catálogo en línea. */
	.oms-cat-bloque {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.oms-cat-bloque__rail {
		position: static;
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.oms-cat-bloque__icono {
		width: auto;
		margin-bottom: 0;
	}

	.oms-cat-bloque__icono img {
		width: 88px;
	}

	#ajax-content-wrap .oms-cat-bloque__nombre,
	.oms-cat-bloque__nombre {
		margin: 0;
		margin-right: auto;
	}

	.oms-cat-bloque__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 690px) {
	.oms-cat {
		padding: 40px 0;
	}

	.oms-cat-bloque__grid {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* ==========================================================================
   Mapa de contacto — paleta
   Los tiles del IGN vienen más saturados (verdes y naranjas) que el basemap
   CartoDB Voyager inicial. Como son imágenes, se reencuadra el color con un
   filtro CSS sobre el panel de tiles: desatura, aclara y enfría ligeramente
   el tono → crema/azul pálido, la combinación del mapa inicial.
   Solo afecta al panel de tiles: los marcadores y los popups quedan intactos.
   ========================================================================== */
.nectar-leaflet-map .leaflet-tile-pane {
	filter: saturate(0.55) brightness(1.06) contrast(0.92) hue-rotate(-6deg);
}

/* Popups de los marcadores. Leaflet los pinta con su propia tipografia
   ("Helvetica Neue" 12px/400 #333), ajena al tema. `white-space: nowrap`
   porque Leaflet fija el ancho del globo en pixeles segun el texto y al
   subir el cuerpo el nombre se partiria en dos lineas. */
.nectar-leaflet-map .leaflet-popup-content {
	font-family: var(--oms-font-outfit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #0B2A4A;
	white-space: nowrap;
}

/* ==========================================================================
   FORMULARIOS CF7 — «Contacto» (9c2a3e3) y «SAT» (5322bb6)
   Un único bloque para los dos: mismo marcado (.oms-contact-form), misma
   estética. Sustituye a las capas sucesivas de reglas que había en el CSS
   adicional del Customizer.
   Tipografía: NO se declara ninguna. Los controles heredan la fuente y el
   tamaño del tema (`font: inherit`); el botón es .oms-btn--solid, el mismo
   componente que el resto de botones del sitio.
   Ancho: lo fija esta hoja, no la columna de WPBakery. En escritorio el
   formulario se queda en `max-width` y centrado; por debajo de ese ancho
   (móvil/tablet) ocupa el 100 % del contenedor.
   ========================================================================== */
/* La tarjeta blanca que envuelve al formulario (columna de WPBakery con
   `el_class="oms-form-card"` en la página Contacto). Salient descarta el_class
   en filas y solo lo conserva en COLUMNAS, por eso la clase va ahí.
   Estrecha y centra la sección entera: título, campos y fondo blanco. */
#ajax-content-wrap .oms-form-card {
	float: none;
	max-width: 800px;
	margin: 0 auto;
}

.oms-contact-form {
	--oms-form-line: #d9dee6;
	--oms-form-accent: #2B57D9;
	--oms-form-error: #e63329;
	--oms-form-error-strong: #C0271E; /* fondo del aviso: texto blanco a 5.9:1 */
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

.oms-contact-form .oms-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

/* Los campos van en <p>: Salient les da padding-bottom 30px y rompía el `gap`. */
.oms-contact-form .oms-field {
	margin: 0;
	padding: 0;
}

.oms-contact-form .oms-field--full {
	grid-column: 1 / -1;
}

/* El rótulo visible es el placeholder; el <label> real queda oculto (a11y). */
.oms-contact-form .oms-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Campos. El `#ajax-content-wrap` gana a los estilos de input de Salient.
   Se listan los elementos reales (input/textarea/select) porque CF7 pone
   también la clase .wpcf7-form-control en el span de la aceptación: con un
   selector por clase, el consentimiento salía dentro de una caja con borde. */
#ajax-content-wrap .oms-contact-form input.wpcf7-form-control:not([type="checkbox"]),
#ajax-content-wrap .oms-contact-form textarea.wpcf7-form-control,
#ajax-content-wrap .oms-contact-form select.wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--oms-form-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

#ajax-content-wrap .oms-contact-form textarea.wpcf7-form-control {
	min-height: 130px;
	resize: vertical;
}

#ajax-content-wrap .oms-contact-form .wpcf7-form-control:hover {
	border-color: #b9c2cf;
}

#ajax-content-wrap .oms-contact-form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--oms-form-accent);
	box-shadow: 0 0 0 3px rgba(43, 87, 217, 0.15);
}

/* Desplegables. El <select> es nativo (Theme Options › Form Styling ›
   «Fancy Select» desactivado: select2 pintaba el hover y el estado abierto
   con el accent y !important). Hereda caja, fondo blanco y tipografía de la
   regla de campos de arriba; aquí solo el color del texto —en filas de texto
   claro heredaría el blanco— y la flecha, que `appearance: none` quita. */
#ajax-content-wrap .oms-contact-form select.wpcf7-form-control {
	padding-right: 44px;
	color: #1B2340;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px 18px;
	cursor: pointer;
}

/* Aceptación de privacidad. Los contenedores de CF7 llevan borde y fondo
   propios (el «recuadro gris»): se anulan aquí, no en capas sucesivas.
   El texto visible va FUERA del [acceptance], como texto normal del <p>:
   dentro de un <label> lo pilla `form label` de Salient (14px/500 con
   !important). Fuera, hereda la tipografía del tema sin declarar nada.
   El nombre accesible del checkbox lo da un <label class="oms-sr-only" for>,
   igual que el resto de campos del formulario. */
.oms-contact-form .oms-acceptance {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 22px 0 0;
}

#ajax-content-wrap .oms-contact-form .oms-acceptance .wpcf7-form-control-wrap,
#ajax-content-wrap .oms-contact-form .wpcf7-acceptance,
#ajax-content-wrap .oms-contact-form .wpcf7-acceptance .wpcf7-list-item {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

#ajax-content-wrap .oms-contact-form .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1.5px solid rgba(43, 87, 217, 0.5);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

#ajax-content-wrap .oms-contact-form .wpcf7-acceptance input[type="checkbox"]:checked {
	border-color: var(--oms-form-accent);
	background-color: var(--oms-form-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.oms-contact-form .wpcf7-acceptance input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--oms-form-accent);
	outline-offset: 2px;
}

/* Botón: es .oms-btn--solid, sin estilos propios del formulario. */
.oms-contact-form .oms-submit {
	margin: 22px 0 0;
	text-align: center;
}

/* El botón NO lleva reglas propias: es .oms-btn--solid y nada más.
   Por eso el marcado usa `<button>` SIN atributo type en vez de
   `type="submit"`: Salient estiliza `button[type="submit"]` con !important
   (padding 15px 35px, text-transform capitalize) y la única forma de
   contrarrestarlo sería otro !important. Sin atributo esos selectores no
   casan, pero el botón sigue siendo submit nativo (Enter envía, sin JS). */

/* Validación y avisos de CF7. */
#ajax-content-wrap .oms-contact-form .wpcf7-not-valid {
	border-color: var(--oms-form-error);
	box-shadow: 0 0 0 3px rgba(230, 51, 41, 0.12);
}

#ajax-content-wrap .oms-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	background-color: var(--oms-form-error-strong);
	box-shadow: none;
	color: #FFFFFF;
	font-size: 0.8em;
	font-weight: 500;
}

.oms-contact-form .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* Mensaje de respuesta (enviado / error). CF7 lo pinta al final del <form>,
   FUERA del div .oms-contact-form, por eso cuelga de .wpcf7 form: sin esto
   salía a todo el ancho con el borde verde/amarillo por defecto de CF7.
   Misma medida y radio que los campos; el estado lo marca el filete izquierdo. */
#ajax-content-wrap .wpcf7 form .wpcf7-response-output {
	box-sizing: border-box;
	max-width: 640px;
	margin: 24px auto 0;
	padding: 14px 20px;
	border: 0;
	border-left: 4px solid #2B57D9;
	border-radius: 6px;
	background-color: #FFFFFF;
	color: #0B2A4A;
	line-height: 1.5;
	text-align: left;
}

#ajax-content-wrap .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2E9E5B;
}

#ajax-content-wrap .wpcf7 form.invalid .wpcf7-response-output,
#ajax-content-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
#ajax-content-wrap .wpcf7 form.payment-required .wpcf7-response-output,
#ajax-content-wrap .wpcf7 form.failed .wpcf7-response-output,
#ajax-content-wrap .wpcf7 form.aborted .wpcf7-response-output,
#ajax-content-wrap .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: #e63329;
}

@media only screen and (max-width: 767px) {
	.oms-contact-form .oms-form-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.oms-contact-form .oms-submit .oms-btn {
		width: 100%;
	}
}


/* ── OMS — SAT: cifras (milestone) centradas en su card ──────────────────
   Las columnas de las cards usan content_layout="flexbox" con
   flex_align_items_desktop="flex-start", lo que encoge el milestone a su
   contenido y lo pega a la izquierda. Con el_class="oms-milestone-card"
   en la vc_column_inner, centramos SOLO la cifra: el párrafo sigue
   alineado a la izquierda. */
#ajax-content-wrap .oms-milestone-card .nectar-milestone,
#ajax-content-wrap .oms-milestone-card .milestone-wrap {
	align-self: center;
	text-align: center;
}
#ajax-content-wrap .oms-milestone-card .nectar-milestone .number,
#ajax-content-wrap .oms-milestone-card .nectar-milestone .subject {
	text-align: center;
}


/* ── OMS — SAT: columna derecha en bento (foto más alta que el texto) ────
   Las dos inner-rows de la columna llevan height_desktop="100%" y se
   repartían el alto 50/50. Salient descarta el_class en las FILAS, así que
   seleccionamos cada fila por la clase de SU columna con :has() y les damos
   proporción ~35/65: la foto pasa a ser la pieza dominante del bento. */
#ajax-content-wrap .wpb_row.inner_row:has(> .row_col_wrap_12_inner > .oms-sat-texto) {
	flex: 1 1 0;
}
#ajax-content-wrap .wpb_row.inner_row:has(> .row_col_wrap_12_inner > .oms-sat-foto) {
	flex: 1.9 1 0;
}


/* ==========================================================================
   MIGRADO DESDE "CSS adicional" (Personalizador de WordPress) — 2026-08-26
   Todo el CSS del sitio vive ahora aquí. El campo del Personalizador queda
   vacío: no añadir reglas allí.
   Orden conservado tal cual estaba (algunos bloques corrigen a otros
   anteriores por cascada; no reordenar).
   ========================================================================== */

/* Menú "Ocasión": el icono fa-circle del item = badge de notificación naranja corporativo estilo móvil.
   Selector con alta especificidad (li.nectar-regular-menu-item) para ganar a la regla
   !important de Salient en cabecera transparente.
   Ajustes: font-size=tamaño · top=más negativo sube · margin-left=más positivo lo aleja a la derecha. */
#header-outer #top nav ul li.nectar-regular-menu-item a[href*="maquinaria-de-ocasion"] .nectar-menu-icon.fa-circle {
	color: #F68A12 !important;
	font-size: 8px;
	position: relative;
	top: -7px;
	margin-left: 2px;
	vertical-align: baseline;
	animation: oms-badge-pulse 1.8s ease-out infinite;
	transform-origin: center;
}
@keyframes oms-badge-pulse {
	0%, 100% { transform: scale(1);    opacity: 1;  }
	50%      { transform: scale(1.35); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
	#header-outer #top nav ul li.nectar-regular-menu-item a[href*="maquinaria-de-ocasion"] .nectar-menu-icon.fa-circle { animation: none; }
}


/* OMS — Sectores (Quantum Portfolio): descripción visible solo al hover.
   El overlay oscuro (color_overlay_hover_opacity 0.55) ya se activa por JS al hover
   para dar legibilidad; aquí revelamos el excerpt con fundido. */
.nectar-post-grid-item .nectar-post-grid-item__excerpt-wrap {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
	margin-top: 6px;
	max-width: 92%;
}
.nectar-post-grid-item .nectar-post-grid-item__excerpt-wrap .meta-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.45;
}
.nectar-post-grid-item:hover .nectar-post-grid-item__excerpt-wrap,
.nectar-post-grid-item:focus-within .nectar-post-grid-item__excerpt-wrap {
	opacity: 1;
	transform: translateY(0);
}


/* OMS — Roboto Bold (700) autoalojada en el tema hijo.
   Salient solo descarga los pesos 400 y 500; estos woff2 añaden el 700 real
   (sin "faux bold" del navegador). Mismos subsets latin/latin-ext que Google. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(/wp-content/themes/salient-child/assets/fonts/roboto-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(/wp-content/themes/salient-child/assets/fonts/roboto-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.text-cards-mejoras {
	font-family: 'Outfit', 'Roboto', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 1.9vw, 32px);
	line-height: 1.12;
	display: inline-block;
}

/* OMS — "mejorar" en rojo dentro del título animado CON efecto Reveal por palabra.
   El elemento (split_line_heading, line-reveal-by-space) parte cada palabra en un
   span del h2. "mejorar" es la 3ª palabra (¿Qué=1, quieres=2, mejorar=3).
   Clase oms-hl-mejorar añadida al elemento para aislar esta regla de los demás títulos.
   Si cambias el texto y "mejorar" deja de ser la 3ª palabra, ajusta el número nth-of-type. */
.oms-hl-mejorar h2 > span:nth-of-type(3) .inner { color: #24346c; }

/* ── Hero trust bar (USP floating card) ──────────────────────
   Salient descarta el_class en FILAS/inner-rows y solo lo conserva en
   COLUMNAS: la card cuelga de .oms-trust-wrap (vc_column 1/1) y cada ítem
   de .oms-trust-item (vc_column_inner). La fila del hero (row 0) recibe
   z-index de Salient, así que elevamos la fila de la trust bar con :has()
   y la subimos con margin negativo para flotarla sobre el hero. */
.wpb_row:has(.oms-trust-wrap) { position: relative; z-index: 100; }
.oms-trust-wrap {
	float: none !important;
	max-width: 1180px;
	margin: -70px auto 0 !important;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(11,42,74,0.06), 0 12px 24px -8px rgba(11,42,74,0.16), 0 30px 60px -18px rgba(11,42,74,0.30);
	padding: 28px 30px;
	position: relative;
	z-index: 100;
}
.oms-trust-item { position: relative; }
.oms-trust-item > .vc_column-inner > .wpb_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 54px;
}
.oms-trust-item + .oms-trust-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 40px;
	border-left: 1px solid #E6EAF0;
}
.oms-trust-item .nectar_icon_wrap { margin: 0 !important; flex: 0 0 auto; }
.oms-trust-item .nectar_icon i {
	font-size: 38px !important;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	color: #2B57D9 !important;
}
.oms-trust-item .wpb_text_column,
.oms-trust-item .wpb_text_column p { margin: 0; text-align: left; }
.oms-trust-item .oms-trust-num {
	display: block;
	color: #0B2A4A;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}
.oms-trust-item .oms-trust-label {
	display: block;
	color: #6B7684;
	font-size: 0.875rem;
	line-height: 1.3;
}
@media (max-width: 999px) {
	.oms-trust-wrap { margin-top: -46px !important; padding: 22px 18px; max-width: calc(100% - 32px); }
	.oms-trust-item:nth-child(odd)::before { display: none; }
	.oms-trust-item > .vc_column-inner > .wpb_wrapper { padding: 12px 0; }
}
@media (max-width: 690px) {
	.oms-trust-item::before { display: none !important; }
}

/* Fix sombra: un ancestro Salient (.wpb_row / .row_col_wrap_12) recorta con
   overflow:hidden y comía la box-shadow de la card. Forzamos overflow visible
   en la cadena y reforzamos la sombra para que se vea flotar. */
.wpb_row:has(.oms-trust-wrap),
.wpb_row:has(.oms-trust-wrap) .row_col_wrap_12 { overflow: visible !important; }
.oms-trust-wrap {
	box-shadow:
		0 4px 10px rgba(11,42,74,0.08),
		0 18px 30px -6px rgba(11,42,74,0.22),
		0 40px 70px -20px rgba(11,42,74,0.35) !important;
}


/* OMS — Carrusel 2 (fila 3): hover sin overlay negro.
   El fancy_box "color_box_hover" pinta dos capas oscuras sobre la imagen:
   .box-bg:after (gris rgba(51,51,51)) y :before (color de caja #000).
   Las anulamos para que la foto se vea limpia al hover. */
.oms-carousel2 .nectar-fancy-box .box-bg:after { background-color: transparent !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"]:before { display: none !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"] .box-bg { opacity: 1 !important; }


/* OMS — Carrusel 2: refuerzo. La regla por-instancia de Salient
   (.box_color_000000 .box-bg::after { background:#000 !important }) gana por
   especificidad; la igualamos anteponiendo .oms-carousel2 para anular el negro. */
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"][data-color].box_color_000000 .box-bg::after,
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"] .box-bg::after { background-color: transparent !important; }


/* OMS — Carrusel 2: hover totalmente estático. El fancy_box "color_box_hover"
   revela una imagen de fondo (.box-bg) al hacer hover; la ocultamos por completo
   para que al pasar el ratón NO aparezca imagen ni overlay: la card queda igual. */
.oms-carousel2 .nectar-fancy-box .box-bg { display: none !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"]:before,
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"]:after { display: none !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"] .box-inner-wrap { background-color: transparent !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"] .inner-wrap *,
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"]:hover .inner-wrap * { color: #000000 !important; }


/* OMS — Carrusel 2: corrección final. La regla anterior ocultó la imagen del hover;
   la restauramos (sigue SIN overlay negro) y forzamos el borde de la card también
   en hover, que nunca debía desaparecer. */
.oms-carousel2 .nectar-fancy-box .box-bg { display: block !important; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"][data-border="true"] .box-inner-wrap,
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"][data-border="true"]:hover .box-inner-wrap { border: 1px solid rgba(0,0,0,0.1) !important; }


/* OMS — Carrusel 2: imagen SOLO al hover (en reposo card blanca limpia).
   Anula el opacity:1 forzado antes; 0 en reposo → 1 al pasar el ratón. */
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"] .box-bg { opacity: 0 !important; transition: opacity .3s ease; }
.oms-carousel2 .nectar-fancy-box[data-style="color_box_hover"]:hover .box-bg { opacity: 1 !important; }


/* ── Hero trust bar (ajuste estético): iconos azul marca, texto negro, sombra más suave ──
   Va al final → gana por cascada a las reglas anteriores de .oms-trust-*. */
.oms-trust-item .nectar_icon i { color: #24346c !important; }
.oms-trust-item .oms-trust-num { color: #111111; }
.oms-trust-wrap {
	box-shadow:
		0 2px 6px rgba(11,42,74,0.04),
		0 10px 22px -10px rgba(11,42,74,0.12),
		0 22px 44px -22px rgba(11,42,74,0.16) !important;
}


/* ── Hero trust bar: texto un poco más grande ── */
.oms-trust-item .oms-trust-num { font-size: 1.15rem; }
.oms-trust-item .oms-trust-label { font-size: 1rem; }


/* ── OMS — Cards categoría (fancy_box "Image Above Text" / image_above_text_underline): re-skin de marca ──
   El estilo NATIVO de Salient pinta el label y la flecha en BLANCO (pensado para imagen oscura),
   por eso sobre la sección blanca no se veían ni título ni flecha. Aquí solo re-skineamos el
   componente nativo a la marca (mismo patrón que .oms-carousel2): título azul marca a la izq.,
   flecha (círculo icomoon nativo, con su animación Salient) a la dcha., y esquinas a 10px.
   NO se toca el markup ni la animación: la flecha circular + zoom de imagen siguen siendo nativos. */
.nectar-fancy-box[data-style="image_above_text_underline"] {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #E6EAF0;
	background: #fff;
}
.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/* .text queda vacío (el título va en link_text); lo colapsamos para no dejar hueco */
.nectar-fancy-box[data-style="image_above_text_underline"] .text:empty { display: none; }
/* Título + flecha: visibles, azul marca, título a la izquierda y flecha a la derecha */
body .nectar-fancy-box[data-style="image_above_text_underline"] .link-text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px 22px;
	margin: 0;
	color: #24346c;
	font-family: var(--oms-font-outfit);
	font-size: 1.15rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
/* Flecha circular nativa: recoloreada a acento marca (borde + glifo) */
.nectar-fancy-box[data-style="image_above_text_underline"] .link-text .arrow {
	flex: 0 0 auto;
	margin-left: 12px;
	color: #2B57D9;
	border-color: rgba(43,87,217,0.35);
}


/* ── OMS — Cards categoría: flecha estilo "Sectores" (nectar_post_grid corners) ──
   El cliente quiere en las cards la MISMA flecha que la sección Sectores: diagonal ↗
   en la esquina superior derecha, oculta en reposo, que entra deslizándose al hover.
   Reutilizamos el SVG NATIVO de Salient (post-grid arrow-indicator) como data-URI en
   un ::after (sin añadir markup) y ocultamos la flecha circular del fancy_box.
   La animación (deslizar en diagonal) replica la nativa: background fuera → dentro. */
.nectar-fancy-box[data-style="image_above_text_underline"] .link-text .arrow { display: none; }
body .nectar-fancy-box[data-style="image_above_text_underline"] .link-text { justify-content: flex-start; }
.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap { position: relative; }
.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 18px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2260%2058%20140%20140%22%20fill%3D%22%232B57D9%22%3E%3Cpath%20d%3D%22M198%2C64V168a6%2C6%2C0%2C0%2C1-12%2C0V78.48L68.24%2C196.24a6%2C6%2C0%2C0%2C1-8.48-8.48L177.52%2C70H88a6%2C6%2C0%2C0%2C1%2C0-12H192A6%2C6%2C0%2C0%2C1%2C198%2C64Z%22%2F%3E%3C%2Fsvg%3E") no-repeat;
	background-size: 20px 20px;
	background-position: -26px 26px;
	transition: background-position cubic-bezier(.15,.75,.5,1) 0.45s;
	pointer-events: none;
	z-index: 6;
}
.nectar-fancy-box[data-style="image_above_text_underline"]:hover .image-wrap::after,
.nectar-fancy-box[data-style="image_above_text_underline"]:focus-within .image-wrap::after {
	background-position: 0 0;
}
@media (prefers-reduced-motion: reduce) {
	.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   OMS — Mapa Leaflet (Salient nectar-leaflet-map): crédito mínimo del IGN.
   Las condiciones de uso del IGN exigen mencionarlo, así que el crédito se
   ve, pero discreto. El texto ("CC BY 4.0 ign.es", sin prefijo Leaflet) lo
   pone assets/js/oms-map-tiles.js. `.leaflet-container` sube la
   especificidad por encima de leaflet.css, que se carga después.
   ═══════════════════════════════════════════════════════════════════════ */
.nectar-leaflet-map.leaflet-container .leaflet-control-attribution {
	padding: 0 4px;
	font-size: 10px;
	line-height: 1.4;
}


/* ── OMS — CF7 sobre fondo azul: variante en negativo ────────────────────
   La sección del formulario SAT tiene fondo #000b8c. Sobre él, el texto de
   aceptación salía negro, el enlace de privacidad azul #000b8c (invisible) y
   el botón .oms-btn--solid azul sobre azul (solo se leía su texto).
   La variante se activa con el_class="oms-form-dark" en la COLUMNA de
   WPBakery que contiene el formulario (Salient solo conserva el_class en
   columnas). El bloque CF7 base no se toca: aquí solo se invierten colores. */
#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance,
#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance span,
#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance a {
	color: #FFFFFF;
}

#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance a:hover,
#ajax-content-wrap .oms-form-dark .oms-contact-form .oms-acceptance a:focus {
	color: rgba(255, 255, 255, 0.75);
}

/* Botón en negativo: blanco con texto azul marca. */
#ajax-content-wrap .oms-form-dark .oms-btn--solid {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: #000b8c;
}

#ajax-content-wrap .oms-form-dark .oms-btn--solid:hover,
#ajax-content-wrap .oms-form-dark .oms-btn--solid:focus {
	background-color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.85);
	color: #000b8c;
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO DE PORTADA (.oms-hero)
   La altura venía de top_padding/bottom_padding en % del ancho: por debajo
   de ~1400px el padding superior caía por debajo de la altura del header
   fijo y el H1 se solapaba con el logo. Ahora la fila usa la MISMA altura
   que el hero del resto de páginas (76vh / 110vh tablet / 107vh phone) y el
   contenido se centra en el espacio que queda libre bajo el header.
   ───────────────────────────────────────────────────────────────────────── */
:root {
	--oms-hero-header-h: 114px;
}

#ajax-content-wrap .oms-hero.wpb_row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 76vh;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Solo cuando el header es transparente (se superpone al hero) hay que
   reservar su altura arriba; en las páginas con header sólido el contenido
   ya empieza por debajo.
   Se mira `data-transparency-option`, no la clase `.transparent`: esa clase
   la quita el JS de Salient al hacer scroll, y el hero perdía el padding a
   media página (el contenido daba un salto). El atributo no cambia nunca. */
body:has(#header-outer[data-transparency-option="1"]) #ajax-content-wrap .oms-hero.wpb_row {
	padding-top: var(--oms-hero-header-h) !important;
}

#ajax-content-wrap .oms-hero.wpb_row > .row_col_wrap_12 {
	width: 100%;
}

/* La altura la fija la fila: ningún mínimo de columna debe sumarse al hueco
   del header (76vh en la columna del hero, 355px en la interna que separaba
   el texto de los botones). Sin ellos el bloque H1 + H2 + botones queda
   centrado de verdad en el espacio libre. */
/* !important porque las reglas de altura mínima que genera Salient para
   tablet y móvil van prefijadas con `html body` y ganarían por especificidad. */
#ajax-content-wrap .oms-hero .vc_column-inner {
	min-height: 0 !important;
}

/* Separación entre el bloque de texto y la fila de botones (portada). */
#ajax-content-wrap .oms-hero .inner_row + .inner_row {
	margin-top: 34px;
}

/* El H1 escala con el viewport en lugar de saltar entre breakpoints.
   Los <span> de cada línea van incluidos: en Contacto el titular lleva además
   la utilidad .oms-fs-h1, que los dimensiona por su cuenta (68px) y dejaba ese
   H1 más grande que el del resto de páginas.
   Interlineado 1.2 como mínimo: cada línea va en un .heading-line con
   overflow:hidden (animación de Salient) y con 1.1 cortaba los descendentes
   de Outfit (g, j, p). */
#ajax-content-wrap .oms-hero .nectar-split-heading h1,
#ajax-content-wrap .oms-hero .nectar-split-heading h1 span {
	font-size: clamp(2.25rem, 1.35rem + 2.7vw, 3.75rem);
	line-height: 1.2;
	text-wrap: balance;
}

/* Degradado azul de marca sobre la imagen/vídeo del hero: legibilidad del
   texto arriba y de los botones abajo, sin apagar el centro. Va en TODAS las
   páginas, igual que el degradado de la fila. */
#ajax-content-wrap .oms-hero.wpb_row::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(0, 11, 140, 0.6) 0%,
		rgba(0, 11, 140, 0.28) 38%,
		rgba(0, 11, 140, 0.34) 64%,
		rgba(3, 8, 70, 0.72) 100%
	);
}

@media only screen and (max-width: 999px) {
	:root {
		--oms-hero-header-h: 74px;
	}

	#ajax-content-wrap .oms-hero.wpb_row {
		min-height: 110vh;
	}

	#ajax-content-wrap .oms-hero .nectar-split-heading h1,
	#ajax-content-wrap .oms-hero .nectar-split-heading h1 span {
		font-size: clamp(1.95rem, 1.1rem + 4.7vw, 3rem);
	}
}

@media only screen and (max-width: 690px) {
	#ajax-content-wrap .oms-hero.wpb_row {
		min-height: 107vh;
	}
}

/* Hero compacte (blog): mateix disseny, sense l'alçada de portada. La fila
   porta class="oms-hero oms-hero--compact". L'alçada és la del header més un
   espai fix per al títol i el subtítol, a totes les amplades (més específic que
   les regles de les media queries de dalt). */
#ajax-content-wrap .oms-hero.oms-hero--compact.wpb_row {
	min-height: calc(var(--oms-hero-header-h) + 18rem);
}

/* Botón sólido del hero de la portada: naranja de marca en lugar del azul
   general de .oms-btn--solid. Solo en la home (body.home): el resto de heros
   mantiene el azul. */
body.home #ajax-content-wrap .oms-hero .oms-btn--solid {
	background-color: #F68A12;
	border-color: #F68A12;
	color: #1A1A1A;
}
body.home #ajax-content-wrap .oms-hero .oms-btn--solid:hover,
body.home #ajax-content-wrap .oms-hero .oms-btn--solid:focus {
	background-color: #D4750A;
	border-color: #D4750A;
	color: #1A1A1A;
}

/* Logo de OMS Group en el footer (columna "Empresa"): marca blanca del grupo,
   discreta bajo los enlaces legales. Abre en pestaña nueva. */
.oms-group-link {
	display: inline-block;
	margin-top: 44px;
	line-height: 0;
}
.oms-group-link img {
	display: block;
	width: 72px;
	height: auto;
	opacity: 0.75;
	transition: opacity .3s ease;
}
.oms-group-link:hover img,
.oms-group-link:focus-visible img {
	opacity: 1;
}

/* Footer, bloque de delegaciones: el nombre de la ciudad va en su propio
   vc_column_text y arrastraba el margen inferior por defecto de WPBakery
   (35px), que lo separaba demasiado de la dirección. */
.oms-footer-city,
#ajax-content-wrap .oms-footer-city {
	margin-bottom: 6px;
}
.oms-footer-city h3,
#ajax-content-wrap .oms-footer-city h3 {
	margin-bottom: 0;
}

/* Footer, título "Delegaciones de OMS en España": la columna es media anchura
   y con la escala genérica de oms-fs-h2 (hasta 3rem) el título partía en dos
   líneas también en escritorio. Aquí la escala se ata al ancho de ventana con
   un tope más bajo, así cabe en una línea siempre que hay sitio; en móvil
   (columna a ancho completo) sigue partiendo en dos, pero equilibradas.
   La alineación (centrado) se fija en WPBakery, en la columna, no aquí. */
#ajax-content-wrap .nectar-global-section.before-footer .oms-fs-h2 h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.625rem);
	text-wrap: balance;
}

/* Footer: direcciones, teléfonos y correo enlazados (Google Maps, tel:, mailto:).
   Todo lo enlazable va en blanco puro: así contrasta con el gris del texto
   corrido y acompaña a los títulos, que también son blancos. El subrayado solo
   aparece en hover/focus, para no ensuciar el bloque de direcciones. */
#ajax-content-wrap .oms-footer-link,
.oms-footer-link {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease;
}
#ajax-content-wrap .oms-footer-link:hover,
#ajax-content-wrap .oms-footer-link:focus-visible,
.oms-footer-link:hover,
.oms-footer-link:focus-visible {
	color: #FFFFFF;
	border-bottom-color: currentColor;
}

/* Footer, listas de enlaces de "Empresa" y "Síguenos": antes eran nectar_cta
   con subrayado permanente; ahora son <a class="oms-footer-link"> normales,
   igual que los de contacto y direcciones. Aquí solo se coloca la lista. */
.oms-footer-links p,
#ajax-content-wrap .oms-footer-links p {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 25px;
	margin-bottom: 0;
}

/* Contacto — rejilla de comerciales: los 9 team-member van en 3 columnas de 3,
   cada columna apilada por su cuenta. El cargo ocupa una o dos líneas
   según el texto, así que las columnas se desalineaban y las fotos de una
   columna quedaban más altas que las de al lado.
   Se reserva siempre el alto de dos líneas en el cargo: todas las tarjetas
   miden lo mismo y las filas vuelven a cuadrar. `lh` (alto de línea real) con
   `em` de reserva para navegadores que no lo soporten.
   El cargo era un <h5> de Salient; functions.php lo pasa a
   <p class="oms-team-position"> (no es un título) y aquí recupera el aspecto
   que tenía como h5 (Roboto 18/18, peso 400) sin el estilo de párrafo de la tarjeta. */
.team-member[data-style="bio_fullscreen_alt"] .team-meta .oms-team-position {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 18px;
	color: #000;
}

@media only screen and (min-width: 690px) {
	.team-member[data-style="bio_fullscreen_alt"] .team-meta .oms-team-position {
		display: block;
		min-height: 2.6em;
		min-height: 2lh;
	}
}

/* -------------------------------------------------------------------------
   FICHA DE SOLUCION (single-solucion.php)

   El cuerpo de cada solucion es contenido WPBakery propio de la ficha, con los
   mismos componentes que el resto del sitio (Animated Text, Fancy Box, Toggle
   Panels, Post Loop Builder). Aqui solo van los dos ajustes que los
   componentes nativos no cubren.
   ---------------------------------------------------------------------- */

/* Tarjetas de familia de maquinaria (Fancy Box "Color Box Basic"). Todas a la
   misma altura y con el titulo separado del texto: sin esto, el <h3> y el
   parrafo quedan pegados y las tarjetas de una fila bailan de altura. */
#ajax-content-wrap .oms-solucion-card .nectar-fancy-box .inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 32px 26px;
}

/* Tipografia: la del tema, sin tamaños propios. Solo se quita el margen y el
   titulo va en Outfit, como el resto de titulos de tarjeta del sitio. */
#ajax-content-wrap .oms-solucion-card .nectar-fancy-box h3,
#ajax-content-wrap .oms-solucion-card .nectar-fancy-box p {
	margin: 0;
}

#ajax-content-wrap .oms-solucion-card .nectar-fancy-box h3 {
	font-family: var(--oms-font-outfit);
	font-weight: 600;
}

/* SAT — pestañas del formulario: texto más grande y en blanco sobre el azul. */
#ajax-content-wrap .oms-form-tabs .wpb_tabs_nav li a,
#ajax-content-wrap .oms-form-tabs .wpb_tabs_nav li a span {
	font-size: 24px;
	line-height: 1.3;
	color: #FFFFFF;
}
#ajax-content-wrap .oms-form-tabs .wpb_tabs_nav li a::after {
	background-color: #FFFFFF;
}

/* Proyectos — etiquetas bajo el logo: ubicación y solución aplicada.
   Las pinta [oms_logos_clientes] solo cuando el proyecto tiene el dato. */
.oms-logos__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
}
.oms-logos--align-left .oms-logos__tags {
	justify-content: flex-start;
}
#ajax-content-wrap .oms-logos__tag,
.oms-logos__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.oms-logos__tag--ubicacion {
	background: #F0F3F7;
	color: #5A6B7B;
}
.oms-logos__tag--solucion {
	background: rgba(0, 11, 140, 0.08);
	color: #000b8c;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROYECTOS — presentación de la rejilla de clientes ([oms_logos_clientes]).
   Pasa de logos sueltos sobre el fondo a tarjetas con el mismo lenguaje que
   .oms-cat-card (blanco, borde #E3E7EE, radio 12px, elevación al hover) y la
   tipografía Outfit del resto del sitio. Va DESPUÉS del bloque base de
   .oms-logos, así que gana por cascada sin tocar aquellas reglas.
   ═══════════════════════════════════════════════════════════════════════ */
#ajax-content-wrap .oms-logos,
.oms-logos {
	gap: 24px;
}

#ajax-content-wrap .oms-logos__item,
.oms-logos__item {
	border: 1px solid #E3E7EE;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}

#ajax-content-wrap .oms-logos__item:hover,
.oms-logos__item:hover {
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

#ajax-content-wrap .oms-logos__link,
.oms-logos__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	height: 100%;
	padding: 28px 24px;
}

/* La caja del logo mantiene la altura que fija el editor (--oms-logos-h),
   sin fondo: los logos van en color sobre el blanco de la tarjeta. */
.oms-logos__media {
	width: 100%;
	height: calc(var(--oms-logos-h, 60px) * 1.4);
}

.oms-logos__img {
	max-height: calc(var(--oms-logos-h, 60px) * 1.4);
}

/* Nombre del cliente: Outfit 600, tinta de marca. Sustituye al gris suelto
   del bloque base; el modificador --h6/--body-sm ya no manda el tamaño. */
#ajax-content-wrap .oms-logos__name,
.oms-logos__name {
	margin: 0;
	color: #0B2A4A;
	font-family: var(--oms-font-outfit);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}

/* Etiquetas: un paso más grandes y con más aire que la versión anterior. */
.oms-logos__tags {
	margin-top: auto;
	padding-top: 4px;
	gap: 8px;
}

#ajax-content-wrap .oms-logos__tag,
.oms-logos__tag {
	padding: 6px 14px;
	font-family: var(--oms-font-outfit);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: normal;
}

@media only screen and (max-width: 690px) {
	#ajax-content-wrap .oms-logos__link,
	.oms-logos__link {
		padding: 20px 16px;
		gap: 12px;
	}
}

/* Ubicacion del proyecto: va sobre el titular del hero con la MISMA etiqueta
   que el listado de proyectos (.oms-logos__tag--ubicacion): pildora clara,
   radio 20px, Outfit 14/500. El componente es un "Animated Text", que imprime
   el texto dentro de un <p>, asi que la pildora se dibuja sobre ese <p>.
   Sin el campo `ubicacion` el elemento no se imprime (inc/ficha-hero.php), asi
   que este bloque no deja hueco en las fichas que no lo tienen. */
#ajax-content-wrap .oms-hero .oms-hero-kicker p {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	background: #F0F3F7;
	font-family: var(--oms-font-outfit);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

#ajax-content-wrap .oms-hero .oms-hero-kicker {
	margin-bottom: 8px;
}

/* ==========================================================================
   BANNERS CTA (Global Sections "Banner …") — diseño de _src/media/banners.
   Fila partida en dos columnas 1/2: texto + foto. La foto es el fondo de la
   columna .oms-banner__media (sin contenido), así que su altura la da la
   columna de texto (equal_height). El orden foto/texto sale del orden de las
   columnas en el editor.
   Clases de la fila (campo "Extra Class" del row):
     oms-banner                     base
     oms-banner--dark / --light     panel azul marca / panel blanco
   ========================================================================== */
#ajax-content-wrap .oms-banner > .row_col_wrap_12 {
	border-radius: 20px;
	overflow: hidden;
}

#ajax-content-wrap .oms-banner--light > .row_col_wrap_12 {
	box-shadow: inset 0 0 0 1px #E3E7EF;
}

/* La columna se estira a la altura de la foto (equal_height); el contenido se
   centra en vertical dentro de ella. */
#ajax-content-wrap .oms-banner .oms-banner__text > .vc_column-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: clamp(40px, 5vw, 88px) clamp(24px, 5.5vw, 96px);
}

#ajax-content-wrap .oms-banner .oms-banner__media {
	min-height: 360px;
}

#ajax-content-wrap .oms-banner .oms-banner__title {
	margin: 0 0 20px;
	font-family: var(--oms-font-outfit);
	font-size: clamp(1.75rem, 1.393rem + 1.786vw, 3rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

#ajax-content-wrap .oms-banner .oms-banner__lead {
	margin: 0;
	max-width: 32ch;
	font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
	line-height: 1.35;
}

/* CTA: el botón del sitio (.oms-btn--solid + .oms-btn__arrow) dentro de un
   Text Block; el <p> que añade WPBakery no debe sumar el padding de Salient. */
#ajax-content-wrap .oms-banner .oms-banner__cta {
	margin: clamp(24px, 3vw, 40px) 0 0;
}

#ajax-content-wrap .oms-banner .oms-banner__cta p {
	padding-bottom: 0;
}

/* Salient atenúa los enlaces de los Text Block en filas de texto claro
   (`.span_12.light .wpb_text_column a:not(:hover){opacity:.7}`): el botón
   del banner debe verse a plena intensidad. */
#ajax-content-wrap .oms-banner .oms-banner__cta a.oms-btn {
	opacity: 1;
}

/* Hover: la flecha avanza hacia la derecha. */
#ajax-content-wrap .oms-banner .oms-btn__arrow {
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

#ajax-content-wrap .oms-banner .oms-btn:hover .oms-btn__arrow,
#ajax-content-wrap .oms-banner .oms-btn:focus-visible .oms-btn__arrow {
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
	#ajax-content-wrap .oms-banner .oms-btn__arrow {
		transition: none;
	}
}

/* Sobre el panel azul el botón sólido se invierte: blanco con texto azul. */
#ajax-content-wrap .oms-banner--dark .oms-btn--solid {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: #000b8c;
}

#ajax-content-wrap .oms-banner--dark .oms-btn--solid:hover,
#ajax-content-wrap .oms-banner--dark .oms-btn--solid:focus {
	background-color: #F6F4F0;
	border-color: #F6F4F0;
	color: #000b8c;
}

/* Colores: el panel oscuro es el accent de Salient (#000b8c). */
#ajax-content-wrap .oms-banner--dark .oms-banner__title,
#ajax-content-wrap .oms-banner--dark .oms-banner__lead {
	color: #FFFFFF;
}

#ajax-content-wrap .oms-banner--light .oms-banner__title {
	color: #000b8c;
}

#ajax-content-wrap .oms-banner--light .oms-banner__lead {
	color: #1B2340;
}

/* Banner de imagen completa (ferias): una sola columna 1/1 cuyo fondo es la
   pieza entera, con el texto ya maquetado en ella. El alto sale de la
   proporción de la imagen (1765×516) para que no se recorte; el texto de la
   imagen se repite oculto en .oms-sr-only para lectores de pantalla. */
#ajax-content-wrap .oms-banner--image .oms-banner__media {
	min-height: 0;
	aspect-ratio: 1765 / 516;
}

#ajax-content-wrap .oms-banner--image .oms-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Móvil: columnas apiladas; la foto necesita alto propio al no tener contenido. */
@media only screen and (max-width: 999px) {
	#ajax-content-wrap .oms-banner .oms-banner__media {
		min-height: 240px;
	}

	#ajax-content-wrap .oms-banner--image .oms-banner__media {
		min-height: 0;
	}

	#ajax-content-wrap .oms-banner .oms-banner__lead {
		max-width: none;
	}
}

/* TARJETAS APILADAS (home, #features) — la descripción y el botón entran
   después del título. Salient añade .animated-in al .nectar-split-heading
   cuando lo anima; los hermanos lo siguen con un pequeño retraso.
   Solo escritorio: en móvil el título no se anima (mobile_disable_animation)
   y el contenido debe verse sin esperar a esa clase. */
@media only screen and (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
	#features .wpb_wrapper:has(> .nectar-split-heading) > .nectar-responsive-text,
	#features .wpb_wrapper:has(> .nectar-split-heading) > .wpb_text_column {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
	}

	#features .wpb_wrapper:has(> .nectar-split-heading.animated-in) > .nectar-responsive-text,
	#features .wpb_wrapper:has(> .nectar-split-heading.animated-in) > .wpb_text_column {
		opacity: 1;
		transform: none;
	}

	#features .wpb_wrapper:has(> .nectar-split-heading.animated-in) > .nectar-responsive-text {
		transition-delay: .25s;
	}

	#features .wpb_wrapper:has(> .nectar-split-heading.animated-in) > .wpb_text_column {
		transition-delay: .45s;
	}
}

/* OMS — Animació d'entrada (assets/js/oms-reveal.js): targetes de carrusel, galeries
   de logos i files de columnes-targeta (el_class oms-solucion-card / oms-reveal-card),
   amb el mateix efecte que el grid de solucions (post grid fade-in-from-bottom).
   L'estat inicial només s'aplica amb html.oms-reveal (JS actiu i sense reduced-motion). */
.oms-reveal .nectar-carousel.oms-reveal-group .cell > .inner-wrap-outer,
.oms-reveal .wpb_gallery.oms-reveal-group,
.oms-reveal .oms-reveal-group > .oms-solucion-card,
.oms-reveal .oms-reveal-group > .oms-reveal-card {
	opacity: 0;
	transform: translateY(80px);
}

.oms-reveal .nectar-carousel.oms-reveal-group .cell > .inner-wrap-outer.oms-reveal-in,
.oms-reveal .wpb_gallery.oms-reveal-group.oms-reveal-in,
.oms-reveal .oms-reveal-group > .oms-solucion-card.oms-reveal-in,
.oms-reveal .oms-reveal-group > .oms-reveal-card.oms-reveal-in {
	opacity: 1;
	transform: translateY(0);
	transition: transform .75s cubic-bezier(.22, .61, .36, 1), opacity .75s cubic-bezier(.22, .61, .36, 1);
}

/* Post grid «content_next_to_image» (blog): Salient hi posa .animated-in però no en té CSS. */
.nectar-post-grid-wrap[data-style=content_next_to_image] .nectar-post-grid[data-animation=fade-in-from-bottom] .nectar-post-grid-item {
	opacity: 0;
	transform: translateY(80px);
}

.nectar-post-grid-wrap[data-style=content_next_to_image] .nectar-post-grid[data-animation=fade-in-from-bottom] .nectar-post-grid-item.animated-in {
	opacity: 1;
	transform: translateY(0);
	transition: transform .75s cubic-bezier(.22, .61, .36, 1), opacity .75s cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   CONTACTO FLOTANTE (inc/oms-contact-fab.php) — Servicio técnico + WhatsApp,
   fijos al centro del borde derecho. Misma familia que .oms-btn: radio 6px,
   Outfit 500, azul corporativo, sombra azul-oscura de la trust card, .3s ease.
   Al hover/focus la pestaña se alarga hacia la izquierda y muestra el texto.
   El verde WhatsApp es el oscuro (#0A7A5A): el #25D366 no da 4.5:1 con blanco.
   ========================================================================== */
.oms-fab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.oms-fab__btn {
	display: flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 52px;
	max-width: 52px;
	padding: 0 18px 0 0;
	overflow: hidden;
	border-radius: 6px 0 0 6px;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(11, 42, 74, 0.08), 0 12px 24px -8px rgba(11, 42, 74, 0.25);
	transition: max-width .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.oms-fab__btn--sat,
.oms-fab__btn--sat:hover,
.oms-fab__btn--sat:focus {
	color: #F6F4F0;
}
.oms-fab__btn--sat { background-color: #000b8c; }
.oms-fab__btn--sat:hover,
.oms-fab__btn--sat:focus-visible { background-color: #000869; }

.oms-fab__btn--wa,
.oms-fab__btn--wa:hover,
.oms-fab__btn--wa:focus {
	color: #FFFFFF;
}
.oms-fab__btn--wa { background-color: #0A7A5A; }
.oms-fab__btn--wa:hover,
.oms-fab__btn--wa:focus-visible { background-color: #08684C; }

.oms-fab__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	height: 52px;
}

.oms-fab__svg {
	display: block;
	fill: currentColor;
}
.oms-fab__svg--line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.oms-fab__label {
	font-family: var(--oms-font-outfit);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s ease;
}

.oms-fab__btn:hover,
.oms-fab__btn:focus-visible {
	max-width: 320px;
	box-shadow: 0 2px 6px rgba(11, 42, 74, 0.08), 0 12px 24px -8px rgba(11, 42, 74, 0.25), 0 30px 60px -18px rgba(11, 42, 74, 0.30);
}
.oms-fab__btn:hover .oms-fab__label,
.oms-fab__btn:focus-visible .oms-fab__label {
	opacity: 1;
	transition-delay: .1s;
}

.oms-fab__btn:focus-visible {
	outline: 3px solid #F6F4F0;
	outline-offset: -5px;
}

/* Pantallas táctiles: sin hover, solo el icono. */
@media (hover: none) {
	.oms-fab__btn:hover,
	.oms-fab__btn:focus-visible {
		max-width: 52px;
	}
}

@media (max-width: 690px) {
	.oms-fab { gap: 6px; }
	.oms-fab__btn,
	.oms-fab__btn:hover,
	.oms-fab__btn:focus-visible {
		height: 48px;
		max-width: 48px;
	}
	.oms-fab__icon {
		flex-basis: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oms-fab__btn,
	.oms-fab__label {
		transition: none;
	}
}

/* SUBTÍTOL ROTATIU DEL HERO (Rotating Words Title) — el camp "Custom Font Size"
   del constructor és text lliure (`3vh`: depèn de l'alçada de la pantalla) i
   l'element fixa `line-height: 0.8`, que fa trepitjar les línies quan el text
   parteix. El constructor no té camp d'interlineat, així que aquí rep l'escala
   de l'H3 (22 → 28px) amb el seu interlineat. */
#ajax-content-wrap .nectar-rotating-words-title .heading {
	font-size: clamp(1.35rem, 1.236rem + 0.571vw, 1.75rem);
	line-height: 1.3;
}

/* Fancy box "Color box hover": l'element força `line-height: 1.7em` al text;
   aquí torna al del cos (Roboto Condensed 20/25), com la resta de paràgrafs. */
#ajax-content-wrap .nectar-fancy-box[data-style="color_box_hover"] .inner p {
	line-height: inherit;
}

/* Cercador del blog (bloc Search): mateix radi que la resta de camps (10px). */
#ajax-content-wrap .wp-block-search__input {
	border-radius: 10px;
}

/* Barra lateral del blog: els títols dels ginys són blocs H2 (jerarquia correcta
   sota l'H1 del post), però visualment van a l'escala d'H5 (Outfit 600 20/26).
   El panell de ginys no té camp de mida. */
#ajax-content-wrap #sidebar .widget h2 {
	font-size: 20px;
	line-height: 26px;
}

/* Enllaços dins de text corregut (blocs Gutenberg: pàgines legals, entrades del blog).
   El blau de marca sobre text negre només fa 1.42:1: sense subratllat l'enllaç no es
   distingeix del text si no es veu el color (WCAG 1.4.1, axe link-in-text-block). */
#ajax-content-wrap :is(.wp-block-paragraph, .wp-block-list li) a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pàgina 404 (404.php del child). L'H1 porta "404" i "Página no encontrada":
   el número manté l'escala gran de Salient (#error-404 h1) i el text va a
   mida de títol de secció. */
#error-404.oms-404 h1 .oms-404__code {
	display: block;
}

#error-404.oms-404 h1 .oms-404__title {
	display: block;
	margin-top: 0.25em;
	font-size: clamp(2rem, 1.5rem + 2vw, 3.375rem);
	line-height: 1.15;
	letter-spacing: 0;
}

#error-404.oms-404 .oms-404__text {
	max-width: 36em;
	margin: 1.5em auto 0;
}

#error-404.oms-404 .oms-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 32px 0 0;
}

#error-404.oms-404 .oms-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

#error-404.oms-404 .oms-404__links li {
	margin: 0;
	list-style: none;
}

#error-404.oms-404 .oms-404__links a {
	text-decoration: underline;
	text-underline-offset: 3px;
}