/* ==========================================================================
   GrupoDW · custom.css (tema hijo astra-child)
   Clases propias con prefijo gdw-. Los textos, colores y tipografías se
   editan en Elementor; aquí solo va lo que Elementor gratis no permite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía global
   Plus Jakarta Sans con letter-spacing negativo deja el espacio entre
   palabras en ~4 px y parecen pegadas («Encifras»).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	word-spacing: 0.08em;
}

/* Texto en el color de marca dentro de un título:
   <span class="gdw-text-accent">crecer online</span> */
.gdw-text-accent {
	color: var(--e-global-color-primary, #0A5CFF);
}

/* --------------------------------------------------------------------------
   2. Home · hero
   Segunda línea grande del H1: Diseño que <span class="gdw-hero__big">conecta</span>
   -------------------------------------------------------------------------- */
.gdw-hero__title .gdw-hero__big {
	display: block;
	font-size: 2.05em;
	line-height: 0.88;
	letter-spacing: normal;
	margin-top: 0.04em;
}

/* --------------------------------------------------------------------------
   3. Marquee (.gdw-marquee)
   Estructura en Elementor:
     contenedor .gdw-marquee
       contenedor .gdw-marquee__track   (añadir --reverse para ir al revés)
         títulos .gdw-marquee__item     (una palabra cada uno)
   custom.js duplica las palabras y añade .is-animated. En el editor no se
   anima, para que se pueda editar.
   -------------------------------------------------------------------------- */
.gdw-marquee {
	overflow: hidden;
}

.gdw-marquee .gdw-marquee__track {
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	align-self: flex-start;
}

.gdw-marquee .gdw-marquee__item {
	flex: none !important;
	width: auto !important;
}

.gdw-marquee .gdw-marquee__item .elementor-heading-title {
	white-space: nowrap;
}

.gdw-marquee .gdw-marquee__item .elementor-heading-title::after {
	content: "\2192"; /* → */
	color: var(--e-global-color-primary, #0A5CFF);
	margin: 0 0.6em;
}

.gdw-marquee .gdw-marquee__track--reverse .gdw-marquee__item .elementor-heading-title::after {
	content: "\2190"; /* ← */
}

/* Variante de una sola frase: sin flechas, solo un hueco entre repeticiones */
.gdw-marquee .gdw-marquee__track--plain .gdw-marquee__item .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 6vw;
	margin: 0;
}

/* Variante con estrella que gira entre palabras */
.gdw-marquee .gdw-marquee__track--star .gdw-marquee__item .elementor-heading-title::after {
	content: "\2733"; /* ✳ */
	display: inline-block;
	margin: 0 0.35em;
	font-size: 0.6em;
	vertical-align: middle;
	color: var(--e-global-color-primary, #0A5CFF);
	animation: gdw-spin 8s linear infinite;
}

@keyframes gdw-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gdw-marquee .gdw-marquee__track--star .gdw-marquee__item .elementor-heading-title::after {
		animation: none;
	}
}

/* Texto en gris dentro de un título: <span class="gdw-text-muted">…</span> */
.gdw-text-muted {
	color: #8A8A86;
}

.gdw-marquee.is-animated .gdw-marquee__track {
	animation: gdw-marquee var(--gdw-marquee-duration, 45s) linear infinite;
}

.gdw-marquee.is-animated .gdw-marquee__track--reverse {
	animation-direction: reverse;
}

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

@media (prefers-reduced-motion: reduce) {
	.gdw-marquee.is-animated .gdw-marquee__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   3b. Título relleno con imagen (.gdw-text-fill en un widget Título)
   La imagen se pone en Elementor: widget → Avanzado → Fondo (clásico).
   Sin imagen de fondo el texto no se vería: poner siempre la imagen.
   -------------------------------------------------------------------------- */
.gdw-text-fill,
.gdw-text-fill > .elementor-widget-container {
	-webkit-background-clip: text;
	background-clip: text;
}

.gdw-text-fill .elementor-heading-title {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	/* Con interlineado < 1 las colas (g, p, y) salen de la caja y no se pintan */
	padding-bottom: 0.18em;
}

/* --------------------------------------------------------------------------
   4. FAQ (.gdw-faq sobre el widget Acordeón anidado de Elementor)
   Numeración 01, 02… automática e icono dentro de un círculo.
   -------------------------------------------------------------------------- */
.gdw-faq .e-n-accordion {
	counter-reset: gdw-faq;
	border-top: 1px solid var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item {
	counter-increment: gdw-faq;
}

.gdw-faq .e-n-accordion-item-title-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gdw-faq .e-n-accordion-item-title-header::before {
	content: counter(gdw-faq, decimal-leading-zero);
	flex: 0 0 clamp(44px, 9vw, 140px);
	font-family: "Inter", sans-serif;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 300;
	color: #8A8A86;
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-header::before {
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item-title-icon > span {
	width: 32px;
	height: 32px;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background-color 0.2s, color 0.2s;
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon > span {
	background: var(--e-global-color-secondary, #1D1D1B);
	border-color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon i {
	fill: #FFFFFF;
	color: #FFFFFF;
}

/* Respuesta alineada con la pregunta, no con el número */
.gdw-faq .e-n-accordion-item > .e-con {
	padding-left: calc(clamp(44px, 9vw, 140px) + 16px);
}

@media (max-width: 767px) {
	.gdw-faq .e-n-accordion-item > .e-con {
		padding-left: 0;
	}
}

/* --------------------------------------------------------------------------
   4b. Acordeón en tarjetas (.gdw-accordion--cards en el Acordeón anidado)
   Al abrirse, título y contenido forman una sola tarjeta: el título solo
   queda redondeado arriba y el contenido abajo (su borde y su radio se
   ponen en Elementor: Estilo → Contenido).
   -------------------------------------------------------------------------- */
.gdw-accordion--cards .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4c. Carrusel (.gdw-carousel > .gdw-carousel__track > .gdw-carousel__slide)
   Lo mueve custom.js. En el editor las diapositivas se apilan para editarlas.
   -------------------------------------------------------------------------- */
.gdw-carousel {
	overflow: hidden;
}

.gdw-carousel .gdw-carousel__track {
	flex-wrap: nowrap !important;
}

.gdw-carousel.is-ready .gdw-carousel__track {
	transition: transform 0.6s ease;
	touch-action: pan-y;
}

.gdw-carousel .gdw-carousel__slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.elementor-editor-active .gdw-carousel .gdw-carousel__track {
	flex-wrap: wrap !important;
	row-gap: 30px;
}

.gdw-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.gdw-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #E2E1DC;
	cursor: pointer;
	transition: width 0.3s, background-color 0.3s;
}

.gdw-carousel__dot.is-active {
	width: 28px;
	background: var(--e-global-color-primary, #0A5CFF);
}

@media (prefers-reduced-motion: reduce) {
	.gdw-carousel.is-ready .gdw-carousel__track {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   5. Cabecera fija (Ultimate Addons: #masthead)
   Astra pone overflow-x:hidden en body, y eso impide position:sticky;
   overflow-x:clip también evita el scroll lateral, pero deja fija la cabecera.
   -------------------------------------------------------------------------- */
html body {
	overflow-x: clip;
}

#masthead {
	position: sticky !important; /* Ultimate Addons pone position:relative */
	top: 0;
	z-index: 999;
	transition: box-shadow 0.2s;
}

.admin-bar #masthead {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar #masthead {
		top: 0;
	}
}

body.gdw-is-scrolled #masthead {
	box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
}

/* Los enlaces a secciones (#servicios) no quedan tapados por la cabecera */
.elementor-element[id] {
	scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   6. Formularios de Contact Form 7 (.gdw-form en el widget que lo contiene)
   Plantilla del formulario: filas .gdw-form__row (2 columnas), campos
   .gdw-form__field, casilla .gdw-form__privacy y botón .gdw-form__submit.
   -------------------------------------------------------------------------- */
.gdw-form .gdw-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

@media (max-width: 767px) {
	.gdw-form .gdw-form__row {
		grid-template-columns: 1fr;
	}
}

.gdw-form .wpcf7-form p {
	margin: 0 0 18px;
}

.gdw-form .gdw-form__field label {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-form input[type="text"],
.gdw-form input[type="email"],
.gdw-form input[type="tel"],
.gdw-form textarea {
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid #E2E1DC;
	border-radius: 12px;
	background: #FFFFFF;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	color: var(--e-global-color-secondary, #1D1D1B);
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.gdw-form textarea {
	min-height: 150px;
	resize: vertical;
}

.gdw-form input:focus,
.gdw-form textarea:focus {
	border-color: var(--e-global-color-secondary, #1D1D1B);
	box-shadow: 0 0 0 3px rgba(10, 92, 255, 0.18);
	outline: none;
}

.gdw-form .gdw-form__privacy {
	font-size: 14px;
	color: var(--e-global-color-text, #494945);
}

.gdw-form .gdw-form__privacy .wpcf7-list-item {
	margin: 0;
}

.gdw-form .gdw-form__privacy a {
	color: #0848CC;
}

.gdw-form .gdw-form__submit {
	background: #0848CC;
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	padding: 16px 34px;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.gdw-form .gdw-form__submit:hover,
.gdw-form .gdw-form__submit:focus {
	background: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #0848CC;
}

.gdw-form .wpcf7 form .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
}

/* Sello de reCAPTCHA oculto (chocaba con el botón de WhatsApp). Google lo
   permite si junto al formulario está su aviso: widget .gdw-form__recaptcha */
.grecaptcha-badge {
	visibility: hidden !important;
}

.gdw-form__recaptcha,
.gdw-form__recaptcha p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #8A8A86;
}

.gdw-form__recaptcha a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Enlaces sin subrayado (Astra los subraya dentro del contenido)
   -------------------------------------------------------------------------- */
.gdw-blog__grid a,
.gdw-contacto__datos a {
	text-decoration: none !important; /* Astra: .entry-content a { underline } */
}

.gdw-blog__grid .eael-entry-title a:hover,
.gdw-contacto__datos a:hover {
	color: #0848CC;
}

/* --------------------------------------------------------------------------
   7b. Animaciones de entrada de Elementor (fadeInUp en los widgets)
   Si el sistema pide reducir movimiento, todo se muestra sin animar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   7c. Equipo (Conócenos): fotos en formato retrato 4:5 y columna de texto
   fija al hacer scroll (altura de la cabecera + 30 px). --gdw-header-h lo
   calcula custom.js. Solo en escritorio.
   -------------------------------------------------------------------------- */
.gdw-equipo__foto img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 1025px) {
	.gdw-equipo__intro {
		position: sticky !important;
		top: calc(var(--gdw-header-h, 85px) + 30px + var(--wp-admin--admin-bar--height, 0px));
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   8. Entradas del blog: ancho completo con el padding lateral de la home
   (50 px; 15 px en móvil). El banner con la imagen destacada sale de
   functions.php (gdw_child_single_post_banner).
   -------------------------------------------------------------------------- */
body.single-post .site-content > .ast-container {
	padding-left: 50px;
	padding-right: 50px;
}

body.single-post .site-content article.post,
body.single-post .site-content .ast-article-single {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 767px) {
	body.single-post .site-content > .ast-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* ==========================================================================
   9. HOME 2 (.gdw-h2) · versión oscura con animaciones ligadas al scroll
   custom.js pone en cada [data-gdw-scroll] las variables:
     --p  avance de 0 a 1 mientras la sección pasa por la pantalla
     --ps seno de p (0 → 1 → 0): para desplegar y volver a contraer
   y añade .is-in a .gdw-h2-reveal y .gdw-split al entrar en pantalla.
   ========================================================================== */

/* --- Página oscura: fondo, cabecera y logo (body.gdw-theme-dark lo pone custom.js) --- */
body.gdw-theme-dark,
body.gdw-theme-dark #page,
body.gdw-theme-dark .site-content {
	background: #0B0B0A;
}

/* El desenfoque va en una capa ::before y no en la barra: un backdrop-filter en
   la barra encerraría dentro de ella el panel fijo del menú móvil */
body.gdw-theme-dark .gdw-header__bar {
	position: relative;
	isolation: isolate;
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.gdw-theme-dark .gdw-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(11, 11, 10, 0.78);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	pointer-events: none;
}

/* Menú móvil (panel lateral) en la página oscura */
body.gdw-theme-dark #masthead .hfe-side,
body.gdw-theme-dark #masthead .hfe-flyout-content {
	background-color: #151514 !important;
}

body.gdw-theme-dark #masthead .hfe-flyout-close,
body.gdw-theme-dark #masthead .hfe-flyout-close svg {
	color: #F4F3EF !important;
	fill: #F4F3EF !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu .sub-arrow {
	color: #F4F3EF !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-menu-item:hover,
body.gdw-theme-dark #masthead .hfe-nav-menu .current-menu-item > a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu .current-menu-ancestor > a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item-active,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item:hover {
	color: #0A5CFF !important;
}

body.gdw-theme-dark #masthead .sub-menu,
body.gdw-theme-dark #masthead .hfe-dropdown,
body.gdw-theme-dark #masthead .hfe-dropdown .menu-item a {
	background-color: #151514 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu__toggle,
body.gdw-theme-dark #masthead .hfe-nav-menu-icon,
body.gdw-theme-dark #masthead .hfe-nav-menu-icon svg {
	color: #F4F3EF !important;
	fill: #F4F3EF !important;
}

body.gdw-theme-dark.gdw-is-scrolled #masthead {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* --- Base --- */
.gdw-h2 {
	--h2-bg: #0B0B0A;
	--h2-surface: #151514;
	--h2-line: rgba(255, 255, 255, 0.09);
	--h2-text: #F4F3EF;
	--h2-muted: #8A8A86;
	--h2-red: #0A5CFF;
	--h2-coral: #22C3F5;
	--gutter: 50px;
	position: relative;
	color: var(--h2-text);
	background-color: var(--h2-bg);
	font-family: "Inter", sans-serif;
}

@media (max-width: 767px) {
	.gdw-h2 {
		--gutter: 15px;
	}
}

.gdw-h2 h1,
.gdw-h2 h2,
.gdw-h2 h3,
.gdw-h2 .gdw-h2-title {
	font-family: "Inter", sans-serif;
	color: var(--h2-text);
}

.gdw-h2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font: 600 13px/1.2 "Inter", sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--h2-coral);
}

.gdw-h2-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.gdw-h2-grad,
.gdw-h2-grad span {
	background: linear-gradient(95deg, #0A5CFF 0%, #22C3F5 55%, #9CC3FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.gdw-h2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 30px;
	border-radius: 999px;
	font: 600 16px/1 "Inter", sans-serif;
	text-decoration: none !important;
	color: #FFFFFF !important;
	background: linear-gradient(95deg, #0848CC, #0A5CFF 60%, #0A5CFF);
	box-shadow: 0 10px 40px rgba(10, 92, 255, 0.35);
	transition: transform 0.25s, box-shadow 0.25s;
}

.gdw-h2-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 50px rgba(10, 92, 255, 0.5);
}

.gdw-h2-btn--ghost {
	background: transparent;
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.gdw-h2-btn--ghost:hover {
	border-color: #0A5CFF;
	box-shadow: none;
}

.gdw-h2-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
}

/* --- Aparición al entrar en pantalla --- */
.gdw-h2-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--d, 0) * 90ms);
}

.gdw-h2-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Titular palabra a palabra (.gdw-split en un widget Título) */
.gdw-split .gdw-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.gdw-split .gdw-w > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.gdw-split.is-in .gdw-w > span {
	transform: none;
}

/* --- 1. Hero --- */
.gdw-h2-hero {
	overflow: hidden;
}

.gdw-h2-hero > .elementor-element:not(.gdw-h2-bg) {
	position: relative;
	z-index: 1;
}

.elementor-widget-html.gdw-h2-bg {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 0;
	pointer-events: none;
}

.gdw-h2-bg__inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.gdw-h2-grid {
	position: absolute;
	inset: -10% 0;
	background-image:
		linear-gradient(var(--h2-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--h2-line) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 72%);
	mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 72%);
	transform: translate3d(0, calc(var(--p, 0) * 120px), 0);
}

.gdw-h2-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	transform: translate3d(0, calc(var(--p, 0) * var(--speed, 200px)), 0) scale(calc(1 + var(--p, 0) * 0.3));
	animation: gdw-h2-breathe 9s ease-in-out infinite alternate;
}

.gdw-h2-orb--1 {
	width: 620px;
	height: 620px;
	top: -180px;
	right: -140px;
	background: radial-gradient(circle, rgba(10, 92, 255, 0.75), transparent 68%);
	--speed: 320px;
}

.gdw-h2-orb--2 {
	width: 460px;
	height: 460px;
	bottom: -160px;
	left: -120px;
	background: radial-gradient(circle, rgba(34, 195, 245, 0.45), transparent 70%);
	--speed: -220px;
	animation-delay: -4s;
}

.gdw-h2-orb--3 {
	width: 260px;
	height: 260px;
	top: 38%;
	left: 42%;
	background: radial-gradient(circle, rgba(8, 72, 204, 0.55), transparent 70%);
	--speed: 480px;
	animation-delay: -2s;
}

@keyframes gdw-h2-breathe {
	to { opacity: 0.55; }
}

.gdw-h2-hero__title {
	transform: translate3d(0, calc(var(--p, 0) * -90px), 0);
	opacity: calc(1 - var(--p, 0) * 1.2);
}

/* Diagrama isométrico que se despliega al bajar */
.gdw-h2-stack {
	height: 560px;
	display: grid;
	place-items: center;
	perspective: 1600px;
}

.gdw-h2-stack__scene {
	position: relative;
	width: min(360px, 70vw);
	aspect-ratio: 1;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-42deg) translate3d(0, 0, calc(var(--p, 0) * -60px));
	animation: gdw-h2-float 6s ease-in-out infinite;
}

@keyframes gdw-h2-float {
	50% { translate: 0 -14px; }
}

.gdw-h2-stack__layer,
.gdw-h2-iso__layer {
	position: absolute;
	inset: 0;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
	transform: translateZ(calc(var(--i) * (26px + var(--p, 0) * 110px)));
}

.gdw-h2-stack__layer::before,
.gdw-h2-iso__layer::before {
	content: "";
	position: absolute;
	inset: 18px;
	border-radius: 18px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
}

.gdw-h2-stack__layer:last-child {
	background: linear-gradient(135deg, #0A5CFF, #0B1736);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 40px 90px rgba(10, 92, 255, 0.45);
}

.gdw-h2-stack__layer span,
.gdw-h2-iso__layer span {
	position: absolute;
	left: 26px;
	bottom: 24px;
	font: 700 15px/1 "Inter", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* Figuras vectoriales que cambian de forma sin parar (morph SVG, custom.js)
   .gdw-h2-morph > svg con dos trazados, enlaces entre nodos y nodos. */
.gdw-h2-morph {
	width: min(540px, 88vw);
	aspect-ratio: 1;
	margin: 0 auto;
	transform: translate3d(0, calc(var(--p, 0) * -70px), 0) rotate(calc(var(--p, 0) * 30deg)) scale(calc(1 + var(--p, 0) * 0.15));
}

.gdw-h2-morph svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gdw-h2-morph__rot {
	transform-origin: 0 0;
	animation: gdw-spin 70s linear infinite;
}

.gdw-h2-morph__outer {
	fill: url(#gdw-morph-fill);
	stroke: url(#gdw-morph-stroke);
	stroke-width: 2.2;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 22px rgba(10, 92, 255, 0.55));
}

.gdw-h2-morph__inner {
	fill: none;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 1.2;
	stroke-dasharray: 4 6;
}

.gdw-h2-morph__links line {
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1;
}

.gdw-h2-morph__nodes circle {
	fill: #0B0B0A;
	stroke: #22C3F5;
	stroke-width: 1.8;
}

.gdw-h2-morph__nodes circle.is-inner {
	fill: #0A5CFF;
	stroke: none;
}

@media (prefers-reduced-motion: reduce) {
	.gdw-h2-morph__rot {
		animation: none;
	}
}

/* --- 3. Líneas de texto gigantes que avanzan y retroceden con el scroll --- */
.gdw-h2-lines {
	padding: 120px 0;
	overflow: hidden;
}

.gdw-h2-lines__row {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	margin-left: -25vw;
	font: 700 clamp(56px, 9vw, 170px)/1 "Inter", sans-serif;
	letter-spacing: normal;
	transform: translate3d(calc((var(--p, 0) - 0.5) * var(--dir, 1) * 55vw), 0, 0);
	will-change: transform;
}

.gdw-h2-lines__row + .gdw-h2-lines__row {
	margin-top: 0.08em;
}

.gdw-h2-lines__row .is-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(244, 243, 239, 0.45);
}

.gdw-h2-lines__row i {
	display: inline-block;
	margin: 0 0.35em;
	font-size: 0.45em;
	font-style: normal;
	color: var(--h2-red);
	transform: rotate(calc(var(--p, 0) * 540deg));
}

/* --- 4. Sección fija: cinco capas que se despliegan y se contraen --- */
.gdw-h2-pin {
	position: relative;
	height: 420vh;
}

.gdw-h2-pin__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
	padding: 0 var(--gutter);
	overflow: hidden;
}

.gdw-h2-pin__title {
	margin: 0 0 34px;
	font-size: clamp(34px, 4vw, 64px);
	line-height: 1.05;
	letter-spacing: normal;
	font-weight: 700;
}

.gdw-h2-pin__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gdw-step;
}

.gdw-h2-pin__steps li {
	counter-increment: gdw-step;
	position: relative;
	padding: 16px 0 16px 58px;
	border-top: 1px solid var(--h2-line);
	opacity: 0.35;
	transition: opacity 0.4s;
}

.gdw-h2-pin__steps li::before {
	content: counter(gdw-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 17px;
	font: 600 15px "Inter", sans-serif;
	color: var(--h2-muted);
}

.gdw-h2-pin__steps li strong {
	display: block;
	font: 600 21px/1.3 "Inter", sans-serif;
	color: var(--h2-text);
}

.gdw-h2-pin__steps li span {
	display: block;
	max-height: 0;
	overflow: hidden;
	color: var(--h2-muted);
	transition: max-height 0.5s ease, margin 0.5s ease;
}

.gdw-h2-pin__steps li.is-active {
	opacity: 1;
}

.gdw-h2-pin__steps li.is-active::before {
	color: var(--h2-red);
}

.gdw-h2-pin__steps li.is-active span {
	max-height: 120px;
	margin-top: 8px;
}

.gdw-h2-pin__bar {
	height: 2px;
	margin-top: 26px;
	background: var(--h2-line);
}

.gdw-h2-pin__bar span {
	display: block;
	height: 100%;
	width: calc(var(--p, 0) * 100%);
	background: linear-gradient(90deg, #0A5CFF, #22C3F5);
}

.gdw-h2-iso {
	position: relative;
	width: min(380px, 70vw);
	aspect-ratio: 1;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-42deg);
}

.gdw-h2-pin__visual {
	perspective: 1600px;
	display: grid;
	place-items: center;
}

.gdw-h2-iso__layer {
	transform: translateZ(calc(var(--i) * (16px + var(--ps, 0) * var(--spread, 120px))));
	transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.gdw-h2-iso__layer.is-active {
	background: linear-gradient(135deg, #0A5CFF, #0B1736);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 40px 100px rgba(10, 92, 255, 0.5);
}

@media (max-width: 1024px) {
	.gdw-h2-pin__sticky {
		grid-template-columns: 1fr;
		gap: 10px;
		align-content: center;
		padding-top: calc(var(--gdw-header-h, 85px) + 20px);
		--spread: 55px;
		/* La columna no crece con el navegador isométrico (560 px sin escalar) */
		grid-template-columns: minmax(0, 1fr);
	}

	.gdw-h2-pin__visual {
		min-width: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gdw-h2-pin__visual {
		order: -1;
	}

	.gdw-h2-iso {
		width: min(240px, 60vw);
	}

	.gdw-h2-pin__steps li {
		padding: 10px 0 10px 44px;
	}

	.gdw-h2-pin__steps li strong {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.gdw-h2-pin__sticky {
		align-content: start;
		--spread: 24px;
	}

	.gdw-h2-pin__visual {
		height: 270px;
		padding-top: 84px;
	}

	.gdw-h2-pin__steps li {
		padding: 7px 0 7px 40px;
	}

	.gdw-h2-pin__steps li::before {
		top: 9px;
	}

	.gdw-h2-pin__steps li strong {
		font-size: 16px;
	}

	.gdw-h2-iso {
		width: 165px;
	}

	.gdw-h2-pin__title {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.gdw-h2-pin__text .gdw-h2-eyebrow {
		margin-bottom: 10px;
	}
}

/* Navegador isométrico con el esquema de una web (sección «cinco capas»)
   La página de dentro sube con --p; los bloques del paso activo se iluminan
   ([data-step] con .is-active); las dos copias de debajo se separan con --ps. */
.gdw-h2-browser {
	--bw: 560px;
	--bh: 410px;
	--s: 1;
	position: relative;
	width: var(--bw);
	height: var(--bh);
	flex: none;
	transform-style: preserve-3d;
	transform: rotateX(55deg) rotateZ(-38deg) scale(var(--s));
	animation: gdw-h2-float 7s ease-in-out infinite;
}

.gdw-h2-browser__ghost,
.gdw-h2-browser__window {
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

.gdw-h2-browser__ghost {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.025);
	transform: translateZ(calc(var(--g) * (-22px - var(--ps, 0) * 80px)));
	opacity: calc(0.7 - var(--g) * 0.22);
}

.gdw-h2-browser__ghost::after {
	content: "";
	position: absolute;
	inset: 50px 22px 22px;
	border-radius: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
}

.gdw-h2-browser__window {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #151514;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(10, 92, 255, calc(0.08 + var(--ps, 0) * 0.2));
	transform: translateZ(calc(var(--ps, 0) * 30px));
}

.gdw-h2-browser__bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	background: #1C1C1B;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gdw-h2-browser__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3A3A38;
}

.gdw-h2-browser__bar i:first-child {
	background: #0A5CFF;
}

.gdw-h2-browser__bar i:nth-child(2) {
	background: #22C3F5;
}

.gdw-h2-browser__url {
	flex: 1;
	height: 20px;
	margin-left: 10px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	font: 500 11px/20px "Inter", sans-serif;
	color: #8A8A86;
}

.gdw-h2-browser__viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.gdw-h2-browser__page {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	transform: translate3d(0, calc(var(--p, 0) * -63%), 0);
}

.gdw-h2-b-row {
	display: flex;
	gap: 12px;
}

.gdw-h2-b {
	flex: 1;
	position: relative;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.45s, border-color 0.45s, box-shadow 0.45s, transform 0.45s;
}

.gdw-h2-b.is-active {
	background: linear-gradient(135deg, #0A5CFF, #0B1736);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 10px 30px rgba(10, 92, 255, 0.45);
	transform: translateY(-3px);
}

.gdw-h2-b i,
.gdw-h2-b b,
.gdw-h2-b span,
.gdw-h2-b s {
	display: block;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.gdw-h2-b--nav {
	flex: none;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 0 12px;
}

.gdw-h2-b--nav::before {
	content: "";
	width: 46px;
	height: 10px;
	margin-right: auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
}

.gdw-h2-b--nav span {
	width: 26px;
	height: 6px;
}

.gdw-h2-b--hero {
	flex: none;
	height: 124px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.gdw-h2-b--hero b {
	height: 14px;
	width: 70%;
	background: rgba(255, 255, 255, 0.32);
}

.gdw-h2-b--hero b + b {
	width: 48%;
}

.gdw-h2-b--hero em {
	display: block;
	width: 74px;
	height: 22px;
	margin-top: auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.gdw-h2-b--card {
	height: 72px;
}

.gdw-h2-b--card::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.22);
}

.gdw-h2-b--card::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 18px;
	bottom: 14px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}

.gdw-h2-b--text {
	flex: none;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gdw-h2-b-row .gdw-h2-b--text {
	flex: 1;
}

.gdw-h2-b--text i {
	height: 6px;
}

.gdw-h2-b--text i:nth-child(2) {
	width: 86%;
}

.gdw-h2-b--text i:nth-child(3) {
	width: 62%;
}

.gdw-h2-b--img {
	height: 96px;
	background-image: radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.18) 0 10px, transparent 11px), linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
}

.gdw-h2-b--chart {
	flex: none;
	height: 96px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 14px 16px;
}

.gdw-h2-b--chart s {
	flex: 1;
	height: calc(var(--h) * 100%);
	border-radius: 6px 6px 3px 3px;
}

.gdw-h2-b--cta {
	flex: none;
	height: 54px;
}

.gdw-h2-b--cta::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 70px;
	height: 20px;
	margin-top: -10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.gdw-h2-b--footer {
	flex: none;
	height: 44px;
}

/* Versión «diagrama que se abre»: la página de dentro no se mueve; la ventana
   es la capa base y los bloques con [data-layer] (--lz = altura final) se
   elevan con --ps (0 → 1 → 0) mientras la sección está fija. */
.gdw-h2-browser--layers .gdw-h2-browser__window,
.gdw-h2-browser--layers .gdw-h2-browser__viewport,
.gdw-h2-browser--layers .gdw-h2-browser__page,
.gdw-h2-browser--layers .gdw-h2-b-row {
	overflow: visible;
	transform-style: preserve-3d;
}

.gdw-h2-browser--layers .gdw-h2-browser__window {
	transform: none;
}

.gdw-h2-browser--layers .gdw-h2-browser__bar {
	border-radius: 21px 21px 0 0;
}

.gdw-h2-browser--layers .gdw-h2-browser__page {
	height: 100%;
	gap: 10px;
	transform: none;
}

/* --open: se abre en el primer 45 % de la sección y se queda abierto */
.gdw-h2-browser--layers {
	--open: min(1, calc(var(--p, 0) * 2.2));
}

.gdw-h2-browser--layers [data-layer] {
	transform: translateZ(calc(var(--open, 0) * var(--lz, 60px)));
	transition: background 0.45s, border-color 0.45s, box-shadow 0.45s;
}

.gdw-h2-browser--layers .gdw-h2-b[data-layer] {
	box-shadow: 0 calc(var(--open, 0) * 40px) calc(var(--open, 0) * 50px) rgba(0, 0, 0, 0.55);
}

.gdw-h2-browser--layers .gdw-h2-b.is-active {
	transform: translateZ(calc(var(--open, 0) * var(--lz, 60px) + 16px));
	box-shadow: 0 20px 50px rgba(10, 92, 255, 0.5);
}

.gdw-h2-browser--layers .gdw-h2-b-row[data-layer] .gdw-h2-b {
	box-shadow: 0 calc(var(--open, 0) * 40px) calc(var(--open, 0) * 50px) rgba(0, 0, 0, 0.55);
}

.gdw-h2-browser--layers .gdw-h2-b-row[data-layer] .gdw-h2-b.is-active {
	transform: translateZ(16px);
}

.gdw-h2-browser--layers .gdw-h2-b--hero {
	height: 96px;
	padding: 16px 18px;
}

.gdw-h2-browser--layers .gdw-h2-b--card {
	height: 64px;
}

.gdw-h2-browser--layers .gdw-h2-b--chart {
	height: 70px;
	padding: 12px 16px;
}

@media (max-width: 1024px) {
	.gdw-h2-browser {
		--s: 0.66;
	}
}

@media (max-width: 767px) {
	.gdw-h2-browser {
		--s: 0.46;
	}

	.gdw-h2-pin__visual {
		overflow: visible;
	}
}

/* --- 5. Cifras con texto circular que gira --- */
.gdw-h2-stats {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 70px;
	padding: 110px var(--gutter);
}

.gdw-h2-circle {
	position: relative;
	width: 220px;
	height: 220px;
}

.gdw-h2-circle svg {
	width: 100%;
	height: 100%;
	transform: rotate(calc(var(--p, 0) * 540deg));
}

.gdw-h2-circle text {
	font: 600 13.5px "Inter", sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	fill: var(--h2-text);
}

.gdw-h2-circle__core {
	position: absolute;
	inset: 50%;
	width: 78px;
	height: 78px;
	margin: -39px 0 0 -39px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 34px;
	color: #FFFFFF;
	background: linear-gradient(135deg, #0A5CFF, #0B1736);
	box-shadow: 0 0 60px rgba(10, 92, 255, 0.55);
}

.gdw-h2-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.gdw-h2-stat {
	padding: 30px 0 0;
	border-top: 1px solid var(--h2-line);
}

.gdw-h2-stat strong {
	display: block;
	font: 600 clamp(48px, 5vw, 84px)/1 "Inter", sans-serif;
	letter-spacing: normal;
	color: var(--h2-text);
}

.gdw-h2-stat span {
	display: block;
	margin-top: 12px;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-stats {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 50px;
	}

	.gdw-h2-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
}

/* --- 6. Proceso con línea que se rellena --- */
.gdw-h2-process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 20px var(--gutter) 110px;
}

.gdw-h2-process__line {
	position: absolute;
	top: 49px;
	left: var(--gutter);
	right: var(--gutter);
	height: 2px;
	background: var(--h2-line);
}

.gdw-h2-process__line span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #0A5CFF, #22C3F5);
	transform-origin: left;
	transform: scaleX(clamp(0, calc((var(--p, 0) - 0.2) * 2.4), 1));
}

.gdw-h2-process__step {
	position: relative;
	opacity: clamp(0.2, calc((var(--p, 0) - var(--t)) * 7 + 0.2), 1);
	transform: translate3d(0, calc(clamp(0, (var(--t) - var(--p, 0)) * 300, 40) * 1px), 0);
}

.gdw-h2-process__dot {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	margin-bottom: 28px;
	border-radius: 50%;
	font: 700 18px "Inter", sans-serif;
	color: #FFFFFF;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
	position: relative;
	z-index: 1;
}

.gdw-h2-process__step h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-process__step p {
	margin: 0;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-process {
		grid-template-columns: 1fr 1fr;
		row-gap: 50px;
	}

	.gdw-h2-process__line {
		display: none;
	}
}

@media (max-width: 767px) {
	.gdw-h2-process {
		grid-template-columns: 1fr;
	}
}

/* --- 7. Proyectos en horizontal, guiados por el scroll vertical --- */
.gdw-h2-hscroll {
	position: relative;
	height: 320vh;
}

.gdw-h2-hscroll__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	overflow: hidden;
}

.gdw-h2-hscroll__head {
	padding: 0 var(--gutter);
	max-width: 900px;
}

.gdw-h2-hscroll__head h2,
.gdw-h2-section-title {
	margin: 0;
	font-size: clamp(34px, 4vw, 64px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: normal;
}

.gdw-h2-hscroll__track {
	display: flex;
	gap: 30px;
	width: max-content;
	padding: 0 var(--gutter);
	transform: translate3d(calc(var(--p, 0) * var(--dist, 0) * -1px), 0, 0);
	will-change: transform;
}

.gdw-h2-card {
	position: relative;
	width: clamp(280px, 34vw, 520px);
	flex: none;
	margin: 0;
	border-radius: 26px;
	overflow: hidden;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
}

.gdw-h2-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gdw-h2-card:hover img {
	transform: scale(1.06);
}

.gdw-h2-card figcaption {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	padding: 22px 24px 24px;
}

.gdw-h2-card figcaption span {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--h2-coral);
}

.gdw-h2-card figcaption h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-card figcaption b {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--h2-line);
	font-weight: 400;
	transition: background 0.3s, border-color 0.3s;
}

.gdw-h2-card:hover figcaption b {
	background: var(--h2-red);
	border-color: var(--h2-red);
}

/* --- 8. Sectores con brillo que sigue al ratón --- */
.gdw-h2-sectors {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.gdw-h2-sector {
	--mx: 50%;
	--my: 50%;
	position: relative;
	padding: 36px 30px;
	border-radius: 26px;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
	overflow: hidden;
	isolation: isolate;
}

.gdw-h2-sector::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(10, 92, 255, 0.28), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s;
}

.gdw-h2-sector:hover::before {
	opacity: 1;
}

.gdw-h2-sector i {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 26px;
	border-radius: 16px;
	font-style: normal;
	font-size: 24px;
	background: rgba(10, 92, 255, 0.12);
	color: var(--h2-red);
}

.gdw-h2-sector h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-sector p {
	margin: 0;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-sectors {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.gdw-h2-sectors {
		grid-template-columns: 1fr;
	}
}

/* --- 9. Opiniones en oscuro (carrusel .gdw-carousel) --- */
.gdw-h2 .gdw-carousel__dot {
	background: rgba(255, 255, 255, 0.18);
}

/* --- 10. CTA final que crece al acercarse --- */
.gdw-h2-cta {
	position: relative;
	padding: 170px var(--gutter);
	text-align: center;
	overflow: hidden;
}

.gdw-h2-cta__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 900px;
	height: 900px;
	margin: -450px 0 0 -450px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(10, 92, 255, 0.45), transparent 62%);
	filter: blur(30px);
	transform: scale(calc(0.4 + var(--p, 0) * 0.9));
	pointer-events: none;
}

.gdw-h2-cta__title {
	position: relative;
	margin: 0 0 26px;
	font-size: clamp(48px, 9vw, 150px) !important;
	line-height: 0.95;
	font-weight: 700;
	letter-spacing: normal;
	transform: scale(clamp(0.7, calc(0.62 + var(--p, 0) * 0.8), 1.05));
}

.gdw-h2-cta__title span {
	display: block;
}

.gdw-h2-cta p {
	position: relative;
	max-width: 620px;
	margin: 0 auto 34px;
	font-size: 19px;
	color: #C9C8C3;
}

/* --- Sin movimiento si el sistema lo pide --- */
@media (prefers-reduced-motion: reduce) {
	.gdw-h2 *,
	.gdw-h2 *::before {
		animation: none !important;
		transition: none !important;
	}

	.gdw-h2-reveal,
	.gdw-split .gdw-w > span {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   10. Páginas legales (.gdw-legal): aviso legal, privacidad y cookies
   Los datos de cada cliente van como <strong>[MARCADOR]</strong>.
   ========================================================================== */
.gdw-legal .gdw-legal__body h2 {
	margin: 2.2em 0 0.7em;
	font-family: "Inter", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body h3 {
	margin: 1.6em 0 0.5em;
	font-family: "Inter", sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body p,
.gdw-legal .gdw-legal__body li {
	line-height: 1.75;
}

.gdw-legal .gdw-legal__body ul {
	margin: 0 0 1.2em 1.2em;
}

.gdw-legal .gdw-legal__body strong {
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body a {
	color: #0848CC;
}

.gdw-legal .gdw-legal__body table {
	width: 100%;
	margin: 1em 0 1.6em;
	border-collapse: collapse;
	font-size: 15px;
}

.gdw-legal .gdw-legal__body th,
.gdw-legal .gdw-legal__body td {
	padding: 12px 14px;
	border: 1px solid #E2E1DC;
	text-align: left;
	vertical-align: top;
}

.gdw-legal .gdw-legal__body th {
	background: #F4F3EF;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

@media (max-width: 767px) {
	.gdw-legal .gdw-legal__body table {
		display: block;
		overflow-x: auto;
	}
}

/* ==========================================================================
   11. Texto circular (.gdw-circle-text): imagen redonda con un anillo de
   texto que gira. El texto sale del widget Título .gdw-circle-text__label
   (custom.js lo convierte en SVG, con su color). El ancho lo marca el
   contenedor.
   ========================================================================== */
.gdw-circle-text {
	position: relative;
	aspect-ratio: 1;
	flex-shrink: 0;
}

.gdw-circle-text > .elementor-widget-image {
	position: absolute;
	inset: 16%;
	width: auto !important;
	margin: 0 !important;
}

.gdw-circle-text > .elementor-widget-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50% !important;
}

.gdw-circle-text__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	animation: gdw-circle-spin 22s linear infinite;
}

.gdw-circle-text__ring text {
	font: 600 13px "Inter", sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	fill: currentColor;
}

/* El título queda para lectores de pantalla cuando ya está el anillo */
.gdw-circle-text.is-built .gdw-circle-text__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* En el editor (sin anillo) el título se ve debajo del círculo */
.gdw-circle-text:not(.is-built) .gdw-circle-text__label {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	text-align: center;
}

@keyframes gdw-circle-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdw-circle-text__ring {
		animation: none;
	}
}

/* ==========================================================================
   PENTAX ASESORES · lo propio de esta web (salida/astra-child/css/*.css)
   ========================================================================== */
/* >>> PX 00-base.css */
/* ==========================================================================
   Pentax Asesores · 00 · base: letras, colores, texto, botones y apariciones
   19-10-2026 · Mario (encargo) · Claude. Contrato: salida/DISENO.md
   ========================================================================== */

/* --- 1. Inter en local (archivos de Mario: 400, 700 y 900) ----------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* --- 2. Variables ------------------------------------------------------------ */
:root {
	--px-tinta: #0B1736;
	--px-texto: #46506A;
	--px-suave: #6B7590;
	--px-azul: #0A5CFF;
	--px-azul-2: #0848CC;
	--px-cielo: #3D8BFF;
	--px-cian: #22C3F5;
	--px-indigo: #3A3FB8;
	--px-hielo: #F3F7FF;
	--px-hielo-2: #E6EFFF;
	--px-borde: #E3EAF7;
	--px-blanco: #FFFFFF;
	/* Degradados sobrios (19-10-2026, Mario: «más elegante, más premium»): de marino a azul, sin cian */
	--px-grad: linear-gradient(120deg, #1B3A8F 0%, #0A5CFF 62%, #3D8BFF 100%);
	--px-grad-2: linear-gradient(135deg, #16295E 0%, #1B3A8F 45%, #0A5CFF 100%);
	--px-sombra: 0 24px 60px -24px rgba(10, 60, 170, 0.28);
	--px-sombra-s: 0 10px 30px -14px rgba(10, 60, 170, 0.25);
	--px-radio: 28px;
	--px-radio-l: 40px;
	--px-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
	--px-f: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--px-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Paleta de Astra (la base la trae en rojo): enlaces, pasar el ratón y títulos */
:root {
	--ast-global-color-0: #0A5CFF;
	--ast-global-color-1: #0848CC;
	--ast-global-color-2: #0B1736;
	--ast-global-color-3: #46506A;
	--e-global-color-astglobalcolor0: #0A5CFF;
	--e-global-color-astglobalcolor1: #0848CC;
	--e-global-color-astglobalcolor2: #0B1736;
	--e-global-color-astglobalcolor3: #46506A;
}

/* Colores y letras globales de Elementor (el Kit de la base trae el rojo y Plus Jakarta) */
body[class*="elementor-kit-"] {
	--e-global-color-primary: #0A5CFF;
	--e-global-color-secondary: #0B1736;
	--e-global-color-text: #46506A;
	--e-global-color-accent: #22C3F5;
	--e-global-typography-primary-font-family: "Inter";
	--e-global-typography-secondary-font-family: "Inter";
	--e-global-typography-text-font-family: "Inter";
	--e-global-typography-accent-font-family: "Inter";
}

/* --- 3. Texto general ---------------------------------------------------------- */
body,
body button,
body input,
body select,
body textarea {
	font-family: var(--px-f);
}

body {
	color: var(--px-texto);
	background: #FFFFFF;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--px-f);
	color: var(--px-tinta);
	letter-spacing: normal;
}

::selection {
	background: rgba(10, 92, 255, 0.18);
	color: var(--px-tinta);
}

/* Títulos de las piezas (px-h): Inter 700. El tamaño, por nivel */
body .px-h .elementor-heading-title {
	font-family: var(--px-f);
	font-weight: 700;
	color: var(--px-tinta);
	letter-spacing: normal;
	word-spacing: 0.02em;
}

body .px-h--display .elementor-heading-title {
	font-size: clamp(42px, 5.3vw, 82px);
	line-height: 1.04;
}

body .px-h--h1 .elementor-heading-title {
	font-size: clamp(40px, 5.2vw, 76px);
	line-height: 1.05;
}

body .px-h--h2 .elementor-heading-title {
	font-size: clamp(32px, 3.9vw, 58px);
	line-height: 1.08;
}

body .px-h--h3 .elementor-heading-title {
	font-size: clamp(21px, 1.7vw, 26px);
	line-height: 1.25;
}

body .px-h--h4 .elementor-heading-title {
	font-size: 18px;
	line-height: 1.35;
}

body .px-claro .elementor-heading-title,
body .px-claro.px-h .elementor-heading-title {
	color: #FFFFFF;
}

/* Palabras destacadas: Playfair cursiva en degradado (BSS Farma, Tu Web Accesible) */
body .px-h em,
body .px-serif em,
body .px-em {
	font-family: var(--px-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.04em;
	letter-spacing: normal;
	color: var(--px-azul);
	background: var(--px-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-right: 0.05em;
}

body .px-claro em {
	background: linear-gradient(120deg, #C9DAFF 0%, #8FB4FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Etiqueta (eyebrow) con rombo en degradado */
body .px-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--px-azul);
}

body .px-eyebrow .elementor-heading-title::before {
	content: "";
	width: 10px;
	height: 10px;
	flex: 0 0 10px;
	border-radius: 2px;
	background: var(--px-grad);
	transform: rotate(45deg);
}

body .px-claro.px-eyebrow .elementor-heading-title {
	color: #9CC3FF;
}

/* Texto y entradilla */
body .px-text,
body .px-text p {
	font-family: var(--px-f);
	font-size: 17px;
	line-height: 1.7;
	color: var(--px-texto);
}

body .px-lead,
body .px-lead p {
	font-family: var(--px-f);
	font-size: clamp(18px, 1.45vw, 21px);
	line-height: 1.6;
	color: var(--px-texto);
}

body .px-text p:last-child,
body .px-lead p:last-child {
	margin-bottom: 0;
}

body .px-text strong,
body .px-lead strong {
	color: var(--px-tinta);
	font-weight: 700;
}

body .px-claro.px-text,
body .px-claro.px-text p,
body .px-claro.px-lead,
body .px-claro.px-lead p {
	color: rgba(255, 255, 255, 0.82);
}

body .px-claro strong {
	color: #FFFFFF;
}

@media (max-width: 767px) {
	body .px-text,
	body .px-text p {
		font-size: 16px;
	}
}

/* --- 4. Botones (píldora) ---------------------------------------------------------- */
body .px-btn .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 28px;
	border: 0;
	border-radius: 999px;
	font-family: var(--px-f);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: normal;
	color: #FFFFFF;
	background: var(--px-azul);
	background-image: var(--px-grad);
	background-size: 160% 100%;
	background-position: 0 0;
	box-shadow: 0 14px 30px -12px rgba(10, 92, 255, 0.6);
	overflow: hidden;
	transition: background-position 0.5s var(--px-ease), transform 0.3s var(--px-ease), box-shadow 0.3s;
}

body .px-btn .elementor-button:hover,
body .px-btn .elementor-button:focus-visible {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -14px rgba(10, 92, 255, 0.7);
	color: #FFFFFF;
}

/* Flecha que avanza (sin icono en el widget: la pone el CSS) */
body .px-btn .elementor-button-text::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 10px;
	margin-left: 10px;
	vertical-align: 1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.5 0.6 15 5l-4.5 4.4-1-1L12.3 5.7H0V4.3h12.3L9.5 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M10.5 0.6 15 5l-4.5 4.4-1-1L12.3 5.7H0V4.3h12.3L9.5 1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s var(--px-ease);
}

body .px-btn .elementor-button:hover .elementor-button-text::after {
	transform: translateX(4px);
}

body .px-btn--linea .elementor-button {
	color: var(--px-tinta);
	background: transparent;
	background-image: none;
	box-shadow: inset 0 0 0 1.5px var(--px-borde);
}

body .px-btn--linea .elementor-button:hover,
body .px-btn--linea .elementor-button:focus-visible {
	color: var(--px-azul);
	box-shadow: inset 0 0 0 1.5px var(--px-azul);
	background: #FFFFFF;
}

body .px-btn--claro .elementor-button {
	color: var(--px-azul);
	background: #FFFFFF;
	background-image: none;
	box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.35);
}

body .px-btn--claro .elementor-button:hover,
body .px-btn--claro .elementor-button:focus-visible {
	color: var(--px-azul-2);
	background: #FFFFFF;
}

body .px-btn--sm .elementor-button {
	padding: 12px 20px;
	font-size: 14px;
}

body .px-btn--sm .elementor-button-text::after {
	display: none;
}

.px-botones {
	align-items: center;
}

/* Enlace con flecha */
body .px-link .elementor-heading-title,
body .px-link .elementor-heading-title a {
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 700;
	color: var(--px-azul);
}

body .px-link .elementor-heading-title a::after {
	content: " →";
	display: inline-block;
	transition: transform 0.3s var(--px-ease);
}

body .px-link .elementor-heading-title a:hover::after {
	transform: translateX(5px);
}

/* --- 5. Títulos letra a letra (px-letras): la altura de línea hace de máscara -------- */
.px-letras .px-w {
	display: inline-block;
	overflow: clip;
	overflow-clip-margin: 0.02em;
	vertical-align: top;
	padding: 0.1em 0 0.16em;
	margin: -0.1em 0 -0.16em;
	white-space: nowrap;
}

.px-letras em .px-w {
	padding-right: 0.08em;
	margin-right: -0.08em;
}

.px-letras .px-l {
	display: inline-block;
	transform: translate3d(0, -118%, 0);
	transition: transform 0.75s var(--px-ease);
	transition-delay: calc(var(--i, 0) * 24ms + var(--d0, 0ms));
	will-change: transform;
}

/* En las palabras en Playfair, el degradado sigue entero a lo largo de la palabra */
body .px-h em .px-l {
	background: var(--px-grad);
	background-size: var(--ww, 4em) 100%;
	background-position: calc(var(--lx, 0px) * -1) 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body .px-claro em .px-l {
	background-image: linear-gradient(120deg, #C9DAFF 0%, #8FB4FF 100%);
}

/* Nada de botones, píldoras ni etiquetas partidos en dos líneas */
body .px-btn .elementor-button,
body .px-btn .elementor-button-text,
body .px-chips .elementor-icon-list-text {
	white-space: nowrap;
}

@media (min-width: 768px) {
	body .px-eyebrow .elementor-heading-title {
		white-space: nowrap;
	}
}

@media (max-width: 400px) {
	body .px-btn .elementor-button {
		padding: 15px 20px;
		font-size: 15px;
	}
}

.px-letras.is-in .px-l {
	transform: none;
}

/* --- 6. Apariciones (px-rv) ------------------------------------------------------------------ */
.px-js .px-rv {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.8s var(--px-ease), transform 0.9s var(--px-ease);
	transition-delay: var(--rd, 0ms);
}

.px-js .px-rv.is-in {
	opacity: 1;
	transform: none;
}

.px-d1 { --rd: 80ms; }
.px-d2 { --rd: 160ms; }
.px-d3 { --rd: 240ms; }
.px-d4 { --rd: 320ms; }
.px-d5 { --rd: 400ms; }
.px-d6 { --rd: 480ms; }

/* En el editor de Elementor todo se ve quieto */
.elementor-editor-active .px-rv,
.elementor-editor-active .px-letras .px-l {
	opacity: 1 !important;
	transform: none !important;
}

/* --- 7. Reducir movimiento -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.px-js .px-rv,
	.px-letras .px-l,
	.px-plx,
	.px-flota img,
	.px-d {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}
/* <<< fin PX 00-base.css */

/* >>> PX 10-piezas.css */
/* ==========================================================================
   Pentax Asesores · 10 · secciones, adornos, paneles, tarjetas, bento, pila
   ========================================================================== */

/* --- 1. Secciones a ancho completo, transparentes (blanco del cuerpo) -------- */
.px-sec {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	--p: 0.5;
}

/* El contenido va por encima de los adornos, también de los que vienen de la sección anterior */
.px-sec > .e-con-inner,
.px-sec > .elementor-element {
	position: relative;
	z-index: 2;
}

/* --- 2. Adornos geométricos (los crea 00-motor.js en .px-deco--*) ------------- */
.px-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.px-d {
	position: absolute;
	display: block;
	pointer-events: none;
	will-change: transform;
	--y: calc((var(--p, 0.5) - 0.5) * var(--v, -160px));
	--r: calc((var(--p, 0.5) - 0.5) * var(--g, 0deg));
	transform: translate3d(0, var(--y), 0) rotate(calc(var(--r0, 0deg) + var(--r)));
}

/* Rombo de facetas (el diamante del logo, en azules claros) */
.px-d--gema {
	width: var(--s, 220px);
	aspect-ratio: 1;
	background:
		conic-gradient(from 45deg at 50% 50%, #EEF3FC 0 25%, #E1E9F7 0 50%, #D5E0F3 0 75%, #E8EEF9 0);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	opacity: 0.85;
}

.px-d--gema-azul {
	width: var(--s, 120px);
	aspect-ratio: 1;
	background: conic-gradient(from 45deg at 50% 50%, #DCE6F5 0 25%, #1B3A8F 0 50%, #16295E 0 75%, #B9CBEA 0);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	opacity: 0.9;
}

/* Cuadrado redondeado girado (Paycomet) */
.px-d--rombo {
	width: var(--s, 160px);
	aspect-ratio: 1;
	border-radius: 22%;
	background: linear-gradient(135deg, #EEF4FF 0%, #DCE8FF 100%);
	--r0: 45deg;
}

.px-d--rombo-linea {
	width: var(--s, 140px);
	aspect-ratio: 1;
	border-radius: 24%;
	border: 2px solid #CFE0FF;
	--r0: 45deg;
}

/* Aro */
.px-d--aro {
	width: var(--s, 260px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid #D6E4FF;
}

.px-d--aro-grad {
	width: var(--s, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 3px;
	background: var(--px-grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
}

/* Retícula de puntos */
.px-d--puntos {
	width: var(--s, 180px);
	aspect-ratio: 1;
	background-image: radial-gradient(circle, #9CC3FF 1.6px, transparent 2px);
	background-size: 18px 18px;
	opacity: 0.8;
}

/* Gran faceta en degradado que sobresale y sigue en la sección siguiente */
.px-d--faceta {
	width: var(--s, 720px);
	aspect-ratio: 1.15;
	background: linear-gradient(140deg, rgba(10, 92, 255, 0.1) 0%, rgba(61, 139, 255, 0.07) 50%, rgba(34, 195, 245, 0.05) 100%);
	clip-path: polygon(30% 0, 100% 18%, 82% 100%, 0 72%);
}

.px-d--faceta-2 {
	width: var(--s, 620px);
	aspect-ratio: 1;
	background: linear-gradient(200deg, rgba(58, 63, 184, 0.08) 0%, rgba(10, 92, 255, 0.06) 60%, rgba(34, 195, 245, 0.03) 100%);
	clip-path: polygon(0 20%, 70% 0, 100% 64%, 38% 100%);
}

/* Halo de color muy suave */
.px-d--halo {
	width: var(--s, 760px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(61, 139, 255, 0.16) 0%, rgba(34, 195, 245, 0.07) 40%, transparent 70%);
}

@media (max-width: 1024px) {
	.px-d--faceta,
	.px-d--faceta-2,
	.px-d--halo {
		--s: 460px !important;
	}

	.px-d--aro,
	.px-d--aro-grad {
		--s: 180px !important;
	}
}

@media (max-width: 767px) {
	/* En el móvil solo los adornos suaves: los pequeños pisarían los textos */
	.px-d--gema,
	.px-d--gema-azul,
	.px-d--rombo-linea,
	.px-d--puntos {
		display: none;
	}

	.px-d--rombo {
		--s: 90px !important;
		opacity: 0.6;
	}

	.px-d--faceta,
	.px-d--faceta-2,
	.px-d--halo {
		--s: 340px !important;
	}
}

/* --- 3. Paneles redondeados dentro de la sección --------------------------------- */
.px-panel {
	position: relative;
	border-radius: var(--px-radio-l);
	overflow: clip;
	isolation: isolate;
}

.px-panel--hielo {
	background: linear-gradient(180deg, #F5F8FF 0%, #EEF4FF 100%);
}

.px-panel--tinta {
	background: radial-gradient(120% 140% at 85% 0%, #1B3A8F 0%, #0B1736 55%, #070F26 100%);
}

.px-panel--azul {
	background: var(--px-grad-2);
}

/* Destello y retícula de puntos en los paneles oscuros y azules (Holded) */
.px-panel--tinta::after,
.px-panel--azul::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask: radial-gradient(70% 90% at 90% 10%, #000 0%, transparent 70%);
	mask: radial-gradient(70% 90% at 90% 10%, #000 0%, transparent 70%);
}

@media (max-width: 767px) {
	.px-panel {
		border-radius: 28px;
	}
}

/* --- 4. Tarjetas ------------------------------------------------------------------------ */
.px-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--px-borde);
	border-radius: var(--px-radio);
	box-shadow: 0 1px 0 rgba(11, 23, 54, 0.02);
	transition: transform 0.45s var(--px-ease), box-shadow 0.45s var(--px-ease), border-color 0.3s;
	isolation: isolate;
	overflow: clip;
}

a.px-card,
.px-card--link {
	cursor: pointer;
}

.px-card:hover {
	transform: translateY(-6px);
	border-color: #CFE0FF;
	box-shadow: var(--px-sombra);
}

/* Brillo que sigue al ratón (lo coloca el motor en --mx, --my) */
.px-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 139, 255, 0.12), transparent 60%);
	transition: opacity 0.4s;
}

.px-card:hover::after {
	opacity: 1;
}

.px-card--hielo {
	background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FF 100%);
	border-color: #E1EBFF;
}

.px-card--tinta {
	background: radial-gradient(120% 120% at 100% 0%, #1B3A8F 0%, #0B1736 60%);
	border-color: rgba(255, 255, 255, 0.08);
}

.px-card--azul {
	background: var(--px-grad-2);
	border-color: transparent;
}

.px-card--foto {
	padding: 0 !important;
}

.px-card--foto .elementor-widget-image,
.px-card--foto .elementor-widget-image img {
	width: 100%;
}

.px-card--foto .elementor-widget-image img {
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.9s var(--px-ease);
}

.px-card--foto:hover .elementor-widget-image img {
	transform: scale(1.04);
}

/* Número de la tarjeta (01, 02…) */
body .px-num .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--px-azul);
}

/* --- 5. Chip de icono: rombo claro detrás e icono en degradado (Paycomet) ------------- */
.px-icono {
	position: relative;
	width: 72px !important;
	height: 72px;
	flex: 0 0 auto;
	display: grid !important;
	place-items: center;
}

/* Círculo claro con borde fino (más sobrio que el rombo girado) */
.px-icono::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: #F5F8FE;
	border: 1px solid #E1E8F5;
	transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--px-ease);
}

.px-card:hover .px-icono::after {
	background: #FFFFFF;
	border-color: #C9D7F2;
	transform: scale(1.06);
}

.px-icono .elementor-widget-image,
.px-icono img {
	width: 36px !important;
	height: 36px;
	object-fit: contain;
	max-width: none !important;
}

.px-icono--s {
	width: 56px !important;
	height: 56px;
}

.px-icono--s img {
	width: 26px !important;
	height: 26px;
}

.px-card--tinta .px-icono::after,
.px-card--azul .px-icono::after,
.px-card--cristal .px-icono::after {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Sobre fondo oscuro o azul, el icono en blanco */
.px-card--tinta .px-icono img,
.px-card--azul .px-icono img,
.px-card--cristal .px-icono img {
	filter: brightness(0) invert(1);
}

/* --- 6. Bento (rejilla de 12 columnas con contenedores de Elementor) ------------------- */
.px-bento {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 20px !important;
}

.px-bento > .e-con {
	grid-column: span 4;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.px-bento > .px-b--w3 { grid-column: span 3; }
.px-bento > .px-b--w4 { grid-column: span 4; }
.px-bento > .px-b--w5 { grid-column: span 5; }
.px-bento > .px-b--w6 { grid-column: span 6; }
.px-bento > .px-b--w7 { grid-column: span 7; }
.px-bento > .px-b--w8 { grid-column: span 8; }
.px-bento > .px-b--w12 { grid-column: span 12; }
.px-bento > .px-b--h2 { grid-row: span 2; }

@media (max-width: 1024px) {
	.px-bento {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.px-bento > .e-con,
	.px-bento > .px-b--w3,
	.px-bento > .px-b--w4,
	.px-bento > .px-b--w5 {
		grid-column: span 3;
	}

	.px-bento > .px-b--w6,
	.px-bento > .px-b--w7,
	.px-bento > .px-b--w8,
	.px-bento > .px-b--w12 {
		grid-column: span 6;
	}

	.px-bento > .px-b--h2 {
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.px-bento {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px !important;
	}

	.px-bento > .e-con,
	.px-bento > [class*="px-b--w"] {
		grid-column: 1 / -1;
	}
}

/* Imagen 3D dentro de una celda: abajo a la derecha, flota */
.px-bento__3d {
	position: absolute !important;
	right: -4%;
	bottom: -6%;
	width: 52% !important;
	max-width: 280px;
	z-index: 0;
	pointer-events: none;
}

.px-bento__3d img {
	width: 100%;
	height: auto;
}

.px-card > .elementor-element:not(.px-bento__3d) {
	position: relative;
	z-index: 1;
}

/* --- 7. Imágenes 3D que flotan y se desplazan con el scroll ------------------------------------ */
@keyframes pxFlota {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, -14px, 0) rotate(-1.5deg); }
}

.px-flota img {
	animation: pxFlota 7s ease-in-out infinite;
}

.px-flota--2 img {
	animation-duration: 9s;
	animation-delay: -3s;
}

.px-plx {
	--py: calc((var(--p, 0.5) - 0.5) * var(--pv, -120px));
	transform: translate3d(0, var(--py), 0);
	transition: none !important;
	will-change: transform;
}

.px-plx--lento { --pv: -60px; }
.px-plx--rapido { --pv: -220px; }

/* Foto redondeada con aro y gema que la pisan (BSS Farma) */
.px-foto {
	position: relative;
}

.px-foto img {
	display: block;
	width: 100%;
	border-radius: var(--px-radio-l);
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
}

.px-foto--alta img {
	aspect-ratio: 4 / 4.4;
}

/* --- 8. Cabecera de página interior (px-phero) --------------------------------------------- */
.px-phero {
	min-height: min(72vh, 720px);
}

.px-phero__img img {
	width: 100%;
	max-width: 560px;
	height: auto;
	margin-inline: auto;
	display: block;
	filter: drop-shadow(0 40px 60px rgba(10, 70, 200, 0.25));
}

.px-migas .elementor-heading-title,
.px-migas .elementor-heading-title a {
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 400;
	color: var(--px-suave);
}

.px-migas .elementor-heading-title a:hover {
	color: var(--px-azul);
}

@media (max-width: 1024px) {
	.px-phero {
		min-height: 0;
	}

	.px-phero__img img {
		max-width: 380px;
	}
}

/* --- 9. Píldoras de datos (chips) ----------------------------------------------------------- */
body .px-chips .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body .px-chips .elementor-icon-list-item {
	margin: 0 !important;
	padding: 9px 16px !important;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid var(--px-borde);
	box-shadow: var(--px-sombra-s);
}

body .px-chips .elementor-icon-list-item::after {
	display: none !important;
}

body .px-chips .elementor-icon-list-text {
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 700;
	color: var(--px-tinta);
	padding: 0 !important;
}

body .px-chips .elementor-icon-list-icon {
	display: none;
}

body .px-chips .elementor-icon-list-text::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	border-radius: 2px;
	background: var(--px-grad);
	transform: rotate(45deg) translateY(-1px);
}

/* Lista con check (servicios de cada página) */
body .px-lista .elementor-icon-list-item {
	align-items: flex-start !important;
}

body .px-lista .elementor-icon-list-text {
	font-family: var(--px-f);
	font-size: 16px;
	line-height: 1.55;
	color: var(--px-texto);
}

body .px-lista .elementor-icon-list-icon {
	margin-top: 4px;
}

body .px-lista .elementor-icon-list-icon i,
body .px-lista .elementor-icon-list-icon svg {
	color: var(--px-azul);
	fill: var(--px-azul);
}

/* --- 10. Datos (cifras) --------------------------------------------------------------------- */
body .px-dato .elementor-heading-title {
	font-family: var(--px-f);
	font-size: clamp(40px, 4.6vw, 68px);
	font-weight: 700;
	line-height: 1;
	background: var(--px-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body .px-dato-txt .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--px-suave);
}

/* --- 11. Pila de tarjetas fijas al bajar (cómo trabajamos) ----------------------------------- */
.px-pila {
	gap: 0 !important;
}

.px-pila > .e-con {
	position: sticky;
	top: calc(var(--gdw-header-h, 84px) + 32px + var(--i, 0) * 22px + var(--wp-admin--admin-bar--height, 0px));
	margin-bottom: 28px;
	transform-origin: 50% 0;
	transform: scale(calc(1 - var(--k, 0) * 0.05));
	transition: none !important;
	box-shadow: 0 30px 70px -40px rgba(10, 40, 120, 0.4);
}

.px-pila > .e-con:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.px-pila > .e-con {
		position: relative;
		top: auto;
		transform: none;
		margin-bottom: 14px;
	}
}

body .px-paso .elementor-heading-title {
	font-family: var(--px-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(56px, 6vw, 96px);
	line-height: 1;
	background: var(--px-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-right: 0.08em;
}

/* --- 12. Línea que se llena con el scroll (px-linea) ------------------------------------------ */
.px-linea {
	position: relative;
	padding-left: 44px !important;
}

.px-linea::before,
.px-linea::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 6px;
	width: 2px;
	border-radius: 2px;
}

.px-linea::before {
	bottom: 6px;
	background: var(--px-hielo-2);
}

.px-linea::after {
	height: calc((100% - 12px) * var(--lp, 0));
	background: var(--px-grad);
}

.px-linea > .e-con::before {
	content: "" !important;
	position: absolute !important;
	left: -40px !important;
	top: 8px !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 4px;
	background: #FFFFFF !important;
	border: 2px solid #CFE0FF !important;
	transform: rotate(45deg);
	opacity: 1 !important;
	transition: background-color 0.3s, border-color 0.3s;
}

.px-linea > .e-con.is-on::before {
	background: var(--px-azul) !important;
	border-color: var(--px-azul) !important;
}

.px-linea > .e-con {
	position: relative;
}

/* --- 13. Cinta de áreas (sobre gdw-marquee de la base) ---------------------------------------- */
body .px-cinta .gdw-marquee__item .elementor-heading-title {
	font-family: var(--px-f);
	font-size: clamp(30px, 3.4vw, 52px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--px-tinta);
	white-space: nowrap;
}

body .px-cinta .gdw-marquee__item:nth-child(2n) .elementor-heading-title {
	font-family: var(--px-serif);
	font-style: italic;
	font-weight: 500;
	background: var(--px-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-right: 0.08em;
}

body .px-cinta .gdw-marquee__item .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin: 0 0.7em 0 0.9em;
	vertical-align: 0.18em;
	border-radius: 3px;
	background: var(--px-grad);
	transform: rotate(45deg);
	-webkit-text-fill-color: initial;
}

/* --- 14. Frase grande (px-frase) -------------------------------------------------------------- */
body .px-frase .elementor-heading-title {
	font-family: var(--px-f);
	font-size: clamp(30px, 3.6vw, 54px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--px-tinta);
}

/* --- 15. Acordeón (preguntas) ----------------------------------------------------------------- */
body .px-acordeon .e-n-accordion-item {
	margin-bottom: 12px;
	border: 1px solid var(--px-borde);
	border-radius: 20px;
	background: #FFFFFF;
	overflow: clip;
	transition: border-color 0.3s, box-shadow 0.3s;
}

body .px-acordeon .e-n-accordion-item[open] {
	border-color: #CFE0FF;
	box-shadow: var(--px-sombra-s);
}

body .px-acordeon .e-n-accordion-item-title {
	padding: 22px 26px !important;
	border: 0 !important;
}

body .px-acordeon .e-n-accordion-item-title-text {
	font-family: var(--px-f);
	font-size: 18px;
	font-weight: 700;
	color: var(--px-tinta);
}

body .px-acordeon .e-n-accordion-item > .e-con {
	padding: 0 26px 24px !important;
	border: 0 !important;
}

body .px-acordeon .e-n-accordion-item-title-icon svg {
	fill: var(--px-azul);
}

/* --- 16. Formulario de contacto -------------------------------------------------------------- */
.px-form-caja {
	box-shadow: var(--px-sombra);
}

body .gdw-form input[type="text"],
body .gdw-form input[type="email"],
body .gdw-form input[type="tel"],
body .gdw-form textarea {
	border-radius: 14px !important;
	border: 1px solid var(--px-borde) !important;
	background: #F8FAFF !important;
	font-family: var(--px-f) !important;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

body .gdw-form input:focus,
body .gdw-form textarea:focus {
	border-color: var(--px-azul) !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 4px rgba(10, 92, 255, 0.12) !important;
	outline: none !important;
}

body .gdw-form input[type="submit"],
body .gdw-form .wpcf7-submit {
	border: 0 !important;
	border-radius: 999px !important;
	padding: 16px 30px !important;
	font-family: var(--px-f) !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	background: var(--px-azul) !important;
	background-image: var(--px-grad) !important;
	box-shadow: 0 14px 30px -12px rgba(10, 92, 255, 0.6);
	cursor: pointer;
}

body .gdw-form a {
	color: var(--px-azul);
}

/* --- 17. Páginas legales --------------------------------------------------------------------- */
.gdw-legal h2,
.gdw-legal h3 {
	color: var(--px-tinta);
}

.gdw-legal a {
	color: var(--px-azul);
}
/* <<< fin PX 10-piezas.css */

/* >>> PX 20-paginas.css */
/* ==========================================================================
   Pentax Asesores · 20 · piezas de las páginas (portada, interiores, blog, contacto)
   ========================================================================== */

/* --- 1. Portada: hero con la gema y tarjetas de interfaz que flotan (Holded) ---- */
.px-home-hero__visual {
	position: relative;
	min-height: 520px;
	justify-content: center;
}

.px-home-hero__gema {
	width: 100% !important;
	max-width: 560px;
}

.px-home-hero__gema img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 50px 70px rgba(10, 70, 220, 0.3));
}

.px-mini {
	position: absolute !important;
	width: 260px !important;
	display: grid !important;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px !important;
	row-gap: 2px !important;
	background: rgba(255, 255, 255, 0.86) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-radius: 20px !important;
	box-shadow: 0 24px 50px -24px rgba(10, 50, 160, 0.45) !important;
	z-index: 3;
}

body .px-mini__t .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 700;
	color: var(--px-tinta);
}

body .px-mini__d .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13px;
	line-height: 1.4;
	color: var(--px-suave);
}

.px-mini--1 { left: -4%; top: 8%; }
.px-mini--2 { right: -6%; top: 42%; }
.px-mini--3 { left: 6%; bottom: 2%; }

/* Icono a la izquierda y los dos textos a su derecha */
.px-mini > .px-icono {
	grid-row: 1 / span 2;
}

.px-mini > .elementor-widget-heading {
	width: auto !important;
	align-self: end;
}

.px-mini > .px-mini__d {
	align-self: start;
}

@media (max-width: 1024px) {
	.px-home-hero__visual {
		min-height: 440px;
	}

	.px-home-hero__gema {
		max-width: 420px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.px-home-hero__visual {
		min-height: 0;
	}

	.px-mini {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		margin-top: 10px;
	}

	.px-mini--2,
	.px-mini--3 {
		display: none !important;
	}
}

/* Portada: foto del despacho con la escena 3D del equipo encima */
.px-home-despacho__foto {
	position: relative;
}

.px-home-despacho__3d {
	position: absolute !important;
	right: -8%;
	bottom: -10%;
	width: 46% !important;
	max-width: 280px;
	z-index: 2;
}

.px-home-despacho__3d img {
	width: 100%;
	filter: drop-shadow(0 30px 40px rgba(10, 70, 220, 0.3));
}

@media (max-width: 1024px) {
	.px-home-despacho__3d {
		width: 34% !important;
		right: -2%;
		bottom: -8%;
	}

	.px-home-despacho__texto {
		margin-top: 24px;
	}
}

.px-datos {
	flex-wrap: wrap !important;
}

.px-datos > .e-con {
	flex: 1 1 140px;
	padding-top: 18px !important;
	border-top: 2px solid var(--px-hielo-2);
}

@media (max-width: 1024px) {
	.px-datos {
		flex-direction: row !important;
	}
}

/* --- 2. Bento de servicios: tarjetas grandes con objeto 3D ------------------------------------ */
.px-bento__grande {
	min-height: 420px;
	justify-content: flex-start;
}

.px-bento__grande .px-bento__3d {
	width: 46% !important;
	max-width: 300px;
	right: -2%;
	bottom: -4%;
}

.px-card--tinta .px-bento__3d img,
.px-card--azul .px-bento__3d img {
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.px-card .px-bento__3d img {
	transition: transform 0.8s var(--px-ease);
}

.px-card:hover .px-bento__3d img {
	transform: translate3d(-6px, -10px, 0) rotate(-3deg) scale(1.03);
}

body .px-lista--enlaces .elementor-icon-list-text {
	font-weight: 700;
	color: var(--px-tinta);
	transition: color 0.2s;
}

body .px-lista--enlaces a:hover .elementor-icon-list-text {
	color: var(--px-azul);
}

body .px-lista--claro .elementor-icon-list-text {
	color: #FFFFFF;
}

body .px-lista--claro .elementor-icon-list-icon i,
body .px-lista--claro .elementor-icon-list-icon svg {
	color: #6FE0FF;
	fill: #6FE0FF;
}

body .px-lista--claro a:hover .elementor-icon-list-text {
	color: #9CC3FF;
}

body .px-link--claro .elementor-heading-title,
body .px-link--claro .elementor-heading-title a {
	color: #9CC3FF;
}

@media (max-width: 767px) {
	.px-bento__grande {
		min-height: 0;
		padding-bottom: 180px !important;
	}

	.px-bento__grande .px-bento__3d {
		width: 52% !important;
		max-width: 200px;
	}
}

/* --- 3. Columna fija (cómo trabajamos) y pila ----------------------------------------------- */
@media (min-width: 1025px) {
	.px-fija {
		position: sticky !important;
		top: calc(var(--gdw-header-h, 84px) + 48px + var(--wp-admin--admin-bar--height, 0px));
		align-self: flex-start;
	}
}

.px-paso__fila {
	flex-direction: row !important;
	align-items: center !important;
}

.px-pila__item {
	min-height: 300px;
}

/* --- 4. Panel oscuro de Due Diligence: tarjetas de cristal ---------------------------------- */
.px-card--cristal {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.px-card--cristal:hover {
	border-color: rgba(156, 195, 255, 0.4) !important;
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.5);
}

.px-card--cristal .px-icono::after {
	background: rgba(255, 255, 255, 0.12);
}

.px-due__fila {
	flex-direction: row !important;
	align-items: flex-start !important;
}

/* Botón de contorno sobre fondo oscuro o azul */
body .px-btn--linea-claro .elementor-button {
	color: #FFFFFF;
	background: transparent;
	background-image: none;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

body .px-btn--linea-claro .elementor-button:hover,
body .px-btn--linea-claro .elementor-button:focus-visible {
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1.5px #FFFFFF;
}

/* --- 5. Franja final (panel azul) ----------------------------------------------------------- */
.px-cta__panel {
	overflow: visible !important;
}

.px-cta__img img {
	width: 100%;
	max-width: 340px;
	filter: drop-shadow(0 40px 60px rgba(0, 20, 90, 0.45));
}

.px-cta__panel > .px-deco {
	border-radius: inherit;
	overflow: clip;
}

@media (max-width: 1024px) {
	.px-cta__img img {
		max-width: 220px;
	}
}

/* --- 6. Interiores ------------------------------------------------------------------------------ */
.px-phero--compacta {
	min-height: 0;
}

.px-phero--compacta .px-phero__img img {
	max-width: 400px;
}

.px-historia__foto {
	position: relative;
}

.px-historia__foto::after {
	content: "";
	position: absolute;
	right: -22px;
	top: -22px;
	width: 74px;
	height: 74px;
	z-index: 2;
	background: conic-gradient(from 45deg at 50% 50%, #DCE6F5 0 25%, #1B3A8F 0 50%, #16295E 0 75%, #B9CBEA 0);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -80px), 0);
}

.px-punto {
	height: 100%;
}

body .px-nota,
body .px-nota p {
	font-size: 15px;
	color: var(--px-suave);
}

.px-cabeza {
	max-width: 860px;
}

/* Cabecera centrada (flex_align_items: center en el contenedor) */
.px-sec > .e-con-inner > .px-cabeza:has(> .elementor-widget-heading.elementor-align-center),
.px-cabeza--centro {
	max-width: none;
}

/* --- 7. Contacto ---------------------------------------------------------------------------------- */
body .px-contacto__dato .elementor-heading-title,
body .px-contacto__dato .elementor-heading-title a {
	font-family: var(--px-f);
	font-size: 19px;
	font-weight: 700;
	color: var(--px-azul);
	word-break: break-word;
}

.px-contacto-datos .px-card {
	flex-direction: column;
}

/* --- 8. Blog (Essential Addons): tarjetas redondeadas -------------------------------------------- */
.px-blog .eael-grid-post-holder {
	border: 1px solid var(--px-borde) !important;
	border-radius: var(--px-radio) !important;
	overflow: hidden;
	background: #FFFFFF !important;
	transition: transform 0.45s var(--px-ease), box-shadow 0.45s var(--px-ease), border-color 0.3s;
}

.px-blog .eael-grid-post-holder:hover {
	transform: translateY(-6px);
	border-color: #CFE0FF !important;
	box-shadow: var(--px-sombra);
}

.px-blog .eael-entry-wrapper {
	padding: 26px 28px 30px !important;
}

.px-blog .eael-entry-title,
.px-blog .eael-entry-title a {
	font-family: var(--px-f) !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--px-tinta) !important;
}

.px-blog .eael-entry-title a:hover {
	color: var(--px-azul) !important;
}

.px-blog .eael-grid-post-excerpt p {
	font-family: var(--px-f) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--px-texto) !important;
}

.px-blog .eael-post-elements-readmore-btn {
	font-family: var(--px-f) !important;
	font-weight: 700 !important;
	color: var(--px-azul) !important;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}

.px-blog .eael-entry-meta,
.px-blog .eael-entry-meta * {
	font-family: var(--px-f) !important;
	color: var(--px-suave) !important;
}

.px-blog .eael-load-more-button {
	border-radius: 999px !important;
	background: var(--px-azul) !important;
	background-image: var(--px-grad) !important;
	font-family: var(--px-f) !important;
	font-weight: 700 !important;
}

/* --- 9. Entradas del blog (plantilla de Astra) --------------------------------------------- */
.single-post .entry-title {
	font-family: var(--px-f);
	font-weight: 700;
}

.single-post .entry-content p,
.single-post .entry-content li {
	font-family: var(--px-f);
	font-size: 18px;
	line-height: 1.75;
	color: var(--px-texto);
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
	color: var(--px-tinta);
}

.single-post .entry-content a {
	color: var(--px-azul);
}
/* <<< fin PX 20-paginas.css */

/* >>> PX 30-cabecera-pie.css */
/* ==========================================================================
   Pentax Asesores · 30 · cabecera (21) y pie (37) de Ultimate Addons
   ========================================================================== */

/* --- 1. Cabecera: blanca translúcida, con desenfoque, y borde al bajar -------- */
#masthead .gdw-header__bar {
	background: rgba(255, 255, 255, 0.82) !important;
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	border-bottom: 1px solid transparent !important;
	transition: border-color 0.3s, box-shadow 0.3s, padding 0.3s;
}

body.gdw-is-scrolled #masthead {
	box-shadow: none;
}

body.gdw-is-scrolled #masthead .gdw-header__bar {
	border-bottom-color: var(--px-borde) !important;
	box-shadow: 0 10px 30px -20px rgba(11, 23, 54, 0.25);
}

#masthead .px-header__logo img {
	display: block;
	width: 190px;
	height: auto;
}

@media (max-width: 767px) {
	#masthead .px-header__logo img {
		width: 150px;
	}
}

/* Menú de escritorio. Ultimate Addons envuelve los elementos con submenú en
   .hfe-has-submenu-container: los estilos van a los dos casos (si no, «Servicios» sale descolgado) */
#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li > a.hfe-menu-item,
#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px !important;
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	color: var(--px-tinta) !important;
	border-radius: 999px;
	transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li a.hfe-menu-item::before,
#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li a.hfe-menu-item::after {
	display: none !important;
}

#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li .hfe-has-submenu-container {
	display: flex;
	align-items: center;
}

#masthead .gdw-header__nav--desktop ul.hfe-nav-menu .sub-arrow {
	display: inline-flex;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 11px;
	transition: transform 0.3s var(--px-ease);
}

#masthead .gdw-header__nav--desktop li.px-mega-abierto .sub-arrow {
	transform: rotate(180deg);
}

/* Submenús normales (si algún elemento los tiene) en tarjeta */
#masthead .gdw-header__nav--desktop .sub-menu {
	min-width: 290px !important;
	padding: 10px !important;
	border: 1px solid var(--px-borde) !important;
	border-radius: 20px !important;
	background: #FFFFFF !important;
	box-shadow: 0 30px 60px -24px rgba(11, 40, 120, 0.3) !important;
}

#masthead .gdw-header__nav--desktop .sub-menu li {
	border: 0 !important;
}

#masthead .gdw-header__nav--desktop .sub-menu a.hfe-sub-menu-item {
	padding: 11px 14px !important;
	border-radius: 12px;
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 400;
	color: var(--px-tinta) !important;
	background: transparent !important;
}

#masthead .gdw-header__nav--desktop .sub-menu a.hfe-sub-menu-item:hover {
	color: var(--px-azul) !important;
	background: var(--px-hielo) !important;
}

/* Menú en una píldora clara: solo la lista, ajustada a su contenido */
@media (min-width: 1025px) {
	#masthead .gdw-header__nav--desktop nav,
	#masthead .gdw-header__nav--desktop .hfe-nav-menu__layout-horizontal {
		display: flex;
		justify-content: flex-end;
	}

	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu {
		display: inline-flex !important;
		align-items: center;
		width: auto !important;
		gap: 2px;
		padding: 4px;
		border: 1px solid var(--px-borde);
		border-radius: 999px;
		background: rgba(243, 247, 255, 0.75);
	}

	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li {
		display: flex;
		align-items: center;
		margin: 0 !important;
	}

	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li > a.hfe-menu-item:hover,
	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item:hover,
	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li.current-menu-item > .hfe-has-submenu-container > a.hfe-menu-item,
	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
	#masthead .gdw-header__nav--desktop ul.hfe-nav-menu > li.px-mega-abierto > .hfe-has-submenu-container > a.hfe-menu-item {
		color: var(--px-azul) !important;
		background: #FFFFFF;
		box-shadow: 0 4px 14px -6px rgba(11, 40, 120, 0.25);
	}
}
/* --- Megamenú de Servicios ---------------------------------------------------- */
#masthead .gdw-header__bar {
	position: relative;
}

.px-con-mega #masthead .gdw-header__nav--desktop li.px-has-mega > .sub-menu {
	display: none !important;
}

/* La posición la calcula 30-cabecera.js: el panel queda bajo «Servicios» (--px-mega-x) y la
   pestaña de arriba apunta a él (--px-mega-nx) */
#masthead .px-mega {
	position: absolute !important;
	left: var(--px-mega-x, 0px);
	top: calc(100% + 8px);
	width: min(1080px, calc(100vw - 64px)) !important;
	z-index: 1000;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 1.05fr;
	gap: 8px !important;
	background: #FFFFFF;
	border: 1px solid var(--px-borde);
	border-radius: 28px;
	box-shadow: 0 40px 80px -30px rgba(11, 30, 90, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 10px, 0);
	transition: opacity 0.25s ease, transform 0.35s var(--px-ease), visibility 0s linear 0.35s;
}

#masthead .px-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	transition: opacity 0.25s ease, transform 0.35s var(--px-ease), visibility 0s;
}

/* Pestaña que señala «Servicios» */
#masthead .px-mega::after {
	content: "" !important;
	position: absolute !important;
	top: -8px !important;
	left: var(--px-mega-nx, 50%) !important;
	width: 16px !important;
	height: 16px !important;
	opacity: 1 !important;
	background: #FFFFFF !important;
	border-left: 1px solid var(--px-borde) !important;
	border-top: 1px solid var(--px-borde) !important;
	border-radius: 4px 0 0 0;
	transform: translateX(-50%) rotate(45deg);
}

/* Puente invisible entre el menú y el panel, para que no se cierre al bajar el ratón */
#masthead .px-mega::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: -14px !important;
	height: 14px !important;
	width: auto !important;
	opacity: 1 !important;
	background: transparent !important;
	border: 0 !important;
}

@media (max-width: 1024px) {
	#masthead .px-mega {
		display: none !important;
	}
}

body.elementor-editor-active #masthead .px-mega {
	position: relative !important;
	left: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
}

body .px-mega__titulo .elementor-heading-title {
	padding: 10px 12px 6px;
	font-family: var(--px-f);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--px-suave);
}

.px-mega__item {
	border-radius: 16px;
	transition: background-color 0.2s;
}

.px-mega__item:hover,
.px-mega__item:focus-visible {
	background: var(--px-hielo);
}

body .px-mega__t .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--px-tinta);
}

body .px-mega__item:hover .px-mega__t .elementor-heading-title {
	color: var(--px-azul);
}

body .px-mega__d .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--px-suave);
}

.px-mega__destacado {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: radial-gradient(120% 100% at 100% 0%, #24418F 0%, #0B1736 70%);
}

.px-mega__img {
	position: absolute !important;
	right: -10px;
	top: -6px;
	width: 62% !important;
	opacity: 0.95;
}

.px-mega__img img {
	width: 100%;
	height: auto;
}

body .px-mega__dt .elementor-heading-title {
	position: relative;
	font-family: var(--px-f);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF;
}

body .px-mega__dt em {
	font-family: var(--px-serif);
	font-style: italic;
	font-weight: 500;
	color: #B9D0FF;
}

body .px-mega__dd .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

/* Botón de la cabecera */
#masthead .px-header__cta .elementor-button {
	padding: 13px 22px;
	font-size: 15px;
}

@media (max-width: 1024px) {
	#masthead .px-header__cta {
		display: none;
	}
}

/* Menú móvil lateral */
#masthead .gdw-header__nav--mobile .hfe-nav-menu-icon svg,
#masthead .gdw-header__nav--mobile .hfe-nav-menu__toggle {
	color: var(--px-tinta);
	fill: var(--px-tinta);
}

#masthead .hfe-flyout-content {
	background: #FFFFFF !important;
	background-image: radial-gradient(90% 50% at 100% 0%, #E6EFFF 0%, transparent 70%) !important;
}

#masthead .hfe-flyout-content a.hfe-menu-item,
#masthead .hfe-flyout-content a.hfe-sub-menu-item {
	font-family: var(--px-f);
	font-weight: 700;
	color: var(--px-tinta) !important;
}

#masthead .hfe-flyout-content a.hfe-sub-menu-item {
	font-weight: 400;
}

#masthead .hfe-flyout-content a:hover,
#masthead .hfe-flyout-content .current-menu-item > a {
	color: var(--px-azul) !important;
}

/* --- 2. Pie ------------------------------------------------------------------------ */
.px-footer {
	position: relative;
	overflow: clip;
	isolation: isolate;
	background: radial-gradient(90% 120% at 100% 0%, #16307A 0%, #0B1736 48%, #070F26 100%) !important;
}

/* Facetas del diamante del logo en la esquina (en azules muy apagados) */
.px-footer::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -120px;
	top: -140px;
	width: 520px;
	aspect-ratio: 1;
	background: conic-gradient(from 45deg at 50% 50%, rgba(61, 139, 255, 0.22) 0 25%, rgba(10, 92, 255, 0.16) 0 50%, rgba(58, 63, 184, 0.2) 0 75%, rgba(34, 195, 245, 0.14) 0);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

body .px-footer .px-footer__logo img {
	display: block;
	width: 210px !important;
	max-width: 100%;
	height: auto !important;
}

body .px-footer .px-footer__lema .elementor-heading-title {
	font-size: clamp(30px, 3vw, 44px);
	line-height: 1.15;
	color: #FFFFFF;
}

body .px-footer .px-footer__lema .elementor-heading-title em {
	color: #9CC3FF;
	background: linear-gradient(120deg, #9CC3FF 0%, #6FE0FF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body .px-footer .px-footer__titulo .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9CC3FF;
}

body .px-footer .px-footer__txt,
body .px-footer .px-footer__txt p {
	font-family: var(--px-f);
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
}

body .px-footer .elementor-icon-list-text {
	font-family: var(--px-f);
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	transition: color 0.2s;
}

body .px-footer a:hover .elementor-icon-list-text {
	color: #FFFFFF;
}

body .px-footer .elementor-icon-list-icon i,
body .px-footer .elementor-icon-list-icon svg {
	color: #6FB0FF;
	fill: #6FB0FF;
}

.px-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body .px-footer .hfe-copyright-wrapper,
body .px-footer .hfe-copyright-wrapper a,
body .px-footer .px-footer__legal a.hfe-menu-item {
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6) !important;
}

body .px-footer .px-footer__legal a.hfe-menu-item:hover {
	color: #FFFFFF !important;
}

body .px-footer .px-footer__legal a.hfe-menu-item::before,
body .px-footer .px-footer__legal a.hfe-menu-item::after {
	display: none !important;
}

/* --- 3. Botón de WhatsApp (GDW WhatsApp) en el azul de la marca --------------------------- */
.gdw-wa__bubble,
.gdw-whatsapp__bubble {
	font-family: var(--px-f) !important;
}

/* --- Arreglo de entrega (20-10-2026): el menú móvil no se veía al abrirlo. Un `backdrop-filter` en la
   barra la convierte en el marco de referencia de los elementos `position: fixed` que lleva dentro, y
   el panel lateral del menú (fijo) quedaba encerrado en la altura de la cabecera. El cristal pasa a
   una capa propia (::after) y la barra queda sin filtro. */
#masthead .gdw-header__bar {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	isolation: isolate;
}

#masthead .gdw-header__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	backdrop-filter: saturate(1.6) blur(16px);
	pointer-events: none;
}
/* <<< fin PX 30-cabecera-pie.css */

/* >>> PX 40-wow.css */
/* ==========================================================================
   Pentax Asesores · 40 · segunda versión (19-10-2026, Mario: «más dinámica… efecto WOW… te ayudamos
   ahora… contacto directo por WhatsApp… fotos frías: hazlo por programación»)
   1. Botones de WhatsApp y «Te atendemos por WhatsApp»   2. Chat de WhatsApp simulado (portada)
   3. Escena del diamante con parallax (portada)            4. Escenas de interfaz (en lugar de fotos)
   5. Franja «Te ayudamos ahora»                            6. Frase que se ilumina con el scroll
   ========================================================================== */

:root {
	--px-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C8.8 3 3 8.7 3 15.8c0 2.5.7 4.9 2 7L3 29l6.4-2c2 1.1 4.3 1.6 6.6 1.6 7.2 0 13-5.7 13-12.8S23.2 3 16 3zm0 23.4c-2 0-4-.5-5.7-1.6l-.4-.2-3.8 1.2 1.2-3.7-.3-.4a10.4 10.4 0 0 1-1.6-5.5C5.4 10 10.2 5.3 16 5.3S26.6 10 26.6 15.8 21.8 26.4 16 26.4zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.7l.5-.6.3-.5c.1-.2 0-.4 0-.6l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.5 5.6 4.9 2.8 1.1 3.3.9 3.9.8.6-.1 1.9-.8 2.2-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E");
}

/* --- 1. Botones de WhatsApp ---------------------------------------------------- */
body .px-btn--wa .elementor-button-text::after {
	display: none;
}

body .px-btn--wa .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	line-height: 1;
}

body .px-btn--wa .elementor-button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

body .px-btn--wa .elementor-button-content-wrapper {
	align-items: center;
	gap: 10px;
}

/* Píldora con punto verde que late */
body .px-vivo .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 12px;
	border-radius: 999px;
	background: #ECFAF1;
	border: 1px solid #CDEFD9;
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: #12703A;
}

body .px-vivo .elementor-heading-title::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	background: #22C55E;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
	animation: pxLate 1.8s ease-out infinite;
}

@keyframes pxLate {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
	80%, 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}

body .px-panel--tinta .px-vivo .elementor-heading-title {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.3);
	color: #9BE8B8;
}

/* --- 2. Chat de WhatsApp simulado ------------------------------------------------- */
.px-home-hero__visual {
	position: relative;
	min-height: 600px;
}

.px-home-hero__gema {
	position: absolute !important;
	right: -12%;
	top: 4%;
	width: 78% !important;
	max-width: 520px;
	opacity: 0.9;
	z-index: 0;
}

.px-chat-w {
	position: relative;
	z-index: 2;
	width: 100%;
}

.px-chat {
	position: relative;
	width: 100%;
	max-width: 390px;
	margin-inline: auto;
}

.px-chat__movil {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 34px;
	border: 8px solid #0B1736;
	background: #EFE7DD;
	box-shadow: 0 50px 90px -40px rgba(11, 30, 90, 0.55), 0 0 0 1px rgba(11, 23, 54, 0.08);
	font-family: var(--px-f);
	transform: rotate(-1.5deg);
	transition: transform 0.6s var(--px-ease);
}

.px-chat:hover .px-chat__movil {
	transform: rotate(0deg) translateY(-4px);
}

.px-chat__barra {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: #0B1736;
	color: #FFFFFF;
}

.px-chat__avatar {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: #FFFFFF;
	position: relative;
}

.px-chat__avatar::after {
	content: "";
	position: absolute;
	inset: 8px 7px 7px;
	background: conic-gradient(from 45deg at 50% 50%, #99BFE5 0 25%, #035CBF 0 50%, #32338C 0 75%, #0336A8 0);
	clip-path: polygon(22% 0, 78% 0, 100% 35%, 50% 100%, 0 35%);
}

.px-chat__quien {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.px-chat__quien strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.px-chat__estado {
	font-size: 12px;
	line-height: 1.2;
	color: #9BE8B8;
}

.px-chat__icono-wa {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: #25D366;
	-webkit-mask: var(--px-wa) center / contain no-repeat;
	mask: var(--px-wa) center / contain no-repeat;
}

.px-chat__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 300px;
	padding: 14px 12px;
	overflow-y: auto;
	scroll-behavior: smooth;
	background-color: #EFE7DD;
	background-image: radial-gradient(rgba(11, 23, 54, 0.05) 1px, transparent 1.2px);
	background-size: 16px 16px;
}

.px-chat__fecha {
	align-self: center;
	margin-bottom: 4px;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.85);
	font-size: 11px;
	font-weight: 700;
	color: #54656F;
}

.px-chat__msg {
	position: relative;
	max-width: 84%;
	padding: 8px 12px 18px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.42;
	color: #111B21;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	animation: pxMsg 0.38s var(--px-ease) both;
}

.px-chat__msg--yo {
	align-self: flex-end;
	background: #D9FDD3;
	border-top-right-radius: 4px;
}

.px-chat__msg--el {
	align-self: flex-start;
	background: #FFFFFF;
	border-top-left-radius: 4px;
}

.px-chat__hora {
	position: absolute;
	right: 9px;
	bottom: 4px;
	font-size: 10.5px;
	color: #667781;
}

.px-chat__msg--yo .px-chat__hora::after {
	content: " ✓✓";
	color: #8696A0;
	transition: color 0.4s;
}

.px-chat__msg--yo.is-leido .px-chat__hora::after {
	color: #53BDEB;
}

@keyframes pxMsg {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

.px-chat__escribiendo {
	align-self: flex-start;
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 12px;
	border-top-left-radius: 4px;
	background: #FFFFFF;
	box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
	animation: pxMsg 0.3s var(--px-ease) both;
}

.px-chat__escribiendo i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8696A0;
	animation: pxPunto 1.1s infinite ease-in-out;
}

.px-chat__escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.px-chat__escribiendo i:nth-child(3) { animation-delay: 0.3s; }

@keyframes pxPunto {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-5px); opacity: 1; }
}

.px-chat__pie {
	padding: 14px 14px 16px;
	background: #FFFFFF;
	border-top: 1px solid #E9EDEF;
}

.px-chat__pregunta {
	margin: 0 0 10px !important;
	font-size: 13px !important;
	font-weight: 700;
	color: var(--px-tinta);
}

.px-chat__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.px-chat__op {
	padding: 7px 11px !important;
	border: 1px solid var(--px-borde) !important;
	border-radius: 999px !important;
	background: #F6F8FC !important;
	box-shadow: none !important;
	font-family: var(--px-f) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--px-tinta) !important;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
}

.px-chat__op:hover,
.px-chat__op:focus-visible {
	border-color: var(--px-azul) !important;
	color: var(--px-azul) !important;
	background: #FFFFFF !important;
	transform: translateY(-1px);
}

.px-chat__op.is-activa {
	border-color: var(--px-azul) !important;
	background: var(--px-azul) !important;
	color: #FFFFFF !important;
}

.px-chat__ir {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 16px;
	border-radius: 999px;
	background: #15803D;
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 12px 26px -12px rgba(21, 128, 61, 0.7);
	transition: background-color 0.2s, transform 0.2s;
}

.px-chat__ir::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--px-wa) center / contain no-repeat;
	mask: var(--px-wa) center / contain no-repeat;
}

.px-chat__ir:hover {
	background: #116B33;
	transform: translateY(-1px);
}

.px-chat__ir.is-latido {
	animation: pxLatido 1.6s ease-in-out 2;
}

@keyframes pxLatido {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

.px-chat__nota {
	margin: 14px 0 0 !important;
	text-align: center;
	font-size: 12px !important;
	color: var(--px-suave);
}

@media (max-width: 1024px) {
	.px-home-hero__visual {
		min-height: 0;
		padding-top: 10px;
	}

	.px-home-hero__gema {
		right: -20%;
		top: -6%;
		width: 70% !important;
		opacity: 0.5;
	}
}

@media (max-width: 767px) {
	.px-chat__cuerpo {
		height: 270px;
	}

	.px-chat__movil {
		transform: none;
		border-width: 6px;
		border-radius: 28px;
	}
}

/* --- 3. Escena del diamante (portada) ------------------------------------------------------- */
.px-escena {
	--q: 0;
	--t1: clamp(0, calc(var(--q) / 0.28), 1);
	--t2: clamp(0, calc((var(--q) - 0.3) / 0.32), 1);
	--t3: clamp(0, calc((var(--q) - 0.6) / 0.28), 1);
	padding: 0 !important;
}

.px-escena__marco {
	position: relative;
	display: grid !important;
	grid-template: 1fr / 1fr;
	place-items: center;
	overflow: hidden;
	background: #FFFFFF;
}

.px-escena__marco > .e-con,
.px-escena__marco > .elementor-element {
	grid-area: 1 / 1;
}

.px-escena__capas {
	position: absolute !important;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.px-escena__obj {
	position: absolute !important;
	left: 50%;
	top: 50%;
	width: var(--w, 13vw) !important;
	max-width: 230px;
	will-change: transform;
	transition: none !important;
	transform:
		translate(-50%, -50%)
		translate3d(
			calc(var(--x0) * (1 - var(--t1)) + var(--x1) * var(--t1) + var(--x2) * var(--t2)),
			calc(var(--y0) * (1 - var(--t1)) + var(--y1) * var(--t1) + var(--y2) * var(--t2)),
			0)
		rotate(calc(var(--r0, 20deg) * (1 - var(--t1)) + var(--r2, 0deg) * var(--t2)))
		scale(calc(0.7 + 0.3 * var(--t1) + var(--s2, 0.8) * var(--t2)));
}

.px-escena__obj img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 40px rgba(11, 30, 90, 0.18));
}

.px-escena__obj--1 { --x0: -56vw; --y0: -36vh; --x1: -34vw; --y1: -25vh; --x2: -26vw; --y2: -30vh; --r0: -30deg; }
.px-escena__obj--2 { --x0: 56vw; --y0: -40vh; --x1: 33vw; --y1: -27vh; --x2: 26vw; --y2: -30vh; --r0: 28deg; }
.px-escena__obj--3 { --x0: -58vw; --y0: 36vh; --x1: -36vw; --y1: 22vh; --x2: -28vw; --y2: 34vh; --r0: 24deg; }
.px-escena__obj--4 { --x0: 58vw; --y0: 40vh; --x1: 35vw; --y1: 23vh; --x2: 28vw; --y2: 34vh; --r0: -26deg; }
.px-escena__obj--5 { --x0: -12vw; --y0: 58vh; --x1: -16vw; --y1: 34vh; --x2: -10vw; --y2: 40vh; --r0: 40deg; --w: 10vw; }
.px-escena__obj--6 { --x0: 16vw; --y0: -60vh; --x1: 15vw; --y1: -36vh; --x2: 10vw; --y2: -40vh; --r0: -40deg; --w: 10vw; }
.px-escena__obj--7 { --x0: 0vw; --y0: 70vh; --x1: 0vw; --y1: 0vh; --x2: 0vw; --y2: 0vh; --r0: 0deg; --w: 22vw; --s2: 6; z-index: -1; opacity: 0.16; }

.px-escena__intro {
	position: relative;
	z-index: 2;
	max-width: 1000px;
	padding: 0 24px !important;
	opacity: clamp(0, calc(var(--t1) * 2 - var(--t2) * 2.2), 1);
	transform: translate3d(0, calc((1 - var(--t1)) * 50px), 0) scale(calc(1 - var(--t2) * 0.12));
	transition: none !important;
}

body .px-escena__pista .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--px-suave);
}

body .px-escena__pista .elementor-heading-title::after {
	content: "";
	display: block;
	width: 2px;
	height: 34px;
	margin: 12px auto 0;
	background: linear-gradient(var(--px-azul), transparent);
	animation: pxPista 1.6s ease-in-out infinite;
	transform-origin: top;
}

@keyframes pxPista {
	0% { transform: scaleY(0); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* El panel con forma de diamante (como el del logo) que se abre hasta llenar la pantalla */
.px-escena__panel {
	--r: calc(var(--t2) * 135vmax);
	position: absolute !important;
	inset: 0;
	z-index: 3;
	background:
		radial-gradient(60% 50% at 50% 0%, rgba(47, 91, 211, 0.35) 0%, transparent 70%),
		radial-gradient(90% 120% at 100% 100%, #16307A 0%, #0B1736 55%, #070F26 100%) !important;
	clip-path: polygon(
		calc(50% - var(--r) * 0.6) calc(50% - var(--r) * 0.48),
		calc(50% + var(--r) * 0.6) calc(50% - var(--r) * 0.48),
		calc(50% + var(--r)) calc(50% - var(--r) * 0.06),
		50% calc(50% + var(--r)),
		calc(50% - var(--r)) calc(50% - var(--r) * 0.06));
}

/* Diamante facetado muy tenue detrás de las tarjetas, que gira un poco con el scroll */
.px-escena__panel::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	z-index: -1 !important;
	width: min(110vh, 1000px) !important;
	height: auto !important;
	aspect-ratio: 1;
	opacity: 1 !important;
	background: conic-gradient(from 45deg at 50% 50%, rgba(153, 191, 229, 0.10) 0 25%, rgba(3, 92, 191, 0.12) 0 50%, rgba(50, 51, 140, 0.16) 0 75%, rgba(3, 54, 168, 0.12) 0) !important;
	clip-path: polygon(22% 0, 78% 0, 100% 35%, 50% 100%, 0 35%);
	transform: translate(-50%, -50%) rotate(calc((var(--t3) - 1) * 12deg)) scale(calc(0.9 + var(--t3) * 0.1));
	pointer-events: none;
}

.px-escena__panel {
	isolation: isolate;
}

.px-escena__panel > .elementor-element,
.px-escena__panel > .e-con {
	opacity: var(--t3);
	transform: translate3d(0, calc((1 - var(--t3)) * 60px), 0);
	transition: none !important;
}

.px-escena__tarjetas {
	width: min(1320px, 100%) !important;
}

.px-escena__tarjeta {
	flex: 1 1 0 !important;
	min-width: 0;
}

.px-escena__tarjeta .px-text,
.px-escena__tarjeta .px-text p {
	font-size: 15px;
	line-height: 1.55;
}

/* Las tarjetas suben una detrás de otra */
.px-escena__tarjetas > .px-escena__tarjeta {
	--k: clamp(0, calc(var(--t3) * 1.8 - var(--n, 0) * 0.18), 1);
	opacity: var(--k);
	transform: translate3d(0, calc((1 - var(--k)) * 70px), 0);
	transition: none !important;
}

.px-escena__tarjeta--1 { --n: 0; }
.px-escena__tarjeta--2 { --n: 1; }
.px-escena__tarjeta--3 { --n: 2; }
.px-escena__tarjeta--4 { --n: 3; }
.px-escena__tarjeta--5 { --n: 4; }

/* Solo en escritorio y con movimiento: la escena se queda fija mientras dura (360vh) */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	.px-sec.px-escena {
		height: 360vh;
	}

	.px-sec.px-escena > .px-escena__marco {
		position: sticky !important;
		top: 0;
		height: 100vh;
		z-index: 2;
	}

	.admin-bar .px-sec.px-escena > .px-escena__marco {
		top: 32px;
		height: calc(100vh - 32px);
	}
}

/* Tablet, móvil y «reducir movimiento»: sin fijar, el panel en bloque */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
	.px-escena {
		--t1: 1;
		--t2: 1;
		--t3: 1;
	}

	.px-escena__marco {
		display: flex !important;
		flex-direction: column;
		gap: 0;
		overflow: visible;
	}

	.px-escena__capas {
		display: none !important;
	}

	.px-escena__intro {
		opacity: 1;
		transform: none;
		padding: 90px 16px 40px !important;
	}

	.px-escena__pista {
		display: none;
	}

	.px-escena__panel {
		position: relative !important;
		inset: auto;
		clip-path: none;
		width: calc(100% - 32px) !important;
		margin: 0 16px 40px;
		border-radius: 32px;
	}

	.px-escena__tarjetas {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px !important;
	}
}

@media (max-width: 767px) {
	.px-escena__tarjetas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 4. Escenas de interfaz (en lugar de fotos) ------------------------------------------- */
.px-ui {
	position: relative;
	padding: 112px 34px 156px !important;
	isolation: isolate;
	min-height: 480px;
	justify-content: center;
}

/* Fondo cálido: crema, melocotón y un azul muy suave */
.px-ui::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	border-radius: 40px;
	background:
		radial-gradient(55% 55% at 22% 18%, #FFE3C8 0%, transparent 70%),
		radial-gradient(60% 60% at 85% 85%, #D9E6FF 0%, transparent 70%),
		#FBF6F0 !important;
	opacity: 1 !important;
}

.px-ui__card {
	position: relative;
	z-index: 2;
	width: 100% !important;
	max-width: 440px;
	margin-inline: auto;
	background: #FFFFFF;
	border-radius: 24px;
	box-shadow: 0 40px 70px -40px rgba(60, 40, 20, 0.35), 0 0 0 1px rgba(11, 23, 54, 0.05);
}

.px-ui__cab {
	align-items: center !important;
}

.px-ui__cab-txt {
	flex: 1 1 auto !important;
	min-width: 0;
}

body .px-ui__titulo .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--px-tinta);
}

body .px-ui__sub .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13px;
	line-height: 1.3;
	color: var(--px-suave);
}

body .px-ui__estado .elementor-heading-title {
	padding: 6px 11px;
	border-radius: 999px;
	background: #E6F6EC;
	font-family: var(--px-f);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #12703A;
	white-space: nowrap;
}

.px-ui__fila {
	padding: 13px 0 !important;
	border-top: 1px solid #EEF1F6;
	justify-content: space-between !important;
}

body .px-ui__fila-t .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 15px;
	line-height: 1.35;
	color: var(--px-texto);
}

.px-ui__fila-t {
	flex: 1 1 auto !important;
}

body .px-ui__ok .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #E6F6EC;
	font-family: var(--px-f);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #15803D;
	transform: scale(0.4);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s, opacity 0.3s 0.35s;
}

.px-ui__fila.is-in .px-ui__ok .elementor-heading-title,
.elementor-editor-active .px-ui__ok .elementor-heading-title {
	transform: none;
	opacity: 1;
}

/* Barras de progreso nativas */
body .px-progreso .elementor-title {
	display: block;
	margin-bottom: 8px;
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 400;
	color: var(--px-texto);
}

body .px-progreso .elementor-progress-wrapper {
	height: 10px;
	border-radius: 999px;
	background: #EEF2FA;
	overflow: hidden;
}

body .px-progreso .elementor-progress-bar {
	height: 10px;
	line-height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #1B3A8F, #0A5CFF 70%, #3D8BFF) !important;
}

body .px-progreso .elementor-progress-text,
body .px-progreso .elementor-progress-percentage {
	display: none;
}

/* Aviso flotante */
/* Aviso por encima de la tarjeta (arriba a la derecha) y conversación por debajo (abajo a la izquierda):
   así no tapan la etiqueta de estado ni las filas */
.px-ui__aviso {
	position: absolute !important;
	right: 6px;
	top: 18px;
	z-index: 3;
	width: auto !important;
	max-width: 300px;
	background: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 24px 50px -24px rgba(11, 30, 90, 0.45);
}

body .px-ui__aviso-t .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--px-tinta);
}

/* Burbujas de WhatsApp */
.px-ui__chat {
	position: absolute !important;
	left: 10px;
	bottom: 16px;
	z-index: 3;
	width: auto !important;
	max-width: 300px;
	align-items: flex-start !important;
}

body .px-ui__burbuja .elementor-heading-title {
	position: relative;
	display: inline-block;
	padding: 10px 14px;
	border-radius: 14px;
	font-family: var(--px-f);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #111B21;
	box-shadow: 0 10px 24px -12px rgba(11, 20, 26, 0.35);
}

body .px-ui__burbuja--yo .elementor-heading-title {
	background: #D9FDD3;
	border-top-right-radius: 4px;
}

body .px-ui__burbuja--el .elementor-heading-title {
	background: #FFFFFF;
	border-top-left-radius: 4px;
}

.px-ui__burbuja--yo {
	align-self: flex-end !important;
}

@media (max-width: 767px) {
	.px-ui {
		padding: 30px 14px 30px !important;
		min-height: 0;
		gap: 14px !important;
	}

	.px-ui__aviso,
	.px-ui__chat {
		position: relative !important;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		max-width: 100%;
		margin-inline: auto;
	}
}

/* Tarjetas con objeto 3D sobre fondo cálido (antes, foto) */
.px-card__escena {
	height: 230px;
	background:
		radial-gradient(60% 70% at 30% 20%, #FFE3C8 0%, transparent 70%),
		radial-gradient(60% 60% at 80% 90%, #D9E6FF 0%, transparent 70%),
		#FBF6F0;
}

.px-card__escena .px-flota {
	width: 62% !important;
	max-width: 240px;
}

.px-card__escena img {
	width: 100%;
	height: auto;
}

.px-card--foto:hover .px-card__escena img {
	transform: none;
}

/* --- 5. Franja «Te ayudamos ahora» ------------------------------------------------------- */
.px-cta__chat {
	align-items: stretch !important;
}

.px-cta__chat .px-ui__burbuja {
	max-width: 88%;
}

.px-cta__chat .px-ui__burbuja--el {
	align-self: flex-start !important;
	text-align: left;
}

.px-cta__chat .px-ui__burbuja--yo {
	text-align: right;
}

.px-ui__chat .px-ui__burbuja--yo {
	text-align: right;
}

body .px-cta__chat .px-ui__burbuja .elementor-heading-title {
	font-size: 16px;
	padding: 12px 16px;
}

/* --- 6. Frase que se ilumina palabra a palabra con el scroll -------------------------------- */
body .px-frase.px-scrub .elementor-heading-title {
	font-size: clamp(30px, 3.6vw, 56px);
	line-height: 1.2;
}

.px-scrub .px-sw {
	opacity: clamp(0.14, calc(var(--sp, 1) * (var(--n, 1) + 8) - var(--i, 0)), 1);
	transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
	.px-scrub .px-sw {
		opacity: 1;
	}

	.px-vivo .elementor-heading-title::before,
	.px-chat__escribiendo i,
	.px-escena__pista .elementor-heading-title::after {
		animation: none !important;
	}
}

/* --- 7. Áreas de actuación compactas (20-10-2026, Mario: «ocupa mucho y dice poco») ----------
   Un solo panel: las filas son celdas blancas de una rejilla con 1 px de hueco sobre el color del
   borde, así salen líneas de pelo perfectas entre todas. */
.px-areas {
	gap: 1px !important;
	overflow: hidden;
	border: 1px solid var(--px-borde);
	border-radius: 24px;
	background: var(--px-borde) !important;
	box-shadow: 0 30px 60px -44px rgba(11, 30, 90, 0.35);
}

.px-area {
	position: relative;
	background: #FFFFFF;
	transition: background-color 0.3s;
}

/* Línea de color que entra por la izquierda al pasar el ratón */
.px-area::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 14px !important;
	bottom: 14px !important;
	width: 3px !important;
	height: auto !important;
	opacity: 1 !important;
	border-radius: 0 3px 3px 0;
	background: var(--px-grad) !important;
	transform: scaleY(0);
	transition: transform 0.35s var(--px-ease);
}

.px-area:hover {
	background: #F7F9FE;
}

.px-area:hover::after {
	transform: scaleY(1);
}

.px-area .px-icono {
	width: 40px !important;
	height: 40px;
}

.px-area .px-icono img {
	width: 21px !important;
	height: 21px;
}

.px-area .px-icono::after {
	transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--px-ease);
}

.px-area:hover .px-icono::after {
	background: #16295E;
	border-color: #16295E;
	transform: none;
}

.px-area:hover .px-icono img {
	filter: brightness(0) invert(1);
}

.px-area__txt {
	flex: 1 1 auto !important;
	min-width: 0;
}

body .px-area__t .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--px-tinta);
}

body .px-area__d .elementor-heading-title {
	font-family: var(--px-f);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--px-suave);
}

.px-area--desc .px-icono {
	margin-top: 2px;
}

@media (max-width: 767px) {
	.px-areas {
		border-radius: 20px;
	}

	body .px-area__t .elementor-heading-title {
		font-size: 15px;
	}
}

/* --- 8. Tarjetas con objeto 3D: el objeto tiene su propia columna y nunca pisa el texto -------
   (20-10-2026, Mario: el puzle y la lupa tapaban el texto). En escritorio, el texto ocupa el 58 % y
   el objeto se queda en el 38 % de la derecha, centrado en vertical; en móvil, el objeto va arriba. */
.px-card--3d {
	min-height: 300px;
	justify-content: center;
}

.px-card--3d > .elementor-element:not(.px-bento__3d) {
	max-width: 58% !important;
}

.px-card--3d > .px-bento__3d {
	position: absolute !important;
	right: 3% !important;
	left: auto !important;
	top: 50% !important;
	bottom: auto !important;
	width: 36% !important;
	max-width: 240px !important;
	transform: translateY(-50%);
	z-index: 0;
}

.px-card--3d > .px-bento__3d img {
	width: 100%;
	max-height: 230px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.px-card--3d {
		min-height: 0;
	}

	.px-card--3d > .elementor-element:not(.px-bento__3d) {
		max-width: 100% !important;
	}

	.px-card--3d > .px-bento__3d {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		order: -1;
		width: 46% !important;
		max-width: 180px !important;
		margin: -6px 0 4px auto;
		transform: none;
	}
}

/* --- 9. Escenas de interfaz: parallax suave y casi a la par (20-10-2026). Con recorridos muy distintos,
   en los extremos del scroll el aviso y la conversación pisaban la tarjeta (lo detectó la revisión de
   solapes). Ahora la diferencia máxima entre piezas es de unos 15 px y hay hueco de sobra. */
.px-ui .px-ui__card.px-plx { --pv: -30px; }
.px-ui .px-ui__aviso.px-plx { --pv: -54px; }
.px-ui .px-ui__chat.px-plx { --pv: -42px; }

.px-ui__aviso {
	top: 22px !important;
}

.px-ui__chat {
	bottom: 18px !important;
}
/* --- 10. Sin parallax en el móvil (20-10-2026): las piezas van apiladas y, si se mueven, se pisan
   (lo detectó la revisión de solapes). En tablet, tampoco dentro de las escenas de interfaz ni en la
   gema de la cabecera. */
@media (max-width: 767px) {
	.px-plx {
		transform: none !important;
	}
}

@media (max-width: 1024px) {
	.px-ui .px-plx,
	.px-home-hero__gema {
		transform: none !important;
	}
}

/* --- 11. Móvil: el aviso y la conversación apilados sin desplazamiento, y la gema de la cabecera
   detrás del móvil del chat (no sobre las píldoras) */
@media (max-width: 767px) {
	.px-ui__aviso,
	.px-ui__chat {
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
	}

	.px-home-hero__gema {
		top: 70px !important;
		right: -24% !important;
		opacity: 0.35 !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.px-home-hero__gema {
		top: 90px !important;
		right: -10% !important;
		width: 56% !important;
		opacity: 0.35 !important;
	}
}

/* Áreas: líneas con sombra de 1 px a la derecha y abajo (los huecos de la última fila quedan en
   blanco) y el círculo del icono un poco más marcado */
.px-areas {
	gap: 0 !important;
	background: #FFFFFF !important;
}

.px-area {
	box-shadow: 1px 1px 0 0 var(--px-borde);
}

.px-area .px-icono::after {
	background: #EEF3FC;
	border-color: #DCE6F7;
}

/* El círculo del icono (z-index -1) quedaba detrás del fondo blanco de la fila */
.px-area {
	isolation: isolate;
}

/* --- 12. Adornos solo en los márgenes (20-10-2026, «que ningún texto se monte sobre gráficos»).
   --px-gut es el margen libre a cada lado del contenido (de 1320 px como máximo); el JS coloca cada
   adorno con forma, contando lo que ocupa girado (×1,22), para que acabe 8 px antes de ese margen y
   asome por el borde de la pantalla.
   Dentro de los paneles redondeados, el margen es su relleno. En tablet y móvil, el margen es muy
   estrecho: los adornos con forma no se muestran. */
:root {
	--px-gut: max(42px, calc((100vw - 1320px) / 2 - 8px));
}

.px-panel {
	--px-gut: 60px;
}

@media (max-width: 1199px) {
	.px-d--borde {
		display: none !important;
	}
}

/* Aviso «escribiendo…» de la escena: sin adornos debajo */

/* --- 13. Escena del diamante sin objetos sobre el titular (20-10-2026): el titular a 820 px como
   máximo y los objetos más abiertos hacia los lados; fuera la gema tenue de detrás del texto */
.px-escena__intro {
	max-width: 820px !important;
}

.px-escena__obj--1 { --x1: -39vw; --y1: -24vh; }
.px-escena__obj--2 { --x1: 38vw; --y1: -26vh; }
.px-escena__obj--3 { --x1: -40vw; --y1: 22vh; }
.px-escena__obj--4 { --x1: 39vw; --y1: 23vh; }
.px-escena__obj--5 { --x1: -22vw; --y1: 37vh; }
.px-escena__obj--6 { --x1: 21vw; --y1: -38vh; }

.px-escena__obj--7 {
	display: none !important;
}

/* --- 14. Foco visible al navegar con el teclado (20-10-2026, revisión de entrega) ----------- */
body a:focus-visible,
body button:focus-visible,
body .elementor-button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body [tabindex]:focus-visible {
	outline: 3px solid var(--px-azul) !important;
	outline-offset: 3px;
	border-radius: 6px;
}

body .px-panel--tinta a:focus-visible,
body .px-panel--tinta .elementor-button:focus-visible,
body .px-escena__panel a:focus-visible,
body .px-footer a:focus-visible {
	outline-color: #FFFFFF !important;
}
/* <<< fin PX 40-wow.css */