/* =============================
	 Xhaka.Tech Blizzard-like Theme
	 ============================= */

/* =============================
	 LOADING SCREEN
	 ============================= */
.loading-screen {
	position: fixed;
	inset: 0;
	background: #000000;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.5s ease-out;
}

.loading-screen.loaded {
	opacity: 0;
	pointer-events: none;
}

.loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.loading-logo {
	width: 800px;
	height: auto;
	opacity: 0;
	animation: logoFadeIn 0.75s ease-out 0.25s forwards;
	filter: drop-shadow(0 8px 24px rgba(77, 184, 255, 0.3));
}

.loading-text {
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	opacity: 0;
	animation: textFadeIn 0.5s ease-out 0.75s forwards;
	background: linear-gradient(135deg, #4db8ff, #6cf4d6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@keyframes logoFadeIn {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(20px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes textFadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 560px) {
	.loading-logo {
		width: 300px;
	}
}
:root {
	--bg: #0e1a24;
	--bg-alt: #132635;
	--bg-soft: #183244;
	--surface: #1e3647cc;
	--surface-solid: #1e3647;
	--accent: #4db8ff;
	--accent-glow: 185 100% 60%;
	--accent-alt: #6cf4d6;
	--text: #e8f4fa;
	--text-dim: #9bb3c2;
	--warn: #ffce3d;
	--danger: #ff5f56;
	--radius-sm: 6px;
	--radius: 14px;
	--radius-lg: 28px;
	--shadow-elev: 0 4px 12px -2px rgba(0,0,0,.4),0 10px 30px -6px rgba(0,0,0,.5);
	--gradient-accent: linear-gradient(135deg,#008cff,#4db8ff 40%,#6cf4d6);
	--gradient-overlay: linear-gradient(90deg,#0e1a24 0%,#0e1a24cc 40%,#0e1a2400 70%);
	--font-sans: 'Oxanium','Inter',system-ui,Segoe UI,Arial,sans-serif;
	--transition-fast: .18s cubic-bezier(.4,.2,.3,1);
	--transition: .35s cubic-bezier(.25,.8,.25,1);
}

* {box-sizing:border-box;margin:0;padding:0;}
html {scroll-behavior:smooth;}
body {
	font-family: var(--font-sans);
	background: radial-gradient(circle at 20% 15%,#173245,#0e1a24 50%),linear-gradient(#0e1a24,#081116);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	min-height:100dvh;
}

/* Global Parallax Background Layer */
.global-parallax-bg {position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
.global-parallax-bg::before {content:"";position:absolute;inset:-5%;background-image:url('https://static.wixstatic.com/media/df3c7f_f44de6f3ca1d4d68bd2ff4a37b5503e8~mv2.png');background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(.45) saturate(1.1);transform:translate3d(0,0,0) scale(1.08);transition:transform .6s ease-out;will-change:transform;}
.global-parallax-bg::after {content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#0e1a2400,#0e1a24 70%),linear-gradient(#081116aa,#081116dd);mix-blend-mode:normal;}

/* Animated GIF layers (stretched + blurred) */
.animated-bg-layer {position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;display:block;}
.animated-bg-layer::before {content:"";position:absolute;inset:-10%;background-image:url('https://static.wixstatic.com/media/df3c7f_830e69f3ffb0421abe679306aa00a1a5~mv2.gif');background-repeat:no-repeat;background-position:center center;background-size:150% 120%;transform-origin:center center;filter:blur(36px) brightness(.9) saturate(.9);opacity:.85;mix-blend-mode:screen;will-change:transform,filter,opacity;transition:transform .45s linear,opacity .4s linear;}

/* Back layer: heavier blur, lower opacity, sits behind the main parallax */
.animated-bg-layer.layer-back {z-index:-4;}
.animated-bg-layer.layer-back::before {filter:blur(46px) brightness(.7) saturate(.85);opacity:.9;background-size:180% 130%;mix-blend-mode:normal;}

/* Front layer: lighter blur, adds glow and interacts with content */
.animated-bg-layer.layer-front {z-index:-1;}
.animated-bg-layer.layer-front::before {filter:blur(22px) brightness(.95) saturate(1.05);opacity:.45;background-size:120% 110%;mix-blend-mode:overlay;}

/* Expose transform variables for JS to animate; small default offsets to avoid a static look */
.animated-bg-layer {--tx: 0px; --ty: 0px;}
.animated-bg-layer::before {transform: translate3d(var(--tx), var(--ty), 0) scale(1.08);} 

@media (prefers-reduced-motion: reduce) {
	.animated-bg-layer::before {transition:none;filter:blur(18px) !important;}
}

@media (prefers-reduced-motion: reduce) {
	.global-parallax-bg::before {transition:none;}
}

img {max-width:100%;display:block;}
a {color: var(--accent);text-decoration:none;}
a:hover {text-decoration:underline;}

/* Scrollbar subtle */
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track {background:#0e1a24;}
body::-webkit-scrollbar-thumb {background:#24485c;border-radius:6px;}
body::-webkit-scrollbar-thumb:hover {background:#2d5f78;}

/* Floating Header */
.site-header {position:fixed;top:16px;left:0;right:0;z-index:1000;display:flex;justify-content:center;pointer-events:none;}
.site-header.scrolled {top:8px;}
.site-header .header-inner {width:min(1600px,95%);backdrop-filter:blur(18px) saturate(140%);background:linear-gradient(135deg,#1b3140dd,#11232fdd);border:1px solid #2c4656;border-radius:var(--radius-lg);display:flex;align-items:center;gap:34px;padding:4px 18px;box-shadow:var(--shadow-elev);pointer-events:auto;} /* Padding reducido manteniendo logo grande */

.logo {font-size: clamp(1.2rem,1.4vw + .8rem,1.8rem);font-weight:800;letter-spacing:.5px;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;display:flex;align-items:center;gap:12px;}
.logo .accent {color:var(--accent);-webkit-text-fill-color:var(--accent);}
.logo img {display:block;height:70px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 14px #00000090);transition:transform .4s ease;}
.logo:hover img {transform:translateY(-2px);} 
.logo-text {font-size:clamp(1.1rem,1.2vw + .7rem,1.5rem);font-weight:800;letter-spacing:1px;white-space:nowrap;}
.logo-text {color:#fff;}
.tech-gradient {background:linear-gradient(135deg,#4db8ff,#6cf4d6,#ffce3d);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;}
.games-gradient {background:linear-gradient(135deg,#4db8ff,#6cf4d6,#ffce3d);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;}
.visually-hidden {position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}

.main-nav ul {list-style:none;display:flex;gap:24px;align-items:center;}
.main-nav a,.nav-btn {color:var(--text-dim);font-weight:500;font-size:.95rem;letter-spacing:.5px;position:relative;padding:6px 4px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;}
.main-nav a:hover,.nav-btn:hover {color:var(--text);}

.has-dropdown {position:relative;}
.has-dropdown .dropdown {position:absolute;top:100%;left:0;min-width:220px;display:flex;flex-direction:column;background:#163040;border:1px solid #2b4a5d;border-radius:var(--radius);padding:10px 10px 12px;box-shadow:var(--shadow-elev);opacity:0;transform:translateY(6px);pointer-events:none;transition:var(--transition-fast);}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown {opacity:1;transform:translateY(0);pointer-events:auto;}
.dropdown a {padding:8px 10px;border-radius:8px;font-size:.85rem;color:var(--text-dim);}
.dropdown a:hover {background:#214358;color:var(--text);}

/* Buttons / CTAs */
.primary-cta {background:var(--gradient-accent);color:#041a26;font-weight:600;padding:10px 20px;border-radius:var(--radius);box-shadow:0 0 0 0 rgba(77,184,255,.4);transition:var(--transition-fast);position:relative;overflow:hidden;}
.primary-cta:hover {text-decoration:none;box-shadow:0 0 0 4px rgba(77,184,255,.22);} 
.primary-cta:active {transform:translateY(2px);} 

.header-actions {margin-left:auto;display:flex;align-items:center;gap:18px;}
.lang-switch {display:flex;gap:4px;background:#183244;border:1px solid #24495e;padding:4px;border-radius:var(--radius);}
.lang-btn {background:transparent;color:var(--text-dim);font-weight:600;border:0;padding:6px 10px;border-radius:10px;cursor:pointer;font-size:.75rem;letter-spacing:.5px;}
.lang-btn.active,.lang-btn:hover {background:#25506a;color:var(--text);}

.mobile-menu-toggle {display:none;background:#183244;border:1px solid #2b5368;color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:1.1rem;}

/* Mobile nav panel */
.mobile-nav-panel {position:fixed;inset:0;backdrop-filter:blur(22px);background:#0e1a24f2;z-index:900;display:flex;align-items:flex-start;justify-content:center;padding-top:110px;opacity:0;pointer-events:none;transition:var(--transition);}
.mobile-nav-panel.active {opacity:1;pointer-events:auto;}
.mobile-nav-panel nav {display:flex;flex-direction:column;align-items:center;gap:32px;}
.mobile-nav-panel nav ul {display:flex;flex-direction:column;gap:22px;list-style:none;font-size:1.4rem;text-align:center;}
.mobile-nav-panel nav a {color:var(--text-dim);font-weight:600;letter-spacing:.8px;}
.mobile-nav-panel nav a:hover {color:var(--text);} 
.mobile-lang-switch {display:flex;gap:6px;background:#183244;border:1px solid #24495e;padding:6px;border-radius:var(--radius);}
.mobile-lang-switch .lang-btn {font-size:.9rem;padding:8px 16px;} 

/* Hero / Carousel */
.hero {padding-top:110px;} /* Ajustado para que cards se vean mejor bajo el header */
.carousel {position:relative;width:min(1600px,95%);margin:0 auto;overflow:hidden;border-radius:34px;/* Ajuste para que no se vea siguiente slide */}
.slides {display:grid;grid-auto-flow:column;grid-auto-columns:100%;transition:transform .9s cubic-bezier(.7,.05,.2,1);gap:0;} /* Sin gap entre slides */
.slide {position:relative;min-height:760px;display:flex;align-items:center;width:100%;overflow:hidden;} /* Forzar ancho y ocultar desbordes */
.slide .bg {position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.7) saturate(1.05);transform:scale(1.04);} /* Menos scale para evitar que sobresalga en bordes */
.slide .overlay-gradient {position:absolute;inset:0;background:var(--gradient-overlay);}
.slide .content {position:relative;max-width:760px;padding:70px clamp(2.2rem,4.6vw,4.6rem);display:flex;flex-direction:column;gap:32px;} /* Más ancho/padding para texto */
.slide h1,.slide h2 {font-size:clamp(2.6rem,1.5vw + 2.7rem,4.2rem);line-height:1.02;font-weight:800;letter-spacing:.5px;text-shadow:0 10px 34px #000;} /* Tipografía aún mayor */
.slide p {color:var(--text-dim);font-size:clamp(1.1rem,.85vw + .8rem,1.5rem);line-height:1.5;font-weight:500;max-width:640px;}
.cta-group {display:flex;gap:16px;flex-wrap:wrap;}
.btn {--btn-bg:#25506a;--btn-border:#2a607d;--btn-color:var(--text);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;font-weight:600;border-radius:var(--radius);text-decoration:none;font-size:.95rem;letter-spacing:.5px;background:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border);box-shadow:0 4px 18px -4px #00000080;transition:var(--transition-fast);}
.btn:hover {background:#2d6687;color:var(--text);} 
.btn.solid {background:var(--gradient-accent);color:#041a26;border:1px solid #55c7ff;}
.btn.solid:hover {filter:brightness(1.08);} 
.btn.outline {background:rgba(24,50,68,.4);backdrop-filter:blur(6px);}
.btn.outline:hover {background:#24475c;} 
.btn.large {font-size:1.05rem;padding:16px 38px;}

/* Carousel nav */
.carousel-nav {position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid #2d5b73;background:#17394caa;color:var(--text);display:grid;place-items:center;font-size:1.9rem;font-weight:400;cursor:pointer;backdrop-filter:blur(6px);transition:var(--transition-fast);}
.carousel-nav:hover {background:#205b75cc;}
.carousel-nav.prev {left:14px;}
.carousel-nav.next {right:14px;}
.carousel-dots {position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:14px;}
.carousel-dots button {width:62px;height:8px;border-radius:5px;border:0;background:#446477;opacity:.4;cursor:pointer;transition:var(--transition-fast);}
.carousel-dots button.active {opacity:1;background:var(--gradient-accent);box-shadow:0 0 0 4px #00000040;}

/* Sections */
.section {width:min(1600px,95%);margin:0 auto;padding:200px 0 70px;}

/* Portfolio section override for hero width */
.portfolio {width:min(1600px,95%);padding:60px 0 40px;}

/* Services section - minimal padding to bring cards very close to tools mastery */
.services {padding-top: 10px; padding-bottom: 20px;}

/* Services Container - matches hero carousel styling */
.services-container {
  width: min(1600px, 95%);
  margin: 0 auto;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  padding: 40px clamp(1.5rem, 3vw, 3rem);
}
/* Reduce bottom padding for services section to bring games section closer */
.services {padding-bottom: 20px;}
.section-head {display:flex;flex-direction:column;gap:18px;margin-bottom:46px;max-width:940px;}
.section-head h2 {font-size:clamp(1.6rem,1.1vw + 1.6rem,2.6rem);font-weight:800;letter-spacing:.5px;}
.section-head p {color:var(--text-dim);font-size:1rem;line-height:1.5;}

/* Services header: semi-transparent pad with a little extra top padding */
.services .section-head {background:#183244cc;backdrop-filter:blur(6px);border:1px solid #24485b;border-radius:24px;padding:28px 22px 20px;box-shadow:0 12px 28px -12px #00000099;position:relative;overflow:hidden;transition:all 0.3s ease;max-width:none;margin-left:auto;margin-right:auto;text-align:center;}
.services .section-head::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');background-size:cover;background-position:center;opacity:.15;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1);}

/* Expandable Why Content */
.why-content-expandable {
  margin-top: 40px;
  text-align: center;
}

.expand-toggle {
  background: linear-gradient(145deg, #183244, #11242f);
  border: 1px solid #24485b;
  border-radius: 16px;
  padding: 16px 24px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.expand-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  mix-blend-mode: screen;
  filter: brightness(1.1) saturate(1.1);
  transition: opacity 0.3s ease;
}

.expand-toggle:hover {
  transform: translateY(-2px);
  border-color: #4db8ff;
  box-shadow: 0 8px 24px -8px rgba(77, 184, 255, 0.3);
}

.expand-toggle:hover::before {
  opacity: 0.15;
}

.expand-icon {
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.expand-toggle.expanded .expand-icon {
  transform: rotate(180deg);
}

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-top: 0;
  opacity: 0;
}

.expandable-content.expanded {
  max-height: 2000px;
  opacity: 1;
  margin-top: 24px;
}
/* Match size/centering for both headers */
.services .section-head,#prototypes .section-head,.games .section-head {max-width:1100px;margin-left:auto;margin-right:auto;text-align:center;}
/* Games header: card-style like services */
.games .section-head {background:#183244cc;backdrop-filter:blur(6px);border:1px solid #24485b;border-radius:24px;padding:28px 22px 20px;box-shadow:0 12px 28px -12px #00000099;position:relative;overflow:hidden;}
.games .section-head::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');background-size:cover;background-position:center;opacity:.15;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1);}

/* Extra breathing room for service cards and their titles */
.services .cards {margin-top:22px;gap:32px;}
.services .cards,#prototypes .proto-list {width:min(1200px,100%);margin-left:auto;margin-right:auto;justify-content:center;}
.services .card.service {padding:34px 28px;}
.services .card.service h3 {margin-bottom:12px;}
/* Make service cards auto-height to avoid clipping */
.services .card.service {aspect-ratio:auto;min-height:320px;}

/* Portfolio Section - With Title and More Space */
.portfolio {padding-top: 80px; padding-bottom: 40px;}
.portfolio .section-head {text-align: center;margin-bottom: 40px;max-width:1100px;margin-left:auto;margin-right:auto;}
.portfolio .section-head h2 {font-size:clamp(1.8rem,1.2vw + 1.6rem,2.8rem);font-weight:800;letter-spacing:.5px;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0;}

/* Filter Tabs - Centered below grid */
.filter-tabs {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}

.filter-btn {
	background: rgba(24, 50, 68, 0.6);
	border: 1px solid #2a5a6b;
	color: var(--text-dim);
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}

.filter-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-accent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.filter-btn:hover {
	background: rgba(24, 50, 68, 0.8);
	border-color: #4db8ff;
	color: var(--text);
	transform: translateY(-2px);
}

.filter-btn.active {
	background: var(--gradient-accent);
	color: #041a26;
	border-color: #55c7ff;
	box-shadow: 0 4px 16px -4px rgba(77, 184, 255, 0.4);
}

.filter-btn.active::before {
	opacity: 0;
}

/* Bento Grid Layout - Perfectly Filled */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	grid-auto-flow: dense;
	gap: 16px;
	margin: 0 auto;
	width: min(1600px, 95%);
}

/* Bento Card Base - Con Imagen de Fondo Completa */
.bento-card {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 28px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.4);
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(40px);
}

/* Sin overlay gris */
.bento-card::before {
	display: none;
}

.bento-card.reveal {
	opacity: 1;
	transform: translateY(0);
}

/* Scroll Animation Keyframes */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes staggerFadeIn {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Stagger Animation Classes */
.bento-card.stagger-1 { animation-delay: 0.1s; }
.bento-card.stagger-2 { animation-delay: 0.2s; }
.bento-card.stagger-3 { animation-delay: 0.3s; }
.bento-card.stagger-4 { animation-delay: 0.4s; }
.bento-card.stagger-5 { animation-delay: 0.5s; }
.bento-card.stagger-6 { animation-delay: 0.6s; }
.bento-card.stagger-7 { animation-delay: 0.7s; }
.bento-card.stagger-8 { animation-delay: 0.8s; }
.bento-card.stagger-9 { animation-delay: 0.9s; }
.bento-card.stagger-10 { animation-delay: 1.0s; }
.bento-card.stagger-11 { animation-delay: 1.1s; }
.bento-card.stagger-12 { animation-delay: 1.2s; }

.bento-card.in-view {
	animation: staggerFadeIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Bento Card Sizes - Optimized for Compact Grid */
.bento-large {
	grid-column: span 2;
	grid-row: span 2;
}

.bento-wide {
	grid-column: span 2;
	grid-row: span 1;
}

.bento-tall {
	grid-column: span 1;
	grid-row: span 2;
}

.bento-normal {
	grid-column: span 1;
	grid-row: span 1;
}

/* Bento Card Media */
/* Bento Card Media - Ahora es el fondo de toda la card */
.bento-card .media {
	display: none;
}

/* Bento Card Content - Completely Transparent */
.bento-card .proto-content {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	backdrop-filter: none;
	justify-content: flex-end;
}

/* Content wrapper for name and description */
.bento-card .proto-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	background: transparent;
	backdrop-filter: none;
	padding: 0;
	border-radius: 0;
	margin-bottom: 8px;
}

.bento-card h4 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: linear-gradient(90deg, #55c7ff, #6cf4d6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.bento-large h4 {
	font-size: 1.4rem;
}

.bento-card .proto-desc {
	color: #ffffff;
	font-size: 0.85rem;
	line-height: 1.4;
	margin-bottom: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
	background: transparent;
	padding: 0;
	border-radius: 0;
	backdrop-filter: none;
}

.bento-large .proto-desc {
	font-size: 1rem;
	line-height: 1.5;
}

.bento-card .proto-link {
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	background: rgba(77, 184, 255, 0.9);
	padding: 8px 16px;
	border-radius: 6px;
	backdrop-filter: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
	align-self: flex-start;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bento-card .proto-link:hover {
	color: #ffffff;
	background: rgba(108, 244, 214, 0.9);
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(108, 244, 214, 0.4);
}

/* Bento Card Tags */
.bento-card .proto-tags {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
	transition: all 0.3s ease;
}

.bento-card .tag {
	font-size: 0.6rem;
	letter-spacing: 0.5px;
	padding: 4px 8px;
	border-radius: 12px;
	background: rgba(15, 31, 41, 0.9);
	border: 1px solid #2a607d;
	color: #b8c9d4;
	font-weight: 700;
	backdrop-filter: blur(4px);
}

/* Enhanced Hover Animations */
.bento-card:hover {
	transform: translateY(-16px) scale(1.03);
	box-shadow: 0 25px 80px -20px rgba(77, 184, 255, 0.5), 0 0 0 1px rgba(77, 184, 255, 0.3);
	border-color: #4db8ff;
}

.bento-card:hover .media {
	filter: brightness(1.15) saturate(1.2);
	transform: scale(1.08);
}

.bento-card:hover .proto-tags {
	transform: translateY(-6px);
}

.bento-card:hover .proto-tags .tag {
	background: rgba(77, 184, 255, 0.2);
	border-color: #4db8ff;
	color: #ffffff;
	transform: scale(1.05);
}

.bento-card:hover .proto-link {
	transform: translateX(12px);
	color: #6cf4d6;
	text-shadow: 0 0 8px rgba(108, 244, 214, 0.3);
}

/* 3D Parallax Effect */
.bento-card {
	perspective: 1000px;
	transform-style: preserve-3d;
}

.bento-card:hover {
	transform: translateY(-16px) scale(1.03) rotateX(3deg) rotateY(3deg);
}

/* Micro-animations for tags */
.bento-card .tag {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bento-card:hover .tag:nth-child(1) {
	animation: tagFloat 0.6s ease-out 0.1s;
}

.bento-card:hover .tag:nth-child(2) {
	animation: tagFloat 0.6s ease-out 0.2s;
}

.bento-card:hover .tag:nth-child(3) {
	animation: tagFloat 0.6s ease-out 0.3s;
}

@keyframes tagFloat {
	0% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-8px) scale(1.1); }
	100% { transform: translateY(-4px) scale(1.05); }
}

/* Enhanced link animation */
.bento-card .proto-link::after {
	content: "→";
	margin-left: 4px;
	transition: transform 0.3s ease;
}

.bento-card:hover .proto-link::after {
	transform: translateX(4px);
}

/* Responsive Bento Grid */
@media (max-width: 1200px) {
	.bento-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 180px;
		gap: 12px;
	}
	
	.bento-large {
		grid-column: span 2;
		grid-row: span 2;
	}
	
	.bento-wide {
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media (max-width: 860px) {
	.bento-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 240px;
		gap: 16px;
	}
	
	.bento-large,
	.bento-wide,
	.bento-tall,
	.bento-normal {
		grid-column: span 1;
		grid-row: span 1;
	}
	
	.bento-card .media {
		height: 50%;
	}
	
	/* Convert filter tabs to dropdown on mobile */
	.filter-tabs {
		position: relative;
		display: inline-block;
		width: 100%;
		max-width: 300px;
		margin: 20px auto 0;
	}
	
	.filter-tabs::before {
		content: "Filter by category";
		display: block;
		font-size: 0.9rem;
		color: var(--text-dim);
		margin-bottom: 8px;
		text-align: center;
	}
	
	.filter-btn {
		display: none;
		width: 100%;
		text-align: center;
		margin-bottom: 4px;
	}
	
	.filter-btn.active {
		display: block;
		position: relative;
	}
	
	.filter-btn.active::after {
		content: "▼";
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.8rem;
		transition: transform 0.3s ease;
	}
	
	.filter-tabs:hover .filter-btn,
	.filter-tabs:focus-within .filter-btn {
		display: block;
	}
	
	.filter-tabs:hover .filter-btn.active::after,
	.filter-tabs:focus-within .filter-btn.active::after {
		transform: translateY(-50%) rotate(180deg);
	}
}

@media (max-width: 560px) {
	.bento-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	
	.bento-card {
		border-radius: 16px;
	}
	
	.bento-card .proto-content {
		padding: 12px 16px;
	}
	
	.bento-card h4 {
		font-size: 1rem;
	}
	
	.bento-card .proto-desc {
		font-size: 0.8rem;
	}
}

.cards {display:grid;gap:28px;}
.cards.three {grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.cards.four {grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.cards.five {grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* Force services cards to 2x2 on desktop */
.services .cards.four {grid-template-columns:repeat(2,minmax(0,1fr));}

/* Compare Section */
.compare .section-head {max-width:1100px;margin-left:auto;margin-right:auto;text-align:center;background:#183244cc;backdrop-filter:blur(6px);border:1px solid #24485b;border-radius:24px;padding:22px 20px;box-shadow:0 12px 28px -12px #00000099;position:relative;overflow:hidden;}
.compare .section-head::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');background-size:cover;background-position:center;opacity:.15;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1);}
.compare .section-head.mini {margin-top:56px;}
.compare-row {display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:26px;align-items:stretch;width:min(1200px,100%);margin:22px auto 0;}
.compare-card {min-height:0;padding:34px 30px;}
.compare-card.bad {background:linear-gradient(165deg,rgba(58,36,48,.72),rgba(33,19,27,.72));border-color:#5a3a47;position:relative;}
.compare-card.bad::after {content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_fedcbbe9d5ea42fb8e5ac02da206f11d~mv2.png');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 
.compare-card.good {background:linear-gradient(165deg,rgba(27,58,45,.72),rgba(15,35,28,.72));border-color:#2b6c56;position:relative;}
.compare-card.good::after {content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_99b8b696147b4e7a948bc39eaa76617b~mv2.png');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 

/* Subtle constant zoom animation for compare overlays */
@keyframes compareZoom {
	0% { transform: scale(1); }
	50% { transform: scale(1.06); }
	100% { transform: scale(1); }
}
.compare-card.bad::after,.compare-card.good::after {animation: compareZoom 16s ease-in-out infinite;transform-origin:center center;will-change:transform;}
@media (prefers-reduced-motion: reduce){
	.compare-card.bad::after,.compare-card.good::after {animation:none;}
}
.compare-label {font-size:1.2rem;font-weight:800;letter-spacing:.6px;margin-bottom:8px;}
.compare-points {margin-top:10px;display:flex;flex-direction:column;gap:10px;padding-left:18px;}
.compare-points li {color:var(--text-dim);line-height:1.55;}
@media (max-width: 700px){
	/* keep two cards visible side-by-side via horizontal scroll */
	.compare-row {grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:8px;}
	.compare-card {scroll-snap-align:start;}
}

/* On very small mobile, fit both cards without scroll */
@media (max-width: 560px){
	.compare .section-head {padding:16px 14px;}
	.compare .section-head.mini {margin-top:36px;}
	.compare-row {grid-auto-flow:initial;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	.compare-card {padding:18px 14px;}
	.compare-label {font-size:.98rem;}
	.compare-points {gap:8px;padding-left:14px;}
	.compare-points li {font-size:.86rem;line-height:1.45;}
}

/* VibeCoding card ("bad") — align right-to-left */
.compare-card.bad {text-align:right;}
.compare-card.bad .compare-points {padding-left:0;padding-right:18px;direction: rtl;}
@media (max-width: 560px){
	.compare-card.bad .compare-points {padding-left:0;padding-right:14px;}
}

/* Why Xhaka section — minimal */
.why-xhaka .section-head {max-width:900px;margin-left:auto;margin-right:auto;text-align:center;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.why-xhaka .section-head.mini {margin-top:40px;}
.why-xhaka .why-content {width:min(900px,100%);margin:14px auto 0;display:flex;flex-direction:column;gap:12px;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.why-xhaka .lead {color:var(--text);font-size:1.05rem;line-height:1.6;}
.why-xhaka .list-title {margin-top:8px;font-size:1rem;letter-spacing:.4px;color:var(--text-dim);}
.why-xhaka .why-points {list-style:none;margin-top:8px;padding-left:0;display:flex;flex-direction:column;gap:10px;}
.why-xhaka .why-points li {display:flex;gap:10px;align-items:flex-start;}
.why-xhaka .why-points li::before {content:"✓";color:#6cf4d6;line-height:1;margin-top:2px;}
.why-xhaka .li-title {font-weight:800;letter-spacing:.3px;}
.why-xhaka .li-desc {display:block;color:var(--text-dim);} 
@media (max-width: 560px){
	.why-xhaka .lead {font-size:1rem;}
}

/* Tools Mastery section */
.tools-mastery {padding:60px 0 10px;}
.tools-master {padding:40px 0 10px;}
.tools-master .tools-card {padding:14px 14px;width:min(1600px,95%);margin:0 auto;}
.card.tools-card {min-height:0;background:#000000;border:1px solid #333333;border-radius:16px;padding:14px 14px;gap:8px;box-shadow:0 10px 26px -14px #00000099;position:relative;overflow:hidden;}
.card.tools-card::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:transparent;}
.card.tools-card:hover {transform:none;box-shadow:0 10px 26px -14px #00000099;}
.tools-master .tools-title {text-align:center;font-size:clamp(1.3rem,1vw + 1.2rem,2rem);font-weight:800;letter-spacing:.4px;margin-bottom:8px;color:#ffffff;}
.tools-master .logo-scroller {display:flex;flex-wrap:wrap;gap:14px;padding:6px;background:transparent;border:0;border-radius:12px;justify-content:center;align-items:center;}
.tools-master .logo-scroller img {height:50px;width:50px;object-fit:contain;filter:brightness(1) contrast(1);opacity:1;scroll-snap-align:center;pointer-events:none;user-select:none;cursor:default;}
@media (max-width: 560px){
	.tools-mastery {padding:40px 0 30px;}
	.tools-master {padding:60px 0 14px;}
	.tools-master .tools-card {padding:12px;}
	.tools-master .logo-scroller {gap:12px;padding:4px;}
	.tools-master .logo-scroller img {height:40px;width:40px;}
}

/* GameStudio Section */
.gamestudio {padding:60px 0 40px;}
.gamestudio-container {width:min(1600px,95%);margin:0 auto;display:flex;justify-content:center;}
.gamestudio-card {position:relative;width:100%;max-width:none;height:400px;border-radius:32px;overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,0.4);transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;}
.gamestudio-card:hover {transform:translateY(-8px);box-shadow:0 30px 80px -20px rgba(77,184,255,0.3);}
.gamestudio-bg {position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.7) saturate(1.1);transform:scale(1.05);transition:transform 0.4s ease;}
.gamestudio-card:hover .gamestudio-bg {transform:scale(1.08);}
.gamestudio-overlay {position:absolute;inset:0;background:linear-gradient(135deg,rgba(14,26,36,0.8),rgba(14,26,36,0.4));backdrop-filter:blur(2px);}
.gamestudio-content {position:relative;z-index:2;text-align:center;color:var(--text);padding:40px;}
.gamestudio-content h3 {font-size:clamp(2rem,3vw,3.5rem);font-weight:800;letter-spacing:1px;margin-bottom:16px;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 12px rgba(0,0,0,0.3);}
.gamestudio-content p {font-size:clamp(1.2rem,2vw,1.8rem);color:var(--text-dim);margin-bottom:32px;font-weight:600;letter-spacing:0.5px;}
.gamestudio-cta {margin-top:24px;}
@media (max-width: 860px){
	.gamestudio-card {height:300px;}
	.gamestudio-content {padding:30px 20px;}
	.gamestudio-content h3 {font-size:clamp(1.8rem,4vw,2.5rem);}
	.gamestudio-content p {font-size:clamp(1rem,3vw,1.4rem);}
}
@media (max-width: 560px){
	.gamestudio-card {height:250px;}
	.gamestudio-content {padding:20px 16px;}
}

.card {background:linear-gradient(165deg,#183244,#132635);border:1px solid #24485b;border-radius:32px;padding:58px 50px;display:flex;flex-direction:column;gap:28px;position:relative;overflow:hidden;min-height:300px;box-shadow:0 20px 50px -16px #000000b0;transition:var(--transition-fast);} /* Cards más grandes para verse mejor */
.card::before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,#1d4760,#132635 60%);opacity:0;transition:var(--transition-fast);}
.card:hover {transform:translateY(-6px);box-shadow:0 18px 40px -16px #000000b0;}
.card:hover::before {opacity:1;}
.services .card.service,.compare .compare-card {cursor:default;}
.services .card.service:hover,.compare .compare-card:hover {transform:none;box-shadow:0 20px 50px -16px #000000b0;}
.services .card.service:hover::before,.compare .compare-card:hover::before {opacity:0;}
.card h3 {font-size:1.55rem;letter-spacing:.65px;font-weight:700;}
.card p {color:var(--text-dim);font-size:1.12rem;line-height:1.62;}

/* HUD overlay only for first services card */
.card.service.layered-hud {position:relative;}
.card.service.layered-hud::after {content:"";position:absolute;inset:-2px;border-radius:32px;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_b6bf603ca8344d72b42ad468eb77d63d~mv2.gif');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 

/* CHIA overlay only for second services card */
.card.service.layered-chia {position:relative;}
.card.service.layered-chia::after {content:"";position:absolute;inset:-2px;border-radius:32px;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_ea153b932bd04d60902f0d112a13c22c~mv2.gif');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 

/* UNITY overlay only for third services card */
.card.service.layered-unity {position:relative;}
.card.service.layered-unity::after {content:"";position:absolute;inset:-2px;border-radius:32px;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_4ad6c2c4a91b4beabf7b14fe779d11a0~mv2.gif');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 

/* KEE overlay only for 4th services card */
.card.service.layered-kee {position:relative;}
.card.service.layered-kee::after {content:"";position:absolute;inset:-2px;border-radius:32px;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_830e69f3ffb0421abe679306aa00a1a5~mv2.gif');background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:brightness(1.05) saturate(1.05);} 

/* Proto card con media */
.card.proto.has-media {display:grid;grid-template-columns:1fr;align-items:stretch;position:relative;}
.card.proto.has-media .media {overflow:hidden;position:relative;background-size:cover;background-position:center;filter:brightness(.95) saturate(1.05);} 
.card.proto.has-media .media::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0e1a2400 35%,#0e1a2430 100%);} 
.card.proto.has-media .proto-content {display:flex;flex-direction:column;gap:8px;}
.card.proto.has-media h4 {font-size:1.06rem;letter-spacing:.55px;font-weight:800;background:linear-gradient(90deg,#55c7ff,#6cf4d6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.card.proto.has-media p {font-size:.84rem;line-height:1.45;color:var(--text-dim);} 
.card.proto.has-media .proto-link {margin-top:auto;align-self:flex-start;font-weight:700;font-size:.78rem;letter-spacing:.5px;color:var(--accent);padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;transition:var(--transition-fast);} 
.card.proto.has-media .proto-link:hover {text-decoration:underline;} 

/* Nuevas tarjetas proto con íconos y colores */
.card.proto.has-media {padding:0;gap:0;}
/* Make prototype cards perfectly square with image band on top */
.card.proto.has-media {aspect-ratio:1/1;min-height:0;grid-template-rows:42% 1fr;overflow:hidden;}
.card.proto.has-media .media {height:100%; border-radius:32px 32px 0 0;}
.card.proto.has-media .proto-content {padding:12px 14px 12px;}

/* Tags row */
/* Tags overlayed on the image */
.card.proto.has-media .proto-tags {position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:6px;z-index:2;}
.card.proto.has-media .proto-tags .tag {font-size:.62rem;letter-spacing:.6px;padding:5px 8px;border-radius:999px;background:#0f1f29cc;border:1px solid #2a607d;color:#b8c9d4;font-weight:800;backdrop-filter:blur(4px);} 
.card.proto.has-media.layered-gif {position:relative;}
.card.proto.has-media.layered-gif::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_f44de6f3ca1d4d68bd2ff4a37b5503e8~mv2.png');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
/* Specific overlay for EasyEcom card */
.card.proto.has-media.layered-gif-ecom {position:relative;}
.card.proto.has-media.layered-gif-ecom::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_2022c1bd2adf4a1fb75e3dc1cf0a7eb8~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
/* Specific overlay for JS Studio first card */
.card.proto.has-media.layered-gif-jsstudio {position:relative;}
.card.proto.has-media.layered-gif-jsstudio::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_00d00c23593445e29a4088c00c977c05~mv2.png');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
.card.proto.has-media.layered-gif-personaia {position:relative;}
.card.proto.has-media.layered-gif-personaia::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_07d7b66a38ee413f93eec3fcea44c337~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
.card.proto.has-media.layered-gif-substrack {position:relative;}
.card.proto.has-media.layered-gif-substrack::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_33a7330a3a894e1c907e42dfadd377d8~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);}
.card.proto.has-media.layered-gif-easystore {position:relative;}
.card.proto.has-media.layered-gif-easystore::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_21991121d504499d95942df15c8f5b0e~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
.card.proto.has-media.layered-gif-wenxhakashow {position:relative;}
.card.proto.has-media.layered-gif-wenxhakashow::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_4b876f47b1134a70a5f7ab28ad693703~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);}
.card.proto.has-media.layered-gif-quiz {position:relative;}
.card.proto.has-media.layered-gif-quiz::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_2cefd5b41a2847db9fba0eb118704950~mv2.png');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);}
.card.proto.has-media.layered-gif-techstore {position:relative;}
.card.proto.has-media.layered-gif-techstore::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_9c4d492f689f4c9aa1c6d616bd552db1~mv2.gif');background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1) blur(.2px);} 
.card.proto.has-media .proto-icon {font-size:2.8rem;line-height:1;margin-bottom:4px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}
.card.proto.has-media .proto-badge {display:inline-block;font-size:.7rem;letter-spacing:.8px;padding:4px 12px;font-weight:700;border-radius:999px;text-transform:uppercase;background:#24485b;color:var(--text-dim);border:1px solid #2c5f78;align-self:flex-start;}
.card.proto.has-media .proto-badge.showcase {background:#1a4d6f;border-color:#2a7aaa;color:#6CB4FF;}
.card.proto.has-media .proto-desc {font-size:.84rem;opacity:.85;}

/* Colores específicos por tarjeta */
.card.proto.color-blue {background:linear-gradient(165deg,#1a456d,#132a45);border-color:#2a6699;}
.card.proto.color-blue h4 {background:linear-gradient(90deg,#6CB4FF,#4da3e8);-webkit-background-clip:text;background-clip:text;color:transparent;}
.card.proto.color-blue .proto-link {border-color:#2a6699;background:#1a456dcc;}
.card.proto.color-blue .proto-link:hover {background:#2a6699;}

.card.proto.color-lavender {background:linear-gradient(165deg,#3d2a5d,#2a1f3d);border-color:#5a4080;}
.card.proto.color-lavender h4 {background:linear-gradient(90deg,#D99CFF,#b880dd);-webkit-background-clip:text;background-clip:text;color:transparent;}
.card.proto.color-lavender .proto-link {border-color:#5a4080;background:#3d2a5dcc;}
.card.proto.color-lavender .proto-link:hover {background:#5a4080;}
.card.proto.color-lavender .proto-icon.game-icon {transition:transform .3s ease;}
.card.proto.color-lavender:hover .proto-icon.game-icon {transform:rotate(8deg);}

.card.proto.color-pink {background:linear-gradient(165deg,#5d2f3a,#3d1f28);border-color:#804050;}
.card.proto.color-pink h4 {background:linear-gradient(90deg,#FFAAA6,#ff8882);-webkit-background-clip:text;background-clip:text;color:transparent;}
.card.proto.color-pink .proto-link {border-color:#804050;background:#5d2f3acc;}
.card.proto.color-pink .proto-link:hover {background:#804050;} 

@media (max-width: 860px){
	.cards.five {grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
    /* On smaller screens stack services cards */
    .services .cards.four {grid-template-columns:1fr;}
}
@media (max-width: 560px){
	.cards.five {grid-template-columns:1fr;}
	.card.proto.has-media {padding:24px 28px;}
	.card.proto.has-media .proto-icon {font-size:2.4rem;}
}

/* Games */
.game-grid {display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.game-card {background:#132a38;border:1px solid #254455;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-height:300px;position:relative;box-shadow:0 10px 28px -10px #00000090;transition:var(--transition-fast);}
.game-card:hover {transform:translateY(-6px);}
.game-card .media {flex:1;background-size:cover;background-position:center;position:relative;filter:brightness(.85);}
.game-card .info {padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;}
.game-card h3 {font-size:1.05rem;}
.badge {display:inline-block;font-size:.65rem;letter-spacing:.7px;padding:5px 9px;font-weight:700;border-radius:999px;text-transform:uppercase;background:#24485b;color:var(--text-dim);border:1px solid #2c5f78;text-decoration:none;transition:var(--transition-fast);}
.badge:hover {text-decoration:none;transform:translateY(-1px);}
.badge.playable {background:#0d3d2f;border-color:#1d6e56;color:#6cf4d6;}
.badge.playable:hover {background:#0f4a37;border-color:#2a7d65;color:#7df5e6;}
.badge.dev {background:#3a2d13;border-color:#7d6322;color:#ffce3d;}

/* About - Redesigned */
.about-header-container {
	background:linear-gradient(135deg,#1a3a4dcc,#0f2a3acc);
	backdrop-filter:blur(18px) saturate(140%);
	border:1px solid #2a5a6b;
	border-radius:32px;
	padding:48px 40px;
	margin:0 auto 60px;
	max-width:800px;
	text-align:center;
	box-shadow:0 20px 60px -20px rgba(0,0,0,0.4);
	position:relative;
	overflow:hidden;
}

.about-header-container::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:4px;
	background:var(--gradient-accent);
	opacity:0.8;
}

.about-header-container::after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image:url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	opacity:0.08;
	filter:brightness(1.5) saturate(0.8);
	pointer-events:none;
	z-index:0;
}


.about-subtitle {
	color:var(--text-dim);
	font-size:1.3rem;
	line-height:1.6;
	max-width:600px;
	margin:0 auto;
	font-weight:500;
	letter-spacing:0.3px;
	position:relative;
	z-index:1;
}

.about-cards-grid {display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:1200px;margin:0 auto;}

.about-card {background:linear-gradient(145deg,#1a3a4d,#0f2a3a);border:1px solid #2a5a6b;border-radius:24px;padding:40px 32px;position:relative;overflow:hidden;transition:var(--transition-fast);box-shadow:0 8px 32px -8px rgba(0,0,0,0.3);}

.about-card::before {content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-accent);opacity:0;transition:var(--transition-fast);}
.about-card:hover::before {opacity:1;}
.about-card:hover {transform:translateY(-8px);box-shadow:0 16px 48px -12px rgba(0,0,0,0.4);}

.about-card h3 {font-size:1.4rem;font-weight:700;margin-bottom:16px;color:var(--text);letter-spacing:0.5px;}
.about-card p {color:var(--text-dim);line-height:1.7;font-size:1rem;}

/* Specific card themes */
.about-card.philosophy {border-color:#4a7c8a;}
.about-card.experience {border-color:#6b8a5a;}
.about-card.mission {border-color:#8a6b5a;}

/* Metrics - Redesigned */
.metrics-redesigned {width:min(1600px,95%);margin:60px auto 40px;}
.metrics-container {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;}

.metric-card {background:linear-gradient(135deg,#1e3a4a,#0f2a3a);border:1px solid #2a5a6b;border-radius:20px;padding:32px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;transition:var(--transition-fast);box-shadow:0 6px 24px -6px rgba(0,0,0,0.2);}

.metric-card::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 0%,rgba(77,184,255,0.1),transparent 70%);opacity:0;transition:var(--transition-fast);}
.metric-card:hover::before {opacity:1;}
.metric-card:hover {transform:translateY(-6px);box-shadow:0 12px 36px -8px rgba(0,0,0,0.3);}

.metric-icon {font-size:2.5rem;margin-bottom:16px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
.metric-content {display:flex;flex-direction:column;gap:8px;}
.metric-number {font-size:1.8rem;font-weight:800;background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:1px;}
.metric-label {color:var(--text-dim);font-size:0.9rem;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;}

@media (max-width: 768px) {
	.about-cards-grid {grid-template-columns:1fr;gap:24px;}
	.about-card {padding:32px 24px;}
	.metrics-container {grid-template-columns:repeat(2,1fr);gap:16px;}
	.metric-card {padding:24px 16px;}
}

/* Contact - Compact */
.contact-compact {position:relative;text-align:center;padding:40px 0 60px;}
.contact-compact-inner {background:linear-gradient(145deg,#183244,#11242f);border:1px solid #24485b;border-radius:24px;padding:32px 24px;display:flex;flex-direction:column;gap:18px;align-items:stretch;justify-content:flex-start;box-shadow:0 12px 32px -12px #000000a8;position:relative;overflow:hidden;width:min(1600px,95%);margin:0 auto;}
.contact-compact-inner::before {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');background-size:cover;background-position:center;opacity:.12;mix-blend-mode:screen;filter:brightness(1.1) saturate(1.1);}
.contact-content {flex:1;text-align:left;}
.contact-embed {width:100%;}
.contact-embed iframe {width:100%;height:600px;border:0;border-radius:16px;background:#0b151c;}
.contact-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.contact-content h2 {font-size:clamp(1.4rem,1.1vw + 1.2rem,2rem);margin-bottom: 0;}
.contact-content p {color:var(--text-dim);line-height:1.4;margin-bottom:12px;font-size:0.95rem;}

/* Chat Activation Button */
.chat-activation-btn {
	background: var(--gradient-accent);
	color: #041a26;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: var(--radius);
	border: 1px solid #55c7ff;
	cursor: pointer;
	transition: var(--transition-fast);
	position: relative;
	overflow: hidden;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	white-space: nowrap;
	box-shadow: 0 4px 18px -4px rgba(77, 184, 255, 0.3);
}

.chat-activation-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -8px rgba(77, 184, 255, 0.5);
	filter: brightness(1.08);
}

.chat-activation-btn:active {
	transform: translateY(0);
}
.contact-email {margin-top:8px;}
.email-link {color:var(--accent);font-weight:600;text-decoration:none;font-size:1rem;transition:all 0.3s ease;}
.email-link:hover {color:#6cf4d6;text-decoration:underline;}

/* Social Links - Compact */
.social-links-compact {display:flex;gap:16px;align-items:center;}
.social-link-compact {display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(24,50,68,0.4);border:1px solid #2a5a6b;border-radius:12px;text-decoration:none;color:var(--text-dim);transition:var(--transition-fast);position:relative;overflow:hidden;}
.social-link-compact::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 0%,rgba(77,184,255,0.1),transparent 70%);opacity:0;transition:var(--transition-fast);}
.social-link-compact:hover::before {opacity:1;}
.social-link-compact:hover {transform:translateY(-2px);color:var(--text);border-color:#4db8ff;box-shadow:0 6px 16px -6px rgba(77,184,255,0.3);}
.social-link-compact svg {width:20px;height:20px;transition:var(--transition-fast);}
.social-link-compact:hover svg {transform:scale(1.1);}
.social-link-compact span {font-size:0.8rem;font-weight:600;letter-spacing:0.3px;}


/* Social link specific colors */
.social-link.linkedin:hover {border-color:#0077b5;box-shadow:0 8px 24px -8px rgba(0,119,181,0.3);}
.social-link.facebook:hover {border-color:#1877f2;box-shadow:0 8px 24px -8px rgba(24,119,242,0.3);}
.social-link.x:hover {border-color:#000000;box-shadow:0 8px 24px -8px rgba(0,0,0,0.3);}
.social-link.instagram:hover {border-color:#e4405f;box-shadow:0 8px 24px -8px rgba(228,64,95,0.3);}
.social-link.youtube:hover {border-color:#ff0000;box-shadow:0 8px 24px -8px rgba(255,0,0,0.3);}

/* Social link compact specific colors */
.social-link-compact.linkedin:hover {border-color:#0077b5;box-shadow:0 6px 16px -6px rgba(0,119,181,0.3);}
.social-link-compact.facebook:hover {border-color:#1877f2;box-shadow:0 6px 16px -6px rgba(24,119,242,0.3);}
.social-link-compact.x:hover {border-color:#000000;box-shadow:0 6px 16px -6px rgba(0,0,0,0.3);}
.social-link-compact.youtube:hover {border-color:#ff0000;box-shadow:0 6px 16px -6px rgba(255,0,0,0.3);}

@media (max-width: 768px) {
	.social-links {gap:16px;}
	.social-link {padding:16px 20px;min-width:80px;}
	.social-link svg {width:24px;height:24px;}
	.social-link span {font-size:0.75rem;}
	
	/* Contact compact responsive */
	.contact-compact-inner {text-align: center;gap: 16px;padding: 24px 20px;}
	.contact-embed iframe {height: 700px;}
	
	.contact-content {
		text-align: center;
	}
	
	.social-links-compact {
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (min-width: 1100px) {
	/* On large desktop, make chat shorter to look horizontal-dominant */
	.contact-embed iframe {height: 500px;}
}

/* Footer */
.site-footer {margin-top:90px;padding:70px 0 40px;background:#0b151c;border-top:1px solid #1d3949;}
.footer-grid {width:min(1600px,95%);margin:0 auto;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.footer-grid h4 {font-size:.85rem;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin-bottom:16px;}
.footer-grid ul {list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-grid a {font-size:.85rem;color:var(--text-dim);}
.footer-grid a:hover {color:var(--text);} 
.footer-base {width:min(1600px,95%);margin:50px auto 0;display:flex;justify-content:center;border-top:1px solid #1d3949;padding-top:24px;}
.footer-base p {font-size:.75rem;color:#5d7788;}

/* Utilities */
.more-link-wrap {margin-top:34px;text-align:center;}
.more-link {color:var(--accent);font-weight:600;}
.more-link:hover {text-decoration:none;filter:brightness(1.15);} 

/* Responsive */
@media (max-width: 1100px) {
	.main-nav {display:none;}
	.mobile-menu-toggle {display:inline-flex;}
	.lang-switch.desktop-only {display:none;}
}
@media (max-width: 860px){
	.hero {padding-top:130px;}
	.slide {min-height:620px;}
	.site-header .header-inner {gap:22px;padding:6px 14px;}
	.slide .content {padding:60px clamp(1.6rem,5vw,3.2rem);max-width:640px;gap:28px;}
	.slide h1,.slide h2 {font-size:clamp(2.2rem,3.2vw + 1.4rem,3.4rem);} 
	.slide p {font-size:clamp(1rem,1.2vw + .6rem,1.3rem);}
	.primary-cta {display:none;} /* Saves space on very small widths */
    .cards.three,.cards.four {gap:20px;}
    .card {padding:46px 38px;min-height:260px;}
    .services .card.service {min-height:280px;padding:28px 22px;}
	.card h3 {font-size:1.35rem;}
	.card p {font-size:1.02rem;}
	.carousel-dots button {width:44px;}
}
@media (max-width: 560px){
	.hero {padding-top:125px;}
	.slide {min-height:580px;}
	.slide .content {padding:54px 1.4rem 60px;gap:26px;}
	.slide h1,.slide h2 {font-size:clamp(2.1rem,9vw,3rem);} 
	.slide p {font-size:1.02rem;}
	.carousel-nav {width:46px;height:46px;font-size:1.5rem;}
    .section {padding:80px 0 60px;}
    .card {padding:38px 32px;min-height:240px;}
    .services .card.service {min-height:0;padding:24px 18px;}
	.card h3 {font-size:1.25rem;}
	.card p {font-size:.98rem;}
	.contact-inner {padding:70px 1.2rem;}
	
	/* Slide 5 (card 5) alignment on mobile */
	.slide[data-slide="4"] .content {text-align:left;align-items:flex-start;}
	.slide[data-slide="4"] .cta-group {justify-content:flex-start;}
	.slide[data-slide="4"] .bg {background-position:left center !important;}
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
	.slides {transition:none;}
	.carousel-nav,.btn,.card,.game-card {transition:none;}
}

/* Accessibility states */
:focus-visible {outline:2px solid var(--accent);outline-offset:4px;border-radius:6px;}

/* ============================
   INTERACTIVE MODAL SYSTEM
   ============================ */

/* Grid de Cards Interactivas - 3x1 Layout */
.interactive-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.interactive-card {
  position: relative;
  background: linear-gradient(165deg, #183244, #132635);
  border: 1px solid #24485b;
  border-radius: 24px;
  padding: 24px 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-height: 120px;
}

/* Only add cursor pointer for cards with modal functionality */
.interactive-card[data-modal] {
  cursor: pointer;
}

.interactive-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #4db8ff;
  box-shadow: 0 20px 60px -20px rgba(77, 184, 255, 0.4);
}

.card-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(77, 184, 255, 0.3), transparent 70%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.interactive-card:hover .card-glow {
  opacity: 1;
}

.card-gif-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.12;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.vibe-card .card-gif-overlay {
  background-image: url('https://static.wixstatic.com/media/df3c7f_fedcbbe9d5ea42fb8e5ac02da206f11d~mv2.png');
  background-size: cover;
  background-position: center;
}

.ai-card .card-gif-overlay {
  background-image: url('https://static.wixstatic.com/media/df3c7f_99b8b696147b4e7a948bc39eaa76617b~mv2.png');
  background-size: cover;
  background-position: center;
}

.card-gif-overlay.layered-hud {
  background-image: url('https://static.wixstatic.com/media/df3c7f_b6bf603ca8344d72b42ad468eb77d63d~mv2.gif');
  background-size: cover;
  background-position: center;
}

.card-gif-overlay.layered-chia {
  background-image: url('https://static.wixstatic.com/media/df3c7f_ea153b932bd04d60902f0d112a13c22c~mv2.gif');
  background-size: cover;
  background-position: center;
}

.card-gif-overlay.layered-unity {
  background-image: url('https://static.wixstatic.com/media/df3c7f_4ad6c2c4a91b4beabf7b14fe779d11a0~mv2.gif');
  background-size: cover;
  background-position: center;
}

.card-gif-overlay.layered-kee {
  background-image: url('https://static.wixstatic.com/media/df3c7f_830e69f3ffb0421abe679306aa00a1a5~mv2.gif');
  background-size: cover;
  background-position: center;
}

.interactive-card:hover .card-gif-overlay {
  opacity: 0.22;
}

.card-content {
  position: relative;
  z-index: 1;
}

.card-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.card-excerpt {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Hover expand animation for service cards */
.card-description {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              margin-top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.interactive-card:hover .card-description {
  max-height: 200px;
  opacity: 1;
  margin-top: 12px;
}

/* Ensure cards maintain consistent height during animation */
.interactive-card {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  transition: min-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.interactive-card:hover {
  min-height: 200px;
  padding: 32px 24px;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mobile touch support for expanding cards */
@media (max-width: 860px) {
  .interactive-card {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center;
  }
  
  .interactive-card.expanded {
    min-height: 280px;
    padding: 32px 24px;
    transform: scale(1.05);
    z-index: 10;
    position: relative;
    box-shadow: 0 25px 80px -20px rgba(77, 184, 255, 0.6);
    border-color: #4db8ff;
    margin: 0 -10px; /* Slight overlap to center the card */
  }
  
  .interactive-card.expanded .card-description {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
  }
  
  .interactive-card.expanded .card-glow {
    opacity: 1;
  }
  
  .interactive-card.expanded .card-gif-overlay {
    opacity: 0.25;
  }
  
  /* Focus state for better accessibility */
  .interactive-card:focus {
    outline: 2px solid #4db8ff;
    outline-offset: 4px;
    transform: scale(1.02);
  }
  
  .interactive-card:focus .card-description {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
  }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 17, 22, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 85vh;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-content {
  background: linear-gradient(145deg, #1a3a4d, #0f2a3a);
  border: 1px solid #2a5a6b;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.6);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(24, 50, 68, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid #2a5a6b;
  color: var(--text);
  font-size: 1.8rem;
  font-weight: 300;
  cursor: pointer;
  z-index: 10;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: #ff5f56;
  border-color: #ff5f56;
  transform: rotate(90deg);
}

/* Modal de Comparación (VibeCoding vs AI-Assisted) */
.modal-content.compare-modal {
  max-height: 90vh;
  overflow: hidden;
}

/* Enable scroll for comparison modal on mobile */
@media (max-width: 860px) {
  .modal-content.compare-modal {
    max-height: 95vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
  
  /* Adjust compare split for mobile scroll */
  .modal-content.compare-modal .compare-split {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }
  
  .modal-content.compare-modal .compare-side {
    padding: 20px 16px;
  }
  
  .modal-content.compare-modal .why-xhaka-section {
    margin: 20px 0;
  }
  
  .modal-container {
    max-height: 95vh;
  }
  
  /* Custom scrollbar for mobile modal */
  .modal-content.compare-modal::-webkit-scrollbar {
    width: 6px;
  }
  
  .modal-content.compare-modal::-webkit-scrollbar-track {
    background: rgba(24, 50, 68, 0.3);
    border-radius: 3px;
  }
  
  .modal-content.compare-modal::-webkit-scrollbar-thumb {
    background: rgba(77, 184, 255, 0.6);
    border-radius: 3px;
  }
  
  .modal-content.compare-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(77, 184, 255, 0.8);
  }
}

.compare-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 200px;
}

.compare-side {
  padding: 16px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compare-side.bad {
  background: linear-gradient(165deg, rgba(58, 36, 48, 0.85), rgba(33, 19, 27, 0.85));
  border-right: 2px solid #5a3a47;
}

.compare-side.good {
  background: linear-gradient(165deg, rgba(27, 58, 45, 0.85), rgba(15, 35, 28, 0.85));
}

.compare-side::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: screen;
  pointer-events: none;
}

.compare-side.bad::before {
  background-image: url('https://static.wixstatic.com/media/df3c7f_fedcbbe9d5ea42fb8e5ac02da206f11d~mv2.png');
  background-size: cover;
  background-position: center;
}

.compare-side.good::before {
  background-image: url('https://static.wixstatic.com/media/df3c7f_99b8b696147b4e7a948bc39eaa76617b~mv2.png');
  background-size: cover;
  background-position: center;
}

.compare-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.compare-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
  line-height: 1.3;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  margin-bottom: 2px;
}

.compare-content {
  padding: 0 8px;
}

.compare-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--text-dim);
}

.compare-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--accent);
}

.compare-list li::before {
  content: "✗";
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.compare-side.bad .compare-list li::before {
  color: #ff5f56;
}

.compare-side.good .compare-list li::before {
  content: "✓";
  color: #6cf4d6;
}

/* Why Xhaka Tech Section */
.why-xhaka-section {
  padding: 16px 20px;
  background: #183244cc;
  backdrop-filter: blur(6px);
  border: 1px solid #24485b;
  border-radius: 16px;
  margin: 12px;
  box-shadow: 0 8px 20px -8px #00000099;
  position: relative;
  overflow: hidden;
}

.why-xhaka-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url('https://static.wixstatic.com/media/df3c7f_56d0f33409c94838adc5b472973e4342~mv2.gif');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  mix-blend-mode: screen;
  filter: brightness(1.1) saturate(1.1);
}

.why-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  position: relative;
  z-index: 1;
}

.why-intro, .why-solution {
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--text-dim);
  text-align: center;
  position: relative;
  z-index: 1;
}

.why-different {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 8px 0 6px;
  color: var(--accent);
  text-align: center;
  position: relative;
  z-index: 1;
}

.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.why-list li {
  padding: 4px 8px;
  margin-bottom: 3px;
  background: rgba(24, 50, 68, 0.4);
  border: 1px solid #2a5a6b;
  border-radius: 6px;
  font-size: 0.7rem;
  line-height: 1.3;
}

.why-list li strong {
  color: var(--accent);
  font-weight: 700;
}

/* Modal de Servicio */
.service-modal-content {
  padding: 60px 50px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.modal-icon {
  font-size: 4rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  flex-shrink: 0;
}

.modal-title-group h3 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal-subtitle {
  font-size: 1.1rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.modal-body {
  display: grid;
  gap: 28px;
}

.modal-section h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--accent);
}

.modal-section p {
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 1rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.feature-item {
  padding: 16px;
  background: rgba(24, 50, 68, 0.4);
  border: 1px solid #2a5a6b;
  border-radius: 12px;
  text-align: center;
}

.feature-value {
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.feature-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.modal-cta-group {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.modal-cta {
  padding: 14px 32px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.modal-cta.primary {
  background: var(--gradient-accent);
  color: #041a26;
  border: 1px solid #55c7ff;
}

.modal-cta.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(77, 184, 255, 0.5);
}

.modal-cta.secondary {
  background: rgba(24, 50, 68, 0.6);
  color: var(--text);
  border: 1px solid #2a5a6b;
}

.modal-cta.secondary:hover {
  background: #24475c;
  border-color: #4db8ff;
}

/* Responsive */
@media (max-width: 860px) {
  .compare-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  
  .compare-side.bad {
    border-right: none;
    border-bottom: 2px solid #5a3a47;
  }
  
  .compare-side {
    padding: 40px 30px;
  }
  
  .service-modal-content {
    padding: 40px 30px;
  }
  
  .interactive-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .interactive-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .modal-container {
    max-height: 92vh;
  }
  
  .compare-side {
    padding: 32px 24px;
  }
  
  .service-modal-content {
    padding: 32px 24px;
  }
  
  .modal-header {
    flex-direction: column;
  }
  
  .modal-icon {
    font-size: 3rem;
  }
  
  .modal-title-group h3 {
    font-size: 1.6rem;
  }
  
  .modal-cta-group {
    flex-direction: column;
  }
  
  .modal-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Iframe Modal Styles */
.modal-content.iframe-modal {
  max-width: 95vw;
  max-height: 95vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.iframe-container {
  width: 100%;
  height: 100%;
  min-height: 80vh;
  position: relative;
  background: #0b151c;
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: #0b151c;
  flex: 1;
  min-height: 80vh;
}

/* Responsive iframe modal */
@media (max-width: 860px) {
  .modal-content.iframe-modal {
    max-width: 98vw;
    max-height: 98vh;
    margin: 10px;
  }
  
  .iframe-container {
    min-height: 70vh;
  }
  
  .iframe-container iframe {
    min-height: 70vh;
  }
  
  .contact-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .chat-activation-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .iframe-container {
    min-height: 60vh;
  }
  
  .iframe-container iframe {
    min-height: 60vh;
  }
  
  .chat-activation-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}