.custom-carousel-wrapper
{
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 30px auto;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	background: #0f172a;
	aspect-ratio: 10 / 10;
}

.carousel-slides-container
{
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-slide-item
{
	position: relative;
	min-width: 100%;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end; /* Mantiene los elementos abajo */
}

.carousel-slide-item::before
{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background: linear-gradient(to top, 
		rgba(15, 23, 42, 0.85) 0%, 
		rgba(15, 23, 42, 0.4) 60%, 
		rgba(15, 23, 42, 0) 100%);
	z-index: 1;
}

.carousel-text-overlay
{
	position: relative;
	z-index: 2;
	padding: 3px 3px 3px 3px; /* Reducción de relleno */
	color: #ffffff;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	gap: 1px;
	padding: 3px;
	flex-direction: column; align-items: flex-start;
}

.carousel-info-block
{
	max-width: 100%; /* Limita el ancho del texto para no tapar el centro de la imagen */
}

.carousel-text-overlay h1
{
	margin-top: 0;
	gap: 0px; padding: 0px;
	margin-bottom: 0px;
	gap: 0px; padding: 3px;
	font-size: clamp(2.5rem, 2.5rem + 3.5vw, 8.0rem);
	color: #ffffff; font-weight: 333;
	text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;'
	text-align: center; justify-content: center;
}

.carousel-text-overlay h4
{
	font-size: 0.95rem; /* Compacto */
	margin-bottom: 0; /* Eliminado espacio innecesario */
	gap: 0px; padding: 3px;
	text-align: center; justify-content: center;
	font-size: clamp(4.0rem, 1.7rem + 1vw, 6.9rem);
	color: #ffff00; font-weight: 333;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 3px 3px 5px rgba(0,0,0,0.95);'
}

.carousel-actions
{
	display: flex;
	gap: 3px;
	flex-shrink: 0; /* Evita que los botones se deformen */
	margin-bottom: 0px;
	flex-basis: 100%;
	width: 100%;
	justify-content: center;
}

.btn-action-details
{
	background: rgba(255, 255, 255, 0.9);
	color: #0f172a;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 6px; /* Bordes más limpios y profesionales */
	border: 1px solid #ffffff;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: clamp(1.1rem, 2.5vw, 2.5rem);
}

.btn-action-details:hover
{
	background: transparent;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.btn-action-add
{
	background: #22c55e;
	color: #ffffff;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 6px;
	border: 1px solid #22c55e;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
	transition: all 0.2s ease;
	font-size: clamp(1.1rem, 2.5vw, 2.5rem);
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 3px 3px 5px rgba(0,0,0,0.95);
}

.btn-action-add:hover
{
	background: transparent;
	color: #ffffff;
	box-shadow: 0 6px 15px rgba(34, 197, 94, 0.5);
	transform: translateY(-1px);
}

.carousel-arrow
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(15, 23, 42, 0.4);
	color: #ffffff;
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.carousel-arrow:hover { background: #22c55e; }
.arrow-left { left: 15px; }
.arrow-right { right: 15px; }

.carousel-indicators
{
	position: relative;
	bottom: 15px; /* Un poco más arriba para que no se pegue al borde */
	left: 50%;
	transform: translateX(-50%);
	z-index: 15; /* Aumentado para que siempre esté por encima de todo */
	display: flex;
	gap: 6px;
	margin: 0 !important; /* Evita que herede márgenes de Bootstrap u otros CSS */
	padding: 0;
	pointer-events: auto; /* Asegura que se les pueda dar clic */
}

.indicator-dot
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	cursor: pointer;
	transition: all 0.2s;
}

.indicator-dot.active
{
	background: #22c55e;
	width: 16px;
	border-radius: 4px;
}

@media (max-width: 992px)
{
	.custom-carousel-wrapper { aspect-ratio: 10 / 10; } /* Proporción más cómoda en tabletas */
	.carousel-text-overlay { flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px; }
	.carousel-info-block { max-width: 100%; }
	.carousel-actions { width: 100%; }
	.btn-action-details, .btn-action-add { flex: 1; text-align: center; justify-content: center; }
	.carousel-text-overlay h1 { font-size: 3.3rem; }
	.carousel-text-overlay h4 { font-size: 2.1rem; }
}

@media (max-width: 576px)
{
	.custom-carousel-wrapper { aspect-ratio: 10 / 10; } /* Altura ideal para pantallas de teléfonos */
	.carousel-text-overlay h1 { font-size: 2.3rem; }
	.carousel-text-overlay h4 { font-size: 1.3rem; }
	.carousel-arrow { display: none; }
}