/*
 * Primordial — detalles del diseño que Elementor gratis no resuelve con sus controles.
 * Todo se engancha con clases que se ponen en Elementor (Avanzado → Clases CSS),
 * y los colores salen de los globales del kit: cambiar un color global cambia esto también.
 */

:root {
	--pm-fondo: var(--e-global-color-pmfondo, #080a0b);
	--pm-superficie: var(--e-global-color-pmsuper, #101213);
	--pm-borde: var(--e-global-color-pmborde, #686868);
	--pm-acento: var(--e-global-color-accent, #ddea7e);
	--pm-texto: var(--e-global-color-primary, #fff);
	--pm-suave: var(--e-global-color-secondary, #adadad);
	--pm-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor strong {
	font-weight: 500;
}

/* Cortes de línea parejos en el título principal, como los que eligió el diseño. */
.pm-equilibrado .elementor-heading-title {
	text-wrap: balance;
}

@media (min-width: 1025px) {
	.pm-una-linea .elementor-heading-title {
		white-space: nowrap;
	}
}

/* Íconos de 22 px en las pastillas, como en el diseño. */
.pm-boton-menu .elementor-button-icon svg,
.pm-vidrio .elementor-button-icon svg {
	width: 22px;
	height: 22px;
}

/* ── Etiqueta con punto (eyebrow): clase pm-etiqueta en un widget Título ── */
.pm-etiqueta .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border: 1px solid var(--pm-borde);
	border-radius: 40px;
}

.pm-etiqueta .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pm-acento);
	box-shadow: 0 0 15px 1px rgb(255 255 255 / 0.8);
}

/* ── Línea que separa secciones: widget HTML con clase pm-divisor-widget ── */
.elementor-element.pm-divisor-widget {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 1;
	pointer-events: none;
}

.pm-divisor {
	position: relative;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(104 104 104 / 0.6) 46.6%, transparent);
}

.pm-divisor--brillo::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	width: 329px;
	height: 15.5px;
	transform: translateX(-50%);
	background: url("../img/linea-destacada.svg") no-repeat center / 100% 100%;
	opacity: 0.7;
}

/* ── Brillo en las esquinas de los botones: pm-brillo (abajo) y pm-brillo-doble (dos esquinas) ── */
.pm-brillo .elementor-button,
.pm-brillo-doble .elementor-button {
	position: relative;
	overflow: visible;
}

.pm-brillo .elementor-button::after,
.pm-brillo-doble .elementor-button::after,
.pm-brillo-doble .elementor-button::before {
	content: "";
	position: absolute;
	width: 68px;
	height: 48px;
	pointer-events: none;
	background: url("../img/esquina.svg") no-repeat center / 100% 100%;
	transition: opacity 0.3s var(--pm-curva);
}

.pm-brillo .elementor-button::after,
.pm-brillo-doble .elementor-button::after {
	left: -7px;
	bottom: -8px;
	transform: rotate(180deg);
}

.pm-brillo-doble .elementor-button::before {
	right: -9px;
	top: -8px;
}

.pm-brillo .elementor-button:hover::after,
.pm-brillo-doble .elementor-button:hover::after,
.pm-brillo-doble .elementor-button:hover::before {
	opacity: 0.35;
}

/* ── Pastilla de vidrio ("Ver caso de estudio", "Leer más"): clase pm-vidrio en un Botón ── */
.pm-vidrio .elementor-button {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* ── Brillo que cruza los botones al pasar el mouse ──
   Todos los botones de Elementor (también los que se agreguen) y las pastillas "Leer más". La luz es una capa
   entre el fondo y el texto, recortada con la forma del botón: los brillos de las esquinas (pm-brillo) usan
   ::before y ::after del botón, así que esta va en el envoltorio del texto. En las tarjetas de proyectos y del
   blog cruza al pasar por toda la tarjeta, junto con el acercamiento de la imagen. Al salir vuelve a su lugar
   sin verse, lista para cruzar otra vez. */
.elementor-button {
	position: relative;
	isolation: isolate;
}

.elementor-button-content-wrapper {
	border-radius: inherit;
}

.elementor-button-content-wrapper::before,
.pm-pastilla::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(
			105deg,
			transparent 38%,
			rgb(255 255 255 / 0.14) 45%,
			rgb(255 255 255 / 0.38) 50%,
			rgb(255 255 255 / 0.14) 55%,
			transparent 62%
		)
		no-repeat 100% 0 / 250% 100%;
	pointer-events: none;
}

.elementor-button:hover .elementor-button-content-wrapper::before,
.elementor-button:focus-visible .elementor-button-content-wrapper::before,
.pm-proyecto:hover .elementor-button-content-wrapper::before,
.pm-recurso:hover .pm-pastilla::before {
	background-position: 0 0;
	transition: background-position 1s var(--pm-curva);
}

/* ── Videos de fondo (la malla del hero) ──
   Los navegadores muestran el negro de un video un poco más oscuro que el mismo color en la página, y el
   borde del hero se notaría. El video se mezcla en modo "aclarar" sobre el color de fondo: lo oscuro queda
   igual a la página y los puntos de la malla no cambian. */
.elementor-background-video-container {
	background-color: var(--pm-fondo);
}

.elementor-background-video-hosted {
	mix-blend-mode: lighten;
}

/* ── Cinta de palabras bajo el hero: widget HTML con .pm-marquesina ── */
.pm-marquesina {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.pm-marquesina__pista {
	display: flex;
	width: max-content;
	animation: pm-desliza 70s linear infinite;
}

.pm-marquesina__pista span {
	flex: none;
	padding-right: 0.3em;
	color: #8d8d8d;
	font-family: var(--e-global-typography-accent-font-family, "Inter"), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.37;
	text-transform: uppercase;
	white-space: nowrap;
}

@keyframes pm-desliza {
	to {
		transform: translateX(-50%);
	}
}

/* ── Tarjetas ── */
.pm-tarjeta {
	box-shadow: 0 4px 2px rgb(0 0 0 / 0.25);
}

/* ── Carrusel: contenedor pm-carrusel con una fila pm-carrusel__pista y flechas .pm-anterior / .pm-siguiente ── */
.pm-carrusel {
	overflow-x: clip;
}

.pm-carrusel__pista {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.pm-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.pm-carrusel__pista > * {
	scroll-snap-align: start;
}

/* Las tarjetas de servicios llegan hasta el borde derecho de la pantalla, como en el diseño. */
.e-con.pm-servicios__pista {
	width: calc(50% + 50vw) !important;
	max-width: none !important;
	flex-wrap: nowrap;
}

.e-con.pm-servicios__pista > .e-con {
	flex: 0 0 490px !important;
	width: 490px !important;
	max-width: none !important;
}

.pm-flechas {
	display: flex;
	gap: 11px;
}

.pm-flechas .pm-flecha {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #292524;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.pm-flechas .pm-flecha:disabled {
	background: #1c1917;
	color: #57534e;
	cursor: default;
}

.pm-flechas .pm-flecha:not(:disabled):hover {
	background: #3a3532;
}

.pm-carrusel.pm-sin-desborde .pm-flechas,
.pm-carrusel.pm-sin-desborde .pm-circulo {
	display: none;
}

/* ── Proyectos: tarjetas con la proporción del diseño ── */
.e-con.pm-proyecto {
	aspect-ratio: 367 / 348;
	min-height: 0;
	--overflow: hidden;
	isolation: isolate;
}

/* Al pasar el mouse, la imagen se acerca como en las entradas del blog (3 %, 0,7 s) y la tarjeta recorta los
   bordes. La capa copia el fondo que se pone en Elementor: cambiar la imagen ahí cambia también esto. */
.e-con.pm-proyecto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: inherit;
	background-position: inherit;
	background-repeat: inherit;
	background-size: inherit;
	pointer-events: none;
	transition: transform 0.7s var(--pm-curva);
}

.e-con.pm-proyecto:hover::after,
.e-con.pm-proyecto:focus-within::after {
	transform: scale(1.03);
}

.e-con.pm-proyecto--grande {
	aspect-ratio: 445 / 423;
}

/* ── Quién está detrás: foto con la proporción del diseño ── */
.e-con.pm-retrato {
	aspect-ratio: 489 / 653;
	min-height: 0;
}

/* ── Preguntas: acordeón con clase pm-faq ── */
.elementor .pm-faq {
	--n-accordion-border-width: 0px;
	--n-accordion-title-font-size: 15px;
	--n-accordion-title-normal-color: var(--pm-texto);
	--n-accordion-title-hover-color: var(--pm-texto);
	--n-accordion-title-active-color: var(--pm-texto);
	--n-accordion-icon-size: 22px;
	--n-accordion-icon-gap: 30px;
	--n-accordion-icon-normal-color: var(--pm-acento);
	--n-accordion-icon-hover-color: var(--pm-acento);
	--n-accordion-icon-active-color: var(--pm-acento);
}

.elementor .pm-faq .e-n-accordion-item {
	border-radius: 20px;
	background: var(--pm-superficie);
	box-shadow: 0 4px 2px rgb(0 0 0 / 0.25);
}

.elementor .pm-faq .e-n-accordion-item-title {
	border: 0;
	background: transparent;
}

.elementor .pm-faq .e-n-accordion-item-title-text {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	line-height: 1.58;
}

.elementor .pm-faq .e-n-accordion-item-title-icon svg {
	width: 22px;
	height: 22px;
}

.elementor .pm-faq .e-n-accordion-item > .e-con {
	padding: 0 30px 26px;
	border: 0;
	background: transparent;
}

/* ── Recursos: el bloque [primordial_recursos] ── */
.pm-recursos {
	position: relative;
	container-type: inline-size;
}

.pm-recursos .pm-carrusel__pista {
	display: flex;
	gap: 11px;
}

.pm-recurso {
	display: flex;
	flex: 0 0 calc((100% - 22px) / 3);
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.pm-recurso__imagen {
	position: relative;
	display: block;
	aspect-ratio: 393 / 373;
	overflow: hidden;
	border: 1px solid rgb(104 104 104 / 0.6);
	border-radius: 10px;
	background: var(--pm-superficie);
}

.pm-recurso__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--pm-curva);
}

.pm-recurso:hover .pm-recurso__imagen img {
	transform: scale(1.03);
}

.pm-pastilla {
	position: absolute;
	right: 18px;
	bottom: 24px;
	left: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 47px;
	padding: 10px 20px;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 40px;
	background: rgb(255 255 255 / 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family, "Inter"), sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.17;
	text-transform: uppercase;
}

.pm-recurso__titulo {
	margin: 0;
	color: var(--pm-texto);
	font-family: "Satoshi", sans-serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
}

.pm-recurso__titulo a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.pm-recurso__titulo a:hover,
.pm-recurso__titulo a:focus-visible {
	color: var(--pm-acento);
}

.pm-recursos .pm-circulo {
	position: absolute;
	z-index: 2;
	top: calc((100cqw - 22px) / 3 * 0.4746 - 23.5px);
	display: grid;
	place-items: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(28 25 23 / 0.9);
	color: #fff;
	cursor: pointer;
}

.pm-recursos .pm-circulo:disabled {
	color: #57534e;
	cursor: default;
}

.pm-circulo.pm-anterior {
	left: 16px;
}

.pm-circulo.pm-siguiente {
	right: 16px;
}

.pm-circulo.pm-anterior svg {
	transform: rotate(90deg);
}

.pm-circulo.pm-siguiente svg {
	transform: rotate(-90deg);
}

.pm-recursos-vacio {
	margin: 0;
	text-align: center;
}

/* ── Foco visible con el color de acento ── */
.pm-flecha:focus-visible,
.pm-circulo:focus-visible,
.pm-recurso__titulo a:focus-visible {
	outline: 2px solid var(--pm-acento);
	outline-offset: 3px;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
	.pm-proyecto .elementor-button {
		padding: 8px 12px;
		font-size: 12px;
	}

	.pm-proyecto .elementor-button-icon svg {
		width: 18px;
		height: 18px;
	}

	.e-con.pm-servicios__pista > .e-con {
		flex-basis: 60% !important;
		width: 60% !important;
	}

	.pm-recurso {
		flex-basis: calc((100% - 11px) / 2);
	}

	.pm-recursos .pm-circulo {
		top: calc((100cqw - 11px) / 2 * 0.4746 - 23.5px);
	}
}

/* ── Celular ── */
@media (max-width: 767px) {
	.e-con.pm-servicios__pista > .e-con {
		flex-basis: 85% !important;
		width: 85% !important;
	}

	.pm-recurso {
		flex-basis: 85%;
	}

	.pm-recursos .pm-circulo {
		display: none;
	}

	.pm-recurso__titulo {
		font-size: 22px;
	}

	.pm-divisor--brillo::after {
		width: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.pm-marquesina__pista {
		animation: none;
	}

	.pm-recurso__imagen img,
	.e-con.pm-proyecto::after {
		transition: none;
	}

	.elementor-button-content-wrapper::before,
	.pm-pastilla::before {
		display: none;
	}
}