/* ============================================
   INSTITUTO INCUYO - MODERN DESIGN SYSTEM
   ============================================ */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Roboto:wght@300;400;500;700&display=swap");

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
	/* Color Palette - Instituto INCUYO Branding */
	--primary-dark: #223a5b;
	--primary-blue: #223a5b;
	--primary-blue-light: #2d4d78;
	--primary-gold: #c39215;
	--accent-gold-light: #d4a520;
	--accent-gold-dark: #a67c0d;

	/* Gradients */
	--gradient-primary: linear-gradient(135deg,
			#223a5b 0%,
			#2d4d78 50%,
			#c39215 100%);
	--gradient-accent: linear-gradient(135deg, #c39215 0%, #d4a520 100%);
	--gradient-dark: linear-gradient(180deg, #223a5b 0%, #1a2d47 100%);
	--gradient-overlay: linear-gradient(135deg,
			rgba(34, 58, 91, 0.9),
			rgba(195, 146, 21, 0.85));

	/* Neutral Colors */
	--white: #faf8f5;
	--off-white: #f8f6f1;
	--gray-100: #f1f0ed;
	--gray-200: #e5e3df;
	--gray-300: #d1cfc9;
	--gray-400: #a8a6a0;
	--gray-600: #5a5850;
	--gray-800: #2a2822;
	--gray-900: #1a1816;

	/* Typography */
	--font-heading:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:
		"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Font Sizes */
	--text-xs: 0.75rem;
	/* 12px */
	--text-sm: 0.875rem;
	/* 14px */
	--text-base: 1rem;
	/* 16px */
	--text-lg: 1.125rem;
	/* 18px */
	--text-xl: 1.25rem;
	/* 20px */
	--text-2xl: 1.5rem;
	/* 24px */
	--text-3xl: 1.875rem;
	/* 30px */
	--text-4xl: 2.25rem;
	/* 36px */
	--text-5xl: 3rem;
	/* 48px */
	--text-6xl: 3.75rem;
	/* 60px */

	/* Spacing System */
	--space-1: 0.25rem;
	/* 4px */
	--space-2: 0.5rem;
	/* 8px */
	--space-3: 0.75rem;
	/* 12px */
	--space-4: 1rem;
	/* 16px */
	--space-5: 1.25rem;
	/* 20px */
	--space-6: 1.5rem;
	/* 24px */
	--space-8: 2rem;
	/* 32px */
	--space-10: 2.5rem;
	/* 40px */
	--space-12: 3rem;
	/* 48px */
	--space-16: 4rem;
	/* 64px */
	--space-20: 5rem;
	/* 80px */
	--space-24: 6rem;
	/* 96px */

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md:
		0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg:
		0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl:
		0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-glow: 0 0 30px rgba(59, 130, 246, 0.3);

	/* Border Radius */
	--radius-sm: 0.375rem;
	/* 6px */
	--radius-md: 0.5rem;
	/* 8px */
	--radius-lg: 0.75rem;
	/* 12px */
	--radius-xl: 1rem;
	/* 16px */
	--radius-2xl: 1.5rem;
	/* 24px */
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-index Scale */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal: 1040;
	--z-tooltip: 1050;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--gray-800);
	background-color: var(--white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--gray-900);
	margin-bottom: var(--space-4);
}

h1 {
	font-size: var(--text-5xl);
	font-weight: 800;
}

h2 {
	font-size: var(--text-4xl);
}

h3 {
	font-size: var(--text-3xl);
}

h4 {
	font-size: var(--text-2xl);
}

h5 {
	font-size: var(--text-xl);
}

h6 {
	font-size: var(--text-lg);
}

p {
	margin-bottom: var(--space-4);
	font-size: var(--text-base);
	color: var(--gray-600);
}

a {
	color: var(--primary-blue-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--primary-cyan);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-6);
}

.section {
	padding: var(--space-20) 0;
}

.text-center {
	text-align: center;
}

.text-gradient {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	transition: all var(--transition-base);
	padding: var(--space-4) 0;
}

.navbar.scrolled {
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-lg);
	padding: var(--space-3) 0;
}

.navbar .container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.navbar-brand {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.5px;
	display: inline-flex;
	align-items: center;
}

.navbar-brand span {
	color: var(--primary-gold);
	font-weight: 800;
}

.navbar-logo {
	height: 42px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	filter: brightness(0) invert(1);
	transition: filter var(--transition-fast);
}

.navbar.scrolled .navbar-logo {
	filter: brightness(0) invert(1);
}

.navbar-menu {
	display: flex;
	list-style: none;
	gap: var(--space-8);
	align-items: center;
}

.navbar-menu a {
	color: var(--gray-200);
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color var(--transition-fast);
	position: relative;
}

.navbar-menu a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-primary);
	transition: width var(--transition-base);
}

.navbar-menu a:hover {
	color: var(--white);
}

.navbar-menu a:hover::after {
	width: 100%;
}

.navbar-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-2);
}

.navbar-toggle span {
	display: block;
	width: 25px;
	height: 2px;
	background: var(--white);
	margin: 5px 0;
	transition: all var(--transition-base);
}

/* Campus Virtual Link Highlight */
.campus-link {
	background: var(--gradient-accent) !important;
	color: var(--white) !important;
	padding: var(--space-2) var(--space-4) !important;
	border-radius: var(--radius-full);
	font-weight: 700 !important;
	transition: all var(--transition-base);
	box-shadow: 0 2px 8px rgba(195, 146, 21, 0.3);
}

.campus-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(195, 146, 21, 0.5);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-dark);
	position: relative;
	overflow: hidden;
	padding-top: var(--space-20);
	isolation: isolate;
}

.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 20% 50%,
			rgba(59, 130, 246, 0.1) 0%,
			transparent 50%),
		radial-gradient(circle at 80% 80%,
			rgba(139, 92, 246, 0.1) 0%,
			transparent 50%);
	pointer-events: none;
	z-index: 1;
}

/* Hero Background Video */
.hero-bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
	filter: blur(8px) brightness(0.6);
}

/* YouTube Background Video */
.hero-youtube-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100vh;
	min-width: 177.77vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 0;
}
.hero-youtube-bg iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Glassmorphism Overlay */
.hero-glass-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(34, 58, 91, 0.3);
	backdrop-filter: blur(50px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	z-index: 1;
}

/* Hero Row Layout (two columns) */
.hero-row {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-12);
	width: 100%;
	padding: var(--space-6) 0;
}

.hero-text-col {
	flex: 1 1 45%;
	text-align: left;
}

.hero-video-col {
	flex: 1 1 55%;
	animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

/* Keep old hero-content for any other usage */
.hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
}

.hero-subtitle {
	font-size: var(--text-lg);
	color: var(--primary-gold);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: var(--space-4);
	animation: fadeInUp 0.8s ease-out;
	line-height: 1.4;
}

.hero-title {
	font-size: var(--text-6xl);
	color: var(--white);
	margin-bottom: var(--space-6);
	line-height: 1.1;
	animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-description {
	font-size: var(--text-xl);
	color: var(--gray-300);
	margin-bottom: var(--space-8);
	animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.hero-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	animation: fadeInUp 0.8s ease-out 0.55s backwards;
}

.hero-video {
	margin-top: var(--space-12);
	animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	width: 100%;
	margin: 0 auto;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.video-wrapper iframe,
.video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	object-fit: cover;
}

/* Hero responsive */
@media (max-width: 900px) {
	.hero-row {
		flex-direction: column;
		gap: var(--space-8);
	}

	.hero-text-col {
		text-align: center;
		flex: unset;
		width: 100%;
	}

	.hero-video-col {
		flex: unset;
		width: 100%;
	}

	.hero-cta-group {
		justify-content: center;
	}

	.hero-title {
		font-size: var(--text-4xl);
	}
}



/* ============================================
   BUTTONS
   ============================================ */
.btn {
	display: inline-block;
	padding: var(--space-4) var(--space-8);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	text-align: center;
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-base);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-primary {
	background: var(--gradient-primary);
	color: var(--white);
	box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.btn-secondary {
	background: var(--primary-dark);
	color: var(--white);
	border: 2px solid var(--primary-dark);
}

.btn-secondary:hover {
	background: var(--primary-blue-light);
	transform: translateY(-2px);
}

.btn-gold {
	background: var(--gradient-accent);
	color: var(--gray-900);
	box-shadow: 0 4px 18px rgba(195, 146, 21, 0.45);
	font-weight: 700;
}

.btn-gold:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(195, 146, 21, 0.6);
	color: var(--gray-900);
}

.btn-outline-white {
	background: transparent;
	color: var(--white);
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn-outline-white:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--white);
	color: var(--white);
	transform: translateY(-2px);
}

.btn-lg {
	padding: var(--space-5) var(--space-10);
	font-size: var(--text-lg);
}

/* ============================================
   CARDS
   ============================================ */
.card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
	height: 100%;
}

.card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
}

.card-icon {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-lg);
	background: var(--gradient-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-6);
	font-size: var(--text-3xl);
}

.card-title {
	font-size: var(--text-xl);
	color: var(--gray-900);
	margin-bottom: var(--space-3);
}

.card-text {
	font-size: var(--text-base);
	color: var(--gray-600);
	line-height: 1.7;
}

/* Glass Card Variant */
.card-glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.card-glass .card-title {
	color: var(--white);
}

.card-glass .card-text {
	color: var(--gray-200);
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.grid {
	display: grid;
	gap: var(--space-8);
}

.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ============================================
   SECTION STYLES
   ============================================ */
.section-header {
	text-align: center;
	margin-bottom: var(--space-16);
}

.section-subtitle {
	font-size: var(--text-sm);
	color: var(--primary-gold);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: var(--space-3);
}

.section-title {
	font-size: var(--text-4xl);
	color: var(--gray-900);
	margin-bottom: var(--space-4);
}

.section-description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	max-width: 700px;
	margin: 0 auto;
}

/* Dark Section Variant */
.section-dark {
	background: var(--gradient-dark);
	color: var(--white);
}

.section-dark .section-title,
.section-dark .card-title {
	color: var(--white);
}

.section-dark .section-description,
.section-dark .card-text {
	color: var(--gray-300);
}

/* ============================================
   PROGRAM INFO SECTION
   ============================================ */
.program-info {
	background: var(--gray-100);
}

.feature-grid {
	margin-top: var(--space-12);
}

/* ============================================
   ENROLLMENT SECTION
   ============================================ */
.enrollment {
	background:
		var(--gradient-overlay),
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%23ffffff" fill-opacity="0.05" d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25"/><path fill="%23ffffff" fill-opacity="0.05" d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5"/><path fill="%23ffffff" fill-opacity="0.1" d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"/></svg>') center/cover no-repeat;
	position: relative;
}

.highlight-box {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-2xl);
	padding: var(--space-10);
	margin-top: var(--space-12);
}

.highlight-title {
	font-size: var(--text-3xl);
	color: var(--white);
	text-align: center;
	margin-bottom: var(--space-8);
}

.highlight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.highlight-item {
	text-align: center;
	padding: var(--space-6);
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	transition: all var(--transition-base);
}

.highlight-item:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

.highlight-item-icon {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
	color: var(--primary-gold);
	width: 60px;
	height: 60px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-4);
}

.highlight-item-text {
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 600;
}

.scholarship-badge {
	display: inline-block;
	background: var(--gradient-accent);
	color: var(--white);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-full);
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: var(--space-6);
	box-shadow: var(--shadow-lg);
}

/* ============================================
   SOCIAL COMMITMENT SECTION
   ============================================ */
.social-commitment {
	background: var(--white);
}

.image-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-6);
	margin-top: var(--space-12);
}

.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xl);
	cursor: pointer;
	aspect-ratio: 4/3;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
}

.gallery-item:hover {
	transform: scale(1.03);
	box-shadow: var(--shadow-xl);
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.gallery-item:hover img {
	transform: scale(1.1);
}

.gallery-item-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	padding: var(--space-6);
	transform: translateY(100%);
	transition: transform var(--transition-base);
}

.gallery-item:hover .gallery-item-overlay {
	transform: translateY(0);
}

.gallery-item-title {
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 600;
}

/* ============================================
   CURRICULUM SECTION
   ============================================ */
.curriculum {
	background: var(--gray-100);
}

.curriculum-accordion {
	max-width: 900px;
	margin: 0 auto;
}

.accordion-item {
	background: var(--white);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-4);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
}

.accordion-item:hover {
	box-shadow: var(--shadow-lg);
}

.accordion-header {
	padding: var(--space-6);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--gradient-primary);
	color: var(--white);
	transition: all var(--transition-base);
}

.accordion-header:hover {
	background: var(--gradient-accent);
}

.accordion-title {
	font-size: var(--text-xl);
	font-weight: 700;
	margin: 0;
	color: var(--white);
}

.accordion-icon {
	font-size: var(--text-2xl);
	transition: transform var(--transition-base);
}

.accordion-item.active .accordion-icon {
	transform: rotate(180deg);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-slow);
}

.accordion-item.active .accordion-content {
	max-height: 1000px;
}

.accordion-body {
	padding: var(--space-6);
}

.course-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-3);
}

.course-list li {
	padding: var(--space-3) var(--space-4);
	background: var(--gray-100);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--gray-700);
	border-left: 3px solid var(--primary-blue-light);
}

/* ============================================
   CERTIFICATIONS SECTION
   ============================================ */
.certifications {
	background: var(--white);
}

.cert-year-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-8);
	margin-top: var(--space-12);
}

.cert-year-card {
	background: var(--white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-lg);
	border-top: 4px solid var(--primary-blue-light);
	transition: all var(--transition-base);
}

.cert-year-card:nth-child(2) {
	border-top-color: var(--primary-cyan);
}

.cert-year-card:nth-child(3) {
	border-top-color: var(--accent-purple);
}

.cert-year-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-xl);
}

.cert-year {
	font-size: var(--text-3xl);
	font-weight: 800;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: var(--space-6);
}

.cert-list {
	list-style: none;
}

.cert-list li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--gray-200);
	font-size: var(--text-base);
	color: var(--gray-700);
	position: relative;
	padding-left: var(--space-6);
}

.cert-list li:last-child {
	border-bottom: none;
}

.cert-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary-blue-light);
	font-weight: 700;
}

/* ============================================
   LOCATION SECTION
   ============================================ */
.location {
	background: var(--gray-100);
}

.map-wrapper {
	margin-top: var(--space-12);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-xl);
	height: 450px;
}

.map-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
	background: var(--gradient-dark);
	color: var(--white);
	padding: var(--space-16) 0 var(--space-8);
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-10);
	margin-bottom: var(--space-10);
}

.footer-section h3 {
	color: var(--white);
	margin-bottom: var(--space-6);
	font-size: var(--text-xl);
}

.footer-section p,
.footer-section a {
	color: var(--gray-300);
	font-size: var(--text-base);
	line-height: 1.8;
}

.footer-section a:hover {
	color: var(--primary-cyan);
}

.contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.contact-icon {
	font-size: var(--text-xl);
	color: var(--primary-gold);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--space-6);
	text-align: center;
	color: var(--gray-400);
	font-size: var(--text-sm);
}

/* ============================================
   WHATSAPP BUTTON
   ============================================ */
.whatsapp-float {
	position: fixed;
	bottom: var(--space-8);
	right: var(--space-8);
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.whatsapp-btn {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-full);
	background: #25d366;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-3xl);
	box-shadow: var(--shadow-xl);
	transition: all var(--transition-base);
	animation: pulse 2s infinite;
}

.whatsapp-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}

/* ============================================
   AI CHATBOT BUTTON & WINDOW
   ============================================ */
.ai-chat-btn {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-2xl);
	box-shadow: var(--shadow-xl);
	transition: all var(--transition-base);
	border: none;
	cursor: pointer;
	animation: aiPulse 2.5s infinite;
	position: relative;
}

.ai-chat-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 10px 30px rgba(34, 58, 91, 0.6);
}

@keyframes aiPulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(34, 58, 91, 0.6);
	}

	50% {
		box-shadow: 0 0 0 12px rgba(34, 58, 91, 0);
	}
}

/* Chat Window */
.ai-chat-window {
	position: fixed;
	bottom: calc(var(--space-8) + 60px + 60px + var(--space-3) + var(--space-3));
	right: var(--space-8);
	width: 370px;
	max-height: 520px;
	background: #fff;
	border-radius: var(--radius-2xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(34, 58, 91, 0.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: calc(var(--z-fixed) + 10);
	transform: scale(0.85) translateY(20px);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
	transform-origin: bottom right;
}

.ai-chat-window.open {
	transform: scale(1) translateY(0);
	opacity: 1;
	pointer-events: all;
}

/* Chat Header */
.ai-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-5);
	background: var(--gradient-primary);
	color: #fff;
	flex-shrink: 0;
}

.ai-chat-header-info {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.ai-chat-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
	flex-shrink: 0;
}

.ai-chat-title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.3;
}

.ai-chat-subtitle {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
	line-height: 1.3;
}

.ai-chat-close {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--text-base);
	transition: background var(--transition-fast);
	flex-shrink: 0;
}

.ai-chat-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Messages Area */
.ai-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: #f8f9fb;
	scroll-behavior: smooth;
}

.ai-chat-messages::-webkit-scrollbar {
	width: 5px;
}

.ai-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-full);
}

.ai-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 88%;
}

.ai-chat-msg--bot {
	align-self: flex-start;
}

.ai-chat-msg--user {
	align-self: flex-end;
}

.ai-chat-msg-bubble {
	padding: var(--space-3) var(--space-4);
	border-radius: 18px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--gray-800);
	margin: 0;
}

.ai-chat-msg--bot .ai-chat-msg-bubble {
	background: #fff;
	border-bottom-left-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.ai-chat-msg--user .ai-chat-msg-bubble {
	background: var(--gradient-primary);
	color: #fff;
	border-bottom-right-radius: 5px;
	box-shadow: 0 2px 8px rgba(34, 58, 91, 0.25);
}

/* Typing indicator */
.ai-chat-typing {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: var(--space-3) var(--space-4);
	background: #fff;
	border-radius: 18px;
	border-bottom-left-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
	width: fit-content;
}

.ai-chat-typing span {
	display: block;
	width: 7px;
	height: 7px;
	background: var(--primary-blue);
	border-radius: 50%;
	opacity: 0.5;
	animation: typingDot 1.2s ease-in-out infinite;
}

.ai-chat-typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.ai-chat-typing span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes typingDot {

	0%,
	80%,
	100% {
		transform: scale(1);
		opacity: 0.4;
	}

	40% {
		transform: scale(1.3);
		opacity: 1;
	}
}

/* Input Area */
.ai-chat-input-area {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: #fff;
	border-top: 1px solid var(--gray-200);
	flex-shrink: 0;
}

.ai-chat-input {
	flex: 1;
	border: 1.5px solid var(--gray-200);
	border-radius: 22px;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	resize: none;
	outline: none;
	max-height: 110px;
	overflow-y: auto;
	background: var(--gray-100);
	color: var(--gray-800);
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ai-chat-input:focus {
	border-color: var(--primary-blue-light);
	background: #fff;
}

.ai-chat-input::placeholder {
	color: var(--gray-400);
}

.ai-chat-send {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: var(--text-base);
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.ai-chat-send:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(34, 58, 91, 0.4);
}

.ai-chat-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Error bubble */
.ai-chat-msg--error .ai-chat-msg-bubble {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

/* Responsive – mobile */
@media (max-width: 768px) {
	.ai-chat-window {
		right: var(--space-4);
		left: var(--space-4);
		width: auto;
		max-height: 75vh;
		bottom: calc(var(--space-6) + 55px + 55px + var(--space-3) + var(--space-3));
	}

	.ai-chat-btn,
	.whatsapp-float .whatsapp-btn {
		width: 55px;
		height: 55px;
	}

	.ai-chat-btn {
		font-size: var(--text-xl);
	}
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
	}

	50% {
		box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
	}
}

.fade-in {
	animation: fadeIn 0.8s ease-out;
}

.fade-in-up {
	animation: fadeInUp 0.8s ease-out;
}

/* Scroll Reveal */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

.icon {
	color: var(--gray-100);
}

/* Tech Stack Infinite Carousel */
.tech-carousel-container {
	margin-top: var(--space-16);
	overflow: hidden;
	position: relative;
	width: 100%;
	padding: var(--space-8) 0;
}

.tech-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(to right,
			transparent,
			black 10%,
			black 90%,
			transparent);
	-webkit-mask-image: linear-gradient(to right,
			transparent,
			black 10%,
			black 90%,
			transparent);
}

.tech-carousel-track {
	display: flex;
	gap: var(--space-12);
	animation: scroll-tech 30s linear infinite;
	width: max-content;
}

.tech-carousel-track:hover {
	animation-play-state: paused;
}

.tech-icon {
	font-size: 3.5rem;
	color: var(--primary-gold);
	opacity: 0.8;
	transition: all var(--transition-base);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
}

.tech-icon:hover {
	opacity: 1;
	transform: scale(1.2) translateY(-5px);
	filter: drop-shadow(0 4px 12px rgba(195, 146, 21, 0.5));
}

@keyframes scroll-tech {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* CTA Button Pulse Animation */
.cta-pulse {
	position: relative;
	animation: ctaPulse 2s ease-in-out infinite;
}

.cta-pulse::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	background: inherit;
	opacity: 0.7;
	animation: ctaGlow 2s ease-in-out infinite;
	z-index: -1;
}

.cta-pulse:hover {
	animation: none;
	transform: scale(1.05);
}

.cta-pulse:hover::before {
	animation: none;
	opacity: 1;
}

@keyframes ctaPulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 4px 20px rgba(195, 146, 21, 0.4);
	}

	50% {
		transform: scale(1.03);
		box-shadow: 0 6px 30px rgba(195, 146, 21, 0.6);
	}
}

@keyframes ctaGlow {

	0%,
	100% {
		box-shadow: 0 0 15px rgba(195, 146, 21, 0.5);
	}

	50% {
		box-shadow: 0 0 30px rgba(195, 146, 21, 0.8);
	}
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* ─── TABLET RESPONSIVE (768px – 1100px) ─── */
@media (min-width: 769px) and (max-width: 1100px) {

	/* Typography scale-down */
	:root {
		--text-6xl: 2.25rem;
		--text-5xl: 1.875rem;
		--text-4xl: 1.625rem;
		--text-3xl: 1.375rem;
		--text-2xl: 1.125rem;
		--space-20: 4rem;
		--space-24: 5rem;
	}

	/* Container padding */
	.container {
		padding: 0 var(--space-6);
	}

	/* Navbar */
	.navbar-logo {
		height: 36px;
	}

	.navbar-menu {
		gap: var(--space-5);
	}

	.navbar-menu a {
		font-size: 0.8rem;
	}

	/* Hero section — keep 2-col but better balanced */
	.hero {
		min-height: 85vh;
		padding-top: var(--space-16);
	}

	.hero-row {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-4) 0;
	}

	.hero-text-col {
		flex: 1 1 48%;
		text-align: left;
	}

	.hero-video-col {
		flex: 1 1 52%;
	}

	.hero-title {
		font-size: 2rem;
		margin-bottom: var(--space-4);
		line-height: 1.15;
	}

	.hero-subtitle {
		font-size: 0.75rem;
		letter-spacing: 1.5px;
		margin-bottom: var(--space-3);
	}

	.hero-description {
		font-size: 0.9rem;
		margin-bottom: var(--space-6);
		line-height: 1.6;
	}

	.hero-cta-group {
		justify-content: flex-start;
		gap: var(--space-3);
	}

	.hero-cta-group .btn {
		font-size: 0.8rem;
		padding: var(--space-3) var(--space-5);
		width: auto;
	}

	.hero-video {
		margin-top: var(--space-4);
	}

	/* Sections */
	.section {
		padding: var(--space-16) 0;
	}

	.section-title {
		font-size: var(--text-3xl);
	}

	.section-description {
		font-size: var(--text-base);
	}

	/* Grids */
	.grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Card sizing */
	.card {
		padding: var(--space-6);
	}

	.card-title {
		font-size: var(--text-xl);
	}

	/* Certifications */
	.cert-year-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}

	.cert-year-card {
		padding: var(--space-6);
	}

	.cert-year {
		font-size: var(--text-xl);
	}

	/* Curriculum accordion */
	.accordion-title {
		font-size: var(--text-xl);
	}

	.course-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-3);
	}

	/* Image gallery */
	.image-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	/* Tech Carousel */
	.tech-icon {
		font-size: 2.5rem;
		width: 60px;
		height: 60px;
	}

	/* Highlight grid */
	.highlight-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Video wrapper */
	.video-wrapper {
		max-width: 100%;
	}

	/* AI Chat */
	.ai-chat-window {
		width: 360px;
	}
}

/* Mobile devices */
@media (max-width: 768px) {
	:root {
		--text-6xl: 2rem;
		--text-5xl: 1.875rem;
		--text-4xl: 1.5rem;
		--space-20: 3rem;
	}

	.container {
		padding: 0 var(--space-4);
	}

	/* Mobile Navigation */
	.navbar-menu {
		position: fixed;
		top: 0;
		right: -100%;
		width: 70%;
		max-width: 300px;
		height: 100vh;
		background: var(--gray-900);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--space-6);
		transition: right var(--transition-base);
		box-shadow: var(--shadow-xl);
	}

	.navbar-menu.active {
		right: 0;
	}

	.navbar-toggle {
		display: block;
		z-index: 1001;
	}

	.navbar-toggle.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.navbar-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.navbar-toggle.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -6px);
	}

	/* Hero responsive adjustments */
	.hero {
		min-height: auto;
		padding: var(--space-24) 0 var(--space-16);
		padding-top: calc(var(--space-20) + var(--space-8));
	}

	.hero-content {
		max-width: 100%;
		padding: 0 var(--space-2);
	}

	.hero-subtitle {
		font-size: var(--text-sm);
		letter-spacing: 1px;
		margin-bottom: var(--space-3);
		line-height: 1.5;
	}

	.hero-title {
		font-size: 3rem;
		margin-bottom: var(--space-4);
		line-height: 1.2;
	}

	.hero-description {
		font-size: var(--text-base);
		margin-bottom: var(--space-8);
		line-height: 1.6;
	}

	.hero-video {
		margin-top: var(--space-8);
	}

	.video-wrapper {
		border-radius: var(--radius-lg);
		max-width: 100%;
	}

	/* Grid adjustments */
	.grid-cols-2,
	.grid-cols-3,
	.grid-cols-4 {
		grid-template-columns: 1fr;
	}

	.highlight-grid {
		grid-template-columns: 1fr;
	}

	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.contact-item {
		justify-content: center;
	}

	.hero {
		min-height: auto;
		padding: var(--space-24) 0 var(--space-16);
	}

	.section {
		padding: var(--space-16) 0;
	}

	.whatsapp-float {
		bottom: var(--space-6);
		right: var(--space-6);
		flex-direction: row;
	}

	.whatsapp-btn {
		width: 55px;
		height: 55px;
		font-size: var(--text-2xl);
	}
}

/* Small mobile devices */
@media (max-width: 480px) {
	:root {
		--text-6xl: 1.75rem;
		--text-5xl: 1.5rem;
	}

	.btn {
		width: 100%;
	}

	.course-list {
		grid-template-columns: 1fr;
	}

	.image-gallery {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   SERVICIOS INCUYO — index.ejs banner section
   ============================================ */
.servicios-incuyo {
	background: var(--gradient-primary);
	position: relative;
	overflow: hidden;
}

.servicios-incuyo::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 10% 70%, rgba(195, 146, 21, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
	pointer-events: none;
}

.servicios-incuyo__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.servicios-incuyo__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(195, 146, 21, 0.18);
	border: 1px solid rgba(195, 146, 21, 0.5);
	color: var(--primary-gold);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-radius: var(--radius-full);
	padding: 0.4rem 1.2rem;
	margin-bottom: 1.5rem;
}

.servicios-incuyo__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	color: var(--white);
	margin-bottom: 1.5rem;
	letter-spacing: -0.5px;
}

.servicios-incuyo__lead {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.8;
	margin-bottom: 1rem;
}

.servicios-incuyo__text {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.8;
	margin-bottom: 2.5rem;
}

.servicios-incuyo__pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

.servicios-incuyo__pillar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-full);
	padding: 0.55rem 1.25rem;
	transition: all var(--transition-base);
}

.servicios-incuyo__pillar:hover {
	background: rgba(195, 146, 21, 0.2);
	border-color: rgba(195, 146, 21, 0.5);
	transform: translateY(-2px);
}

.servicios-incuyo__pillar i {
	color: var(--primary-gold);
	font-size: 0.95rem;
}

.servicios-incuyo__pillar span {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.2px;
}

.servicios-incuyo__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

@media (max-width: 640px) {
	.servicios-incuyo__pillars {
		gap: 0.75rem;
	}

	.servicios-incuyo__pillar {
		padding: 0.45rem 1rem;
	}
}

/* ============================================
   TYPEWRITER EFFECT 
   ============================================ */
.typewriter-cursor {
	display: inline;
	color: var(--primary-gold);
	animation: blink 1s step-end infinite;
	margin-left: 2px;
	font-weight: 300;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* ============================================
   SERVICIOS PAGE — hero section
   ============================================ */
.servicios-page-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-primary);
	position: relative;
	overflow: hidden;
	padding-top: var(--space-20);
	isolation: isolate;
}

.servicios-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 60%, rgba(195, 146, 21, 0.18) 0%, transparent 55%),
		radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.servicios-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(34, 58, 91, 0.25);
	z-index: 1;
}

.servicios-page-hero__content {
	position: relative;
	z-index: 10;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-6) 0;
}

@media (max-width: 900px) {
	.servicios-page-hero {
		min-height: 55vh;
	}
}