/**
 * 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 icono.
   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-btn-arrow-hover.
   Tamaños (controles globales): --sss-btn-icon-size / --sss-btn-circle-size.

   Se prefija con .sss-wrapper para ganar en especificidad a los estilos de
   enlace del kit de Elementor (.elementor-kit-N a / a:hover), que si no
   pisan el color del texto del botón. */
.sss-wrapper .sss-button {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	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-wrapper .sss-button:hover,
.sss-wrapper .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));
}

/* Sin círculo, el botón suele llevar padding simétrico. */
.sss-wrapper .sss-button--no-circle {
	padding: 12px 24px;
}

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

/* Círculo: recorta las flechas al entrar/salir. El color del icono se fija
   aquí y los iconos (SVG o fuente) lo heredan con currentColor. */
.sss-button__circle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sss-btn-circle-size, 44px);
	height: var(--sss-btn-circle-size, 44px);
	border-radius: 50%;
	background-color: var(--sss-btn-pill, #ffffff);
	color: var(--sss-btn-arrow, var(--sss-btn-bg, #ff4f18));
	overflow: hidden;
	transition: color 0.3s ease;
}

.sss-button:hover .sss-button__circle,
.sss-button:focus .sss-button__circle {
	color: var(--sss-btn-arrow-hover, var(--sss-btn-arrow, var(--sss-btn-bg, #ff4f18)));
}

/* Sin círculo: el contenedor se ajusta al icono y, por defecto, el icono
   toma el color del texto del botón (también en hover). */
.sss-button--no-circle .sss-button__circle {
	width: auto;
	height: auto;
	border-radius: 0;
	background-color: transparent;
	color: var(--sss-btn-arrow, currentColor);
}

.sss-button--no-circle:hover .sss-button__circle,
.sss-button--no-circle:focus .sss-button__circle {
	color: var(--sss-btn-arrow-hover, var(--sss-btn-arrow, currentColor));
}

/* Icono personalizado (librería de Elementor o SVG subido). */
.sss-button__custom-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--sss-btn-icon-size, 20px);
	line-height: 1;
}

.sss-button__custom-icon svg {
	width: var(--sss-btn-icon-size, 20px);
	height: var(--sss-btn-icon-size, 20px);
	fill: currentColor;
}

/* 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: var(--sss-btn-icon-size, 20px);
	height: var(--sss-btn-icon-size, 20px);
	transform: rotate(-45deg);
}

.sss-button__arrow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
	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%);
	}
}

/* Distribución vertical de la columna de texto (control "Distribución
   vertical del contenido"; Elementor añade sss-layout-* al widget). */
.sss-layout-button-bottom .sss-button {
	margin-top: auto; /* ancla el botón al fondo de la columna de texto */
}

.sss-layout-center .sss-section__content {
	justify-content: center;
}

.sss-layout-bottom .sss-section__content {
	justify-content: flex-end;
}

/* 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;
	}

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