@charset "UTF-8";

/* ==================== VARIABLES GLOBALES ==================== */
:root {
	--color-primary: #316477;
	--color-secondary: #A0D0AD;
	--color-primary-light: rgba(49, 100, 119, 0.15);
	--color-primary-hover: rgba(49, 100, 119, 1);
	--color-bg: #ffffff;
	--color-text: #333333;
	--color-border: #e0e0e0;
	--color-skeleton: rgba(240, 240, 240, 0.7);

	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;

	--radius-sm: 4px;
	--radius-md: 16px;
	--radius-lg: 22px;

	--button-size: 4rem;
	--card-width: 400px;
	--card-height: 250px;
	--card-img-height: 250px;
	--gap-carousel: 20px;

	--transition-smooth: all 0.3s ease;
	--transition-transform: transform 0.3s ease;
}

/* ==================== RESET & BASE ==================== */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

section {
	width: 100%;
	min-height: 20vh;
	padding: var(--spacing-xl) 0;
}

/* ==================== CAROUSEL CONTAINER ==================== */
.carousel-container-rel {
	position: relative;
	padding: 10px 0;
	/*overflow: hidden;*/
}

/* ==================== CAROUSEL TRACK / SLIDER ==================== */
.slider-list,
.carousel-track-rel {
	display: flex;
	gap: var(--gap-carousel);
	padding: 14px 0px 0px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slider-list::-webkit-scrollbar,
.carousel-track-rel::-webkit-scrollbar {
	display: none;
}

/* Estado activo (para drag) */
.slider-list.active {
	cursor: grabbing;
}

/* ==================== CARDS (Mini Card & Skeleton) ==================== */
.mini-card-rel,
.skeleton-card {
	width: var(--card-width);
	height: var(--card-height);
	/*border-radius: var(--radius-md);*/
	/*overflow: hidden;*/
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	transition: var(--transition-smooth);
	cursor: pointer;
	position: relative;
}

.mini-card-rel:hover,
.skeleton-card:hover {
	transform: translateY(-8px);
}

.mini-card-rel img,
.skeleton-card img {
	width: 100%;
	height: var(--card-img-height);
	object-fit: cover;
	border-radius: 15px!important;
	overflow:hidden;
	transition: var(--transition-transform);
}

.mini-card-rel:hover img {
	transform: scale(1.02);
}

/* ==================== SKELETON LOADER ==================== */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.skeleton,
.skeleton-card::after,
.skeleton-card::before {
	animation: shimmer 2s infinite linear;
	background: linear-gradient(
		to right,
		rgba(239, 241, 243, 0.63) 4%,
		rgba(226, 226, 226, 0.56) 25%,
		rgba(239, 241, 243, 0.57) 36%
	);
	background-size: 1000px 100%;
}

.skeleton-card {
	background-color: var(--color-skeleton);
	position: relative;
	display: block;
	border-radius: 16px!important;
}

.skeleton-card::before {
	content: "";
	display: block;
	width: 100%;
	height: var(--card-img-height);
	border-radius: 16px!important;
}

.skeleton-card::after {
	display: none;
}

/* ==================== BOTONES (LEFT / RIGHT) - FLECHAS SUTILES ==================== */
.left-button,
.right-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	
	background-color: #a0d0ad69 !important;

	width: 56px;
	height: 56px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	border: none;

	background-color: rgba(160, 208, 173, 0.25); 
	color: var(--color-secondary);

	cursor: pointer;

	transition: var(--transition-smooth);
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.left-button:hover,
.right-button:hover {
	background-color: var(--color-secondary);
	transform: translateY(-50%) scale(1.08);
}

.left-button:active,
.right-button:active {
	transform: translateY(-50%) scale(0.95);
	background-color: var(--color-secondary)!important;
}

.left-button svg,
.right-button svg {
	width: 32px !important;
	height: 32px !important;
	display: block;
}

/* Posiciones */
.left-button {
	left: 16px;
}

.right-button {
	right: 16px;
}

/* ==================== CAROUSEL DOTS INDICATOR ==================== */
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-lg);
	padding: 0;
	list-style: none;
}
 
.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid var(--color-primary);
	cursor: pointer;
	transition: var(--transition-smooth);
	opacity: 0.6;
}
 
.carousel-dot.active {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	opacity: 1;
	transform: scale(1.2);
}
 
.carousel-dot:hover {
	opacity: 1;
}
@media (max-width: 767px) {
	.carousel-dots {
		margin-top: var(--spacing-md);
		gap: 6px;
	}

	.carousel-dot {
		width: 8px;
		height: 8px;
	}
}
@media (min-width: 1024px) {
	.slider-list {
		padding-left: 250px;
	}
}

/* ==================== RESPONSIVE TABLET ==================== */
@media (max-width: 1023px) and (min-width: 768px) {
	:root {
		--card-width: 320px;
		--card-height: 220px;
		--card-img-height: 220px;
		--button-size: 3.5rem;
	}

	.left-button,
	.right-button {
		font-size: 40px;
	}

	.slider-list {
		padding-left: 150px;
	}
}

@charset "UTF-8";

/* ==================== VARIABLES GLOBALES ==================== */
:root {
	--color-primary: #316477;
	--color-secondary: #A0D0AD;
	--color-bg: #ffffff;
	--color-text: #333333;
	--color-border: #e0e0e0;
	--color-skeleton: rgba(240, 240, 240, 0.7);

	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;

	--radius-sm: 4px;
	--radius-md: 16px;
	--radius-lg: 22px;

	--card-width: 400px;
	--card-height: 250px;
	--gap-carousel: 20px;

	--transition-smooth: all 0.3s ease;
	--transition-transform: transform 0.3s ease;
}

/* ==================== RESET & BASE ==================== */
* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

section {
	width: 100%;
	min-height: 20vh;
	padding: var(--spacing-xl) 0;
}

/* ==================== CAROUSEL CONTAINER ==================== */
.carousel-container-rel {
	position: relative;
	padding: 10px 0;
	overflow: hidden;
}

/* ==================== CAROUSEL TRACK / SLIDER ==================== */
.slider-list,
.carousel-track-rel {
	display: flex;
	gap: var(--gap-carousel);
	padding: 14px 0px 0px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slider-list::-webkit-scrollbar,
.carousel-track-rel::-webkit-scrollbar {
	display: none;
}

/* Estado activo (para drag) */
.slider-list.active {
	cursor: grabbing;
}

/* ==================== CARDS (Mini Card & Skeleton) ==================== */
.mini-card-rel,
.skeleton-card {
	width: var(--card-width);
	height: var(--card-height);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	transition: var(--transition-smooth);
	cursor: pointer;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: visible;
}

.mini-card-rel:hover,
.skeleton-card:hover {
	transform: translateY(-8px);
}

.mini-card-rel img,
.skeleton-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	overflow: hidden;
	transition: var(--transition-transform);
	display: block;
}

.mini-card-rel:hover img {
	transform: scale(1.02);
}

/* ==================== SKELETON LOADER ==================== */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

.skeleton,
.skeleton-card::after,
.skeleton-card::before {
	animation: shimmer 2s infinite linear;
	background: linear-gradient(
		to right,
		rgba(239, 241, 243, 0.63) 4%,
		rgba(226, 226, 226, 0.56) 25%,
		rgba(239, 241, 243, 0.57) 36%
	);
	background-size: 1000px 100%;
}

.skeleton-card {
	background-color: var(--color-skeleton);
	position: relative;
	display: block;
	border-radius: 16px;
}

.skeleton-card::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
}

.skeleton-card::after {
	display: none;
}

/* ==================== BOTONES (LEFT / RIGHT) ==================== */
.left-button,
.right-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;

	width: 56px;
	height: 56px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	border: none;

	background-color: rgba(160, 208, 173, 0.25);
	color: var(--color-secondary);

	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;

	transition: var(--transition-smooth);
}

.left-button:hover,
.right-button:hover {
	background-color: var(--color-secondary);
	transform: translateY(-50%) scale(1.08);
	color: var(--color-bg);
}

.left-button:active,
.right-button:active {
	transform: translateY(-50%) scale(0.95);
}

.left-button svg,
.right-button svg {
	width: 32px;
	height: 32px;
	display: block;
}

.left-button svg path,
.right-button svg path {
	stroke: currentColor;
}

/* Posiciones */
.left-button {
	left: 16px;
}

.right-button {
	right: 16px;
}

/* ==================== CAROUSEL DOTS INDICATOR ==================== */
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-lg);
	padding: 0;
	list-style: none;
}

.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid var(--color-primary);
	cursor: pointer;
	transition: var(--transition-smooth);
	opacity: 0.6;
}

.carousel-dot.active {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	opacity: 1;
	transform: scale(1.2);
}

.carousel-dot:hover {
	opacity: 1;
}

/* ==================== RESPONSIVE DESKTOP ==================== */
@media (min-width: 1024px) {
	.slider-list {
		padding-left: 250px;
	}
}

/* ==================== RESPONSIVE TABLET ==================== */
@media (max-width: 1023px) and (min-width: 768px) {
	:root {
		--card-width: 320px;
		--card-height: 220px;
	}

	.slider-list {
		padding-left: 150px;
	}
}

/* ==================== RESPONSIVE MOBILE ==================== */
@media (max-width: 767px) {
	:root {
		--gap-carousel: 16px;
	}
 
	.carousel-container-rel {
		padding: var(--spacing-lg) 0 8px;
	}
 
	.slider-list,
	.carousel-track-rel {
		padding: 0 var(--spacing-md);
		gap: var(--gap-carousel);
		scroll-snap-type: x mandatory;
		scroll-padding: 0;
		scroll-behavior: smooth;
	}
 
	.mini-card-rel,
	.skeleton-card {
		width: 350px;
		height: auto;
		aspect-ratio: 16 / 10;
		margin: 0;
		padding: 0;
		flex-shrink: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		border-radius: 15px;
	}
 
	.mini-card-rel img {
		border-radius: 15px;
		height: 100%;
	}
 
	section {
		padding: var(--spacing-xl) 0;
	}
 
	/* Ocultar botones en mobile */
	.left-button,
	.right-button {
		display: none !important;
	}
 
	.carousel-dots {
		margin-top: var(--spacing-lg);
		gap: 6px;
		padding: 0 var(--spacing-md);
	}
 
	.carousel-dot {
		width: 8px;
		height: 8px;
	}
}