@font-face {
	font-family: 'Seravek';
	src: url('../fonts/Seravek.ttc') format('truetype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

:root {
	--color-bg: #0F0F0F;
	--color-text-headers: #FFFFFF;
	--color-text: #FFFFFF;
	--color-text-secondary: #A1A1AA;
	--color-lime-highlight: #E1FA07;
	--color-orange: #FF7F00;
	--color-primary: #702E66;
	--color-ink-dark: #2E2E2E;
	--color-success: #84CC16;
	--color-error: #FB7185;
	--gradient-accent-clear: linear-gradient(135deg, rgba(155, 67, 142, 0.267) 5%, rgba(255, 128, 0, 0.123));
	--gradient-card: linear-gradient(180deg, #702e662e, #ff7f0014);
	--gradient-card-secondary: linear-gradient(180deg,rgba(112,46,102,.15),rgba(15,15,15,.95));
	--gradient-info-card: linear-gradient(180deg,rgba(112,46,102,.18),rgba(15,15,15,.95));
	--filter-orange: invert(66%) sepia(33%) saturate(7470%) hue-rotate(359deg) brightness(99%) contrast(110%);
	--filter-primary: invert(32%) sepia(25%) saturate(2406%) hue-rotate(267deg) brightness(93%) contrast(84%);
	--filter-lime: invert(82%) sepia(80%) saturate(545%) hue-rotate(9deg) brightness(104%) contrast(97%);
	--overlay-accent: #FF7F00;
	--overlay-white: #FFFFFF14;
	--overlay-orange: #FF7F0073;
	--overlay-primary: #702e6626;
	--overlay-dark: #0000008C;
	--overlay-ink: #0F0F0F;
    --overlay-ink-deep: #0C0B12;
	--overlay-black: #000000E6;
	--overlay-success-bg: hsla(84, 81%, 44%, 0.122);
	--overlay-success-border: #84CC163B;
	--overlay-error-bg: #FB71851F;
	--overlay-error-border: #FB71853B;
	--shadow-accent: #702E6640;
	--shadow-dark: #0000008C;
	--border-default: #702e6638;
	--carousel-shadow: #000000A6;
	--carousel-transition: 800ms;
	--carousel-text: #F4F4F5;
	--carousel-control-bg: #121212CC;
	--carousel-control-border: #FFFFFF20;
	--carousel-dot: #FFFFFF52;
	--carousel-dot-active: #FF7F00;
	--gradient-gallery-hero: linear-gradient(90deg,rgba(15, 15, 15, .95),rgba(15, 15, 15, .50)),url("../img/gallery/gallery-video_001.webp");
	--contact-info-bg: #111111;
	--quote-cta-bg: linear-gradient(135deg,rgba(112,46,102,.25), rgba(46,46,46,.95));
	--quote-cta-content-bg: rgba(112,46,102,.35);

	/* TYPOGRAPHY - FONT SIZES */
	/* Extra Small Sizes */
	--fs-xs: 18px;
	--fs-xs-md: 18px;
	--fs-xs-lg: 18px;

	/* Small Sizes */
	--fs-sm: 18px;
	--fs-sm-md: 18px;
	--fs-sm-lg: 18px;

	/* Base Size */
	--fs-base: 18px;

	/* Large Sizes */
	--fs-lg: 20px;
	--fs-lg-md: 22px;
	--fs-lg-lg: 24px;

	/* Extra Large Sizes */
	--fs-xl: 28px;
	--fs-xl-md: 30px;
	--fs-xl-lg: 31px;
	--fs-xl-xlg: 32px;

	/* Heading Sizes */
	--fs-h6: 48px;
	--fs-h5: 48px;
	--fs-h4: 48px;
	--fs-h3: 48px;
	--fs-h3-md: 48px;
	--fs-h2: 48px;
	--fs-h2-md: 48px;
	--fs-h1: 48px;
	--fs-h1-lg: 48px;

	/* Responsive Heading Sizes */
	--fs-h-hero-contact: clamp(2rem, 6vw, 4.875rem);
	--fs-h-hero-main: clamp(48px, 6vw, 78px);
	--fs-h-hero-alt: clamp(32px, 5vw, 54px);
	--fs-h-responsive: clamp(32px, 9vw, 42px);
	--fs-h-responsive-md: clamp(28px, 5vw, 42px);
	--fs-h-responsive-sm: clamp(32px, 9vw, 42px);
	--fs-eyebrow: clamp(0.625rem, 1vw, 0.75rem);

	/* Relative Font Sizes (rem) */
	--fs-rem-md: 1rem;
	--fs-rem-lg: 1.3rem;
	--fs-rem-xlg: 1.45rem;
	--fs-rem-2xl: 2rem;
}

/* TEMA CLARO */
html.light-theme {
	--color-bg: #FFFFFF;
	--color-text-headers: #0F0F0F;
	--color-text: #0F0F0F;
	--color-text-secondary: #4B4B52;
	--color-lime-highlight: #B8D900;
	--color-orange: #E06B00;
	--color-primary: #8B3D7F;
	--color-ink-dark: #F5F5F5;
	--color-success: #65A30D;
	--color-error: #E11D48;
	--gradient-accent-clear: linear-gradient(135deg, rgba(139, 61, 127, 0.12) 5%, rgba(224, 107, 0, 0.08));
	--gradient-card: linear-gradient(180deg, rgba(139, 61, 127, 0.08), rgba(224, 107, 0, 0.05));
	--gradient-card-secondary: linear-gradient(180deg, rgba(139, 61, 127, 0.1), rgba(255, 255, 255, 0.8));
	--gradient-info-card: invert(92%) sepia(8%) saturate(1050%) hue-rotate(24deg) brightness(107%) contrast(92%);
	--filter-orange: invert(48%) sepia(43%) saturate(1200%) hue-rotate(2deg) brightness(104%) contrast(104%);
	--filter-primary: invert(45%) sepia(37%) saturate(1800%) hue-rotate(268deg) brightness(99%) contrast(88%);
	--filter-lime: invert(72%) sepia(72%) saturate(800%) hue-rotate(20deg) brightness(99%) contrast(92%);
	--overlay-accent: #E06B00;
	--overlay-white: #0F0F0F08;
	--overlay-orange: #E06B0020;
	--overlay-primary: #8B3D7F15;
	--overlay-dark: #0000001A;
	--overlay-ink: #FFFFFF;
	--overlay-ink-deep: #F5F5F5;
	--overlay-black: #00000026;
	--overlay-success-bg: #65A30D0D;
	--overlay-success-border: #65A30D26;
	--overlay-error-bg: #E11D480D;
	--overlay-error-border: #E11D4826;
	--shadow-accent: #8B3D7F20;
	--shadow-dark: #0000001A;
	--border-default: #8B3D7F15;
	--carousel-shadow: #00000020;
	--carousel-text: #ffffff;
	--carousel-control-bg: #FFFFFFCC;
	--carousel-control-border: #0F0F0F15;
	--carousel-dot: #0F0F0F33;
	--carousel-dot-active: #E06B00;
	--gradient-gallery-hero: url("../img/gallery/gallery-video_001.webp");
	--contact-info-bg: #FFFFFF;
	--quote-cta-bg: linear-gradient(135deg,rgba(207, 158, 200, 0.25), rgba(172, 172, 172, 0.95));
	--quote-cta-content-bg: rgba(180, 156, 177, 0.35);
}

/* Transición suave al cambiar tema */
html {
	transition: background-color 0.3s ease, color 0.3s ease;
	scroll-behavior: smooth;
}

/* ==================== KEYFRAMES DE ANIMACIONES ==================== */

/* 1. FADE-IN + SLIDE-UP */
@keyframes fadeInSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInSlideLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInSlideRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 2. HOVER ELEGANTE EN BOTONES Y TARJETAS */
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

@keyframes glow {
	0% {
		box-shadow: 0 0 5px rgba(225, 250, 7, 0.3);
	}
	50% {
		box-shadow: 0 0 20px rgba(225, 250, 7, 0.5);
	}
	100% {
		box-shadow: 0 0 5px rgba(225, 250, 7, 0.3);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

/* 3. SCROLL SUAVE (ya con scroll-behavior: smooth en html) */

/* 4. CONTADORES ANIMADOS */
@keyframes countUp {
	from {
		opacity: 0;
		counter-increment: counter 0;
	}
	to {
		opacity: 1;
		counter-increment: counter var(--target-count);
	}
}

@keyframes scaleUp {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* 5. SKELETON LOADING */
@keyframes skeleton-loading {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

@keyframes pulse-skeleton {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}

/* 6. GRADIENTE SUTIL ANIMADO */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes subtle-gradient-animation {
	0% {
		background-position: 0% center;
	}
	50% {
		background-position: 100% center;
	}
	100% {
		background-position: 0% center;
	}
}

/* ==================== CLASES REUTILIZABLES ==================== */

/* Fade-In + Slide-Up al scroll */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.animated {
	opacity: 1;
	transform: translateY(0);
}

.fade-in-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.animated {
	opacity: 1;
	transform: translateX(0);
}

.fade-in-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Hover elegante en botones */
.btn-animated {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-animated::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	transition: left 0.4s ease;
}

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

.btn-animated:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 30px rgba(225, 250, 7, 0.3) !important;
}

/* Hover elegante en tarjetas */
.card-animated {
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}

.card-animated:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(225, 250, 7, 0.2) !important;
}

.card-animated::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(225, 250, 7, 0.1), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.card-animated:hover::before {
	opacity: 1;
}

/* Skeleton Loading */
.skeleton {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.1) 100%
	);
	background-size: 1000px 100%;
	animation: skeleton-loading 2s infinite;
	border-radius: 8px;
}

.skeleton-text {
	height: 1rem;
	margin-bottom: 0.5rem;
}

.skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.skeleton-image {
	width: 100%;
	height: 300px;
}

/* Gradiente animado */
.gradient-animated {
	background: linear-gradient(
		-45deg,
		var(--color-orange),
		var(--color-primary),
		var(--color-lime-highlight),
		var(--color-orange)
	);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
}

.gradient-animated-subtle {
	background: linear-gradient(
		90deg,
		rgba(225, 250, 7, 0.1),
		rgba(255, 127, 0, 0.1),
		rgba(112, 46, 102, 0.1),
		rgba(225, 250, 7, 0.1)
	);
	background-size: 200% 100%;
	animation: subtle-gradient-animation 8s ease-in-out infinite;
}

/* Contador animado */
.counter {
	font-weight: 900;
	font-size: var(--fs-h2);
	animation: scaleUp 0.6s ease;
}

.counter.animated {
	animation: scaleUp 0.6s ease;
}

/* Efecto Glow */
.glow-effect {
	animation: glow 2s ease-in-out infinite;
}

/* Efecto Pulse */
.pulse-effect {
	animation: pulse 2s ease-in-out infinite;
}

/* Stagger animations (para múltiples elementos) */
.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
.fade-in-up:nth-child(4) { animation-delay: 0.4s; }
.fade-in-up:nth-child(5) { animation-delay: 0.5s; }
.fade-in-up:nth-child(n+6) { animation-delay: 0.6s; }

/* ==================== VARIANTES DE VELOCIDAD ==================== */

.animation-slow {
	transition-duration: 1s !important;
	animation-duration: 1s !important;
}

.animation-normal {
	transition-duration: 0.6s !important;
	animation-duration: 0.6s !important;
}

.animation-fast {
	transition-duration: 0.3s !important;
	animation-duration: 0.3s !important;
}