/**
 * Stacking Scroll Sections - Estilos del efecto de apilado.
 *
 * El efecto (card stacking / sticky overlap) se consigue SOLO con CSS:
 * cada sección es position: sticky; top: 0 y, como van apareciendo después
 * en el DOM con mayor z-index, cada una se monta ENCIMA de la anterior y la
 * tapa por completo. El JS únicamente iguala las alturas.
 */

/* Contenedor general. Importante: no debe tener overflow oculto para que
   sticky funcione (el overflow oculto en un ANCESTRO rompe el sticky).

   --sss-sticky-top: distancia a la que se "pega" cada bloque desde el borde
   superior del viewport. Lo controla el usuario desde Elementor (control
   "Espacio superior al fijar"). Gracias a este offset queda siempre un
   espacio en blanco arriba y se ve la parte superior del bloque, en lugar
   de pegarse a ras del borde (top: 0). */
.sss-wrapper {
	position: relative;
	--sss-sticky-top: 50px;
	/* Separación vertical entre secciones (control "Separación entre secciones").
	   Crea un hueco en el flujo entre una card y la siguiente, de modo que al
	   hacer scroll se ve el fondo entre ambas antes de que la de abajo la tape. */
	--sss-section-gap: 0px;
}

/* Cada sección apilada.
   - sticky + top:var(--sss-sticky-top)  -> se queda fija (con offset) al hacer scroll.
   - la siguiente sube y, con mayor z-index, la cubre por completo.
   - overflow:hidden aquí (en el propio elemento sticky) NO rompe el efecto
     y permite recortar la imagen a las esquinas redondeadas. */
.sss-section {
	position: -webkit-sticky;
	position: sticky;
	top: var(--sss-sticky-top, 0px);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	padding: 10px;
	/* La altura (min-height) la fija el JS igualando todos los bloques. */
}

/* Separación entre secciones: margen inferior en todas menos la última
   (así no queda un hueco sobrante al final del componente). */
.sss-section:not(:last-child) {
	margin-bottom: var(--sss-section-gap, 0px);
}

/* Contenido interno en 2 columnas (texto | imagen).
   max-width y padding se controlan desde los controles globales del widget.
   - align-items:stretch + grid-template-rows:1fr hacen que ambas columnas
     ocupen toda la altura del bloque (incluida la altura extra que impone el
     igualador de alturas), de modo que la imagen llega a los bordes y el
     botón puede anclarse abajo.
   - gap:0 para que la imagen quede a sangre pegada al contenido. */
.sss-section__inner {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 0;
	align-items: stretch;
	box-sizing: border-box;
}

/* Columna de texto (bloque izquierdo). El padding lo pone el control
   "Padding interno del contenido" (solo esta columna, no la imagen). */
.sss-section__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Eyebrow: texto pequeño en negrita. */
.sss-eyebrow {
	margin: 0 0 12px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Título. */
.sss-title {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.15;
}

/* Párrafo. */
.sss-text {
	margin: 0 0 28px;
	font-size: 1.05rem;
	line-height: 1.6;
}

/* Botón: pill redondo con texto a la izquierda y círculo con flecha diagonal
   (swap en hover). Los colores se inyectan como CSS vars por bloque desde
   Elementor: --sss-btn-bg / --sss-btn-bg-hover / --sss-btn-text /
   --sss-btn-text-hover / --sss-btn-pill / --sss-btn-arrow. */
.sss-button {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: auto; /* ancla el botón al fondo de la columna de texto */
	padding: 8px 8px 8px 26px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	background-color: var(--sss-btn-bg, #ff4f18);
	color: var(--sss-btn-text, #ffffff);
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.sss-button:hover,
.sss-button:focus {
	background-color: var(--sss-btn-bg-hover, var(--sss-btn-bg, #ff4f18));
	color: var(--sss-btn-text-hover, var(--sss-btn-text, #ffffff));
}

.sss-button__label {
	line-height: 1;
}

/* Círculo blanco: recorta las flechas al entrar/salir. */
.sss-button__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--sss-btn-pill, #ffffff);
	overflow: hidden;
}

/* Wrapper rotado -45deg: una flecha "a la derecha" se ve arriba-derecha y un
   translateX se convierte en desplazamiento por el eje diagonal. */
.sss-button__arrows {
	position: relative;
	width: 20px;
	height: 20px;
	transform: rotate(-45deg);
}

.sss-button__arrow {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	fill: var(--sss-btn-arrow, var(--sss-btn-bg, #ff4f18));
	transition: transform 0.38s ease;
}

/* Flecha 2 en espera, fuera del pill (abajo-izquierda). 200% para que no asome. */
.sss-button__arrow:nth-child(2) {
	transform: translateX(-200%);
}

.sss-button:hover .sss-button__arrow:nth-child(1),
.sss-button:focus .sss-button__arrow:nth-child(1) {
	transform: translateX(200%);
}

.sss-button:hover .sss-button__arrow:nth-child(2),
.sss-button:focus .sss-button__arrow:nth-child(2) {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.sss-button__arrow {
		transition: none;
	}
	.sss-button:hover .sss-button__arrow:nth-child(1),
	.sss-button:focus .sss-button__arrow:nth-child(1) {
		transform: none;
	}
	.sss-button:hover .sss-button__arrow:nth-child(2),
	.sss-button:focus .sss-button__arrow:nth-child(2) {
		transform: translateX(-200%);
	}
}

/* Columna de imagen (bloque derecho) en DESKTOP: altura fija de 420px y
   centrada verticalmente dentro del bloque (align-self:center). La imagen va
   en absoluto rellenando ese marco con object-fit:cover y centrada. */
.sss-media {
	position: relative;
	overflow: hidden;
	height: 420px;
	align-self: center;
	border-radius: 24px;
}

.sss-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Responsive: apilar en una sola columna en móvil. */
@media (max-width: 767px) {
	.sss-section__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	/* En móvil colocamos primero la imagen y debajo el texto. La imagen vuelve
	   a flujo normal (no absoluta) para que ocupe su alto natural apilada. */
	.sss-media {
		order: -1;
		height: auto;
		margin-bottom: 30px;
	}

	.sss-media img {
		position: static;
		height: 250px;
	}

	.sss-button {
		margin-top: 0;
	}
}