/* ==========================================================================
   IOA Sticky Stacking Cards — Frontend Styles
   ========================================================================== */

/* ---- Variables CSS ---- */
:root {
	--ioa-ssc-card-height: 380px;
	--ioa-ssc-radius:      20px;   /* radio de esquinas — reducido en mobile */
	--ioa-ssc-h-top:       10vh;   /* offset sticky horizontal — reducido en landscape */
}

/* ---- Contenedor principal ---- */
.ioa-ssc-container {
	container-type: inline-size;
	container-name: ioa-ssc;
	box-sizing: border-box;
}

/* ==========================================================================
   EFECTO VERTICAL / SKIPER17
   Tarjetas con position:sticky que se apilan al hacer scroll
   ========================================================================== */

.ioa-ssc-list {
	list-style: none;
	margin: 0;
	padding: 0 0 clamp(50px, 10vh, 120px);
}

.ioa-ssc-card-wrapper {
	position: -webkit-sticky;
	position: sticky;
	will-change: transform;
	transform-origin: top center;
}

.ioa-ssc-container[data-effect="vertical"] .ioa-ssc-card {
	transform-origin: top center;
}

.ioa-ssc-container[data-effect="skiper17"] .ioa-ssc-card {
	transform-origin: center center;
	will-change: transform, opacity;
}

/* ==========================================================================
   EFECTO HORIZONTAL
   ========================================================================== */

.ioa-ssc-h-section {
	position: relative;
}

.ioa-ssc-h-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--ioa-ssc-h-top);
	overflow: hidden;
	-webkit-clip-path: inset(0 round var(--ioa-ssc-radius));
	clip-path: inset(0 round var(--ioa-ssc-radius));
}

.ioa-ssc-h-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform, opacity;
}

.ioa-ssc-h-card.is-entering .ioa-ssc-card {
	box-shadow: -24px 0 50px rgba(0, 0, 0, 0.18);
}

.ioa-ssc-h-card .ioa-ssc-card {
	height: 100%;
	box-shadow: none;
}

.ioa-ssc-h-card .ioa-ssc-card-inner {
	min-height: 100%;
	height: 100%;
}

/* ---- Indicadores de progreso (dots) ---- */
.ioa-ssc-h-dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 100;
	pointer-events: none;
}

.ioa-ssc-h-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.20);
	transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background 0.35s ease,
	            border-radius 0.35s ease;
	flex-shrink: 0;
}

.ioa-ssc-h-dot.is-active {
	width: 28px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   TARJETA — Layout base compartido entre todos los efectos
   ========================================================================== */

.ioa-ssc-card {
	background: #ffffff;
	border-radius: var(--ioa-ssc-radius);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
	overflow: hidden;
	transform-origin: top center;
	will-change: transform;
	transition: transform 0.07s linear, opacity 0.07s linear;
}

.ioa-ssc-card-inner {
	display: flex;
	align-items: stretch;
	min-height: var(--ioa-ssc-card-height, 380px);
}

/* Imagen principal */
.ioa-ssc-card-media {
	flex: 0 0 45%;
	max-width: 45%;
	position: relative;
	overflow: hidden;
	margin: 0;
}

.ioa-ssc-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ioa-ssc-card:hover .ioa-ssc-card-media img {
	transform: scale(1.03);
}

/* Contenido */
.ioa-ssc-card-content {
	flex: 1;
	padding: clamp(20px, 4cqi, 48px) clamp(18px, 4cqi, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

/* Icono de cabecera */
.ioa-ssc-header-icon {
	margin-bottom: 14px;
}

.ioa-ssc-header-icon img {
	height: clamp(22px, 4cqi, 40px);
	width: auto;
	display: block;
}

/* Título */
.ioa-ssc-card-title {
	margin: 0 0 12px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Descripción */
.ioa-ssc-card-description {
	color: #555;
	font-size: clamp(13px, 1.6cqi, 16px);
	line-height: 1.7;
}

.ioa-ssc-card-description p {
	margin: 0 0 10px;
}

.ioa-ssc-card-description p:last-child {
	margin-bottom: 0;
}

/* Variantes de color por posición */
.ioa-ssc-card-wrapper--1 .ioa-ssc-card,
.ioa-ssc-h-card[data-h-index="0"] .ioa-ssc-card { background: #ffffff; }

.ioa-ssc-card-wrapper--2 .ioa-ssc-card,
.ioa-ssc-h-card[data-h-index="1"] .ioa-ssc-card { background: #f8faff; }

.ioa-ssc-card-wrapper--3 .ioa-ssc-card,
.ioa-ssc-h-card[data-h-index="2"] .ioa-ssc-card { background: #fafff8; }

.ioa-ssc-card-wrapper--4 .ioa-ssc-card,
.ioa-ssc-h-card[data-h-index="3"] .ioa-ssc-card { background: #fff8f8; }

.ioa-ssc-card-wrapper--5 .ioa-ssc-card,
.ioa-ssc-h-card[data-h-index="4"] .ioa-ssc-card { background: #fffdf0; }

/* ==========================================================================
   Container Queries — layout adaptivo según el ancho del bloque
   ========================================================================== */

@container ioa-ssc ( max-width: 860px ) {
	.ioa-ssc-card-media {
		flex: 0 0 42%;
		max-width: 42%;
	}
}

@container ioa-ssc ( max-width: 640px ) {
	/* Layout vertical: imagen arriba, contenido abajo */
	.ioa-ssc-card-inner {
		flex-direction: column;
		min-height: unset;
	}

	.ioa-ssc-card-media {
		flex: none;
		max-width: 100%;
		height: clamp(140px, 42cqi, 260px);
	}

	/* Altura en horizontal: sin min-height fijo, se adapta al sticky */
	.ioa-ssc-h-card .ioa-ssc-card-inner {
		min-height: 100%;
	}

	.ioa-ssc-card-content {
		padding: clamp(14px, 5cqi, 28px) clamp(14px, 5cqi, 28px);
		justify-content: flex-start;
	}

	.ioa-ssc-card {
		border-radius: max(10px, var(--ioa-ssc-radius) * 0.7);
	}

	.ioa-ssc-list {
		padding-bottom: clamp(40px, 7vh, 80px);
	}

	/* Reducir título a un tamaño razonable si el usuario puso un valor grande */
	.ioa-ssc-card-title {
		font-size: clamp(16px, 4cqi, 28px) !important;
	}
}

@container ioa-ssc ( max-width: 420px ) {
	.ioa-ssc-card-media {
		height: clamp(120px, 38cqi, 180px);
	}

	.ioa-ssc-card-content {
		padding: 14px 16px;
	}

	.ioa-ssc-card-title {
		font-size: clamp(15px, 4.5cqi, 22px) !important;
		margin-bottom: 8px;
	}

	.ioa-ssc-card-description {
		font-size: clamp(12px, 3cqi, 14px);
		line-height: 1.6;
	}

	.ioa-ssc-header-icon {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   Media Queries — viewport para ajustes que no dependen del ancho del bloque
   ========================================================================== */

/* ---- Tablets y móviles (< 768px) ---- */
@media screen and (max-width: 768px) {
	:root {
		--ioa-ssc-radius: 16px;
	}

	.ioa-ssc-h-dots {
		bottom: 12px;
	}

	.ioa-ssc-h-dot {
		width: 7px;
		height: 7px;
	}

	.ioa-ssc-h-dot.is-active {
		width: 22px;
	}
}

/* ---- Teléfonos pequeños (< 480px) ---- */
@media screen and (max-width: 480px) {
	:root {
		--ioa-ssc-radius: 12px;
		--ioa-ssc-h-top:   5vh;
	}

	.ioa-ssc-h-dots {
		bottom: 8px;
		gap: 6px;
	}
}

/* ---- Landscape en teléfonos (altura muy reducida) ---- */
@media screen and (orientation: landscape) and (max-height: 500px) {
	:root {
		--ioa-ssc-h-top: 2vh;
		--ioa-ssc-radius: 10px;
	}

	.ioa-ssc-list {
		padding-bottom: 30px;
	}

	.ioa-ssc-h-dots {
		display: none; /* sin espacio en landscape extremo */
	}
}

/* ==========================================================================
   Accesibilidad: Movimiento reducido
   Usuarios con prefers-reduced-motion NO reciben animaciones.
   El JS también comprueba esto y omite todos los transforms.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ioa-ssc-card,
	.ioa-ssc-h-card,
	.ioa-ssc-card-media img,
	.ioa-ssc-h-dot {
		transition: none !important;
		animation: none !important;
		will-change: auto !important;
	}

	/* Horizontal: layout estático apilado en lugar de sticky */
	.ioa-ssc-h-section {
		height: auto !important;
	}

	.ioa-ssc-h-sticky {
		position: relative;
		top: auto;
		height: auto !important;
		-webkit-clip-path: none;
		clip-path: none;
	}

	.ioa-ssc-h-card {
		position: relative;
		transform: none !important;
		opacity: 1 !important;
		margin-bottom: 16px;
	}

	.ioa-ssc-h-card .ioa-ssc-card {
		height: auto;
	}

	.ioa-ssc-h-card .ioa-ssc-card-inner {
		height: auto;
		min-height: var(--ioa-ssc-card-height, 380px);
	}

	.ioa-ssc-h-dots {
		display: none;
	}

	/* Vertical: mostrar todas las tarjetas sin sticky */
	.ioa-ssc-card-wrapper {
		position: relative;
		top: auto !important;
	}
}

/* ==========================================================================
   Fallback para navegadores sin Container Queries
   ========================================================================== */

@supports not ( container-type: inline-size ) {
	@media ( max-width: 860px ) {
		.ioa-ssc-card-media { flex: 0 0 42%; max-width: 42%; }
	}

	@media ( max-width: 640px ) {
		.ioa-ssc-card-inner { flex-direction: column; min-height: unset; }
		.ioa-ssc-card-media { flex: none; max-width: 100%; height: 220px; }
		.ioa-ssc-card-content { padding: 18px 16px; }
	}

	@media ( max-width: 420px ) {
		.ioa-ssc-card-media { height: 160px; }
	}
}

/* ---- Sin soporte para sticky ---- */
@supports not ( position: sticky ) {
	.ioa-ssc-card-wrapper,
	.ioa-ssc-h-sticky {
		position: relative;
		top: auto !important;
	}
}