/* ==========================================================================
   Carrusel Inicio — estilos del front
   Podés tocar colores, altura y tamaños sin miedo.
   ========================================================================== */

.carrusel-inicio {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 10px;
}

/* Ancho completo: rompe el contenedor del tema y ocupa todo el ancho de la pantalla.
   El ancho y el margen exactos los calcula carrusel.js (ver ajustarAnchoCompleto),
   porque un cálculo fijo en vw se desalinea en layouts que no están centrados
   (páginas con sidebar, admin bar, etc). Estos valores son solo el estado inicial
   hasta que el JS corre. */
.carrusel-inicio.carrusel-inicio--full {
	max-width: none;
	border-radius: 0;
}

/* Slide base */
.carrusel-inicio .carrusel-slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	height: 42vw;          /* alto proporcional al ancho */
	max-height: 560px;
	background-size: cover;
	background-position: center;
	background-color: #1b1b1f;
	box-sizing: border-box;
}

/* ---------- Slide de CONTENIDO ---------- */
.carrusel-slide--contenido .carrusel-slide__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0.15 ) 60%, rgba( 0, 0, 0, 0 ) 100% );
	padding: 0 6%;
}

.carrusel-slide__texto {
	max-width: 560px;
	color: #fff;
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 );
}

.carrusel-slide__titulo {
	font-size: clamp( 1.6rem, 3.5vw, 3rem );
	line-height: 1.1;
	margin: 0 0 0.4em;
	color: #fff;
}

.carrusel-slide__subtitulo {
	font-size: clamp( 1rem, 1.6vw, 1.4rem );
	margin: 0 0 1.2em;
	color: #f2f2f2;
}

.carrusel-slide__boton {
	display: inline-block;
	background: #e8442b;         /* color del botón — cambialo por el de tu marca */
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 26px;
	border-radius: 8px;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.carrusel-slide__boton:hover {
	filter: brightness( 1.08 );
	transform: translateY( -2px );
	color: #fff;
}

/* ---------- Slide de IMAGEN (carpeta + editor visual) ---------- */
.carrusel-slide--imagen {
	background-size: cover;
	background-position: center;
}
.carrusel-slide--imagen .carrusel-cap {
	position: absolute;
	inset: 0;
}
.carrusel-cap__texto {
	position: absolute;
	max-width: 80%;
	color: #fff;
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.45 );
}
.carrusel-cap__texto h2 { color: inherit; }
.carrusel-cap__boton {
	position: absolute;
	display: inline-block;
	padding: 12px 26px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.carrusel-cap__boton:hover {
	filter: brightness( 1.08 );
	transform: translateY( -2px );
}

@media ( max-width: 768px ) {
	/* En mobile el texto puede quedar más chico para no desbordar */
	.carrusel-cap__texto { max-width: 90%; }
	.carrusel-cap__texto h2 { font-size: 1.7rem !important; }
	.carrusel-cap__texto p { font-size: 1rem !important; }
}

/* ---------- Slide de PRODUCTO ---------- */
.carrusel-slide--producto {
	background-color: #f6f6f8;
}

.carrusel-producto {
	display: flex;
	align-items: center;
	gap: 5%;
	width: 90%;
	max-width: 900px;
}

.carrusel-producto__img {
	flex: 0 0 42%;
	text-align: center;
}

.carrusel-producto__img img {
	max-width: 100%;
	max-height: 380px;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}

.carrusel-producto__info {
	flex: 1;
}

.carrusel-producto__nombre {
	font-size: clamp( 1.3rem, 2.4vw, 2rem );
	margin: 0 0 0.4em;
	color: #1b1b1f;
}

.carrusel-producto__precio {
	font-size: clamp( 1.1rem, 2vw, 1.6rem );
	color: #e8442b;
	font-weight: 700;
	margin-bottom: 1em;
}

.carrusel-producto__precio del {
	color: #999;
	font-weight: 400;
	font-size: 0.8em;
	margin-right: 6px;
}

/* ---------- Controles de Swiper ---------- */
.carrusel-inicio .swiper-button-prev,
.carrusel-inicio .swiper-button-next {
	color: #fff;
	background: rgba( 0, 0, 0, 0.35 );
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition: background 0.15s ease;
}

.carrusel-inicio .swiper-button-prev:hover,
.carrusel-inicio .swiper-button-next:hover {
	background: rgba( 0, 0, 0, 0.6 );
}

.carrusel-inicio .swiper-button-prev::after,
.carrusel-inicio .swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

.carrusel-inicio .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.6;
}

.carrusel-inicio .swiper-pagination-bullet-active {
	background: #e8442b;
	opacity: 1;
}

/* ---------- Responsive / Celular ---------- */
@media ( max-width: 768px ) {
	.carrusel-inicio .carrusel-slide {
		min-height: 340px;
		height: auto;
	}

	.carrusel-slide--contenido .carrusel-slide__overlay {
		background: linear-gradient( 0deg, rgba( 0, 0, 0, 0.65 ) 0%, rgba( 0, 0, 0, 0.25 ) 100% );
		align-items: flex-end;
		padding: 24px 20px 32px;
	}

	.carrusel-slide__texto {
		max-width: 100%;
	}

	/* En el celu la tarjeta de producto se apila (imagen arriba, texto abajo) */
	.carrusel-slide--producto {
		padding: 24px 0;
	}

	.carrusel-producto {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		width: 88%;
	}

	.carrusel-producto__img {
		flex: none;
	}

	.carrusel-producto__img img {
		max-height: 220px;
	}

	.carrusel-inicio .swiper-button-prev,
	.carrusel-inicio .swiper-button-next {
		display: none; /* En mobile se navega deslizando con el dedo */
	}
}