/* ==========================================================================
   Porairex · ajustes a Elementor
   Aqui se corrige lo que los widgets de Elementor traen de fabrica.
   Las variables --e-global-* se redefinen en el elemento que las usa,
   no en el body: asi el resultado es el mismo en el editor y en la web.
   ========================================================================== */

/* --- Botones -------------------------------------------------------------
   El editor nuevo (V4) marca sus botones con .e-button-base; los widgets
   antiguos siguen usando .elementor-button. Los dos tienen que verse igual.
   -------------------------------------------------------------------------- */

/* La clase va repetida a proposito: dentro del editor, Elementor inyecta
   sus estilos despues de los del tema y ganaria el azul de fabrica. Con
   .e-button-base.e-button-base pesa mas y se ve igual editando y
   publicado. */
.elementor .e-button-base.e-button-base,
.e-button-base.e-button-base,
.elementor-button,
.elementor-button-link {
	--e-global-color-accent: var(--prx-accion);
	--e-global-typography-accent-font-family: var(--prx-fuente-texto);
	--e-global-typography-accent-font-weight: 600;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--prx-e1);
	background-color: var(--prx-accion);
	color: var(--prx-accion-texto);
	font-family: var(--prx-fuente-texto);
	font-weight: 600;
	font-size: var(--prx-t-texto);
	line-height: 1.2;
	/* 48px de alto minimo: es el tamano por debajo del cual el dedo
	   empieza a fallar en el movil. */
	min-height: 48px;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--prx-radio);
	text-decoration: none;
	transition: background-color var(--prx-transicion),
		box-shadow var(--prx-transicion), color var(--prx-transicion);
}

.elementor .e-button-base.e-button-base:hover,
.elementor .e-button-base.e-button-base:focus-visible,
.e-button-base.e-button-base:hover,
.e-button-base.e-button-base:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-button-link:hover {
	background-color: var(--prx-accion-hover);
	color: var(--prx-accion-texto);
	box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.3);
}

.elementor-button .elementor-button-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Boton secundario: solo borde. Se pone en Avanzado > Clases CSS. */
.prx-btn-borde .elementor-button,
.elementor-button.prx-btn-borde {
	background-color: transparent;
	color: var(--prx-morado);
	border: 2px solid var(--prx-morado);
	padding: 12px 20px;
}

.prx-btn-borde .elementor-button:hover,
.elementor-button.prx-btn-borde:hover {
	background-color: var(--prx-morado);
	color: var(--prx-blanco);
	box-shadow: none;
}

/* El mismo boton secundario sobre fondo morado. */
.prx-btn-borde-claro .elementor-button,
.elementor-button.prx-btn-borde-claro {
	background-color: transparent;
	color: var(--prx-blanco);
	border: 2px solid var(--prx-blanco);
	padding: 12px 20px;
}

.prx-btn-borde-claro .elementor-button:hover,
.elementor-button.prx-btn-borde-claro:hover {
	background-color: var(--prx-blanco);
	color: var(--prx-morado);
	box-shadow: none;
}

/* --- Secciones ----------------------------------------------------------- */

.prx-seccion.e-con,
.prx-seccion > .e-con-inner {
	--padding-block-start: var(--prx-seccion);
	--padding-block-end: var(--prx-seccion);
}

.prx-seccion-suave {
	background-color: var(--prx-fondo-suave);
}

.prx-seccion-oscura {
	background-color: var(--prx-fondo-oscuro);
	color: var(--prx-texto-oscuro);
}

.prx-seccion-oscura h1,
.prx-seccion-oscura h2,
.prx-seccion-oscura h3,
.prx-seccion-oscura h4,
.prx-seccion-oscura .elementor-heading-title {
	color: var(--prx-blanco);
}

.prx-seccion-oscura p,
.prx-seccion-oscura li,
.prx-seccion-oscura .elementor-widget-text-editor {
	color: var(--prx-texto-oscuro);
}

/* Margen lateral en movil: sin esto el texto toca el borde del
   telefono y se lee peor. */
@media (max-width: 767px) {
	.elementor > .e-con,
	.elementor-element > .e-con {
		--padding-inline-start: var(--prx-margen-lateral);
		--padding-inline-end: var(--prx-margen-lateral);
	}
}

/* --- Widgets del editor nuevo (V4) --------------------------------------- */

.e-heading-base {
	font-family: var(--prx-fuente-titulo);
	color: var(--prx-titulo);
	line-height: var(--prx-interlineado-titulo);
}

.e-paragraph-base {
	font-family: var(--prx-fuente-texto);
	color: var(--prx-texto);
	line-height: var(--prx-interlineado-texto);
}

.e-image-base {
	max-width: 100%;
	height: auto;
}

.prx-seccion-oscura .e-heading-base {
	color: var(--prx-blanco);
}

.prx-seccion-oscura .e-paragraph-base {
	color: var(--prx-texto-oscuro);
}

/* --- Titulos y textos de widgets ----------------------------------------- */

.elementor-widget-heading .elementor-heading-title {
	--e-global-color-primary: var(--prx-titulo);
	--e-global-typography-primary-font-family: var(--prx-fuente-titulo);
	font-family: var(--prx-fuente-titulo);
	color: var(--prx-titulo);
}

.elementor-widget-text-editor,
.elementor-widget-icon-list .elementor-icon-list-text {
	--e-global-color-text: var(--prx-texto);
	--e-global-typography-text-font-family: var(--prx-fuente-texto);
	font-family: var(--prx-fuente-texto);
	color: var(--prx-texto);
}

.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon-box .elementor-icon svg {
	fill: var(--prx-acento);
}

/* --- Tarjetas ------------------------------------------------------------ */

.prx-tarjeta {
	background: var(--prx-fondo);
	border: 1px solid var(--prx-borde);
	border-radius: var(--prx-radio-grande);
	box-shadow: var(--prx-sombra);
	transition: box-shadow var(--prx-transicion), transform var(--prx-transicion);
}

.prx-tarjeta:hover {
	box-shadow: var(--prx-sombra-alta);
	transform: translateY(-2px);
}

.prx-seccion-oscura .prx-tarjeta {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--prx-morado-borde);
	box-shadow: none;
}

/* --- Cabecera ------------------------------------------------------------
   UAE envuelve la plantilla en <header id="masthead">. Dentro va el
   Flexbox con ID #cabecera, y dentro de el: logo, menu y boton.
   -------------------------------------------------------------------------- */

/* UAE escribe .ehf-header #masthead { position: relative } en su propia
   hoja. Un #id solo no le gana: hace falta repetir su selector, no basta
   con cargar despues. */
.ehf-header #masthead,
#masthead,
.prx-cabecera {
	position: sticky;
	top: 0;
	z-index: 999;
	/* Este relleno existe en los dos estados para que la cabecera no
	   cambie de alto al hacer scroll y el contenido no pegue un salto. */
	padding: 10px var(--prx-margen-lateral);
	background-color: var(--prx-fondo);
	transition: background-color var(--prx-transicion);
}

/* Al hacer scroll la barra se convierte en isla: el fondo blanco se
   retira y la pastilla queda flotando sobre el contenido, translucida.
   Asi se ve que la pagina se mueve por debajo. */
body.prx-scroll #masthead,
body.prx-scroll .prx-cabecera {
	background-color: transparent;
	box-shadow: none;
}

#cabecera {
	border: 1px solid transparent;
	border-radius: 0;
	transition:
		background-color var(--prx-transicion),
		border-radius var(--prx-transicion),
		border-color var(--prx-transicion),
		box-shadow var(--prx-transicion);
}

body.prx-scroll #cabecera {
	background-color: rgba(255, 255, 255, 0.88);
	/* Si el navegador no sabe desenfocar, el 88 % de blanco ya tapa. */
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 999px;
	border-color: var(--prx-borde);
	box-shadow: 0 10px 30px rgba(42, 10, 74, 0.16);
}

/* La barra de administracion de WordPress ya ocupa su sitio arriba. */
body.admin-bar #masthead,
body.admin-bar .prx-cabecera {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar #masthead,
	body.admin-bar .prx-cabecera {
		top: 46px;
	}
}

#cabecera {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--prx-e2);
	width: 100%;
	max-width: var(--prx-ancho-contenido);
	margin-inline: auto;
	padding: 12px var(--prx-margen-lateral);
}

/* El logo manda su tamano desde aqui, no desde el editor: asi es el
   mismo en todas las pantallas y no depende de la imagen subida. */
#logo-cabecera {
	display: block;
	width: 190px;
	height: auto;
}

/* El menu y el boton se van juntos a la derecha. */
#menu-cabecera {
	margin-left: auto;
}

#cabecera {
	flex-wrap: nowrap;
}

#cabecera .e-button-base {
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Cualquier boton que apunte a WhatsApp lleva su icono, sin tener que
   anadirlo a mano: la marca se reconoce antes de leer el texto. */
.e-button-base[href^="https://wa.me"],
.elementor-button[href^="https://wa.me"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.e-button-base[href^="https://wa.me"]::before,
.elementor-button[href^="https://wa.me"]::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--prx-icono-whatsapp) center / contain no-repeat;
	mask: var(--prx-icono-whatsapp) center / contain no-repeat;
}

/* El menu no se parte en dos filas. */
#menu-cabecera {
	flex: 0 1 auto;
}

/* Solo en escritorio: en el movil el menu es una lista vertical y este
   nowrap la ponia en fila, saliendose de la pantalla. */
@media (min-width: 1025px) {
	#menu-cabecera ul.hfe-nav-menu {
		flex-wrap: nowrap;
	}
}

/* Enlaces del menu: el ID gana a los estilos que UAE escribe en linea. */
#menu-cabecera .menu-item a.hfe-menu-item,
#menu-cabecera .menu-item a.hfe-sub-menu-item {
	font-family: var(--prx-fuente-texto);
	font-size: var(--prx-t-pequeno);
	font-weight: 500;
	color: var(--prx-morado);
	padding: 10px 14px;
	border-radius: var(--prx-radio);
}

#menu-cabecera .menu-item a.hfe-menu-item:hover,
#menu-cabecera .menu-item.current-menu-item a.hfe-menu-item {
	color: var(--prx-naranja);
	background-color: var(--prx-fondo-suave);
}

/* Boton de tres rayas y desplegable del movil. */
#menu-cabecera .hfe-nav-menu__toggle {
	color: var(--prx-morado);
	margin: 0;
}

#menu-cabecera nav.hfe-dropdown,
#menu-cabecera nav.hfe-dropdown-expandible {
	border-top: 1px solid var(--prx-borde);
	box-shadow: var(--prx-sombra);
}

#menu-cabecera nav.hfe-dropdown li.menu-item:not(:last-child),
#menu-cabecera nav.hfe-dropdown-expandible li.menu-item:not(:last-child) {
	border-bottom-color: var(--prx-borde);
}

#menu-cabecera nav.hfe-dropdown li a.hfe-menu-item {
	min-height: 48px;
	display: flex;
	align-items: center;
	font-size: var(--prx-t-texto);
}

@media (max-width: 1024px) {
	#logo-cabecera {
		width: 150px;
	}

	/* El desplegable cuelga del ancho completo de la cabecera, no del
	   hueco del widget, que solo mide 248 px. */
	#menu-cabecera {
		position: static;
	}

	#menu-cabecera nav.hfe-dropdown,
	#menu-cabecera nav.hfe-dropdown-expandible {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		background-color: var(--prx-fondo);
		padding: var(--prx-e1) var(--prx-margen-lateral) var(--prx-e2);
	}

	/* En columna y a todo el ancho: en fila los enlaces se salian de la
	   pantalla y el menu del movil no se podia usar. */
	#menu-cabecera nav.hfe-dropdown ul.hfe-nav-menu,
	#menu-cabecera nav.hfe-dropdown-expandible ul.hfe-nav-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	#menu-cabecera nav.hfe-dropdown li.menu-item,
	#menu-cabecera nav.hfe-dropdown-expandible li.menu-item {
		width: 100%;
	}
}

/* En el telefono el boton verde flotante ya esta siempre a la vista:
   repetirlo en la cabecera solo roba sitio al logo. */
@media (max-width: 767px) {
	#cabecera .e-button-base {
		display: none;
	}

	#logo-cabecera {
		width: 140px;
	}
}

/* Hello Elementor pinta el titulo de la pagina encima del contenido.
   En paginas construidas con Elementor sobra. */
body.page .page-header {
	display: none;
}

/* --- Menu de UAE --------------------------------------------------------- */

.hfe-nav-menu .menu-item a.hfe-menu-item,
.hfe-nav-menu .menu-item a.hfe-sub-menu-item {
	font-family: var(--prx-fuente-texto);
	font-size: var(--prx-t-pequeno);
	font-weight: 500;
	color: var(--prx-morado);
	padding: 10px 14px;
	border-radius: var(--prx-radio);
	transition: color var(--prx-transicion), background-color var(--prx-transicion);
}

.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item {
	color: var(--prx-naranja);
	background-color: var(--prx-fondo-suave);
}

/* El menu desplegable del movil, legible y con area de toque amplia. */
.hfe-nav-menu__layout-expandible .menu-item a.hfe-menu-item,
.hfe-nav-menu .sub-menu {
	font-size: var(--prx-t-texto);
}

.hfe-nav-menu__layout-expandible .menu-item a.hfe-menu-item {
	min-height: 48px;
	display: flex;
	align-items: center;
}

/* --- Preguntas frecuentes (acordeon) ------------------------------------- */

.elementor-accordion .elementor-tab-title,
.e-n-accordion-item-title {
	font-family: var(--prx-fuente-titulo);
	font-weight: 600;
	color: var(--prx-morado);
}

.elementor-accordion .elementor-tab-content {
	font-family: var(--prx-fuente-texto);
	color: var(--prx-texto);
}

/* --- Inicio · hero -------------------------------------------------------
   Primera pantalla: fondo morado de marca, la estela del avion, el
   titular, una linea de texto y dos botones. Sin foto por ahora; cuando
   haya fotos reales solo cambia el fondo de #hero.
   -------------------------------------------------------------------------- */

#hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-oscuro);
	color: var(--prx-texto-oscuro);
	padding-block: clamp(64px, 9vw, 120px);
	/* Centra el contenido en 1200 px sin necesitar otra caja dentro. */
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));

	/* La foto va debajo del velo, no al lado del texto: asi nunca le
	   quita sitio al titular ni a los botones. El degradado es mas
	   opaco a la izquierda, que es donde vive el texto. */
	background-image: var(--prx-velo-hero), var(--prx-img-hero);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

#hero-titulo.e-heading-base {
	color: var(--prx-blanco);
	font-size: var(--prx-t-hero);
	font-weight: 700;
	max-width: 20ch;
	margin: 0;
}

/* La estela del avion, encima del titular. */
#hero-titulo.e-heading-base::before {
	content: "";
	display: block;
	width: 120px;
	height: 3px;
	margin-bottom: var(--prx-e3);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#hero-texto.e-paragraph-base {
	color: var(--prx-tinta-clara);
	font-size: var(--prx-t-grande);
	max-width: 60ch;
	margin: 0;
}

#hero-botones {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--prx-e2);
	width: auto;
	max-width: 100%;
	padding: 0;
	margin-top: var(--prx-e1);
}

/* Boton secundario sobre fondo morado: solo borde. */
#hero-secundario.e-button-base.e-button-base {
	background-color: transparent;
	color: var(--prx-blanco);
	border: 2px solid rgba(255, 255, 255, 0.55);
	padding: 12px 20px;
}

#hero-secundario.e-button-base.e-button-base:hover,
#hero-secundario.e-button-base.e-button-base:focus-visible {
	background-color: var(--prx-blanco);
	color: var(--prx-morado);
	border-color: var(--prx-blanco);
	box-shadow: none;
}

/* En el telefono los botones ocupan todo el ancho: mas area para el
   pulgar y menos posibilidad de fallar el toque. */
@media (max-width: 600px) {
	#hero-botones {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	#hero-botones .e-button-base {
		width: 100%;
		justify-content: center;
	}

	#hero-titulo.e-heading-base {
		max-width: none;
	}
}

/* --- Inicio · barra de confianza ------------------------------------------
   Cuatro datos en pastillas, justo debajo del hero. Se leen de un vistazo
   y responden las dudas antes de que la persona tenga que preguntarlas.
   -------------------------------------------------------------------------- */

#confianza {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--prx-e2);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-suave);
	padding-block: var(--prx-e4);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#confianza > .e-paragraph-base {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Crecen para repartirse la fila, pero nunca bajan de 220 px: asi
	   pasan solas a dos columnas en tablet y a una en movil. */
	flex: 1 1 220px;
	margin: 0;
	color: var(--prx-morado);
	font-size: var(--prx-t-pequeno);
	font-weight: 500;
	line-height: 1.4;
	max-width: none;
}

#confianza > .e-paragraph-base::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--prx-accion);
	-webkit-mask: none;
	mask: none;
	background-image: var(--prx-icono-check);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

/* --- Secciones de texto sobre fondo claro ---------------------------------
   Patron que se repite en Inicio y en el resto de paginas: titulo con su
   estela, uno o dos parrafos y un boton secundario.
   -------------------------------------------------------------------------- */

#quienes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e2);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#quienes-titulo.e-heading-base {
	font-size: var(--prx-t-h2);
	margin: 0;
}

/* La estela debajo del titulo de seccion: el mismo motivo del hero, mas
   pequeno, para que se note que es la misma casa. */
#quienes-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#quienes-texto.e-paragraph-base,
#quienes-texto-2.e-paragraph-base {
	margin: 0;
	max-width: var(--prx-ancho-texto);
}

/* Boton secundario sobre fondo claro. */
#quienes-boton.e-button-base.e-button-base {
	background-color: transparent;
	color: var(--prx-morado);
	border: 2px solid var(--prx-morado);
	padding: 12px 20px;
	margin-top: var(--prx-e1);
}

#quienes-boton.e-button-base.e-button-base:hover,
#quienes-boton.e-button-base.e-button-base:focus-visible {
	background-color: var(--prx-morado);
	color: var(--prx-blanco);
	box-shadow: none;
}

@media (max-width: 600px) {
	#quienes-boton.e-button-base.e-button-base {
		width: 100%;
		justify-content: center;
	}
}

/* --- Inicio · servicios ---------------------------------------------------
   Rejilla de tarjetas. Se estilan por posicion dentro de #servicios, no
   por nombre: asi una tarjeta nueva sale igual sin tocar el tema.
   -------------------------------------------------------------------------- */

#servicios {
	display: grid;
	/* Las columnas las decide el ancho disponible: tres en escritorio,
	   dos en tablet y una en movil, sin ajustes por dispositivo. */
	grid-template-columns: 1fr; /* las columnas se fijan mas abajo, por ancho */
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-suave);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#servicios-titulo.e-heading-base {
	grid-column: 1 / -1;
	font-size: var(--prx-t-h2);
	margin: 0;
	max-width: 22ch;
}

#servicios-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#servicios > .e-flexbox-base {
	display: flex;
	flex-direction: column;
	gap: var(--prx-e1);
	background-color: var(--prx-fondo);
	border: 1px solid var(--prx-borde);
	border-radius: var(--prx-radio-grande);
	padding: var(--prx-e3);
	box-shadow: var(--prx-sombra);
	transition: box-shadow var(--prx-transicion), transform var(--prx-transicion);
}

#servicios > .e-flexbox-base:hover {
	box-shadow: var(--prx-sombra-alta);
	transform: translateY(-2px);
}

#servicios > .e-flexbox-base .e-heading-base {
	font-size: var(--prx-t-h3);
	margin: 0;
}

#servicios > .e-flexbox-base .e-paragraph-base {
	margin: 0;
	color: var(--prx-texto-suave);
	font-size: var(--prx-t-pequeno);
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	#servicios > .e-flexbox-base:hover {
		transform: none;
	}
}

/* --- Inicio · tipos de cliente --------------------------------------------
   Tres bloques sobre el morado de marca. Cada uno termina con una linea
   de ejemplos para que la persona se reconozca de un vistazo.
   -------------------------------------------------------------------------- */

#clientes {
	display: grid;
	grid-template-columns: 1fr; /* las columnas se fijan mas abajo, por ancho */
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-oscuro);
	color: var(--prx-texto-oscuro);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#clientes-titulo.e-heading-base {
	grid-column: 1 / -1;
	color: var(--prx-blanco);
	font-size: var(--prx-t-h2);
	margin: 0;
	max-width: 22ch;
}

#clientes-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#clientes > .e-flexbox-base {
	display: flex;
	flex-direction: column;
	gap: var(--prx-e2);
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--prx-morado-borde);
	border-radius: var(--prx-radio-grande);
	padding: var(--prx-e3);
	overflow: hidden;
}

/* La foto de cada bloque se pone desde aqui, no con un widget: asi los
   tres se mantienen identicos y no hay que tocar Elementor. Es una
   imagen decorativa, el titular de al lado ya dice de que va. */
#clientes > .e-flexbox-base::before {
	content: "";
	display: block;
	/* Elementor da a sus ::before un width: 100%, que aqui es el ancho
	   del contenido y deja la foto 48 px corta por la derecha. Se le suma
	   el relleno de los dos lados para que llegue a los dos bordes. */
	width: calc(100% + var(--prx-e3) * 2);
	/* Elementor deja sus ::before en position:absolute para pintar fondos
	   de contenedor. Si no se devuelve al flujo, la foto se monta encima
	   del titular y del texto. */
	position: relative;
	inset: auto;
	flex: 0 0 auto;
	height: 168px;
	margin: calc(var(--prx-e3) * -1) calc(var(--prx-e3) * -1) 0;
	background-image: var(--prx-velo-foto), var(--prx-img-personas);
	background-size: cover;
	background-position: center;
}

#clientes > .e-flexbox-base:nth-of-type(2)::before {
	background-image: var(--prx-velo-foto), var(--prx-img-empresas);
}

#clientes > .e-flexbox-base:nth-of-type(3)::before {
	background-image: var(--prx-velo-foto), var(--prx-img-ecommerce);
}

#clientes > .e-flexbox-base .e-heading-base {
	color: var(--prx-blanco);
	font-size: var(--prx-t-h3);
	margin: 0;
}

#clientes > .e-flexbox-base .e-paragraph-base {
	margin: 0;
	color: var(--prx-tinta-clara);
	font-size: var(--prx-t-pequeno);
	max-width: none;
}

/* La linea de ejemplos: mas pequena, en naranja, separada por una regla
   fina para que se lea como pie del bloque y no como mas texto. */
#clientes > .e-flexbox-base .e-paragraph-base:last-child {
	margin-top: auto;
	padding-top: var(--prx-e2);
	border-top: 1px solid var(--prx-morado-borde);
	color: var(--prx-naranja);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* --- Columnas de las rejillas de tarjetas ---------------------------------
   Numero de columnas fijo por tramo de ancho, no "las que quepan": con
   seis tarjetas y cuatro columnas quedaban dos sueltas abajo, y con tres
   tarjetas sobraba una columna vacia a la derecha.
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
	#servicios,
	#clientes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	#servicios,
	#clientes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Inicio · impuestos incluidos -----------------------------------------
   La seccion que mas vende: va sobre blanco, con el texto centrado en una
   columna estrecha para que se lea como una explicacion, no como relleno.
   -------------------------------------------------------------------------- */

#impuestos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e2);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#impuestos-titulo.e-heading-base {
	font-size: var(--prx-t-h2);
	margin: 0;
}

#impuestos-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#impuestos-texto.e-paragraph-base,
#impuestos-texto-2.e-paragraph-base {
	margin: 0;
	max-width: var(--prx-ancho-texto);
}

/* El segundo parrafo es la promesa de la marca: va destacado en una caja
   lila con la barra naranja, para que no se lea como un parrafo mas. */
#impuestos-texto-2.e-paragraph-base {
	background-color: var(--prx-fondo-suave);
	border-left: 4px solid var(--prx-naranja);
	border-radius: 0 var(--prx-radio) var(--prx-radio) 0;
	padding: var(--prx-e3);
	color: var(--prx-morado);
}

#impuestos-wa.e-button-base.e-button-base {
	margin-top: var(--prx-e1);
}

@media (max-width: 600px) {
	#impuestos-wa.e-button-base.e-button-base {
		width: 100%;
		justify-content: center;
	}
}

/* --- Inicio · como funciona -----------------------------------------------
   Cinco pasos numerados. El numero lo pone el CSS con un contador: si
   manana se anade o se quita un paso, se renumeran solos.
   -------------------------------------------------------------------------- */

#pasos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-suave);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
	counter-reset: paso;
}

#pasos-titulo.e-heading-base {
	font-size: var(--prx-t-h2);
	margin: 0;
}

#pasos-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#pasos > .e-flexbox-base {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	counter-increment: paso;
	padding-left: 60px;
}

#pasos > .e-flexbox-base::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--prx-morado);
	color: var(--prx-blanco);
	font-family: var(--prx-fuente-titulo);
	font-weight: 700;
	font-size: 1rem;
}

/* La linea que une un paso con el siguiente: se ve como un recorrido,
   no como cinco cosas sueltas. */
#pasos > .e-flexbox-base:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: calc(var(--prx-e3) * -1);
	width: 2px;
	background-color: var(--prx-borde);
}

#pasos > .e-flexbox-base .e-heading-base {
	font-size: var(--prx-t-h3);
	margin: 0;
}

#pasos > .e-flexbox-base .e-paragraph-base {
	margin: 0;
	color: var(--prx-texto-suave);
	max-width: var(--prx-ancho-texto);
}

/* --- Inicio · por que elegirnos -------------------------------------------
   Cuatro razones en dos filas de dos. Cada una con la palomita verde,
   el mismo signo que la barra de confianza del principio.
   -------------------------------------------------------------------------- */

#ventajas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#ventajas-titulo.e-heading-base {
	grid-column: 1 / -1;
	font-size: var(--prx-t-h2);
	margin: 0;
}

#ventajas-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#ventajas > .e-flexbox-base {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 44px;
}

#ventajas > .e-flexbox-base::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--prx-accion);
	background-image: var(--prx-icono-check);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

#ventajas > .e-flexbox-base .e-heading-base {
	font-size: var(--prx-t-h3);
	margin: 0;
}

#ventajas > .e-flexbox-base .e-paragraph-base {
	margin: 0;
	color: var(--prx-texto-suave);
	max-width: none;
}

@media (min-width: 800px) {
	#ventajas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--prx-e6);
	}
}

/* --- Inicio · aliados -----------------------------------------------------
   Los logos de FedEx y UPS viven en el tema (assets/img), no en la galeria
   de medios: asi el SVG de UPS se sirve sin tener que permitir subir SVG
   a WordPress, que es una puerta de entrada innecesaria.

   Cada logo es un parrafo cuyo texto se esconde a la vista pero sigue en
   el codigo, para que un lector de pantalla lo anuncie.
   -------------------------------------------------------------------------- */

#aliados {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e2);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

/* Ventajas y Aliados van seguidas y las dos son blancas: sin cambio de
   color, 170 px de aire entre ellas se leen como un hueco. Al juntarlas
   se entienden como lo que son, dos partes del mismo argumento. */
#ventajas {
	padding-bottom: var(--prx-e6);
}

#aliados {
	padding-top: var(--prx-e6);
}

#aliados-titulo.e-heading-base {
	font-size: var(--prx-t-h2);
	margin: 0;
}

#aliados-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#aliados-texto.e-paragraph-base {
	margin: 0;
	max-width: var(--prx-ancho-texto);
}

#aliado-fedex.e-paragraph-base,
#aliado-ups.e-paragraph-base {
	/* El texto sigue en el HTML; solo deja de verse. */
	font-size: 0;
	line-height: 0;
	color: transparent;
	margin: var(--prx-e2) 0 0;
	background-repeat: no-repeat;
	background-position: left center;
	max-width: none;
}

#aliado-fedex.e-paragraph-base {
	width: 150px;
	height: 46px;
	background-image: url("../img/fedex.png");
	background-size: contain;
}

#aliado-ups.e-paragraph-base {
	width: 46px;
	height: 55px;
	background-image: url("../img/ups.svg");
	background-size: contain;
}

/* Los dos logos, uno al lado del otro y separados del parrafo. */
@media (min-width: 480px) {
	#aliados {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: center;
		column-gap: var(--prx-e6);
		row-gap: var(--prx-e3);
	}

	#aliados-titulo.e-heading-base,
	#aliados-texto.e-paragraph-base {
		grid-column: 1 / -1;
	}
}

/* --- Inicio · preguntas frecuentes ----------------------------------------
   Acordeon del editor nuevo. Cada pregunta es una tarjeta blanca; la
   cabecera tiene 56 px de alto para que el dedo acierte sin apuntar.
   -------------------------------------------------------------------------- */

#faq {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e3);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-suave);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#faq-titulo.e-heading-base {
	font-size: var(--prx-t-h2);
	margin: 0;
}

#faq-titulo.e-heading-base::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

#faq-acordeon {
	width: 100%;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: var(--prx-e1);
}

#faq-acordeon .e-accordion-item-base {
	background-color: var(--prx-fondo);
	border: 1px solid var(--prx-borde);
	border-radius: var(--prx-radio);
	overflow: hidden;
	transition: box-shadow var(--prx-transicion);
}

#faq-acordeon .e-accordion-item-base[open] {
	box-shadow: var(--prx-sombra);
}

#faq-acordeon .e-accordion-item-header-base {
	display: flex;
	align-items: center;
	gap: var(--prx-e2);
	min-height: 56px;
	padding: 14px var(--prx-e3);
	cursor: pointer;
}

#faq-acordeon .e-accordion-item-title-base {
	font-family: var(--prx-fuente-titulo);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--prx-morado);
	margin: 0;
}

#faq-acordeon .e-accordion-item-icon-base svg {
	fill: var(--prx-naranja);
	color: var(--prx-naranja);
}

#faq-acordeon .e-accordion-item-content-base {
	padding: 0 var(--prx-e3) var(--prx-e3);
}

#faq-acordeon .e-accordion-item-content-base .e-paragraph-base {
	margin: 0;
	color: var(--prx-texto-suave);
	max-width: var(--prx-ancho-texto);
}

/* --- Pie de pagina --------------------------------------------------------
   Tres columnas sobre el morado de marca y una linea legal abajo.
   -------------------------------------------------------------------------- */

#pie {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--prx-e5);
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo-oscuro);
	color: var(--prx-texto-oscuro);
	padding-block: var(--prx-e8) var(--prx-e5);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

#pie-marca,
#pie-contacto {
	display: flex;
	flex-direction: column;
	gap: var(--prx-e2);
}

#pie-logo {
	display: block;
	width: 170px;
	height: auto;
}

#pie-frase.e-paragraph-base {
	margin: 0;
	color: var(--prx-tinta-clara);
	font-size: var(--prx-t-pequeno);
	max-width: 40ch;
}

#pie-contacto .e-paragraph-base {
	margin: 0;
	color: var(--prx-tinta-clara);
	font-size: var(--prx-t-pequeno);
	max-width: none;
}

/* Direccion y redes: van en un widget HTML dentro de la misma columna,
   asi los enlaces se pueden escribir a mano sin crear cuatro widgets. */
#pie-extra p {
	margin: 0 0 var(--prx-e2);
	color: var(--prx-tinta-clara);
	font-size: var(--prx-t-pequeno);
	line-height: 1.6;
}

#pie-extra p:last-child {
	margin-bottom: 0;
}

.prx-pie-redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prx-e3);
}

#pie-extra a {
	color: var(--prx-blanco);
	font-weight: 500;
	text-decoration: none;
}

#pie-extra a:hover {
	color: var(--prx-naranja);
}

/* Menu del pie: en columna, sin la pastilla de la cabecera. */
#pie-menu .menu-item a.hfe-menu-item {
	font-family: var(--prx-fuente-texto);
	font-size: var(--prx-t-pequeno);
	font-weight: 500;
	color: var(--prx-blanco);
	padding: 8px 0;
	background: none;
}

#pie-menu .menu-item a.hfe-menu-item:hover,
#pie-menu .menu-item.current-menu-item a.hfe-menu-item {
	color: var(--prx-naranja);
	background: none;
}

/* Linea legal: cruza todo el ancho, separada por una regla fina. Sirve
   tanto si es un parrafo como si es un widget HTML con los enlaces. */
#pie-legal {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: var(--prx-e3);
	border-top: 1px solid var(--prx-morado-borde);
	color: var(--prx-tinta-clara);
	font-size: 0.875rem;
	max-width: none;
}

#pie-legal p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	max-width: none;
}

.prx-pie-legales {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prx-e1) var(--prx-e3);
	margin-top: var(--prx-e1);
}

#pie-legal a {
	color: var(--prx-blanco);
	text-decoration: none;
}

#pie-legal a:hover {
	color: var(--prx-naranja);
	text-decoration: underline;
}

@media (min-width: 800px) {
	#pie {
		grid-template-columns: 2fr 1fr 1fr;
		column-gap: var(--prx-e8);
	}
}

/* En movil, UAE esconde tambien el menu del pie detras de un boton de tres
   rayas. En una cabecera tiene sentido; en el pie no: son cuatro enlaces
   que deben verse sin tocar nada. Aqui se deja siempre desplegado. */
@media (max-width: 1024px) {
	#pie-menu .hfe-nav-menu__toggle {
		display: none;
	}

	#pie-menu nav.hfe-dropdown,
	#pie-menu nav.hfe-dropdown-expandible {
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		position: static;
		background: none !important;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	#pie-menu ul.hfe-nav-menu {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		background: none;
	}

	#pie-menu li.menu-item {
		width: 100%;
		background: none;
		border: 0 !important;
	}

	#pie-menu li.menu-item a.hfe-menu-item {
		background: none;
	}
}

/* El boton flotante de WhatsApp tapa la ultima linea del pie si no se le
   deja sitio: 56 px de alto mas su separacion del borde. */
@media (max-width: 767px) {
	#pie {
		padding-bottom: calc(var(--prx-e5) + 80px);
	}
}

/* --- Paginas de contenido -------------------------------------------------
   Servicios, Como funciona, Quienes somos y legales se montan con un solo
   widget HTML dentro de un Flexbox con ID #pagina. El contenido vive en
   archivos aparte y el estilo, aqui.
   -------------------------------------------------------------------------- */

#pagina {
	display: block;
	width: 100%;
	max-width: 100%;
	background-color: var(--prx-fondo);
	padding-block: var(--prx-seccion);
	padding-inline: max(var(--prx-margen-lateral), calc((100% - var(--prx-ancho-contenido)) / 2));
}

.prx-pagina {
	display: flex;
	flex-direction: column;
	/* Menos que entre secciones de la portada: aqui todo lo que hay
	   debajo de la cabecera es el mismo tema, y separarlo tanto haria
	   que cada bloque pareciera una pagina distinta. */
	gap: var(--prx-e8);
}

.prx-pagina-cabecera h1 {
	font-size: var(--prx-t-h1);
	margin: 0;
}

.prx-pagina-cabecera h1::after {
	content: "";
	display: block;
	width: 88px;
	height: 3px;
	margin-top: var(--prx-e2);
	border-radius: 2px;
	background-image: var(--prx-estela);
}

.prx-entradilla {
	margin: var(--prx-e3) 0 0;
	font-size: var(--prx-t-grande);
	color: var(--prx-texto-suave);
	max-width: var(--prx-ancho-texto);
}

/* --- Cabecera con foto de las paginas interiores --------------------------
   La foto no va encima del titulo como una franja aparte, sino detras de
   el: el titular y la entradilla se leen sobre la imagen, con el velo
   morado garantizando el contraste. Asi la foto forma parte de la pagina
   en vez de parecer pegada.

   Todo cuelga de :has(): las paginas legales usan la misma cabecera sin
   foto y deben seguir viendose como texto sobre blanco. Si un navegador
   viejo no entiende :has(), el bloque entero se ignora y la imagen queda
   como una banda normal encima del titulo, que tambien se sostiene.
   -------------------------------------------------------------------------- */

.prx-pagina-cabecera:has(.prx-cabecera-foto) {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 340px;
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--prx-radio-grande);
	overflow: hidden;
	background-color: var(--prx-fondo-oscuro);
	color: var(--prx-texto-oscuro);
}

.prx-pagina-cabecera:has(.prx-cabecera-foto) .prx-cabecera-foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo se oscurece hacia abajo, que es donde cae el texto. */
.prx-pagina-cabecera:has(.prx-cabecera-foto)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		180deg,
		rgba(42, 10, 74, 0.55) 0%,
		rgba(42, 10, 74, 0.80) 55%,
		rgba(42, 10, 74, 0.92) 100%
	);
}

.prx-pagina-cabecera:has(.prx-cabecera-foto) h1 {
	color: var(--prx-blanco);
}

.prx-pagina-cabecera:has(.prx-cabecera-foto) .prx-entradilla {
	color: var(--prx-tinta-clara);
	max-width: 58ch;
}

@media (max-width: 767px) {
	.prx-pagina-cabecera:has(.prx-cabecera-foto) {
		min-height: 300px;
	}
}

.prx-rejilla-servicios {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--prx-e3);
}

.prx-servicio {
	display: flex;
	flex-direction: column;
	gap: var(--prx-e1);
	background-color: var(--prx-fondo);
	border: 1px solid var(--prx-borde);
	border-radius: var(--prx-radio-grande);
	padding: var(--prx-e3);
	box-shadow: var(--prx-sombra);
	overflow: hidden;
}

/* La foto sangra hasta el borde de la tarjeta: por eso los margenes
   negativos, que anulan el padding de .prx-servicio. */
.prx-servicio-foto {
	position: relative;
	margin: calc(var(--prx-e3) * -1) calc(var(--prx-e3) * -1) var(--prx-e2);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--prx-fondo-suave);
}

.prx-servicio-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--prx-transicion);
}

.prx-servicio-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--prx-velo-foto);
}

.prx-servicio:hover .prx-servicio-foto img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.prx-servicio-foto img,
	.prx-servicio:hover .prx-servicio-foto img {
		transition: none;
		transform: none;
	}
}

.prx-servicio h2 {
	font-size: var(--prx-t-h3);
	margin: 0;
}

.prx-servicio p {
	margin: 0;
	color: var(--prx-texto-suave);
	font-size: var(--prx-t-pequeno);
	max-width: none;
}

/* El enlace de WhatsApp se pega abajo, asi las tarjetas terminan parejas
   aunque los textos midan distinto. */
.prx-servicio .prx-wa {
	margin-top: auto;
	padding-top: var(--prx-e2);
}

/* Enlaces a WhatsApp dentro del contenido. */
/* El selector lleva la etiqueta "a" delante para pesar mas que la regla
   .page-content a de Hello Elementor, que subraya todo enlace. */
a.prx-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--prx-morado);
	font-weight: 600;
	font-size: var(--prx-t-pequeno);
	text-decoration: none;
}

a.prx-wa::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-color: var(--prx-accion);
	-webkit-mask: var(--prx-icono-whatsapp) center / contain no-repeat;
	mask: var(--prx-icono-whatsapp) center / contain no-repeat;
}

a.prx-wa:hover {
	color: var(--prx-naranja);
}

/* La version grande es un boton de verdad, para el cierre de pagina. */
a.prx-wa-grande {
	background-color: var(--prx-accion);
	color: var(--prx-accion-texto);
	min-height: 48px;
	padding: 14px 22px;
	border-radius: var(--prx-radio);
	transition: background-color var(--prx-transicion), box-shadow var(--prx-transicion);
}

a.prx-wa-grande::before {
	background-color: currentColor;
}

a.prx-wa-grande:hover {
	background-color: var(--prx-accion-hover);
	color: var(--prx-accion-texto);
	box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.3);
}

/* Cierre de pagina: la ultima llamada a escribir. */
.prx-cierre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--prx-e2);
	background-color: var(--prx-fondo-suave);
	border-radius: var(--prx-radio-grande);
	padding: var(--prx-e5);
}

.prx-cierre h2 {
	font-size: var(--prx-t-h2);
	margin: 0;
}

.prx-cierre p {
	margin: 0;
	max-width: var(--prx-ancho-texto);
}

/* El horario va debajo del boton y en letra menor: informa, no compite
   con la llamada a escribir. */
.prx-horario {
	font-size: var(--prx-t-pequeno);
	color: var(--prx-texto-suave);
}

/* Enlace de texto dentro de las paginas de contenido. */
a.prx-enlace {
	color: var(--prx-morado);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a.prx-enlace:hover {
	color: var(--prx-naranja);
}

/* Datos de contacto: etiqueta arriba en gris, dato abajo. Se leen de un
   vistazo y en movil caen en una sola columna. */
.prx-datos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--prx-e3);
	margin: var(--prx-e3) 0 0;
}

.prx-datos dt {
	font-size: var(--prx-t-pequeno);
	font-weight: 600;
	color: var(--prx-texto-suave);
	margin-bottom: 4px;
}

.prx-datos dd {
	margin: 0;
	font-size: var(--prx-t-grande);
	line-height: 1.5;
}

@media (min-width: 640px) {
	.prx-datos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Paginas legales ------------------------------------------------------
   Son documentos largos de dieciseis apartados: con el aire de una pagina
   normal habria que hacer scroll eterno. Se aprietan los bloques, se baja
   el tamano de los titulares y el texto se limita a una medida comoda.
   -------------------------------------------------------------------------- */

.prx-legal {
	gap: var(--prx-e6);
}

.prx-legal .prx-bloque h2 {
	font-size: var(--prx-t-h3);
}

.prx-legal p,
.prx-legal .prx-vinetas {
	max-width: var(--prx-ancho-texto);
}

.prx-actualizado {
	margin: var(--prx-e2) 0 0;
	font-size: var(--prx-t-pequeno);
	color: var(--prx-texto-suave);
}

/* Lista con punto normal: el icono de visto bueno de .prx-lista daria a
   entender que cada linea es una ventaja, y aqui son obligaciones. */
.prx-vinetas {
	margin: var(--prx-e2) 0 0;
	padding-left: 1.25em;
	list-style: disc;
}

.prx-vinetas > li {
	margin-bottom: var(--prx-e1);
	padding-left: 0.25em;
}

.prx-vinetas > li::marker {
	color: var(--prx-naranja);
}

@media (min-width: 640px) {
	.prx-rejilla-servicios {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.prx-rejilla-servicios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.prx-wa-grande {
		width: 100%;
		justify-content: center;
	}
}

/* --- Paginas de contenido · pasos, bloques y listas ------------------------ */

.prx-pasos {
	list-style: none;
	counter-reset: prxpaso;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--prx-e5);
}

.prx-pasos > li {
	position: relative;
	counter-increment: prxpaso;
	padding-left: 60px;
}

.prx-pasos > li::before {
	content: counter(prxpaso);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--prx-morado);
	color: var(--prx-blanco);
	font-family: var(--prx-fuente-titulo);
	font-weight: 700;
}

.prx-pasos > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 48px;
	bottom: calc(var(--prx-e5) * -1);
	width: 2px;
	background-color: var(--prx-borde);
}

.prx-pasos h2 {
	font-size: var(--prx-t-h3);
	margin: 0 0 var(--prx-e1);
}

.prx-pasos p {
	margin: 0 0 var(--prx-e1);
	color: var(--prx-texto-suave);
	max-width: var(--prx-ancho-texto);
}

/* Nota al pie de un paso: lo que hay que tener a mano. */
.prx-nota {
	font-size: var(--prx-t-pequeno);
	color: var(--prx-morado);
	background-color: var(--prx-fondo-suave);
	border-left: 3px solid var(--prx-naranja);
	border-radius: 0 var(--prx-radio) var(--prx-radio) 0;
	padding: var(--prx-e2);
}

.prx-bloque h2 {
	font-size: var(--prx-t-h2);
	margin: 0 0 var(--prx-e2);
}

.prx-bloque p {
	margin: 0 0 var(--prx-e2);
	max-width: var(--prx-ancho-texto);
}

.prx-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--prx-e2);
	max-width: var(--prx-ancho-texto);
}

.prx-lista > li {
	position: relative;
	padding-left: 38px;
}

.prx-lista > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--prx-accion);
	background-image: var(--prx-icono-check);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.prx-lista strong {
	color: var(--prx-morado);
}

/* --- Formulario de cotizacion (Fluent Forms) ------------------------------
   Fluent Forms trae su propia hoja con un aspecto generico. Aqui se viste
   con la tipografia, los colores y los radios de la marca, y se le dan
   alturas de toque comodas: 48 px minimo en cada control.

   Todo cuelga de #formulario para no pisar ningun otro formulario que se
   monte en el futuro.
   -------------------------------------------------------------------------- */

#formulario .fluentform {
	margin-top: var(--prx-e4);
}

#formulario .ff-el-group {
	margin-bottom: var(--prx-e3);
}

#formulario .ff-el-input--label label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--prx-fuente-titulo);
	font-size: var(--prx-t-pequeno);
	font-weight: 600;
	color: var(--prx-tinta);
}

/* El asterisco de obligatorio, en naranja y separado de la palabra. */
#formulario .ff-el-is-required.asterisk-right label:after,
#formulario .ff-el-input--label label span.ff-el-is-required {
	color: var(--prx-naranja);
	margin-left: 4px;
}

#formulario .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--prx-fuente-texto);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--prx-tinta);
	background-color: var(--prx-fondo);
	border: 1px solid var(--prx-borde);
	border-radius: var(--prx-radio);
	box-shadow: none;
	transition: border-color var(--prx-transicion);
}

#formulario textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}

#formulario .ff-el-form-control::placeholder {
	color: var(--prx-texto-suave);
	opacity: 1;
}

#formulario .ff-el-form-control:hover {
	border-color: var(--prx-morado);
}

/* El foco se ve siempre, tambien para quien navega con el tabulador. */
#formulario .ff-el-form-control:focus {
	border-color: var(--prx-morado);
	outline: 2px solid var(--prx-naranja);
	outline-offset: 1px;
	box-shadow: none;
}

#formulario .ff-el-help-message {
	margin-top: 6px;
	font-size: var(--prx-t-pequeno);
	color: var(--prx-texto-suave);
}

/* Titulos de seccion dentro del formulario. */
#formulario .ff-el-section-break,
#formulario .ff_section_break {
	margin-bottom: var(--prx-e2);
	padding-top: var(--prx-e3);
	border-top: 1px solid var(--prx-borde);
}

#formulario .ff-el-section-break h3,
#formulario .ff-el-section-title,
#formulario .ff_section_break h3 {
	margin: 0;
	font-size: var(--prx-t-h3);
	color: var(--prx-morado);
}

#formulario .ff-el-section-break:first-child,
#formulario .ff_section_break:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Casilla de autorizacion: area de toque grande y texto legible. */
#formulario .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

#formulario .ff-el-form-check-label,
#formulario .ff-el-form-check label {
	font-size: var(--prx-t-pequeno);
	line-height: 1.5;
	color: var(--prx-texto-suave);
	cursor: pointer;
}

#formulario input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--prx-morado);
	cursor: pointer;
}

#formulario .ff-el-form-check a {
	color: var(--prx-morado);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#formulario .ff-el-form-check a:hover {
	color: var(--prx-naranja);
}

/* Boton de envio: morado, no verde. El verde esta reservado para
   WhatsApp en toda la web y no conviene que dos acciones distintas se
   vistan igual. */
#formulario .ff-btn-submit,
#formulario button.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	min-height: 52px;
	padding: 14px 28px;
	font-family: var(--prx-fuente-texto);
	font-size: 1rem;
	font-weight: 600;
	color: var(--prx-blanco);
	background-color: var(--prx-morado);
	border: 0;
	border-radius: var(--prx-radio);
	cursor: pointer;
	transition:
		background-color var(--prx-transicion),
		box-shadow var(--prx-transicion);
}

#formulario .ff-btn-submit:hover,
#formulario button.ff-btn-submit:hover {
	background-color: var(--prx-naranja);
	box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.25);
}

#formulario .ff-btn-submit:focus-visible {
	outline: 2px solid var(--prx-naranja);
	outline-offset: 3px;
}

/* Errores y confirmacion. */
#formulario .ff-el-is-error .ff-el-form-control {
	border-color: #c0392b;
}

#formulario .error,
#formulario .text-danger {
	margin-top: 6px;
	font-size: var(--prx-t-pequeno);
	color: #c0392b;
}

#formulario .ff-message-success,
#formulario .ff_submit_success {
	padding: var(--prx-e3);
	background-color: var(--prx-fondo-suave);
	border-left: 3px solid var(--prx-accion);
	border-radius: var(--prx-radio);
	color: var(--prx-tinta);
}

@media (max-width: 600px) {
	#formulario .ff-btn-submit,
	#formulario button.ff-btn-submit {
		width: 100%;
	}
}

/* Ayuda de cada campo, ya convertida en texto por el JS. */
#formulario .prx-ayuda {
	margin: 2px 0 6px;
	font-size: var(--prx-t-pequeno);
	font-weight: 400;
	line-height: 1.5;
	color: var(--prx-texto-suave);
}

/* Por si el JS no llega a ejecutarse: al menos que no quede un icono
   suelto sin explicacion al lado de la etiqueta. */
#formulario .ff-el-tooltip {
	display: none;
}

/* --- Iconos de las tarjetas de servicio de la portada ---------------------
   Van dibujados como mascara: el archivo SVG recorta la silueta y lo que
   se ve es el color de fondo que se le ponga. Por eso un solo archivo
   sirve en morado aqui y en blanco en el pie.

   Como en el bloque de clientes, hay que devolver el ::before al flujo:
   Elementor los deja absolutos para pintar fondos de contenedor.
   -------------------------------------------------------------------------- */

#servicios > .e-flexbox-base::before {
	content: "";
	position: relative;
	inset: auto;
	flex: 0 0 auto;
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: var(--prx-e1);
	background-color: var(--prx-morado);
	-webkit-mask: var(--prx-icono-envios-eeuu) center / contain no-repeat;
	mask: var(--prx-icono-envios-eeuu) center / contain no-repeat;
}

#servicios > .e-flexbox-base:nth-of-type(2)::before {
	-webkit-mask-image: var(--prx-icono-carga-pesada);
	mask-image: var(--prx-icono-carga-pesada);
}

#servicios > .e-flexbox-base:nth-of-type(3)::before {
	-webkit-mask-image: var(--prx-icono-courier);
	mask-image: var(--prx-icono-courier);
}

#servicios > .e-flexbox-base:nth-of-type(4)::before {
	-webkit-mask-image: var(--prx-icono-equipaje);
	mask-image: var(--prx-icono-equipaje);
}

#servicios > .e-flexbox-base:nth-of-type(5)::before {
	-webkit-mask-image: var(--prx-icono-ecommerce);
	mask-image: var(--prx-icono-ecommerce);
}

#servicios > .e-flexbox-base:nth-of-type(6)::before {
	-webkit-mask-image: var(--prx-icono-asesoria);
	mask-image: var(--prx-icono-asesoria);
}

/* Al pasar el cursor, el icono acompana a la tarjeta. */
#servicios > .e-flexbox-base:hover::before {
	background-color: var(--prx-naranja);
}

/* --- Iconos de la ficha de datos ------------------------------------------
   La clase la lleva cada dato en el HTML, no la posicion: en las paginas
   legales la lista tiene otro orden y con :nth-child saldrian cambiados.
   -------------------------------------------------------------------------- */

.prx-datos dt {
	display: flex;
	align-items: center;
	gap: 6px;
}

.prx-datos dt::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.prx-dato-whatsapp dt::before {
	-webkit-mask-image: var(--prx-icono-whatsapp);
	mask-image: var(--prx-icono-whatsapp);
}

.prx-dato-correo dt::before {
	-webkit-mask-image: var(--prx-icono-correo);
	mask-image: var(--prx-icono-correo);
}

.prx-dato-direccion dt::before {
	-webkit-mask-image: var(--prx-icono-direccion);
	mask-image: var(--prx-icono-direccion);
}

.prx-dato-horario dt::before {
	-webkit-mask-image: var(--prx-icono-horario);
	mask-image: var(--prx-icono-horario);
}

.prx-dato-instagram dt::before {
	-webkit-mask-image: var(--prx-icono-instagram);
	mask-image: var(--prx-icono-instagram);
}

.prx-dato-facebook dt::before {
	-webkit-mask-image: var(--prx-icono-facebook);
	mask-image: var(--prx-icono-facebook);
}

/* Los datos sin icono propio (razon social, NIT) no dejan hueco. */
.prx-datos > div:not([class]) dt::before {
	display: none;
}

/* --- Redes del pie --------------------------------------------------------
   Se enganchan por la direccion del enlace, sin tocar el HTML.
   -------------------------------------------------------------------------- */

#pie-extra .prx-pie-redes a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#pie-extra .prx-pie-redes a::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

#pie-extra .prx-pie-redes a[href*="instagram"]::before {
	-webkit-mask-image: var(--prx-icono-instagram);
	mask-image: var(--prx-icono-instagram);
}

#pie-extra .prx-pie-redes a[href*="facebook"]::before {
	-webkit-mask-image: var(--prx-icono-facebook);
	mask-image: var(--prx-icono-facebook);
}

/* --- Preguntas frecuentes: reparto del ancho ------------------------------
   Elementor da a la cabecera del acordeon dos cajas: la de la pregunta y
   la de la flecha. Por defecto la flecha se queda con 200 px fijos y la
   pregunta se encoge con lo que sobre: en un telefono le quedaban 69 px,
   que es la mitad de una palabra por linea.

   Se invierte el reparto: la pregunta se queda con todo el ancho libre y
   la flecha solo con lo suyo.
   -------------------------------------------------------------------------- */

/* Base por posicion, que funciona en cualquier navegador. */
#faq .e-accordion-item-header-base > :first-child {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

#faq .e-accordion-item-header-base > :last-child {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
}

/* Y por contenido, que no depende del orden. */
#faq .e-accordion-item-header-base > *:has(.e-paragraph-base) {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

#faq .e-accordion-item-header-base > *:has(.e-svg-base) {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
}

/* En el telefono, 24 px de margen a cada lado dentro de una caja que ya
   tiene 20 px de margen de pagina son 88 px perdidos de 375. */
@media (max-width: 600px) {
	#faq .e-accordion-item-header-base {
		padding-inline: 16px;
	}

	#faq .e-accordion-item-body-base {
		padding-inline: 16px;
	}
}