.stw-widget {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.stw-stage-ratio {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 46.14%;
}

.stw-stage {
	position: absolute;
	inset: 0;
	--stw-radius: 50px;
	--stw-active-w: 62.5%;
	--stw-badge-width: 70px;
	--stw-body-width: 56%;
	--stw-gap-number-title: 8px;
	--stw-gap-title-body: 10px;
}

/*
 * Reset agresivo: muchos temas aplican estilos globales a
 * [type=button], [type=submit], button (borde, radio, padding,
 * color, white-space) que rompen este layout absoluto. El selector
 * de atributo [type=button] tiene la MISMA especificidad que una
 * clase, así que sin !important el orden de carga decide el
 * ganador. Se fuerza con !important para no depender de eso.
 */
/*
 * Todas las tarjetas MIDEN y ESTÁN en el mismo lugar siempre (mismo
 * ancho/alto/posición, ancladas a la derecha como la activa de
 * siempre) — así el cambio de una a otra no es un salto de tamaño.
 * A pedido explícito, NO hay profundidad: nada de escala ni opacidad
 * por nivel, todas las tarjetas se ven "rectas" (100% tamaño, 100%
 * opacas). Lo único que cambia entre estar al frente o atrás en el
 * montón es la posición horizontal (translateX hacia la izquierda,
 * animado por GSAP) y el z-index. Lo que se MUESTRA arriba de esa
 * caja sí sigue siendo distinto según el estado: la activa muestra la
 * forma marrón completa (.stw-active-panel), las demás muestran el
 * lomo gris liso (.stw-spine) — ver más abajo.
 */
.stw-tab {
	position: absolute !important;
	top: 0 !important;
	/*
	 * Estos valores de "left"/"width" son un respaldo fijo en caso de
	 * que el JS no llegue a correr en absoluto. En condiciones
	 * normales el propio JS pisa left/width con un estilo inline
	 * calculado (ver stacked-tabs.js, setBaseSize), leyendo
	 * --stw-active-w con su propio fallback numérico — así el ancho
	 * real de la tarjeta NO depende de que el navegador resuelva
	 * correctamente calc()/var() dentro de esta hoja de estilos
	 * (algunos plugins de optimización/minificación de CSS pueden
	 * llegar a alterar variables CSS al combinar/minificar archivos,
	 * lo que dejaría el ancho en 0 y el widget invisible si dependiera
	 * solo de esta regla).
	 */
	left: 37.5%;
	width: 62.5%;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	display: block !important;
	white-space: normal !important;
	cursor: pointer;
	font: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	will-change: transform;
	opacity: 1;
	/*
	 * CRÍTICO: muchos temas le ponen "transition: all 0.2-0.4s" a TODOS
	 * los <button> por defecto (para el hover). Como .stw-tab ES un
	 * <button>, esa regla del tema intercepta cualquier cambio de
	 * transform/opacity que haga GSAP y el navegador lo vuelve a
	 * animar POR SU CUENTA con la transición CSS del tema, encima (o en
	 * vez) de la animación de GSAP — así el valor "instantáneo" que
	 * escribe gsap.set() deja de verse instantáneo, aunque el propio
	 * inline-style ya tenga el valor final correcto (confirmado en el
	 * sitio real: esto era la causa de que la forma pareciera "empezar
	 * grande" pese a que el scale chico se aplicaba bien y al toque).
	 * Se anula acá con !important para que nada del tema pueda
	 * pisarlo.
	 */
	transition: none !important;
}

.stw-tab:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/*
 * El lomo gris se ve en todas las tarjetas que quedan detrás en el
 * montón (todas menos la activa) — son del mismo tamaño que la
 * activa, solo que se ve una franja por el desfase horizontal, no la
 * forma marrón (esa es exclusiva de la pestaña activa).
 *
 * El cambio entre lomo gris y panel marrón es un salto de
 * display:none→block, NO un fundido de opacity. Se probó el fundido
 * (ver historial) y en el sitio real se veía el texto de la pestaña
 * saliente y el de la entrante SUPERPUESTOS y encimados un instante
 * (dos párrafos enteros uno arriba del otro, ilegibles) porque ambas
 * tarjetas ocupan casi el mismo lugar mientras se deslizan — el
 * fundido de un panel completo de texto no funciona acá, se ve peor
 * que el salto instantáneo. Con el salto solo hay UN panel visible a
 * la vez, sin superposición de contenido.
 */
.stw-spine {
	display: none;
	position: absolute;
	inset: 0;
	border-radius: var(--stw-radius);
	background-color: #818285;
	box-shadow: -6px 4px 10px rgba(0, 0, 0, .18);
	overflow: hidden;
}

.stw-tab:not(.is-active) .stw-spine {
	display: block;
}

.stw-spine-inner {
	position: absolute;
	left: 18px;
	top: 6%;
	bottom: 6%;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap !important;
	color: #F0F0F0;
	pointer-events: none;
	max-width: calc(100% - 36px);
	overflow: hidden;
}

.stw-spine-num {
	font-size: clamp(12px, 1.6vw, 16px);
	font-weight: 500;
	opacity: .85;
}

.stw-spine-label {
	font-size: clamp(8px, 1vw, 10px);
	letter-spacing: .06em;
	opacity: .8;
}

/*
 * El panel completo (forma marrón + número + título + texto) es
 * exclusivo de la pestaña activa; las que quedan atrás en el montón
 * muestran el lomo gris liso de arriba, no una copia tenue del panel
 * marrón.
 */
.stw-active-panel {
	display: none;
	position: absolute;
	inset: 0;
}

.stw-tab.is-active .stw-active-panel {
	display: block;
}

.stw-active-shape {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * .stw-ghost: el "fantasma" chico que viaja durante la activación (ver
 * stacked-tabs.js). Es un <div> aparte creado por JS, no un <button>,
 * así que en principio no debería heredar el "transition: all" que
 * algunos temas le ponen a los botones — pero se anula acá también
 * por las dudas, con la misma lógica que en .stw-tab.
 */
.stw-ghost {
	transition: none !important;
	opacity: 1;
}

.stw-active-shape svg {
	display: block;
	width: 100%;
	height: 100%;
}

.stw-active-content {
	position: absolute;
	inset: 0;
	padding: 6% 8%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #F7F7F7;
	pointer-events: none;
	text-align: left;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
}

.stw-badge {
	position: absolute;
	top: 5%;
	right: 6%;
	width: var(--stw-badge-width);
	max-width: 40%;
	font-size: 13px;
	letter-spacing: .05em;
	opacity: .85;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.stw-badge img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.stw-active-number {
	font-size: clamp(20px, 4vw, 34px);
	font-weight: 500;
	margin: 0 0 var(--stw-gap-number-title);
	min-width: 0;
}

/*
 * h3 trae estilos de tema (margin, font-family, color) que pueden
 * ganarle a la herencia; se resetean acá de forma explícita. El
 * selector de clase (.stw-active-title) siempre tiene más
 * especificidad que un simple "h3" de tema, así que no hace falta
 * !important como con los botones.
 */
.stw-active-title {
	font-family: inherit;
	font-size: clamp(14px, 2vw, 19px);
	font-weight: 500;
	color: inherit;
	letter-spacing: .01em;
	margin: 0 0 var(--stw-gap-title-body) 0;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.stw-active-body {
	font-size: clamp(10.5px, 1.3vw, 13px);
	line-height: 1.55;
	width: var(--stw-body-width);
	max-width: var(--stw-body-width);
	min-width: 0;
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

/*
 * En mobile, el efecto de pestañas apiladas "espiando" por el costado
 * no funciona: el texto en writing-mode vertical queda en franjas tan
 * angostas que no se alcanza a leer. En vez de forzar ese mismo
 * layout a la fuerza, en pantallas chicas se cambia la estructura a
 * un acordeón vertical: cada pestaña inactiva es una barra horizontal
 * de ancho completo con su número y título en texto normal, y la
 * pestaña activa se expande como una tarjeta debajo. El JS no
 * necesita cambios: solo reordena y agrega/quita la clase is-active,
 * que es lo único de lo que depende este modo.
 */
@media (max-width: 640px) {
	.stw-stage-ratio {
		height: auto;
		padding-top: 0;
	}

	.stw-stage {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.stw-tab {
		position: relative !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
		/* En escritorio el JS anima transform/opacity para el apilado
		   con profundidad; ese efecto no aplica al acordeón vertical de
		   mobile, así que se neutraliza aquí. */
		transform: none !important;
		opacity: 1 !important;
	}

	/* Solo la activa muestra el panel completo, las demás son la barra
	   del lomo con texto horizontal (definido más abajo). */
	.stw-tab:not(.is-active) .stw-spine {
		display: flex;
		position: static;
		inset: auto;
		align-items: center;
		padding: 14px 18px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
		min-height: 56px;
	}

	.stw-spine-inner {
		position: static;
		left: auto;
		top: auto;
		bottom: auto;
		display: flex;
		align-items: center;
		gap: 10px;
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal !important;
		max-width: 100%;
		overflow: visible;
	}

	.stw-spine-label {
		display: inline;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.stw-spine-inner::after {
		content: '';
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		margin-left: auto;
		opacity: .7;
		flex-shrink: 0;
	}

	.stw-tab.is-active .stw-active-panel {
		position: relative;
		min-height: 340px;
	}

	.stw-tab.is-active .stw-active-shape {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.stw-tab.is-active .stw-active-content {
		position: relative;
		z-index: 1;
		min-height: 340px;
		padding: 24px 20px;
		overflow: visible;
	}

	.stw-badge {
		max-width: 22%;
	}
}