@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--color-primary: #faf9f6; /* Off-white / Beige light */
		--color-secondary: #2c2c2c; /* Dark gray almost black */
		--color-accent: #d4af37; /* Soft gold */
		--color-accent-soft: #f4e8d1; /* Pale gold/beige */
		--color-pink-soft: #f9ebea; /* Subtle pink */
	}

	body {
		@apply bg-primary text-secondary;
	}
}

@layer utilities {
	.bg-primary {
		background-color: var(--color-primary);
	}
	.bg-secondary {
		background-color: var(--color-secondary);
	}
	.text-secondary {
		color: var(--color-secondary);
	}
	.text-accent {
		color: var(--color-accent);
	}
	.bg-accent {
		background-color: var(--color-accent);
	}
	.border-accent {
		border-color: var(--color-accent);
	}

	.font-playfair {
		font-family: "Playfair Display", serif;
	}
	.font-inter {
		font-family: "Inter", sans-serif;
	}
}

html {
	scroll-behavior: smooth;
}

::selection {
	background-color: var(--color-accent);
	color: white;
}

/* Enlaces de navegación con línea inferior */
.nav-link {
	position: relative;
}

.nav-link::after {
	content: "";
	position: absolute;
	width: 0;
	height: 1px;
	bottom: -4px;
	left: 0;
	background-color: var(--color-accent);
	transition: width 0.3s ease;
}

.nav-link:hover::after {
	width: 100%;
}

/* Efecto zoom lento en la imagen hero */
.hero-image {
	transform: scale(1.05);
	animation: slowZoom 20s infinite alternate linear;
}

@keyframes slowZoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}

/* Ajuste sutil para la tabla de horarios del footer en móviles */
@media (max-width: 640px) {
	.timetabel-footer td {
		display: block;
		width: 100%;
		text-align: left !important;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.timetabel-footer td:last-child {
		padding-top: 0;
		color: #a3a3a3; /* text-gray-400 */
	}
}

/* Ocultar barra de desplazamiento para un aspecto más limpio (opcional) */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: var(--color-primary);
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent);
}