/* Entrada animada de los textos de un hero (control «Entrada (Smart Sites)»).
   Solo CSS: tipeo y palabras llegan envueltos desde el servidor. Tiempos por defecto
   del design system: tipeo 28 ms por letra, palabras 70 ms de escalón y 700 ms cada una,
   aparición 400 ms subiendo 12 px. Cada widget los cambia con sus variables. */

/* Aparece subiendo: opacidad con ease-out y desplazamiento con la curva de la marca,
   como el hero del design system (dos curvas, dos animaciones).
   La opacidad parte en .01, no en 0: Chrome no cuenta como pintado un elemento con
   opacidad 0, y si ese elemento es el LCP (el H1 de la portada, la bajada de un hero) el
   LCP se corre hasta que termina el retraso. En Lighthouse eso llevó el LCP de la portada
   de 3,7 s a 8,2 s. A la vista, .01 y 0 son lo mismo. */
.ssd-entrada-sube {
	animation:
		ssd-opacidad var(--ssd-duracion, 400ms) ease-out var(--ssd-retraso, 600ms) both,
		ssd-desliza var(--ssd-duracion, 400ms) cubic-bezier(.2, .8, .2, 1) var(--ssd-retraso, 600ms) both;
}
@keyframes ssd-opacidad { from { opacity: .01; } }
@keyframes ssd-desliza { from { transform: translateY(var(--ssd-desde, 12px)); } }

/* Palabras que suben: cada palabra en su ventana, escalonadas. */
.ssd-palabra {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .06em;
}
.ssd-palabra > span {
	display: inline-block;
	animation: ssd-palabra var(--ssd-duracion, 700ms) cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(var(--ssd-retraso, 160ms) + var(--i, 0) * var(--ssd-paso, 70ms));
}
@keyframes ssd-palabra { from { transform: translateY(105%); } }

/* Tipeo: el texto se abre letra por letra. En una monoespaciada cada letra mide 1ch más
   el tracking; al terminar la animación el ancho vuelve a «none», así que si el tracking
   cambia la frase igual queda completa. */
.ssd-tipeo {
	display: inline-block;
	vertical-align: bottom;
	white-space: nowrap;
	overflow: hidden;
	animation: ssd-tipeo calc(var(--n, 20) * var(--ssd-paso, 28ms)) steps(var(--n, 20), end) var(--ssd-retraso, 0ms) backwards;
}
@keyframes ssd-tipeo {
	from { max-width: 0; }
	to { max-width: calc(var(--n, 20) * (1ch + .08em)); }
}
.ssd-cursor { display: inline-block; }

/* «▍» mientras escribe, y se va al terminar. */
.ssd-entrada-tipeo .ssd-cursor::before { content: "\258D"; }
.ssd-entrada-tipeo .ssd-cursor {
	animation: ssd-fin 0s linear calc(var(--ssd-retraso, 0ms) + var(--n, 20) * var(--ssd-paso, 28ms)) forwards;
}
@keyframes ssd-fin { to { visibility: hidden; } }

/* Cursor de bloque que queda parpadeando. */
.ssd-entrada-tipeo-cursor .ssd-cursor {
	width: 7px;
	height: 13px;
	margin-left: 3px;
	vertical-align: -2px;
	background: currentColor;
	animation: ssd-parpadeo 1s steps(1) infinite;
}
@keyframes ssd-parpadeo { 50% { opacity: 0; } }

/* En el editor no se anima: cada cambio re-renderiza el widget y la entrada se repetiría.
   Sin animación, el «▍» del tipeo no se iría nunca: ahí se esconde. */
.elementor-editor-active .ssd-entrada-sube,
.elementor-editor-active .ssd-palabra > span,
.elementor-editor-active .ssd-tipeo { animation: none; }
.elementor-editor-active .ssd-entrada-tipeo .ssd-cursor { display: none; }

@media (max-width: 767px) {
	.ssd-tipeo {
		white-space: normal;
	}
	#ss-hero-dark .elementor-heading-title {
		max-width: 100% !important;
		overflow-wrap: break-word;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssd-entrada-sube,
	.ssd-palabra > span,
	.ssd-tipeo { animation: none; }
	.ssd-entrada-tipeo .ssd-cursor { display: none; }
	.ssd-entrada-tipeo-cursor .ssd-cursor { animation: none; }
}

/* Botón flotante Back to Top (#ss-back-to-top) */
.ss-back-to-top {
	position: fixed;
	right: clamp(18px, 2.5vw, 32px);
	bottom: clamp(18px, 2.5vw, 32px);
	z-index: 85;
	width: 48px;
	height: 48px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0C1B33;
	color: #FFFFFF;
	border: 1.5px solid rgba(99, 151, 214, 0.45);
	border-top: 3px solid #F59E0B;
	border-radius: 2px;
	box-shadow: 0 10px 26px rgba(12, 27, 51, 0.28);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ss-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.ss-back-to-top:hover,
.ss-back-to-top:focus-visible {
	background-color: #164391;
	color: #F59E0B;
	border-color: #F59E0B;
	transform: translateY(-3px);
}

.elementor-editor-active .ss-back-to-top {
	display: none;
}