/**
 * Estilos principales de Tuko Group Buying
 *
 * @package Tuko_Group_Buying
 * @generated 2026-02-26 15:49:29
 */
/* ============================================
   Modulo: 01-variables.css
   ============================================ */

/**
 * Estilos principales de Tuko Group Buying
 *
 * @package Tuko_Group_Buying
 */

/* Variables de colores de marca Tuko */
:root {
	--tuko-primary: #3D50F2; /* Azul Ultramarino */
	--tuko-primary-light: #A4B3F2;
	--tuko-primary-very-light: #E0E7FF;
	--tuko-primary-dark: #141826;
	--tuko-secondary: #14C492; /* Verde Menta */
	--tuko-secondary-light: #74E0C2;
	--tuko-secondary-very-light: #C3F5E7;
	--tuko-secondary-dark: #06444B;
	--tuko-accent: #CE3333; /* Rojo Persa */
	--tuko-accent-light: #FDA8A8;
	--tuko-accent-very-light: #FFDEDE;
	--tuko-accent-dark: #5E1E27;
	--tuko-neutral-white: #FFFFFF;
	--tuko-neutral-light: #F5F5F5;
	--tuko-neutral-medium-light: #D9D9D9;
	--tuko-neutral-medium: #A0A0A0;
	--tuko-neutral-dark: #4D4D4D;
	--tuko-neutral-black: #222222;
	
	/* Variables de espaciado (en rem para escalado responsive) */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */
	--spacing-xl: 2rem;      /* 32px */
	--spacing-2xl: 3rem;     /* 48px */
	
	/* Variables de tamaños de fuente (en rem) */
	--font-size-xs: 0.75rem;   /* 12px */
	--font-size-sm: 0.875rem;  /* 14px */
	--font-size-base: 1rem;    /* 16px */
	--font-size-md: 1.125rem;   /* 18px */
	--font-size-lg: 1.25rem;    /* 20px */
	--font-size-xl: 1.75rem;    /* 28px */
	--font-size-2xl: 2rem;      /* 32px */
	--font-size-3xl: 2.625rem;  /* 42px */
	
	/* Variables de border radius */
	--radius-sm: 0.375rem;   /* 6px */
	--radius-md: 0.5rem;     /* 8px */
	--radius-lg: 0.75rem;    /* 12px */
	--radius-xl: 1rem;       /* 16px */
	
	/* Variables de breakpoints (para uso en media queries) */
	--breakpoint-mobile: 480px;
	--breakpoint-tablet: 768px;
	--breakpoint-laptop: 1024px;
	--breakpoint-desktop: 1440px;
	
	/* Variables de contenedores */
	--container-max-width: 25rem; /* 400px */
	--modal-max-width-sm: 22.5rem; /* 360px */
	--modal-max-width-md: 25rem;    /* 400px */
	--modal-max-width-lg: 30rem;    /* 480px */
}



/* ============================================
   Modulo: 02-widget.css
   ============================================ */

/* Contenedor principal del widget */
.tuko-group-buying-widget {
	margin: var(--spacing-xl) 0 var(--spacing-lg) 0; /* Alineado a la izquierda, sin auto */
	position: relative !important;
	max-width: var(--container-max-width); /* Ancho máximo limitado */
	width: 100%;
	/* Usar la variable CSS si está definida, sino usar el fallback */
	font-family: var(--tuko-font-family, "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	overflow: visible;
}

.tuko-group-buying-widget * {
	/* Heredar la fuente del widget a todos los elementos, pero permitir que se sobrescriba con !important */
	font-family: inherit;
}

.tuko-widget-inner {
	background: var(--tuko-neutral-white);
	border-radius: var(--tuko-border-radius, var(--radius-lg));
	padding: var(--spacing-lg);
	color: var(--tuko-neutral-black);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
	border: 1px solid var(--tuko-neutral-medium-light);
	box-sizing: border-box;
	overflow: visible;
	font-family: inherit; /* Heredar la fuente personalizada */
}

/* Badge superior - Oculto o más sutil */
.tuko-widget-badge {
	display: none; /* Ocultamos el badge para un diseño más limpio */
}

.tuko-widget-badge-icon {
	font-size: var(--font-size-sm);
}

.tuko-widget-badge-text {
	white-space: nowrap;
}

/* Cinta "Grupo cerrado" en la esquina superior derecha */
.tuko-widget-closed-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	background: #dc2626;
	color: #ffffff;
	padding: var(--spacing-sm) 1.25rem;
	border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
	font-size: var(--font-size-xs);
	font-weight: 600;
	font-family: var(--tuko-font-family, "Mona Sans SemiExpanded", "Mona Sans", sans-serif) !important;
	z-index: 10;
	box-shadow: 0 0.125rem 0.5rem rgba(220, 38, 38, 0.3);
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	transform: translate(0, 0);
}

.tuko-widget-closed-ribbon::before {
	content: '';
	position: absolute;
	top: 0;
	left: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 30px 0;
	border-color: transparent #b91c1c transparent transparent;
	z-index: 1;
}

.tuko-widget-closed-ribbon::after {
	content: '';
	position: absolute;
	bottom: -15px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 0 15px;
	border-color: transparent transparent transparent #b91c1c;
	z-index: 1;
}

.tuko-widget-closed-ribbon-text {
	position: relative;
	z-index: 2;
	display: inline-block;
	letter-spacing: 0.3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Cinta "Unido" en la esquina superior derecha */
.tuko-widget-joined-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	background: #3D50F2;
	color: #ffffff;
	padding: var(--spacing-sm) 1.25rem;
	border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
	font-size: var(--font-size-xs);
	font-weight: 600;
	font-family: var(--tuko-font-family, "Mona Sans SemiExpanded", "Mona Sans", sans-serif) !important;
	z-index: 10;
	box-shadow: 0 0.125rem 0.5rem rgba(61, 80, 242, 0.3);
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	transform: translate(0, 0);
}

.tuko-widget-joined-ribbon::before {
	content: '';
	position: absolute;
	top: 0;
	left: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 30px 0;
	border-color: transparent #2d3fb8 transparent transparent;
	z-index: 1;
}

.tuko-widget-joined-ribbon::after {
	content: '';
	position: absolute;
	bottom: -15px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 0 15px;
	border-color: transparent transparent transparent #2d3fb8;
	z-index: 1;
}

.tuko-widget-joined-ribbon-text {
	position: relative;
	z-index: 2;
	display: inline-block;
	letter-spacing: 0.3px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Header del widget */
.tuko-widget-header {
	margin-bottom: 0.5rem;
}

.tuko-widget-header-main {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tuko-widget-title {
	font-size: var(--font-size-md); /* Text medium */
	font-weight: 600; /* Semi Bold */
	margin: 0;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	color: var(--tuko-neutral-black);
}

.tuko-price-highlight {
	font-size: var(--font-size-lg); /* Text large */
	font-weight: 700; /* Bold */
	margin-left: var(--spacing-xs);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	color: var(--tuko-neutral-black);
}

.tuko-widget-subtitle {
	margin: 0 0 0.25rem 0;
	font-size: 1.25rem; /* Reducido de 1.5rem */
	font-weight: 600; /* Semi Bold */
	color: var(--tuko-neutral-black);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-price-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	margin-top: 0;
}

.tuko-price-label-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.tuko-price-label {
	font-size: 1.125rem; /* Igual que en la vista previa */
	font-weight: 600; /* Semi Bold, igual que en la vista previa */
	color: var(--tuko-neutral-dark);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Asegurar que el precio original tenga el mismo tamaño que la etiqueta cuando están en la misma fila */
.tuko-price-label-row .tuko-price-original {
	font-size: 1.125rem !important;
}

.tuko-price-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.tuko-price-original {
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: #9ca3af;
	text-decoration: line-through;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	display: inline;
}

/* Cuando el precio está solo (sin descuento), hacerlo más grande y sin tachado */
.tuko-price-label-row .tuko-price-original:only-child {
	font-size: 1.125rem !important; /* Mismo tamaño que tuko-price-label */
	font-weight: 700;
	color: var(--tuko-neutral-black);
	text-decoration: none !important; /* Asegurar que no esté tachado */
}

/* Tema oscuro: precio en blanco cuando está solo */
.tuko-theme-dark .tuko-price-label-row .tuko-price-original:only-child {
	color: #ffffff !important;
	text-decoration: none !important;
}

.tuko-price-discounted-wrapper {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.tuko-price-discounted {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--tuko-neutral-black);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	line-height: 1.2;
}

.tuko-price-discounted-value {
	display: inline-block;
}

.tuko-price-discount-badge {
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: #13A279 !important;
	font-family: var(--tuko-font-family, "Mona Sans SemiExpanded", "Mona Sans", sans-serif) !important;
	line-height: 1.2;
}

/* Reducir tamaño del precio descontado y badge en modo separado - SOBRESCRIBIR TODO */
.tuko-widget-wrapper .tuko-price-discounted,
.tuko-widget-wrapper .tuko-price-discounted-value {
	font-size: 1.75rem !important; /* Un poco más grande: 20px */
	font-weight: 700 !important;
}

.tuko-widget-wrapper .tuko-price-discount-badge,
.tuko-widget-wrapper .tuko-price-discount-percentage {
	font-size: 1.4rem !important; /* Más grande: 16px */
	font-weight: 600 !important;
}

/* En modo separado, el widget debe tener bordes rectos (0px) */
.tuko-widget-wrapper .tuko-widget-inner {
	border-radius: 0 !important;
}

/* En modo separado, las etiquetas "Unido" y "Cerrado" deben usar el border-radius del widget */
.tuko-widget-wrapper .tuko-widget-joined-ribbon,
.tuko-widget-wrapper .tuko-widget-closed-ribbon {
	border-radius: 0 var(--tuko-border-radius, 12px) 0 var(--tuko-border-radius, 12px) !important;
}

.tuko-price-discount-percentage {
	display: inline-block;
}

/* Contenido del widget */
.tuko-widget-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: calc(-1 * var(--spacing-lg));
}

/* Contador de participantes */
.tuko-participants-counter {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-xs);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	line-height: normal !important; /* Eliminar line-height restrictivo */
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	min-height: auto !important;
	position: relative !important;
}

.tuko-current-participants,
.tuko-separator,
.tuko-min-participants {
	color: var(--tuko-neutral-black);
	font-size: var(--font-size-md); /* Text medium - más grande y negrita */
	font-weight: 700; /* Bold */
	line-height: 0 !important; /* Forzar line-height a 0 para eliminar espacio vertical */
	display: inline-block;
	vertical-align: baseline;
	margin: 0 !important; /* Asegurar que no tenga márgenes */
	padding: 0 !important; /* Asegurar que no tenga padding */
}

.tuko-participants-label {
	color: var(--tuko-neutral-black);
	font-weight: 400; /* Normal */
	font-size: var(--font-size-sm); /* Text small - más pequeño */
	line-height: 0 !important; /* Forzar line-height a 0 para eliminar espacio vertical */
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
	margin-left: 0.25rem !important; /* Pequeño espacio horizontal después del número */
}

/* Cambiar line-height a 0 para elementos dentro del contador de participantes */
/* Sobrescribir cualquier estilo inline que pueda estar aplicando line-height: 0.875rem */
.tuko-participants-counter p,
.tuko-participants-counter *,
.tuko-participants-counter p[style*="line-height"],
.tuko-participants-counter *[style*="line-height"],
.tuko-group-buying-widget .tuko-participants-counter p,
.tuko-group-buying-widget .tuko-participants-counter * {
	line-height: 0 !important;
}

/* Sobrescribir específicamente estilos inline de WordPress o temas */
.tuko-group-buying-widget p[style*="line-height: 0.875rem"],
.tuko-group-buying-widget p[style*="line-height:0.875rem"],
.tuko-group-buying-widget *[style*="line-height: 0.875rem"],
.tuko-group-buying-widget *[style*="line-height:0.875rem"] {
	line-height: 0 !important;
}

/* Estado del grupo */
.tuko-group-status {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--font-size-sm); /* Text small */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-group-status-label {
	text-transform: none;
	letter-spacing: normal;
}

.tuko-group-status-value {
	font-weight: 500; /* Medium */
	color: var(--tuko-neutral-black);
	transition: color 0.3s ease;
}

.tuko-group-status-value.tuko-status-closed-text {
	color: #dc2626;
	font-weight: 600;
	position: relative;
	padding-left: 1.25rem;
}

.tuko-group-status-value.tuko-status-closed-text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0.75rem;
	height: 0.75rem;
	background: #dc2626;
	border-radius: 50%;
	animation: pulse-red 2s ease-in-out infinite;
}

@keyframes pulse-red {
	0%, 100% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}
	50% {
		opacity: 0.7;
		transform: translateY(-50%) scale(1.1);
	}
}

/* Barra de progreso */
.tuko-progress-container {
	margin: 2rem 0 0 0;
}

.tuko-progress-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: var(--spacing-sm);
	line-height: normal !important; /* Eliminar line-height restrictivo */
	position: relative !important; /* Para asegurar que los márgenes funcionen */
}

/* Si hay elementos que necesitan estar en fila (como el contador y el texto de plazas restantes) */
.tuko-progress-header > .tuko-participants-counter {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	display: inline-flex !important;
	min-height: auto !important;
	position: relative !important;
}

.tuko-progress-header > .tuko-progress-remaining {
	align-self: center;
	margin-top: 0;
	margin-left: auto;
}

.tuko-progress-bar-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0;
	width: 100%;
}

.tuko-progress-bar {
	position: relative;
	flex: 1;
	height: 0.5rem;
	background: var(--tuko-neutral-light);
	border-radius: var(--tuko-border-radius, var(--spacing-xs));
	overflow: hidden;
}

.tuko-progress-fill {
	height: 100%;
	background: var(--tuko-secondary); /* Verde Menta sólido, sin gradiente */
	border-radius: var(--tuko-border-radius, var(--spacing-xs));
	transition: width 0.3s ease;
}

.tuko-progress-percentage {
	display: flex;
	align-items: baseline;
	gap: 0.125rem;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	flex-shrink: 0;
	white-space: nowrap;
	line-height: 1;
}

.tuko-progress-percentage-value {
	font-size: var(--font-size-base); /* Text regular */
	font-weight: 600; /* Semi Bold */
	color: var(--tuko-neutral-black);
	line-height: 1;
}

.tuko-progress-percentage-symbol {
	font-size: var(--font-size-xs); /* Text tiny */
	font-weight: 500; /* Medium */
	color: var(--tuko-neutral-dark);
	line-height: 1;
}

.tuko-progress-remaining {
	font-size: var(--font-size-sm); /* Text small - mismo tamaño que el contador */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	text-align: right;
	line-height: 1.5;
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
	flex-shrink: 0;
}

.tuko-progress-remaining strong {
	font-weight: 600; /* Semi Bold para el número */
	font-size: var(--font-size-sm); /* Mismo tamaño base */
	line-height: 1.5;
}

/* Temporizador */
.tuko-timer-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* Centrado horizontal */
	gap: var(--spacing-sm);
	padding: 0;
	margin-top: calc(-1 * var(--spacing-xs));
	background: transparent;
	border-radius: 0;
	width: 100%;
}

.tuko-timer-label {
	font-size: 0.95rem !important; /* Aumentado de 0.75rem para mejor legibilidad */
	font-weight: 500; /* Medium */
	color: var(--tuko-neutral-black);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	text-align: center; /* Centrado */
	width: 100%;
}

.tuko-timer {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: 95% !important; /* Modo separado: un poco más ancho */
	background: var(--tuko-neutral-white);
	border-radius: var(--tuko-border-radius, var(--radius-lg));
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
	padding: var(--spacing-md) var(--spacing-sm);
	overflow: hidden;
	margin: 0 auto; /* Centrar el temporizador */
}

.tuko-timer-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	flex: 1;
	padding: var(--spacing-sm) var(--spacing-xs);
	position: relative;
}

/* Separador vertical entre bloques (excepto el último) */
.tuko-timer-block:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 2px !important;
	min-width: 2px !important;
	max-width: 2px !important;
	background: #686868 !important; /* Color específico solicitado */
	height: 60%;
	transform: translateX(0);
	will-change: transform;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.tuko-timer-value {
	font-size: 2rem; /* H4 desktop - 32px (2rem) según guía de tipografía */
	font-weight: 700; /* Bold */
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	color: #222222; /* Color específico solicitado */
	line-height: 1.2;
	text-align: center;
	display: block;
	margin-bottom: var(--spacing-xs);
}

.tuko-timer-unit {
	font-size: var(--font-size-xs); /* Text tiny - mostrar palabras completas por defecto */
	font-weight: 400; /* Normal */
	letter-spacing: 0;
	text-transform: none;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	color: var(--tuko-neutral-dark); /* Más oscuro para mejor legibilidad */
	display: block;
	text-align: center;
}

/* Por defecto, NO mostrar ::before (solo se mostrará en el media query de 370px para modo separado) */
/* Solo modo separado */
.tuko-widget-wrapper .tuko-timer-unit::before {
	content: none;
	display: none;
}

/* Mostrar abreviaciones en el temporizador solo por debajo de 370px - SOLO MODO SEPARADO */
/* Selectores específicos para el widget */
@media (max-width: 370px) {
	/* Solo aplicar a modo separado - usar selector específico de .tuko-widget-wrapper */
	/* Centrar verticalmente el bloque del temporizador */
	.tuko-widget-wrapper .tuko-timer-block {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* Centrar verticalmente el número */
	.tuko-widget-wrapper .tuko-timer-value {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin-bottom: 0.8rem !important; /* Separar los números de las abreviaciones */
	}
	
	.tuko-widget-wrapper .tuko-timer-unit {
		font-size: 0 !important; /* Ocultar texto completo */
		line-height: 0 !important;
		overflow: visible !important; /* Permitir que el ::before sea visible */
		position: relative !important;
		height: auto !important;
		min-height: 1.5em !important; /* Asegurar altura mínima para el ::before */
		text-indent: -9999px !important; /* Mover el texto fuera de la vista */
		width: 100% !important;
		color: transparent !important; /* Hacer el texto transparente */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	.tuko-widget-wrapper .tuko-timer-unit::before {
		content: attr(data-short) !important; /* Mostrar la abreviación */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: var(--font-size-xs) !important;
		font-weight: 400 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important; /* Usar fuente personalizada */
		color: inherit !important; /* Heredar el color del temporizador personalizado */
		text-align: center !important;
		line-height: 1.2 !important;
		position: absolute !important; /* Posicionar absolutamente sobre el texto oculto */
		top: 50% !important; /* Centrar verticalmente */
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 100% !important;
		white-space: nowrap !important;
		margin: 0 !important;
		padding: 0 !important;
		text-indent: 0 !important; /* Restaurar indentación para el ::before */
		opacity: 1 !important; /* Asegurar que sea completamente opaco */
		visibility: visible !important; /* Asegurar que sea visible */
		z-index: 1 !important; /* Asegurar que esté por encima */
	}
}

/* Campo de email */
.tuko-email-container {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.1s, margin 0.3s ease;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.tuko-email-container.tuko-email-expanded {
	max-height: 15.625rem;
	opacity: 1;
	margin: 0 0 1.25rem 0;
	overflow: visible;
}

.tuko-email-label {
	font-size: var(--font-size-sm); /* Text small */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-black);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-email-input {
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--tuko-neutral-medium-light);
	font-size: var(--font-size-sm); /* Text small */
	width: 100%;
	max-width: 100%;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	background: var(--tuko-neutral-white);
	color: var(--tuko-neutral-black);
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.tuko-email-input:focus {
	outline: none;
	border-color: var(--tuko-primary);
	box-shadow: 0 0 0 0.125rem var(--tuko-primary-very-light);
}

.tuko-email-input::placeholder {
	color: var(--tuko-neutral-medium);
}

.tuko-email-help {
	font-size: var(--font-size-xs); /* Text tiny */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark); /* Más oscuro para mejor legibilidad */
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Mensajes de estado */
.tuko-status-message {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-size: var(--font-size-sm); /* Text small */
	padding: 0.75rem 0.875rem;
	border-radius: var(--radius-sm);
	display: none;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-weight: 400;
	line-height: 1.4;
	animation: fadeInMessage 0.3s ease;
}

@keyframes fadeInMessage {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOutMessage {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-5px);
	}
}

.tuko-status-message.fading-out {
	animation: fadeOutMessage 0.2s ease;
}

.tuko-status-success {
	display: block;
	background: var(--tuko-secondary-very-light); /* Verde Menta muy claro */
	color: var(--tuko-secondary-dark); /* Verde oscuro para texto */
	border: 1px solid var(--tuko-secondary); /* Verde Menta */
}

.tuko-status-error {
	display: block;
	background: var(--tuko-accent-very-light); /* Rojo Persa muy claro */
	color: var(--tuko-accent-dark); /* Rojo oscuro para texto */
	border: 1px solid var(--tuko-accent); /* Rojo Persa */
}

.tuko-status-info {
	display: block;
	background: var(--tuko-primary-very-light); /* Azul Ultramarino muy claro */
	color: var(--tuko-primary-dark); /* Azul oscuro para texto */
	border: 1px solid var(--tuko-primary); /* Azul Ultramarino */
}



/* ============================================
   Modulo: 03-buttons.css
   ============================================ */

/* Estados del widget (abierto/cerrado) */
.tuko-status-closed {
	opacity: 1;
}

/* Eliminado: fondo rojo cuando el grupo está cerrado - solo mostrar etiqueta "Cerrado" */
.tuko-status-closed .tuko-widget-inner {
	/* Mantener el fondo normal, sin cambios */
}

.tuko-status-closed .tuko-btn-primary:not(.tuko-product-page-cta) {
	background: var(--tuko-neutral-medium);
	border-color: var(--tuko-neutral-medium);
	box-shadow: none;
	cursor: default;
}

.tuko-btn-primary:disabled {
	cursor: default !important;
}

.tuko-btn-primary:disabled:hover,
.tuko-status-closed .tuko-btn-primary:not(.tuko-product-page-cta):hover,
.tuko-btn-primary[disabled]:hover {
	background: var(--tuko-neutral-medium) !important;
	border-color: var(--tuko-neutral-medium) !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: default !important;
}

/* Quitar hover también para botones con clase tuko-join-btn o tuko-leave-btn cuando están deshabilitados */
#tuko-join-btn:disabled:hover,
#tuko-join-btn[disabled]:hover {
	background: var(--tuko-neutral-medium) !important;
	border-color: var(--tuko-neutral-medium) !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: default !important;
}

/* Botón "Salir del grupo" deshabilitado cuando el grupo está cerrado */
.tuko-leave-btn:disabled,
.tuko-leave-btn[disabled],
.tuko-status-closed .tuko-leave-btn {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	background-color: #9CA3AF !important; /* Color gris suave */
	border-color: #9CA3AF !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Quitar hover del botón "Salir del grupo" cuando está deshabilitado */
.tuko-leave-btn:disabled:hover,
.tuko-leave-btn[disabled]:hover,
.tuko-status-closed .tuko-leave-btn:hover {
	opacity: 0.5 !important;
	background-color: #9CA3AF !important;
	border-color: #9CA3AF !important;
	transform: none !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* Botón de compartir deshabilitado */
.tuko-share-btn-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	position: relative;
}

.tuko-share-btn-disabled::after {
	content: 'Grupo completo';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 10;
}

.tuko-share-btn-disabled:hover::after {
	opacity: 1;
}

/* Botones de acción */
.tuko-widget-actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0;
	width: 100%;
	align-items: stretch;
}

/* Cuando el usuario está unido, cambiar el orden: compartir arriba, salirse abajo */
.tuko-widget-actions:has(.tuko-leave-btn) {
	flex-direction: column;
}

.tuko-widget-actions:has(.tuko-leave-btn) .tuko-share-btn {
	order: -1;
	/* CRÍTICO: Desactivar cualquier animación antigua cuando tiene shimmer */
	animation: none !important;
}

.tuko-widget-actions:has(.tuko-leave-btn) .tuko-widget-join-section {
	order: 1;
}

.tuko-widget-join-section {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	width: 100%;
}

/* Cuando el usuario está unido (botón abandonar), ocupa todo el ancho en desktop */
.tuko-widget-join-section .tuko-leave-btn {
	width: 100% !important;
	flex: 1 1 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

/* Cuando hay botón "Salir del grupo", el contenedor no debe tener gap */
.tuko-widget-join-section:has(.tuko-leave-btn) {
	gap: 0 !important;
}

/* En móvil (480px o menos), ajustar el botón "Salir del grupo" */
@media (max-width: 480px) {
	/* Asegurar que el contenedor padre ocupe todo el ancho */
	.tuko-widget-actions {
		width: 100% !important;
		align-items: stretch !important;
	}
	
	/* Cuando el selector de cantidad está oculto, no debe ocupar espacio */
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display: none"],
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display:none"] {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
	}
	
	/* Cuando hay botón "Salir del grupo", centrar el contenedor - mayor especificidad */
	.tuko-widget-actions .tuko-widget-join-section:has(.tuko-leave-btn),
	.tuko-group-buying-widget .tuko-widget-join-section:has(.tuko-leave-btn),
	#tuko-group-buying-widget .tuko-widget-join-section:has(.tuko-leave-btn),
	.tuko-widget-join-section:has(.tuko-leave-btn) {
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		flex-direction: row !important;
	}
	
	/* Cuando el selector de cantidad está oculto Y hay botón leave, centrar */
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display: none"]):has(.tuko-leave-btn),
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display:none"]):has(.tuko-leave-btn) {
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Botón leave con mayor especificidad para móvil */
	.tuko-widget-actions .tuko-widget-join-section .tuko-leave-btn,
	.tuko-group-buying-widget .tuko-widget-join-section .tuko-leave-btn,
	#tuko-group-buying-widget .tuko-widget-join-section .tuko-leave-btn,
	.tuko-widget-join-section .tuko-leave-btn {
		width: 100% !important;
		flex: 0 0 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 1.5rem !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* Forzar que el contenedor solo tenga el botón leave visible */
	.tuko-widget-join-section:has(.tuko-leave-btn) > *:not(.tuko-leave-btn) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	/* Asegurar que el contenedor actions no tenga padding que desplace */
	.tuko-widget-actions:has(.tuko-leave-btn) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Cuando el selector de cantidad está oculto (usuario unido), el botón ocupa todo el ancho */
.tuko-widget-quantity-input[style*="display: none"] ~ .tuko-btn,
.tuko-widget-quantity-input[style*="display: none"] + .tuko-btn {
	width: 100% !important;
	flex: 1;
}

.tuko-share-btn {
	width: 100%;
	height: 52px !important; /* Misma altura que botón unirme y cantidad */
	padding: 0 1.5rem;
	justify-content: center;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease; /* Transición suave para hover */
}

/* Animación antigua eliminada - ahora se usa tuko-shimmer en widget-styles.php */

/* Efecto antiguo eliminado - ahora se usa el efecto shimmer de Shopify */
/* El efecto shimmer se aplica mediante la clase .tuko-share-btn-joined en widget-styles.php */

/* Efecto antiguo eliminado - ahora se usa el efecto shimmer de Shopify */
/* El efecto shimmer se aplica mediante la clase .tuko-share-btn-joined en widget-styles.php */

/* Efecto hover chulo para botón compartir */
.tuko-share-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(61, 80, 242, 0.3);
	transition: all 0.3s ease;
}

.tuko-share-btn:hover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(61, 80, 242, 0.1) 0%, rgba(61, 80, 242, 0.2) 100%);
	border-radius: inherit;
	opacity: 1;
	z-index: -1;
	pointer-events: none;
}

.tuko-share-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(61, 80, 242, 0.2);
}

/* Efecto hover chulo para botón unirme */
.tuko-join-btn,
.tuko-widget-join-section .tuko-join-btn,
#tuko-join-btn,
.tuko-btn-primary.tuko-join-btn {
	transition: all 0.3s ease !important; /* Transición suave para hover */
	position: relative !important;
	overflow: hidden !important;
}

.tuko-join-btn:hover,
.tuko-widget-join-section .tuko-join-btn:hover,
#tuko-join-btn:hover,
.tuko-btn-primary.tuko-join-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(61, 80, 242, 0.3) !important;
	transition: all 0.3s ease !important;
}

.tuko-join-btn:hover::after,
.tuko-widget-join-section .tuko-join-btn:hover::after,
#tuko-join-btn:hover::after,
.tuko-btn-primary.tuko-join-btn:hover::after {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(61, 80, 242, 0.1) 0%, rgba(61, 80, 242, 0.2) 100%) !important;
	border-radius: inherit !important;
	opacity: 1 !important;
	z-index: -1 !important;
	pointer-events: none !important;
}

.tuko-join-btn:active,
.tuko-widget-join-section .tuko-join-btn:active,
#tuko-join-btn:active,
.tuko-btn-primary.tuko-join-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(61, 80, 242, 0.2) !important;
}

.tuko-widget-quantity-input {
	/* Valores por defecto - el width se maneja con media queries responsive */
	width: 100px !important; /* Modo separado: más estrecho (desktop) */
	height: 52px !important; /* Modo separado: más alto */
	padding: 0 0.5rem;
	border: 1px solid var(--tuko-neutral-medium-light);
	border-radius: var(--tuko-border-radius, var(--radius-md));
	font-size: var(--font-size-base);
	font-weight: 500;
	text-align: center;
	background-color: var(--tuko-neutral-white);
	color: var(--tuko-neutral-black);
	box-sizing: border-box;
	-moz-appearance: textfield;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* El botón "Unirme" debe tener la misma altura que el botón "Compartir" y ocupar el espacio restante */
.tuko-widget-join-section .tuko-join-btn {
	flex: 1;
	height: 52px !important; /* Modo separado: más alto */
	min-width: 100px !important; /* Modo separado: más estrecho */
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* El botón "Abandonar" también debe tener la misma altura que el botón "Compartir" */
.tuko-widget-join-section .tuko-leave-btn {
	height: 52px !important; /* Misma altura que botón compartir en desktop */
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.tuko-widget-quantity-input::-webkit-inner-spin-button,
.tuko-widget-quantity-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tuko-widget-quantity-input:focus {
	outline: none;
	border-color: var(--tuko-primary);
	box-shadow: 0 0 0 3px rgba(61, 80, 242, 0.1);
}

/* Eliminar outline y efectos de focus en botones de cantidad (modo separado) */
.tuko-quantity-decrement,
.tuko-quantity-increment {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.tuko-quantity-decrement:focus,
.tuko-quantity-increment:focus,
.tuko-quantity-decrement:active,
.tuko-quantity-increment:active {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
}

/* Ajustes para botón de cantidad en modo separado */
/* Acercar más los signos + y - dentro del botón - SOBRESCRIBIR estilos inline */
.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-decrement,
#tuko-group-buying-widget .tuko-widget-quantity-input .tuko-quantity-decrement,
.tuko-widget-quantity-input .tuko-quantity-decrement {
	justify-content: center !important; /* Centrar el signo - */
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 14px !important; /* Reducir ancho para acercar más el signo */
}

.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-increment,
#tuko-group-buying-widget .tuko-widget-quantity-input .tuko-quantity-increment,
.tuko-widget-quantity-input .tuko-quantity-increment {
	justify-content: center !important; /* Centrar el signo + */
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 14px !important; /* Reducir ancho para acercar más el signo */
}

/* Reducir font-size y font-weight del número en el input - SOBRESCRIBIR estilos inline */
.tuko-widget-wrapper .tuko-widget-quantity-input input[type="text"],
#tuko-group-buying-widget .tuko-widget-quantity-input input[type="text"],
.tuko-widget-quantity-input input[type="text"] {
	font-size: 1.1rem !important; /* Reducido de 1.25rem a 1.1rem */
	font-weight: 500 !important; /* Reducido de 700 */
}

.tuko-widget-quantity-input:disabled {
	background-color: var(--tuko-neutral-light);
	cursor: not-allowed;
	opacity: 0.6;
}

.tuko-btn {
	padding: 0.875rem 1.5rem;
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-base); /* Text regular */
	font-weight: 600; /* Semi Bold */
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-btn-primary {
	background: #222222; /* Color específico solicitado */
	color: var(--tuko-neutral-white);
	box-shadow: none;
	border: 1px solid #222222;
	transition: all 0.3s ease; /* Transición suave para hover */
	position: relative;
	overflow: hidden;
}

.tuko-btn-primary:hover:not(.tuko-join-btn) {
	background: #4D4D4D; /* Color específico solicitado para hover */
	border-color: #4D4D4D;
	transform: none;
}

/* Asegurar que el hover del botón unirme tenga prioridad */
.tuko-btn-primary.tuko-join-btn:hover {
	background: var(--tuko-join-button-color, #222222) !important; /* Mantener color original */
	border-color: var(--tuko-join-button-color, #222222) !important;
}

.tuko-btn-primary:active {
	transform: none;
	background: #222222;
}

.tuko-btn-secondary {
	background: var(--tuko-primary);
	color: var(--tuko-neutral-white);
	border: 1px solid var(--tuko-primary);
}

.tuko-btn-secondary:hover {
	background: var(--tuko-primary-light);
	border-color: var(--tuko-primary-light);
	color: var(--tuko-neutral-white);
}

.tuko-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 18px; /* Aumentado para evitar que se corte el SVG en la parte superior */
	flex-shrink: 0; /* Espacio reducido entre el icono y el texto en modo separado */
	overflow: visible; /* Permitir que el SVG se muestre completamente sin cortes */
}

.tuko-share-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible; /* Asegurar que el SVG no se corte */
}

.tuko-share-icon svg path {
	stroke: currentColor;
	stroke-width: 0.8;
	fill: currentColor;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Mensaje de compartir */
.tuko-share-message {
	margin: 0.75rem 0 0;
	font-size: 0.95rem !important; /* Tamaño optimizado para legibilidad */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark); /* Más oscuro para mejor legibilidad */
	text-align: center;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Responsive - Botones siempre verticales para mejor UX */

/* Animaciones */
@keyframes tuko-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

.tuko-timer.tuko-warning {
	animation: tuko-pulse 2s infinite;
}



/* ============================================
   Modulo: 04-modals.css
   ============================================ */

/* Modal de éxito */
.tuko-success-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: hidden; /* Prevenir scroll y espacios en blanco */
}

.tuko-success-modal[aria-hidden="false"] {
	display: flex;
}

.tuko-success-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7); /* Más oscuro como el modal de compartir */
	backdrop-filter: blur(8px); /* Más borroso como el modal de compartir */
	z-index: 0; /* Detrás del contenido */
	animation: tukoModalOverlayFadeIn 0.3s ease;
}

.tuko-success-modal-content {
	position: relative;
	background: var(--tuko-neutral-white);
	border-radius: var(--radius-xl);
	padding: var(--spacing-2xl) var(--spacing-xl);
	max-width: var(--modal-max-width-lg);
	width: 100%;
	text-align: center;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
	animation: tukoModalFadeIn 0.3s ease;
	box-sizing: border-box;
	z-index: 1; /* Encima del overlay */
}

@keyframes tukoModalFadeIn {
	0% {
		opacity: 0;
		transform: scale(0.92) translateY(1.5rem);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes tukoModalFadeOut {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.95) translateY(-0.625rem);
	}
}

.tuko-success-modal-icon {
	margin: 0 auto var(--spacing-lg);
	width: 3rem; /* Un poco más pequeño */
	height: 3rem; /* Un poco más pequeño */
	display: flex;
	align-items: center;
	justify-content: center;
}

.tuko-success-modal-icon svg {
	width: 100%;
	height: 100%;
}

.tuko-success-modal-title {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-3xl); /* Un poco más pequeño */
	font-weight: 600; /* Semi Bold */
	color: #222222;
	margin: 0 0 var(--spacing-lg) 0; /* Más margen inferior */
	line-height: 1.1; /* 110% según guía de tipografía para headings */
	letter-spacing: -0.02em; /* -2% según guía */
}

.tuko-success-modal-title-italic {
	font-family: "Roboto Serif", serif; /* Heading Font 2 - Roboto Serif */
	font-style: italic;
	font-size: var(--font-size-3xl); /* Un poco más pequeño */
	font-weight: 600; /* Semi Bold */
	display: block;
	line-height: 1.1; /* 110% según guía */
	letter-spacing: -0.02em; /* -2% según guía */
}

.tuko-success-modal-text {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-base); /* Text regular */
	font-weight: 400; /* Normal */
	color: var(--tuko-neutral-dark);
	line-height: 1.5;
	margin: 0 0 var(--spacing-xl) 0;
}

.tuko-success-modal-button {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-base); /* Text regular */
	font-weight: 600; /* Semi Bold */
	color: var(--tuko-neutral-white);
	background: var(--tuko-primary); /* Azul Ultramarino */
	border: none;
	border-radius: var(--radius-md);
	padding: 0.875rem var(--spacing-xl);
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	max-width: 17.5rem;
}

.tuko-success-modal-button:hover {
	background: var(--tuko-primary-light);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.75rem rgba(61, 80, 242, 0.3);
}

.tuko-success-modal-button:active {
	transform: translateY(0);
}

/* Responsive para móviles */
@media (max-width: 480px) {
	.tuko-success-modal {
		padding: 1rem;
	}
	
	.tuko-success-modal-content {
		padding: var(--spacing-xl) var(--spacing-lg);
		max-width: 100%;
	}

	.tuko-success-modal-title {
		font-size: var(--font-size-2xl); /* Más pequeño en móvil pero manteniendo proporción */
	}

	.tuko-success-modal-title-italic {
		font-size: var(--font-size-2xl); /* Más pequeño en móvil pero manteniendo proporción */
	}

	.tuko-success-modal-text {
		font-size: var(--font-size-sm);
	}
	
	/* Separar más el contenedor de hitos de las categorías y tags en móvil */
	/* Agregar margen inferior al contenedor de categorías/tags */
	.wp-block-column .wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-6c531013.wp-block-group-is-layout-flex,
	.wp-block-column .wp-block-woocommerce-product-meta {
		margin-bottom: 2rem !important; /* Espacio inferior para separar de hitos */
	}
	
	/* Agregar margen superior al contenedor de hitos */
	.wp-block-column .tuko-tiers-section.tuko-tiers-separated,
	.wp-block-column .tuko-tiers-section,
	.wp-block-column .tuko-tiers-separated,
	body .wp-block-column .tuko-tiers-section.tuko-tiers-separated,
	body .wp-block-column .tuko-tiers-section,
	body .wp-block-column .tuko-tiers-separated {
		margin-top: 2.5rem !important; /* Espacio superior (40px) */
		margin-bottom: 1.5rem !important;
	}
	
	/* Subir ligeramente los signos + y - y el número en el botón de cantidad (modo separado) */
	.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-decrement,
	.tuko-widget-wrapper .tuko-widget-quantity-input .tuko-quantity-increment,
	.tuko-widget-wrapper .tuko-widget-quantity-input input[type="text"] {
		transform: translateY(-2px) !important; /* Subir ligeramente hacia arriba */
	}
}

/* Modal de compartir */
.tuko-share-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10001;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: hidden; /* Prevenir scroll y espacios en blanco */
}

.tuko-share-modal[aria-hidden="false"] {
	display: flex;
}

.tuko-share-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7); /* Más oscuro */
	backdrop-filter: blur(8px); /* Más borroso */
	z-index: 0; /* Detrás del contenido */
}

.tuko-share-modal-content {
	position: relative;
	background: var(--tuko-neutral-white);
	border-radius: var(--radius-xl);
	max-width: var(--modal-max-width-md); /* 400px - Tamaño por defecto para laptop/portátil */
	width: 100%;
	overflow: hidden;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
	animation: tukoModalFadeIn 0.3s ease;
	box-sizing: border-box;
	max-height: calc(100vh - 2.5rem);
	z-index: 1; /* Encima del overlay */
}

/* Desktop grande (> 1440px) - Escalado proporcional más grande */
@media (min-width: 1441px) {
	/* Factor de escala: 1.2x (400px * 1.2 = 480px) */
	.tuko-share-modal-content {
		max-width: 480px !important; /* 400px * 1.2 = proporción exacta */
		width: 480px !important; /* Forzar ancho */
		max-height: calc(100vh - 3rem) !important; /* Escalado proporcional del margen */
		border-radius: 14.4px !important; /* 12px * 1.2 */
	}
	
	/* Header escalado proporcionalmente */
	.tuko-share-modal-header {
		height: 7.5rem !important; /* 6.25rem (100px) * 1.2 = 120px */
		padding: 0.6rem !important; /* 0.5rem (8px) * 1.2 = 9.6px */
	}
	
	/* Botón cerrar escalado */
	.tuko-share-modal-close {
		width: 2.4rem !important; /* 2rem (32px) * 1.2 = 38.4px */
		height: 2.4rem !important;
		top: 0.9rem !important; /* 0.75rem (12px) * 1.2 = 14.4px */
		right: 0.9rem !important;
	}
	
	.tuko-share-modal-close svg {
		width: 1.2rem !important; /* 1rem (16px) * 1.2 = 19.2px */
		height: 1.2rem !important;
	}
	
	/* Icono circular escalado proporcionalmente */
	.tuko-share-modal-icon {
		width: 7.2rem !important; /* 6rem (96px) * 1.2 = 115.2px */
		height: 7.2rem !important;
		margin: -3.75rem auto 0.9rem !important; /* -3.125rem (50px) * 1.2 = -60px, 0.75rem * 1.2 */
	}
	
	.tuko-share-modal-icon-svg {
		width: 144px !important; /* 120px * 1.2 = 144px */
		height: 144px !important;
	}
	
	/* Body escalado proporcionalmente */
	.tuko-share-modal-body {
		padding: 1.05rem 1.2rem 1.2rem 1.2rem !important; /* 0.875rem (14px) * 1.2 = 16.8px, 1rem (16px) * 1.2 = 19.2px */
	}
	
	/* Títulos escalados proporcionalmente */
	.tuko-share-modal-title {
		font-size: 21.6px !important; /* 18px * 1.2 = 21.6px */
		margin: 0 0 0.6rem 0 !important; /* 0.5rem (8px) * 1.2 = 9.6px */
		line-height: 1.2 !important;
	}
	
	.tuko-share-modal-title-italic {
		font-size: 21.6px !important; /* 18px * 1.2 = 21.6px */
		margin-top: 0.15rem !important; /* 0.125rem * 1.2 */
	}
	
	.tuko-share-modal-text {
		font-size: 16.8px !important; /* 14px * 1.2 = 16.8px */
		line-height: 1.4 !important; /* Mantener proporción */
		margin: 0 0 1.05rem 0 !important; /* 0.875rem (14px) * 1.2 = 16.8px */
	}
	
	/* Grid de redes sociales escalado */
	.tuko-share-social-grid {
		column-gap: 1.2rem !important; /* 1rem (16px) * 1.2 = 19.2px */
		row-gap: 0.6rem !important; /* 0.5rem (8px) * 1.2 = 9.6px */
		margin-bottom: 1.05rem !important; /* 0.875rem (14px) * 1.2 = 16.8px */
		max-width: 24rem !important; /* 20rem (320px) * 1.2 = 384px */
	}
	
	.tuko-share-social-icon svg {
		width: 3rem !important; /* 2.5rem (40px) * 1.2 = 48px */
		height: 3rem !important;
	}
	
	.tuko-share-social-label {
		font-size: 16.8px !important; /* 14px * 1.2 = 16.8px */
		margin-top: 0.45rem !important; /* 0.375rem (6px) * 1.2 = 7.2px */
	}
	
	.tuko-share-social-item {
		gap: 0.45rem !important; /* 0.375rem (6px) * 1.2 = 7.2px */
		padding: 0.6rem !important; /* 0.5rem (8px) * 1.2 = 9.6px */
	}
	
	/* Botón copiar escalado proporcionalmente */
	.tuko-share-copy-button {
		font-size: 16.8px !important; /* 14px * 1.2 = 16.8px */
		padding: 0.75rem 1.2rem !important; /* 0.625rem (10px) * 1.2 = 12px, 1rem (16px) * 1.2 = 19.2px */
		gap: 0.45rem !important; /* 0.375rem (6px) * 1.2 = 7.2px */
		border-radius: 7.2px !important; /* 6px * 1.2 = 7.2px */
	}
	
	.tuko-share-copy-button svg {
		width: 19.2px !important; /* 16px * 1.2 = 19.2px */
		height: 19.2px !important;
	}
}

.tuko-share-modal-content.closing {
	animation: tukoModalFadeOut 0.2s ease;
}

.tuko-share-modal-header {
	position: relative;
	height: 6.25rem; /* Más alto para que la imagen llegue hasta la mitad del círculo (5rem icono + 1.25rem extra) */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 0.5rem;
	overflow: hidden;
}

	.tuko-share-modal-header-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, transparent 0%, rgba(61, 80, 242, 1) 90%, rgba(61, 80, 242, 1) 100%);
		z-index: 1;
	}

.tuko-share-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: none;
	border-radius: 50%;
	color: #374151;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	z-index: 10;
	box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
}

.tuko-share-modal-close:hover {
	background: #f3f4f6;
	transform: scale(1.05);
}

.tuko-share-modal-close svg {
	width: 1rem;
	height: 1rem;
}

.tuko-share-modal-body {
	padding: 0.875rem var(--spacing-md); /* Más compacto */
	text-align: center;
}

.tuko-share-modal-icon {
	margin: -3.75rem auto 0.75rem; /* Icono centrado en el borde del header de 6.25rem (mitad arriba mitad abajo) */
	width: 6rem; /* Más grande */
	height: 6rem;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tuko-share-modal-icon-circle {
	position: relative;
	z-index: 2;
	width: 120px;
	height: 120px;
	background: var(--tuko-neutral-light);
	border-radius: 50%;
	display: none; /* Temporalmente oculto */
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.tuko-share-modal-icon-svg {
	width: 120px; /* Más grande para que coincida con el círculo de 6rem */
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.tuko-share-modal-icon-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tuko-share-modal-icon-circle img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.tuko-share-modal-title {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-md); /* Más pequeño */
	font-weight: 700;
	color: #222222;
	margin: 0 0 0.5rem 0; /* Menos separación */
	line-height: 1.2;
}

.tuko-share-modal-title-italic {
	font-family: "Roboto Serif", serif;
	font-style: italic;
	font-size: var(--font-size-md); /* Más pequeño */
	font-weight: 600;
	display: block;
	margin-top: 0.125rem; /* Menos separación */
}

.tuko-share-modal-text {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-xs); /* Más pequeño */
	font-weight: 400;
	color: var(--tuko-neutral-dark);
	line-height: 1.4; /* Menos espacio entre líneas */
	margin: 0 0 0.875rem 0; /* Menos separación */
}

.tuko-share-modal-text strong {
	font-weight: 700;
}

.tuko-share-social-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 1rem; /* Menos espacio */
	row-gap: 0.5rem; /* Menos espacio */
	margin-bottom: 0.875rem; /* Menos separación */
	width: 100%;
	max-width: 20rem; /* Más compacto */
	margin-left: auto;
	margin-right: auto;
	justify-items: center;
}

/* Primera fila: Facebook, WhatsApp, X */
.tuko-share-social-item:nth-child(1) {
	grid-column: 1 / 3;
}

.tuko-share-social-item:nth-child(2) {
	grid-column: 3 / 5;
}

.tuko-share-social-item:nth-child(3) {
	grid-column: 5 / 7;
}

/* Segunda fila: Instagram y Telegram centrados entre los de arriba */
.tuko-share-social-item:nth-child(4) {
	grid-column: 2 / 4;
	grid-row: 2;
}

.tuko-share-social-item:nth-child(5) {
	grid-column: 4 / 6;
	grid-row: 2;
}

.tuko-share-social-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease;
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	min-width: 0;
	width: 100%;
}

.tuko-share-social-item:hover {
	transform: translateY(-0.125rem);
}

.tuko-share-social-icon {
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	background: transparent;
}

.tuko-share-social-icon svg {
	width: 2.5rem; /* Más pequeño */
	height: 2.5rem;
	display: block;
}

.tuko-share-social-label {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-xs);
	font-weight: 500;
	color: var(--tuko-neutral-dark);
	white-space: nowrap;
	text-align: center;
	width: 100%;
	min-width: max-content;
}

.tuko-share-copy-button {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: var(--font-size-xs); /* Más pequeño */
	font-weight: 600;
	color: var(--tuko-neutral-white);
	background: var(--tuko-primary);
	border: none;
	border-radius: var(--radius-md);
	padding: 0.625rem 1rem; /* Más compacto */
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.tuko-share-copy-button:hover {
	background: var(--tuko-primary-light);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.75rem rgba(61, 80, 242, 0.3);
}

.tuko-share-copy-button:active {
	transform: translateY(0);
}

.tuko-share-copy-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-md);
	height: var(--spacing-md);
	flex-shrink: 0;
}

.tuko-share-copy-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Responsive - Breakpoint para portátiles (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.tuko-group-buying-widget {
		max-width: clamp(20rem, 90%, var(--container-max-width));
		margin: clamp(1.5rem, 3vw, var(--spacing-xl)) 0 clamp(1rem, 2vw, var(--spacing-lg)) 0;
	}
	
	/* Agregar padding al wrapper en laptop - reducir superior, mantener laterales e inferior */
	.tuko-tiers-separated .tuko-tiers-wrapper {
		padding-top: 10px !important;
		padding-bottom: 30px !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
	
	/* Centrar el header y agregar márgenes en laptop */
	.tuko-tiers-separated .tuko-tiers-header {
		margin: 30px auto 24px auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
		width: fit-content !important;
	}
	
	.tuko-widget-inner {
		padding: clamp(1rem, 2vw, var(--spacing-lg));
		border-radius: clamp(var(--radius-md), 1.5vw, var(--radius-lg));
	}
	
	.tuko-widget-title {
		font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-md));
	}
	
	.tuko-price-discounted {
		font-size: clamp(1.5rem, 3vw, var(--font-size-xl));
	}
	
	/* Reducir tamaño del precio descontado en modo separado - SOBRESCRIBIR */
	.tuko-widget-wrapper .tuko-price-discounted {
		font-size: 2.25rem !important; /* Un poco más grande: 20px */
	}
	
	/* Asegurar que el badge de descuento y el porcentaje tengan el mismo tamaño */
	.tuko-widget-wrapper .tuko-price-discount-badge {
		font-size: 1.4rem !important; /* Mismo tamaño que el porcentaje - incluye el texto "OFF" */
		color: #13A279 !important; /* Siempre verde para el badge "OFF" */
	}
	
	.tuko-widget-wrapper .tuko-price-discount-percentage {
		font-size: 1.4rem !important; /* Mismo tamaño que el badge para que "OFF" y el % coincidan */
	}
	
	/* Asegurar que el porcentaje y el texto "OFF" tengan el mismo tamaño */
	.tuko-widget-wrapper .tuko-price-discount-percentage {
		font-size: 1.4rem !important; /* Mismo tamaño que el badge */
	}
	
	.tuko-timer-value {
		font-size: clamp(1.5rem, 3vw, 2rem);
	}
	
	.tuko-btn {
		padding: clamp(0.75rem, 1.5vw, 0.875rem) clamp(1.25rem, 2.5vw, 1.5rem);
		font-size: clamp(var(--font-size-sm), 1.8vw, var(--font-size-base));
	}
}

/* Responsive - Breakpoint para tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
	.tuko-group-buying-widget {
		max-width: clamp(18rem, 95%, var(--container-max-width));
		margin: clamp(1.25rem, 4vw, var(--spacing-xl)) 0 clamp(0.875rem, 3vw, var(--spacing-lg)) 0;
	}
	
	/* Agregar padding al wrapper en tablet - reducir superior, mantener laterales e inferior */
	.tuko-tiers-separated .tuko-tiers-wrapper {
		padding-top: 10px !important;
		padding-bottom: 20px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		/* Centrar las tarjetas horizontalmente - asegurar centrado perfecto */
		justify-content: center !important;
		display: flex !important;
		/* Sobrescribir cualquier margen inline del template */
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		/* Asegurar que el contenido interno esté centrado */
		align-items: center !important;
		/* Sobrescribir cualquier estilo inline que pueda estar causando desplazamiento */
		text-align: center !important;
	}
	
	/* Asegurar que las tarjetas dentro del wrapper estén perfectamente centradas */
	.tuko-tiers-separated .tuko-tiers-wrapper > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Centrar el header y agregar márgenes en tablet */
	.tuko-tiers-separated .tuko-tiers-header {
		margin: 20px auto 24px auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
		width: fit-content !important;
		max-width: calc(100% - 40px) !important;
		box-sizing: border-box !important;
	}
	
	.tuko-widget-inner {
		padding: clamp(0.875rem, 3vw, var(--spacing-lg));
	}
	
	.tuko-widget-title {
		font-size: clamp(var(--font-size-sm), 2.5vw, var(--font-size-md));
	}
	
	.tuko-price-discounted {
		font-size: clamp(1.25rem, 4vw, var(--font-size-xl));
	}
	
	/* Asegurar que el badge de descuento y el porcentaje tengan el mismo tamaño en tablet */
	.tuko-widget-wrapper .tuko-price-discount-badge {
		font-size: 1.4rem !important; /* Mismo tamaño que el porcentaje - incluye el texto "OFF" */
	}
	
	.tuko-widget-wrapper .tuko-price-discount-percentage {
		font-size: 1.4rem !important; /* Mismo tamaño que el badge para que "OFF" y el % coincidan */
	}
	
	/* Reducir tamaño del precio descontado en modo separado - SOBRESCRIBIR */
	.tuko-widget-wrapper .tuko-price-discounted {
		font-size: 1.25rem !important; /* Un poco más grande: 20px */
	}
	
	/* Asegurar que el badge de descuento y el porcentaje tengan el mismo tamaño en tablet */
	.tuko-widget-wrapper .tuko-price-discount-badge {
		font-size: 1.4rem !important; /* Mismo tamaño que el porcentaje - incluye el texto "OFF" */
	}
	
	.tuko-widget-wrapper .tuko-price-discount-percentage {
		font-size: 1.4rem !important; /* Mismo tamaño que el badge para que "OFF" y el % coincidan */
	}
	
	.tuko-timer-value {
		font-size: clamp(1.25rem, 4vw, 1.75rem);
	}
}

/* Desktop (1025px en adelante) - Agregar padding al wrapper y márgenes al header */
@media (min-width: 1025px) {
	/* Agregar padding al wrapper en desktop - reducir superior, mantener laterales e inferior */
	.tuko-tiers-separated .tuko-tiers-wrapper {
		padding-top: 10px !important;
		padding-bottom: 40px !important;
		padding-left: 50px !important;
		padding-right: 50px !important;
	}
	
	/* Centrar el header y agregar márgenes en desktop */
	.tuko-tiers-separated .tuko-tiers-header {
		margin: 40px auto 24px auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
		width: fit-content !important;
	}
}

/* Responsive - Breakpoint para móvil (hasta 480px) */
/* En móvil y tablet, el widget debe ocupar el 100% del ancho */
@media (max-width: 1024px) {
	.tuko-widget-wrapper .tuko-group-buying-widget {
		max-width: 100% !important; /* Ocupar 100% del ancho en móvil y tablet */
		width: 100% !important;
	}
	
	/* Asegurar que el wrapper también ocupe el 100% en móvil y tablet */
	.tuko-widget-wrapper {
		max-width: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	.tuko-group-buying-widget {
		max-width: 100% !important; /* Ocupar 100% del ancho en móvil */
		width: 100% !important;
		margin: clamp(1rem, 5vw, var(--spacing-xl)) 0 clamp(0.75rem, 4vw, var(--spacing-lg)) 0;
	}
	
	/* Reducir altura de botones en móvil */
	.tuko-widget-quantity-input {
		height: 44px !important; /* Reducido de 52px */
	}
	
	.tuko-widget-quantity-input input[type="text"] {
		height: 44px !important; /* Reducido de 52px */
	}
	
	.tuko-widget-join-section .tuko-join-btn {
		height: 44px !important; /* Reducido de 52px */
	}
	
	.tuko-share-btn {
		height: 44px !important; /* Reducido de 52px */
	}
	
	/* Asegurar que el contenedor padre ocupe todo el ancho */
	.tuko-widget-actions {
		width: 100% !important;
		align-items: stretch !important;
	}
	
	/* Cuando el selector de cantidad está oculto, no debe ocupar espacio */
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display: none"],
	.tuko-widget-join-section .tuko-widget-quantity-input[style*="display:none"] {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
	}
	
	/* Cuando hay botón "Salir del grupo", centrar el contenedor */
	.tuko-widget-join-section:has(.tuko-leave-btn) {
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Cuando el selector de cantidad está oculto Y hay botón leave, centrar */
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display: none"]):has(.tuko-leave-btn),
	.tuko-widget-join-section:has(.tuko-widget-quantity-input[style*="display:none"]):has(.tuko-leave-btn) {
		justify-content: center !important;justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Botón "Salir del grupo" misma altura que "Compartir" en móvil */
	.tuko-widget-join-section .tuko-leave-btn {
		height: 44px !important; /* Misma altura que botón compartir en móvil */
		width: 100% !important;
		margin: 0 auto !important;
		padding: 0 1.5rem !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* Forzar que el contenedor solo tenga el botón leave visible */
	.tuko-widget-join-section:has(.tuko-leave-btn) > *:not(.tuko-leave-btn) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}
	
	/* Asegurar que el contenedor actions no tenga padding que desplace */
	.tuko-widget-actions:has(.tuko-leave-btn) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* Reducir font-size del temporizador "Cierra en" */
	.tuko-timer-label {
		font-size: 0.9rem !important; /* Reducido para móvil */
	}
	
	/* Reducir font-size del temporizador (números) */
	.tuko-timer-block {
		font-size: 0.85rem !important; /* Reducido */
	}
	
	/* Reducir font-size de "x/y personas unidas" */
	.tuko-current-participants,
	.tuko-separator,
	.tuko-min-participants,
	.tuko-participants-label {
		font-size: 0.875rem !important; /* Reducido */
	}
	
	/* Reducir font-size de "Quedan x plazas" */
	.tuko-progress-remaining {
		font-size: 0.75rem !important; /* Reducido */
	}
	
	.tuko-progress-remaining strong {
		font-size: 0.75rem !important; /* Reducido */
	}

	/* Reducir un poco el font-size del porcentaje en móvil */
	.tuko-progress-percentage-value {
		font-size: 0.875rem !important; /* Reducido ligeramente */
	}

	/* Asegurar que el wrapper también ocupe el 100% en móvil */
	.tuko-widget-wrapper {
		max-width: 100% !important;
		width: 100% !important;
	}
	
	.tuko-widget-inner {
		padding: clamp(0.75rem, 4vw, var(--spacing-lg));
		border-radius: clamp(var(--radius-md), 2vw, var(--radius-lg));
	}
	
	/* En modo separado móvil, mantener bordes rectos */
	.tuko-widget-wrapper .tuko-widget-inner {
		border-radius: 0 !important;
	}
	
	.tuko-widget-wrapper .tuko-widget-joined-ribbon,
	.tuko-widget-wrapper .tuko-widget-closed-ribbon {
		border-radius: 0 var(--tuko-border-radius, 12px) 0 var(--tuko-border-radius, 12px) !important;
	}
	
	.tuko-widget-title {
		font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md));
	}
	
	.tuko-price-discounted {
		font-size: clamp(1.125rem, 5vw, var(--font-size-xl));
	}
	
	/* Reducir tamaño del precio descontado en modo separado - SOBRESCRIBIR */
	.tuko-widget-wrapper .tuko-price-discounted {
		font-size: 1.25rem !important; /* Un poco más grande: 20px */
	}
	
	/* Asegurar que el badge de descuento y el porcentaje tengan el mismo tamaño en móvil */
	.tuko-widget-wrapper .tuko-price-discount-badge {
		font-size: 1.4rem !important; /* Mismo tamaño que el porcentaje - incluye el texto "OFF" */
	}
	
	.tuko-widget-wrapper .tuko-price-discount-percentage {
		font-size: 1.4rem !important; /* Mismo tamaño que el badge para que "OFF" y el % coincidan */
	}
	
	.tuko-timer-value {
		font-size: clamp(1.5rem, 6vw, 2rem) !important; /* Aumentado para mejor legibilidad en móvil */
	}
	
	/* Aumentar tamaño de números del temporizador en modo separado para móvil */
	.tuko-widget-wrapper .tuko-timer-value {
		font-size: clamp(1.75rem, 7vw, 2.25rem) !important; /* Más grande para modo separado en móvil */
	}
	
	.tuko-btn {
		padding: clamp(0.625rem, 3vw, 0.875rem) clamp(1rem, 4vw, 1.5rem);
		font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md)) !important; /* Aumentado de xs/base a sm/md para mejor legibilidad */
	}
	
	/* Asegurar que los botones específicos también tengan el tamaño aumentado */
	.tuko-join-btn,
	.tuko-leave-btn,
	.tuko-share-btn {
		font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md)) !important; /* Aumentado para mejor legibilidad */
	}
	
	/* Aumentar tamaño de fuente del contador de participantes y plazas restantes en móvil */
	.tuko-current-participants,
	.tuko-separator,
	.tuko-min-participants {
		font-size: var(--font-size-base) !important; /* Aumentado de sm a base (1rem) */
	}
	
	/* Reducir font-size de participantes en tarjetas completas y por alcanzar en móvil */
	/* Usar selectores más específicos para sobrescribir cualquier estilo inline */
	.tuko-tiers-section .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-simple,
	.tuko-tiers-section .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-simple,
	body .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-simple,
	body .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-simple {
		font-size: 12px !important; /* Cambiado de 0.9em a 12px */
	}
	
	.tuko-tiers-section .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tiers-section .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count,
	body .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	body .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 8.2px !important; /* Reducido de 9.661px a 8.2px */
		line-height: 1.5 !important;
	}
	
	.tuko-tiers-section .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tiers-section .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text,
	body .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	body .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 8.2px !important; /* Reducido de 9.661px a 8.2px */
		line-height: 1.5 !important;
	}
	
	/* Para 2 hitos en móvil: aumentar font-size de "x personas" en alcanzado y pending */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	/* Para 3 hitos en móvil: aumentar font-size de "x personas" en alcanzado y pending */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	/* Para 4 hitos en móvil: aumentar font-size de "x personas" en alcanzado y pending */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	/* Para 5 hitos en móvil: aumentar font-size de "x personas" en alcanzado y pending */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 10px !important; /* Aumentado de 8.2px a 10px */
	}
	
	.tuko-participants-label {
		font-size: var(--font-size-sm) !important; /* Aumentado de xs a sm (0.875rem) */
	}
	
	.tuko-progress-remaining {
		font-size: var(--font-size-sm) !important; /* Aumentado de xs a sm (0.875rem) */
	}
	
	.tuko-progress-remaining strong {
		font-size: var(--font-size-sm) !important; /* Aumentado de xs a sm (0.875rem) */
	}
	
	/* Aumentar tamaño de otros textos del widget en móvil */
	.tuko-price-label {
		font-size: 1rem !important; /* Aumentado para mejor legibilidad */
	}
	
	.tuko-price-original {
		font-size: 1.25rem !important; /* Aumentado para mejor legibilidad */
	}
	
	.tuko-widget-subtitle {
		font-size: 1.25rem !important; /* Aumentado para mejor legibilidad */
	}
	
	.tuko-timer-label {
		font-size: 0.9rem !important; /* Reducido para móvil */
	}
	
	.tuko-timer-unit {
		font-size: var(--font-size-xs) !important; /* Mantener pequeño pero legible */
	}
	
	.tuko-share-message {
		font-size: 0.875rem !important; /* Aumentado para mejor legibilidad en móvil */
	}
}

/* Media query para pantallas pequeñas (420px y menos) - ajustar campo de cantidad */
@media (max-width: 420px) {
	/* Hacer el campo de cantidades más flexible y responsive */
	.tuko-widget-quantity-input,
	.tuko-widget-wrapper .tuko-widget-quantity-input,
	#tuko-group-buying-widget .tuko-widget-quantity-input {
		width: auto !important; /* Permitir que se ajuste */
		min-width: 80px !important; /* Ancho mínimo */
		max-width: 120px !important; /* Ancho máximo */
		flex: 0 1 auto !important; /* Permitir que se ajuste pero no crezca demasiado */
	}

	/* Ajustar el botón de unirse para que ocupe más espacio */
	.tuko-widget-join-section .tuko-join-btn,
	.tuko-widget-wrapper .tuko-widget-join-section .tuko-join-btn,
	#tuko-group-buying-widget .tuko-widget-join-section .tuko-join-btn {
		flex: 1 1 auto !important; /* Permitir que crezca más */
		min-width: 80px !important; /* Ancho mínimo reducido */
	}
	
}

/* Media query para pantallas muy pequeñas (370px y menos) */
@media (max-width: 370px) {
	/* Aumentar tamaño de fuente del contador de participantes y plazas restantes */
	.tuko-current-participants,
	.tuko-separator,
	.tuko-min-participants {
		font-size: var(--font-size-sm) !important; /* Más grande en pantallas muy pequeñas */
	}
	
	.tuko-participants-label {
		font-size: 0.755rem !important; /* Más grande (14px) */
	}
	
	.tuko-progress-remaining {
		font-size: 0.755rem !important; /* Más grande (14px) */
	}
	
	.tuko-progress-remaining strong {
		font-size: 0.755rem !important; /* Más grande (14px) */
	}
	
	/* Las abreviaciones del temporizador se manejan en el media query de 370px más arriba */
}

/* Responsive para móvil - Modal de compartir (solo por debajo de 550px) */
@media (max-width: 550px) {
	.tuko-share-modal {
		padding: 0.5rem 0.5rem; /* Menos padding para estirar más */
		align-items: center;
		justify-content: center;
	}
	
	.tuko-share-modal-content {
		max-width: 90%; /* Más ancho */
		max-height: calc(100vh - 1rem); /* Más altura */
		overflow-y: auto; /* Permitir scroll si es necesario */
		overflow-x: hidden;
		border-radius: var(--radius-lg);
		display: flex;
		flex-direction: column;
	}
	
	.tuko-share-modal-header {
		height: 4.5rem; /* Más alto para círculo más grande de 4.5rem */
		padding: 0.5rem;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		flex-shrink: 0;
	}
	
	.tuko-share-modal-close {
		top: 0.375rem;
		right: 0.375rem;
		width: 1.375rem;
		height: 1.375rem;
		padding: 0;
	}
	
	.tuko-share-modal-close svg {
		width: 0.6875rem;
		height: 0.6875rem;
	}
	
	.tuko-share-modal-body {
		padding: 0 0.75rem 0.75rem 0.75rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 0.5rem; /* Más separación */
		padding-top: 2.25rem; /* Espacio para el icono superpuesto (mitad del círculo de 4.5rem) */
		flex-shrink: 0; /* No estirar, mantener tamaño natural */
	}
	
	.tuko-share-modal-icon {
		margin: -4.5rem auto 0.5rem; /* Centrado: mitad en header (2.25rem) y mitad en body (2.25rem) */
		width: 4.5rem; /* Más grande */
		height: 4.5rem;
		flex-shrink: 0;
	}
	
	.tuko-share-modal-icon-svg {
		width: 4.5rem; /* Más grande */
		height: 4.5rem;
	}
	
	.tuko-share-modal-title {
		font-size: clamp(1rem, 3vw, 1.125rem);
		margin: 0 0 0.375rem 0;
		line-height: 1.25;
		flex-shrink: 0;
	}
	
	.tuko-share-modal-title-italic {
		font-size: clamp(1rem, 3vw, 1.125rem);
	}
	
	.tuko-share-modal-text {
		font-size: clamp(0.75rem, 2vw, 0.8125rem);
		margin: 0 0 0.75rem 0;
		line-height: 1.4;
		flex-shrink: 0;
	}
	
	.tuko-share-social-grid {
		column-gap: 0.5rem;
		row-gap: 0.375rem;
		margin: 0 0 0.75rem 0;
		max-width: 100%;
		flex-shrink: 0;
	}
	
	.tuko-share-social-item {
		padding: 0.1875rem;
		gap: 0.25rem;
	}
	
	.tuko-share-social-icon svg {
		width: clamp(3rem, 8vw, 3.25rem); /* Más grandes */
		height: clamp(3rem, 8vw, 3.25rem);
	}
	
	.tuko-share-social-label {
		font-size: clamp(0.5625rem, 1.8vw, 0.625rem);
		line-height: 1.2;
	}
	
	.tuko-share-copy-button {
		font-size: clamp(0.75rem, 2.2vw, 0.8125rem);
		padding: 0.625rem 1rem;
		gap: 0.3125rem;
		border-radius: var(--radius-sm);
		margin-top: auto; /* Empujar hacia abajo */
		flex-shrink: 0;
	}
	
	.tuko-share-copy-icon {
		width: clamp(0.75rem, 2vw, 0.875rem);
		height: clamp(0.75rem, 2vw, 0.875rem);
	}
}

/* Los estilos de 550px se aplican también para móviles más pequeños */

/* Botón "¿Cómo funciona?" dentro del modal de unirse (para WP_DEBUG / módulos) */
.tuko-join-modal-how-it-works {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
.tuko-join-how-it-works-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #ffffff !important;
	background: linear-gradient(to right, #2563eb, #4f46e5);
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif);
	transition: all 0.2s ease;
}
.tuko-join-how-it-works-btn:hover {
	background: linear-gradient(to right, #1d4ed8, #4338ca);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

/* ========== Modal "¿Cómo funciona?" (WooCommerce) ==========
 * Si WP_DEBUG: solo se cargan módulos; este bloque debe estar aquí
 * para que el modal se vea igual que en tuko-group-buying.css
 * Especificidad con #tuko-how-it-works-modal para ganar al tema.
 */
#tuko-how-it-works-modal.tuko-how-it-works-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483647 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	box-sizing: border-box;
	isolation: isolate;
}
#tuko-how-it-works-modal [class*="spinner"],
#tuko-how-it-works-modal [class*="loader"] {
	display: none !important;
}
#tuko-how-it-works-modal .tuko-how-it-works-content {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	max-width: 380px;
	min-width: 320px;
	width: 100%;
	padding: 1.5rem 1.75rem;
	box-sizing: border-box;
	flex-shrink: 0;
	margin: auto;
	isolation: isolate;
	z-index: 1;
}
#tuko-how-it-works-modal .tuko-how-it-works-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color 0.2s;
	z-index: 1;
}
#tuko-how-it-works-modal .tuko-how-it-works-close:hover {
	color: #111827;
}
#tuko-how-it-works-modal .tuko-how-it-works-body {
	text-align: center;
	padding-top: 0.5rem;
	overflow: visible;
}
#tuko-how-it-works-modal .tuko-how-it-works-logo {
	max-width: 80px;
	height: auto;
	margin-bottom: 1rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#tuko-how-it-works-modal .tuko-how-it-works-title {
	margin: 0 0 0.25rem 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: #111827;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
#tuko-how-it-works-modal .tuko-how-it-works-tagline {
	margin: 0 0 1.25rem 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #6b7280;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
#tuko-how-it-works-modal .tuko-how-it-works-list {
	margin: 0 0 1.25rem 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
#tuko-how-it-works-modal .tuko-how-it-works-step {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin-bottom: 1rem;
	padding: 0.875rem 1rem;
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border-radius: 10px;
	border-left: 3px solid #2563eb;
}
#tuko-how-it-works-modal .tuko-how-it-works-step:last-child {
	margin-bottom: 0;
}
#tuko-how-it-works-modal .tuko-how-it-works-number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	background: linear-gradient(to right, #2563eb, #4f46e5);
	color: #fff;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	font-family: inherit;
}
#tuko-how-it-works-modal .tuko-how-it-works-text {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #374151;
	font-weight: 500;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}
#tuko-how-it-works-modal .tuko-how-it-works-footer {
	margin: 0 0 1.25rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #4f46e5;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
#tuko-how-it-works-modal .tuko-how-it-works-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.625rem 1.25rem;
	background: linear-gradient(to right, #2563eb, #4f46e5);
	color: #ffffff !important;
	border: none;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	font-family: 'Mona Sans', sans-serif;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	margin-top: 0.25rem;
	box-sizing: border-box;
}
#tuko-how-it-works-modal .tuko-how-it-works-close-btn:hover {
	background: linear-gradient(to right, #1d4ed8, #4338ca);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}



/* ============================================
   Modulo: 05a-base.css
   ============================================ */

/* ============================================
   TIERS - PARTE BASE (05a)
   ============================================ */

/* ============================================
   ESTILOS DE ESCALONES (TIERS)
   ============================================ */

.tuko-tiers-section {
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	display: block !important;
	margin: 32px auto 0 auto;
	clear: both;
	padding: 24px 32px;
	border-radius: 16px;
	border: none;
	outline: 1px solid #ffffff;
	outline-offset: -1px;
	background: var(--background-color-neutral-3, #F5F5F5);
	box-sizing: border-box;
}

/* En modo separado, permitir overflow visible para efectos shimmer y pulse */
.tuko-tiers-section.tuko-tiers-separated {
	overflow: visible !important;
}

/* Asegurar que el wrapper también permita ver los efectos */
.tuko-tiers-separated .tuko-tiers-wrapper {
	overflow: visible !important;
	/* Padding por defecto - se sobrescribirá en media queries para desktop/tablet */
	padding: 0;
}

/* CRÍTICO: En modo separado, eliminar TODOS los estilos predeterminados */
.tuko-tiers-section.tuko-tiers-separated {
	/* El estilo inline tendrá prioridad sobre estos valores */
	outline: none !important;
	/* NO establecer padding aquí - se aplicará desde el estilo inline */
	/* Márgenes por defecto - se sobrescribirán en media queries para desktop/tablet */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}

/* En modo separado, usar borde personalizado en lugar de outline */
/* CRÍTICO: Eliminar TODOS los estilos predeterminados para que el estilo inline tenga prioridad */
.tuko-tiers-section.tuko-tiers-separated {
	border: 2px solid;
	outline: none;
	/* El background-color se aplicará desde el estilo inline personalizado */
	background: transparent !important;
	background-image: none !important;
	/* Eliminar cualquier gradiente o imagen de fondo */
	/* NO aplicar box-shadow aquí - se aplicará desde el estilo inline */
	box-shadow: none;
	/* Centrar el contenedor horizontalmente */
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0;
	margin-bottom: 0;
	width: fit-content !important;
	max-width: 100% !important;
	display: block !important;
	/* NO sobrescribir padding - se aplicará desde el estilo inline */
	padding: 0 !important; /* Eliminar padding predeterminado, pero el inline tendrá prioridad */
}

/* Añadir espacio adicional entre tiers y reviews/tabs de WooCommerce */
.tuko-tiers-section + .woocommerce-tabs,
.tuko-tiers-section + .wc-tabs-wrapper,
.tuko-tiers-section ~ .woocommerce-tabs.wc-tabs-wrapper,
.tuko-tiers-section ~ .woocommerce-tabs {
	margin-top: 60px !important;
}

/* Espacio adicional para el contenedor de tabs cuando está después de tiers */
/* Aplicar margen superior a los tabs que están después de los tiers */
.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 60px !important;
}

@media (min-width: 765px) {
	/* Asegurar que el contenido esté por encima de las imágenes */
	.tuko-tiers-section > * {
		position: relative;
		z-index: 1;
	}
}

/* Desktop grande (1491px en adelante) */
@media (min-width: 1491px) {
	/* Fondo rojo suave para la cuarta tarjeta (posición 3) cuando está activa - Desktop grande (1491px+) */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
	}
	
}

/* Header de escalones - Diseño Figma */
.tuko-tiers-header {
	background: var(--background-color-neutral-3, #F5F5F5);
	border-radius: 16px;
	padding: 16px 24px;
	margin: 0 auto 24px auto;
	text-align: center;
	width: fit-content;
	max-width: 100%;
	box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	border: 1px solid;
}

/* Asegurar que los estilos inline tengan prioridad en modo separado */
.tuko-tiers-separated .tuko-tiers-header {
	border: 1px solid;
}

.tuko-tiers-title {
	font-size: 32px;
	font-weight: 600;
	color: var(--text-color-neutral-3, #222222);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.64px;
	text-align: center;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0;
}

.tuko-tiers-title-main {
	font-size: 0.92em !important;
}

.tuko-tiers-title-main::after {
	content: ' ';
}

.tuko-tiers-title-italic {
	margin-left: 0.2em;
}

.tuko-tiers-title-main {
	font-weight: 600;
	font-style: normal;
	/* La fuente se aplicará desde el estilo inline personalizado del título */
}

.tuko-tiers-title-italic {
	font-weight: 600;
	font-style: italic;
	/* La fuente se aplicará desde el estilo inline personalizado del título */
}

.tuko-tiers-title-normal {
	font-weight: 600;
	font-style: normal !important;
	/* La fuente se aplicará desde el estilo inline personalizado del título */
}

.tuko-tiers-subtitle {
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color-neutral-3, #222222);
	margin: 0;
	line-height: 1.5;
	text-align: center;
	/* La fuente se aplicará desde el estilo inline personalizado */
}

.tuko-tiers-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 20px;
	width: fit-content;
	position: relative;
	justify-content: center;
	align-items: center;
	padding: 0;
	overflow: visible;
	margin: 0 auto;
	/* Sin transiciones responsive en desktop - se agregarán en media queries */
}

/* Asegurar que el wrapper en modo separado permita overflow visible y tenga alineación correcta */
.tuko-tiers-separated .tuko-tiers-wrapper {
	overflow: visible !important;
	align-items: center !important; /* Centrar verticalmente las tarjetas */
	justify-content: center !important; /* Centrar horizontalmente */
	/* Los márgenes se ajustarán en media queries según el tamaño de pantalla */
}

/* Forzar layout 2x2 en 1029px y hacia abajo cuando hay 4 escalones */
@media (max-width: 1029px) and (min-width: 766px) {
	.tuko-tiers-wrapper {
		flex-wrap: wrap !important;
	}
	
	/* Agregar margen inferior al contenedor principal en este rango */
	.tuko-tiers-section.tuko-tiers-separated {
		margin-bottom: 20px !important;
	}
	
	/* Agregar margen inferior al wrapper para separarlo del contenedor */
	.tuko-tiers-separated .tuko-tiers-wrapper {
		margin-bottom: 40px !important;
		padding-bottom: 20px !important;
	}
	
	/* Para 3 hitos: reorganizar orden cuando se hace wrap - MODO SEPARADO */
	/* Resetear order de todas las tarjetas primero */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card {
		order: 0 !important; /* Resetear order por defecto */
	}
	
	/* Resetear order de conectores también */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-connector {
		order: 0 !important;
	}
	
	/* Usar el conector después de la segunda tarjeta para forzar salto de línea */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-connector:nth-child(4) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Primera tarjeta: fila 1, columna 1 - SIEMPRE PRIMERA - MODO SEPARADO */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-0 {
		order: 1 !important;
		flex-basis: auto !important;
	}
	
	/* Segunda tarjeta: fila 1, columna 2 (a la derecha) - MODO SEPARADO */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-1 {
		order: 2 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Primera tarjeta también centrada verticalmente */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-0 {
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Tercera tarjeta: fila 2 (centrada, mismo tamaño que las otras tarjetas) */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(5) {
		order: 3 !important;
		flex-basis: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: center !important; /* Centrar verticalmente */
		/* Mismo tamaño que las tarjetas alcanzado/pendientes */
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
	}
	
	/* Para 4 hitos: reorganizar orden en grid 2x2 */
	/* Usar el conector después de la segunda tarjeta para forzar salto de línea */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-connector:nth-child(4) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Primera tarjeta: fila 1, columna 1 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(1) {
		order: 1 !important;
		flex-basis: auto !important;
	}
	
	/* Segunda tarjeta: fila 1, columna 2 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(3) {
		order: 2 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Primera tarjeta también centrada verticalmente */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(1) {
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Tercera tarjeta: fila 2, columna 1 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(5) {
		order: 3 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Cuarta tarjeta: fila 2, columna 2 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(7) {
		order: 4 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Para 5 hitos: centrar verticalmente la segunda tarjeta en la primera fila */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(3) {
		align-self: center !important;
	}
}

/* Rango específico 764px-765px: corregir orden para 3 hitos en modo separado */
@media (min-width: 764px) and (max-width: 765px) {
	/* Para 3 hitos: reorganizar orden cuando se hace wrap - MODO SEPARADO */
	/* Resetear order de todas las tarjetas primero */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card {
		order: 0 !important; /* Resetear order por defecto */
	}
	
	/* Resetear order de conectores también */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-connector {
		order: 0 !important;
	}
	
	/* Usar el conector después de la segunda tarjeta para forzar salto de línea */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-connector:nth-child(4) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Primera tarjeta: fila 1, columna 1 - SIEMPRE PRIMERA - MODO SEPARADO */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-0 {
		order: 1 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Segunda tarjeta: fila 1, columna 2 (a la derecha) - MODO SEPARADO */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-1 {
		order: 2 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Tercera tarjeta: fila 2 (centrada) - MODO SEPARADO */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card:nth-child(5),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5):last-of-type):not(:has(.tuko-tier-card:nth-child(7))) .tuko-tier-card.tuko-tier-position-2 {
		order: 3 !important;
		flex-basis: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Para 4 hitos: corregir orden - Primera tarjeta debe estar en fila 1, columna 1 */
	/* Resetear order de todas las tarjetas primero */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card {
		order: 0 !important;
	}
	
	/* Resetear order de conectores */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-connector {
		order: 0 !important;
	}
	
	/* Usar el conector después de la segunda tarjeta para forzar salto de línea */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-connector:nth-child(4) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		order: 2 !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Primera tarjeta: fila 1, columna 1 - SIEMPRE PRIMERA */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-position-0 {
		order: 1 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Segunda tarjeta: fila 1, columna 2 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-position-1 {
		order: 2 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Tercera tarjeta: fila 2, columna 1 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(5),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-position-2 {
		order: 3 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Cuarta tarjeta: fila 2, columna 2 */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(7),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card.tuko-tier-position-3 {
		order: 4 !important;
		flex-basis: auto !important;
		align-self: center !important; /* Centrar verticalmente */
	}
	
	/* Aumentar font-size de "x/y personas unidas" y "Faltan x personas" en tarjeta activa - igual que en 766px-1030px */
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active .tuko-tier-participants-text {
		font-size: 13px !important; /* Igual que en el rango 766px-1030px */
		line-height: 150% !important; /* 19.5px */
	}
	
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active .tuko-tier-remaining {
		font-size: 13px !important; /* Igual que en el rango 766px-1030px */
		line-height: 150% !important; /* 19.5px */
	}
	
	/* Aumentar font-size del número "x/y" en tarjeta activa - igual que en 766px-1030px */
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active .tuko-tier-current-count,
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active .tuko-tier-separator,
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active .tuko-tier-needed-count {
		font-size: 16px !important; /* Igual que en el rango 766px-1030px */
		line-height: 150% !important; /* 24px */
	}
	
	/* Para 5 hitos: centrar horizontalmente todas las tarjetas y espaciado uniforme */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) {
		justify-content: center !important;
		align-items: center !important;
		gap: 20px !important; /* Espaciado uniforme entre todas las tarjetas */
		row-gap: 20px !important; /* Espaciado uniforme vertical */
		column-gap: 20px !important; /* Espaciado uniforme horizontal */
		display: flex !important;
		flex-wrap: wrap !important;
	}
	
	/* Eliminar TODOS los márgenes de las tarjetas de 5 hitos para usar gap uniforme - MÁXIMA ESPECIFICIDAD */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-active,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-reached,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card.tuko-tier-pending {
		margin: 0 !important; /* Eliminar todos los márgenes para usar gap */
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		align-self: center !important;
	}
	
	/* Asegurar que todas las tarjetas específicas no tengan márgenes - MÁXIMA ESPECIFICIDAD */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(1),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(3),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(5),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(7),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(9),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(1).tuko-tier-active,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(3).tuko-tier-active,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(5).tuko-tier-active,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(7).tuko-tier-active,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(9).tuko-tier-active {
		margin: 0 !important; /* Eliminar todos los márgenes para usar gap */
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		align-self: center !important;
	}
	
	/* Eliminar completamente los conectores para que no interfieran con el gap - MÁXIMA ESPECIFICIDAD */
	/* display: none es la mejor forma de sacar elementos del flujo flexbox y que no ocupen espacio en el gap */
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector,
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(2),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(4),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(6),
	.tuko-tiers-separated .tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(8) {
		display: none !important; /* Ocultar completamente - esto los saca del flujo flexbox y no ocupan espacio en el gap */
		margin: 0 !important;
		padding: 0 !important;
		width: 0 !important;
		height: 0 !important;
		flex-basis: 0 !important;
		min-width: 0 !important;
		max-width: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
	}
}

.tuko-tier-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: relative;
	overflow: visible;
	z-index: 1;
	margin: 0;
	box-sizing: border-box;
	flex: 0 0 auto;
	/* Sin transiciones - todas eliminadas */
	/* Optimizaciones para evitar temblor de bordes durante scroll */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	isolation: isolate;
	outline: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Asegurar que los bordes se mantengan fijos */
	border-width: 4px !important;
	border-style: solid !important;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	contain: layout style paint;
	/* Forzar renderizado estable del borde */
	-webkit-border-image: none;
	border-image: none;
}

/* Asegurar que las tarjetas activas en modo separado tengan overflow visible y z-index correcto */
.tuko-tiers-separated .tuko-tier-card.tuko-tier-active {
	overflow: visible !important;
	z-index: 2 !important; /* Asegurar que esté sobre el efecto shimmer */
	contain: none !important; /* Desactivar contain para permitir que el efecto shimmer se vea */
}

/* Asegurar que el contenido de la tarjeta esté sobre el efecto shimmer */
.tuko-tiers-separated .tuko-tier-card.tuko-tier-active > * {
	position: relative;
	z-index: 2;
}

/* Asegurar que el borde (outline) esté por encima del shimmer */
.tuko-tiers-separated .tuko-tier-card.tuko-tier-active {
	position: relative;
	z-index: 1;
}

/* Pseudo-elemento para borde fijo durante scroll - evita temblor visual */
.tuko-tier-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 4px solid inherit;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	transform: translateZ(0);
	will-change: transform;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Conector SVG entre escalones */
.tuko-tier-connector {
	display: none !important; /* Oculto en todos los tamaños de pantalla */
	visibility: hidden !important;
	opacity: 0 !important;
	align-items: center;
	justify-content: center;
	z-index: 0;
	flex-shrink: 0;
	margin: 0;
	/* Sin transiciones responsive en desktop - se agregarán en media queries */
}

/* En el rango de 1029px, hacer visible el conector 4 para forzar el salto de línea */
@media (max-width: 1029px) and (min-width: 764px) {
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type) .tuko-tier-connector:nth-child(4) {
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		order: 2 !important;
	}
}

.tuko-tier-connector svg {
	display: block;
	width: 1px;
	height: 23px;
	flex-shrink: 0;
}

/* Tamaños según estado: completados y pendientes son pequeños */
.tuko-tier-card.tuko-tier-reached,
.tuko-tier-card.tuko-tier-pending {
	display: flex !important;
	width: 214.698px !important;
	height: 161.023px !important;
	padding: 21.47px 10.735px !important;
	flex: 0 0 auto;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: center !important;
	box-sizing: border-box !important;
	/* Sin transiciones - todas eliminadas */
}

/* Escalones activos son más grandes - rectángulo horizontal */
/* Escalones activos son más grandes - rectángulo horizontal */
.tuko-tier-card.tuko-tier-active {
	display: flex !important;
	width: 303.86px !important;
	height: 227.895px !important;
	padding: 30.386px 15.193px !important;
	flex: 0 0 auto;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-radius: 12.15px !important;
	/* Permitir que el box-shadow de la animación pulse se vea */
	box-shadow: none !important; /* Solo remover sombras fijas, la animación las sobreescribe */
	outline: 3.5px solid !important;
	outline-offset: -3.5px !important; /* Volver al valor original */
	box-sizing: border-box !important;
	position: relative;
	overflow: visible !important;
	/* Sin transiciones ni animaciones - todas eliminadas */
}



/* Outline color según posición para escalones activos */
/* CRÍTICO: Las tarjetas activas siempre usan outline morado, independientemente de su posición */
.tuko-tier-position-0.tuko-tier-active {
	outline-color: #8E5DF3 !important;
}

.tuko-tier-position-1.tuko-tier-active {
	outline-color: #8E5DF3 !important;
}

.tuko-tier-position-2.tuko-tier-active {
	outline-color: #8E5DF3 !important;
}

.tuko-tier-position-3.tuko-tier-active {
	outline-color: #8E5DF3 !important;
}

.tuko-tier-position-4.tuko-tier-active {
	outline-color: #8E5DF3 !important;
}

/* Animaciones para efecto shimmer y pulse en tarjetas activas (modo separado) */
@-webkit-keyframes tuko-shimmer-separated {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes tuko-shimmer-separated {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Efecto alternativo: brillo en el borde - usa currentColor para respetar colores personalizados */
@keyframes tuko-border-glow-separated {
	0%, 100% {
		filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 4px currentColor);
	}
	50% {
		filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 9px currentColor) drop-shadow(0 0 12px currentColor);
	}
}

@keyframes tuko-active-pulse-separated-0 {
	0%, 100% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(32, 198, 88, 0.3), 0 0 20px 8px rgba(32, 198, 88, 0.4) !important;
	}
	50% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 16px rgba(32, 198, 88, 0.15), 0 0 35px 18px rgba(32, 198, 88, 0.6), 0 0 55px 25px rgba(32, 198, 88, 0.35) !important;
	}
}

@keyframes tuko-active-pulse-separated-1 {
	0%, 100% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(142, 93, 243, 0.3), 0 0 20px 8px rgba(142, 93, 243, 0.4) !important;
	}
	50% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 16px rgba(142, 93, 243, 0.15), 0 0 35px 18px rgba(142, 93, 243, 0.6), 0 0 55px 25px rgba(142, 93, 243, 0.35) !important;
	}
}

@keyframes tuko-active-pulse-separated-2 {
	0%, 100% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(254, 198, 49, 0.3), 0 0 20px 8px rgba(254, 198, 49, 0.4) !important;
	}
	50% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 16px rgba(254, 198, 49, 0.15), 0 0 35px 18px rgba(254, 198, 49, 0.6), 0 0 55px 25px rgba(254, 198, 49, 0.35) !important;
	}
}

@keyframes tuko-active-pulse-separated-3 {
	0%, 100% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(206, 51, 51, 0.3), 0 0 20px 8px rgba(206, 51, 51, 0.4) !important;
	}
	50% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 16px rgba(206, 51, 51, 0.15), 0 0 35px 18px rgba(206, 51, 51, 0.6), 0 0 55px 25px rgba(206, 51, 51, 0.35) !important;
	}
}

@keyframes tuko-active-pulse-separated-4 {
	0%, 100% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px rgba(61, 80, 242, 0.3), 0 0 20px 8px rgba(61, 80, 242, 0.4) !important;
	}
	50% {
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08), 0 0 0 16px rgba(61, 80, 242, 0.15), 0 0 35px 18px rgba(61, 80, 242, 0.6), 0 0 55px 25px rgba(61, 80, 242, 0.35) !important;
	}
}

/* Colores fijos según posición del escalón (solo cuando están completados o activos) */

/* Primer escalón - Verde */
.tuko-tier-position-0.tuko-tier-reached {
	border-radius: 8.588px !important;
	border: 2px solid #20C658 !important;
	background: #EFFFF4 !important;
	box-shadow: none !important;
}

/* CRÍTICO: Las tarjetas activas siempre son moradas, independientemente de su posición */
.tuko-tier-position-0.tuko-tier-active {
	border: 3.5px solid #8E5DF3 !important;
	background: #F1EDFC !important;
	position: relative !important;
	color: #8E5DF3 !important; /* Establecer currentColor para el drop-shadow */
	/* Animación de pulso removida - mantener solo shimmer */
}

/* Efecto shimmer en tarjetas activas (modo separado) - usar ::after para evitar conflicto con ::before del borde */
.tuko-tiers-separated .tuko-tier-position-0.tuko-tier-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12.15px; /* Mismo border-radius que la tarjeta, sin el +4px */
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.7) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: tuko-shimmer-separated 2.5s linear infinite;
	-webkit-animation: tuko-shimmer-separated 2.5s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: background-position;
	z-index: 0; /* Dentro de la tarjeta, detrás del contenido pero dentro del borde */
	pointer-events: none;
	opacity: 0.7; /* Similar al combinado pero un poco más suave para separado */
}

.tuko-tier-position-0.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el descuento */
.tuko-tier-position-0.tuko-tier-active .tuko-tier-discount-value {
	color: #7830C0 !important;
}

.tuko-tier-position-0.tuko-tier-reached .tuko-tier-progress-fill {
	background: #14C492 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para la barra de progreso */
.tuko-tier-position-0.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3 !important;
}

/* Segundo escalón - Morado */
/* CRÍTICO: Las tarjetas reached siempre son verdes, independientemente de su posición */
.tuko-tier-position-1.tuko-tier-reached {
	border-radius: 8.588px !important;
	border: 2px solid #20C658 !important;
	background: #EFFFF4 !important;
	box-shadow: none !important;
}

.tuko-tier-position-1.tuko-tier-active {
	border: 3.5px solid #8E5DF3 !important;
	background: #F1EDFC !important;
	position: relative !important;
	color: #8E5DF3 !important; /* Establecer currentColor para el drop-shadow */
	/* Animación de pulso removida - mantener solo shimmer */
}

.tuko-tiers-separated .tuko-tier-position-1.tuko-tier-active {
	overflow: visible !important;
}

.tuko-tiers-separated .tuko-tier-position-1.tuko-tier-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12.15px; /* Mismo border-radius que la tarjeta, sin el +4px */
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.7) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: tuko-shimmer-separated 2.5s linear infinite;
	-webkit-animation: tuko-shimmer-separated 2.5s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: background-position;
	z-index: 0; /* Dentro de la tarjeta, detrás del contenido pero dentro del borde */
	pointer-events: none;
	opacity: 0.7; /* Similar al combinado pero un poco más suave para separado */
}

.tuko-tier-position-1.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el descuento */
.tuko-tier-position-1.tuko-tier-active .tuko-tier-discount-value {
	color: #7830C0 !important;
}

.tuko-tier-position-1.tuko-tier-reached .tuko-tier-progress-fill {
	background: #14C492 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para la barra de progreso */
.tuko-tier-position-1.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3 !important;
}

/* Tercer escalón - Amarillo */
/* CRÍTICO: Las tarjetas reached siempre son verdes, independientemente de su posición */
.tuko-tier-position-2.tuko-tier-reached {
	border-radius: 8.588px !important;
	border: 2px solid #20C658 !important;
	background: #EFFFF4 !important;
	box-shadow: none !important;
}

/* CRÍTICO: Las tarjetas activas siempre son moradas, independientemente de su posición */
.tuko-tier-position-2.tuko-tier-active {
	border: 3.5px solid #8E5DF3 !important;
	background: #F1EDFC !important;
	position: relative !important;
	color: #8E5DF3 !important; /* Establecer currentColor para el drop-shadow */
	/* Animación de pulso removida - mantener solo shimmer */
}

.tuko-tiers-separated .tuko-tier-position-2.tuko-tier-active {
	overflow: visible !important;
}

.tuko-tiers-separated .tuko-tier-position-2.tuko-tier-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12.15px; /* Mismo border-radius que la tarjeta, sin el +4px */
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.7) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: tuko-shimmer-separated 2.5s linear infinite;
	-webkit-animation: tuko-shimmer-separated 2.5s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: background-position;
	z-index: 0; /* Dentro de la tarjeta, detrás del contenido pero dentro del borde */
	pointer-events: none;
	opacity: 0.7; /* Similar al combinado pero un poco más suave para separado */
}

.tuko-tier-position-2.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el descuento */
.tuko-tier-position-2.tuko-tier-active .tuko-tier-discount-value {
	color: #7830C0 !important;
}

.tuko-tier-position-2.tuko-tier-reached .tuko-tier-progress-fill {
	background: #14C492 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para la barra de progreso */
.tuko-tier-position-2.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3 !important;
}

/* Cuarto escalón - Rojo */
/* CRÍTICO: Las tarjetas reached siempre son verdes, independientemente de su posición */
.tuko-tier-position-3.tuko-tier-reached {
	border-radius: 8.588px !important;
	border: 2px solid #20C658 !important;
	background: #EFFFF4 !important;
	box-shadow: none !important;
}

/* CRÍTICO: Las tarjetas activas siempre son moradas, independientemente de su posición */
.tuko-tier-position-3.tuko-tier-active {
	border: 3.5px solid #8E5DF3 !important;
	background: #F1EDFC !important;
	position: relative !important;
	color: #8E5DF3 !important; /* Establecer currentColor para el drop-shadow */
	/* Animación de pulso removida - mantener solo shimmer */
}

.tuko-tiers-separated .tuko-tier-position-3.tuko-tier-active {
	overflow: visible !important;
}

.tuko-tiers-separated .tuko-tier-position-3.tuko-tier-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12.15px; /* Mismo border-radius que la tarjeta, sin el +4px */
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.7) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: tuko-shimmer-separated 2.5s linear infinite;
	-webkit-animation: tuko-shimmer-separated 2.5s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: background-position;
	z-index: 0; /* Dentro de la tarjeta, detrás del contenido pero dentro del borde */
	pointer-events: none;
	opacity: 0.7; /* Similar al combinado pero un poco más suave para separado */
}

.tuko-tier-position-3.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el descuento */
.tuko-tier-position-3.tuko-tier-active .tuko-tier-discount-value {
	color: #7830C0 !important;
}

.tuko-tier-position-3.tuko-tier-reached .tuko-tier-progress-fill {
	background: #14C492 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para la barra de progreso */
.tuko-tier-position-3.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3 !important;
}

/* Quinto escalón - Azul */
/* CRÍTICO: Las tarjetas reached siempre son verdes, independientemente de su posición */
.tuko-tier-position-4.tuko-tier-reached {
	border-radius: 8.588px !important;
	border: 2px solid #20C658 !important;
	background: #EFFFF4 !important;
	box-shadow: none !important;
}

/* CRÍTICO: Las tarjetas activas siempre son moradas, independientemente de su posición */
.tuko-tier-position-4.tuko-tier-active {
	border: 3.5px solid #8E5DF3 !important;
	background: #F1EDFC !important;
	position: relative !important;
	color: #8E5DF3 !important; /* Establecer currentColor para el drop-shadow */
	/* Animación de pulso removida - mantener solo shimmer */
}

.tuko-tiers-separated .tuko-tier-position-4.tuko-tier-active {
	overflow: visible !important;
}

.tuko-tiers-separated .tuko-tier-position-4.tuko-tier-active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 12.15px; /* Mismo border-radius que la tarjeta, sin el +4px */
	background: linear-gradient(
		90deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.7) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: tuko-shimmer-separated 2.5s linear infinite;
	-webkit-animation: tuko-shimmer-separated 2.5s linear infinite;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: background-position;
	z-index: 0; /* Dentro de la tarjeta, detrás del contenido pero dentro del borde */
	pointer-events: none;
	opacity: 0.7; /* Similar al combinado pero un poco más suave para separado */
}

.tuko-tier-position-4.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el descuento */
.tuko-tier-position-4.tuko-tier-active .tuko-tier-discount-value {
	color: #7830C0 !important;
}

.tuko-tier-position-4.tuko-tier-reached .tuko-tier-progress-fill {
	background: #14C492 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para la barra de progreso */
.tuko-tier-position-4.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3 !important;
}

/* Estados de escalón - Pendientes siempre grises */
.tuko-tier-pending {
	border-radius: 8.588px !important;
	border: 1.073px solid #D0D0D0 !important;
	background: #FAFAFA !important;
	box-shadow: none !important;
	opacity: 0.9;
}

/* Asegurar que pendientes no tengan colores de posición */
.tuko-tier-pending .tuko-tier-discount-value {
	color: #9E9E9E !important;
}

.tuko-tier-pending .tuko-tier-progress-bar {
	background: #E0E0E0 !important;
}

.tuko-tier-pending .tuko-tier-progress-fill {
	background: transparent !important;
}

/* Icono de estado en círculo */
.tuko-tier-icon-circle {
	position: relative;
	overflow: visible; /* Cambiado de hidden a visible para evitar que se corten los SVGs */
	display: flex;
	align-items: center;
	justify-content: center;
}

.tuko-tier-reached .tuko-tier-icon-circle,
.tuko-tier-pending .tuko-tier-icon-circle {
	width: 34.35px;
	height: 34.35px;
}

.tuko-tier-active .tuko-tier-icon-circle {
	width: 48.62px;
	height: 48.62px;
}

.tuko-tier-icon-bg {
	position: absolute;
	border-radius: 50%;
}

.tuko-tier-reached .tuko-tier-icon-bg {
	width: 27.91px;
	height: 27.91px;
	left: 3.22px;
	top: 3.22px;
	background: var(--tuko-neutral-black, #222222);
}

.tuko-tier-active .tuko-tier-icon-bg {
	width: 39.50px;
	height: 39.50px;
	left: 4.56px;
	top: 4.56px;
	background: #7830C0;
}

.tuko-tier-pending .tuko-tier-icon-bg {
	width: 27.91px;
	height: 27.91px;
	left: 3.22px;
	top: 3.22px;
	background: #AFAFAF;
}

.tuko-tier-check-icon,
.tuko-tier-arrow-icon,
.tuko-tier-star-icon {
	position: relative;
	z-index: 1;
	line-height: 1;
}

.tuko-tier-check-svg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.tuko-tier-check-svg svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible; /* Evitar que se corten los paths */
}

.tuko-tier-arrow-svg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.tuko-tier-arrow-svg svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible; /* Evitar que se corten los paths */
}

/* Tamaños del SVG según el tamaño del icono */
.tuko-tier-reached .tuko-tier-check-svg {
	width: 27.911px;
	height: 27.911px;
	flex-shrink: 0;
}

.tuko-tier-active .tuko-tier-arrow-svg {
	width: 39.502px;
	height: 39.502px;
	flex-shrink: 0;
}

.tuko-tier-pending .tuko-tier-launch-svg {
	width: 34.352px;
	height: 34.352px;
	flex-shrink: 0;
}

.tuko-tier-launch-svg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.tuko-tier-launch-svg svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible; /* Evitar que se corten los paths */
}


.tuko-tier-reached .tuko-tier-check-icon {
	color: white;
	font-size: 18px;
	font-weight: bold;
}

.tuko-tier-active .tuko-tier-arrow-icon {
	color: white;
	font-size: 24px;
}

.tuko-tier-pending .tuko-tier-star-icon {
	color: #AFAFAF;
	font-size: 18px;
}

/* Texto de estado */
.tuko-tier-status-label {
	text-align: center;
	color: var(--text-color-neutral-3, #222);
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-weight: 600;
	margin: 0;
}

.tuko-tier-reached .tuko-tier-status-label,
.tuko-tier-pending .tuko-tier-status-label {
	font-size: 13px !important; /* Cambiado de 12.882px a 13px */
	font-style: normal;
	font-weight: 600;
	line-height: 140%; /* 18.035px */
	letter-spacing: -0.258px;
}

.tuko-tier-active .tuko-tier-status-label {
	text-align: center;
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-size: 18.232px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.365px;
	margin-bottom: 0;
	margin-top: 10px; /* Bajar un poco "Ahead"/"Voraus" dentro de la tarjeta activa */
}

/* Descuento */
.tuko-tier-discount {
	text-align: center;
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.tuko-tier-discount-value {
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-weight: 600;
	margin: 0;
}

.tuko-tier-reached .tuko-tier-discount-value,
.tuko-tier-pending .tuko-tier-discount-value {
	text-align: center;
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-size: 25px !important; /* Cambiado de 21.47px a 25px */
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 30px */
	letter-spacing: -0.429px;
}

.tuko-tier-reached .tuko-tier-discount-value {
	color: #129C75;
}

.tuko-tier-pending .tuko-tier-discount-value {
	color: #9E9E9E;
}

.tuko-tier-active .tuko-tier-discount-value {
	text-align: center;
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-size: 33px !important; /* Aumentado de 30.386px a 33px */
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 39.6px */
	letter-spacing: -0.608px;
	color: #7830C0;
}

.tuko-tier-discount-label {
	font-family: var(--Text-Styles-Font-Family-Heading-Font, "Mona Sans SemiExpanded"), "Mona Sans", sans-serif;
	font-weight: 600;
	display: inline;
}

.tuko-tier-reached .tuko-tier-discount-label,
.tuko-tier-pending .tuko-tier-discount-label {
	font-size: 25px !important; /* Cambiado de 21.47px a 25px */
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 30px */
	letter-spacing: -0.429px;
}

.tuko-tier-active .tuko-tier-discount-label {
	font-size: 33px !important; /* Aumentado de 30.386px a 33px */
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 39.6px */
	letter-spacing: -0.608px;
}

/* Colores de "OFF" según posición - completados */
.tuko-tier-position-0.tuko-tier-reached .tuko-tier-discount-label {
	color: #129C75 !important;
}

/* CRÍTICO: Las tarjetas reached siempre usan colores verdes para el label del descuento */
.tuko-tier-position-1.tuko-tier-reached .tuko-tier-discount-label {
	color: #129C75 !important;
}

.tuko-tier-position-2.tuko-tier-reached .tuko-tier-discount-label {
	color: #129C75 !important;
}

.tuko-tier-position-3.tuko-tier-reached .tuko-tier-discount-label {
	color: #129C75 !important;
}

.tuko-tier-position-4.tuko-tier-reached .tuko-tier-discount-label {
	color: #129C75 !important;
}

/* Colores de "OFF" para activos según posición */
/* CRÍTICO: Las tarjetas activas siempre usan colores morados para el label "OFF", independientemente de su posición */
.tuko-tier-position-0.tuko-tier-active .tuko-tier-discount-label {
	color: #7830C0 !important;
}

.tuko-tier-position-1.tuko-tier-active .tuko-tier-discount-label {
	color: #7830C0 !important;
}

.tuko-tier-position-2.tuko-tier-active .tuko-tier-discount-label {
	color: #7830C0 !important;
}

.tuko-tier-position-3.tuko-tier-active .tuko-tier-discount-label {
	color: #7830C0 !important;
}

.tuko-tier-position-4.tuko-tier-active .tuko-tier-discount-label {
	color: #7830C0 !important;
}

/* Color gris para pendientes */
.tuko-tier-pending .tuko-tier-discount-label {
	color: #9E9E9E !important;
}

/* Información de personas */
.tuko-tier-participants-info {
	align-self: stretch;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	margin: 0;
}

.tuko-tier-reached .tuko-tier-participants-info,
.tuko-tier-pending .tuko-tier-participants-info {
	gap: 4.29px;
}

.tuko-tier-active .tuko-tier-participants-info {
	gap: 6.08px;
}

.tuko-tier-participants-current {
	align-self: stretch;
	justify-content: space-between;
	align-items: flex-end;
	display: inline-flex;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-tier-participants-left {
	display: inline-flex;
	align-items: baseline;
	min-width: 100px;
	width: auto;
	white-space: nowrap;
	flex-shrink: 0;
}

.tuko-tier-current-count,
.tuko-tier-separator,
.tuko-tier-needed-count {
	color: var(--tuko-neutral-black, #222222);
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-weight: 600;
}

.tuko-tier-active .tuko-tier-current-count,
.tuko-tier-active .tuko-tier-separator,
.tuko-tier-active .tuko-tier-needed-count {
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-size: 14px; /* Reducido de 16px */
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 21px */
}

.tuko-tier-participants-text {
	color: var(--tuko-neutral-black, #222222);
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-weight: 500;
}

.tuko-tier-active .tuko-tier-participants-text {
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-size: 12px; /* Reducido de 13px */
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 18px */
	margin-left: 6px;
}

.tuko-tier-remaining {
	color: var(--tuko-neutral-black, #222222);
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-size: 12px; /* Reducido de 13px */
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 18px */
	margin-left: 0;
	margin-top: 0px; /* Bajar ligeramente el texto */
}

/* Asegurar que el número esté en negrita - máxima especificidad */
.tuko-tier-remaining .tuko-tier-remaining-number,
.tuko-tier-active .tuko-tier-remaining .tuko-tier-remaining-number,
.tuko-tier-card.tuko-tier-active .tuko-tier-remaining .tuko-tier-remaining-number,
.tuko-tier-card.tuko-tier-active .tuko-tier-participants-current .tuko-tier-remaining .tuko-tier-remaining-number,
.tuko-tier-participants-current .tuko-tier-remaining .tuko-tier-remaining-number {
	font-weight: 600 !important;
	font-style: normal !important;
}

.tuko-tier-participants-simple {
	align-self: stretch;
	justify-content: center;
	align-items: center;
	display: flex;
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	gap: 4px;
}

.tuko-tier-participants-count {
	color: var(--tuko-neutral-black, #222222);
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-size: 9.661px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 14.492px */
}

.tuko-tier-participants-label-text {
	color: var(--tuko-neutral-black, #222222);
	font-family: var(--Text-Styles-Font-Family-Text-Font, "Mona Sans"), sans-serif;
	font-size: 9.661px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 14.492px */
}

/* Aumentar font-size en tarjetas reached y pending */
.tuko-tier-reached .tuko-tier-participants-count,
.tuko-tier-pending .tuko-tier-participants-count {
	font-size: 12px; /* Aumentado de 9.661px */
}

.tuko-tier-reached .tuko-tier-participants-label-text,
.tuko-tier-pending .tuko-tier-participants-label-text {
	font-size: 12px; /* Aumentado de 9.661px */
}

/* Barra de progreso */
.tuko-tier-progress-bar {
	align-self: stretch;
	overflow: hidden;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	display: flex;
	position: relative;
}

.tuko-tier-reached .tuko-tier-progress-bar {
	height: 5px;
	border-radius: 34.352px;
}

.tuko-tier-pending .tuko-tier-progress-bar {
	height: 5px;
	border-radius: 34.352px;
}

.tuko-tier-active .tuko-tier-progress-bar {
	height: 9.12px;
	border-radius: 48.618px;
}

/* Fondos de barras de progreso según posición y estado (parte no rellena) */
.tuko-tier-position-0.tuko-tier-green.tuko-tier-reached .tuko-tier-progress-bar {
	background: #C6F3E6 !important;
}
/* CRÍTICO: Las tarjetas activas siempre usan barra de progreso morada, independientemente de su posición */
.tuko-tier-position-0.tuko-tier-green.tuko-tier-active .tuko-tier-progress-bar {
	background: #D8C9F6 !important;
}

.tuko-tier-position-1.tuko-tier-purple.tuko-tier-reached .tuko-tier-progress-bar {
	background: #C6F3E6 !important;
}
.tuko-tier-position-1.tuko-tier-purple.tuko-tier-active .tuko-tier-progress-bar {
	background: #D8C9F6 !important;
}

.tuko-tier-position-2.tuko-tier-yellow.tuko-tier-reached .tuko-tier-progress-bar {
	background: #C6F3E6 !important;
}
.tuko-tier-position-2.tuko-tier-yellow.tuko-tier-active .tuko-tier-progress-bar {
	background: #D8C9F6 !important;
}

.tuko-tier-position-3.tuko-tier-red.tuko-tier-reached .tuko-tier-progress-bar {
	background: #C6F3E6 !important;
}
.tuko-tier-position-3.tuko-tier-red.tuko-tier-active .tuko-tier-progress-bar {
	background: #D8C9F6 !important;
}

.tuko-tier-position-4.tuko-tier-blue.tuko-tier-reached .tuko-tier-progress-bar {
	background: #C6F3E6 !important;
}
.tuko-tier-position-4.tuko-tier-blue.tuko-tier-active .tuko-tier-progress-bar {
	background: #D8C9F6 !important;
}

.tuko-tier-pending .tuko-tier-progress-bar {
	height: 5px;
	background: #E0E0E0;
	border-radius: 34.35px;
}

.tuko-tier-progress-fill {
	flex: 1 1 0;
	/* Sin transiciones - todas eliminadas */
}

.tuko-tier-reached .tuko-tier-progress-fill {
	align-self: stretch;
	background: #14C492;
	border-radius: 34.35px;
	width: 100% !important;
}

.tuko-tier-active .tuko-tier-progress-fill {
	background: #8E5DF3;
	border-radius: 48.62px;
}

.tuko-tier-pending .tuko-tier-progress-fill {
	background: transparent;
	width: 0;
}

/* Responsive para escalones */

/* Layout para 5 escalones: 3 arriba, 2 abajo centrados a partir de 1490px hasta 1029px (incluido) */
/* Layout para 4 escalones: 3 arriba, 1 abajo a partir de 1032px */
@media (max-width: 1490px) and (min-width: 1032px) {
	.tuko-tiers-wrapper {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
		gap: 23px;
		align-items: center;
		/* Desactivar transiciones en este rango */
		transition: none !important;
	}
	
	/* Desactivar transiciones en escalones y conectores en este rango */
	.tuko-tier-card {
		transition: none !important;
	}
	
	.tuko-tier-connector {
		transition: none !important;
	}
	
	/* Asegurar tamaños fijos para todos los escalones */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending {
		display: flex !important;
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex: 0 0 auto !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-active {
		display: flex !important;
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		align-self: center;
	}
	
	/* Fondo rojo suave para la cuarta tarjeta (posición 3) cuando está activa - Desktop */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
	}
	
	/* Primera fila: escalones 1, 2 y 3 - solo cuando hay 5 escalones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(1),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(3),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(5) {
		margin: 0;
	}
	
	/* Forzar salto de línea después del 3er escalón usando el conector - solo cuando hay 5 escalones */
	/* El conector después del 3er escalón (6to hijo: 1,conn,2,conn,3,conn) */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(6) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 3;
		display: block !important;
		visibility: hidden;
		flex: 0 0 100% !important;
	}
	
	/* Cuando hay 4 escalones: ocultar el conector después del escalón 4 (8vo hijo) */
	.tuko-tiers-wrapper .tuko-tier-connector:nth-child(8) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
	}
	
	/* Escalones 4 y 5 en la segunda fila, centrados - solo cuando hay 5 escalones */
	/* Escalón 4 es el 7mo hijo (1,conn,2,conn,3,conn,4) */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(7):not(:last-of-type) {
		margin: 10px 10px 0 10px;
		order: 4;
	}
	
	/* Cuando hay 4 escalones: el escalón 4 (7mo hijo) es el último, centrarlo automáticamente */
	/* Corregir el desplazamiento vertical para que esté alineado con los 3 anteriores */
	.tuko-tiers-wrapper:not(:has(.tuko-tier-card:nth-child(9))) .tuko-tier-card:nth-child(7):last-of-type {
		margin: 0 auto !important;
		order: 4;
		align-self: center !important;
	}
	
	/* Escalón 5 es el 9no hijo (1,conn,2,conn,3,conn,4,conn,5) y es el último tipo */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(9):last-of-type {
		margin: 10px 10px 0 10px;
		order: 5;
	}
	
	/* Ocultar todos los conectores visibles en este layout */
	.tuko-tiers-wrapper .tuko-tier-connector {
		display: none !important;
	}
	
	/* Excepto el que usamos para forzar el salto cuando hay 5 escalones, pero lo hacemos invisible */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(6) {
		display: block !important;
		visibility: hidden;
	}
}



/* ============================================
   Modulo: 05b-desktop.css
   ============================================ */

/* ============================================
   TIERS - PARTE DESKTOP (05b)
   ============================================ */


/* Desactivar transiciones para 3 escalones desde 961px hacia arriba */
@media (min-width: 961px) {
	/* Para 3 escalones: desactivar todas las transiciones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) {
		transition: none !important;
	}
	
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card {
		transition: none !important;
	}
	
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-connector {
		transition: none !important;
	}
}

/* Todas las transiciones eliminadas - sin animaciones */

/* Layout para 4 escalones: 2x2 a partir de 1029px (incluido) hasta 764px (incluido) */
/* NOTA: Para 5 escalones, el layout 2-2-1 se aplica desde 764px hasta 1029px */
/* Ajustes específicos para 4 y 5 escalones en 764px para evitar layout no ajustado */
@media (max-width: 1029px) and (min-width: 764px) {
	/* REGLA CRÍTICA: Para 2 escalones, FORZAR orden correcto ANTES que cualquier otra regla */
	/* El primer escalón (nth-child(1) o position-0) SIEMPRE debe estar primero, sin importar su estado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-0,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1).tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1).tuko-tier-reached,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1).tuko-tier-pending {
		order: 1 !important;
	}
	
	/* El segundo escalón (nth-child(3) o position-1) SIEMPRE debe estar segundo, sin importar su estado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-1,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3).tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3).tuko-tier-reached,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3).tuko-tier-pending {
		order: 2 !important;
	}
	
	/* Asegurar que el wrapper tenga el ancho correcto y esté centrado para 4 y 5 escalones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		margin: 0 auto 20px auto !important;
	}
	
	/* Para 5 escalones: layout 2 arriba, 2 medio, 1 abajo - NO aplicar en 764px-768px (se aplica layout horizontal en ese rango) */
	/* Esta regla se aplica desde 769px hasta 1029px */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 15px !important;
		row-gap: 15px !important;
		align-items: flex-start !important;
	}
	
	/* Para 5 escalones: forzar salto después del 2do escalón usando el conector 4 */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(4) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 2 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Para 5 escalones: forzar salto después del 4to escalón usando el conector 8 */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(8) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 4 !important;
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Para 5 escalones: ocultar el conector 6 que ya no se usa */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-connector:nth-child(6) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		order: unset !important;
	}
	
	/* Para 5 escalones: ordenar los escalones correctamente */
	/* Escalones 1 y 2 (hijos 1 y 3) en la primera fila */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(1),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(3) {
		order: 1 !important;
		margin: 0 !important;
	}
	
	/* Escalones 3 y 4 (hijos 5 y 7) en la segunda fila */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(5),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(7) {
		order: 3 !important;
		margin: 0 !important;
	}
	
	/* Escalón 5 (hijo 9) en la tercera fila, centrado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(9)) .tuko-tier-card:nth-child(9) {
		order: 5 !important;
		margin: 0 auto !important;
		flex: 0 0 auto !important;
	}
	
	/* Para 2 escalones: asegurar orden correcto y layout horizontal */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) {
		display: flex !important;
		flex-wrap: nowrap !important;
		flex-direction: row !important;
		justify-content: center !important;
		gap: 15px !important;
		align-items: center !important;
	}
	
	/* FORZAR orden correcto para 2 escalones - máxima especificidad */
	/* El primer escalón (nth-child(1)) SIEMPRE debe estar primero, sin importar su clase position o estado */
	/* Sobrescribir cualquier regla que pueda estar afectando el orden, incluso si está activo o alcanzado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-0,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1).tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1).tuko-tier-reached,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-0.tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-0.tuko-tier-reached {
		order: 1 !important;
		margin: 0 !important;
	}
	
	/* El segundo escalón (nth-child(3)) SIEMPRE debe estar segundo, sin importar su clase position o estado */
	/* Sobrescribir cualquier regla que pueda estar afectando el orden, incluso si está activo o alcanzado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-1,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3).tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3).tuko-tier-reached,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-1.tuko-tier-active,
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-1.tuko-tier-reached {
		order: 2 !important;
		margin: 0 !important;
	}
	
	/* Solo aplicar layout 2x2 cuando hay 4 escalones, no cuando hay 5 ni 2 */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type):not(:has(.tuko-tier-card:nth-child(9))):not(:has(.tuko-tier-card:nth-child(3):last-of-type)) {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		max-width: 100% !important;
		gap: 15px !important;
		align-items: flex-start !important;
		row-gap: 15px !important;
		flex-direction: row !important;
		/* Sin transiciones - todas eliminadas */
	}
	
	/* Asegurar que cuando hay 4 escalones, el layout 2x2 se aplique correctamente */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type) {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		flex-direction: row !important;
	}
	
	/* Layout base para todos los escalones - mantener tamaños fijos */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending {
		display: flex !important;
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		max-width: none !important;
		margin: 0;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-active {
		display: flex !important;
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex: 0 0 auto !important;
		max-width: none !important;
		margin: 0 !important;
		align-self: center !important;
		outline: 3.04px solid !important;
		outline-offset: -3.04px !important;
		box-sizing: border-box !important;
	}
	
	/* Fondo rojo suave para la cuarta tarjeta (posición 3) cuando está activa - Tablet */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
	}
	
	/* CRÍTICO: Las tarjetas activas siempre usan outline morado, independientemente de su posición */
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-0.tuko-tier-active {
		outline-color: #8E5DF3 !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-1.tuko-tier-active {
		outline-color: #8E5DF3 !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-2.tuko-tier-active {
		outline-color: #8E5DF3 !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		outline-color: #8E5DF3 !important;
		background: #F1EDFC !important;
		background-color: #F1EDFC !important;
		background-image: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-4.tuko-tier-active {
		outline-color: #8E5DF3 !important;
	}
	
	/* Primera fila: Escalones 1 y 2 - centrados */
	/* Estructura: card1(1), conn(2), card2(3), conn(4), card3(5), conn(6), card4(7), conn(8), card5(9) */
	/* Todos los escalones en la primera fila se centran verticalmente para alinearse entre sí */
	/* Asegurar que el primer escalón siempre esté en la primera posición */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(1) {
		margin: 0;
		order: 1 !important;
		align-self: center !important;
	}
	
	/* Cuando hay 2 escalones: el escalón 2 (3er hijo) debe estar en segunda posición */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3) {
		margin: 0 !important;
		order: 2 !important;
		align-self: center !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		vertical-align: middle !important;
		align-items: center !important;
	}
	
	/* Asegurar que el escalón 1 también esté centrado cuando hay 2 escalones */
	/* FORZAR que el primer escalón SIEMPRE esté primero, sin importar su estado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-0 {
		order: 1 !important;
		align-self: center !important;
	}
	
	/* FORZAR que el segundo escalón SIEMPRE esté segundo, sin importar su estado */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card.tuko-tier-position-1 {
		order: 2 !important;
		align-self: center !important;
	}
	
	/* Cuando hay 2 escalones: no forzar salto de línea, ambos escalones en la misma fila */
	/* Ocultar TODOS los conectores cuando hay solo 2 escalones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-connector {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Ocultar el conector después del escalón 2 cuando es el último (solo 2 escalones) */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(3):last-of-type + .tuko-tier-connector {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		order: unset !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Ocultar el conector entre las dos tarjetas (2do hijo) cuando hay solo 2 escalones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-connector:nth-child(2) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Forzar salto después del escalón 2 usando el conector (4to hijo) solo cuando hay más de 2 escalones */
	/* Asegurar que funcione correctamente en 1026px con 4 escalones */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5)) .tuko-tier-connector:nth-child(4),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7)) .tuko-tier-connector:nth-child(4),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type) .tuko-tier-connector:nth-child(4) {
		display: block !important;
		visibility: hidden !important;
		opacity: 0 !important;
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 2 !important;
		flex-shrink: 0 !important;
		content: '' !important;
	}
	
	/* Segunda fila: Escalones 3 y 4 - centrados con espaciado uniforme y misma altura */
	/* Los escalones no activos se alinean arriba, los activos se centran verticalmente */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type {
		margin: 0 !important;
		outline: none !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}
	
	/* Segunda fila: Escalones 3 y 4 - ambos centrados verticalmente */
	/* Asegurar que el escalón 4 tenga exactamente los mismos estilos que el escalón 3 */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5):not(.tuko-tier-active),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):not(.tuko-tier-active),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type:not(.tuko-tier-active) {
		align-self: center !important;
		height: 161.023px !important;
		min-height: 161.023px !important;
		max-height: 161.023px !important;
		margin: 0 !important;
		padding: 21.47px 10.735px !important;
		outline: none !important;
		box-sizing: border-box !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	
	/* Eliminar cualquier estilo adicional que pueda causar highlights amarillos en el escalón 4 */
	/* Asegurar que no haya padding o margin adicional que cause el highlight amarillo */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):not(.tuko-tier-active),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type:not(.tuko-tier-active) {
		margin: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-top: 21.47px !important;
		padding-bottom: 21.47px !important;
		padding-left: 10.735px !important;
		padding-right: 10.735px !important;
		overflow: visible !important;
	}
	
	/* Eliminar outline en todos los hijos del escalón 4 para evitar highlights amarillos */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):not(.tuko-tier-active) *,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type:not(.tuko-tier-active) * {
		outline: none !important;
	}
	
	/* Los escalones activos se centran verticalmente */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5).tuko-tier-active,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7).tuko-tier-active,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active {
		align-self: center !important;
		margin: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 30.386px 15.193px !important;
		padding-top: 30.386px !important;
		padding-bottom: 30.386px !important;
		padding-left: 15.193px !important;
		padding-right: 15.193px !important;
		outline: 3.04px solid !important;
		outline-offset: -3.04px !important;
		box-sizing: border-box !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}
	
	/* Los escalones activos deben mantener su outline grueso con el color correcto */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5).tuko-tier-active.tuko-tier-position-2,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7).tuko-tier-active.tuko-tier-position-3,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active.tuko-tier-position-3 {
		outline: 3.04px solid !important;
		outline-offset: -3.04px !important;
		overflow: visible !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5).tuko-tier-active.tuko-tier-position-2 {
		outline-color: #FEC631 !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7).tuko-tier-active.tuko-tier-position-3,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active.tuko-tier-position-3 {
		outline-color: #CE3333 !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7).tuko-tier-active *,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active *,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active * {
		outline: none !important;
		outline-width: 0 !important;
		outline-style: none !important;
		outline-color: transparent !important;
		outline-offset: 0 !important;
	}
	
	/* Si el escalón 3 es activo, el escalón 4 también se centra para alinearse */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5).tuko-tier-active) .tuko-tier-card:nth-child(7):not(.tuko-tier-active),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(5).tuko-tier-active) .tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type:not(.tuko-tier-active) {
		align-self: center !important;
	}
	
	/* Si el escalón 4 es activo, el escalón 3 también se centra para alinearse */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7).tuko-tier-active) .tuko-tier-card:nth-child(5):not(.tuko-tier-active),
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active) .tuko-tier-card:nth-child(5):not(.tuko-tier-active) {
		align-self: center !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5) {
		order: 3;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7),
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type {
		order: 4;
	}
	
	/* Eliminar cualquier outline o highlight en los hijos que pueda aparecer al inspeccionar */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5) *,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7) *,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type * {
		outline: none !important;
	}
	
	/* Ocultar el conector entre escalones 3 y 4 (6to hijo) para que queden juntos */
	.tuko-tiers-wrapper .tuko-tier-connector:nth-child(6) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
	}
	
	/* Cuando hay 4 escalones: ocultar el conector después del escalón 4 (8vo hijo) */
	/* El conector 8 viene después del escalón 4 cuando es el último */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type + .tuko-tier-connector {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
	}
	
	/* Cuando hay 5 escalones: layout 2-2-1 */
	/* Forzar salto después del escalón 4 usando el conector (8vo hijo) */
	/* El conector 8 debe forzar el salto cuando hay un escalón 5 (9no hijo) */
	.tuko-tiers-wrapper .tuko-tier-connector:nth-child(8) {
		flex-basis: 100% !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		order: 4 !important;
		visibility: hidden !important;
		display: block !important;
	}
	
	/* Pero si el escalón 4 es el último (4 escalones), ocultar el conector 8 */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type + .tuko-tier-connector:nth-child(8) {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		flex: 0 0 0 !important;
		order: unset !important;
		visibility: visible !important;
	}
	
	/* Tercera fila: Escalón 5 centrado (solo cuando es el último tipo) */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(9):last-of-type {
		flex: 0 0 auto !important;
		margin: 0 auto !important;
		order: 5;
		/* Mantener tamaño según su estado */
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(9):last-of-type.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(9):last-of-type.tuko-tier-pending {
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		max-width: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(9):last-of-type.tuko-tier-active {
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		max-width: none !important;
	}
	
	/* Cuando hay 4 escalones: el escalón 4 (7mo hijo) es el último, mantener layout 2x2 */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type {
		flex: 0 0 auto !important;
		margin: 20px 0 0 0 !important;
		order: 3 !important;
		/* Mantener tamaño según su estado */
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-pending {
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		max-width: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(7):last-of-type.tuko-tier-active {
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		max-width: none !important;
	}
	
	/* Ocultar todos los conectores visibles en layout */
	.tuko-tiers-wrapper .tuko-tier-connector {
		display: none !important;
	}
	
	/* Mostrar los conectores usados para saltos de línea pero invisibles */
	.tuko-tiers-wrapper .tuko-tier-connector:nth-child(4),
	.tuko-tiers-wrapper .tuko-tier-connector:nth-child(8) {
		display: block !important;
	}
}

/* Layout para 3 escalones: 2 arriba, 1 abajo en el medio a partir de 954px hasta 765px */
/* Asegurar que no interfiera con el layout 2x2 de 4 escalones en 765px */
@media (max-width: 954px) and (min-width: 766px) {
	/* Cuando hay 2 escalones: asegurar orden correcto - PRIMER ESCALÓN SIEMPRE PRIMERO */
	/* El primer escalón (nth-child(1)) siempre debe estar primero, independientemente de su clase position */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(1) {
		margin: 0 !important;
		order: 1 !important;
		align-self: center !important;
	}
	
	/* El segundo escalón (nth-child(3)) siempre debe estar segundo */
	.tuko-tiers-wrapper:has(.tuko-tier-card:nth-child(3):last-of-type):not(:has(.tuko-tier-card:nth-child(5))) .tuko-tier-card:nth-child(3) {
		margin: 0 !important;
		order: 2 !important;
		align-self: center !important;
	}
	
	/* Solo aplicar layout especial cuando hay 3 escalones */
	/* Cuando hay un escalón 5 (9no hijo), significa que hay más de 2 escalones */
	/* En ese caso, el escalón 3 (5to hijo) es el que necesita el layout especial */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5):last-of-type {
		/* Sobrescribir el layout 2x2 del media query anterior para centrar el 3er escalón */
		flex: 0 0 auto !important;
		margin: 20px auto 0 auto !important;
		order: 3;
		/* Mantener tamaño según su estado */
	}
	
	/* Cuando hay 3 escalones, el escalón 3 (5to hijo) necesita estilos específicos */
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5):last-of-type.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5):last-of-type.tuko-tier-pending {
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		max-width: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(5):last-of-type.tuko-tier-active {
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		max-width: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(3):last-of-type.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(3):last-of-type.tuko-tier-pending {
		width: 214.698px !important;
		height: 161.023px !important;
		padding: 21.47px 10.735px !important;
		max-width: none !important;
	}
	
	.tuko-tiers-wrapper .tuko-tier-card:nth-child(3):last-of-type.tuko-tier-active {
		width: 303.86px !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		max-width: none !important;
	}
}

/* Layout móvil vertical a partir de 765px */
@media (max-width: 765px) {
	/* Ocultar segunda imagen en móvil */
	.tuko-tiers-section::after {
		display: none;
	}
	
	/* Asegurar que el contenido esté por encima de las imágenes */
	.tuko-tiers-section > * {
		position: relative;
		z-index: 1;
	}
	
	/* Conectores SVG ocultos - sin líneas de conexión */
	.tuko-tiers-wrapper .tuko-tier-connector,
	.tuko-tier-connector {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	.tuko-tiers-header {
		padding: 16px 20px;
		margin-bottom: 20px;
	}
	
	.tuko-tiers-title {
		font-size: 24px;
	}
	
	.tuko-tiers-subtitle {
		font-size: 14px;
	}
	
	/* Sin transiciones - todas eliminadas */
	.tuko-tiers-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		display: flex;
		width: 100%;
		margin: 0 auto;
	}
	
	/* Conectores SVG ocultos */
	.tuko-tier-connector svg,
	.tuko-tiers-wrapper .tuko-tier-connector svg {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Espaciado entre tarjetas */
	.tuko-tier-card {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	.tuko-tier-card.tuko-tier-reached {
		display: flex !important;
		width: 180px !important;
		height: 135px !important;
		padding: 18px 9px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-radius: 7.20px !important;
		box-shadow: none !important;
		flex: 0 0 auto !important;
	}
	
	/* Colores por posición para escalones alcanzados en móvil - SOLO cuando NO hay estilo global personalizado */
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-reached {
		background: #EFFFF4 !important;
		outline: 2px solid #20C658 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-reached {
		background: #F1EDFC !important;
		outline: 2px solid #8E5DF3 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-reached {
		background: #FFFAEE !important;
		outline: 2px solid #FEC631 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-reached {
		background: #FFFAEE !important;
		outline: 2px solid #CE3333 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-reached {
		background: #E0E7FF !important;
		outline: 2px solid #3D50F2 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tier-card.tuko-tier-pending {
		display: flex !important;
		width: 230px !important; /* Cambiado a 230px como en el ejemplo */
		height: 135px !important;
		padding: 18px 9px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		background: #FAFAFA !important;
		outline: 2px solid #D0D0D0 !important;
		outline-offset: -2px !important;
		border-radius: 8.59px !important;
		box-shadow: none !important;
		flex: 0 0 auto !important;
	}
	
	.tuko-tier-card.tuko-tier-active {
		display: flex !important;
		width: 80% !important; /* Cambiado de 280px a 80% */
		max-width: 80% !important;
		height: 227.895px !important;
		padding: 30.386px 15.193px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		margin: 0 auto !important;
		border-radius: 12.15px !important;
		flex: 0 0 auto !important;
	}
	
	/* Colores por posición para escalones activos en móvil - SOLO cuando NO hay estilo global personalizado */
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-active {
		background: #EFFFF4 !important;
		outline: 3.5px solid #20C658 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-active {
		background: #F1EDFC !important;
		outline: 3.5px solid #8E5DF3 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-active {
		background: #FFFAEE !important;
		outline: 3.5px solid #FEC631 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		outline: 3.5px solid #CE3333 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-active {
		background: #E0E7FF !important;
		outline: 3.5px solid #3D50F2 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tier-discount-value {
		font-size: 28px;
	}
	
	/* Ajustes de fuente según diseño Figma para móvil */
	.tuko-tier-card.tuko-tier-reached .tuko-tier-status-label {
		font-size: 13px !important; /* Cambiado de 12px a 13px */
		line-height: 16.8px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-reached .tuko-tier-discount-value {
		font-size: 20px !important; /* Aumentado de 18px a 20px */
		line-height: 24px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-reached .tuko-tier-discount-label {
		font-size: 20px !important; /* Aumentado de 18px a 20px para que coincida con el porcentaje */
		line-height: 24px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-status-label {
		font-size: 18.23px;
		line-height: 25.52px;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-discount-value {
		font-size: 30.39px;
		line-height: 36.46px;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-status-label {
		font-size: 13px !important; /* Cambiado de 12px a 13px */
		line-height: 16.8px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-discount-value {
		font-size: 20px !important; /* Aumentado de 18px a 20px */
		line-height: 24px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-discount-label {
		font-size: 20px !important; /* Aumentado para que coincida con el porcentaje */
		line-height: 24px !important; /* Ajustado proporcionalmente */
	}
	
	/* Reducir tamaño del SVG en tarjetas pending en móvil */
	.tuko-tier-card.tuko-tier-pending .tuko-tier-launch-svg {
		width: 28px !important; /* Reducido de 34.352px */
		height: 28px !important; /* Reducido de 34.352px */
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-launch-svg svg {
		width: 100% !important;
		height: 100% !important;
	}
	
	.tuko-tier-card.tuko-tier-reached .tuko-tier-participants-count,
	.tuko-tier-card.tuko-tier-pending .tuko-tier-participants-count {
		font-size: 12px !important; /* Aumentado de 9.66px */
		line-height: 18px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-reached .tuko-tier-participants-label-text,
	.tuko-tier-card.tuko-tier-pending .tuko-tier-participants-label-text {
		font-size: 12px !important; /* Aumentado de 7.51px */
		line-height: 18px !important; /* Ajustado proporcionalmente */
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-current-count,
	.tuko-tier-card.tuko-tier-active .tuko-tier-separator,
	.tuko-tier-card.tuko-tier-active .tuko-tier-needed-count {
		font-size: 12px !important; /* Reducido para móvil */
		line-height: 18px !important; /* Reducido para móvil */
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-participants-text {
		font-size: 11px !important; /* Tamaño para móvil */
		line-height: 16.5px !important; /* Tamaño para móvil */
		margin-left: 3px !important; /* Reducir espacio entre x/y y personas unidas */
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-remaining {
		font-size: 11px !important; /* Tamaño para móvil */
		line-height: 16.5px !important; /* Tamaño para móvil */
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-remaining .tuko-tier-remaining-number {
		font-weight: 600 !important;
	}
	
	/* Reducir tamaño general de .tuko-tier-participants-current en móvil */
	.tuko-tier-card.tuko-tier-active .tuko-tier-participants-current {
		font-size: 0.85em; /* Reducir a 85% del tamaño base */
	}
	
	
	/* Colores de descuento por posición en móvil - SOLO cuando NO hay estilo global personalizado */
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-reached .tuko-tier-discount-value,
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-active .tuko-tier-discount-value {
		color: #129C75 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-reached .tuko-tier-discount-value,
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-active .tuko-tier-discount-value {
		color: #7830C0 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-reached .tuko-tier-discount-value,
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-active .tuko-tier-discount-value {
		color: #9F780F !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-reached .tuko-tier-discount-value,
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-active .tuko-tier-discount-value {
		color: #CE3333 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-reached .tuko-tier-discount-value,
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-active .tuko-tier-discount-value {
		color: #3D50F2 !important;
	}
	
	/* Ajustes de iconos según diseño Figma para móvil pequeño */
	.tuko-tier-card.tuko-tier-reached .tuko-tier-icon-circle {
		width: 28.80px !important;
		height: 28.80px !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-icon-circle {
		width: 48.62px !important;
		height: 48.62px !important;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-icon-circle {
		width: 34.35px !important;
		height: 34.35px !important;
	}
	
	/* Ajustes de barras de progreso según diseño Figma para móvil pequeño */
	.tuko-tier-card.tuko-tier-reached .tuko-tier-progress-bar {
		height: 5.40px !important;
		border-radius: 28.80px !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-progress-bar {
		height: 9.12px !important;
		border-radius: 48.62px !important;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-progress-bar {
		height: 5px !important;
		border-radius: 34.35px !important;
	}
	
	/* Ajustes de iconos según diseño Figma para móvil */
	.tuko-tier-card.tuko-tier-reached .tuko-tier-icon-circle {
		width: 28.80px !important;
		height: 28.80px !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-icon-circle {
		width: 48.62px !important;
		height: 48.62px !important;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-icon-circle {
		width: 34.35px !important;
		height: 34.35px !important;
	}
	
	/* Ajustes de barras de progreso según diseño Figma para móvil */
	.tuko-tier-card.tuko-tier-reached .tuko-tier-progress-bar {
		height: 5.40px !important;
		border-radius: 28.80px !important;
	}
	
	.tuko-tier-card.tuko-tier-reached .tuko-tier-progress-fill {
		border-radius: 28.80px !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-progress-bar {
		height: 9.12px !important;
		border-radius: 48.62px !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-progress-fill {
		border-radius: 48.62px !important;
	}
	
	/* Colores de barras de progreso por posición en móvil - SOLO cuando NO hay estilo global personalizado */
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-reached .tuko-tier-progress-bar {
		background: #C2EFD0 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-reached .tuko-tier-progress-fill {
		background: #14C492 !important;
	}
	/* CRÍTICO: Las tarjetas activas siempre usan barra de progreso morada, independientemente de su posición */
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-active .tuko-tier-progress-bar {
		background: #D8C9F6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-0.tuko-tier-active .tuko-tier-progress-fill {
		background: #8E5DF3 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-reached .tuko-tier-progress-bar {
		background: #C6F3E6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-reached .tuko-tier-progress-fill {
		background: #14C492 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-active .tuko-tier-progress-bar {
		background: #D8C9F6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-1.tuko-tier-active .tuko-tier-progress-fill {
		background: #8E5DF3 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-reached .tuko-tier-progress-bar {
		background: #C6F3E6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-reached .tuko-tier-progress-fill {
		background: #14C492 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-active .tuko-tier-progress-bar {
		background: #D8C9F6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-2.tuko-tier-active .tuko-tier-progress-fill {
		background: #8E5DF3 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-reached .tuko-tier-progress-bar {
		background: #C6F3E6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-reached .tuko-tier-progress-fill {
		background: #14C492 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-active .tuko-tier-progress-bar {
		background: #D8C9F6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-3.tuko-tier-active .tuko-tier-progress-fill {
		background: #8E5DF3 !important;
	}
	
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-reached .tuko-tier-progress-bar {
		background: #C6F3E6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-reached .tuko-tier-progress-fill {
		background: #14C492 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-active .tuko-tier-progress-bar {
		background: #D8C9F6 !important;
	}
	.tuko-tiers-separated:not(.tuko-global-card-style) .tuko-tier-position-4.tuko-tier-active .tuko-tier-progress-fill {
		background: #8E5DF3 !important;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-progress-bar {
		height: 6.44px !important;
		border-radius: 34.35px !important;
		background: #E0E0E0 !important;
	}
	
	.tuko-tier-card.tuko-tier-pending .tuko-tier-progress-fill {
		background: transparent !important;
	}
}

@media (max-width: 480px) {
	/* Conectores SVG ocultos - sin líneas de conexión */
	.tuko-tiers-wrapper .tuko-tier-connector,
	.tuko-tier-connector {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	.tuko-tiers-section {
		padding: 16px 12px !important;
	}
	
	/* CRÍTICO: Reducir padding lateral del contenedor separado en móvil - debe sobrescribir el inline style */
	.tuko-tiers-section.tuko-tiers-separated {
		padding: 24px 15px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	
	/* Regla adicional con mayor especificidad para asegurar que sobrescriba el inline style */
	div.tuko-tiers-section.tuko-tiers-separated,
	.tuko-tiers-section.tuko-tiers-separated[style*="padding"] {
		padding: 24px 15px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	
	/* Asegurar que el wrapper tampoco tenga padding lateral */
	.tuko-tiers-separated .tuko-tiers-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Eliminar cualquier padding/margin de elementos internos de la tarjeta activa */
	.tuko-tiers-separated .tuko-tier-card.tuko-tier-active > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* Regla adicional para asegurar que no haya ningún espacio lateral en modo separado móvil */
	.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-active {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}
	
	.tuko-tiers-header {
		padding: 14px 8px;
		margin-bottom: 16px;
	}
	
	.tuko-tiers-title {
		font-size: 20px;
		margin-bottom: 0px;
	}
	
	.tuko-tiers-subtitle {
		font-size: 13px;
	}
	
	.tuko-tiers-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		display: flex;
		width: 100%;
		margin: 0 auto;
	}
	
	/* Conectores SVG ocultos */
	.tuko-tiers-wrapper .tuko-tier-connector,
	.tuko-tier-connector {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	.tuko-tier-connector svg,
	.tuko-tiers-wrapper .tuko-tier-connector svg {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Espaciado entre tarjetas */
	.tuko-tier-card {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* CRÍTICO: Selectores con máxima especificidad para sobrescribir cualquier estilo inline o dinámico */
	.tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	.tuko-tier-card.tuko-tier-reached {
		display: flex !important;
		width: 210px !important; /* Aumentado de 200px a 210px */
		height: 165px !important; /* Aumentado de 150px a 165px */
		padding: 18px 9px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-radius: 7.20px !important;
		box-shadow: none !important;
		flex: 0 0 auto !important;
	}
	
	/* Colores por posición para escalones alcanzados en móvil */
	.tuko-tier-position-0.tuko-tier-reached {
		background: #EFFFF4 !important;
		outline: 2px solid #20C658 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tier-position-1.tuko-tier-reached {
		background: #F1EDFC !important;
		outline: 2px solid #8E5DF3 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tier-position-2.tuko-tier-reached {
		background: #FFFAEE !important;
		outline: 2px solid #FEC631 !important;
		outline-offset: -2px !important;
	}
	
	.tuko-tier-position-3.tuko-tier-reached {
		background: #FFFAEE !important;
		outline: 2px solid #CE3333 !important;
		outline-offset: -2px !important;
	}
	
	/* Cuarta tarjeta (posición 3) cuando está activa - fondo rojo suave - MÁXIMA ESPECIFICIDAD */
	.tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tier-card.tuko-tier-position-3.tuko-tier-red.tuko-tier-active,
	.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
		outline: 3.5px solid #DC2626 !important;
		outline-offset: -3.5px !important;
	}
	
	/* Fondo rojo suave para la cuarta tarjeta (posición 3) cuando está activa - Móvil (480px y menos) */
	.tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
	}
	
	.tuko-tier-position-4.tuko-tier-reached {
		background: #E0E7FF !important;
		outline: 2px solid #3D50F2 !important;
		outline-offset: -2px !important;
	}
	
	/* CRÍTICO: Selectores con máxima especificidad para sobrescribir cualquier estilo inline o dinámico */
	.tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending,
	.tuko-tier-card.tuko-tier-pending {
		display: flex !important;
		width: 210px !important; /* Aumentado de 200px a 210px */
		height: 165px !important; /* Aumentado de 150px a 165px */
		padding: 18px 9px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		background: #FFE5E5 !important;
		outline: 2px solid #FF9999 !important;
		outline-offset: -2px !important;
		border-radius: 8.59px !important;
		box-shadow: none !important;
		flex: 0 0 auto !important;
	}
	
	.tuko-tier-card.tuko-tier-active {
		display: flex !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 227.895px !important;
		padding: 30.386px 16px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		align-items: center !important;
		margin: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		border-radius: 12.15px !important;
		flex: 0 0 auto !important;
		box-sizing: border-box !important;
	}
	
	/* Asegurar que los elementos internos de la tarjeta activa tengan márgenes laterales en móvil */
	.tuko-tier-card.tuko-tier-active .tuko-tier-participants-info {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-participants-current {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	.tuko-tier-card.tuko-tier-active .tuko-tier-progress-bar {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	/* Colores por posición para escalones activos en móvil */
	.tuko-tier-position-0.tuko-tier-active {
		background: #EFFFF4 !important;
		outline: 3.04px solid #20C658 !important;
		outline-offset: -3.04px !important;
		box-shadow: none !important;
	}
	
	.tuko-tier-position-1.tuko-tier-active {
		background: #F1EDFC !important;
		outline: 3.04px solid #8E5DF3 !important;
		outline-offset: -3.04px !important;
		box-shadow: none !important;
	}
	
	.tuko-tier-position-2.tuko-tier-active {
		background: #FFFAEE !important;
		outline: none !important;
		outline-offset: 0 !important;
		box-shadow: none !important;
	}
	
	.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		outline: 3.5px solid #CE3333 !important;
		outline-offset: -3.5px !important;
		box-shadow: none !important;
	}
	
	.tuko-tier-position-4.tuko-tier-active {
		background: #E0E7FF !important;
		outline: 3.04px solid #3D50F2 !important;
		outline-offset: -3.04px !important;
		box-shadow: none !important;
	}
	
	/* CRÍTICO: Regla adicional con máxima especificidad para forzar tamaño de tarjetas alcanzadas/completadas en móvil */
	/* Incluir selectores con atributos de datos para máxima especificidad - TODAS las tarjetas reached deben tener el mismo tamaño */
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached[data-tier-index],
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	body .tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	body .tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-reached,
	/* Asegurar que todas las posiciones de tarjetas reached tengan el mismo tamaño */
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-0.tuko-tier-reached,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-1.tuko-tier-reached,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-2.tuko-tier-reached,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-reached,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-4.tuko-tier-reached {
		width: 210px !important; /* Aumentado de 200px a 210px - TODAS las reached tienen el mismo tamaño */
		height: 165px !important; /* Aumentado de 150px a 165px - TODAS las reached tienen el mismo tamaño */
		min-width: 210px !important;
		max-width: 210px !important;
		min-height: 165px !important;
		max-height: 165px !important;
	}
	
	/* CRÍTICO: Regla adicional con máxima especificidad para forzar tamaño de tarjetas pendientes en móvil */
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending[data-tier-index],
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending,
	body .tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending,
	body .tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-pending {
		width: 230px !important; /* Cambiado a 230px como en el ejemplo */
		height: 165px !important; /* Aumentado de 150px a 165px */
		min-width: 230px !important;
		max-width: 230px !important;
		min-height: 165px !important;
		max-height: 165px !important;
	}
}

/* Animaciones suaves para cambios de estado de escalones */
@keyframes tierBecomeActive {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes tierBecomeReached {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(0.98);
		opacity: 0.95;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Sin transiciones ni animaciones - todas eliminadas para elementos internos de escalones */

/* ============================================
   Modal de unirse al grupo (email) - Diseño Figma
   ============================================ */

/* Modal overlay y contenedor */
.tuko-join-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px; /* Más margen arriba y abajo para aplanarlo */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	overflow: hidden; /* Prevenir scroll y espacios en blanco */
}

.tuko-join-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.tuko-join-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7); /* Más oscuro */
	backdrop-filter: blur(8px); /* Más borroso */
	z-index: 0; /* Detrás del contenido */
	animation: tukoModalOverlayFadeIn 0.3s ease;
}

.tuko-join-modal-content {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	max-width: 360px; /* Tamaño por defecto para laptop/portátil */
	width: 100%;
	max-height: calc(100vh - 100px); /* Más altura, menos margen para alargar el popup */
	overflow-y: hidden; /* Sin scroll */
	overflow-x: hidden;
	transform: scale(0.95);
	transition: transform 0.2s ease-out;
	z-index: 1; /* Encima del overlay */
}

.tuko-join-modal[aria-hidden="false"] .tuko-join-modal-content {
	transform: scale(1);
	animation: tukoModalFadeIn 0.3s ease;
}

.tuko-join-modal-content.closing {
	animation: tukoModalFadeOutSmooth 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes tukoModalFadeOutSmooth {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.98) translateY(-0.25rem);
	}
}

/* Desktop grande (> 1440px) - Escalado proporcional uniforme */
@media (min-width: 1441px) {
	/* Factor de escala uniforme: 1.3x - Mantener proporciones exactas */
	.tuko-join-modal-content {
		max-width: 468px !important; /* 360px * 1.3 */
		width: 468px !important; /* Forzar ancho */
		max-height: calc(100vh - 130px) !important; /* Escalado proporcional del margen */
		border-radius: 15.6px !important; /* 12px * 1.3 */
	}
	
	/* Header escalado proporcionalmente - Similar al modal de compartir */
	.tuko-join-modal-header {
		height: 7.5rem !important; /* 6.25rem * 1.2 = 120px, igual que compartir */
		padding: 0.6rem !important; /* 0.5rem * 1.2 = 9.6px */
	}
	
	/* Botón cerrar escalado proporcionalmente */
	.tuko-join-modal-close {
		width: 2.4rem !important; /* 2rem * 1.2 = 38.4px, igual que compartir */
		height: 2.4rem !important;
		top: 0.9rem !important; /* 0.75rem * 1.2 = 14.4px */
		right: 0.9rem !important;
	}
	
	.tuko-join-modal-close svg {
		width: 1.2rem !important; /* 1rem * 1.2 = 19.2px, igual que compartir */
		height: 1.2rem !important;
	}
	
	/* Icono circular escalado proporcionalmente - Más pequeño que compartir */
	.tuko-join-modal-icon-wrapper {
		margin-top: -2.75rem !important; /* Icono centrado en el borde del header - ajustado para círculo más pequeño */
		margin-bottom: 0.9rem !important; /* 0.75rem * 1.2 = 9.6px */
	}
	
	.tuko-join-modal-icon-circle {
		padding: 0.75rem !important; /* 0.625rem * 1.2 = 12px */
		border: 3px solid #ffffff !important;
		width: 4.8rem !important; /* 4rem * 1.2 = 76.8px, más pequeño */
		height: 4.8rem !important;
	}
	
	.tuko-join-modal-icon-circle svg {
		width: 3rem !important; /* 2.5rem * 1.2 = 48px */
		height: 3rem !important;
	}
	
	/* Body escalado proporcionalmente */
	.tuko-join-modal-body {
		padding: 0 20.8px 2.6rem 20.8px !important; /* 16px * 1.3, 2rem * 1.3 */
	}
	
	/* Títulos escalados proporcionalmente */
	.tuko-join-modal-title {
		font-size: 26px !important; /* 20px * 1.3 */
		margin: 0 0 2.6px 0 !important; /* 2px * 1.3 */
		letter-spacing: -0.52px !important; /* -0.4px * 1.3 */
		line-height: 120% !important;
	}
	
	.tuko-join-modal-subtitle {
		font-size: 18.2px !important; /* 14px * 1.3 */
		margin: 0 0 15.6px 0 !important; /* 12px * 1.3 */
		letter-spacing: -0.364px !important; /* -0.28px * 1.3 */
		line-height: 120% !important;
	}
	
	/* Formulario escalado proporcionalmente */
	.tuko-join-modal-form {
		gap: 7.8px !important; /* 6px * 1.3 */
	}

	/* Mensaje de error del email - menos espacio antes del checkbox en pantallas grandes */
	#tuko-join-email-error {
		margin-bottom: 2.6px !important; /* 2px * 1.3 */
	}

	/* Campo del checkbox - más cerca del campo de email en pantallas grandes */
	.tuko-join-modal-field-checkbox {
		margin-top: -5.2px !important; /* -4px * 1.3 */
	}

	/* Mensaje de error del email - menos espacio antes del checkbox en pantallas grandes */
	#tuko-join-email-error {
		margin-bottom: 2.6px !important; /* 2px * 1.3 */
	}
	
	/* Campos escalados proporcionalmente */
	.tuko-join-modal-field-quantity {
		margin-top: -20.8px !important; /* -16px * 1.3 */
	}
	
	.tuko-join-modal-field-quantity.tuko-has-email-error {
		margin-top: -15.6px !important; /* -12px * 1.3 */
	}
	
	/* Labels escalados proporcionalmente */
	.tuko-join-modal-label {
		font-size: 15.6px !important; /* 12px * 1.3 */
		margin-bottom: 3.9px !important; /* 3px * 1.3 */
		line-height: 1.3 !important;
	}
	
	.tuko-join-modal-optional {
		font-size: 15.6px !important; /* 12px * 1.3 */
	}
	
	.tuko-join-modal-required {
		font-size: 15.6px !important; /* 12px * 1.3 */
	}
	
	/* Inputs escalados proporcionalmente */
	.tuko-join-modal-input {
		padding: 9.1px 13px !important; /* 7px * 1.3, 10px * 1.3 */
		font-size: 16.9px !important; /* 13px * 1.3 */
		border-radius: 7.8px !important; /* 6px * 1.3 */
		line-height: 1.3 !important;
	}
	
	#tuko-join-name,
	#tuko-join-surname,
	#tuko-join-email,
	#tuko-join-quantity {
		padding: 9.1px 13px !important;
		font-size: 16.9px !important;
		line-height: 1.3 !important;
	}
	
	/* Checkbox escalado proporcionalmente */
	.tuko-join-modal-checkbox {
		width: 16.9px !important; /* 13px * 1.3 */
		height: 16.9px !important;
		margin-top: 1.3px !important; /* 1px * 1.3 */
	}
	
	.tuko-join-modal-checkbox-text {
		font-size: 14.3px !important; /* 11px * 1.3 */
		line-height: 1.3 !important;
	}
	
	.tuko-join-modal-checkbox-label {
		gap: 7.8px !important; /* 6px * 1.3 */
	}
	
	/* Botones escalados proporcionalmente */
	.tuko-join-modal-submit,
	.tuko-join-modal-cancel {
		padding: 10.4px 15.6px !important; /* 8px * 1.3, 12px * 1.3 */
		font-size: 16.9px !important; /* 13px * 1.3 */
		border-radius: 7.8px !important; /* 6px * 1.3 */
		line-height: 1.3 !important;
	}
	
	.tuko-join-modal-actions {
		gap: 7.8px !important; /* 6px * 1.3 */
		margin-top: 2.6px !important; /* 2px * 1.3 */
	}
	
	/* Error messages escalados proporcionalmente */
	.tuko-join-modal-error {
		font-size: 14.3px !important; /* 11px * 1.3 */
		margin-top: 2.6px !important; /* 2px * 1.3 */
		min-height: 18.2px !important; /* 14px * 1.3 */
		line-height: 1.2 !important;
	}
	
	#tuko-join-email-error {
		margin-top: 2.6px !important; /* 2px * 1.3 */
		margin-bottom: 7.8px !important; /* 6px * 1.3 */
		font-size: 14.3px !important;
	}
	
	#tuko-join-terms-error {
		font-size: 14.3px !important;
	}
	
	.tuko-join-modal-terms-error-wrapper {
		margin-top: -15.6px !important; /* -12px * 1.3 */
		margin-left: 29.9px !important; /* 23px * 1.3 */
	}
	
	.tuko-join-modal-input:focus {
		box-shadow: 0 0 0 2.6px #4f46e5 !important; /* 2px * 1.3 */
	}
	
	.tuko-join-modal-input.error:focus {
		box-shadow: 0 0 0 2.6px rgba(239, 68, 68, 0.2) !important; /* 2px * 1.3 */
	}
}



/* ============================================
   Modulo: 05c-mobile.css
   ============================================ */

/* ============================================
   TIERS - PARTE MOBILE (05c)
   ============================================ */


@keyframes tuko-join-modal-fade-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Header con imagen de fondo - Similar al modal de compartir */
.tuko-join-modal-header {
	position: relative;
	height: 6.25rem; /* Más alto, igual que el modal de compartir (100px) */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 0.5rem;
	overflow: hidden;
}

.tuko-join-modal-header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, transparent 0%, rgba(61, 80, 242, 1) 90%, rgba(61, 80, 242, 1) 100%);
	z-index: 1;
}

/* Botón cerrar - Similar al modal de compartir */
.tuko-join-modal-close {
	position: absolute;
	top: 0.75rem; /* Similar al modal de compartir */
	right: 0.75rem;
	width: 2rem; /* Similar al modal de compartir (32px) */
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: none;
	border-radius: 50%;
	color: #374151;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	z-index: 10;
	box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
}

.tuko-join-modal-close:hover {
	background: #f3f4f6;
	transform: scale(1.05);
}

.tuko-join-modal-close:active {
	transform: scale(0.95);
}

.tuko-join-modal-close svg {
	width: 1rem; /* Similar al modal de compartir (16px) */
	height: 1rem;
}

/* Icono circular - Más pequeño que compartir */
.tuko-join-modal-icon-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: -2.75rem; /* Icono centrado en el borde del header de 6.25rem - ajustado para círculo más pequeño */
	margin-bottom: 0.75rem; /* Similar al modal de compartir */
	z-index: 20;
}

.tuko-join-modal-icon-circle {
	background: #f3f4f6;
	border-radius: 50%;
	padding: 0.625rem; /* Más pequeño */
	border: 3px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem; /* Más pequeño (64px) */
	height: 4rem;
}

.tuko-join-modal-icon-circle svg {
	width: 2.5rem; /* Más pequeño (40px) */
	height: 2.5rem;
	color: #4b5563;
}

/* Cuerpo del modal */
.tuko-join-modal-body {
	padding: 0 16px 2rem 16px; /* Más padding inferior para mayor separación (32px) */
}

.tuko-join-modal-title {
	text-align: center;
	margin: 0 0 2px 0;
	color: #222;
	font-family: var(--tuko-font-family, "Mona Sans SemiExpanded", "Mona Sans", sans-serif) !important;
	font-size: 20px;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -0.4px;
}

.tuko-join-modal-subtitle {
	text-align: center;
	margin: 0 0 12px 0;
	color: #222;
	font-family: "Roboto Serif", serif;
	font-size: 14px;
	font-style: italic;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -0.28px;
}

/* Formulario */
.tuko-join-modal-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tuko-join-modal-field {
	display: flex;
	flex-direction: column;
}

/* Reducir espacio antes del campo de cantidad */
.tuko-join-modal-field-quantity {
	margin-top: -16px;
}

/* Cuando hay error de email, bajar un poco el campo cantidad */
.tuko-join-modal-field-quantity.tuko-has-email-error {
	margin-top: -12px;
}

.tuko-join-modal-label {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 3px;
	color: #374151;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-join-modal-optional {
	color: #9ca3af;
}

.tuko-join-modal-required {
	color: #ef4444;
}

.tuko-join-modal-input {
	width: 100%;
	padding: 7px 10px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: #111827;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	box-sizing: border-box;
}

.tuko-join-modal-input:focus {
	outline: none;
	border-color: transparent;
	box-shadow: 0 0 0 2px #4f46e5;
}

.tuko-join-modal-input.error {
	border-color: #ef4444;
}

.tuko-join-modal-input.error:focus {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.tuko-join-modal-error {
	display: block;
	font-size: 11px; /* Mantener tamaño original de desktop */
	color: #ef4444;
	margin-top: 2px;
	min-height: 14px;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	line-height: 1.2;
}

/* Mensaje de error del email - menos espacio antes del checkbox */
#tuko-join-email-error {
	margin-top: 2px;
	margin-bottom: 2px; /* Reducido de 6px a 2px para acercar el checkbox */
	display: block;
}

/* Campo del checkbox - más cerca del campo de email */
.tuko-join-modal-field-checkbox {
	margin-top: -4px; /* Margen negativo para acercar al email */
}

/* Checkbox */
.tuko-join-modal-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
	margin-bottom: 0;
}

.tuko-join-modal-checkbox {
	width: 13px;
	height: 13px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: #4f46e5;
	cursor: pointer;
}

.tuko-join-modal-checkbox-text {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	color: #374151;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Error de términos - alineado con el texto del checkbox y más cerca */
.tuko-join-modal-terms-error-wrapper {
	margin-top: -12px; /* Muy pegado al texto del checkbox */
	margin-left: 25px; /* Reducido de 28px a 25px para moverlo un poco a la izquierda */
	margin-bottom: 0;
	padding-left: 0; /* Sin padding adicional, el margin-left ya alinea */
}

#tuko-join-terms-error {
	margin: 0;
	display: block;
	text-align: left; /* Asegurar alineación a la izquierda */
	font-size: 10px; /* Reducido un poco para desktop */
}

/* Acciones del modal */
.tuko-join-modal-actions {
	display: flex;
	gap: 6px;
	margin-top: 2px;
	margin-bottom: 0; /* Asegurar que no haya margen extra */
}

.tuko-join-modal-cancel,
.tuko-join-modal-submit {
	flex: 1;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Asegurar que cuando los botones están en columna (móvil), "Unirme" siempre esté arriba */
@media (max-width: 768px) {
	.tuko-join-modal-actions {
		flex-direction: column;
	}
	
	.tuko-join-modal-submit {
		order: 1 !important; /* Aparecer primero - siempre arriba */
	}
	
	.tuko-join-modal-cancel {
		order: 2 !important; /* Aparecer segundo - siempre abajo */
	}
}

.tuko-join-modal-cancel {
	background: transparent;
	color: #374151;
	border: 1px solid #d1d5db;
}

.tuko-join-modal-cancel:hover {
	background: #f9fafb;
}

.tuko-join-modal-submit {
	background: linear-gradient(to right, #2563eb, #4f46e5);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tuko-join-modal-submit:hover:not(:disabled) {
	background: linear-gradient(to right, #1d4ed8, #4338ca);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.tuko-join-modal-submit:active:not(:disabled) {
	transform: translateY(0);
}

.tuko-join-modal-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.tuko-modal-open {
	overflow: hidden;
}

/* Oscurecer el botón de la galería de WooCommerce cuando el modal está abierto */
/* Aplicar cuando el body tiene la clase tuko-modal-open */
body.tuko-modal-open .woocommerce-product-gallery__trigger {
	opacity: 0.3 !important;
	filter: brightness(0.3) !important; /* Más oscuro para igualar el fondo */
	pointer-events: none !important;
	transition: opacity 0.3s ease, filter 0.3s ease !important;
	z-index: 1 !important; /* Asegurar que esté por debajo del overlay */
}

/* Aplicar cuando cualquier modal está visible usando :has() */
body:has(.tuko-share-modal[aria-hidden="false"]) .woocommerce-product-gallery__trigger,
body:has(.tuko-join-modal[aria-hidden="false"]) .woocommerce-product-gallery__trigger,
body:has(.tuko-leave-modal[aria-hidden="false"]) .woocommerce-product-gallery__trigger {
	opacity: 0.3 !important;
	filter: brightness(0.3) !important; /* Más oscuro para igualar el fondo */
	pointer-events: none !important;
	transition: opacity 0.3s ease, filter 0.3s ease !important;
	z-index: 1 !important; /* Asegurar que esté por debajo del overlay */
}

/* ============================================
   Estilos tablet para el modal de unirse al grupo
   ============================================ */
@media (min-width: 551px) and (max-width: 768px) {
	.tuko-join-modal-content {
		overflow-y: auto; /* Permitir scroll en tablet */
		overflow-x: hidden;
	}
}

/* ============================================
   Estilos móviles para el modal de unirse al grupo
   ============================================ */
@media (max-width: 550px) {
	.tuko-join-modal {
		padding: 0.5rem 0.5rem; /* Igual que el modal de compartir: 8px (0.5rem) */
		align-items: center;
		justify-content: center;
	}

	.tuko-join-modal-content {
		max-width: 90%; /* Igual que el modal de compartir: 90% para dejar márgenes */
		border-radius: 12px;
		max-height: calc(100vh - 1rem); /* Igual que el modal de compartir */
		overflow-y: auto; /* Permitir scroll en móvil para completar el formulario */
		overflow-x: hidden;
	}

	.tuko-join-modal-header {
		height: 4.5rem; /* Similar al modal de compartir en móvil - más grande que antes */
		padding: 0.5rem;
	}

	.tuko-join-modal-close {
		top: 0.375rem; /* Similar al modal de compartir */
		right: 0.375rem;
		width: 1.375rem; /* Similar al modal de compartir */
		height: 1.375rem;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}

	.tuko-join-modal-close svg {
		width: 0.6875rem; /* Similar al modal de compartir */
		height: 0.6875rem;
	}

	.tuko-join-modal-icon-wrapper {
		margin-top: -1.625rem; /* Icono centrado en el borde del header de 4.5rem - ajustado para círculo más pequeño */
		margin-bottom: 0.5rem; /* Similar al modal de compartir */
	}

	.tuko-join-modal-icon-circle {
		padding: 0.4375rem; /* Más pequeño */
		border: 2px solid #ffffff;
		box-shadow: none;
		width: 3.25rem !important; /* Más pequeño (52px) */
		height: 3.25rem !important;
	}

	.tuko-join-modal-icon-circle svg {
		width: 2rem; /* Más pequeño (32px) */
		height: 2rem;
	}

	.tuko-join-modal-body {
		padding: 0 12px 10px 12px;
	}

	.tuko-join-modal-title {
		font-size: 15px;
		margin: 0 0 1px 0;
		letter-spacing: -0.3px;
		line-height: 1.2;
	}

	.tuko-join-modal-subtitle {
		font-size: 11px;
		margin: 0 0 8px 0;
		letter-spacing: -0.22px;
		line-height: 1.2;
	}

	.tuko-join-modal-form {
		gap: 4px;
	}

	.tuko-join-modal-label {
		font-size: 10px;
		margin-bottom: 2px;
		font-weight: 500;
		line-height: 1.2;
	}

	.tuko-join-modal-input {
		padding: 6px 9px;
		font-size: 12px;
		border-radius: 5px;
		line-height: 1.3;
	}

	.tuko-join-modal-field-quantity {
		margin-top: -12px;
	}

	.tuko-join-modal-field-quantity.tuko-has-email-error {
		margin-top: -8px;
	}

	.tuko-join-modal-error {
		font-size: 11px; /* Aumentado de 9px a 11px */
		min-height: 13px; /* Aumentado proporcionalmente */
		line-height: 1.2;
	}

	#tuko-join-email-error {
		margin-bottom: 2px; /* Reducido para acercar el checkbox */
	}

	/* Campo del checkbox - más cerca del campo de email en móvil */
	.tuko-join-modal-field-checkbox {
		margin-top: -3px !important; /* Ajustado para móvil */
	}

	.tuko-join-modal-checkbox-label {
		gap: 6px;
		align-items: center;
	}

	.tuko-join-modal-checkbox {
		width: 14px;
		height: 14px;
		margin-top: 0;
		flex-shrink: 0;
	}

	.tuko-join-modal-checkbox-text {
		font-size: 9px;
		line-height: 1.3;
	}

	.tuko-join-modal-terms-error-wrapper {
		margin-top: -7px; /* Aumentado de -5px a -7px para subirlo más */
		margin-left: 28px; /* Mantener posición a la derecha */
	}

	#tuko-join-terms-error {
		font-size: 11px; /* Aumentado para que sea más grande */
	}

	.tuko-join-modal-actions {
		gap: 5px;
		margin-top: 2px;
		flex-direction: column; /* Botones apilados verticalmente */
	}

	.tuko-join-modal-submit {
		order: 1 !important; /* Aparecer primero */
	}

	.tuko-join-modal-cancel {
		order: 2 !important; /* Aparecer segundo */
	}

	.tuko-join-modal-cancel,
	.tuko-join-modal-submit {
		padding: 8px 10px;
		font-size: 12px;
		border-radius: 5px;
		font-weight: 600;
	}
}

@media (max-width: 480px) {
	.tuko-join-modal {
		padding: 0.5rem 0.5rem; /* Igual que el modal de compartir: 8px (0.5rem) */
		align-items: center;
		justify-content: center;
	}

	.tuko-join-modal-content {
		max-width: 90%; /* Igual que el modal de compartir: 90% para dejar márgenes */
		max-height: calc(100vh - 1rem); /* Igual que el modal de compartir */
		border-radius: 10px;
		overflow-y: auto; /* Permitir scroll en móvil pequeño para completar el formulario */
		overflow-x: hidden;
	}

	.tuko-join-modal-header {
		height: 4rem; /* Más grande que antes, similar proporción al modal de compartir */
		padding: 0.5rem;
	}

	.tuko-join-modal-close {
		top: 0.375rem; /* Similar al modal de compartir */
		right: 0.375rem;
		width: 1.375rem; /* Similar al modal de compartir */
		height: 1.375rem;
	}

	.tuko-join-modal-close svg {
		width: 0.6875rem; /* Similar al modal de compartir */
		height: 0.6875rem;
	}

	.tuko-join-modal-icon-wrapper {
		margin-top: -1.5rem; /* Icono centrado en el borde del header de 4rem - ajustado para círculo más pequeño */
		margin-bottom: 0.5rem; /* Similar al modal de compartir */
	}

	.tuko-join-modal-icon-circle {
		padding: 0.375rem; /* Más pequeño */
		border: 2px solid #ffffff;
		box-shadow: none;
		width: 3rem !important; /* Más pequeño (48px) */
		height: 3rem !important;
	}

	.tuko-join-modal-icon-circle svg {
		width: 1.75rem; /* Más pequeño (28px) */
		height: 1.75rem;
	}

	.tuko-join-modal-body {
		padding: 0 10px 8px 10px;
	}

	.tuko-join-modal-title {
		font-size: 14px;
		margin: 0 0 1px 0;
		letter-spacing: -0.28px;
		line-height: 1.2;
	}

	.tuko-join-modal-subtitle {
		font-size: 10px;
		margin: 0 0 6px 0;
		letter-spacing: -0.2px;
		line-height: 1.2;
	}

	.tuko-join-modal-form {
		gap: 3px;
	}

	.tuko-join-modal-label {
		font-size: 9px;
		margin-bottom: 1px;
		font-weight: 500;
		line-height: 1.2;
	}

	.tuko-join-modal-input {
		padding: 5px 8px;
		font-size: 11px;
		border-radius: 4px;
		line-height: 1.3;
	}

	.tuko-join-modal-field-quantity {
		margin-top: -10px;
	}

	.tuko-join-modal-field-quantity.tuko-has-email-error {
		margin-top: -6px;
	}

	.tuko-join-modal-error {
		font-size: 10px; /* Aumentado de 8px a 10px */
		min-height: 12px; /* Aumentado proporcionalmente */
		line-height: 1.2;
	}

	#tuko-join-email-error {
		margin-bottom: 1px; /* Reducido aún más para móvil pequeño */
	}

	/* Campo del checkbox - más cerca del campo de email en móvil pequeño */
	.tuko-join-modal-field-checkbox {
		margin-top: -2px !important; /* Ajustado para móvil pequeño */
	}

	.tuko-join-modal-checkbox-label {
		gap: 5px;
		align-items: center;
	}

	.tuko-join-modal-checkbox {
		width: 13px;
		height: 13px;
		margin-top: 0;
	}

	.tuko-join-modal-checkbox-text {
		font-size: 8px;
		line-height: 1.25;
	}

	.tuko-join-modal-terms-error-wrapper {
		margin-top: -6px; /* Aumentado de -4px a -6px para subirlo más */
		margin-left: 26px; /* Mantener posición a la derecha */
	}

	#tuko-join-terms-error {
		font-size: 10px; /* Aumentado para que sea más grande */
	}

	.tuko-join-modal-actions {
		gap: 4px;
		margin-top: 1px;
		flex-direction: column; /* Botones apilados verticalmente */
	}

	.tuko-join-modal-submit {
		order: 1 !important; /* Aparecer primero */
	}

	.tuko-join-modal-cancel {
		order: 2 !important; /* Aparecer segundo */
	}

	.tuko-join-modal-cancel,
	.tuko-join-modal-submit {
		padding: 7px 9px;
		font-size: 11px;
		border-radius: 4px;
		font-weight: 600;
	}
}

/* ============================================
   Modal de confirmación para salir del grupo
   ============================================ */

.tuko-leave-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	overflow: hidden; /* Prevenir scroll y espacios en blanco */
}

.tuko-leave-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.tuko-leave-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7); /* Más oscuro */
	backdrop-filter: blur(8px); /* Más borroso */
	z-index: 0; /* Detrás del contenido */
	animation: tukoModalOverlayFadeIn 0.3s ease;
}

.tuko-leave-modal-content {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	max-width: 360px; /* Tamaño por defecto para laptop/portátil */
	width: 100%;
	max-height: calc(100vh - 40px);
	overflow-y: hidden;
	overflow-x: hidden;
	transform: scale(0.95);
	transition: transform 0.2s ease-out;
	box-sizing: border-box;
	z-index: 1; /* Encima del overlay */
}

/* Desktop grande (> 1440px) - Escalado proporcional más grande */
@media (min-width: 1441px) {
	/* Factor de escala: 1.3x (360px * 1.3 = 468px) */
	.tuko-leave-modal-content {
		max-width: 468px !important; /* 360px * 1.3 = proporción exacta */
		width: 468px !important;
		max-height: calc(100vh - 52px) !important; /* Escalado proporcional del margen */
		border-radius: 15.6px !important; /* 12px * 1.3 */
	}
	
	/* Header escalado proporcionalmente */
	.tuko-leave-modal-header {
		height: 117px !important; /* 90px * 1.3 */
		padding: 15.6px !important; /* 12px * 1.3 */
	}
	
	/* Botón cerrar escalado */
	.tuko-leave-modal-close {
		width: 36.4px !important; /* 28px * 1.3 */
		height: 36.4px !important;
		top: 15.6px !important; /* 12px * 1.3 */
		right: 15.6px !important;
	}
	
	.tuko-leave-modal-close svg {
		width: 18.2px !important; /* 14px * 1.3 */
		height: 18.2px !important;
	}
	
	/* Icono circular escalado proporcionalmente */
	.tuko-leave-modal-icon-wrapper {
		margin-top: -45.5px !important; /* -35px * 1.3 */
		margin-bottom: 7.8px !important; /* 6px * 1.3 */
	}
	
	.tuko-leave-modal-icon-circle {
		padding: 23.4px !important; /* 18px * 1.3 */
		border: 3.9px solid #ffffff !important; /* 3px * 1.3 */
	}
	
	.tuko-leave-modal-icon-circle svg {
		width: 57.2px !important; /* 44px * 1.3 */
		height: 57.2px !important;
	}
	
	/* Body escalado proporcionalmente */
	.tuko-leave-modal-body {
		padding: 7.8px 20.8px 31.2px 20.8px !important; /* 6px * 1.3, 16px * 1.3, 24px * 1.3 */
	}
	
	/* Títulos escalados proporcionalmente */
	.tuko-leave-modal-title {
		font-size: 26px !important; /* 20px * 1.3 */
		margin: 0 0 13px 0 !important; /* 10px * 1.3 */
		line-height: 120% !important;
		letter-spacing: -0.52px !important; /* -0.4px * 1.3 */
	}
	
	.tuko-leave-modal-subtitle {
		font-size: 18.2px !important; /* 14px * 1.3 */
		margin: 0 0 23.4px 0 !important; /* 18px * 1.3 */
		line-height: 120% !important;
	}
	
	.tuko-leave-modal-text {
		font-size: 15.6px !important; /* 12px * 1.3 */
		line-height: 1.4 !important; /* Mantener proporción */
		margin-bottom: 33.8px !important; /* 26px * 1.3 */
	}
	
	/* Badge escalado proporcionalmente */
	.tuko-leave-modal-badge {
		margin-bottom: 20.8px !important; /* 16px * 1.3 */
	}
	
	.tuko-leave-modal-badge-text {
		padding: 5.2px 15.6px !important; /* 4px * 1.3, 12px * 1.3 */
		font-size: 13px !important; /* 10px * 1.3 */
		border-radius: 9999px !important;
	}
	
	/* Botones escalados proporcionalmente */
	.tuko-leave-modal-confirm,
	.tuko-leave-modal-cancel {
		padding: 11.7px 15.6px !important; /* 9px * 1.3, 12px * 1.3 */
		font-size: 16.9px !important; /* 13px * 1.3 */
		border-radius: 7.8px !important; /* 6px * 1.3 */
		line-height: 1.3 !important;
	}
	
	.tuko-leave-modal-actions {
		gap: 7.8px !important; /* 6px * 1.3 */
		margin-top: 10.4px !important; /* 8px * 1.3 */
	}
}

.tuko-leave-modal[aria-hidden="false"] .tuko-leave-modal-content {
	transform: scale(1);
	animation: tukoModalFadeIn 0.1s ease;
}

.tuko-leave-modal-content.closing {
	animation: tukoModalFadeOut 0.2s ease;
}

/* Header con imagen de fondo */
.tuko-leave-modal-header {
	position: relative;
	height: 90px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 12px;
}

.tuko-leave-modal-header-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 0%, rgba(249, 115, 22, 1) 90%, rgba(239, 68, 68, 1) 100%);
	z-index: 1;
}

/* Botón cerrar */
.tuko-leave-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: none;
	border-radius: 50%;
	color: #374151;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	z-index: 10;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tuko-leave-modal-close:hover {
	background: #f3f4f6;
	transform: scale(1.05);
}

.tuko-leave-modal-close:active {
	transform: scale(0.95);
}

.tuko-leave-modal-close svg {
	width: 14px;
	height: 14px;
}

/* Icono de alerta superpuesto */
.tuko-leave-modal-icon-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: -35px; /* Subido más arriba para mejor centrado */
	margin-bottom: 6px; /* Reducido para acercar el body al icono */
	z-index: 20;
}

.tuko-leave-modal-icon-circle {
	background: #f3f4f6;
	border-radius: 50%;
	padding: 18px; /* Aumentado de 12px */
	border: 3px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none; /* Sin sombreado */
}

.tuko-leave-modal-icon-circle svg {
	width: 44px; /* Aumentado de 36px */
	height: 44px;
}

/* Cuerpo del modal */
.tuko-leave-modal-body {
	padding: 6px 16px 24px 16px; /* Padding superior reducido para acercar al icono */
}

/* Badge con nombre del producto */
.tuko-leave-modal-badge {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.tuko-leave-modal-badge-text {
	display: inline-block;
	background: #fef2f2;
	color: #b91c1c;
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 500;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

/* Título */
.tuko-leave-modal-title {
	text-align: center;
	margin: 0 0 10px 0;
	color: #222;
	font-family: var(--tuko-font-family, "Mona Sans SemiExpanded", "Mona Sans", sans-serif) !important;
	font-size: 20px;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: -0.4px;
}

/* Subtítulo en cursiva */
.tuko-leave-modal-subtitle {
	text-align: center;
	margin: 0 0 18px 0;
	color: #666;
	font-family: "Roboto Serif", serif;
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 120%;
}

/* Descripción */
.tuko-leave-modal-text {
	text-align: center;
	margin: 0 0 26px 0;
	color: #4b5563;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

/* Botones */
.tuko-leave-modal-actions {
	display: flex;
	flex-direction: row;
	gap: 6px;
	margin-top: 8px;
}

.tuko-leave-modal-confirm,
.tuko-leave-modal-cancel {
	flex: 1;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif) !important;
}

.tuko-leave-modal-confirm {
	background: linear-gradient(to right, #f97316, #dc2626);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tuko-leave-modal-confirm:hover:not(:disabled) {
	background: linear-gradient(to right, #ea580c, #b91c1c);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transform: translateY(-1px);
}

.tuko-leave-modal-confirm:active:not(:disabled) {
	transform: translateY(0);
}

.tuko-leave-modal-confirm:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tuko-leave-modal-cancel {
	background: #ffffff;
	color: #374151;
	border: 2px solid #d1d5db;
}

.tuko-leave-modal-cancel:hover {
	background: #f9fafb;
}

/* Responsive */
@media (max-width: 640px) {
	.tuko-join-modal {
		padding: 0.5rem 0.5rem; /* Igual que el modal de compartir: 8px (0.5rem) */
		align-items: center;
		justify-content: center;
	}

	.tuko-join-modal-overlay {
		position: fixed;
		inset: 0;
	}

	.tuko-join-modal-content {
		width: 100%;
		max-width: 90%; /* Igual que el modal de compartir: 90% para dejar márgenes */
		border-radius: 24px;
		margin: 0;
	}

	.tuko-join-modal-header {
		height: 5rem; /* Similar proporción al modal de compartir en tablet (80px) */
		padding: 0.5rem;
	}

	.tuko-join-modal-icon-wrapper {
		margin-top: -1.875rem; /* Icono centrado en el borde del header de 5rem - ajustado para círculo más pequeño */
		margin-bottom: 0.75rem; /* Similar al modal de compartir */
	}

	.tuko-join-modal-icon-circle {
		padding: 0.5rem; /* Más pequeño */
		border: 3px solid #ffffff;
		width: 3.5rem !important; /* Más pequeño (56px) */
		height: 3.5rem !important;
	}

	.tuko-join-modal-icon-circle svg {
		width: 2.25rem; /* Más pequeño (36px) */
		height: 2.25rem;
	}

	.tuko-join-modal-body {
		padding: 0 20px 16px 20px;
	}

	.tuko-join-modal-title {
		font-size: 24px;
		margin: 0 0 2px 0;
	}

	.tuko-join-modal-subtitle {
		font-size: 18px;
		margin: 0 0 20px 0;
	}

	.tuko-join-modal-form {
		gap: 10px;
	}

	.tuko-join-modal-field-quantity {
		margin-top: -20px;
	}

	.tuko-join-modal-actions {
		flex-direction: column;
		margin-top: 4px;
		gap: 8px;
	}

	.tuko-join-modal-submit {
		order: 1 !important; /* Aparecer primero */
	}

	.tuko-join-modal-cancel {
		order: 2 !important; /* Aparecer segundo */
	}

	.tuko-join-modal-label {
		font-size: 13px;
		margin-bottom: 4px;
	}

	.tuko-join-modal-input {
		padding: 8px 14px;
		font-size: 15px;
	}

	.tuko-join-modal-checkbox-text {
		font-size: 13px;
	}

	.tuko-join-modal-cancel,
	.tuko-join-modal-submit {
		width: 100%;
		padding: 10px 16px;
		font-size: 15px;
	}

	/* Modal de salir del grupo - mantener formato desktop hasta 550px */
	/* Los estilos se mantienen iguales a desktop hasta 550px */

	.tuko-leave-modal-header {
		height: 55px;
		padding: 8px;
	}

	.tuko-leave-modal-close {
		top: 8px;
		right: 8px;
		width: 24px;
		height: 24px;
	}

	.tuko-leave-modal-close svg {
		width: 12px;
		height: 12px;
	}

	.tuko-leave-modal-icon-wrapper {
		margin-top: -18px; /* Ajustado para simetría en móvil */
		margin-bottom: 8px;
	}

	.tuko-leave-modal-icon-circle {
		padding: 12px; /* Aumentado de 8px */
		border: 2px solid #ffffff;
		box-shadow: none; /* Sin sombreado */
	}

	.tuko-leave-modal-icon-circle svg {
		width: 34px; /* Aumentado de 28px */
		height: 34px;
	}

	.tuko-leave-modal-body {
		padding: 8px 12px 16px 12px;
	}

	.tuko-leave-modal-badge {
		margin-bottom: 12px;
	}

	.tuko-leave-modal-badge-text {
		padding: 3px 10px;
		font-size: 9px;
	}

	.tuko-leave-modal-title {
		font-size: 15px;
		margin: 0 0 8px 0;
		letter-spacing: -0.3px;
		line-height: 1.2;
	}

	.tuko-leave-modal-subtitle {
		font-size: 11px;
		margin: 0 0 14px 0;
		letter-spacing: -0.22px;
		line-height: 1.2;
	}

	.tuko-leave-modal-text {
		font-size: 10px;
		margin: 0 0 16px 0;
		line-height: 1.3;
	}

	.tuko-leave-modal-actions {
		flex-direction: row;
		gap: 5px;
		margin-top: 1px;
	}

	.tuko-leave-modal-confirm,
	.tuko-leave-modal-cancel {
		width: auto;
		padding: 8px 10px;
		font-size: 12px;
		border-radius: 5px;
	}
}

/* Estilos móviles para popup abandonar grupo - solo por debajo de 480px */
@media (max-width: 480px) {
	.tuko-leave-modal {
		padding: 0.75rem 0.75rem; /* Márgenes un poco más grandes */
		align-items: center;
	}

	.tuko-leave-modal-overlay {
		position: fixed;
		inset: 0;
	}

	.tuko-leave-modal-content {
		max-width: 90%; /* Más ancho en móvil */
		width: 100%;
		border-radius: 12px;
		margin: 0;
		max-height: calc(100vh - 1.5rem); /* Un poco más de margen */
		overflow-y: auto; /* Permitir scroll en móvil */
		overflow-x: hidden;
		display: flex;
		flex-direction: column; /* Layout flex para distribuir el contenido */
	}

	.tuko-leave-modal-header {
		height: 75px; /* Un poco más pequeño */
		padding: 10px;
	}

	.tuko-leave-modal-close {
		top: 8px;
		right: 8px;
		width: 24px;
		height: 24px;
	}

	.tuko-leave-modal-close svg {
		width: 12px;
		height: 12px;
	}

	.tuko-leave-modal-icon-wrapper {
		margin-top: -34px; /* Ajustado para que el icono esté mitad arriba mitad abajo (considerando padding del body) */
		margin-bottom: 10px; /* Menos separación para acercar el body */
	}

	.tuko-leave-modal-icon-circle {
		padding: 14px; /* Aumentado de 10px */
		border: 2px solid #ffffff;
		box-shadow: none; /* Sin sombreado */
	}

	.tuko-leave-modal-icon-circle svg {
		width: 38px; /* Aumentado de 32px */
		height: 38px;
	}

	.tuko-leave-modal-body {
		padding: 10px 18px 24px 18px; /* Menos padding superior para acercar al icono */
		flex: 1; /* Que el body ocupe el espacio disponible */
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* Distribuir el contenido verticalmente */
	}

	.tuko-leave-modal-badge {
		margin-bottom: 16px; /* Menos separación */
	}

	.tuko-leave-modal-badge-text {
		padding: 4px 12px; /* Un poco más pequeño */
		font-size: 10px; /* Un poco más pequeño */
	}

	.tuko-leave-modal-title {
		font-size: 17px; /* Un poco más pequeño */
		margin: 0 0 14px 0; /* Menos separación */
		letter-spacing: -0.3px;
		line-height: 1.2;
	}

	.tuko-leave-modal-subtitle {
		font-size: 13px; /* Un poco más pequeño */
		margin: 0 0 18px 0; /* Menos separación */
		letter-spacing: -0.22px;
		line-height: 1.2;
	}

	.tuko-leave-modal-text {
		font-size: 11px; /* Un poco más pequeño */
		margin: 0 0 22px 0; /* Menos separación */
		line-height: 1.5; /* Menos espacio entre líneas */
	}

	.tuko-leave-modal-actions {
		flex-direction: column; /* Botones apilados verticalmente en móvil */
		gap: 8px; /* Menos separación entre botones */
		margin-top: auto; /* Empujar los botones hacia abajo */
	}

	.tuko-leave-modal-confirm,
	.tuko-leave-modal-cancel {
		width: 100%; /* Botones a ancho completo */
		padding: 10px 16px; /* Más pequeño */
		font-size: 14px; /* Más pequeño */
		border-radius: 6px;
	}
}

/* Responsive para tablets y móviles - Modal de compartir */

/* Responsive para móviles */
/* Los estilos de 550px se aplican también para móviles más pequeños (480px incluido) */

/* Conectores SVG ocultos en todos los tamaños de pantalla */

/* Animaciones para el botón "Ver estado de grupo" */
@keyframes tukoFloat {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-3px);
	}
}

@keyframes tukoBlink {
	0%, 90%, 100% {
		opacity: 1;
	}
	95% {
		opacity: 0.3;
	}
}

.tuko-view-status-btn {
	animation: tukoFloat 3s ease-in-out infinite;
}

.tuko-view-status-btn span:first-child {
	animation: tukoBlink 4s ease-in-out infinite;
}

/* CRÍTICO: Ocultar completamente el contenedor de tiers del template
   Los tiers ahora solo se muestran en el popup al hacer clic en "Ver estado de grupo" */
body:not(.tuko-modal-open) .tuko-tiers-section.tuko-tiers-separated,
.tuko-tiers-section.tuko-tiers-separated:not(#tuko-tiers-modal-content-wrapper .tuko-tiers-section),
.tuko-tiers-section:not(#tuko-tiers-modal-content-wrapper .tuko-tiers-section) {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	position: absolute !important;
	left: -9999px !important;
}

/* Asegurar que los tiers dentro del modal se muestren correctamente */
#tuko-tiers-modal-content-wrapper .tuko-tiers-section {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
	position: relative !important;
	left: auto !important;
}

/* El contenedor de tiers dentro del modal será el contenedor principal visible */
#tuko-tiers-modal-content-wrapper .tuko-tiers-section.tuko-tiers-separated {
	/* Mantener los estilos del contenedor de tiers (borde, fondo, etc.) */
	/* Ajustar el ancho al contenido para que no se estire demasiado con pocas tarjetas */
	position: relative !important;
	margin: 0 auto !important;
	width: fit-content !important;
	max-width: 100% !important;
	min-width: auto !important;
	transform: none !important;
	box-sizing: border-box !important;
}

/* Modal de tiers (niveles de descuento) */
.tuko-tiers-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10002;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: hidden;
}

.tuko-tiers-modal[aria-hidden="false"],
.tuko-tiers-modal.is-active {
	display: flex;
}

/* Ocultar scroll del body cuando el modal está abierto - solo entre 768px y 480px */
@media (min-width: 480px) and (max-width: 768px) {
	body.tuko-modal-open,
	html.tuko-modal-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
	}
	
	/* También ocultar scroll del wrapper del modal */
	#tuko-tiers-modal-content-wrapper {
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	
	/* Ocultar scrollbar pero mantener funcionalidad de scroll */
	#tuko-tiers-modal-content-wrapper::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
	
	#tuko-tiers-modal-content-wrapper {
		-ms-overflow-style: none !important;
		scrollbar-width: none !important;
	}
}

.tuko-tiers-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(0.25rem);
	z-index: 0;
	cursor: pointer;
	animation: tukoModalOverlayFadeIn 0.3s ease;
}

@keyframes tukoModalOverlayFadeIn {
	from {
		opacity: 0;
		backdrop-filter: blur(0);
	}
	to {
		opacity: 1;
		backdrop-filter: blur(0.25rem);
	}
}

/* Efecto hover sutil y fluido para las tarjetas en el modal */
#tuko-tiers-modal-content-wrapper .tuko-tier-card {
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

#tuko-tiers-modal-content-wrapper .tuko-tier-card:hover {
	transform: scale(1.015);
}

/* Wrapper para el contenido del modal - ahora solo contiene el contenedor de tiers */
#tuko-tiers-modal-content-wrapper {
	position: relative;
	width: fit-content;
	max-width: min(1600px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.tuko-tiers-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: var(--tuko-neutral-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
	z-index: 10;
}

/* El contenedor de tiers dentro del modal es el modal visible */
#tuko-tiers-modal-content-wrapper .tuko-tiers-section.tuko-tiers-separated,
#tuko-tiers-modal-content-wrapper .tuko-tiers-section.tuko-tiers-separated.tuko-modal-content-animated {
	position: relative !important;
	margin: 0 auto;
	animation: tukoModalFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animaciones para las tarjetas individuales en el modal */
#tuko-tiers-modal-content-wrapper .tuko-tier-card {
	will-change: transform, opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Posicionar el botón de cerrar dentro del contenedor de tiers visible */
.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-modal-close,
#tuko-tiers-modal-content-wrapper .tuko-tiers-modal-close {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	z-index: 1000 !important;
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.tuko-tiers-modal-close:hover {
	background: var(--tuko-neutral-light);
	color: var(--tuko-neutral-black);
}

.tuko-tiers-modal-close svg {
	width: 1.25rem;
	height: 1.25rem;
}

.tuko-tiers-modal-body {
	width: 100%;
	margin: 0;
	padding: 0;
}

.tuko-tiers-modal-loading {
	display: none !important; /* Ocultar loading - ya no se usa */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-2xl);
	gap: var(--spacing-lg);
}

.tuko-tiers-modal-loading p {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif);
	font-size: var(--font-size-base);
	color: var(--tuko-neutral-dark);
	margin: 0;
}

.tuko-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--tuko-neutral-light);
	border-top-color: var(--tuko-primary);
	border-radius: 50%;
	flex-shrink: 0;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
	-webkit-animation: tuko-spin 0.8s linear infinite;
	animation: tuko-spin 0.8s linear infinite;
}

@-webkit-keyframes tuko-spin {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes tuko-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.tuko-error-message {
	font-family: var(--tuko-font-family, "Mona Sans", sans-serif);
	font-size: var(--font-size-base);
	color: var(--tuko-accent);
	padding: var(--spacing-lg);
	text-align: center;
}

/* Responsive para móviles */
@media (max-width: 480px) {
	.tuko-tiers-modal {
		padding: 1rem;
	}
	
	.tuko-tiers-modal-content {
		padding: var(--spacing-xl) var(--spacing-lg);
		max-width: 100%;
		max-height: 95vh;
	}
	
	.tuko-tiers-modal-close {
		top: 0.75rem;
		right: 0.75rem;
	}
}

/* Media query para rango intermedio (481px a 766px) */
@media (min-width: 481px) and (max-width: 766px) {
	/* Fondo rojo suave para la cuarta tarjeta (posición 3) cuando está activa - Rango intermedio */
	.tuko-tiers-section .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-section.tuko-tiers-separated .tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tiers-wrapper .tuko-tier-card.tuko-tier-position-3.tuko-tier-active,
	.tuko-tier-card.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
		background-image: none !important;
	}
	
	.tuko-tier-position-3.tuko-tier-active {
		background: #FFCCCC !important;
		background-color: #FFCCCC !important;
	}
}

/* Layout específico para 764px-768px: aplicar mismo layout vertical que 763px y hacia abajo */
/* Este media query se coloca DESPUÉS del de 764px-1029px para tener mayor prioridad */
/* Sobrescribir las reglas del media query de 764px-1029px para que funcione como en 763px */
@media (min-width: 764px) and (max-width: 768px) {
	/* Para TODOS los casos (2, 3, 4, 5 hitos): usar layout vertical como en 763px */
	/* Sobrescribir el layout horizontal/wrap del media query de 764px-1029px */
	#tuko-tiers-modal-content-wrapper .tuko-tiers-wrapper,
	.tuko-tiers-wrapper {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 0 !important;
		row-gap: 0 !important;
	}
	
	/* Mostrar TODOS los conectores verticales entre las tarjetas */
	#tuko-tiers-modal-content-wrapper .tuko-tiers-wrapper .tuko-tier-connector,
	.tuko-tiers-wrapper .tuko-tier-connector {
		display: block !important;
		visibility: visible !important;
		width: auto !important;
		height: auto !important;
		opacity: 1 !important;
		flex: 0 0 auto !important;
	}
	
	/* Resetear order de todas las tarjetas para que aparezcan en orden natural (vertical) */
	#tuko-tiers-modal-content-wrapper .tuko-tiers-wrapper .tuko-tier-card,
	.tuko-tiers-wrapper .tuko-tier-card {
		order: 0 !important;
		margin: 0 auto !important;
		align-self: center !important;
	}
	
	/* Resetear order de conectores para que aparezcan entre tarjetas en orden natural */
	#tuko-tiers-modal-content-wrapper .tuko-tiers-wrapper .tuko-tier-connector,
	.tuko-tiers-wrapper .tuko-tier-connector {
		order: 0 !important;
	}
}