/*
 * EINSER — lo que los controles clásicos de Elementor no cubren.
 * Prefijo de clases: ein-. Sin márgenes, rellenos ni anchos sobre elementos de Elementor (eso va en los controles).
 * Escala tipográfica (5 tamaños): XS 14 · S 16 · M 20 · L 36 · XL 50  (móvil: 14 · 16 · 18 · 28 · 34).
 */
:root {
	--ein-marino: #293664;
	--ein-azul: #0151A1;
	--ein-texto: #4A5680;
	--ein-linea: #D9DCE6;
	--ein-gris: #EDEDED;
	--ein-blanco: #FFFFFF;
	--ein-inter: 'EINSER Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ein-poppins: 'EINSER Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ein-xs: 14px;
	--ein-s: 16px;
	--ein-m: 20px;
	--ein-l: 36px;
	--ein-xl: 50px;
}

@media (max-width: 767px) {
	:root {
		--ein-m: 18px;
		--ein-l: 28px;
		--ein-xl: 34px;
	}
}

html {
	scroll-behavior: smooth;
}

body.ein-sitio {
	font-family: var(--ein-poppins);
	font-size: var(--ein-s);
	color: var(--ein-texto);
	-webkit-font-smoothing: antialiased;
}

/* Hello Elementor: su reset pinta enlaces y botones de #CC3366. Se anula con los colores de marca.
   Este archivo carga después de las hojas de Hello (functions.php) y los botones con clase se estilan en cada componente. */
a {
	color: var(--ein-azul);
}

a:hover,
a:active {
	color: var(--ein-marino);
}

button:not([class]),
[type='button']:not([class]),
[type='submit']:not([class]) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font: inherit;
	white-space: normal;
}

button:not([class]):hover,
button:not([class]):focus,
[type='button']:not([class]):hover,
[type='button']:not([class]):focus,
[type='submit']:not([class]):hover,
[type='submit']:not([class]):focus {
	background-color: transparent;
	color: inherit;
}

/* Foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ein-azul);
	outline-offset: 2px;
}

.ein-sobre-oscuro a:focus-visible,
.ein-sobre-oscuro button:focus-visible {
	outline-color: var(--ein-blanco);
}

/* Cabecera pegajosa: sombra al bajar */
.elementor-location-header .elementor-sticky--effects {
	box-shadow: 0 6px 18px rgba(41, 54, 100, 0.12);
}

/* Portadas: foto fija con el texto que sube por encima (fondo fijo nativo de Elementor).
   Sin fondo fijo en pantallas táctiles ni con «reducir movimiento». */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
	.ein-hero,
	.ein-franja-fija {
		background-attachment: scroll !important;
	}
}

/* En tableta y móvil el texto ocupa todo el ancho: velo plano (blanco sobre marino al 86 % ≥ 7:1 sobre cualquier foto). */
@media (max-width: 1024px) {
	.ein-hero::before {
		background-image: none !important;
		background-color: rgba(41, 54, 100, 0.86) !important;
	}
}

/* El enlace de una imagen de Elementor es inline-block: su ancho depende de la foto y el 100 % de la imagen queda en
   cálculo circular (la miniatura vertical salía de 218 px y centrada). Como bloque, la imagen ocupa todo el ancho. */
.ein-tarjeta .elementor-widget-image a,
.ein-zoom a {
	display: block;
}

/* Botones de los shortcodes y del Loop (esquina inferior derecha de 20 px) */
.ein-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 0 0 20px 0;
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-s);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ein-btn--borde {
	background: var(--ein-blanco);
	color: var(--ein-azul);
	border: 1px solid var(--ein-azul);
}

.ein-btn--borde:hover {
	background: var(--ein-azul);
	color: var(--ein-blanco);
}

.ein-btn--wa {
	border-radius: 24px;
}

.ein-btn svg {
	flex: none;
	width: 17px;
	height: 17px;
}

/* Chips y filtros */
.ein-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ein-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--ein-linea);
	border-radius: 22px;
	background: var(--ein-blanco);
	color: #000;
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-xs);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ein-chip:hover {
	border-color: var(--ein-azul);
	color: var(--ein-azul);
}

.ein-chip.is-activo {
	background: var(--ein-azul);
	border-color: var(--ein-marino);
	color: var(--ein-blanco);
}

.ein-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ein-chip--gris {
	min-height: 44px;
	border: 0;
	border-radius: 6px;
	background: var(--ein-gris);
	color: var(--ein-marino);
	font-family: var(--ein-poppins);
	font-weight: 400;
}

/* Buscador del blog */
.ein-buscar {
	display: flex;
	gap: 8px;
}

.ein-buscar input[type='search'] {
	flex: 1 1 auto;
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--ein-blanco);
	border-radius: 8px;
	background: var(--ein-blanco);
	color: #000;
	font-family: var(--ein-poppins);
	font-size: var(--ein-s);
}

.ein-buscar button {
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background: var(--ein-azul);
	color: var(--ein-blanco);
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-s);
	cursor: pointer;
}

.ein-buscar button:hover,
.ein-buscar button:focus {
	background: var(--ein-marino);
	color: var(--ein-blanco);
}

@media (max-width: 600px) {
	.ein-buscar {
		flex-wrap: wrap;
	}

	.ein-buscar input[type='search'] {
		flex: 1 1 100%;
		font-size: var(--ein-xs);
	}

	.ein-buscar button {
		flex: 1 1 100%;
	}
}

/* Ficha técnica del proyecto */
.ein-ficha {
	margin: 0;
}

.ein-ficha__fila {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ein-linea);
}

.ein-ficha dt {
	margin: 0;
	color: var(--ein-texto);
	font-family: var(--ein-poppins);
	font-size: var(--ein-xs);
}

.ein-ficha dd {
	margin: 0;
	color: var(--ein-marino);
	font-family: var(--ein-poppins);
	font-weight: 600;
	font-size: var(--ein-xs);
	text-align: right;
}

/* Galería del proyecto */
.ein-galeria__principal {
	position: relative;
	margin: 0;
	aspect-ratio: 1280 / 620;
	overflow: hidden;
	border-radius: 20px;
	background: var(--ein-gris);
}

.ein-galeria__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ein-galeria__img.is-activa {
	opacity: 1;
}

.ein-galeria__contador {
	position: absolute;
	left: 20px;
	bottom: 20px;
	padding: 6px 12px;
	border-radius: 6px;
	background: rgba(41, 54, 100, 0.85);
	color: var(--ein-blanco);
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-xs);
}

.ein-galeria__botones {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: flex;
	gap: 8px;
}

.ein-galeria__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--ein-blanco);
	color: var(--ein-marino);
	font-size: var(--ein-m);
	cursor: pointer;
}

.ein-galeria__btn--azul {
	background: var(--ein-azul);
	color: var(--ein-blanco);
}

/* Estados: Hello pinta [type=button]:hover de rosado con mayor especificidad que la clase sola */
.ein-galeria__btn:hover,
.ein-galeria__btn:focus {
	background: var(--ein-gris);
	color: var(--ein-marino);
}

.ein-galeria__btn--azul:hover,
.ein-galeria__btn--azul:focus {
	background: var(--ein-marino);
	color: var(--ein-blanco);
}

.ein-galeria {
	min-width: 0;
}

.ein-galeria__miniaturas {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	overflow-x: auto;
}


.ein-galeria__mini {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--ein-gris);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 233 / 115;
}

@media (max-width: 767px) {
	.ein-galeria__mini {
		flex: 0 0 30%;
	}
}

.ein-galeria__mini:hover,
.ein-galeria__mini:focus {
	background: var(--ein-gris);
	border-color: var(--ein-linea);
}

.ein-galeria__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ein-galeria__mini.is-activa,
.ein-galeria__mini.is-activa:hover {
	border-color: var(--ein-azul);
}

/* Tarjetas: zoom de la imagen y elevación */
.ein-tarjeta {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ein-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(41, 54, 100, 0.18);
}

.ein-tarjeta .elementor-widget-image img,
.ein-tarjeta .elementor-widget-theme-post-featured-image img {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ein-tarjeta:hover .elementor-widget-image img,
.ein-tarjeta:hover .elementor-widget-theme-post-featured-image img {
	transform: scale(1.05);
}

/* Secciones y tarjetas que se ocultan si el campo ACF está vacío */
.ein-opcional:not(:has(.ein-dato .elementor-heading-title)) {
	display: none;
}

.ein-grupo:not(:has(.ein-dato .elementor-heading-title)) {
	display: none;
}

.ein-dato:empty {
	display: none;
}

/* Paginación del Loop Grid */
.elementor-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-m);
}

.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border: 1px solid var(--ein-azul);
	border-radius: 24px;
	background: var(--ein-blanco);
	color: var(--ein-azul);
	text-decoration: none;
}

.elementor-pagination .page-numbers.current {
	background: var(--ein-azul);
	color: var(--ein-blanco);
}

/* Movimiento: aparición al entrar en pantalla (fundido + subida, escalonada) */
@keyframes ein-sube {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ein-rv,
		.ein-rv-hijos .e-loop-item {
			animation: ein-sube linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		.ein-rv:nth-child(3n + 2),
		.ein-rv-hijos .e-loop-item:nth-of-type(3n + 2) {
			animation-range: entry 8% entry 48%;
		}

		.ein-rv:nth-child(3n),
		.ein-rv-hijos .e-loop-item:nth-of-type(3n) {
			animation-range: entry 16% entry 56%;
		}
	}
}

/* Alternativa con IntersectionObserver (el JS marca .ein-js y .is-visible) */
@media (prefers-reduced-motion: no-preference) {
	.ein-js.ein-sin-timeline .ein-rv,
	.ein-js.ein-sin-timeline .ein-rv-hijos .e-loop-item {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ein-js.ein-sin-timeline .ein-rv.is-visible,
	.ein-js.ein-sin-timeline .ein-rv-hijos .e-loop-item.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Respeto a «reducir movimiento» */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.ein-rv,
	.ein-rv-hijos .e-loop-item {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Etiquetas de término (proyecto y artículo) */
.ein-etiquetas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 8px 8px 0;
}

.ein-etiqueta {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 6px;
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-xs);
}

.ein-etiqueta--azul {
	background: var(--ein-azul);
	color: var(--ein-blanco);
}

.ein-etiqueta--gris {
	background: var(--ein-gris);
	color: var(--ein-marino);
}

/* Enlaces con flecha, meta de tarjetas y migas */
.ein-enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ein-azul);
	font-family: var(--ein-inter);
	font-weight: 600;
	font-size: var(--ein-s);
	text-decoration: none;
}

.ein-enlace:hover {
	color: var(--ein-marino);
}

.ein-meta,
.ein-meta p {
	font-family: var(--ein-poppins);
	font-size: var(--ein-xs);
	color: var(--ein-texto);
}

.ein-migas,
.ein-migas a,
.ein-migas span {
	font-family: var(--ein-poppins);
	font-size: var(--ein-xs);
}

.ein-migas a {
	text-decoration: underline;
}

.ein-migas__nav ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ein-migas__nav li + li::before {
	content: '/';
	margin-right: 8px;
	color: var(--ein-texto);
}

.ein-migas__nav li {
	color: var(--ein-texto);
}

/* Datos de contacto con ícono (pie y Contacto) */
.ein-contacto {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ein-contacto li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.ein-contacto a {
	color: inherit;
	text-decoration: none;
}

.ein-contacto a:hover {
	color: inherit;
	text-decoration: underline;
}

.ein-contacto__ico {
	flex: none;
}

.ein-contacto--claro .ein-contacto__ico {
	color: var(--ein-azul);
}

/* Número de la tarjeta de proyecto: contador del Loop (01, 02, 03…) a la derecha de la línea de servicio */
.elementor-loop-container {
	counter-reset: ein-n;
}

.e-loop-item {
	counter-increment: ein-n;
}

.ein-cat-fila::after {
	content: counter(ein-n, decimal-leading-zero);
	content: counter(ein-n, decimal-leading-zero) / '';
	color: var(--ein-linea);
	font-family: var(--ein-inter);
	font-weight: 700;
	font-size: var(--ein-m);
	line-height: 1;
}

/* Tarjeta de proyecto con foto de fondo (carruseles): el título es un enlace que cubre toda la tarjeta */
.ein-tarjeta-overlay .e-con,
.ein-tarjeta-overlay .elementor-widget {
	position: static;
}

.ein-tarjeta-overlay .elementor-heading-title a {
	color: inherit;
}

.ein-tarjeta-overlay .elementor-heading-title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ein-sobre-oscuro .ein-meta,
.ein-sobre-oscuro .ein-meta p {
	color: var(--ein-blanco);
}

/* Formulario de Contacto: casilla de aceptación táctil */
.elementor-field-type-acceptance input[type='checkbox'] {
	width: 20px;
	height: 20px;
	accent-color: var(--ein-azul);
}

/* Enlaces legales del pie */
.ein-legal a {
	color: var(--ein-blanco);
}

/* Lista de bloques de la página Servicios: la imagen alterna de lado y los pares van sobre azul marino */
.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque {
	flex-direction: row-reverse;
}

.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque-fondo {
	background-color: var(--ein-marino);
}

.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque .elementor-heading-title,
.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque .elementor-widget-text-editor,
.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque .ein-enlace {
	color: var(--ein-blanco);
}

@media (max-width: 1024px) {
	.ein-lista-bloques .e-loop-item:nth-of-type(even) .ein-bloque {
		flex-direction: column;
	}
}

/* Contenido editable de proyectos y artículos (HTML del editor, no elementos de Elementor) */
.ein-contenido {
	font-family: var(--ein-poppins);
	font-size: var(--ein-s);
	line-height: 1.7;
	color: var(--ein-texto);
}

.ein-contenido h2 {
	margin: 0 0 16px;
	font-family: var(--ein-inter);
	font-weight: 700;
	font-size: var(--ein-l);
	line-height: 1.2;
	color: var(--ein-marino);
}

.ein-contenido h3 {
	margin: 32px 0 12px;
	font-family: var(--ein-inter);
	font-weight: 700;
	font-size: var(--ein-l);
	line-height: 1.2;
	color: var(--ein-marino);
}

.ein-contenido h2 + p,
.ein-contenido > p:first-child {
	font-size: var(--ein-m);
	color: var(--ein-marino);
}

.ein-contenido p,
.ein-contenido ul,
.ein-contenido ol {
	margin: 0 0 16px;
}

.ein-contenido li {
	margin-bottom: 8px;
}

.ein-contenido a {
	color: var(--ein-azul);
}

/* Pie: enlaces y datos de contacto */
.ein-pie-datos a,
.ein-pie-datos p {
	color: var(--ein-blanco);
	text-decoration: none;
}

.ein-pie-datos a:hover {
	text-decoration: underline;
}

.ein-pie-lista .elementor-icon-list-item > a {
	min-height: 44px;
}

/* Menú: ítem activo en negrita y submenú sobre blanco */
.ein-menu .elementor-item.elementor-item-active,
.ein-menu .current-menu-ancestor > .elementor-item {
	font-weight: 800;
}

.ein-menu .elementor-nav-menu--dropdown {
	box-shadow: 0 8px 24px rgba(41, 54, 100, 0.12);
}

/* Sin imagen del dron (servicios sin esa foto) no se aplica el montaje */
.ein-sobresale:not(:has(img)) {
	display: none;
}