/* ============================================================
   HOME.CSS - ESTILOS DE LA PÁGINA PRINCIPAL
   Respaldos Chile - respaldoschile.cl

   Organizado por secciones:
   1. SLIDER PRINCIPAL
   2. CARRUSEL RESPALDOS DE CAMA
   3. SUBCATEGORÍAS DESTACADAS
   4. PRODUCTOS NUEVOS
   5. AGENCIAS DE ENVÍO
   6. BENEFICIOS
   7. UTILIDADES GENERALES
   ============================================================ */

/* ============================================================
   0. CARRUSEL CATEGORÍAS/SUBCATEGORÍAS (CÍRCULOS)
   ============================================================ */
#lo_tenemos_todo {
	text-align: center;
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 0;
}

.tenemos_todo1 {
	text-align: center;
	padding: 10px;
}

.tenemos_todo1 p {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	font-family: Poppins-SemiBold, 'Poppins', sans-serif;
}

.tenemos_todo1 .circulo {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
	background: #f5f5f5;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.tenemos_todo1 .circulo:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.tenemos_todo1 .circulo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.tenemos_todo1 .circulo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 768px) {
	.tenemos_todo1 .circulo {
		width: 120px;
		height: 120px;
	}
	.tenemos_todo1 p {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.tenemos_todo1 .circulo {
		width: 100px;
		height: 100px;
	}
	.tenemos_todo1 p {
		font-size: 11px;
	}
}

/* ============================================================
   1. SLIDER PRINCIPAL
   ============================================================ */
.section-slide {
	margin-bottom: 0;
}

.item-slick1 {
	height: 650px;
	position: relative;
	overflow: hidden;
	background-color: #f5f5f5;
}

.slider-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.slider-desktop-only { display: block; }
.slider-mobile-only { display: none; }

.item-slick1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 1;
}

.item-slick1 .container {
	position: relative;
	z-index: 2;
}

/* Flechas del slider */
.wrap-slick1 .arrow-slick1 {
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	transition: all 0.3s ease;
	z-index: 3;
}

.wrap-slick1 .arrow-slick1:hover {
	background: #BC0202;
}

.wrap-slick1 .arrow-slick1:hover::before {
	color: white;
}

/* ============================================================
   2. CARRUSEL RESPALDOS DE CAMA
   ============================================================ */
#splideRespaldosEspecial {
	padding-bottom: 20px;
	contain: layout style;
}

.respaldo-card-link {
	text-decoration: none;
	display: block;
}

.respaldo-card-simple {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transform: translateZ(0);
	backface-visibility: hidden;
}

.respaldo-card-simple:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.respaldo-img-container {
	position: relative;
	width: 100%;
	padding-top: 133.33%; /* 4:3 ratio */
	background: #f5f5f5;
}

.respaldo-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.respaldo-info {
	padding: 18px 15px;
	text-align: center;
	background: white;
}

.respaldo-nombre {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: #2c2c2c;
	line-height: 1.4;
	font-family: Poppins-SemiBold, 'Poppins', sans-serif;
}

.respaldo-card-link:hover .respaldo-nombre {
	color: #BC0202;
}

.btn-ver-todos-respaldos {
	display: inline-block;
	background: white;
	color: #BC0202;
	border: 2px solid #BC0202;
	padding: 15px 40px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.btn-ver-todos-respaldos:hover {
	background: #BC0202;
	color: white;
}

#splideRespaldosEspecial .splide__arrow {
	background: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	width: 45px;
	height: 45px;
}

#splideRespaldosEspecial .splide__arrow svg {
	fill: #BC0202;
}

/* ============================================================
   3. SUBCATEGORÍAS DESTACADAS
   ============================================================ */
.subcategoria-destacada-card {
	display: block;
	text-decoration: none;
	transition: all 0.3s ease;
}

.subcategoria-destacada-img {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 1/1;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	margin-bottom: 15px;
	transition: all 0.3s ease;
}

.subcategoria-destacada-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: all 0.3s ease;
}

.subcategoria-destacada-card:hover .subcategoria-destacada-img {
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
	transform: translateY(-5px);
}

.subcategoria-destacada-card:hover .subcategoria-destacada-img img {
	transform: scale(1.08);
}

.subcategoria-destacada-info {
	text-align: center;
}

.subcategoria-destacada-info h3 {
	font-size: 18px;
	font-weight: 600;
	color: #2c2c2c;
	margin: 0 0 5px 0;
	font-family: Poppins-SemiBold, 'Poppins', sans-serif;
	transition: color 0.3s ease;
}

.subcategoria-destacada-card:hover .subcategoria-destacada-info h3 {
	color: #BC0202;
}

.subcategoria-destacada-info span {
	font-size: 13px;
	color: #888;
}

/* Subcategorías grandes (más vendidas) */
.subcategoria-grande-info h3 {
	font-size: 20px;
	font-weight: 700;
}

.subcategoria-grande-info span {
	font-size: 14px;
	font-weight: 500;
}

/* Placeholder para imágenes sin foto */
.placeholder-imagen {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
	padding: 20px;
}

.placeholder-icon {
	font-size: 40px;
	margin-bottom: 10px;
	opacity: 0.5;
}

.placeholder-text {
	font-size: 12px;
	color: #888;
	text-align: center;
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
}

/* ============================================================
   4. PRODUCTOS NUEVOS
   ============================================================ */
.productos-nuevos-section {
	padding: 60px 0 80px 0;
	background: #fff;
	position: relative;
	z-index: 1;
	clear: both;
}

.productos-nuevos-header {
	text-align: center;
	margin-bottom: 40px;
}

.productos-nuevos-header h2 {
	font-size: 32px;
	font-weight: 700;
	color: #2c2c2c;
	margin: 0 0 10px 0;
	font-family: Poppins-Bold, 'Poppins', sans-serif;
}

.productos-nuevos-header p {
	font-size: 16px;
	color: #666;
	margin: 0;
	font-family: Poppins-Regular, 'Poppins', sans-serif;
}

.productos-nuevos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}

.producto-card-nuevo {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	transition: all 0.3s ease;
}

.producto-card-nuevo:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.producto-card-link {
	text-decoration: none;
	display: block;
}

.producto-card-imagen {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f8f8f8;
}

.producto-card-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

.producto-card-nuevo:hover .producto-card-imagen img {
	transform: scale(1.08);
}

.producto-badge-descuento {
	position: absolute;
	top: 12px;
	right: 12px;
	background: #BC0202;
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	z-index: 2;
}

.producto-card-info {
	padding: 18px 15px;
}

.producto-categoria {
	display: block;
	font-size: 12px;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	font-family: Poppins-Regular, 'Poppins', sans-serif;
}

.producto-nombre {
	font-size: 15px;
	font-weight: 600;
	color: #2c2c2c;
	margin: 0 0 8px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: Poppins-SemiBold, 'Poppins', sans-serif;
}

.producto-precio {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #BC0202;
	margin-bottom: 6px;
	font-family: Poppins-Bold, 'Poppins', sans-serif;
}

.precio-desde {
	font-size: 13px;
	font-weight: 500;
	color: #666;
	font-family: Poppins-Medium, 'Poppins', sans-serif;
}

.productos-nuevos-cta {
	text-align: center;
	margin-top: 50px;
}

.btn-ver-todos {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #BC0202 0%, #8B0000 100%);
	color: white;
	padding: 18px 45px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.5px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: Poppins-SemiBold, 'Poppins', sans-serif;
	box-shadow: 0 4px 15px rgba(188, 2, 2, 0.3);
	position: relative;
	overflow: hidden;
}

.btn-ver-todos::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s ease;
}

.btn-ver-todos:hover::before {
	left: 100%;
}

.btn-ver-todos:hover {
	background: linear-gradient(135deg, #d40303 0%, #a00000 100%);
	color: white;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 8px 25px rgba(188, 2, 2, 0.4);
}

.btn-ver-todos svg {
	transition: transform 0.3s ease;
}

.btn-ver-todos:hover svg {
	transform: translateX(5px);
}

/* ============================================================
   5. AGENCIAS DE ENVÍO
   ============================================================ */
.logo-agencia-box {
	background: white;
	padding: 30px 20px;
	border-radius: 20px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-agencia-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.logo-agencia {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: all 0.3s ease;
}

.logo-agencia-box:hover .logo-agencia {
	transform: scale(1.08);
}

/* ============================================================
   6. BENEFICIOS
   ============================================================ */
.beneficio-card {
	text-align: center;
	padding: 30px 20px;
	transition: all 0.3s ease;
}

.beneficio-icon {
	font-size: 50px;
	margin-bottom: 20px;
	color: #555;
	transition: all 0.3s ease;
}

.beneficio-card:hover .beneficio-icon {
	transform: scale(1.15);
	color: #333;
}

.beneficio-titulo {
	font-size: 18px;
	font-weight: 700;
	color: #2c2c2c;
	margin: 0 0 10px 0;
	font-family: Poppins-Bold, 'Poppins', sans-serif;
}

.beneficio-texto {
	font-size: 14px;
	color: #666;
	margin: 0;
	line-height: 1.5;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 400;
}

/* ============================================================
   7. UTILIDADES GENERALES
   ============================================================ */
section {
	position: relative;
	z-index: 1;
}

section:has(.logo-agencia-box) {
	clear: both;
	position: relative;
	z-index: 1;
}

/* ============================================================
   RESPONSIVE - TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
	/* Slider */
	.item-slick1 { height: 550px; }
	.ltext-101 { font-size: 2rem !important; }
	.ltext-102 { font-size: 2.5rem !important; }
}

/* ============================================================
   RESPONSIVE - TABLET PEQUEÑA (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
	/* Slider */
	.item-slick1 { height: 600px; }
	.slider-desktop-only { display: none; }
	.slider-mobile-only { display: block; object-fit: cover; object-position: center; }
	.flex-col-l-m {
		align-items: center !important;
		text-align: center;
		justify-content: flex-end !important;
		padding-bottom: 60px !important;
	}
	.ltext-101 { font-size: 1.5rem !important; }
	.ltext-102 { font-size: 2rem !important; padding-top: 10px !important; padding-bottom: 20px !important; }
	.size-101 { padding: 12px 25px !important; font-size: 14px !important; }
	.item-slick1::before { background: transparent; }
	.wrap-slick1 .arrow-slick1 { width: 40px; height: 40px; }

	/* Respaldos */
	.respaldo-nombre { font-size: 15px; }
	.especialidad-badge { font-size: 11px !important; padding: 6px 15px !important; }

	/* Subcategorías */
	.subcategoria-destacada-info h3 { font-size: 16px; }
	.subcategoria-destacada-info span { font-size: 12px; }

	/* Productos Nuevos */
	.productos-nuevos-section { padding: 40px 0 60px 0; }
	.productos-nuevos-header h2 { font-size: 26px; }
	.productos-nuevos-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
	.producto-card-info { padding: 14px 12px; }
	.producto-nombre { font-size: 14px; }
	.producto-precio { font-size: 16px; }

	/* Agencias */
	.logo-agencia-box { height: 120px; padding: 20px 15px; }

	/* Beneficios */
	.beneficio-card { padding: 25px 15px; }
	.beneficio-icon { font-size: 42px; margin-bottom: 15px; }
	.beneficio-titulo { font-size: 16px; }
	.beneficio-texto { font-size: 13px; }
}

/* ============================================================
   RESPONSIVE - MOBILE (max-width: 576px)
   ============================================================ */
@media (max-width: 576px) {
	/* Slider */
	.item-slick1 { height: 500px; }
	.ltext-101 { font-size: 1.2rem !important; }
	.ltext-102 { font-size: 1.5rem !important; }
	.p-t-100 { padding-top: 40px !important; }

	/* Respaldos */
	.respaldo-nombre { font-size: 14px; }
	.respaldo-info { padding: 14px 10px; }

	/* Subcategorías */
	.subcategoria-destacada-img { border-radius: 15px; }
	.subcategoria-destacada-info h3 { font-size: 15px; }
	.subcategoria-destacada-info span { font-size: 11px; }
	.placeholder-icon { font-size: 30px; }
	.placeholder-text { font-size: 11px; }

	/* Agencias */
	.logo-agencia-box { height: 100px; padding: 15px 10px; }

	/* Beneficios */
	.beneficio-card { padding: 20px 10px; }
	.beneficio-icon { font-size: 38px; margin-bottom: 12px; }
	.beneficio-titulo { font-size: 15px; }
	.beneficio-texto { font-size: 12px; }
}

/* ============================================================
   RESPONSIVE - MOBILE PEQUEÑO (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
	.productos-nuevos-header h2 { font-size: 22px; }
	.productos-nuevos-grid { gap: 12px; }
	.producto-card-imagen { aspect-ratio: 1 / 1; }
	.btn-ver-todos { padding: 15px 30px; font-size: 14px; width: 100%; justify-content: center; }
}

/* ============================================================
   RESPONSIVE - DESKTOP GRANDE (max-width: 1200px)
   ============================================================ */
@media (max-width: 1200px) {
	.productos-nuevos-grid { grid-template-columns: repeat(3, 1fr); }
}