/**
 * Estilos front-end de "Tarjetas Interactivas" (rbl-web-cooking).
 * Escritorio (> 1024px): imagen del tazón + números en arco + card que
 * cambia al pasar el mouse. Tablet/celular (≤ 1024px): slider de cards con
 * flechas, sin imagen ni números (evita el problema de "hover" en touch).
 */

.rblweb-ti-slider {
	display: none;
}

.rblweb-ti-image-wrap {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

.rblweb-ti-bg-image {
	width: 100%;
	height: auto;
	display: block;
}

.rblweb-ti-badge {
	position: absolute;
	transform: translate( -50%, -50% ) scale( 1 );
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e59902;
	color: var( --rblweb-ti-text-color, #fff );
	border: none;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.25 );
	padding: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.rblweb-ti-badge:hover,
.rblweb-ti-badge.is-active {
	background: #f85e2b;
	transform: translate( -50%, -50% ) scale( 1.15 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.35 );
}

/*
 * Mismo tamaño fijo para todas las cards (desktop y slider), simétrico
 * siempre sin importar cuánto texto tenga cada una — igual al tamaño de
 * la card del ítem 1.
 */
.rblweb-ti-card,
.rblweb-ti-slider-card {
	width: 300px;
	height: 320px;
	box-sizing: border-box;
	background: var( --rblweb-ti-card-bg, #7d6a4d );
	color: var( --rblweb-ti-text-color, #fff );
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/*
 * Cada card se ancla a la misma posición (left/top) que su número — así
 * "sigue" al número que está en hover en vez de quedarse en un lugar fijo.
 * --rblweb-ti-card-tx (0% / -50% / -100%, calculado en PHP) evita que las
 * cards de los números pegados al borde se salgan del contenedor.
 */
.rblweb-ti-card {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate( var( --rblweb-ti-card-tx, -50% ), -110% ) scale( 0.95 );
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.rblweb-ti-card.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate( var( --rblweb-ti-card-tx, -50% ), -110% ) scale( 1 );
}

/* Triangulito de "globo de diálogo" apuntando hacia el número. */
.rblweb-ti-card::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: var( --rblweb-ti-arrow-left, 50% );
	transform: translateX( -50% );
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: var( --rblweb-ti-card-bg, #7d6a4d ) transparent transparent transparent;
}

.rblweb-ti-slider-card {
	margin: 0 auto;
}

.rblweb-ti-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.rblweb-ti-icon {
	width: 100px;
	height: 100px;
	color: var( --rblweb-ti-icon-color, #fff );
}

/* Fuerza el color configurado incluso si el SVG subido trae su propio
   fill/stroke fijo por atributo — currentColor toma el color de arriba. */
.rblweb-ti-icon * {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.rblweb-ti-card-title {
	margin: 0 0 8px;
	font-size: 25px;
	color: var( --rblweb-ti-text-color, #fff );
}

.rblweb-ti-card-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.rblweb-ti-slider-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Mismo criterio que el slider de Productos: el ícono trae su propio
   fondo redondeado incluido, sin resaltado nativo de :hover/:focus del
   navegador, con un crecimiento sutil al pasar el mouse. */
.rblweb-ti-slider-arrow {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

.rblweb-ti-slider-arrow:hover,
.rblweb-ti-slider-arrow:active,
.rblweb-ti-slider-arrow:focus,
.rblweb-ti-slider-arrow:focus-visible {
	background: none;
	box-shadow: none;
}

.rblweb-ti-arrow-svg {
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease;
}

.rblweb-ti-slider-arrow:hover .rblweb-ti-arrow-svg,
.rblweb-ti-slider-arrow:focus-visible .rblweb-ti-arrow-svg {
	transform: scale( 1.08 );
}

.rblweb-ti-slider-arrow-prev .rblweb-ti-arrow-svg {
	transform: scaleX( -1 );
}

.rblweb-ti-slider-arrow-prev:hover .rblweb-ti-arrow-svg,
.rblweb-ti-slider-arrow-prev:focus-visible .rblweb-ti-arrow-svg {
	transform: scaleX( -1 ) scale( 1.08 );
}

/* Slider real: la "ventana" recorta, el track se desliza con transform. */
.rblweb-ti-slider-viewport {
	overflow: hidden;
	border-radius: 16px;
	flex: 1;
	min-width: 0;
}

.rblweb-ti-slider-track {
	display: flex;
	transition: transform 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.rblweb-ti-slide {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	justify-content: center;
}

.rblweb-ti-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.rblweb-ti-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #d6d0c7;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.rblweb-ti-slider-dot:hover {
	background: var( --rblweb-ti-card-bg, #7d6a4d );
}

.rblweb-ti-slider-dot.is-active {
	background: var( --rblweb-ti-card-bg, #7d6a4d );
	transform: scale( 1.3 );
}

@media ( max-width: 1024px ) {
	.rblweb-ti-desktop {
		display: none;
	}

	.rblweb-ti-slider {
		display: block;
	}
}