/* =====================================================================
   WJ · Sistema de movimiento
   =====================================================================
   Todo movimiento pertenece a una de seis familias, y cada una comunica
   una idea de la marca:

     REVEAL    algo aparece con calma        → claridad
     CONNECT   algo enlaza con algo          → acompañamiento
     GROW      algo crece                    → crecimiento
     GUIDE     algo conduce la mirada        → orientación
     PROTECT   algo rodea o abraza           → protección
     CONTINUE  algo sigue más allá           → continuidad

   Si un movimiento no cabe en ninguna, sobra.

   Las clases las pone el JavaScript en tiempo de ejecución, no Elementor:
   los contenedores de Elementor descartan las clases propias y solo
   conservan el id.
   ===================================================================== */

:root {
	/* Una sola curva para todo el sitio: entra rápido y se posa. Nada de
	   rebotes ni de elásticos; esto es una aseguradora, no un juguete. */
	--wj-mov-curva: cubic-bezier(0.22, 1, 0.36, 1);

	--wj-mov-titular: 760ms;
	--wj-mov-cuerpo:  600ms;
	--wj-mov-micro:   220ms;

	--wj-mov-alza-titular: 26px;
	--wj-mov-alza-cuerpo:  14px;
}

/* ---------------------------------------------------------------------
   REVEAL
   El contenido se sirve visible. Solo se oculta cuando el JavaScript ha
   comprobado que puede volver a mostrarlo, y aun así hay una red de
   seguridad por tiempo. Nunca se debe poder quedar texto invisible.
   --------------------------------------------------------------------- */

.wj-mov-titular,
.wj-mov-cuerpo {
	will-change: opacity, transform;
}

.wj-mov-titular {
	opacity: 0;
	transform: translate3d(0, var(--wj-mov-alza-titular), 0);
}
.wj-mov-cuerpo {
	opacity: 0;
	transform: translate3d(0, var(--wj-mov-alza-cuerpo), 0);
}

.wj-mov-titular.wj-mov-dentro,
.wj-mov-cuerpo.wj-mov-dentro {
	opacity: 1;
	transform: none;
}
.wj-mov-titular.wj-mov-dentro { transition: opacity var(--wj-mov-titular) var(--wj-mov-curva), transform var(--wj-mov-titular) var(--wj-mov-curva); }
.wj-mov-cuerpo.wj-mov-dentro  { transition: opacity var(--wj-mov-cuerpo)  var(--wj-mov-curva), transform var(--wj-mov-cuerpo)  var(--wj-mov-curva); }

/* Escalonado dentro de un mismo bloque: se lee como una secuencia, no
   como un telón que sube de golpe. Cuatro pasos bastan; más se percibe
   como lentitud. */
.wj-mov-dentro[data-wj-orden="1"] { transition-delay: 90ms; }
.wj-mov-dentro[data-wj-orden="2"] { transition-delay: 180ms; }
.wj-mov-dentro[data-wj-orden="3"] { transition-delay: 260ms; }

/* Una vez visto, se suelta la promesa de compositing. */
.wj-mov-hecho { will-change: auto; }

/* ---------------------------------------------------------------------
   Fotografía · profundidad, no exhibición
   El desplazamiento lo escribe el JavaScript en --wj-mov-y. El recorrido
   total ronda los 24px: se nota como profundidad y no como efecto.
   --------------------------------------------------------------------- */

.wj-mov-fondo { overflow: hidden; }
.wj-mov-fondo img {
	transform: translate3d(0, var(--wj-mov-y, 0px), 0) scale(1.06);
	will-change: transform;
}

/* ---------------------------------------------------------------------
   Tarjetas de cobertura · CONNECT
   --------------------------------------------------------------------- */

/* La tarjeta ya tenia respuesta propia: borde superior rojo, fondo tenue y
   el icono subiendo 3px. Aqui solo se anade la profundidad —levantar y
   sombra—, y se conserva lo que ya habia en la lista de transiciones.

   El selector lleva #servicios por delante porque la regla original vive en
   el CSS del Personalizador, que carga despues que este fichero: con la
   misma especificidad ganaba ella y el levantamiento no llegaba a animarse.

   No se toca el icono: el sitio ya lo mueve. Yo habia anadido otro
   desplazamiento de 2px al <img> de dentro y los dos se sumaban. */
#servicios #wj-cards > .e-con,
#servicios #wj-cards > .elementor-element {
	transition: border-color var(--wj-mov-micro) var(--wj-mov-curva),
	            background var(--wj-mov-micro) var(--wj-mov-curva),
	            transform var(--wj-mov-micro) var(--wj-mov-curva),
	            box-shadow var(--wj-mov-micro) var(--wj-mov-curva);
}
@media (hover: hover) and (pointer: fine) {
	#servicios #wj-cards > *:hover {
		transform: translate3d(0, -4px, 0);
		box-shadow: 0 12px 28px rgba(0, 48, 73, 0.09);
	}
}

/* El enlace de la tarjeta: la flecha adelanta un paso.
   Va fuera del texto subrayado —de ahí el margen y no un espacio dentro del
   content— para que el subrayado no se estire hasta la punta. */
.wj-card__cta .elementor-button-text::after {
	content: "→";
	display: inline-block;
	margin-left: 7px;
	transition: transform var(--wj-mov-micro) var(--wj-mov-curva);
}
.wj-card__cta .elementor-button:hover .elementor-button-text::after { transform: translate3d(4px, 0, 0); }

/* ---------------------------------------------------------------------
   Pasos del proceso
   Ya tienen su recorrido dibujado; aquí solo se les da la reacción táctil.
   --------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	#wj-rows > * .wj-row__icono img { transition: transform 320ms var(--wj-mov-curva); }
	#wj-rows > *:hover .wj-row__icono img { transform: translate3d(0, -3px, 0); }
}

/* ---------------------------------------------------------------------
   Llamadas a la acción · sólidas y precisas, no de aplicación web
   --------------------------------------------------------------------- */

.elementor-button {
	transition: background-color var(--wj-mov-micro) var(--wj-mov-curva),
	            color var(--wj-mov-micro) var(--wj-mov-curva),
	            border-color var(--wj-mov-micro) var(--wj-mov-curva),
	            transform var(--wj-mov-micro) var(--wj-mov-curva);
}
@media (hover: hover) and (pointer: fine) {
	.elementor-button:hover { transform: translate3d(0, -2px, 0); }
}
/* Al pulsar, la respuesta física: se hunde un pelo. */
.elementor-button:active { transform: translate3d(0, 0, 0) scale(0.985); }

/* Las llamadas de Seguros y de Preguntas frecuentes no son botones de
   Elementor sino enlaces nuestros, así que quedaban fuera de la regla de
   arriba: mismo aspecto, distinta reacción al pasar el ratón. Se les da la
   misma, y se conserva la transición de color que ya traían. */
.wj-seg__cta {
	transition: background 200ms var(--wj-mov-curva),
	            border-color 200ms var(--wj-mov-curva),
	            transform var(--wj-mov-micro) var(--wj-mov-curva);
}
@media (hover: hover) and (pointer: fine) {
	.wj-seg__cta:hover { transform: translate3d(0, -2px, 0); }
}
.wj-seg__cta:active { transform: translate3d(0, 0, 0) scale(0.985); }

/* Los botones del asistente de orientacion. Tenian su cambio de color pero
   no la respuesta fisica, y es la pagina donde mas se pulsa del sitio.

   Lleva la etiqueta por delante —button.wj-btn-ori— porque wj-orientacion.css
   carga despues que esta hoja y declara su propia transicion: a igualdad de
   especificidad ganaba la suya y el levantamiento no llegaba a aplicarse. */
button.wj-btn-ori { transition: background-color 140ms var(--wj-mov-curva), color 140ms var(--wj-mov-curva), border-color 140ms var(--wj-mov-curva), transform var(--wj-mov-micro) var(--wj-mov-curva); }
@media (hover: hover) and (pointer: fine) {
	button.wj-btn-ori:hover { transform: translate3d(0, -2px, 0); }
}
button.wj-btn-ori:active { transform: translate3d(0, 0, 0) scale(0.985); }

/* Los enlaces «Ver esta área» y «Ver el área de…» adelantan la flecha, como
   la tarjeta de cobertura de la portada. La flecha ya está escrita en el
   texto, así que se mueve el enlace entero por su último carácter no: se
   desplaza el enlace un paso. */
.wj-seg__ir,
.wj-faq__pie a { transition: transform var(--wj-mov-micro) var(--wj-mov-curva), color var(--wj-mov-micro) var(--wj-mov-curva), border-color var(--wj-mov-micro) var(--wj-mov-curva); }
@media (hover: hover) and (pointer: fine) {
	.wj-seg__ir:hover,
	.wj-faq__pie a:hover { transform: translate3d(3px, 0, 0); }
}

/* ---------------------------------------------------------------------
   Cifras · evidencia, no marcador de videojuego
   --------------------------------------------------------------------- */

.wj-mov-cifra { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Movimiento reducido
   No es la misma animación más lenta: es que no hay animación. Todo el
   contenido está presente y en su sitio desde el primer momento.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* Lo que se suprime es el DESPLAZAMIENTO. El contenido esta presente y
	   en su sitio desde el primer momento, y no hay parallax.

	   Lo que NO se suprime es la respuesta: el color de un boton al pasar el
	   raton o al pulsarlo no es movimiento, es informacion sobre si el
	   control funciona. Quitarla deja la web muerta sin ganar nada, y es la
	   causa mas comun de que una capa de movimiento parezca rota en Windows,
	   donde esta preferencia viene activada de fabrica. */
	.wj-mov-titular,
	.wj-mov-cuerpo,
	.wj-mov-titular.wj-mov-dentro,
	.wj-mov-cuerpo.wj-mov-dentro {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wj-mov-fondo img { transform: none; }

	/* Sin levantar la tarjeta ni el boton: eso si es desplazamiento. */
	#servicios #wj-cards > *:hover,
	.elementor-button:hover { transform: none; }
	.elementor-button:active { transform: none; }
	.wj-seg__cta:hover, .wj-seg__cta:active { transform: none; }
	button.wj-btn-ori:hover, button.wj-btn-ori:active { transform: none; }
	.wj-seg__ir:hover, .wj-faq__pie a:hover { transform: none; }
	.wj-card__cta .elementor-button:hover .elementor-button-text::after { transform: none; }

	/* Pero el cambio de color y la sombra se quedan, y con su transicion:
	   son la unica senal de que el control responde. */
	#servicios #wj-cards > .e-con,
	#servicios #wj-cards > .elementor-element {
		transition: border-color var(--wj-mov-micro) var(--wj-mov-curva),
		            background var(--wj-mov-micro) var(--wj-mov-curva);
	}
	.elementor-button {
		transition: background-color var(--wj-mov-micro) var(--wj-mov-curva),
		            color var(--wj-mov-micro) var(--wj-mov-curva),
		            border-color var(--wj-mov-micro) var(--wj-mov-curva);
	}
	.wj-seg__cta {
		transition: background 200ms var(--wj-mov-curva),
		            border-color 200ms var(--wj-mov-curva);
	}
}

/* =====================================================================
   Transiciones entre secciones · PROTECT
   =====================================================================
   Dos momentos, no más: la entrada al crema y la entrada al azul, que son
   los dos cambios de color de verdad en la página. Una curva ancha y
   tranquila en lugar de un canto recto.

   La curva se dibuja DENTRO de la sección que empieza, con el color de la
   que termina. Colgarla hacia arriba habría sido más natural, pero varias
   secciones llevan overflow:hidden y la habrían recortado. Además, el
   ::before de Servicios, Proceso y Contacto ya lo ocupa la marca de agua:
   aquí solo se usan los dos que estaban libres.
   ===================================================================== */

#problema::before,
#credenciales::before {
	content: "";
	position: absolute;
	top: -1px;                       /* -1 evita la costura de un píxel al redondear */
	left: -6vw;
	right: -6vw;
	width: auto;                     /* Elementor define width:100% en .e-con::before;
	                                    con left+width el navegador ignora right y la
	                                    curva se quedaba 6vw corta por la derecha. */
	height: clamp(38px, 5vw, 74px);
	background: var(--wj-soft-white, #FAF9F6);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	pointer-events: none;
	z-index: 0;
}

/* El contenido de la sección va por encima de la curva, no por debajo. */
#problema > .e-con-inner,
#credenciales > .e-con-inner { position: relative; z-index: 1; }

/* La banda 1 de «Problema» es del mismo crema que la sección: si la curva
   quedara por encima, le comería el antetítulo. */
#wj-prob__b1 { position: relative; z-index: 1; }

/* =====================================================================
   Dos generaciones · CONNECT · CONTINUE
   =====================================================================
   La unica escena coreografiada de la portada. Ocupa el sitio que la
   seccion ya tenia: no se alarga el documento para sostenerla.

   El orden es el argumento. Wanda primero, porque es el origen. Despues
   el enlace, que se dibuja de ella hacia Javier. Despues Javier, que
   aparece cuando ya hay algo que continuar. Y al final la frase que lo
   explica. Invertir ese orden contaria un relevo en lugar de un legado.
   ===================================================================== */

.wj-gen { position: relative; }

.wj-gen__a, .wj-gen__b, .wj-gen__c {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
}
.wj-gen.esta-en-escena .wj-gen__a,
.wj-gen.esta-en-escena .wj-gen__b,
.wj-gen.esta-en-escena .wj-gen__c {
	opacity: 1;
	transform: none;
	transition: opacity 700ms var(--wj-mov-curva), transform 700ms var(--wj-mov-curva);
}
/* Wanda entra sola. El enlace tarda 620ms en empezar a dibujarse, asi que
   Javier llega cuando ya hay un hilo del que venir. */
.wj-gen.esta-en-escena .wj-gen__a { transition-delay: 0ms; }
.wj-gen.esta-en-escena .wj-gen__b { transition-delay: 900ms; }
.wj-gen.esta-en-escena .wj-gen__c { transition-delay: 1400ms; }

/* Javier no solo aparece: viene de la izquierda, del lado de Wanda. */
.wj-gen__b { transform: translate3d(-14px, 18px, 0); }

.wj-gen__enlace {
	position: absolute;
	display: block;
	background: var(--wj-deep-red, #780000);
	opacity: 0.3;
	pointer-events: none;
	z-index: 2;
	/* Se dibuja creciendo desde el lado de Wanda. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 620ms var(--wj-mov-curva);
}
.wj-gen__enlace[data-eje="vertical"] {
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform 620ms var(--wj-mov-curva);
}
.wj-gen.esta-en-escena .wj-gen__enlace { transform: scale(1); transition-delay: 620ms; }

@media (prefers-reduced-motion: reduce) {
	.wj-gen__a, .wj-gen__b, .wj-gen__c,
	.wj-gen.esta-en-escena .wj-gen__a,
	.wj-gen.esta-en-escena .wj-gen__b,
	.wj-gen.esta-en-escena .wj-gen__c {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wj-gen__enlace,
	.wj-gen.esta-en-escena .wj-gen__enlace { transform: scale(1); transition: none; }
}